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

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

@@ -1,18 +1,18 @@
+import {
+  HeadingExtention
+} from "./chunk-X2CB42A3.mjs";
 import {
   LinkExtension
-} from "./chunk-ZO6THAT6.mjs";
+} from "./chunk-COZ45QUD.mjs";
 import {
   SingleExtention
-} from "./chunk-25RKPG44.mjs";
+} from "./chunk-FCLBNBXD.mjs";
 import {
   AlignExtention
-} from "./chunk-UBJOZ2IA.mjs";
+} from "./chunk-YWVVMJGP.mjs";
 import {
   ColorExtension
-} from "./chunk-5S2LSGJV.mjs";
-import {
-  HeadingExtention
-} from "./chunk-YIEQVTEO.mjs";
+} from "./chunk-Y6UPQ6EU.mjs";
 import {
   __name
 } from "./chunk-QZ7VFGWC.mjs";
@@ -25,7 +25,7 @@ import { MpDivider } from "@mekari/pixel3-divider";
 import { MpScrollbar } from "@mekari/pixel3-scrollbar";
 var EditorToolbar = defineComponent({
   name: "EditorToolbar",
-  emits: ["clickImage", "clickFile", "clickAudio", "clickMention", "clickLocation"],
+  emits: ["clickImage", "clickFile", "clickAudio", "clickMention", "clickVariable", "clickLocation"],
   props: {
     editor: {
       type: Object
@@ -40,77 +40,102 @@ var EditorToolbar = defineComponent({
       type: Function
     }
   },
-  setup({
-    editor,
-    options,
-    validateLink,
-    transformLink
-  }, {
+  setup(props, {
     emit
   }) {
-    const items = ["heading", "bold", "italic", "underline", "strike", "blockquote", "bulletList", "orderedList", "textColor", "fillColor", "textLink", "align", "undo", "redo", "clear", "image", "file", "audio", "mention", "location"];
-    const itemOptions = {
+    const items = ["heading", "bold", "italic", "underline", "strike", "blockquote", "bulletList", "orderedList", "textColor", "fillColor", "textLink", "align", "undo", "redo", "clear", "image", "file", "audio", "mention", "variable", "location"];
+    const getItemOptions = /* @__PURE__ */ __name(() => ({
       heading: {
         tooltipLabel: "Text style",
-        editor
+        editor: props.editor
       },
       bold: {
         tooltipLabel: "Bold",
-        onClick: () => (editor == null ? void 0 : editor.chain()).focus().toggleBold().run()
+        onClick: () => {
+          var _a;
+          return ((_a = props.editor) == null ? void 0 : _a.chain()).focus().toggleBold().run();
+        }
       },
       italic: {
         tooltipLabel: "Italic",
-        onClick: () => (editor == null ? void 0 : editor.chain()).focus().toggleItalic().run()
+        onClick: () => {
+          var _a;
+          return ((_a = props.editor) == null ? void 0 : _a.chain()).focus().toggleItalic().run();
+        }
       },
       underline: {
         tooltipLabel: "Underline",
-        onClick: () => (editor == null ? void 0 : editor.chain()).focus().toggleUnderline().run()
+        onClick: () => {
+          var _a;
+          return ((_a = props.editor) == null ? void 0 : _a.chain()).focus().toggleUnderline().run();
+        }
       },
       strike: {
         tooltipLabel: "Strike",
-        onClick: () => (editor == null ? void 0 : editor.chain()).focus().toggleStrike().run()
+        onClick: () => {
+          var _a;
+          return ((_a = props.editor) == null ? void 0 : _a.chain()).focus().toggleStrike().run();
+        }
       },
       blockquote: {
         tooltipLabel: "Blockquote",
-        onClick: () => (editor == null ? void 0 : editor.chain()).focus().toggleBlockquote().run()
+        onClick: () => {
+          var _a;
+          return ((_a = props.editor) == null ? void 0 : _a.chain()).focus().toggleBlockquote().run();
+        }
       },
       bulletList: {
         tooltipLabel: "Bullet list",
-        onClick: () => (editor == null ? void 0 : editor.chain()).focus().toggleBulletList().run()
+        onClick: () => {
+          var _a;
+          return ((_a = props.editor) == null ? void 0 : _a.chain()).focus().toggleBulletList().run();
+        }
       },
       orderedList: {
         tooltipLabel: "Number list",
-        onClick: () => (editor == null ? void 0 : editor.chain()).focus().toggleOrderedList().run()
+        onClick: () => {
+          var _a;
+          return ((_a = props.editor) == null ? void 0 : _a.chain()).focus().toggleOrderedList().run();
+        }
       },
       textColor: {
         tooltipLabel: "Text color",
-        editor,
+        editor: props.editor,
         type: "text"
       },
       fillColor: {
         tooltipLabel: "Fill color",
-        editor,
+        editor: props.editor,
         type: "fill"
       },
       textLink: {
         tooltipLabel: "Insert link",
-        editor
+        editor: props.editor
       },
       align: {
         tooltipLabel: "Text alignment",
-        editor
+        editor: props.editor
       },
       undo: {
         tooltipLabel: "Undo",
-        onClick: () => (editor == null ? void 0 : editor.chain()).focus().undo().run()
+        onClick: () => {
+          var _a;
+          return ((_a = props.editor) == null ? void 0 : _a.chain()).focus().undo().run();
+        }
       },
       redo: {
         tooltipLabel: "Redo",
-        onClick: () => (editor == null ? void 0 : editor.chain()).focus().redo().run()
+        onClick: () => {
+          var _a;
+          return ((_a = props.editor) == null ? void 0 : _a.chain()).focus().redo().run();
+        }
       },
       clear: {
         tooltipLabel: "Reset format",
-        onClick: () => (editor == null ? void 0 : editor.chain()).focus().unsetAllMarks().run()
+        onClick: () => {
+          var _a;
+          return ((_a = props.editor) == null ? void 0 : _a.chain()).focus().unsetAllMarks().run();
+        }
       },
       image: {
         tooltipLabel: "Add image",
@@ -126,18 +151,29 @@ var EditorToolbar = defineComponent({
       },
       mention: {
         tooltipLabel: "Mention",
-        editor,
+        editor: props.editor,
         onClick: () => {
+          var _a;
           ;
-          (editor == null ? void 0 : editor.chain()).focus().insertContent("@").run();
+          ((_a = props.editor) == null ? void 0 : _a.chain()).focus().insertContent("@").run();
           emit("clickMention");
         }
       },
+      variable: {
+        tooltipLabel: "Insert variable",
+        editor: props.editor,
+        onClick: () => {
+          var _a;
+          ;
+          ((_a = props.editor) == null ? void 0 : _a.chain()).focus().insertContent("{").run();
+          emit("clickVariable");
+        }
+      },
       location: {
         tooltipLabel: "Add location",
         onClick: () => emit("clickLocation")
       }
-    };
+    }), "getItemOptions");
     const getResolvedItem = /* @__PURE__ */ __name((option) => {
       if (typeof option === "string") {
         return {
@@ -146,17 +182,20 @@ var EditorToolbar = defineComponent({
       }
       return {
         item: option.value,
-        tooltip: option.tooltip
+        tooltip: option.tooltip,
+        disabled: option.disabled
       };
     }, "getResolvedItem");
     const renderExtension = /* @__PURE__ */ __name((option) => {
       const {
         item,
-        tooltip
+        tooltip,
+        disabled
       } = getResolvedItem(option);
       if (!items.includes(item))
         return null;
       const resolvedItem = item;
+      const itemOptions = getItemOptions();
       const resolvedOptions = itemOptions[resolvedItem];
       if (!resolvedOptions)
         return null;
@@ -165,33 +204,34 @@ var EditorToolbar = defineComponent({
         case "heading":
           return _createVNode(HeadingExtention, {
             "tooltipLabel": tooltipLabel,
-            "editor": editor
+            "editor": props.editor
           }, null);
         case "align":
           return _createVNode(AlignExtention, {
             "tooltipLabel": tooltipLabel,
-            "editor": editor
+            "editor": props.editor
           }, null);
         case "textColor":
         case "fillColor":
           return _createVNode(ColorExtension, {
             "tooltipLabel": tooltipLabel,
-            "editor": editor,
+            "editor": props.editor,
             "type": resolvedOptions.type
           }, null);
         case "textLink":
           return _createVNode(LinkExtension, {
             "tooltipLabel": tooltipLabel,
-            "editor": editor,
-            "validateLink": validateLink,
-            "transformLink": transformLink
+            "editor": props.editor,
+            "validateLink": props.validateLink,
+            "transformLink": props.transformLink
           }, null);
         default:
           return _createVNode(SingleExtention, {
             "name": resolvedItem,
             "tooltipLabel": tooltipLabel,
             "onClick": resolvedOptions.onClick,
-            "editor": editor
+            "editor": props.editor,
+            "isDisabled": disabled
           }, null);
       }
     }, "renderExtension");
@@ -203,21 +243,27 @@ var EditorToolbar = defineComponent({
         }
       }
     }, {
-      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)]))])]
+      default: () => {
+        var _a;
+        return [_createVNode("div", {
+          "class": css({
+            display: "flex",
+            alignItems: "stretch",
+            gap: "1"
+          })
+        }, [(_a = props.options) == null ? void 0 : _a.map((option, index) => {
+          var _a2, _b;
+          return _createVNode(_Fragment, null, [option.map((item) => {
+            const resolvedItem = typeof item === "string" ? item : item.value;
+            if (items.includes(resolvedItem)) {
+              return renderExtension(item);
+            }
+          }), index !== ((_b = (_a2 = props.options) == null ? void 0 : _a2.length) != null ? _b : 0) - 1 && _createVNode(MpDivider, {
+            "id": "divider-toolbar",
+            "orientation": "vertical"
+          }, null)]);
+        })])];
+      }
     });
   }
 });

package/dist/{chunk-XNM3YX37.mjs → chunk-T7RFFPSJ.mjs}

@@ -1,19 +1,25 @@
 import {
   EditorToolbar
-} from "./chunk-YE6FEVD4.mjs";
+} from "./chunk-RX7ZEE2M.mjs";
+import {
+  Variable
+} from "./chunk-ENKUUZPM.mjs";
 import {
   MpRTEStyleProvider
-} from "./chunk-MKTM47RO.mjs";
+} from "./chunk-AIWY3FHJ.mjs";
 import {
   useRichTextEditor
 } from "./chunk-ZRAXSVO5.mjs";
 import {
   richTextEditorEmits,
   richTextEditorProps
-} from "./chunk-7BEXEMOE.mjs";
+} from "./chunk-6O4HSL2C.mjs";
 import {
   createMentionSuggestion
 } from "./chunk-4KJOYLJI.mjs";
+import {
+  createVariableSuggestion
+} from "./chunk-BWRU2WZN.mjs";
 import {
   __name
 } from "./chunk-QZ7VFGWC.mjs";
@@ -89,6 +95,9 @@ var MpRichTextEditor = defineComponent({
         }),
         ...props.suggestions && props.suggestions.length > 0 ? [Mention.configure({
           suggestion: createMentionSuggestion(() => props.suggestions || [])
+        })] : [],
+        ...props.variables && props.variables.length > 0 ? [Variable.configure({
+          suggestion: createVariableSuggestion(() => props.variables || [])
         })] : []
       ],
       onFocus({
@@ -119,6 +128,7 @@ var MpRichTextEditor = defineComponent({
       onClickFile: () => onClickToolbar("file"),
       onClickAudio: () => onClickToolbar("audio"),
       onClickMention: () => onClickToolbar("mention"),
+      onClickVariable: () => onClickToolbar("variable"),
       onClickLocation: () => onClickToolbar("location")
     };
     return () => {

package/dist/{chunk-YIEQVTEO.mjs → chunk-X2CB42A3.mjs}

@@ -1,6 +1,6 @@
 import {
   CaretIcon
-} from "./chunk-Q7QLZISF.mjs";
+} from "./chunk-IFRJVX2K.mjs";
 
 // src/extensions/heading-extension.tsx
 import { withDirectives as _withDirectives, resolveDirective as _resolveDirective, createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";

package/dist/{chunk-5S2LSGJV.mjs → chunk-Y6UPQ6EU.mjs}

@@ -1,7 +1,7 @@
 import {
   ColorTextIcon,
   FillTextIcon
-} from "./chunk-Q7QLZISF.mjs";
+} from "./chunk-IFRJVX2K.mjs";
 import {
   __name
 } from "./chunk-QZ7VFGWC.mjs";

package/dist/{chunk-UBJOZ2IA.mjs → chunk-YWVVMJGP.mjs}

@@ -3,7 +3,7 @@ import {
   AlignJustifyIcon,
   AlignLeftIcon,
   AlignRightIcon
-} from "./chunk-Q7QLZISF.mjs";
+} from "./chunk-IFRJVX2K.mjs";
 import {
   __name
 } from "./chunk-QZ7VFGWC.mjs";

package/dist/editor-toolbar.d.mts

@@ -21,7 +21,7 @@ declare const EditorToolbar: vue.DefineComponent<{
     transformLink: {
         type: PropType<(url: string) => string>;
     };
-}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("clickImage" | "clickFile" | "clickAudio" | "clickMention" | "clickLocation")[], "clickImage" | "clickFile" | "clickAudio" | "clickMention" | "clickLocation", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("clickImage" | "clickFile" | "clickAudio" | "clickMention" | "clickVariable" | "clickLocation")[], "clickImage" | "clickFile" | "clickAudio" | "clickMention" | "clickVariable" | "clickLocation", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     editor: {
         type: PropType<Editor>;
     };
@@ -42,6 +42,7 @@ declare const EditorToolbar: vue.DefineComponent<{
     onClickFile?: ((...args: any[]) => any) | undefined;
     onClickAudio?: ((...args: any[]) => any) | undefined;
     onClickMention?: ((...args: any[]) => any) | undefined;
+    onClickVariable?: ((...args: any[]) => any) | undefined;
     onClickLocation?: ((...args: any[]) => any) | undefined;
 }, {}, {}>;
 

package/dist/editor-toolbar.d.ts

@@ -21,7 +21,7 @@ declare const EditorToolbar: vue.DefineComponent<{
     transformLink: {
         type: PropType<(url: string) => string>;
     };
-}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("clickImage" | "clickFile" | "clickAudio" | "clickMention" | "clickLocation")[], "clickImage" | "clickFile" | "clickAudio" | "clickMention" | "clickLocation", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("clickImage" | "clickFile" | "clickAudio" | "clickMention" | "clickVariable" | "clickLocation")[], "clickImage" | "clickFile" | "clickAudio" | "clickMention" | "clickVariable" | "clickLocation", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     editor: {
         type: PropType<Editor>;
     };
@@ -42,6 +42,7 @@ declare const EditorToolbar: vue.DefineComponent<{
     onClickFile?: ((...args: any[]) => any) | undefined;
     onClickAudio?: ((...args: any[]) => any) | undefined;
     onClickMention?: ((...args: any[]) => any) | undefined;
+    onClickVariable?: ((...args: any[]) => any) | undefined;
     onClickLocation?: ((...args: any[]) => any) | undefined;
 }, {}, {}>;