@maketribe/ms-app 3.2.33 → 3.2.34

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

@@ -1 +1 @@
-{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ElementBlockSelectionPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { type CommandListenerPriority, $isNodeSelection, $getSelection, $getNodeByKey, SELECTION_CHANGE_COMMAND } from 'lexical'\r\nimport { mergeRegister } from '@lexical/utils'\r\nimport { useLexicalComposer, useMounted } from 'lexical-vue'\r\nimport { ref, reactive, shallowRef, nextTick, watch,computed } from 'vue'\r\nimport { $isGridNode } from '../GridPlugin'\r\nimport { $isImageNode } from '../ImagePlugin'\r\nimport { $isModuleBlockNode } from '../ModulePlugin'\r\nimport {\r\n  UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND, SELECTED_ELEMENTBLOCK_COMMAND, REMOVE_ELEMENTBLOCK_COMMAND,\r\n  type SelectElementBlocktEventType, DEVICE_VIEW_MODE, setElementBlockSelection\r\n} from \"../../core\"\r\n\r\n// 点击工具条按钮\r\nconst lowPriority: CommandListenerPriority = 1\r\nconst editor = useLexicalComposer()\r\nconst isSelectGrid = ref(false)\r\nconst selectionMarkPos = ref({ left: \"px\", top: \"0px\",width:\"0\",height:\"0\" });\r\nconst toolbarRef = ref<HTMLDivElement | null>(null)\r\nconst selectPayload = shallowRef<any>(null);\r\nconst toolsPos = reactive({ left: \"px\", top: \"0px\" });\r\n\r\nwatch(DEVICE_VIEW_MODE, () => {\r\n  editor.dispatchCommand(UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND, null);\r\n})\r\n\r\n// 更新工具条坐标\r\nconst updateToolsPos = () => {\r\n\r\n  nextTick(() => {\r\n   \r\n    if (selectPayload.value != null && toolbarRef.value != null) {\r\n\r\n      const element = editor.getElementByKey(selectPayload.value.nodeKey) as HTMLElement\r\n\r\n      const editIframeRect = (toolbarRef.value.getRootNode() as any).body.querySelector(\".mk-doc-editor__stage_iframe\").getBoundingClientRect();\r\n      const editBodyRect = (toolbarRef.value.getRootNode() as any).body.querySelector(\".mk-doc-editor__stage_body\").getBoundingClientRect();\r\n\r\n      const baseY = editIframeRect.y - editBodyRect.y;\r\n      const selectRect = element.getBoundingClientRect();\r\n      const toolsRect = toolbarRef.value.getBoundingClientRect();\r\n\r\n      if (toolsRect) {\r\n        // 中心点\r\n        toolsPos.top = Math.max(selectRect.y - toolsRect.height - 5 + baseY, 5 + baseY) + \"px\"\r\n        toolsPos.left = Math.max(toolsRect.width / -2 + selectRect.x + selectRect.width / 2,-50) + \"px\";\r\n      }\r\n\r\n      // 选中框\r\n      selectionMarkPos.value = {\r\n        top:`${selectRect.y  + baseY }px`,left:`${selectRect.x}px`,\r\n        width:`${selectRect.width}px`,height:`${selectRect.height}px`\r\n      };\r\n\r\n    }\r\n  })\r\n  return false;\r\n}\r\n\r\n// 节点描述\r\nconst nodeDesc = computed(()=>{\r\n  if(selectPayload.value){\r\n    const node = editor.getEditorState().read(() => {\r\n      return $getNodeByKey(selectPayload.value.nodeKey)\r\n    }) as any;\r\n    return node.getTitle ? node.getTitle() : \"\";\r\n  }\r\n  else{\r\n    return \"\";\r\n  }\r\n})\r\n\r\n// 选中上层节点\r\nconst canSelectedParentNode = ref(false);\r\nconst selectedParentNode = ()=>{\r\n  const node = editor.getEditorState().read(() => {\r\n    return $getNodeByKey(selectPayload.value.nodeKey)\r\n  }) as any;\r\n  \r\n  if(node && node.__parent){\r\n    setElementBlockSelection(editor,node.__parent);\r\n  }\r\n  \r\n}\r\n// 选中兄弟节点\r\nconst canSelectedNextNode = ref(false);\r\nconst selectedNextNode = ()=>{\r\n  const node = editor.getEditorState().read(() => {\r\n    return $getNodeByKey(selectPayload.value.nodeKey)\r\n  }) as any;\r\n  \r\n  if(node && node.__next){\r\n    setElementBlockSelection(editor,node.__next);\r\n  }\r\n}\r\nconst canSelectedPrevNode = ref(false);\r\nconst selectedPrevNode = ()=>{\r\n  const node = editor.getEditorState().read(() => {\r\n    return $getNodeByKey(selectPayload.value.nodeKey)\r\n  }) as any;\r\n  \r\n  if(node && node.__prev){\r\n    setElementBlockSelection(editor,node.__prev);\r\n  }\r\n}\r\n\r\nuseMounted(() => {\r\n  return mergeRegister(\r\n    editor.registerCommand(UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND, () => updateToolsPos(), lowPriority),\r\n    editor.registerUpdateListener(() =>  setTimeout(()=> updateToolsPos(),50)),\r\n    // 选中模块\r\n    editor.registerCommand(SELECTED_ELEMENTBLOCK_COMMAND, (payload: SelectElementBlocktEventType) => {\r\n \r\n      if (payload != null) {\r\n\r\n        let toolsbarList = [];\r\n\r\n        // 如果是函数的话\r\n        if (typeof payload.toolsbars == \"function\") {\r\n          toolsbarList = payload.toolsbars(payload.nodeKey) ?? [];\r\n        }\r\n        else {\r\n          toolsbarList = payload.toolsbars;\r\n        }\r\n        // 选中的元数据\r\n        selectPayload.value = { nodeKey:  payload.nodeKey, toolsbars: toolsbarList };\r\n      }\r\n      else {\r\n        selectPayload.value = null;\r\n      }\r\n\r\n      return updateToolsPos();\r\n    }, lowPriority),\r\n    // 删除模块\r\n    editor.registerCommand(REMOVE_ELEMENTBLOCK_COMMAND, () => {\r\n\r\n      const selection = $getSelection();\r\n\r\n      if ($isNodeSelection(selection)) {\r\n\r\n        selection.getNodes().forEach(node => node.remove());\r\n\r\n        // 没选中\r\n        editor.dispatchCommand(SELECTED_ELEMENTBLOCK_COMMAND, null);\r\n      }\r\n      return false;\r\n    }, lowPriority),\r\n    editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {\r\n\r\n      const selection = $getSelection();\r\n\r\n      if($isNodeSelection(selection)){\r\n\r\n        const node = selection.getNodes()[0]\r\n\r\n        // 显示父亲节点选中\r\n        canSelectedParentNode.value = $isGridNode(node?.getParent());\r\n\r\n        if(node?.__next){\r\n          const nextNode = $getNodeByKey(node.__next);\r\n          canSelectedNextNode.value = node?.__next ? $isGridNode(nextNode) || $isModuleBlockNode(nextNode) || $isImageNode(nextNode) : false;\r\n        }\r\n        else{\r\n          canSelectedNextNode.value = false;\r\n        }\r\n\r\n        if(node?.__prev){\r\n          const prevNode = $getNodeByKey(node.__prev);\r\n          canSelectedPrevNode.value = node?.__prev ? $isGridNode(prevNode) || $isModuleBlockNode(prevNode) || $isImageNode(prevNode)  : false;\r\n        }\r\n        else{\r\n          canSelectedPrevNode.value = false;\r\n        }\r\n      }\r\n      else{\r\n        canSelectedParentNode.value = false;\r\n        canSelectedNextNode.value = false;\r\n        canSelectedPrevNode.value = false;\r\n      }\r\n\r\n      return updateToolsPos();\r\n    },lowPriority)\r\n  )\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n  <div v-if=\"selectPayload != null\" ref=\"toolbarRef\" class=\"mk-doc-editor-decorator-module-toolbar\" :style=\"toolsPos\">\r\n    <el-button-group>\r\n      <el-button v-if=\"nodeDesc\" text bg style=\"font-size: 14px;\">{{nodeDesc}}</el-button>\r\n      <template v-for=\"item in selectPayload.toolsbars\">\r\n        <el-tooltip effect=\"dark\" :content=\"item.title\" placement=\"top\">\r\n          <el-button text @click=\"item.action()\">\r\n            <MKSvgIcon :iconClass=\"item.icon\" />\r\n          </el-button>\r\n        </el-tooltip>\r\n      </template>\r\n      <el-tooltip effect=\"dark\" content=\"上层容器\" v-if=\"canSelectedParentNode\" placement=\"top\">\r\n        <el-button text @click=\"selectedParentNode()\">\r\n          <MKSvgIcon :iconClass=\"`ArrowUpBold`\" />\r\n        </el-button>\r\n      </el-tooltip>\r\n      <el-tooltip effect=\"dark\" content=\"上一个\" v-if=\"canSelectedPrevNode\" placement=\"top\">\r\n        <el-button text @click=\"selectedPrevNode()\">\r\n          <MKSvgIcon :iconClass=\"`ArrowLeftBold`\" />\r\n        </el-button>\r\n      </el-tooltip>\r\n      <el-tooltip effect=\"dark\" content=\"下一个\" v-if=\"canSelectedNextNode\" placement=\"top\">\r\n        <el-button text @click=\"selectedNextNode()\">\r\n          <MKSvgIcon :iconClass=\"`ArrowRightBold`\" />\r\n        </el-button>\r\n      </el-tooltip>\r\n      <el-tooltip effect=\"dark\" content=\"删除\" placement=\"top\">\r\n        <el-button text type=\"danger\" @click=\"editor.dispatchCommand(REMOVE_ELEMENTBLOCK_COMMAND, null)\">\r\n          <MKSvgIcon :iconClass=\"`Delete`\" />\r\n        </el-button>\r\n      </el-tooltip>\r\n\r\n    </el-button-group>\r\n  </div>\r\n  <div class=\"mk-doc-selection-element-block-mark box\" v-if=\"selectPayload != null\" :class=\"{box:isSelectGrid}\" :style=\"selectionMarkPos\"></div>\r\n</template>\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ElementBlockSelectionPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { type CommandListenerPriority, $isNodeSelection, $getSelection, $getNodeByKey, SELECTION_CHANGE_COMMAND } from 'lexical'\r\nimport { mergeRegister } from '@lexical/utils'\r\nimport { useLexicalComposer, useMounted } from '../../core/composables'\r\nimport { ref, reactive, shallowRef, nextTick, watch,computed } from 'vue'\r\nimport { $isGridNode } from '../GridPlugin'\r\nimport { $isImageNode } from '../ImagePlugin'\r\nimport { $isModuleBlockNode } from '../ModulePlugin'\r\nimport {\r\n  UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND, SELECTED_ELEMENTBLOCK_COMMAND, REMOVE_ELEMENTBLOCK_COMMAND,\r\n  type SelectElementBlocktEventType, DEVICE_VIEW_MODE, setElementBlockSelection\r\n} from \"../../core\"\r\n\r\n// 点击工具条按钮\r\nconst lowPriority: CommandListenerPriority = 1\r\nconst editor = useLexicalComposer()\r\nconst isSelectGrid = ref(false)\r\nconst selectionMarkPos = ref({ left: \"px\", top: \"0px\",width:\"0\",height:\"0\" });\r\nconst toolbarRef = ref<HTMLDivElement | null>(null)\r\nconst selectPayload = shallowRef<any>(null);\r\nconst toolsPos = reactive({ left: \"px\", top: \"0px\" });\r\n\r\nwatch(DEVICE_VIEW_MODE, () => {\r\n  editor.dispatchCommand(UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND, null);\r\n})\r\n\r\n// 更新工具条坐标\r\nconst updateToolsPos = () => {\r\n\r\n  nextTick(() => {\r\n   \r\n    if (selectPayload.value != null && toolbarRef.value != null) {\r\n\r\n      const element = editor.getElementByKey(selectPayload.value.nodeKey) as HTMLElement\r\n\r\n      const editIframeRect = (toolbarRef.value.getRootNode() as any).body.querySelector(\".mk-doc-editor__stage_iframe\").getBoundingClientRect();\r\n      const editBodyRect = (toolbarRef.value.getRootNode() as any).body.querySelector(\".mk-doc-editor__stage_body\").getBoundingClientRect();\r\n\r\n      const baseY = editIframeRect.y - editBodyRect.y;\r\n      const selectRect = element.getBoundingClientRect();\r\n      const toolsRect = toolbarRef.value.getBoundingClientRect();\r\n\r\n      if (toolsRect) {\r\n        // 中心点\r\n        toolsPos.top = Math.max(selectRect.y - toolsRect.height - 5 + baseY, 5 + baseY) + \"px\"\r\n        toolsPos.left = Math.max(toolsRect.width / -2 + selectRect.x + selectRect.width / 2,0) + \"px\";\r\n      }\r\n\r\n      // 选中框\r\n      selectionMarkPos.value = {\r\n        top:`${selectRect.y  + baseY }px`,left:`${selectRect.x}px`,\r\n        width:`${selectRect.width}px`,height:`${selectRect.height}px`\r\n      };\r\n\r\n    }\r\n  })\r\n  return false;\r\n}\r\n\r\n// 节点描述\r\nconst nodeDesc = computed(()=>{\r\n  if(selectPayload.value){\r\n    const node = editor.getEditorState().read(() => {\r\n      return $getNodeByKey(selectPayload.value.nodeKey)\r\n    }) as any;\r\n    return node.getTitle ? node.getTitle() : \"\";\r\n  }\r\n  else{\r\n    return \"\";\r\n  }\r\n})\r\n\r\n// 选中上层节点\r\nconst canSelectedParentNode = ref(false);\r\nconst selectedParentNode = ()=>{\r\n  const node = editor.getEditorState().read(() => {\r\n    return $getNodeByKey(selectPayload.value.nodeKey)\r\n  }) as any;\r\n  \r\n  if(node && node.__parent){\r\n    setElementBlockSelection(editor,node.__parent);\r\n  }\r\n  \r\n}\r\n// 选中兄弟节点\r\nconst canSelectedNextNode = ref(false);\r\nconst selectedNextNode = ()=>{\r\n  const node = editor.getEditorState().read(() => {\r\n    return $getNodeByKey(selectPayload.value.nodeKey)\r\n  }) as any;\r\n  \r\n  if(node && node.__next){\r\n    setElementBlockSelection(editor,node.__next);\r\n  }\r\n}\r\nconst canSelectedPrevNode = ref(false);\r\nconst selectedPrevNode = ()=>{\r\n  const node = editor.getEditorState().read(() => {\r\n    return $getNodeByKey(selectPayload.value.nodeKey)\r\n  }) as any;\r\n  \r\n  if(node && node.__prev){\r\n    setElementBlockSelection(editor,node.__prev);\r\n  }\r\n}\r\n\r\nuseMounted(() => {\r\n  return mergeRegister(\r\n    editor.registerCommand(UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND, () => updateToolsPos(), lowPriority),\r\n    editor.registerUpdateListener(() =>  setTimeout(()=> updateToolsPos(),50)),\r\n    // 选中模块\r\n    editor.registerCommand(SELECTED_ELEMENTBLOCK_COMMAND, (payload: SelectElementBlocktEventType) => {\r\n \r\n      if (payload != null) {\r\n\r\n        let toolsbarList = [];\r\n\r\n        // 如果是函数的话\r\n        if (typeof payload.toolsbars == \"function\") {\r\n          toolsbarList = payload.toolsbars(payload.nodeKey) ?? [];\r\n        }\r\n        else {\r\n          toolsbarList = payload.toolsbars;\r\n        }\r\n        // 选中的元数据\r\n        selectPayload.value = { nodeKey:  payload.nodeKey, toolsbars: toolsbarList };\r\n      }\r\n      else {\r\n        selectPayload.value = null;\r\n      }\r\n\r\n      return updateToolsPos();\r\n    }, lowPriority),\r\n    // 删除模块\r\n    editor.registerCommand(REMOVE_ELEMENTBLOCK_COMMAND, () => {\r\n\r\n      const selection = $getSelection();\r\n\r\n      if ($isNodeSelection(selection)) {\r\n\r\n        selection.getNodes().forEach(node => node.remove());\r\n\r\n        // 没选中\r\n        editor.dispatchCommand(SELECTED_ELEMENTBLOCK_COMMAND, null);\r\n      }\r\n      return false;\r\n    }, lowPriority),\r\n    editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {\r\n\r\n      const selection = $getSelection();\r\n\r\n      if($isNodeSelection(selection)){\r\n\r\n        const node = selection.getNodes()[0]\r\n\r\n        // 显示父亲节点选中\r\n        canSelectedParentNode.value = $isGridNode(node?.getParent());\r\n\r\n        if(node?.__next){\r\n          const nextNode = $getNodeByKey(node.__next);\r\n          canSelectedNextNode.value = node?.__next ? $isGridNode(nextNode) || $isModuleBlockNode(nextNode) || $isImageNode(nextNode) : false;\r\n        }\r\n        else{\r\n          canSelectedNextNode.value = false;\r\n        }\r\n\r\n        if(node?.__prev){\r\n          const prevNode = $getNodeByKey(node.__prev);\r\n          canSelectedPrevNode.value = node?.__prev ? $isGridNode(prevNode) || $isModuleBlockNode(prevNode) || $isImageNode(prevNode)  : false;\r\n        }\r\n        else{\r\n          canSelectedPrevNode.value = false;\r\n        }\r\n      }\r\n      else{\r\n        canSelectedParentNode.value = false;\r\n        canSelectedNextNode.value = false;\r\n        canSelectedPrevNode.value = false;\r\n      }\r\n\r\n      return updateToolsPos();\r\n    },lowPriority)\r\n  )\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n  <div v-if=\"selectPayload != null\" ref=\"toolbarRef\" class=\"mk-doc-editor-decorator-module-toolbar\" :style=\"toolsPos\">\r\n    <el-button-group>\r\n      <el-button v-if=\"nodeDesc\" text bg style=\"font-size: 14px;\">{{nodeDesc}}</el-button>\r\n      <template v-for=\"item in selectPayload.toolsbars\">\r\n        <el-tooltip effect=\"dark\" :content=\"item.title\" placement=\"top\">\r\n          <el-button text @click=\"item.action()\">\r\n            <MKSvgIcon :iconClass=\"item.icon\" />\r\n          </el-button>\r\n        </el-tooltip>\r\n      </template>\r\n      <el-tooltip effect=\"dark\" content=\"上层容器\" v-if=\"canSelectedParentNode\" placement=\"top\">\r\n        <el-button text @click=\"selectedParentNode()\">\r\n          <MKSvgIcon :iconClass=\"`ArrowUpBold`\" />\r\n        </el-button>\r\n      </el-tooltip>\r\n      <el-tooltip effect=\"dark\" content=\"上一个\" v-if=\"canSelectedPrevNode\" placement=\"top\">\r\n        <el-button text @click=\"selectedPrevNode()\">\r\n          <MKSvgIcon :iconClass=\"`ArrowLeftBold`\" />\r\n        </el-button>\r\n      </el-tooltip>\r\n      <el-tooltip effect=\"dark\" content=\"下一个\" v-if=\"canSelectedNextNode\" placement=\"top\">\r\n        <el-button text @click=\"selectedNextNode()\">\r\n          <MKSvgIcon :iconClass=\"`ArrowRightBold`\" />\r\n        </el-button>\r\n      </el-tooltip>\r\n      <el-tooltip effect=\"dark\" content=\"删除\" placement=\"top\">\r\n        <el-button text type=\"danger\" @click=\"editor.dispatchCommand(REMOVE_ELEMENTBLOCK_COMMAND, null)\">\r\n          <MKSvgIcon :iconClass=\"`Delete`\" />\r\n        </el-button>\r\n      </el-tooltip>\r\n\r\n    </el-button-group>\r\n  </div>\r\n  <div class=\"mk-doc-selection-element-block-mark box\" v-if=\"selectPayload != null\" :class=\"{box:isSelectGrid}\" :style=\"selectionMarkPos\"></div>\r\n</template>\r\n"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,15 @@
 import { defineComponent, onMounted, onUnmounted } from "vue";
-import { useLexicalComposer } from "lexical-vue";
+import "@lexical/text";
 import { mergeRegister, $insertNodeToNearestRoot } from "@lexical/utils";
+import "@lexical/overflow";
 import { COMMAND_PRIORITY_EDITOR, $createParagraphNode, $getNodeByKey, $getSelection, $isNodeSelection } from "lexical";
+import "tiny-invariant";
+import "@lexical/history";
+import { useLexicalComposer } from "../../core/composables/useLexicalComposer.js";
+import "@lexical/list";
+import "@lexical/dragon";
+import "@lexical/plain-text";
+import "@lexical/rich-text";
 import { registerDocEditorToolbarExtend } from "../../core/index.js";
 import { $isGridNode, GridNode } from "./GridNode.js";
 import { INSERT_LAYOUTGRID_COMMAND, LayoutGridNode } from "./LayoutGridNode.js";

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

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

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

@@ -1,10 +1,18 @@
 import { defineComponent, onMounted } from "vue";
 import { mergeRegister, $insertNodeToNearestRoot, mediaFileReader, isMimeType } from "@lexical/utils";
-import { $getSelection, $isNodeSelection, $createParagraphNode, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_LOW, $getNodeByKey, $isParagraphNode } from "lexical";
+import { $getNodeByKey, $isParagraphNode, $getSelection, $isNodeSelection, $createParagraphNode, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_LOW } from "lexical";
 import { DRAG_DROP_PASTE } from "@lexical/rich-text";
-import { useLexicalComposer, useMounted } from "lexical-vue";
+import "@lexical/text";
+import { useMounted } from "../../core/composables/useMounted.js";
+import "@lexical/overflow";
+import "tiny-invariant";
+import "@lexical/history";
+import { useLexicalComposer } from "../../core/composables/useLexicalComposer.js";
+import "@lexical/list";
+import "@lexical/dragon";
+import "@lexical/plain-text";
 import { INSERT_IMAGE_COMMAND } from "./commands.js";
-import { $createImageNode, ImageNode } from "./ImageNode.js";
+import { ImageNode, $createImageNode } from "./ImageNode.js";
 import "../GridPlugin/TextGridNode.js";
 import "../GridPlugin/LayoutGridNode.js";
 import { $isImageTextGridNode } from "../GridPlugin/ImageTextGridNode.js";
@@ -78,7 +86,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           toolbarList.push({
             title: isImageText ? "居左" : "左对齐",
             icon: `doc-align-left`,
-            async action() {
+            action: async () => {
               editor.update(() => {
                 if (isImageText) {
                   node.setAttrs({ float: "left" });
@@ -93,7 +101,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           toolbarList.push({
             title: "居中对齐",
             icon: `doc-align-center`,
-            async action() {
+            action: async () => {
               editor.update(() => {
                 parent.setFormat("center");
               });
@@ -104,7 +112,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           toolbarList.push({
             title: isImageText ? "居右" : "右对齐",
             icon: `doc-align-right`,
-            async action() {
+            action: async () => {
               editor.update(() => {
                 if (isImageText) {
                   node.setAttrs({ float: "right" });

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

@@ -1 +1 @@
-{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { $insertNodeToNearestRoot, mergeRegister, mediaFileReader, isMimeType } from '@lexical/utils'\r\nimport {\r\n  COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_LOW, $isParagraphNode,\r\n  $getSelection, $createParagraphNode, $isNodeSelection, $getNodeByKey,\r\n  ElementNode,\r\n  NodeKey\r\n} from 'lexical'\r\nimport { DRAG_DROP_PASTE } from '@lexical/rich-text'\r\nimport { useLexicalComposer, useMounted } from 'lexical-vue'\r\nimport { onMounted, } from 'vue'\r\nimport { INSERT_IMAGE_COMMAND, $createImageNode, ImageNode, type ImageAttrType } from './index'\r\nimport { $isImageTextGridNode } from '../GridPlugin'\r\nimport { registerDocEditorToolbarExtend, type ToolbarExtendPlugin } from \"../../core\"\r\nimport { showImageEditDialog, imageUpload } from \"./utils\"\r\nimport { useElementBlockSelection } from '../../core'\r\nimport { ElLoading } from 'element-plus'\r\n\r\n// 图片类型\r\nconst ACCEPTABLE_IMAGE_TYPES = [\r\n  'image/',\r\n  'image/heic',\r\n  'image/heif',\r\n  'image/gif',\r\n  'image/webp',\r\n]\r\n\r\n// 注册到工具条\r\nregisterDocEditorToolbarExtend({\r\n  icon: \"Picture\",\r\n  text: \"图片\",\r\n  action: async () => {\r\n    // 显示图片编辑面板\r\n    showImageEditDialog({\r\n      src: \"\", alt: \"\", width: \"\", height: \"\", maxWidth: \"100%\", maxHeight: \"\", margin: \"\"\r\n    }).then(async (data: any) => {\r\n      const result = await uploadhandle([data.src])\r\n      data.src = result[0];\r\n      editor.dispatchCommand(INSERT_IMAGE_COMMAND, data)\r\n    });\r\n  },\r\n  sort: 90\r\n} as ToolbarExtendPlugin)\r\n\r\nconst editor = useLexicalComposer()\r\n\r\n// 上传处理函数\r\nconst uploadhandle = async (pathList: Array<string>) => {\r\n\r\n  if (pathList.length) {\r\n\r\n    const loadingInstance = ElLoading.service({ fullscreen: true, text: \"图片上传中...\" })\r\n\r\n    const reesult = await Promise.all(pathList.map(path => {\r\n      return imageUpload(path)\r\n    }))\r\n\r\n    loadingInstance.close();\r\n\r\n    return reesult;\r\n  }\r\n\r\n  return [];\r\n}\r\n\r\n// 使用元素模块 集成了模块选中删除以及工具条\r\nuseElementBlockSelection(el => {\r\n  return el.tagName.toLowerCase() == \"img\" ? el : null\r\n}, (nodeKey) => {\r\n\r\n  const node = $getNodeByKey(nodeKey as NodeKey) as ImageNode;\r\n\r\n  if (node != null) {\r\n\r\n    const parent = node.getParent();\r\n    const isImageText = $isImageTextGridNode(parent)\r\n\r\n    // 工具条\r\n    const toolbarList = [\r\n      {\r\n        title: \"编辑\", icon: \"Edit\", action: async () => {\r\n          // 显示图片编辑面板\r\n          const data: any = await showImageEditDialog(node.__attrs);\r\n          const result = await uploadhandle([data.src])\r\n          data.src = result[0];\r\n          editor.update(() => node.setAttrs(data))\r\n        }\r\n      }\r\n    ];\r\n\r\n    if ($isParagraphNode(parent) || isImageText) {\r\n      toolbarList.push({\r\n        title: isImageText ? \"居左\" : \"左对齐\", icon: `doc-align-left`, async action() {\r\n          editor.update(() => {\r\n            if (isImageText) {\r\n              node.setAttrs({ float: \"left\" })\r\n            }\r\n            else {\r\n              parent.setFormat(\"left\")\r\n            }\r\n          })\r\n        }\r\n      });\r\n    }\r\n\r\n    if ($isParagraphNode(parent)) {\r\n      toolbarList.push({\r\n        title: \"居中对齐\", icon: `doc-align-center`, async action() {\r\n          editor.update(() => {\r\n            parent.setFormat(\"center\")\r\n          })\r\n        }\r\n      });\r\n    }\r\n\r\n    if ($isParagraphNode(parent) || isImageText) {\r\n      toolbarList.push({\r\n        title: isImageText ? \"居右\" : \"右对齐\", icon: `doc-align-right`, async action() {\r\n          editor.update(() => {\r\n\r\n            if (isImageText) {\r\n              node.setAttrs({ float: \"right\" })\r\n            }\r\n            else {\r\n              parent.setFormat(\"right\")\r\n            }\r\n          })\r\n        }\r\n      });\r\n    }\r\n\r\n    return toolbarList;\r\n  }\r\n\r\n  return null;\r\n})\r\n\r\n// 编辑器挂载\r\nuseMounted(() => {\r\n  // 注册事件\r\n  return mergeRegister(\r\n    // 插入图片\r\n    editor.registerCommand<ImageAttrType>(INSERT_IMAGE_COMMAND, (payload) => {\r\n\r\n      const selection = $getSelection()\r\n      const elementNode = $isNodeSelection(selection) ? selection?.getNodes()[0] as ElementNode : null;\r\n\r\n      if (elementNode) {\r\n        elementNode.append($createImageNode(payload));\r\n      }\r\n      else {\r\n        const p = $createParagraphNode()\r\n        p.append($createImageNode(payload))\r\n        $insertNodeToNearestRoot(p)\r\n      }\r\n      return true\r\n    }, COMMAND_PRIORITY_EDITOR),\r\n\r\n    // 剪切板图片\r\n    editor.registerCommand(DRAG_DROP_PASTE, (files) => {\r\n\r\n      (async () => {\r\n\r\n        const filesResult = await mediaFileReader(files, [ACCEPTABLE_IMAGE_TYPES].flatMap((x) => x))\r\n\r\n        const result = await uploadhandle(filesResult.filter(f => isMimeType(f.file, ACCEPTABLE_IMAGE_TYPES)).map(f => f.result))\r\n\r\n        result.forEach(path => {\r\n          editor.dispatchCommand(INSERT_IMAGE_COMMAND, {\r\n            src: path, alt: \"\", maxWidth: \":100%\"\r\n          } as ImageAttrType)\r\n        })\r\n\r\n      })()\r\n\r\n      return true\r\n    }, COMMAND_PRIORITY_LOW)\r\n  )\r\n})\r\n\r\n// 当前插件挂载\r\nonMounted(() => {\r\n\r\n  if (!editor.hasNodes([ImageNode])) {\r\n    throw new Error('ImagePlugin: 图片节点未注册！')\r\n  }\r\n\r\n})\r\n\r\n</script>\r\n\r\n<template></template>\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { $insertNodeToNearestRoot, mergeRegister, mediaFileReader, isMimeType } from '@lexical/utils'\r\nimport {\r\n  COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_LOW, $isParagraphNode,\r\n  $getSelection, $createParagraphNode, $isNodeSelection, $getNodeByKey,\r\n  ElementNode,\r\n  NodeKey\r\n} from 'lexical'\r\nimport { DRAG_DROP_PASTE } from '@lexical/rich-text'\r\nimport { useLexicalComposer,useMounted } from '../../core/composables'\r\nimport { onMounted,  } from 'vue'\r\nimport { INSERT_IMAGE_COMMAND,$createImageNode,ImageNode,type ImageAttrType } from './index'\r\nimport { $isImageTextGridNode } from '../GridPlugin'\r\nimport { registerDocEditorToolbarExtend, type ToolbarExtendPlugin } from \"../../core\"\r\nimport { showImageEditDialog, imageUpload } from \"./utils\"\r\nimport { useElementBlockSelection } from '../../core'\r\nimport { ElLoading } from 'element-plus'\r\n\r\n// 图片类型\r\nconst ACCEPTABLE_IMAGE_TYPES = [\r\n  'image/',\r\n  'image/heic',\r\n  'image/heif',\r\n  'image/gif',\r\n  'image/webp',\r\n]\r\n\r\n// 注册到工具条\r\nregisterDocEditorToolbarExtend({\r\n  icon: \"Picture\",\r\n  text: \"图片\",\r\n  action: async () => {\r\n    // 显示图片编辑面板\r\n    showImageEditDialog({\r\n      src: \"\", alt: \"\", width: \"\", height: \"\", maxWidth: \"100%\", maxHeight: \"\", margin: \"\"\r\n    }).then(async (data: any) => {\r\n      const result = await uploadhandle([data.src])\r\n      data.src = result[0];\r\n      editor.dispatchCommand(INSERT_IMAGE_COMMAND, data)\r\n    });\r\n  },\r\n  sort: 90\r\n} as ToolbarExtendPlugin)\r\n\r\nconst editor = useLexicalComposer()\r\n\r\n// 上传处理函数\r\nconst uploadhandle = async (pathList: Array<string>) => {\r\n\r\n  if (pathList.length) {\r\n\r\n    const loadingInstance = ElLoading.service({ fullscreen: true, text: \"图片上传中...\" })\r\n\r\n    const reesult = await Promise.all(pathList.map(path => {\r\n      return imageUpload(path)\r\n    }))\r\n\r\n    loadingInstance.close();\r\n\r\n    return reesult;\r\n  }\r\n\r\n  return [];\r\n}\r\n\r\n// 使用元素模块 集成了模块选中删除以及工具条\r\nuseElementBlockSelection(el => {\r\n  return el.tagName.toLowerCase() == \"img\" ? el : null\r\n}, (nodeKey) => {\r\n\r\n  const node = $getNodeByKey(nodeKey as NodeKey) as ImageNode;\r\n\r\n  if (node != null) {\r\n\r\n    const parent = node.getParent();\r\n    const isImageText = $isImageTextGridNode(parent)\r\n\r\n    // 工具条\r\n    const toolbarList = [\r\n      {\r\n        title: \"编辑\", icon: \"Edit\", action: async () => {\r\n          // 显示图片编辑面板\r\n          const data: any = await showImageEditDialog(node.__attrs);\r\n          const result = await uploadhandle([data.src])\r\n          data.src = result[0];\r\n          editor.update(() => node.setAttrs(data))\r\n        }\r\n      }\r\n    ];\r\n\r\n    if($isParagraphNode(parent) || isImageText){\r\n      toolbarList.push({ title: isImageText ? \"居左\" : \"左对齐\",icon:`doc-align-left`,action:async ()=>{\r\n          editor.update(()=>{\r\n            if(isImageText){\r\n              node.setAttrs({float:\"left\"})\r\n            }\r\n            else {\r\n              parent.setFormat(\"left\")\r\n            }\r\n          })\r\n        }\r\n      });\r\n    }\r\n\r\n    if($isParagraphNode(parent)){\r\n      toolbarList.push({ title: \"居中对齐\",icon:`doc-align-center`,action:async ()=>{\r\n          editor.update(()=>{  \r\n            parent.setFormat(\"center\")  \r\n          })\r\n        }\r\n      });\r\n    }\r\n\r\n    if($isParagraphNode(parent) || isImageText){\r\n      toolbarList.push({ title: isImageText ? \"居右\" : \"右对齐\",icon:`doc-align-right`,action:async ()=>{\r\n          editor.update(()=>{\r\n\r\n            if (isImageText) {\r\n              node.setAttrs({ float: \"right\" })\r\n            }\r\n            else {\r\n              parent.setFormat(\"right\")\r\n            }\r\n          })\r\n        }\r\n      });\r\n    }\r\n\r\n    return toolbarList;\r\n  }\r\n\r\n  return null;\r\n})\r\n\r\n// 编辑器挂载\r\nuseMounted(() => {\r\n  // 注册事件\r\n  return mergeRegister(\r\n    // 插入图片\r\n    editor.registerCommand<ImageAttrType>(INSERT_IMAGE_COMMAND, (payload) => {\r\n\r\n      const selection = $getSelection()\r\n      const elementNode = $isNodeSelection(selection) ? selection?.getNodes()[0] as ElementNode : null;\r\n\r\n      if (elementNode) {\r\n        elementNode.append($createImageNode(payload));\r\n      }\r\n      else {\r\n        const p = $createParagraphNode()\r\n        p.append($createImageNode(payload))\r\n        $insertNodeToNearestRoot(p)\r\n      }\r\n      return true\r\n    }, COMMAND_PRIORITY_EDITOR),\r\n\r\n    // 剪切板图片\r\n    editor.registerCommand(DRAG_DROP_PASTE, (files) => {\r\n\r\n      (async () => {\r\n\r\n        const filesResult = await mediaFileReader(files, [ACCEPTABLE_IMAGE_TYPES].flatMap((x) => x))\r\n\r\n        const result = await uploadhandle(filesResult.filter(f => isMimeType(f.file, ACCEPTABLE_IMAGE_TYPES)).map(f => f.result))\r\n\r\n        result.forEach(path => {\r\n          editor.dispatchCommand(INSERT_IMAGE_COMMAND, {\r\n            src: path, alt: \"\", maxWidth: \":100%\"\r\n          } as ImageAttrType)\r\n        })\r\n\r\n      })()\r\n\r\n      return true\r\n    }, COMMAND_PRIORITY_LOW)\r\n  )\r\n})\r\n\r\n// 当前插件挂载\r\nonMounted(() => {\r\n\r\n  if (!editor.hasNodes([ImageNode])) {\r\n    throw new Error('ImagePlugin: 图片节点未注册！')\r\n  }\r\n\r\n})\r\n\r\n</script>\r\n\r\n<template></template>\r\n"],"names":[],"mappings":"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"}

package/dist/esm/components/basic/doc-editor/plugins/ModulePlugin/composables.js.map

@@ -1 +1 @@
-{"version":3,"file":"composables.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/composables.ts"],"sourcesContent":["import { DynamicFormItemType } from \"../../../dynamic-form-panel\"\r\n\r\n/**\r\n * 模块模版类型\r\n */\r\nexport type ModuleType = {\r\n  name:string,\r\n  title:string,\r\n  cover:string,\r\n  template:string,\r\n  editorCss:string|null|undefined,\r\n  options:DynamicFormItemType[]\r\n}\r\n\r\n\r\n/**\r\n * 模块模版定义\r\n */\r\nexport const Modules:ModuleType[] = [];\r\n\r\n/**\r\n * 注册模块模版\r\n * @param options \r\n */\r\nexport const registerDocModule = (options:ModuleType) => {\r\n\r\n  if(Modules.findIndex(item=>item.name == options.name) >= 0){\r\n    console.warn(`模块【${options.title}】重复注册！`);\r\n  }\r\n  else{\r\n    Modules.push(options);\r\n  }\r\n}\r\n\r\n\r\n/**\r\n * 卸载模块\r\n * @param name \r\n */\r\nexport const unRegisterDocModule = (name:string) => {\r\n\r\n  for(let i = 0;i < Modules.length; i++){\r\n    if(Modules[i].name == name){\r\n      Modules.splice(i,1);\r\n      break;\r\n    }\r\n  }\r\n}\r\n\r\n/**\r\n * \r\n * @param name \r\n * @returns \r\n */\r\nexport const useModule = () => {\r\n  return { \r\n    Modules,\r\n    findModuleByName:(name:string) => {\r\n\r\n      const module = Modules.find(item=>item.name == name);\r\n    \r\n      if(module == null){\r\n        throw new Error(\"未知的模块模版：【\" + name + \"】\");\r\n      }\r\n    \r\n      return module;\r\n    }\r\n  };\r\n}\r\n\r\n"],"names":[],"mappings":"AAkBO,MAAM,UAAuB,CAAC;AAMxB,MAAA,oBAAoB,CAAC,YAAuB;AAEpD,MAAA,QAAQ,UAAU,CAAM,SAAA,KAAK,QAAQ,QAAQ,IAAI,KAAK,GAAE;AACzD,YAAQ,KAAK,MAAM,QAAQ,KAAK,QAAQ;AAAA,EAAA,OAEtC;AACF,YAAQ,KAAK,OAAO;AAAA,EACtB;AACF;AAOa,MAAA,sBAAsB,CAAC,SAAgB;AAElD,WAAQ,IAAI,GAAE,IAAI,QAAQ,QAAQ,KAAI;AACpC,QAAG,QAAQ,CAAC,EAAE,QAAQ,MAAK;AACjB,cAAA,OAAO,GAAE,CAAC;AAClB;AAAA,IACF;AAAA,EACF;AACF;AAOO,MAAM,YAAY,MAAM;AACtB,SAAA;AAAA,IACL;AAAA,IACA,kBAAiB,CAAC,SAAgB;AAEhC,YAAM,SAAS,QAAQ,KAAK,CAAM,SAAA,KAAK,QAAQ,IAAI;AAEnD,UAAG,UAAU,MAAK;AAChB,cAAM,IAAI,MAAM,cAAc,OAAO,GAAG;AAAA,MAC1C;AAEO,aAAA;AAAA,IACT;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"composables.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/composables.ts"],"sourcesContent":["import { DynamicFormItemType } from \"../../../dynamic-form-panel\"\r\n\r\n/**\r\n * 模块模版类型\r\n */\r\nexport type ModuleType = {\r\n  name:string,\r\n  title:string,\r\n  cover:string,\r\n  template:string,\r\n  editorCss?:string|null|undefined,\r\n  options:DynamicFormItemType[]\r\n}\r\n\r\n\r\n/**\r\n * 模块模版定义\r\n */\r\nexport const Modules:ModuleType[] = [];\r\n\r\n/**\r\n * 注册模块模版\r\n * @param options \r\n */\r\nexport const registerDocModule = (options:ModuleType) => {\r\n\r\n  if(Modules.findIndex(item=>item.name == options.name) >= 0){\r\n    console.warn(`模块【${options.title}】重复注册！`);\r\n  }\r\n  else{\r\n    Modules.push(options);\r\n  }\r\n}\r\n\r\n\r\n/**\r\n * 卸载模块\r\n * @param name \r\n */\r\nexport const unRegisterDocModule = (name:string) => {\r\n\r\n  for(let i = 0;i < Modules.length; i++){\r\n    if(Modules[i].name == name){\r\n      Modules.splice(i,1);\r\n      break;\r\n    }\r\n  }\r\n}\r\n\r\n/**\r\n * \r\n * @param name \r\n * @returns \r\n */\r\nexport const useModule = () => {\r\n  return { \r\n    Modules,\r\n    findModuleByName:(name:string) => {\r\n\r\n      const module = Modules.find(item=>item.name == name);\r\n    \r\n      if(module == null){\r\n        throw new Error(\"未知的模块模版：【\" + name + \"】\");\r\n      }\r\n    \r\n      return module;\r\n    }\r\n  };\r\n}\r\n\r\n"],"names":[],"mappings":"AAkBO,MAAM,UAAuB,CAAC;AAMxB,MAAA,oBAAoB,CAAC,YAAuB;AAEpD,MAAA,QAAQ,UAAU,CAAM,SAAA,KAAK,QAAQ,QAAQ,IAAI,KAAK,GAAE;AACzD,YAAQ,KAAK,MAAM,QAAQ,KAAK,QAAQ;AAAA,EAAA,OAEtC;AACF,YAAQ,KAAK,OAAO;AAAA,EACtB;AACF;AAOa,MAAA,sBAAsB,CAAC,SAAgB;AAElD,WAAQ,IAAI,GAAE,IAAI,QAAQ,QAAQ,KAAI;AACpC,QAAG,QAAQ,CAAC,EAAE,QAAQ,MAAK;AACjB,cAAA,OAAO,GAAE,CAAC;AAClB;AAAA,IACF;AAAA,EACF;AACF;AAOO,MAAM,YAAY,MAAM;AACtB,SAAA;AAAA,IACL;AAAA,IACA,kBAAiB,CAAC,SAAgB;AAEhC,YAAM,SAAS,QAAQ,KAAK,CAAM,SAAA,KAAK,QAAQ,IAAI;AAEnD,UAAG,UAAU,MAAK;AAChB,cAAM,IAAI,MAAM,cAAc,OAAO,GAAG;AAAA,MAC1C;AAEO,aAAA;AAAA,IACT;AAAA,EAAA;AAEJ;"}

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

@@ -1,7 +1,15 @@
 import { defineComponent, onMounted, onUnmounted } from "vue";
-import { useLexicalComposer } from "lexical-vue";
+import "@lexical/text";
 import { mergeRegister } from "@lexical/utils";
+import "@lexical/overflow";
 import { $getSelection, $isNodeSelection, COMMAND_PRIORITY_EDITOR, $getNodeByKey } from "lexical";
+import "tiny-invariant";
+import "@lexical/history";
+import { useLexicalComposer } from "../../core/composables/useLexicalComposer.js";
+import "@lexical/list";
+import "@lexical/dragon";
+import "@lexical/plain-text";
+import "@lexical/rich-text";
 import { useModule } from "./composables.js";
 import { ModuleBlockNode, $createModuleBlockNode, $isModuleBlockNode } from "./ModuleBlockNode.js";
 import { $isModuleGridNode } from "../GridPlugin/ModuleGridNode.js";

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

@@ -1 +1 @@
-{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { useLexicalComposer } from 'lexical-vue'\r\nimport { mergeRegister } from '@lexical/utils'\r\nimport {  COMMAND_PRIORITY_EDITOR,$getNodeByKey,$getSelection,$isNodeSelection, NodeKey } from 'lexical'\r\nimport { onMounted, onUnmounted } from 'vue'\r\nimport { ModuleType,useModule } from \"./composables\"\r\nimport { ModuleBlockNode,$createModuleBlockNode,$isModuleBlockNode } from \"./ModuleBlockNode\"\r\nimport { $isModuleGridNode } from \"../GridPlugin/ModuleGridNode\"\r\nimport { INSERT_MODULE_COMMAND,type ModulePropType } from \"./commands\"\r\nimport { showModuleSelectDialog,findModuleNodeEl } from \"./utils\"\r\nimport { createDefaultFormData } from \"../../../dynamic-form-panel/utils\"\r\nimport {  useElementBlockSelection } from '../../core'\r\nimport { showDynamicFormDialoger } from \"../../../dynamic-form-panel\"\r\n\r\n// 编辑器\r\nconst editor = useLexicalComposer()\r\nconst { findModuleByName } = useModule();\r\n\r\n// 使用元素模块\r\nuseElementBlockSelection(findModuleNodeEl,(nodeKey)=>{\r\n  \r\n  const node = $getNodeByKey(nodeKey as NodeKey)\r\n\r\n  if($isModuleBlockNode(node)){\r\n\r\n    const module = findModuleByName(node.__name);\r\n\r\n    const toobarList = [\r\n      {\r\n        title:`编辑【${module.title}】`,icon:\"Edit\",action:async ()=>{\r\n\r\n          var result = await showDynamicFormDialoger(module.title,module.options,node.__data)\r\n\r\n          editor.update(() => {\r\n            node.setContent(result)\r\n          })\r\n\r\n        } \r\n      },\r\n      {\r\n        title:`插入【${module.title}】之前`,icon:\"BottomLeft\",action:async ()=>{\r\n\r\n          // 打开模块面板\r\n          const result = (await showModuleSelectDialog()) as ModuleType;\r\n          const defaultData = createDefaultFormData(result.options);\r\n          // 插入模块\r\n          editor.dispatchCommand(INSERT_MODULE_COMMAND,{ name:result.name,data:defaultData})\r\n\r\n          editor.update(() => {\r\n            node.insertBefore($createModuleBlockNode(result.name,defaultData))\r\n          })\r\n\r\n        } \r\n      },\r\n      {\r\n        title:`插入【${module.title}】之后`,icon:\"BottomRight\",action:async ()=>{\r\n\r\n          // 打开模块面板\r\n          const result = (await showModuleSelectDialog()) as ModuleType;\r\n          const defaultData = createDefaultFormData(result.options);\r\n          // 插入模块\r\n          editor.dispatchCommand(INSERT_MODULE_COMMAND,{ name:result.name,data:defaultData})\r\n\r\n          editor.update(() => {\r\n            node.insertAfter($createModuleBlockNode(result.name,defaultData))\r\n          })\r\n\r\n        } \r\n      }\r\n    ];\r\n\r\n    return toobarList;\r\n  }\r\n\r\n  return null;\r\n})\r\n\r\nonMounted(() => {\r\n\r\n  if (!editor.hasNodes([ModuleBlockNode])){\r\n    throw new Error('ModuleBlockPlugin: 未注册模块模版节点！')\r\n  }\r\n\r\n  // 注册指令\r\n  const unregister = mergeRegister(\r\n\r\n    // 插入模块\r\n    editor.registerCommand<ModulePropType>(INSERT_MODULE_COMMAND,(payload) => {\r\n\r\n      const selection = $getSelection()\r\n      const node = $isNodeSelection(selection) ? selection?.getNodes()[0] : null;\r\n\r\n      if($isModuleGridNode(node)){\r\n        node.append($createModuleBlockNode(payload.name,payload.data))\r\n      }\r\n     \r\n      return true\r\n    },COMMAND_PRIORITY_EDITOR)\r\n\r\n  );\r\n\r\n  onUnmounted(() => unregister())\r\n})\r\n</script>\r\n\r\n<template></template>\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,UAAM,SAAS;AACT,UAAA,EAAE,qBAAqB;AAGJ,6BAAA,kBAAiB,CAAC,YAAU;AAE7C,YAAA,OAAO,cAAc,OAAkB;AAE1C,UAAA,mBAAmB,IAAI,GAAE;AAEpB,cAAA,SAAS,iBAAiB,KAAK,MAAM;AAE3C,cAAM,aAAa;AAAA,UACjB;AAAA,YACE,OAAM,MAAM,OAAO,KAAK;AAAA,YAAI,MAAK;AAAA,YAAO,QAAO,YAAU;AAEnD,kBAAA,SAAS,MAAM,wBAAwB,OAAO,OAAM,OAAO,SAAQ,KAAK,MAAM;AAElF,qBAAO,OAAO,MAAM;AAClB,qBAAK,WAAW,MAAM;AAAA,cAAA,CACvB;AAAA,YAEH;AAAA,UACF;AAAA,UACA;AAAA,YACE,OAAM,MAAM,OAAO,KAAK;AAAA,YAAM,MAAK;AAAA,YAAa,QAAO,YAAU;AAGzD,oBAAA,SAAU,MAAM;AAChB,oBAAA,cAAc,sBAAsB,OAAO,OAAO;AAEjD,qBAAA,gBAAgB,uBAAsB,EAAE,MAAK,OAAO,MAAK,MAAK,aAAY;AAEjF,qBAAO,OAAO,MAAM;AAClB,qBAAK,aAAa,uBAAuB,OAAO,MAAK,WAAW,CAAC;AAAA,cAAA,CAClE;AAAA,YAEH;AAAA,UACF;AAAA,UACA;AAAA,YACE,OAAM,MAAM,OAAO,KAAK;AAAA,YAAM,MAAK;AAAA,YAAc,QAAO,YAAU;AAG1D,oBAAA,SAAU,MAAM;AAChB,oBAAA,cAAc,sBAAsB,OAAO,OAAO;AAEjD,qBAAA,gBAAgB,uBAAsB,EAAE,MAAK,OAAO,MAAK,MAAK,aAAY;AAEjF,qBAAO,OAAO,MAAM;AAClB,qBAAK,YAAY,uBAAuB,OAAO,MAAK,WAAW,CAAC;AAAA,cAAA,CACjE;AAAA,YAEH;AAAA,UACF;AAAA,QAAA;AAGK,eAAA;AAAA,MACT;AAEO,aAAA;AAAA,IAAA,CACR;AAED,cAAU,MAAM;AAEd,UAAI,CAAC,OAAO,SAAS,CAAC,eAAe,CAAC,GAAE;AAChC,cAAA,IAAI,MAAM,+BAA+B;AAAA,MACjD;AAGA,YAAM,aAAa;AAAA;AAAA,QAGjB,OAAO,gBAAgC,uBAAsB,CAAC,YAAY;AAExE,gBAAM,YAAY;AACZ,gBAAA,OAAO,iBAAiB,SAAS,IAAI,uCAAW,WAAW,KAAK;AAEnE,cAAA,kBAAkB,IAAI,GAAE;AACzB,iBAAK,OAAO,uBAAuB,QAAQ,MAAK,QAAQ,IAAI,CAAC;AAAA,UAC/D;AAEO,iBAAA;AAAA,WACP,uBAAuB;AAAA,MAAA;AAIf,kBAAA,MAAM,YAAY;AAAA,IAAA,CAC/B;;;;;;"}
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { useLexicalComposer } from '../../core/composables'\r\nimport { mergeRegister } from '@lexical/utils'\r\nimport {  COMMAND_PRIORITY_EDITOR,$getNodeByKey,$getSelection,$isNodeSelection, NodeKey } from 'lexical'\r\nimport { onMounted, onUnmounted } from 'vue'\r\nimport { ModuleType,useModule } from \"./composables\"\r\nimport { ModuleBlockNode,$createModuleBlockNode,$isModuleBlockNode } from \"./ModuleBlockNode\"\r\nimport { $isModuleGridNode } from \"../GridPlugin/ModuleGridNode\"\r\nimport { INSERT_MODULE_COMMAND,type ModulePropType } from \"./commands\"\r\nimport { showModuleSelectDialog,findModuleNodeEl } from \"./utils\"\r\nimport { createDefaultFormData } from \"../../../dynamic-form-panel/utils\"\r\nimport {  useElementBlockSelection } from '../../core'\r\nimport { showDynamicFormDialoger } from \"../../../dynamic-form-panel\"\r\n\r\n// 编辑器\r\nconst editor = useLexicalComposer()\r\nconst { findModuleByName } = useModule();\r\n\r\n// 使用元素模块\r\nuseElementBlockSelection(findModuleNodeEl,(nodeKey)=>{\r\n  \r\n  const node = $getNodeByKey(nodeKey as NodeKey)\r\n\r\n  if($isModuleBlockNode(node)){\r\n\r\n    const module = findModuleByName(node.__name);\r\n\r\n    const toobarList = [\r\n      {\r\n        title:`编辑【${module.title}】`,icon:\"Edit\",action:async ()=>{\r\n\r\n          var result = await showDynamicFormDialoger(module.title,module.options,node.__data)\r\n\r\n          editor.update(() => {\r\n            node.setContent(result)\r\n          })\r\n\r\n        } \r\n      },\r\n      {\r\n        title:`插入【${module.title}】之前`,icon:\"BottomLeft\",action:async ()=>{\r\n\r\n          // 打开模块面板\r\n          const result = (await showModuleSelectDialog()) as ModuleType;\r\n          const defaultData = createDefaultFormData(result.options);\r\n          // 插入模块\r\n          editor.dispatchCommand(INSERT_MODULE_COMMAND,{ name:result.name,data:defaultData})\r\n\r\n          editor.update(() => {\r\n            node.insertBefore($createModuleBlockNode(result.name,defaultData))\r\n          })\r\n\r\n        } \r\n      },\r\n      {\r\n        title:`插入【${module.title}】之后`,icon:\"BottomRight\",action:async ()=>{\r\n\r\n          // 打开模块面板\r\n          const result = (await showModuleSelectDialog()) as ModuleType;\r\n          const defaultData = createDefaultFormData(result.options);\r\n          // 插入模块\r\n          editor.dispatchCommand(INSERT_MODULE_COMMAND,{ name:result.name,data:defaultData})\r\n\r\n          editor.update(() => {\r\n            node.insertAfter($createModuleBlockNode(result.name,defaultData))\r\n          })\r\n\r\n        } \r\n      }\r\n    ];\r\n\r\n    return toobarList;\r\n  }\r\n\r\n  return null;\r\n})\r\n\r\nonMounted(() => {\r\n\r\n  if (!editor.hasNodes([ModuleBlockNode])){\r\n    throw new Error('ModuleBlockPlugin: 未注册模块模版节点！')\r\n  }\r\n\r\n  // 注册指令\r\n  const unregister = mergeRegister(\r\n\r\n    // 插入模块\r\n    editor.registerCommand<ModulePropType>(INSERT_MODULE_COMMAND,(payload) => {\r\n\r\n      const selection = $getSelection()\r\n      const node = $isNodeSelection(selection) ? selection?.getNodes()[0] : null;\r\n\r\n      if($isModuleGridNode(node)){\r\n        node.append($createModuleBlockNode(payload.name,payload.data))\r\n      }\r\n     \r\n      return true\r\n    },COMMAND_PRIORITY_EDITOR)\r\n\r\n  );\r\n\r\n  onUnmounted(() => unregister())\r\n})\r\n</script>\r\n\r\n<template></template>\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgBA,UAAM,SAAS;AACT,UAAA,EAAE,qBAAqB;AAGJ,6BAAA,kBAAiB,CAAC,YAAU;AAE7C,YAAA,OAAO,cAAc,OAAkB;AAE1C,UAAA,mBAAmB,IAAI,GAAE;AAEpB,cAAA,SAAS,iBAAiB,KAAK,MAAM;AAE3C,cAAM,aAAa;AAAA,UACjB;AAAA,YACE,OAAM,MAAM,OAAO,KAAK;AAAA,YAAI,MAAK;AAAA,YAAO,QAAO,YAAU;AAEnD,kBAAA,SAAS,MAAM,wBAAwB,OAAO,OAAM,OAAO,SAAQ,KAAK,MAAM;AAElF,qBAAO,OAAO,MAAM;AAClB,qBAAK,WAAW,MAAM;AAAA,cAAA,CACvB;AAAA,YAEH;AAAA,UACF;AAAA,UACA;AAAA,YACE,OAAM,MAAM,OAAO,KAAK;AAAA,YAAM,MAAK;AAAA,YAAa,QAAO,YAAU;AAGzD,oBAAA,SAAU,MAAM;AAChB,oBAAA,cAAc,sBAAsB,OAAO,OAAO;AAEjD,qBAAA,gBAAgB,uBAAsB,EAAE,MAAK,OAAO,MAAK,MAAK,aAAY;AAEjF,qBAAO,OAAO,MAAM;AAClB,qBAAK,aAAa,uBAAuB,OAAO,MAAK,WAAW,CAAC;AAAA,cAAA,CAClE;AAAA,YAEH;AAAA,UACF;AAAA,UACA;AAAA,YACE,OAAM,MAAM,OAAO,KAAK;AAAA,YAAM,MAAK;AAAA,YAAc,QAAO,YAAU;AAG1D,oBAAA,SAAU,MAAM;AAChB,oBAAA,cAAc,sBAAsB,OAAO,OAAO;AAEjD,qBAAA,gBAAgB,uBAAsB,EAAE,MAAK,OAAO,MAAK,MAAK,aAAY;AAEjF,qBAAO,OAAO,MAAM;AAClB,qBAAK,YAAY,uBAAuB,OAAO,MAAK,WAAW,CAAC;AAAA,cAAA,CACjE;AAAA,YAEH;AAAA,UACF;AAAA,QAAA;AAGK,eAAA;AAAA,MACT;AAEO,aAAA;AAAA,IAAA,CACR;AAED,cAAU,MAAM;AAEd,UAAI,CAAC,OAAO,SAAS,CAAC,eAAe,CAAC,GAAE;AAChC,cAAA,IAAI,MAAM,+BAA+B;AAAA,MACjD;AAGA,YAAM,aAAa;AAAA;AAAA,QAGjB,OAAO,gBAAgC,uBAAsB,CAAC,YAAY;AAExE,gBAAM,YAAY;AACZ,gBAAA,OAAO,iBAAiB,SAAS,IAAI,uCAAW,WAAW,KAAK;AAEnE,cAAA,kBAAkB,IAAI,GAAE;AACzB,iBAAK,OAAO,uBAAuB,QAAQ,MAAK,QAAQ,IAAI,CAAC;AAAA,UAC/D;AAEO,iBAAA;AAAA,WACP,uBAAuB;AAAA,MAAA;AAIf,kBAAA,MAAM,YAAY;AAAA,IAAA,CAC/B;;;;;;"}

package/dist/esm/components/basic/doc-editor/plugins/TemplatePlugin/composables.js

@@ -5,8 +5,17 @@ import { Dialoger } from "@maketribe/dm";
 import { ElInput, ElButton } from "element-plus";
 import { Search } from "@element-plus/icons-vue";
 import { INSERT_TEMPLATE_COMMAND } from "./commands.js";
-import { useLexicalComposer, useMounted } from "lexical-vue";
+import "@lexical/text";
 import { mergeRegister, $insertNodeToNearestRoot } from "@lexical/utils";
+import { useMounted } from "../../core/composables/useMounted.js";
+import "@lexical/overflow";
+import "tiny-invariant";
+import "@lexical/history";
+import { useLexicalComposer } from "../../core/composables/useLexicalComposer.js";
+import "@lexical/list";
+import "@lexical/dragon";
+import "@lexical/plain-text";
+import "@lexical/rich-text";
 const Templates = [];
 const registerDocTemplate = (options) => {
   if (Templates.findIndex((item) => item.name == options.name) >= 0) {

package/dist/esm/components/basic/doc-editor/plugins/TemplatePlugin/composables.js.map

@@ -1 +1 @@
-{"version":3,"file":"composables.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/TemplatePlugin/composables.tsx"],"sourcesContent":["import { $getSelection, $isNodeSelection, COMMAND_PRIORITY_EDITOR, ElementNode, LexicalEditor, LexicalNode } from \"lexical\";\r\nimport { $generateNodesFromDOM } from \"@lexical/html\";\r\nimport { ref,Fragment } from \"vue\";\r\nimport { Dialoger } from \"@maketribe/dm\";\r\nimport {  ElButton,ElInput } from \"element-plus\";\r\nimport { Search } from \"@element-plus/icons-vue\";\r\nimport { INSERT_TEMPLATE_COMMAND } from \"./commands\"\r\nimport { useMounted,useLexicalComposer } from \"lexical-vue\";\r\nimport { $insertNodeToNearestRoot, mergeRegister } from \"@lexical/utils\";\r\n\r\n/**\r\n * 模版类型\r\n */\r\nexport type TemplateType = {\r\n  name:string,\r\n  title:string,\r\n  cover:string,\r\n  template:string\r\n}\r\n\r\n/**\r\n * 模版定义\r\n */\r\nexport const Templates:TemplateType[] = [];\r\n\r\n/**\r\n * 注册模版\r\n * @param options \r\n */\r\nexport const registerDocTemplate = (options:TemplateType) => {\r\n\r\n  if(Templates.findIndex(item=>item.name == options.name) >= 0){\r\n    console.warn(`模版【${options.title}】重复注册！`);\r\n  }\r\n  else{\r\n    Templates.push(options);\r\n  }\r\n}\r\n\r\n/**\r\n * 卸载模块\r\n * @param name \r\n */\r\nexport const unRegisterDocTemplate = (name:string) => {\r\n\r\n  for(let i = 0;i < Templates.length; i++){\r\n    if(Templates[i].name == name){\r\n      Templates.splice(i,1);\r\n      break;\r\n    }\r\n  }\r\n}\r\n\r\n// dom 解析器\r\nconst parser = new DOMParser();\r\n\r\n/**\r\n * \r\n * @param name \r\n * @returns \r\n */\r\nexport const useTemplate = () => {\r\n\r\n  // 编辑器\r\n  const editor = useLexicalComposer()\r\n\r\n  const findTemplateNodesByName = (name:string):LexicalNode[] => {\r\n\r\n    const template = Templates.find(item=>item.name == name);\r\n\r\n    if(template != null){\r\n      return $generateNodesFromDOM(editor,parser.parseFromString(template.template.trim(),\"text/html\"));\r\n    }\r\n\r\n    throw new Error(\"未知的模版：【\" + name + \"】\");\r\n  }\r\n\r\n  // 编辑器挂载\r\n  useMounted(()=>{\r\n\r\n    return mergeRegister(\r\n      // 插入模版\r\n      editor.registerCommand<string>(INSERT_TEMPLATE_COMMAND,(name) => {\r\n\r\n        const selection = $getSelection()\r\n        const elementNode = $isNodeSelection(selection) ? selection?.getNodes()[0] as ElementNode : null;\r\n        const templateNodes = findTemplateNodesByName(name)\r\n\r\n        if (elementNode) {\r\n          templateNodes.forEach(node=> elementNode.append(node))\r\n        }\r\n        else{\r\n          templateNodes.forEach(node=> $insertNodeToNearestRoot(node))\r\n        }\r\n        return true\r\n      },COMMAND_PRIORITY_EDITOR)\r\n    )\r\n  })\r\n\r\n\r\n}\r\n\r\n\r\n/**\r\n * 显示模块模版选择\r\n * @returns \r\n */\r\nexport const showTemplateSelectDialog = function():Promise<string> {\r\n\r\n  return new Promise<string>((resolve:any)=> {\r\n\r\n    const selectOption = ref<TemplateType|null>(null);\r\n    const searchInputValue = ref(\"\");\r\n\r\n    // 取消编辑\r\n    const handleCancelClick = () => {\r\n      dialogInstance.destroy();\r\n    };\r\n\r\n    // 确认编辑\r\n    const handleConfirmClick = () => {\r\n      dialogInstance.destroy();\r\n      resolve(selectOption.value?.name);\r\n    };\r\n\r\n    // 点击块\r\n    const clickHandle = (item:any)=>{\r\n      selectOption.value = item;\r\n    }\r\n\r\n    const dialogInstance = Dialoger.customRender({\r\n      title: \"模版选择\",\r\n      class: \"mk-doc-editor__module-template_dialog\",\r\n      width: \"700px\",\r\n      onClose: () => {\r\n        dialogInstance.destroy();\r\n      },\r\n      body: () => {\r\n\r\n        // 循环体\r\n        const templateListComponent = Templates.filter(item=>{\r\n          if(searchInputValue.value){\r\n            return item.name.indexOf(searchInputValue.value) >= 0 || item.title.indexOf(searchInputValue.value) >= 0\r\n          }\r\n          else{\r\n            return true;\r\n          }\r\n        }).map(item=>{\r\n\r\n          return <div \r\n          class={`mk-doc-editor__module-template_dialog_list-item ${(item.cover ? 'cover':'')} ${(selectOption.value?.name == item.name ? 'active':'')}`} \r\n          onClick={()=>clickHandle(item)}>\r\n            {item.cover ?  <img src={item.cover}  /> :null}\r\n            <div class=\"mk-doc-editor__module-template_dialog_list-item_title\">{item.title}</div>\r\n          </div>\r\n        })\r\n\r\n        return <div class=\"mk-doc-editor__module-template_dialog_warp\">\r\n          <ElInput v-model={searchInputValue.value} prefix-icon={Search} clearable={true} />\r\n          <div class=\"mk-doc-editor__module-template_dialog_list-body\">\r\n            {templateListComponent}\r\n          </div>\r\n        </div>\r\n      },\r\n      footer: () => {\r\n        return <Fragment>\r\n          <ElButton onClick={handleCancelClick}>取消</ElButton>\r\n          <ElButton type=\"primary\" onClick={handleConfirmClick} disabled={!selectOption.value}>\r\n            确定\r\n          </ElButton>\r\n      </Fragment>\r\n      },\r\n    });\r\n  });\r\n}\r\n"],"names":["Templates","registerDocTemplate","options","findIndex","item","name","console","warn","title","push","parser","DOMParser","useTemplate","editor","useLexicalComposer","findTemplateNodesByName","template","find","$generateNodesFromDOM","parseFromString","trim","Error","useMounted","mergeRegister","registerCommand","INSERT_TEMPLATE_COMMAND","selection","$getSelection","elementNode","$isNodeSelection","getNodes","templateNodes","forEach","node","append","$insertNodeToNearestRoot","COMMAND_PRIORITY_EDITOR","showTemplateSelectDialog","Promise","resolve","selectOption","ref","searchInputValue","handleCancelClick","dialogInstance","destroy","handleConfirmClick","value","clickHandle","Dialoger","customRender","class","width","onClose","body","templateListComponent","filter","indexOf","map","_createVNode","cover","onClick","ElInput","$event","Search","footer","_Fragment","ElButton","default","_createTextVNode"],"mappings":"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"}
+{"version":3,"file":"composables.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/TemplatePlugin/composables.tsx"],"sourcesContent":["import { $getSelection, $isNodeSelection, COMMAND_PRIORITY_EDITOR, ElementNode, LexicalEditor, LexicalNode } from \"lexical\";\r\nimport { $generateNodesFromDOM } from \"@lexical/html\";\r\nimport { ref,Fragment } from \"vue\";\r\nimport { Dialoger } from \"@maketribe/dm\";\r\nimport {  ElButton,ElInput } from \"element-plus\";\r\nimport { Search } from \"@element-plus/icons-vue\";\r\nimport { INSERT_TEMPLATE_COMMAND } from \"./commands\"\r\nimport { useMounted,useLexicalComposer } from \"../../core/composables\";\r\nimport { $insertNodeToNearestRoot, mergeRegister } from \"@lexical/utils\";\r\n\r\n/**\r\n * 模版类型\r\n */\r\nexport type TemplateType = {\r\n  name:string,\r\n  title:string,\r\n  cover:string,\r\n  template:string,\r\n  editorCss?:string|null|undefined,\r\n}\r\n\r\n/**\r\n * 模版定义\r\n */\r\nexport const Templates:TemplateType[] = [];\r\n\r\n/**\r\n * 注册模版\r\n * @param options \r\n */\r\nexport const registerDocTemplate = (options:TemplateType) => {\r\n\r\n  if(Templates.findIndex(item=>item.name == options.name) >= 0){\r\n    console.warn(`模版【${options.title}】重复注册！`);\r\n  }\r\n  else{\r\n    Templates.push(options);\r\n  }\r\n}\r\n\r\n/**\r\n * 卸载模块\r\n * @param name \r\n */\r\nexport const unRegisterDocTemplate = (name:string) => {\r\n\r\n  for(let i = 0;i < Templates.length; i++){\r\n    if(Templates[i].name == name){\r\n      Templates.splice(i,1);\r\n      break;\r\n    }\r\n  }\r\n}\r\n\r\n// dom 解析器\r\nconst parser = new DOMParser();\r\n\r\n/**\r\n * \r\n * @param name \r\n * @returns \r\n */\r\nexport const useTemplate = () => {\r\n\r\n  // 编辑器\r\n  const editor = useLexicalComposer()\r\n\r\n  const findTemplateNodesByName = (name:string):LexicalNode[] => {\r\n\r\n    const template = Templates.find(item=>item.name == name);\r\n\r\n    if(template != null){\r\n      return $generateNodesFromDOM(editor,parser.parseFromString(template.template.trim(),\"text/html\"));\r\n    }\r\n\r\n    throw new Error(\"未知的模版：【\" + name + \"】\");\r\n  }\r\n\r\n  // 编辑器挂载\r\n  useMounted(()=>{\r\n\r\n    return mergeRegister(\r\n      // 插入模版\r\n      editor.registerCommand<string>(INSERT_TEMPLATE_COMMAND,(name) => {\r\n\r\n        const selection = $getSelection()\r\n        const elementNode = $isNodeSelection(selection) ? selection?.getNodes()[0] as ElementNode : null;\r\n        const templateNodes = findTemplateNodesByName(name)\r\n\r\n        if (elementNode) {\r\n          templateNodes.forEach(node=> elementNode.append(node))\r\n        }\r\n        else{\r\n          templateNodes.forEach(node=> $insertNodeToNearestRoot(node))\r\n        }\r\n        return true\r\n      },COMMAND_PRIORITY_EDITOR)\r\n    )\r\n  })\r\n\r\n\r\n}\r\n\r\n\r\n/**\r\n * 显示模块模版选择\r\n * @returns \r\n */\r\nexport const showTemplateSelectDialog = function():Promise<string> {\r\n\r\n  return new Promise<string>((resolve:any)=> {\r\n\r\n    const selectOption = ref<TemplateType|null>(null);\r\n    const searchInputValue = ref(\"\");\r\n\r\n    // 取消编辑\r\n    const handleCancelClick = () => {\r\n      dialogInstance.destroy();\r\n    };\r\n\r\n    // 确认编辑\r\n    const handleConfirmClick = () => {\r\n      dialogInstance.destroy();\r\n      resolve(selectOption.value?.name);\r\n    };\r\n\r\n    // 点击块\r\n    const clickHandle = (item:any)=>{\r\n      selectOption.value = item;\r\n    }\r\n\r\n    const dialogInstance = Dialoger.customRender({\r\n      title: \"模版选择\",\r\n      class: \"mk-doc-editor__module-template_dialog\",\r\n      width: \"700px\",\r\n      onClose: () => {\r\n        dialogInstance.destroy();\r\n      },\r\n      body: () => {\r\n\r\n        // 循环体\r\n        const templateListComponent = Templates.filter(item=>{\r\n          if(searchInputValue.value){\r\n            return item.name.indexOf(searchInputValue.value) >= 0 || item.title.indexOf(searchInputValue.value) >= 0\r\n          }\r\n          else{\r\n            return true;\r\n          }\r\n        }).map(item=>{\r\n\r\n          return <div \r\n          class={`mk-doc-editor__module-template_dialog_list-item ${(item.cover ? 'cover':'')} ${(selectOption.value?.name == item.name ? 'active':'')}`} \r\n          onClick={()=>clickHandle(item)}>\r\n            {item.cover ?  <img src={item.cover}  /> :null}\r\n            <div class=\"mk-doc-editor__module-template_dialog_list-item_title\">{item.title}</div>\r\n          </div>\r\n        })\r\n\r\n        return <div class=\"mk-doc-editor__module-template_dialog_warp\">\r\n          <ElInput v-model={searchInputValue.value} prefix-icon={Search} clearable={true} />\r\n          <div class=\"mk-doc-editor__module-template_dialog_list-body\">\r\n            {templateListComponent}\r\n          </div>\r\n        </div>\r\n      },\r\n      footer: () => {\r\n        return <Fragment>\r\n          <ElButton onClick={handleCancelClick}>取消</ElButton>\r\n          <ElButton type=\"primary\" onClick={handleConfirmClick} disabled={!selectOption.value}>\r\n            确定\r\n          </ElButton>\r\n      </Fragment>\r\n      },\r\n    });\r\n  });\r\n}\r\n"],"names":["Templates","registerDocTemplate","options","findIndex","item","name","console","warn","title","push","parser","DOMParser","useTemplate","editor","useLexicalComposer","findTemplateNodesByName","template","find","$generateNodesFromDOM","parseFromString","trim","Error","useMounted","mergeRegister","registerCommand","INSERT_TEMPLATE_COMMAND","selection","$getSelection","elementNode","$isNodeSelection","getNodes","templateNodes","forEach","node","append","$insertNodeToNearestRoot","COMMAND_PRIORITY_EDITOR","showTemplateSelectDialog","Promise","resolve","selectOption","ref","searchInputValue","handleCancelClick","dialogInstance","destroy","handleConfirmClick","value","clickHandle","Dialoger","customRender","class","width","onClose","body","templateListComponent","filter","indexOf","map","_createVNode","cover","onClick","ElInput","$event","Search","footer","_Fragment","ElButton","default","_createTextVNode"],"mappings":"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"}

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

@@ -1,8 +1,18 @@
 import { defineComponent } from "vue";
-import { useLexicalComposer } from "lexical-vue";
+import "@lexical/text";
+import "@lexical/utils";
+import "@lexical/overflow";
+import "lexical";
+import "tiny-invariant";
+import "@lexical/history";
+import { useLexicalComposer } from "../../core/composables/useLexicalComposer.js";
+import "@lexical/list";
+import "@lexical/dragon";
+import "@lexical/plain-text";
+import "@lexical/rich-text";
+import { registerDocEditorToolbarExtend } from "../../core/index.js";
 import { useTemplate, showTemplateSelectDialog } from "./composables.js";
 import { INSERT_TEMPLATE_COMMAND } from "./commands.js";
-import { registerDocEditorToolbarExtend } from "../../core/index.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   setup(__props) {

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

@@ -1 +1 @@
-{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/TemplatePlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { $insertNodeToNearestRoot,mergeRegister,mediaFileReader,isMimeType } from '@lexical/utils'\r\nimport { \r\n  COMMAND_PRIORITY_EDITOR,COMMAND_PRIORITY_LOW,$isParagraphNode,\r\n  $getSelection,$createParagraphNode,$isNodeSelection, $getNodeByKey,\r\nElementNode\r\n} from 'lexical'\r\nimport { DRAG_DROP_PASTE } from '@lexical/rich-text'\r\nimport { useLexicalComposer,useMounted } from 'lexical-vue'\r\nimport { onMounted,  } from 'vue'\r\nimport { showTemplateSelectDialog,useTemplate } from \"./composables\"\r\nimport { INSERT_TEMPLATE_COMMAND } from \"./commands\"\r\nimport { $isImageTextGridNode } from '../GridPlugin'\r\nimport { registerDocEditorToolbarExtend,type ToolbarExtendPlugin } from \"../../core\"\r\nimport {  useElementBlockSelection } from '../../core'\r\nimport { ElLoading } from 'element-plus'\r\n\r\n\r\n  // 编辑器\r\n  const editor = useLexicalComposer()\r\n\r\n  // 注册到工具条\r\n  registerDocEditorToolbarExtend({\r\n    icon:\"richtext\",\r\n    text:\"模版\",\r\n    action:async ()=>{\r\n      editor.dispatchCommand(INSERT_TEMPLATE_COMMAND,await showTemplateSelectDialog())\r\n    },\r\n    sort:90\r\n  } as ToolbarExtendPlugin)\r\n\r\n  useTemplate();\r\n\r\n</script>\r\n\r\n<template></template>\r\n"],"names":[],"mappings":";;;;;;;;AAmBE,UAAM,SAAS;AAGgB,mCAAA;AAAA,MAC7B,MAAK;AAAA,MACL,MAAK;AAAA,MACL,QAAO,YAAU;AACf,eAAO,gBAAgB,yBAAwB,MAAM,yBAA0B,CAAA;AAAA,MACjF;AAAA,MACA,MAAK;AAAA,IAAA,CACiB;AAEZ;;;;;;"}
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/TemplatePlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { useLexicalComposer } from '../../core/composables'\r\nimport { registerDocEditorToolbarExtend,type ToolbarExtendPlugin } from \"../../core\"\r\nimport { showTemplateSelectDialog,useTemplate } from \"./composables\"\r\nimport { INSERT_TEMPLATE_COMMAND } from \"./commands\"\r\n\r\n\r\n  // 编辑器\r\n  const editor = useLexicalComposer()\r\n\r\n  // 注册到工具条\r\n  registerDocEditorToolbarExtend({\r\n    icon:\"richtext\",\r\n    text:\"模版\",\r\n    action:async ()=>{\r\n      editor.dispatchCommand(INSERT_TEMPLATE_COMMAND,await showTemplateSelectDialog())\r\n    },\r\n    sort:90\r\n  } as ToolbarExtendPlugin)\r\n\r\n  useTemplate();\r\n\r\n</script>\r\n\r\n<template></template>\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AASE,UAAM,SAAS;AAGgB,mCAAA;AAAA,MAC7B,MAAK;AAAA,MACL,MAAK;AAAA,MACL,QAAO,YAAU;AACf,eAAO,gBAAgB,yBAAwB,MAAM,yBAA0B,CAAA;AAAA,MACjF;AAAA,MACA,MAAK;AAAA,IAAA,CACiB;AAEZ;;;;;;"}

package/dist/esm/components/basic/doc-editor/plugins/ToolbarPlugin/ContentStyleTool.vue.js

@@ -4,7 +4,13 @@ import { $patchStyleText, $setBlocksType } from "@lexical/selection";
 import { $isHeadingNode, $createHeadingNode } from "@lexical/rich-text";
 import { INSERT_UNORDERED_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_CHECK_LIST_COMMAND } from "@lexical/list";
 import { $findMatchingParent } from "@lexical/utils";
-import { useLexicalComposer } from "lexical-vue";
+import "@lexical/text";
+import "@lexical/overflow";
+import "tiny-invariant";
+import "@lexical/history";
+import { useLexicalComposer } from "../../core/composables/useLexicalComposer.js";
+import "@lexical/dragon";
+import "@lexical/plain-text";
 const _hoisted_1 = {
   key: 0,
   class: "mk-doc-editor-toolbar-content-style-item text"

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

@@ -1 +1 @@
-{"version":3,"file":"ContentStyleTool.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/ContentStyleTool.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {\r\n  $createParagraphNode,\r\n  $getSelection,\r\n  $isRangeSelection,\r\n  $isRootOrShadowRoot\r\n} from 'lexical'\r\nimport { $patchStyleText,$setBlocksType } from '@lexical/selection'\r\nimport type { HeadingTagType } from '@lexical/rich-text'\r\nimport { $createHeadingNode,$isHeadingNode } from '@lexical/rich-text'\r\nimport { \r\n  INSERT_CHECK_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, \r\n} from '@lexical/list'\r\nimport { $findMatchingParent } from '@lexical/utils'\r\nimport {  useLexicalComposer } from 'lexical-vue'\r\nimport { onMounted, onUnmounted, ref } from 'vue'\r\n\r\nconst editor = useLexicalComposer()\r\n\r\n// 内容类型\r\nconst CONTENT_TYPE_DEFINES = [\r\n  {value:\"paragraph\",label:\"正文\"},\r\n  {value:\"bullet\",label:\"无序列表\"},\r\n  {value:\"number\",label:\"有序列表\"},\r\n  {value:\"h1\",label:\"标题 1\"},\r\n  {value:\"h2\",label:\"标题 2\"},\r\n  {value:\"h3\",label:\"标题 3\"}\r\n];\r\n\r\nconst disabled = ref(false)\r\n\r\nconst contentType = ref<any>(CONTENT_TYPE_DEFINES[0]);\r\n\r\n\r\n\r\n// 更新状态栏\r\nfunction updateToolbar() {\r\n\r\n  const selection = $getSelection()\r\n\r\n  if ($isRangeSelection(selection)) {\r\n\r\n    const anchorNode = selection.anchor.getNode()\r\n\r\n    let element\r\n        = anchorNode.getKey() === 'root'\r\n          ? anchorNode\r\n          : $findMatchingParent(anchorNode, (e) => {\r\n            const parent = e.getParent()\r\n            return parent !== null && $isRootOrShadowRoot(parent)\r\n          })\r\n\r\n    if (element === null){ element = anchorNode.getTopLevelElementOrThrow() }\r\n      \r\n    const elementKey = element.getKey()\r\n    const elementDOM = editor.getElementByKey(elementKey)\r\n\r\n    if (elementDOM !== null) {\r\n      const type = $isHeadingNode(element) ? element.getTag() : element.getType();\r\n      contentType.value = CONTENT_TYPE_DEFINES.find(item=>item.value == type) || CONTENT_TYPE_DEFINES[0]\r\n    }\r\n    disabled.value = false;\r\n  }\r\n  else{\r\n\r\n    disabled.value = true;\r\n  }\r\n}\r\n\r\n// 设置内容类型\r\nconst setContentType = (type:any)=>{\r\n\r\n  contentType.value = type;\r\n   \r\n  editor.update(() => {\r\n\r\n      const selection = $getSelection()\r\n   \r\n      if ($isRangeSelection(selection)){\r\n\r\n        // 清空字体大小\r\n        $patchStyleText(selection, { [\"font-size\"]:\"\" })\r\n   \r\n        if(type.value == \"paragraph\"){\r\n          $setBlocksType(selection, () => $createParagraphNode())\r\n        }\r\n        else if(type.value == \"bullet\"){\r\n          editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)\r\n        }\r\n        else if(type.value == \"bullet\"){\r\n          editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined)\r\n        }\r\n        else if(type.value == \"check-list\"){\r\n          editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined)\r\n        }\r\n        else{\r\n          $setBlocksType(selection, () => {\r\n            return $createHeadingNode(type.value as  HeadingTagType)\r\n          })\r\n        }\r\n      }\r\n  })\r\n}\r\n\r\n// 挂载的时候\r\nonMounted(() => {\r\n\r\nconst unregisterMergeListener = editor.registerUpdateListener(({ editorState }) => {\r\n  editorState.read(() => updateToolbar())\r\n})\r\n\r\n\r\nonUnmounted(() => unregisterMergeListener());\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n  <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n    <el-button text :disabled=\"disabled\">\r\n      {{contentType.label}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n    </el-button>\r\n    <template #dropdown>\r\n      <el-dropdown-menu>\r\n        <el-dropdown-item :class=\"{active:contentType.label == item.label}\" v-for=\"item in CONTENT_TYPE_DEFINES\" :value=\"item.value\" @click=\"setContentType(item)\">\r\n          <template v-if=\"item.value.indexOf('h')!=0 \">\r\n            <div class=\"mk-doc-editor-toolbar-content-style-item text\">{{item.label}}</div>\r\n          </template>\r\n          <template v-else>\r\n           <div class=\"mk-doc-editor-toolbar-content-style-item\" v-html=\"`<${item.value}>${item.label}</${item.value}>`\"></div>\r\n          </template>\r\n        </el-dropdown-item>\r\n      </el-dropdown-menu>\r\n    </template>\r\n  </el-dropdown>\r\n</template>\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAiBA,UAAM,SAAS;AAGf,UAAM,uBAAuB;AAAA,MAC3B,EAAC,OAAM,aAAY,OAAM,KAAI;AAAA,MAC7B,EAAC,OAAM,UAAS,OAAM,OAAM;AAAA,MAC5B,EAAC,OAAM,UAAS,OAAM,OAAM;AAAA,MAC5B,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,MACxB,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,MACxB,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,IAAA;AAGpB,UAAA,WAAW,IAAI,KAAK;AAE1B,UAAM,cAAc,IAAS,qBAAqB,CAAC,CAAC;AAKpD,aAAS,gBAAgB;AAEvB,YAAM,YAAY;AAEd,UAAA,kBAAkB,SAAS,GAAG;AAE1B,cAAA,aAAa,UAAU,OAAO,QAAQ;AAExC,YAAA,UACE,WAAW,aAAa,SACtB,aACA,oBAAoB,YAAY,CAAC,MAAM;AACjC,gBAAA,SAAS,EAAE;AACV,iBAAA,WAAW,QAAQ,oBAAoB,MAAM;AAAA,QAAA,CACrD;AAEP,YAAI,YAAY,MAAK;AAAE,oBAAU,WAAW;QAA4B;AAElE,cAAA,aAAa,QAAQ;AACrB,cAAA,aAAa,OAAO,gBAAgB,UAAU;AAEpD,YAAI,eAAe,MAAM;AACjB,gBAAA,OAAO,eAAe,OAAO,IAAI,QAAQ,OAAO,IAAI,QAAQ;AACtD,sBAAA,QAAQ,qBAAqB,KAAK,CAAA,SAAM,KAAK,SAAS,IAAI,KAAK,qBAAqB,CAAC;AAAA,QACnG;AACA,iBAAS,QAAQ;AAAA,MAAA,OAEf;AAEF,iBAAS,QAAQ;AAAA,MACnB;AAAA,IACF;AAGM,UAAA,iBAAiB,CAAC,SAAW;AAEjC,kBAAY,QAAQ;AAEpB,aAAO,OAAO,MAAM;AAEhB,cAAM,YAAY;AAEd,YAAA,kBAAkB,SAAS,GAAE;AAG/B,0BAAgB,WAAW,EAAE,CAAC,WAAW,GAAE,GAAI,CAAA;AAE5C,cAAA,KAAK,SAAS,aAAY;AACZ,2BAAA,WAAW,MAAM,qBAAA,CAAsB;AAAA,UAAA,WAEhD,KAAK,SAAS,UAAS;AACtB,mBAAA,gBAAgB,+BAA+B,MAAS;AAAA,UAAA,WAEzD,KAAK,SAAS,UAAS;AACtB,mBAAA,gBAAgB,6BAA6B,MAAS;AAAA,UAAA,WAEvD,KAAK,SAAS,cAAa;AAC1B,mBAAA,gBAAgB,2BAA2B,MAAS;AAAA,UAAA,OAEzD;AACF,2BAAe,WAAW,MAAM;AACvB,qBAAA,mBAAmB,KAAK,KAAwB;AAAA,YAAA,CACxD;AAAA,UACH;AAAA,QACF;AAAA,MAAA,CACH;AAAA,IAAA;AAIH,cAAU,MAAM;AAEhB,YAAM,0BAA0B,OAAO,uBAAuB,CAAC,EAAE,kBAAkB;AACrE,oBAAA,KAAK,MAAM,cAAA,CAAe;AAAA,MAAA,CACvC;AAGW,kBAAA,MAAM,yBAAyB;AAAA,IAAA,CAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ContentStyleTool.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/ContentStyleTool.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {\r\n  $createParagraphNode,\r\n  $getSelection,\r\n  $isRangeSelection,\r\n  $isRootOrShadowRoot\r\n} from 'lexical'\r\nimport { $patchStyleText,$setBlocksType } from '@lexical/selection'\r\nimport type { HeadingTagType } from '@lexical/rich-text'\r\nimport { $createHeadingNode,$isHeadingNode } from '@lexical/rich-text'\r\nimport { \r\n  INSERT_CHECK_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, \r\n} from '@lexical/list'\r\nimport { $findMatchingParent } from '@lexical/utils'\r\nimport {  useLexicalComposer } from '../../core/composables'\r\nimport { onMounted, onUnmounted, ref } from 'vue'\r\n\r\nconst editor = useLexicalComposer()\r\n\r\n// 内容类型\r\nconst CONTENT_TYPE_DEFINES = [\r\n  {value:\"paragraph\",label:\"正文\"},\r\n  {value:\"bullet\",label:\"无序列表\"},\r\n  {value:\"number\",label:\"有序列表\"},\r\n  {value:\"h1\",label:\"标题 1\"},\r\n  {value:\"h2\",label:\"标题 2\"},\r\n  {value:\"h3\",label:\"标题 3\"}\r\n];\r\n\r\nconst disabled = ref(false)\r\n\r\nconst contentType = ref<any>(CONTENT_TYPE_DEFINES[0]);\r\n\r\n\r\n\r\n// 更新状态栏\r\nfunction updateToolbar() {\r\n\r\n  const selection = $getSelection()\r\n\r\n  if ($isRangeSelection(selection)) {\r\n\r\n    const anchorNode = selection.anchor.getNode()\r\n\r\n    let element\r\n        = anchorNode.getKey() === 'root'\r\n          ? anchorNode\r\n          : $findMatchingParent(anchorNode, (e) => {\r\n            const parent = e.getParent()\r\n            return parent !== null && $isRootOrShadowRoot(parent)\r\n          })\r\n\r\n    if (element === null){ element = anchorNode.getTopLevelElementOrThrow() }\r\n      \r\n    const elementKey = element.getKey()\r\n    const elementDOM = editor.getElementByKey(elementKey)\r\n\r\n    if (elementDOM !== null) {\r\n      const type = $isHeadingNode(element) ? element.getTag() : element.getType();\r\n      contentType.value = CONTENT_TYPE_DEFINES.find(item=>item.value == type) || CONTENT_TYPE_DEFINES[0]\r\n    }\r\n    disabled.value = false;\r\n  }\r\n  else{\r\n\r\n    disabled.value = true;\r\n  }\r\n}\r\n\r\n// 设置内容类型\r\nconst setContentType = (type:any)=>{\r\n\r\n  contentType.value = type;\r\n   \r\n  editor.update(() => {\r\n\r\n      const selection = $getSelection()\r\n   \r\n      if ($isRangeSelection(selection)){\r\n\r\n        // 清空字体大小\r\n        $patchStyleText(selection, { [\"font-size\"]:\"\" })\r\n   \r\n        if(type.value == \"paragraph\"){\r\n          $setBlocksType(selection, () => $createParagraphNode())\r\n        }\r\n        else if(type.value == \"bullet\"){\r\n          editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)\r\n        }\r\n        else if(type.value == \"bullet\"){\r\n          editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined)\r\n        }\r\n        else if(type.value == \"check-list\"){\r\n          editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined)\r\n        }\r\n        else{\r\n          $setBlocksType(selection, () => {\r\n            return $createHeadingNode(type.value as  HeadingTagType)\r\n          })\r\n        }\r\n      }\r\n  })\r\n}\r\n\r\n// 挂载的时候\r\nonMounted(() => {\r\n\r\nconst unregisterMergeListener = editor.registerUpdateListener(({ editorState }) => {\r\n  editorState.read(() => updateToolbar())\r\n})\r\n\r\n\r\nonUnmounted(() => unregisterMergeListener());\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n  <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n    <el-button text :disabled=\"disabled\">\r\n      {{contentType.label}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n    </el-button>\r\n    <template #dropdown>\r\n      <el-dropdown-menu>\r\n        <el-dropdown-item :class=\"{active:contentType.label == item.label}\" v-for=\"item in CONTENT_TYPE_DEFINES\" :value=\"item.value\" @click=\"setContentType(item)\">\r\n          <template v-if=\"item.value.indexOf('h')!=0 \">\r\n            <div class=\"mk-doc-editor-toolbar-content-style-item text\">{{item.label}}</div>\r\n          </template>\r\n          <template v-else>\r\n           <div class=\"mk-doc-editor-toolbar-content-style-item\" v-html=\"`<${item.value}>${item.label}</${item.value}>`\"></div>\r\n          </template>\r\n        </el-dropdown-item>\r\n      </el-dropdown-menu>\r\n    </template>\r\n  </el-dropdown>\r\n</template>\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAiBA,UAAM,SAAS;AAGf,UAAM,uBAAuB;AAAA,MAC3B,EAAC,OAAM,aAAY,OAAM,KAAI;AAAA,MAC7B,EAAC,OAAM,UAAS,OAAM,OAAM;AAAA,MAC5B,EAAC,OAAM,UAAS,OAAM,OAAM;AAAA,MAC5B,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,MACxB,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,MACxB,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,IAAA;AAGpB,UAAA,WAAW,IAAI,KAAK;AAE1B,UAAM,cAAc,IAAS,qBAAqB,CAAC,CAAC;AAKpD,aAAS,gBAAgB;AAEvB,YAAM,YAAY;AAEd,UAAA,kBAAkB,SAAS,GAAG;AAE1B,cAAA,aAAa,UAAU,OAAO,QAAQ;AAExC,YAAA,UACE,WAAW,aAAa,SACtB,aACA,oBAAoB,YAAY,CAAC,MAAM;AACjC,gBAAA,SAAS,EAAE;AACV,iBAAA,WAAW,QAAQ,oBAAoB,MAAM;AAAA,QAAA,CACrD;AAEP,YAAI,YAAY,MAAK;AAAE,oBAAU,WAAW;QAA4B;AAElE,cAAA,aAAa,QAAQ;AACrB,cAAA,aAAa,OAAO,gBAAgB,UAAU;AAEpD,YAAI,eAAe,MAAM;AACjB,gBAAA,OAAO,eAAe,OAAO,IAAI,QAAQ,OAAO,IAAI,QAAQ;AACtD,sBAAA,QAAQ,qBAAqB,KAAK,CAAA,SAAM,KAAK,SAAS,IAAI,KAAK,qBAAqB,CAAC;AAAA,QACnG;AACA,iBAAS,QAAQ;AAAA,MAAA,OAEf;AAEF,iBAAS,QAAQ;AAAA,MACnB;AAAA,IACF;AAGM,UAAA,iBAAiB,CAAC,SAAW;AAEjC,kBAAY,QAAQ;AAEpB,aAAO,OAAO,MAAM;AAEhB,cAAM,YAAY;AAEd,YAAA,kBAAkB,SAAS,GAAE;AAG/B,0BAAgB,WAAW,EAAE,CAAC,WAAW,GAAE,GAAI,CAAA;AAE5C,cAAA,KAAK,SAAS,aAAY;AACZ,2BAAA,WAAW,MAAM,qBAAA,CAAsB;AAAA,UAAA,WAEhD,KAAK,SAAS,UAAS;AACtB,mBAAA,gBAAgB,+BAA+B,MAAS;AAAA,UAAA,WAEzD,KAAK,SAAS,UAAS;AACtB,mBAAA,gBAAgB,6BAA6B,MAAS;AAAA,UAAA,WAEvD,KAAK,SAAS,cAAa;AAC1B,mBAAA,gBAAgB,2BAA2B,MAAS;AAAA,UAAA,OAEzD;AACF,2BAAe,WAAW,MAAM;AACvB,qBAAA,mBAAmB,KAAK,KAAwB;AAAA,YAAA,CACxD;AAAA,UACH;AAAA,QACF;AAAA,MAAA,CACH;AAAA,IAAA;AAIH,cAAU,MAAM;AAEhB,YAAM,0BAA0B,OAAO,uBAAuB,CAAC,EAAE,kBAAkB;AACrE,oBAAA,KAAK,MAAM,cAAA,CAAe;AAAA,MAAA,CACvC;AAGW,kBAAA,MAAM,yBAAyB;AAAA,IAAA,CAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/basic/doc-editor/plugins/ToolbarPlugin/FontStyleTool.vue.js

@@ -5,7 +5,15 @@ import { TOGGLE_LINK_COMMAND, $isLinkNode } from "@lexical/link";
 import { sanitizeUrl } from "../../utils/url.js";
 import { getSelectedNode } from "../../utils/getSelectedNode.js";
 import { mergeRegister, $findMatchingParent } from "@lexical/utils";
-import { useLexicalComposer } from "lexical-vue";
+import "@lexical/text";
+import "@lexical/overflow";
+import "tiny-invariant";
+import "@lexical/history";
+import { useLexicalComposer } from "../../core/composables/useLexicalComposer.js";
+import "@lexical/list";
+import "@lexical/dragon";
+import "@lexical/plain-text";
+import "@lexical/rich-text";
 import { FONT_FAMILY_OPTIONS, FONT_SIZE_OPTIONS, ROOT_FONT_SIZE } from "./FontStyleDefines.js";
 import { ShowLinkEditPanel } from "../AutoLinkPlugin/LinkEditDialog.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({

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

@@ -1 +1 @@
-{"version":3,"file":"FontStyleTool.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/FontStyleTool.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {\r\n  $getSelection,\r\n  $isRangeSelection,\r\n  $isRootOrShadowRoot,\r\n  $isParagraphNode,\r\n  FORMAT_TEXT_COMMAND,\r\n  FORMAT_ELEMENT_COMMAND,\r\n  type ElementFormatType,\r\n} from 'lexical'\r\nimport {\r\n  $getSelectionStyleValueForProperty,\r\n  $patchStyleText,\r\n} from '@lexical/selection'\r\n\r\nimport { $isLinkNode, TOGGLE_LINK_COMMAND,LinkNode } from '@lexical/link'\r\nimport { sanitizeUrl } from '../../utils/url'\r\nimport { getSelectedNode } from '../../utils/getSelectedNode'\r\nimport { $findMatchingParent,mergeRegister } from '@lexical/utils'\r\nimport {  useLexicalComposer } from 'lexical-vue'\r\nimport { onMounted, onUnmounted, ref,watch } from 'vue'\r\nimport { FONT_SIZE_OPTIONS,ROOT_FONT_SIZE,FONT_FAMILY_OPTIONS } from \"./FontStyleDefines\"\r\nimport { ShowLinkEditPanel } from \"../AutoLinkPlugin/LinkEditDialog\";\r\n\r\nconst editor = useLexicalComposer()\r\nconst fontSize = ref('14px')\r\nconst fontColor = ref<string>('#000')\r\nconst bgColor = ref<string>('#fff')\r\nconst fontFamily = ref<any>(FONT_FAMILY_OPTIONS[0])\r\nconst isBold = ref(false)\r\nconst isItalic = ref(false)\r\nconst isUnderline = ref(false)\r\nconst isStrikethrough = ref(false)\r\n\r\nconst isSubscript = ref(false)\r\nconst isSuperscript = ref(false)\r\n\r\n// 对齐方式\r\nconst alignList = ref<ElementFormatType[]>([\"left\",\"center\",\"right\",\"justify\"])\r\nconst alignValue = ref(alignList.value[0])\r\nconst disabled = ref(false)\r\nconst isLink = ref(false)\r\nconst linkValue = ref(\"\");\r\n\r\nasync function insertLink() {\r\n\r\n  const result:any = await ShowLinkEditPanel(linkValue.value);\r\n\r\n  if(result.trim()){\r\n    editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(result))\r\n  }\r\n  else{\r\n    editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)\r\n  }\r\n}\r\n\r\n// 更新状态栏\r\nfunction updateToolbar() {\r\n\r\n  const selection = $getSelection()\r\n\r\n  if ($isRangeSelection(selection)) {\r\n\r\n    const anchorNode = selection.anchor.getNode()\r\n\r\n    let element = anchorNode.getKey() === 'root'\r\n          ? anchorNode\r\n          : $findMatchingParent(anchorNode, (e) => {\r\n            const parent = e.getParent()\r\n            return parent !== null && $isRootOrShadowRoot(parent)\r\n          });\r\n\r\n\r\n    if (element === null){\r\n      element = anchorNode.getTopLevelElementOrThrow()\r\n    }\r\n\r\n    let elementDOM = editor.getElementByKey(element.getKey());\r\n\r\n    // 文本对齐\r\n    alignValue.value = (elementDOM?.style.textAlign as ElementFormatType) || \"left\";\r\n\r\n    if(alignValue.value  == \"start\"){ alignValue.value  = \"left\"; }\r\n    else if(alignValue.value  == \"end\"){ alignValue.value  = \"right\"; }\r\n\r\n    // Update text format\r\n    isBold.value = selection.hasFormat('bold')\r\n    isItalic.value = selection.hasFormat('italic')\r\n    isUnderline.value = selection.hasFormat('underline')\r\n    isStrikethrough.value = selection.hasFormat('strikethrough')\r\n    isSubscript.value = selection.hasFormat('subscript')\r\n    isSuperscript.value = selection.hasFormat('superscript')\r\n\r\n    // Handle buttons\r\n    var ff = $getSelectionStyleValueForProperty(selection, 'font-family', 'Arial');\r\n    let fs = $getSelectionStyleValueForProperty(selection, 'font-size', '1rem');\r\n     \r\n    if(fs){\r\n       fontSize.value = Math.round(parseFloat(fs) * ROOT_FONT_SIZE)+\"px\"\r\n    }\r\n   \r\n    fontColor.value = $getSelectionStyleValueForProperty(selection, 'color', '#000')\r\n    bgColor.value = $getSelectionStyleValueForProperty(selection, 'background-color', '#fff')\r\n    fontFamily.value = FONT_FAMILY_OPTIONS.find(item=>item.value==ff) || FONT_FAMILY_OPTIONS[0];\r\n\r\n    disabled.value = false;\r\n\r\n    // Update links\r\n    const node = getSelectedNode(selection)\r\n    const parent = node.getParent()\r\n    isLink.value = $isLinkNode(parent) || $isLinkNode(node)\r\n    if(isLink.value){\r\n      linkValue.value = $isLinkNode(parent) ? parent.getURL() : (node as LinkNode).getURL()\r\n    }\r\n    else{\r\n      linkValue.value = \"\";\r\n    }\r\n  }\r\n  else{\r\n\r\n    disabled.value = true;\r\n  }\r\n}\r\n\r\n// 文字样式\r\nconst fontStyleHandle = (data : any,styleName?:any)=>{\r\n  fontSize.value = data.label;\r\n  editor.update(() => {\r\n    const selection = $getSelection()\r\n    if (selection !== null) {\r\n      $patchStyleText(selection, {\r\n        [styleName || \"font-size\"]:data.value\r\n      })\r\n    }\r\n  })\r\n}\r\n\r\n// 字体颜色\r\nconst setFontColor = (color:any)=>{\r\n  editor.update(() => {\r\n    const selection = $getSelection()\r\n    if (selection !== null){\r\n      $patchStyleText(selection, { color })\r\n    }\r\n  },{})\r\n}\r\n\r\n// bg颜色\r\nconst setBgColor = (color:any)=>{\r\n  editor.update(() => {\r\n    const selection = $getSelection()\r\n    if (selection !== null){\r\n      $patchStyleText(selection, { 'background-color':color })\r\n    }\r\n  },{})\r\n}\r\n\r\n\r\n// 挂载的时候\r\nonMounted(() => {\r\n\r\n  const unregisterMergeListener = mergeRegister(\r\n    editor.registerUpdateListener(({ editorState }) => {\r\n      editorState.read(() => updateToolbar())\r\n    })\r\n  )\r\n\r\n  onUnmounted(() => unregisterMergeListener());\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n   <!-- 字体 -->\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n      <el-button text  :style=\"{fontFamily:fontFamily.value}\" :disabled=\"disabled\">\r\n        {{fontFamily.label}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n      </el-button>\r\n      <template #dropdown>\r\n        <el-dropdown-menu>\r\n          <el-dropdown-item :class=\"{active:fontFamily.label == item.label}\" :disabled=\"disabled\"  v-for=\"item in FONT_FAMILY_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item,'font-family')\">\r\n            <span :style=\"{fontFamily:item.value}\">\r\n              {{item.label}}\r\n            </span>\r\n          </el-dropdown-item>\r\n        </el-dropdown-menu>\r\n      </template>\r\n    </el-dropdown>\r\n    <el-divider  direction=\"vertical\" />  \r\n    <!-- 字体大小 -->\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n        <el-button text :disabled=\"disabled\">\r\n          {{fontSize}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n        </el-button>\r\n        <template #dropdown>\r\n          <el-dropdown-menu>\r\n            <el-dropdown-item :class=\"{active:fontSize==item.label}\" :disabled=\"disabled\" v-for=\"item in FONT_SIZE_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item)\">{{item.label}}</el-dropdown-item>\r\n          </el-dropdown-menu>\r\n        </template>\r\n    </el-dropdown>\r\n    <el-divider  direction=\"vertical\" />  \r\n    <!-- 字体颜色 -->\r\n    <el-button text class=\"mk-doc-editor-toolbar__fontcolor\" :disabled=\"disabled\" >\r\n        <el-color-picker v-model=\"fontColor\" :disabled=\"disabled\" @change=\"setFontColor\"  />\r\n    </el-button>\r\n    <!-- 背景颜色 -->\r\n    <el-button text class=\"mk-doc-editor-toolbar__bgcolor\" :disabled=\"disabled\" >\r\n      <el-color-picker v-model=\"bgColor\" :disabled=\"disabled\"  />\r\n      <MKSvgIcon class=\"view\" iconClass=\"doc-background-color\" @change=\"setBgColor\" /> \r\n    </el-button>\r\n\r\n    <el-divider  direction=\"vertical\" />\r\n    <el-button-group>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isBold ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\">\r\n        <MKSvgIcon iconClass=\"doc-bold\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isItalic ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'italic')\">\r\n        <MKSvgIcon iconClass=\"doc-italic\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isUnderline ? 'active' : ''}`\"  @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'underline')\">\r\n        <MKSvgIcon iconClass=\"doc-underline\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isStrikethrough ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'strikethrough')\">\r\n        <MKSvgIcon iconClass=\"doc-strikethrough\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isSubscript ? 'active' : ''}`\"  @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'subscript')\">\r\n        <MKSvgIcon iconClass=\"doc-sub\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isSuperscript ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'superscript')\">\r\n        <MKSvgIcon iconClass=\"doc-sup\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n    <el-divider  direction=\"vertical\" />\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n      <el-button text  :style=\"{fontFamily:fontFamily.value}\" :disabled=\"disabled\">\r\n        <MKSvgIcon :iconClass=\"`doc-align-${alignValue}`\" style=\"font-size: 18px;\" /> \r\n      </el-button>\r\n      <template #dropdown>\r\n        <el-dropdown-menu>\r\n          <el-dropdown-item :disabled=\"disabled\" :class=\"{active:alignValue == item}\" v-for=\"item in alignList\" :value=\"item\"  @click=\"editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, item)\">\r\n            <MKSvgIcon :iconClass=\"`doc-align-${item}`\" style=\"font-size: 18px;\"  /> \r\n          </el-dropdown-item>\r\n        </el-dropdown-menu>\r\n      </template>\r\n    </el-dropdown>\r\n    <el-divider  direction=\"vertical\" />\r\n    <!-- 链接 -->\r\n    <el-button-group>\r\n      <el-button text :disabled=\"disabled\" :class=\"`${isLink ? 'active' : ''}`\" @click=\"insertLink\">\r\n        <MKSvgIcon iconClass=\"doc-link\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n</template>\r\n"],"names":["parent"],"mappings":"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"}
+{"version":3,"file":"FontStyleTool.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/FontStyleTool.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {\r\n  $getSelection,\r\n  $isRangeSelection,\r\n  $isRootOrShadowRoot,\r\n  $isParagraphNode,\r\n  FORMAT_TEXT_COMMAND,\r\n  FORMAT_ELEMENT_COMMAND,\r\n  type ElementFormatType,\r\n} from 'lexical'\r\nimport {\r\n  $getSelectionStyleValueForProperty,\r\n  $patchStyleText,\r\n} from '@lexical/selection'\r\n\r\nimport { $isLinkNode, TOGGLE_LINK_COMMAND,LinkNode } from '@lexical/link'\r\nimport { sanitizeUrl } from '../../utils/url'\r\nimport { getSelectedNode } from '../../utils/getSelectedNode'\r\nimport { $findMatchingParent,mergeRegister } from '@lexical/utils'\r\nimport {  useLexicalComposer } from '../../core/composables'\r\nimport { onMounted, onUnmounted, ref,watch } from 'vue'\r\nimport { FONT_SIZE_OPTIONS,ROOT_FONT_SIZE,FONT_FAMILY_OPTIONS } from \"./FontStyleDefines\"\r\nimport { ShowLinkEditPanel } from \"../AutoLinkPlugin/LinkEditDialog\";\r\n\r\nconst editor = useLexicalComposer()\r\nconst fontSize = ref('14px')\r\nconst fontColor = ref<string>('#000')\r\nconst bgColor = ref<string>('#fff')\r\nconst fontFamily = ref<any>(FONT_FAMILY_OPTIONS[0])\r\nconst isBold = ref(false)\r\nconst isItalic = ref(false)\r\nconst isUnderline = ref(false)\r\nconst isStrikethrough = ref(false)\r\n\r\nconst isSubscript = ref(false)\r\nconst isSuperscript = ref(false)\r\n\r\n// 对齐方式\r\nconst alignList = ref<ElementFormatType[]>([\"left\",\"center\",\"right\",\"justify\"])\r\nconst alignValue = ref(alignList.value[0])\r\nconst disabled = ref(false)\r\nconst isLink = ref(false)\r\nconst linkValue = ref(\"\");\r\n\r\nasync function insertLink() {\r\n\r\n  const result:any = await ShowLinkEditPanel(linkValue.value);\r\n\r\n  if(result.trim()){\r\n    editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(result))\r\n  }\r\n  else{\r\n    editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)\r\n  }\r\n}\r\n\r\n// 更新状态栏\r\nfunction updateToolbar() {\r\n\r\n  const selection = $getSelection()\r\n\r\n  if ($isRangeSelection(selection)) {\r\n\r\n    const anchorNode = selection.anchor.getNode()\r\n\r\n    let element = anchorNode.getKey() === 'root'\r\n          ? anchorNode\r\n          : $findMatchingParent(anchorNode, (e) => {\r\n            const parent = e.getParent()\r\n            return parent !== null && $isRootOrShadowRoot(parent)\r\n          });\r\n\r\n\r\n    if (element === null){\r\n      element = anchorNode.getTopLevelElementOrThrow()\r\n    }\r\n\r\n    let elementDOM = editor.getElementByKey(element.getKey());\r\n\r\n    // 文本对齐\r\n    alignValue.value = (elementDOM?.style.textAlign as ElementFormatType) || \"left\";\r\n\r\n    if(alignValue.value  == \"start\"){ alignValue.value  = \"left\"; }\r\n    else if(alignValue.value  == \"end\"){ alignValue.value  = \"right\"; }\r\n\r\n    // Update text format\r\n    isBold.value = selection.hasFormat('bold')\r\n    isItalic.value = selection.hasFormat('italic')\r\n    isUnderline.value = selection.hasFormat('underline')\r\n    isStrikethrough.value = selection.hasFormat('strikethrough')\r\n    isSubscript.value = selection.hasFormat('subscript')\r\n    isSuperscript.value = selection.hasFormat('superscript')\r\n\r\n    // Handle buttons\r\n    var ff = $getSelectionStyleValueForProperty(selection, 'font-family', 'Arial');\r\n    let fs = $getSelectionStyleValueForProperty(selection, 'font-size', '1rem');\r\n     \r\n    if(fs){\r\n       fontSize.value = Math.round(parseFloat(fs) * ROOT_FONT_SIZE)+\"px\"\r\n    }\r\n   \r\n    fontColor.value = $getSelectionStyleValueForProperty(selection, 'color', '#000')\r\n    bgColor.value = $getSelectionStyleValueForProperty(selection, 'background-color', '#fff')\r\n    fontFamily.value = FONT_FAMILY_OPTIONS.find(item=>item.value==ff) || FONT_FAMILY_OPTIONS[0];\r\n\r\n    disabled.value = false;\r\n\r\n    // Update links\r\n    const node = getSelectedNode(selection)\r\n    const parent = node.getParent()\r\n    isLink.value = $isLinkNode(parent) || $isLinkNode(node)\r\n    if(isLink.value){\r\n      linkValue.value = $isLinkNode(parent) ? parent.getURL() : (node as LinkNode).getURL()\r\n    }\r\n    else{\r\n      linkValue.value = \"\";\r\n    }\r\n  }\r\n  else{\r\n\r\n    disabled.value = true;\r\n  }\r\n}\r\n\r\n// 文字样式\r\nconst fontStyleHandle = (data : any,styleName?:any)=>{\r\n  fontSize.value = data.label;\r\n  editor.update(() => {\r\n    const selection = $getSelection()\r\n    if (selection !== null) {\r\n      $patchStyleText(selection, {\r\n        [styleName || \"font-size\"]:data.value\r\n      })\r\n    }\r\n  })\r\n}\r\n\r\n// 字体颜色\r\nconst setFontColor = (color:any)=>{\r\n  editor.update(() => {\r\n    const selection = $getSelection()\r\n    if (selection !== null){\r\n      $patchStyleText(selection, { color })\r\n    }\r\n  },{})\r\n}\r\n\r\n// bg颜色\r\nconst setBgColor = (color:any)=>{\r\n  editor.update(() => {\r\n    const selection = $getSelection()\r\n    if (selection !== null){\r\n      $patchStyleText(selection, { 'background-color':color })\r\n    }\r\n  },{})\r\n}\r\n\r\n\r\n// 挂载的时候\r\nonMounted(() => {\r\n\r\n  const unregisterMergeListener = mergeRegister(\r\n    editor.registerUpdateListener(({ editorState }) => {\r\n      editorState.read(() => updateToolbar())\r\n    })\r\n  )\r\n\r\n  onUnmounted(() => unregisterMergeListener());\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n   <!-- 字体 -->\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n      <el-button text  :style=\"{fontFamily:fontFamily.value}\" :disabled=\"disabled\">\r\n        {{fontFamily.label}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n      </el-button>\r\n      <template #dropdown>\r\n        <el-dropdown-menu>\r\n          <el-dropdown-item :class=\"{active:fontFamily.label == item.label}\" :disabled=\"disabled\"  v-for=\"item in FONT_FAMILY_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item,'font-family')\">\r\n            <span :style=\"{fontFamily:item.value}\">\r\n              {{item.label}}\r\n            </span>\r\n          </el-dropdown-item>\r\n        </el-dropdown-menu>\r\n      </template>\r\n    </el-dropdown>\r\n    <el-divider  direction=\"vertical\" />  \r\n    <!-- 字体大小 -->\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n        <el-button text :disabled=\"disabled\">\r\n          {{fontSize}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n        </el-button>\r\n        <template #dropdown>\r\n          <el-dropdown-menu>\r\n            <el-dropdown-item :class=\"{active:fontSize==item.label}\" :disabled=\"disabled\" v-for=\"item in FONT_SIZE_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item)\">{{item.label}}</el-dropdown-item>\r\n          </el-dropdown-menu>\r\n        </template>\r\n    </el-dropdown>\r\n    <el-divider  direction=\"vertical\" />  \r\n    <!-- 字体颜色 -->\r\n    <el-button text class=\"mk-doc-editor-toolbar__fontcolor\" :disabled=\"disabled\" >\r\n        <el-color-picker v-model=\"fontColor\" :disabled=\"disabled\" @change=\"setFontColor\"  />\r\n    </el-button>\r\n    <!-- 背景颜色 -->\r\n    <el-button text class=\"mk-doc-editor-toolbar__bgcolor\" :disabled=\"disabled\" >\r\n      <el-color-picker v-model=\"bgColor\" :disabled=\"disabled\"  />\r\n      <MKSvgIcon class=\"view\" iconClass=\"doc-background-color\" @change=\"setBgColor\" /> \r\n    </el-button>\r\n\r\n    <el-divider  direction=\"vertical\" />\r\n    <el-button-group>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isBold ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\">\r\n        <MKSvgIcon iconClass=\"doc-bold\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isItalic ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'italic')\">\r\n        <MKSvgIcon iconClass=\"doc-italic\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isUnderline ? 'active' : ''}`\"  @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'underline')\">\r\n        <MKSvgIcon iconClass=\"doc-underline\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isStrikethrough ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'strikethrough')\">\r\n        <MKSvgIcon iconClass=\"doc-strikethrough\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isSubscript ? 'active' : ''}`\"  @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'subscript')\">\r\n        <MKSvgIcon iconClass=\"doc-sub\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isSuperscript ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'superscript')\">\r\n        <MKSvgIcon iconClass=\"doc-sup\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n    <el-divider  direction=\"vertical\" />\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n      <el-button text  :style=\"{fontFamily:fontFamily.value}\" :disabled=\"disabled\">\r\n        <MKSvgIcon :iconClass=\"`doc-align-${alignValue}`\" style=\"font-size: 18px;\" /> \r\n      </el-button>\r\n      <template #dropdown>\r\n        <el-dropdown-menu>\r\n          <el-dropdown-item :disabled=\"disabled\" :class=\"{active:alignValue == item}\" v-for=\"item in alignList\" :value=\"item\"  @click=\"editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, item)\">\r\n            <MKSvgIcon :iconClass=\"`doc-align-${item}`\" style=\"font-size: 18px;\"  /> \r\n          </el-dropdown-item>\r\n        </el-dropdown-menu>\r\n      </template>\r\n    </el-dropdown>\r\n    <el-divider  direction=\"vertical\" />\r\n    <!-- 链接 -->\r\n    <el-button-group>\r\n      <el-button text :disabled=\"disabled\" :class=\"`${isLink ? 'active' : ''}`\" @click=\"insertLink\">\r\n        <MKSvgIcon iconClass=\"doc-link\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n</template>\r\n"],"names":["parent"],"mappings":"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"}

package/dist/esm/components/basic/doc-editor/plugins/ToolbarPlugin/PreviewToolbar.vue.js

@@ -1,10 +1,21 @@
 import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, Fragment, createVNode, withCtx, createElementVNode, normalizeClass, unref, createBlock, Teleport, createCommentVNode, nextTick } from "vue";
-import { useLexicalComposer } from "lexical-vue";
+import "@lexical/text";
+import "@lexical/utils";
+import "@lexical/overflow";
+import "lexical";
+import "tiny-invariant";
+import "@lexical/history";
+import { useLexicalComposer } from "../../core/composables/useLexicalComposer.js";
+import "@lexical/list";
+import "@lexical/dragon";
+import "@lexical/plain-text";
+import "@lexical/rich-text";
 import { $generateHtmlFromNodes } from "@lexical/html";
 import { DEVICE_VIEW_MODE } from "../../core/index.js";
 import DocThemeCss from "../../themes/doc-theme.css.js";
 import DocEditorCss from "../../themes/doc-editor.css.js";
 import { useModule } from "../ModulePlugin/composables.js";
+import { Templates } from "../TemplatePlugin/composables.js";
 const _hoisted_1 = /* @__PURE__ */ createElementVNode("div", null, null, -1);
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "PreviewToolbar",
@@ -36,6 +47,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           style.setAttribute("type", "text/css");
           style.innerHTML = [DocEditorCss, DocThemeCss].join("\r\n");
           style.innerHTML += Modules.filter((item) => item.editorCss).map((item) => item.editorCss).join("\r\n");
+          style.innerHTML += Templates.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");