@threadlabs/looma 0.1.16 → 0.1.18

package/vue/editor/index.d.ts

@@ -1,12 +1,14 @@
-import { SlashMenuItem, SlashMenuAnchorRect } from '@threadlabs/looma/editor';
+import { LoomaMentionItem, SlashMenuAnchorRect, SlashMenuItem, LoomaMentionProvider } from '@threadlabs/looma/editor';
 export * from '@threadlabs/looma/editor';
 import * as vue from 'vue';
 import { PropType } from 'vue';
-import { TableContextMenuActionEventDetail, InsertTableEventDetail, TableOverlayActionEventDetail, SlashMenuHighlightEventDetail, SlashMenuSelectEventDetail } from '@threadlabs/looma/editor/ui';
+import { MentionMenuHighlightEventDetail, MentionMenuSelectEventDetail, TableContextMenuActionEventDetail, InsertTableEventDetail, TableOverlayActionEventDetail, SlashMenuHighlightEventDetail, SlashMenuSelectEventDetail } from '@threadlabs/looma/editor/ui';
 import { JSONContent, AnyExtension, Editor } from '@tiptap/core';
 import { OverlayTrigger } from '@threadlabs/looma/core';
 
 interface VueEditorAdapterEventMap {
+    mentionMenuHighlight: MentionMenuHighlightEventDetail;
+    mentionMenuSelect: MentionMenuSelectEventDetail;
     tableAction: TableContextMenuActionEventDetail;
     insertTable: InsertTableEventDetail;
     tableOverlayAction: TableOverlayActionEventDetail;
@@ -34,6 +36,10 @@ declare const EditorSlashMenu: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<SlashMenuAnchorRect | null>;
         default: null;
     };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
@@ -57,12 +63,77 @@ declare const EditorSlashMenu: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<SlashMenuAnchorRect | null>;
         default: null;
     };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & Readonly<{}>, {
     open: boolean;
-    query: string;
     items: SlashMenuItem[];
+    query: string;
     selectedIndex: number;
     anchorRect: SlashMenuAnchorRect | null;
+    loading: boolean;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const EditorMentionMenu: vue.DefineComponent<vue.ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    query: {
+        type: StringConstructor;
+        default: string;
+    };
+    items: {
+        type: PropType<LoomaMentionItem[]>;
+        default: () => never[];
+    };
+    selectedIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    anchorRect: {
+        type: PropType<SlashMenuAnchorRect | null>;
+        default: null;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    query: {
+        type: StringConstructor;
+        default: string;
+    };
+    items: {
+        type: PropType<LoomaMentionItem[]>;
+        default: () => never[];
+    };
+    selectedIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    anchorRect: {
+        type: PropType<SlashMenuAnchorRect | null>;
+        default: null;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    open: boolean;
+    items: LoomaMentionItem[];
+    query: string;
+    selectedIndex: number;
+    anchorRect: SlashMenuAnchorRect | null;
+    loading: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const EditorToolbar: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
@@ -82,6 +153,7 @@ declare const EditorTableOverlay: vue.DefineComponent<{}, () => vue.VNode<vue.Re
 declare const EDITOR_ADAPTER_COMPONENT_TAG_MAP: {
     readonly EditorToolbar: "ui-editor-toolbar";
     readonly EditorSlashMenu: "ui-editor-slash-menu";
+    readonly EditorMentionMenu: "ui-editor-mention-menu";
     readonly EditorTableContextMenu: "ui-editor-table-context-menu";
     readonly EditorTableToolbar: "ui-editor-table-toolbar";
     readonly EditorInsertTableGrid: "ui-editor-insert-table-grid";
@@ -145,6 +217,18 @@ declare const LoomaEditor: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<AnyExtension[]>;
         default: () => never[];
     };
+    mentionItems: {
+        type: PropType<LoomaMentionItem[]>;
+        default: () => never[];
+    };
+    mentionProvider: {
+        type: PropType<LoomaMentionProvider | undefined>;
+        default: undefined;
+    };
+    mentionLimit: {
+        type: NumberConstructor;
+        default: number;
+    };
     uploadImage: {
         type: PropType<LoomaImageUploader | undefined>;
         default: undefined;
@@ -190,6 +274,18 @@ declare const LoomaEditor: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<AnyExtension[]>;
         default: () => never[];
     };
+    mentionItems: {
+        type: PropType<LoomaMentionItem[]>;
+        default: () => never[];
+    };
+    mentionProvider: {
+        type: PropType<LoomaMentionProvider | undefined>;
+        default: undefined;
+    };
+    mentionLimit: {
+        type: NumberConstructor;
+        default: number;
+    };
     uploadImage: {
         type: PropType<LoomaImageUploader | undefined>;
         default: undefined;
@@ -210,8 +306,11 @@ declare const LoomaEditor: vue.DefineComponent<vue.ExtractPropTypes<{
     modelValue: JSONContent;
     editable: boolean;
     extensions: AnyExtension[];
+    mentionItems: LoomaMentionItem[];
+    mentionProvider: LoomaMentionProvider | undefined;
+    mentionLimit: number;
     uploadImage: LoomaImageUploader | undefined;
     resolveImageAttributes: LoomaImageAttributeResolver | undefined;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 
-export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorInsertTableGrid, EditorSlashMenu, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, LoomaEditor, type LoomaImageActivationDetail, type LoomaImageActivationTrigger, type LoomaImageAttributeResolver, type LoomaImageDescriptor, type LoomaImageRenditionAttributes, type LoomaImageRenditionErrorDetail, type LoomaImageUploadResult, type LoomaImageUploader, type VueEditorAdapterEventMap };
+export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorInsertTableGrid, EditorMentionMenu, EditorSlashMenu, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, LoomaEditor, type LoomaImageActivationDetail, type LoomaImageActivationTrigger, type LoomaImageAttributeResolver, type LoomaImageDescriptor, type LoomaImageRenditionAttributes, type LoomaImageRenditionErrorDetail, type LoomaImageUploadResult, type LoomaImageUploader, type VueEditorAdapterEventMap };

package/vue/editor/index.js

@@ -1,5 +1,6 @@
 import {
   IconButton,
+  Popover,
   createAdapterComponent,
   toHTMLElement
 } from "../chunk-5KWCMTXB.js";
@@ -15,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);
@@ -96,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",
@@ -104,6 +119,7 @@ var EDITOR_ADAPTER_COMPONENT_TAG_MAP = {
 
 // src/editor/LoomaEditor.ts
 import { BubbleMenu, EditorContent, useEditor } from "@tiptap/vue-3";
+import { TextSelection } from "@tiptap/pm/state";
 import {
   defineComponent as defineComponent2,
   h as h2,
@@ -112,10 +128,13 @@ import {
   onMounted,
   reactive,
   ref,
+  useId,
   watch
 } from "vue";
 import {
   createLoomaSlashCommandExtension,
+  createLoomaMentionExtension,
+  DEFAULT_MENTION_RESULT_LIMIT,
   getActiveTableUiState,
   getDefaultEditorExtensions,
   handleTableAction,
@@ -125,11 +144,7 @@ import {
   resolveTableCellAt,
   shouldShowTextFormattingToolbar
 } from "@threadlabs/looma/editor";
-import {
-  clampRectToViewport,
-  getVisualViewportRect,
-  LOOMA_ICONS
-} from "@threadlabs/looma/core";
+import { getVisualViewportRect, LOOMA_ICONS } from "@threadlabs/looma/core";
 
 // src/editor/image-delivery.ts
 import { Extension } from "@tiptap/core";
@@ -313,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,
@@ -368,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
@@ -388,8 +416,7 @@ var LoomaEditor = defineComponent2({
   setup(props, { attrs, emit, expose }) {
     const root = ref(null);
     const fileInput = ref(null);
-    const tablePickerAnchor = ref(null);
-    const tablePickerPopover = ref(null);
+    const tablePickerAnchorId = `looma-editor-table-picker-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
     const tableToolbarShell = ref(null);
     const tableOverlayShell = ref(null);
     const tableMenuShell = ref(null);
@@ -398,7 +425,6 @@ var LoomaEditor = defineComponent2({
     const uploading = ref(false);
     const failedUpload = ref(null);
     const tablePickerOpen = ref(false);
-    const tablePickerStyle = ref({});
     const mobileToolbarStyle = ref({});
     const mobile = ref(typeof window !== "undefined" && window.innerWidth <= 767);
     const editorFocused = ref(false);
@@ -418,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,
@@ -438,12 +474,41 @@ 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
     });
+    let lastFocusedSelection = null;
+    const rememberSelection = (instance) => {
+      if (!instance.isFocused) return;
+      const selection = instance.view.state.selection;
+      lastFocusedSelection = {
+        bookmark: selection.getBookmark(),
+        from: selection.from,
+        to: selection.to,
+        text: selection instanceof TextSelection
+      };
+    };
     const editor = useEditor({
       extensions: [
-        ...getDefaultEditorExtensions({ placeholder: props.placeholder }),
+        ...getDefaultEditorExtensions({
+          placeholder: props.placeholder,
+          mention: mentionExtension ?? false
+        }),
         imageDelivery.extension,
         slashExtension,
         ...props.extensions
@@ -451,6 +516,8 @@ var LoomaEditor = defineComponent2({
       content: props.modelValue,
       editable: props.editable,
       onCreate: ({ editor: instance }) => emit("ready", instance),
+      onFocus: ({ editor: instance }) => rememberSelection(instance),
+      onSelectionUpdate: ({ editor: instance }) => rememberSelection(instance),
       onUpdate: ({ editor: instance }) => {
         const value = instance.getJSON();
         emit("update:modelValue", value);
@@ -465,7 +532,30 @@ var LoomaEditor = defineComponent2({
     watch(() => props.modelValue, (value) => {
       const instance = editor.value;
       if (!instance || sameDocument(instance.getJSON(), value)) return;
-      instance.commands.setContent(value, false);
+      const wasFocused = instance.isFocused;
+      const previousSelection = lastFocusedSelection ?? {
+        bookmark: instance.view.state.selection.getBookmark(),
+        from: instance.view.state.selection.from,
+        to: instance.view.state.selection.to,
+        text: instance.view.state.selection instanceof TextSelection
+      };
+      if (!wasFocused) {
+        instance.commands.setContent(value, false);
+        return;
+      }
+      instance.chain().setContent(value, false).command(({ tr }) => {
+        try {
+          tr.setSelection(previousSelection.text ? TextSelection.create(tr.doc, previousSelection.from, previousSelection.to) : previousSelection.bookmark.resolve(tr.doc));
+        } catch {
+          const max = tr.doc.content.size;
+          const from = Math.max(1, Math.min(previousSelection.from, max));
+          const to = Math.max(from, Math.min(previousSelection.to, max));
+          tr.setSelection(TextSelection.create(tr.doc, from, to));
+        }
+        return true;
+      }).run();
+      instance.view.focus();
+      rememberSelection(instance);
     }, { deep: true });
     const closeTableUi = () => {
       tableUi.toolbarOpen = false;
@@ -574,38 +664,9 @@ var LoomaEditor = defineComponent2({
       unbindEditorUi(previous);
       bindEditorUi(instance);
     }, { immediate: true });
-    const updateTablePickerPosition = () => {
-      const anchor = tablePickerAnchor.value;
-      if (!anchor) return;
-      const rect = anchor.getBoundingClientRect();
-      const viewport = getVisualViewportRect(window);
-      const width = 220;
-      const popoverHeight = tablePickerPopover.value?.getBoundingClientRect().height || 300;
-      const target = {
-        left: rect.left,
-        top: rect.bottom + 8,
-        right: rect.left + width,
-        bottom: rect.bottom + 8 + popoverHeight,
-        width,
-        height: popoverHeight
-      };
-      const offset = clampRectToViewport(
-        target,
-        viewport,
-        12
-      );
-      const left = target.left + offset.x;
-      const top = target.top + offset.y;
-      tablePickerStyle.value = window.innerWidth <= 767 ? {
-        position: "fixed",
-        left: `${left}px`,
-        top: `${Math.max(viewport.top + 12, viewport.bottom - popoverHeight - 64)}px`
-      } : { position: "fixed", top: `${top}px`, left: `${left}px` };
-    };
     const onViewportChange = () => {
       updateMobileViewport();
       updateTableUi();
-      updateTablePickerPosition();
       tableUi.menuOpen = false;
     };
     const onDocumentPointerDown = (event) => {
@@ -618,9 +679,6 @@ var LoomaEditor = defineComponent2({
       if (inTableUi) setTimeout(() => {
         tableInteractionActive = false;
       }, 0);
-      if (tablePickerOpen.value && !inElement(tablePickerAnchor.value) && !inElement(tablePickerPopover.value)) {
-        tablePickerOpen.value = false;
-      }
       if ((tableUi.toolbarOpen || tableUi.overlayOpen || tableUi.menuOpen) && !inElement(root.value) && !inTableUi) {
         closeTableUi();
       }
@@ -858,12 +916,18 @@ var LoomaEditor = defineComponent2({
         commandButton("Code block", "braces", instance.isActive("codeBlock"), !instance.can().toggleCodeBlock(), () => instance.chain().focus().toggleCodeBlock().run()),
         commandButton("Divider", "minus", false, !instance.can().setHorizontalRule(), () => instance.chain().focus().setHorizontalRule().run()),
         h2("span", { class: "ui-editor-toolbar__divider", "aria-hidden": "true" }),
-        h2("span", { ref: tablePickerAnchor, class: "looma-editor__table-picker-anchor" }, [
-          commandButton("Insert table", "table", false, false, () => {
+        h2(IconButton, {
+          id: tablePickerAnchorId,
+          class: "looma-editor__toolbar-button",
+          label: "Insert table",
+          title: "Insert table",
+          size: "sm",
+          variant: tablePickerOpen.value ? "solid" : "ghost",
+          "aria-expanded": tablePickerOpen.value ? "true" : "false",
+          onClick: () => {
             tablePickerOpen.value = !tablePickerOpen.value;
-            nextTick(updateTablePickerPosition);
-          })
-        ]),
+          }
+        }, () => loomaIcon("table")),
         commandButton(uploading.value ? "Uploading image" : "Insert image", "image", false, uploading.value || !props.uploadImage, () => fileInput.value?.click()),
         h2("span", { class: "ui-editor-toolbar__divider", "aria-hidden": "true" }),
         commandButton("Undo", "undo", false, !instance.can().undo(), () => instance.chain().focus().undo().run()),
@@ -976,17 +1040,21 @@ var LoomaEditor = defineComponent2({
           loomaIcon("image"),
           h2("span", "Drop image to upload")
         ]) : null,
-        tablePickerOpen.value ? h2("div", {
-          ref: tablePickerPopover,
+        h2(Popover, {
           class: "looma-editor__table-picker-popover",
-          style: tablePickerStyle.value
-        }, [h2(EditorInsertTableGrid, {
+          open: tablePickerOpen.value,
+          for: tablePickerAnchorId,
+          placement: mobile.value ? "top-start" : "bottom-start",
+          onClose: () => {
+            tablePickerOpen.value = false;
+          }
+        }, () => [h2(EditorInsertTableGrid, {
           open: true,
           onInsertTable: (detail) => {
             instance?.chain().focus().insertTable(detail).run();
             tablePickerOpen.value = false;
           }
-        })]) : null,
+        })]),
         slash.active && slash.items.length > 0 ? h2(EditorSlashMenu, {
           open: true,
           query: slash.query,
@@ -1000,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",
@@ -1029,6 +1113,7 @@ var LoomaEditor = defineComponent2({
 export {
   EDITOR_ADAPTER_COMPONENT_TAG_MAP,
   EditorInsertTableGrid,
+  EditorMentionMenu,
   EditorSlashMenu,
   EditorTableContextMenu,
   EditorTableOverlay,

package/dist/components/p-CR7f2MQC.js

@@ -1 +0,0 @@
-const n=[],t="data-ui-scroll-lock";let e=0,o=!1;function c(){if("undefined"==typeof document)return;const n=document.documentElement;if(e>0)return n.setAttribute(t,"true"),void(n.style.overflow="hidden");n.removeAttribute(t),n.style.removeProperty("overflow")}function u(n){return n.dismissible??!0}function i(n){"Escape"===n.key&&a("escape","keyboard")}function d(n){const t=f();if(!t||!u(t))return;const e=n.target;e instanceof Node&&t.element.contains(e)||a("light-dismiss","pointer")}function r(t){s(t.id),n.push(t),t.modal&&(e+=1,c()),o||"undefined"==typeof document||(document.addEventListener("keydown",i),document.addEventListener("pointerdown",d,{capture:!0}),o=!0)}function s(t){const u=n.findIndex((n=>n.id===t));if(u>=0){const[t]=n.splice(u,1);t?.modal&&(e=Math.max(0,e-1),c())}!o||n.length>0||"undefined"==typeof document||(document.removeEventListener("keydown",i),document.removeEventListener("pointerdown",d,{capture:!0}),o=!1)}function f(){return n.at(-1)}function a(n,t){const e=f();return!!e&&!!(u(e)||"escape"!==n&&"light-dismiss"!==n)&&(e.requestClose(n,t),!0)}export{s as c,r as o,a as r}

package/dist/components/p-QiwSQmKJ.js

@@ -1 +0,0 @@
-import{p as e,H as t,h as i,c as r,t as a}from"./p-CIA4RyEp.js";import{d as o,e as s}from"./p-JwSoedEO.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}get host(){return this}open=!1;defaultOpen=!1;internalOpen=!1;syncFromProp(){this.internalOpen=this.open}componentDidLoad(){this.syncFromProp(),this.internalOpen=this.internalOpen||this.defaultOpen,this.host.addEventListener("click",this.onItemClick),this.host.addEventListener("keydown",this.onKeydown)}disconnectedCallback(){this.host.removeEventListener("click",this.onItemClick),this.host.removeEventListener("keydown",this.onKeydown)}getItems(){return Array.from(this.host.querySelectorAll("ui-menu-item"))}isItemDisabled(e){return"true"===e.getAttribute("aria-disabled")||e.hasAttribute("disabled")||"true"===e.getAttribute("disabled")||!0===e.disabled}onItemClick=e=>{const t=e.target.closest?.("ui-menu-item");if(!t||t.getRootNode()!==this.host.getRootNode())return;if(this.isItemDisabled(t))return;const i=t.getAttribute("value")??t.getAttribute("data-value")??"";o(this.host,"select",{value:i,trigger:s(e)}),o(this.host,"close",{open:!1,reason:"action",trigger:s(e)}),this.internalOpen=!1};onKeydown=e=>{const i=this.getItems().filter((e=>!this.isItemDisabled(e)));if(0===i.length)return;const r=e.target.closest?.("ui-menu-item"),a=r&&r instanceof t?i.indexOf(r):-1;if("Enter"!==e.key&&" "!==e.key)"ArrowDown"!==e.key&&"ArrowUp"!==e.key||(e.preventDefault(),i["ArrowDown"===e.key?a<0?0:Math.min(a+1,i.length-1):a<=0?i.length-1:a-1].focus());else if(e.preventDefault(),r&&a>=0){const e=r.getAttribute("value")??r.getAttribute("data-value")??"";o(this.host,"select",{value:e,trigger:"keyboard"}),o(this.host,"close",{open:!1,reason:"action",trigger:"keyboard"}),this.internalOpen=!1}};render(){return i(r,{key:"5e463cbbce272c6b6132a839b818deef3e39a532",role:"menu","aria-orientation":"vertical","data-open":this.internalOpen?"":void 0},i("slot",{key:"feea6a21d41a7b27a6270814bcf0b3f3ded394a1"}))}static get watchers(){return{open:[{syncFromProp:0}]}}static get style(){return":host{--ui-menu-viewport-gap:var(--ui-space-2, 0.5rem);display:flex;flex-direction:column;inline-size:max-content;min-inline-size:min(12rem, calc(100vw - (var(--ui-menu-viewport-gap) * 2)));max-inline-size:calc(100vw - (var(--ui-menu-viewport-gap) * 2));padding:var(--ui-space-1);background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);box-shadow:var(--ui-shadow-lg)}::slotted(ui-menu-item){display:block;width:100%;padding:var(--ui-space-2) var(--ui-space-3);text-align:left;background:none;border:none;border-radius:var(--ui-radius-2);color:var(--ui-text-primary);font-size:var(--ui-font-size-md);font-weight:var(--ui-font-medium, 500);cursor:pointer;transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     color var(--ui-motion-fast) var(--ui-motion-ease)}::slotted(ui-menu-item:hover:not([aria-disabled='true']):not([disabled])){background:var(--ui-surface-subtle)}::slotted(ui-menu-item[aria-disabled='true']),::slotted(ui-menu-item[disabled]){opacity:0.6;cursor:not-allowed}"}},[769,"ui-menu",{open:[4],defaultOpen:[4,"default-open"],internalOpen:[32]},void 0,{open:[{syncFromProp:0}]}]);function u(){"undefined"!=typeof customElements&&["ui-menu"].forEach((e=>{"ui-menu"===e&&(customElements.get(a(e))||customElements.define(a(e),n))}))}export{n as U,u as d}

package/dist/looma/p-2ae73d5b.entry.js

@@ -1 +0,0 @@
-import{r as t,g as e,h as i,H as s}from"./p-CEeiinfk.js";import{o as n,c as o,r}from"./p-CR7f2MQC.js";import{d as a}from"./p-JwSoedEO.js";const h=class{constructor(e){t(this,e)}get host(){return e(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;syncFromProp(){this.internalOpen=this.open}syncTarget(){this.resolveTargets(),this.attachTargetListeners()}syncOverlay(){this.syncTriggerState(),this.internalOpen?n({id:this.overlayId,modal:!1,element:this.host,dismissible:!0,requestClose:(t,e)=>this.closeMenu(t,e)}):o(this.overlayId)}componentDidLoad(){this.syncFromProp(),this.internalOpen=this.internalOpen||this.defaultOpen,this.resolveTargets(),this.attachTargetListeners(),this.syncTriggerState(),this.syncOverlay()}componentDidUpdate(){this.resolveTargets(),this.attachTargetListeners(),this.syncTriggerState()}disconnectedCallback(){this.detachTargetListeners(),o(this.overlayId)}resolveTargets(){const t=this.trigger,e=this.contextTarget,i=this.host.querySelector('[slot="trigger"]'),s=this.for?document.getElementById(this.for):null;this.trigger=i,this.contextTarget=s??i??this.host.parentElement,t===this.trigger&&e===this.contextTarget||(t?.removeEventListener("click",this.onTriggerClick),t?.removeEventListener("keydown",this.onTriggerKeydown),e?.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,e,i){this.pointerX=t,this.pointerY=e,this.internalOpen=!0,a(this.host,"open",{open:!0,reason:"action",trigger:i}),this.focusFirstItem()}openFromTrigger(t){if(!this.trigger)return;const e=this.trigger.getBoundingClientRect();this.openMenu(e.left,e.bottom,t)}closeMenu(t,e,i=!0){this.internalOpen&&(this.internalOpen=!1,a(this.host,"close",{open:!1,reason:t,trigger:e}),i&&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 r("escape","keyboard");if("Enter"===t.key||" "===t.key){const e=t.target.closest?.("ui-menu-item");if(!e||this.isItemDisabled(e))return;t.preventDefault();const i=e.getAttribute("value")??e.getAttribute("data-value")??"";a(this.host,"select",{value:i,trigger:"keyboard"}),this.closeMenu("action","keyboard")}}};onItemClick=t=>{const e=t.target.closest?.("ui-menu-item");if(!e||this.isItemDisabled(e))return;const i=e.getAttribute("value")??e.getAttribute("data-value")??"";a(this.host,"select",{value:i,trigger:"pointer"}),this.closeMenu("action","pointer")};render(){return i(s,{key:"79fbca2c89f1d1fd1f4796ad88d2a599e811a3f9","data-open":this.internalOpen?"":void 0,onKeyDown:this.onKeydown,onClick:this.onItemClick},i("slot",{key:"9308cadfa155930e3e46dfb4a69a847ae388958b",name:"trigger"}),i("div",{key:"16cfba2b32444ac9e3cac1f040f81f17fd5db23c",class:"menu","data-open":this.internalOpen?"":void 0,style:{left:`${this.pointerX}px`,top:`${this.pointerY}px`}},i("ui-menu",{key:"59f18e0df3bb1fe85efa8eeca00b336bbde47c70",open:this.internalOpen},i("slot",{key:"5bdbb7773c9c1ae43ec2e05fca9558482815e28a"}))))}static get watchers(){return{open:[{syncFromProp:0}],for:[{syncTarget:0}],internalOpen:[{syncOverlay:0}]}}};h.style=":host{display:contents}.menu{position:fixed;z-index:var(--ui-z-overlay, 1000);min-width:12rem}.menu[data-open]{display:block}.menu:not([data-open]){display:none !important}";export{h as ui_context_menu}

package/dist/looma/p-3ac2e0d4.entry.js

@@ -1 +0,0 @@
-import{r as t,g as a,h as i,H as n}from"./p-CEeiinfk.js";function e(t,a){const i=Math.max(a.left-t.x,0,t.x-a.right),n=Math.max(a.top-t.y,0,t.y-a.bottom);return Math.hypot(i,n)}const o=class{constructor(a){t(this,a)}get host(){return a(this)}nearRadius=16;coordinator=null;componentDidLoad(){this.connectCoordinator()}disconnectedCallback(){this.coordinator?.destroy(),this.coordinator=null}connectCoordinator(){this.coordinator?.destroy(),this.coordinator=function(t,a={}){const i=t.ownerDocument.defaultView??window,n=a.pointerTarget??t,o=a.anchorSelector??"[data-ui-affordance]",r=a.nearRadius??16,s=Number.isFinite(r)?Math.max(0,r):16,c=new AbortController;let d=[],l=null,u=null,h=!1;const p=()=>{for(const{element:t}of d)t.hasAttribute("data-ui-proximity")&&t.removeAttribute("data-ui-proximity");t.hasAttribute("data-ui-interaction")&&t.removeAttribute("data-ui-interaction")},f=()=>{d=Array.from(t.querySelectorAll(o)).filter((t=>!t.hasAttribute("disabled")&&"true"!==t.getAttribute("aria-disabled"))).map((t=>({element:t,rect:t.getBoundingClientRect()}))),h=!1},g=()=>{if(l=null,h&&f(),!u)return void p();let a=!1;for(const t of d){const i=e(u,t.rect)<=s;i&&"near"!==t.element.getAttribute("data-ui-proximity")?t.element.setAttribute("data-ui-proximity","near"):!i&&t.element.hasAttribute("data-ui-proximity")&&t.element.removeAttribute("data-ui-proximity"),a||=i}a&&"engaged"!==t.getAttribute("data-ui-interaction")?t.setAttribute("data-ui-interaction","engaged"):!a&&t.hasAttribute("data-ui-interaction")&&t.removeAttribute("data-ui-interaction")},m=()=>{null===l&&(l=i.requestAnimationFrame(g))},b=()=>{h=!0,m()};return n.addEventListener("pointermove",(t=>{u="touch"===t.pointerType?null:{x:t.clientX,y:t.clientY},m()}),{passive:!0,signal:c.signal}),i.addEventListener("resize",b,{passive:!0,signal:c.signal}),i.addEventListener("scroll",b,{passive:!0,capture:!0,signal:c.signal}),i.visualViewport?.addEventListener("resize",b,{passive:!0,signal:c.signal}),i.visualViewport?.addEventListener("scroll",b,{passive:!0,signal:c.signal}),f(),{refresh:b,destroy(){c.abort(),null!==l&&i.cancelAnimationFrame(l),l=null,u=null,p(),d=[]}}}(this.host,{nearRadius:this.nearRadius})}onSlotChange=()=>{this.coordinator?.refresh()};render(){return i(n,{key:"184b0a908494d480ed23aa14b75d4f7b94e5275b"},i("slot",{key:"570e810db588c1514c6fd85985c9bc4532993a2b",onSlotchange:this.onSlotChange}))}static get watchers(){return{nearRadius:[{connectCoordinator:0}]}}};o.style=":host{display:contents;--ui-affordance-scope-engaged:0}:host([data-ui-interaction='engaged']){--ui-affordance-scope-engaged:1}";export{o as ui_affordance_scope}