@mekari/pixel3-rich-text-editor 0.1.3 → 0.2.0-dev.0

package/dist/{chunk-6O4HSL2C.mjs → chunk-B5BN5T5O.mjs}

@@ -29,9 +29,13 @@ var richTextEditorProps = {
     default: true
   },
   suggestions: {
-    type: Array,
+    type: [Array, Function],
     default: () => []
   },
+  maxSuggestions: {
+    type: Number,
+    default: 50
+  },
   variables: {
     type: Array,
     default: () => []
@@ -48,7 +52,7 @@ var RTEStyleProviderProps = {
     type: String
   }
 };
-var richTextEditorEmits = declareEmit(["change", "blur", "focus", "action", "paste"]);
+var richTextEditorEmits = declareEmit(["change", "blur", "focus", "action", "paste", "suggestionsChange"]);
 
 export {
   richTextEditorProps,

package/dist/{chunk-4ZCPCZD2.mjs → chunk-E4R6ETA7.mjs}

@@ -1,25 +1,25 @@
 import {
   EditorToolbar
-} from "./chunk-G4CGNV6P.mjs";
+} from "./chunk-RX7ZEE2M.mjs";
 import {
   Variable
 } from "./chunk-ENKUUZPM.mjs";
 import {
   MpRTEStyleProvider
-} from "./chunk-BA5A7DIS.mjs";
+} from "./chunk-RVXAG7LK.mjs";
+import {
+  useRichTextEditor
+} from "./chunk-ZRAXSVO5.mjs";
 import {
   richTextEditorEmits,
   richTextEditorProps
-} from "./chunk-6O4HSL2C.mjs";
+} from "./chunk-B5BN5T5O.mjs";
 import {
   createMentionSuggestion
-} from "./chunk-4KJOYLJI.mjs";
+} from "./chunk-RTEK53TL.mjs";
 import {
   createVariableSuggestion
 } from "./chunk-BWRU2WZN.mjs";
-import {
-  useRichTextEditor
-} from "./chunk-ZRAXSVO5.mjs";
 import {
   __name
 } from "./chunk-QZ7VFGWC.mjs";
@@ -93,8 +93,15 @@ var MpRichTextEditor = defineComponent({
         CharacterCount.configure({
           limit: api.value.maxlength
         }),
-        ...props.suggestions && props.suggestions.length > 0 ? [Mention.configure({
-          suggestion: createMentionSuggestion(() => props.suggestions || [])
+        // Extensions are registered once at mount, so the array-length check
+        // here can't be reactive. A resolver function always registers the
+        // extension — use that form when suggestions are loaded dynamically
+        // (e.g. fetched from an API after mount).
+        ...typeof props.suggestions === "function" || props.suggestions && props.suggestions.length > 0 ? [Mention.configure({
+          suggestion: createMentionSuggestion(() => props.suggestions, {
+            maxItems: props.maxSuggestions,
+            onSuggestionsChange: (items) => emit("suggestionsChange", items)
+          })
         })] : [],
         ...props.variables && props.variables.length > 0 ? [Variable.configure({
           suggestion: createVariableSuggestion(() => props.variables || [])

package/dist/{chunk-4TUA5VF4.mjs → chunk-ELFAGDKG.mjs}

@@ -3,12 +3,13 @@ import {
 } from "./chunk-QZ7VFGWC.mjs";
 
 // src/extensions/mention-list-extension.tsx
-import { createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
+import { createTextVNode as _createTextVNode, createVNode as _createVNode } from "vue";
 import { defineComponent, nextTick, ref, watch } from "vue";
 import { css } from "@mekari/pixel3-styled-system/css";
 import { MpAvatar } from "@mekari/pixel3-avatar";
 import { MpPopover, MpPopoverContent, MpPopoverList, MpPopoverListItem } from "@mekari/pixel3-popover";
 import { MpText } from "@mekari/pixel3-text";
+import { MpSpinner } from "@mekari/pixel3-spinner";
 var avatarVariantColors = ["violet", "lime", "amber", "sky", "pink", "teal", "rose", "stone"];
 var getAvatarVariantColor = /* @__PURE__ */ __name((index) => {
   return avatarVariantColors[index % avatarVariantColors.length];
@@ -23,6 +24,10 @@ var MentionList = defineComponent({
     command: {
       type: Function,
       required: true
+    },
+    isLoading: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, {
@@ -107,7 +112,16 @@ var MentionList = defineComponent({
           },
           "data-pixel-rte": true
         }, {
-          default: () => [!props.items.length && _createVNode(MpText, {
+          default: () => [props.isLoading && _createVNode("div", {
+            "class": css({
+              display: "flex",
+              justifyContent: "center",
+              px: "3",
+              py: "3"
+            })
+          }, [_createVNode(MpSpinner, {
+            "size": "sm"
+          }, null)]), !props.isLoading && !props.items.length && _createVNode(MpText, {
             "color": "text.secondary",
             "class": css({
               px: "3",
@@ -115,7 +129,7 @@ var MentionList = defineComponent({
             })
           }, {
             default: () => [_createTextVNode("No result")]
-          }), props.items.map((item, index) => {
+          }), !props.isLoading && props.items.map((item, index) => {
             return _createVNode(MpPopoverListItem, {
               "key": `${item.id}-${index}`,
               "is-active": selectedIndex.value === index,

package/dist/{chunk-4KJOYLJI.mjs → chunk-RTEK53TL.mjs}

@@ -1,6 +1,6 @@
 import {
   MentionList
-} from "./chunk-4TUA5VF4.mjs";
+} from "./chunk-ELFAGDKG.mjs";
 import {
   __name
 } from "./chunk-QZ7VFGWC.mjs";
@@ -8,8 +8,7 @@ import {
 // src/rte-suggestion.ts
 import { VueRenderer } from "@tiptap/vue-3";
 import { createPopper } from "@popperjs/core";
-var MAX_SUGGESTION_ITEMS = 10;
-var getFilteredSuggestionItems = /* @__PURE__ */ __name((items, query) => {
+var getFilteredSuggestionItems = /* @__PURE__ */ __name((items, query, maxItems) => {
   const normalizedQuery = query.trim().toLowerCase();
   return items.filter((item) => {
     var _a, _b;
@@ -20,14 +19,25 @@ var getFilteredSuggestionItems = /* @__PURE__ */ __name((items, query) => {
     const label = ((_a = item.name) != null ? _a : "").toLowerCase();
     const description = ((_b = item.description) != null ? _b : "").toLowerCase();
     return id.includes(normalizedQuery) || label.includes(normalizedQuery) || description.includes(normalizedQuery);
-  }).slice(0, MAX_SUGGESTION_ITEMS);
+  }).slice(0, maxItems);
 }, "getFilteredSuggestionItems");
-var createMentionSuggestion = /* @__PURE__ */ __name((getSuggestionItems = () => []) => {
+var createMentionSuggestion = /* @__PURE__ */ __name((getSuggestionSource = () => [], options = {}) => {
+  var _a;
+  const maxItems = (_a = options.maxItems) != null ? _a : 50;
   return {
-    items: ({
+    items: async ({
       query
     }) => {
-      return getFilteredSuggestionItems(getSuggestionItems(), query);
+      var _a2, _b, _c;
+      const source = getSuggestionSource();
+      if (typeof source === "function") {
+        const items2 = ((_a2 = await source(query)) != null ? _a2 : []).slice(0, maxItems);
+        (_b = options.onSuggestionsChange) == null ? void 0 : _b.call(options, items2);
+        return items2;
+      }
+      const items = getFilteredSuggestionItems(source != null ? source : [], query, maxItems);
+      (_c = options.onSuggestionsChange) == null ? void 0 : _c.call(options, items);
+      return items;
     },
     render: () => {
       let component = null;
@@ -88,8 +98,8 @@ var createMentionSuggestion = /* @__PURE__ */ __name((getSuggestionItems = () =>
         }
         return {
           getBoundingClientRect: () => {
-            var _a;
-            return (_a = clientRectProvider == null ? void 0 : clientRectProvider()) != null ? _a : new DOMRect();
+            var _a2;
+            return (_a2 = clientRectProvider == null ? void 0 : clientRectProvider()) != null ? _a2 : new DOMRect();
           }
         };
       }, "getVirtualElement");
@@ -118,14 +128,18 @@ var createMentionSuggestion = /* @__PURE__ */ __name((getSuggestionItems = () =>
         popperInstance.update();
       }, "updatePopoverPosition");
       return {
-        onStart: (props) => {
+        // Fires synchronously before `items()` resolves, so the popover can
+        // mount showing a loading state instead of a blank/"No result" flash
+        // while the (possibly async) suggestion source is fetched.
+        onBeforeStart: (props) => {
           clientRectProvider = props.clientRect;
           editorElement = props.editor.view.dom;
           component = new VueRenderer(MentionList, {
             editor: props.editor,
             props: {
-              items: props.items,
-              command: props.command
+              items: [],
+              command: props.command,
+              isLoading: true
             }
           });
           popoverWrapper = document.createElement("div");
@@ -138,21 +152,39 @@ var createMentionSuggestion = /* @__PURE__ */ __name((getSuggestionItems = () =>
           setupOutsideListeners();
           updatePopoverPosition();
         },
+        onStart: (props) => {
+          clientRectProvider = props.clientRect;
+          component == null ? void 0 : component.updateProps({
+            items: props.items,
+            command: props.command,
+            isLoading: false
+          });
+          updatePopoverPosition();
+        },
+        // Fires before every re-fetch triggered by a query change — flips
+        // back to the loading state until the new `items()` call resolves.
+        onBeforeUpdate: (props) => {
+          clientRectProvider = props.clientRect;
+          component == null ? void 0 : component.updateProps({
+            isLoading: true
+          });
+        },
         onUpdate: (props) => {
           clientRectProvider = props.clientRect;
           component == null ? void 0 : component.updateProps({
             items: props.items,
-            command: props.command
+            command: props.command,
+            isLoading: false
           });
           updatePopoverPosition();
         },
         onKeyDown: (props) => {
-          var _a, _b;
+          var _a2, _b;
           if (props.event.key === "Escape") {
             destroyMentionPopover();
             return true;
           }
-          return (_b = (_a = component == null ? void 0 : component.ref) == null ? void 0 : _a.onKeyDown(props)) != null ? _b : false;
+          return (_b = (_a2 = component == null ? void 0 : component.ref) == null ? void 0 : _a2.onKeyDown(props)) != null ? _b : false;
         },
         onExit: () => {
           destroyMentionPopover();

package/dist/{chunk-BA5A7DIS.mjs → chunk-RVXAG7LK.mjs}

@@ -1,9 +1,9 @@
-import {
-  RTEStyleProviderProps
-} from "./chunk-6O4HSL2C.mjs";
 import {
   useRTEStyleProvider
 } from "./chunk-ZRAXSVO5.mjs";
+import {
+  RTEStyleProviderProps
+} from "./chunk-B5BN5T5O.mjs";
 
 // src/rte-style-provider.tsx
 import { createVNode as _createVNode } from "vue";

package/dist/editor-toolbar.mjs

@@ -1,15 +1,15 @@
 import {
   EditorToolbar
-} from "./chunk-G4CGNV6P.mjs";
+} from "./chunk-RX7ZEE2M.mjs";
 import "./chunk-HIHIKPNN.mjs";
+import "./chunk-X2CB42A3.mjs";
+import "./chunk-COZ45QUD.mjs";
 import "./chunk-FCLBNBXD.mjs";
 import "./chunk-ENKUUZPM.mjs";
+import "./chunk-76GEEOAG.mjs";
 import "./chunk-YWVVMJGP.mjs";
 import "./chunk-Y6UPQ6EU.mjs";
-import "./chunk-X2CB42A3.mjs";
-import "./chunk-COZ45QUD.mjs";
 import "./chunk-IFRJVX2K.mjs";
-import "./chunk-76GEEOAG.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {
   EditorToolbar

package/dist/extensions/index.mjs

@@ -1,26 +1,26 @@
 import "../chunk-HIHIKPNN.mjs";
+import {
+  HeadingExtention
+} from "../chunk-X2CB42A3.mjs";
+import {
+  LinkExtension
+} from "../chunk-COZ45QUD.mjs";
 import {
   SingleExtention
 } from "../chunk-FCLBNBXD.mjs";
 import {
   Variable
 } from "../chunk-ENKUUZPM.mjs";
+import {
+  VariableList
+} from "../chunk-76GEEOAG.mjs";
 import {
   AlignExtention
 } from "../chunk-YWVVMJGP.mjs";
 import {
   ColorExtension
 } from "../chunk-Y6UPQ6EU.mjs";
-import {
-  HeadingExtention
-} from "../chunk-X2CB42A3.mjs";
-import {
-  LinkExtension
-} from "../chunk-COZ45QUD.mjs";
 import "../chunk-IFRJVX2K.mjs";
-import {
-  VariableList
-} from "../chunk-76GEEOAG.mjs";
 import "../chunk-QZ7VFGWC.mjs";
 export {
   AlignExtention,

package/dist/extensions/mention-list-extension.d.mts

@@ -15,6 +15,10 @@ declare const MentionList: vue.DefineComponent<{
         }) => void>;
         required: true;
     };
+    isLoading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     items: {
         type: PropType<MentionSuggestionItem[]>;
@@ -26,7 +30,12 @@ declare const MentionList: vue.DefineComponent<{
         }) => void>;
         required: true;
     };
+    isLoading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
+    isLoading: boolean;
     items: MentionSuggestionItem[];
 }, {}>;
 

package/dist/extensions/mention-list-extension.d.ts

@@ -15,6 +15,10 @@ declare const MentionList: vue.DefineComponent<{
         }) => void>;
         required: true;
     };
+    isLoading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     items: {
         type: PropType<MentionSuggestionItem[]>;
@@ -26,7 +30,12 @@ declare const MentionList: vue.DefineComponent<{
         }) => void>;
         required: true;
     };
+    isLoading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>>, {
+    isLoading: boolean;
     items: MentionSuggestionItem[];
 }, {}>;
 

package/dist/extensions/mention-list-extension.js

@@ -30,6 +30,7 @@ var import_css = require("@mekari/pixel3-styled-system/css");
 var import_pixel3_avatar = require("@mekari/pixel3-avatar");
 var import_pixel3_popover = require("@mekari/pixel3-popover");
 var import_pixel3_text = require("@mekari/pixel3-text");
+var import_pixel3_spinner = require("@mekari/pixel3-spinner");
 var avatarVariantColors = ["violet", "lime", "amber", "sky", "pink", "teal", "rose", "stone"];
 var getAvatarVariantColor = /* @__PURE__ */ __name((index) => {
   return avatarVariantColors[index % avatarVariantColors.length];
@@ -44,6 +45,10 @@ var MentionList = (0, import_vue2.defineComponent)({
     command: {
       type: Function,
       required: true
+    },
+    isLoading: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, {
@@ -128,7 +133,16 @@ var MentionList = (0, import_vue2.defineComponent)({
           },
           "data-pixel-rte": true
         }, {
-          default: () => [!props.items.length && (0, import_vue.createVNode)(import_pixel3_text.MpText, {
+          default: () => [props.isLoading && (0, import_vue.createVNode)("div", {
+            "class": (0, import_css.css)({
+              display: "flex",
+              justifyContent: "center",
+              px: "3",
+              py: "3"
+            })
+          }, [(0, import_vue.createVNode)(import_pixel3_spinner.MpSpinner, {
+            "size": "sm"
+          }, null)]), !props.isLoading && !props.items.length && (0, import_vue.createVNode)(import_pixel3_text.MpText, {
             "color": "text.secondary",
             "class": (0, import_css.css)({
               px: "3",
@@ -136,7 +150,7 @@ var MentionList = (0, import_vue2.defineComponent)({
             })
           }, {
             default: () => [(0, import_vue.createTextVNode)("No result")]
-          }), props.items.map((item, index) => {
+          }), !props.isLoading && props.items.map((item, index) => {
             return (0, import_vue.createVNode)(import_pixel3_popover.MpPopoverListItem, {
               "key": `${item.id}-${index}`,
               "is-active": selectedIndex.value === index,

package/dist/extensions/mention-list-extension.mjs

@@ -1,6 +1,6 @@
 import {
   MentionList
-} from "../chunk-4TUA5VF4.mjs";
+} from "../chunk-ELFAGDKG.mjs";
 import "../chunk-QZ7VFGWC.mjs";
 export {
   MentionList

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 export { MpRichTextEditor } from './rich-text-editor.mjs';
 export { MpRTEStyleProvider } from './rte-style-provider.mjs';
-export { ActionTypes, ItemOptions, Items, MentionSuggestionItem, RTEStyleProviderApiMachine, RTEStyleProviderClasses, RTEStyleProviderDefinedContext, RTEStyleProviderState, RichTextEditorApiMachine, RichTextEditorClasses, RichTextEditorDefinedContext, RichTextEditorProps, RichTextEditorState, RteStyleProviderProps, ToolbarOption, ToolbarOptionObject, VariableSuggestionItem } from './modules/rich-text-editor.types.mjs';
+export { ActionTypes, ItemOptions, Items, MentionSuggestionItem, MentionSuggestionSource, RTEStyleProviderApiMachine, RTEStyleProviderClasses, RTEStyleProviderDefinedContext, RTEStyleProviderState, RichTextEditorApiMachine, RichTextEditorClasses, RichTextEditorDefinedContext, RichTextEditorProps, RichTextEditorState, RteStyleProviderProps, ToolbarOption, ToolbarOptionObject, VariableSuggestionItem } from './modules/rich-text-editor.types.mjs';
 import 'vue/jsx-runtime';
 import 'vue';
 import '@mekari/pixel3-utils';

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 export { MpRichTextEditor } from './rich-text-editor.js';
 export { MpRTEStyleProvider } from './rte-style-provider.js';
-export { ActionTypes, ItemOptions, Items, MentionSuggestionItem, RTEStyleProviderApiMachine, RTEStyleProviderClasses, RTEStyleProviderDefinedContext, RTEStyleProviderState, RichTextEditorApiMachine, RichTextEditorClasses, RichTextEditorDefinedContext, RichTextEditorProps, RichTextEditorState, RteStyleProviderProps, ToolbarOption, ToolbarOptionObject, VariableSuggestionItem } from './modules/rich-text-editor.types.js';
+export { ActionTypes, ItemOptions, Items, MentionSuggestionItem, MentionSuggestionSource, RTEStyleProviderApiMachine, RTEStyleProviderClasses, RTEStyleProviderDefinedContext, RTEStyleProviderState, RichTextEditorApiMachine, RichTextEditorClasses, RichTextEditorDefinedContext, RichTextEditorProps, RichTextEditorState, RteStyleProviderProps, ToolbarOption, ToolbarOptionObject, VariableSuggestionItem } from './modules/rich-text-editor.types.js';
 import 'vue/jsx-runtime';
 import 'vue';
 import '@mekari/pixel3-utils';

package/dist/index.js

@@ -72,9 +72,13 @@ var richTextEditorProps = {
     default: true
   },
   suggestions: {
-    type: Array,
+    type: [Array, Function],
     default: () => []
   },
+  maxSuggestions: {
+    type: Number,
+    default: 50
+  },
   variables: {
     type: Array,
     default: () => []
@@ -91,7 +95,7 @@ var RTEStyleProviderProps = {
     type: String
   }
 };
-var richTextEditorEmits = (0, import_pixel3_utils.declareEmit)(["change", "blur", "focus", "action", "paste"]);
+var richTextEditorEmits = (0, import_pixel3_utils.declareEmit)(["change", "blur", "focus", "action", "paste", "suggestionsChange"]);
 
 // src/modules/rich-text-editor.hooks.ts
 var import_vue = require("vue");
@@ -1809,6 +1813,7 @@ var import_css7 = require("@mekari/pixel3-styled-system/css");
 var import_pixel3_avatar = require("@mekari/pixel3-avatar");
 var import_pixel3_popover4 = require("@mekari/pixel3-popover");
 var import_pixel3_text3 = require("@mekari/pixel3-text");
+var import_pixel3_spinner = require("@mekari/pixel3-spinner");
 var avatarVariantColors = ["violet", "lime", "amber", "sky", "pink", "teal", "rose", "stone"];
 var getAvatarVariantColor = /* @__PURE__ */ __name((index) => {
   return avatarVariantColors[index % avatarVariantColors.length];
@@ -1823,6 +1828,10 @@ var MentionList = (0, import_vue21.defineComponent)({
     command: {
       type: Function,
       required: true
+    },
+    isLoading: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, {
@@ -1907,7 +1916,16 @@ var MentionList = (0, import_vue21.defineComponent)({
           },
           "data-pixel-rte": true
         }, {
-          default: () => [!props.items.length && (0, import_vue20.createVNode)(import_pixel3_text3.MpText, {
+          default: () => [props.isLoading && (0, import_vue20.createVNode)("div", {
+            "class": (0, import_css7.css)({
+              display: "flex",
+              justifyContent: "center",
+              px: "3",
+              py: "3"
+            })
+          }, [(0, import_vue20.createVNode)(import_pixel3_spinner.MpSpinner, {
+            "size": "sm"
+          }, null)]), !props.isLoading && !props.items.length && (0, import_vue20.createVNode)(import_pixel3_text3.MpText, {
             "color": "text.secondary",
             "class": (0, import_css7.css)({
               px: "3",
@@ -1915,7 +1933,7 @@ var MentionList = (0, import_vue21.defineComponent)({
             })
           }, {
             default: () => [(0, import_vue20.createTextVNode)("No result")]
-          }), props.items.map((item, index) => {
+          }), !props.isLoading && props.items.map((item, index) => {
             return (0, import_vue20.createVNode)(import_pixel3_popover4.MpPopoverListItem, {
               "key": `${item.id}-${index}`,
               "is-active": selectedIndex.value === index,
@@ -1969,8 +1987,7 @@ var MentionList = (0, import_vue21.defineComponent)({
 });
 
 // src/rte-suggestion.ts
-var MAX_SUGGESTION_ITEMS = 10;
-var getFilteredSuggestionItems = /* @__PURE__ */ __name((items, query) => {
+var getFilteredSuggestionItems = /* @__PURE__ */ __name((items, query, maxItems) => {
   const normalizedQuery = query.trim().toLowerCase();
   return items.filter((item) => {
     var _a, _b;
@@ -1981,14 +1998,25 @@ var getFilteredSuggestionItems = /* @__PURE__ */ __name((items, query) => {
     const label = ((_a = item.name) != null ? _a : "").toLowerCase();
     const description = ((_b = item.description) != null ? _b : "").toLowerCase();
     return id.includes(normalizedQuery) || label.includes(normalizedQuery) || description.includes(normalizedQuery);
-  }).slice(0, MAX_SUGGESTION_ITEMS);
+  }).slice(0, maxItems);
 }, "getFilteredSuggestionItems");
-var createMentionSuggestion = /* @__PURE__ */ __name((getSuggestionItems = () => []) => {
+var createMentionSuggestion = /* @__PURE__ */ __name((getSuggestionSource = () => [], options = {}) => {
+  var _a;
+  const maxItems = (_a = options.maxItems) != null ? _a : 50;
   return {
-    items: ({
+    items: async ({
       query
     }) => {
-      return getFilteredSuggestionItems(getSuggestionItems(), query);
+      var _a2, _b, _c;
+      const source = getSuggestionSource();
+      if (typeof source === "function") {
+        const items2 = ((_a2 = await source(query)) != null ? _a2 : []).slice(0, maxItems);
+        (_b = options.onSuggestionsChange) == null ? void 0 : _b.call(options, items2);
+        return items2;
+      }
+      const items = getFilteredSuggestionItems(source != null ? source : [], query, maxItems);
+      (_c = options.onSuggestionsChange) == null ? void 0 : _c.call(options, items);
+      return items;
     },
     render: () => {
       let component = null;
@@ -2049,8 +2077,8 @@ var createMentionSuggestion = /* @__PURE__ */ __name((getSuggestionItems = () =>
         }
         return {
           getBoundingClientRect: () => {
-            var _a;
-            return (_a = clientRectProvider == null ? void 0 : clientRectProvider()) != null ? _a : new DOMRect();
+            var _a2;
+            return (_a2 = clientRectProvider == null ? void 0 : clientRectProvider()) != null ? _a2 : new DOMRect();
           }
         };
       }, "getVirtualElement");
@@ -2079,14 +2107,18 @@ var createMentionSuggestion = /* @__PURE__ */ __name((getSuggestionItems = () =>
         popperInstance.update();
       }, "updatePopoverPosition");
       return {
-        onStart: (props) => {
+        // Fires synchronously before `items()` resolves, so the popover can
+        // mount showing a loading state instead of a blank/"No result" flash
+        // while the (possibly async) suggestion source is fetched.
+        onBeforeStart: (props) => {
           clientRectProvider = props.clientRect;
           editorElement = props.editor.view.dom;
           component = new import_vue_3.VueRenderer(MentionList, {
             editor: props.editor,
             props: {
-              items: props.items,
-              command: props.command
+              items: [],
+              command: props.command,
+              isLoading: true
             }
           });
           popoverWrapper = document.createElement("div");
@@ -2099,21 +2131,39 @@ var createMentionSuggestion = /* @__PURE__ */ __name((getSuggestionItems = () =>
           setupOutsideListeners();
           updatePopoverPosition();
         },
+        onStart: (props) => {
+          clientRectProvider = props.clientRect;
+          component == null ? void 0 : component.updateProps({
+            items: props.items,
+            command: props.command,
+            isLoading: false
+          });
+          updatePopoverPosition();
+        },
+        // Fires before every re-fetch triggered by a query change — flips
+        // back to the loading state until the new `items()` call resolves.
+        onBeforeUpdate: (props) => {
+          clientRectProvider = props.clientRect;
+          component == null ? void 0 : component.updateProps({
+            isLoading: true
+          });
+        },
         onUpdate: (props) => {
           clientRectProvider = props.clientRect;
           component == null ? void 0 : component.updateProps({
             items: props.items,
-            command: props.command
+            command: props.command,
+            isLoading: false
           });
           updatePopoverPosition();
         },
         onKeyDown: (props) => {
-          var _a, _b;
+          var _a2, _b;
           if (props.event.key === "Escape") {
             destroyMentionPopover();
             return true;
           }
-          return (_b = (_a = component == null ? void 0 : component.ref) == null ? void 0 : _a.onKeyDown(props)) != null ? _b : false;
+          return (_b = (_a2 = component == null ? void 0 : component.ref) == null ? void 0 : _a2.onKeyDown(props)) != null ? _b : false;
         },
         onExit: () => {
           destroyMentionPopover();
@@ -2129,7 +2179,7 @@ var import_vue_32 = require("@tiptap/vue-3");
 var import_core4 = require("@popperjs/core");
 var import_state = require("@tiptap/pm/state");
 var VariablePluginKey = new import_state.PluginKey("variable");
-var MAX_SUGGESTION_ITEMS2 = 50;
+var MAX_SUGGESTION_ITEMS = 50;
 var getFilteredSuggestionItems2 = /* @__PURE__ */ __name((items, query) => {
   const normalizedQuery = query.trim().toLowerCase();
   return items.filter((item) => {
@@ -2141,7 +2191,7 @@ var getFilteredSuggestionItems2 = /* @__PURE__ */ __name((items, query) => {
     const name = ((_a = item.name) != null ? _a : "").toLowerCase();
     const category = ((_b = item.category) != null ? _b : "").toLowerCase();
     return id.includes(normalizedQuery) || name.includes(normalizedQuery) || category.includes(normalizedQuery);
-  }).slice(0, MAX_SUGGESTION_ITEMS2);
+  }).slice(0, MAX_SUGGESTION_ITEMS);
 }, "getFilteredSuggestionItems");
 var createVariableSuggestion = /* @__PURE__ */ __name((getSuggestionItems = () => []) => {
   return {
@@ -2368,8 +2418,15 @@ var MpRichTextEditor = (0, import_vue23.defineComponent)({
         import_extension_character_count.default.configure({
           limit: api.value.maxlength
         }),
-        ...props.suggestions && props.suggestions.length > 0 ? [import_extension_mention.default.configure({
-          suggestion: createMentionSuggestion(() => props.suggestions || [])
+        // Extensions are registered once at mount, so the array-length check
+        // here can't be reactive. A resolver function always registers the
+        // extension — use that form when suggestions are loaded dynamically
+        // (e.g. fetched from an API after mount).
+        ...typeof props.suggestions === "function" || props.suggestions && props.suggestions.length > 0 ? [import_extension_mention.default.configure({
+          suggestion: createMentionSuggestion(() => props.suggestions, {
+            maxItems: props.maxSuggestions,
+            onSuggestionsChange: (items) => emit("suggestionsChange", items)
+          })
         })] : [],
         ...props.variables && props.variables.length > 0 ? [Variable.configure({
           suggestion: createVariableSuggestion(() => props.variables || [])