@maketribe/ms-app 3.2.32 → 3.2.34

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

@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 '../../core/composables'\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,0) + \"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

@@ -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

@@ -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":"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"}
+{"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

@@ -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

@@ -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;;;;"}
+{"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

@@ -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

@@ -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":"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"}
+{"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

@@ -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

@@ -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":"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"}
+{"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

@@ -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

@@ -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;;;;"}
+{"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;;;;"}