@maketribe/ms-app 3.2.24 → 3.2.26

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

@@ -1,13 +1,19 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
-const decoratorModule = require("./decorator-module.js");
-require("@lexical/utils");
+const elementBlock = require("./element-block.js");
 require("lexical");
-require("lexical-vue");
 const DEVICE_VIEW_MODE = vue.ref("pc");
-exports.REMOVE_DECORATORMODULE_COMMAND = decoratorModule.REMOVE_DECORATORMODULE_COMMAND;
-exports.SELECTED_DECORATORMODULE_COMMAND = decoratorModule.SELECTED_DECORATORMODULE_COMMAND;
-exports.UPDATE_DECORATORMODULE_TOOLBAR_POS_COMMAND = decoratorModule.UPDATE_DECORATORMODULE_TOOLBAR_POS_COMMAND;
+const ToolbarExtendPlugins = vue.reactive([]);
+const registerDocEditorToolbarExtend = function(options) {
+  ToolbarExtendPlugins.push(options);
+  ToolbarExtendPlugins.sort((a, b) => a.sort < b.sort ? 1 : -1);
+};
+exports.REMOVE_ELEMENTBLOCK_COMMAND = elementBlock.REMOVE_ELEMENTBLOCK_COMMAND;
+exports.SELECTED_ELEMENTBLOCK_COMMAND = elementBlock.SELECTED_ELEMENTBLOCK_COMMAND;
+exports.UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND = elementBlock.UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND;
+exports.useElementBlockSelection = elementBlock.useElementBlockSelection;
 exports.DEVICE_VIEW_MODE = DEVICE_VIEW_MODE;
+exports.ToolbarExtendPlugins = ToolbarExtendPlugins;
+exports.registerDocEditorToolbarExtend = registerDocEditorToolbarExtend;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/components/basic/doc-editor/core/index.ts"],"sourcesContent":["\r\nimport { ref,watch } from \"vue\"\r\nimport {\r\n  useLexicalComposer\r\n} from \"lexical-vue\";\r\nexport * from \"./decorator-module\"\r\nexport * from \"./element-module\"\r\nexport * from \"./utils\"\r\nimport { UPDATE_DECORATORMODULE_TOOLBAR_POS_COMMAND } from \"./decorator-module\"\r\n\r\nexport type DeviceVieeMode = 'pc' | 'mobile';\r\n\r\nexport const DEVICE_VIEW_MODE = ref<DeviceVieeMode>(\"pc\")\r\n\r\n"],"names":["ref"],"mappings":";;;;;;;AAYa,MAAA,mBAAmBA,QAAoB,IAAI;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/basic/doc-editor/core/index.ts"],"sourcesContent":["\r\nimport { ref,reactive } from \"vue\"\r\nexport * from \"./element-block\"\r\nexport * from \"./utils\"\r\n\r\n/**\r\n * 设备显示模式\r\n */\r\nexport const DEVICE_VIEW_MODE = ref<'pc' | 'mobile'>(\"pc\")\r\n\r\n/**\r\n * 工具条扩展\r\n */\r\nexport type ToolbarExtendPlugin = {\r\n  icon: string;\r\n  text:string,\r\n  action:Function,\r\n  sort:number\r\n};\r\n\r\n/**\r\n * 插入的插件列表\r\n */\r\nexport const ToolbarExtendPlugins = reactive<ToolbarExtendPlugin[]>([]);\r\n\r\n/**\r\n * 注册工具条的扩展\r\n * @param options \r\n */\r\nexport const registerDocEditorToolbarExtend = function(options:ToolbarExtendPlugin){\r\n  ToolbarExtendPlugins.push(options);\r\n  ToolbarExtendPlugins.sort((a,b)=>a.sort<b.sort ? 1:-1);\r\n}\r\n\r\n\r\n"],"names":["ref","reactive"],"mappings":";;;;;AAQa,MAAA,mBAAmBA,QAAqB,IAAI;AAe5C,MAAA,uBAAuBC,IAAgC,SAAA,EAAE;AAMzD,MAAA,iCAAiC,SAAS,SAA4B;AACjF,uBAAqB,KAAK,OAAO;AACZ,uBAAA,KAAK,CAAC,GAAE,MAAI,EAAE,OAAK,EAAE,OAAO,IAAE,EAAE;AACvD;;;;;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../../src/components/basic/doc-editor/core/utils.ts"],"sourcesContent":["import type { LexicalEditor, NodeKey } from 'lexical'\r\n\r\nimport {\r\n  $createNodeSelection,\r\n  $getNodeByKey,\r\n  $getSelection,\r\n  $isNodeSelection,\r\n  $setSelection,\r\n} from 'lexical'\r\nimport {  unref } from 'vue'\r\n\r\n// isNodeSelected \r\nexport const isNodeSelected = function (editor: LexicalEditor, key: NodeKey): boolean {\r\n  return editor.getEditorState().read(() => {\r\n    const node = $getNodeByKey(key)\r\n    if (node === null)\r\n      return false\r\n    return node.isSelected()\r\n  })\r\n}\r\n\r\n// 取消选中\r\nexport const clearSelection = (editor: LexicalEditor) => {\r\n  editor.update(() => {\r\n    const selection = $getSelection()\r\n    if ($isNodeSelection(selection))\r\n      (selection).clear()\r\n  })\r\n}\r\n\r\n// 设置选中\r\nexport const setSelected = (editor: LexicalEditor,selected: boolean,key:string) => {\r\n  editor.update(() => {\r\n    let selection = $getSelection()\r\n\r\n    if (!$isNodeSelection(selection)) {\r\n      selection = $createNodeSelection()\r\n      $setSelection(selection)\r\n    }\r\n    if ($isNodeSelection(selection)) {\r\n      if (selected)\r\n        selection.add(unref(key))\r\n      else\r\n        selection.delete(unref(key))\r\n    }\r\n  })\r\n}\r\n\r\n"],"names":["$getNodeByKey","$getSelection","$isNodeSelection","$createNodeSelection","$setSelection","unref"],"mappings":";;;;AAYa,MAAA,iBAAiB,SAAU,QAAuB,KAAuB;AACpF,SAAO,OAAO,iBAAiB,KAAK,MAAM;AAClC,UAAA,OAAOA,sBAAc,GAAG;AAC9B,QAAI,SAAS;AACJ,aAAA;AACT,WAAO,KAAK;EAAW,CACxB;AACH;AAGa,MAAA,iBAAiB,CAAC,WAA0B;AACvD,SAAO,OAAO,MAAM;AAClB,UAAM,YAAYC,QAAAA;AAClB,QAAIC,QAAAA,iBAAiB,SAAS;AAC3B,gBAAW,MAAM;AAAA,EAAA,CACrB;AACH;AAGO,MAAM,cAAc,CAAC,QAAsB,UAAkB,QAAe;AACjF,SAAO,OAAO,MAAM;AAClB,QAAI,YAAYD,QAAAA;AAEZ,QAAA,CAACC,QAAAA,iBAAiB,SAAS,GAAG;AAChC,kBAAYC,QAAqB,qBAAA;AACjCC,cAAA,cAAc,SAAS;AAAA,IACzB;AACI,QAAAF,QAAAA,iBAAiB,SAAS,GAAG;AAEnB,gBAAA,IAAIG,UAAM,GAAG,CAAC;AAAA,IAG5B;AAAA,EAAA,CACD;AACH;;;;"}
+{"version":3,"file":"utils.js","sources":["../../../../../../src/components/basic/doc-editor/core/utils.ts"],"sourcesContent":["import type { LexicalEditor, NodeKey } from 'lexical'\r\n\r\nimport {\r\n  $createNodeSelection,\r\n  $getNodeByKey,\r\n  $getSelection,\r\n  $isNodeSelection,\r\n  $setSelection,\r\n} from 'lexical'\r\nimport {  unref } from 'vue'\r\n\r\n// isNodeSelected  \r\nexport const isNodeSelected = function (editor: LexicalEditor, key: NodeKey): boolean {\r\n  return editor.getEditorState().read(() => {\r\n    const node = $getNodeByKey(key)\r\n    if (node === null)\r\n      return false\r\n    return node.isSelected()\r\n  })\r\n}\r\n\r\n// 取消选中\r\nexport const clearSelection = (editor: LexicalEditor) => {\r\n  editor.update(() => {\r\n    const selection = $getSelection()\r\n    if ($isNodeSelection(selection))\r\n      (selection).clear()\r\n  })\r\n}\r\n\r\n// 设置选中\r\nexport const setSelected = (editor: LexicalEditor,selected: boolean,key:string) => {\r\n  editor.update(() => {\r\n    let selection = $getSelection()\r\n\r\n    if (!$isNodeSelection(selection)) {\r\n      selection = $createNodeSelection()\r\n      $setSelection(selection)\r\n    }\r\n    if ($isNodeSelection(selection)) {\r\n      if (selected)\r\n        selection.add(unref(key))\r\n      else\r\n        selection.delete(unref(key))\r\n    }\r\n  })\r\n}\r\n\r\n"],"names":["$getNodeByKey","$getSelection","$isNodeSelection","$createNodeSelection","$setSelection","unref"],"mappings":";;;;AAYa,MAAA,iBAAiB,SAAU,QAAuB,KAAuB;AACpF,SAAO,OAAO,iBAAiB,KAAK,MAAM;AAClC,UAAA,OAAOA,sBAAc,GAAG;AAC9B,QAAI,SAAS;AACJ,aAAA;AACT,WAAO,KAAK;EAAW,CACxB;AACH;AAGa,MAAA,iBAAiB,CAAC,WAA0B;AACvD,SAAO,OAAO,MAAM;AAClB,UAAM,YAAYC,QAAAA;AAClB,QAAIC,QAAAA,iBAAiB,SAAS;AAC3B,gBAAW,MAAM;AAAA,EAAA,CACrB;AACH;AAGO,MAAM,cAAc,CAAC,QAAsB,UAAkB,QAAe;AACjF,SAAO,OAAO,MAAM;AAClB,QAAI,YAAYD,QAAAA;AAEZ,QAAA,CAACC,QAAAA,iBAAiB,SAAS,GAAG;AAChC,kBAAYC,QAAqB,qBAAA;AACjCC,cAAA,cAAc,SAAS;AAAA,IACzB;AACI,QAAAF,QAAAA,iBAAiB,SAAS,GAAG;AAEnB,gBAAA,IAAIG,UAAM,GAAG,CAAC;AAAA,IAG5B;AAAA,EAAA,CACD;AACH;;;;"}

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

@@ -1,14 +1,15 @@
 "use strict";
 const vue = require("vue");
 const lexicalVue = require("lexical-vue");
-const index_vue_vue_type_script_setup_true_lang$4 = require("./plugins/AutoLinkPlugin/index.vue.js");
+const index_vue_vue_type_script_setup_true_lang$3 = require("./plugins/AutoLinkPlugin/index.vue.js");
 const index_vue_vue_type_script_setup_true_lang$2 = require("./plugins/ImagePlugin/index.vue.js");
-const index_vue_vue_type_script_setup_true_lang$3 = require("./plugins/ImageTextPlugin/index.vue.js");
 const index_vue_vue_type_script_setup_true_lang = require("./plugins/ToolbarPlugin/index.vue.js");
 const index_vue_vue_type_script_setup_true_lang$1 = require("./plugins/RichTextPlugin/index.vue.js");
-const index_vue_vue_type_script_setup_true_lang$6 = require("./plugins/DecoratorModuleToolbarPlugin/index.vue.js");
-const index_vue_vue_type_script_setup_true_lang$5 = require("./plugins/ModulePlugin/index.vue.js");
+const index_vue_vue_type_script_setup_true_lang$6 = require("./plugins/ElementBlockSelectionPlugin/index.vue.js");
+const index_vue_vue_type_script_setup_true_lang$4 = require("./plugins/ModulePlugin/index.vue.js");
+const index_vue_vue_type_script_setup_true_lang$5 = require("./plugins/GridPlugin/index.vue.js");
 const nodes = require("./plugins/nodes.js");
+const composables = require("./plugins/ModulePlugin/composables.js");
 const index = require("./core/index.js");
 const DocTheme = require("./themes/DocTheme.js");
 const docEditor = require("./themes/doc-editor.css.js");
@@ -62,6 +63,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       const style = document.createElement("style");
       style.setAttribute("type", "text/css");
       style.innerHTML = [docEditor, docTheme, docEditorEdit].join("\r\n");
+      style.innerHTML += composables.useModules().filter((item) => item.editorCss).map((item) => item.editorCss).join("\r\n");
       doc.head.append(style);
       props.js.split(",").filter((item) => !!item).forEach((path) => {
         const script = document.createElement("script");
@@ -81,6 +83,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         updateStage();
         return false;
       }, { immediate: true });
+      setTimeout(() => updateStage(), 500);
     });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createBlock(vue.unref(lexicalVue.LexicalComposer), { "initial-config": config }, {
@@ -122,6 +125,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               vue.renderSlot(_ctx.$slots, "after-extentions")
             ])
           ], 2),
+          vue.createVNode(vue.unref(lexicalVue.LexicalAutoFocusPlugin)),
+          vue.createVNode(vue.unref(lexicalVue.LexicalCheckListPlugin)),
+          vue.createVNode(vue.unref(lexicalVue.LexicalHashtagPlugin)),
+          vue.createVNode(vue.unref(lexicalVue.LexicalListPlugin)),
           vue.createVNode(vue.unref(lexicalVue.LexicalHistoryPlugin))
         ]),
         _: 3

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

@@ -1 +1 @@
-{"version":3,"file":"editor.vue.js","sources":["../../../../../src/components/basic/doc-editor/editor.vue"],"sourcesContent":["<template>\r\n  <LexicalComposer :initial-config=\"config\">\r\n    <div class=\"mk-doc-editor\" :class=\"DEVICE_VIEW_MODE\">\r\n      <ToolbarPlugin  :js=\"js\" :css=\"css\"  />\r\n      <div class=\"mk-doc-editor__stage_warp\">\r\n        <slot name=\"before-extentions\"></slot>\r\n        <div class=\"mk-doc-editor__stage_body\">\r\n          <slot name=\"header\"></slot>\r\n          <iframe title=\"iframe\" class=\"mk-doc-editor__stage_iframe\" ref=\"iframeContentRef\"></iframe>\r\n          <Teleport v-if=\"iframeBody\" :to=\"iframeBody\">\r\n            <RichTextPlugin :content=\"props.content\" @change=\"contentChangeHandle\" :placeholder=\"placeholder\">\r\n            </RichTextPlugin>\r\n            <ImagePlugin />\r\n            <ImageTextPlugin />\r\n            <AutoLinkPlugin />\r\n            <ModulePlugin />\r\n          </Teleport>\r\n          <DecoratorModuleToolbarPlugin />\r\n          <slot name=\"footer\"></slot>\r\n        </div>\r\n        <slot name=\"after-extentions\"></slot>\r\n      </div>\r\n      \r\n    </div>\r\n    <LexicalHistoryPlugin />\r\n  </LexicalComposer>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { defineOptions,defineProps,defineEmits,computed,ref,onMounted,watch } from \"vue\"\r\nimport { LexicalComposer, LexicalHistoryPlugin } from 'lexical-vue'\r\nimport { \r\n  ToolbarPlugin,\r\n  RichTextPlugin,\r\n  AutoLinkPlugin,\r\n  ImagePlugin,\r\n  ImageTextPlugin,\r\n  DecoratorModuleToolbarPlugin,\r\n  ModulePlugin\r\n} from \"./plugins\"\r\nimport { DEVICE_VIEW_MODE } from \"./core\"\r\n\r\nimport DocTheme from \"./themes/DocTheme\";\r\nimport DocNodes from \"./plugins/nodes\"\r\nimport DocEditorCss from \"./themes/doc-editor.css?raw\";\r\nimport DocEditorEditCss from \"./themes/doc-editor-edit.css?raw\";\r\nimport DocThemeCss from \"./themes/doc-theme.css?raw\";\r\n\r\n// 定义组件\r\ndefineOptions({ name: \"MKDocEditor\" })\r\n\r\n// 事件\r\nconst emit = defineEmits(['change']);\r\n\r\n// 参数\r\nconst props = defineProps({\r\n  placeholder:{type:String,default:\"这里输入正文...\"},\r\n  content:{ type:String,default:`` },\r\n  js:{ type:String,default:`` },\r\n  css:{ type:String,default:`` }\r\n})\r\n \r\n\r\n// 配置\r\nconst config = {\r\n  namespace: 'MyEditor',\r\n  theme: DocTheme,\r\n  nodes: [\r\n    ...DocNodes,\r\n  ],\r\n  onError(error:Error) {\r\n    // Catch any errors that occur during Lexical updates and log them\r\n    // or throw them as needed. If you don't throw them, Lexical will\r\n    // try to recover gracefully without losing user data.\r\n    console.error(error)\r\n  },\r\n}\r\n\r\n// iframe 编辑器\r\nconst iframeContentRef = ref(null as any);\r\nconst iframeBody = computed(()=>iframeContentRef.value?.contentWindow?.document?.body)\r\n\r\n//内容改变时\r\nconst updateStage = ()=>{\r\n  setTimeout(() => {\r\n    if(iframeBody.value?.scrollHeight > iframeBody.value?.offsetHeight){\r\n      iframeContentRef.value.style.height = (iframeBody.value?.scrollHeight + 10)+\"px\";\r\n    }\r\n  }, 10);\r\n}\r\nconst contentChangeHandle = (content:any)=>{\r\n  emit('change',content);\r\n  updateStage();\r\n}\r\n\r\nonMounted(()=>{\r\n\r\n  const doc = iframeContentRef.value?.contentWindow?.document;\r\n\r\n  // 样式\r\n  const style = document.createElement(\"style\");\r\n  style.setAttribute(\"type\",\"text/css\")\r\n  style.innerHTML = [DocEditorCss,DocThemeCss,DocEditorEditCss].join(\"\\r\\n\");\r\n  doc.head.append(style);\r\n\r\n  // 扩展的js和css\r\n  props.js.split(\",\").filter(item=>!!item).forEach(path=>{\r\n    const script = document.createElement(\"script\");\r\n    script.src = path;\r\n    script.setAttribute(\"crossorigin\",\"true\")\r\n    doc.head.append(script);\r\n  })\r\n  props.css.split(\",\").filter(item=>!!item).forEach(path=>{\r\n    const link = document.createElement(\"link\");\r\n    link.href = path;\r\n    link.setAttribute(\"rel\",\"stylesheet\")\r\n    link.setAttribute(\"crossorigin\",\"true\")\r\n    doc.head.append(link);\r\n  })\r\n\r\n  // 设备显示模式改变\r\n  watch(DEVICE_VIEW_MODE,(payload: string) => {\r\n    doc.body.style.fontSize = payload == \"pc\" ? \"14px\" : \"18px\";\r\n    updateStage();\r\n    return false\r\n  },{ immediate :true})\r\n});\r\n\r\n</script>\r\n"],"names":["DocNodes","ref","computed","onMounted","DocEditorCss","DocThemeCss","DocEditorEditCss","watch","DEVICE_VIEW_MODE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,UAAM,OAAO;AAGb,UAAM,QAAQ;AASd,UAAM,SAAS;AAAA,MACb,WAAW;AAAA,MACX,OAAO;AAAA,MACP,OAAO;AAAA,QACL,GAAGA;AAAAA,MACL;AAAA,MACA,QAAQ,OAAa;AAInB,gBAAQ,MAAM,KAAK;AAAA,MACrB;AAAA,IAAA;AAII,UAAA,mBAAmBC,QAAI,IAAW;AACxC,UAAM,aAAaC,IAAS,SAAA;;AAAI,gDAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC,aAAvC,mBAAiD;AAAA,KAAI;AAGrF,UAAM,cAAc,MAAI;AACtB,iBAAW,MAAM;;AACf,cAAG,gBAAW,UAAX,mBAAkB,kBAAe,gBAAW,UAAX,mBAAkB,eAAa;AACjE,2BAAiB,MAAM,MAAM,WAAU,gBAAW,UAAX,mBAAkB,gBAAe,KAAI;AAAA,QAC9E;AAAA,SACC,EAAE;AAAA,IAAA;AAED,UAAA,sBAAsB,CAAC,YAAc;AACzC,WAAK,UAAS,OAAO;AACT;IAAA;AAGdC,QAAAA,UAAU,MAAI;;AAEN,YAAA,OAAM,4BAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC;AAG7C,YAAA,QAAQ,SAAS,cAAc,OAAO;AACtC,YAAA,aAAa,QAAO,UAAU;AACpC,YAAM,YAAY,CAACC,WAAaC,UAAYC,aAAgB,EAAE,KAAK,MAAM;AACrE,UAAA,KAAK,OAAO,KAAK;AAGf,YAAA,GAAG,MAAM,GAAG,EAAE,OAAO,CAAM,SAAA,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAM,SAAA;AAC/C,cAAA,SAAS,SAAS,cAAc,QAAQ;AAC9C,eAAO,MAAM;AACN,eAAA,aAAa,eAAc,MAAM;AACpC,YAAA,KAAK,OAAO,MAAM;AAAA,MAAA,CACvB;AACK,YAAA,IAAI,MAAM,GAAG,EAAE,OAAO,CAAM,SAAA,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAM,SAAA;AAChD,cAAA,OAAO,SAAS,cAAc,MAAM;AAC1C,aAAK,OAAO;AACP,aAAA,aAAa,OAAM,YAAY;AAC/B,aAAA,aAAa,eAAc,MAAM;AAClC,YAAA,KAAK,OAAO,IAAI;AAAA,MAAA,CACrB;AAGKC,gBAAAC,MAAAA,kBAAiB,CAAC,YAAoB;AAC1C,YAAI,KAAK,MAAM,WAAW,WAAW,OAAO,SAAS;AACzC;AACL,eAAA;AAAA,MAAA,GACP,EAAE,WAAW,KAAA,CAAK;AAAA,IAAA,CACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"editor.vue.js","sources":["../../../../../src/components/basic/doc-editor/editor.vue"],"sourcesContent":["<template>\r\n  <LexicalComposer :initial-config=\"config\">\r\n    <div class=\"mk-doc-editor\" :class=\"DEVICE_VIEW_MODE\">\r\n      <ToolbarPlugin  :js=\"js\" :css=\"css\"  />\r\n      <div class=\"mk-doc-editor__stage_warp\">\r\n        <slot name=\"before-extentions\"></slot>\r\n        <div class=\"mk-doc-editor__stage_body\">\r\n          <slot name=\"header\"></slot>\r\n          <iframe title=\"iframe\" class=\"mk-doc-editor__stage_iframe\" ref=\"iframeContentRef\"></iframe>\r\n          <Teleport v-if=\"iframeBody\" :to=\"iframeBody\">\r\n            <RichTextPlugin :content=\"props.content\" @change=\"contentChangeHandle\" :placeholder=\"placeholder\">\r\n            </RichTextPlugin>\r\n            <ImagePlugin />\r\n            <AutoLinkPlugin />\r\n            <ModulePlugin />\r\n            <GridPlugin />\r\n          </Teleport>\r\n          <ElementBlockSelectionPlugin />\r\n          <slot name=\"footer\"></slot>\r\n        </div>\r\n        <slot name=\"after-extentions\"></slot>\r\n      </div>\r\n      \r\n    </div>\r\n    <LexicalAutoFocusPlugin />\r\n    <LexicalCheckListPlugin />\r\n    <LexicalHashtagPlugin />\r\n    <LexicalListPlugin />\r\n    <LexicalHistoryPlugin />\r\n  </LexicalComposer>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { defineOptions,defineProps,defineEmits,computed,ref,onMounted,watch } from \"vue\"\r\nimport {\r\n  LexicalComposer,\r\n  LexicalAutoFocusPlugin,\r\n  LexicalCheckListPlugin,\r\n  LexicalHashtagPlugin,\r\n  LexicalHistoryPlugin,\r\n  LexicalListPlugin,\r\n} from 'lexical-vue'\r\nimport { \r\n  ToolbarPlugin,\r\n  RichTextPlugin,\r\n  AutoLinkPlugin,\r\n  ImagePlugin,\r\n  ElementBlockSelectionPlugin,\r\n  GridPlugin,\r\n  ModulePlugin\r\n} from \"./plugins\"\r\nimport { useModules } from \"./plugins/ModulePlugin/composables\"\r\nimport { DEVICE_VIEW_MODE } from \"./core\"\r\n\r\nimport DocTheme from \"./themes/DocTheme\";\r\nimport DocNodes from \"./plugins/nodes\"\r\nimport DocEditorCss from \"./themes/doc-editor.css?raw\";\r\nimport DocEditorEditCss from \"./themes/doc-editor-edit.css?raw\";\r\nimport DocThemeCss from \"./themes/doc-theme.css?raw\";\r\n\r\n// 定义组件\r\ndefineOptions({ name: \"MKDocEditor\" })\r\n\r\n// 事件\r\nconst emit = defineEmits(['change']);\r\n\r\n// 参数\r\nconst props = defineProps({\r\n  placeholder:{type:String,default:\"这里输入正文...\"},\r\n  content:{ type:String,default:`` },\r\n  js:{ type:String,default:`` },\r\n  css:{ type:String,default:`` }\r\n})\r\n \r\n\r\n// 配置\r\nconst config = {\r\n  namespace: 'MyEditor',\r\n  theme: DocTheme,\r\n  nodes: [\r\n    ...DocNodes,\r\n  ],\r\n  onError(error:Error) {\r\n    // Catch any errors that occur during Lexical updates and log them\r\n    // or throw them as needed. If you don't throw them, Lexical will\r\n    // try to recover gracefully without losing user data.\r\n    console.error(error)\r\n  },\r\n}\r\n\r\n// iframe 编辑器\r\nconst iframeContentRef = ref(null as any);\r\nconst iframeBody = computed(()=>iframeContentRef.value?.contentWindow?.document?.body)\r\n\r\n//内容改变时\r\nconst updateStage = ()=>{\r\n  setTimeout(() => {\r\n    if(iframeBody.value?.scrollHeight > iframeBody.value?.offsetHeight){\r\n      iframeContentRef.value.style.height = (iframeBody.value?.scrollHeight + 10)+\"px\";\r\n    }\r\n  }, 10);\r\n}\r\nconst contentChangeHandle = (content:any)=>{\r\n  emit('change',content);\r\n  updateStage();\r\n}\r\n\r\nonMounted(()=>{\r\n\r\n  const doc = iframeContentRef.value?.contentWindow?.document;\r\n\r\n  // 样式\r\n  const style = document.createElement(\"style\");\r\n  style.setAttribute(\"type\",\"text/css\")\r\n\r\n  // 默认样式\r\n  style.innerHTML = [DocEditorCss,DocThemeCss,DocEditorEditCss].join(\"\\r\\n\");\r\n\r\n  //模块渲染样式\r\n  style.innerHTML += useModules().filter(item=>item.editorCss).map(item=>item.editorCss).join(\"\\r\\n\");\r\n\r\n  doc.head.append(style);\r\n\r\n  // 扩展的js和css\r\n  props.js.split(\",\").filter(item=>!!item).forEach(path=>{\r\n    const script = document.createElement(\"script\");\r\n    script.src = path;\r\n    script.setAttribute(\"crossorigin\",\"true\")\r\n    doc.head.append(script);\r\n  })\r\n  props.css.split(\",\").filter(item=>!!item).forEach(path=>{\r\n    const link = document.createElement(\"link\");\r\n    link.href = path;\r\n    link.setAttribute(\"rel\",\"stylesheet\")\r\n    link.setAttribute(\"crossorigin\",\"true\")\r\n    doc.head.append(link);\r\n  })\r\n\r\n  // 设备显示模式改变\r\n  watch(DEVICE_VIEW_MODE,(payload: string) => {\r\n    doc.body.style.fontSize = payload == \"pc\" ? \"14px\" : \"18px\";\r\n    updateStage();\r\n    return false\r\n  },{ immediate :true})\r\n\r\n  // 初始化计算舞台\r\n  setTimeout(()=> updateStage(),500)\r\n});\r\n\r\n</script>\r\n"],"names":["DocNodes","ref","computed","onMounted","DocEditorCss","DocThemeCss","DocEditorEditCss","useModules","watch","DEVICE_VIEW_MODE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,UAAM,OAAO;AAGb,UAAM,QAAQ;AASd,UAAM,SAAS;AAAA,MACb,WAAW;AAAA,MACX,OAAO;AAAA,MACP,OAAO;AAAA,QACL,GAAGA;AAAAA,MACL;AAAA,MACA,QAAQ,OAAa;AAInB,gBAAQ,MAAM,KAAK;AAAA,MACrB;AAAA,IAAA;AAII,UAAA,mBAAmBC,QAAI,IAAW;AACxC,UAAM,aAAaC,IAAS,SAAA;;AAAI,gDAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC,aAAvC,mBAAiD;AAAA,KAAI;AAGrF,UAAM,cAAc,MAAI;AACtB,iBAAW,MAAM;;AACf,cAAG,gBAAW,UAAX,mBAAkB,kBAAe,gBAAW,UAAX,mBAAkB,eAAa;AACjE,2BAAiB,MAAM,MAAM,WAAU,gBAAW,UAAX,mBAAkB,gBAAe,KAAI;AAAA,QAC9E;AAAA,SACC,EAAE;AAAA,IAAA;AAED,UAAA,sBAAsB,CAAC,YAAc;AACzC,WAAK,UAAS,OAAO;AACT;IAAA;AAGdC,QAAAA,UAAU,MAAI;;AAEN,YAAA,OAAM,4BAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC;AAG7C,YAAA,QAAQ,SAAS,cAAc,OAAO;AACtC,YAAA,aAAa,QAAO,UAAU;AAGpC,YAAM,YAAY,CAACC,WAAaC,UAAYC,aAAgB,EAAE,KAAK,MAAM;AAGzE,YAAM,aAAaC,YAAA,WAAA,EAAa,OAAO,UAAM,KAAK,SAAS,EAAE,IAAI,CAAM,SAAA,KAAK,SAAS,EAAE,KAAK,MAAM;AAE9F,UAAA,KAAK,OAAO,KAAK;AAGf,YAAA,GAAG,MAAM,GAAG,EAAE,OAAO,CAAM,SAAA,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAM,SAAA;AAC/C,cAAA,SAAS,SAAS,cAAc,QAAQ;AAC9C,eAAO,MAAM;AACN,eAAA,aAAa,eAAc,MAAM;AACpC,YAAA,KAAK,OAAO,MAAM;AAAA,MAAA,CACvB;AACK,YAAA,IAAI,MAAM,GAAG,EAAE,OAAO,CAAM,SAAA,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAM,SAAA;AAChD,cAAA,OAAO,SAAS,cAAc,MAAM;AAC1C,aAAK,OAAO;AACP,aAAA,aAAa,OAAM,YAAY;AAC/B,aAAA,aAAa,eAAc,MAAM;AAClC,YAAA,KAAK,OAAO,IAAI;AAAA,MAAA,CACrB;AAGKC,gBAAAC,MAAAA,kBAAiB,CAAC,YAAoB;AAC1C,YAAI,KAAK,MAAM,WAAW,WAAW,OAAO,SAAS;AACzC;AACL,eAAA;AAAA,MAAA,GACP,EAAE,WAAW,KAAA,CAAK;AAGT,iBAAA,MAAK,eAAc,GAAG;AAAA,IAAA,CAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/basic/doc-editor/index.ts"],"sourcesContent":["import { withInstall } from \"@maketribe/utils\";\r\nimport Editor from \"./editor.vue\";\r\nimport { registerModule } from \"./plugins/ModulePlugin/composables\";\r\n\r\nexport const MKDocEditor = withInstall(Editor);\r\n\r\nexport { registerModule }\r\n\r\nexport default MKDocEditor;\r\n\r\n"],"names":["withInstall","Editor"],"mappings":";;;;AAIa,MAAA,cAAcA,kBAAYC,0CAAM;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/basic/doc-editor/index.ts"],"sourcesContent":["import { withInstall } from \"@maketribe/utils\";\r\nimport Editor from \"./editor.vue\";\r\nimport { registerDocModule } from \"./plugins/ModulePlugin/composables\";\r\n\r\nexport const MKDocEditor = withInstall(Editor);\r\n\r\nexport { registerDocModule }\r\n\r\nexport default MKDocEditor;\r\n\r\n"],"names":["withInstall","Editor"],"mappings":";;;;AAIa,MAAA,cAAcA,kBAAYC,0CAAM;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/{DecoratorModuleToolbarPlugin → ElementBlockSelectionPlugin}/index.vue.js

@@ -4,7 +4,7 @@ const lexical = require("lexical");
 const utils = require("@lexical/utils");
 const lexicalVue = require("lexical-vue");
 const index = require("../../core/index.js");
-const decoratorModule = require("../../core/decorator-module.js");
+const elementBlock = require("../../core/element-block.js");
 const lowPriority = 1;
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
@@ -14,7 +14,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const selectPayload = vue.shallowRef(null);
     const toolsPos = vue.reactive({ left: "px", top: "0px" });
     vue.watch(index.DEVICE_VIEW_MODE, () => {
-      editor.dispatchCommand(decoratorModule.UPDATE_DECORATORMODULE_TOOLBAR_POS_COMMAND, null);
+      editor.dispatchCommand(elementBlock.UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND, null);
     });
     const updateToolsPos = () => {
       vue.nextTick(() => {
@@ -34,10 +34,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     };
     lexicalVue.useMounted(() => {
       return utils.mergeRegister(
-        editor.registerCommand(decoratorModule.UPDATE_DECORATORMODULE_TOOLBAR_POS_COMMAND, () => updateToolsPos(), lowPriority),
-        editor.registerUpdateListener(({ editorState }) => editorState.read(() => updateToolsPos())),
+        editor.registerCommand(elementBlock.UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND, () => updateToolsPos(), lowPriority),
+        editor.registerUpdateListener(() => setTimeout(() => updateToolsPos(), 50)),
         // 选中模块
-        editor.registerCommand(decoratorModule.SELECTED_DECORATORMODULE_COMMAND, (payload) => {
+        editor.registerCommand(elementBlock.SELECTED_ELEMENTBLOCK_COMMAND, (payload) => {
           if (payload != null) {
             let toolsbarList = [];
             if (typeof payload.toolsbars == "function") {
@@ -60,11 +60,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           return updateToolsPos();
         }, lowPriority),
         // 删除模块
-        editor.registerCommand(decoratorModule.REMOVE_DECORATORMODULE_COMMAND, () => {
+        editor.registerCommand(elementBlock.REMOVE_ELEMENTBLOCK_COMMAND, () => {
           const selection = lexical.$getSelection();
           if (lexical.$isNodeSelection(selection)) {
             selection.getNodes().forEach((node) => node.remove());
-            editor.dispatchCommand(decoratorModule.SELECTED_DECORATORMODULE_COMMAND, null);
+            editor.dispatchCommand(elementBlock.SELECTED_ELEMENTBLOCK_COMMAND, null);
           }
           return false;
         }, lowPriority)
@@ -123,7 +123,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 vue.createVNode(_component_el_button, {
                   text: "",
                   type: "danger",
-                  onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(editor).dispatchCommand(vue.unref(decoratorModule.REMOVE_DECORATORMODULE_COMMAND), null))
+                  onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(editor).dispatchCommand(vue.unref(elementBlock.REMOVE_ELEMENTBLOCK_COMMAND), null))
                 }, {
                   default: vue.withCtx(() => [
                     vue.createVNode(_component_MKSvgIcon, { iconClass: `Delete` })

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ElementBlockSelectionPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { type CommandListenerPriority, $isNodeSelection, $getSelection } from 'lexical'\r\nimport { mergeRegister } from '@lexical/utils'\r\nimport { useLexicalComposer, useMounted } from 'lexical-vue'\r\nimport { ref, reactive, shallowRef, nextTick, watch } from 'vue'\r\nimport {\r\n  UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND, SELECTED_ELEMENTBLOCK_COMMAND, REMOVE_ELEMENTBLOCK_COMMAND,\r\n  type SelectElementBlocktEventType, DEVICE_VIEW_MODE,\r\n  SelectElementBlockToolsbarFunction\r\n} from \"../../core\"\r\n\r\n// 点击工具条按钮\r\nconst lowPriority: CommandListenerPriority = 1\r\nconst editor = useLexicalComposer()\r\nconst toolbarRef = ref<HTMLDivElement | null>(null)\r\nconst selectPayload = shallowRef<SelectElementBlocktEventType | null>(null);\r\nconst toolsPos = reactive({ left: \"px\", top: \"0px\" });\r\n\r\nwatch(DEVICE_VIEW_MODE, () => {\r\n  editor.dispatchCommand(UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND, null);\r\n})\r\n\r\n\r\n// 更新工具条坐标\r\nconst updateToolsPos = () => {\r\n\r\n  nextTick(() => {\r\n   \r\n    if (selectPayload.value != null && toolbarRef.value != null) {\r\n      const editIframeRect = (toolbarRef.value.getRootNode() as any).body.querySelector(\".mk-doc-editor__stage_iframe\").getBoundingClientRect();\r\n      const editBodyRect = (toolbarRef.value.getRootNode() as any).body.querySelector(\".mk-doc-editor__stage_body\").getBoundingClientRect();\r\n      const baseY = editIframeRect.y - editBodyRect.y;\r\n      const selectRect = selectPayload.value.element.getBoundingClientRect();\r\n      const toolsRect = toolbarRef.value.getBoundingClientRect();\r\n      if (toolsRect) {\r\n        // 中心点\r\n        toolsPos.top = Math.max(selectRect.y - toolsRect.height - 5 + baseY, 5 + baseY) + \"px\"\r\n        toolsPos.left = toolsRect.width / -2 + selectRect.x + selectRect.width / 2 + \"px\";\r\n      }\r\n    }\r\n  })\r\n  return false;\r\n}\r\n\r\nuseMounted(() => {\r\n  return mergeRegister(\r\n    editor.registerCommand(UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND, () => updateToolsPos(), lowPriority),\r\n    editor.registerUpdateListener(() =>  setTimeout(()=> updateToolsPos(),50)),\r\n    // 选中模块\r\n    editor.registerCommand(SELECTED_ELEMENTBLOCK_COMMAND, (payload: SelectElementBlocktEventType) => {\r\n\r\n      if (payload != null) {\r\n\r\n        let toolsbarList = [];\r\n\r\n        // 如果是函数的话\r\n        if (typeof payload.toolsbars == \"function\") {\r\n\r\n          const selection = $getSelection();\r\n\r\n          if ($isNodeSelection(selection)) {\r\n            toolsbarList = payload.toolsbars(selection) ?? [];\r\n          }\r\n          else {\r\n            toolsbarList = payload.toolsbars(null) ?? [];\r\n          }\r\n        }\r\n        else {\r\n          toolsbarList = payload.toolsbars;\r\n        }\r\n\r\n        selectPayload.value = {\r\n          element: payload.element,\r\n          toolsbars: toolsbarList\r\n        };\r\n      }\r\n      else {\r\n        selectPayload.value = null;\r\n      }\r\n\r\n      return updateToolsPos();\r\n    }, lowPriority),\r\n    // 删除模块\r\n    editor.registerCommand(REMOVE_ELEMENTBLOCK_COMMAND, () => {\r\n\r\n      const selection = $getSelection();\r\n\r\n      if ($isNodeSelection(selection)) {\r\n\r\n        selection.getNodes().forEach(node => node.remove());\r\n\r\n        // 没选中\r\n        editor.dispatchCommand(SELECTED_ELEMENTBLOCK_COMMAND, null);\r\n      }\r\n      return false;\r\n    }, lowPriority)\r\n    // editor.registerCommand(SELECTION_CHANGE_COMMAND, (payload, newEditor) => {\r\n\r\n    //   const selection = $getSelection();\r\n\r\n    //   if($isNodeSelection(selection)){\r\n\r\n    //     const node = selection.getNodes()[0]\r\n\r\n    //     console.log(node,node.getTopLevelElement());\r\n    //   }\r\n\r\n    //   return updateToolsPos();\r\n    // },lowPriority)\r\n  )\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n  <div v-if=\"selectPayload != null\" ref=\"toolbarRef\" class=\"mk-doc-editor-decorator-module-toolbar\" :style=\"toolsPos\">\r\n    <el-button-group>\r\n\r\n      <template v-for=\"item in selectPayload.toolsbars as any[]\">\r\n        <el-tooltip effect=\"dark\" :content=\"item.title\" placement=\"top\">\r\n          <el-button text @click=\"item.action()\">\r\n            <MKSvgIcon :iconClass=\"item.icon\" />\r\n          </el-button>\r\n        </el-tooltip>\r\n      </template>\r\n      <el-tooltip effect=\"dark\" content=\"删除\" placement=\"top\">\r\n        <el-button text type=\"danger\" @click=\"editor.dispatchCommand(REMOVE_ELEMENTBLOCK_COMMAND, null)\">\r\n          <MKSvgIcon :iconClass=\"`Delete`\" />\r\n        </el-button>\r\n      </el-tooltip>\r\n\r\n    </el-button-group>\r\n  </div>\r\n</template>\r\n"],"names":["useLexicalComposer","ref","shallowRef","reactive","watch","DEVICE_VIEW_MODE","UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND","nextTick","useMounted","mergeRegister","SELECTED_ELEMENTBLOCK_COMMAND","$getSelection","$isNodeSelection","REMOVE_ELEMENTBLOCK_COMMAND"],"mappings":";;;;;;;AAYA,MAAM,cAAuC;;;;AAC7C,UAAM,SAASA,WAAAA;AACT,UAAA,aAAaC,QAA2B,IAAI;AAC5C,UAAA,gBAAgBC,eAAgD,IAAI;AAC1E,UAAM,WAAWC,IAAAA,SAAS,EAAE,MAAM,MAAM,KAAK,OAAO;AAEpDC,QAAA,MAAMC,wBAAkB,MAAM;AACrB,aAAA,gBAAgBC,sDAAyC,IAAI;AAAA,IAAA,CACrE;AAID,UAAM,iBAAiB,MAAM;AAE3BC,UAAAA,SAAS,MAAM;AAEb,YAAI,cAAc,SAAS,QAAQ,WAAW,SAAS,MAAM;AACrD,gBAAA,iBAAkB,WAAW,MAAM,YAAA,EAAsB,KAAK,cAAc,8BAA8B,EAAE;AAC5G,gBAAA,eAAgB,WAAW,MAAM,YAAA,EAAsB,KAAK,cAAc,4BAA4B,EAAE;AACxG,gBAAA,QAAQ,eAAe,IAAI,aAAa;AAC9C,gBAAM,aAAa,cAAc,MAAM,QAAQ,sBAAsB;AAC/D,gBAAA,YAAY,WAAW,MAAM,sBAAsB;AACzD,cAAI,WAAW;AAEJ,qBAAA,MAAM,KAAK,IAAI,WAAW,IAAI,UAAU,SAAS,IAAI,OAAO,IAAI,KAAK,IAAI;AACzE,qBAAA,OAAO,UAAU,QAAQ,KAAK,WAAW,IAAI,WAAW,QAAQ,IAAI;AAAA,UAC/E;AAAA,QACF;AAAA,MAAA,CACD;AACM,aAAA;AAAA,IAAA;AAGTC,eAAAA,WAAW,MAAM;AACR,aAAAC,MAAA;AAAA,QACL,OAAO,gBAAgBH,aAAAA,yCAAyC,MAAM,eAAA,GAAkB,WAAW;AAAA,QACnG,OAAO,uBAAuB,MAAO,WAAW,MAAK,eAAe,GAAE,EAAE,CAAC;AAAA;AAAA,QAEzE,OAAO,gBAAgBI,4CAA+B,CAAC,YAA0C;AAE/F,cAAI,WAAW,MAAM;AAEnB,gBAAI,eAAe,CAAA;AAGf,gBAAA,OAAO,QAAQ,aAAa,YAAY;AAE1C,oBAAM,YAAYC,QAAAA;AAEd,kBAAAC,QAAAA,iBAAiB,SAAS,GAAG;AAC/B,+BAAe,QAAQ,UAAU,SAAS,KAAK,CAAA;AAAA,cAAC,OAE7C;AACH,+BAAe,QAAQ,UAAU,IAAI,KAAK,CAAA;AAAA,cAC5C;AAAA,YAAA,OAEG;AACH,6BAAe,QAAQ;AAAA,YACzB;AAEA,0BAAc,QAAQ;AAAA,cACpB,SAAS,QAAQ;AAAA,cACjB,WAAW;AAAA,YAAA;AAAA,UACb,OAEG;AACH,0BAAc,QAAQ;AAAA,UACxB;AAEA,iBAAO,eAAe;AAAA,WACrB,WAAW;AAAA;AAAA,QAEd,OAAO,gBAAgBC,aAAAA,6BAA6B,MAAM;AAExD,gBAAM,YAAYF,QAAAA;AAEd,cAAAC,QAAAA,iBAAiB,SAAS,GAAG;AAE/B,sBAAU,WAAW,QAAQ,CAAQ,SAAA,KAAK,QAAQ;AAG3C,mBAAA,gBAAgBF,4CAA+B,IAAI;AAAA,UAC5D;AACO,iBAAA;AAAA,WACN,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAA;AAAA,IAchB,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/GridPlugin/GridNode.js

@@ -0,0 +1,164 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lexical = require("lexical");
+class GridNode extends lexical.ElementNode {
+  constructor(attrs, key) {
+    super(key);
+    __publicField(this, "__attrs");
+    this.__attrs = attrs;
+  }
+  static getType() {
+    return "grid";
+  }
+  static hasGridNodeByElement(el) {
+    return el.classList.contains(GridNode.getMarkClassName()) ? el : null;
+  }
+  static getMarkClassName() {
+    return `mk-doc__${GridNode.getType()}`;
+  }
+  static getExtraClassName(el) {
+    return el.className.replace(GridNode.getMarkClassName(), "").trim();
+  }
+  static clone(node) {
+    return new GridNode(node.__attrs, node.__key);
+  }
+  static importJSON(serializedNode) {
+    return new GridNode(serializedNode.attrs);
+  }
+  static importDOM() {
+    return {
+      div: (domNode) => {
+        return GridNode.hasGridNodeByElement(domNode) ? {
+          conversion: () => {
+            return {
+              node: new GridNode({
+                class: GridNode.getExtraClassName(domNode),
+                width: domNode.style.width || "100%",
+                height: domNode.style.height,
+                flex: domNode.style.flex,
+                maxWidth: domNode.style.maxWidth,
+                maxHeight: domNode.style.maxHeight
+              })
+            };
+          },
+          priority: 1
+        } : null;
+      }
+    };
+  }
+  /**
+   * 设置属性
+   * @param pos 
+   */
+  setAttrs(data) {
+    const writable = this.getWritable();
+    Object.assign(writable.__attrs, data);
+  }
+  /**
+   * 获取属性
+   * @param pos 
+   */
+  getAttrs() {
+    return this.__attrs;
+  }
+  /**
+   * 导出JSON
+   * @returns 
+   */
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: this.getType(),
+      attrs: this.__attrs,
+      version: 1
+    };
+  }
+  /**
+   * 更新元素属性
+   * @param el 
+   */
+  updateElementAttr(el) {
+    Object.keys(this.__attrs).forEach((key) => {
+      if (["class", "overflowX"].indexOf(key) < 0) {
+        el.style[key] = this.__attrs[key];
+      }
+    });
+  }
+  /**
+   * 获取标识类
+   * @returns 
+   */
+  getMarkClassName() {
+    return `mk-doc__${this.getType()}`;
+  }
+  /**
+   * 导出DOM
+   * @returns 
+   */
+  exportDOM() {
+    const element = document.createElement("div");
+    this.updateElementAttr(element);
+    let extraClassName = GridNode.getExtraClassName(element);
+    if (extraClassName != this.__attrs.class) {
+      if (extraClassName) {
+        element.classList.remove(extraClassName);
+      }
+      if (this.__attrs.class) {
+        element.classList.add(this.__attrs.class);
+      }
+    }
+    if (!element.classList.contains(GridNode.getMarkClassName())) {
+      element.classList.add(GridNode.getMarkClassName());
+    }
+    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, el, config) {
+    this.updateElementAttr(el);
+    let extraClassName = GridNode.getExtraClassName(el).replace(this.getMarkClassName(), "").trim();
+    if (extraClassName != this.__attrs.class) {
+      if (extraClassName) {
+        el.classList.remove(extraClassName);
+      }
+      if (this.__attrs.class) {
+        el.classList.add(this.__attrs.class);
+      }
+    }
+    return false;
+  }
+  /**
+   * 非内联
+   * @returns 
+   */
+  isInline() {
+    return false;
+  }
+}
+function $isGridNode(node) {
+  return node instanceof GridNode;
+}
+exports.$isGridNode = $isGridNode;
+exports.GridNode = GridNode;
+//# sourceMappingURL=GridNode.js.map

package/dist/cjs/components/basic/doc-editor/plugins/GridPlugin/GridNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/GridNode.ts"],"sourcesContent":["\r\n\r\n\r\n\r\n\r\nimport type { DOMConversionMap, SerializedElementNode, LexicalNode, NodeKey, Spread,EditorConfig, DOMExportOutput } from 'lexical'\r\nimport { ElementNode } from 'lexical'\r\n\r\n/**\r\n * 容器属性\r\n */\r\nexport type GridNodeAttrType = {\r\n  class:string,\r\n  width:string,\r\n  height:string,\r\n  maxWidth:string,\r\n  maxHeight:string,\r\n  flex:string\r\n};\r\n\r\n/**\r\n * 节点序列化 \r\n */\r\nexport type SerializedGridNode = Spread<{ attrs:GridNodeAttrType },SerializedElementNode>\r\n\r\n/**\r\n * 格子\r\n */\r\nexport class GridNode extends ElementNode{\r\n\r\n  __attrs:GridNodeAttrType\r\n\r\n  static getType(): string { return \"grid\"; }\r\n\r\n  static hasGridNodeByElement(el:HTMLElement):HTMLElement|null{\r\n    return el.classList.contains(GridNode.getMarkClassName()) ? el : null;\r\n  }\r\n\r\n  static getMarkClassName(): string {\r\n    return `mk-doc__${GridNode.getType()}`\r\n  }\r\n\r\n  static getExtraClassName(el:HTMLElement){\r\n    return el.className.replace(GridNode.getMarkClassName(),\"\").trim();\r\n  }\r\n\r\n  static clone(node: GridNode): GridNode {\r\n    return new GridNode(node.__attrs,node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedGridNode): GridNode {\r\n    return new GridNode(serializedNode.attrs)\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      div : (domNode: HTMLElement) => {\r\n\r\n        return GridNode.hasGridNodeByElement(domNode) ? {\r\n\r\n          conversion: ()=>{ \r\n\r\n            return  { \r\n\r\n             node:new GridNode({\r\n                class:GridNode.getExtraClassName(domNode),\r\n                width:domNode.style.width || \"100%\",\r\n                height:domNode.style.height,\r\n                flex:domNode.style.flex,\r\n                maxWidth:domNode.style.maxWidth,\r\n                maxHeight:domNode.style.maxHeight\r\n              } as GridNodeAttrType) \r\n            };\r\n          },\r\n          priority: 1\r\n        } : null;\r\n      }\r\n    }\r\n  }\r\n\r\n  constructor(attrs:GridNodeAttrType,key?: NodeKey) {\r\n    super(key)\r\n    this.__attrs = attrs;\r\n  }\r\n\r\n  /**\r\n   * 设置属性\r\n   * @param pos \r\n   */\r\n  setAttrs(data?:GridNodeAttrType){\r\n    const writable = this.getWritable();\r\n    Object.assign(writable.__attrs,data)\r\n  }\r\n\r\n  /**\r\n   * 获取属性\r\n   * @param pos \r\n   */\r\n  getAttrs():GridNodeAttrType{\r\n    return this.__attrs;\r\n  }\r\n\r\n  /**\r\n   * 导出JSON\r\n   * @returns \r\n   */\r\n  exportJSON(): SerializedGridNode {\r\n    return {\r\n      ...super.exportJSON(),\r\n      type: this.getType(),\r\n      attrs:this.__attrs,\r\n      version: 1\r\n    }\r\n  }\r\n\r\n  /**\r\n   * 更新元素属性\r\n   * @param el \r\n   */\r\n  updateElementAttr(el:HTMLElement){\r\n    // 更新属性\r\n    Object.keys(this.__attrs).forEach((key:any)=>{\r\n      if([\"class\",\"overflowX\"].indexOf(key) < 0){\r\n        el.style[key] = (this.__attrs as any)[key];\r\n      }\r\n    })\r\n  }\r\n\r\n  /**\r\n   * 获取标识类\r\n   * @returns \r\n   */\r\n  getMarkClassName(): string {\r\n    return `mk-doc__${this.getType()}`\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    this.updateElementAttr(element);\r\n\r\n    // 移除老标识\r\n    let extraClassName = GridNode.getExtraClassName(element);\r\n\r\n    if(extraClassName != this.__attrs.class){\r\n\r\n      if(extraClassName){\r\n        element.classList.remove(extraClassName);\r\n      }\r\n\r\n      // 添加样式\r\n      if (this.__attrs.class) {\r\n        element.classList.add(this.__attrs.class);\r\n      }\r\n    }\r\n\r\n    // 标识格子\r\n    if (!element.classList.contains(GridNode.getMarkClassName())) {\r\n      element.classList.add(GridNode.getMarkClassName());\r\n    }\r\n\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\r\n    const el = this.exportDOM().element as HTMLElement;\r\n\r\n    el.setAttribute(\"node-key\",this.__key)\r\n\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: GridNode, el: HTMLElement, config: EditorConfig): boolean {\r\n    // 更新属性\r\n    \r\n    this.updateElementAttr(el);\r\n\r\n    // 移除老标识\r\n    let extraClassName = GridNode.getExtraClassName(el).replace(this.getMarkClassName(),\"\").trim();\r\n\r\n    if(extraClassName != this.__attrs.class){\r\n\r\n      if(extraClassName){\r\n        el.classList.remove(extraClassName);\r\n      }\r\n\r\n      if (this.__attrs.class) {\r\n        el.classList.add(this.__attrs.class);\r\n      }\r\n    }\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/**\r\n * 是否是格子\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isGridNode(\r\n  node: GridNode | LexicalNode | null | undefined,\r\n): node is GridNode {\r\n  return node instanceof GridNode\r\n}\r\n\r\n"],"names":["ElementNode"],"mappings":"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"}

package/dist/cjs/components/basic/doc-editor/plugins/GridPlugin/ImageTextGridNode.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lexical = require("lexical");
+const GridNode = require("./GridNode.js");
+const INSERT_IMAGETEXTGRID_COMMAND = lexical.createCommand("INSERT_IMAGETEXTGRID_COMMAND");
+class ImageTextGridNode extends GridNode.GridNode {
+  static getType() {
+    return "image-text";
+  }
+  static hasGridNodeByElement(el) {
+    return el.classList.contains(ImageTextGridNode.getMarkClassName()) ? el : null;
+  }
+  static getMarkClassName() {
+    return `mk-doc__${ImageTextGridNode.getType()}`;
+  }
+  static getExtraClassName(el) {
+    return GridNode.GridNode.getExtraClassName(el).replace(ImageTextGridNode.getMarkClassName(), "").trim();
+  }
+  static clone(node) {
+    return new ImageTextGridNode(node.__attrs, node.__key);
+  }
+  static importJSON(serializedNode) {
+    return new ImageTextGridNode(serializedNode.attrs);
+  }
+  static importDOM() {
+    return {
+      div: (domNode) => {
+        return ImageTextGridNode.hasGridNodeByElement(domNode) ? {
+          conversion: () => {
+            return {
+              node: new ImageTextGridNode({
+                class: ImageTextGridNode.getExtraClassName(domNode),
+                width: domNode.style.width || "100%",
+                height: domNode.style.height,
+                flex: domNode.style.flex,
+                maxWidth: domNode.style.maxWidth,
+                maxHeight: domNode.style.maxHeight
+              })
+            };
+          },
+          priority: 4
+        } : null;
+      }
+    };
+  }
+  constructor(attrs, key) {
+    super(attrs, key);
+  }
+  /**
+   * 设置属性
+   * @param pos 
+   */
+  setAttrs(data) {
+    const writable = this.getWritable();
+    Object.assign(writable.__attrs, data);
+  }
+  /**
+   * 获取属性
+   * @param pos 
+   */
+  getAttrs() {
+    return this.__attrs;
+  }
+  /**
+   * 导出JSON
+   * @returns 
+   */
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: this.getType(),
+      attrs: this.__attrs,
+      version: 1
+    };
+  }
+  /* 不允许空
+   * @returns 
+   */
+  canBeEmpty() {
+    return false;
+  }
+}
+function $isImageTextGridNode(node) {
+  return node instanceof ImageTextGridNode;
+}
+exports.$isImageTextGridNode = $isImageTextGridNode;
+exports.INSERT_IMAGETEXTGRID_COMMAND = INSERT_IMAGETEXTGRID_COMMAND;
+exports.ImageTextGridNode = ImageTextGridNode;
+//# sourceMappingURL=ImageTextGridNode.js.map

package/dist/cjs/components/basic/doc-editor/plugins/GridPlugin/ImageTextGridNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageTextGridNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/ImageTextGridNode.ts"],"sourcesContent":["import type { DOMConversionMap, LexicalCommand, LexicalNode, NodeKey, Spread, DOMExportOutput } from 'lexical'\r\nimport { createCommand,} from 'lexical'\r\nimport { type GridNodeAttrType , GridNode,SerializedGridNode } from \"./GridNode\"\r\n\r\n/**\r\n * 属性\r\n */\r\nexport type ImageTextGridNodeAttrType  = GridNodeAttrType & {};\r\n\r\n/**\r\n * 插入图文\r\n */\r\nexport const INSERT_IMAGETEXTGRID_COMMAND: LexicalCommand<undefined|null> = createCommand('INSERT_IMAGETEXTGRID_COMMAND')\r\n\r\n/**\r\n * 图文节点序列化\r\n */\r\nexport type SerializedImageTextGridNode = Spread<{},SerializedGridNode>\r\n\r\n/**\r\n * 图文格子\r\n */\r\nexport class ImageTextGridNode extends GridNode{\r\n\r\n  declare __attrs:ImageTextGridNodeAttrType\r\n\r\n  static getType(): string {\r\n    return \"image-text\";\r\n  }\r\n\r\n\r\n  static hasGridNodeByElement(el:HTMLElement):HTMLElement|null{\r\n    return el.classList.contains(ImageTextGridNode.getMarkClassName()) ? el : null;\r\n  }\r\n \r\n  static getMarkClassName(): string {\r\n    return `mk-doc__${ImageTextGridNode.getType()}`\r\n  }\r\n\r\n  static getExtraClassName(el:HTMLElement){\r\n    return GridNode.getExtraClassName(el).replace(ImageTextGridNode.getMarkClassName(),\"\").trim();\r\n  }\r\n\r\n  static clone(node: ImageTextGridNode): ImageTextGridNode {\r\n    return new ImageTextGridNode(node.__attrs,node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedImageTextGridNode): ImageTextGridNode {\r\n    return new ImageTextGridNode(serializedNode.attrs)\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      div : (domNode: HTMLElement) => {\r\n\r\n        return  ImageTextGridNode.hasGridNodeByElement(domNode) ? {\r\n\r\n          conversion: ()=>{ \r\n\r\n            return  { \r\n              node:new ImageTextGridNode({\r\n                class:ImageTextGridNode.getExtraClassName(domNode),\r\n                width:domNode.style.width || \"100%\",\r\n                height:domNode.style.height,\r\n                flex:domNode.style.flex,\r\n                maxWidth:domNode.style.maxWidth,\r\n                maxHeight:domNode.style.maxHeight,\r\n              } as ImageTextGridNodeAttrType) \r\n            };\r\n          },\r\n          priority: 4\r\n        } : null;\r\n      }\r\n    }\r\n  }\r\n\r\n  constructor(attrs:ImageTextGridNodeAttrType,key?: NodeKey) {\r\n    super(attrs,key)\r\n  }\r\n\r\n  /**\r\n   * 设置属性\r\n   * @param pos \r\n   */\r\n  setAttrs(data?:ImageTextGridNodeAttrType){\r\n    const writable = this.getWritable();\r\n    Object.assign(writable.__attrs,data)\r\n  }\r\n\r\n  /**\r\n   * 获取属性\r\n   * @param pos \r\n   */\r\n  getAttrs():ImageTextGridNodeAttrType{\r\n    return this.__attrs;\r\n  }\r\n  /**\r\n   * 导出JSON\r\n   * @returns \r\n   */\r\n  exportJSON(): SerializedGridNode {\r\n    return {\r\n      ...super.exportJSON(),\r\n      type: this.getType(),\r\n      attrs:this.__attrs,\r\n      version: 1\r\n    }\r\n  }\r\n \r\n\r\n  /* 不允许空\r\n   * @returns \r\n   */\r\n  canBeEmpty(): boolean {\r\n    return false\r\n  }\r\n}\r\n\r\n/**\r\n * 判断是否是图文节点\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isImageTextGridNode(\r\n  node: ImageTextGridNode | LexicalNode | null | undefined,\r\n): node is ImageTextGridNode {\r\n  return node instanceof ImageTextGridNode\r\n}\r\n"],"names":["createCommand","GridNode"],"mappings":";;;;AAYa,MAAA,+BAA+DA,sBAAc,8BAA8B;AAUjH,MAAM,0BAA0BC,SAAAA,SAAQ;AAAA,EAI7C,OAAO,UAAkB;AAChB,WAAA;AAAA,EACT;AAAA,EAGA,OAAO,qBAAqB,IAAgC;AAC1D,WAAO,GAAG,UAAU,SAAS,kBAAkB,kBAAkB,IAAI,KAAK;AAAA,EAC5E;AAAA,EAEA,OAAO,mBAA2B;AACzB,WAAA,WAAW,kBAAkB,QAAA,CAAS;AAAA,EAC/C;AAAA,EAEA,OAAO,kBAAkB,IAAe;AAC/B,WAAAA,kBAAS,kBAAkB,EAAE,EAAE,QAAQ,kBAAkB,oBAAmB,EAAE,EAAE;EACzF;AAAA,EAEA,OAAO,MAAM,MAA4C;AACvD,WAAO,IAAI,kBAAkB,KAAK,SAAQ,KAAK,KAAK;AAAA,EACtD;AAAA,EAEA,OAAO,WAAW,gBAAgE;AACzE,WAAA,IAAI,kBAAkB,eAAe,KAAK;AAAA,EACnD;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAM,CAAC,YAAyB;AAEtB,eAAA,kBAAkB,qBAAqB,OAAO,IAAI;AAAA,UAExD,YAAY,MAAI;AAEN,mBAAA;AAAA,cACN,MAAK,IAAI,kBAAkB;AAAA,gBACzB,OAAM,kBAAkB,kBAAkB,OAAO;AAAA,gBACjD,OAAM,QAAQ,MAAM,SAAS;AAAA,gBAC7B,QAAO,QAAQ,MAAM;AAAA,gBACrB,MAAK,QAAQ,MAAM;AAAA,gBACnB,UAAS,QAAQ,MAAM;AAAA,gBACvB,WAAU,QAAQ,MAAM;AAAA,cAAA,CACI;AAAA,YAAA;AAAA,UAElC;AAAA,UACA,UAAU;AAAA,QACR,IAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,YAAY,OAAgC,KAAe;AACzD,UAAM,OAAM,GAAG;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,SAAS,MAAgC;AACjC,UAAA,WAAW,KAAK;AACf,WAAA,OAAO,SAAS,SAAQ,IAAI;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAoC;AAClC,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAKA,aAAiC;AACxB,WAAA;AAAA,MACL,GAAG,MAAM,WAAW;AAAA,MACpB,MAAM,KAAK,QAAQ;AAAA,MACnB,OAAM,KAAK;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA;AAAA;AAAA;AAAA,EAMA,aAAsB;AACb,WAAA;AAAA,EACT;AACF;AAOO,SAAS,qBACd,MAC2B;AAC3B,SAAO,gBAAgB;AACzB;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/GridPlugin/LayoutGridNode.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lexical = require("lexical");
+const GridNode = require("./GridNode.js");
+const INSERT_LAYOUTGRID_COMMAND = lexical.createCommand("INSERT_LAYOUTGRID_COMMAND");
+class LayoutGridNode extends GridNode.GridNode {
+  static getType() {
+    return "layout-grid";
+  }
+  static hasGridNodeByElement(el) {
+    return el.classList.contains(LayoutGridNode.getMarkClassName()) ? el : null;
+  }
+  static getMarkClassName() {
+    return `mk-doc__${LayoutGridNode.getType()}`;
+  }
+  static getExtraClassName(el) {
+    return GridNode.GridNode.getExtraClassName(el).replace(LayoutGridNode.getMarkClassName(), "").trim();
+  }
+  static clone(node) {
+    return new LayoutGridNode(node.__attrs, node.__key);
+  }
+  static importJSON(serializedNode) {
+    return new LayoutGridNode(serializedNode.attrs);
+  }
+  static importDOM() {
+    return {
+      div: (domNode) => {
+        return LayoutGridNode.hasGridNodeByElement(domNode) ? {
+          conversion: () => {
+            return {
+              node: new LayoutGridNode({
+                class: LayoutGridNode.getExtraClassName(domNode),
+                display: domNode.style.display || "flex",
+                width: domNode.style.width || "100%",
+                height: domNode.style.height,
+                maxWidth: domNode.style.maxWidth,
+                maxHeight: domNode.style.maxHeight,
+                flex: domNode.style.flex,
+                flexDirection: domNode.style.flexDirection,
+                flexWrap: domNode.style.flexWrap,
+                alignContent: domNode.style.alignContent,
+                justifyContent: domNode.style.justifyContent,
+                alignItems: domNode.style.alignItems
+              })
+            };
+          },
+          priority: 4
+        } : null;
+      }
+    };
+  }
+  constructor(attrs, key) {
+    super(attrs, key);
+  }
+  /**
+   * 设置属性
+   * @param pos 
+   */
+  setAttrs(data) {
+    const writable = this.getWritable();
+    Object.assign(writable.__attrs, data);
+  }
+  /**
+   * 获取属性
+   * @param pos 
+   */
+  getAttrs() {
+    return this.__attrs;
+  }
+  /**
+   * 导出JSON
+   * @returns 
+   */
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: this.getType(),
+      attrs: this.__attrs,
+      version: 1
+    };
+  }
+}
+function $isLayoutGridNode(node) {
+  return node instanceof LayoutGridNode;
+}
+exports.$isLayoutGridNode = $isLayoutGridNode;
+exports.INSERT_LAYOUTGRID_COMMAND = INSERT_LAYOUTGRID_COMMAND;
+exports.LayoutGridNode = LayoutGridNode;
+//# sourceMappingURL=LayoutGridNode.js.map

package/dist/cjs/components/basic/doc-editor/plugins/GridPlugin/LayoutGridNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutGridNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/LayoutGridNode.ts"],"sourcesContent":["import { type DOMConversionMap,type NodeKey, type Spread, type DOMExportOutput, type LexicalCommand, createCommand, LexicalNode } from 'lexical'\r\nimport { type GridNodeAttrType , GridNode,SerializedGridNode } from \"./GridNode\"\r\n\r\n/**\r\n * 属性\r\n */\r\nexport type LayoutGridNodeAttrType  = GridNodeAttrType & {\r\n  display:'flex'|'inline-flex'\r\n  flexDirection:'column'|'row'|'row-reverse'|'column-reverse',\r\n  flexWrap:'nowrap'|'warp',\r\n  alignContent:'center'|'flex-start',\r\n  justifyContent:'center'|'flex-start',\r\n  alignItems:'center'|'flex-start'\r\n};\r\n\r\n\r\n/**\r\n * 插入布局格子\r\n */\r\nexport const INSERT_LAYOUTGRID_COMMAND: LexicalCommand<LayoutGridNodeAttrType> = createCommand('INSERT_LAYOUTGRID_COMMAND')\r\n\r\n\r\n/**\r\n * 节点序列化 \r\n */\r\nexport type SerializedLayoutGridNode = Spread<{ attrs:LayoutGridNodeAttrType },SerializedGridNode>\r\n\r\n/**\r\n * 布局格子\r\n */\r\nexport class LayoutGridNode extends GridNode{\r\n\r\n  declare __attrs:LayoutGridNodeAttrType\r\n\r\n  static getType(): string { return \"layout-grid\"; }\r\n\r\n  static hasGridNodeByElement(el:HTMLElement):HTMLElement|null{\r\n    return el.classList.contains(LayoutGridNode.getMarkClassName()) ? el : null;\r\n  }\r\n \r\n  static getMarkClassName(): string {\r\n    return `mk-doc__${LayoutGridNode.getType()}`\r\n  }\r\n  static getExtraClassName(el:HTMLElement){\r\n    return GridNode.getExtraClassName(el).replace(LayoutGridNode.getMarkClassName(),\"\").trim();\r\n  }\r\n  static clone(node: LayoutGridNode): LayoutGridNode {\r\n    return new LayoutGridNode(node.__attrs,node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedLayoutGridNode): LayoutGridNode {\r\n    return new LayoutGridNode(serializedNode.attrs)\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      div : (domNode: HTMLElement) => {\r\n\r\n        return  LayoutGridNode.hasGridNodeByElement(domNode) ? {\r\n\r\n          conversion: ()=>{ \r\n\r\n            return  { \r\n              node:new LayoutGridNode({\r\n                class:LayoutGridNode.getExtraClassName(domNode),\r\n                display:domNode.style.display || \"flex\",\r\n                width:domNode.style.width || \"100%\",\r\n                height:domNode.style.height,\r\n                maxWidth:domNode.style.maxWidth,\r\n                maxHeight:domNode.style.maxHeight,\r\n                flex:domNode.style.flex,\r\n                flexDirection:domNode.style.flexDirection,\r\n                flexWrap:domNode.style.flexWrap,\r\n                alignContent:domNode.style.alignContent,\r\n                justifyContent:domNode.style.justifyContent,\r\n                alignItems:domNode.style.alignItems\r\n              } as LayoutGridNodeAttrType) \r\n            };\r\n          },\r\n          priority: 4\r\n        } : null;\r\n      }\r\n    }\r\n  }\r\n\r\n  constructor(attrs:LayoutGridNodeAttrType,key?: NodeKey) {\r\n    super(attrs,key)\r\n  }\r\n\r\n  /**\r\n   * 设置属性\r\n   * @param pos \r\n   */\r\n  setAttrs(data?:LayoutGridNodeAttrType){\r\n    const writable = this.getWritable();\r\n    Object.assign(writable.__attrs,data)\r\n  }\r\n\r\n  /**\r\n   * 获取属性\r\n   * @param pos \r\n   */\r\n  getAttrs():LayoutGridNodeAttrType{\r\n    return this.__attrs;\r\n  }\r\n  /**\r\n   * 导出JSON\r\n   * @returns \r\n   */\r\n  exportJSON(): SerializedGridNode {\r\n    return {\r\n      ...super.exportJSON(),\r\n      type: this.getType(),\r\n      attrs:this.__attrs,\r\n      version: 1\r\n    }\r\n  }\r\n}\r\n\r\n/**\r\n * 是否是模块格子\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isLayoutGridNode(\r\n  node: LayoutGridNode | LexicalNode | null | undefined,\r\n): node is LayoutGridNode {\r\n  return node instanceof LayoutGridNode\r\n}\r\n"],"names":["createCommand","GridNode"],"mappings":";;;;AAmBa,MAAA,4BAAoEA,sBAAc,2BAA2B;AAWnH,MAAM,uBAAuBC,SAAAA,SAAQ;AAAA,EAI1C,OAAO,UAAkB;AAAS,WAAA;AAAA,EAAe;AAAA,EAEjD,OAAO,qBAAqB,IAAgC;AAC1D,WAAO,GAAG,UAAU,SAAS,eAAe,kBAAkB,IAAI,KAAK;AAAA,EACzE;AAAA,EAEA,OAAO,mBAA2B;AACzB,WAAA,WAAW,eAAe,QAAA,CAAS;AAAA,EAC5C;AAAA,EACA,OAAO,kBAAkB,IAAe;AAC/B,WAAAA,kBAAS,kBAAkB,EAAE,EAAE,QAAQ,eAAe,oBAAmB,EAAE,EAAE;EACtF;AAAA,EACA,OAAO,MAAM,MAAsC;AACjD,WAAO,IAAI,eAAe,KAAK,SAAQ,KAAK,KAAK;AAAA,EACnD;AAAA,EAEA,OAAO,WAAW,gBAA0D;AACnE,WAAA,IAAI,eAAe,eAAe,KAAK;AAAA,EAChD;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAM,CAAC,YAAyB;AAEtB,eAAA,eAAe,qBAAqB,OAAO,IAAI;AAAA,UAErD,YAAY,MAAI;AAEN,mBAAA;AAAA,cACN,MAAK,IAAI,eAAe;AAAA,gBACtB,OAAM,eAAe,kBAAkB,OAAO;AAAA,gBAC9C,SAAQ,QAAQ,MAAM,WAAW;AAAA,gBACjC,OAAM,QAAQ,MAAM,SAAS;AAAA,gBAC7B,QAAO,QAAQ,MAAM;AAAA,gBACrB,UAAS,QAAQ,MAAM;AAAA,gBACvB,WAAU,QAAQ,MAAM;AAAA,gBACxB,MAAK,QAAQ,MAAM;AAAA,gBACnB,eAAc,QAAQ,MAAM;AAAA,gBAC5B,UAAS,QAAQ,MAAM;AAAA,gBACvB,cAAa,QAAQ,MAAM;AAAA,gBAC3B,gBAAe,QAAQ,MAAM;AAAA,gBAC7B,YAAW,QAAQ,MAAM;AAAA,cAAA,CACA;AAAA,YAAA;AAAA,UAE/B;AAAA,UACA,UAAU;AAAA,QACR,IAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,YAAY,OAA6B,KAAe;AACtD,UAAM,OAAM,GAAG;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,SAAS,MAA6B;AAC9B,UAAA,WAAW,KAAK;AACf,WAAA,OAAO,SAAS,SAAQ,IAAI;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAiC;AAC/B,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAKA,aAAiC;AACxB,WAAA;AAAA,MACL,GAAG,MAAM,WAAW;AAAA,MACpB,MAAM,KAAK,QAAQ;AAAA,MACnB,OAAM,KAAK;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEb;AACF;AAOO,SAAS,kBACd,MACwB;AACxB,SAAO,gBAAgB;AACzB;;;;"}