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

package/dist/rte-suggestion.js

@@ -34,6 +34,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];
@@ -48,6 +49,10 @@ var MentionList = (0, import_vue2.defineComponent)({
     command: {
       type: Function,
       required: true
+    },
+    isLoading: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, {
@@ -132,7 +137,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",
@@ -140,7 +154,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,
@@ -194,8 +208,7 @@ var MentionList = (0, import_vue2.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;
@@ -206,14 +219,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;
@@ -274,8 +298,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");
@@ -304,14 +328,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");
@@ -324,21 +352,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/rte-suggestion.mjs

@@ -1,7 +1,7 @@
 import {
   createMentionSuggestion
-} from "./chunk-4KJOYLJI.mjs";
-import "./chunk-4TUA5VF4.mjs";
+} from "./chunk-RTEK53TL.mjs";
+import "./chunk-ELFAGDKG.mjs";
 import "./chunk-QZ7VFGWC.mjs";
 export {
   createMentionSuggestion

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mekari/pixel3-rich-text-editor",
   "description": "Mekari Pixel 3 | Rich text editor component is used to content editor based Tiptap.js",
-  "version": "0.1.3",
+  "version": "0.2.0-dev.1",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [
@@ -41,17 +41,18 @@
     "@tiptap/starter-kit": "2.7.4",
     "@tiptap/suggestion": "2.7.4",
     "@tiptap/vue-3": "2.7.4",
-    "@mekari/pixel3-button": "0.2.3",
-    "@mekari/pixel3-color-picker": "0.2.2",
-    "@mekari/pixel3-avatar": "0.0.28",
-    "@mekari/pixel3-divider": "0.0.23",
-    "@mekari/pixel3-form-control": "0.0.23",
-    "@mekari/pixel3-input": "0.0.28",
-    "@mekari/pixel3-popover": "0.0.28",
-    "@mekari/pixel3-scrollbar": "0.1.7",
-    "@mekari/pixel3-text": "0.0.23",
-    "@mekari/pixel3-utils": "0.1.0",
-    "@mekari/pixel3-styled-system": "0.2.1"
+    "@mekari/pixel3-avatar": "0.0.29-dev.0",
+    "@mekari/pixel3-button": "0.2.4-dev.0",
+    "@mekari/pixel3-divider": "0.0.24-dev.0",
+    "@mekari/pixel3-color-picker": "0.2.3-dev.0",
+    "@mekari/pixel3-form-control": "0.0.24-dev.0",
+    "@mekari/pixel3-input": "0.0.29-dev.0",
+    "@mekari/pixel3-popover": "0.0.29-dev.0",
+    "@mekari/pixel3-scrollbar": "0.1.8-dev.0",
+    "@mekari/pixel3-styled-system": "0.3.0-dev.0",
+    "@mekari/pixel3-spinner": "0.0.29-dev.0",
+    "@mekari/pixel3-text": "0.0.24-dev.0",
+    "@mekari/pixel3-utils": "0.1.0"
   },
   "peerDependencies": {
     "vue": "^3.4.9"

package/dist/{chunk-G4CGNV6P.mjs → chunk-RX7ZEE2M.mjs}

@@ -1,3 +1,9 @@
+import {
+  HeadingExtention
+} from "./chunk-X2CB42A3.mjs";
+import {
+  LinkExtension
+} from "./chunk-COZ45QUD.mjs";
 import {
   SingleExtention
 } from "./chunk-FCLBNBXD.mjs";
@@ -7,12 +13,6 @@ import {
 import {
   ColorExtension
 } from "./chunk-Y6UPQ6EU.mjs";
-import {
-  HeadingExtention
-} from "./chunk-X2CB42A3.mjs";
-import {
-  LinkExtension
-} from "./chunk-COZ45QUD.mjs";
 import {
   __name
 } from "./chunk-QZ7VFGWC.mjs";