@threadlabs/looma 0.1.17 → 0.1.18

package/vue/editor/index.js

@@ -16,73 +16,86 @@ import {
   shallowRef,
   watchEffect
 } from "vue";
+function createSuggestionMenuAdapter(tag, name, eventPrefix) {
+  return defineComponent({
+    name,
+    inheritAttrs: false,
+    props: {
+      open: { type: Boolean, default: false },
+      query: { type: String, default: "" },
+      items: { type: Array, default: () => [] },
+      selectedIndex: { type: Number, default: 0 },
+      anchorRect: { type: Object, default: null },
+      loading: { type: Boolean, default: false }
+    },
+    setup(props, { attrs }) {
+      const elementRef = shallowRef(null);
+      watchEffect(() => {
+        const element = elementRef.value;
+        if (!element) return;
+        if (element.open !== props.open) element.open = props.open;
+        if (element.query !== props.query) element.query = props.query;
+        if (element.items !== props.items) element.items = props.items;
+        if (element.selectedIndex !== props.selectedIndex) element.selectedIndex = props.selectedIndex;
+        if (element.anchorRect !== props.anchorRect) element.anchorRect = props.anchorRect;
+        if (element.loading !== void 0 && element.loading !== props.loading) {
+          element.loading = props.loading;
+        }
+      });
+      watchEffect((onCleanup) => {
+        const element = elementRef.value;
+        if (!element) return;
+        const callbackAttrs = attrs;
+        const highlightCallback = eventPrefix === "slash" ? callbackAttrs.onSlashMenuHighlight : callbackAttrs.onMentionMenuHighlight;
+        const selectCallback = eventPrefix === "slash" ? callbackAttrs.onSlashMenuSelect : callbackAttrs.onMentionMenuSelect;
+        const eventBase = `looma-editor-${eventPrefix}-menu`;
+        const highlightHandler = typeof highlightCallback === "function" ? (event) => highlightCallback(event.detail) : void 0;
+        const selectHandler = typeof selectCallback === "function" ? (event) => selectCallback(event.detail) : void 0;
+        if (highlightHandler) element.addEventListener(`${eventBase}-highlight`, highlightHandler);
+        if (selectHandler) element.addEventListener(`${eventBase}-select`, selectHandler);
+        onCleanup(() => {
+          if (highlightHandler) element.removeEventListener(`${eventBase}-highlight`, highlightHandler);
+          if (selectHandler) element.removeEventListener(`${eventBase}-select`, selectHandler);
+        });
+      });
+      return () => {
+        const callbackAttrs = attrs;
+        const {
+          onMentionMenuHighlight,
+          onMentionMenuSelect,
+          onSlashMenuHighlight,
+          onSlashMenuSelect,
+          ...forwardedAttrs
+        } = callbackAttrs;
+        void onMentionMenuHighlight;
+        void onMentionMenuSelect;
+        void onSlashMenuHighlight;
+        void onSlashMenuSelect;
+        return h(tag, {
+          ...forwardedAttrs,
+          ref: (value) => {
+            elementRef.value = toHTMLElement(value);
+          }
+        });
+      };
+    }
+  });
+}
 var EDITOR_EVENT_BINDINGS = [
   ["looma-editor-table-action", "onTableAction"],
   ["looma-editor-insert-table", "onInsertTable"],
   ["looma-editor-table-overlay-action", "onTableOverlayAction"]
 ];
-var EditorSlashMenu = defineComponent({
-  name: "EditorSlashMenu",
-  inheritAttrs: false,
-  props: {
-    open: { type: Boolean, default: false },
-    query: { type: String, default: "" },
-    items: { type: Array, default: () => [] },
-    selectedIndex: { type: Number, default: 0 },
-    anchorRect: { type: Object, default: null }
-  },
-  setup(props, { attrs }) {
-    const elementRef = shallowRef(null);
-    watchEffect(() => {
-      const element = elementRef.value;
-      if (!element) return;
-      if (element.open !== props.open) element.open = props.open;
-      if (element.query !== props.query) element.query = props.query;
-      if (element.items !== props.items) element.items = props.items;
-      if (element.selectedIndex !== props.selectedIndex) element.selectedIndex = props.selectedIndex;
-      if (element.anchorRect !== props.anchorRect) element.anchorRect = props.anchorRect;
-    });
-    watchEffect((onCleanup) => {
-      const element = elementRef.value;
-      if (!element) return;
-      const callbackAttrs = attrs;
-      const handlers = [
-        [
-          "looma-editor-slash-menu-highlight",
-          typeof callbackAttrs.onSlashMenuHighlight === "function" ? (event) => callbackAttrs.onSlashMenuHighlight?.(
-            event.detail
-          ) : void 0
-        ],
-        [
-          "looma-editor-slash-menu-select",
-          typeof callbackAttrs.onSlashMenuSelect === "function" ? (event) => callbackAttrs.onSlashMenuSelect?.(
-            event.detail
-          ) : void 0
-        ]
-      ];
-      for (const [eventName, handler] of handlers) {
-        if (handler) element.addEventListener(eventName, handler);
-      }
-      onCleanup(() => {
-        for (const [eventName, handler] of handlers) {
-          if (handler) element.removeEventListener(eventName, handler);
-        }
-      });
-    });
-    return () => {
-      const callbackAttrs = attrs;
-      const { onSlashMenuHighlight, onSlashMenuSelect, ...forwardedAttrs } = callbackAttrs;
-      void onSlashMenuHighlight;
-      void onSlashMenuSelect;
-      return h("ui-editor-slash-menu", {
-        ...forwardedAttrs,
-        ref: (value) => {
-          elementRef.value = toHTMLElement(value);
-        }
-      });
-    };
-  }
-});
+var EditorSlashMenu = createSuggestionMenuAdapter(
+  "ui-editor-slash-menu",
+  "EditorSlashMenu",
+  "slash"
+);
+var EditorMentionMenu = createSuggestionMenuAdapter(
+  "ui-editor-mention-menu",
+  "EditorMentionMenu",
+  "mention"
+);
 var EditorToolbar = createAdapterComponent("ui-editor-toolbar", "EditorToolbar", EDITOR_EVENT_BINDINGS);
 var EditorTableContextMenu = createAdapterComponent("ui-editor-table-context-menu", "EditorTableContextMenu", EDITOR_EVENT_BINDINGS);
 var EditorTableToolbar = createAdapterComponent("ui-editor-table-toolbar", "EditorTableToolbar", EDITOR_EVENT_BINDINGS);
@@ -97,6 +110,7 @@ var EditorTableOverlay = createAdapterComponent(
 var EDITOR_ADAPTER_COMPONENT_TAG_MAP = {
   EditorToolbar: "ui-editor-toolbar",
   EditorSlashMenu: "ui-editor-slash-menu",
+  EditorMentionMenu: "ui-editor-mention-menu",
   EditorTableContextMenu: "ui-editor-table-context-menu",
   EditorTableToolbar: "ui-editor-table-toolbar",
   EditorInsertTableGrid: "ui-editor-insert-table-grid",
@@ -119,6 +133,8 @@ import {
 } from "vue";
 import {
   createLoomaSlashCommandExtension,
+  createLoomaMentionExtension,
+  DEFAULT_MENTION_RESULT_LIMIT,
   getActiveTableUiState,
   getDefaultEditorExtensions,
   handleTableAction,
@@ -312,6 +328,7 @@ function imageUploadContent(image) {
 
 // src/editor/LoomaEditor.ts
 var EMPTY_DOCUMENT = { type: "doc", content: [] };
+var editorInstanceSequence = 0;
 var EMPTY_CAPABILITIES = {
   canAddRowBefore: false,
   canAddRowAfter: false,
@@ -367,6 +384,18 @@ var LoomaEditor = defineComponent2({
       type: Array,
       default: () => []
     },
+    mentionItems: {
+      type: Array,
+      default: () => []
+    },
+    mentionProvider: {
+      type: Function,
+      default: void 0
+    },
+    mentionLimit: {
+      type: Number,
+      default: DEFAULT_MENTION_RESULT_LIMIT
+    },
     uploadImage: {
       type: Function,
       default: void 0
@@ -415,6 +444,16 @@ var LoomaEditor = defineComponent2({
       rect: null,
       select: null
     });
+    const mention = reactive({
+      active: false,
+      items: [],
+      selectedIndex: 0,
+      query: "",
+      rect: null,
+      loading: false,
+      highlight: null,
+      select: null
+    });
     const tableUi = reactive({
       toolbarOpen: false,
       overlayOpen: false,
@@ -435,6 +474,21 @@ var LoomaEditor = defineComponent2({
         Object.assign(slash, state);
       }
     });
+    const mentionMenuId = `looma-editor-mention-menu-${++editorInstanceSequence}`;
+    const hasConsumerMention = props.extensions.some((extension) => extension.name === "mention");
+    const mentionExtension = hasConsumerMention ? null : createLoomaMentionExtension({
+      limit: props.mentionLimit,
+      menuId: mentionMenuId,
+      items: async (query, context) => {
+        if (props.mentionProvider) {
+          return await props.mentionProvider(query, context);
+        }
+        return props.mentionItems;
+      },
+      onStateChange: (state) => {
+        Object.assign(mention, state);
+      }
+    });
     const imageDelivery = createLoomaImageDeliveryController({
       resolveAttributes: () => props.resolveImageAttributes
     });
@@ -451,7 +505,10 @@ var LoomaEditor = defineComponent2({
     };
     const editor = useEditor({
       extensions: [
-        ...getDefaultEditorExtensions({ placeholder: props.placeholder }),
+        ...getDefaultEditorExtensions({
+          placeholder: props.placeholder,
+          mention: mentionExtension ?? false
+        }),
         imageDelivery.extension,
         slashExtension,
         ...props.extensions
@@ -1011,6 +1068,22 @@ var LoomaEditor = defineComponent2({
             slash.select?.(index);
           }
         }) : null,
+        mention.active && (mention.loading || mention.items.length > 0) ? h2(EditorMentionMenu, {
+          id: mentionMenuId,
+          open: true,
+          query: mention.query,
+          items: mention.items,
+          selectedIndex: mention.selectedIndex,
+          anchorRect: mention.rect,
+          loading: mention.loading,
+          onMentionMenuHighlight: ({ index }) => {
+            mention.selectedIndex = index;
+            mention.highlight?.(index);
+          },
+          onMentionMenuSelect: ({ index }) => {
+            mention.select?.(index);
+          }
+        }) : null,
         tableUi.toolbarOpen ? h2("div", {
           ref: tableToolbarShell,
           class: "looma-editor__table-toolbar-shell",
@@ -1040,6 +1113,7 @@ var LoomaEditor = defineComponent2({
 export {
   EDITOR_ADAPTER_COMPONENT_TAG_MAP,
   EditorInsertTableGrid,
+  EditorMentionMenu,
   EditorSlashMenu,
   EditorTableContextMenu,
   EditorTableOverlay,

package/dist/looma/p-ba01f45d.entry.js

@@ -1 +0,0 @@
-import{r as t,g as i,h as e,H as s}from"./p-CEeiinfk.js";import{o as n,c as a,r as o}from"./p-PM9a74r7.js";import{d as r}from"./p-JwSoedEO.js";import{a as h}from"./p-Bu0dmLBE.js";const c=class{constructor(i){t(this,i)}get host(){return i(this)}open=!1;defaultOpen=!1;for;internalOpen=!1;overlayId=`ui-context-menu-${Math.random().toString(36).slice(2,11)}`;trigger=null;contextTarget=null;pointerX=0;pointerY=0;pointPositioned=!1;surface=null;syncFromProp(){this.internalOpen=this.open}syncTarget(){this.resolveTargets(),this.attachTargetListeners()}syncOverlay(){this.syncTriggerState(),this.internalOpen?(this.pointPositioned?this.surface?.showAtPoint({x:this.pointerX,y:this.pointerY}):this.surface?.show(),n({id:this.overlayId,modal:!1,element:this.host,dismissible:!0,requestClose:(t,i)=>this.closeMenu(t,i)})):(this.surface?.hide(),a(this.overlayId))}componentDidLoad(){this.syncFromProp(),this.internalOpen=this.internalOpen||this.defaultOpen,this.resolveTargets(),this.attachTargetListeners(),this.setupSurface(),this.syncTriggerState(),this.syncOverlay()}componentDidUpdate(){this.resolveTargets(),this.attachTargetListeners(),this.pointPositioned||this.surface?.setAnchor(this.trigger),this.syncTriggerState()}disconnectedCallback(){this.detachTargetListeners(),this.surface?.destroy(),this.surface=null,a(this.overlayId)}setupSurface(){const t=this.host.shadowRoot?.querySelector(".menu");t&&(this.surface?.destroy(),this.surface=h(t,{anchor:this.trigger,placement:"bottom-start"}))}resolveTargets(){const t=this.trigger,i=this.contextTarget,e=this.host.querySelector('[slot="trigger"]'),s=this.for?document.getElementById(this.for):null;this.trigger=e,this.contextTarget=s??e??this.host.parentElement,t===this.trigger&&i===this.contextTarget||(t?.removeEventListener("click",this.onTriggerClick),t?.removeEventListener("keydown",this.onTriggerKeydown),i?.removeEventListener("contextmenu",this.onContextMenu))}attachTargetListeners(){this.detachTargetListeners(),this.trigger?.addEventListener("click",this.onTriggerClick),this.trigger?.addEventListener("keydown",this.onTriggerKeydown),this.contextTarget?.addEventListener("contextmenu",this.onContextMenu)}detachTargetListeners(){this.trigger?.removeEventListener("click",this.onTriggerClick),this.trigger?.removeEventListener("keydown",this.onTriggerKeydown),this.contextTarget?.removeEventListener("contextmenu",this.onContextMenu)}syncTriggerState(){this.trigger&&(this.trigger.setAttribute("aria-haspopup","menu"),this.trigger.setAttribute("aria-expanded",this.internalOpen?"true":"false"))}getItems(){return Array.from(this.host.querySelectorAll("ui-menu-item")).filter((t=>!this.isItemDisabled(t)))}focusFirstItem(){requestAnimationFrame((()=>this.getItems()[0]?.focus()))}openMenu(t,i,e){this.pointerX=t,this.pointerY=i,this.pointPositioned=!0,this.surface?.showAtPoint({x:t,y:i}),this.internalOpen=!0,r(this.host,"open",{open:!0,reason:"action",trigger:e}),this.focusFirstItem()}openFromTrigger(t){this.trigger&&(this.pointPositioned=!1,this.internalOpen=!0,r(this.host,"open",{open:!0,reason:"action",trigger:t}),this.focusFirstItem())}closeMenu(t,i,e=!0){this.internalOpen&&(this.internalOpen=!1,r(this.host,"close",{open:!1,reason:t,trigger:i}),e&&this.trigger?.focus())}onTriggerClick=t=>{this.internalOpen?this.closeMenu("action",0===t.detail?"keyboard":"pointer"):this.openFromTrigger(0===t.detail?"keyboard":"pointer")};onTriggerKeydown=t=>{"Enter"!==t.key&&" "!==t.key&&"ArrowDown"!==t.key||(t.preventDefault(),this.internalOpen?this.focusFirstItem():this.openFromTrigger("keyboard"))};onContextMenu=t=>{t.preventDefault(),this.openMenu(t.clientX,t.clientY,"pointer")};isItemDisabled(t){return"true"===t.getAttribute("aria-disabled")||t.hasAttribute("disabled")||"true"===t.getAttribute("disabled")||!0===t.disabled}onKeydown=t=>{if(this.internalOpen){if("Escape"===t.key)return t.preventDefault(),void o("escape","keyboard");if("Enter"===t.key||" "===t.key){const i=t.target.closest?.("ui-menu-item");if(!i||this.isItemDisabled(i))return;t.preventDefault();const e=i.getAttribute("value")??i.getAttribute("data-value")??"";r(this.host,"select",{value:e,trigger:"keyboard"}),this.closeMenu("action","keyboard")}}};onItemClick=t=>{const i=t.target.closest?.("ui-menu-item");if(!i||this.isItemDisabled(i))return;const e=i.getAttribute("value")??i.getAttribute("data-value")??"";r(this.host,"select",{value:e,trigger:"pointer"}),this.closeMenu("action","pointer")};render(){return e(s,{key:"aee76fad23434fb3cdaf885c698f62237c2a9468","data-open":this.internalOpen?"":void 0,onKeyDown:this.onKeydown,onClick:this.onItemClick},e("slot",{key:"da047f870b7a93f1acbba5fa1628b5cb66139d99",name:"trigger"}),e("div",{key:"388a473ac7fb626a20d0feda14f0d8dd16f6ab94",class:"menu","data-open":this.internalOpen?"":void 0},e("ui-menu",{key:"67ca5c05ff40d2dd1d5f17a8634636503f98c02d",open:this.internalOpen},e("slot",{key:"b7c7dfac4342afa1df67459e94de7ac7dca4a251"}))))}static get watchers(){return{open:[{syncFromProp:0}],for:[{syncTarget:0}],internalOpen:[{syncOverlay:0}]}}};c.style=":host{display:contents}.menu{position:fixed;inset:auto;margin:0;z-index:var(--ui-z-overlay, 1000);min-width:12rem;opacity:0;transform:translateY(-4px) scale(0.99);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}.menu:popover-open{opacity:1;transform:translateY(0) scale(1)}@starting-style{.menu:popover-open{opacity:0;transform:translateY(-4px) scale(0.99)}}.menu[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){.menu{transition:none}}";export{c as ui_context_menu}