npm - @maketribe/ms-app - Versions diffs - 3.2.32 → 3.2.33 - Mend

@maketribe/ms-app 3.2.32 → 3.2.33

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 (167) hide show

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

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

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

@@ -30,25 +30,17 @@ class GridNode extends lexical.ElementNode {
   }
   static importDOM() {
     return {
-      div: (domNode) => {
-        return GridNode.hasGridNodeByElement(domNode) ? {
-          conversion: () => {
-            return {
-              node: new GridNode({
-                class: GridNode.getExtraClassName(domNode),
-                width: domNode.style.width || "100%",
-                height: domNode.style.height,
-                flex: domNode.style.flex,
-                maxWidth: domNode.style.maxWidth,
-                maxHeight: domNode.style.maxHeight
-              })
-            };
-          },
-          priority: 1
-        } : null;
-      }
+      div: $covertGridDOM,
+      section: $covertGridDOM
     };
   }
+  /**
+   * 选中标题
+   * @returns
+   */
+  getTitle() {
+    return "容器";
+  }
   /**
    * 设置属性
    * @param pos
@@ -76,6 +68,13 @@ class GridNode extends lexical.ElementNode {
       version: 1
     };
   }
+  /**
+   * 获取标识类
+   * @returns
+   */
+  getMarkClassName() {
+    return `mk-doc__${this.getType()}`;
+  }
   /**
    * 更新元素属性
    * @param el
@@ -93,13 +92,12 @@ class GridNode extends lexical.ElementNode {
         el.classList.add(this.__attrs.class);
       }
     }
-  }
-  /**
-   * 获取标识类
-   * @returns
-   */
-  getMarkClassName() {
-    return `mk-doc__${this.getType()}`;
+    if (!el.classList.contains(GridNode.getMarkClassName())) {
+      el.classList.add(GridNode.getMarkClassName());
+    }
+    if (!el.classList.contains(this.getMarkClassName())) {
+      el.classList.add(this.getMarkClassName());
+    }
   }
   /**
    * 导出DOM
@@ -108,12 +106,6 @@ class GridNode extends lexical.ElementNode {
   exportDOM() {
     const element = document.createElement("div");
     this.updateElementAttr(element);
-    if (!element.classList.contains(GridNode.getMarkClassName())) {
-      element.classList.add(GridNode.getMarkClassName());
-    }
-    if (!element.classList.contains(this.getMarkClassName())) {
-      element.classList.add(this.getMarkClassName());
-    }
     return { element };
   }
   /**
@@ -135,15 +127,6 @@ class GridNode extends lexical.ElementNode {
    */
   updateDOM(prevNode, el, config) {
     this.updateElementAttr(el);
-    let extraClassName = GridNode.getExtraClassName(el).replace(this.getMarkClassName(), "").trim();
-    if (extraClassName != this.__attrs.class) {
-      if (extraClassName) {
-        el.classList.remove(extraClassName);
-      }
-      if (this.__attrs.class) {
-        el.classList.add(this.__attrs.class);
-      }
-    }
     return false;
   }
   /**
@@ -154,6 +137,23 @@ class GridNode extends lexical.ElementNode {
     return false;
   }
 }
+const $covertGridDOM = (domNode) => {
+  return GridNode.hasGridNodeByElement(domNode) ? {
+    conversion: () => {
+      return {
+        node: new GridNode({
+          class: GridNode.getExtraClassName(domNode),
+          width: domNode.style.width,
+          height: domNode.style.height,
+          flex: domNode.style.flex,
+          maxWidth: domNode.style.maxWidth,
+          maxHeight: domNode.style.maxHeight
+        })
+      };
+    },
+    priority: 1
+  } : null;
+};
 function $isGridNode(node) {
   return node instanceof GridNode;
 }

package/dist/cjs/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 \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 // 更新属性\r\n Object.keys(this.__attrs).filter(key=>key != \"class\").forEach((key:any)=>{\r\n el.style[key] = (this.__attrs as any)[key]\r\n })\r\n\r\n // 移除格子基础标识\r\n let extraClassName = GridNode.getExtraClassName(el);\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 // 添加样式\r\n if (this.__attrs.class) {\r\n el.classList.add(this.__attrs.class);\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 if (!element.classList.contains(GridNode.getMarkClassName())) {\r\n element.classList.add(GridNode.getMarkClassName());\r\n }\r\n\r\n // 标识指定\r\n if (!element.classList.contains(this.getMarkClassName())) {\r\n element.classList.add(this.getMarkClassName());\r\n }\r\n\r\n return { element }\r\n }\r\n\r\n /\r\n 创建渲染DOM\r\n * @param config \r\n * @returns \r\n /\r\n createDOM(config: EditorConfig): HTMLElement {\r\n\r\n const el = this.exportDOM().element as HTMLElement;\r\n\r\n el.setAttribute(\"node-key\",this.__key)\r\n\r\n return el;\r\n }\r\n\r\n /\r\n 更新DOM\r\n * @param prevNode \r\n * @param dom \r\n * @param config \r\n * @returns \r\n /\r\n updateDOM(prevNode: GridNode, el: HTMLElement, config: EditorConfig): boolean {\r\n // 更新属性\r\n ~~\r\n~~ this.updateElementAttr(el);\r\n\r\n ~~// 移除老标识\~~r\n ~~let extraClassName = GridNode.getExtraClassName(el).replace(this.getMarkClassName(),\"~~\~~").trim();\~~r\n\r\n ~~if(extraClassName~~ != ~~this.__attrs.class){~~\r\n\r\n if(~~extraClassName~~){\r\n ~~el.classList.remove(extraClassName)~~;\r\n }\r\n\r\n if (~~this.__attrs.class~~) {\r\n el.~~classList.add~~(~~this.__attrs.class~~);\r\n }\r\n }\r\n return ~~false~~\r\n }\r\n\r\n ~~/\~~r\n 非内联\r\n * @returns \r\n /\r\n ~~isInline()~~: ~~boolean~~ {\r\n ~~return~~ ~~false;\~~r\n }\r\n}\r\n\r\n/\r\n 是否是格子\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isGridNode(\r\n node: GridNode \| LexicalNode \| null \| undefined,\r\n): node is GridNode {\r\n return node instanceof GridNode\r\n}\r\n\r\n"],"names":["ElementNode"],"mappings":";;;;;;~~AA4BO~~,MAAM,iBAAiBA,QAAAA,YAAW;AAAA,~~EAqDvC~~,YAAY,OAAuB,KAAe;AAChD,UAAM,GAAG;~~AApDX~~;~~AAqDE~~,SAAK,UAAU;AAAA,EACjB;AAAA,~~EApDA~~,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;AAErC,WAAO,IAAI,SAAS,KAAK,SAAQ,KAAK,KAAK;AAAA,EAC7C;AAAA,EAEA,OAAO,WAAW,gBAA8C;AACvD,WAAA,IAAI,SAAS,eAAe,KAAK;AAAA,EAC1C;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAM~~,CAAC,YAAyB~~;~~AAEvB,eAAA,SAAS,qBAAqB,OAAO,IAAI;~~AAAA,~~UAE9C~~,~~YAAY,MAAI~~;~~AAEN,mBAAA;~~AAAA,~~cAEP,MAAK,IAAI,SAAS~~;AAAA,~~gBACf,OAAM,SAAS,kBAAkB,OAAO~~;AAAA~~,gBACxC,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,CACL~~;AAAA,~~YAAA~~;AAAA~~,UAEzB~~;AAAA~~,UACA,UAAU~~;AAAA~~,QACR,IAAA~~;AAAA~~,MACN~~;AAAA,~~IAAA;AAAA~~,~~EAEJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,~~SAAS,MAAuB;AACxB,UAAA,WAAW,KAAK;AACf,WAAA,OAAO,SAAS,SAAQ,IAAI;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAA2B;AACzB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,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;AAGxB,WAAA,KAAK,KAAK,OAAO,EAAE,OAAO,CAAK,QAAA,OAAO,OAAO,EAAE,QAAQ,CAAC,QAAU;AACvE,SAAG,MAAM,GAAG,IAAK,KAAK,QAAgB,GAAG;AAAA,IAAA,CAC1C;AAGG,QAAA,iBAAiB,SAAS,kBAAkB,EAAE;AAE/C,QAAA,kBAAkB,KAAK,QAAQ,OAAM;AAEtC,UAAG,gBAAe;AACb,WAAA,UAAU,OAAO,cAAc;AAAA,MACpC;AAGI,UAAA,KAAK,QAAQ,OAAO;AACtB,WAAG,UAAU,IAAI,KAAK,QAAQ,KAAK;AAAA,MACrC;AAAA,IACF;~~AAAA~~,~~EACF;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,mBAA2B;AAClB,WAAA,WAAW,KAAK,QAAA,CAAS;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAA6B;AAErB,UAAA,UAAU,SAAS,cAAc,KAAK;AAE5C,SAAK,kBAAkB,OAAO;AAG9B,~~QAAI,CAAC,~~QAAQ~~,UAAU,SAAS,SAAS,iBAAA,CAAkB,GAAG;~~AAC5D~~,~~cAAQ~~,UAAU,IAAI,SAAS,iBAAkB,CAAA;AAAA,~~IACnD~~;AAGA,QAAI,CAAC,~~QAAQ~~,UAAU,SAAS,KAAK,iBAAA,CAAkB,GAAG;~~AACxD~~,~~cAAQ~~,UAAU,IAAI,KAAK,iBAAkB,CAAA;AAAA,~~IAC/C~~;~~AAEA~~,WAAO,EAAE,QAAQ;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,UAAU,QAAmC;AAErC,UAAA,KAAK,KAAK,UAAA,EAAY;AAEzB,OAAA,aAAa,YAAW,KAAK,KAAK;AAE9B,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,UAAU,UAAoB,IAAiB,QAA+B;~~AAG5E~~,SAAK,kBAAkB,EAAE;~~AAGrB~~,~~QAAA~~,~~iBAAiB~~,~~SAAS~~,~~kBAAkB~~,~~EAAE~~,~~EAAE~~,~~QAAQ~~,~~KAAK,~~iBAAiB,~~GAAE~~,~~EAAE,EAAE,KAAK~~;~~AAE1F~~,~~QAAA~~,~~kBAAkB~~,~~KAAK~~,~~QAAQ~~,~~OAAM~~;~~AAEtC~~,~~UAAG~~,~~gBAAe~~;~~AACb~~,~~WAAA~~,~~UAAU~~,~~OAAO~~,~~cAAc~~;AAAA,~~MACpC;AAEI~~,~~UAAA~~,~~KAAK~~,~~QAAQ~~,OAAO;~~AACtB~~,~~WAAG~~,~~UAAU~~,~~IAAI~~,~~KAAK~~,QAAQ,~~KAAK~~;AAAA,~~MACrC~~;AAAA,~~IACF;AACO~~,~~WAAA~~;AAAA,~~EACT~~;AAAA;AAAA;AAAA;AAAA~~;AAAA~~,~~EAMA~~,~~WAAoB~~;~~AACX,WAAA;~~AAAA,~~EACT~~;~~AACF~~;~~AAOO~~,SAAS,YACd,MACkB;AAClB,SAAO,gBAAgB;AACzB;;;"}
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, DOMConversion } 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// console.log(ElementNode);\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 : $covertGridDOM,\r\n section : $covertGridDOM\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 * @returns \r\n /\r\n getTitle(){\r\n return \"容器\";\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 * @returns \r\n /\r\n getMarkClassName(): string {\r\n return `mk-doc__${this.getType()}`\r\n }\r\n\r\n /\r\n 更新元素属性\r\n * @param el \r\n /\r\n updateElementAttr(el:HTMLElement){\r\n\r\n // 更新属性\r\n Object.keys(this.__attrs).filter(key=>key != \"class\").forEach((key:any)=>{\r\n el.style[key] = (this.__attrs as any)[key]\r\n })\r\n\r\n // 移除格子基础标识\r\n let extraClassName = GridNode.getExtraClassName(el);\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 // 添加样式\r\n if (this.__attrs.class) {\r\n el.classList.add(this.__attrs.class);\r\n }\r\n }\r\n\r\n // 标识基础格子\r\n if (!el.classList.contains(GridNode.getMarkClassName())) {\r\n el.classList.add(GridNode.getMarkClassName());\r\n }\r\n\r\n // 标识指定格子\r\n if (!el.classList.contains(this.getMarkClassName())) {\r\n el.classList.add(this.getMarkClassName());\r\n }\r\n\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 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 this.updateElementAttr(el);\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 转换DOM\r\n * @param node \r\n * @returns \r\n /\r\nconst $covertGridDOM = (domNode: HTMLElement):DOMConversion<HTMLElement> \| null => {\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,\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 是否是格子\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isGridNode(\r\n node: GridNode \| LexicalNode \| null \| undefined,\r\n): node is GridNode {\r\n return node instanceof GridNode\r\n}\r\n\r\n"],"names":["ElementNode"],"mappings":"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"}

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

@@ -30,7 +30,7 @@ class ImageTextGridNode extends GridNode.GridNode {
             return {
               node: new ImageTextGridNode({
                 class: ImageTextGridNode.getExtraClassName(domNode),
-                width: domNode.style.width || "100%",
+                width: domNode.style.width,
                 height: domNode.style.height,
                 flex: domNode.style.flex,
                 maxWidth: domNode.style.maxWidth,
@@ -46,6 +46,13 @@ class ImageTextGridNode extends GridNode.GridNode {
   constructor(attrs, key) {
     super(attrs, key);
   }
+  /**
+   * 选中标题
+   * @returns
+   */
+  getTitle() {
+    return "图文环绕";
+  }
   /**
    * 设置属性
    * @param pos

package/dist/cjs/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<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":["createCommand","GridNode"],"mappings":";;;;AAYa,MAAA,+BAA0EA,sBAAc,8BAA8B;AAU5H,MAAM,0BAA0BC,SAAAA,SAAQ;AAAA,EAI7C,OAAO,UAAkB;AAChB,WAAA;AAAA,EACT;AAAA,EAGA,OAAO,qBAAqB,IAAgC;AAC1D,WAAO,GAAG,UAAU,SAAS,kBAAkB,kBAAkB,IAAI,KAAK;AAAA,EAC5E;AAAA,EAEA,OAAO,mBAA2B;AACzB,WAAA,WAAW,kBAAkB,QAAA,CAAS;AAAA,EAC/C;AAAA,EAEA,OAAO,kBAAkB,IAAe;AAC/B,WAAAA,kBAAS,kBAAkB,EAAE,EAAE,QAAQ,kBAAkB,oBAAmB,EAAE,EAAE;EACzF;AAAA,EAEA,OAAO,MAAM,MAA4C;AACvD,WAAO,IAAI,kBAAkB,KAAK,SAAQ,KAAK,KAAK;AAAA,EACtD;AAAA,EAEA,OAAO,WAAW,gBAAgE;AACzE,WAAA,IAAI,kBAAkB,eAAe,KAAK;AAAA,EACnD;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAM,CAAC,YAAyB;AAEtB,eAAA,kBAAkB,qBAAqB,OAAO,IAAI;AAAA,UAExD,YAAY,MAAI;AAEN,mBAAA;AAAA,cACN,MAAK,IAAI,kBAAkB;AAAA,gBACzB,OAAM,kBAAkB,kBAAkB,OAAO;AAAA,gBACjD,OAAM,QAAQ,MAAM~~,SAAS~~;AAAA,~~gBAC7B~~,QAAO,QAAQ,MAAM;AAAA,gBACrB,MAAK,QAAQ,MAAM;AAAA,gBACnB,UAAS,QAAQ,MAAM;AAAA,gBACvB,WAAU,QAAQ,MAAM;AAAA,cAAA,CACI;AAAA,YAAA;AAAA,UAElC;AAAA,UACA,UAAU;AAAA,QACR,IAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,YAAY,OAAgC,KAAe;AACzD,UAAM,OAAM,GAAG;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,SAAS,MAAgC;AACjC,UAAA,WAAW,KAAK;AACf,WAAA,OAAO,SAAS,SAAQ,IAAI;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAoC;AAClC,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAKA,aAAiC;AACxB,WAAA;AAAA,MACL,GAAG,MAAM,WAAW;AAAA,MACpB,MAAM,KAAK,QAAQ;AAAA,MACnB,OAAM,KAAK;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA;AAAA;AAAA;AAAA,EAMA,aAAsB;AACb,WAAA;AAAA,EACT;AACF;AAOO,SAAS,qBACd,MAC2B;AAC3B,SAAO,gBAAgB;AACzB;;;;"}
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,\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 * @returns \r\n /\r\n getTitle(){\r\n return \"图文环绕\";\r\n }\r\n\r\n /\r\n 设置属性\r\n * @param pos \r\n /\r\n setAttrs(data?:ImageTextGridNodeAttrType){\r\n const writable = this.getWritable();\r\n Object.assign(writable.__attrs,data)\r\n }\r\n\r\n /\r\n 获取属性\r\n * @param pos \r\n /\r\n getAttrs():ImageTextGridNodeAttrType{\r\n return this.__attrs;\r\n }\r\n /\r\n 导出JSON\r\n * @returns \r\n /\r\n exportJSON(): SerializedGridNode {\r\n return {\r\n ...super.exportJSON(),\r\n type: this.getType(),\r\n attrs:this.__attrs,\r\n version: 1\r\n }\r\n }\r\n \r\n\r\n / 不允许空\r\n * @returns \r\n /\r\n canBeEmpty(): boolean {\r\n return false\r\n }\r\n}\r\n\r\n/\r\n 判断是否是图文节点\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isImageTextGridNode(\r\n node: ImageTextGridNode \| LexicalNode \| null \| undefined,\r\n): node is ImageTextGridNode {\r\n return node instanceof ImageTextGridNode\r\n}\r\n"],"names":["createCommand","GridNode"],"mappings":";;;;AAYa,MAAA,+BAA0EA,sBAAc,8BAA8B;AAU5H,MAAM,0BAA0BC,SAAAA,SAAQ;AAAA,EAI7C,OAAO,UAAkB;AAChB,WAAA;AAAA,EACT;AAAA,EAGA,OAAO,qBAAqB,IAAgC;AAC1D,WAAO,GAAG,UAAU,SAAS,kBAAkB,kBAAkB,IAAI,KAAK;AAAA,EAC5E;AAAA,EAEA,OAAO,mBAA2B;AACzB,WAAA,WAAW,kBAAkB,QAAA,CAAS;AAAA,EAC/C;AAAA,EAEA,OAAO,kBAAkB,IAAe;AAC/B,WAAAA,kBAAS,kBAAkB,EAAE,EAAE,QAAQ,kBAAkB,oBAAmB,EAAE,EAAE;EACzF;AAAA,EAEA,OAAO,MAAM,MAA4C;AACvD,WAAO,IAAI,kBAAkB,KAAK,SAAQ,KAAK,KAAK;AAAA,EACtD;AAAA,EAEA,OAAO,WAAW,gBAAgE;AACzE,WAAA,IAAI,kBAAkB,eAAe,KAAK;AAAA,EACnD;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAM,CAAC,YAAyB;AAEtB,eAAA,kBAAkB,qBAAqB,OAAO,IAAI;AAAA,UAExD,YAAY,MAAI;AAEN,mBAAA;AAAA,cACN,MAAK,IAAI,kBAAkB;AAAA,gBACzB,OAAM,kBAAkB,kBAAkB,OAAO;AAAA,gBACjD,OAAM,QAAQ,MAAM;AAAA,gBACpB,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,WAAU;AACD,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,SAAS,MAAgC;AACjC,UAAA,WAAW,KAAK;AACf,WAAA,OAAO,SAAS,SAAQ,IAAI;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAoC;AAClC,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAKA,aAAiC;AACxB,WAAA;AAAA,MACL,GAAG,MAAM,WAAW;AAAA,MACpB,MAAM,KAAK,QAAQ;AAAA,MACnB,OAAM,KAAK;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA;AAAA;AAAA;AAAA,EAMA,aAAsB;AACb,WAAA;AAAA,EACT;AACF;AAOO,SAAS,qBACd,MAC2B;AAC3B,SAAO,gBAAgB;AACzB;;;;"}

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

@@ -24,34 +24,20 @@ class LayoutGridNode extends GridNode.GridNode {
   }
   static importDOM() {
     return {
-      div: (domNode) => {
-        return LayoutGridNode.hasGridNodeByElement(domNode) ? {
-          conversion: () => {
-            return {
-              node: new LayoutGridNode({
-                class: LayoutGridNode.getExtraClassName(domNode),
-                display: domNode.style.display || "block",
-                width: domNode.style.width || "100%",
-                height: domNode.style.height,
-                maxWidth: domNode.style.maxWidth,
-                maxHeight: domNode.style.maxHeight,
-                flex: domNode.style.flex,
-                flexDirection: domNode.style.flexDirection,
-                flexWrap: domNode.style.flexWrap,
-                alignContent: domNode.style.alignContent,
-                justifyContent: domNode.style.justifyContent,
-                alignItems: domNode.style.alignItems
-              })
-            };
-          },
-          priority: 4
-        } : null;
-      }
+      div: $covertGridDOM,
+      section: $covertGridDOM
     };
   }
   constructor(attrs, key) {
     super(attrs, key);
   }
+  /**
+   * 选中标题
+   * @returns
+   */
+  getTitle() {
+    return "布局容器";
+  }
   /**
    * 设置属性
    * @param pos
@@ -111,6 +97,29 @@ class LayoutGridNode extends GridNode.GridNode {
     return false;
   }
 }
+const $covertGridDOM = (domNode) => {
+  return LayoutGridNode.hasGridNodeByElement(domNode) ? {
+    conversion: () => {
+      return {
+        node: new LayoutGridNode({
+          class: LayoutGridNode.getExtraClassName(domNode),
+          display: domNode.style.display,
+          width: domNode.style.width,
+          height: domNode.style.height,
+          maxWidth: domNode.style.maxWidth,
+          maxHeight: domNode.style.maxHeight,
+          flex: domNode.style.flex,
+          flexDirection: domNode.style.flexDirection,
+          flexWrap: domNode.style.flexWrap,
+          alignContent: domNode.style.alignContent,
+          justifyContent: domNode.style.justifyContent,
+          alignItems: domNode.style.alignItems
+        })
+      };
+    },
+    priority: 4
+  } : null;
+};
 function $isLayoutGridNode(node) {
   return node instanceof LayoutGridNode;
 }

package/dist/cjs/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, 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":["createCommand","GridNode"],"mappings":";;;;AAmBa,MAAA,4BAAoEA,sBAAc,2BAA2B;AAWnH,MAAM,uBAAuBC,SAAAA,SAAQ;AAAA,EAI1C,OAAO,UAAkB;AAAS,WAAA;AAAA,EAAe;AAAA,EAEjD,OAAO,qBAAqB,IAAgC;AAC1D,WAAO,GAAG,UAAU,SAAS,eAAe,kBAAkB,IAAI,KAAK;AAAA,EACzE;AAAA,EAEA,OAAO,mBAA2B;AACzB,WAAA,WAAW,eAAe,QAAA,CAAS;AAAA,EAC5C;AAAA,EACA,OAAO,kBAAkB,IAAe;AAC/B,WAAAA,kBAAS,kBAAkB,EAAE,EAAE,QAAQ,eAAe,oBAAmB,EAAE,EAAE;EACtF;AAAA,EACA,OAAO,MAAM,MAAsC;AACjD,WAAO,IAAI,eAAe,KAAK,SAAQ,KAAK,KAAK;AAAA,EACnD;AAAA,EAEA,OAAO,WAAW,gBAA0D;AACnE,WAAA,IAAI,eAAe,eAAe,KAAK;AAAA,EAChD;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAM~~,CAAC,YAAyB~~;~~AAEtB,eAAA,eAAe,qBAAqB,OAAO,IAAI;~~AAAA,~~UAErD~~,~~YAAY,MAAI~~;~~AAEN,mBAAA;~~AAAA,~~cACN,MAAK,IAAI,eAAe~~;AAAA,~~gBACtB,OAAM,eAAe,kBAAkB,OAAO~~;AAAA,~~gBAC9C~~,~~SAAQ~~,~~QAAQ~~,~~MAAM,WAAW~~;~~AAAA~~,~~gBACjC~~,OAAM,~~QAAQ,MAAM,SAAS~~;AAAA,~~gBAC7B,QAAO,QAAQ,MAAM~~;AAAA~~,gBACrB,UAAS,QAAQ,MAAM~~;AAAA~~,gBACvB,WAAU,QAAQ,MAAM~~;AAAA~~,gBACxB,MAAK,QAAQ,MAAM~~;AAAA~~,gBACnB,eAAc,QAAQ,MAAM~~;AAAA,~~gBAC5B~~,~~UAAS,QAAQ,MAAM~~;~~AAAA~~,~~gBACvB,cAAa,QAAQ,MAAM~~;AAAA,~~gBAC3B,gBAAe,QAAQ,MAAM~~;AAAA~~,gBAC7B,YAAW,QAAQ,MAAM~~;AAAA~~,cAAA,CACA~~;AAAA~~,YAAA~~;AAAA~~,UAE/B~~;AAAA,~~UACA~~,~~UAAU;AAAA,QACR,IAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,YAAY,OAA6B,KAAe;AACtD,UAAM,OAAM,GAAG;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,~~SAAS,MAA6B;AAC9B,UAAA,WAAW,KAAK;AACf,WAAA,OAAO,SAAS,SAAQ,IAAI;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAiC;AAC/B,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAKA,aAAiC;AACxB,WAAA;AAAA,MACL,GAAG,MAAM,WAAW;AAAA,MACpB,MAAM,KAAK,QAAQ;AAAA,MACnB,OAAM,KAAK;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEb;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;;;;"}
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, DOMConversion } 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 : $covertGridDOM,\r\n section : $covertGridDOM\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 * @returns \r\n /\r\n getTitle(){\r\n return \"布局容器\";\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 转换DOM\r\n * @param node \r\n * @returns \r\n /\r\nconst $covertGridDOM = (domNode: HTMLElement):DOMConversion<HTMLElement> \| null => {\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,\r\n width:domNode.style.width,\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 * @param node \r\n * @returns \r\n */\r\nexport function $isLayoutGridNode(\r\n node: LayoutGridNode \| LexicalNode \| null \| undefined,\r\n): node is LayoutGridNode {\r\n return node instanceof LayoutGridNode\r\n}\r\n"],"names":["createCommand","GridNode"],"mappings":"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"}

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

@@ -24,29 +24,20 @@ class ModuleGridNode extends GridNode.GridNode {
   }
   static importDOM() {
     return {
-      div: (domNode) => {
-        return ModuleGridNode.hasGridNodeByElement(domNode) ? {
-          conversion: () => {
-            return {
-              node: new ModuleGridNode({
-                class: ModuleGridNode.getExtraClassName(domNode),
-                width: domNode.style.width || "100%",
-                height: domNode.style.height,
-                flex: domNode.style.flex,
-                maxWidth: domNode.style.maxWidth,
-                maxHeight: domNode.style.maxHeight,
-                overflowX: domNode.style.overflowX == "auto"
-              })
-            };
-          },
-          priority: 4
-        } : null;
-      }
+      div: $covertGridDOM,
+      section: $covertGridDOM
     };
   }
   constructor(attrs, key) {
     super(attrs, key);
   }
+  /**
+   * 选中标题
+   * @returns
+   */
+  getTitle() {
+    return "模块容器";
+  }
   /**
    * 设置属性
    * @param pos
@@ -91,6 +82,12 @@ class ModuleGridNode extends GridNode.GridNode {
         el.classList.add(this.__attrs.class);
       }
     }
+    if (!el.classList.contains(GridNode.GridNode.getMarkClassName())) {
+      el.classList.add(GridNode.GridNode.getMarkClassName());
+    }
+    if (!el.classList.contains(this.getMarkClassName())) {
+      el.classList.add(this.getMarkClassName());
+    }
     if (this.__attrs.overflowX) {
       el.style.overflowX = "auto";
       el.style.whiteSpace = "nowrap";
@@ -125,6 +122,24 @@ class ModuleGridNode extends GridNode.GridNode {
   //   return true;
   // }
 }
+const $covertGridDOM = (domNode) => {
+  return ModuleGridNode.hasGridNodeByElement(domNode) ? {
+    conversion: () => {
+      return {
+        node: new ModuleGridNode({
+          class: ModuleGridNode.getExtraClassName(domNode),
+          width: domNode.style.width,
+          height: domNode.style.height,
+          flex: domNode.style.flex,
+          maxWidth: domNode.style.maxWidth,
+          maxHeight: domNode.style.maxHeight,
+          overflowX: domNode.style.overflowX == "auto"
+        })
+      };
+    },
+    priority: 4
+  } : null;
+};
 function $isModuleGridNode(node) {
   return node instanceof ModuleGridNode;
 }

package/dist/cjs/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, 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\r\n // 更新属性\r\n Object.keys(this.__attrs).filter(key=>key != \"class\" && key != \"overflowX\").forEach((key:any)=>{\r\n el.style[key] = (this.__attrs as any)[key]\r\n })\r\n\r\n // 移除格子基础标识\r\n let extraClassName = GridNode.getExtraClassName(el);\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 // 添加样式\r\n if (this.__attrs.class) {\r\n el.classList.add(this.__attrs.class);\r\n }\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":["createCommand","GridNode"],"mappings":";;;;AAca,MAAA,4BAAoEA,sBAAc,2BAA2B;AAWnH,MAAM,uBAAuBC,SAAAA,SAAQ;AAAA,EAI1C,OAAO,UAAkB;AAAS,WAAA;AAAA,EAAe;AAAA,EAEjD,OAAO,qBAAqB,IAAgC;AAC1D,WAAO,GAAG,UAAU,SAAS,eAAe,kBAAkB,IAAI,KAAK;AAAA,EACzE;AAAA,EAEA,OAAO,mBAA2B;AACzB,WAAA,WAAW,eAAe,QAAA,CAAS;AAAA,EAC5C;AAAA,EACA,OAAO,kBAAkB,IAAe;AAC/B,WAAAA,kBAAS,kBAAkB,EAAE,EAAE,QAAQ,eAAe,oBAAmB,EAAE,EAAE;EACtF;AAAA,EACA,OAAO,MAAM,MAAsC;AACjD,WAAO,IAAI,eAAe,KAAK,SAAQ,KAAK,KAAK;AAAA,EACnD;AAAA,EAEA,OAAO,WAAW,gBAA0D;AACnE,WAAA,IAAI,eAAe,eAAe,KAAK;AAAA,EAChD;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAM~~,CAAC,YAAyB~~;~~AAEtB~~,~~eAAA~~,~~eAAe,qBAAqB,OAAO,IAAI~~;AAAA,~~UAErD,YAAY,MAAI~~;~~AAEN~~,~~mBAAA~~;AAAA,~~cACN~~,~~MAAK~~,~~IAAI~~,~~eAAe~~;~~AAAA~~,~~gBACtB~~,OAAM,~~eAAe,kBAAkB,OAAO~~;AAAA,~~gBAC9C,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;AAG/B,WAAO,KAAK,KAAK,OAAO,EAAE,OAAO,CAAA,QAAK,OAAO,WAAW,OAAO,WAAW,EAAE,QAAQ,CAAC,QAAU;AAC7F,SAAG,MAAM,GAAG,IAAK,KAAK,QAAgB,GAAG;AAAA,IAAA,CAC1C;AAGG,QAAA,iBAAiBA,SAAAA,SAAS,kBAAkB,EAAE;AAE/C,QAAA,kBAAkB,KAAK,QAAQ,OAAM;AAEtC,UAAG,gBAAe;AACb,WAAA,UAAU,OAAO,cAAc;AAAA,MACpC;AAGI,UAAA,KAAK,QAAQ,OAAO;AACtB,WAAG,UAAU,IAAI,KAAK,QAAQ,KAAK;AAAA,MACrC;AAAA,IACF;~~AAEG~~,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;;;;"}
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, DOMConversion } 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 : $covertGridDOM,\r\n section : $covertGridDOM\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 * @returns \r\n /\r\n getTitle(){\r\n return \"模块容器\";\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\r\n // 更新属性\r\n Object.keys(this.__attrs).filter(key=>key != \"class\" && key != \"overflowX\").forEach((key:any)=>{\r\n el.style[key] = (this.__attrs as any)[key]\r\n })\r\n\r\n // 移除格子基础标识\r\n let extraClassName = GridNode.getExtraClassName(el);\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 // 添加样式\r\n if (this.__attrs.class) {\r\n el.classList.add(this.__attrs.class);\r\n }\r\n }\r\n\r\n // 标识基础格子\r\n if (!el.classList.contains(GridNode.getMarkClassName())) {\r\n el.classList.add(GridNode.getMarkClassName());\r\n }\r\n\r\n // 标识指定格子\r\n if (!el.classList.contains(this.getMarkClassName())) {\r\n el.classList.add(this.getMarkClassName());\r\n }\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 转换DOM\r\n * @param node \r\n * @returns \r\n /\r\nconst $covertGridDOM = (domNode: HTMLElement):DOMConversion<HTMLElement> \| null => {\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,\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 * @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":["createCommand","GridNode"],"mappings":";;;;AAca,MAAA,4BAAoEA,sBAAc,2BAA2B;AAWnH,MAAM,uBAAuBC,SAAAA,SAAQ;AAAA,EAI1C,OAAO,UAAkB;AAAS,WAAA;AAAA,EAAe;AAAA,EAEjD,OAAO,qBAAqB,IAAgC;AAC1D,WAAO,GAAG,UAAU,SAAS,eAAe,kBAAkB,IAAI,KAAK;AAAA,EACzE;AAAA,EAEA,OAAO,mBAA2B;AACzB,WAAA,WAAW,eAAe,QAAA,CAAS;AAAA,EAC5C;AAAA,EACA,OAAO,kBAAkB,IAAe;AAC/B,WAAAA,kBAAS,kBAAkB,EAAE,EAAE,QAAQ,eAAe,oBAAmB,EAAE,EAAE;EACtF;AAAA,EACA,OAAO,MAAM,MAAsC;AACjD,WAAO,IAAI,eAAe,KAAK,SAAQ,KAAK,KAAK;AAAA,EACnD;AAAA,EAEA,OAAO,WAAW,gBAA0D;AACnE,WAAA,IAAI,eAAe,eAAe,KAAK;AAAA,EAChD;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAM;AAAA,MACN,SAAU;AAAA,IAAA;AAAA,EAEd;AAAA,EAEA,YAAY,OAA6B,KAAe;AACtD,UAAM,OAAM,GAAG;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAU;AACD,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAKA,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;AAG/B,WAAO,KAAK,KAAK,OAAO,EAAE,OAAO,CAAA,QAAK,OAAO,WAAW,OAAO,WAAW,EAAE,QAAQ,CAAC,QAAU;AAC7F,SAAG,MAAM,GAAG,IAAK,KAAK,QAAgB,GAAG;AAAA,IAAA,CAC1C;AAGG,QAAA,iBAAiBA,SAAAA,SAAS,kBAAkB,EAAE;AAE/C,QAAA,kBAAkB,KAAK,QAAQ,OAAM;AAEtC,UAAG,gBAAe;AACb,WAAA,UAAU,OAAO,cAAc;AAAA,MACpC;AAGI,UAAA,KAAK,QAAQ,OAAO;AACtB,WAAG,UAAU,IAAI,KAAK,QAAQ,KAAK;AAAA,MACrC;AAAA,IACF;AAGA,QAAI,CAAC,GAAG,UAAU,SAASA,SAAS,SAAA,iBAAA,CAAkB,GAAG;AACvD,SAAG,UAAU,IAAIA,SAAAA,SAAS,iBAAkB,CAAA;AAAA,IAC9C;AAGA,QAAI,CAAC,GAAG,UAAU,SAAS,KAAK,iBAAA,CAAkB,GAAG;AACnD,SAAG,UAAU,IAAI,KAAK,iBAAkB,CAAA;AAAA,IAC1C;AAGG,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;AAOA,MAAM,iBAAiB,CAAC,YAA2D;AAEzE,SAAA,eAAe,qBAAqB,OAAO,IAAI;AAAA,IAErD,YAAY,MAAI;AAEN,aAAA;AAAA,QACN,MAAK,IAAI,eAAe;AAAA,UACtB,OAAM,eAAe,kBAAkB,OAAO;AAAA,UAC9C,OAAM,QAAQ,MAAM;AAAA,UACpB,QAAO,QAAQ,MAAM;AAAA,UACrB,MAAK,QAAQ,MAAM;AAAA,UACnB,UAAS,QAAQ,MAAM;AAAA,UACvB,WAAU,QAAQ,MAAM;AAAA,UACxB,WAAU,QAAQ,MAAM,aAAa;AAAA,QAAA,CACZ;AAAA,MAAA;AAAA,IAE/B;AAAA,IACA,UAAU;AAAA,EACR,IAAA;AACN;AAOO,SAAS,kBACd,MACwB;AACxB,SAAO,gBAAgB;AACzB;;;;"}

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

@@ -30,7 +30,7 @@ class TextGridNode extends GridNode.GridNode {
             return {
               node: new TextGridNode({
                 class: TextGridNode.getExtraClassName(domNode),
-                width: domNode.style.width || "100%",
+                width: domNode.style.width,
                 height: domNode.style.height,
                 flex: domNode.style.flex,
                 maxWidth: domNode.style.maxWidth,
@@ -46,6 +46,13 @@ class TextGridNode extends GridNode.GridNode {
   constructor(attrs, key) {
     super(attrs, key);
   }
+  /**
+   * 选中标题
+   * @returns
+   */
+  getTitle() {
+    return "文本框";
+  }
   /**
    * 设置属性
    * @param pos

package/dist/cjs/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, 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":["createCommand","GridNode"],"mappings":";;;;AAOa,MAAA,0BAA4DA,sBAAc,yBAAyB;AAezG,MAAM,qBAAqBC,SAAAA,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,WAAAA,kBAAS,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;;;;"}
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,\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 * @returns \r\n /\r\n getTitle(){\r\n return \"文本框\";\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":["createCommand","GridNode"],"mappings":";;;;AAOa,MAAA,0BAA4DA,sBAAc,yBAAyB;AAezG,MAAM,qBAAqBC,SAAAA,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,WAAAA,kBAAS,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;AAAA,gBACpB,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,WAAU;AACD,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAKA,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/cjs/components/basic/doc-editor/plugins/GridPlugin/index.vue.js CHANGED Viewed

@@ -52,42 +52,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       },
       sort: 1
     });
-    let curActiveEl = null;
-    const findGridNodeEl = (element) => {
-      var el = element;
-      if (GridNode.GridNode.hasGridNodeByElement(el)) {
-        return el;
-      }
-      while (el != null && !GridNode.GridNode.hasGridNodeByElement(el)) {
-        el = el.parentElement;
-      }
-      if (el != null && el.parentElement != null && TextGridNode.TextGridNode.hasGridNodeByElement(el) && ImageTextGridNode.ImageTextGridNode.hasGridNodeByElement(el.parentElement)) {
-        return el.parentElement;
-      } else if (el != null && el.parentElement != null && ModuleGridNode.ModuleGridNode.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 } = elementBlock.useElementBlockSelection((el) => {
-      setActiveGridElement(findGridNodeEl(el));
+    elementBlock.useElementBlockSelection((el) => {
       if (el != null && el.parentElement != null && TextGridNode.TextGridNode.hasGridNodeByElement(el) && ImageTextGridNode.ImageTextGridNode.hasGridNodeByElement(el.parentElement)) {
         return el.parentElement;
       }
       return GridNode.GridNode.hasGridNodeByElement(el);
-    }, () => {
-      const node = lexical.$getNodeByKey(curSelectKey.value);
+    }, (nodeKey) => {
+      const node = lexical.$getNodeByKey(nodeKey);
       if (GridNode.$isGridNode(node)) {
         const parent = node.getParent();
         const toolbars = [
@@ -118,21 +89,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             }
           }
         ];
-        if (GridNode.$isGridNode(parent)) {
-          toolbars.push(...[
-            {
-              title: "选中上层容器",
-              icon: "Upload",
-              action: async () => {
-                let parentEl = editor.getElementByKey(parent.getKey());
-                if (parentEl) {
-                  setActiveGridElement(parentEl);
-                  setSelection(parent.__key, parentEl);
-                }
-              }
-            }
-          ]);
-        }
         if (ModuleGridNode.$isModuleGridNode(node)) {
           toolbars.push(...[
             {
@@ -207,11 +163,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       vue.onUnmounted(() => unregister());
     });
     return (_ctx, _cache) => {
-      return vue.unref(isSelected) ? (vue.openBlock(), vue.createElementBlock("div", {
-        key: 0,
-        class: "mk-doc-active-element-block-mark box",
-        style: vue.normalizeStyle(vue.unref(curSelectPos))
-      }, null, 4)) : vue.createCommentVNode("", true);
+      return null;
     };
   }
 });