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

package/dist/extensions/index.js

@@ -725,14 +725,13 @@ var SingleExtention = (0, import_vue8.defineComponent)({
     },
     editor: {
       type: Object
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
     }
   },
-  setup({
-    name,
-    tooltipLabel,
-    onClick,
-    editor
-  }) {
+  setup(props) {
     const iconMap = {
       bold: (0, import_vue7.createVNode)(BoldIcon, null, null),
       italic: (0, import_vue7.createVNode)(ItalicIcon, null, null),
@@ -751,14 +750,22 @@ var SingleExtention = (0, import_vue8.defineComponent)({
       variable: (0, import_vue7.createVNode)(VariableIcon, null, null),
       location: (0, import_vue7.createVNode)(LocationIcon, null, null)
     };
-    return () => (0, import_vue7.withDirectives)((0, import_vue7.createVNode)("button", {
-      "class": {
-        "is-active": name && (editor == null ? void 0 : editor.isActive(name))
-      },
-      "onClick": onClick
-    }, [name && iconMap[name]]), [[(0, import_vue7.resolveDirective)("tooltip"), {
-      label: tooltipLabel
-    }]]);
+    return () => {
+      var _a;
+      return (0, import_vue7.withDirectives)((0, import_vue7.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_vue7.resolveDirective)("tooltip"), {
+        label: props.tooltipLabel
+      }]]);
+    };
   }
 });
 

package/dist/extensions/index.mjs

@@ -7,7 +7,7 @@ import {
 } from "../chunk-COZ45QUD.mjs";
 import {
   SingleExtention
-} from "../chunk-47IOAHWN.mjs";
+} from "../chunk-FCLBNBXD.mjs";
 import {
   Variable
 } from "../chunk-ENKUUZPM.mjs";

package/dist/extensions/single-extension.d.mts

@@ -17,6 +17,10 @@ declare const SingleExtention: vue.DefineComponent<{
     editor: {
         type: PropType<Editor>;
     };
+    isDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     name: {
         type: PropType<ExtensionName>;
@@ -30,6 +34,12 @@ declare const SingleExtention: vue.DefineComponent<{
     editor: {
         type: PropType<Editor>;
     };
-}>>, {}, {}>;
+    isDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    isDisabled: boolean;
+}, {}>;
 
 export { SingleExtention };

package/dist/extensions/single-extension.d.ts

@@ -17,6 +17,10 @@ declare const SingleExtention: vue.DefineComponent<{
     editor: {
         type: PropType<Editor>;
     };
+    isDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
     name: {
         type: PropType<ExtensionName>;
@@ -30,6 +34,12 @@ declare const SingleExtention: vue.DefineComponent<{
     editor: {
         type: PropType<Editor>;
     };
-}>>, {}, {}>;
+    isDisabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    isDisabled: boolean;
+}, {}>;
 
 export { SingleExtention };

package/dist/extensions/single-extension.js

@@ -478,14 +478,13 @@ var SingleExtention = (0, import_vue4.defineComponent)({
     },
     editor: {
       type: Object
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false
     }
   },
-  setup({
-    name,
-    tooltipLabel,
-    onClick,
-    editor
-  }) {
+  setup(props) {
     const iconMap = {
       bold: (0, import_vue3.createVNode)(BoldIcon, null, null),
       italic: (0, import_vue3.createVNode)(ItalicIcon, null, null),
@@ -504,14 +503,22 @@ var SingleExtention = (0, import_vue4.defineComponent)({
       variable: (0, import_vue3.createVNode)(VariableIcon, null, null),
       location: (0, import_vue3.createVNode)(LocationIcon, null, null)
     };
-    return () => (0, import_vue3.withDirectives)((0, import_vue3.createVNode)("button", {
-      "class": {
-        "is-active": name && (editor == null ? void 0 : editor.isActive(name))
-      },
-      "onClick": onClick
-    }, [name && iconMap[name]]), [[(0, import_vue3.resolveDirective)("tooltip"), {
-      label: tooltipLabel
-    }]]);
+    return () => {
+      var _a;
+      return (0, import_vue3.withDirectives)((0, import_vue3.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_vue3.resolveDirective)("tooltip"), {
+        label: props.tooltipLabel
+      }]]);
+    };
   }
 });
 // Annotate the CommonJS export names for ESM import in node:

package/dist/extensions/single-extension.mjs

@@ -1,6 +1,6 @@
 import {
   SingleExtention
-} from "../chunk-47IOAHWN.mjs";
+} from "../chunk-FCLBNBXD.mjs";
 import "../chunk-IFRJVX2K.mjs";
 import "../chunk-QZ7VFGWC.mjs";
 export {

package/dist/index.js

@@ -875,14 +875,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),
@@ -901,14 +900,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
+      }]]);
+    };
   }
 });
 
@@ -1546,77 +1553,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",
@@ -1632,19 +1664,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");
         }
       },
@@ -1652,7 +1686,7 @@ var EditorToolbar = (0, import_vue17.defineComponent)({
         tooltipLabel: "Add location",
         onClick: () => emit("clickLocation")
       }
-    };
+    }), "getItemOptions");
     const getResolvedItem = /* @__PURE__ */ __name((option) => {
       if (typeof option === "string") {
         return {
@@ -1661,17 +1695,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;
@@ -1680,33 +1717,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");
@@ -1718,21 +1756,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/index.mjs

@@ -1,12 +1,12 @@
 import "./chunk-7ZWZAIUI.mjs";
 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 {
   MpRTEStyleProvider