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

package/dist/{chunk-73N5SLQ5.mjs → chunk-MGNW6NK2.mjs}

@@ -1,18 +1,18 @@
 import {
   LinkExtension
-} from "./chunk-VK7QDWXR.mjs";
+} from "./chunk-PTKS3BYW.mjs";
 import {
   SingleExtention
-} from "./chunk-V52XUOVW.mjs";
+} from "./chunk-SBD2AUDA.mjs";
 import {
   AlignExtention
-} from "./chunk-JAKI6TU2.mjs";
+} from "./chunk-4SN6MBXS.mjs";
 import {
   ColorExtension
-} from "./chunk-FZPMIQTC.mjs";
+} from "./chunk-OZGNQAK5.mjs";
 import {
   HeadingExtention
-} from "./chunk-WBMECFO3.mjs";
+} from "./chunk-X25J3BAC.mjs";
 import {
   __name
 } from "./chunk-QZ7VFGWC.mjs";
@@ -20,9 +20,12 @@ import {
 // src/editor-toolbar.tsx
 import { Fragment as _Fragment, createVNode as _createVNode } from "vue";
 import { defineComponent } from "vue";
+import { css } from "@mekari/pixel3-styled-system/css";
 import { MpDivider } from "@mekari/pixel3-divider";
+import { MpScrollbar } from "@mekari/pixel3-scrollbar";
 var EditorToolbar = defineComponent({
   name: "EditorToolbar",
+  emits: ["clickImage", "clickFile", "clickAudio"],
   props: {
     editor: {
       type: Object
@@ -34,8 +37,10 @@ var EditorToolbar = defineComponent({
   setup({
     editor,
     options
+  }, {
+    emit
   }) {
-    const items = ["heading", "bold", "italic", "underline", "strike", "blockquote", "bulletList", "orderedList", "textColor", "fillColor", "textLink", "align", "undo", "redo", "clear"];
+    const items = ["heading", "bold", "italic", "underline", "strike", "blockquote", "bulletList", "orderedList", "textColor", "fillColor", "textLink", "align", "undo", "redo", "clear", "image", "file", "audio", "mention"];
     const itemOptions = {
       heading: {
         tooltipLabel: "Text style",
@@ -98,52 +103,104 @@ var EditorToolbar = defineComponent({
       clear: {
         tooltipLabel: "Reset format",
         onClick: () => (editor == null ? void 0 : editor.chain()).focus().unsetAllMarks().run()
+      },
+      image: {
+        tooltipLabel: "Add image",
+        onClick: () => emit("clickImage")
+      },
+      file: {
+        tooltipLabel: "Add file",
+        onClick: () => emit("clickFile")
+      },
+      audio: {
+        tooltipLabel: "Add audio",
+        onClick: () => emit("clickAudio")
+      },
+      mention: {
+        tooltipLabel: "Mention",
+        editor,
+        onClick: () => (editor == null ? void 0 : editor.chain()).focus().insertContent("@").run()
       }
     };
-    const renderExtension = /* @__PURE__ */ __name((item) => {
-      const options2 = itemOptions[item];
-      if (!options2)
+    const getResolvedItem = /* @__PURE__ */ __name((option) => {
+      if (typeof option === "string") {
+        return {
+          item: option
+        };
+      }
+      return {
+        item: option.value,
+        tooltip: option.tooltip
+      };
+    }, "getResolvedItem");
+    const renderExtension = /* @__PURE__ */ __name((option) => {
+      const {
+        item,
+        tooltip
+      } = getResolvedItem(option);
+      if (!items.includes(item))
+        return null;
+      const resolvedItem = item;
+      const resolvedOptions = itemOptions[resolvedItem];
+      if (!resolvedOptions)
         return null;
-      switch (item) {
+      const tooltipLabel = tooltip || resolvedOptions.tooltipLabel;
+      switch (resolvedItem) {
         case "heading":
           return _createVNode(HeadingExtention, {
-            "tooltipLabel": options2.tooltipLabel,
+            "tooltipLabel": tooltipLabel,
             "editor": editor
           }, null);
         case "align":
           return _createVNode(AlignExtention, {
-            "tooltipLabel": options2.tooltipLabel,
+            "tooltipLabel": tooltipLabel,
             "editor": editor
           }, null);
         case "textColor":
         case "fillColor":
           return _createVNode(ColorExtension, {
-            "tooltipLabel": options2.tooltipLabel,
+            "tooltipLabel": tooltipLabel,
             "editor": editor,
-            "type": options2.type
+            "type": resolvedOptions.type
           }, null);
         case "textLink":
           return _createVNode(LinkExtension, {
-            "tooltipLabel": options2.tooltipLabel,
+            "tooltipLabel": tooltipLabel,
             "editor": editor
           }, null);
         default:
           return _createVNode(SingleExtention, {
-            "name": item,
-            "tooltipLabel": options2.tooltipLabel,
-            "onClick": options2.onClick,
+            "name": resolvedItem,
+            "tooltipLabel": tooltipLabel,
+            "onClick": resolvedOptions.onClick,
             "editor": editor
           }, null);
       }
     }, "renderExtension");
-    return () => _createVNode("div", null, [options == null ? void 0 : options.map((option, index) => _createVNode(_Fragment, null, [option.map((item) => {
-      if (items.includes(item)) {
-        return renderExtension(item);
+    return () => _createVNode(MpScrollbar, {
+      "options": {
+        overflow: {
+          y: "hide",
+          x: "scroll"
+        }
       }
-    }), index !== (options == null ? void 0 : options.length) - 1 && _createVNode(MpDivider, {
-      "id": "divider-toolbar",
-      "orientation": "vertical"
-    }, null)]))]);
+    }, {
+      default: () => [_createVNode("div", {
+        "class": css({
+          display: "flex",
+          alignItems: "stretch",
+          gap: "1"
+        })
+      }, [options == null ? void 0 : options.map((option, index) => _createVNode(_Fragment, null, [option.map((item) => {
+        const resolvedItem = typeof item === "string" ? item : item.value;
+        if (items.includes(resolvedItem)) {
+          return renderExtension(item);
+        }
+      }), index !== (options == null ? void 0 : options.length) - 1 && _createVNode(MpDivider, {
+        "id": "divider-toolbar",
+        "orientation": "vertical"
+      }, null)]))])]
+    });
   }
 });
 

package/dist/{chunk-FZPMIQTC.mjs → chunk-OZGNQAK5.mjs}

@@ -1,7 +1,7 @@
 import {
   ColorTextIcon,
   FillTextIcon
-} from "./chunk-RNQQ7LGC.mjs";
+} from "./chunk-C7IUW3FX.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-VK7QDWXR.mjs → chunk-PTKS3BYW.mjs}

@@ -1,6 +1,6 @@
 import {
   LinkIcon
-} from "./chunk-RNQQ7LGC.mjs";
+} from "./chunk-C7IUW3FX.mjs";
 import {
   __name
 } from "./chunk-QZ7VFGWC.mjs";
@@ -55,6 +55,7 @@ var LinkExtension = defineComponent({
             popperInstance.destroy();
           }
           popperInstance = createPopper(target, popoverRef.value, {
+            strategy: "fixed",
             onFirstUpdate: () => {
               if (popperInstance) {
                 popperInstance.setOptions({
@@ -113,6 +114,14 @@ var LinkExtension = defineComponent({
       }
       onClosePopover();
     }, "onSetLink");
+    const onOpenInNewTab = /* @__PURE__ */ __name(() => {
+      const trimmedUrl = url.value.trim();
+      if (!trimmedUrl) {
+        return;
+      }
+      const normalizedUrl = /^(https?:)?\/\//i.test(trimmedUrl) ? trimmedUrl : `https://${trimmedUrl}`;
+      window.open(normalizedUrl, "_blank", "noopener,noreferrer");
+    }, "onOpenInNewTab");
     const onClosePopover = /* @__PURE__ */ __name(() => {
       isShowPopover.value = false;
       editor == null ? void 0 : editor.commands.setTextSelection({
@@ -156,10 +165,9 @@ var LinkExtension = defineComponent({
       default: () => [_createVNode("div", {
         "ref": popoverRef,
         "data-pixel-rte": true,
-        "style": {
-          position: "absolute",
-          zIndex: "var(--mp-z-index-popover)"
-        }
+        "class": css({
+          zIndex: "popover"
+        })
       }, [_createVNode("div", {
         "class": css({
           display: "flex",
@@ -192,6 +200,11 @@ var LinkExtension = defineComponent({
       }, null) : _createVNode(MpButton, {
         "leftIcon": "check",
         "onClick": onSetLink
+      }, null), isEditLink.value && _createVNode(MpButton, {
+        "leftIcon": "newtab",
+        "variant": "ghost",
+        "isDisabled": !url.value.trim(),
+        "onClick": onOpenInNewTab
       }, null), isEditLink.value ? _createVNode(MpButton, {
         "leftIcon": "delete",
         "variant": "ghost",

package/dist/{chunk-V52XUOVW.mjs → chunk-SBD2AUDA.mjs}

@@ -1,15 +1,19 @@
 import {
+  AudioIcon,
   BlockquoteIcon,
   BoldIcon,
   BulletListIcon,
   ClearIcon,
+  FileIcon,
+  ImageIcon,
   ItalicIcon,
+  MentionIcon,
   OrderedListIcon,
   RedoIcon,
   StrikeIcon,
   UnderlineIcon,
   UndoIcon
-} from "./chunk-RNQQ7LGC.mjs";
+} from "./chunk-C7IUW3FX.mjs";
 
 // src/extensions/single-extension.tsx
 import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode } from "vue";
@@ -46,7 +50,11 @@ var SingleExtention = defineComponent({
       orderedList: _createVNode(OrderedListIcon, null, null),
       undo: _createVNode(UndoIcon, null, null),
       redo: _createVNode(RedoIcon, null, null),
-      clear: _createVNode(ClearIcon, null, null)
+      clear: _createVNode(ClearIcon, null, null),
+      image: _createVNode(ImageIcon, null, null),
+      file: _createVNode(FileIcon, null, null),
+      audio: _createVNode(AudioIcon, null, null),
+      mention: _createVNode(MentionIcon, null, null)
     };
     return () => _withDirectives(_createVNode("button", {
       "class": {

package/dist/{chunk-GVMGRBDI.mjs → chunk-TNDDXUVW.mjs}

@@ -27,6 +27,10 @@ var richTextEditorProps = {
   hasBorder: {
     type: Boolean,
     default: true
+  },
+  suggestions: {
+    type: Array,
+    default: () => []
   }
 };
 var RTEStyleProviderProps = {
@@ -34,7 +38,7 @@ var RTEStyleProviderProps = {
     type: String
   }
 };
-var richTextEditorEmits = declareEmit(["change", "blur", "focus"]);
+var richTextEditorEmits = declareEmit(["change", "blur", "focus", "action", "paste"]);
 
 export {
   richTextEditorProps,

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

@@ -1,6 +1,6 @@
 import {
   CaretIcon
-} from "./chunk-RNQQ7LGC.mjs";
+} from "./chunk-C7IUW3FX.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")]
             })]
           })]

package/dist/{chunk-HF36L4GZ.mjs → chunk-ZAXJ3BEP.mjs}

@@ -11,6 +11,7 @@ function richTextEditorConnect(state, classes) {
     placeholder,
     maxlength,
     options,
+    suggestions,
     hasBorder,
     isInvalid,
     isDisabled
@@ -22,6 +23,7 @@ function richTextEditorConnect(state, classes) {
     placeholder,
     maxlength,
     options,
+    suggestions,
     isInvalid,
     isDisabled,
     rootProps: {

package/dist/{chunk-5IPS4HT7.mjs → chunk-ZRAXSVO5.mjs}

@@ -1,7 +1,7 @@
 import {
   RTEStyleProviderConnect,
   richTextEditorConnect
-} from "./chunk-HF36L4GZ.mjs";
+} from "./chunk-ZAXJ3BEP.mjs";
 import {
   __name
 } from "./chunk-QZ7VFGWC.mjs";

package/dist/editor-toolbar.d.mts

@@ -1,7 +1,7 @@
 import * as vue from 'vue';
 import { PropType } from 'vue';
 import * as vue_jsx_runtime from 'vue/jsx-runtime';
-import { Items } from './modules/rich-text-editor.types.mjs';
+import { ToolbarOption } from './modules/rich-text-editor.types.mjs';
 import { Editor } from '@tiptap/vue-3';
 import '@mekari/pixel3-utils';
 
@@ -10,15 +10,19 @@ declare const EditorToolbar: vue.DefineComponent<{
         type: PropType<Editor>;
     };
     options: {
-        type: PropType<Items[][]>;
+        type: PropType<ToolbarOption[][]>;
     };
-}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("clickImage" | "clickFile" | "clickAudio")[], "clickImage" | "clickFile" | "clickAudio", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     editor: {
         type: PropType<Editor>;
     };
     options: {
-        type: PropType<Items[][]>;
+        type: PropType<ToolbarOption[][]>;
     };
-}>>, {}, {}>;
+}>> & {
+    onClickImage?: ((...args: any[]) => any) | undefined;
+    onClickFile?: ((...args: any[]) => any) | undefined;
+    onClickAudio?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
 
 export { EditorToolbar };

package/dist/editor-toolbar.d.ts

@@ -1,7 +1,7 @@
 import * as vue from 'vue';
 import { PropType } from 'vue';
 import * as vue_jsx_runtime from 'vue/jsx-runtime';
-import { Items } from './modules/rich-text-editor.types.js';
+import { ToolbarOption } from './modules/rich-text-editor.types.js';
 import { Editor } from '@tiptap/vue-3';
 import '@mekari/pixel3-utils';
 
@@ -10,15 +10,19 @@ declare const EditorToolbar: vue.DefineComponent<{
         type: PropType<Editor>;
     };
     options: {
-        type: PropType<Items[][]>;
+        type: PropType<ToolbarOption[][]>;
     };
-}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("clickImage" | "clickFile" | "clickAudio")[], "clickImage" | "clickFile" | "clickAudio", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     editor: {
         type: PropType<Editor>;
     };
     options: {
-        type: PropType<Items[][]>;
+        type: PropType<ToolbarOption[][]>;
     };
-}>>, {}, {}>;
+}>> & {
+    onClickImage?: ((...args: any[]) => any) | undefined;
+    onClickFile?: ((...args: any[]) => any) | undefined;
+    onClickAudio?: ((...args: any[]) => any) | undefined;
+}, {}, {}>;
 
 export { EditorToolbar };