@maketribe/ms-app 3.2.23 → 3.2.25

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

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const dm = require("@maketribe/dm");
+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();
+    const selectOption = vue.ref(null);
+    const searchInputValue = vue.ref("");
+    const handleCancelClick = () => {
+      dialogInstance.destroy();
+    };
+    const handleConfirmClick = () => {
+      dialogInstance.destroy();
+      resolve({
+        ...selectOption.value
+      });
+    };
+    const clickHandle = (item) => {
+      selectOption.value = item;
+    };
+    const dialogInstance = dm.Dialoger.customRender({
+      title: "模版选择",
+      class: "mk-doc-editor__module-template_dialog",
+      width: "700px",
+      onClose: () => {
+        dialogInstance.destroy();
+      },
+      body: () => {
+        const templateListComponent = Modules.filter((item) => {
+          if (searchInputValue.value) {
+            return item.name.indexOf(searchInputValue.value) >= 0 || item.title.indexOf(searchInputValue.value) >= 0;
+          } else {
+            return true;
+          }
+        }).map((item) => {
+          var _a;
+          return vue.createVNode("div", {
+            "class": `mk-doc-editor__module-template_dialog_list-item ${item.cover ? "cover" : ""} ${((_a = selectOption.value) == null ? void 0 : _a.name) == item.name ? "active" : ""}`,
+            "onClick": () => clickHandle(item)
+          }, [item.cover ? vue.createVNode("img", {
+            "src": item.cover
+          }, null) : null, vue.createVNode("div", {
+            "class": "mk-doc-editor__module-template_dialog_list-item_title"
+          }, [item.title])]);
+        });
+        return vue.createVNode("div", {
+          "class": "mk-doc-editor__module-template_dialog_warp"
+        }, [vue.createVNode(elementPlus.ElInput, {
+          "modelValue": searchInputValue.value,
+          "onUpdate:modelValue": ($event) => searchInputValue.value = $event,
+          "prefix-icon": elIcons.Search,
+          "clearable": true
+        }, null), vue.createVNode("div", {
+          "class": "mk-doc-editor__module-template_dialog_list-body"
+        }, [templateListComponent])]);
+      },
+      footer: () => {
+        return vue.createVNode(vue.Fragment, null, [vue.createVNode(elementPlus.ElButton, {
+          "onClick": handleCancelClick
+        }, {
+          default: () => [vue.createTextVNode("取消")]
+        }), vue.createVNode(elementPlus.ElButton, {
+          "type": "primary",
+          "onClick": handleConfirmClick,
+          "disabled": !selectOption.value
+        }, {
+          default: () => [vue.createTextVNode("确定")]
+        })]);
+      }
+    });
+  });
+};
+const ElAttrList = ["src", "alt", "poster", "href", "_target"];
+const createHtml = (template, data) => {
+  const parser = new DOMParser();
+  const element = parser.parseFromString(template, "text/html");
+  const list = [element.body];
+  Object.keys(data).forEach((key) => {
+    for (let i = 0; i < list.length; i++) {
+      const el = list[i];
+      const val = data[key];
+      if (el.nodeType != 3) {
+        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;
+          break;
+        } else if (el.hasAttribute(`data-${key}-html`)) {
+          el.innerHTML = val;
+          break;
+        }
+      }
+      if (el.childNodes.length) {
+        el.childNodes.forEach((sub) => list.push(sub));
+      }
+    }
+  });
+  return element.body.innerHTML.replaceAll(/[\r|\n|\r\n]+/g, "");
+};
+const createModuleMetaData = (html, options) => {
+  const parser = new DOMParser();
+  const element = parser.parseFromString(html, "text/html");
+  const list = [element.body];
+  const data = {};
+  options.forEach((item) => {
+    for (let i = 0; i < list.length; i++) {
+      const el = list[i];
+      const val = "";
+      if (el.nodeType != 3) {
+        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;
+          break;
+        } else if (el.hasAttribute(`data-${item.name}-html`)) {
+          data[item.name] = el.innerHTML;
+          break;
+        }
+      }
+      if (el.childNodes.length) {
+        el.childNodes.forEach((sub) => list.push(sub));
+      }
+      data[item.name] = val;
+    }
+  });
+  return {
+    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())) {
+    return el;
+  }
+  while (el != null && !el.classList.contains(ModuleBlockNode.ModuleBlockNode.getMarkClassName())) {
+    el = el.parentElement;
+  }
+  return el;
+};
+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

@@ -0,0 +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\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 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","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","findModuleContainerEl","classList","contains","ModuleContainerNode","getMarkClassName","parentElement","findModuleNodeEl","ModuleBlockNode"],"mappings":"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"}

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

@@ -16,7 +16,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     content: { type: String, default: `` },
     placeholder: { type: String, default: `` }
   },
-  emits: ["change", "init"],
+  emits: ["change"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const props = __props;
@@ -32,19 +32,17 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         editor.update(() => {
           var _a, _b;
           if (html$1.trim()) {
-            nodes = [...html.$generateNodesFromDOM(editor, parser.parseFromString(html$1.trim(), "text/html"))];
+            nodes = html.$generateNodesFromDOM(editor, parser.parseFromString(html$1.trim(), "text/html"));
           }
           lexical.$selectAll();
+          (_a = lexical.$getSelection()) == null ? void 0 : _a.insertText("");
           if (nodes.length > 0) {
-            (_a = lexical.$getSelection()) == null ? void 0 : _a.insertNodes(nodes);
-          } else {
-            (_b = lexical.$getSelection()) == null ? void 0 : _b.insertText("");
+            (_b = lexical.$getSelection()) == null ? void 0 : _b.insertNodes(nodes);
           }
         });
       }
     };
     vue.onMounted(() => {
-      emit("init", editor);
       vue.watch(() => props.content, setHtml, { immediate: true });
       vue.watch(htmlContent, (value) => emit("change", value));
       const unregisterMergeListener = editor.registerUpdateListener(({ editorState }) => {

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

@@ -1 +1 @@
-{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/RichTextPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { ref,defineProps,computed,defineEmits,onMounted,onUnmounted,watch } from \"vue\"\r\nimport { useCanShowPlaceholder, useLexicalComposer, useRichTextSetup} from 'lexical-vue'\r\nimport { $getRoot, $getSelection ,$createRangeSelection,$selectAll } from 'lexical'\r\nimport { $generateHtmlFromNodes,$generateNodesFromDOM } from '@lexical/html'\r\nimport ContentEditable from \"./ContentEditable.vue\"\r\nimport DecoratedTeleports from \"./DecoratedTeleports\"\r\n\r\n// 事件\r\nconst emit = defineEmits([\"change\",\"init\"]);\r\n\r\n// 参数\r\nconst props = defineProps({\r\n  content:{ type:String,default:`` },\r\n  placeholder:{ type:String,default:`` }\r\n})\r\n\r\nconst editor = useLexicalComposer()\r\n\r\nconst canShowPlaceholder = useCanShowPlaceholder(editor)\r\n\r\nconst parser = new DOMParser();\r\n\r\n// html 内容\r\nconst htmlContent = ref(\"\");\r\n\r\n// 空内容\r\nconst contentIsEmpty = computed(()=>htmlContent.value == `<p class=\"mk-doc__paragraph\"><br></p>` || !htmlContent.value);\r\n\r\n// 设置 HTML\r\nconst setHtml = (html : any)=>{\r\n\r\n    // 内容不同则重置 \r\n    if(htmlContent.value != html){\r\n\r\n      let nodes : Array<any> = [];\r\n\r\n      htmlContent.value = html;\r\n\r\n      editor.update(()=>{\r\n\r\n        if(html.trim()){\r\n        \r\n          // Once you have the DOM instance it's easy to generate LexicalNodes.\r\n          nodes = [...$generateNodesFromDOM(editor,parser.parseFromString(html.trim(),\"text/html\"))];\r\n\r\n        }\r\n        // 设置权限替换\r\n        $selectAll();\r\n\r\n        if(nodes.length > 0){\r\n          $getSelection()?.insertNodes(nodes);\r\n        }\r\n        else{\r\n          $getSelection()?.insertText(\"\")\r\n        }\r\n      })\r\n    }\r\n}\r\n\r\n\r\nonMounted(()=>{\r\n\r\n  emit(\"init\",editor)\r\n  \r\n  // 初始化\r\n  watch(()=>props.content,setHtml,{ immediate:true });\r\n\r\n  // 监听内容变化\r\n  watch(htmlContent,(value:any)=>emit('change',value));\r\n\r\n  // 更新操作\r\n  const unregisterMergeListener = editor.registerUpdateListener(({ editorState }) => {\r\n    editorState.read(() => {\r\n      htmlContent.value = $generateHtmlFromNodes(editor);\r\n    })\r\n  })\r\n\r\n  // 取消\r\n  onUnmounted(() => unregisterMergeListener());\r\n\r\n})\r\n\r\n// 使用富文本\r\nuseRichTextSetup(editor)\r\n\r\n</script>\r\n\r\n<template>\r\n <div class=\"mk-doc-editor__stage__editable\">\r\n    <ContentEditable />\r\n    <template v-if=\"canShowPlaceholder && contentIsEmpty\">\r\n      <div class=\"mk-doc-editor__stage__placeholder mk-doc__paragraph\">\r\n        {{props.placeholder}}\r\n      </div>\r\n    </template>\r\n    <DecoratedTeleports />\r\n  </div>\r\n\r\n</template>\r\n"],"names":["useLexicalComposer","useCanShowPlaceholder","ref","computed","html","$generateNodesFromDOM","$selectAll","$getSelection","onMounted","watch","$generateHtmlFromNodes","onUnmounted","useRichTextSetup"],"mappings":";;;;;;;;;;;;;;;;;;;;AAUA,UAAM,OAAO;AAGb,UAAM,QAAQ;AAKd,UAAM,SAASA,WAAAA;AAET,UAAA,qBAAqBC,iCAAsB,MAAM;AAEjD,UAAA,SAAS,IAAI;AAGb,UAAA,cAAcC,QAAI,EAAE;AAGpB,UAAA,iBAAiBC,aAAS,MAAI,YAAY,SAAS,2CAA2C,CAAC,YAAY,KAAK;AAGhH,UAAA,UAAU,CAACC,WAAa;AAGvB,UAAA,YAAY,SAASA,QAAK;AAE3B,YAAI,QAAqB,CAAA;AAEzB,oBAAY,QAAQA;AAEpB,eAAO,OAAO,MAAI;;AAEb,cAAAA,OAAK,QAAO;AAGL,oBAAA,CAAC,GAAGC,2BAAsB,QAAO,OAAO,gBAAgBD,OAAK,KAAK,GAAE,WAAW,CAAC,CAAC;AAAA,UAE3F;AAEWE,kBAAAA;AAER,cAAA,MAAM,SAAS,GAAE;AACJC,wCAAA,MAAAA,mBAAG,YAAY;AAAA,UAAK,OAEhC;AACYA,wCAAA,MAAAA,mBAAG,WAAW;AAAA,UAC9B;AAAA,QAAA,CACD;AAAA,MACH;AAAA,IAAA;AAIJC,QAAAA,UAAU,MAAI;AAEZ,WAAK,QAAO,MAAM;AAGlBC,UAAA,MAAM,MAAI,MAAM,SAAQ,SAAQ,EAAE,WAAU,MAAM;AAGlDA,UAAA,MAAM,aAAY,CAAC,UAAY,KAAK,UAAS,KAAK,CAAC;AAGnD,YAAM,0BAA0B,OAAO,uBAAuB,CAAC,EAAE,kBAAkB;AACjF,oBAAY,KAAK,MAAM;AACT,sBAAA,QAAQC,4BAAuB,MAAM;AAAA,QAAA,CAClD;AAAA,MAAA,CACF;AAGWC,sBAAA,MAAM,yBAAyB;AAAA,IAAA,CAE5C;AAGDC,eAAA,iBAAiB,MAAM;;;;;;;;;;;"}
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/RichTextPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { ref,defineProps,computed,defineEmits,onMounted,onUnmounted,watch } from \"vue\"\r\nimport { useCanShowPlaceholder, useLexicalComposer, useRichTextSetup} from 'lexical-vue'\r\nimport { $getRoot, $getSelection ,$createRangeSelection,$selectAll } from 'lexical'\r\nimport { $generateHtmlFromNodes,$generateNodesFromDOM } from '@lexical/html'\r\nimport ContentEditable from \"./ContentEditable.vue\"\r\nimport DecoratedTeleports from \"./DecoratedTeleports\"\r\n\r\n// 事件\r\nconst emit = defineEmits([\"change\"]);\r\n\r\n// 参数\r\nconst props = defineProps({\r\n  content:{ type:String,default:`` },\r\n  placeholder:{ type:String,default:`` }\r\n})\r\n\r\nconst editor = useLexicalComposer()\r\n\r\nconst canShowPlaceholder = useCanShowPlaceholder(editor)\r\n\r\nconst parser = new DOMParser();\r\n\r\n// html 内容\r\nconst htmlContent = ref(\"\");\r\n\r\n// 空内容\r\nconst contentIsEmpty = computed(()=>htmlContent.value == `<p class=\"mk-doc__paragraph\"><br></p>` || !htmlContent.value);\r\n\r\n// 设置 HTML\r\nconst setHtml = (html : any)=>{\r\n\r\n    // 内容不同则重置 \r\n    if(htmlContent.value != html){\r\n\r\n      let nodes : Array<any> = [];\r\n\r\n      htmlContent.value = html;\r\n\r\n      editor.update(()=>{\r\n\r\n        if(html.trim()){\r\n          // Once you have the DOM instance it's easy to generate LexicalNodes.\r\n          nodes = $generateNodesFromDOM(editor,parser.parseFromString(html.trim(),\"text/html\"));\r\n          // console.log(nodes,parser.parseFromString(html.trim(),\"text/html\"));\r\n        }\r\n        // 设置权限替换\r\n        $selectAll();\r\n        $getSelection()?.insertText(\"\")\r\n        if(nodes.length > 0){\r\n          $getSelection()?.insertNodes(nodes);\r\n        }\r\n      })\r\n    }\r\n}\r\n\r\n\r\nonMounted(()=>{\r\n  \r\n  // 初始化\r\n  watch(()=>props.content,setHtml,{ immediate:true });\r\n\r\n  // 监听内容变化\r\n  watch(htmlContent,(value:any)=>emit('change',value));\r\n\r\n  // 更新操作\r\n  const unregisterMergeListener = editor.registerUpdateListener(({ editorState }) => {\r\n    editorState.read(() => {\r\n      htmlContent.value = $generateHtmlFromNodes(editor);\r\n    })\r\n  })\r\n\r\n  // 取消\r\n  onUnmounted(() => unregisterMergeListener());\r\n\r\n})\r\n\r\n// 使用富文本\r\nuseRichTextSetup(editor)\r\n\r\n</script>\r\n\r\n<template>\r\n <div class=\"mk-doc-editor__stage__editable\">\r\n    <ContentEditable />\r\n    <template v-if=\"canShowPlaceholder && contentIsEmpty\">\r\n      <div class=\"mk-doc-editor__stage__placeholder mk-doc__paragraph\">\r\n        {{props.placeholder}}\r\n      </div>\r\n    </template>\r\n    <DecoratedTeleports />\r\n  </div>\r\n\r\n</template>\r\n"],"names":["useLexicalComposer","useCanShowPlaceholder","ref","computed","html","$generateNodesFromDOM","$selectAll","$getSelection","onMounted","watch","$generateHtmlFromNodes","onUnmounted","useRichTextSetup"],"mappings":";;;;;;;;;;;;;;;;;;;;AAUA,UAAM,OAAO;AAGb,UAAM,QAAQ;AAKd,UAAM,SAASA,WAAAA;AAET,UAAA,qBAAqBC,iCAAsB,MAAM;AAEjD,UAAA,SAAS,IAAI;AAGb,UAAA,cAAcC,QAAI,EAAE;AAGpB,UAAA,iBAAiBC,aAAS,MAAI,YAAY,SAAS,2CAA2C,CAAC,YAAY,KAAK;AAGhH,UAAA,UAAU,CAACC,WAAa;AAGvB,UAAA,YAAY,SAASA,QAAK;AAE3B,YAAI,QAAqB,CAAA;AAEzB,oBAAY,QAAQA;AAEpB,eAAO,OAAO,MAAI;;AAEb,cAAAA,OAAK,QAAO;AAEL,oBAAAC,KAAAA,sBAAsB,QAAO,OAAO,gBAAgBD,OAAK,KAAK,GAAE,WAAW,CAAC;AAAA,UAEtF;AAEWE,kBAAAA;AACGC,sCAAA,MAAAA,mBAAG,WAAW;AACzB,cAAA,MAAM,SAAS,GAAE;AACJA,wCAAA,MAAAA,mBAAG,YAAY;AAAA,UAC/B;AAAA,QAAA,CACD;AAAA,MACH;AAAA,IAAA;AAIJC,QAAAA,UAAU,MAAI;AAGZC,UAAA,MAAM,MAAI,MAAM,SAAQ,SAAQ,EAAE,WAAU,MAAM;AAGlDA,UAAA,MAAM,aAAY,CAAC,UAAY,KAAK,UAAS,KAAK,CAAC;AAGnD,YAAM,0BAA0B,OAAO,uBAAuB,CAAC,EAAE,kBAAkB;AACjF,oBAAY,KAAK,MAAM;AACT,sBAAA,QAAQC,4BAAuB,MAAM;AAAA,QAAA,CAClD;AAAA,MAAA,CACF;AAGWC,sBAAA,MAAM,yBAAyB;AAAA,IAAA,CAE5C;AAGDC,eAAA,iBAAiB,MAAM;;;;;;;;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/RichTextPlugin/nodes/BaseBlockCantainerNode.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lexical = require("lexical");
+const BaseMarkClassName = "mk-doc-block-container";
+class BaseBlockCantainerNode extends lexical.ElementNode {
+  constructor(type, key) {
+    super(key);
+    this.__type = type;
+  }
+  /**
+  * 获取指定类型模块类标识
+  * @param type 
+  * @returns 
+  */
+  static getMarkClassName(type) {
+    return `${BaseMarkClassName}__${type}`;
+  }
+  /**
+   * 是否是指定类型模块
+   * @param dom 
+   * @param type 
+   * @returns 
+   */
+  static hasBlockByType(dom, type) {
+    return dom.classList.contains(BaseBlockCantainerNode.getMarkClassName(type));
+  }
+  /**
+   * 导出json
+   * @returns 
+   */
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: this.__type,
+      version: 1
+    };
+  }
+  /**
+   * 获取标识类名
+   */
+  getMarkClassName() {
+    return BaseBlockCantainerNode.getMarkClassName(this.__type);
+  }
+  /**
+   * 导出DOM
+   * @returns 
+   */
+  exportDOM() {
+    const element = document.createElement("div");
+    if (!element.classList.contains(this.getMarkClassName())) {
+      element.classList.add(this.getMarkClassName());
+    }
+    return { element };
+  }
+  /**
+   * 创建渲染DOM
+   * @param config 
+   * @returns 
+   */
+  createDOM(config) {
+    const el = this.exportDOM().element;
+    el.setAttribute("node-key", this.__key);
+    el.setAttribute("contenteditable", "false");
+    el.setAttribute("data-lexical-decorator", "true");
+    return el;
+  }
+  /**
+   * 更新DOM
+   * @param prevNode 
+   * @param dom 
+   * @param config 
+   * @returns 
+   */
+  updateDOM(prevNode, dom, config) {
+    return false;
+  }
+  /**
+   * 非内联
+   * @returns 
+   */
+  isInline() {
+    return false;
+  }
+  /**
+   * 定义为影子根
+   * @returns 
+   */
+  isShadowRoot() {
+    return true;
+  }
+  // // Mutation
+  // insertNewAfter(rangeSelection:RangeSelection, restoreSelection:boolean) {
+  //   // const newElement = $createParagraphNode();
+  //   // newElement.setTextFormat(rangeSelection.format);
+  //   // const direction = this.getDirection();
+  //   // newElement.setDirection(direction);
+  //   // newElement.setFormat(this.getFormatType());
+  //   // this.insertAfter(newElement, restoreSelection);
+  //   console.log(rangeSelection,restoreSelection)
+  //   return null;
+  // }
+  // collapseAtStart() {
+  //   const children = this.getChildren();
+  //   console.log("asdasdas")
+  //   if (children.length === 0 || $isTextNode(children[0]) && children[0].getTextContent().trim() === "") {
+  //     const nextSibling = this.getNextSibling();
+  //     if (nextSibling !== null) {
+  //       this.selectNext();
+  //       this.remove();
+  //       return true;
+  //     }
+  //     const prevSibling = this.getPreviousSibling();
+  //     if (prevSibling !== null) {
+  //       this.selectPrevious();
+  //       this.remove();
+  //       return true;
+  //     }
+  //   }
+  //   return false;
+  // }
+}
+exports.BaseBlockCantainerNode = BaseBlockCantainerNode;
+//# sourceMappingURL=BaseBlockCantainerNode.js.map

package/dist/cjs/components/basic/doc-editor/plugins/RichTextPlugin/nodes/BaseBlockCantainerNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseBlockCantainerNode.js","sources":["../../../../../../../../src/components/basic/doc-editor/plugins/RichTextPlugin/nodes/BaseBlockCantainerNode.ts"],"sourcesContent":["import type {\r\n  DOMExportOutput,\r\n  EditorConfig,\r\n  NodeKey,\r\n  Spread,\r\n  SerializedElementNode,\r\n} from 'lexical'\r\nimport { ElementNode} from 'lexical'\r\n\r\n/**\r\n * 可编辑组件块容器节点\r\n */\r\nexport type SerializedBlockCantainerNode = Spread<{},SerializedElementNode>\r\n\r\n// 基础类标识\r\nconst BaseMarkClassName = \"mk-doc-block-container\";\r\n\r\n/**\r\n * 定义组件块容器点\r\n */\r\nexport class BaseBlockCantainerNode extends ElementNode {\r\n\r\n  constructor(type: string,  key?: NodeKey) {\r\n    super(key)\r\n    this.__type = type\r\n  }\r\n\r\n   /**\r\n   * 获取指定类型模块类标识\r\n   * @param type \r\n   * @returns \r\n   */\r\n  static getMarkClassName(type:string): string {\r\n    return `${BaseMarkClassName}__${type}`\r\n  }\r\n\r\n  /**\r\n   * 是否是指定类型模块\r\n   * @param dom \r\n   * @param type \r\n   * @returns \r\n   */\r\n  static hasBlockByType(dom: HTMLElement,type:string): boolean {\r\n    return dom.classList.contains(BaseBlockCantainerNode.getMarkClassName(type))\r\n  }\r\n\r\n  /**\r\n   * 导出json\r\n   * @returns \r\n   */\r\n  exportJSON(): SerializedBlockCantainerNode {\r\n    return {\r\n      ...super.exportJSON(),\r\n      type: this.__type,\r\n      version: 1\r\n    }\r\n  }\r\n\r\n  /**\r\n   * 获取标识类名\r\n   */\r\n  getMarkClassName(){\r\n    return BaseBlockCantainerNode.getMarkClassName(this.__type)\r\n  }\r\n\r\n  /**\r\n   * 导出DOM\r\n   * @returns \r\n   */\r\n  exportDOM(): DOMExportOutput {\r\n   \r\n    const element = document.createElement('div')\r\n\r\n    if (!element.classList.contains(this.getMarkClassName())) {\r\n      element.classList.add(this.getMarkClassName());\r\n    }\r\n\r\n    return { element }\r\n  }\r\n\r\n  /**\r\n   * 创建渲染DOM\r\n   * @param config \r\n   * @returns \r\n   */\r\n  createDOM(config: EditorConfig): HTMLElement {\r\n    const el = this.exportDOM().element as HTMLElement;\r\n    el.setAttribute(\"node-key\",this.__key)\r\n    el.setAttribute(\"contenteditable\",\"false\")\r\n    el.setAttribute(\"data-lexical-decorator\",\"true\")\r\n    return el;\r\n  }\r\n\r\n  /**\r\n   * 更新DOM\r\n   * @param prevNode \r\n   * @param dom \r\n   * @param config \r\n   * @returns \r\n   */\r\n  updateDOM(prevNode: BaseBlockCantainerNode, dom: HTMLElement, config: EditorConfig): boolean {\r\n    // console.log(\"Image Text updateDOM\",prevNode,dom);\r\n    // const position = this.__pos\r\n    // if (position !== prevNode.__pos) {\r\n    //   const className = `${config.theme.image} position-${position}`\r\n    //   if (className !== undefined) {\r\n    //     dom.className = className\r\n    //   }\r\n    // }\r\n    // const inner = dom.firstChild\r\n    // if (inner === null){ return true }\r\n    // super.updateDOM(prevNode, inner as HTMLElement, config)\r\n    return false\r\n  }\r\n\r\n\r\n  /**\r\n   * 非内联\r\n   * @returns \r\n   */\r\n  isInline(): boolean {\r\n    return false;\r\n  }\r\n\r\n  /**\r\n   * 定义为影子根\r\n   * @returns \r\n   */\r\n  isShadowRoot(): boolean {\r\n    return true;\r\n  }\r\n\r\n  \r\n  // // Mutation\r\n  // insertNewAfter(rangeSelection:RangeSelection, restoreSelection:boolean) {\r\n  //   // const newElement = $createParagraphNode();\r\n  //   // newElement.setTextFormat(rangeSelection.format);\r\n  //   // const direction = this.getDirection();\r\n  //   // newElement.setDirection(direction);\r\n  //   // newElement.setFormat(this.getFormatType());\r\n  //   // this.insertAfter(newElement, restoreSelection);\r\n  //   console.log(rangeSelection,restoreSelection)\r\n  //   return null;\r\n  // }\r\n\r\n\r\n  // collapseAtStart() {\r\n  //   const children = this.getChildren();\r\n  //   console.log(\"asdasdas\")\r\n  //   if (children.length === 0 || $isTextNode(children[0]) && children[0].getTextContent().trim() === \"\") {\r\n  //     const nextSibling = this.getNextSibling();\r\n  //     if (nextSibling !== null) {\r\n  //       this.selectNext();\r\n  //       this.remove();\r\n  //       return true;\r\n  //     }\r\n  //     const prevSibling = this.getPreviousSibling();\r\n  //     if (prevSibling !== null) {\r\n  //       this.selectPrevious();\r\n  //       this.remove();\r\n  //       return true;\r\n  //     }\r\n  //   }\r\n  //   return false;\r\n  // }\r\n}\r\n"],"names":["ElementNode"],"mappings":";;;AAeA,MAAM,oBAAoB;AAKnB,MAAM,+BAA+BA,QAAAA,YAAY;AAAA,EAEtD,YAAY,MAAe,KAAe;AACxC,UAAM,GAAG;AACT,SAAK,SAAS;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO,iBAAiB,MAAqB;AACpC,WAAA,GAAG,iBAAiB,KAAK,IAAI;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,OAAO,eAAe,KAAiB,MAAsB;AAC3D,WAAO,IAAI,UAAU,SAAS,uBAAuB,iBAAiB,IAAI,CAAC;AAAA,EAC7E;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,aAA2C;AAClC,WAAA;AAAA,MACL,GAAG,MAAM,WAAW;AAAA,MACpB,MAAM,KAAK;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA;AAAA;AAAA;AAAA,EAKA,mBAAkB;AACT,WAAA,uBAAuB,iBAAiB,KAAK,MAAM;AAAA,EAC5D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAA6B;AAErB,UAAA,UAAU,SAAS,cAAc,KAAK;AAE5C,QAAI,CAAC,QAAQ,UAAU,SAAS,KAAK,iBAAA,CAAkB,GAAG;AACxD,cAAQ,UAAU,IAAI,KAAK,iBAAkB,CAAA;AAAA,IAC/C;AAEA,WAAO,EAAE,QAAQ;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,UAAU,QAAmC;AACrC,UAAA,KAAK,KAAK,UAAA,EAAY;AACzB,OAAA,aAAa,YAAW,KAAK,KAAK;AAClC,OAAA,aAAa,mBAAkB,OAAO;AACtC,OAAA,aAAa,0BAAyB,MAAM;AACxC,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,UAAU,UAAkC,KAAkB,QAA+B;AAYpF,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAoB;AACX,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,eAAwB;AACf,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCF;;"}

package/dist/cjs/components/basic/doc-editor/plugins/RichTextPlugin/nodes/BaseBlockNode.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lexical = require("lexical");
+const BaseMarkClassName = "mk-doc-block";
+class BaseBlockNode extends lexical.ElementNode {
+  constructor(type, key) {
+    super(key);
+    this.__type = type;
+  }
+  /**
+  * 获取指定类型模块类标识
+  * @param type 
+  * @returns 
+  */
+  static getMarkClassName(type) {
+    return `${BaseMarkClassName}__${type}`;
+  }
+  /**
+   * 是否是指定类型模块
+   * @param dom 
+   * @param type 
+   * @returns 
+   */
+  static hasBlockByType(dom, type) {
+    return dom.classList.contains(BaseBlockNode.getMarkClassName(type));
+  }
+  /**
+   * 导出json
+   * @returns 
+   */
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: this.__type,
+      version: 1
+    };
+  }
+  /**
+   * 获取标识类名
+   */
+  getMarkClassName() {
+    return BaseBlockNode.getMarkClassName(this.__type);
+  }
+  /**
+   * 导出DOM
+   * @returns 
+   */
+  exportDOM() {
+    const element = document.createElement("div");
+    if (!element.classList.contains(this.getMarkClassName())) {
+      element.classList.add(this.getMarkClassName());
+    }
+    return { element };
+  }
+  /**
+   * 创建渲染DOM
+   * @param config 
+   * @returns 
+   */
+  createDOM(config) {
+    const el = this.exportDOM().element;
+    el.setAttribute("node-key", this.__key);
+    return el;
+  }
+  /**
+   * 更新DOM
+   * @param prevNode 
+   * @param dom 
+   * @param config 
+   * @returns 
+   */
+  updateDOM(prevNode, dom, config) {
+    return false;
+  }
+  /**
+   * 非内联
+   * @returns 
+   */
+  isInline() {
+    return false;
+  }
+}
+exports.BaseBlockNode = BaseBlockNode;
+//# sourceMappingURL=BaseBlockNode.js.map

package/dist/cjs/components/basic/doc-editor/plugins/RichTextPlugin/nodes/BaseBlockNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseBlockNode.js","sources":["../../../../../../../../src/components/basic/doc-editor/plugins/RichTextPlugin/nodes/BaseBlockNode.ts"],"sourcesContent":["import type {\r\n  DOMExportOutput,\r\n  EditorConfig,\r\n  NodeKey,\r\n  Spread,\r\n  SerializedElementNode,\r\n\r\n} from 'lexical'\r\nimport {  isBlockDomNode, $isBlockElementNode,ElementNode } from 'lexical'\r\nimport { type Component} from \"vue\"\r\n \r\n/**\r\n * 可编辑组件块节点\r\n */\r\nexport type SerializedBlockNode = Spread<{},SerializedElementNode>\r\n\r\n// 基础类标识\r\nconst BaseMarkClassName = \"mk-doc-block\";\r\n\r\n/**\r\n * 定义组件块节点\r\n */\r\nexport class BaseBlockNode extends ElementNode {\r\n\r\n  constructor(type: string,  key?: NodeKey) {\r\n    super(key)\r\n    this.__type = type\r\n  }\r\n\r\n   /**\r\n   * 获取指定类型模块类标识\r\n   * @param type \r\n   * @returns \r\n   */\r\n   static getMarkClassName(type:string): string {\r\n    return `${BaseMarkClassName}__${type}`\r\n  }\r\n\r\n  /**\r\n   * 是否是指定类型模块\r\n   * @param dom \r\n   * @param type \r\n   * @returns \r\n   */\r\n  static hasBlockByType(dom: HTMLElement,type:string): boolean {\r\n    return dom.classList.contains(BaseBlockNode.getMarkClassName(type))\r\n  }\r\n\r\n  /**\r\n   * 导出json\r\n   * @returns \r\n   */\r\n  exportJSON(): SerializedBlockNode {\r\n    return {\r\n      ...super.exportJSON(),\r\n      type: this.__type,\r\n      version: 1\r\n    }\r\n  }\r\n\r\n  /**\r\n   * 获取标识类名\r\n   */\r\n  getMarkClassName(){\r\n    return BaseBlockNode.getMarkClassName(this.__type)\r\n  }\r\n\r\n  /**\r\n   * 导出DOM\r\n   * @returns \r\n   */\r\n  exportDOM(): DOMExportOutput {\r\n   \r\n    const element = document.createElement('div')\r\n\r\n    if (!element.classList.contains(this.getMarkClassName())) {\r\n      element.classList.add(this.getMarkClassName());\r\n    }\r\n\r\n    return { element }\r\n  }\r\n\r\n  /**\r\n   * 创建渲染DOM\r\n   * @param config \r\n   * @returns \r\n   */\r\n  createDOM(config: EditorConfig): HTMLElement {\r\n    const el = this.exportDOM().element as HTMLElement;\r\n    el.setAttribute(\"node-key\",this.__key)\r\n    return el;\r\n  }\r\n\r\n  /**\r\n   * 更新DOM\r\n   * @param prevNode \r\n   * @param dom \r\n   * @param config \r\n   * @returns \r\n   */\r\n  updateDOM(prevNode: BaseBlockNode, dom: HTMLElement, config: EditorConfig): boolean {\r\n    // console.log(\"Image Text updateDOM\",prevNode,dom);\r\n    // const position = this.__pos\r\n    // if (position !== prevNode.__pos) {\r\n    //   const className = `${config.theme.image} position-${position}`\r\n    //   if (className !== undefined) {\r\n    //     dom.className = className\r\n    //   }\r\n    // }\r\n    // const inner = dom.firstChild\r\n    // if (inner === null){ return true }\r\n    // super.updateDOM(prevNode, inner as HTMLElement, config)\r\n    return false\r\n  }\r\n\r\n  /**\r\n   * 非内联\r\n   * @returns \r\n   */\r\n  isInline(): boolean {\r\n    return false;\r\n  }\r\n\r\n}\r\n"],"names":["ElementNode"],"mappings":";;;AAiBA,MAAM,oBAAoB;AAKnB,MAAM,sBAAsBA,QAAAA,YAAY;AAAA,EAE7C,YAAY,MAAe,KAAe;AACxC,UAAM,GAAG;AACT,SAAK,SAAS;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOC,OAAO,iBAAiB,MAAqB;AACrC,WAAA,GAAG,iBAAiB,KAAK,IAAI;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,OAAO,eAAe,KAAiB,MAAsB;AAC3D,WAAO,IAAI,UAAU,SAAS,cAAc,iBAAiB,IAAI,CAAC;AAAA,EACpE;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,aAAkC;AACzB,WAAA;AAAA,MACL,GAAG,MAAM,WAAW;AAAA,MACpB,MAAM,KAAK;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA;AAAA;AAAA;AAAA,EAKA,mBAAkB;AACT,WAAA,cAAc,iBAAiB,KAAK,MAAM;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAA6B;AAErB,UAAA,UAAU,SAAS,cAAc,KAAK;AAE5C,QAAI,CAAC,QAAQ,UAAU,SAAS,KAAK,iBAAA,CAAkB,GAAG;AACxD,cAAQ,UAAU,IAAI,KAAK,iBAAkB,CAAA;AAAA,IAC/C;AAEA,WAAO,EAAE,QAAQ;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,UAAU,QAAmC;AACrC,UAAA,KAAK,KAAK,UAAA,EAAY;AACzB,OAAA,aAAa,YAAW,KAAK,KAAK;AAC9B,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,UAAU,UAAyB,KAAkB,QAA+B;AAY3E,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAoB;AACX,WAAA;AAAA,EACT;AAEF;;"}

package/dist/cjs/components/basic/doc-editor/plugins/RichTextPlugin/nodes/RichTextNode.js

@@ -58,6 +58,11 @@ class RichTextNode extends lexical.TextNode {
   constructor(text, key) {
     super(text, key);
   }
+  exportJSON() {
+    return {
+      ...super.exportJSON()
+    };
+  }
 }
 function convertBringAttentionToElement(domNode) {
   const b = domNode;

package/dist/cjs/components/basic/doc-editor/plugins/RichTextPlugin/nodes/RichTextNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextNode.js","sources":["../../../../../../../../src/components/basic/doc-editor/plugins/RichTextPlugin/nodes/RichTextNode.ts"],"sourcesContent":["\r\n\r\nimport type { DOMConversionMap, LexicalCommand, LexicalNode, NodeKey, SerializedTextNode } from 'lexical'\r\nimport { $isTextNode,TextNode,$createTextNode } from 'lexical'\r\n\r\n/**\r\n * 富文本的文本节点\r\n */\r\nexport class RichTextNode extends TextNode{\r\n\r\n  static getType(): string {\r\n    return \"rich-text\";\r\n  }\r\n\r\n  static clone(node: RichTextNode): RichTextNode {\r\n    return new RichTextNode(node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedTextNode): TextNode {\r\n    return TextNode.importJSON(serializedNode);\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    \r\n    return {\r\n      b: () => ({\r\n        conversion: convertBringAttentionToElement,\r\n        priority: 4\r\n      }),\r\n      code: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      em: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      i: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      s: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      span: () => ({\r\n        conversion: convertSpanElement,\r\n        priority: 4\r\n      }),\r\n      strong: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      sub: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      sup: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      u: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      })\r\n    };\r\n  }\r\n\r\n  constructor(text:string,key?: NodeKey) {\r\n    super(text,key)\r\n  }\r\n\r\n}\r\n\r\nfunction convertBringAttentionToElement(domNode:HTMLElement) {\r\n  const b = domNode;\r\n  const hasNormalFontWeight = b.style.fontWeight === \"normal\";\r\n  return {\r\n    forChild: applyTextFormatFromStyle(b.style, hasNormalFontWeight ? void 0 : \"bold\"),\r\n    node: null\r\n  };\r\n}\r\n\r\nvar nodeNameToTextFormat:any = {\r\n  code: \"code\",\r\n  em: \"italic\",\r\n  i: \"italic\",\r\n  s: \"strikethrough\",\r\n  strong: \"bold\",\r\n  sub: \"subscript\",\r\n  sup: \"superscript\",\r\n  u: \"underline\"\r\n};\r\nfunction convertTextFormatElement(domNode:HTMLElement) {\r\n  const format = nodeNameToTextFormat[domNode.nodeName.toLowerCase()];\r\n  if (format === void 0) {\r\n    return {\r\n      node: null\r\n    };\r\n  }\r\n  return {\r\n    forChild: applyTextFormatFromStyle(domNode.style, format),\r\n    node: null\r\n  };\r\n}\r\nfunction convertSpanElement(domNode:HTMLElement) {\r\n  const span = domNode;\r\n  const style = span.style;\r\n  return {\r\n    forChild: applyTextFormatFromStyle(style,null),\r\n    node: null\r\n  };\r\n}\r\n\r\nfunction applyTextFormatFromStyle(style:any, shouldApply:any) {\r\n  const fontWeight = style.fontWeight;\r\n  const textDecoration = style.textDecoration.split(\" \");\r\n  const hasBoldFontWeight = fontWeight === \"700\" || fontWeight === \"bold\";\r\n  const hasLinethroughTextDecoration = textDecoration.includes(\"line-through\");\r\n  const hasItalicFontStyle = style.fontStyle === \"italic\";\r\n  const hasUnderlineTextDecoration = textDecoration.includes(\"underline\");\r\n  const verticalAlign = style.verticalAlign;\r\n\r\n  return (lexicalNode:LexicalNode) => {\r\n    if (!$isTextNode(lexicalNode)) {\r\n      return lexicalNode;\r\n    }\r\n\r\n    let styleStr = \"\";\r\n\r\n    if(style.color){\r\n      styleStr += `color:${style.color};`\r\n    }\r\n    if(style.fontSize){\r\n      styleStr += `font-size:${style.fontSize};`\r\n    }\r\n    if(style.fontFamily){\r\n      styleStr += `font-family:${style.fontFamily};`\r\n    }\r\n    if(style.backgroundColor){\r\n      styleStr += `background-color:${style.backgroundColor};`\r\n    }\r\n\r\n    if(styleStr){\r\n      lexicalNode.setStyle(styleStr);\r\n    }\r\n\r\n\r\n    if (hasBoldFontWeight && !lexicalNode.hasFormat(\"bold\")) {\r\n      lexicalNode.toggleFormat(\"bold\");\r\n    }\r\n    if (hasLinethroughTextDecoration && !lexicalNode.hasFormat(\"strikethrough\")) {\r\n      lexicalNode.toggleFormat(\"strikethrough\");\r\n    }\r\n    if (hasItalicFontStyle && !lexicalNode.hasFormat(\"italic\")) {\r\n      lexicalNode.toggleFormat(\"italic\");\r\n    }\r\n    if (hasUnderlineTextDecoration && !lexicalNode.hasFormat(\"underline\")) {\r\n      lexicalNode.toggleFormat(\"underline\");\r\n    }\r\n    if (verticalAlign === \"sub\" && !lexicalNode.hasFormat(\"subscript\")) {\r\n      lexicalNode.toggleFormat(\"subscript\");\r\n    }\r\n    if (verticalAlign === \"super\" && !lexicalNode.hasFormat(\"superscript\")) {\r\n      lexicalNode.toggleFormat(\"superscript\");\r\n    }\r\n    if (shouldApply && !lexicalNode.hasFormat(shouldApply)) {\r\n      lexicalNode.toggleFormat(shouldApply);\r\n    }\r\n    return lexicalNode;\r\n  };\r\n}\r\n\r\n\r\n"],"names":["TextNode","$isTextNode"],"mappings":"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"}
+{"version":3,"file":"RichTextNode.js","sources":["../../../../../../../../src/components/basic/doc-editor/plugins/RichTextPlugin/nodes/RichTextNode.ts"],"sourcesContent":["\r\n\r\nimport type { DOMConversionMap, LexicalCommand, LexicalNode, NodeKey, SerializedTextNode } from 'lexical'\r\nimport { $isTextNode,TextNode,$createTextNode } from 'lexical'\r\n\r\n/**\r\n * 富文本的文本节点\r\n */\r\nexport class RichTextNode extends TextNode{\r\n\r\n  static getType(): string {\r\n    return \"rich-text\";\r\n  }\r\n\r\n  static clone(node: RichTextNode): RichTextNode {\r\n    return new RichTextNode(node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedTextNode): TextNode {\r\n    return TextNode.importJSON(serializedNode);\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    \r\n    return {\r\n      b: () => ({\r\n        conversion: convertBringAttentionToElement,\r\n        priority: 4\r\n      }),\r\n      code: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      em: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      i: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      s: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      span: () => ({\r\n        conversion: convertSpanElement,\r\n        priority: 4\r\n      }),\r\n      strong: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      sub: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      sup: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      u: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      })\r\n    };\r\n  }\r\n\r\n  constructor(text:string,key?: NodeKey) {\r\n    super(text,key)\r\n  }\r\n\r\n  exportJSON(): SerializedTextNode {\r\n    return {\r\n      ...super.exportJSON(),\r\n     \r\n    }\r\n  }\r\n}\r\n\r\nfunction convertBringAttentionToElement(domNode:HTMLElement) {\r\n  const b = domNode;\r\n  const hasNormalFontWeight = b.style.fontWeight === \"normal\";\r\n  return {\r\n    forChild: applyTextFormatFromStyle(b.style, hasNormalFontWeight ? void 0 : \"bold\"),\r\n    node: null\r\n  };\r\n}\r\n\r\nvar nodeNameToTextFormat:any = {\r\n  code: \"code\",\r\n  em: \"italic\",\r\n  i: \"italic\",\r\n  s: \"strikethrough\",\r\n  strong: \"bold\",\r\n  sub: \"subscript\",\r\n  sup: \"superscript\",\r\n  u: \"underline\"\r\n};\r\nfunction convertTextFormatElement(domNode:HTMLElement) {\r\n  const format = nodeNameToTextFormat[domNode.nodeName.toLowerCase()];\r\n  if (format === void 0) {\r\n    return {\r\n      node: null\r\n    };\r\n  }\r\n  return {\r\n    forChild: applyTextFormatFromStyle(domNode.style, format),\r\n    node: null\r\n  };\r\n}\r\nfunction convertSpanElement(domNode:HTMLElement) {\r\n  const span = domNode;\r\n  const style = span.style;\r\n  return {\r\n    forChild: applyTextFormatFromStyle(style,null),\r\n    node: null\r\n  };\r\n}\r\n\r\nfunction applyTextFormatFromStyle(style:any, shouldApply:any) {\r\n  const fontWeight = style.fontWeight;\r\n  const textDecoration = style.textDecoration.split(\" \");\r\n  const hasBoldFontWeight = fontWeight === \"700\" || fontWeight === \"bold\";\r\n  const hasLinethroughTextDecoration = textDecoration.includes(\"line-through\");\r\n  const hasItalicFontStyle = style.fontStyle === \"italic\";\r\n  const hasUnderlineTextDecoration = textDecoration.includes(\"underline\");\r\n  const verticalAlign = style.verticalAlign;\r\n\r\n  return (lexicalNode:LexicalNode) => {\r\n    if (!$isTextNode(lexicalNode)) {\r\n      return lexicalNode;\r\n    }\r\n\r\n    let styleStr = \"\";\r\n\r\n    if(style.color){\r\n      styleStr += `color:${style.color};`\r\n    }\r\n    if(style.fontSize){\r\n      styleStr += `font-size:${style.fontSize};`\r\n    }\r\n    if(style.fontFamily){\r\n      styleStr += `font-family:${style.fontFamily};`\r\n    }\r\n    if(style.backgroundColor){\r\n      styleStr += `background-color:${style.backgroundColor};`\r\n    }\r\n\r\n    if(styleStr){\r\n      lexicalNode.setStyle(styleStr);\r\n    }\r\n\r\n\r\n    if (hasBoldFontWeight && !lexicalNode.hasFormat(\"bold\")) {\r\n      lexicalNode.toggleFormat(\"bold\");\r\n    }\r\n    if (hasLinethroughTextDecoration && !lexicalNode.hasFormat(\"strikethrough\")) {\r\n      lexicalNode.toggleFormat(\"strikethrough\");\r\n    }\r\n    if (hasItalicFontStyle && !lexicalNode.hasFormat(\"italic\")) {\r\n      lexicalNode.toggleFormat(\"italic\");\r\n    }\r\n    if (hasUnderlineTextDecoration && !lexicalNode.hasFormat(\"underline\")) {\r\n      lexicalNode.toggleFormat(\"underline\");\r\n    }\r\n    if (verticalAlign === \"sub\" && !lexicalNode.hasFormat(\"subscript\")) {\r\n      lexicalNode.toggleFormat(\"subscript\");\r\n    }\r\n    if (verticalAlign === \"super\" && !lexicalNode.hasFormat(\"superscript\")) {\r\n      lexicalNode.toggleFormat(\"superscript\");\r\n    }\r\n    if (shouldApply && !lexicalNode.hasFormat(shouldApply)) {\r\n      lexicalNode.toggleFormat(shouldApply);\r\n    }\r\n    return lexicalNode;\r\n  };\r\n}\r\n\r\n\r\n"],"names":["TextNode","$isTextNode"],"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}