@maketribe/ms-app 3.2.24 → 3.2.26

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

@@ -3,117 +3,60 @@ const vue = require("vue");
 const lexicalVue = require("lexical-vue");
 const utils = require("@lexical/utils");
 const lexical = require("lexical");
-const defines = require("../ToolbarPlugin/defines.js");
 const composables = require("./composables.js");
 const ModuleBlockNode = require("./ModuleBlockNode.js");
-const ModuleContainerNode = require("./ModuleContainerNode.js");
+const ModuleGridNode = require("../GridPlugin/ModuleGridNode.js");
 const commands = require("./commands.js");
 const utils$1 = require("./utils.js");
 const utils$2 = require("../../../dynamic-form-panel/utils.js");
 require("../../core/index.js");
 const dialog = require("../../../dynamic-form-panel/dialog.js");
 require("element-plus");
-const elementModule = require("../../core/element-module.js");
+const elementBlock = require("../../core/element-block.js");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   setup(__props) {
     const editor = lexicalVue.useLexicalComposer();
-    defines.registerDocEditorToolbarExtend({
-      icon: "Grid",
-      text: "模块",
-      action: async () => {
-        editor.dispatchCommand(ModuleContainerNode.INSERT_MODULECONTAINER_COMMAND, {});
-      },
-      sort: 9
-    });
-    const isSelectContainer = vue.ref(false);
-    const { isSelected, curSelectKey, curSelectPos, updateActiveViewState } = elementModule.useElementModule((el) => {
-      var modelEl = utils$1.findModuleNodeEl(el);
-      var moduleContainerEl = utils$1.findModuleContainerEl(el);
-      if (modelEl && moduleContainerEl) {
-        isSelectContainer.value = false;
-        return modelEl;
-      } else if (moduleContainerEl) {
-        isSelectContainer.value = true;
-        return moduleContainerEl;
-      }
-      isSelectContainer.value = false;
-      return null;
-    }, (selection) => {
+    const { isSelected, curSelectKey, curSelectPos } = elementBlock.useElementBlockSelection(utils$1.findModuleNodeEl, () => {
       const node = lexical.$getNodeByKey(curSelectKey.value);
-      if (node != null) {
-        const toolbarList = [];
-        if (ModuleContainerNode.$isModuleContainerNode(node)) {
-          toolbarList.push(...[
-            {
-              title: `编辑模块容器`,
-              icon: "Edit",
-              action: async () => {
-                var result = await dialog.showDynamicFormDialoger("模块容器", [
-                  { name: "class", title: "标识类名", component: "el-input", props: { clearable: true }, defaultValue: "" }
-                ], node.getAttrs());
-                editor.update(() => {
-                  node.setAttrs(result);
-                  updateActiveViewState(null);
-                });
-              }
-            },
-            {
-              title: "添加模块",
-              icon: "Plus",
-              action: async () => {
-                const result = await utils$1.showModuleSelectDialog();
-                const defaultData = utils$2.createDefaultFormData(result.options);
-                editor.dispatchCommand(commands.INSERT_MODULE_COMMAND, { name: result.name, data: defaultData });
-                updateActiveViewState(null);
-              }
+      if (ModuleBlockNode.$isModuleBlockNode(node)) {
+        const { module: module2 } = composables.useModule(node.__name);
+        return [
+          {
+            title: `编辑【${module2.title}】`,
+            icon: "Edit",
+            action: async () => {
+              var result = await dialog.showDynamicFormDialoger(module2.title, module2.options, node.__data);
+              editor.update(() => {
+                node.setContent(result);
+              });
+            }
+          },
+          {
+            title: `插入【${module2.title}】之前`,
+            icon: "BottomLeft",
+            action: async () => {
+              const result = await utils$1.showModuleSelectDialog();
+              const defaultData = utils$2.createDefaultFormData(result.options);
+              editor.dispatchCommand(commands.INSERT_MODULE_COMMAND, { name: result.name, data: defaultData });
+              editor.update(() => {
+                node.insertBefore(ModuleBlockNode.$createModuleBlockNode(result.name, defaultData));
+              });
             }
-          ]);
-        } else if (ModuleBlockNode.$isModuleBlockNode(node)) {
-          const { module: module2 } = composables.useModule(node.__name);
-          toolbarList.push(...[
-            {
-              title: `编辑【${module2.title}】`,
-              icon: "Edit",
-              action: async () => {
-                var result = await dialog.showDynamicFormDialoger(module2.title, module2.options, node.__data);
-                editor.update(() => {
-                  node.setContent(result);
-                  updateActiveViewState(null);
-                });
-              }
-            },
-            {
-              title: `插入【${module2.title}】之前`,
-              icon: "BottomLeft",
-              action: async () => {
-                const result = await utils$1.showModuleSelectDialog();
-                const defaultData = utils$2.createDefaultFormData(result.options);
-                editor.dispatchCommand(commands.INSERT_MODULE_COMMAND, { name: result.name, data: defaultData });
-                updateActiveViewState(null);
-                editor.update(() => {
-                  node.insertBefore(ModuleBlockNode.$createModuleBlockNode(result.name, defaultData));
-                  updateActiveViewState(null);
-                });
-              }
-            },
-            {
-              title: `插入【${module2.title}】之后`,
-              icon: "BottomRight",
-              action: async () => {
-                const result = await utils$1.showModuleSelectDialog();
-                const defaultData = utils$2.createDefaultFormData(result.options);
-                editor.dispatchCommand(commands.INSERT_MODULE_COMMAND, { name: result.name, data: defaultData });
-                updateActiveViewState(null);
-                editor.update(() => {
-                  node.insertAfter(ModuleBlockNode.$createModuleBlockNode(result.name, defaultData));
-                  updateActiveViewState(null);
-                });
-              }
+          },
+          {
+            title: `插入【${module2.title}】之后`,
+            icon: "BottomRight",
+            action: async () => {
+              const result = await utils$1.showModuleSelectDialog();
+              const defaultData = utils$2.createDefaultFormData(result.options);
+              editor.dispatchCommand(commands.INSERT_MODULE_COMMAND, { name: result.name, data: defaultData });
+              editor.update(() => {
+                node.insertAfter(ModuleBlockNode.$createModuleBlockNode(result.name, defaultData));
+              });
             }
-          ]);
-        }
-        return toolbarList;
+          }
+        ];
       }
       return null;
     });
@@ -122,18 +65,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         throw new Error("ModuleBlockPlugin: 未注册模块模版节点！");
       }
       const unregister = utils.mergeRegister(
-        // 插入模块容器
-        editor.registerCommand(ModuleContainerNode.INSERT_MODULECONTAINER_COMMAND, (payload) => {
-          utils.$insertNodeToNearestRoot(ModuleContainerNode.$createModuleContainerNode(payload));
-          return true;
-        }, lexical.COMMAND_PRIORITY_EDITOR),
         // 插入模块
         editor.registerCommand(commands.INSERT_MODULE_COMMAND, (payload) => {
-          if (curSelectKey.value) {
-            const node = lexical.$getNodeByKey(curSelectKey.value);
-            if (ModuleContainerNode.$isModuleContainerNode(node)) {
-              node.append(ModuleBlockNode.$createModuleBlockNode(payload.name, payload.data));
-            }
+          const selection = lexical.$getSelection();
+          const node = lexical.$isNodeSelection(selection) ? selection == null ? void 0 : selection.getNodes()[0] : null;
+          if (ModuleGridNode.$isModuleGridNode(node)) {
+            node.append(ModuleBlockNode.$createModuleBlockNode(payload.name, payload.data));
           }
           return true;
         }, lexical.COMMAND_PRIORITY_EDITOR)
@@ -143,9 +80,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     return (_ctx, _cache) => {
       return vue.unref(isSelected) ? (vue.openBlock(), vue.createElementBlock("div", {
         key: 0,
-        class: vue.normalizeClass(["mk-doc-active-mark", { box: isSelectContainer.value }]),
+        class: "mk-doc-active-mark",
         style: vue.normalizeStyle(vue.unref(curSelectPos))
-      }, null, 6)) : vue.createCommentVNode("", true);
+      }, null, 4)) : vue.createCommentVNode("", true);
     };
   }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { useLexicalComposer } from 'lexical-vue'\r\nimport { $insertNodeToNearestRoot,mergeRegister } from '@lexical/utils'\r\nimport { \r\n  COMMAND_PRIORITY_EDITOR,COMMAND_PRIORITY_LOW,CLICK_COMMAND, $getSelection,$isNodeSelection, $getNodeByKey\r\n} from 'lexical'\r\nimport { onMounted, onUnmounted,ref } from 'vue'\r\nimport { registerDocEditorToolbarExtend,type ToolbarExtendPlugin } from \"../ToolbarPlugin/defines\"\r\nimport { ModuleType,useModule } from \"./composables\"\r\nimport { ModuleBlockNode,$createModuleBlockNode,$isModuleBlockNode } from \"./ModuleBlockNode\"\r\nimport { type ModuleContainerAttrType,INSERT_MODULECONTAINER_COMMAND,$createModuleContainerNode,$isModuleContainerNode } from \"./ModuleContainerNode\"\r\nimport { INSERT_MODULE_COMMAND,type ModulePropType } from \"./commands\"\r\nimport { showModuleSelectDialog,findModuleNodeEl,findModuleContainerEl } from \"./utils\"\r\nimport { createDefaultFormData } from \"../../../dynamic-form-panel/utils\"\r\nimport {  useElementModule } from '../../core'\r\nimport { showDynamicFormDialoger } from \"../../../dynamic-form-panel\"\r\n\r\n// 编辑器\r\nconst editor = useLexicalComposer()\r\n\r\n// 注册到工具条\r\nregisterDocEditorToolbarExtend({\r\n  icon:\"Grid\",\r\n  text:\"模块\",\r\n  action:async ()=>{\r\n    // 插入\r\n    editor.dispatchCommand(INSERT_MODULECONTAINER_COMMAND,{ } as ModuleContainerAttrType)\r\n \r\n  },\r\n  sort:9\r\n} as ToolbarExtendPlugin)\r\n\r\n// 是否是选中模块容器\r\nconst isSelectContainer = ref(false);\r\n\r\n// 使用元素模块 集成了模块选中删除以及工具条\r\nconst { isSelected, curSelectKey, curSelectPos,updateActiveViewState } = useElementModule(el=>{\r\n  \r\n  var modelEl = findModuleNodeEl(el);\r\n  var moduleContainerEl = findModuleContainerEl(el);\r\n\r\n\r\n  if(modelEl && moduleContainerEl){\r\n    isSelectContainer.value = false;\r\n    \r\n    return modelEl;\r\n  }\r\n  else if(moduleContainerEl){\r\n\r\n    isSelectContainer.value = true;\r\n\r\n    return moduleContainerEl;\r\n  }\r\n\r\n  isSelectContainer.value = false;\r\n  return null;\r\n\r\n},(selection)=>{\r\n  \r\n  const node = $getNodeByKey(curSelectKey.value)\r\n\r\n  if(node != null){\r\n\r\n    // 工具条\r\n    const toolbarList =  [];\r\n\r\n    // 模块容器\r\n    if($isModuleContainerNode(node)){\r\n      toolbarList.push(...[\r\n      {\r\n          title:`编辑模块容器`,icon:\"Edit\",action:async ()=>{\r\n\r\n            var result = await showDynamicFormDialoger(\"模块容器\",[\r\n            { name:\"class\", title:\"标识类名\", component:\"el-input\",  props:{ clearable:true }, defaultValue:\"\" }\r\n            ],node.getAttrs())\r\n      \r\n            editor.update(() => {\r\n              node.setAttrs(result)\r\n              updateActiveViewState(null);\r\n            })\r\n\r\n          } \r\n        },\r\n        {\r\n          title:\"添加模块\",icon:\"Plus\",action:async ()=>{\r\n            // 打开模块面板\r\n            const result = (await showModuleSelectDialog()) as ModuleType;\r\n            const defaultData = createDefaultFormData(result.options);\r\n            // 插入模块\r\n            editor.dispatchCommand(INSERT_MODULE_COMMAND,{ name:result.name,data:defaultData})\r\n            updateActiveViewState(null);\r\n          } \r\n        }\r\n      ])\r\n    }\r\n    // 选中模块\r\n    else if($isModuleBlockNode(node)){\r\n\r\n      const { module } = useModule(node.__name);\r\n\r\n      toolbarList.push(...[\r\n        {\r\n          title:`编辑【${module.title}】`,icon:\"Edit\",action:async ()=>{\r\n\r\n            var result = await showDynamicFormDialoger(module.title,module.options,node.__data)\r\n      \r\n            editor.update(() => {\r\n              node.setContent(result)\r\n              updateActiveViewState(null);\r\n            })\r\n\r\n          } \r\n        },\r\n        {\r\n          title:`插入【${module.title}】之前`,icon:\"BottomLeft\",action:async ()=>{\r\n\r\n            // 打开模块面板\r\n            const result = (await showModuleSelectDialog()) as ModuleType;\r\n            const defaultData = createDefaultFormData(result.options);\r\n            // 插入模块\r\n            editor.dispatchCommand(INSERT_MODULE_COMMAND,{ name:result.name,data:defaultData})\r\n            updateActiveViewState(null);\r\n      \r\n            editor.update(() => {\r\n              node.insertBefore($createModuleBlockNode(result.name,defaultData))\r\n              updateActiveViewState(null);\r\n            })\r\n\r\n          } \r\n        },\r\n        {\r\n          title:`插入【${module.title}】之后`,icon:\"BottomRight\",action:async ()=>{\r\n\r\n            // 打开模块面板\r\n            const result = (await showModuleSelectDialog()) as ModuleType;\r\n            const defaultData = createDefaultFormData(result.options);\r\n            // 插入模块\r\n            editor.dispatchCommand(INSERT_MODULE_COMMAND,{ name:result.name,data:defaultData})\r\n            updateActiveViewState(null);\r\n      \r\n            editor.update(() => {\r\n              node.insertAfter($createModuleBlockNode(result.name,defaultData))\r\n              updateActiveViewState(null);\r\n            })\r\n\r\n          } \r\n        }\r\n      ])\r\n    }\r\n\r\n    return toolbarList;\r\n  }\r\n\r\n  return null;\r\n})\r\n\r\n\r\nonMounted(() => {\r\n\r\n  if (!editor.hasNodes([ModuleBlockNode])){\r\n    throw new Error('ModuleBlockPlugin: 未注册模块模版节点！')\r\n  }\r\n\r\n  // 注册指令\r\n  const unregister = mergeRegister(\r\n    // 插入模块容器\r\n    editor.registerCommand<ModuleContainerAttrType>(INSERT_MODULECONTAINER_COMMAND,(payload) => { \r\n      $insertNodeToNearestRoot($createModuleContainerNode(payload))\r\n      return true\r\n    },COMMAND_PRIORITY_EDITOR),\r\n    // 插入模块\r\n    editor.registerCommand<ModulePropType>(INSERT_MODULE_COMMAND,(payload) => {\r\n      \r\n      if(curSelectKey.value){\r\n\r\n        const node = $getNodeByKey(curSelectKey.value);\r\n\r\n        if($isModuleContainerNode(node)){\r\n          node.append($createModuleBlockNode(payload.name,payload.data))\r\n        }\r\n      }\r\n     \r\n      return true\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  <div class=\"mk-doc-active-mark\" :class=\"{box:isSelectContainer}\" v-if=\"isSelected\" :style=\"curSelectPos\">\r\n    \r\n  </div>\r\n</template>\r\n"],"names":["useLexicalComposer","registerDocEditorToolbarExtend","INSERT_MODULECONTAINER_COMMAND","ref","useElementModule","findModuleNodeEl","findModuleContainerEl","$getNodeByKey","$isModuleContainerNode","showDynamicFormDialoger","showModuleSelectDialog","createDefaultFormData","INSERT_MODULE_COMMAND","$isModuleBlockNode","module","useModule","$createModuleBlockNode","onMounted","ModuleBlockNode","mergeRegister","$insertNodeToNearestRoot","$createModuleContainerNode","COMMAND_PRIORITY_EDITOR","onUnmounted"],"mappings":"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"}
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { useLexicalComposer } from 'lexical-vue'\r\nimport { mergeRegister } from '@lexical/utils'\r\nimport { \r\n  COMMAND_PRIORITY_EDITOR,$getNodeByKey,$getSelection,$isNodeSelection\r\n} from 'lexical'\r\nimport { onMounted, onUnmounted,ref } from 'vue'\r\nimport { ModuleType,useModule } from \"./composables\"\r\nimport { ModuleBlockNode,$createModuleBlockNode,$isModuleBlockNode } from \"./ModuleBlockNode\"\r\nimport { $isModuleGridNode } from \"../GridPlugin/ModuleGridNode\"\r\nimport { INSERT_MODULE_COMMAND,type ModulePropType } from \"./commands\"\r\nimport { showModuleSelectDialog,findModuleNodeEl } from \"./utils\"\r\nimport { createDefaultFormData } from \"../../../dynamic-form-panel/utils\"\r\nimport {  useElementBlockSelection } from '../../core'\r\nimport { showDynamicFormDialoger } from \"../../../dynamic-form-panel\"\r\n\r\n// 编辑器\r\nconst editor = useLexicalComposer()\r\n\r\n// 使用元素模块 集成了模块选中删除以及工具条\r\nconst { isSelected, curSelectKey, curSelectPos } = useElementBlockSelection(findModuleNodeEl,()=>{\r\n  \r\n  const node = $getNodeByKey(curSelectKey.value)\r\n\r\n  if($isModuleBlockNode(node)){\r\n\r\n    const { module } = useModule(node.__name);\r\n\r\n    return [\r\n      {\r\n        title:`编辑【${module.title}】`,icon:\"Edit\",action:async ()=>{\r\n\r\n          var result = await showDynamicFormDialoger(module.title,module.options,node.__data)\r\n\r\n          editor.update(() => {\r\n            node.setContent(result)\r\n          })\r\n\r\n        } \r\n      },\r\n      {\r\n        title:`插入【${module.title}】之前`,icon:\"BottomLeft\",action:async ()=>{\r\n\r\n          // 打开模块面板\r\n          const result = (await showModuleSelectDialog()) as ModuleType;\r\n          const defaultData = createDefaultFormData(result.options);\r\n          // 插入模块\r\n          editor.dispatchCommand(INSERT_MODULE_COMMAND,{ name:result.name,data:defaultData})\r\n\r\n          editor.update(() => {\r\n            node.insertBefore($createModuleBlockNode(result.name,defaultData))\r\n          })\r\n\r\n        } \r\n      },\r\n      {\r\n        title:`插入【${module.title}】之后`,icon:\"BottomRight\",action:async ()=>{\r\n\r\n          // 打开模块面板\r\n          const result = (await showModuleSelectDialog()) as ModuleType;\r\n          const defaultData = createDefaultFormData(result.options);\r\n          // 插入模块\r\n          editor.dispatchCommand(INSERT_MODULE_COMMAND,{ name:result.name,data:defaultData})\r\n\r\n          editor.update(() => {\r\n            node.insertAfter($createModuleBlockNode(result.name,defaultData))\r\n          })\r\n\r\n        } \r\n      }\r\n    ]\r\n  }\r\n\r\n  return null;\r\n})\r\n\r\n\r\nonMounted(() => {\r\n\r\n  if (!editor.hasNodes([ModuleBlockNode])){\r\n    throw new Error('ModuleBlockPlugin: 未注册模块模版节点！')\r\n  }\r\n\r\n  // 注册指令\r\n  const unregister = mergeRegister(\r\n\r\n    // 插入模块\r\n    editor.registerCommand<ModulePropType>(INSERT_MODULE_COMMAND,(payload) => {\r\n\r\n      const selection = $getSelection()\r\n      const node = $isNodeSelection(selection) ? selection?.getNodes()[0] : null;\r\n\r\n      if($isModuleGridNode(node)){\r\n        node.append($createModuleBlockNode(payload.name,payload.data))\r\n      }\r\n     \r\n      return true\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  <div class=\"mk-doc-active-mark\" v-if=\"isSelected\" :style=\"curSelectPos\">\r\n    \r\n  </div>\r\n</template>\r\n"],"names":["useLexicalComposer","useElementBlockSelection","findModuleNodeEl","$getNodeByKey","$isModuleBlockNode","module","useModule","showDynamicFormDialoger","showModuleSelectDialog","createDefaultFormData","INSERT_MODULE_COMMAND","$createModuleBlockNode","onMounted","ModuleBlockNode","mergeRegister","$getSelection","$isNodeSelection","$isModuleGridNode","COMMAND_PRIORITY_EDITOR","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,UAAM,SAASA,WAAAA;AAGf,UAAM,EAAE,YAAY,cAAc,iBAAiBC,aAAAA,yBAAyBC,QAAAA,kBAAiB,MAAI;AAEzF,YAAA,OAAOC,QAAAA,cAAc,aAAa,KAAK;AAE1C,UAAAC,gBAAAA,mBAAmB,IAAI,GAAE;AAE1B,cAAM,EAAE,QAAAC,QAAW,IAAAC,YAAA,UAAU,KAAK,MAAM;AAEjC,eAAA;AAAA,UACL;AAAA,YACE,OAAM,MAAMD,QAAO,KAAK;AAAA,YAAI,MAAK;AAAA,YAAO,QAAO,YAAU;AAEnD,kBAAA,SAAS,MAAME,OAAwB,wBAAAF,QAAO,OAAMA,QAAO,SAAQ,KAAK,MAAM;AAElF,qBAAO,OAAO,MAAM;AAClB,qBAAK,WAAW,MAAM;AAAA,cAAA,CACvB;AAAA,YAEH;AAAA,UACF;AAAA,UACA;AAAA,YACE,OAAM,MAAMA,QAAO,KAAK;AAAA,YAAM,MAAK;AAAA,YAAa,QAAO,YAAU;AAGzD,oBAAA,SAAU,MAAMG,QAAAA;AAChB,oBAAA,cAAcC,QAAAA,sBAAsB,OAAO,OAAO;AAEjD,qBAAA,gBAAgBC,gCAAsB,EAAE,MAAK,OAAO,MAAK,MAAK,aAAY;AAEjF,qBAAO,OAAO,MAAM;AAClB,qBAAK,aAAaC,gBAAA,uBAAuB,OAAO,MAAK,WAAW,CAAC;AAAA,cAAA,CAClE;AAAA,YAEH;AAAA,UACF;AAAA,UACA;AAAA,YACE,OAAM,MAAMN,QAAO,KAAK;AAAA,YAAM,MAAK;AAAA,YAAc,QAAO,YAAU;AAG1D,oBAAA,SAAU,MAAMG,QAAAA;AAChB,oBAAA,cAAcC,QAAAA,sBAAsB,OAAO,OAAO;AAEjD,qBAAA,gBAAgBC,gCAAsB,EAAE,MAAK,OAAO,MAAK,MAAK,aAAY;AAEjF,qBAAO,OAAO,MAAM;AAClB,qBAAK,YAAYC,gBAAA,uBAAuB,OAAO,MAAK,WAAW,CAAC;AAAA,cAAA,CACjE;AAAA,YAEH;AAAA,UACF;AAAA,QAAA;AAAA,MAEJ;AAEO,aAAA;AAAA,IAAA,CACR;AAGDC,QAAAA,UAAU,MAAM;AAEd,UAAI,CAAC,OAAO,SAAS,CAACC,gBAAAA,eAAe,CAAC,GAAE;AAChC,cAAA,IAAI,MAAM,+BAA+B;AAAA,MACjD;AAGA,YAAM,aAAaC,MAAA;AAAA;AAAA,QAGjB,OAAO,gBAAgCJ,gCAAsB,CAAC,YAAY;AAExE,gBAAM,YAAYK,QAAAA;AACZ,gBAAA,OAAOC,yBAAiB,SAAS,IAAI,uCAAW,WAAW,KAAK;AAEnE,cAAAC,eAAAA,kBAAkB,IAAI,GAAE;AACzB,iBAAK,OAAON,uCAAuB,QAAQ,MAAK,QAAQ,IAAI,CAAC;AAAA,UAC/D;AAEO,iBAAA;AAAA,WACPO,+BAAuB;AAAA,MAAA;AAIfC,sBAAA,MAAM,YAAY;AAAA,IAAA,CAC/B;;;;;;;;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/ModulePlugin/utils.js

@@ -6,7 +6,6 @@ const elementPlus = require("element-plus");
 const elIcons = require("@element-plus/icons-vue");
 const composables = require("./composables.js");
 const ModuleBlockNode = require("./ModuleBlockNode.js");
-const ModuleContainerNode = require("./ModuleContainerNode.js");
 const showModuleSelectDialog = async () => {
   return new Promise((resolve) => {
     const Modules = composables.useModules();
@@ -76,6 +75,7 @@ const showModuleSelectDialog = async () => {
     });
   });
 };
+const ElAttrList = ["src", "alt", "poster", "href", "_target"];
 const createHtml = (template, data) => {
   const parser = new DOMParser();
   const element = parser.parseFromString(template, "text/html");
@@ -85,7 +85,7 @@ const createHtml = (template, data) => {
       const el = list[i];
       const val = data[key];
       if (el.nodeType != 3) {
-        if (["src", "alt", "poster"].filter((attr) => el.hasAttribute(`data-${key}-${attr}`)).some((attr) => el.setAttribute(attr, val))) {
+        if (ElAttrList.filter((attr) => el.hasAttribute(`data-${key}-${attr}`)).some((attr) => el.setAttribute(attr, val))) {
           break;
         } else if (el.hasAttribute(`data-${key}`)) {
           el.textContent = val;
@@ -112,7 +112,7 @@ const createModuleMetaData = (html, options) => {
       const el = list[i];
       const val = "";
       if (el.nodeType != 3) {
-        if (["src", "alt", "poster"].filter((attr) => el.hasAttribute(`data-${item.name}-${attr}`)).some((attr) => data[item.name] = el.getAttribute(attr))) {
+        if (ElAttrList.filter((attr) => el.hasAttribute(`data-${item.name}-${attr}`)).some((attr) => data[item.name] = el.getAttribute(attr))) {
           break;
         } else if (el.hasAttribute(`data-${item.name}`)) {
           data[item.name] = el.textContent;
@@ -132,16 +132,6 @@ const createModuleMetaData = (html, options) => {
     data
   };
 };
-const findModuleContainerEl = (element) => {
-  var el = element;
-  if (el.classList.contains(ModuleContainerNode.ModuleContainerNode.getMarkClassName())) {
-    return el;
-  }
-  while (el != null && !el.classList.contains(ModuleContainerNode.ModuleContainerNode.getMarkClassName())) {
-    el = el.parentElement;
-  }
-  return el;
-};
 const findModuleNodeEl = (element) => {
   var el = element;
   if (el.classList.contains(ModuleBlockNode.ModuleBlockNode.getMarkClassName())) {
@@ -154,7 +144,6 @@ const findModuleNodeEl = (element) => {
 };
 exports.createHtml = createHtml;
 exports.createModuleMetaData = createModuleMetaData;
-exports.findModuleContainerEl = findModuleContainerEl;
 exports.findModuleNodeEl = findModuleNodeEl;
 exports.showModuleSelectDialog = showModuleSelectDialog;
 //# sourceMappingURL=utils.js.map

package/dist/cjs/components/basic/doc-editor/plugins/ModulePlugin/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/utils.tsx"],"sourcesContent":["\r\nimport { Fragment,ref,unref,resolveComponent,h,reactive } from 'vue'\r\nimport { Dialoger } from '@maketribe/dm'\r\nimport {  ElButton,ElCollapse,ElCollapseItem,ElInput } from \"element-plus\";\r\nimport { Search } from \"@element-plus/icons-vue\";\r\nimport { useModules,type ModuleType } from \"./composables\"\r\nimport { DynamicFormItemType } from \"../../../dynamic-form-panel\"\r\n\r\nimport { ModuleBlockNode,$createModuleBlockNode,$isModuleBlockNode } from \"./ModuleBlockNode\"\r\nimport { ModuleContainerNode} from \"./ModuleContainerNode\"\r\n\r\n/**\r\n * 显示模块模版选择\r\n * @returns \r\n */\r\nexport const showModuleSelectDialog = async  () => {\r\n\r\n  return new Promise(resolve => {\r\n\r\n    const Modules = useModules();\r\n    const selectOption = ref<ModuleType|null>(null);\r\n    const searchInputValue = ref(\"\");\r\n\r\n    // 取消编辑\r\n    const handleCancelClick = () => {\r\n      dialogInstance.destroy();\r\n    };\r\n\r\n    // 确认编辑\r\n    const handleConfirmClick = () => {\r\n      dialogInstance.destroy();\r\n      resolve({...selectOption.value as any});\r\n    };\r\n\r\n    // 点击块\r\n    const clickHandle = (item:any)=>{\r\n      selectOption.value = item;\r\n    }\r\n\r\n    const dialogInstance = Dialoger.customRender({\r\n      title: \"模版选择\",\r\n      class: \"mk-doc-editor__module-template_dialog\",\r\n      width: \"700px\",\r\n      onClose: () => {\r\n        dialogInstance.destroy();\r\n      },\r\n      body: () => {\r\n\r\n        // 循环体\r\n        const templateListComponent = Modules.filter(item=>{\r\n          if(searchInputValue.value){\r\n            return item.name.indexOf(searchInputValue.value) >= 0 || item.title.indexOf(searchInputValue.value) >= 0\r\n          }\r\n          else{\r\n            return true;\r\n          }\r\n        }).map(item=>{\r\n\r\n          return <div \r\n          class={`mk-doc-editor__module-template_dialog_list-item ${(item.cover ? 'cover':'')} ${(selectOption.value?.name == item.name ? 'active':'')}`} \r\n          onClick={()=>clickHandle(item)}>\r\n            {item.cover ?  <img src={item.cover}  /> :null}\r\n            <div class=\"mk-doc-editor__module-template_dialog_list-item_title\">{item.title}</div>\r\n          </div>\r\n        })\r\n\r\n        return <div class=\"mk-doc-editor__module-template_dialog_warp\">\r\n          <ElInput v-model={searchInputValue.value} prefix-icon={Search} clearable={true} />\r\n          <div class=\"mk-doc-editor__module-template_dialog_list-body\">\r\n            {templateListComponent}\r\n          </div>\r\n        </div>\r\n      },\r\n      footer: () => {\r\n        return <Fragment>\r\n          <ElButton onClick={handleCancelClick}>取消</ElButton>\r\n          <ElButton type=\"primary\" onClick={handleConfirmClick} disabled={!selectOption.value}>\r\n            确定\r\n          </ElButton>\r\n      </Fragment>\r\n      },\r\n    });\r\n  });\r\n}\r\n\r\n/**\r\n * 创建html\r\n * @param template \r\n * @param data \r\n */\r\nexport const createHtml = (template:string,data:any)=>{\r\n\r\n  const parser = new DOMParser();\r\n  const element = parser.parseFromString(template,\"text/html\")\r\n  const list = [element.body];\r\n\r\n  Object.keys(data).forEach(key=>{\r\n\r\n    for(let i=0;i<list.length;i++){\r\n\r\n      const el = list[i];\r\n      const val = data[key] as any;\r\n  \r\n      // 忽略文本节点\r\n      if(el.nodeType != 3){\r\n        // 属性解析\r\n        if( [\"src\",\"alt\",\"poster\"].filter(attr=>el.hasAttribute(`data-${key}-${attr}`)).\r\n        some(attr=> el.setAttribute(attr,val))){  break; }\r\n        // 文本解析\r\n        else if(el.hasAttribute(`data-${key}`)){\r\n          el.textContent = val;\r\n          break;\r\n        }\r\n        else if(el.hasAttribute(`data-${key}-html`)){\r\n          el.innerHTML = val;\r\n          break;\r\n        } \r\n      }\r\n\r\n      // 广域递归\r\n      if(el.childNodes.length){\r\n        el.childNodes.forEach((sub:any)=>list.push(sub))\r\n      }\r\n    }\r\n  })\r\n\r\n  return element.body.innerHTML.replaceAll(/[\\r|\\n|\\r\\n]+/g,\"\")\r\n}\r\n\r\n/**\r\n * 创建html\r\n * @param template \r\n * @param data \r\n */\r\nexport const createModuleMetaData = (html:string,options:DynamicFormItemType[])=>{\r\n\r\n\r\n  const parser = new DOMParser();\r\n  const element = parser.parseFromString(html,\"text/html\")\r\n  const list = [element.body];\r\n  const data:any = {};\r\n  // const template = element.body.innerHTML;\r\n\r\n  options.forEach(item=>{\r\n\r\n    for(let i=0;i<list.length;i++){\r\n\r\n      const el = list[i];\r\n      const val = \"\";\r\n\r\n      // 忽略文本节点\r\n      if(el.nodeType != 3){\r\n        // 属性解析\r\n        if( [\"src\",\"alt\",\"poster\"].filter(attr=>el.hasAttribute(`data-${item.name}-${attr}`)).\r\n        some(attr=> data[item.name] = el.getAttribute(attr))){  break; }\r\n        // 文本解析\r\n        else if(el.hasAttribute(`data-${item.name}`)){\r\n          data[item.name] = el.textContent;\r\n          break;\r\n        }\r\n        // html 解析\r\n        else if(el.hasAttribute(`data-${item.name}-html`)){\r\n          data[item.name] = el.innerHTML;\r\n          break;\r\n        } \r\n      }\r\n\r\n      // 广域递归\r\n      if(el.childNodes.length){\r\n        el.childNodes.forEach((sub:any)=>list.push(sub))\r\n      }\r\n\r\n      data[item.name] = val;\r\n    }\r\n  })\r\n\r\n  return { data }\r\n}\r\n\r\n/**\r\n * 查找容器节点\r\n * @param element \r\n * @returns \r\n */\r\nexport const findModuleContainerEl = (element:HTMLElement):HTMLElement|null => {\r\n\r\n    var el:HTMLElement|null = element\r\n\r\n    if(el.classList.contains(ModuleContainerNode.getMarkClassName())){\r\n      return el;\r\n    }\r\n\r\n    while (el != null && !el.classList.contains(ModuleContainerNode.getMarkClassName())) {\r\n      el = el.parentElement;\r\n    }\r\n\r\n  return el\r\n}\r\n\r\n/**\r\n * 查找模块节点\r\n * @param element \r\n * @returns \r\n */\r\nexport const findModuleNodeEl = (element:HTMLElement):HTMLElement|null => {\r\n\r\n  var el:HTMLElement|null = element\r\n\r\n  if(el.classList.contains(ModuleBlockNode.getMarkClassName())){\r\n    return el;\r\n  }\r\n\r\n  while (el != null && !el.classList.contains(ModuleBlockNode.getMarkClassName())) {\r\n    el = el.parentElement;\r\n  }\r\n\r\nreturn el\r\n}\r\n\r\n// 测试代码\r\n// console.log(createHtml(\"<div data-title>111</div>\",{title:\"asdasdasdasd\"}))\r\n// console.log(createModuleMetaData(\"<div data-title>asdasdasd<img  data-path-src src='aaa.jpg'></div>\",[\r\n//   { name:\"title\", title:\"标题\", component:\"el-input\", props:{ clearable:true }, defaultValue:\"测试标题\" },\r\n//   { name:\"path\", title:\"标题\", component:\"el-input\", props:{ clearable:true }, defaultValue:\"111\" }\r\n// ]))\r\n"],"names":["showModuleSelectDialog","Promise","resolve","Modules","useModules","selectOption","ref","searchInputValue","handleCancelClick","dialogInstance","destroy","handleConfirmClick","value","clickHandle","item","Dialoger","customRender","title","class","width","onClose","body","templateListComponent","filter","name","indexOf","map","_createVNode","cover","onClick","ElInput","$event","Search","footer","_Fragment","ElButton","default","_createTextVNode","createHtml","template","data","parser","DOMParser","element","parseFromString","list","Object","keys","forEach","key","i","length","el","val","nodeType","attr","hasAttribute","some","setAttribute","textContent","innerHTML","childNodes","sub","push","replaceAll","createModuleMetaData","html","options","getAttribute","findModuleContainerEl","classList","contains","ModuleContainerNode","getMarkClassName","parentElement","findModuleNodeEl","ModuleBlockNode"],"mappings":";;;;;;;;;AAeaA,MAAAA,yBAAyB,YAAa;AAEjD,SAAO,IAAIC,QAAQC,aAAW;AAE5B,UAAMC,UAAUC,YAAAA;AAChB,UAAMC,eAAeC,QAAqB,IAAI;AAC9C,UAAMC,mBAAmBD,QAAI,EAAE;AAG/B,UAAME,oBAAoBA,MAAM;AAC9BC,qBAAeC,QAAO;AAAA;AAIxB,UAAMC,qBAAqBA,MAAM;AAC/BF,qBAAeC,QAAO;AACtBR,cAAQ;AAAA,QAAC,GAAGG,aAAaO;AAAAA,MAAY,CAAC;AAAA;AAIxC,UAAMC,cAAeC,UAAW;AAC9BT,mBAAaO,QAAQE;AAAAA;AAGvB,UAAML,iBAAiBM,GAAQ,SAACC,aAAa;AAAA,MAC3CC,OAAO;AAAA,MACPC,OAAO;AAAA,MACPC,OAAO;AAAA,MACPC,SAASA,MAAM;AACbX,uBAAeC,QAAO;AAAA,MACvB;AAAA,MACDW,MAAMA,MAAM;AAGV,cAAMC,wBAAwBnB,QAAQoB,OAAOT,UAAM;AACjD,cAAGP,iBAAiBK,OAAM;AACxB,mBAAOE,KAAKU,KAAKC,QAAQlB,iBAAiBK,KAAK,KAAK,KAAKE,KAAKG,MAAMQ,QAAQlB,iBAAiBK,KAAK,KAAK;AAAA,UACzG,OACI;AACF,mBAAO;AAAA,UACT;AAAA,QACF,CAAC,EAAEc,IAAIZ,UAAM;;AAEX,iBAAAa,IAAAA,YAAA,OAAA;AAAA,YAAA,SACO,mDAAoDb,KAAKc,QAAQ,UAAQ,EAAE,MAAMvB,kBAAaO,UAAbP,mBAAoBmB,SAAQV,KAAKU,OAAO,WAAS,EAAE;AAAA,YAAG,WACrIK,MAAIhB,YAAYC,IAAI;AAAA,UAAC,GAAA,CAC3BA,KAAKc,QAAKD,IAAAA,YAAA,OAAA;AAAA,YAAA,OAAcb,KAAKc;AAAAA,UAAY,GAAA,IAAA,IAAA,MAAID,IAAAA,YAAA,OAAA;AAAA,YAAA,SAAA;AAAA,UACsBb,GAAAA,CAAAA,KAAKG,KAAK,CAAA,CAAA,CAAA;AAAA,QAElF,CAAC;AAED,eAAAU,IAAAA,YAAA,OAAA;AAAA,UAAA,SAAA;AAAA,WAAAA,CAAAA,IAAA,YAAAG,qBAAA;AAAA,UAAA,cACoBvB,iBAAiBK;AAAAA,UAAK,uBAAAmB,YAAtBxB,iBAAiBK,QAAKmB;AAAAA,UAAA,eAAeC,QAAM;AAAA,UAAA,aAAa;AAAA,QAAI,GAAA,IAAA,GAAAL,IAAA,YAAA,OAAA;AAAA,UAAA,SAAA;AAAA,QAAA,GAAA,CAE3EL,qBAAqB,CAAA,CAAA,CAAA;AAAA,MAG3B;AAAA,MACDW,QAAQA,MAAM;AACZ,eAAAN,IAAA,YAAAO,IAAA,UAAAP,MAAAA,CAAAA,IAAAA,YAAAQ,YAAAA,UAAA;AAAA,UAAA,WACqB3B;AAAAA,QAAiB,GAAA;AAAA,UAAA4B,SAAAA,MAAA,CAAAC,oBAAA,IAAA,CAAA;AAAA,SAAAV,GAAAA,IAAA,YAAAQ,sBAAA;AAAA,UAAA,QAAA;AAAA,UAAA,WACFxB;AAAAA,UAAkB,YAAY,CAACN,aAAaO;AAAAA,QAAK,GAAA;AAAA,UAAAwB,SAAAA,MAAA,CAAAC,oBAAA,IAAA,CAAA;AAAA,QAAA,CAAA,CAAA,CAAA;AAAA,MAIvF;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;MAOaC,aAAaA,CAACC,UAAgBC,SAAW;AAEpD,QAAMC,SAAS,IAAIC;AACnB,QAAMC,UAAUF,OAAOG,gBAAgBL,UAAS,WAAW;AAC3D,QAAMM,OAAO,CAACF,QAAQtB,IAAI;AAE1ByB,SAAOC,KAAKP,IAAI,EAAEQ,QAAQC,SAAK;AAE7B,aAAQC,IAAE,GAAEA,IAAEL,KAAKM,QAAOD,KAAI;AAE5B,YAAME,KAAKP,KAAKK,CAAC;AACjB,YAAMG,MAAMb,KAAKS,GAAG;AAGpB,UAAGG,GAAGE,YAAY,GAAE;AAElB,YAAI,CAAC,OAAM,OAAM,QAAQ,EAAE/B,OAAOgC,UAAMH,GAAGI,aAAa,QAAQP,GAAG,IAAIM,IAAI,EAAE,CAAC,EAC9EE,KAAKF,UAAOH,GAAGM,aAAaH,MAAKF,GAAG,CAAC,GAAE;AAAG;AAAA,QAAO,WAEzCD,GAAGI,aAAa,QAAQP,GAAG,EAAE,GAAE;AACrCG,aAAGO,cAAcN;AACjB;AAAA,mBAEMD,GAAGI,aAAa,QAAQP,GAAG,OAAO,GAAE;AAC1CG,aAAGQ,YAAYP;AACf;AAAA,QACF;AAAA,MACF;AAGA,UAAGD,GAAGS,WAAWV,QAAO;AACtBC,WAAGS,WAAWb,QAASc,SAAUjB,KAAKkB,KAAKD,GAAG,CAAC;AAAA,MACjD;AAAA,IACF;AAAA,EACF,CAAC;AAED,SAAOnB,QAAQtB,KAAKuC,UAAUI,WAAW,kBAAiB,EAAE;AAC9D;MAOaC,uBAAuBA,CAACC,MAAYC,YAAgC;AAG/E,QAAM1B,SAAS,IAAIC;AACnB,QAAMC,UAAUF,OAAOG,gBAAgBsB,MAAK,WAAW;AACvD,QAAMrB,OAAO,CAACF,QAAQtB,IAAI;AAC1B,QAAMmB,OAAW,CAAA;AAGjB2B,UAAQnB,QAAQlC,UAAM;AAEpB,aAAQoC,IAAE,GAAEA,IAAEL,KAAKM,QAAOD,KAAI;AAE5B,YAAME,KAAKP,KAAKK,CAAC;AACjB,YAAMG,MAAM;AAGZ,UAAGD,GAAGE,YAAY,GAAE;AAElB,YAAI,CAAC,OAAM,OAAM,QAAQ,EAAE/B,OAAOgC,UAAMH,GAAGI,aAAa,QAAQ1C,KAAKU,IAAI,IAAI+B,IAAI,EAAE,CAAC,EACpFE,KAAKF,UAAOf,KAAK1B,KAAKU,IAAI,IAAI4B,GAAGgB,aAAab,IAAI,CAAC,GAAE;AAAG;AAAA,QAAO,WAEvDH,GAAGI,aAAa,QAAQ1C,KAAKU,IAAI,EAAE,GAAE;AAC3CgB,eAAK1B,KAAKU,IAAI,IAAI4B,GAAGO;AACrB;AAAA,QACF,WAEQP,GAAGI,aAAa,QAAQ1C,KAAKU,IAAI,OAAO,GAAE;AAChDgB,eAAK1B,KAAKU,IAAI,IAAI4B,GAAGQ;AACrB;AAAA,QACF;AAAA,MACF;AAGA,UAAGR,GAAGS,WAAWV,QAAO;AACtBC,WAAGS,WAAWb,QAASc,SAAUjB,KAAKkB,KAAKD,GAAG,CAAC;AAAA,MACjD;AAEAtB,WAAK1B,KAAKU,IAAI,IAAI6B;AAAAA,IACpB;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IAAEb;AAAAA;AACX;AAOa6B,MAAAA,wBAAyB1B,aAAyC;AAE3E,MAAIS,KAAsBT;AAE1B,MAAGS,GAAGkB,UAAUC,SAASC,oBAAAA,oBAAoBC,iBAAkB,CAAA,GAAE;AAC/D,WAAOrB;AAAAA,EACT;AAEA,SAAOA,MAAM,QAAQ,CAACA,GAAGkB,UAAUC,SAASC,oBAAAA,oBAAoBC,iBAAgB,CAAE,GAAG;AACnFrB,SAAKA,GAAGsB;AAAAA,EACV;AAEF,SAAOtB;AACT;AAOauB,MAAAA,mBAAoBhC,aAAyC;AAExE,MAAIS,KAAsBT;AAE1B,MAAGS,GAAGkB,UAAUC,SAASK,gBAAAA,gBAAgBH,iBAAkB,CAAA,GAAE;AAC3D,WAAOrB;AAAAA,EACT;AAEA,SAAOA,MAAM,QAAQ,CAACA,GAAGkB,UAAUC,SAASK,gBAAAA,gBAAgBH,iBAAgB,CAAE,GAAG;AAC/ErB,SAAKA,GAAGsB;AAAAA,EACV;AAEF,SAAOtB;AACP;;;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/utils.tsx"],"sourcesContent":["\r\nimport { Fragment,ref,unref,resolveComponent,h,reactive } from 'vue'\r\nimport { Dialoger } from '@maketribe/dm'\r\nimport {  ElButton,ElCollapse,ElCollapseItem,ElInput } from \"element-plus\";\r\nimport { Search } from \"@element-plus/icons-vue\";\r\nimport { useModules,type ModuleType } from \"./composables\"\r\nimport { DynamicFormItemType } from \"../../../dynamic-form-panel\"\r\n\r\nimport { ModuleBlockNode } from \"./ModuleBlockNode\"\r\n\r\n/**\r\n * 显示模块模版选择\r\n * @returns \r\n */\r\nexport const showModuleSelectDialog = async  () => {\r\n\r\n  return new Promise(resolve => {\r\n\r\n    const Modules = useModules();\r\n    const selectOption = ref<ModuleType|null>(null);\r\n    const searchInputValue = ref(\"\");\r\n\r\n    // 取消编辑\r\n    const handleCancelClick = () => {\r\n      dialogInstance.destroy();\r\n    };\r\n\r\n    // 确认编辑\r\n    const handleConfirmClick = () => {\r\n      dialogInstance.destroy();\r\n      resolve({...selectOption.value as any});\r\n    };\r\n\r\n    // 点击块\r\n    const clickHandle = (item:any)=>{\r\n      selectOption.value = item;\r\n    }\r\n\r\n    const dialogInstance = Dialoger.customRender({\r\n      title: \"模版选择\",\r\n      class: \"mk-doc-editor__module-template_dialog\",\r\n      width: \"700px\",\r\n      onClose: () => {\r\n        dialogInstance.destroy();\r\n      },\r\n      body: () => {\r\n\r\n        // 循环体\r\n        const templateListComponent = Modules.filter(item=>{\r\n          if(searchInputValue.value){\r\n            return item.name.indexOf(searchInputValue.value) >= 0 || item.title.indexOf(searchInputValue.value) >= 0\r\n          }\r\n          else{\r\n            return true;\r\n          }\r\n        }).map(item=>{\r\n\r\n          return <div \r\n          class={`mk-doc-editor__module-template_dialog_list-item ${(item.cover ? 'cover':'')} ${(selectOption.value?.name == item.name ? 'active':'')}`} \r\n          onClick={()=>clickHandle(item)}>\r\n            {item.cover ?  <img src={item.cover}  /> :null}\r\n            <div class=\"mk-doc-editor__module-template_dialog_list-item_title\">{item.title}</div>\r\n          </div>\r\n        })\r\n\r\n        return <div class=\"mk-doc-editor__module-template_dialog_warp\">\r\n          <ElInput v-model={searchInputValue.value} prefix-icon={Search} clearable={true} />\r\n          <div class=\"mk-doc-editor__module-template_dialog_list-body\">\r\n            {templateListComponent}\r\n          </div>\r\n        </div>\r\n      },\r\n      footer: () => {\r\n        return <Fragment>\r\n          <ElButton onClick={handleCancelClick}>取消</ElButton>\r\n          <ElButton type=\"primary\" onClick={handleConfirmClick} disabled={!selectOption.value}>\r\n            确定\r\n          </ElButton>\r\n      </Fragment>\r\n      },\r\n    });\r\n  });\r\n}\r\n\r\n// 元素属性列表\r\nconst ElAttrList = [\"src\",\"alt\",\"poster\",\"href\",\"_target\"];\r\n\r\n/**\r\n * 创建html\r\n * @param template \r\n * @param data \r\n */\r\nexport const createHtml = (template:string,data:any)=>{\r\n\r\n  const parser = new DOMParser();\r\n  const element = parser.parseFromString(template,\"text/html\")\r\n  const list = [element.body];\r\n\r\n  Object.keys(data).forEach(key=>{\r\n\r\n    for(let i=0;i<list.length;i++){\r\n\r\n      const el = list[i];\r\n      const val = data[key] as any;\r\n  \r\n      // 忽略文本节点\r\n      if(el.nodeType != 3){\r\n        // 属性解析\r\n        if(ElAttrList.filter(attr=>el.hasAttribute(`data-${key}-${attr}`)).\r\n        some(attr=> el.setAttribute(attr,val))){  break; }\r\n        // 文本解析\r\n        else if(el.hasAttribute(`data-${key}`)){\r\n          el.textContent = val;\r\n          break;\r\n        }\r\n        else if(el.hasAttribute(`data-${key}-html`)){\r\n          el.innerHTML = val;\r\n          break;\r\n        } \r\n      }\r\n\r\n      // 广域递归\r\n      if(el.childNodes.length){\r\n        el.childNodes.forEach((sub:any)=>list.push(sub))\r\n      }\r\n    }\r\n  })\r\n\r\n  return element.body.innerHTML.replaceAll(/[\\r|\\n|\\r\\n]+/g,\"\")\r\n}\r\n\r\n/**\r\n * 创建html\r\n * @param template \r\n * @param data \r\n */\r\nexport const createModuleMetaData = (html:string,options:DynamicFormItemType[])=>{\r\n\r\n\r\n  const parser = new DOMParser();\r\n  const element = parser.parseFromString(html,\"text/html\")\r\n  const list = [element.body];\r\n  const data:any = {};\r\n\r\n  options.forEach(item=>{\r\n\r\n    for(let i=0;i<list.length;i++){\r\n\r\n      const el = list[i];\r\n      const val = \"\";\r\n\r\n      // 忽略文本节点\r\n      if(el.nodeType != 3){\r\n        // 属性解析\r\n        if(ElAttrList.filter(attr=>el.hasAttribute(`data-${item.name}-${attr}`)).\r\n        some(attr=> data[item.name] = el.getAttribute(attr))){  break; }\r\n        // 文本解析\r\n        else if(el.hasAttribute(`data-${item.name}`)){\r\n          data[item.name] = el.textContent;\r\n          break;\r\n        }\r\n        // html 解析\r\n        else if(el.hasAttribute(`data-${item.name}-html`)){\r\n          data[item.name] = el.innerHTML;\r\n          break;\r\n        } \r\n      }\r\n\r\n      // 广域递归\r\n      if(el.childNodes.length){\r\n        el.childNodes.forEach((sub:any)=>list.push(sub))\r\n      }\r\n\r\n      data[item.name] = val;\r\n    }\r\n  })\r\n\r\n  return { data }\r\n}\r\n\r\n/**\r\n * 查找模块节点\r\n * @param element \r\n * @returns \r\n */\r\nexport const findModuleNodeEl = (element:HTMLElement):HTMLElement|null => {\r\n\r\n  var el:HTMLElement|null = element\r\n\r\n  if(el.classList.contains(ModuleBlockNode.getMarkClassName())){\r\n    return el;\r\n  }\r\n\r\n  while (el != null && !el.classList.contains(ModuleBlockNode.getMarkClassName())) {\r\n    el = el.parentElement;\r\n  }\r\n\r\n  return el\r\n}\r\n\r\n// 测试代码\r\n// console.log(createHtml(\"<div data-title>111</div>\",{title:\"asdasdasdasd\"}))\r\n// console.log(createModuleMetaData(\"<div data-title>asdasdasd<img  data-path-src src='aaa.jpg'></div>\",[\r\n//   { name:\"title\", title:\"标题\", component:\"el-input\", props:{ clearable:true }, defaultValue:\"测试标题\" },\r\n//   { name:\"path\", title:\"标题\", component:\"el-input\", props:{ clearable:true }, defaultValue:\"111\" }\r\n// ]))\r\n"],"names":["showModuleSelectDialog","Promise","resolve","Modules","useModules","selectOption","ref","searchInputValue","handleCancelClick","dialogInstance","destroy","handleConfirmClick","value","clickHandle","item","Dialoger","customRender","title","class","width","onClose","body","templateListComponent","filter","name","indexOf","map","_createVNode","cover","onClick","ElInput","$event","Search","footer","_Fragment","ElButton","default","_createTextVNode","ElAttrList","createHtml","template","data","parser","DOMParser","element","parseFromString","list","Object","keys","forEach","key","i","length","el","val","nodeType","attr","hasAttribute","some","setAttribute","textContent","innerHTML","childNodes","sub","push","replaceAll","createModuleMetaData","html","options","getAttribute","findModuleNodeEl","classList","contains","ModuleBlockNode","getMarkClassName","parentElement"],"mappings":"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"}

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

@@ -3,6 +3,7 @@ const vue = require("vue");
 const lexical = require("lexical");
 const selection = require("@lexical/selection");
 const richText = require("@lexical/rich-text");
+const list = require("@lexical/list");
 const utils = require("@lexical/utils");
 const lexicalVue = require("lexical-vue");
 const _hoisted_1 = {
@@ -16,6 +17,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const editor = lexicalVue.useLexicalComposer();
     const CONTENT_TYPE_DEFINES = [
       { value: "paragraph", label: "正文" },
+      { value: "bullet", label: "无序列表" },
+      { value: "number", label: "有序列表" },
       { value: "h1", label: "标题 1" },
       { value: "h2", label: "标题 2" },
       { value: "h3", label: "标题 3" }
@@ -52,6 +55,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           selection.$patchStyleText(selection$1, { ["font-size"]: "" });
           if (type.value == "paragraph") {
             selection.$setBlocksType(selection$1, () => lexical.$createParagraphNode());
+          } else if (type.value == "bullet") {
+            editor.dispatchCommand(list.INSERT_UNORDERED_LIST_COMMAND, void 0);
+          } else if (type.value == "bullet") {
+            editor.dispatchCommand(list.INSERT_ORDERED_LIST_COMMAND, void 0);
+          } else if (type.value == "check-list") {
+            editor.dispatchCommand(list.INSERT_CHECK_LIST_COMMAND, void 0);
           } else {
             selection.$setBlocksType(selection$1, () => {
               return richText.$createHeadingNode(type.value);
@@ -88,7 +97,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   onClick: ($event) => setContentType(item)
                 }, {
                   default: vue.withCtx(() => [
-                    item.value == "paragraph" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, vue.toDisplayString(item.label), 1)) : (vue.openBlock(), vue.createElementBlock("div", {
+                    item.value.indexOf("h") != 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, vue.toDisplayString(item.label), 1)) : (vue.openBlock(), vue.createElementBlock("div", {
                       key: 1,
                       class: "mk-doc-editor-toolbar-content-style-item",
                       innerHTML: `<${item.value}>${item.label}</${item.value}>`

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\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,WAAAA;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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  $createParagraphNode,\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 { \r\n  INSERT_CHECK_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, \r\n} from '@lexical/list'\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:\"bullet\",label:\"无序列表\"},\r\n  {value:\"number\",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 disabled = ref(false)\r\n\r\nconst contentType = ref<any>(CONTENT_TYPE_DEFINES[0]);\r\n\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\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 if(type.value == \"bullet\"){\r\n          editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)\r\n        }\r\n        else if(type.value == \"bullet\"){\r\n          editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined)\r\n        }\r\n        else if(type.value == \"check-list\"){\r\n          editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined)\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\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.indexOf('h')!=0 \">\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","INSERT_UNORDERED_LIST_COMMAND","INSERT_ORDERED_LIST_COMMAND","INSERT_CHECK_LIST_COMMAND","$createHeadingNode","onMounted","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;AAiBA,UAAM,SAASA,WAAAA;AAGf,UAAM,uBAAuB;AAAA,MAC3B,EAAC,OAAM,aAAY,OAAM,KAAI;AAAA,MAC7B,EAAC,OAAM,UAAS,OAAM,OAAM;AAAA,MAC5B,EAAC,OAAM,UAAS,OAAM,OAAM;AAAA,MAC5B,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,MACxB,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,MACxB,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,IAAA;AAGpB,UAAA,WAAWC,QAAI,KAAK;AAE1B,UAAM,cAAcA,IAAA,IAAS,qBAAqB,CAAC,CAAC;AAKpD,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,WAEhD,KAAK,SAAS,UAAS;AACtB,mBAAA,gBAAgBC,oCAA+B,MAAS;AAAA,UAAA,WAEzD,KAAK,SAAS,UAAS;AACtB,mBAAA,gBAAgBC,kCAA6B,MAAS;AAAA,UAAA,WAEvD,KAAK,SAAS,cAAa;AAC1B,mBAAA,gBAAgBC,gCAA2B,MAAS;AAAA,UAAA,OAEzD;AACFJ,sBAAA,eAAeP,aAAW,MAAM;AACvB,qBAAAY,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;AAGWC,sBAAA,MAAM,yBAAyB;AAAA,IAAA,CAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -21,6 +21,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const isItalic = vue.ref(false);
     const isUnderline = vue.ref(false);
     const isStrikethrough = vue.ref(false);
+    const isSubscript = vue.ref(false);
+    const isSuperscript = vue.ref(false);
     const alignList = vue.ref(["left", "center", "right", "justify"]);
     const alignValue = vue.ref(alignList.value[0]);
     const disabled = vue.ref(false);
@@ -56,6 +58,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         isItalic.value = selection$1.hasFormat("italic");
         isUnderline.value = selection$1.hasFormat("underline");
         isStrikethrough.value = selection$1.hasFormat("strikethrough");
+        isSubscript.value = selection$1.hasFormat("subscript");
+        isSuperscript.value = selection$1.hasFormat("superscript");
         var ff = selection.$getSelectionStyleValueForProperty(selection$1, "font-family", "Arial");
         let fs = selection.$getSelectionStyleValueForProperty(selection$1, "font-size", "1rem");
         if (fs) {
@@ -290,6 +294,28 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 vue.createVNode(_component_MKSvgIcon, { iconClass: "doc-strikethrough" })
               ]),
               _: 1
+            }, 8, ["disabled", "class"]),
+            vue.createVNode(_component_el_button, {
+              disabled: disabled.value,
+              text: "",
+              class: vue.normalizeClass(`${isSubscript.value ? "active" : ""}`),
+              onClick: _cache[6] || (_cache[6] = ($event) => vue.unref(editor).dispatchCommand(vue.unref(lexical.FORMAT_TEXT_COMMAND), "subscript"))
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_MKSvgIcon, { iconClass: "doc-sub" })
+              ]),
+              _: 1
+            }, 8, ["disabled", "class"]),
+            vue.createVNode(_component_el_button, {
+              disabled: disabled.value,
+              text: "",
+              class: vue.normalizeClass(`${isSuperscript.value ? "active" : ""}`),
+              onClick: _cache[7] || (_cache[7] = ($event) => vue.unref(editor).dispatchCommand(vue.unref(lexical.FORMAT_TEXT_COMMAND), "superscript"))
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_MKSvgIcon, { iconClass: "doc-sup" })
+              ]),
+              _: 1
             }, 8, ["disabled", "class"])
           ]),
           _: 1

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  $isParagraphNode,\r\n  FORMAT_TEXT_COMMAND,\r\n  FORMAT_ELEMENT_COMMAND,\r\n  type ElementFormatType,\r\n} from 'lexical'\r\nimport {\r\n  $getSelectionStyleValueForProperty,\r\n  $patchStyleText,\r\n} from '@lexical/selection'\r\n\r\nimport { $isLinkNode, TOGGLE_LINK_COMMAND,LinkNode } from '@lexical/link'\r\nimport { sanitizeUrl } from '../../utils/url'\r\nimport { getSelectedNode } from '../../utils/getSelectedNode'\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\nimport { ShowLinkEditPanel } from \"../AutoLinkPlugin/LinkEditDialog\";\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 alignList = ref<ElementFormatType[]>([\"left\",\"center\",\"right\",\"justify\"])\r\nconst alignValue = ref(alignList.value[0])\r\nconst disabled = ref(false)\r\nconst isLink = ref(false)\r\nconst linkValue = ref(\"\");\r\n\r\nasync function insertLink() {\r\n\r\n  const result:any = await ShowLinkEditPanel(linkValue.value);\r\n\r\n  if(result.trim()){\r\n    editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(result))\r\n  }\r\n  else{\r\n    editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)\r\n  }\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    // Update links\r\n    const node = getSelectedNode(selection)\r\n    const parent = node.getParent()\r\n    isLink.value = $isLinkNode(parent) || $isLinkNode(node)\r\n    if(isLink.value){\r\n      linkValue.value = $isLinkNode(parent) ? parent.getURL() : (node as LinkNode).getURL()\r\n    }\r\n    else{\r\n      linkValue.value = \"\";\r\n    }\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    <el-divider  direction=\"vertical\" />\r\n    <!-- 链接 -->\r\n    <el-button-group>\r\n      <el-button text :disabled=\"disabled\" :class=\"`${isLink ? 'active' : ''}`\" @click=\"insertLink\">\r\n        <MKSvgIcon iconClass=\"doc-link\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n</template>\r\n"],"names":["useLexicalComposer","ref","FONT_FAMILY_OPTIONS","ShowLinkEditPanel","TOGGLE_LINK_COMMAND","sanitizeUrl","selection","$getSelection","$isRangeSelection","$findMatchingParent","parent","$isRootOrShadowRoot","$getSelectionStyleValueForProperty","ROOT_FONT_SIZE","getSelectedNode","$isLinkNode","$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  $isParagraphNode,\r\n  FORMAT_TEXT_COMMAND,\r\n  FORMAT_ELEMENT_COMMAND,\r\n  type ElementFormatType,\r\n} from 'lexical'\r\nimport {\r\n  $getSelectionStyleValueForProperty,\r\n  $patchStyleText,\r\n} from '@lexical/selection'\r\n\r\nimport { $isLinkNode, TOGGLE_LINK_COMMAND,LinkNode } from '@lexical/link'\r\nimport { sanitizeUrl } from '../../utils/url'\r\nimport { getSelectedNode } from '../../utils/getSelectedNode'\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\nimport { ShowLinkEditPanel } from \"../AutoLinkPlugin/LinkEditDialog\";\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\nconst isSubscript = ref(false)\r\nconst isSuperscript = ref(false)\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\nconst isLink = ref(false)\r\nconst linkValue = ref(\"\");\r\n\r\nasync function insertLink() {\r\n\r\n  const result:any = await ShowLinkEditPanel(linkValue.value);\r\n\r\n  if(result.trim()){\r\n    editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(result))\r\n  }\r\n  else{\r\n    editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)\r\n  }\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    isSubscript.value = selection.hasFormat('subscript')\r\n    isSuperscript.value = selection.hasFormat('superscript')\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    // Update links\r\n    const node = getSelectedNode(selection)\r\n    const parent = node.getParent()\r\n    isLink.value = $isLinkNode(parent) || $isLinkNode(node)\r\n    if(isLink.value){\r\n      linkValue.value = $isLinkNode(parent) ? parent.getURL() : (node as LinkNode).getURL()\r\n    }\r\n    else{\r\n      linkValue.value = \"\";\r\n    }\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 :disabled=\"disabled\" text :class=\"`${isSubscript ? 'active' : ''}`\"  @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'subscript')\">\r\n        <MKSvgIcon iconClass=\"doc-sub\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isSuperscript ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'superscript')\">\r\n        <MKSvgIcon iconClass=\"doc-sup\" /> \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    <el-divider  direction=\"vertical\" />\r\n    <!-- 链接 -->\r\n    <el-button-group>\r\n      <el-button text :disabled=\"disabled\" :class=\"`${isLink ? 'active' : ''}`\" @click=\"insertLink\">\r\n        <MKSvgIcon iconClass=\"doc-link\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n</template>\r\n"],"names":["useLexicalComposer","ref","FONT_FAMILY_OPTIONS","ShowLinkEditPanel","TOGGLE_LINK_COMMAND","sanitizeUrl","selection","$getSelection","$isRangeSelection","$findMatchingParent","parent","$isRootOrShadowRoot","$getSelectionStyleValueForProperty","ROOT_FONT_SIZE","getSelectedNode","$isLinkNode","$patchStyleText","watch","onMounted","mergeRegister","onUnmounted"],"mappings":"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"}