improve(plugin): support macro renderer hook

libs/src/LSPlugin.core.ts

@@ -240,7 +240,12 @@ function initProviderHandlers (pluginLocal: PluginLocal) {
   pluginLocal.on(_('ui'), (ui: UIOptions) => {
     pluginLocal._onHostMounted(() => {
       // safe template
-      ui.template = DOMPurify.sanitize(ui.template)
+      ui.template = DOMPurify.sanitize(
+        ui.template, {
+          ADD_TAGS: ['iframe'],
+          ALLOW_UNKNOWN_PROTOCOLS: true,
+          ADD_ATTR: ['allow', 'src', 'allowfullscreen', 'frameborder', 'scrolling']
+        })
 
       pluginLocal._dispose(
         setupInjectedUI.call(pluginLocal,

libs/src/LSPlugin.ts

@@ -195,10 +195,11 @@ export interface IAppProxy {
     action: (e: IHookEvent & { page: string }) => void
   ) => void
 
-  // events
+  // hook events
   onCurrentGraphChanged: IUserHook
   onThemeModeChanged: IUserHook<{ mode: 'dark' | 'light' }>
   onBlockRendererSlotted: IUserSlotHook<{ uuid: BlockUUID }>
+  onMacroRendererSlotted: IUserSlotHook<{ payload: { arguments: Array<string>, uuid: string, [key: string]: any } }>
   onPageHeadActionsSlotted: IUserSlotHook
   onRouteChanged: IUserHook<{ path: string, template: string }>
   onSidebarVisibleChanged: IUserHook<{ visible: boolean }>

libs/src/helpers.ts

@@ -214,10 +214,12 @@ export function setupInjectedUI (
   attrs: Record<string, any>
 ) {
   const pl = this
+  let slot = ''
   let selector = ''
 
   if ('slot' in ui) {
-    selector = `#${ui.slot}`
+    slot = ui.slot
+    selector = `#${slot}`
   } else {
     selector = ui.path
   }
@@ -228,9 +230,10 @@ export function setupInjectedUI (
     return
   }
 
+  const id = `${ui.key}-${slot}-${pl.id}`
   const key = `${ui.key}-${pl.id}`
 
-  let el = document.querySelector(`div[data-injected-ui="${key}"]`) as HTMLElement
+  let el = document.querySelector(`#${id}`) as HTMLElement
 
   if (el) {
     el.innerHTML = ui.template
@@ -238,6 +241,7 @@ export function setupInjectedUI (
   }
 
   el = document.createElement('div')
+  el.id = id
   el.dataset.injectedUi = key || ''
 
   // TODO: Support more

src/electron/electron/core.cljs

@@ -83,11 +83,12 @@
     protocol LSP_SCHEME
     (fn [^js request callback]
       (let [url (.-url request)
-            [URL ROOT] (if (string/starts-with? url PLUGIN_URL)
+            url' ^js (js/URL. url)
+            [_ ROOT] (if (string/starts-with? url PLUGIN_URL)
                          [PLUGIN_URL PLUGINS_ROOT]
                          [STATIC_URL js/__dirname])
 
-            path' (string/replace url URL "")
+            path' (.-pathname url')
             path' (js/decodeURIComponent path')
             path' (.join path ROOT path')]
 
@@ -232,6 +233,7 @@
         protocol (bean/->js [{:scheme     LSP_SCHEME
                               :privileges {:standard        true
                                            :secure          true
+                                           :bypassCSP       true
                                            :supportFetchAPI true}}]))
       (.on app "second-instance"
            (fn [_event _commandLine _workingDirectory]

src/main/frontend/components/block.cljs

@@ -28,6 +28,8 @@
             [frontend.extensions.zotero :as zotero]
             [frontend.format.block :as block]
             [frontend.format.mldoc :as mldoc]
+            [frontend.components.plugins :as plugins]
+            [frontend.handler.plugin :as plugin-handler]
             [frontend.handler.block :as block-handler]
             [frontend.handler.dnd :as dnd]
             [frontend.handler.editor :as editor-handler]
@@ -1173,6 +1175,10 @@
             :else                       ;TODO: maybe collections?
             nil))
 
+        (and plugin-handler/lsp-enabled? (= name "renderer"))
+        (if-let [block-uuid (str (:block/uuid config))]
+          (plugins/hook-ui-slot :macro-renderer-slotted (assoc options :uuid block-uuid)))
+
         (get @macro/macros name)
         ((get @macro/macros name) config options)
 

src/main/frontend/components/plugins.css

@@ -199,10 +199,12 @@
   }
 }
 
-body {
-  &[data-page=page] {
-    .lsp-hook-ui-slot {
-      @apply flex px-1 opacity-30 hover:opacity-50;
+.block-content {
+  .lsp-hook-ui-slot {
+    display: flex;
+
+    [data-injected-ui] {
+      display: inline-flex;
     }
   }
-}
+}