@maketribe/ms-app 3.2.3 → 3.2.5

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);
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"FontStyleTool.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/FontStyleTool.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {\r\n  $getSelection,\r\n  $isRangeSelection,\r\n  $isRootOrShadowRoot,\r\n  FORMAT_TEXT_COMMAND,\r\n  FORMAT_ELEMENT_COMMAND,\r\n  SELECTION_CHANGE_COMMAND,\r\n  type CommandListenerPriority,\r\n  type ElementFormatType\r\n} from 'lexical'\r\nimport {\r\n  $getSelectionStyleValueForProperty,\r\n  $patchStyleText,\r\n} from '@lexical/selection'\r\nimport { $findMatchingParent,mergeRegister } from '@lexical/utils'\r\nimport {  useLexicalComposer } from '../../lexical-vue'\r\nimport { onMounted, onUnmounted, ref,watch } from 'vue'\r\nimport { FONT_SIZE_OPTIONS,ROOT_FONT_SIZE,FONT_FAMILY_OPTIONS } from \"./FontStyleDefines\"\r\n\r\nconst editor = useLexicalComposer()\r\nconst fontSize = ref('14px')\r\nconst fontColor = ref<string>('#000')\r\nconst bgColor = ref<string>('#fff')\r\nconst fontFamily = ref<any>(FONT_FAMILY_OPTIONS[0])\r\nconst isBold = ref(false)\r\nconst isItalic = ref(false)\r\nconst isUnderline = ref(false)\r\nconst isStrikethrough = ref(false)\r\n\r\n\r\nconst lowPriority: CommandListenerPriority = 1\r\n\r\n// 对齐方式\r\nconst alignList = ref<ElementFormatType[]>([\"left\",\"center\",\"right\",\"justify\"])\r\nconst alignValue= ref(alignList.value[0])\r\n\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 = 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\r\n    if (element === null){\r\n      element = anchorNode.getTopLevelElementOrThrow()\r\n    }\r\n\r\n    let elementDOM = editor.getElementByKey(element.getKey());\r\n\r\n    // 文本对齐\r\n    alignValue.value = (elementDOM?.style.textAlign as ElementFormatType) || \"left\";\r\n\r\n    if(alignValue.value  == \"start\"){ alignValue.value  = \"left\"; }\r\n    else if(alignValue.value  == \"end\"){ alignValue.value  = \"right\"; }\r\n\r\n    // Update text format\r\n    isBold.value = selection.hasFormat('bold')\r\n    isItalic.value = selection.hasFormat('italic')\r\n    isUnderline.value = selection.hasFormat('underline')\r\n    isStrikethrough.value = selection.hasFormat('strikethrough')\r\n\r\n    // Handle buttons\r\n    var ff = $getSelectionStyleValueForProperty(selection, 'font-family', 'Arial');\r\n    let fs = $getSelectionStyleValueForProperty(selection, 'font-size', '1rem');\r\n     \r\n    if(fs){\r\n       fontSize.value = Math.round(parseFloat(fs) * ROOT_FONT_SIZE)+\"px\"\r\n    }\r\n   \r\n    fontColor.value = $getSelectionStyleValueForProperty(selection, 'color', '#000')\r\n    bgColor.value = $getSelectionStyleValueForProperty(selection, 'background-color', '#fff')\r\n    fontFamily.value = FONT_FAMILY_OPTIONS.find(item=>item.value==ff) || FONT_FAMILY_OPTIONS[0];\r\n  }\r\n}\r\n\r\n// 文字样式\r\nconst fontStyleHandle = (data : any,styleName?:any)=>{\r\n  fontSize.value = data.label;\r\n  editor.update(() => {\r\n    const selection = $getSelection()\r\n    if (selection !== null) {\r\n      $patchStyleText(selection, {\r\n        [styleName || \"font-size\"]:data.value\r\n      })\r\n    }\r\n  })\r\n}\r\n\r\n// 字体颜色\r\nwatch(fontColor,(color:any)=>{\r\n  editor.update(() => {\r\n      const selection = $getSelection()\r\n      if (selection !== null){\r\n        $patchStyleText(selection, { color })\r\n      }\r\n    },{})\r\n})\r\n\r\n// bg颜色\r\nwatch(bgColor,(color:any)=>{\r\n  editor.update(() => {\r\n      const selection = $getSelection()\r\n      if (selection !== null){\r\n        $patchStyleText(selection, { 'background-color':color })\r\n      }\r\n    },{})\r\n})\r\n\r\n// 挂载的时候\r\nonMounted(() => {\r\n\r\n  const unregisterMergeListener = mergeRegister(\r\n    editor.registerUpdateListener(({ editorState }) => {\r\n      editorState.read(() => updateToolbar())\r\n    }),\r\n    // editor.registerCommand(SELECTION_CHANGE_COMMAND, (_payload, _newEditor) => updateToolbar()!,lowPriority)\r\n  )\r\n\r\n  onUnmounted(() => unregisterMergeListener());\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n   <!-- 字体 -->\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\">\r\n      <el-button text  :style=\"{fontFamily:fontFamily.value}\">\r\n        {{fontFamily.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:fontFamily.label == item.label}\" v-for=\"item in FONT_FAMILY_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item,'font-family')\">\r\n            <span :style=\"{fontFamily:item.value}\">\r\n              {{item.label}}\r\n            </span>\r\n          </el-dropdown-item>\r\n        </el-dropdown-menu>\r\n      </template>\r\n    </el-dropdown>\r\n    <el-divider  direction=\"vertical\" />  \r\n    <!-- 字体大小 -->\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\">\r\n        <el-button text>\r\n          {{fontSize}} <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:fontSize==item.label}\" v-for=\"item in FONT_SIZE_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item)\">{{item.label}}</el-dropdown-item>\r\n          </el-dropdown-menu>\r\n        </template>\r\n    </el-dropdown>\r\n    <el-divider  direction=\"vertical\" />  \r\n    <!-- 字体颜色 -->\r\n    <el-button text class=\"mk-doc-editor-toolbar__fontcolor\">\r\n            <el-color-picker v-model=\"fontColor\" />\r\n      </el-button>\r\n     <!-- 背景颜色 -->\r\n      <el-button text class=\"mk-doc-editor-toolbar__bgcolor\">\r\n        <el-color-picker v-model=\"bgColor\" />\r\n        <MKSvgIcon class=\"view\" iconClass=\"doc-background-color\" /> \r\n      </el-button>\r\n\r\n    <el-divider  direction=\"vertical\" />\r\n    <el-button-group>\r\n      <el-button text :class=\"`${isBold ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\">\r\n        <MKSvgIcon iconClass=\"doc-bold\" /> \r\n      </el-button>\r\n      <el-button text :class=\"`${isItalic ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'italic')\">\r\n        <MKSvgIcon iconClass=\"doc-italic\" /> \r\n      </el-button>\r\n      <el-button text :class=\"`${isUnderline ? 'active' : ''}`\"  @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'underline')\">\r\n        <MKSvgIcon iconClass=\"doc-underline\" /> \r\n      </el-button>\r\n      <el-button text :class=\"`${isStrikethrough ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'strikethrough')\">\r\n        <MKSvgIcon iconClass=\"doc-strikethrough\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n    <el-divider  direction=\"vertical\" />\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\">\r\n      <el-button text  :style=\"{fontFamily:fontFamily.value}\">\r\n        <MKSvgIcon :iconClass=\"`doc-align-${alignValue}`\" style=\"font-size: 18px;\" /> \r\n      </el-button>\r\n      <template #dropdown>\r\n        <el-dropdown-menu>\r\n          <el-dropdown-item :class=\"{active:alignValue == item}\" v-for=\"item in alignList\" :value=\"item\"  @click=\"editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, item)\">\r\n            <MKSvgIcon :iconClass=\"`doc-align-${item}`\" style=\"font-size: 18px;\"  /> \r\n          </el-dropdown-item>\r\n        </el-dropdown-menu>\r\n      </template>\r\n    </el-dropdown>\r\n</template>./FontStyleDefines\r\n"],"names":["useLexicalComposer","ref","FONT_FAMILY_OPTIONS","selection","$getSelection","$isRangeSelection","$findMatchingParent","$isRootOrShadowRoot","$getSelectionStyleValueForProperty","ROOT_FONT_SIZE","$patchStyleText","watch","onMounted","mergeRegister","onUnmounted"],"mappings":"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"}
+{"version":3,"file":"FontStyleTool.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/FontStyleTool.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {\r\n  $getSelection,\r\n  $isRangeSelection,\r\n  $isRootOrShadowRoot,\r\n  FORMAT_TEXT_COMMAND,\r\n  FORMAT_ELEMENT_COMMAND,\r\n  SELECTION_CHANGE_COMMAND,\r\n  type CommandListenerPriority,\r\n  type ElementFormatType\r\n} from 'lexical'\r\nimport {\r\n  $getSelectionStyleValueForProperty,\r\n  $patchStyleText,\r\n} from '@lexical/selection'\r\nimport { $findMatchingParent,mergeRegister } from '@lexical/utils'\r\nimport {  useLexicalComposer } from '../../lexical-vue'\r\nimport { onMounted, onUnmounted, ref,watch } from 'vue'\r\nimport { FONT_SIZE_OPTIONS,ROOT_FONT_SIZE,FONT_FAMILY_OPTIONS } from \"./FontStyleDefines\"\r\n\r\nconst editor = useLexicalComposer()\r\nconst fontSize = ref('14px')\r\nconst fontColor = ref<string>('#000')\r\nconst bgColor = ref<string>('#fff')\r\nconst fontFamily = ref<any>(FONT_FAMILY_OPTIONS[0])\r\nconst isBold = ref(false)\r\nconst isItalic = ref(false)\r\nconst isUnderline = ref(false)\r\nconst isStrikethrough = ref(false)\r\n\r\n\r\nconst lowPriority: CommandListenerPriority = 1\r\n\r\n// 对齐方式\r\nconst alignList = ref<ElementFormatType[]>([\"left\",\"center\",\"right\",\"justify\"])\r\nconst alignValue = ref(alignList.value[0])\r\nconst disabled = ref(false)\r\n\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 = 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\r\n    if (element === null){\r\n      element = anchorNode.getTopLevelElementOrThrow()\r\n    }\r\n\r\n    let elementDOM = editor.getElementByKey(element.getKey());\r\n\r\n    // 文本对齐\r\n    alignValue.value = (elementDOM?.style.textAlign as ElementFormatType) || \"left\";\r\n\r\n    if(alignValue.value  == \"start\"){ alignValue.value  = \"left\"; }\r\n    else if(alignValue.value  == \"end\"){ alignValue.value  = \"right\"; }\r\n\r\n    // Update text format\r\n    isBold.value = selection.hasFormat('bold')\r\n    isItalic.value = selection.hasFormat('italic')\r\n    isUnderline.value = selection.hasFormat('underline')\r\n    isStrikethrough.value = selection.hasFormat('strikethrough')\r\n\r\n    // Handle buttons\r\n    var ff = $getSelectionStyleValueForProperty(selection, 'font-family', 'Arial');\r\n    let fs = $getSelectionStyleValueForProperty(selection, 'font-size', '1rem');\r\n     \r\n    if(fs){\r\n       fontSize.value = Math.round(parseFloat(fs) * ROOT_FONT_SIZE)+\"px\"\r\n    }\r\n   \r\n    fontColor.value = $getSelectionStyleValueForProperty(selection, 'color', '#000')\r\n    bgColor.value = $getSelectionStyleValueForProperty(selection, 'background-color', '#fff')\r\n    fontFamily.value = FONT_FAMILY_OPTIONS.find(item=>item.value==ff) || FONT_FAMILY_OPTIONS[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 fontStyleHandle = (data : any,styleName?:any)=>{\r\n  fontSize.value = data.label;\r\n  editor.update(() => {\r\n    const selection = $getSelection()\r\n    if (selection !== null) {\r\n      $patchStyleText(selection, {\r\n        [styleName || \"font-size\"]:data.value\r\n      })\r\n    }\r\n  })\r\n}\r\n\r\n// 字体颜色\r\nwatch(fontColor,(color:any)=>{\r\n  editor.update(() => {\r\n      const selection = $getSelection()\r\n      if (selection !== null){\r\n        $patchStyleText(selection, { color })\r\n      }\r\n    },{})\r\n})\r\n\r\n// bg颜色\r\nwatch(bgColor,(color:any)=>{\r\n  editor.update(() => {\r\n      const selection = $getSelection()\r\n      if (selection !== null){\r\n        $patchStyleText(selection, { 'background-color':color })\r\n      }\r\n    },{})\r\n})\r\n\r\n// 挂载的时候\r\nonMounted(() => {\r\n\r\n  const unregisterMergeListener = mergeRegister(\r\n    editor.registerUpdateListener(({ editorState }) => {\r\n      editorState.read(() => updateToolbar())\r\n    }),\r\n    // editor.registerCommand(SELECTION_CHANGE_COMMAND, (_payload, _newEditor) => updateToolbar()!,lowPriority)\r\n  )\r\n\r\n  onUnmounted(() => unregisterMergeListener());\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n   <!-- 字体 -->\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n      <el-button text  :style=\"{fontFamily:fontFamily.value}\" :disabled=\"disabled\">\r\n        {{fontFamily.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:fontFamily.label == item.label}\" :disabled=\"disabled\"  v-for=\"item in FONT_FAMILY_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item,'font-family')\">\r\n            <span :style=\"{fontFamily:item.value}\">\r\n              {{item.label}}\r\n            </span>\r\n          </el-dropdown-item>\r\n        </el-dropdown-menu>\r\n      </template>\r\n    </el-dropdown>\r\n    <el-divider  direction=\"vertical\" />  \r\n    <!-- 字体大小 -->\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n        <el-button text :disabled=\"disabled\">\r\n          {{fontSize}} <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:fontSize==item.label}\" :disabled=\"disabled\" v-for=\"item in FONT_SIZE_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item)\">{{item.label}}</el-dropdown-item>\r\n          </el-dropdown-menu>\r\n        </template>\r\n    </el-dropdown>\r\n    <el-divider  direction=\"vertical\" />  \r\n    <!-- 字体颜色 -->\r\n    <el-button text class=\"mk-doc-editor-toolbar__fontcolor\" :disabled=\"disabled\" >\r\n        <el-color-picker v-model=\"fontColor\" :disabled=\"disabled\"  />\r\n    </el-button>\r\n    <!-- 背景颜色 -->\r\n    <el-button text class=\"mk-doc-editor-toolbar__bgcolor\" :disabled=\"disabled\" >\r\n      <el-color-picker v-model=\"bgColor\" :disabled=\"disabled\"  />\r\n      <MKSvgIcon class=\"view\" iconClass=\"doc-background-color\" /> \r\n    </el-button>\r\n\r\n    <el-divider  direction=\"vertical\" />\r\n    <el-button-group>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isBold ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\">\r\n        <MKSvgIcon iconClass=\"doc-bold\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isItalic ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'italic')\">\r\n        <MKSvgIcon iconClass=\"doc-italic\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isUnderline ? 'active' : ''}`\"  @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'underline')\">\r\n        <MKSvgIcon iconClass=\"doc-underline\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isStrikethrough ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'strikethrough')\">\r\n        <MKSvgIcon iconClass=\"doc-strikethrough\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n    <el-divider  direction=\"vertical\" />\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n      <el-button text  :style=\"{fontFamily:fontFamily.value}\" :disabled=\"disabled\">\r\n        <MKSvgIcon :iconClass=\"`doc-align-${alignValue}`\" style=\"font-size: 18px;\" /> \r\n      </el-button>\r\n      <template #dropdown>\r\n        <el-dropdown-menu>\r\n          <el-dropdown-item :disabled=\"disabled\"  :class=\"{active:alignValue == item}\" v-for=\"item in alignList\" :value=\"item\"  @click=\"editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, item)\">\r\n            <MKSvgIcon :iconClass=\"`doc-align-${item}`\" style=\"font-size: 18px;\"  /> \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","FONT_FAMILY_OPTIONS","selection","$getSelection","$isRangeSelection","$findMatchingParent","$isRootOrShadowRoot","$getSelectionStyleValueForProperty","ROOT_FONT_SIZE","$patchStyleText","watch","onMounted","mergeRegister","onUnmounted"],"mappings":"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"}

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

@@ -0,0 +1,89 @@
+"use strict";
+const vue = require("vue");
+const utils = require("@lexical/utils");
+require("@lexical/text");
+require("@lexical/overflow");
+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("../ImagePlugin/index.js");
+const commands = require("../commands.js");
+const lowPriority = 1;
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "InlineToolsPlugin",
+  setup(__props) {
+    const toolbarRef = vue.ref(null);
+    const editor = useLexicalComposer.useLexicalComposer();
+    const selectPayload = vue.shallowRef(null);
+    const toolsPos = vue.reactive({ left: "px", top: "0px" });
+    const updateToolsPos = () => {
+      vue.nextTick(() => {
+        if (selectPayload.value != null && toolbarRef.value != null) {
+          const editIframeRect = toolbarRef.value.getRootNode().body.querySelector(".mk-doc-editor__stage_iframe").getBoundingClientRect();
+          const editBodyRect = toolbarRef.value.getRootNode().body.querySelector(".mk-doc-editor__stage_body").getBoundingClientRect();
+          const baseY = editIframeRect.y - editBodyRect.y;
+          const selectRect = selectPayload.value.el.getBoundingClientRect();
+          const toolsRect = toolbarRef.value.getBoundingClientRect();
+          if (toolsRect) {
+            toolsPos.top = Math.max(selectRect.y - toolsRect.height - 5 + baseY, 5 + baseY) + "px";
+            toolsPos.left = toolsRect.width / -2 + selectRect.x + selectRect.width / 2 + "px";
+          }
+        }
+      });
+      return false;
+    };
+    vue.onMounted(() => {
+      const unregisterMergeListener = utils.mergeRegister(
+        editor.registerCommand(commands.DEVICE_VIEW_MODE, () => updateToolsPos(), lowPriority),
+        editor.registerCommand(index.IMAGE_ATTRS_CHANGE, () => updateToolsPos(), lowPriority),
+        editor.registerUpdateListener(({ editorState }) => editorState.read(() => updateToolsPos())),
+        editor.registerCommand(commands.SELECTED_COMPONENT_COMMAND, (payload) => {
+          selectPayload.value = payload;
+          return updateToolsPos();
+        }, lowPriority)
+        // editor.registerCommand(SELECTION_CHANGE_COMMAND, (payload, newEditor) => {
+        //   const selection = $getSelection();
+        //   if($isNodeSelection(selection)){
+        //     const node = selection.getNodes()[0]
+        //     console.log(node,node.getTopLevelElement());
+        //   }
+        //   return updateToolsPos();
+        // },lowPriority)
+      );
+      vue.onUnmounted(() => {
+        unregisterMergeListener();
+      });
+    });
+    return (_ctx, _cache) => {
+      return selectPayload.value != null ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
+        ref_key: "toolbarRef",
+        ref: toolbarRef,
+        class: "mk-doc-editor-inline-toolbar",
+        style: vue.normalizeStyle(toolsPos)
+      }, [
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(selectPayload.value.component)))
+      ], 4)) : vue.createCommentVNode("", true);
+    };
+  }
+});
+module.exports = _sfc_main;
+//# sourceMappingURL=InlineToolsPlugin.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InlineToolsPlugin.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/InlineToolsPlugin.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type { CommandListenerPriority } from 'lexical'\r\nimport {  mergeRegister } from '@lexical/utils'\r\nimport {  useLexicalComposer } from '../../lexical-vue'\r\nimport { IMAGE_ATTRS_CHANGE } from \"../ImagePlugin\"\r\nimport { onMounted, onUnmounted, ref,reactive,shallowRef,nextTick } from 'vue'\r\nimport { DEVICE_VIEW_MODE,SELECTED_COMPONENT_COMMAND,ComponentSelectEvent } from \"../commands\"\r\n\r\nconst lowPriority: CommandListenerPriority = 1\r\nconst toolbarRef = ref<HTMLDivElement | null>(null)\r\nconst editor = useLexicalComposer()\r\nconst selectPayload = shallowRef<ComponentSelectEvent|null>(null);\r\nconst toolsPos = reactive({ left:\"px\",top:\"0px\" });\r\n\r\nconst updateToolsPos = ()=>{\r\n\r\n  nextTick(()=>{\r\n    if(selectPayload.value != null && toolbarRef.value != null){\r\n      const editIframeRect = (toolbarRef.value.getRootNode() as any).body.querySelector(\".mk-doc-editor__stage_iframe\").getBoundingClientRect();\r\n      const editBodyRect = (toolbarRef.value.getRootNode() as any).body.querySelector(\".mk-doc-editor__stage_body\").getBoundingClientRect();\r\n      const baseY =  editIframeRect.y - editBodyRect.y;\r\n      const selectRect = selectPayload.value.el.getBoundingClientRect();\r\n      const toolsRect = toolbarRef.value.getBoundingClientRect();\r\n      if(toolsRect){\r\n        // 中心点\r\n        toolsPos.top = Math.max(selectRect.y - toolsRect.height - 5 + baseY,5 +baseY) + \"px\"\r\n        toolsPos.left = toolsRect.width / -2 + selectRect.x + selectRect.width / 2 + \"px\";\r\n      }\r\n    }\r\n  })\r\n \r\n\r\n  return false;\r\n}\r\n\r\nonMounted(() => {\r\n\r\n  const unregisterMergeListener = mergeRegister(\r\n    editor.registerCommand(DEVICE_VIEW_MODE,() => updateToolsPos(),lowPriority),\r\n    editor.registerCommand(IMAGE_ATTRS_CHANGE,() => updateToolsPos(),lowPriority),\r\n    editor.registerUpdateListener(({ editorState }) =>  editorState.read(() => updateToolsPos())),\r\n    editor.registerCommand(SELECTED_COMPONENT_COMMAND, (payload:ComponentSelectEvent) => {\r\n      selectPayload.value = payload;\r\n      return updateToolsPos();\r\n    },lowPriority)\r\n    // editor.registerCommand(SELECTION_CHANGE_COMMAND, (payload, newEditor) => {\r\n      \r\n    //   const selection = $getSelection();\r\n\r\n    //   if($isNodeSelection(selection)){\r\n\r\n    //     const node = selection.getNodes()[0]\r\n\r\n    //     console.log(node,node.getTopLevelElement());\r\n    //   }\r\n\r\n    //   return updateToolsPos();\r\n    // },lowPriority)\r\n  )\r\n\r\n  onUnmounted(() => {\r\n    unregisterMergeListener()\r\n  })\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n  <div v-if=\"selectPayload != null\" ref=\"toolbarRef\" class=\"mk-doc-editor-inline-toolbar\" :style=\"toolsPos\">\r\n    <component :is=\"selectPayload.component\" />\r\n  </div>\r\n</template>\r\n"],"names":["ref","useLexicalComposer","shallowRef","reactive","nextTick","onMounted","mergeRegister","DEVICE_VIEW_MODE","IMAGE_ATTRS_CHANGE","SELECTED_COMPONENT_COMMAND","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,cAAuC;;;;AACvC,UAAA,aAAaA,QAA2B,IAAI;AAClD,UAAM,SAASC,mBAAAA;AACT,UAAA,gBAAgBC,eAAsC,IAAI;AAChE,UAAM,WAAWC,IAAAA,SAAS,EAAE,MAAK,MAAK,KAAI,OAAO;AAEjD,UAAM,iBAAiB,MAAI;AAEzBC,UAAAA,SAAS,MAAI;AACX,YAAG,cAAc,SAAS,QAAQ,WAAW,SAAS,MAAK;AACnD,gBAAA,iBAAkB,WAAW,MAAM,YAAA,EAAsB,KAAK,cAAc,8BAA8B,EAAE;AAC5G,gBAAA,eAAgB,WAAW,MAAM,YAAA,EAAsB,KAAK,cAAc,4BAA4B,EAAE;AACxG,gBAAA,QAAS,eAAe,IAAI,aAAa;AAC/C,gBAAM,aAAa,cAAc,MAAM,GAAG,sBAAsB;AAC1D,gBAAA,YAAY,WAAW,MAAM,sBAAsB;AACzD,cAAG,WAAU;AAEF,qBAAA,MAAM,KAAK,IAAI,WAAW,IAAI,UAAU,SAAS,IAAI,OAAM,IAAG,KAAK,IAAI;AACvE,qBAAA,OAAO,UAAU,QAAQ,KAAK,WAAW,IAAI,WAAW,QAAQ,IAAI;AAAA,UAC/E;AAAA,QACF;AAAA,MAAA,CACD;AAGM,aAAA;AAAA,IAAA;AAGTC,QAAAA,UAAU,MAAM;AAEd,YAAM,0BAA0BC,MAAA;AAAA,QAC9B,OAAO,gBAAgBC,SAAAA,kBAAiB,MAAM,eAAA,GAAiB,WAAW;AAAA,QAC1E,OAAO,gBAAgBC,MAAAA,oBAAmB,MAAM,eAAA,GAAiB,WAAW;AAAA,QAC5E,OAAO,uBAAuB,CAAC,EAAE,YAAA,MAAmB,YAAY,KAAK,MAAM,eAAe,CAAC,CAAC;AAAA,QAC5F,OAAO,gBAAgBC,qCAA4B,CAAC,YAAiC;AACnF,wBAAc,QAAQ;AACtB,iBAAO,eAAe;AAAA,WACtB,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAA;AAgBfC,UAAAA,YAAY,MAAM;AACQ;MAAA,CACzB;AAAA,IAAA,CACF;;;;;;;;;;;;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/ToolbarPlugin/InlineToolsPlugin.vue2.js

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

package/dist/cjs/components/basic/doc-editor/plugins/ToolbarPlugin/InlineToolsPlugin.vue2.js.map

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

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const ToolbarExtendPlugins = vue.reactive([]);
+const RegisterToolbarExtend = function(options) {
+  ToolbarExtendPlugins.push(options);
+  ToolbarExtendPlugins.sort((a, b) => a.sort < b.sort ? 1 : -1);
+};
+exports.RegisterToolbarExtend = RegisterToolbarExtend;
+exports.ToolbarExtendPlugins = ToolbarExtendPlugins;
+//# sourceMappingURL=defines.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"defines.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/defines.ts"],"sourcesContent":["\r\nimport { reactive } from 'vue'\r\n\r\n/**\r\n * 工具条扩展\r\n */\r\nexport type ToolbarExtendPlugin = {\r\n  icon: string;\r\n  text:string,\r\n  action:Function,\r\n  sort:number\r\n};\r\n\r\n// 插入的插件列表\r\nexport const ToolbarExtendPlugins = reactive<ToolbarExtendPlugin[]>([]);\r\n\r\n/**\r\n * 注册工具条的扩展\r\n * @param options \r\n */\r\nexport const RegisterToolbarExtend = function(options:ToolbarExtendPlugin){\r\n  ToolbarExtendPlugins.push(options);\r\n  ToolbarExtendPlugins.sort((a,b)=>a.sort<b.sort ? 1:-1);\r\n}\r\n"],"names":["reactive"],"mappings":";;;AAca,MAAA,uBAAuBA,IAAgC,SAAA,EAAE;AAMzD,MAAA,wBAAwB,SAAS,SAA4B;AACxE,uBAAqB,KAAK,OAAO;AACZ,uBAAA,KAAK,CAAC,GAAE,MAAI,EAAE,OAAK,EAAE,OAAO,IAAE,EAAE;AACvD;;;"}

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

@@ -27,6 +27,8 @@ require("../../lexical-vue/components/LexicalTypeaheadMenuPlugin/shared.js");
 const HtmlCodeTool_vue_vue_type_script_setup_true_lang = require("./HtmlCodeTool.vue.js");
 const FontStyleTool_vue_vue_type_script_setup_true_lang = require("./FontStyleTool.vue.js");
 const ContentStyleTool_vue_vue_type_script_setup_true_lang = require("./ContentStyleTool.vue.js");
+const defines = require("./defines.js");
+const commands = require("../commands.js");
 const LowPriority = 1;
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
@@ -35,6 +37,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const editor = useLexicalComposer.useLexicalComposer();
     const canUndo = vue.ref(false);
     const canRedo = vue.ref(false);
+    const viewDevice = vue.ref("pc");
     vue.onMounted(() => {
       const unregisterMergeListener = utils.mergeRegister(
         editor.registerCommand(
@@ -52,9 +55,18 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             return false;
           },
           LowPriority
+        ),
+        editor.registerCommand(
+          commands.DEVICE_VIEW_MODE,
+          (payload) => {
+            viewDevice.value = payload;
+            return false;
+          },
+          LowPriority
         )
       );
       vue.onUnmounted(() => {
+        defines.ToolbarExtendPlugins.length = 0;
         unregisterMergeListener();
       });
     });
@@ -101,16 +113,50 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         vue.createVNode(_component_el_divider, { direction: "vertical" }),
         vue.createVNode(FontStyleTool_vue_vue_type_script_setup_true_lang),
         vue.createVNode(_component_el_divider, { direction: "vertical" }),
+        vue.createVNode(_component_el_button_group, null, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_el_button, {
+              text: "",
+              class: vue.normalizeClass(`${viewDevice.value == "pc" ? "active" : ""}`),
+              onClick: _cache[2] || (_cache[2] = ($event) => vue.unref(editor).dispatchCommand(vue.unref(commands.DEVICE_VIEW_MODE), "pc"))
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_MKSvgIcon, { iconClass: "Platform" })
+              ]),
+              _: 1
+            }, 8, ["class"]),
+            vue.createVNode(_component_el_button, {
+              text: "",
+              class: vue.normalizeClass(`${viewDevice.value == "mobile" ? "active" : ""}`),
+              onClick: _cache[3] || (_cache[3] = ($event) => vue.unref(editor).dispatchCommand(vue.unref(commands.DEVICE_VIEW_MODE), "mobile"))
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_MKSvgIcon, { iconClass: "Iphone" })
+              ]),
+              _: 1
+            }, 8, ["class"])
+          ]),
+          _: 1
+        }),
+        vue.createVNode(_component_el_divider, { direction: "vertical" }),
         vue.createVNode(_component_el_dropdown, null, {
           dropdown: vue.withCtx(() => [
             vue.createVNode(_component_el_dropdown_menu, null, {
               default: vue.withCtx(() => [
-                vue.createVNode(_component_el_dropdown_item, null, {
-                  default: vue.withCtx(() => [
-                    vue.createTextVNode("Action 1")
-                  ]),
-                  _: 1
-                })
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(defines.ToolbarExtendPlugins), (item) => {
+                  return vue.openBlock(), vue.createBlock(_component_el_dropdown_item, {
+                    key: item,
+                    onClick: ($event) => item.action()
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(_component_MKSvgIcon, {
+                        iconClass: item.icon
+                      }, null, 8, ["iconClass"]),
+                      vue.createTextVNode(" " + vue.toDisplayString(item.text), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["onClick"]);
+                }), 128))
               ]),
               _: 1
             })