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

package/dist/modules/rich-text-editor.props.d.mts

@@ -1,4 +1,4 @@
-import { ToolbarOption, MentionSuggestionItem, VariableSuggestionItem } from './rich-text-editor.types.mjs';
+import { ToolbarOption, MentionSuggestionSource, VariableSuggestionItem } from './rich-text-editor.types.mjs';
 import { PropType } from 'vue';
 import '@mekari/pixel3-utils';
 
@@ -31,9 +31,13 @@ declare const richTextEditorProps: {
         default: boolean;
     };
     suggestions: {
-        type: PropType<MentionSuggestionItem[] | undefined>;
+        type: PropType<MentionSuggestionSource | undefined>;
         default: () => never[];
     };
+    maxSuggestions: {
+        type: PropType<number | undefined>;
+        default: number;
+    };
     variables: {
         type: PropType<VariableSuggestionItem[] | undefined>;
         default: () => never[];
@@ -53,6 +57,6 @@ declare const RTEStyleProviderProps: {
         type: PropType<string | undefined>;
     };
 };
-declare const richTextEditorEmits: ("change" | "blur" | "focus" | "action" | "paste")[];
+declare const richTextEditorEmits: ("change" | "blur" | "focus" | "action" | "paste" | "suggestionsChange")[];
 
 export { RTEStyleProviderProps, richTextEditorEmits, richTextEditorProps };

package/dist/modules/rich-text-editor.props.d.ts

@@ -1,4 +1,4 @@
-import { ToolbarOption, MentionSuggestionItem, VariableSuggestionItem } from './rich-text-editor.types.js';
+import { ToolbarOption, MentionSuggestionSource, VariableSuggestionItem } from './rich-text-editor.types.js';
 import { PropType } from 'vue';
 import '@mekari/pixel3-utils';
 
@@ -31,9 +31,13 @@ declare const richTextEditorProps: {
         default: boolean;
     };
     suggestions: {
-        type: PropType<MentionSuggestionItem[] | undefined>;
+        type: PropType<MentionSuggestionSource | undefined>;
         default: () => never[];
     };
+    maxSuggestions: {
+        type: PropType<number | undefined>;
+        default: number;
+    };
     variables: {
         type: PropType<VariableSuggestionItem[] | undefined>;
         default: () => never[];
@@ -53,6 +57,6 @@ declare const RTEStyleProviderProps: {
         type: PropType<string | undefined>;
     };
 };
-declare const richTextEditorEmits: ("change" | "blur" | "focus" | "action" | "paste")[];
+declare const richTextEditorEmits: ("change" | "blur" | "focus" | "action" | "paste" | "suggestionsChange")[];
 
 export { RTEStyleProviderProps, richTextEditorEmits, richTextEditorProps };

package/dist/modules/rich-text-editor.props.js

@@ -55,9 +55,13 @@ var richTextEditorProps = {
     default: true
   },
   suggestions: {
-    type: Array,
+    type: [Array, Function],
     default: () => []
   },
+  maxSuggestions: {
+    type: Number,
+    default: 50
+  },
   variables: {
     type: Array,
     default: () => []
@@ -74,7 +78,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"]);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   RTEStyleProviderProps,

package/dist/modules/rich-text-editor.props.mjs

@@ -2,7 +2,7 @@ import {
   RTEStyleProviderProps,
   richTextEditorEmits,
   richTextEditorProps
-} from "../chunk-6O4HSL2C.mjs";
+} from "../chunk-B5BN5T5O.mjs";
 import "../chunk-QZ7VFGWC.mjs";
 export {
   RTEStyleProviderProps,

package/dist/modules/rich-text-editor.types.d.mts

@@ -10,6 +10,13 @@ interface MentionSuggestionItem {
     description?: string;
     avatar?: string;
 }
+/**
+ * Mention suggestions can be a static array (filtered internally by the
+ * editor) or a resolver function that receives the current mention query and
+ * returns the items to show — synchronously or as a Promise (e.g. from an API
+ * call). With the function form, filtering is fully delegated to the resolver.
+ */
+type MentionSuggestionSource = MentionSuggestionItem[] | ((query: string) => MentionSuggestionItem[] | Promise<MentionSuggestionItem[]>);
 interface VariableSuggestionItem {
     id: string;
     name: string;
@@ -21,7 +28,8 @@ interface RichTextEditorProps {
     placeholder?: string;
     maxlength?: number;
     options?: ToolbarOption[][];
-    suggestions?: MentionSuggestionItem[];
+    suggestions?: MentionSuggestionSource;
+    maxSuggestions?: number;
     variables?: VariableSuggestionItem[];
     isInvalid: boolean;
     isDisabled: boolean;
@@ -45,7 +53,8 @@ interface RichTextEditorApiMachine<T extends PropTypes = PropTypes> {
     placeholder?: string;
     maxlength?: number;
     options?: ToolbarOption[][];
-    suggestions?: MentionSuggestionItem[];
+    suggestions?: MentionSuggestionSource;
+    maxSuggestions?: number;
     variables?: VariableSuggestionItem[];
     isInvalid?: boolean;
     isDisabled?: boolean;
@@ -82,4 +91,4 @@ interface ItemOptions {
 }
 type ActionTypes = 'image' | 'file' | 'audio' | 'mention' | 'variable' | 'location';
 
-export { ActionTypes, ItemOptions, Items, MentionSuggestionItem, RTEStyleProviderApiMachine, RTEStyleProviderClasses, RTEStyleProviderDefinedContext, RTEStyleProviderState, RichTextEditorApiMachine, RichTextEditorClasses, RichTextEditorDefinedContext, RichTextEditorProps, RichTextEditorState, RteStyleProviderProps, ToolbarOption, ToolbarOptionObject, VariableSuggestionItem };
+export { ActionTypes, ItemOptions, Items, MentionSuggestionItem, MentionSuggestionSource, RTEStyleProviderApiMachine, RTEStyleProviderClasses, RTEStyleProviderDefinedContext, RTEStyleProviderState, RichTextEditorApiMachine, RichTextEditorClasses, RichTextEditorDefinedContext, RichTextEditorProps, RichTextEditorState, RteStyleProviderProps, ToolbarOption, ToolbarOptionObject, VariableSuggestionItem };

package/dist/modules/rich-text-editor.types.d.ts

@@ -10,6 +10,13 @@ interface MentionSuggestionItem {
     description?: string;
     avatar?: string;
 }
+/**
+ * Mention suggestions can be a static array (filtered internally by the
+ * editor) or a resolver function that receives the current mention query and
+ * returns the items to show — synchronously or as a Promise (e.g. from an API
+ * call). With the function form, filtering is fully delegated to the resolver.
+ */
+type MentionSuggestionSource = MentionSuggestionItem[] | ((query: string) => MentionSuggestionItem[] | Promise<MentionSuggestionItem[]>);
 interface VariableSuggestionItem {
     id: string;
     name: string;
@@ -21,7 +28,8 @@ interface RichTextEditorProps {
     placeholder?: string;
     maxlength?: number;
     options?: ToolbarOption[][];
-    suggestions?: MentionSuggestionItem[];
+    suggestions?: MentionSuggestionSource;
+    maxSuggestions?: number;
     variables?: VariableSuggestionItem[];
     isInvalid: boolean;
     isDisabled: boolean;
@@ -45,7 +53,8 @@ interface RichTextEditorApiMachine<T extends PropTypes = PropTypes> {
     placeholder?: string;
     maxlength?: number;
     options?: ToolbarOption[][];
-    suggestions?: MentionSuggestionItem[];
+    suggestions?: MentionSuggestionSource;
+    maxSuggestions?: number;
     variables?: VariableSuggestionItem[];
     isInvalid?: boolean;
     isDisabled?: boolean;
@@ -82,4 +91,4 @@ interface ItemOptions {
 }
 type ActionTypes = 'image' | 'file' | 'audio' | 'mention' | 'variable' | 'location';
 
-export { ActionTypes, ItemOptions, Items, MentionSuggestionItem, RTEStyleProviderApiMachine, RTEStyleProviderClasses, RTEStyleProviderDefinedContext, RTEStyleProviderState, RichTextEditorApiMachine, RichTextEditorClasses, RichTextEditorDefinedContext, RichTextEditorProps, RichTextEditorState, RteStyleProviderProps, ToolbarOption, ToolbarOptionObject, VariableSuggestionItem };
+export { ActionTypes, ItemOptions, Items, MentionSuggestionItem, MentionSuggestionSource, RTEStyleProviderApiMachine, RTEStyleProviderClasses, RTEStyleProviderDefinedContext, RTEStyleProviderState, RichTextEditorApiMachine, RichTextEditorClasses, RichTextEditorDefinedContext, RichTextEditorProps, RichTextEditorState, RteStyleProviderProps, ToolbarOption, ToolbarOptionObject, VariableSuggestionItem };

package/dist/rich-text-editor.d.mts

@@ -1,5 +1,5 @@
 import * as vue_jsx_runtime from 'vue/jsx-runtime';
-import { ToolbarOption, MentionSuggestionItem, VariableSuggestionItem } from './modules/rich-text-editor.types.mjs';
+import { ToolbarOption, MentionSuggestionSource, VariableSuggestionItem } from './modules/rich-text-editor.types.mjs';
 import * as vue from 'vue';
 import '@mekari/pixel3-utils';
 
@@ -32,9 +32,13 @@ declare const MpRichTextEditor: vue.DefineComponent<{
         default: boolean;
     };
     suggestions: {
-        type: vue.PropType<MentionSuggestionItem[] | undefined>;
+        type: vue.PropType<MentionSuggestionSource | undefined>;
         default: () => never[];
     };
+    maxSuggestions: {
+        type: vue.PropType<number | undefined>;
+        default: number;
+    };
     variables: {
         type: vue.PropType<VariableSuggestionItem[] | undefined>;
         default: () => never[];
@@ -48,7 +52,7 @@ declare const MpRichTextEditor: vue.DefineComponent<{
     transformLink: {
         type: vue.PropType<((url: string) => string) | undefined>;
     };
-}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "blur" | "focus" | "action" | "paste")[], "change" | "blur" | "focus" | "action" | "paste", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "blur" | "focus" | "action" | "paste" | "suggestionsChange")[], "change" | "blur" | "focus" | "action" | "paste" | "suggestionsChange", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     id: {
         type: vue.PropType<string | undefined>;
     };
@@ -77,9 +81,13 @@ declare const MpRichTextEditor: vue.DefineComponent<{
         default: boolean;
     };
     suggestions: {
-        type: vue.PropType<MentionSuggestionItem[] | undefined>;
+        type: vue.PropType<MentionSuggestionSource | undefined>;
         default: () => never[];
     };
+    maxSuggestions: {
+        type: vue.PropType<number | undefined>;
+        default: number;
+    };
     variables: {
         type: vue.PropType<VariableSuggestionItem[] | undefined>;
         default: () => never[];
@@ -99,8 +107,10 @@ declare const MpRichTextEditor: vue.DefineComponent<{
     onBlur?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
     onAction?: ((...args: any[]) => any) | undefined;
+    onSuggestionsChange?: ((...args: any[]) => any) | undefined;
 }, {
-    suggestions: MentionSuggestionItem[] | undefined;
+    suggestions: MentionSuggestionSource | undefined;
+    maxSuggestions: number | undefined;
     variables: VariableSuggestionItem[] | undefined;
     isInvalid: boolean;
     isDisabled: boolean;

package/dist/rich-text-editor.d.ts

@@ -1,5 +1,5 @@
 import * as vue_jsx_runtime from 'vue/jsx-runtime';
-import { ToolbarOption, MentionSuggestionItem, VariableSuggestionItem } from './modules/rich-text-editor.types.js';
+import { ToolbarOption, MentionSuggestionSource, VariableSuggestionItem } from './modules/rich-text-editor.types.js';
 import * as vue from 'vue';
 import '@mekari/pixel3-utils';
 
@@ -32,9 +32,13 @@ declare const MpRichTextEditor: vue.DefineComponent<{
         default: boolean;
     };
     suggestions: {
-        type: vue.PropType<MentionSuggestionItem[] | undefined>;
+        type: vue.PropType<MentionSuggestionSource | undefined>;
         default: () => never[];
     };
+    maxSuggestions: {
+        type: vue.PropType<number | undefined>;
+        default: number;
+    };
     variables: {
         type: vue.PropType<VariableSuggestionItem[] | undefined>;
         default: () => never[];
@@ -48,7 +52,7 @@ declare const MpRichTextEditor: vue.DefineComponent<{
     transformLink: {
         type: vue.PropType<((url: string) => string) | undefined>;
     };
-}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "blur" | "focus" | "action" | "paste")[], "change" | "blur" | "focus" | "action" | "paste", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "blur" | "focus" | "action" | "paste" | "suggestionsChange")[], "change" | "blur" | "focus" | "action" | "paste" | "suggestionsChange", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     id: {
         type: vue.PropType<string | undefined>;
     };
@@ -77,9 +81,13 @@ declare const MpRichTextEditor: vue.DefineComponent<{
         default: boolean;
     };
     suggestions: {
-        type: vue.PropType<MentionSuggestionItem[] | undefined>;
+        type: vue.PropType<MentionSuggestionSource | undefined>;
         default: () => never[];
     };
+    maxSuggestions: {
+        type: vue.PropType<number | undefined>;
+        default: number;
+    };
     variables: {
         type: vue.PropType<VariableSuggestionItem[] | undefined>;
         default: () => never[];
@@ -99,8 +107,10 @@ declare const MpRichTextEditor: vue.DefineComponent<{
     onBlur?: ((...args: any[]) => any) | undefined;
     onChange?: ((...args: any[]) => any) | undefined;
     onAction?: ((...args: any[]) => any) | undefined;
+    onSuggestionsChange?: ((...args: any[]) => any) | undefined;
 }, {
-    suggestions: MentionSuggestionItem[] | undefined;
+    suggestions: MentionSuggestionSource | undefined;
+    maxSuggestions: number | undefined;
     variables: VariableSuggestionItem[] | undefined;
     isInvalid: boolean;
     isDisabled: boolean;

package/dist/rich-text-editor.js

@@ -69,9 +69,13 @@ var richTextEditorProps = {
     default: true
   },
   suggestions: {
-    type: Array,
+    type: [Array, Function],
     default: () => []
   },
+  maxSuggestions: {
+    type: Number,
+    default: 50
+  },
   variables: {
     type: Array,
     default: () => []
@@ -88,7 +92,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");
@@ -1806,6 +1810,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];
@@ -1820,6 +1825,10 @@ var MentionList = (0, import_vue21.defineComponent)({
     command: {
       type: Function,
       required: true
+    },
+    isLoading: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, {
@@ -1904,7 +1913,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",
@@ -1912,7 +1930,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,
@@ -1966,8 +1984,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;
@@ -1978,14 +1995,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;
@@ -2046,8 +2074,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");
@@ -2076,14 +2104,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");
@@ -2096,21 +2128,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();
@@ -2126,7 +2176,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) => {
@@ -2138,7 +2188,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 {
@@ -2365,8 +2415,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 || [])

package/dist/rich-text-editor.mjs

@@ -1,23 +1,23 @@
 import {
   MpRichTextEditor
-} from "./chunk-4ZCPCZD2.mjs";
-import "./chunk-G4CGNV6P.mjs";
+} from "./chunk-E4R6ETA7.mjs";
+import "./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-RVXAG7LK.mjs";
+import "./chunk-ZRAXSVO5.mjs";
+import "./chunk-ZAXJ3BEP.mjs";
+import "./chunk-B5BN5T5O.mjs";
+import "./chunk-RTEK53TL.mjs";
+import "./chunk-ELFAGDKG.mjs";
+import "./chunk-BWRU2WZN.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-BA5A7DIS.mjs";
-import "./chunk-6O4HSL2C.mjs";
-import "./chunk-4KJOYLJI.mjs";
-import "./chunk-4TUA5VF4.mjs";
-import "./chunk-BWRU2WZN.mjs";
-import "./chunk-76GEEOAG.mjs";
-import "./chunk-ZRAXSVO5.mjs";
-import "./chunk-ZAXJ3BEP.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {
   MpRichTextEditor

package/dist/rte-style-provider.js

@@ -34,7 +34,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");

package/dist/rte-style-provider.mjs

@@ -1,9 +1,9 @@
 import {
   MpRTEStyleProvider
-} from "./chunk-BA5A7DIS.mjs";
-import "./chunk-6O4HSL2C.mjs";
+} from "./chunk-RVXAG7LK.mjs";
 import "./chunk-ZRAXSVO5.mjs";
 import "./chunk-ZAXJ3BEP.mjs";
+import "./chunk-B5BN5T5O.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {
   MpRTEStyleProvider

package/dist/rte-suggestion.d.mts

@@ -1,7 +1,11 @@
 import { MentionOptions } from '@tiptap/extension-mention';
-import { MentionSuggestionItem } from './modules/rich-text-editor.types.mjs';
+import { MentionSuggestionItem, MentionSuggestionSource } from './modules/rich-text-editor.types.mjs';
 import '@mekari/pixel3-utils';
 
-declare const createMentionSuggestion: (getSuggestionItems?: () => MentionSuggestionItem[]) => MentionOptions['suggestion'];
+interface CreateMentionSuggestionOptions {
+    maxItems?: number;
+    onSuggestionsChange?: (items: MentionSuggestionItem[]) => void;
+}
+declare const createMentionSuggestion: (getSuggestionSource?: () => MentionSuggestionSource | undefined, options?: CreateMentionSuggestionOptions) => MentionOptions['suggestion'];
 
-export { createMentionSuggestion };
+export { CreateMentionSuggestionOptions, createMentionSuggestion };

package/dist/rte-suggestion.d.ts

@@ -1,7 +1,11 @@
 import { MentionOptions } from '@tiptap/extension-mention';
-import { MentionSuggestionItem } from './modules/rich-text-editor.types.js';
+import { MentionSuggestionItem, MentionSuggestionSource } from './modules/rich-text-editor.types.js';
 import '@mekari/pixel3-utils';
 
-declare const createMentionSuggestion: (getSuggestionItems?: () => MentionSuggestionItem[]) => MentionOptions['suggestion'];
+interface CreateMentionSuggestionOptions {
+    maxItems?: number;
+    onSuggestionsChange?: (items: MentionSuggestionItem[]) => void;
+}
+declare const createMentionSuggestion: (getSuggestionSource?: () => MentionSuggestionSource | undefined, options?: CreateMentionSuggestionOptions) => MentionOptions['suggestion'];
 
-export { createMentionSuggestion };
+export { CreateMentionSuggestionOptions, createMentionSuggestion };