@maketribe/ms-app 3.2.26 → 3.2.27

package/dist/esm/components/basic/doc-editor/core/element-block.js

@@ -37,6 +37,17 @@ const useElementBlockSelection = (func, toolsbars) => {
       editor.dispatchCommand(SELECTED_ELEMENTBLOCK_COMMAND, null);
     }
   };
+  const setSelection = async (nodeKey, el) => {
+    if (isSelected.value) {
+      isSelected.value = false;
+      await clearSelection(editor);
+    }
+    await new Promise((reslove) => setTimeout(reslove, 10));
+    await setSelected(editor, true, nodeKey);
+    curSelectEl.value = el == null ? editor.getElementByKey(nodeKey) : el;
+    curSelectKey.value = nodeKey;
+    isSelected.value = isNodeSelected(editor, nodeKey);
+  };
   watch(isSelected, (state) => {
     if (state) {
       updateActiveViewState(state ? curSelectEl.value : null);
@@ -49,11 +60,7 @@ const useElementBlockSelection = (func, toolsbars) => {
       // 更新选中状态
       editor.registerUpdateListener(() => {
         isSelected.value = isNodeSelected(editor, curSelectKey.value);
-        setTimeout(() => {
-          if (isNodeSelected(editor, curSelectKey.value)) {
-            updateActiveBox(curSelectEl.value);
-          }
-        }, 10);
+        setTimeout(() => updateActiveBox(curSelectEl.value), 10);
       }),
       // 点击选中
       editor.registerCommand(CLICK_COMMAND, (event) => {
@@ -62,21 +69,19 @@ const useElementBlockSelection = (func, toolsbars) => {
         if (nodeKey != null) {
           event.preventDefault();
           if (!event.shiftKey) {
-            clearSelection(editor);
+            clearSelection(editor).then(() => {
+              setSelection(nodeKey, el);
+            });
+          } else {
+            setSelection(nodeKey, el);
           }
-          setTimeout(() => {
-            setSelected(editor, true, nodeKey);
-            curSelectEl.value = el;
-            curSelectKey.value = nodeKey;
-            isSelected.value = isNodeSelected(editor, nodeKey);
-          }, 10);
           return true;
         }
         return false;
       }, COMMAND_PRIORITY_LOW)
     );
   });
-  return { isSelected, curSelectKey, curSelectPos };
+  return { isSelected, setSelection, curSelectKey, curSelectPos };
 };
 export {
   REMOVE_ELEMENTBLOCK_COMMAND,

package/dist/esm/components/basic/doc-editor/core/element-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"element-block.js","sources":["../../../../../../src/components/basic/doc-editor/core/element-block.ts"],"sourcesContent":["\r\n\r\nimport { mergeRegister } from '@lexical/utils'\r\nimport {  COMMAND_PRIORITY_LOW,CLICK_COMMAND, LexicalCommand, createCommand, BaseSelection } from 'lexical'\r\nimport { useLexicalComposer,useMounted } from 'lexical-vue'\r\nimport {  ref,watch } from 'vue'\r\n\r\nimport { \r\n  isNodeSelected,setSelected,clearSelection,\r\n} from './utils'\r\n\r\n/**\r\n * toolsbar的函数\r\n */\r\nexport type SelectElementBlockToolsbarFunction = (selection:BaseSelection|null)=>Array<any>|null;\r\n\r\n/**\r\n * 元素抗选中类型\r\n */\r\nexport type SelectElementBlocktEventType = {\r\n  element:HTMLElement,\r\n  toolsbars:Array<any>|SelectElementBlockToolsbarFunction\r\n}\r\n\r\n/**\r\n * 选中元素快\r\n */\r\nexport const SELECTED_ELEMENTBLOCK_COMMAND: LexicalCommand<SelectElementBlocktEventType|null> = createCommand('SELECTED_ELEMENTBLOCK_COMMAND')\r\n\r\n/**\r\n * 移除元素快\r\n */\r\nexport const REMOVE_ELEMENTBLOCK_COMMAND: LexicalCommand<undefined|null> = createCommand('REMOVE_ELEMENTBLOCK_COMMAND')\r\n\r\n/**\r\n * 更新模块工具条位置信息\r\n */\r\nexport const UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND: LexicalCommand<undefined|null> = createCommand('UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND')\r\n\r\n\r\n\r\n/**\r\n * 判断选中的方法\r\n */\r\nexport type SelectExistFunc = (el:HTMLElement)=>HTMLElement|null\r\n\r\n/**\r\n * 判断选中的方法\r\n */\r\nexport type ElementSelectionHandle = (el:HTMLElement)=>undefined\r\n\r\n/**\r\n * 使用元素模块激活\r\n */\r\nexport const useElementBlockActive = (func:SelectExistFunc,selectionHandle:ElementSelectionHandle, unSelectionHandle:ElementSelectionHandle)=>{\r\n\r\n  const editor = useLexicalComposer()\r\n\r\n  let curSelectEl:HTMLElement|null = null\r\n  \r\n  // 编辑器挂载\r\n  useMounted(()=>{\r\n    // 注册事件\r\n    return mergeRegister(\r\n      // 点击选中\r\n      editor.registerCommand<MouseEvent>(CLICK_COMMAND,(event) => {\r\n          \r\n        const el = func(event.target as HTMLElement);\r\n        const nodeKey = el?.getAttribute(\"node-key\");\r\n\r\n        // 不为null的话则视为点击选中\r\n        if(nodeKey){\r\n          \r\n          event.preventDefault();\r\n\r\n          selectionHandle(el as HTMLElement)\r\n\r\n          if(curSelectEl && curSelectEl != el){\r\n            unSelectionHandle(curSelectEl);\r\n          }\r\n          curSelectEl = el;\r\n          console.log(\"选中\")\r\n          return true;\r\n        }\r\n        else{\r\n          curSelectEl && unSelectionHandle(curSelectEl);\r\n          curSelectEl = null;\r\n        }\r\n   \r\n        return false;\r\n      }, COMMAND_PRIORITY_LOW)\r\n    )\r\n  })\r\n\r\n}\r\n\r\n/**\r\n * 使用元素块选中\r\n */\r\nexport const useElementBlockSelection = (func:SelectExistFunc,toolsbars:Array<any>|SelectElementBlockToolsbarFunction)=>{\r\n\r\n  const editor = useLexicalComposer()\r\n  const isSelected = ref(false)\r\n  const curSelectKey = ref<any>(null)\r\n  const curSelectEl = ref<any>(null)\r\n  const curSelectPos = ref<any>(null)\r\n  // 更新选中框\r\n  const updateActiveBox =  (el:HTMLElement|null):undefined=>{\r\n    if(el){\r\n      const selectRect = el.getBoundingClientRect();\r\n      curSelectPos.value = {\r\n        top:`${selectRect.y}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  const updateActiveViewState = (el:HTMLElement|null):undefined=>{\r\n  \r\n    if(el){\r\n\r\n      updateActiveBox(el);\r\n      editor.dispatchCommand(SELECTED_ELEMENTBLOCK_COMMAND,{ \r\n        element:curSelectEl.value,\r\n        toolsbars:toolsbars\r\n      });\r\n    }\r\n    else{\r\n      curSelectEl.value = null;\r\n      curSelectKey.value = null;\r\n      curSelectPos.value = null;\r\n      editor.dispatchCommand(SELECTED_ELEMENTBLOCK_COMMAND,null);\r\n    }\r\n  }\r\n\r\n  // 是否选中\r\n  watch(isSelected,(state)=>{\r\n    if(state){\r\n      updateActiveViewState(state ? curSelectEl.value : null)\r\n    }\r\n    else{\r\n      updateActiveViewState(null)\r\n    }\r\n  })\r\n  \r\n  // 编辑器挂载\r\n  useMounted(()=>{\r\n    // 注册事件\r\n    return mergeRegister(\r\n      // 更新选中状态\r\n      editor.registerUpdateListener(() => {\r\n        isSelected.value = isNodeSelected(editor, curSelectKey.value);\r\n        setTimeout(() => {\r\n          if(isNodeSelected(editor, curSelectKey.value)){\r\n            updateActiveBox(curSelectEl.value)\r\n          }\r\n        }, 10);\r\n      }),\r\n      // 点击选中\r\n      editor.registerCommand<MouseEvent>(CLICK_COMMAND,(event) => {\r\n          \r\n        const el = func(event.target as HTMLElement);\r\n        const nodeKey = el?.getAttribute(\"node-key\");\r\n\r\n        // 不为null的话则视为点击选中\r\n        if(nodeKey != null){\r\n          \r\n          event.preventDefault();\r\n         \r\n          if (!event.shiftKey) { clearSelection(editor);  }\r\n\r\n          // 选中新的\r\n          setTimeout(()=>{\r\n            setSelected(editor,true,nodeKey);\r\n            curSelectEl.value = el;\r\n            curSelectKey.value = nodeKey;\r\n            isSelected.value = isNodeSelected(editor, nodeKey);\r\n          },10)\r\n          \r\n          return true;\r\n        }\r\n   \r\n        return false;\r\n      }, COMMAND_PRIORITY_LOW)\r\n    )\r\n  })\r\n\r\n\r\n  return { isSelected, curSelectKey,curSelectPos };\r\n\r\n}\r\n"],"names":[],"mappings":";;;;;AA2Ba,MAAA,gCAAmF,cAAc,+BAA+B;AAKhI,MAAA,8BAA8D,cAAc,6BAA6B;AAKzG,MAAA,0CAA0E,cAAc,yCAAyC;AA8DjI,MAAA,2BAA2B,CAAC,MAAqB,cAA0D;AAEtH,QAAM,SAAS;AACT,QAAA,aAAa,IAAI,KAAK;AACtB,QAAA,eAAe,IAAS,IAAI;AAC5B,QAAA,cAAc,IAAS,IAAI;AAC3B,QAAA,eAAe,IAAS,IAAI;AAE5B,QAAA,kBAAmB,CAAC,OAAgC;AACxD,QAAG,IAAG;AACE,YAAA,aAAa,GAAG;AACtB,mBAAa,QAAQ;AAAA,QACnB,KAAI,GAAG,WAAW,CAAC;AAAA,QAAK,MAAK,GAAG,WAAW,CAAC;AAAA,QAC5C,OAAM,GAAG,WAAW,KAAK;AAAA,QAAK,QAAO,GAAG,WAAW,MAAM;AAAA,MAAA;AAAA,IAE7D;AAAA,EAAA;AAGI,QAAA,wBAAwB,CAAC,OAAgC;AAE7D,QAAG,IAAG;AAEJ,sBAAgB,EAAE;AAClB,aAAO,gBAAgB,+BAA8B;AAAA,QACnD,SAAQ,YAAY;AAAA,QACpB;AAAA,MAAA,CACD;AAAA,IAAA,OAEC;AACF,kBAAY,QAAQ;AACpB,mBAAa,QAAQ;AACrB,mBAAa,QAAQ;AACd,aAAA,gBAAgB,+BAA8B,IAAI;AAAA,IAC3D;AAAA,EAAA;AAII,QAAA,YAAW,CAAC,UAAQ;AACxB,QAAG,OAAM;AACe,4BAAA,QAAQ,YAAY,QAAQ,IAAI;AAAA,IAAA,OAEpD;AACF,4BAAsB,IAAI;AAAA,IAC5B;AAAA,EAAA,CACD;AAGD,aAAW,MAAI;AAEN,WAAA;AAAA;AAAA,MAEL,OAAO,uBAAuB,MAAM;AAClC,mBAAW,QAAQ,eAAe,QAAQ,aAAa,KAAK;AAC5D,mBAAW,MAAM;AACf,cAAG,eAAe,QAAQ,aAAa,KAAK,GAAE;AAC5C,4BAAgB,YAAY,KAAK;AAAA,UACnC;AAAA,WACC,EAAE;AAAA,MAAA,CACN;AAAA;AAAA,MAED,OAAO,gBAA4B,eAAc,CAAC,UAAU;AAEpD,cAAA,KAAK,KAAK,MAAM,MAAqB;AACrC,cAAA,UAAU,yBAAI,aAAa;AAGjC,YAAG,WAAW,MAAK;AAEjB,gBAAM,eAAe;AAEjB,cAAA,CAAC,MAAM,UAAU;AAAE,2BAAe,MAAM;AAAA,UAAI;AAGhD,qBAAW,MAAI;AACD,wBAAA,QAAO,MAAK,OAAO;AAC/B,wBAAY,QAAQ;AACpB,yBAAa,QAAQ;AACV,uBAAA,QAAQ,eAAe,QAAQ,OAAO;AAAA,aACjD,EAAE;AAEG,iBAAA;AAAA,QACT;AAEO,eAAA;AAAA,SACN,oBAAoB;AAAA,IAAA;AAAA,EACzB,CACD;AAGM,SAAA,EAAE,YAAY,cAAa;AAEpC;"}
+{"version":3,"file":"element-block.js","sources":["../../../../../../src/components/basic/doc-editor/core/element-block.ts"],"sourcesContent":["\r\n\r\nimport { mergeRegister } from '@lexical/utils'\r\nimport {  COMMAND_PRIORITY_LOW,CLICK_COMMAND, LexicalCommand, createCommand, BaseSelection } from 'lexical'\r\nimport { useLexicalComposer,useMounted } from 'lexical-vue'\r\nimport {  ref,watch } from 'vue'\r\n\r\nimport { \r\n  isNodeSelected,setSelected,clearSelection,\r\n} from './utils'\r\n\r\n/**\r\n * toolsbar的函数\r\n */\r\nexport type SelectElementBlockToolsbarFunction = (selection:BaseSelection|null)=>Array<any>|null;\r\n\r\n/**\r\n * 元素抗选中类型\r\n */\r\nexport type SelectElementBlocktEventType = {\r\n  element:HTMLElement,\r\n  toolsbars:Array<any>|SelectElementBlockToolsbarFunction\r\n}\r\n\r\n/**\r\n * 选中元素快\r\n */\r\nexport const SELECTED_ELEMENTBLOCK_COMMAND: LexicalCommand<SelectElementBlocktEventType|null> = createCommand('SELECTED_ELEMENTBLOCK_COMMAND')\r\n\r\n/**\r\n * 移除元素快\r\n */\r\nexport const REMOVE_ELEMENTBLOCK_COMMAND: LexicalCommand<undefined|null> = createCommand('REMOVE_ELEMENTBLOCK_COMMAND')\r\n\r\n/**\r\n * 更新模块工具条位置信息\r\n */\r\nexport const UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND: LexicalCommand<undefined|null> = createCommand('UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND')\r\n\r\n\r\n\r\n/**\r\n * 判断选中的方法\r\n */\r\nexport type SelectExistFunc = (el:HTMLElement)=>HTMLElement|null\r\n\r\n/**\r\n * 判断选中的方法\r\n */\r\nexport type ElementSelectionHandle = (el:HTMLElement)=>undefined\r\n\r\n/**\r\n * 使用元素模块激活\r\n */\r\nexport const useElementBlockActive = (func:SelectExistFunc,selectionHandle:ElementSelectionHandle, unSelectionHandle:ElementSelectionHandle)=>{\r\n\r\n  const editor = useLexicalComposer()\r\n\r\n  let curSelectEl:HTMLElement|null = null\r\n  \r\n  // 编辑器挂载\r\n  useMounted(()=>{\r\n    // 注册事件\r\n    return mergeRegister(\r\n      // 点击选中\r\n      editor.registerCommand<MouseEvent>(CLICK_COMMAND,(event) => {\r\n          \r\n        const el = func(event.target as HTMLElement);\r\n        const nodeKey = el?.getAttribute(\"node-key\");\r\n\r\n        // 不为null的话则视为点击选中\r\n        if(nodeKey){\r\n          \r\n          event.preventDefault();\r\n\r\n          selectionHandle(el as HTMLElement)\r\n\r\n          if(curSelectEl && curSelectEl != el){\r\n            unSelectionHandle(curSelectEl);\r\n          }\r\n          curSelectEl = el;\r\n          return true;\r\n        }\r\n        else{\r\n          curSelectEl && unSelectionHandle(curSelectEl);\r\n          curSelectEl = null;\r\n        }\r\n   \r\n        return false;\r\n      }, COMMAND_PRIORITY_LOW)\r\n    )\r\n  })\r\n\r\n}\r\n\r\n/**\r\n * 使用元素块选中\r\n */\r\nexport const useElementBlockSelection = (func:SelectExistFunc,toolsbars:Array<any>|SelectElementBlockToolsbarFunction)=>{\r\n\r\n  const editor = useLexicalComposer()\r\n  const isSelected = ref(false)\r\n  const curSelectKey = ref<any>(null)\r\n  const curSelectEl = ref<any>(null)\r\n  const curSelectPos = ref<any>(null)\r\n  // 更新选中框\r\n  const updateActiveBox =  (el:HTMLElement|null):undefined=>{\r\n    if(el){\r\n      const selectRect = el.getBoundingClientRect();\r\n      curSelectPos.value = {\r\n        top:`${selectRect.y}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  const updateActiveViewState = (el:HTMLElement|null):undefined=>{\r\n  \r\n    if(el){\r\n\r\n      updateActiveBox(el);\r\n      editor.dispatchCommand(SELECTED_ELEMENTBLOCK_COMMAND,{ \r\n        element:curSelectEl.value,\r\n        toolsbars:toolsbars\r\n      });\r\n    }\r\n    else{\r\n      curSelectEl.value = null;\r\n      curSelectKey.value = null;\r\n      curSelectPos.value = null;\r\n      editor.dispatchCommand(SELECTED_ELEMENTBLOCK_COMMAND,null);\r\n    }\r\n  }\r\n\r\n  // 设置选中\r\n  const setSelection = async (nodeKey:string,el:HTMLElement|null|undefined)=>{\r\n\r\n    // 没来得及取消的则先取消\r\n    if(isSelected.value){ \r\n      isSelected.value = false;\r\n      await  clearSelection(editor);\r\n    }\r\n    // 稍微停顿下\r\n    await new Promise(reslove=>setTimeout(reslove, 10));\r\n    await setSelected(editor,true,nodeKey);\r\n    curSelectEl.value = el == null ? editor.getElementByKey(nodeKey) : el;\r\n    curSelectKey.value = nodeKey;\r\n    isSelected.value = isNodeSelected(editor, nodeKey);\r\n  }\r\n  // 是否选中\r\n  watch(isSelected,(state)=>{\r\n    if(state){\r\n      updateActiveViewState(state ? curSelectEl.value : null)\r\n    }\r\n    else{\r\n      updateActiveViewState(null)\r\n    }\r\n  })\r\n  \r\n  // 编辑器挂载\r\n  useMounted(()=>{\r\n    // 注册事件\r\n    return mergeRegister(\r\n      // 更新选中状态\r\n      editor.registerUpdateListener(() => {\r\n       \r\n        isSelected.value = isNodeSelected(editor, curSelectKey.value);\r\n        setTimeout(()=>updateActiveBox(curSelectEl.value),10)\r\n        \r\n      }),\r\n      // 点击选中\r\n      editor.registerCommand<MouseEvent>(CLICK_COMMAND,(event) => {\r\n          \r\n        const el = func(event.target as HTMLElement);\r\n        const nodeKey = el?.getAttribute(\"node-key\");\r\n\r\n        // 不为null的话则视为点击选中\r\n        if(nodeKey != null){\r\n          \r\n          event.preventDefault();\r\n         \r\n          if (!event.shiftKey) { \r\n            // 先取消\r\n            clearSelection(editor).then(()=>{\r\n              // 设置选中\r\n              setSelection(nodeKey,el)\r\n            })\r\n          }\r\n          else{\r\n            // 设置选中\r\n            setSelection(nodeKey,el)\r\n          }\r\n\r\n          return true;\r\n        }\r\n   \r\n        return false;\r\n      }, COMMAND_PRIORITY_LOW)\r\n    )\r\n  })\r\n\r\n\r\n  return { isSelected,setSelection, curSelectKey,curSelectPos };\r\n\r\n}\r\n"],"names":[],"mappings":";;;;;AA2Ba,MAAA,gCAAmF,cAAc,+BAA+B;AAKhI,MAAA,8BAA8D,cAAc,6BAA6B;AAKzG,MAAA,0CAA0E,cAAc,yCAAyC;AA6DjI,MAAA,2BAA2B,CAAC,MAAqB,cAA0D;AAEtH,QAAM,SAAS;AACT,QAAA,aAAa,IAAI,KAAK;AACtB,QAAA,eAAe,IAAS,IAAI;AAC5B,QAAA,cAAc,IAAS,IAAI;AAC3B,QAAA,eAAe,IAAS,IAAI;AAE5B,QAAA,kBAAmB,CAAC,OAAgC;AACxD,QAAG,IAAG;AACE,YAAA,aAAa,GAAG;AACtB,mBAAa,QAAQ;AAAA,QACnB,KAAI,GAAG,WAAW,CAAC;AAAA,QAAK,MAAK,GAAG,WAAW,CAAC;AAAA,QAC5C,OAAM,GAAG,WAAW,KAAK;AAAA,QAAK,QAAO,GAAG,WAAW,MAAM;AAAA,MAAA;AAAA,IAE7D;AAAA,EAAA;AAGI,QAAA,wBAAwB,CAAC,OAAgC;AAE7D,QAAG,IAAG;AAEJ,sBAAgB,EAAE;AAClB,aAAO,gBAAgB,+BAA8B;AAAA,QACnD,SAAQ,YAAY;AAAA,QACpB;AAAA,MAAA,CACD;AAAA,IAAA,OAEC;AACF,kBAAY,QAAQ;AACpB,mBAAa,QAAQ;AACrB,mBAAa,QAAQ;AACd,aAAA,gBAAgB,+BAA8B,IAAI;AAAA,IAC3D;AAAA,EAAA;AAII,QAAA,eAAe,OAAO,SAAe,OAAgC;AAGzE,QAAG,WAAW,OAAM;AAClB,iBAAW,QAAQ;AACnB,YAAO,eAAe,MAAM;AAAA,IAC9B;AAEA,UAAM,IAAI,QAAQ,CAAA,YAAS,WAAW,SAAS,EAAE,CAAC;AAC5C,UAAA,YAAY,QAAO,MAAK,OAAO;AACrC,gBAAY,QAAQ,MAAM,OAAO,OAAO,gBAAgB,OAAO,IAAI;AACnE,iBAAa,QAAQ;AACV,eAAA,QAAQ,eAAe,QAAQ,OAAO;AAAA,EAAA;AAG7C,QAAA,YAAW,CAAC,UAAQ;AACxB,QAAG,OAAM;AACe,4BAAA,QAAQ,YAAY,QAAQ,IAAI;AAAA,IAAA,OAEpD;AACF,4BAAsB,IAAI;AAAA,IAC5B;AAAA,EAAA,CACD;AAGD,aAAW,MAAI;AAEN,WAAA;AAAA;AAAA,MAEL,OAAO,uBAAuB,MAAM;AAElC,mBAAW,QAAQ,eAAe,QAAQ,aAAa,KAAK;AAC5D,mBAAW,MAAI,gBAAgB,YAAY,KAAK,GAAE,EAAE;AAAA,MAAA,CAErD;AAAA;AAAA,MAED,OAAO,gBAA4B,eAAc,CAAC,UAAU;AAEpD,cAAA,KAAK,KAAK,MAAM,MAAqB;AACrC,cAAA,UAAU,yBAAI,aAAa;AAGjC,YAAG,WAAW,MAAK;AAEjB,gBAAM,eAAe;AAEjB,cAAA,CAAC,MAAM,UAAU;AAEJ,2BAAA,MAAM,EAAE,KAAK,MAAI;AAE9B,2BAAa,SAAQ,EAAE;AAAA,YAAA,CACxB;AAAA,UAAA,OAEC;AAEF,yBAAa,SAAQ,EAAE;AAAA,UACzB;AAEO,iBAAA;AAAA,QACT;AAEO,eAAA;AAAA,SACN,oBAAoB;AAAA,IAAA;AAAA,EACzB,CACD;AAGD,SAAO,EAAE,YAAW,cAAc,cAAa,aAAa;AAE9D;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../../src/components/basic/doc-editor/core/utils.ts"],"sourcesContent":["import type { LexicalEditor, NodeKey } from 'lexical'\r\n\r\nimport {\r\n  $createNodeSelection,\r\n  $getNodeByKey,\r\n  $getSelection,\r\n  $isNodeSelection,\r\n  $setSelection,\r\n} from 'lexical'\r\nimport {  unref } from 'vue'\r\n\r\n// isNodeSelected  \r\nexport const isNodeSelected = function (editor: LexicalEditor, key: NodeKey): boolean {\r\n  return editor.getEditorState().read(() => {\r\n    const node = $getNodeByKey(key)\r\n    if (node === null)\r\n      return false\r\n    return node.isSelected()\r\n  })\r\n}\r\n\r\n// 取消选中\r\nexport const clearSelection = (editor: LexicalEditor) => {\r\n  editor.update(() => {\r\n    const selection = $getSelection()\r\n    if ($isNodeSelection(selection))\r\n      (selection).clear()\r\n  })\r\n}\r\n\r\n// 设置选中\r\nexport const setSelected = (editor: LexicalEditor,selected: boolean,key:string) => {\r\n  editor.update(() => {\r\n    let selection = $getSelection()\r\n\r\n    if (!$isNodeSelection(selection)) {\r\n      selection = $createNodeSelection()\r\n      $setSelection(selection)\r\n    }\r\n    if ($isNodeSelection(selection)) {\r\n      if (selected)\r\n        selection.add(unref(key))\r\n      else\r\n        selection.delete(unref(key))\r\n    }\r\n  })\r\n}\r\n\r\n"],"names":[],"mappings":";;AAYa,MAAA,iBAAiB,SAAU,QAAuB,KAAuB;AACpF,SAAO,OAAO,iBAAiB,KAAK,MAAM;AAClC,UAAA,OAAO,cAAc,GAAG;AAC9B,QAAI,SAAS;AACJ,aAAA;AACT,WAAO,KAAK;EAAW,CACxB;AACH;AAGa,MAAA,iBAAiB,CAAC,WAA0B;AACvD,SAAO,OAAO,MAAM;AAClB,UAAM,YAAY;AAClB,QAAI,iBAAiB,SAAS;AAC3B,gBAAW,MAAM;AAAA,EAAA,CACrB;AACH;AAGO,MAAM,cAAc,CAAC,QAAsB,UAAkB,QAAe;AACjF,SAAO,OAAO,MAAM;AAClB,QAAI,YAAY;AAEZ,QAAA,CAAC,iBAAiB,SAAS,GAAG;AAChC,kBAAY,qBAAqB;AACjC,oBAAc,SAAS;AAAA,IACzB;AACI,QAAA,iBAAiB,SAAS,GAAG;AAEnB,gBAAA,IAAI,MAAM,GAAG,CAAC;AAAA,IAG5B;AAAA,EAAA,CACD;AACH;"}
+{"version":3,"file":"utils.js","sources":["../../../../../../src/components/basic/doc-editor/core/utils.ts"],"sourcesContent":["import type { LexicalEditor, NodeKey } from 'lexical'\r\n\r\nimport {\r\n  $createNodeSelection,\r\n  $getNodeByKey,\r\n  $getSelection,\r\n  $isNodeSelection,\r\n  $setSelection,\r\n} from 'lexical'\r\nimport {  unref } from 'vue'\r\n\r\n// isNodeSelected  \r\nexport const isNodeSelected = function (editor: LexicalEditor, key: NodeKey): boolean {\r\n  return editor.getEditorState().read(() => {\r\n    const node = $getNodeByKey(key)\r\n    if (node === null)\r\n      return false\r\n    return node.isSelected()\r\n  })\r\n}\r\n\r\n// 取消选中\r\nexport const clearSelection = (editor: LexicalEditor):Promise<undefined> => {\r\n  return new Promise(resolove=>{\r\n    editor.update(() => {\r\n      const selection = $getSelection()\r\n      if ($isNodeSelection(selection) && selection){\r\n        selection.clear();\r\n      }\r\n      resolove(undefined)\r\n    })\r\n  })\r\n}\r\n\r\n// 设置选中\r\nexport const setSelected = (editor: LexicalEditor,selected: boolean,key:string):Promise<undefined> => {\r\n\r\n  return new Promise(resolove=>{\r\n    editor.update(() => {\r\n      let selection = $getSelection()\r\n  \r\n      if (!$isNodeSelection(selection)) {\r\n        selection = $createNodeSelection()\r\n        $setSelection(selection)\r\n      }\r\n      if ($isNodeSelection(selection)) {\r\n        if (selected)\r\n          selection.add(unref(key))\r\n        else\r\n          selection.delete(unref(key))\r\n      }\r\n      resolove(undefined)\r\n    })\r\n  })\r\n  \r\n}\r\n\r\n"],"names":[],"mappings":";;AAYa,MAAA,iBAAiB,SAAU,QAAuB,KAAuB;AACpF,SAAO,OAAO,iBAAiB,KAAK,MAAM;AAClC,UAAA,OAAO,cAAc,GAAG;AAC9B,QAAI,SAAS;AACJ,aAAA;AACT,WAAO,KAAK;EAAW,CACxB;AACH;AAGa,MAAA,iBAAiB,CAAC,WAA6C;AACnE,SAAA,IAAI,QAAQ,CAAU,aAAA;AAC3B,WAAO,OAAO,MAAM;AAClB,YAAM,YAAY;AACd,UAAA,iBAAiB,SAAS,KAAK,WAAU;AAC3C,kBAAU,MAAM;AAAA,MAClB;AACA,eAAS,MAAS;AAAA,IAAA,CACnB;AAAA,EAAA,CACF;AACH;AAGO,MAAM,cAAc,CAAC,QAAsB,UAAkB,QAAkC;AAE7F,SAAA,IAAI,QAAQ,CAAU,aAAA;AAC3B,WAAO,OAAO,MAAM;AAClB,UAAI,YAAY;AAEZ,UAAA,CAAC,iBAAiB,SAAS,GAAG;AAChC,oBAAY,qBAAqB;AACjC,sBAAc,SAAS;AAAA,MACzB;AACI,UAAA,iBAAiB,SAAS,GAAG;AAEnB,kBAAA,IAAI,MAAM,GAAG,CAAC;AAAA,MAG5B;AACA,eAAS,MAAS;AAAA,IAAA,CACnB;AAAA,EAAA,CACF;AAEH;"}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ModuleGridNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/ModuleGridNode.ts"],"sourcesContent":["import { type DOMConversionMap,type NodeKey, type Spread, type DOMExportOutput, type LexicalCommand, createCommand, LexicalNode } from 'lexical'\r\nimport { type GridNodeAttrType , GridNode,SerializedGridNode } from \"./GridNode\"\r\n\r\n/**\r\n * 属性\r\n */\r\nexport type ModuleGridNodeAttrType  = GridNodeAttrType & {\r\n  overflowX:boolean\r\n};\r\n\r\n\r\n/**\r\n * 插入模块格子\r\n */\r\nexport const INSERT_MODULEGRID_COMMAND: LexicalCommand<ModuleGridNodeAttrType> = createCommand('INSERT_MODULEGRID_COMMAND')\r\n\r\n\r\n/**\r\n * 节点序列化 \r\n */\r\nexport type SerializedModuleGridNode = Spread<{ attrs:ModuleGridNodeAttrType },SerializedGridNode>\r\n\r\n/**\r\n * 模块格子\r\n */\r\nexport class ModuleGridNode extends GridNode{\r\n\r\n  declare __attrs:ModuleGridNodeAttrType\r\n\r\n  static getType(): string { return \"module-grid\"; }\r\n\r\n  static hasGridNodeByElement(el:HTMLElement):HTMLElement|null{\r\n    return el.classList.contains(ModuleGridNode.getMarkClassName()) ? el : null;\r\n  }\r\n \r\n  static getMarkClassName(): string {\r\n    return `mk-doc__${ModuleGridNode.getType()}`\r\n  }\r\n  static getExtraClassName(el:HTMLElement){\r\n    return GridNode.getExtraClassName(el).replace(ModuleGridNode.getMarkClassName(),\"\").trim();\r\n  }\r\n  static clone(node: ModuleGridNode): ModuleGridNode {\r\n    return new ModuleGridNode(node.__attrs,node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedModuleGridNode): ModuleGridNode {\r\n    return new ModuleGridNode(serializedNode.attrs)\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      div : (domNode: HTMLElement) => {\r\n\r\n        return  ModuleGridNode.hasGridNodeByElement(domNode) ? {\r\n\r\n          conversion: ()=>{ \r\n\r\n            return  { \r\n              node:new ModuleGridNode({\r\n                class:ModuleGridNode.getExtraClassName(domNode),\r\n                width:domNode.style.width || \"100%\",\r\n                height:domNode.style.height,\r\n                flex:domNode.style.flex,\r\n                maxWidth:domNode.style.maxWidth,\r\n                maxHeight:domNode.style.maxHeight,\r\n                overflowX:domNode.style.overflowX == \"auto\"\r\n              } as ModuleGridNodeAttrType) \r\n            };\r\n          },\r\n          priority: 4\r\n        } : null;\r\n      }\r\n    }\r\n  }\r\n\r\n  constructor(attrs:ModuleGridNodeAttrType,key?: NodeKey) {\r\n    super(attrs,key)\r\n  }\r\n\r\n  /**\r\n   * 设置属性\r\n   * @param pos \r\n   */\r\n  setAttrs(data?:ModuleGridNodeAttrType){\r\n    const writable = this.getWritable();\r\n    Object.assign(writable.__attrs,data)\r\n  }\r\n\r\n  /**\r\n   * 获取属性\r\n   * @param pos \r\n   */\r\n  getAttrs():ModuleGridNodeAttrType{\r\n    return this.__attrs;\r\n  }\r\n  /**\r\n   * 导出JSON\r\n   * @returns \r\n   */\r\n  exportJSON(): SerializedGridNode {\r\n    return {\r\n      ...super.exportJSON(),\r\n      type: this.getType(),\r\n      attrs:this.__attrs,\r\n      version: 1\r\n    }\r\n  }\r\n\r\n    /**\r\n   * 更新元素属性\r\n   * @param el \r\n   */\r\n  updateElementAttr(el:HTMLElement){\r\n    super.updateElementAttr(el);\r\n    // 更新属性\r\n    Object.keys(this.__attrs).forEach((key:any)=>{\r\n      if([\"class\",\"overflowX\"].indexOf(key) < 0){\r\n        el.style[key] = (this.__attrs as any)[key];\r\n      }\r\n    })\r\n    if(this.__attrs.overflowX){\r\n      el.style.overflowX = \"auto\";\r\n    }\r\n    else{\r\n      el.style.overflowX = \"\";\r\n    }\r\n  }\r\n\r\n  \r\n  // /**\r\n  //  * 非内联\r\n  //  * @returns \r\n  //  */\r\n  // isInline(): boolean {\r\n  //   return false;\r\n  // }\r\n\r\n  // /**\r\n  //  * 定义为影子根\r\n  //  * @returns \r\n  //  */\r\n  // isShadowRoot(): boolean {\r\n  //   return true;\r\n  // }\r\n}\r\n\r\n/**\r\n * 是否是模块格子\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isModuleGridNode(\r\n  node: ModuleGridNode | LexicalNode | null | undefined,\r\n): node is ModuleGridNode {\r\n  return node instanceof ModuleGridNode\r\n}\r\n"],"names":[],"mappings":";;AAca,MAAA,4BAAoE,cAAc,2BAA2B;AAWnH,MAAM,uBAAuB,SAAQ;AAAA,EAI1C,OAAO,UAAkB;AAAS,WAAA;AAAA,EAAe;AAAA,EAEjD,OAAO,qBAAqB,IAAgC;AAC1D,WAAO,GAAG,UAAU,SAAS,eAAe,kBAAkB,IAAI,KAAK;AAAA,EACzE;AAAA,EAEA,OAAO,mBAA2B;AACzB,WAAA,WAAW,eAAe,QAAA,CAAS;AAAA,EAC5C;AAAA,EACA,OAAO,kBAAkB,IAAe;AAC/B,WAAA,SAAS,kBAAkB,EAAE,EAAE,QAAQ,eAAe,oBAAmB,EAAE,EAAE;EACtF;AAAA,EACA,OAAO,MAAM,MAAsC;AACjD,WAAO,IAAI,eAAe,KAAK,SAAQ,KAAK,KAAK;AAAA,EACnD;AAAA,EAEA,OAAO,WAAW,gBAA0D;AACnE,WAAA,IAAI,eAAe,eAAe,KAAK;AAAA,EAChD;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAM,CAAC,YAAyB;AAEtB,eAAA,eAAe,qBAAqB,OAAO,IAAI;AAAA,UAErD,YAAY,MAAI;AAEN,mBAAA;AAAA,cACN,MAAK,IAAI,eAAe;AAAA,gBACtB,OAAM,eAAe,kBAAkB,OAAO;AAAA,gBAC9C,OAAM,QAAQ,MAAM,SAAS;AAAA,gBAC7B,QAAO,QAAQ,MAAM;AAAA,gBACrB,MAAK,QAAQ,MAAM;AAAA,gBACnB,UAAS,QAAQ,MAAM;AAAA,gBACvB,WAAU,QAAQ,MAAM;AAAA,gBACxB,WAAU,QAAQ,MAAM,aAAa;AAAA,cAAA,CACZ;AAAA,YAAA;AAAA,UAE/B;AAAA,UACA,UAAU;AAAA,QACR,IAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,YAAY,OAA6B,KAAe;AACtD,UAAM,OAAM,GAAG;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,SAAS,MAA6B;AAC9B,UAAA,WAAW,KAAK;AACf,WAAA,OAAO,SAAS,SAAQ,IAAI;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAiC;AAC/B,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAKA,aAAiC;AACxB,WAAA;AAAA,MACL,GAAG,MAAM,WAAW;AAAA,MACpB,MAAM,KAAK,QAAQ;AAAA,MACnB,OAAM,KAAK;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,kBAAkB,IAAe;AAC/B,UAAM,kBAAkB,EAAE;AAE1B,WAAO,KAAK,KAAK,OAAO,EAAE,QAAQ,CAAC,QAAU;AAC3C,UAAG,CAAC,SAAQ,WAAW,EAAE,QAAQ,GAAG,IAAI,GAAE;AACxC,WAAG,MAAM,GAAG,IAAK,KAAK,QAAgB,GAAG;AAAA,MAC3C;AAAA,IAAA,CACD;AACE,QAAA,KAAK,QAAQ,WAAU;AACxB,SAAG,MAAM,YAAY;AAAA,IAAA,OAEnB;AACF,SAAG,MAAM,YAAY;AAAA,IACvB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBF;AAOO,SAAS,kBACd,MACwB;AACxB,SAAO,gBAAgB;AACzB;"}
+{"version":3,"file":"ModuleGridNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/ModuleGridNode.ts"],"sourcesContent":["import { type DOMConversionMap,type NodeKey, type Spread, type DOMExportOutput, type LexicalCommand, createCommand, LexicalNode, EditorConfig } from 'lexical'\r\nimport { type GridNodeAttrType , GridNode,SerializedGridNode } from \"./GridNode\"\r\n\r\n/**\r\n * 属性\r\n */\r\nexport type ModuleGridNodeAttrType  = GridNodeAttrType & {\r\n  overflowX:boolean\r\n};\r\n\r\n\r\n/**\r\n * 插入模块格子\r\n */\r\nexport const INSERT_MODULEGRID_COMMAND: LexicalCommand<ModuleGridNodeAttrType> = createCommand('INSERT_MODULEGRID_COMMAND')\r\n\r\n\r\n/**\r\n * 节点序列化 \r\n */\r\nexport type SerializedModuleGridNode = Spread<{ attrs:ModuleGridNodeAttrType },SerializedGridNode>\r\n\r\n/**\r\n * 模块格子\r\n */\r\nexport class ModuleGridNode extends GridNode{\r\n\r\n  declare __attrs:ModuleGridNodeAttrType\r\n\r\n  static getType(): string { return \"module-grid\"; }\r\n\r\n  static hasGridNodeByElement(el:HTMLElement):HTMLElement|null{\r\n    return el.classList.contains(ModuleGridNode.getMarkClassName()) ? el : null;\r\n  }\r\n \r\n  static getMarkClassName(): string {\r\n    return `mk-doc__${ModuleGridNode.getType()}`\r\n  }\r\n  static getExtraClassName(el:HTMLElement){\r\n    return GridNode.getExtraClassName(el).replace(ModuleGridNode.getMarkClassName(),\"\").trim();\r\n  }\r\n  static clone(node: ModuleGridNode): ModuleGridNode {\r\n    return new ModuleGridNode(node.__attrs,node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedModuleGridNode): ModuleGridNode {\r\n    return new ModuleGridNode(serializedNode.attrs)\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      div : (domNode: HTMLElement) => {\r\n\r\n        return  ModuleGridNode.hasGridNodeByElement(domNode) ? {\r\n\r\n          conversion: ()=>{ \r\n\r\n            return  { \r\n              node:new ModuleGridNode({\r\n                class:ModuleGridNode.getExtraClassName(domNode),\r\n                width:domNode.style.width || \"100%\",\r\n                height:domNode.style.height,\r\n                flex:domNode.style.flex,\r\n                maxWidth:domNode.style.maxWidth,\r\n                maxHeight:domNode.style.maxHeight,\r\n                overflowX:domNode.style.overflowX == \"auto\"\r\n              } as ModuleGridNodeAttrType) \r\n            };\r\n          },\r\n          priority: 4\r\n        } : null;\r\n      }\r\n    }\r\n  }\r\n\r\n  constructor(attrs:ModuleGridNodeAttrType,key?: NodeKey) {\r\n    super(attrs,key)\r\n  }\r\n\r\n  /**\r\n   * 设置属性\r\n   * @param pos \r\n   */\r\n  setAttrs(data?:ModuleGridNodeAttrType){\r\n    const writable = this.getWritable();\r\n    Object.assign(writable.__attrs,data)\r\n  }\r\n\r\n  /**\r\n   * 获取属性\r\n   * @param pos \r\n   */\r\n  getAttrs():ModuleGridNodeAttrType{\r\n    return this.__attrs;\r\n  }\r\n  /**\r\n   * 导出JSON\r\n   * @returns \r\n   */\r\n  exportJSON(): SerializedGridNode {\r\n    return {\r\n      ...super.exportJSON(),\r\n      type: this.getType(),\r\n      attrs:this.__attrs,\r\n      version: 1\r\n    }\r\n  }\r\n\r\n    /**\r\n   * 更新元素属性\r\n   * @param el \r\n   */\r\n  updateElementAttr(el:HTMLElement){\r\n    super.updateElementAttr(el);\r\n    // 更新属性\r\n    Object.keys(this.__attrs).forEach((key:any)=>{\r\n      if([\"class\",\"overflowX\"].indexOf(key) < 0){\r\n        el.style[key] = (this.__attrs as any)[key];\r\n      }\r\n    })\r\n    if(this.__attrs.overflowX){\r\n      el.style.overflowX = \"auto\";\r\n      el.style.whiteSpace = \"nowrap\";\r\n    }\r\n    else{\r\n      el.style.overflowX = \"\";\r\n      el.style.whiteSpace = \"\";\r\n    }\r\n  }\r\n\r\n   /**\r\n   * 创建渲染DOM\r\n   * @param config \r\n   * @returns \r\n   */\r\n   createDOM(config: EditorConfig): HTMLElement {\r\n\r\n    const el = super.createDOM(config);\r\n\r\n    el.setAttribute(\"contenteditable\",\"false\")\r\n    el.setAttribute(\"data-lexical-decorator\",\"true\")\r\n\r\n    return el;\r\n  }\r\n  \r\n  // /**\r\n  //  * 非内联\r\n  //  * @returns \r\n  //  */\r\n  // isInline(): boolean {\r\n  //   return false;\r\n  // }\r\n\r\n  // /**\r\n  //  * 定义为影子根\r\n  //  * @returns \r\n  //  */\r\n  // isShadowRoot(): boolean {\r\n  //   return true;\r\n  // }\r\n}\r\n\r\n/**\r\n * 是否是模块格子\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isModuleGridNode(\r\n  node: ModuleGridNode | LexicalNode | null | undefined,\r\n): node is ModuleGridNode {\r\n  return node instanceof ModuleGridNode\r\n}\r\n"],"names":[],"mappings":";;AAca,MAAA,4BAAoE,cAAc,2BAA2B;AAWnH,MAAM,uBAAuB,SAAQ;AAAA,EAI1C,OAAO,UAAkB;AAAS,WAAA;AAAA,EAAe;AAAA,EAEjD,OAAO,qBAAqB,IAAgC;AAC1D,WAAO,GAAG,UAAU,SAAS,eAAe,kBAAkB,IAAI,KAAK;AAAA,EACzE;AAAA,EAEA,OAAO,mBAA2B;AACzB,WAAA,WAAW,eAAe,QAAA,CAAS;AAAA,EAC5C;AAAA,EACA,OAAO,kBAAkB,IAAe;AAC/B,WAAA,SAAS,kBAAkB,EAAE,EAAE,QAAQ,eAAe,oBAAmB,EAAE,EAAE;EACtF;AAAA,EACA,OAAO,MAAM,MAAsC;AACjD,WAAO,IAAI,eAAe,KAAK,SAAQ,KAAK,KAAK;AAAA,EACnD;AAAA,EAEA,OAAO,WAAW,gBAA0D;AACnE,WAAA,IAAI,eAAe,eAAe,KAAK;AAAA,EAChD;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAM,CAAC,YAAyB;AAEtB,eAAA,eAAe,qBAAqB,OAAO,IAAI;AAAA,UAErD,YAAY,MAAI;AAEN,mBAAA;AAAA,cACN,MAAK,IAAI,eAAe;AAAA,gBACtB,OAAM,eAAe,kBAAkB,OAAO;AAAA,gBAC9C,OAAM,QAAQ,MAAM,SAAS;AAAA,gBAC7B,QAAO,QAAQ,MAAM;AAAA,gBACrB,MAAK,QAAQ,MAAM;AAAA,gBACnB,UAAS,QAAQ,MAAM;AAAA,gBACvB,WAAU,QAAQ,MAAM;AAAA,gBACxB,WAAU,QAAQ,MAAM,aAAa;AAAA,cAAA,CACZ;AAAA,YAAA;AAAA,UAE/B;AAAA,UACA,UAAU;AAAA,QACR,IAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,YAAY,OAA6B,KAAe;AACtD,UAAM,OAAM,GAAG;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,SAAS,MAA6B;AAC9B,UAAA,WAAW,KAAK;AACf,WAAA,OAAO,SAAS,SAAQ,IAAI;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAiC;AAC/B,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAKA,aAAiC;AACxB,WAAA;AAAA,MACL,GAAG,MAAM,WAAW;AAAA,MACpB,MAAM,KAAK,QAAQ;AAAA,MACnB,OAAM,KAAK;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,kBAAkB,IAAe;AAC/B,UAAM,kBAAkB,EAAE;AAE1B,WAAO,KAAK,KAAK,OAAO,EAAE,QAAQ,CAAC,QAAU;AAC3C,UAAG,CAAC,SAAQ,WAAW,EAAE,QAAQ,GAAG,IAAI,GAAE;AACxC,WAAG,MAAM,GAAG,IAAK,KAAK,QAAgB,GAAG;AAAA,MAC3C;AAAA,IAAA,CACD;AACE,QAAA,KAAK,QAAQ,WAAU;AACxB,SAAG,MAAM,YAAY;AACrB,SAAG,MAAM,aAAa;AAAA,IAAA,OAEpB;AACF,SAAG,MAAM,YAAY;AACrB,SAAG,MAAM,aAAa;AAAA,IACxB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOC,UAAU,QAAmC;AAEtC,UAAA,KAAK,MAAM,UAAU,MAAM;AAE9B,OAAA,aAAa,mBAAkB,OAAO;AACtC,OAAA,aAAa,0BAAyB,MAAM;AAExC,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBF;AAOO,SAAS,kBACd,MACwB;AACxB,SAAO,gBAAgB;AACzB;"}

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

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

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

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

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

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