@maketribe/ms-app 3.2.22 → 3.2.24

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

@@ -0,0 +1,160 @@
+"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 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 (["src", "alt", "poster"].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 (["src", "alt", "poster"].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\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":"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"}

package/dist/cjs/components/basic/doc-editor/{lexical-vue/components/LexicalContentEditable.vue.js → plugins/RichTextPlugin/ContentEditable.vue.js}

@@ -1,22 +1,9 @@
 "use strict";
 const vue = require("vue");
-require("@lexical/text");
-require("@lexical/utils");
-const useMounted = require("../composables/useMounted.js");
-require("@lexical/overflow");
-require("lexical");
-require("tiny-invariant");
-require("@lexical/history");
-const useLexicalComposer = require("../composables/useLexicalComposer.js");
-require("@lexical/list");
-require("@lexical/dragon");
-require("@lexical/plain-text");
-require("@lexical/rich-text");
-require("@lexical/yjs");
-require("yjs");
+const lexicalVue = require("lexical-vue");
 const _hoisted_1 = ["id", "aria-activedescendant", "aria-autocomplete", "aria-controls", "aria-describedby", "aria-expanded", "aria-label", "aria-labelledby", "aria-multiline", "aria-owns", "aria-required", "autocapitalize", "autocomplete", "autocorrect", "contenteditable", "role", "spellcheck", "tabindex"];
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  __name: "LexicalContentEditable",
+  __name: "ContentEditable",
   props: {
     ariaActivedescendant: {},
     ariaAutocomplete: {},
@@ -40,9 +27,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   },
   setup(__props) {
     const root = vue.ref(null);
-    const editor = useLexicalComposer.useLexicalComposer();
+    const editor = lexicalVue.useLexicalComposer();
     const editable = vue.ref(false);
-    useMounted.useMounted(() => {
+    lexicalVue.useMounted(() => {
       if (root.value) {
         editor.setRootElement(root.value);
         editable.value = editor.isEditable();
@@ -79,4 +66,4 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   }
 });
 module.exports = _sfc_main;
-//# sourceMappingURL=LexicalContentEditable.vue.js.map
+//# sourceMappingURL=ContentEditable.vue.js.map

package/dist/{esm/components/basic/doc-editor/lexical-vue/components/LexicalContentEditable.vue.js.map → cjs/components/basic/doc-editor/plugins/RichTextPlugin/ContentEditable.vue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"LexicalContentEditable.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/lexical-vue/components/LexicalContentEditable.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { ref } from 'vue'\r\nimport { useLexicalComposer } from '../composables'\r\nimport { useMounted } from '../composables/useMounted'\r\n\r\nwithDefaults(defineProps<{\r\n  ariaActivedescendant?: string\r\n  ariaAutocomplete?: 'none' | 'inline' | 'list' | 'both'\r\n  ariaControls?: string\r\n  ariaDescribedby?: string\r\n  ariaExpanded?: boolean\r\n  ariaLabel?: string\r\n  ariaLabelledby?: string\r\n  ariaMultiline?: boolean\r\n  ariaOwns?: string\r\n  ariaRequired?: boolean\r\n  autoCapitalize?: boolean\r\n  autoComplete?: boolean\r\n  autoCorrect?: boolean\r\n  id?: string\r\n  editable?: boolean\r\n  role?: string\r\n  spellcheck?: boolean\r\n  tabindex?: number\r\n  enableGrammarly?: boolean\r\n}>(), {\r\n  role: 'textbox',\r\n  spellcheck: true,\r\n})\r\nconst root = ref<HTMLElement | null>(null)\r\nconst editor = useLexicalComposer()\r\n\r\nconst editable = ref(false)\r\n\r\nuseMounted(() => {\r\n  if (root.value) {\r\n    editor.setRootElement(root.value as HTMLElement)\r\n    editable.value = editor.isEditable()\r\n  }\r\n\r\n  return editor.registerEditableListener((currentIsEditable) => {\r\n    editable.value = currentIsEditable\r\n  })\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    :id=\"id\"\r\n    ref=\"root\"\r\n    class=\"mk-doc-editor-stage\"\r\n    :aria-activedescendant=\"!editable ? undefined : ariaActivedescendant\"\r\n    :aria-autocomplete=\"!editable ? undefined : ariaAutocomplete\"\r\n    :aria-controls=\"!editable ? undefined : ariaControls\"\r\n    :aria-describedby=\"ariaDescribedby\"\r\n    :aria-expanded=\"!editable ? undefined : role === 'combobox' ? !!ariaExpanded ? ariaExpanded : undefined : undefined\"\r\n    :aria-label=\"ariaLabel\"\r\n    :aria-labelledby=\"ariaLabelledby\"\r\n    :aria-multiline=\"ariaMultiline\"\r\n    :aria-owns=\"!editable ? undefined : ariaOwns\"\r\n    :aria-required=\"ariaRequired\"\r\n    :autocapitalize=\"`${autoCapitalize}`\"\r\n    :autocomplete=\"autoComplete\"\r\n    :autocorrect=\"`${autoCorrect}`\"\r\n    :contenteditable=\"editable\"\r\n    :role=\"!editable ? undefined : role\"\r\n    :spellcheck=\"spellcheck\"\r\n    :tabindex=\"tabindex\"\r\n  />\r\n</template>\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BM,UAAA,OAAO,IAAwB,IAAI;AACzC,UAAM,SAAS;AAET,UAAA,WAAW,IAAI,KAAK;AAE1B,eAAW,MAAM;AACf,UAAI,KAAK,OAAO;AACP,eAAA,eAAe,KAAK,KAAoB;AACtC,iBAAA,QAAQ,OAAO;MAC1B;AAEO,aAAA,OAAO,yBAAyB,CAAC,sBAAsB;AAC5D,iBAAS,QAAQ;AAAA,MAAA,CAClB;AAAA,IAAA,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ContentEditable.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/RichTextPlugin/ContentEditable.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { ref } from 'vue'\r\nimport { useLexicalComposer,useMounted } from 'lexical-vue'\r\n\r\nwithDefaults(defineProps<{\r\n  ariaActivedescendant?: string\r\n  ariaAutocomplete?: 'none' | 'inline' | 'list' | 'both'\r\n  ariaControls?: string\r\n  ariaDescribedby?: string\r\n  ariaExpanded?: boolean\r\n  ariaLabel?: string\r\n  ariaLabelledby?: string\r\n  ariaMultiline?: boolean\r\n  ariaOwns?: string\r\n  ariaRequired?: boolean\r\n  autoCapitalize?: boolean\r\n  autoComplete?: boolean\r\n  autoCorrect?: boolean\r\n  id?: string\r\n  editable?: boolean\r\n  role?: string\r\n  spellcheck?: boolean\r\n  tabindex?: number\r\n  enableGrammarly?: boolean\r\n}>(), {\r\n  role: 'textbox',\r\n  spellcheck: true,\r\n})\r\nconst root = ref<HTMLElement | null>(null)\r\nconst editor = useLexicalComposer()\r\n\r\nconst editable = ref(false)\r\n\r\nuseMounted(() => {\r\n  if (root.value) {\r\n    editor.setRootElement(root.value as HTMLElement)\r\n    editable.value = editor.isEditable()\r\n  }\r\n\r\n  return editor.registerEditableListener((currentIsEditable) => {\r\n    editable.value = currentIsEditable\r\n  })\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    :id=\"id\"\r\n    ref=\"root\"\r\n    class=\"mk-doc-editor-stage\"\r\n    :aria-activedescendant=\"!editable ? undefined : ariaActivedescendant\"\r\n    :aria-autocomplete=\"!editable ? undefined : ariaAutocomplete\"\r\n    :aria-controls=\"!editable ? undefined : ariaControls\"\r\n    :aria-describedby=\"ariaDescribedby\"\r\n    :aria-expanded=\"!editable ? undefined : role === 'combobox' ? !!ariaExpanded ? ariaExpanded : undefined : undefined\"\r\n    :aria-label=\"ariaLabel\"\r\n    :aria-labelledby=\"ariaLabelledby\"\r\n    :aria-multiline=\"ariaMultiline\"\r\n    :aria-owns=\"!editable ? undefined : ariaOwns\"\r\n    :aria-required=\"ariaRequired\"\r\n    :autocapitalize=\"`${autoCapitalize}`\"\r\n    :autocomplete=\"autoComplete\"\r\n    :autocorrect=\"`${autoCorrect}`\"\r\n    :contenteditable=\"editable\"\r\n    :role=\"!editable ? undefined : role\"\r\n    :spellcheck=\"spellcheck\"\r\n    :tabindex=\"tabindex\">\r\n    </div>\r\n</template>\r\n"],"names":["ref","useLexicalComposer","useMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BM,UAAA,OAAOA,QAAwB,IAAI;AACzC,UAAM,SAASC,WAAAA;AAET,UAAA,WAAWD,QAAI,KAAK;AAE1BE,eAAAA,WAAW,MAAM;AACf,UAAI,KAAK,OAAO;AACP,eAAA,eAAe,KAAK,KAAoB;AACtC,iBAAA,QAAQ,OAAO;MAC1B;AAEO,aAAA,OAAO,yBAAyB,CAAC,sBAAsB;AAC5D,iBAAS,QAAQ;AAAA,MAAA,CAClB;AAAA,IAAA,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/RichTextPlugin/ContentEditable.vue2.js

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

package/dist/cjs/components/basic/doc-editor/plugins/RichTextPlugin/ContentEditable.vue2.js.map

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

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

@@ -0,0 +1,13 @@
+"use strict";
+const vue = require("vue");
+const lexicalVue = require("lexical-vue");
+const DecoratedTeleports = vue.defineComponent({
+  name: "LexicalDecoratedTeleports",
+  setup() {
+    const editor = lexicalVue.useLexicalComposer();
+    const decorators = lexicalVue.useDecorators(editor);
+    return () => decorators.value;
+  }
+});
+module.exports = DecoratedTeleports;
+//# sourceMappingURL=DecoratedTeleports.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DecoratedTeleports.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/RichTextPlugin/DecoratedTeleports.ts"],"sourcesContent":["import { defineComponent } from 'vue'\r\nimport { useLexicalComposer,useDecorators } from 'lexical-vue'\r\n\r\nexport default defineComponent({\r\n  name: 'LexicalDecoratedTeleports',\r\n  setup() {\r\n    const editor = useLexicalComposer()\r\n    const decorators = useDecorators(editor)\r\n\r\n    return () => decorators.value\r\n  },\r\n})\r\n"],"names":["defineComponent","useLexicalComposer","useDecorators"],"mappings":";;;AAGA,MAAA,qBAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,QAAQ;AACN,UAAM,SAASC,WAAAA;AACT,UAAA,aAAaC,yBAAc,MAAM;AAEvC,WAAO,MAAM,WAAW;AAAA,EAC1B;AACF,CAAC;;"}

package/dist/cjs/components/basic/doc-editor/{lexical-vue/components/LexicalRichTextPlugin.vue.js → plugins/RichTextPlugin/index.vue.js}

@@ -1,34 +1,27 @@
 "use strict";
 const vue = require("vue");
-const useCanShowPlaceholder = require("../composables/useCanShowPlaceholder.js");
-require("@lexical/overflow");
-require("@lexical/text");
-require("@lexical/utils");
+const lexicalVue = require("lexical-vue");
 const lexical = require("lexical");
-require("tiny-invariant");
-require("@lexical/history");
-const useLexicalComposer = require("../composables/useLexicalComposer.js");
-require("@lexical/list");
-require("@lexical/dragon");
-require("@lexical/plain-text");
-const useRichTextSetup = require("../composables/useRichTextSetup.js");
-require("@lexical/rich-text");
-require("@lexical/yjs");
-require("yjs");
-const LexicalDecoratedTeleports = require("./LexicalDecoratedTeleports.js");
 const html = require("@lexical/html");
+const ContentEditable_vue_vue_type_script_setup_true_lang = require("./ContentEditable.vue.js");
+const DecoratedTeleports = require("./DecoratedTeleports.js");
 const _hoisted_1 = { class: "mk-doc-editor__stage__editable" };
+const _hoisted_2 = {
+  key: 0,
+  class: "mk-doc-editor__stage__placeholder mk-doc__paragraph"
+};
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  __name: "LexicalRichTextPlugin",
+  __name: "index",
   props: {
-    content: { type: String, default: `` }
+    content: { type: String, default: `` },
+    placeholder: { type: String, default: `` }
   },
   emits: ["change"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const props = __props;
-    const editor = useLexicalComposer.useLexicalComposer();
-    const canShowPlaceholder = useCanShowPlaceholder.useCanShowPlaceholder(editor);
+    const editor = lexicalVue.useLexicalComposer();
+    const canShowPlaceholder = lexicalVue.useCanShowPlaceholder(editor);
     const parser = new DOMParser();
     const htmlContent = vue.ref("");
     const contentIsEmpty = vue.computed(() => htmlContent.value == `<p class="mk-doc__paragraph"><br></p>` || !htmlContent.value);
@@ -42,10 +35,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             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);
           }
         });
       }
@@ -60,15 +52,15 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       });
       vue.onUnmounted(() => unregisterMergeListener());
     });
-    useRichTextSetup.useRichTextSetup(editor);
+    lexicalVue.useRichTextSetup(editor);
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        vue.renderSlot(_ctx.$slots, "contentEditable"),
-        vue.unref(canShowPlaceholder) && contentIsEmpty.value ? vue.renderSlot(_ctx.$slots, "placeholder", { key: 0 }) : vue.createCommentVNode("", true),
-        vue.createVNode(vue.unref(LexicalDecoratedTeleports))
+        vue.createVNode(ContentEditable_vue_vue_type_script_setup_true_lang),
+        vue.unref(canShowPlaceholder) && contentIsEmpty.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, vue.toDisplayString(props.placeholder), 1)) : vue.createCommentVNode("", true),
+        vue.createVNode(vue.unref(DecoratedTeleports))
       ]);
     };
   }
 });
 module.exports = _sfc_main;
-//# sourceMappingURL=LexicalRichTextPlugin.vue.js.map
+//# sourceMappingURL=index.vue.js.map

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

@@ -0,0 +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\"]);\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/index.vue2.js

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

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

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

package/dist/cjs/components/basic/doc-editor/plugins/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;;"}