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

package/dist/rich-text-editor.js

@@ -872,14 +872,13 @@ var SingleExtention = (0, import_vue9.defineComponent)({
     },
     editor: {
       type: Object
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
     }
   },
-  setup({
-    name,
-    tooltipLabel,
-    onClick,
-    editor
-  }) {
+  setup(props) {
     const iconMap = {
       bold: (0, import_vue8.createVNode)(BoldIcon, null, null),
       italic: (0, import_vue8.createVNode)(ItalicIcon, null, null),
@@ -898,14 +897,22 @@ var SingleExtention = (0, import_vue9.defineComponent)({
       variable: (0, import_vue8.createVNode)(VariableIcon, null, null),
       location: (0, import_vue8.createVNode)(LocationIcon, null, null)
     };
-    return () => (0, import_vue8.withDirectives)((0, import_vue8.createVNode)("button", {
-      "class": {
-        "is-active": name && (editor == null ? void 0 : editor.isActive(name))
-      },
-      "onClick": onClick
-    }, [name && iconMap[name]]), [[(0, import_vue8.resolveDirective)("tooltip"), {
-      label: tooltipLabel
-    }]]);
+    return () => {
+      var _a;
+      return (0, import_vue8.withDirectives)((0, import_vue8.createVNode)("button", {
+        "class": {
+          "is-active": props.name && ((_a = props.editor) == null ? void 0 : _a.isActive(props.name))
+        },
+        "style": props.isDisabled ? {
+          opacity: "0.4",
+          cursor: "not-allowed"
+        } : void 0,
+        "disabled": props.isDisabled,
+        "onClick": props.isDisabled ? void 0 : props.onClick
+      }, [props.name && iconMap[props.name]]), [[(0, import_vue8.resolveDirective)("tooltip"), {
+        label: props.tooltipLabel
+      }]]);
+    };
   }
 });
 
@@ -1543,77 +1550,102 @@ var EditorToolbar = (0, import_vue17.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", "variable", "location"];
-    const itemOptions = {
+    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",
@@ -1629,19 +1661,21 @@ var EditorToolbar = (0, import_vue17.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,
+        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("clickVariable");
         }
       },
@@ -1649,7 +1683,7 @@ var EditorToolbar = (0, import_vue17.defineComponent)({
         tooltipLabel: "Add location",
         onClick: () => emit("clickLocation")
       }
-    };
+    }), "getItemOptions");
     const getResolvedItem = /* @__PURE__ */ __name((option) => {
       if (typeof option === "string") {
         return {
@@ -1658,17 +1692,20 @@ var EditorToolbar = (0, import_vue17.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;
@@ -1677,33 +1714,34 @@ var EditorToolbar = (0, import_vue17.defineComponent)({
         case "heading":
           return (0, import_vue16.createVNode)(HeadingExtention, {
             "tooltipLabel": tooltipLabel,
-            "editor": editor
+            "editor": props.editor
           }, null);
         case "align":
           return (0, import_vue16.createVNode)(AlignExtention, {
             "tooltipLabel": tooltipLabel,
-            "editor": editor
+            "editor": props.editor
           }, null);
         case "textColor":
         case "fillColor":
           return (0, import_vue16.createVNode)(ColorExtension, {
             "tooltipLabel": tooltipLabel,
-            "editor": editor,
+            "editor": props.editor,
             "type": resolvedOptions.type
           }, null);
         case "textLink":
           return (0, import_vue16.createVNode)(LinkExtension, {
             "tooltipLabel": tooltipLabel,
-            "editor": editor,
-            "validateLink": validateLink,
-            "transformLink": transformLink
+            "editor": props.editor,
+            "validateLink": props.validateLink,
+            "transformLink": props.transformLink
           }, null);
         default:
           return (0, import_vue16.createVNode)(SingleExtention, {
             "name": resolvedItem,
             "tooltipLabel": tooltipLabel,
             "onClick": resolvedOptions.onClick,
-            "editor": editor
+            "editor": props.editor,
+            "isDisabled": disabled
           }, null);
       }
     }, "renderExtension");
@@ -1715,21 +1753,27 @@ var EditorToolbar = (0, import_vue17.defineComponent)({
         }
       }
     }, {
-      default: () => [(0, import_vue16.createVNode)("div", {
-        "class": (0, import_css6.css)({
-          display: "flex",
-          alignItems: "stretch",
-          gap: "1"
-        })
-      }, [options == null ? void 0 : options.map((option, index) => (0, import_vue16.createVNode)(import_vue16.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 && (0, import_vue16.createVNode)(import_pixel3_divider.MpDivider, {
-        "id": "divider-toolbar",
-        "orientation": "vertical"
-      }, null)]))])]
+      default: () => {
+        var _a;
+        return [(0, import_vue16.createVNode)("div", {
+          "class": (0, import_css6.css)({
+            display: "flex",
+            alignItems: "stretch",
+            gap: "1"
+          })
+        }, [(_a = props.options) == null ? void 0 : _a.map((option, index) => {
+          var _a2, _b;
+          return (0, import_vue16.createVNode)(import_vue16.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 && (0, import_vue16.createVNode)(import_pixel3_divider.MpDivider, {
+            "id": "divider-toolbar",
+            "orientation": "vertical"
+          }, null)]);
+        })])];
+      }
     });
   }
 });

package/dist/rich-text-editor.mjs

@@ -1,11 +1,11 @@
 import {
   MpRichTextEditor
-} from "./chunk-ZYSEHV5N.mjs";
-import "./chunk-UD5PDCGC.mjs";
+} from "./chunk-T7RFFPSJ.mjs";
+import "./chunk-RX7ZEE2M.mjs";
 import "./chunk-HIHIKPNN.mjs";
 import "./chunk-X2CB42A3.mjs";
 import "./chunk-COZ45QUD.mjs";
-import "./chunk-47IOAHWN.mjs";
+import "./chunk-FCLBNBXD.mjs";
 import "./chunk-ENKUUZPM.mjs";
 import "./chunk-AIWY3FHJ.mjs";
 import "./chunk-ZRAXSVO5.mjs";

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-dev.0",
+  "version": "0.1.3-dev.1",
   "main": "dist/index.js",
   "license": "MIT",
   "files": [
@@ -41,17 +41,17 @@
     "@tiptap/starter-kit": "2.7.4",
     "@tiptap/suggestion": "2.7.4",
     "@tiptap/vue-3": "2.7.4",
-    "@mekari/pixel3-avatar": "0.0.28-dev.0",
-    "@mekari/pixel3-divider": "0.0.22",
-    "@mekari/pixel3-button": "0.2.3-dev.0",
-    "@mekari/pixel3-form-control": "0.0.22",
-    "@mekari/pixel3-color-picker": "0.2.2-dev.0",
-    "@mekari/pixel3-popover": "0.0.28-dev.0",
-    "@mekari/pixel3-scrollbar": "0.1.6",
-    "@mekari/pixel3-input": "0.0.28-dev.0",
-    "@mekari/pixel3-styled-system": "0.2.0",
-    "@mekari/pixel3-text": "0.0.22",
-    "@mekari/pixel3-utils": "0.1.0"
+    "@mekari/pixel3-avatar": "0.0.28-dev.1",
+    "@mekari/pixel3-button": "0.2.3-dev.1",
+    "@mekari/pixel3-color-picker": "0.2.2-dev.1",
+    "@mekari/pixel3-divider": "0.0.23-dev.0",
+    "@mekari/pixel3-form-control": "0.0.23-dev.0",
+    "@mekari/pixel3-popover": "0.0.28-dev.1",
+    "@mekari/pixel3-scrollbar": "0.1.7-dev.0",
+    "@mekari/pixel3-input": "0.0.28-dev.1",
+    "@mekari/pixel3-styled-system": "0.2.1-dev.0",
+    "@mekari/pixel3-utils": "0.1.0",
+    "@mekari/pixel3-text": "0.0.23-dev.0"
   },
   "peerDependencies": {
     "vue": "^3.4.9"