npm - @maketribe/ms-app - Versions diffs - 3.2.26 → 3.2.28 - Mend

@maketribe/ms-app 3.2.26 → 3.2.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (207) hide show

package/dist/esm/components/basic/doc-editor/core/utils.js CHANGED Viewed

@@ -9,22 +9,29 @@ const isNodeSelected = function(editor, key) {
   });
 };
 const clearSelection = (editor) => {
-  editor.update(() => {
-    const selection = $getSelection();
-    if ($isNodeSelection(selection))
-      selection.clear();
+  return new Promise((resolove) => {
+    editor.update(() => {
+      const selection = $getSelection();
+      if ($isNodeSelection(selection) && selection) {
+        selection.clear();
+      }
+      resolove(void 0);
+    });
   });
 };
 const setSelected = (editor, selected, key) => {
-  editor.update(() => {
-    let selection = $getSelection();
-    if (!$isNodeSelection(selection)) {
-      selection = $createNodeSelection();
-      $setSelection(selection);
-    }
-    if ($isNodeSelection(selection)) {
-      selection.add(unref(key));
-    }
+  return new Promise((resolove) => {
+    editor.update(() => {
+      let selection = $getSelection();
+      if (!$isNodeSelection(selection)) {
+        selection = $createNodeSelection();
+        $setSelection(selection);
+      }
+      if ($isNodeSelection(selection)) {
+        selection.add(unref(key));
+      }
+      resolove(void 0);
+    });
   });
 };
 export {

package/dist/esm/components/basic/doc-editor/core/utils.js.map CHANGED Viewed

	@@ -1 +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":[],"mappings":";;AAYa,MAAA,iBAAiB,SAAU,QAAuB,KAAuB;AACpF,SAAO,OAAO,iBAAiB,KAAK,MAAM;AAClC,UAAA,OAAO,cAAc,GAAG;AAC9B,QAAI,SAAS;AACJ,aAAA;AACT,WAAO,KAAK;EAAW,CACxB;AACH;AAGa,MAAA,iBAAiB,CAAC,~~WAA0B~~;~~AACvD~~,~~SAAO~~,OAAO,MAAM;AAClB,~~UAAM~~,YAAY;~~AAClB~~,~~QAAI~~,iBAAiB,SAAS;~~AAC3B~~,~~gBAAW~~,MAAM;AAAA,EAAA,~~CACrB~~;AACH;AAGO,MAAM,cAAc,CAAC,QAAsB,UAAkB,~~QAAe~~;~~AACjF~~,~~SAAO~~,OAAO,MAAM;AAClB,~~QAAI~~,YAAY;AAEZ,~~QAAA~~,CAAC,iBAAiB,SAAS,GAAG;AAChC,~~kBAAY~~,qBAAqB;AACjC,~~oBAAc~~,SAAS;AAAA,~~IACzB~~;AACI,~~QAAA~~,iBAAiB,SAAS,GAAG;AAEnB,~~gBAAA~~,IAAI,MAAM,GAAG,CAAC;AAAA,~~IAG5B~~;AAAA,EAAA,~~CACD~~;~~AACH~~;"}
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):Promise<undefined> => {\r\n return new Promise(resolove=>{\r\n editor.update(() => {\r\n const selection = $getSelection()\r\n if ($isNodeSelection(selection) && selection){\r\n selection.clear();\r\n }\r\n resolove(undefined)\r\n })\r\n })\r\n}\r\n\r\n// 设置选中\r\nexport const setSelected = (editor: LexicalEditor,selected: boolean,key:string):Promise<undefined> => {\r\n\r\n return new Promise(resolove=>{\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 resolove(undefined)\r\n })\r\n })\r\n \r\n}\r\n\r\n"],"names":[],"mappings":";;AAYa,MAAA,iBAAiB,SAAU,QAAuB,KAAuB;AACpF,SAAO,OAAO,iBAAiB,KAAK,MAAM;AAClC,UAAA,OAAO,cAAc,GAAG;AAC9B,QAAI,SAAS;AACJ,aAAA;AACT,WAAO,KAAK;EAAW,CACxB;AACH;AAGa,MAAA,iBAAiB,CAAC,WAA6C;AACnE,SAAA,IAAI,QAAQ,CAAU,aAAA;AAC3B,WAAO,OAAO,MAAM;AAClB,YAAM,YAAY;AACd,UAAA,iBAAiB,SAAS,KAAK,WAAU;AAC3C,kBAAU,MAAM;AAAA,MAClB;AACA,eAAS,MAAS;AAAA,IAAA,CACnB;AAAA,EAAA,CACF;AACH;AAGO,MAAM,cAAc,CAAC,QAAsB,UAAkB,QAAkC;AAE7F,SAAA,IAAI,QAAQ,CAAU,aAAA;AAC3B,WAAO,OAAO,MAAM;AAClB,UAAI,YAAY;AAEZ,UAAA,CAAC,iBAAiB,SAAS,GAAG;AAChC,oBAAY,qBAAqB;AACjC,sBAAc,SAAS;AAAA,MACzB;AACI,UAAA,iBAAiB,SAAS,GAAG;AAEnB,kBAAA,IAAI,MAAM,GAAG,CAAC;AAAA,MAG5B;AACA,eAAS,MAAS;AAAA,IAAA,CACnB;AAAA,EAAA,CACF;AAEH;"}

package/dist/esm/components/basic/doc-editor/editor.vue.js.map CHANGED Viewed

	@@ -1 +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 <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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,UAAM,OAAO;AAGb,UAAM,QAAQ;AASd,UAAM,SAAS;AAAA,MACb,WAAW;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,GAAGA;AAAAA,MACL;AAAA,MACA,QAAQ,OAAa;AAInB,gBAAQ,MAAM,KAAK;AAAA,MACrB;AAAA,IAAA;AAII,UAAA,mBAAmB,IAAI,IAAW;AACxC,UAAM,aAAa,SAAS;;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;AAGd,cAAU,MAAI;;AAEN,YAAA,OAAM,4BAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC;AAG7C,YAAA,QAAQ,SAAS,cAAc,OAAO;AACtC,YAAA,aAAa,QAAO,UAAU;AAGpC,YAAM,YAAY,CAAC,cAAa,aAAY,gBAAgB,EAAE,KAAK,MAAM;AAGzE,YAAM,aAAa,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;AAGK,YAAA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
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 <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\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,UAAM,OAAO;AAGb,UAAM,QAAQ;AASd,UAAM,SAAS;AAAA,MACb,WAAW;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,GAAGA;AAAAA,MACL;AAAA,MACA,QAAQ,OAAa;AAInB,gBAAQ,MAAM,KAAK;AAAA,MACrB;AAAA,IAAA;AAII,UAAA,mBAAmB,IAAI,IAAW;AACxC,UAAM,aAAa,SAAS;;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;AAGd,cAAU,MAAI;;AAEN,YAAA,OAAM,4BAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC;AAG7C,YAAA,QAAQ,SAAS,cAAc,OAAO;AACtC,YAAA,aAAa,QAAO,UAAU;AAGpC,YAAM,YAAY,CAAC,cAAa,aAAY,gBAAgB,EAAE,KAAK,MAAM;AAGzE,YAAM,aAAa,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;AAEK,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;AAGK,YAAA,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/esm/components/basic/doc-editor/plugins/GridPlugin/GridNode.js.map CHANGED Viewed

	@@ -1 +1 @@
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":[],"mappings":";;;;AA4BO,MAAM,iBAAiB,YAAW;AAAA,~~EAoDvC~~,YAAY,OAAuB,KAAe;AAChD,UAAM,GAAG;~~AAnDX~~;~~AAoDE~~,SAAK,UAAU;AAAA,EACjB;AAAA,~~EAnDA~~,OAAO,UAAkB;AAAS,WAAA;AAAA,EAAQ;AAAA,EAE1C,OAAO,qBAAqB,IAAgC;AAC1D,WAAO,GAAG,UAAU,SAAS,SAAS,kBAAkB,IAAI,KAAK;AAAA,EACnE;AAAA,EAEA,OAAO,mBAA2B;AACzB,WAAA,WAAW,SAAS,QAAA,CAAS;AAAA,EACtC;AAAA,EAEA,OAAO,kBAAkB,IAAe;AAC/B,WAAA,GAAG,UAAU,QAAQ,SAAS,oBAAmB,EAAE,EAAE;EAC9D;AAAA,EAEA,OAAO,MAAM,MAA0B;~~AACrC~~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"}
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 \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":[],"mappings":"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"}

package/dist/esm/components/basic/doc-editor/plugins/GridPlugin/ImageTextGridNode.js.map CHANGED Viewed

	@@ -1 +1 @@
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":[],"mappings":";;AAYa,MAAA,+~~BAA+D~~,cAAc,8BAA8B;~~AAUjH~~,MAAM,0BAA0B,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,WAAA,SAAS,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;"}
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<ImageTextGridNodeAttrType> = 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":[],"mappings":";;AAYa,MAAA,+BAA0E,cAAc,8BAA8B;AAU5H,MAAM,0BAA0B,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,WAAA,SAAS,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/esm/components/basic/doc-editor/plugins/GridPlugin/LayoutGridNode.js CHANGED Viewed

@@ -28,7 +28,7 @@ class LayoutGridNode extends GridNode {
             return {
               node: new LayoutGridNode({
                 class: LayoutGridNode.getExtraClassName(domNode),
-                display: domNode.style.display || "flex",
+                display: domNode.style.display || "block",
                 width: domNode.style.width || "100%",
                 height: domNode.style.height,
                 maxWidth: domNode.style.maxWidth,
@@ -77,6 +77,37 @@ class LayoutGridNode extends GridNode {
       version: 1
     };
   }
+  /**
+  * 创建渲染DOM
+  * @param config
+  * @returns
+  */
+  createDOM(config) {
+    const el = super.createDOM(config);
+    if (this.getChildrenSize() <= 0) {
+      el.setAttribute("contenteditable", "false");
+      el.setAttribute("data-lexical-decorator", "true");
+    }
+    return el;
+  }
+  /**
+  * 更新DOM
+  * @param prevNode
+  * @param dom
+  * @param config
+  * @returns
+  */
+  updateDOM(prevNode, el, config) {
+    super.updateDOM(prevNode, el, config);
+    if (this.getChildrenSize() <= 0) {
+      el.setAttribute("contenteditable", "false");
+      el.setAttribute("data-lexical-decorator", "true");
+    } else {
+      el.removeAttribute("contenteditable");
+      el.removeAttribute("data-lexical-decorator");
+    }
+    return false;
+  }
 }
 function $isLayoutGridNode(node) {
   return node instanceof LayoutGridNode;

package/dist/esm/components/basic/doc-editor/plugins/GridPlugin/LayoutGridNode.js.map CHANGED Viewed

	@@ -1 +1 @@
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":[],"mappings":";;AAmBa,MAAA,4BAAoE,cAAc,2BAA2B;AAWnH,MAAM,uBAAuB,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,WAAA,SAAS,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;"}
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, EditorConfig } 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'\|'block'\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 \|\| \"block\",\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 创建渲染DOM\r\n * @param config \r\n * @returns \r\n /\r\n createDOM(config: EditorConfig): HTMLElement {\r\n\r\n const el = super.createDOM(config);\r\n\r\n if(this.getChildrenSize() <= 0 ){\r\n el.setAttribute(\"contenteditable\",\"false\")\r\n el.setAttribute(\"data-lexical-decorator\",\"true\")\r\n }\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 super.updateDOM(prevNode,el,config);\r\n if(this.getChildrenSize() <= 0 ){\r\n el.setAttribute(\"contenteditable\",\"false\")\r\n el.setAttribute(\"data-lexical-decorator\",\"true\")\r\n }\r\n else{\r\n el.removeAttribute(\"contenteditable\")\r\n el.removeAttribute(\"data-lexical-decorator\")\r\n }\r\n return false\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":[],"mappings":";;AAmBa,MAAA,4BAAoE,cAAc,2BAA2B;AAWnH,MAAM,uBAAuB,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,WAAA,SAAS,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOC,UAAU,QAAmC;AAEtC,UAAA,KAAK,MAAM,UAAU,MAAM;AAE9B,QAAA,KAAK,gBAAgB,KAAK,GAAG;AAC3B,SAAA,aAAa,mBAAkB,OAAO;AACtC,SAAA,aAAa,0BAAyB,MAAM;AAAA,IACjD;AAEO,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASE,UAAU,UAAoB,IAAiB,QAA+B;AAEtE,UAAA,UAAU,UAAS,IAAG,MAAM;AAC/B,QAAA,KAAK,gBAAgB,KAAK,GAAG;AAC3B,SAAA,aAAa,mBAAkB,OAAO;AACtC,SAAA,aAAa,0BAAyB,MAAM;AAAA,IAAA,OAE7C;AACF,SAAG,gBAAgB,iBAAiB;AACpC,SAAG,gBAAgB,wBAAwB;AAAA,IAC7C;AACO,WAAA;AAAA,EACT;AAEJ;AAOO,SAAS,kBACd,MACwB;AACxB,SAAO,gBAAgB;AACzB;"}

package/dist/esm/components/basic/doc-editor/plugins/GridPlugin/ModuleGridNode.js CHANGED Viewed

@@ -85,10 +85,23 @@ class ModuleGridNode extends GridNode {
     });
     if (this.__attrs.overflowX) {
       el.style.overflowX = "auto";
+      el.style.whiteSpace = "nowrap";
     } else {
       el.style.overflowX = "";
+      el.style.whiteSpace = "";
     }
   }
+  /**
+  * 创建渲染DOM
+  * @param config
+  * @returns
+  */
+  createDOM(config) {
+    const el = super.createDOM(config);
+    el.setAttribute("contenteditable", "false");
+    el.setAttribute("data-lexical-decorator", "true");
+    return el;
+  }
   // /**
   //  * 非内联
   //  * @returns

package/dist/esm/components/basic/doc-editor/plugins/GridPlugin/ModuleGridNode.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ModuleGridNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/ModuleGridNode.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 ModuleGridNodeAttrType = GridNodeAttrType & {\r\n overflowX:boolean\r\n};\r\n\r\n\r\n/\r\n 插入模块格子\r\n /\r\nexport const INSERT_MODULEGRID_COMMAND: LexicalCommand<ModuleGridNodeAttrType> = createCommand('INSERT_MODULEGRID_COMMAND')\r\n\r\n\r\n/\r\n 节点序列化 \r\n /\r\nexport type SerializedModuleGridNode = Spread<{ attrs:ModuleGridNodeAttrType },SerializedGridNode>\r\n\r\n/\r\n 模块格子\r\n /\r\nexport class ModuleGridNode extends GridNode{\r\n\r\n declare __attrs:ModuleGridNodeAttrType\r\n\r\n static getType(): string { return \"module-grid\"; }\r\n\r\n static hasGridNodeByElement(el:HTMLElement):HTMLElement\|null{\r\n return el.classList.contains(ModuleGridNode.getMarkClassName()) ? el : null;\r\n }\r\n \r\n static getMarkClassName(): string {\r\n return `mk-doc__${ModuleGridNode.getType()}`\r\n }\r\n static getExtraClassName(el:HTMLElement){\r\n return GridNode.getExtraClassName(el).replace(ModuleGridNode.getMarkClassName(),\"\").trim();\r\n }\r\n static clone(node: ModuleGridNode): ModuleGridNode {\r\n return new ModuleGridNode(node.__attrs,node.__key)\r\n }\r\n\r\n static importJSON(serializedNode: SerializedModuleGridNode): ModuleGridNode {\r\n return new ModuleGridNode(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 ModuleGridNode.hasGridNodeByElement(domNode) ? {\r\n\r\n conversion: ()=>{ \r\n\r\n return { \r\n node:new ModuleGridNode({\r\n class:ModuleGridNode.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 overflowX:domNode.style.overflowX == \"auto\"\r\n } as ModuleGridNodeAttrType) \r\n };\r\n },\r\n priority: 4\r\n } : null;\r\n }\r\n }\r\n }\r\n\r\n constructor(attrs:ModuleGridNodeAttrType,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?:ModuleGridNodeAttrType){\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():ModuleGridNodeAttrType{\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 * @param el \r\n /\r\n updateElementAttr(el:HTMLElement){\r\n super.updateElementAttr(el);\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 if(this.__attrs.overflowX){\r\n el.style.overflowX = \"auto\";\r\n }\r\n else{\r\n el.style.overflowX = \"\";\r\n }\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/\r\n 是否是模块格子\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isModuleGridNode(\r\n node: ModuleGridNode \| LexicalNode \| null \| undefined,\r\n): node is ModuleGridNode {\r\n return node instanceof ModuleGridNode\r\n}\r\n"],"names":[],"mappings":";;AAca,MAAA,4BAAoE,cAAc,2BAA2B;AAWnH,MAAM,uBAAuB,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,WAAA,SAAS,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,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,gBACxB,WAAU,QAAQ,MAAM,aAAa;AAAA,cAAA,CACZ;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;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,kBAAkB,IAAe;AAC/B,UAAM,kBAAkB,EAAE;AAE1B,WAAO,KAAK,KAAK,OAAO,EAAE,QAAQ,CAAC,QAAU;AAC3C,UAAG,CAAC,SAAQ,WAAW,EAAE,QAAQ,GAAG,IAAI,GAAE;AACxC,WAAG,MAAM,GAAG,IAAK,KAAK,QAAgB,GAAG;AAAA,MAC3C;AAAA,IAAA,CACD;AACE,QAAA,KAAK,QAAQ,WAAU;AACxB,SAAG,MAAM,YAAY;AAAA,IAAA,~~OAEnB~~;AACF,SAAG,MAAM,YAAY;AAAA,~~IACvB~~;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;~~AAkBF~~;AAOO,SAAS,kBACd,MACwB;AACxB,SAAO,gBAAgB;AACzB;"}
1	+ {"version":3,"file":"ModuleGridNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/ModuleGridNode.ts"],"sourcesContent":["import { type DOMConversionMap,type NodeKey, type Spread, type DOMExportOutput, type LexicalCommand, createCommand, LexicalNode, EditorConfig } from 'lexical'\r\nimport { type GridNodeAttrType , GridNode,SerializedGridNode } from \"./GridNode\"\r\n\r\n/*\r\n 属性\r\n /\r\nexport type ModuleGridNodeAttrType = GridNodeAttrType & {\r\n overflowX:boolean\r\n};\r\n\r\n\r\n/\r\n 插入模块格子\r\n /\r\nexport const INSERT_MODULEGRID_COMMAND: LexicalCommand<ModuleGridNodeAttrType> = createCommand('INSERT_MODULEGRID_COMMAND')\r\n\r\n\r\n/\r\n 节点序列化 \r\n /\r\nexport type SerializedModuleGridNode = Spread<{ attrs:ModuleGridNodeAttrType },SerializedGridNode>\r\n\r\n/\r\n 模块格子\r\n /\r\nexport class ModuleGridNode extends GridNode{\r\n\r\n declare __attrs:ModuleGridNodeAttrType\r\n\r\n static getType(): string { return \"module-grid\"; }\r\n\r\n static hasGridNodeByElement(el:HTMLElement):HTMLElement\|null{\r\n return el.classList.contains(ModuleGridNode.getMarkClassName()) ? el : null;\r\n }\r\n \r\n static getMarkClassName(): string {\r\n return `mk-doc__${ModuleGridNode.getType()}`\r\n }\r\n static getExtraClassName(el:HTMLElement){\r\n return GridNode.getExtraClassName(el).replace(ModuleGridNode.getMarkClassName(),\"\").trim();\r\n }\r\n static clone(node: ModuleGridNode): ModuleGridNode {\r\n return new ModuleGridNode(node.__attrs,node.__key)\r\n }\r\n\r\n static importJSON(serializedNode: SerializedModuleGridNode): ModuleGridNode {\r\n return new ModuleGridNode(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 ModuleGridNode.hasGridNodeByElement(domNode) ? {\r\n\r\n conversion: ()=>{ \r\n\r\n return { \r\n node:new ModuleGridNode({\r\n class:ModuleGridNode.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 overflowX:domNode.style.overflowX == \"auto\"\r\n } as ModuleGridNodeAttrType) \r\n };\r\n },\r\n priority: 4\r\n } : null;\r\n }\r\n }\r\n }\r\n\r\n constructor(attrs:ModuleGridNodeAttrType,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?:ModuleGridNodeAttrType){\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():ModuleGridNodeAttrType{\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 * @param el \r\n /\r\n updateElementAttr(el:HTMLElement){\r\n super.updateElementAttr(el);\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 if(this.__attrs.overflowX){\r\n el.style.overflowX = \"auto\";\r\n el.style.whiteSpace = \"nowrap\";\r\n }\r\n else{\r\n el.style.overflowX = \"\";\r\n el.style.whiteSpace = \"\";\r\n }\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 = super.createDOM(config);\r\n\r\n el.setAttribute(\"contenteditable\",\"false\")\r\n el.setAttribute(\"data-lexical-decorator\",\"true\")\r\n\r\n return el;\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/\r\n 是否是模块格子\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isModuleGridNode(\r\n node: ModuleGridNode \| LexicalNode \| null \| undefined,\r\n): node is ModuleGridNode {\r\n return node instanceof ModuleGridNode\r\n}\r\n"],"names":[],"mappings":";;AAca,MAAA,4BAAoE,cAAc,2BAA2B;AAWnH,MAAM,uBAAuB,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,WAAA,SAAS,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,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,gBACxB,WAAU,QAAQ,MAAM,aAAa;AAAA,cAAA,CACZ;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;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,kBAAkB,IAAe;AAC/B,UAAM,kBAAkB,EAAE;AAE1B,WAAO,KAAK,KAAK,OAAO,EAAE,QAAQ,CAAC,QAAU;AAC3C,UAAG,CAAC,SAAQ,WAAW,EAAE,QAAQ,GAAG,IAAI,GAAE;AACxC,WAAG,MAAM,GAAG,IAAK,KAAK,QAAgB,GAAG;AAAA,MAC3C;AAAA,IAAA,CACD;AACE,QAAA,KAAK,QAAQ,WAAU;AACxB,SAAG,MAAM,YAAY;AACrB,SAAG,MAAM,aAAa;AAAA,IAAA,OAEpB;AACF,SAAG,MAAM,YAAY;AACrB,SAAG,MAAM,aAAa;AAAA,IACxB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOC,UAAU,QAAmC;AAEtC,UAAA,KAAK,MAAM,UAAU,MAAM;AAE9B,OAAA,aAAa,mBAAkB,OAAO;AACtC,OAAA,aAAa,0BAAyB,MAAM;AAExC,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBF;AAOO,SAAS,kBACd,MACwB;AACxB,SAAO,gBAAgB;AACzB;"}

package/dist/esm/components/basic/doc-editor/plugins/GridPlugin/TextGridNode.js CHANGED Viewed

@@ -71,6 +71,17 @@ class TextGridNode extends GridNode {
       version: 1
     };
   }
+  //  /**
+  //  * 创建渲染DOM
+  //  * @param config
+  //  * @returns
+  //  */
+  //  createDOM(config: EditorConfig): HTMLElement {
+  //   const el = super.createDOM(config);
+  //   el.setAttribute("contenteditable","true")
+  //   el.setAttribute("data-lexical-decorator","true")
+  //   return el;
+  // }
 }
 function $isTextGridNode(node) {
   return node instanceof TextGridNode;

package/dist/esm/components/basic/doc-editor/plugins/GridPlugin/TextGridNode.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextGridNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/TextGridNode.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\n /\r\nexport const INSERT_TEXTGRID_COMMAND: LexicalCommand<GridNodeAttrType> = createCommand('INSERT_TEXTGRID_COMMAND')\r\n\r\n/\r\n 属性\r\n /\r\nexport type TextGridNodeAttrType = GridNodeAttrType & {};\r\n\r\n/\r\n 节点序列化 \r\n /\r\nexport type SerializedTextGridNode= Spread<{ attrs:TextGridNodeAttrType },SerializedGridNode>\r\n\r\n/\r\n 布局格子\r\n /\r\nexport class TextGridNode extends GridNode{\r\n\r\n declare __attrs:TextGridNodeAttrType\r\n\r\n static getType(): string { return \"text-grid\"; }\r\n\r\n static hasGridNodeByElement(el:HTMLElement):HTMLElement\|null{\r\n return el.classList.contains(TextGridNode.getMarkClassName()) ? el : null;\r\n }\r\n \r\n static getMarkClassName(): string {\r\n return `mk-doc__${TextGridNode.getType()}`\r\n }\r\n static getExtraClassName(el:HTMLElement){\r\n return GridNode.getExtraClassName(el).replace(TextGridNode.getMarkClassName(),\"\").trim();\r\n }\r\n static clone(node: TextGridNode): TextGridNode{\r\n return new TextGridNode(node.__attrs,node.__key)\r\n }\r\n\r\n static importJSON(serializedNode: SerializedTextGridNode): TextGridNode{\r\n return new TextGridNode(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 TextGridNode.hasGridNodeByElement(domNode) ? {\r\n\r\n conversion: ()=>{ \r\n\r\n return { \r\n node:new TextGridNode({\r\n class:TextGridNode.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 TextGridNodeAttrType) \r\n };\r\n },\r\n priority: 4\r\n } : null;\r\n }\r\n }\r\n }\r\n\r\n constructor(attrs:TextGridNodeAttrType,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?:TextGridNodeAttrType){\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():TextGridNodeAttrType{\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 $isTextGridNode(\r\n node: TextGridNode \| LexicalNode \| null \| undefined,\r\n): node is TextGridNode {\r\n return node instanceof TextGridNode\r\n}\r\n"],"names":[],"mappings":";;AAOa,MAAA,0BAA4D,cAAc,yBAAyB;AAezG,MAAM,qBAAqB,SAAQ;AAAA,EAIxC,OAAO,UAAkB;AAAS,WAAA;AAAA,EAAa;AAAA,EAE/C,OAAO,qBAAqB,IAAgC;AAC1D,WAAO,GAAG,UAAU,SAAS,aAAa,kBAAkB,IAAI,KAAK;AAAA,EACvE;AAAA,EAEA,OAAO,mBAA2B;AACzB,WAAA,WAAW,aAAa,QAAA,CAAS;AAAA,EAC1C;AAAA,EACA,OAAO,kBAAkB,IAAe;AAC/B,WAAA,SAAS,kBAAkB,EAAE,EAAE,QAAQ,aAAa,oBAAmB,EAAE,EAAE;EACpF;AAAA,EACA,OAAO,MAAM,MAAiC;AAC5C,WAAO,IAAI,aAAa,KAAK,SAAQ,KAAK,KAAK;AAAA,EACjD;AAAA,EAEA,OAAO,WAAW,gBAAqD;AAC9D,WAAA,IAAI,aAAa,eAAe,KAAK;AAAA,EAC9C;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAM,CAAC,YAAyB;AAEtB,eAAA,aAAa,qBAAqB,OAAO,IAAI;AAAA,UAEnD,YAAY,MAAI;AAEN,mBAAA;AAAA,cACN,MAAK,IAAI,aAAa;AAAA,gBACpB,OAAM,aAAa,kBAAkB,OAAO;AAAA,gBAC5C,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,CACD;AAAA,YAAA;AAAA,UAE7B;AAAA,UACA,UAAU;AAAA,QACR,IAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,YAAY,OAA2B,KAAe;AACpD,UAAM,OAAM,GAAG;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,SAAS,MAA2B;AAC5B,UAAA,WAAW,KAAK;AACf,WAAA,OAAO,SAAS,SAAQ,IAAI;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAA+B;AAC7B,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,gBACd,MACsB;AACtB,SAAO,gBAAgB;AACzB;"}
1	+ {"version":3,"file":"TextGridNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/TextGridNode.ts"],"sourcesContent":["import { type DOMConversionMap, type NodeKey, type Spread, type DOMExportOutput, type LexicalCommand, createCommand, LexicalNode, EditorConfig } from 'lexical'\r\nimport { type GridNodeAttrType , GridNode,SerializedGridNode } from \"./GridNode\"\r\n\r\n\r\n/*\r\n 插入文本格子\r\n /\r\nexport const INSERT_TEXTGRID_COMMAND: LexicalCommand<GridNodeAttrType> = createCommand('INSERT_TEXTGRID_COMMAND')\r\n\r\n/\r\n 属性\r\n /\r\nexport type TextGridNodeAttrType = GridNodeAttrType & {};\r\n\r\n/\r\n 节点序列化 \r\n /\r\nexport type SerializedTextGridNode= Spread<{ attrs:TextGridNodeAttrType },SerializedGridNode>\r\n\r\n/\r\n 布局格子\r\n /\r\nexport class TextGridNode extends GridNode{\r\n\r\n declare __attrs:TextGridNodeAttrType\r\n\r\n static getType(): string { return \"text-grid\"; }\r\n\r\n static hasGridNodeByElement(el:HTMLElement):HTMLElement\|null{\r\n return el.classList.contains(TextGridNode.getMarkClassName()) ? el : null;\r\n }\r\n \r\n static getMarkClassName(): string {\r\n return `mk-doc__${TextGridNode.getType()}`\r\n }\r\n static getExtraClassName(el:HTMLElement){\r\n return GridNode.getExtraClassName(el).replace(TextGridNode.getMarkClassName(),\"\").trim();\r\n }\r\n static clone(node: TextGridNode): TextGridNode{\r\n return new TextGridNode(node.__attrs,node.__key)\r\n }\r\n\r\n static importJSON(serializedNode: SerializedTextGridNode): TextGridNode{\r\n return new TextGridNode(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 TextGridNode.hasGridNodeByElement(domNode) ? {\r\n\r\n conversion: ()=>{ \r\n\r\n return { \r\n node:new TextGridNode({\r\n class:TextGridNode.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 TextGridNodeAttrType) \r\n };\r\n },\r\n priority: 4\r\n } : null;\r\n }\r\n }\r\n }\r\n\r\n constructor(attrs:TextGridNodeAttrType,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?:TextGridNodeAttrType){\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():TextGridNodeAttrType{\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 // 创建渲染DOM\r\n // * @param config \r\n // * @returns \r\n // /\r\n // createDOM(config: EditorConfig): HTMLElement {\r\n\r\n // const el = super.createDOM(config);\r\n\r\n // el.setAttribute(\"contenteditable\",\"true\")\r\n // el.setAttribute(\"data-lexical-decorator\",\"true\")\r\n\r\n // return el;\r\n // }\r\n}\r\n\r\n/\r\n 是否是文本格子\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isTextGridNode(\r\n node: TextGridNode \| LexicalNode \| null \| undefined,\r\n): node is TextGridNode {\r\n return node instanceof TextGridNode\r\n}\r\n"],"names":[],"mappings":";;AAOa,MAAA,0BAA4D,cAAc,yBAAyB;AAezG,MAAM,qBAAqB,SAAQ;AAAA,EAIxC,OAAO,UAAkB;AAAS,WAAA;AAAA,EAAa;AAAA,EAE/C,OAAO,qBAAqB,IAAgC;AAC1D,WAAO,GAAG,UAAU,SAAS,aAAa,kBAAkB,IAAI,KAAK;AAAA,EACvE;AAAA,EAEA,OAAO,mBAA2B;AACzB,WAAA,WAAW,aAAa,QAAA,CAAS;AAAA,EAC1C;AAAA,EACA,OAAO,kBAAkB,IAAe;AAC/B,WAAA,SAAS,kBAAkB,EAAE,EAAE,QAAQ,aAAa,oBAAmB,EAAE,EAAE;EACpF;AAAA,EACA,OAAO,MAAM,MAAiC;AAC5C,WAAO,IAAI,aAAa,KAAK,SAAQ,KAAK,KAAK;AAAA,EACjD;AAAA,EAEA,OAAO,WAAW,gBAAqD;AAC9D,WAAA,IAAI,aAAa,eAAe,KAAK;AAAA,EAC9C;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAM,CAAC,YAAyB;AAEtB,eAAA,aAAa,qBAAqB,OAAO,IAAI;AAAA,UAEnD,YAAY,MAAI;AAEN,mBAAA;AAAA,cACN,MAAK,IAAI,aAAa;AAAA,gBACpB,OAAM,aAAa,kBAAkB,OAAO;AAAA,gBAC5C,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,CACD;AAAA,YAAA;AAAA,UAE7B;AAAA,UACA,UAAU;AAAA,QACR,IAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,YAAY,OAA2B,KAAe;AACpD,UAAM,OAAM,GAAG;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,SAAS,MAA2B;AAC5B,UAAA,WAAW,KAAK;AACf,WAAA,OAAO,SAAS,SAAQ,IAAI;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAA+B;AAC7B,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBF;AAOO,SAAS,gBACd,MACsB;AACtB,SAAO,gBAAgB;AACzB;"}

package/dist/esm/components/basic/doc-editor/plugins/GridPlugin/index.vue.js CHANGED Viewed

@@ -23,9 +23,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       icon: "richtext-outline",
       text: "图文环绕",
       action: async () => {
-        editor.dispatchCommand(INSERT_IMAGETEXTGRID_COMMAND, null);
+        editor.dispatchCommand(INSERT_IMAGETEXTGRID_COMMAND, { width: "100%" });
       },
-      sort: 9
+      sort: 80
     });
     registerDocEditorToolbarExtend({
       icon: "Grid",
@@ -33,15 +33,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       action: async () => {
         editor.dispatchCommand(INSERT_TEXTGRID_COMMAND, { width: "100%" });
       },
-      sort: 9
+      sort: 81
     });
     registerDocEditorToolbarExtend({
       icon: "Grid",
       text: "模块容器",
       action: async () => {
-        editor.dispatchCommand(INSERT_MODULEGRID_COMMAND, {});
+        editor.dispatchCommand(INSERT_MODULEGRID_COMMAND, { width: "100%" });
       },
-      sort: 9
+      sort: 70
     });
     registerDocEditorToolbarExtend({
       icon: "Grid",
@@ -49,9 +49,41 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       action: async () => {
         editor.dispatchCommand(INSERT_LAYOUTGRID_COMMAND, { display: "flex", width: "100%" });
       },
-      sort: 9
+      sort: 1
     });
-    const { isSelected, curSelectKey, curSelectPos } = useElementBlockSelection(GridNode.hasGridNodeByElement, () => {
+    let curActiveEl = null;
+    const findGridNodeEl = (element) => {
+      var el = element;
+      if (GridNode.hasGridNodeByElement(el)) {
+        return el;
+      }
+      while (el != null && !GridNode.hasGridNodeByElement(el)) {
+        el = el.parentElement;
+      }
+      if (el != null && el.parentElement != null && TextGridNode.hasGridNodeByElement(el) && ImageTextGridNode.hasGridNodeByElement(el.parentElement)) {
+        return el.parentElement;
+      }
+      return el;
+    };
+    const setActiveGridElement = (el) => {
+      if (el) {
+        el.classList.add("doc-edit-active");
+        if (curActiveEl && curActiveEl != el) {
+          curActiveEl.classList.remove("doc-edit-active");
+        }
+        curActiveEl = el;
+      } else {
+        curActiveEl && curActiveEl.classList.remove("doc-edit-active");
+        curActiveEl = null;
+      }
+    };
+    const { isSelected, curSelectKey, curSelectPos, setSelection } = useElementBlockSelection((el) => {
+      setActiveGridElement(findGridNodeEl(el));
+      if (el != null && el.parentElement != null && TextGridNode.hasGridNodeByElement(el) && ImageTextGridNode.hasGridNodeByElement(el.parentElement)) {
+        return el.parentElement;
+      }
+      return GridNode.hasGridNodeByElement(el);
+    }, () => {
       const node = $getNodeByKey(curSelectKey.value);
       if ($isGridNode(node)) {
         const parent = node.getParent();
@@ -63,8 +95,41 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               var result = await showGridEditDialoger(node, parent, node.getAttrs());
               editor.update(() => node.setAttrs(result));
             }
+          },
+          {
+            title: `在此之前插入布局容器`,
+            icon: "BottomLeft",
+            action: async () => {
+              editor.update(() => {
+                node.insertBefore(new LayoutGridNode({ display: "block", width: "100%" }));
+              });
+            }
+          },
+          {
+            title: `在此之后插入布局容器`,
+            icon: "BottomRight",
+            action: async () => {
+              editor.update(() => {
+                node.insertAfter(new LayoutGridNode({ display: "block", width: "100%" }));
+              });
+            }
           }
         ];
+        if ($isGridNode(parent)) {
+          toolbars.push(...[
+            {
+              title: "选中上层容器",
+              icon: "Upload",
+              action: async () => {
+                let parentEl = editor.getElementByKey(parent.getKey());
+                if (parentEl) {
+                  setActiveGridElement(parentEl);
+                  setSelection(parent.__key, parentEl);
+                }
+              }
+            }
+          ]);
+        }
         if ($isModuleGridNode(node)) {
           toolbars.push(...[
             {
@@ -101,8 +166,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         // 插入文本格子
         editor.registerCommand(INSERT_TEXTGRID_COMMAND, (payload) => {
           const textGrid = new TextGridNode(payload);
-          const p = $createParagraphNode();
-          textGrid.append(p);
+          textGrid.append($createParagraphNode());
+          textGrid.append($createParagraphNode());
+          textGrid.append($createParagraphNode());
+          textGrid.append($createParagraphNode());
+          textGrid.append($createParagraphNode());
+          textGrid.append($createParagraphNode());
           insertGridHandle(textGrid);
           return true;
         }, COMMAND_PRIORITY_EDITOR),
@@ -112,9 +181,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           return true;
         }, COMMAND_PRIORITY_EDITOR),
         // 插入图文环绕格子
-        editor.registerCommand(INSERT_IMAGETEXTGRID_COMMAND, () => {
-          const textImageGrid = new ImageTextGridNode({ width: "100%" });
-          const textGrid = new TextGridNode({ width: "100%" });
+        editor.registerCommand(INSERT_IMAGETEXTGRID_COMMAND, (payload) => {
+          const textImageGrid = new ImageTextGridNode(payload);
+          const textGrid = new TextGridNode({});
+          textGrid.append($createParagraphNode());
+          textGrid.append($createParagraphNode());
+          textGrid.append($createParagraphNode());
+          textGrid.append($createParagraphNode());
+          textGrid.append($createParagraphNode());
           textGrid.append($createParagraphNode());
           textImageGrid.append(new InlineImageNode({
             src: "",
@@ -132,7 +206,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return unref(isSelected) ? (openBlock(), createElementBlock("div", {
         key: 0,
-        class: "mk-doc-active-mark box",
+        class: "mk-doc-active-element-block-mark box",
         style: normalizeStyle(unref(curSelectPos))
       }, null, 4)) : createCommentVNode("", true);
     };

package/dist/esm/components/basic/doc-editor/plugins/GridPlugin/index.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { useLexicalComposer } from 'lexical-vue'\r\nimport { $insertNodeToNearestRoot,mergeRegister } from '@lexical/utils'\r\nimport { \r\n $getNodeByKey,$createParagraphNode,$isNodeSelection, $getSelection,\r\n ElementNode,COMMAND_PRIORITY_EDITOR\r\n} from 'lexical'\r\nimport { onMounted, onUnmounted,ref } from 'vue'\r\nimport { registerDocEditorToolbarExtend,type ToolbarExtendPlugin } from \"../../core\"\r\nimport { GridNode,$isGridNode } from \"./GridNode\"\r\nimport { type LayoutGridNodeAttrType,LayoutGridNode,INSERT_LAYOUTGRID_COMMAND } from \"./LayoutGridNode\"\r\nimport { type TextGridNodeAttrType,TextGridNode,INSERT_TEXTGRID_COMMAND } from \"./TextGridNode\"\r\nimport { type ImageTextGridNodeAttrType,ImageTextGridNode,INSERT_IMAGETEXTGRID_COMMAND } from \"./ImageTextGridNode\"\r\nimport { type ModuleGridNodeAttrType,ModuleGridNode,INSERT_MODULEGRID_COMMAND,$isModuleGridNode } from \"./ModuleGridNode\"\r\nimport { INSERT_MODULE_COMMAND } from \"../ModulePlugin/commands\"\r\nimport { showModuleSelectDialog } from \"../ModulePlugin/utils\"\r\nimport { ModuleType,useModule } from \"../ModulePlugin/composables\"\r\nimport { ImageAttrType,InlineImageNode } from '../ImagePlugin'\r\nimport { useElementBlockSelection } from '../../core'\r\nimport { createDefaultFormData } from \"../../../dynamic-form-panel/utils\"\r\nimport { showGridEditDialoger } from \"./utils\"\r\n\r\n// 编辑器\r\nconst editor = useLexicalComposer()\r\n\r\n// 注册到工具条\r\nregisterDocEditorToolbarExtend({\r\n icon:\"richtext-outline\",\r\n text:\"图文环绕\",\r\n action:async ()=>{\r\n editor.dispatchCommand(INSERT_IMAGETEXTGRID_COMMAND,null)\r\n },\r\n sort:9\r\n} as ToolbarExtendPlugin)\r\nregisterDocEditorToolbarExtend({\r\n icon:\"Grid\",\r\n text:\"文本容器\",\r\n action:async ()=>{\r\n editor.dispatchCommand(INSERT_TEXTGRID_COMMAND,{ width:\"100%\" } as TextGridNodeAttrType)\r\n },\r\n sort:9\r\n} as ToolbarExtendPlugin)\r\nregisterDocEditorToolbarExtend({\r\n icon:\"Grid\",\r\n text:\"模块容器\",\r\n action:async ()=>{\r\n editor.dispatchCommand(INSERT_MODULEGRID_COMMAND,{ } as ModuleGridNodeAttrType)\r\n },\r\n sort:9\r\n} as ToolbarExtendPlugin)\r\nregisterDocEditorToolbarExtend({\r\n icon:\"Grid\",\r\n text:\"布局容器\",\r\n action:async ()=>{\r\n editor.dispatchCommand(INSERT_LAYOUTGRID_COMMAND,{ display:\"flex\",width:\"100%\" } as LayoutGridNodeAttrType)\r\n },\r\n sort:9\r\n} as ToolbarExtendPlugin)\r\n\r\n// 使用元素模块集成了模块选中删除以及工具条\r\nconst { isSelected, curSelectKey, curSelectPos } = useElementBlockSelection(GridNode.hasGridNodeByElement,()=>{\r\n \r\n const node = $getNodeByKey(curSelectKey.value)\r\n \r\n if($isGridNode(node)){\r\n\r\n const parent = node.getParent() as ElementNode\r\n\r\n const toolbars = [\r\n {\r\n title:`编辑容器`,icon:\"Edit\",action:async ()=>{\r\n\r\n var result = await showGridEditDialoger(node,parent,node.getAttrs());\r\n \r\n editor.update(() => node.setAttrs(result as any))\r\n } \r\n }\r\n ];\r\n\r\n // 模块容器\r\n if($isModuleGridNode(node)){\r\n toolbars.push(...[\r\n {\r\n title:\"添加模块\",icon:\"Plus\",action:async ()=>{\r\n // 打开模块面板\r\n const result = (await showModuleSelectDialog()) as ModuleType;\r\n const defaultData = createDefaultFormData(result.options);\r\n // 插入模块\r\n editor.dispatchCommand(INSERT_MODULE_COMMAND,{ name:result.name,data:defaultData})\r\n } \r\n }\r\n ])\r\n }\r\n\r\n return toolbars;\r\n }\r\n\r\n return null;\r\n})\r\n\r\n\r\nonMounted(() => {\r\n\r\n // 插入格子\r\n const insertGridHandle = (layoutGrid:GridNode)=>{\r\n const selection = $getSelection()\r\n const elementNode = $isNodeSelection(selection) ? selection?.getNodes()[0] as ElementNode : null;\r\n if (elementNode) {\r\n elementNode.append(layoutGrid);\r\n }\r\n else{\r\n $insertNodeToNearestRoot(layoutGrid)\r\n }\r\n }\r\n \r\n // 注册指令\r\n const unregister = mergeRegister(\r\n // 插入布局格子\r\n editor.registerCommand<LayoutGridNodeAttrType>(INSERT_LAYOUTGRID_COMMAND,(payload) => { \r\n \r\n insertGridHandle(new LayoutGridNode(payload));\r\n \r\n return true\r\n },COMMAND_PRIORITY_EDITOR),\r\n // 插入文本格子\r\n editor.registerCommand<TextGridNodeAttrType>(INSERT_TEXTGRID_COMMAND,(payload) => { \r\n \r\n const textGrid = new TextGridNode(payload)\r\n const p = $createParagraphNode();\r\n textGrid.append(p);\r\n insertGridHandle(textGrid);\r\n \r\n return true\r\n },COMMAND_PRIORITY_EDITOR),\r\n // 插入模块格子\r\n editor.registerCommand<ModuleGridNodeAttrType>(INSERT_MODULEGRID_COMMAND,(payload) => { \r\n insertGridHandle(new ModuleGridNode(payload));\r\n return true\r\n },COMMAND_PRIORITY_EDITOR),\r\n // 插入图文环绕格子\r\n editor.registerCommand(INSERT_IMAGETEXTGRID_COMMAND,() => { \r\n \r\n const textImageGrid = new ImageTextGridNode({ width:\"100%\" } as ImageTextGridNodeAttrType)\r\n const textGrid = new TextGridNode({ width:\"100%\" } as TextGridNodeAttrType)\r\n\r\n textGrid.append($createParagraphNode())\r\n\r\n textImageGrid.append(new InlineImageNode({\r\n src:\"\",\r\n float:\"left\",\r\n width:\"200px\",\r\n margin:\"0 10px 10px 0\"\r\n } as ImageAttrType))\r\n textImageGrid.append(textGrid)\r\n\r\n\r\n insertGridHandle(textImageGrid);\r\n \r\n return true\r\n },COMMAND_PRIORITY_EDITOR)\r\n );\r\n\r\n onUnmounted(() => unregister())\r\n})\r\n</script>\r\n\r\n<template>\r\n <div class=\"mk-doc-active-mark box\" v-if=\"isSelected\" :style=\"curSelectPos\">\r\n \r\n </div>\r\n</template>\r\n./GridNode\r\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { useLexicalComposer } from 'lexical-vue'\r\nimport { $insertNodeToNearestRoot,mergeRegister } from '@lexical/utils'\r\nimport { \r\n $getNodeByKey,$createParagraphNode,$isNodeSelection, $getSelection,\r\n ElementNode,COMMAND_PRIORITY_EDITOR\r\n} from 'lexical'\r\nimport { onMounted, onUnmounted,ref } from 'vue'\r\nimport { registerDocEditorToolbarExtend,type ToolbarExtendPlugin } from \"../../core\"\r\nimport { GridNode,$isGridNode } from \"./GridNode\"\r\nimport { type LayoutGridNodeAttrType,LayoutGridNode,INSERT_LAYOUTGRID_COMMAND } from \"./LayoutGridNode\"\r\nimport { type TextGridNodeAttrType,TextGridNode,INSERT_TEXTGRID_COMMAND } from \"./TextGridNode\"\r\nimport { type ImageTextGridNodeAttrType,ImageTextGridNode,INSERT_IMAGETEXTGRID_COMMAND } from \"./ImageTextGridNode\"\r\nimport { type ModuleGridNodeAttrType,ModuleGridNode,INSERT_MODULEGRID_COMMAND,$isModuleGridNode } from \"./ModuleGridNode\"\r\nimport { INSERT_MODULE_COMMAND } from \"../ModulePlugin/commands\"\r\nimport { showModuleSelectDialog } from \"../ModulePlugin/utils\"\r\nimport { ModuleType,useModule } from \"../ModulePlugin/composables\"\r\nimport { ImageAttrType,InlineImageNode } from '../ImagePlugin'\r\nimport { useElementBlockSelection } from '../../core'\r\nimport { createDefaultFormData } from \"../../../dynamic-form-panel/utils\"\r\nimport { showGridEditDialoger } from \"./utils\"\r\n\r\n// 编辑器\r\nconst editor = useLexicalComposer()\r\n\r\n// 注册到工具条\r\nregisterDocEditorToolbarExtend({\r\n icon:\"richtext-outline\",\r\n text:\"图文环绕\",\r\n action:async ()=>{\r\n editor.dispatchCommand(INSERT_IMAGETEXTGRID_COMMAND,{ width:\"100%\" } as ImageTextGridNodeAttrType)\r\n },\r\n sort:80\r\n} as ToolbarExtendPlugin)\r\nregisterDocEditorToolbarExtend({\r\n icon:\"Grid\",\r\n text:\"文本容器\",\r\n action:async ()=>{\r\n editor.dispatchCommand(INSERT_TEXTGRID_COMMAND,{ width:\"100%\" } as TextGridNodeAttrType)\r\n },\r\n sort:81\r\n} as ToolbarExtendPlugin)\r\nregisterDocEditorToolbarExtend({\r\n icon:\"Grid\",\r\n text:\"模块容器\",\r\n action:async ()=>{\r\n editor.dispatchCommand(INSERT_MODULEGRID_COMMAND,{ width:\"100%\" } as ModuleGridNodeAttrType)\r\n },\r\n sort:70\r\n} as ToolbarExtendPlugin)\r\nregisterDocEditorToolbarExtend({\r\n icon:\"Grid\",\r\n text:\"布局容器\",\r\n action:async ()=>{\r\n editor.dispatchCommand(INSERT_LAYOUTGRID_COMMAND,{ display:\"flex\",width:\"100%\" } as LayoutGridNodeAttrType)\r\n },\r\n sort:1\r\n} as ToolbarExtendPlugin)\r\n\r\n// 当前激活的元素\r\nlet curActiveEl:HTMLElement\|null = null;\r\n// 找格子\r\nconst findGridNodeEl = (element:HTMLElement):HTMLElement\|null => {\r\n\r\n var el:HTMLElement\|null = element\r\n\r\n if(GridNode.hasGridNodeByElement(el)){\r\n return el;\r\n }\r\n\r\n while (el != null && !GridNode.hasGridNodeByElement(el)) {\r\n el = el.parentElement;\r\n }\r\n\r\n // 文本环绕的文本框不做激活处理\r\n if(el != null && el.parentElement != null && TextGridNode.hasGridNodeByElement(el) && ImageTextGridNode.hasGridNodeByElement(el.parentElement)){\r\n return el.parentElement;\r\n }\r\n\r\n return el;\r\n}\r\n// 设置激活\r\nconst setActiveGridElement = (el:HTMLElement\|null)=>{\r\n // 激活对应的格子\r\n if(el){\r\n el.classList.add(\"doc-edit-active\")\r\n if(curActiveEl && curActiveEl != el){\r\n curActiveEl.classList.remove(\"doc-edit-active\")\r\n }\r\n curActiveEl = el;\r\n }\r\n else{\r\n curActiveEl && curActiveEl.classList.remove(\"doc-edit-active\")\r\n curActiveEl = null;\r\n }\r\n}\r\n// 使用元素模块集成了模块选中删除以及工具条\r\nconst { isSelected, curSelectKey, curSelectPos,setSelection } = useElementBlockSelection((el)=>{\r\n\r\n\r\n // 设置激活\r\n setActiveGridElement(findGridNodeEl(el));\r\n\r\n // 文本环绕的文本框不做选中处理\r\n if(el != null && el.parentElement != null && TextGridNode.hasGridNodeByElement(el) && ImageTextGridNode.hasGridNodeByElement(el.parentElement)){\r\n return el.parentElement;\r\n }\r\n\r\n\r\n return GridNode.hasGridNodeByElement(el);\r\n},()=>{\r\n \r\n const node = $getNodeByKey(curSelectKey.value)\r\n \r\n if($isGridNode(node)){\r\n\r\n const parent = node.getParent() as ElementNode\r\n\r\n const toolbars = [\r\n {\r\n title:`编辑容器`,icon:\"Edit\",action:async ()=>{\r\n\r\n var result = await showGridEditDialoger(node,parent,node.getAttrs());\r\n \r\n editor.update(() => node.setAttrs(result as any))\r\n } \r\n },\r\n {\r\n title:`在此之前插入布局容器`,icon:\"BottomLeft\",action:async ()=>{\r\n editor.update(() => {\r\n node.insertBefore(new LayoutGridNode({ display:\"block\",width:\"100%\" } as any))\r\n })\r\n } \r\n },\r\n {\r\n title:`在此之后插入布局容器`,icon:\"BottomRight\",action:async ()=>{\r\n editor.update(() => {\r\n node.insertAfter(new LayoutGridNode({ display:\"block\",width:\"100%\" } as any))\r\n })\r\n } \r\n }\r\n ];\r\n\r\n // 有父亲\r\n if($isGridNode(parent)){\r\n toolbars.push(...[\r\n {\r\n title:\"选中上层容器\",icon:\"Upload\",action: async ()=> {\r\n let parentEl = editor.getElementByKey(parent.getKey());\r\n if(parentEl){\r\n setActiveGridElement(parentEl);\r\n setSelection(parent.__key,parentEl)\r\n }\r\n \r\n }\r\n }\r\n ])\r\n }\r\n\r\n // 模块容器\r\n if($isModuleGridNode(node)){\r\n toolbars.push(...[\r\n {\r\n title:\"添加模块\",icon:\"Plus\",action:async ()=>{\r\n // 打开模块面板\r\n const result = (await showModuleSelectDialog()) as ModuleType;\r\n const defaultData = createDefaultFormData(result.options);\r\n // 插入模块\r\n editor.dispatchCommand(INSERT_MODULE_COMMAND,{ name:result.name,data:defaultData})\r\n } \r\n }\r\n ])\r\n }\r\n\r\n return toolbars;\r\n }\r\n\r\n return null;\r\n})\r\n\r\n\r\nonMounted(() => {\r\n\r\n // 插入格子\r\n const insertGridHandle = (layoutGrid:GridNode)=>{\r\n const selection = $getSelection()\r\n const elementNode = $isNodeSelection(selection) ? selection?.getNodes()[0] as ElementNode : null;\r\n if (elementNode) {\r\n elementNode.append(layoutGrid);\r\n }\r\n else{\r\n $insertNodeToNearestRoot(layoutGrid)\r\n }\r\n }\r\n \r\n // 注册指令\r\n const unregister = mergeRegister(\r\n // 插入布局格子\r\n editor.registerCommand<LayoutGridNodeAttrType>(INSERT_LAYOUTGRID_COMMAND,(payload) => { \r\n \r\n insertGridHandle(new LayoutGridNode(payload));\r\n \r\n return true\r\n },COMMAND_PRIORITY_EDITOR),\r\n // 插入文本格子\r\n editor.registerCommand<TextGridNodeAttrType>(INSERT_TEXTGRID_COMMAND,(payload) => { \r\n \r\n const textGrid = new TextGridNode(payload)\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n insertGridHandle(textGrid);\r\n \r\n return true\r\n },COMMAND_PRIORITY_EDITOR),\r\n // 插入模块格子\r\n editor.registerCommand<ModuleGridNodeAttrType>(INSERT_MODULEGRID_COMMAND,(payload) => { \r\n insertGridHandle(new ModuleGridNode(payload));\r\n return true\r\n },COMMAND_PRIORITY_EDITOR),\r\n // 插入图文环绕格子\r\n editor.registerCommand<ImageTextGridNodeAttrType>(INSERT_IMAGETEXTGRID_COMMAND,(payload) => { \r\n \r\n const textImageGrid = new ImageTextGridNode(payload)\r\n const textGrid = new TextGridNode({} as TextGridNodeAttrType)\r\n\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n\r\n textImageGrid.append(new InlineImageNode({\r\n src:\"\",\r\n float:\"left\",\r\n width:\"200px\",\r\n margin:\"0 10px 10px 0\"\r\n } as ImageAttrType))\r\n textImageGrid.append(textGrid)\r\n\r\n\r\n insertGridHandle(textImageGrid);\r\n \r\n return true\r\n },COMMAND_PRIORITY_EDITOR)\r\n );\r\n\r\n onUnmounted(() => unregister())\r\n})\r\n</script>\r\n\r\n<template>\r\n <div class=\"mk-doc-active-element-block-mark box\" v-if=\"isSelected\" :style=\"curSelectPos\">\r\n \r\n </div>\r\n</template>\r\n./GridNode\r\n"],"names":[],"mappings":"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"}