@maketribe/ms-app 3.2.31 → 3.2.33

package/dist/cjs/components/basic/data-tree-select/data-tree-select-options.js

@@ -18,7 +18,7 @@ const dataTreeSelectProps = utils.buildProps({
   },
   clearable: {
     type: Boolean,
-    default: false
+    default: true
   },
   formatOptions: {
     type: Function,

package/dist/cjs/components/basic/data-tree-select/data-tree-select-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-tree-select-options.js","sources":["../../../../../src/components/basic/data-tree-select/data-tree-select-options.ts"],"sourcesContent":["import { ExtractPropTypes } from \"vue\";\r\nimport { buildProps } from \"@maketribe/utils\";\r\nimport { abstractSelectEmits, abstractSelectProps } from \"../../abstract\";\r\nimport { DataTree } from \"@maketribe/dm\";\r\n\r\nconst { dataTable, ...restAbstractSelectProps } = abstractSelectProps;\r\n\r\nexport const dataTreeSelectProps = buildProps({\r\n  ...restAbstractSelectProps,\r\n  dataTree: DataTree<any>,\r\n  checkStrictly: {\r\n    type: Boolean,\r\n    default: true,\r\n  },\r\n  disabled: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n  clearable: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n  formatOptions: {\r\n    type: Function,\r\n    default: (item: any) => {\r\n      const value = item.value ?? item.id ?? item.name;\r\n      const label = item.label ?? item.desc ?? item.title ?? item.name;\r\n      const children = item.children ?? [];\r\n\r\n      return { value, label, children };\r\n    },\r\n  },\r\n});\r\n\r\nexport type DataTreeSelectProps = ExtractPropTypes<typeof dataTreeSelectProps>;\r\n\r\nexport const dataTreeSelectEmits = {\r\n  ...abstractSelectEmits,\r\n};\r\n\r\nexport type DataTreeSelectEmits = typeof dataTreeSelectEmits;\r\n"],"names":["abstractSelectProps","buildProps","DataTree","abstractSelectEmits"],"mappings":";;;;;;AAKA,MAAM,EAAE,WAAW,GAAG,wBAA4B,IAAAA;AAE3C,MAAM,sBAAsBC,MAAAA,WAAW;AAAA,EAC5C,GAAG;AAAA,EACH,UAAUC,GAAA;AAAA,EACV,eAAe;AAAA,IACb,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,eAAe;AAAA,IACb,MAAM;AAAA,IACN,SAAS,CAAC,SAAc;AACtB,YAAM,QAAQ,KAAK,SAAS,KAAK,MAAM,KAAK;AAC5C,YAAM,QAAQ,KAAK,SAAS,KAAK,QAAQ,KAAK,SAAS,KAAK;AACtD,YAAA,WAAW,KAAK,YAAY;AAE3B,aAAA,EAAE,OAAO,OAAO;IACzB;AAAA,EACF;AACF,CAAC;AAIM,MAAM,sBAAsB;AAAA,EACjC,GAAGC,sBAAA;AACL;;;"}
+{"version":3,"file":"data-tree-select-options.js","sources":["../../../../../src/components/basic/data-tree-select/data-tree-select-options.ts"],"sourcesContent":["import { ExtractPropTypes } from \"vue\";\r\nimport { buildProps } from \"@maketribe/utils\";\r\nimport { abstractSelectEmits, abstractSelectProps } from \"../../abstract\";\r\nimport { DataTree } from \"@maketribe/dm\";\r\n\r\nconst { dataTable, ...restAbstractSelectProps } = abstractSelectProps;\r\n\r\nexport const dataTreeSelectProps = buildProps({\r\n  ...restAbstractSelectProps,\r\n  dataTree: DataTree<any>,\r\n  checkStrictly: {\r\n    type: Boolean,\r\n    default: true,\r\n  },\r\n  disabled: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n  clearable: {\r\n    type: Boolean,\r\n    default: true,\r\n  },\r\n  formatOptions: {\r\n    type: Function,\r\n    default: (item: any) => {\r\n      const value = item.value ?? item.id ?? item.name;\r\n      const label = item.label ?? item.desc ?? item.title ?? item.name;\r\n      const children = item.children ?? [];\r\n\r\n      return { value, label, children };\r\n    },\r\n  },\r\n});\r\n\r\nexport type DataTreeSelectProps = ExtractPropTypes<typeof dataTreeSelectProps>;\r\n\r\nexport const dataTreeSelectEmits = {\r\n  ...abstractSelectEmits,\r\n};\r\n\r\nexport type DataTreeSelectEmits = typeof dataTreeSelectEmits;\r\n"],"names":["abstractSelectProps","buildProps","DataTree","abstractSelectEmits"],"mappings":";;;;;;AAKA,MAAM,EAAE,WAAW,GAAG,wBAA4B,IAAAA;AAE3C,MAAM,sBAAsBC,MAAAA,WAAW;AAAA,EAC5C,GAAG;AAAA,EACH,UAAUC,GAAA;AAAA,EACV,eAAe;AAAA,IACb,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AAAA,EACA,eAAe;AAAA,IACb,MAAM;AAAA,IACN,SAAS,CAAC,SAAc;AACtB,YAAM,QAAQ,KAAK,SAAS,KAAK,MAAM,KAAK;AAC5C,YAAM,QAAQ,KAAK,SAAS,KAAK,QAAQ,KAAK,SAAS,KAAK;AACtD,YAAA,WAAW,KAAK,YAAY;AAE3B,aAAA,EAAE,OAAO,OAAO;IACzB;AAAA,EACF;AACF,CAAC;AAIM,MAAM,sBAAsB;AAAA,EACjC,GAAGC,sBAAA;AACL;;;"}

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

@@ -4,91 +4,76 @@ const utils = require("@lexical/utils");
 const lexical = require("lexical");
 const lexicalVue = require("lexical-vue");
 const vue = require("vue");
-const utils$1 = require("./utils.js");
 const SELECTED_ELEMENTBLOCK_COMMAND = lexical.createCommand("SELECTED_ELEMENTBLOCK_COMMAND");
 const REMOVE_ELEMENTBLOCK_COMMAND = lexical.createCommand("REMOVE_ELEMENTBLOCK_COMMAND");
 const UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND = lexical.createCommand("UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND");
+const clearSelection = (editor) => {
+  return new Promise((resolove) => {
+    editor.update(() => {
+      const selection = lexical.$getSelection();
+      if (lexical.$isNodeSelection(selection) && selection) {
+        selection.clear();
+      }
+      resolove(void 0);
+    });
+  });
+};
+const setSelected = (editor, selected, key) => {
+  return new Promise((resolove) => {
+    editor.update(() => {
+      let selection = lexical.$getSelection();
+      if (!lexical.$isNodeSelection(selection)) {
+        selection = lexical.$createNodeSelection();
+        lexical.$setSelection(selection);
+      }
+      if (lexical.$isNodeSelection(selection)) {
+        selection.add(vue.unref(key));
+      }
+      resolove(void 0);
+    });
+  });
+};
+const setElementBlockSelection = async (editor, nodeKey) => {
+  await clearSelection(editor);
+  await setSelected(editor, true, nodeKey);
+};
 const useElementBlockSelection = (func, toolsbars) => {
   const editor = lexicalVue.useLexicalComposer();
-  const isSelected = vue.ref(false);
-  const curSelectKey = vue.ref(null);
-  const curSelectEl = vue.ref(null);
-  const curSelectPos = vue.ref(null);
-  const updateActiveBox = (el) => {
-    if (el) {
-      const selectRect = el.getBoundingClientRect();
-      curSelectPos.value = {
-        top: `${selectRect.y}px`,
-        left: `${selectRect.x}px`,
-        width: `${selectRect.width}px`,
-        height: `${selectRect.height}px`
-      };
-    }
-  };
-  const updateActiveViewState = (el) => {
-    if (el) {
-      updateActiveBox(el);
-      editor.dispatchCommand(SELECTED_ELEMENTBLOCK_COMMAND, {
-        element: curSelectEl.value,
-        toolsbars
-      });
-    } else {
-      curSelectEl.value = null;
-      curSelectKey.value = null;
-      curSelectPos.value = null;
-      editor.dispatchCommand(SELECTED_ELEMENTBLOCK_COMMAND, null);
-    }
-  };
-  const setSelection = async (nodeKey, el) => {
-    if (isSelected.value) {
-      isSelected.value = false;
-      await utils$1.clearSelection(editor);
-    }
-    await new Promise((reslove) => setTimeout(reslove, 10));
-    await utils$1.setSelected(editor, true, nodeKey);
-    curSelectEl.value = el == null ? editor.getElementByKey(nodeKey) : el;
-    curSelectKey.value = nodeKey;
-    isSelected.value = utils$1.isNodeSelected(editor, nodeKey);
-    setTimeout(() => updateActiveBox(curSelectEl.value), 500);
-    setTimeout(() => updateActiveBox(curSelectEl.value), 1e3);
-  };
-  vue.watch(isSelected, (state) => {
-    if (state) {
-      updateActiveViewState(state ? curSelectEl.value : null);
-    } else {
-      updateActiveViewState(null);
-    }
-  });
   lexicalVue.useMounted(() => {
     return utils.mergeRegister(
-      // 更新选中状态
-      editor.registerUpdateListener(() => {
-        isSelected.value = utils$1.isNodeSelected(editor, curSelectKey.value);
-        setTimeout(() => updateActiveBox(curSelectEl.value), 10);
-      }),
       // 点击选中
       editor.registerCommand(lexical.CLICK_COMMAND, (event) => {
         const el = func(event.target);
         const nodeKey = el == null ? void 0 : el.getAttribute("node-key");
         if (nodeKey != null) {
           event.preventDefault();
-          if (!event.shiftKey) {
-            utils$1.clearSelection(editor).then(() => {
-              setSelection(nodeKey, el);
-            });
-          } else {
-            setSelection(nodeKey, el);
-          }
+          setElementBlockSelection(editor, nodeKey);
+          return true;
+        }
+        return false;
+      }, lexical.COMMAND_PRIORITY_LOW),
+      // 选中的话
+      editor.registerCommand(lexical.SELECTION_CHANGE_COMMAND, () => {
+        const selection = lexical.$getSelection();
+        const node = lexical.$isNodeSelection(selection) ? selection == null ? void 0 : selection.getNodes()[0] : null;
+        const nodeKey = node == null ? void 0 : node.__key;
+        const el = nodeKey ? editor.getElementByKey(nodeKey) : null;
+        if (nodeKey && el && func(el)) {
+          editor.dispatchCommand(SELECTED_ELEMENTBLOCK_COMMAND, {
+            nodeKey,
+            toolsbars
+          });
           return true;
         }
+        editor.dispatchCommand(SELECTED_ELEMENTBLOCK_COMMAND, null);
         return false;
       }, lexical.COMMAND_PRIORITY_LOW)
     );
   });
-  return { isSelected, setSelection, curSelectKey, curSelectPos };
 };
 exports.REMOVE_ELEMENTBLOCK_COMMAND = REMOVE_ELEMENTBLOCK_COMMAND;
 exports.SELECTED_ELEMENTBLOCK_COMMAND = SELECTED_ELEMENTBLOCK_COMMAND;
 exports.UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND = UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND;
+exports.setElementBlockSelection = setElementBlockSelection;
 exports.useElementBlockSelection = useElementBlockSelection;
 //# sourceMappingURL=element-block.js.map

package/dist/cjs/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          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    // 500毫秒之后计算下选择框\r\n    setTimeout(()=>updateActiveBox(curSelectEl.value),500)\r\n    // 之后再计算下避免由于图片加载高度计算错误问题\r\n    setTimeout(()=>updateActiveBox(curSelectEl.value),1000)\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":["createCommand","useLexicalComposer","ref","clearSelection","setSelected","isNodeSelected","watch","useMounted","mergeRegister","CLICK_COMMAND","COMMAND_PRIORITY_LOW"],"mappings":";;;;;;;AA2Ba,MAAA,gCAAmFA,sBAAc,+BAA+B;AAKhI,MAAA,8BAA8DA,sBAAc,6BAA6B;AAKzG,MAAA,0CAA0EA,sBAAc,yCAAyC;AA6DjI,MAAA,2BAA2B,CAAC,MAAqB,cAA0D;AAEtH,QAAM,SAASC,WAAAA;AACT,QAAA,aAAaC,QAAI,KAAK;AACtB,QAAA,eAAeA,QAAS,IAAI;AAC5B,QAAA,cAAcA,QAAS,IAAI;AAC3B,QAAA,eAAeA,QAAS,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,YAAOC,QAAAA,eAAe,MAAM;AAAA,IAC9B;AAEA,UAAM,IAAI,QAAQ,CAAA,YAAS,WAAW,SAAS,EAAE,CAAC;AAC5C,UAAAC,oBAAY,QAAO,MAAK,OAAO;AACrC,gBAAY,QAAQ,MAAM,OAAO,OAAO,gBAAgB,OAAO,IAAI;AACnE,iBAAa,QAAQ;AACV,eAAA,QAAQC,QAAAA,eAAe,QAAQ,OAAO;AAEjD,eAAW,MAAI,gBAAgB,YAAY,KAAK,GAAE,GAAG;AAErD,eAAW,MAAI,gBAAgB,YAAY,KAAK,GAAE,GAAI;AAAA,EAAA;AAGlDC,YAAA,YAAW,CAAC,UAAQ;AACxB,QAAG,OAAM;AACe,4BAAA,QAAQ,YAAY,QAAQ,IAAI;AAAA,IAAA,OAEpD;AACF,4BAAsB,IAAI;AAAA,IAC5B;AAAA,EAAA,CACD;AAGDC,aAAAA,WAAW,MAAI;AAEN,WAAAC,MAAA;AAAA;AAAA,MAEL,OAAO,uBAAuB,MAAM;AAElC,mBAAW,QAAQH,QAAA,eAAe,QAAQ,aAAa,KAAK;AAC5D,mBAAW,MAAI,gBAAgB,YAAY,KAAK,GAAE,EAAE;AAAA,MAAA,CAErD;AAAA;AAAA,MAED,OAAO,gBAA4BI,uBAAc,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;AAEJN,mCAAA,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,SACNO,4BAAoB;AAAA,IAAA;AAAA,EACzB,CACD;AAGD,SAAO,EAAE,YAAW,cAAc,cAAa,aAAa;AAE9D;;;;;"}
+{"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\n\r\nimport {\r\n  $createNodeSelection,\r\n  $getNodeByKey,\r\n  $getSelection,\r\n  $isNodeSelection,\r\n  $setSelection,\r\n  COMMAND_PRIORITY_LOW,CLICK_COMMAND, LexicalCommand, createCommand, NodeKey, LexicalEditor,\r\n  SELECTION_CHANGE_COMMAND\r\n} from 'lexical'\r\nimport { useLexicalComposer,useMounted } from 'lexical-vue'\r\nimport {  ref,watch,unref } from 'vue'\r\n\r\n/**\r\n * toolsbar的函数\r\n */\r\nexport type SelectElementBlockToolsbarFunction = (nodeKey?:NodeKey | string)=>Array<any>|null;\r\n\r\n/**\r\n * 元素抗选中类型\r\n */\r\nexport type SelectElementBlocktEventType = {\r\n  nodeKey:NodeKey|string,\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\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// isNodeSelected  \r\nconst 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\nconst 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\nconst 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// 设置选中\r\nexport const setElementBlockSelection = async (editor:LexicalEditor,nodeKey:string)=>{\r\n  await clearSelection(editor);\r\n  await setSelected(editor,true,nodeKey);\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  \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 != null){\r\n          \r\n          event.preventDefault();\r\n\r\n          // 暂时不支持使用 shift 建 多选\r\n          // if (!event.shiftKey) { \r\n          //   // 先取消\r\n          //   clearSelection(editor)\r\n          // }\r\n          setElementBlockSelection(editor,nodeKey);\r\n          return true;\r\n        }\r\n   \r\n        return false;\r\n      }, COMMAND_PRIORITY_LOW),\r\n      // 选中的话\r\n      editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {\r\n        const selection = $getSelection();\r\n        const node = $isNodeSelection(selection) ? selection?.getNodes()[0] : null;\r\n        const nodeKey = node?.__key;\r\n        const el = nodeKey ? editor.getElementByKey(nodeKey) : null;\r\n\r\n        if(nodeKey && el && func(el)){\r\n          editor.dispatchCommand(SELECTED_ELEMENTBLOCK_COMMAND,{ \r\n            nodeKey:nodeKey, toolsbars:toolsbars\r\n          });\r\n          return true;\r\n        }\r\n        editor.dispatchCommand(SELECTED_ELEMENTBLOCK_COMMAND,null);\r\n        return false;\r\n      },COMMAND_PRIORITY_LOW)\r\n    )\r\n  })\r\n\r\n}\r\n"],"names":["createCommand","$getSelection","$isNodeSelection","$createNodeSelection","$setSelection","unref","useLexicalComposer","useMounted","mergeRegister","CLICK_COMMAND","COMMAND_PRIORITY_LOW","SELECTION_CHANGE_COMMAND"],"mappings":";;;;;;AAgCa,MAAA,gCAAmFA,sBAAc,+BAA+B;AAKhI,MAAA,8BAA8DA,sBAAc,6BAA6B;AAKzG,MAAA,0CAA0EA,sBAAc,yCAAyC;AAyB9I,MAAM,iBAAiB,CAAC,WAA6C;AAC5D,SAAA,IAAI,QAAQ,CAAU,aAAA;AAC3B,WAAO,OAAO,MAAM;AAClB,YAAM,YAAYC,QAAAA;AACd,UAAAC,QAAA,iBAAiB,SAAS,KAAK,WAAU;AAC3C,kBAAU,MAAM;AAAA,MAClB;AACA,eAAS,MAAS;AAAA,IAAA,CACnB;AAAA,EAAA,CACF;AACH;AAGA,MAAM,cAAc,CAAC,QAAsB,UAAkB,QAAkC;AAEtF,SAAA,IAAI,QAAQ,CAAU,aAAA;AAC3B,WAAO,OAAO,MAAM;AAClB,UAAI,YAAYD,QAAAA;AAEZ,UAAA,CAACC,QAAAA,iBAAiB,SAAS,GAAG;AAChC,oBAAYC,QAAqB,qBAAA;AACjCC,gBAAA,cAAc,SAAS;AAAA,MACzB;AACI,UAAAF,QAAAA,iBAAiB,SAAS,GAAG;AAEnB,kBAAA,IAAIG,UAAM,GAAG,CAAC;AAAA,MAG5B;AACA,eAAS,MAAS;AAAA,IAAA,CACnB;AAAA,EAAA,CACF;AAEH;AAGa,MAAA,2BAA2B,OAAO,QAAqB,YAAiB;AACnF,QAAM,eAAe,MAAM;AACrB,QAAA,YAAY,QAAO,MAAK,OAAO;AACvC;AAKa,MAAA,2BAA2B,CAAC,MAAqB,cAA0D;AAEtH,QAAM,SAASC,WAAAA;AAGfC,aAAAA,WAAW,MAAI;AAEN,WAAAC,MAAA;AAAA;AAAA,MAEL,OAAO,gBAA4BC,uBAAc,CAAC,UAAU;AAEpD,cAAA,KAAK,KAAK,MAAM,MAAqB;AACrC,cAAA,UAAU,yBAAI,aAAa;AAGjC,YAAG,WAAW,MAAK;AAEjB,gBAAM,eAAe;AAOrB,mCAAyB,QAAO,OAAO;AAChC,iBAAA;AAAA,QACT;AAEO,eAAA;AAAA,SACNC,4BAAoB;AAAA;AAAA,MAEvB,OAAO,gBAAgBC,QAAAA,0BAA0B,MAAM;AACrD,cAAM,YAAYV,QAAAA;AACZ,cAAA,OAAOC,yBAAiB,SAAS,IAAI,uCAAW,WAAW,KAAK;AACtE,cAAM,UAAU,6BAAM;AACtB,cAAM,KAAK,UAAU,OAAO,gBAAgB,OAAO,IAAI;AAEvD,YAAG,WAAW,MAAM,KAAK,EAAE,GAAE;AAC3B,iBAAO,gBAAgB,+BAA8B;AAAA,YACnD;AAAA,YAAiB;AAAA,UAAA,CAClB;AACM,iBAAA;AAAA,QACT;AACO,eAAA,gBAAgB,+BAA8B,IAAI;AAClD,eAAA;AAAA,SACPQ,4BAAoB;AAAA,IAAA;AAAA,EACxB,CACD;AAEH;;;;;;"}

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
 const elementBlock = require("./element-block.js");
-require("lexical");
 const DEVICE_VIEW_MODE = vue.ref("pc");
 const ToolbarExtendPlugins = vue.reactive([]);
 const registerDocEditorToolbarExtend = function(options) {
@@ -12,6 +11,7 @@ const registerDocEditorToolbarExtend = function(options) {
 exports.REMOVE_ELEMENTBLOCK_COMMAND = elementBlock.REMOVE_ELEMENTBLOCK_COMMAND;
 exports.SELECTED_ELEMENTBLOCK_COMMAND = elementBlock.SELECTED_ELEMENTBLOCK_COMMAND;
 exports.UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND = elementBlock.UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND;
+exports.setElementBlockSelection = elementBlock.setElementBlockSelection;
 exports.useElementBlockSelection = elementBlock.useElementBlockSelection;
 exports.DEVICE_VIEW_MODE = DEVICE_VIEW_MODE;
 exports.ToolbarExtendPlugins = ToolbarExtendPlugins;

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

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

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

@@ -8,6 +8,7 @@ const index_vue_vue_type_script_setup_true_lang$1 = require("./plugins/RichTextP
 const index_vue_vue_type_script_setup_true_lang$6 = require("./plugins/ElementBlockSelectionPlugin/index.vue.js");
 const index_vue_vue_type_script_setup_true_lang$4 = require("./plugins/ModulePlugin/index.vue.js");
 const index_vue_vue_type_script_setup_true_lang$5 = require("./plugins/GridPlugin/index.vue.js");
+const index_vue_vue_type_script_setup_true_lang$7 = require("./plugins/TemplatePlugin/index.vue.js");
 const nodes = require("./plugins/nodes.js");
 const composables = require("./plugins/ModulePlugin/composables.js");
 const index = require("./core/index.js");
@@ -23,6 +24,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   props: {
     placeholder: { type: String, default: "这里输入正文..." },
     content: { type: String, default: `` },
+    loading: { type: Boolean, defualt: false },
     js: { type: String, default: `` },
     css: { type: String, default: `` }
   },
@@ -60,10 +62,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     vue.onMounted(() => {
       var _a, _b;
       const doc = (_b = (_a = iframeContentRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document;
+      const { Modules } = composables.useModule();
       const style = document.createElement("style");
       style.setAttribute("type", "text/css");
       style.innerHTML = [docEditor, docTheme, docEditorEdit].join("\r\n");
-      style.innerHTML += composables.useModules().filter((item) => item.editorCss).map((item) => item.editorCss).join("\r\n");
+      style.innerHTML += Modules.filter((item) => item.editorCss).map((item) => item.editorCss).join("\r\n");
       doc.head.append(style);
       props.js.split(",").filter((item) => !!item).forEach((path) => {
         const script = document.createElement("script");
@@ -86,9 +89,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       setTimeout(() => updateStage(), 500);
     });
     return (_ctx, _cache) => {
+      const _directive_loading = vue.resolveDirective("loading");
       return vue.openBlock(), vue.createBlock(vue.unref(lexicalVue.LexicalComposer), { "initial-config": config }, {
         default: vue.withCtx(() => [
-          vue.createElementVNode("div", {
+          vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
             class: vue.normalizeClass(["mk-doc-editor", vue.unref(index.DEVICE_VIEW_MODE)])
           }, [
             vue.createVNode(vue.unref(index_vue_vue_type_script_setup_true_lang), {
@@ -124,7 +128,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               ]),
               vue.renderSlot(_ctx.$slots, "after-extentions")
             ])
-          ], 2),
+          ], 2)), [
+            [_directive_loading, __props.loading]
+          ]),
+          vue.createVNode(vue.unref(index_vue_vue_type_script_setup_true_lang$7)),
           vue.createVNode(vue.unref(lexicalVue.LexicalAutoFocusPlugin)),
           vue.createVNode(vue.unref(lexicalVue.LexicalCheckListPlugin)),
           vue.createVNode(vue.unref(lexicalVue.LexicalHashtagPlugin)),

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

@@ -1 +1 @@
-{"version":3,"file":"editor.vue.js","sources":["../../../../../src/components/basic/doc-editor/editor.vue"],"sourcesContent":["<template>\r\n  <LexicalComposer :initial-config=\"config\">\r\n    <div class=\"mk-doc-editor\" :class=\"DEVICE_VIEW_MODE\">\r\n      <ToolbarPlugin  :js=\"js\" :css=\"css\"  />\r\n      <div class=\"mk-doc-editor__stage_warp\">\r\n        <slot name=\"before-extentions\"></slot>\r\n        <div class=\"mk-doc-editor__stage_body\">\r\n          <slot name=\"header\"></slot>\r\n          <iframe title=\"iframe\" class=\"mk-doc-editor__stage_iframe\" ref=\"iframeContentRef\"></iframe>\r\n          <Teleport v-if=\"iframeBody\" :to=\"iframeBody\">\r\n            <RichTextPlugin :content=\"props.content\" @change=\"contentChangeHandle\" :placeholder=\"placeholder\">\r\n            </RichTextPlugin>\r\n            <ImagePlugin />\r\n            <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","ref","computed","onMounted","DocEditorCss","DocThemeCss","DocEditorEditCss","useModules","watch","DEVICE_VIEW_MODE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,UAAM,OAAO;AAGb,UAAM,QAAQ;AASd,UAAM,SAAS;AAAA,MACb,WAAW;AAAA,MACX,OAAO;AAAA,MACP,OAAO;AAAA,QACL,GAAGA;AAAAA,MACL;AAAA,MACA,QAAQ,OAAa;AAInB,gBAAQ,MAAM,KAAK;AAAA,MACrB;AAAA,IAAA;AAII,UAAA,mBAAmBC,QAAI,IAAW;AACxC,UAAM,aAAaC,IAAS,SAAA;;AAAI,gDAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC,aAAvC,mBAAiD;AAAA,KAAI;AAGrF,UAAM,cAAc,MAAI;AACtB,iBAAW,MAAM;;AACf,cAAG,gBAAW,UAAX,mBAAkB,kBAAe,gBAAW,UAAX,mBAAkB,eAAa;AACjE,2BAAiB,MAAM,MAAM,WAAU,gBAAW,UAAX,mBAAkB,gBAAe,KAAI;AAAA,QAC9E;AAAA,SACC,EAAE;AAAA,IAAA;AAED,UAAA,sBAAsB,CAAC,YAAc;AACzC,WAAK,UAAS,OAAO;AACT;IAAA;AAGdC,QAAAA,UAAU,MAAI;;AAEN,YAAA,OAAM,4BAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC;AAG7C,YAAA,QAAQ,SAAS,cAAc,OAAO;AACtC,YAAA,aAAa,QAAO,UAAU;AAGpC,YAAM,YAAY,CAACC,WAAaC,UAAYC,aAAgB,EAAE,KAAK,MAAM;AAGzE,YAAM,aAAaC,YAAA,WAAA,EAAa,OAAO,UAAM,KAAK,SAAS,EAAE,IAAI,CAAM,SAAA,KAAK,SAAS,EAAE,KAAK,MAAM;AAE9F,UAAA,KAAK,OAAO,KAAK;AAGf,YAAA,GAAG,MAAM,GAAG,EAAE,OAAO,CAAM,SAAA,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAM,SAAA;AAC/C,cAAA,SAAS,SAAS,cAAc,QAAQ;AAC9C,eAAO,MAAM;AACN,eAAA,aAAa,eAAc,MAAM;AACpC,YAAA,KAAK,OAAO,MAAM;AAAA,MAAA,CACvB;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;AAGKC,gBAAAC,MAAAA,kBAAiB,CAAC,YAAoB;AAC1C,YAAI,KAAK,MAAM,WAAW,WAAW,OAAO,SAAS;AACzC;AACL,eAAA;AAAA,MAAA,GACP,EAAE,WAAW,KAAA,CAAK;AAGT,iBAAA,MAAK,eAAc,GAAG;AAAA,IAAA,CAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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\" v-loading=\"loading\" :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    <TemplatePlguin />\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  TemplatePlguin\r\n} from \"./plugins\"\r\nimport { useModule } 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  loading:{ type:Boolean,defualt:false},\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  const { Modules } = useModule();\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 += Modules.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","ref","computed","onMounted","useModule","DocEditorCss","DocThemeCss","DocEditorEditCss","watch","DEVICE_VIEW_MODE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,UAAM,OAAO;AAGb,UAAM,QAAQ;AAUd,UAAM,SAAS;AAAA,MACb,WAAW;AAAA,MACX,OAAO;AAAA,MACP,OAAO;AAAA,QACL,GAAGA;AAAAA,MACL;AAAA,MACA,QAAQ,OAAa;AAInB,gBAAQ,MAAM,KAAK;AAAA,MACrB;AAAA,IAAA;AAII,UAAA,mBAAmBC,QAAI,IAAW;AACxC,UAAM,aAAaC,IAAS,SAAA;;AAAI,gDAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC,aAAvC,mBAAiD;AAAA,KAAI;AAGrF,UAAM,cAAc,MAAI;AACtB,iBAAW,MAAM;;AACf,cAAG,gBAAW,UAAX,mBAAkB,kBAAe,gBAAW,UAAX,mBAAkB,eAAa;AACjE,2BAAiB,MAAM,MAAM,WAAU,gBAAW,UAAX,mBAAkB,gBAAe,KAAI;AAAA,QAC9E;AAAA,SACC,EAAE;AAAA,IAAA;AAED,UAAA,sBAAsB,CAAC,YAAc;AACzC,WAAK,UAAS,OAAO;AACT;IAAA;AAGdC,QAAAA,UAAU,MAAI;;AAEN,YAAA,OAAM,4BAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC;AAC7C,YAAA,EAAE,YAAYC,YAAAA;AAGd,YAAA,QAAQ,SAAS,cAAc,OAAO;AACtC,YAAA,aAAa,QAAO,UAAU;AAGpC,YAAM,YAAY,CAACC,WAAaC,UAAYC,aAAgB,EAAE,KAAK,MAAM;AAGzE,YAAM,aAAa,QAAQ,OAAO,CAAA,SAAM,KAAK,SAAS,EAAE,IAAI,CAAM,SAAA,KAAK,SAAS,EAAE,KAAK,MAAM;AAEzF,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;AAGKC,gBAAAC,MAAAA,kBAAiB,CAAC,YAAoB;AAC1C,YAAI,KAAK,MAAM,WAAW,WAAW,OAAO,SAAS;AACzC;AACL,eAAA;AAAA,MAAA,GACP,EAAE,WAAW,KAAA,CAAK;AAGT,iBAAA,MAAK,eAAc,GAAG;AAAA,IAAA,CAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -2,7 +2,9 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const utils = require("@maketribe/utils");
 const editor_vue_vue_type_script_setup_true_lang = require("./editor.vue.js");
+const composables$1 = require("./plugins/TemplatePlugin/composables.js");
 const MKDocEditor = utils.withInstall(editor_vue_vue_type_script_setup_true_lang);
+exports.registerDocTemplate = composables$1.registerDocTemplate;
 exports.MKDocEditor = MKDocEditor;
 exports.default = MKDocEditor;
 //# sourceMappingURL=index.js.map

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

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