@maketribe/ms-app 3.2.22 → 3.2.23

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/RichTextPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { ref,defineProps,computed,defineEmits,onMounted,onUnmounted,watch } from \"vue\"\r\nimport { useCanShowPlaceholder, useLexicalComposer, useRichTextSetup} from 'lexical-vue'\r\nimport { $getRoot, $getSelection ,$createRangeSelection,$selectAll } from 'lexical'\r\nimport { $generateHtmlFromNodes,$generateNodesFromDOM } from '@lexical/html'\r\nimport ContentEditable from \"./ContentEditable.vue\"\r\nimport DecoratedTeleports from \"./DecoratedTeleports\"\r\n\r\n// 事件\r\nconst emit = defineEmits([\"change\",\"init\"]);\r\n\r\n// 参数\r\nconst props = defineProps({\r\n  content:{ type:String,default:`` },\r\n  placeholder:{ type:String,default:`` }\r\n})\r\n\r\nconst editor = useLexicalComposer()\r\n\r\nconst canShowPlaceholder = useCanShowPlaceholder(editor)\r\n\r\nconst parser = new DOMParser();\r\n\r\n// html 内容\r\nconst htmlContent = ref(\"\");\r\n\r\n// 空内容\r\nconst contentIsEmpty = computed(()=>htmlContent.value == `<p class=\"mk-doc__paragraph\"><br></p>` || !htmlContent.value);\r\n\r\n// 设置 HTML\r\nconst setHtml = (html : any)=>{\r\n\r\n    // 内容不同则重置 \r\n    if(htmlContent.value != html){\r\n\r\n      let nodes : Array<any> = [];\r\n\r\n      htmlContent.value = html;\r\n\r\n      editor.update(()=>{\r\n\r\n        if(html.trim()){\r\n        \r\n          // Once you have the DOM instance it's easy to generate LexicalNodes.\r\n          nodes = [...$generateNodesFromDOM(editor,parser.parseFromString(html.trim(),\"text/html\"))];\r\n\r\n        }\r\n        // 设置权限替换\r\n        $selectAll();\r\n\r\n        if(nodes.length > 0){\r\n          $getSelection()?.insertNodes(nodes);\r\n        }\r\n        else{\r\n          $getSelection()?.insertText(\"\")\r\n        }\r\n      })\r\n    }\r\n}\r\n\r\n\r\nonMounted(()=>{\r\n\r\n  emit(\"init\",editor)\r\n  \r\n  // 初始化\r\n  watch(()=>props.content,setHtml,{ immediate:true });\r\n\r\n  // 监听内容变化\r\n  watch(htmlContent,(value:any)=>emit('change',value));\r\n\r\n  // 更新操作\r\n  const unregisterMergeListener = editor.registerUpdateListener(({ editorState }) => {\r\n    editorState.read(() => {\r\n      htmlContent.value = $generateHtmlFromNodes(editor);\r\n    })\r\n  })\r\n\r\n  // 取消\r\n  onUnmounted(() => unregisterMergeListener());\r\n\r\n})\r\n\r\n// 使用富文本\r\nuseRichTextSetup(editor)\r\n\r\n</script>\r\n\r\n<template>\r\n <div class=\"mk-doc-editor__stage__editable\">\r\n    <ContentEditable />\r\n    <template v-if=\"canShowPlaceholder && contentIsEmpty\">\r\n      <div class=\"mk-doc-editor__stage__placeholder mk-doc__paragraph\">\r\n        {{props.placeholder}}\r\n      </div>\r\n    </template>\r\n    <DecoratedTeleports />\r\n  </div>\r\n\r\n</template>\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAUA,UAAM,OAAO;AAGb,UAAM,QAAQ;AAKd,UAAM,SAAS;AAET,UAAA,qBAAqB,sBAAsB,MAAM;AAEjD,UAAA,SAAS,IAAI;AAGb,UAAA,cAAc,IAAI,EAAE;AAGpB,UAAA,iBAAiB,SAAS,MAAI,YAAY,SAAS,2CAA2C,CAAC,YAAY,KAAK;AAGhH,UAAA,UAAU,CAAC,SAAa;AAGvB,UAAA,YAAY,SAAS,MAAK;AAE3B,YAAI,QAAqB,CAAA;AAEzB,oBAAY,QAAQ;AAEpB,eAAO,OAAO,MAAI;;AAEb,cAAA,KAAK,QAAO;AAGL,oBAAA,CAAC,GAAG,sBAAsB,QAAO,OAAO,gBAAgB,KAAK,KAAK,GAAE,WAAW,CAAC,CAAC;AAAA,UAE3F;AAEW;AAER,cAAA,MAAM,SAAS,GAAE;AACJ,gCAAA,MAAA,mBAAG,YAAY;AAAA,UAAK,OAEhC;AACY,gCAAA,MAAA,mBAAG,WAAW;AAAA,UAC9B;AAAA,QAAA,CACD;AAAA,MACH;AAAA,IAAA;AAIJ,cAAU,MAAI;AAEZ,WAAK,QAAO,MAAM;AAGlB,YAAM,MAAI,MAAM,SAAQ,SAAQ,EAAE,WAAU,MAAM;AAGlD,YAAM,aAAY,CAAC,UAAY,KAAK,UAAS,KAAK,CAAC;AAGnD,YAAM,0BAA0B,OAAO,uBAAuB,CAAC,EAAE,kBAAkB;AACjF,oBAAY,KAAK,MAAM;AACT,sBAAA,QAAQ,uBAAuB,MAAM;AAAA,QAAA,CAClD;AAAA,MAAA,CACF;AAGW,kBAAA,MAAM,yBAAyB;AAAA,IAAA,CAE5C;AAGD,qBAAiB,MAAM;;;;;;;;;;"}

package/dist/esm/components/basic/doc-editor/plugins/RichTextPlugin/nodes/RichTextNode.js

@@ -0,0 +1,153 @@
+import { TextNode, $isTextNode } from "lexical";
+class RichTextNode extends TextNode {
+  static getType() {
+    return "rich-text";
+  }
+  static clone(node) {
+    return new RichTextNode(node.__key);
+  }
+  static importJSON(serializedNode) {
+    return TextNode.importJSON(serializedNode);
+  }
+  static importDOM() {
+    return {
+      b: () => ({
+        conversion: convertBringAttentionToElement,
+        priority: 4
+      }),
+      code: () => ({
+        conversion: convertTextFormatElement,
+        priority: 4
+      }),
+      em: () => ({
+        conversion: convertTextFormatElement,
+        priority: 4
+      }),
+      i: () => ({
+        conversion: convertTextFormatElement,
+        priority: 4
+      }),
+      s: () => ({
+        conversion: convertTextFormatElement,
+        priority: 4
+      }),
+      span: () => ({
+        conversion: convertSpanElement,
+        priority: 4
+      }),
+      strong: () => ({
+        conversion: convertTextFormatElement,
+        priority: 4
+      }),
+      sub: () => ({
+        conversion: convertTextFormatElement,
+        priority: 4
+      }),
+      sup: () => ({
+        conversion: convertTextFormatElement,
+        priority: 4
+      }),
+      u: () => ({
+        conversion: convertTextFormatElement,
+        priority: 4
+      })
+    };
+  }
+  constructor(text, key) {
+    super(text, key);
+  }
+}
+function convertBringAttentionToElement(domNode) {
+  const b = domNode;
+  const hasNormalFontWeight = b.style.fontWeight === "normal";
+  return {
+    forChild: applyTextFormatFromStyle(b.style, hasNormalFontWeight ? void 0 : "bold"),
+    node: null
+  };
+}
+var nodeNameToTextFormat = {
+  code: "code",
+  em: "italic",
+  i: "italic",
+  s: "strikethrough",
+  strong: "bold",
+  sub: "subscript",
+  sup: "superscript",
+  u: "underline"
+};
+function convertTextFormatElement(domNode) {
+  const format = nodeNameToTextFormat[domNode.nodeName.toLowerCase()];
+  if (format === void 0) {
+    return {
+      node: null
+    };
+  }
+  return {
+    forChild: applyTextFormatFromStyle(domNode.style, format),
+    node: null
+  };
+}
+function convertSpanElement(domNode) {
+  const span = domNode;
+  const style = span.style;
+  return {
+    forChild: applyTextFormatFromStyle(style, null),
+    node: null
+  };
+}
+function applyTextFormatFromStyle(style, shouldApply) {
+  const fontWeight = style.fontWeight;
+  const textDecoration = style.textDecoration.split(" ");
+  const hasBoldFontWeight = fontWeight === "700" || fontWeight === "bold";
+  const hasLinethroughTextDecoration = textDecoration.includes("line-through");
+  const hasItalicFontStyle = style.fontStyle === "italic";
+  const hasUnderlineTextDecoration = textDecoration.includes("underline");
+  const verticalAlign = style.verticalAlign;
+  return (lexicalNode) => {
+    if (!$isTextNode(lexicalNode)) {
+      return lexicalNode;
+    }
+    let styleStr = "";
+    if (style.color) {
+      styleStr += `color:${style.color};`;
+    }
+    if (style.fontSize) {
+      styleStr += `font-size:${style.fontSize};`;
+    }
+    if (style.fontFamily) {
+      styleStr += `font-family:${style.fontFamily};`;
+    }
+    if (style.backgroundColor) {
+      styleStr += `background-color:${style.backgroundColor};`;
+    }
+    if (styleStr) {
+      lexicalNode.setStyle(styleStr);
+    }
+    if (hasBoldFontWeight && !lexicalNode.hasFormat("bold")) {
+      lexicalNode.toggleFormat("bold");
+    }
+    if (hasLinethroughTextDecoration && !lexicalNode.hasFormat("strikethrough")) {
+      lexicalNode.toggleFormat("strikethrough");
+    }
+    if (hasItalicFontStyle && !lexicalNode.hasFormat("italic")) {
+      lexicalNode.toggleFormat("italic");
+    }
+    if (hasUnderlineTextDecoration && !lexicalNode.hasFormat("underline")) {
+      lexicalNode.toggleFormat("underline");
+    }
+    if (verticalAlign === "sub" && !lexicalNode.hasFormat("subscript")) {
+      lexicalNode.toggleFormat("subscript");
+    }
+    if (verticalAlign === "super" && !lexicalNode.hasFormat("superscript")) {
+      lexicalNode.toggleFormat("superscript");
+    }
+    if (shouldApply && !lexicalNode.hasFormat(shouldApply)) {
+      lexicalNode.toggleFormat(shouldApply);
+    }
+    return lexicalNode;
+  };
+}
+export {
+  RichTextNode
+};
+//# sourceMappingURL=RichTextNode.js.map

package/dist/esm/components/basic/doc-editor/plugins/RichTextPlugin/nodes/RichTextNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextNode.js","sources":["../../../../../../../../src/components/basic/doc-editor/plugins/RichTextPlugin/nodes/RichTextNode.ts"],"sourcesContent":["\r\n\r\nimport type { DOMConversionMap, LexicalCommand, LexicalNode, NodeKey, SerializedTextNode } from 'lexical'\r\nimport { $isTextNode,TextNode,$createTextNode } from 'lexical'\r\n\r\n/**\r\n * 富文本的文本节点\r\n */\r\nexport class RichTextNode extends TextNode{\r\n\r\n  static getType(): string {\r\n    return \"rich-text\";\r\n  }\r\n\r\n  static clone(node: RichTextNode): RichTextNode {\r\n    return new RichTextNode(node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedTextNode): TextNode {\r\n    return TextNode.importJSON(serializedNode);\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    \r\n    return {\r\n      b: () => ({\r\n        conversion: convertBringAttentionToElement,\r\n        priority: 4\r\n      }),\r\n      code: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      em: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      i: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      s: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      span: () => ({\r\n        conversion: convertSpanElement,\r\n        priority: 4\r\n      }),\r\n      strong: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      sub: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      sup: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      u: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      })\r\n    };\r\n  }\r\n\r\n  constructor(text:string,key?: NodeKey) {\r\n    super(text,key)\r\n  }\r\n\r\n}\r\n\r\nfunction convertBringAttentionToElement(domNode:HTMLElement) {\r\n  const b = domNode;\r\n  const hasNormalFontWeight = b.style.fontWeight === \"normal\";\r\n  return {\r\n    forChild: applyTextFormatFromStyle(b.style, hasNormalFontWeight ? void 0 : \"bold\"),\r\n    node: null\r\n  };\r\n}\r\n\r\nvar nodeNameToTextFormat:any = {\r\n  code: \"code\",\r\n  em: \"italic\",\r\n  i: \"italic\",\r\n  s: \"strikethrough\",\r\n  strong: \"bold\",\r\n  sub: \"subscript\",\r\n  sup: \"superscript\",\r\n  u: \"underline\"\r\n};\r\nfunction convertTextFormatElement(domNode:HTMLElement) {\r\n  const format = nodeNameToTextFormat[domNode.nodeName.toLowerCase()];\r\n  if (format === void 0) {\r\n    return {\r\n      node: null\r\n    };\r\n  }\r\n  return {\r\n    forChild: applyTextFormatFromStyle(domNode.style, format),\r\n    node: null\r\n  };\r\n}\r\nfunction convertSpanElement(domNode:HTMLElement) {\r\n  const span = domNode;\r\n  const style = span.style;\r\n  return {\r\n    forChild: applyTextFormatFromStyle(style,null),\r\n    node: null\r\n  };\r\n}\r\n\r\nfunction applyTextFormatFromStyle(style:any, shouldApply:any) {\r\n  const fontWeight = style.fontWeight;\r\n  const textDecoration = style.textDecoration.split(\" \");\r\n  const hasBoldFontWeight = fontWeight === \"700\" || fontWeight === \"bold\";\r\n  const hasLinethroughTextDecoration = textDecoration.includes(\"line-through\");\r\n  const hasItalicFontStyle = style.fontStyle === \"italic\";\r\n  const hasUnderlineTextDecoration = textDecoration.includes(\"underline\");\r\n  const verticalAlign = style.verticalAlign;\r\n\r\n  return (lexicalNode:LexicalNode) => {\r\n    if (!$isTextNode(lexicalNode)) {\r\n      return lexicalNode;\r\n    }\r\n\r\n    let styleStr = \"\";\r\n\r\n    if(style.color){\r\n      styleStr += `color:${style.color};`\r\n    }\r\n    if(style.fontSize){\r\n      styleStr += `font-size:${style.fontSize};`\r\n    }\r\n    if(style.fontFamily){\r\n      styleStr += `font-family:${style.fontFamily};`\r\n    }\r\n    if(style.backgroundColor){\r\n      styleStr += `background-color:${style.backgroundColor};`\r\n    }\r\n\r\n    if(styleStr){\r\n      lexicalNode.setStyle(styleStr);\r\n    }\r\n\r\n\r\n    if (hasBoldFontWeight && !lexicalNode.hasFormat(\"bold\")) {\r\n      lexicalNode.toggleFormat(\"bold\");\r\n    }\r\n    if (hasLinethroughTextDecoration && !lexicalNode.hasFormat(\"strikethrough\")) {\r\n      lexicalNode.toggleFormat(\"strikethrough\");\r\n    }\r\n    if (hasItalicFontStyle && !lexicalNode.hasFormat(\"italic\")) {\r\n      lexicalNode.toggleFormat(\"italic\");\r\n    }\r\n    if (hasUnderlineTextDecoration && !lexicalNode.hasFormat(\"underline\")) {\r\n      lexicalNode.toggleFormat(\"underline\");\r\n    }\r\n    if (verticalAlign === \"sub\" && !lexicalNode.hasFormat(\"subscript\")) {\r\n      lexicalNode.toggleFormat(\"subscript\");\r\n    }\r\n    if (verticalAlign === \"super\" && !lexicalNode.hasFormat(\"superscript\")) {\r\n      lexicalNode.toggleFormat(\"superscript\");\r\n    }\r\n    if (shouldApply && !lexicalNode.hasFormat(shouldApply)) {\r\n      lexicalNode.toggleFormat(shouldApply);\r\n    }\r\n    return lexicalNode;\r\n  };\r\n}\r\n\r\n\r\n"],"names":[],"mappings":"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"}

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

@@ -3,27 +3,7 @@ import { $getSelection, $isRangeSelection, $isRootOrShadowRoot, $createParagraph
 import { $patchStyleText, $setBlocksType } from "@lexical/selection";
 import { $isHeadingNode, $createHeadingNode } from "@lexical/rich-text";
 import { $findMatchingParent } from "@lexical/utils";
-import "@lexical/text";
-import "@lexical/overflow";
-import "tiny-invariant";
-import "@lexical/history";
-import { useLexicalComposer } from "../../lexical-vue/composables/useLexicalComposer.js";
-import "@lexical/list";
-import "@lexical/dragon";
-import "@lexical/plain-text";
-import "@lexical/yjs";
-import "yjs";
-import "../../lexical-vue/components/LexicalDecoratedTeleports.js";
-import "@lexical/html";
-import "@lexical/link";
-import "@lexical/mark";
-import "@lexical/table";
-import "@lexical/hashtag";
-import "@lexical/markdown";
-import "../../lexical-vue/composables/useCollaborationContext.js";
-import "../../lexical-vue/components/LexicalMenu/shared.js";
-import "../../lexical-vue/components/LexicalAutoEmbedPlugin/shared.js";
-import "../../lexical-vue/components/LexicalTypeaheadMenuPlugin/shared.js";
+import { useLexicalComposer } from "lexical-vue";
 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  $applyNodeReplacement,\r\n  $createParagraphNode, $createTextNode,\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 { $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:\"h1\",label:\"标题 1\"},\r\n  {value:\"h2\",label:\"标题 2\"},\r\n  {value:\"h3\",label:\"标题 3\"}\r\n];\r\nconst disabled = ref(false)\r\n\r\nconst contentType = ref<any>(CONTENT_TYPE_DEFINES[0]);\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{\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\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}\" :disabled=\"disabled\" v-for=\"item in CONTENT_TYPE_DEFINES\" :value=\"item.value\" @click=\"setContentType(item)\">\r\n          <template v-if=\"item.value == 'paragraph'\">\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,UAAM,SAAS;AAGf,UAAM,uBAAuB;AAAA,MAC3B,EAAC,OAAM,aAAY,OAAM,KAAI;AAAA,MAC7B,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,MACxB,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,MACxB,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,IAAA;AAEpB,UAAA,WAAW,IAAI,KAAK;AAE1B,UAAM,cAAc,IAAS,qBAAqB,CAAC,CAAC;AAGpD,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,OAEpD;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;AAEW,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  $applyNodeReplacement,\r\n  $createParagraphNode, $createTextNode,\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 { $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:\"h1\",label:\"标题 1\"},\r\n  {value:\"h2\",label:\"标题 2\"},\r\n  {value:\"h3\",label:\"标题 3\"}\r\n];\r\nconst disabled = ref(false)\r\n\r\nconst contentType = ref<any>(CONTENT_TYPE_DEFINES[0]);\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{\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\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}\" :disabled=\"disabled\" v-for=\"item in CONTENT_TYPE_DEFINES\" :value=\"item.value\" @click=\"setContentType(item)\">\r\n          <template v-if=\"item.value == 'paragraph'\">\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":";;;;;;;;;;;;;;AAeA,UAAM,SAAS;AAGf,UAAM,uBAAuB;AAAA,MAC3B,EAAC,OAAM,aAAY,OAAM,KAAI;AAAA,MAC7B,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,MACxB,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,MACxB,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,IAAA;AAEpB,UAAA,WAAW,IAAI,KAAK;AAE1B,UAAM,cAAc,IAAS,qBAAqB,CAAC,CAAC;AAGpD,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,OAEpD;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;AAEW,kBAAA,MAAM,yBAAyB;AAAA,IAAA,CAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -2,28 +2,7 @@ import { defineComponent, ref, watch, onMounted, onUnmounted, resolveComponent,
 import { $getSelection, FORMAT_TEXT_COMMAND, FORMAT_ELEMENT_COMMAND, $isRangeSelection, $isRootOrShadowRoot } from "lexical";
 import { $patchStyleText, $getSelectionStyleValueForProperty } from "@lexical/selection";
 import { mergeRegister, $findMatchingParent } from "@lexical/utils";
-import "@lexical/text";
-import "@lexical/overflow";
-import "tiny-invariant";
-import "@lexical/history";
-import { useLexicalComposer } from "../../lexical-vue/composables/useLexicalComposer.js";
-import "@lexical/list";
-import "@lexical/dragon";
-import "@lexical/plain-text";
-import "@lexical/rich-text";
-import "@lexical/yjs";
-import "yjs";
-import "../../lexical-vue/components/LexicalDecoratedTeleports.js";
-import "@lexical/html";
-import "@lexical/link";
-import "@lexical/mark";
-import "@lexical/table";
-import "@lexical/hashtag";
-import "@lexical/markdown";
-import "../../lexical-vue/composables/useCollaborationContext.js";
-import "../../lexical-vue/components/LexicalMenu/shared.js";
-import "../../lexical-vue/components/LexicalAutoEmbedPlugin/shared.js";
-import "../../lexical-vue/components/LexicalTypeaheadMenuPlugin/shared.js";
+import { useLexicalComposer } from "lexical-vue";
 import { FONT_FAMILY_OPTIONS, FONT_SIZE_OPTIONS, ROOT_FONT_SIZE } from "./FontStyleDefines.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "FontStyleTool",

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  FORMAT_TEXT_COMMAND,\r\n  FORMAT_ELEMENT_COMMAND,\r\n  SELECTION_CHANGE_COMMAND,\r\n  type CommandListenerPriority,\r\n  type ElementFormatType\r\n} from 'lexical'\r\nimport {\r\n  $getSelectionStyleValueForProperty,\r\n  $patchStyleText,\r\n} from '@lexical/selection'\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\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\n\r\nconst lowPriority: CommandListenerPriority = 1\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\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\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  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\nwatch(fontColor,(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\nwatch(bgColor,(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\nonMounted(() => {\r\n\r\n  const unregisterMergeListener = mergeRegister(\r\n    editor.registerUpdateListener(({ editorState }) => {\r\n      editorState.read(() => updateToolbar())\r\n    }),\r\n    // editor.registerCommand(SELECTION_CHANGE_COMMAND, (_payload, _newEditor) => updateToolbar()!,lowPriority)\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\"  />\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\" /> \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-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</template>\r\n"],"names":[],"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  FORMAT_TEXT_COMMAND,\r\n  FORMAT_ELEMENT_COMMAND,\r\n  SELECTION_CHANGE_COMMAND,\r\n  type CommandListenerPriority,\r\n  type ElementFormatType\r\n} from 'lexical'\r\nimport {\r\n  $getSelectionStyleValueForProperty,\r\n  $patchStyleText,\r\n} from '@lexical/selection'\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\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\n\r\nconst lowPriority: CommandListenerPriority = 1\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\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\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  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\nwatch(fontColor,(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\nwatch(bgColor,(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\nonMounted(() => {\r\n\r\n  const unregisterMergeListener = mergeRegister(\r\n    editor.registerUpdateListener(({ editorState }) => {\r\n      editorState.read(() => updateToolbar())\r\n    }),\r\n    // editor.registerCommand(SELECTION_CHANGE_COMMAND, (_payload, _newEditor) => updateToolbar()!,lowPriority)\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\"  />\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\" /> \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-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</template>\r\n"],"names":[],"mappings":"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"}

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

@@ -1,28 +1,6 @@
 import { defineComponent, ref, shallowRef, reactive, onMounted, onUnmounted, openBlock, createElementBlock, normalizeStyle, createBlock, resolveDynamicComponent, createCommentVNode, nextTick } from "vue";
 import { mergeRegister } from "@lexical/utils";
-import "@lexical/text";
-import "@lexical/overflow";
-import "lexical";
-import "tiny-invariant";
-import "@lexical/history";
-import { useLexicalComposer } from "../../lexical-vue/composables/useLexicalComposer.js";
-import "@lexical/list";
-import "@lexical/dragon";
-import "@lexical/plain-text";
-import "@lexical/rich-text";
-import "@lexical/yjs";
-import "yjs";
-import "../../lexical-vue/components/LexicalDecoratedTeleports.js";
-import "@lexical/html";
-import "@lexical/link";
-import "@lexical/mark";
-import "@lexical/table";
-import "@lexical/hashtag";
-import "@lexical/markdown";
-import "../../lexical-vue/composables/useCollaborationContext.js";
-import "../../lexical-vue/components/LexicalMenu/shared.js";
-import "../../lexical-vue/components/LexicalAutoEmbedPlugin/shared.js";
-import "../../lexical-vue/components/LexicalTypeaheadMenuPlugin/shared.js";
+import { useLexicalComposer } from "lexical-vue";
 import { IMAGE_ATTRS_CHANGE } from "../ImagePlugin/index.js";
 import { DEVICE_VIEW_MODE, SELECTED_COMPONENT_COMMAND } from "../commands.js";
 const lowPriority = 1;

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

@@ -1 +1 @@
-{"version":3,"file":"InlineToolsPlugin.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/InlineToolsPlugin.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type { CommandListenerPriority } from 'lexical'\r\nimport {  mergeRegister } from '@lexical/utils'\r\nimport {  useLexicalComposer } from '../../lexical-vue'\r\nimport { IMAGE_ATTRS_CHANGE } from \"../ImagePlugin\"\r\nimport { onMounted, onUnmounted, ref,reactive,shallowRef,nextTick } from 'vue'\r\nimport { DEVICE_VIEW_MODE,SELECTED_COMPONENT_COMMAND,ComponentSelectEvent } from \"../commands\"\r\n\r\nconst lowPriority: CommandListenerPriority = 1\r\nconst toolbarRef = ref<HTMLDivElement | null>(null)\r\nconst editor = useLexicalComposer()\r\nconst selectPayload = shallowRef<ComponentSelectEvent|null>(null);\r\nconst toolsPos = reactive({ left:\"px\",top:\"0px\" });\r\n\r\nconst updateToolsPos = ()=>{\r\n\r\n  nextTick(()=>{\r\n    if(selectPayload.value != null && toolbarRef.value != null){\r\n      const editIframeRect = (toolbarRef.value.getRootNode() as any).body.querySelector(\".mk-doc-editor__stage_iframe\").getBoundingClientRect();\r\n      const editBodyRect = (toolbarRef.value.getRootNode() as any).body.querySelector(\".mk-doc-editor__stage_body\").getBoundingClientRect();\r\n      const baseY =  editIframeRect.y - editBodyRect.y;\r\n      const selectRect = selectPayload.value.el.getBoundingClientRect();\r\n      const toolsRect = toolbarRef.value.getBoundingClientRect();\r\n      if(toolsRect){\r\n        // 中心点\r\n        toolsPos.top = Math.max(selectRect.y - toolsRect.height - 5 + baseY,5 +baseY) + \"px\"\r\n        toolsPos.left = toolsRect.width / -2 + selectRect.x + selectRect.width / 2 + \"px\";\r\n      }\r\n    }\r\n  })\r\n \r\n\r\n  return false;\r\n}\r\n\r\nonMounted(() => {\r\n\r\n  const unregisterMergeListener = mergeRegister(\r\n    editor.registerCommand(DEVICE_VIEW_MODE,() => updateToolsPos(),lowPriority),\r\n    editor.registerCommand(IMAGE_ATTRS_CHANGE,() => updateToolsPos(),lowPriority),\r\n    editor.registerUpdateListener(({ editorState }) =>  editorState.read(() => updateToolsPos())),\r\n    editor.registerCommand(SELECTED_COMPONENT_COMMAND, (payload:ComponentSelectEvent) => {\r\n      selectPayload.value = payload;\r\n      return updateToolsPos();\r\n    },lowPriority)\r\n    // editor.registerCommand(SELECTION_CHANGE_COMMAND, (payload, newEditor) => {\r\n      \r\n    //   const selection = $getSelection();\r\n\r\n    //   if($isNodeSelection(selection)){\r\n\r\n    //     const node = selection.getNodes()[0]\r\n\r\n    //     console.log(node,node.getTopLevelElement());\r\n    //   }\r\n\r\n    //   return updateToolsPos();\r\n    // },lowPriority)\r\n  )\r\n\r\n  onUnmounted(() => {\r\n    unregisterMergeListener()\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-inline-toolbar\" :style=\"toolsPos\">\r\n    <component :is=\"selectPayload.component\" />\r\n  </div>\r\n</template>\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,MAAM,cAAuC;;;;AACvC,UAAA,aAAa,IAA2B,IAAI;AAClD,UAAM,SAAS;AACT,UAAA,gBAAgB,WAAsC,IAAI;AAChE,UAAM,WAAW,SAAS,EAAE,MAAK,MAAK,KAAI,OAAO;AAEjD,UAAM,iBAAiB,MAAI;AAEzB,eAAS,MAAI;AACX,YAAG,cAAc,SAAS,QAAQ,WAAW,SAAS,MAAK;AACnD,gBAAA,iBAAkB,WAAW,MAAM,YAAA,EAAsB,KAAK,cAAc,8BAA8B,EAAE;AAC5G,gBAAA,eAAgB,WAAW,MAAM,YAAA,EAAsB,KAAK,cAAc,4BAA4B,EAAE;AACxG,gBAAA,QAAS,eAAe,IAAI,aAAa;AAC/C,gBAAM,aAAa,cAAc,MAAM,GAAG,sBAAsB;AAC1D,gBAAA,YAAY,WAAW,MAAM,sBAAsB;AACzD,cAAG,WAAU;AAEF,qBAAA,MAAM,KAAK,IAAI,WAAW,IAAI,UAAU,SAAS,IAAI,OAAM,IAAG,KAAK,IAAI;AACvE,qBAAA,OAAO,UAAU,QAAQ,KAAK,WAAW,IAAI,WAAW,QAAQ,IAAI;AAAA,UAC/E;AAAA,QACF;AAAA,MAAA,CACD;AAGM,aAAA;AAAA,IAAA;AAGT,cAAU,MAAM;AAEd,YAAM,0BAA0B;AAAA,QAC9B,OAAO,gBAAgB,kBAAiB,MAAM,eAAA,GAAiB,WAAW;AAAA,QAC1E,OAAO,gBAAgB,oBAAmB,MAAM,eAAA,GAAiB,WAAW;AAAA,QAC5E,OAAO,uBAAuB,CAAC,EAAE,YAAA,MAAmB,YAAY,KAAK,MAAM,eAAe,CAAC,CAAC;AAAA,QAC5F,OAAO,gBAAgB,4BAA4B,CAAC,YAAiC;AACnF,wBAAc,QAAQ;AACtB,iBAAO,eAAe;AAAA,WACtB,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAA;AAgBf,kBAAY,MAAM;AACQ;MAAA,CACzB;AAAA,IAAA,CACF;;;;;;;;;;;;;;"}
+{"version":3,"file":"InlineToolsPlugin.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/InlineToolsPlugin.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type { CommandListenerPriority } from 'lexical'\r\nimport {  mergeRegister } from '@lexical/utils'\r\nimport {  useLexicalComposer } from 'lexical-vue'\r\nimport { IMAGE_ATTRS_CHANGE } from \"../ImagePlugin\"\r\nimport { onMounted, onUnmounted, ref,reactive,shallowRef,nextTick } from 'vue'\r\nimport { DEVICE_VIEW_MODE,SELECTED_COMPONENT_COMMAND,ComponentSelectEvent } from \"../commands\"\r\n\r\nconst lowPriority: CommandListenerPriority = 1\r\nconst toolbarRef = ref<HTMLDivElement | null>(null)\r\nconst editor = useLexicalComposer()\r\nconst selectPayload = shallowRef<ComponentSelectEvent|null>(null);\r\nconst toolsPos = reactive({ left:\"px\",top:\"0px\" });\r\n\r\nconst updateToolsPos = ()=>{\r\n\r\n  nextTick(()=>{\r\n    if(selectPayload.value != null && toolbarRef.value != null){\r\n      const editIframeRect = (toolbarRef.value.getRootNode() as any).body.querySelector(\".mk-doc-editor__stage_iframe\").getBoundingClientRect();\r\n      const editBodyRect = (toolbarRef.value.getRootNode() as any).body.querySelector(\".mk-doc-editor__stage_body\").getBoundingClientRect();\r\n      const baseY =  editIframeRect.y - editBodyRect.y;\r\n      const selectRect = selectPayload.value.el.getBoundingClientRect();\r\n      const toolsRect = toolbarRef.value.getBoundingClientRect();\r\n      if(toolsRect){\r\n        // 中心点\r\n        toolsPos.top = Math.max(selectRect.y - toolsRect.height - 5 + baseY,5 +baseY) + \"px\"\r\n        toolsPos.left = toolsRect.width / -2 + selectRect.x + selectRect.width / 2 + \"px\";\r\n      }\r\n    }\r\n  })\r\n \r\n\r\n  return false;\r\n}\r\n\r\nonMounted(() => {\r\n\r\n  const unregisterMergeListener = mergeRegister(\r\n    editor.registerCommand(DEVICE_VIEW_MODE,() => updateToolsPos(),lowPriority),\r\n    editor.registerCommand(IMAGE_ATTRS_CHANGE,() => updateToolsPos(),lowPriority),\r\n    editor.registerUpdateListener(({ editorState }) =>  editorState.read(() => updateToolsPos())),\r\n    editor.registerCommand(SELECTED_COMPONENT_COMMAND, (payload:ComponentSelectEvent) => {\r\n      selectPayload.value = payload;\r\n      return updateToolsPos();\r\n    },lowPriority)\r\n    // editor.registerCommand(SELECTION_CHANGE_COMMAND, (payload, newEditor) => {\r\n      \r\n    //   const selection = $getSelection();\r\n\r\n    //   if($isNodeSelection(selection)){\r\n\r\n    //     const node = selection.getNodes()[0]\r\n\r\n    //     console.log(node,node.getTopLevelElement());\r\n    //   }\r\n\r\n    //   return updateToolsPos();\r\n    // },lowPriority)\r\n  )\r\n\r\n  onUnmounted(() => {\r\n    unregisterMergeListener()\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-inline-toolbar\" :style=\"toolsPos\">\r\n    <component :is=\"selectPayload.component\" />\r\n  </div>\r\n</template>\r\n"],"names":[],"mappings":";;;;;AAQA,MAAM,cAAuC;;;;AACvC,UAAA,aAAa,IAA2B,IAAI;AAClD,UAAM,SAAS;AACT,UAAA,gBAAgB,WAAsC,IAAI;AAChE,UAAM,WAAW,SAAS,EAAE,MAAK,MAAK,KAAI,OAAO;AAEjD,UAAM,iBAAiB,MAAI;AAEzB,eAAS,MAAI;AACX,YAAG,cAAc,SAAS,QAAQ,WAAW,SAAS,MAAK;AACnD,gBAAA,iBAAkB,WAAW,MAAM,YAAA,EAAsB,KAAK,cAAc,8BAA8B,EAAE;AAC5G,gBAAA,eAAgB,WAAW,MAAM,YAAA,EAAsB,KAAK,cAAc,4BAA4B,EAAE;AACxG,gBAAA,QAAS,eAAe,IAAI,aAAa;AAC/C,gBAAM,aAAa,cAAc,MAAM,GAAG,sBAAsB;AAC1D,gBAAA,YAAY,WAAW,MAAM,sBAAsB;AACzD,cAAG,WAAU;AAEF,qBAAA,MAAM,KAAK,IAAI,WAAW,IAAI,UAAU,SAAS,IAAI,OAAM,IAAG,KAAK,IAAI;AACvE,qBAAA,OAAO,UAAU,QAAQ,KAAK,WAAW,IAAI,WAAW,QAAQ,IAAI;AAAA,UAC/E;AAAA,QACF;AAAA,MAAA,CACD;AAGM,aAAA;AAAA,IAAA;AAGT,cAAU,MAAM;AAEd,YAAM,0BAA0B;AAAA,QAC9B,OAAO,gBAAgB,kBAAiB,MAAM,eAAA,GAAiB,WAAW;AAAA,QAC1E,OAAO,gBAAgB,oBAAmB,MAAM,eAAA,GAAiB,WAAW;AAAA,QAC5E,OAAO,uBAAuB,CAAC,EAAE,YAAA,MAAmB,YAAY,KAAK,MAAM,eAAe,CAAC,CAAC;AAAA,QAC5F,OAAO,gBAAgB,4BAA4B,CAAC,YAAiC;AACnF,wBAAc,QAAQ;AACtB,iBAAO,eAAe;AAAA,WACtB,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAA;AAgBf,kBAAY,MAAM;AACQ;MAAA,CACzB;AAAA,IAAA,CACF;;;;;;;;;;;;;;"}

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

@@ -1,36 +1,19 @@
 import { defineComponent, ref, computed, onMounted, resolveComponent, openBlock, createElementBlock, Fragment, createVNode, withCtx, normalizeClass, createElementVNode, createCommentVNode } from "vue";
-import "@lexical/text";
-import "@lexical/utils";
-import "@lexical/overflow";
-import "lexical";
-import "tiny-invariant";
-import "@lexical/history";
-import { useLexicalComposer } from "../../lexical-vue/composables/useLexicalComposer.js";
-import "@lexical/list";
-import "@lexical/dragon";
-import "@lexical/plain-text";
-import "@lexical/rich-text";
-import "@lexical/yjs";
-import "yjs";
-import "../../lexical-vue/components/LexicalDecoratedTeleports.js";
-import { $generateHtmlFromNodes } from "@lexical/html";
-import "@lexical/link";
-import "@lexical/mark";
-import "@lexical/table";
-import "@lexical/hashtag";
-import "@lexical/markdown";
-import "../../lexical-vue/composables/useCollaborationContext.js";
-import "../../lexical-vue/components/LexicalMenu/shared.js";
-import "../../lexical-vue/components/LexicalAutoEmbedPlugin/shared.js";
-import "../../lexical-vue/components/LexicalTypeaheadMenuPlugin/shared.js";
+import { useLexicalComposer } from "lexical-vue";
 import { DEVICE_VIEW_MODE } from "../commands.js";
+import { $generateHtmlFromNodes } from "@lexical/html";
 import DocThemeCss from "../../themes/doc-theme.css.js";
 import DocEditorCss from "../../themes/doc-editor.css.js";
 const _hoisted_1 = ["srcdoc"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "PreviewToolbar",
+  props: {
+    js: { type: String, default: `` },
+    css: { type: String, default: `` }
+  },
   setup(__props) {
     const editor = useLexicalComposer();
+    const props = __props;
     const iframeContentRef = ref(null);
     const iframeBody = computed(() => {
       var _a, _b, _c;
@@ -38,6 +21,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const codeDialogVisible = ref(false);
     const srcdoc = ref("");
+    const linkStr = props.css.split(",").map((path) => {
+      return `<link crossorigin href="${path}" />`;
+    }).join("");
+    props.css.split(",").map((path) => {
+      return `<link crossorigin href="${path}" />`;
+    }).join("");
+    const viewDevice = ref("pc");
     const createViewContent = (content) => {
       srcdoc.value = `
     <html>
@@ -46,12 +36,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ${DocEditorCss}
           ${DocThemeCss}
         </style>
+        ${linkStr}
       </head>
       <body style="font-size:${viewDevice.value == "pc" ? "14px" : "18px"}">${content}</body>
     </html>
   `;
     };
-    const viewDevice = ref("pc");
     const show = function() {
       editor.getEditorState().read(() => {
         createViewContent($generateHtmlFromNodes(editor));

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

@@ -1 +1 @@
-{"version":3,"file":"PreviewToolbar.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/PreviewToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {  useLexicalComposer } from '../../lexical-vue'\r\nimport { DEVICE_VIEW_MODE } from \"../commands\"\r\nimport { $generateHtmlFromNodes} from '@lexical/html'\r\nimport { onMounted,ref,computed } from \"vue\"\r\nimport DocThemeCss from \"../../themes/doc-theme.css?raw\";\r\nimport DocEditorCss from \"../../themes/doc-editor.css?raw\";\r\n\r\nconst editor = useLexicalComposer()\r\n// iframe 编辑器\r\nconst iframeContentRef = ref(null as any);\r\nconst iframeBody = computed<any>(()=>iframeContentRef.value?.contentWindow?.document?.body)\r\n\r\nconst codeDialogVisible = ref(false);\r\nconst srcdoc = ref(\"\");\r\n// 创建预览内容\r\nconst createViewContent = (content:string)=>{\r\n  srcdoc.value = `\r\n    <html>\r\n      <head>\r\n        <style type=\"text/css\">\r\n          ${DocEditorCss}\r\n          ${DocThemeCss}\r\n        </style>\r\n      </head>\r\n      <body style=\"font-size:${viewDevice.value=='pc'?\"14px\":\"18px\"}\">${content}</body>\r\n    </html>\r\n  `\r\n}\r\n\r\n// pc | mobile\r\nconst viewDevice = ref('pc')\r\n// 显示\r\nconst show = function(){\r\n\r\n  editor.getEditorState().read(() => {\r\n    createViewContent($generateHtmlFromNodes(editor))\r\n    setTimeout(() => {\r\n      if(iframeBody.value.scrollHeight > iframeBody.value.offsetHeight){\r\n        iframeContentRef.value.style.height = (iframeBody.value?.scrollHeight + 10)+\"px\";\r\n      }\r\n    }, 100);\r\n  })\r\n\r\n  codeDialogVisible.value = true;\r\n  \r\n}\r\nonMounted(()=>{\r\n  editor.registerCommand(DEVICE_VIEW_MODE,(payload: string) => {\r\n    viewDevice.value = payload;\r\n    return false\r\n  },1)\r\n});\r\n\r\n</script>\r\n\r\n<template>\r\n  <el-button text @click=\"show\">\r\n    <MKSvgIcon iconClass=\"View\" /> \r\n  </el-button>\r\n  <el-dialog v-model=\"codeDialogVisible\" append-to-body title=\"预览\" width=\"80%\" fullscreen>\r\n    <div class=\"mk-doc-editor__view_warp\"  :class=\"viewDevice\" v-if=\"codeDialogVisible\">\r\n      <iframe class=\"mk-doc-editor__view_iframe\" ref=\"iframeContentRef\" :srcdoc=\"srcdoc\"></iframe>\r\n    </div>\r\n   \r\n  </el-dialog>\r\n</template>\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,UAAM,SAAS;AAET,UAAA,mBAAmB,IAAI,IAAW;AACxC,UAAM,aAAa,SAAc;;AAAI,gDAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC,aAAvC,mBAAiD;AAAA,KAAI;AAEpF,UAAA,oBAAoB,IAAI,KAAK;AAC7B,UAAA,SAAS,IAAI,EAAE;AAEf,UAAA,oBAAoB,CAAC,YAAiB;AAC1C,aAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,YAIL,YAAY;AAAA,YACZ,WAAW;AAAA;AAAA;AAAA,+BAGQ,WAAW,SAAO,OAAK,SAAO,MAAM,KAAK,OAAO;AAAA;AAAA;AAAA,IAAA;AAMzE,UAAA,aAAa,IAAI,IAAI;AAE3B,UAAM,OAAO,WAAU;AAEd,aAAA,iBAAiB,KAAK,MAAM;AACf,0BAAA,uBAAuB,MAAM,CAAC;AAChD,mBAAW,MAAM;;AACf,cAAG,WAAW,MAAM,eAAe,WAAW,MAAM,cAAa;AAC/D,6BAAiB,MAAM,MAAM,WAAU,gBAAW,UAAX,mBAAkB,gBAAe,KAAI;AAAA,UAC9E;AAAA,WACC,GAAG;AAAA,MAAA,CACP;AAED,wBAAkB,QAAQ;AAAA,IAAA;AAG5B,cAAU,MAAI;AACL,aAAA,gBAAgB,kBAAiB,CAAC,YAAoB;AAC3D,mBAAW,QAAQ;AACZ,eAAA;AAAA,SACP,CAAC;AAAA,IAAA,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PreviewToolbar.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/PreviewToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport {  useLexicalComposer } from 'lexical-vue'\r\nimport { DEVICE_VIEW_MODE } from \"../commands\"\r\nimport { $generateHtmlFromNodes} from '@lexical/html'\r\nimport { onMounted,ref,computed,defineProps } from \"vue\"\r\nimport DocThemeCss from \"../../themes/doc-theme.css?raw\";\r\nimport DocEditorCss from \"../../themes/doc-editor.css?raw\";\r\n\r\nconst editor = useLexicalComposer()\r\n// 参数\r\nconst props = defineProps({\r\n  js:{ type:String,default:`` },\r\n  css:{ type:String,default:`` }\r\n})\r\n// iframe 编辑器\r\nconst iframeContentRef = ref(null as any);\r\nconst iframeBody = computed<any>(()=>iframeContentRef.value?.contentWindow?.document?.body)\r\n\r\nconst codeDialogVisible = ref(false);\r\nconst srcdoc = ref(\"\");\r\nconst linkStr = props.css.split(\",\").map(path=>{\r\n  return `<link crossorigin href=\"${path}\" />`\r\n}).join(\"\");\r\nconst scriptStr = props.css.split(\",\").map(path=>{\r\n  return `<link crossorigin href=\"${path}\" />`\r\n}).join(\"\");\r\n  // // 扩展的js和css\r\n  // props.js.split(\",\").forEach(path=>{\r\n  //   const script = document.createElement(\"script\");\r\n  //   script.src = path;\r\n  //   script.setAttribute(\"crossorigin\",\"true\")\r\n  //   doc.head.append(script);\r\n  // })\r\n  // props.css.split(\",\").forEach(path=>{\r\n  //   const link = document.createElement(\"link\");\r\n  //   link.href = path;\r\n  //   link.setAttribute(\"crossorigin\",\"true\")\r\n  //   doc.head.append(link);\r\n  // })\r\n\r\n// pc | mobile\r\nconst viewDevice = ref('pc')\r\n\r\n// 创建预览内容\r\nconst createViewContent = (content:string)=>{\r\n  srcdoc.value = `\r\n    <html>\r\n      <head>\r\n        <style type=\"text/css\">\r\n          ${DocEditorCss}\r\n          ${DocThemeCss}\r\n        </style>\r\n        ${linkStr}\r\n      </head>\r\n      <body style=\"font-size:${(viewDevice.value=='pc'?\"14px\":\"18px\")}\">${content}</body>\r\n    </html>\r\n  `;\r\n}\r\n\r\n// 显示\r\nconst show = function(){\r\n\r\n  editor.getEditorState().read(() => {\r\n    createViewContent($generateHtmlFromNodes(editor))\r\n    setTimeout(() => {\r\n      if(iframeBody.value.scrollHeight > iframeBody.value.offsetHeight){\r\n        iframeContentRef.value.style.height = (iframeBody.value?.scrollHeight + 10)+\"px\";\r\n      }\r\n    }, 100);\r\n  })\r\n\r\n  codeDialogVisible.value = true;\r\n  \r\n}\r\nonMounted(()=>{\r\n  editor.registerCommand(DEVICE_VIEW_MODE,(payload: string) => {\r\n    viewDevice.value = payload;\r\n    return false\r\n  },1)\r\n});\r\n\r\n</script>\r\n\r\n<template>\r\n  <el-button text @click=\"show\">\r\n    <MKSvgIcon iconClass=\"View\" /> \r\n  </el-button>\r\n  <el-dialog v-model=\"codeDialogVisible\" append-to-body title=\"预览\" width=\"80%\" fullscreen>\r\n    <div class=\"mk-doc-editor__view_warp\"  :class=\"viewDevice\" v-if=\"codeDialogVisible\">\r\n      <iframe class=\"mk-doc-editor__view_iframe\" ref=\"iframeContentRef\" :srcdoc=\"srcdoc\"></iframe>\r\n    </div>\r\n  </el-dialog>\r\n</template>\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;AASA,UAAM,SAAS;AAEf,UAAM,QAAQ;AAKR,UAAA,mBAAmB,IAAI,IAAW;AACxC,UAAM,aAAa,SAAc;;AAAI,gDAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC,aAAvC,mBAAiD;AAAA,KAAI;AAEpF,UAAA,oBAAoB,IAAI,KAAK;AAC7B,UAAA,SAAS,IAAI,EAAE;AACrB,UAAM,UAAU,MAAM,IAAI,MAAM,GAAG,EAAE,IAAI,CAAM,SAAA;AAC7C,aAAO,2BAA2B,IAAI;AAAA,IAAA,CACvC,EAAE,KAAK,EAAE;AACQ,UAAM,IAAI,MAAM,GAAG,EAAE,IAAI,CAAM,SAAA;AAC/C,aAAO,2BAA2B,IAAI;AAAA,IAAA,CACvC,EAAE,KAAK,EAAE;AAgBJ,UAAA,aAAa,IAAI,IAAI;AAGrB,UAAA,oBAAoB,CAAC,YAAiB;AAC1C,aAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,YAIL,YAAY;AAAA,YACZ,WAAW;AAAA;AAAA,UAEb,OAAO;AAAA;AAAA,+BAEe,WAAW,SAAO,OAAK,SAAO,MAAO,KAAK,OAAO;AAAA;AAAA;AAAA,IAAA;AAMjF,UAAM,OAAO,WAAU;AAEd,aAAA,iBAAiB,KAAK,MAAM;AACf,0BAAA,uBAAuB,MAAM,CAAC;AAChD,mBAAW,MAAM;;AACf,cAAG,WAAW,MAAM,eAAe,WAAW,MAAM,cAAa;AAC/D,6BAAiB,MAAM,MAAM,WAAU,gBAAW,UAAX,mBAAkB,gBAAe,KAAI;AAAA,UAC9E;AAAA,WACC,GAAG;AAAA,MAAA,CACP;AAED,wBAAkB,QAAQ;AAAA,IAAA;AAG5B,cAAU,MAAI;AACL,aAAA,gBAAgB,kBAAiB,CAAC,YAAoB;AAC3D,mBAAW,QAAQ;AACZ,eAAA;AAAA,SACP,CAAC;AAAA,IAAA,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,28 +1,7 @@
 import { defineComponent, ref, onMounted, onUnmounted, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, unref, normalizeClass, Fragment, renderList, createBlock, createTextVNode, toDisplayString } from "vue";
 import { CAN_UNDO_COMMAND, CAN_REDO_COMMAND, UNDO_COMMAND, REDO_COMMAND } from "lexical";
 import { mergeRegister } from "@lexical/utils";
-import "@lexical/text";
-import "@lexical/overflow";
-import "tiny-invariant";
-import "@lexical/history";
-import { useLexicalComposer } from "../../lexical-vue/composables/useLexicalComposer.js";
-import "@lexical/list";
-import "@lexical/dragon";
-import "@lexical/plain-text";
-import "@lexical/rich-text";
-import "@lexical/yjs";
-import "yjs";
-import "../../lexical-vue/components/LexicalDecoratedTeleports.js";
-import "@lexical/html";
-import "@lexical/link";
-import "@lexical/mark";
-import "@lexical/table";
-import "@lexical/hashtag";
-import "@lexical/markdown";
-import "../../lexical-vue/composables/useCollaborationContext.js";
-import "../../lexical-vue/components/LexicalMenu/shared.js";
-import "../../lexical-vue/components/LexicalAutoEmbedPlugin/shared.js";
-import "../../lexical-vue/components/LexicalTypeaheadMenuPlugin/shared.js";
+import { useLexicalComposer } from "lexical-vue";
 import _sfc_main$3 from "./PreviewToolbar.vue.js";
 import _sfc_main$2 from "./FontStyleTool.vue.js";
 import _sfc_main$1 from "./ContentStyleTool.vue.js";
@@ -31,6 +10,10 @@ import { DEVICE_VIEW_MODE } from "../commands.js";
 const LowPriority = 1;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
+  props: {
+    js: { type: String, default: `` },
+    css: { type: String, default: `` }
+  },
   setup(__props) {
     const toolbarRef = ref(null);
     const editor = useLexicalComposer();
@@ -177,7 +160,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         createVNode(_component_el_divider, { direction: "vertical" }),
         createVNode(_component_el_button_group, null, {
           default: withCtx(() => [
-            createVNode(_sfc_main$3)
+            createVNode(_sfc_main$3, {
+              js: __props.js,
+              css: __props.css
+            }, null, 8, ["js", "css"])
           ]),
           _: 1
         })

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

@@ -1 +1 @@
-{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type { CommandListenerPriority } from 'lexical'\r\nimport {\r\n  CAN_REDO_COMMAND,\r\n  CAN_UNDO_COMMAND,\r\n  REDO_COMMAND,\r\n  UNDO_COMMAND,\r\n} from 'lexical'\r\n\r\nimport {  mergeRegister } from '@lexical/utils'\r\nimport {  useLexicalComposer } from '../../lexical-vue'\r\nimport { onMounted, onUnmounted, ref } from 'vue'\r\nimport PreviewToolbar from \"./PreviewToolbar.vue\"\r\nimport FontStyleToolbar from \"./FontStyleTool.vue\"\r\nimport ContentStyleToolbar from \"./ContentStyleTool.vue\"\r\nimport { ToolbarExtendPlugins } from \"./defines\"\r\nimport { DEVICE_VIEW_MODE } from \"../commands\"\r\n\r\n\r\nconst LowPriority: CommandListenerPriority = 1\r\n\r\nconst toolbarRef = ref<HTMLDivElement | null>(null)\r\nconst editor = useLexicalComposer()\r\n\r\nconst canUndo = ref(false)\r\nconst canRedo = ref(false)\r\n// pc | mobile\r\nconst viewDevice = ref('pc')\r\n\r\n\r\nonMounted(() => {\r\n  const unregisterMergeListener = mergeRegister(\r\n    editor.registerCommand(\r\n      CAN_UNDO_COMMAND,\r\n      (payload: boolean) => {\r\n        canUndo.value = payload\r\n        return false\r\n      },\r\n      LowPriority,\r\n    ),\r\n    editor.registerCommand(\r\n      CAN_REDO_COMMAND,\r\n      (payload: boolean) => {\r\n        canRedo.value = payload\r\n        return false\r\n      },\r\n      LowPriority,\r\n    ),\r\n    editor.registerCommand(\r\n      DEVICE_VIEW_MODE,\r\n      (payload: string) => {\r\n        viewDevice.value = payload\r\n        return false\r\n      },\r\n      LowPriority,\r\n    )\r\n  )\r\n\r\n  onUnmounted(() => {\r\n    ToolbarExtendPlugins.length = 0;\r\n    unregisterMergeListener()\r\n  })\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n  <div ref=\"toolbarRef\" class=\"mk-doc-editor-toolbar\">\r\n    <el-button-group>\r\n      <el-button text  :disabled=\"!canUndo\" @click=\"editor.dispatchCommand(UNDO_COMMAND, undefined)\">\r\n        <MKSvgIcon iconClass=\"RefreshLeft\" /> \r\n      </el-button>\r\n      <el-button text  :disabled=\"!canRedo\" @click=\"editor.dispatchCommand(REDO_COMMAND, undefined)\">\r\n        <MKSvgIcon iconClass=\"RefreshRight\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n    <el-divider  direction=\"vertical\" />\r\n    <!-- 内容 -->\r\n    <ContentStyleToolbar />\r\n    <el-divider  direction=\"vertical\" />  \r\n    <!-- 文字样式 -->\r\n    <FontStyleToolbar />\r\n    <el-divider  direction=\"vertical\" />\r\n    \r\n    <el-button-group>\r\n      <el-button text :class=\"`${viewDevice=='pc' ? 'active' : ''}`\" @click=\"editor.dispatchCommand(DEVICE_VIEW_MODE, 'pc')\">\r\n        <MKSvgIcon iconClass=\"Platform\" /> \r\n      </el-button>\r\n      <el-button text :class=\"`${viewDevice=='mobile' ? 'active' : ''}`\" @click=\"editor.dispatchCommand(DEVICE_VIEW_MODE, 'mobile')\">\r\n        <MKSvgIcon iconClass=\"Iphone\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n    <el-divider  direction=\"vertical\" />\r\n    <el-dropdown>\r\n      <el-button text>\r\n        <MKSvgIcon iconClass=\"Plus\" style=\"margin-right: 5px;\" /> 插入\r\n      </el-button>\r\n      <template #dropdown>\r\n        <el-dropdown-menu>\r\n          <el-dropdown-item v-for=\"item in ToolbarExtendPlugins\" :key=\"item\" @click=\"item.action()\">\r\n            <MKSvgIcon :iconClass=\"item.icon\" /> \r\n            {{item.text}}\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    <el-button-group>\r\n      <PreviewToolbar />\r\n    </el-button-group>\r\n  </div>\r\n</template>\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,MAAM,cAAuC;;;;AAEvC,UAAA,aAAa,IAA2B,IAAI;AAClD,UAAM,SAAS;AAET,UAAA,UAAU,IAAI,KAAK;AACnB,UAAA,UAAU,IAAI,KAAK;AAEnB,UAAA,aAAa,IAAI,IAAI;AAG3B,cAAU,MAAM;AACd,YAAM,0BAA0B;AAAA,QAC9B,OAAO;AAAA,UACL;AAAA,UACA,CAAC,YAAqB;AACpB,oBAAQ,QAAQ;AACT,mBAAA;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL;AAAA,UACA,CAAC,YAAqB;AACpB,oBAAQ,QAAQ;AACT,mBAAA;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL;AAAA,UACA,CAAC,YAAoB;AACnB,uBAAW,QAAQ;AACZ,mBAAA;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,MAAA;AAGF,kBAAY,MAAM;AAChB,6BAAqB,SAAS;AACN;MAAA,CACzB;AAAA,IAAA,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type { CommandListenerPriority } from 'lexical'\r\nimport {\r\n  CAN_REDO_COMMAND,\r\n  CAN_UNDO_COMMAND,\r\n  REDO_COMMAND,\r\n  UNDO_COMMAND,\r\n} from 'lexical'\r\n\r\nimport {  mergeRegister } from '@lexical/utils'\r\nimport {  useLexicalComposer } from 'lexical-vue'\r\nimport { onMounted, onUnmounted, ref,defineProps } from 'vue'\r\nimport PreviewToolbar from \"./PreviewToolbar.vue\"\r\nimport FontStyleToolbar from \"./FontStyleTool.vue\"\r\nimport ContentStyleToolbar from \"./ContentStyleTool.vue\"\r\nimport { ToolbarExtendPlugins } from \"./defines\"\r\nimport { DEVICE_VIEW_MODE } from \"../commands\"\r\n\r\n// 参数\r\nconst props = defineProps({\r\n  js:{ type:String,default:`` },\r\n  css:{ type:String,default:`` }\r\n})\r\n\r\nconst LowPriority: CommandListenerPriority = 1\r\n\r\nconst toolbarRef = ref<HTMLDivElement | null>(null)\r\nconst editor = useLexicalComposer()\r\n\r\nconst canUndo = ref(false)\r\nconst canRedo = ref(false)\r\n// pc | mobile\r\nconst viewDevice = ref('pc')\r\n\r\n\r\nonMounted(() => {\r\n  const unregisterMergeListener = mergeRegister(\r\n    editor.registerCommand(\r\n      CAN_UNDO_COMMAND,\r\n      (payload: boolean) => {\r\n        canUndo.value = payload\r\n        return false\r\n      },\r\n      LowPriority,\r\n    ),\r\n    editor.registerCommand(\r\n      CAN_REDO_COMMAND,\r\n      (payload: boolean) => {\r\n        canRedo.value = payload\r\n        return false\r\n      },\r\n      LowPriority,\r\n    ),\r\n    editor.registerCommand(\r\n      DEVICE_VIEW_MODE,\r\n      (payload: string) => {\r\n        viewDevice.value = payload\r\n        return false\r\n      },\r\n      LowPriority,\r\n    )\r\n  )\r\n\r\n  onUnmounted(() => {\r\n    ToolbarExtendPlugins.length = 0;\r\n    unregisterMergeListener()\r\n  })\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n  <div ref=\"toolbarRef\" class=\"mk-doc-editor-toolbar\">\r\n    <el-button-group>\r\n      <el-button text  :disabled=\"!canUndo\" @click=\"editor.dispatchCommand(UNDO_COMMAND, undefined)\">\r\n        <MKSvgIcon iconClass=\"RefreshLeft\" /> \r\n      </el-button>\r\n      <el-button text  :disabled=\"!canRedo\" @click=\"editor.dispatchCommand(REDO_COMMAND, undefined)\">\r\n        <MKSvgIcon iconClass=\"RefreshRight\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n    <el-divider  direction=\"vertical\" />\r\n    <!-- 内容 -->\r\n    <ContentStyleToolbar />\r\n    <el-divider  direction=\"vertical\" />  \r\n    <!-- 文字样式 -->\r\n    <FontStyleToolbar />\r\n    <el-divider  direction=\"vertical\" />\r\n    \r\n    <el-button-group>\r\n      <el-button text :class=\"`${viewDevice=='pc' ? 'active' : ''}`\" @click=\"editor.dispatchCommand(DEVICE_VIEW_MODE, 'pc')\">\r\n        <MKSvgIcon iconClass=\"Platform\" /> \r\n      </el-button>\r\n      <el-button text :class=\"`${viewDevice=='mobile' ? 'active' : ''}`\" @click=\"editor.dispatchCommand(DEVICE_VIEW_MODE, 'mobile')\">\r\n        <MKSvgIcon iconClass=\"Iphone\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n    <el-divider  direction=\"vertical\" />\r\n    <el-dropdown>\r\n      <el-button text>\r\n        <MKSvgIcon iconClass=\"Plus\" style=\"margin-right: 5px;\" /> 插入\r\n      </el-button>\r\n      <template #dropdown>\r\n        <el-dropdown-menu>\r\n          <el-dropdown-item v-for=\"item in ToolbarExtendPlugins\" :key=\"item\" @click=\"item.action()\">\r\n            <MKSvgIcon :iconClass=\"item.icon\" /> \r\n            {{item.text}}\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    <el-button-group>\r\n      <PreviewToolbar :js=\"js\" :css=\"css\" />\r\n    </el-button-group>\r\n  </div>\r\n</template>\r\n"],"names":[],"mappings":";;;;;;;;;AAwBA,MAAM,cAAuC;;;;;;;;AAEvC,UAAA,aAAa,IAA2B,IAAI;AAClD,UAAM,SAAS;AAET,UAAA,UAAU,IAAI,KAAK;AACnB,UAAA,UAAU,IAAI,KAAK;AAEnB,UAAA,aAAa,IAAI,IAAI;AAG3B,cAAU,MAAM;AACd,YAAM,0BAA0B;AAAA,QAC9B,OAAO;AAAA,UACL;AAAA,UACA,CAAC,YAAqB;AACpB,oBAAQ,QAAQ;AACT,mBAAA;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL;AAAA,UACA,CAAC,YAAqB;AACpB,oBAAQ,QAAQ;AACT,mBAAA;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL;AAAA,UACA,CAAC,YAAoB;AACnB,uBAAW,QAAQ;AACZ,mBAAA;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,MAAA;AAGF,kBAAY,MAAM;AAChB,6BAAqB,SAAS;AACN;MAAA,CACzB;AAAA,IAAA,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,22 +1,27 @@
-import { HeadingNode } from "@lexical/rich-text";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { TableNode, TableCellNode, TableRowNode } from "@lexical/table";
 import { ListNode, ListItemNode } from "@lexical/list";
+import { CodeNode, CodeHighlightNode } from "@lexical/code";
 import { AutoLinkNode, LinkNode } from "@lexical/link";
+import { HashtagNode } from "@lexical/hashtag";
 import { ImageNode } from "./ImagePlugin/index.js";
 import { ImageTextNode } from "./ImageTextPlugin/index.js";
 import { HtmlBlockNode } from "./HtmlBlockPlugin/index.js";
+import { RichTextNode } from "./RichTextPlugin/nodes/RichTextNode.js";
 const Nodes = [
   HeadingNode,
   ListNode,
   ListItemNode,
-  // QuoteNode,
-  // CodeNode,
-  // CodeHighlightNode,
-  // TableNode,
-  // TableCellNode,
-  // TableRowNode,
+  QuoteNode,
+  CodeNode,
+  CodeHighlightNode,
+  TableNode,
+  TableCellNode,
+  TableRowNode,
   AutoLinkNode,
   LinkNode,
-  // HashtagNode,
+  HashtagNode,
+  RichTextNode,
   ImageNode,
   ImageTextNode,
   HtmlBlockNode

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

@@ -1 +1 @@
-{"version":3,"file":"nodes.js","sources":["../../../../../../src/components/basic/doc-editor/plugins/nodes.ts"],"sourcesContent":["import type { Klass, LexicalNode } from 'lexical'\r\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\r\nimport { TableCellNode, TableNode, TableRowNode } from '@lexical/table'\r\nimport { ListItemNode, ListNode } from '@lexical/list'\r\nimport { CodeHighlightNode, CodeNode } from '@lexical/code'\r\nimport { AutoLinkNode, LinkNode } from '@lexical/link'\r\nimport { HashtagNode } from '@lexical/hashtag'\r\nimport { ImageNode } from \"./ImagePlugin\"\r\nimport { ImageTextNode } from \"./ImageTextPlugin\"\r\nimport { HtmlBlockNode } from \"./HtmlBlockPlugin\"\r\n\r\nconst Nodes: Array<Klass<LexicalNode>> = [\r\n  HeadingNode,\r\n  ListNode,\r\n  ListItemNode,\r\n  // QuoteNode,\r\n  // CodeNode,\r\n  // CodeHighlightNode,\r\n  // TableNode,\r\n  // TableCellNode,\r\n  // TableRowNode,\r\n  AutoLinkNode,\r\n  LinkNode,\r\n  // HashtagNode,\r\n  ImageNode,\r\n  ImageTextNode,\r\n  HtmlBlockNode\r\n]\r\n\r\nexport default Nodes\r\n"],"names":[],"mappings":";;;;;;AAWA,MAAM,QAAmC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AACF;"}
+{"version":3,"file":"nodes.js","sources":["../../../../../../src/components/basic/doc-editor/plugins/nodes.ts"],"sourcesContent":["import { type Klass, type LexicalNode,TextNode,ElementNode } from 'lexical'\r\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\r\nimport { TableCellNode, TableNode, TableRowNode } from '@lexical/table'\r\nimport { ListItemNode, ListNode } from '@lexical/list'\r\nimport { CodeHighlightNode, CodeNode } from '@lexical/code'\r\nimport { AutoLinkNode, LinkNode } from '@lexical/link'\r\nimport { HashtagNode } from '@lexical/hashtag'\r\nimport { ImageNode } from \"./ImagePlugin\"\r\nimport { ImageTextNode } from \"./ImageTextPlugin\"\r\nimport { HtmlBlockNode } from \"./HtmlBlockPlugin\"\r\nimport { RichTextNode } from \"./RichTextPlugin/nodes/RichTextNode\"\r\n\r\nconst Nodes: Array<Klass<LexicalNode>> = [\r\n  HeadingNode,\r\n  ListNode,\r\n  ListItemNode,\r\n  QuoteNode,\r\n  CodeNode,\r\n  CodeHighlightNode,\r\n  TableNode,\r\n  TableCellNode,\r\n  TableRowNode,\r\n  AutoLinkNode,\r\n  LinkNode,\r\n  HashtagNode,\r\n\r\n  RichTextNode,\r\n  ImageNode,\r\n  ImageTextNode,\r\n  HtmlBlockNode\r\n]\r\n\r\nexport default Nodes\r\n"],"names":[],"mappings":";;;;;;;;;;AAYA,MAAM,QAAmC;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}