@maketribe/ms-app 3.2.3 → 3.2.4

package/dist/cjs/components/basic/doc-editor/plugins/ImagePlugin/index.vue.js

@@ -1,16 +1,16 @@
 "use strict";
 const vue = require("vue");
-require("@lexical/text");
 const utils = require("@lexical/utils");
-require("@lexical/overflow");
 const lexical = require("lexical");
+const richText = require("@lexical/rich-text");
+require("@lexical/text");
+require("@lexical/overflow");
 require("tiny-invariant");
 require("@lexical/history");
 const useLexicalComposer = require("../../lexical-vue/composables/useLexicalComposer.js");
 require("@lexical/list");
 require("@lexical/dragon");
 require("@lexical/plain-text");
-require("@lexical/rich-text");
 require("@lexical/yjs");
 require("yjs");
 require("../../lexical-vue/components/LexicalDecoratedTeleports.js");
@@ -25,24 +25,61 @@ require("../../lexical-vue/components/LexicalMenu/shared.js");
 require("../../lexical-vue/components/LexicalAutoEmbedPlugin/shared.js");
 require("../../lexical-vue/components/LexicalTypeaheadMenuPlugin/shared.js");
 const index = require("./index.js");
-const ImageNode = require("./ImageNode.js");
+const defines = require("../ToolbarPlugin/defines.js");
+const ImageEditPanel = require("./ImageEditPanel.js");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   setup(__props) {
+    const ACCEPTABLE_IMAGE_TYPES = [
+      "image/",
+      "image/heic",
+      "image/heif",
+      "image/gif",
+      "image/webp"
+    ];
     const editor = useLexicalComposer.useLexicalComposer();
     vue.onMounted(() => {
-      if (!editor.hasNodes([ImageNode.ImageNode])) {
+      if (!editor.hasNodes([index.ImageNode])) {
         throw new Error("ImagePlugin: 图片节点未注册！");
       }
+      defines.RegisterToolbarExtend({
+        icon: "Picture",
+        text: "图片",
+        action: async () => {
+          ImageEditPanel.ShowImageEditPanel({
+            src: "",
+            alt: "",
+            width: "",
+            height: "",
+            maxWidth: "100%",
+            maxHeight: "",
+            margin: ""
+          });
+        },
+        sort: 11
+      });
       const unregister = utils.mergeRegister(
-        editor.registerCommand(
-          index.INSERT_IMAGE_COMMAND,
-          (payload) => {
-            utils.$insertNodeToNearestRoot(ImageNode.$createImageNode(payload));
-            return true;
-          },
-          lexical.COMMAND_PRIORITY_EDITOR
-        )
+        // 插入图片
+        editor.registerCommand(index.INSERT_IMAGE_COMMAND, (payload) => {
+          utils.$insertNodeToNearestRoot(index.$createImageNode(payload));
+          return true;
+        }, lexical.COMMAND_PRIORITY_EDITOR),
+        // 剪切板图片
+        editor.registerCommand(richText.DRAG_DROP_PASTE, (files) => {
+          (async () => {
+            const filesResult = await utils.mediaFileReader(files, [ACCEPTABLE_IMAGE_TYPES].flatMap((x) => x));
+            for (const { file, result } of filesResult) {
+              if (utils.isMimeType(file, ACCEPTABLE_IMAGE_TYPES)) {
+                editor.dispatchCommand(index.INSERT_IMAGE_COMMAND, {
+                  src: result,
+                  alt: file.name,
+                  maxWidth: ":100%"
+                });
+              }
+            }
+          })();
+          return true;
+        }, lexical.COMMAND_PRIORITY_LOW)
       );
       vue.onUnmounted(() => unregister());
     });

package/dist/cjs/components/basic/doc-editor/plugins/ImagePlugin/index.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { useLexicalComposer } from '../../lexical-vue'\r\nimport { $insertNodeToNearestRoot,mergeRegister } from '@lexical/utils'\r\nimport { COMMAND_PRIORITY_EDITOR } from 'lexical'\r\n\r\nimport { onMounted, onUnmounted } from 'vue'\r\nimport { INSERT_IMAGE_COMMAND,$createImageNode,ImageNode } from './index'\r\n\r\nconst editor = useLexicalComposer()\r\n\r\nonMounted(() => {\r\n\r\n  if (!editor.hasNodes([ImageNode])){\r\n    throw new Error('ImagePlugin: 图片节点未注册！')\r\n  }\r\n\r\n  // 注册指令\r\n  const unregister = mergeRegister(\r\n    editor.registerCommand<string>(\r\n      INSERT_IMAGE_COMMAND,\r\n      (payload) => {\r\n\r\n        $insertNodeToNearestRoot($createImageNode(payload))\r\n\r\n        return true\r\n      },\r\n      COMMAND_PRIORITY_EDITOR\r\n    )\r\n  );\r\n\r\n  onUnmounted(() =>   unregister())\r\n})\r\n</script>\r\n\r\n<template />\r\n"],"names":["useLexicalComposer","onMounted","ImageNode","mergeRegister","INSERT_IMAGE_COMMAND","$insertNodeToNearestRoot","$createImageNode","COMMAND_PRIORITY_EDITOR","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,UAAM,SAASA,mBAAAA;AAEfC,QAAAA,UAAU,MAAM;AAEd,UAAI,CAAC,OAAO,SAAS,CAACC,UAAAA,SAAS,CAAC,GAAE;AAC1B,cAAA,IAAI,MAAM,uBAAuB;AAAA,MACzC;AAGA,YAAM,aAAaC,MAAA;AAAA,QACjB,OAAO;AAAA,UACLC,MAAA;AAAA,UACA,CAAC,YAAY;AAEcC,2CAAAC,UAAAA,iBAAiB,OAAO,CAAC;AAE3C,mBAAA;AAAA,UACT;AAAA,UACAC,QAAA;AAAA,QACF;AAAA,MAAA;AAGUC,sBAAA,MAAQ,YAAY;AAAA,IAAA,CACjC;;;;;;;"}
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { $insertNodeToNearestRoot,mergeRegister,mediaFileReader,isMimeType } from '@lexical/utils'\r\nimport { COMMAND_PRIORITY_EDITOR,COMMAND_PRIORITY_LOW,$getSelection } from 'lexical'\r\nimport { DRAG_DROP_PASTE } from '@lexical/rich-text'\r\nimport { useLexicalComposer } from '../../lexical-vue'\r\nimport { onMounted, onUnmounted } from 'vue'\r\nimport { INSERT_IMAGE_COMMAND,$createImageNode,ImageNode,type ImageAttrs } from './index'\r\nimport { RegisterToolbarExtend,type ToolbarExtendPlugin } from \"../ToolbarPlugin/defines\"\r\nimport { ShowImageEditPanel } from \"./ImageEditPanel\"\r\n\r\nconst ACCEPTABLE_IMAGE_TYPES = [\r\n  'image/',\r\n  'image/heic',\r\n  'image/heif',\r\n  'image/gif',\r\n  'image/webp',\r\n]\r\n\r\nconst editor = useLexicalComposer()\r\n\r\nonMounted(() => {\r\n\r\n  if (!editor.hasNodes([ImageNode])){\r\n    throw new Error('ImagePlugin: 图片节点未注册！')\r\n  }\r\n\r\n  // 注册到工具条\r\n  RegisterToolbarExtend({\r\n    icon:\"Picture\",\r\n    text:\"图片\",\r\n    action:async ()=>{\r\n      // 显示图片编辑面板\r\n      ShowImageEditPanel({\r\n        src:\"\", alt:\"\", width:\"\", height:\"\", maxWidth:\"100%\", maxHeight:\"\", margin:\"\"\r\n      } as ImageAttrs);\r\n    },\r\n    sort:11\r\n  } as ToolbarExtendPlugin)\r\n\r\n  // 注册指令\r\n  const unregister = mergeRegister(\r\n\r\n    // 插入图片\r\n    editor.registerCommand<ImageAttrs>(INSERT_IMAGE_COMMAND,(payload) => {\r\n      $insertNodeToNearestRoot($createImageNode(payload))\r\n      return true\r\n    },COMMAND_PRIORITY_EDITOR),\r\n\r\n    // 剪切板图片\r\n    editor.registerCommand(DRAG_DROP_PASTE,(files) => {\r\n\r\n      (async () => {\r\n\r\n        const filesResult = await mediaFileReader(files, [ACCEPTABLE_IMAGE_TYPES].flatMap((x) => x))\r\n\r\n        for (const {file, result} of filesResult) {\r\n\r\n          if (isMimeType(file, ACCEPTABLE_IMAGE_TYPES)) {\r\n\r\n            editor.dispatchCommand(INSERT_IMAGE_COMMAND, {\r\n              src:result,\r\n              alt:file.name,\r\n              maxWidth:\":100%\"\r\n            } as ImageAttrs)\r\n          }\r\n        }\r\n      })()\r\n\r\n      return true\r\n    },COMMAND_PRIORITY_LOW)\r\n  );\r\n\r\n  onUnmounted(() => unregister())\r\n})\r\n</script>\r\n\r\n<template />\r\n"],"names":["useLexicalComposer","onMounted","ImageNode","RegisterToolbarExtend","ShowImageEditPanel","mergeRegister","INSERT_IMAGE_COMMAND","$insertNodeToNearestRoot","$createImageNode","COMMAND_PRIORITY_EDITOR","DRAG_DROP_PASTE","mediaFileReader","isMimeType","COMMAND_PRIORITY_LOW","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,UAAM,yBAAyB;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,UAAM,SAASA,mBAAAA;AAEfC,QAAAA,UAAU,MAAM;AAEd,UAAI,CAAC,OAAO,SAAS,CAACC,MAAAA,SAAS,CAAC,GAAE;AAC1B,cAAA,IAAI,MAAM,uBAAuB;AAAA,MACzC;AAGsBC,oCAAA;AAAA,QACpB,MAAK;AAAA,QACL,MAAK;AAAA,QACL,QAAO,YAAU;AAEIC,4CAAA;AAAA,YACjB,KAAI;AAAA,YAAI,KAAI;AAAA,YAAI,OAAM;AAAA,YAAI,QAAO;AAAA,YAAI,UAAS;AAAA,YAAQ,WAAU;AAAA,YAAI,QAAO;AAAA,UAAA,CAC9D;AAAA,QACjB;AAAA,QACA,MAAK;AAAA,MAAA,CACiB;AAGxB,YAAM,aAAaC,MAAA;AAAA;AAAA,QAGjB,OAAO,gBAA4BC,4BAAqB,CAAC,YAAY;AAC1CC,yCAAAC,MAAAA,iBAAiB,OAAO,CAAC;AAC3C,iBAAA;AAAA,WACPC,+BAAuB;AAAA;AAAA,QAGzB,OAAO,gBAAgBC,0BAAgB,CAAC,UAAU;AAEhD,WAAC,YAAY;AAEL,kBAAA,cAAc,MAAMC,sBAAgB,OAAO,CAAC,sBAAsB,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;AAE3F,uBAAW,EAAC,MAAM,OAAM,KAAK,aAAa;AAEpC,kBAAAC,MAAA,WAAW,MAAM,sBAAsB,GAAG;AAE5C,uBAAO,gBAAgBN,4BAAsB;AAAA,kBAC3C,KAAI;AAAA,kBACJ,KAAI,KAAK;AAAA,kBACT,UAAS;AAAA,gBAAA,CACI;AAAA,cACjB;AAAA,YACF;AAAA,UAAA;AAGK,iBAAA;AAAA,WACPO,4BAAoB;AAAA,MAAA;AAGZC,sBAAA,MAAM,YAAY;AAAA,IAAA,CAC/B;;;;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/ImageTextPlugin/index.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lexical = require("lexical");
+const index = require("../ImagePlugin/index.js");
+const BaseBlockNode = require("../BaseBlockNode.js");
+const INSERT_IMAGETEXT_COMMAND = lexical.createCommand(
+  "INSERT_IMAGETEXT_COMMAND"
+);
+class ImageTextNode extends BaseBlockNode.BaseBlockNode {
+  static getType() {
+    return "image-text";
+  }
+  static clone(node) {
+    return new ImageTextNode(node.__key);
+  }
+  static importJSON(serializedNode) {
+    return $createImageTextNode();
+  }
+  static getMakeClassName() {
+    return `${BaseBlockNode.BaseBlockNode.MarkClassName}-${ImageTextNode.getType()}`;
+  }
+  static importDOM() {
+    return {
+      "div": (domNode) => {
+        return {
+          conversion: (domNode2) => {
+            return domNode2.classList.contains(ImageTextNode.getMakeClassName()) ? { node: $createImageTextNode() } : null;
+          },
+          priority: 0
+        };
+      }
+    };
+  }
+  constructor(key) {
+    super(ImageTextNode.getType(), key);
+  }
+}
+function $createImageTextNode(attrs) {
+  const imageText = new ImageTextNode();
+  if (attrs != null) {
+    imageText.append(index.$createImageNode(attrs));
+    imageText.append(lexical.$createParagraphNode());
+  }
+  return imageText;
+}
+exports.$createImageTextNode = $createImageTextNode;
+exports.INSERT_IMAGETEXT_COMMAND = INSERT_IMAGETEXT_COMMAND;
+exports.ImageTextNode = ImageTextNode;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/basic/doc-editor/plugins/ImageTextPlugin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImageTextPlugin/index.ts"],"sourcesContent":["\r\n\r\n\r\n\r\n\r\nimport type { DOMConversionMap, LexicalCommand, LexicalNode, NodeKey, Spread } from 'lexical'\r\nimport { createCommand,$createParagraphNode } from 'lexical'\r\nimport { ImageAttrs,$createImageNode } from '../ImagePlugin'\r\nimport { BaseBlockNode,SerializedMkDocEditBlockComponentNode } from '../BaseBlockNode'\r\n\r\n/**\r\n * 插入图文\r\n */\r\nexport const INSERT_IMAGETEXT_COMMAND: LexicalCommand<ImageAttrs> = createCommand(\r\n  'INSERT_IMAGETEXT_COMMAND',\r\n)\r\n\r\n\r\n/**\r\n * 图文节点序列化\r\n */\r\nexport type SerializedImageTextNode = Spread<{},SerializedMkDocEditBlockComponentNode>\r\n\r\n/**\r\n * 图文节点\r\n */\r\nexport class ImageTextNode extends BaseBlockNode{\r\n\r\n  static getType(): string {\r\n    return \"image-text\";\r\n  }\r\n\r\n  static clone(node: ImageTextNode): ImageTextNode {\r\n    return new ImageTextNode(node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedImageTextNode): ImageTextNode {\r\n    return $createImageTextNode()\r\n  }\r\n\r\n  static getMakeClassName(): string {\r\n    return `${BaseBlockNode.MarkClassName}-${ImageTextNode.getType()}`\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      \"div\" : (domNode: HTMLElement) => {\r\n        return  {\r\n          conversion: (domNode : HTMLElement)=>{\r\n            return domNode.classList.contains(ImageTextNode.getMakeClassName()) ? { node:$createImageTextNode() } : null;\r\n          },\r\n          priority: 0\r\n        }\r\n      },\r\n    }\r\n  }\r\n\r\n\r\n  constructor(key?: NodeKey) {\r\n    super(ImageTextNode.getType(),key)\r\n  }\r\n}\r\n\r\n/**\r\n * 创建图片节点\r\n * @param src \r\n * @returns \r\n */\r\nexport function $createImageTextNode(attrs?: ImageAttrs): ImageTextNode {\r\n\r\n  const imageText = new ImageTextNode()\r\n\r\n  if(attrs != null){\r\n    imageText.append($createImageNode(attrs))\r\n    imageText.append($createParagraphNode())\r\n  }\r\n\r\n  return imageText;\r\n}\r\n\r\n/**\r\n * 判断是否是图文节点\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isImageTextNode(\r\n  node: ImageTextNode | LexicalNode | null | undefined,\r\n): node is ImageTextNode {\r\n  return node instanceof ImageTextNode\r\n}\r\n"],"names":["createCommand","BaseBlockNode","domNode","$createImageNode","$createParagraphNode"],"mappings":";;;;;AAaO,MAAM,2BAAuDA,QAAA;AAAA,EAClE;AACF;AAWO,MAAM,sBAAsBC,cAAAA,cAAa;AAAA,EAE9C,OAAO,UAAkB;AAChB,WAAA;AAAA,EACT;AAAA,EAEA,OAAO,MAAM,MAAoC;AACxC,WAAA,IAAI,cAAc,KAAK,KAAK;AAAA,EACrC;AAAA,EAEA,OAAO,WAAW,gBAAwD;AACxE,WAAO,qBAAqB;AAAA,EAC9B;AAAA,EAEA,OAAO,mBAA2B;AAChC,WAAO,GAAGA,cAAAA,cAAc,aAAa,IAAI,cAAc,QAAS,CAAA;AAAA,EAClE;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,OAAQ,CAAC,YAAyB;AACxB,eAAA;AAAA,UACN,YAAY,CAACC,aAAwB;AAC5BA,mBAAAA,SAAQ,UAAU,SAAS,cAAc,kBAAkB,IAAI,EAAE,MAAK,qBAAqB,EAAA,IAAM;AAAA,UAC1G;AAAA,UACA,UAAU;AAAA,QAAA;AAAA,MAEd;AAAA,IAAA;AAAA,EAEJ;AAAA,EAGA,YAAY,KAAe;AACnB,UAAA,cAAc,QAAQ,GAAE,GAAG;AAAA,EACnC;AACF;AAOO,SAAS,qBAAqB,OAAmC;AAEhE,QAAA,YAAY,IAAI;AAEtB,MAAG,SAAS,MAAK;AACL,cAAA,OAAOC,uBAAiB,KAAK,CAAC;AAC9B,cAAA,OAAOC,8BAAsB;AAAA,EACzC;AAEO,SAAA;AACT;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/ImageTextPlugin/index.vue.js

@@ -0,0 +1,80 @@
+"use strict";
+const vue = require("vue");
+require("@lexical/text");
+const utils = require("@lexical/utils");
+require("@lexical/overflow");
+const lexical = require("lexical");
+require("tiny-invariant");
+require("@lexical/history");
+const useLexicalComposer = require("../../lexical-vue/composables/useLexicalComposer.js");
+require("@lexical/list");
+require("@lexical/dragon");
+require("@lexical/plain-text");
+require("@lexical/rich-text");
+require("@lexical/yjs");
+require("yjs");
+require("../../lexical-vue/components/LexicalDecoratedTeleports.js");
+require("@lexical/html");
+require("@lexical/link");
+require("@lexical/mark");
+require("@lexical/table");
+require("@lexical/hashtag");
+require("@lexical/markdown");
+require("../../lexical-vue/composables/useCollaborationContext.js");
+require("../../lexical-vue/components/LexicalMenu/shared.js");
+require("../../lexical-vue/components/LexicalAutoEmbedPlugin/shared.js");
+require("../../lexical-vue/components/LexicalTypeaheadMenuPlugin/shared.js");
+const index = require("./index.js");
+const defines = require("../ToolbarPlugin/defines.js");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "index",
+  setup(__props) {
+    const editor = useLexicalComposer.useLexicalComposer();
+    vue.onMounted(() => {
+      if (!editor.hasNodes([index.ImageTextNode])) {
+        throw new Error("ImageTextPlugin: 图文节点未注册！");
+      }
+      defines.RegisterToolbarExtend({
+        icon: "richtext-outline",
+        text: "图文",
+        action: async () => {
+          editor.dispatchCommand(index.INSERT_IMAGETEXT_COMMAND, {
+            src: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1prXny.img?w=768&h=479&m=6&x=142&y=148&s=131&d=131",
+            float: "left",
+            width: "200px",
+            margin: "0 10px 10px 0"
+          });
+        },
+        sort: 10
+      });
+      const unregister = utils.mergeRegister(
+        // 插入图片
+        editor.registerCommand(index.INSERT_IMAGETEXT_COMMAND, (payload) => {
+          utils.$insertNodeToNearestRoot(index.$createImageTextNode(payload));
+          return true;
+        }, lexical.COMMAND_PRIORITY_EDITOR)
+        // editor.registerCommand<MouseEvent>(CLICK_COMMAND,(event) => {
+        //   let dom = event.target as HTMLElement
+        //   let block = dom.parentElement
+        //   if(block?.classList.contains(ImageTextNode.getMakeClassName())){
+        //     event.preventDefault();
+        //     console.log(block);
+        //     // if (!event.shiftKey){ clearSelection() }
+        //     // setSelected(true)
+        //     // updateImageActiveBox();
+        //     return true
+        //   }
+        //   // if (event.target === selfElRef.value) {
+        //   // }
+        //   return false
+        // },COMMAND_PRIORITY_LOW),
+      );
+      vue.onUnmounted(() => unregister());
+    });
+    return (_ctx, _cache) => {
+      return null;
+    };
+  }
+});
+module.exports = _sfc_main;
+//# sourceMappingURL=index.vue.js.map

package/dist/cjs/components/basic/doc-editor/plugins/ImageTextPlugin/index.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImageTextPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { useLexicalComposer } from '../../lexical-vue'\r\nimport { $insertNodeToNearestRoot,mergeRegister } from '@lexical/utils'\r\nimport { COMMAND_PRIORITY_EDITOR,COMMAND_PRIORITY_LOW,$getSelection,CLICK_COMMAND } from 'lexical'\r\n\r\nimport { onMounted, onUnmounted } from 'vue'\r\nimport { INSERT_IMAGETEXT_COMMAND,ImageTextNode,$createImageTextNode } from './index'\r\nimport { ImageAttrs } from '../ImagePlugin/index'\r\nimport { RegisterToolbarExtend,type ToolbarExtendPlugin } from \"../ToolbarPlugin/defines\"\r\n\r\n\r\nconst editor = useLexicalComposer()\r\n\r\nonMounted(() => {\r\n\r\n  if (!editor.hasNodes([ImageTextNode])){\r\n    throw new Error('ImageTextPlugin: 图文节点未注册！')\r\n  }\r\n\r\n  // 注册到工具条\r\n  RegisterToolbarExtend({\r\n    icon:\"richtext-outline\",\r\n    text:\"图文\",\r\n    action:async ()=>{\r\n      editor.dispatchCommand(INSERT_IMAGETEXT_COMMAND,{\r\n        src:\"https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1prXny.img?w=768&amp;h=479&amp;m=6&amp;x=142&amp;y=148&amp;s=131&amp;d=131\",\r\n        float:\"left\",\r\n        width:\"200px\",\r\n        margin:\"0 10px 10px 0\"\r\n      })\r\n    },\r\n    sort:10\r\n  } as ToolbarExtendPlugin)\r\n\r\n  // 注册指令\r\n  const unregister = mergeRegister(\r\n\r\n    // 插入图片\r\n    editor.registerCommand<ImageAttrs>(INSERT_IMAGETEXT_COMMAND,(payload) => {\r\n      $insertNodeToNearestRoot($createImageTextNode(payload))\r\n      return true\r\n    },COMMAND_PRIORITY_EDITOR),\r\n    // editor.registerCommand<MouseEvent>(CLICK_COMMAND,(event) => {\r\n\r\n    //   let dom = event.target as HTMLElement\r\n    //   let block = dom.parentElement\r\n\r\n    //   if(block?.classList.contains(ImageTextNode.getMakeClassName())){\r\n\r\n    //     event.preventDefault();\r\n    //     console.log(block);\r\n\r\n    //     // if (!event.shiftKey){ clearSelection() }\r\n        \r\n    //     // setSelected(true)\r\n    //     // updateImageActiveBox();\r\n\r\n    //     return true\r\n    //   }\r\n\r\n    //   // if (event.target === selfElRef.value) {\r\n\r\n    \r\n    //   // }\r\n    //   return false\r\n    // },COMMAND_PRIORITY_LOW),\r\n  );\r\n\r\n  onUnmounted(() => unregister())\r\n})\r\n</script>\r\n\r\n<template />\r\n"],"names":["useLexicalComposer","onMounted","ImageTextNode","RegisterToolbarExtend","INSERT_IMAGETEXT_COMMAND","mergeRegister","$insertNodeToNearestRoot","$createImageTextNode","COMMAND_PRIORITY_EDITOR","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,UAAM,SAASA,mBAAAA;AAEfC,QAAAA,UAAU,MAAM;AAEd,UAAI,CAAC,OAAO,SAAS,CAACC,MAAAA,aAAa,CAAC,GAAE;AAC9B,cAAA,IAAI,MAAM,2BAA2B;AAAA,MAC7C;AAGsBC,oCAAA;AAAA,QACpB,MAAK;AAAA,QACL,MAAK;AAAA,QACL,QAAO,YAAU;AACf,iBAAO,gBAAgBC,gCAAyB;AAAA,YAC9C,KAAI;AAAA,YACJ,OAAM;AAAA,YACN,OAAM;AAAA,YACN,QAAO;AAAA,UAAA,CACR;AAAA,QACH;AAAA,QACA,MAAK;AAAA,MAAA,CACiB;AAGxB,YAAM,aAAaC,MAAA;AAAA;AAAA,QAGjB,OAAO,gBAA4BD,gCAAyB,CAAC,YAAY;AAC9CE,yCAAAC,MAAAA,qBAAqB,OAAO,CAAC;AAC/C,iBAAA;AAAA,WACPC,+BAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAA;AA2BfC,sBAAA,MAAM,YAAY;AAAA,IAAA,CAC/B;;;;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/ImageTextPlugin/index.vue2.js

@@ -0,0 +1,4 @@
+"use strict";
+const index_vue_vue_type_script_setup_true_lang = require("./index.vue.js");
+module.exports = index_vue_vue_type_script_setup_true_lang;
+//# sourceMappingURL=index.vue2.js.map

package/dist/cjs/components/basic/doc-editor/plugins/ImageTextPlugin/index.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/cjs/components/basic/doc-editor/plugins/ToolbarPlugin/ContentStyleTool.vue.js

@@ -40,6 +40,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       { value: "h2", label: "标题 2" },
       { value: "h3", label: "标题 3" }
     ];
+    const disabled = vue.ref(false);
     const contentType = vue.ref(CONTENT_TYPE_DEFINES[0]);
     function updateToolbar() {
       const selection2 = lexical.$getSelection();
@@ -58,6 +59,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           const type = richText.$isHeadingNode(element) ? element.getTag() : element.getType();
           contentType.value = CONTENT_TYPE_DEFINES.find((item) => item.value == type) || CONTENT_TYPE_DEFINES[0];
         }
+        disabled.value = false;
+      } else {
+        disabled.value = true;
       }
     }
     const setContentType = (type) => {
@@ -90,7 +94,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       const _component_el_dropdown = vue.resolveComponent("el-dropdown");
       return vue.openBlock(), vue.createBlock(_component_el_dropdown, {
         "max-height": "300px",
-        trigger: "click"
+        trigger: "click",
+        disabled: disabled.value
       }, {
         dropdown: vue.withCtx(() => [
           vue.createVNode(_component_el_dropdown_menu, null, {
@@ -98,6 +103,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(CONTENT_TYPE_DEFINES, (item) => {
                 return vue.createVNode(_component_el_dropdown_item, {
                   class: vue.normalizeClass({ active: contentType.value.label == item.label }),
+                  disabled: disabled.value,
                   value: item.value,
                   onClick: ($event) => setContentType(item)
                 }, {
@@ -109,14 +115,17 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     }, null, 8, _hoisted_2))
                   ]),
                   _: 2
-                }, 1032, ["class", "value", "onClick"]);
+                }, 1032, ["class", "disabled", "value", "onClick"]);
               }), 64))
             ]),
             _: 1
           })
         ]),
         default: vue.withCtx(() => [
-          vue.createVNode(_component_el_button, { text: "" }, {
+          vue.createVNode(_component_el_button, {
+            text: "",
+            disabled: disabled.value
+          }, {
             default: vue.withCtx(() => [
               vue.createTextVNode(vue.toDisplayString(contentType.value.label) + " ", 1),
               vue.createVNode(_component_MKSvgIcon, {
@@ -125,10 +134,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               })
             ]),
             _: 1
-          })
+          }, 8, ["disabled"])
         ]),
         _: 1
-      });
+      }, 8, ["disabled"]);
     };
   }
 });

package/dist/cjs/components/basic/doc-editor/plugins/ToolbarPlugin/ContentStyleTool.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentStyleTool.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/ContentStyleTool.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {\r\n  $applyNodeReplacement,\r\n  $createParagraphNode, $createTextNode,\r\n  $getSelection,\r\n  $isRangeSelection,\r\n  $isRootOrShadowRoot\r\n} from 'lexical'\r\nimport { $patchStyleText,$setBlocksType } from '@lexical/selection'\r\nimport type { HeadingTagType } from '@lexical/rich-text'\r\nimport { $createHeadingNode,$isHeadingNode } from '@lexical/rich-text'\r\nimport { $findMatchingParent } from '@lexical/utils'\r\nimport {  useLexicalComposer } from '../../lexical-vue'\r\nimport { onMounted, onUnmounted, ref } from 'vue'\r\n\r\nconst editor = useLexicalComposer()\r\n\r\n// 内容类型\r\nconst CONTENT_TYPE_DEFINES = [\r\n  {value:\"paragraph\",label:\"正文\"},\r\n  {value:\"h1\",label:\"标题 1\"},\r\n  {value:\"h2\",label:\"标题 2\"},\r\n  {value:\"h3\",label:\"标题 3\"}\r\n];\r\n\r\nconst contentType = ref<any>(CONTENT_TYPE_DEFINES[0]);\r\n\r\n// 更新状态栏\r\nfunction updateToolbar() {\r\n\r\n  const selection = $getSelection()\r\n\r\n  if ($isRangeSelection(selection)) {\r\n\r\n    const anchorNode = selection.anchor.getNode()\r\n\r\n    let element\r\n        = anchorNode.getKey() === 'root'\r\n          ? anchorNode\r\n          : $findMatchingParent(anchorNode, (e) => {\r\n            const parent = e.getParent()\r\n            return parent !== null && $isRootOrShadowRoot(parent)\r\n          })\r\n\r\n    if (element === null){ element = anchorNode.getTopLevelElementOrThrow() }\r\n      \r\n    const elementKey = element.getKey()\r\n    const elementDOM = editor.getElementByKey(elementKey)\r\n\r\n    if (elementDOM !== null) {\r\n      const type = $isHeadingNode(element) ? element.getTag() : element.getType();\r\n      contentType.value = CONTENT_TYPE_DEFINES.find(item=>item.value == type) || CONTENT_TYPE_DEFINES[0]\r\n    }\r\n  }\r\n}\r\n\r\n// 设置内容类型\r\nconst setContentType = (type:any)=>{\r\n\r\n  contentType.value = type;\r\n   \r\n  editor.update(() => {\r\n\r\n      const selection = $getSelection()\r\n   \r\n      if ($isRangeSelection(selection)){\r\n\r\n        // 清空字体大小\r\n        $patchStyleText(selection, { [\"font-size\"]:\"\" })\r\n   \r\n        if(type.value == \"paragraph\"){\r\n          $setBlocksType(selection, () => $createParagraphNode())\r\n        }\r\n        else{\r\n          $setBlocksType(selection, () => {\r\n            return $createHeadingNode(type.value as  HeadingTagType)\r\n          })\r\n        }\r\n      }\r\n  })\r\n}\r\n\r\n// 挂载的时候\r\nonMounted(() => {\r\n\r\nconst unregisterMergeListener = editor.registerUpdateListener(({ editorState }) => {\r\n  editorState.read(() => updateToolbar())\r\n})\r\n\r\nonUnmounted(() => unregisterMergeListener());\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n  <el-dropdown max-height=\"300px\" trigger=\"click\">\r\n    <el-button text>\r\n      {{contentType.label}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n    </el-button>\r\n    <template #dropdown>\r\n      <el-dropdown-menu>\r\n        <el-dropdown-item :class=\"{active:contentType.label == item.label}\" v-for=\"item in CONTENT_TYPE_DEFINES\" :value=\"item.value\" @click=\"setContentType(item)\">\r\n          <template v-if=\"item.value == 'paragraph'\">\r\n            <div class=\"mk-doc-editor-toolbar-content-style-item text\">{{item.label}}</div>\r\n          </template>\r\n          <template v-else>\r\n           <div class=\"mk-doc-editor-toolbar-content-style-item\" v-html=\"`<${item.value}>${item.label}</${item.value}>`\"></div>\r\n          </template>\r\n        </el-dropdown-item>\r\n      </el-dropdown-menu>\r\n    </template>\r\n  </el-dropdown>\r\n</template>\r\n"],"names":["useLexicalComposer","ref","selection","$getSelection","$isRangeSelection","$findMatchingParent","$isRootOrShadowRoot","$isHeadingNode","$patchStyleText","$setBlocksType","$createParagraphNode","$createHeadingNode","onMounted","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,UAAM,SAASA,mBAAAA;AAGf,UAAM,uBAAuB;AAAA,MAC3B,EAAC,OAAM,aAAY,OAAM,KAAI;AAAA,MAC7B,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,MACxB,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,MACxB,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,IAAA;AAG1B,UAAM,cAAcC,IAAA,IAAS,qBAAqB,CAAC,CAAC;AAGpD,aAAS,gBAAgB;AAEvB,YAAMC,aAAYC,QAAAA;AAEd,UAAAC,QAAAA,kBAAkBF,UAAS,GAAG;AAE1B,cAAA,aAAaA,WAAU,OAAO,QAAQ;AAExC,YAAA,UACE,WAAW,aAAa,SACtB,aACAG,MAAA,oBAAoB,YAAY,CAAC,MAAM;AACjC,gBAAA,SAAS,EAAE;AACV,iBAAA,WAAW,QAAQC,QAAA,oBAAoB,MAAM;AAAA,QAAA,CACrD;AAEP,YAAI,YAAY,MAAK;AAAE,oBAAU,WAAW;QAA4B;AAElE,cAAA,aAAa,QAAQ;AACrB,cAAA,aAAa,OAAO,gBAAgB,UAAU;AAEpD,YAAI,eAAe,MAAM;AACjB,gBAAA,OAAOC,wBAAe,OAAO,IAAI,QAAQ,OAAO,IAAI,QAAQ;AACtD,sBAAA,QAAQ,qBAAqB,KAAK,CAAA,SAAM,KAAK,SAAS,IAAI,KAAK,qBAAqB,CAAC;AAAA,QACnG;AAAA,MACF;AAAA,IACF;AAGM,UAAA,iBAAiB,CAAC,SAAW;AAEjC,kBAAY,QAAQ;AAEpB,aAAO,OAAO,MAAM;AAEhB,cAAML,cAAYC,QAAAA;AAEd,YAAAC,QAAAA,kBAAkBF,WAAS,GAAE;AAG/BM,oBAAAA,gBAAgBN,aAAW,EAAE,CAAC,WAAW,GAAE,GAAI,CAAA;AAE5C,cAAA,KAAK,SAAS,aAAY;AACZO,sBAAAA,eAAAP,aAAW,MAAMQ,QAAA,qBAAA,CAAsB;AAAA,UAAA,OAEpD;AACFD,sBAAA,eAAeP,aAAW,MAAM;AACvB,qBAAAS,SAAA,mBAAmB,KAAK,KAAwB;AAAA,YAAA,CACxD;AAAA,UACH;AAAA,QACF;AAAA,MAAA,CACH;AAAA,IAAA;AAIHC,QAAAA,UAAU,MAAM;AAEhB,YAAM,0BAA0B,OAAO,uBAAuB,CAAC,EAAE,kBAAkB;AACrE,oBAAA,KAAK,MAAM,cAAA,CAAe;AAAA,MAAA,CACvC;AAEWC,sBAAA,MAAM,yBAAyB;AAAA,IAAA,CAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ContentStyleTool.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/ContentStyleTool.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {\r\n  $applyNodeReplacement,\r\n  $createParagraphNode, $createTextNode,\r\n  $getSelection,\r\n  $isRangeSelection,\r\n  $isRootOrShadowRoot\r\n} from 'lexical'\r\nimport { $patchStyleText,$setBlocksType } from '@lexical/selection'\r\nimport type { HeadingTagType } from '@lexical/rich-text'\r\nimport { $createHeadingNode,$isHeadingNode } from '@lexical/rich-text'\r\nimport { $findMatchingParent } from '@lexical/utils'\r\nimport {  useLexicalComposer } from '../../lexical-vue'\r\nimport { onMounted, onUnmounted, ref } from 'vue'\r\n\r\nconst editor = useLexicalComposer()\r\n\r\n// 内容类型\r\nconst CONTENT_TYPE_DEFINES = [\r\n  {value:\"paragraph\",label:\"正文\"},\r\n  {value:\"h1\",label:\"标题 1\"},\r\n  {value:\"h2\",label:\"标题 2\"},\r\n  {value:\"h3\",label:\"标题 3\"}\r\n];\r\nconst disabled = ref(false)\r\n\r\nconst contentType = ref<any>(CONTENT_TYPE_DEFINES[0]);\r\n\r\n// 更新状态栏\r\nfunction updateToolbar() {\r\n\r\n  const selection = $getSelection()\r\n\r\n  if ($isRangeSelection(selection)) {\r\n\r\n    const anchorNode = selection.anchor.getNode()\r\n\r\n    let element\r\n        = anchorNode.getKey() === 'root'\r\n          ? anchorNode\r\n          : $findMatchingParent(anchorNode, (e) => {\r\n            const parent = e.getParent()\r\n            return parent !== null && $isRootOrShadowRoot(parent)\r\n          })\r\n\r\n    if (element === null){ element = anchorNode.getTopLevelElementOrThrow() }\r\n      \r\n    const elementKey = element.getKey()\r\n    const elementDOM = editor.getElementByKey(elementKey)\r\n\r\n    if (elementDOM !== null) {\r\n      const type = $isHeadingNode(element) ? element.getTag() : element.getType();\r\n      contentType.value = CONTENT_TYPE_DEFINES.find(item=>item.value == type) || CONTENT_TYPE_DEFINES[0]\r\n    }\r\n    disabled.value = false;\r\n  }\r\n  else{\r\n\r\n    disabled.value = true;\r\n  }\r\n}\r\n\r\n// 设置内容类型\r\nconst setContentType = (type:any)=>{\r\n\r\n  contentType.value = type;\r\n   \r\n  editor.update(() => {\r\n\r\n      const selection = $getSelection()\r\n   \r\n      if ($isRangeSelection(selection)){\r\n\r\n        // 清空字体大小\r\n        $patchStyleText(selection, { [\"font-size\"]:\"\" })\r\n   \r\n        if(type.value == \"paragraph\"){\r\n          $setBlocksType(selection, () => $createParagraphNode())\r\n        }\r\n        else{\r\n          $setBlocksType(selection, () => {\r\n            return $createHeadingNode(type.value as  HeadingTagType)\r\n          })\r\n        }\r\n      }\r\n  })\r\n}\r\n\r\n// 挂载的时候\r\nonMounted(() => {\r\n\r\nconst unregisterMergeListener = editor.registerUpdateListener(({ editorState }) => {\r\n  editorState.read(() => updateToolbar())\r\n})\r\n\r\nonUnmounted(() => unregisterMergeListener());\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n  <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n    <el-button text :disabled=\"disabled\">\r\n      {{contentType.label}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n    </el-button>\r\n    <template #dropdown>\r\n      <el-dropdown-menu>\r\n        <el-dropdown-item :class=\"{active:contentType.label == item.label}\" :disabled=\"disabled\" v-for=\"item in CONTENT_TYPE_DEFINES\" :value=\"item.value\" @click=\"setContentType(item)\">\r\n          <template v-if=\"item.value == 'paragraph'\">\r\n            <div class=\"mk-doc-editor-toolbar-content-style-item text\">{{item.label}}</div>\r\n          </template>\r\n          <template v-else>\r\n           <div class=\"mk-doc-editor-toolbar-content-style-item\" v-html=\"`<${item.value}>${item.label}</${item.value}>`\"></div>\r\n          </template>\r\n        </el-dropdown-item>\r\n      </el-dropdown-menu>\r\n    </template>\r\n  </el-dropdown>\r\n</template>\r\n"],"names":["useLexicalComposer","ref","selection","$getSelection","$isRangeSelection","$findMatchingParent","$isRootOrShadowRoot","$isHeadingNode","$patchStyleText","$setBlocksType","$createParagraphNode","$createHeadingNode","onMounted","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,UAAM,SAASA,mBAAAA;AAGf,UAAM,uBAAuB;AAAA,MAC3B,EAAC,OAAM,aAAY,OAAM,KAAI;AAAA,MAC7B,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,MACxB,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,MACxB,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,IAAA;AAEpB,UAAA,WAAWC,QAAI,KAAK;AAE1B,UAAM,cAAcA,IAAA,IAAS,qBAAqB,CAAC,CAAC;AAGpD,aAAS,gBAAgB;AAEvB,YAAMC,aAAYC,QAAAA;AAEd,UAAAC,QAAAA,kBAAkBF,UAAS,GAAG;AAE1B,cAAA,aAAaA,WAAU,OAAO,QAAQ;AAExC,YAAA,UACE,WAAW,aAAa,SACtB,aACAG,MAAA,oBAAoB,YAAY,CAAC,MAAM;AACjC,gBAAA,SAAS,EAAE;AACV,iBAAA,WAAW,QAAQC,QAAA,oBAAoB,MAAM;AAAA,QAAA,CACrD;AAEP,YAAI,YAAY,MAAK;AAAE,oBAAU,WAAW;QAA4B;AAElE,cAAA,aAAa,QAAQ;AACrB,cAAA,aAAa,OAAO,gBAAgB,UAAU;AAEpD,YAAI,eAAe,MAAM;AACjB,gBAAA,OAAOC,wBAAe,OAAO,IAAI,QAAQ,OAAO,IAAI,QAAQ;AACtD,sBAAA,QAAQ,qBAAqB,KAAK,CAAA,SAAM,KAAK,SAAS,IAAI,KAAK,qBAAqB,CAAC;AAAA,QACnG;AACA,iBAAS,QAAQ;AAAA,MAAA,OAEf;AAEF,iBAAS,QAAQ;AAAA,MACnB;AAAA,IACF;AAGM,UAAA,iBAAiB,CAAC,SAAW;AAEjC,kBAAY,QAAQ;AAEpB,aAAO,OAAO,MAAM;AAEhB,cAAML,cAAYC,QAAAA;AAEd,YAAAC,QAAAA,kBAAkBF,WAAS,GAAE;AAG/BM,oBAAAA,gBAAgBN,aAAW,EAAE,CAAC,WAAW,GAAE,GAAI,CAAA;AAE5C,cAAA,KAAK,SAAS,aAAY;AACZO,sBAAAA,eAAAP,aAAW,MAAMQ,QAAA,qBAAA,CAAsB;AAAA,UAAA,OAEpD;AACFD,sBAAA,eAAeP,aAAW,MAAM;AACvB,qBAAAS,SAAA,mBAAmB,KAAK,KAAwB;AAAA,YAAA,CACxD;AAAA,UACH;AAAA,QACF;AAAA,MAAA,CACH;AAAA,IAAA;AAIHC,QAAAA,UAAU,MAAM;AAEhB,YAAM,0BAA0B,OAAO,uBAAuB,CAAC,EAAE,kBAAkB;AACrE,oBAAA,KAAK,MAAM,cAAA,CAAe;AAAA,MAAA,CACvC;AAEWC,sBAAA,MAAM,yBAAyB;AAAA,IAAA,CAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/ToolbarPlugin/FontStyleTool.vue.js

@@ -40,6 +40,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const isStrikethrough = vue.ref(false);
     const alignList = vue.ref(["left", "center", "right", "justify"]);
     const alignValue = vue.ref(alignList.value[0]);
+    const disabled = vue.ref(false);
     function updateToolbar() {
       const selection$1 = lexical.$getSelection();
       if (lexical.$isRangeSelection(selection$1)) {
@@ -70,6 +71,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         fontColor.value = selection.$getSelectionStyleValueForProperty(selection$1, "color", "#000");
         bgColor.value = selection.$getSelectionStyleValueForProperty(selection$1, "background-color", "#fff");
         fontFamily.value = FontStyleDefines.FONT_FAMILY_OPTIONS.find((item) => item.value == ff) || FontStyleDefines.FONT_FAMILY_OPTIONS[0];
+        disabled.value = false;
+      } else {
+        disabled.value = true;
       }
     }
     const fontStyleHandle = (data, styleName) => {
@@ -120,7 +124,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
         vue.createVNode(_component_el_dropdown, {
           "max-height": "300px",
-          trigger: "click"
+          trigger: "click",
+          disabled: disabled.value
         }, {
           dropdown: vue.withCtx(() => [
             vue.createVNode(_component_el_dropdown_menu, null, {
@@ -128,6 +133,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(FontStyleDefines.FONT_FAMILY_OPTIONS), (item) => {
                   return vue.openBlock(), vue.createBlock(_component_el_dropdown_item, {
                     class: vue.normalizeClass({ active: fontFamily.value.label == item.label }),
+                    disabled: disabled.value,
                     value: item.value,
                     onClick: ($event) => fontStyleHandle(item, "font-family")
                   }, {
@@ -137,7 +143,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       }, vue.toDisplayString(item.label), 5)
                     ]),
                     _: 2
-                  }, 1032, ["class", "value", "onClick"]);
+                  }, 1032, ["class", "disabled", "value", "onClick"]);
                 }), 256))
               ]),
               _: 1
@@ -146,7 +152,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           default: vue.withCtx(() => [
             vue.createVNode(_component_el_button, {
               text: "",
-              style: vue.normalizeStyle({ fontFamily: fontFamily.value.value })
+              style: vue.normalizeStyle({ fontFamily: fontFamily.value.value }),
+              disabled: disabled.value
             }, {
               default: vue.withCtx(() => [
                 vue.createTextVNode(vue.toDisplayString(fontFamily.value.label) + " ", 1),
@@ -156,14 +163,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 })
               ]),
               _: 1
-            }, 8, ["style"])
+            }, 8, ["style", "disabled"])
           ]),
           _: 1
-        }),
+        }, 8, ["disabled"]),
         vue.createVNode(_component_el_divider, { direction: "vertical" }),
         vue.createVNode(_component_el_dropdown, {
           "max-height": "300px",
-          trigger: "click"
+          trigger: "click",
+          disabled: disabled.value
         }, {
           dropdown: vue.withCtx(() => [
             vue.createVNode(_component_el_dropdown_menu, null, {
@@ -171,6 +179,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(FontStyleDefines.FONT_SIZE_OPTIONS), (item) => {
                   return vue.openBlock(), vue.createBlock(_component_el_dropdown_item, {
                     class: vue.normalizeClass({ active: fontSize.value == item.label }),
+                    disabled: disabled.value,
                     value: item.value,
                     onClick: ($event) => fontStyleHandle(item)
                   }, {
@@ -178,14 +187,17 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       vue.createTextVNode(vue.toDisplayString(item.label), 1)
                     ]),
                     _: 2
-                  }, 1032, ["class", "value", "onClick"]);
+                  }, 1032, ["class", "disabled", "value", "onClick"]);
                 }), 256))
               ]),
               _: 1
             })
           ]),
           default: vue.withCtx(() => [
-            vue.createVNode(_component_el_button, { text: "" }, {
+            vue.createVNode(_component_el_button, {
+              text: "",
+              disabled: disabled.value
+            }, {
               default: vue.withCtx(() => [
                 vue.createTextVNode(vue.toDisplayString(fontSize.value) + " ", 1),
                 vue.createVNode(_component_MKSvgIcon, {
@@ -194,43 +206,48 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 })
               ]),
               _: 1
-            })
+            }, 8, ["disabled"])
           ]),
           _: 1
-        }),
+        }, 8, ["disabled"]),
         vue.createVNode(_component_el_divider, { direction: "vertical" }),
         vue.createVNode(_component_el_button, {
           text: "",
-          class: "mk-doc-editor-toolbar__fontcolor"
+          class: "mk-doc-editor-toolbar__fontcolor",
+          disabled: disabled.value
         }, {
           default: vue.withCtx(() => [
             vue.createVNode(_component_el_color_picker, {
               modelValue: fontColor.value,
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => fontColor.value = $event)
-            }, null, 8, ["modelValue"])
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => fontColor.value = $event),
+              disabled: disabled.value
+            }, null, 8, ["modelValue", "disabled"])
           ]),
           _: 1
-        }),
+        }, 8, ["disabled"]),
         vue.createVNode(_component_el_button, {
           text: "",
-          class: "mk-doc-editor-toolbar__bgcolor"
+          class: "mk-doc-editor-toolbar__bgcolor",
+          disabled: disabled.value
         }, {
           default: vue.withCtx(() => [
             vue.createVNode(_component_el_color_picker, {
               modelValue: bgColor.value,
-              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => bgColor.value = $event)
-            }, null, 8, ["modelValue"]),
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => bgColor.value = $event),
+              disabled: disabled.value
+            }, null, 8, ["modelValue", "disabled"]),
             vue.createVNode(_component_MKSvgIcon, {
               class: "view",
               iconClass: "doc-background-color"
             })
           ]),
           _: 1
-        }),
+        }, 8, ["disabled"]),
         vue.createVNode(_component_el_divider, { direction: "vertical" }),
         vue.createVNode(_component_el_button_group, null, {
           default: vue.withCtx(() => [
             vue.createVNode(_component_el_button, {
+              disabled: disabled.value,
               text: "",
               class: vue.normalizeClass(`${isBold.value ? "active" : ""}`),
               onClick: _cache[2] || (_cache[2] = ($event) => vue.unref(editor).dispatchCommand(vue.unref(lexical.FORMAT_TEXT_COMMAND), "bold"))
@@ -239,8 +256,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 vue.createVNode(_component_MKSvgIcon, { iconClass: "doc-bold" })
               ]),
               _: 1
-            }, 8, ["class"]),
+            }, 8, ["disabled", "class"]),
             vue.createVNode(_component_el_button, {
+              disabled: disabled.value,
               text: "",
               class: vue.normalizeClass(`${isItalic.value ? "active" : ""}`),
               onClick: _cache[3] || (_cache[3] = ($event) => vue.unref(editor).dispatchCommand(vue.unref(lexical.FORMAT_TEXT_COMMAND), "italic"))
@@ -249,8 +267,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 vue.createVNode(_component_MKSvgIcon, { iconClass: "doc-italic" })
               ]),
               _: 1
-            }, 8, ["class"]),
+            }, 8, ["disabled", "class"]),
             vue.createVNode(_component_el_button, {
+              disabled: disabled.value,
               text: "",
               class: vue.normalizeClass(`${isUnderline.value ? "active" : ""}`),
               onClick: _cache[4] || (_cache[4] = ($event) => vue.unref(editor).dispatchCommand(vue.unref(lexical.FORMAT_TEXT_COMMAND), "underline"))
@@ -259,8 +278,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 vue.createVNode(_component_MKSvgIcon, { iconClass: "doc-underline" })
               ]),
               _: 1
-            }, 8, ["class"]),
+            }, 8, ["disabled", "class"]),
             vue.createVNode(_component_el_button, {
+              disabled: disabled.value,
               text: "",
               class: vue.normalizeClass(`${isStrikethrough.value ? "active" : ""}`),
               onClick: _cache[5] || (_cache[5] = ($event) => vue.unref(editor).dispatchCommand(vue.unref(lexical.FORMAT_TEXT_COMMAND), "strikethrough"))
@@ -269,20 +289,22 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 vue.createVNode(_component_MKSvgIcon, { iconClass: "doc-strikethrough" })
               ]),
               _: 1
-            }, 8, ["class"])
+            }, 8, ["disabled", "class"])
           ]),
           _: 1
         }),
         vue.createVNode(_component_el_divider, { direction: "vertical" }),
         vue.createVNode(_component_el_dropdown, {
           "max-height": "300px",
-          trigger: "click"
+          trigger: "click",
+          disabled: disabled.value
         }, {
           dropdown: vue.withCtx(() => [
             vue.createVNode(_component_el_dropdown_menu, null, {
               default: vue.withCtx(() => [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(alignList.value, (item) => {
                   return vue.openBlock(), vue.createBlock(_component_el_dropdown_item, {
+                    disabled: disabled.value,
                     class: vue.normalizeClass({ active: alignValue.value == item }),
                     value: item,
                     onClick: ($event) => vue.unref(editor).dispatchCommand(vue.unref(lexical.FORMAT_ELEMENT_COMMAND), item)
@@ -294,7 +316,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                       }, null, 8, ["iconClass"])
                     ]),
                     _: 2
-                  }, 1032, ["class", "value", "onClick"]);
+                  }, 1032, ["disabled", "class", "value", "onClick"]);
                 }), 256))
               ]),
               _: 1
@@ -303,7 +325,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           default: vue.withCtx(() => [
             vue.createVNode(_component_el_button, {
               text: "",
-              style: vue.normalizeStyle({ fontFamily: fontFamily.value.value })
+              style: vue.normalizeStyle({ fontFamily: fontFamily.value.value }),
+              disabled: disabled.value
             }, {
               default: vue.withCtx(() => [
                 vue.createVNode(_component_MKSvgIcon, {
@@ -312,10 +335,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 }, null, 8, ["iconClass"])
               ]),
               _: 1
-            }, 8, ["style"])
+            }, 8, ["style", "disabled"])
           ]),
           _: 1
-        })
+        }, 8, ["disabled"])
       ], 64);
     };
   }