@mekari/pixel3-rich-text-editor 0.0.18 → 0.1.0-dev.0

package/dist/{chunk-FZPMIQTC.mjs → chunk-2LGSTJSZ.mjs}

@@ -1,7 +1,7 @@
 import {
   ColorTextIcon,
   FillTextIcon
-} from "./chunk-RNQQ7LGC.mjs";
+} from "./chunk-PQRMWB4A.mjs";
 import {
   __name
 } from "./chunk-QZ7VFGWC.mjs";
@@ -57,6 +57,7 @@ var ColorExtension = defineComponent({
       "preset": colorPreset,
       "variant": "basic",
       "placement": "bottom-start",
+      "usePortal": true,
       "isShowPreset": true,
       "isShowInput": false,
       "class": css({

package/dist/chunk-4KJOYLJI.mjs

@@ -0,0 +1,168 @@
+import {
+  MentionList
+} from "./chunk-4TUA5VF4.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// 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) => {
+  const normalizedQuery = query.trim().toLowerCase();
+  return items.filter((item) => {
+    var _a, _b;
+    if (!normalizedQuery) {
+      return true;
+    }
+    const id = item.id.toLowerCase();
+    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);
+}, "getFilteredSuggestionItems");
+var createMentionSuggestion = /* @__PURE__ */ __name((getSuggestionItems = () => []) => {
+  return {
+    items: ({
+      query
+    }) => {
+      return getFilteredSuggestionItems(getSuggestionItems(), query);
+    },
+    render: () => {
+      let component = null;
+      let popperInstance = null;
+      let popoverWrapper = null;
+      let clientRectProvider;
+      let editorElement = null;
+      let removeOutsideListeners = null;
+      const destroyMentionPopover = /* @__PURE__ */ __name(() => {
+        removeOutsideListeners == null ? void 0 : removeOutsideListeners();
+        removeOutsideListeners = null;
+        popperInstance == null ? void 0 : popperInstance.destroy();
+        popperInstance = null;
+        popoverWrapper == null ? void 0 : popoverWrapper.remove();
+        popoverWrapper = null;
+        component == null ? void 0 : component.destroy();
+        component = null;
+      }, "destroyMentionPopover");
+      const isWithinMentionContext = /* @__PURE__ */ __name((target) => {
+        if (!(target instanceof Node)) {
+          return false;
+        }
+        return Boolean((editorElement == null ? void 0 : editorElement.contains(target)) || (popoverWrapper == null ? void 0 : popoverWrapper.contains(target)));
+      }, "isWithinMentionContext");
+      const setupOutsideListeners = /* @__PURE__ */ __name(() => {
+        if (!editorElement || removeOutsideListeners) {
+          return;
+        }
+        const handleDocumentFocusIn = /* @__PURE__ */ __name((event) => {
+          if (!isWithinMentionContext(event.target)) {
+            destroyMentionPopover();
+          }
+        }, "handleDocumentFocusIn");
+        const handleDocumentPointerDown = /* @__PURE__ */ __name((event) => {
+          if (!isWithinMentionContext(event.target)) {
+            destroyMentionPopover();
+          }
+        }, "handleDocumentPointerDown");
+        const handleEditorFocusOut = /* @__PURE__ */ __name((event) => {
+          if (!isWithinMentionContext(event.relatedTarget)) {
+            destroyMentionPopover();
+          }
+        }, "handleEditorFocusOut");
+        document.addEventListener("focusin", handleDocumentFocusIn);
+        document.addEventListener("mousedown", handleDocumentPointerDown, true);
+        document.addEventListener("touchstart", handleDocumentPointerDown, true);
+        editorElement.addEventListener("focusout", handleEditorFocusOut);
+        removeOutsideListeners = /* @__PURE__ */ __name(() => {
+          document.removeEventListener("focusin", handleDocumentFocusIn);
+          document.removeEventListener("mousedown", handleDocumentPointerDown, true);
+          document.removeEventListener("touchstart", handleDocumentPointerDown, true);
+          editorElement == null ? void 0 : editorElement.removeEventListener("focusout", handleEditorFocusOut);
+        }, "removeOutsideListeners");
+      }, "setupOutsideListeners");
+      const getVirtualElement = /* @__PURE__ */ __name(() => {
+        if (!clientRectProvider) {
+          return null;
+        }
+        return {
+          getBoundingClientRect: () => {
+            var _a;
+            return (_a = clientRectProvider == null ? void 0 : clientRectProvider()) != null ? _a : new DOMRect();
+          }
+        };
+      }, "getVirtualElement");
+      const updatePopoverPosition = /* @__PURE__ */ __name(() => {
+        const virtualElement = getVirtualElement();
+        if (!virtualElement || !popoverWrapper) {
+          return;
+        }
+        if (!popperInstance) {
+          popperInstance = createPopper(virtualElement, popoverWrapper, {
+            placement: "bottom-start",
+            modifiers: [{
+              name: "offset",
+              options: {
+                offset: [0, 8]
+              }
+            }, {
+              name: "flip",
+              options: {
+                fallbackPlacements: ["top-start"]
+              }
+            }]
+          });
+          return;
+        }
+        popperInstance.update();
+      }, "updatePopoverPosition");
+      return {
+        onStart: (props) => {
+          clientRectProvider = props.clientRect;
+          editorElement = props.editor.view.dom;
+          component = new VueRenderer(MentionList, {
+            editor: props.editor,
+            props: {
+              items: props.items,
+              command: props.command
+            }
+          });
+          popoverWrapper = document.createElement("div");
+          popoverWrapper.style.position = "absolute";
+          popoverWrapper.style.zIndex = "var(--mp-z-index-popover)";
+          if (component.element) {
+            popoverWrapper.append(component.element);
+          }
+          document.body.append(popoverWrapper);
+          setupOutsideListeners();
+          updatePopoverPosition();
+        },
+        onUpdate: (props) => {
+          clientRectProvider = props.clientRect;
+          component == null ? void 0 : component.updateProps({
+            items: props.items,
+            command: props.command
+          });
+          updatePopoverPosition();
+        },
+        onKeyDown: (props) => {
+          var _a, _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;
+        },
+        onExit: () => {
+          destroyMentionPopover();
+          editorElement = null;
+        }
+      };
+    }
+  };
+}, "createMentionSuggestion");
+
+export {
+  createMentionSuggestion
+};

package/dist/chunk-4TUA5VF4.mjs

@@ -0,0 +1,173 @@
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
+
+// src/extensions/mention-list-extension.tsx
+import { createVNode as _createVNode, createTextVNode as _createTextVNode } 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";
+var avatarVariantColors = ["violet", "lime", "amber", "sky", "pink", "teal", "rose", "stone"];
+var getAvatarVariantColor = /* @__PURE__ */ __name((index) => {
+  return avatarVariantColors[index % avatarVariantColors.length];
+}, "getAvatarVariantColor");
+var MentionList = defineComponent({
+  name: "MentionList",
+  props: {
+    items: {
+      type: Array,
+      default: () => []
+    },
+    command: {
+      type: Function,
+      required: true
+    }
+  },
+  setup(props, {
+    expose
+  }) {
+    const selectedIndex = ref(0);
+    const listRef = ref(null);
+    const scrollToFocusedItem = /* @__PURE__ */ __name(() => {
+      nextTick(() => {
+        if (!listRef.value)
+          return;
+        const targetItem = listRef.value.querySelector('[data-active="true"], [data-highlight]');
+        if (targetItem) {
+          targetItem.scrollIntoView({
+            block: "nearest"
+          });
+        }
+      });
+    }, "scrollToFocusedItem");
+    watch(() => props.items, () => {
+      selectedIndex.value = 0;
+    });
+    const onSelect = /* @__PURE__ */ __name((index) => {
+      const item = props.items[index];
+      if (item) {
+        props.command({
+          ...item,
+          label: item.name
+        });
+      }
+    }, "onSelect");
+    const onKeyDown = /* @__PURE__ */ __name(({
+      event
+    }) => {
+      if (!props.items.length) {
+        return false;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        const total = props.items.length;
+        selectedIndex.value = (selectedIndex.value + total - 1) % total;
+        scrollToFocusedItem();
+        return true;
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        selectedIndex.value = (selectedIndex.value + 1) % props.items.length;
+        scrollToFocusedItem();
+        return true;
+      }
+      if (event.key === "Enter") {
+        event.preventDefault();
+        onSelect(selectedIndex.value);
+        return true;
+      }
+      return false;
+    }, "onKeyDown");
+    expose({
+      onKeyDown
+    });
+    return () => _createVNode(MpPopover, {
+      "id": "popover-rte-mention-list",
+      "is-manual": true,
+      "is-default-open": true,
+      "is-open": true
+    }, {
+      default: () => [_createVNode(MpPopoverContent, {
+        "class": css({
+          width: "280px",
+          maxHeight: "284px",
+          overflowY: "auto"
+        })
+      }, {
+        default: () => [_createVNode(MpPopoverList, {
+          "ref": (element) => {
+            var _a;
+            if (!element) {
+              listRef.value = null;
+              return;
+            }
+            listRef.value = (_a = element.$el) != null ? _a : element;
+          },
+          "data-pixel-rte": true
+        }, {
+          default: () => [!props.items.length && _createVNode(MpText, {
+            "color": "text.secondary",
+            "class": css({
+              px: "3",
+              py: "2"
+            })
+          }, {
+            default: () => [_createTextVNode("No result")]
+          }), props.items.map((item, index) => {
+            return _createVNode(MpPopoverListItem, {
+              "key": `${item.id}-${index}`,
+              "is-active": selectedIndex.value === index,
+              "onMousedown": (event) => event.preventDefault(),
+              "onMouseenter": () => {
+                selectedIndex.value = index;
+              },
+              "onClick": () => {
+                onSelect(index);
+              }
+            }, {
+              default: () => [_createVNode("div", {
+                "class": css({
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "2",
+                  width: "full",
+                  minWidth: "0"
+                })
+              }, [item.avatar && _createVNode(MpAvatar, {
+                "id": `avatar-rte-mention-${index}`,
+                "name": item.avatar,
+                "size": "lg",
+                "variant-color": getAvatarVariantColor(index)
+              }, null), _createVNode("div", {
+                "class": css({
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "flex-start",
+                  minWidth: "0",
+                  flex: "1 1 0%"
+                })
+              }, [_createVNode(MpText, {
+                "size": "label",
+                "is-truncated": true
+              }, {
+                default: () => [item.name || "Unknown"]
+              }), item.description && _createVNode(MpText, {
+                "size": "label-small",
+                "color": "text.secondary",
+                "is-truncated": true
+              }, {
+                default: () => [item.description]
+              })])])]
+            });
+          })]
+        })]
+      })]
+    });
+  }
+});
+
+export {
+  MentionList
+};

package/dist/{chunk-2OCRJNTJ.mjs → chunk-7RMCTPMN.mjs}

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

package/dist/{chunk-ES3FCTTF.mjs → chunk-E3MEVHFO.mjs}

@@ -1,16 +1,22 @@
 import {
   EditorToolbar
-} from "./chunk-73N5SLQ5.mjs";
+} from "./chunk-MUYPED2X.mjs";
 import {
   MpRTEStyleProvider
-} from "./chunk-2OCRJNTJ.mjs";
+} from "./chunk-7RMCTPMN.mjs";
 import {
   useRichTextEditor
-} from "./chunk-5IPS4HT7.mjs";
+} from "./chunk-ZRAXSVO5.mjs";
 import {
   richTextEditorEmits,
   richTextEditorProps
-} from "./chunk-GVMGRBDI.mjs";
+} from "./chunk-TNDDXUVW.mjs";
+import {
+  createMentionSuggestion
+} from "./chunk-4KJOYLJI.mjs";
+import {
+  __name
+} from "./chunk-QZ7VFGWC.mjs";
 
 // src/rich-text-editor.tsx
 import { createVNode as _createVNode, mergeProps as _mergeProps } from "vue";
@@ -23,6 +29,7 @@ import TextAlign from "@tiptap/extension-text-align";
 import TextStyle from "@tiptap/extension-text-style";
 import Placeholder from "@tiptap/extension-placeholder";
 import CharacterCount from "@tiptap/extension-character-count";
+import Mention from "@tiptap/extension-mention";
 import { Color } from "@tiptap/extension-color";
 import Link from "@tiptap/extension-link";
 import Highlight from "@tiptap/extension-highlight";
@@ -37,7 +44,6 @@ var MpRichTextEditor = defineComponent({
   }) {
     const formControlProp = useFormControlContext();
     const api = useRichTextEditor(props);
-    console.log(api.value);
     const isFocused = ref(false);
     const {
       isNextTheme
@@ -45,6 +51,12 @@ var MpRichTextEditor = defineComponent({
     const editor = new Editor({
       content: api.value.value,
       editable: (formControlProp == null ? void 0 : formControlProp.value.isDisabled) === void 0 ? !api.value.isDisabled : !(formControlProp == null ? void 0 : formControlProp.value.isDisabled),
+      editorProps: {
+        handlePaste(_view, event) {
+          emit("paste", event);
+          return false;
+        }
+      },
       extensions: [StarterKit.configure({
         heading: {
           levels: [1, 2, 3]
@@ -61,6 +73,8 @@ var MpRichTextEditor = defineComponent({
         placeholder: api.value.placeholder || ""
       }), CharacterCount.configure({
         limit: api.value.maxlength
+      }), Mention.configure({
+        suggestion: createMentionSuggestion(() => props.suggestions || [])
       })],
       onFocus({
         editor: editor2,
@@ -82,6 +96,9 @@ var MpRichTextEditor = defineComponent({
         emit("change", editor2.getHTML(), editor2);
       }
     });
+    const onClickToolbar = /* @__PURE__ */ __name((name) => {
+      emit("action", name);
+    }, "onClickToolbar");
     return () => {
       return _createVNode("div", _mergeProps(api.value.rootProps, {
         "style": {
@@ -93,7 +110,11 @@ var MpRichTextEditor = defineComponent({
       }), [_createVNode(EditorToolbar, _mergeProps({
         "editor": editor,
         "options": api.value.options
-      }, api.value.toolbarProps), null), _createVNode(MpRTEStyleProvider, {
+      }, api.value.toolbarProps, {
+        "onClickImage": () => onClickToolbar("image"),
+        "onClickFile": () => onClickToolbar("file"),
+        "onClickAudio": () => onClickToolbar("audio")
+      }), null), _createVNode(MpRTEStyleProvider, {
         "id": `${api.value.id}-style-provider`
       }, {
         default: () => [_createVNode(EditorContent, _mergeProps({

package/dist/{chunk-WBMECFO3.mjs → chunk-MCGJK3E4.mjs}

@@ -1,6 +1,6 @@
 import {
   CaretIcon
-} from "./chunk-RNQQ7LGC.mjs";
+} from "./chunk-PQRMWB4A.mjs";
 
 // src/extensions/heading-extension.tsx
 import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
@@ -23,7 +23,8 @@ var HeadingExtention = defineComponent({
     editor
   }) {
     return () => _createVNode(MpPopover, {
-      "id": "popover-heading-extention"
+      "id": "popover-heading-extention",
+      "usePortal": true
     }, {
       default: () => [_createVNode(MpPopoverTrigger, null, {
         default: () => [_withDirectives(_createVNode("button", {
@@ -94,84 +95,55 @@ var HeadingExtention = defineComponent({
         })
       }, {
         default: () => [_createVNode(MpPopoverList, {
-          "class": css({
-            gap: "2",
-            alignItems: "flex-start",
-            paddingLeft: "3"
-          })
+          "data-pixel-rte": true
         }, {
           default: () => [_createVNode(MpPopoverListItem, {
-            "class": {
-              "is-active": editor == null ? void 0 : editor.isActive("heading", {
-                level: 1
-              }),
-              "text-sizing": true
-            },
+            "is-active": editor == null ? void 0 : editor.isActive("heading", {
+              level: 1
+            }),
             "onClick": () => (editor == null ? void 0 : editor.chain()).focus().toggleHeading({
               level: 1
             }).run()
           }, {
             default: () => [_createVNode(MpText, {
               "as": "h1",
-              "size": "h1",
-              "class": css({
-                color: "currentColor"
-              })
+              "size": "h1"
             }, {
               default: () => [_createTextVNode("Heading 1")]
             })]
           }), _createVNode(MpPopoverListItem, {
-            "class": {
-              "is-active": editor == null ? void 0 : editor.isActive("heading", {
-                level: 2
-              }),
-              "text-sizing": true
-            },
+            "is-active": editor == null ? void 0 : editor.isActive("heading", {
+              level: 2
+            }),
             "onClick": () => (editor == null ? void 0 : editor.chain()).focus().toggleHeading({
               level: 2
             }).run()
           }, {
             default: () => [_createVNode(MpText, {
               "as": "h2",
-              "size": "h2",
-              "class": css({
-                color: "currentColor"
-              })
+              "size": "h2"
             }, {
               default: () => [_createTextVNode("Heading 2")]
             })]
           }), _createVNode(MpPopoverListItem, {
-            "class": {
-              "is-active": editor == null ? void 0 : editor.isActive("heading", {
-                level: 3
-              }),
-              "text-sizing": true
-            },
+            "is-active": editor == null ? void 0 : editor.isActive("heading", {
+              level: 3
+            }),
             "onClick": () => (editor == null ? void 0 : editor.chain()).focus().toggleHeading({
               level: 3
             }).run()
           }, {
             default: () => [_createVNode(MpText, {
               "as": "h3",
-              "size": "h3",
-              "class": css({
-                color: "currentColor"
-              })
+              "size": "h3"
             }, {
               default: () => [_createTextVNode("Heading 3")]
             })]
           }), _createVNode(MpPopoverListItem, {
-            "class": {
-              "is-active": editor == null ? void 0 : editor.isActive("paragraph"),
-              "text-sizing": true
-            },
+            "is-active": editor == null ? void 0 : editor.isActive("paragraph"),
             "onClick": () => (editor == null ? void 0 : editor.chain()).focus().setParagraph().run()
           }, {
-            default: () => [_createVNode(MpText, {
-              "class": css({
-                color: "currentColor"
-              })
-            }, {
+            default: () => [_createVNode(MpText, null, {
               default: () => [_createTextVNode("Normal text")]
             })]
           })]