improve(plugin): reset option for slot container

libs/src/LSPlugin.ts

@@ -34,6 +34,7 @@ export type UIBaseOptions = {
   style?: CSS.Properties
   attrs?: Record<string, string>
   close?: 'outside' | string
+  reset?: boolean // reset slot content or not
 }
 
 export type UIPathIdentity = {

libs/src/helpers.ts

@@ -243,8 +243,7 @@ export function setupInjectedUI (
   let float: boolean
 
   const pl = this
-  const id = `${ui.key}-${slot}-${pl.id}`
-  const key = `${ui.key}-${pl.id}`
+
 
   if ('slot' in ui) {
     slot = ui.slot
@@ -255,6 +254,9 @@ export function setupInjectedUI (
     float = true
   }
 
+  const id = `${ui.key}-${slot}-${pl.id}`
+  const key = `${ui.key}--${pl.id}`
+
   const target = float ? document.body : (selector && document.querySelector(selector))
   if (!target) {
     console.error(`${this.debugTag} can not resolve selector target ${selector}`)
@@ -270,7 +272,7 @@ export function setupInjectedUI (
         ADD_ATTR: ['allow', 'src', 'allowfullscreen', 'frameborder', 'scrolling']
       })
   } else { // remove ui
-    injectedUIEffects.get(key)?.call(null)
+    injectedUIEffects.get(id)?.call(null)
     return
   }
 
@@ -334,6 +336,15 @@ export function setupInjectedUI (
         pl._setupDraggableContainer(el, { key, close: () => teardownUI(), title: attrs?.title }))
   }
 
+  if (!!slot && ui.reset) {
+    const exists = Array.from(target.querySelectorAll('[data-injected-ui]'))
+      .map((it: HTMLElement) => it.id)
+
+    exists?.forEach((exist: string) => {
+      injectedUIEffects.get(exist)?.call(null)
+    })
+  }
+
   target.appendChild(el);
 
   // TODO: How handle events
@@ -354,11 +365,11 @@ export function setupInjectedUI (
 
   teardownUI = () => {
     disposeFloat?.()
-    injectedUIEffects.delete(key)
+    injectedUIEffects.delete(id)
     target!.removeChild(el)
   }
 
-  injectedUIEffects.set(key, teardownUI)
+  injectedUIEffects.set(id, teardownUI)
   return teardownUI
 }
 

src/main/frontend/components/plugins.cljs

@@ -351,12 +351,13 @@
 (rum/defc hook-ui-slot
   ([type payload] (hook-ui-slot type payload nil))
   ([type payload opts]
-   (let [id (str "slot__" (util/rand-str 8))]
+   (let [rs (util/rand-str 8)
+         id (str "slot__" rs)]
      (rum/use-effect!
        (fn []
          (plugin-handler/hook-plugin-app type {:slot id :payload payload} nil)
          #())
-       [])
+       [id])
      [:div.lsp-hook-ui-slot
       (merge opts {:id id})])))
 

src/main/frontend/components/plugins.css

@@ -465,7 +465,7 @@ html[data-theme='dark'] {
 
 .block-content {
   .lsp-hook-ui-slot {
-    display: flex;
+    display: inline-flex;
 
     [data-injected-ui] {
       display: inline-flex;