@maketribe/ms-app 3.2.4 → 3.2.6

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

@@ -26,7 +26,11 @@ class DecoratorBlockNode extends DecoratorNode {
     self.__format = format;
   }
 }
+function $isDecoratorBlockNode(node) {
+  return node instanceof DecoratorBlockNode;
+}
 export {
+  $isDecoratorBlockNode,
   DecoratorBlockNode
 };
 //# sourceMappingURL=LexicalDecoratorBlockNode.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LexicalDecoratorBlockNode.js","sources":["../../../../../../../src/components/basic/doc-editor/lexical-vue/components/LexicalDecoratorBlockNode.ts"],"sourcesContent":["import type { ElementFormatType, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical'\r\n\r\nimport { DecoratorNode } from 'lexical'\r\nimport type { Component } from 'vue'\r\n\r\nexport type SerializedDecoratorBlockNode = Spread<\r\n  {\r\n    format: ElementFormatType\r\n  },\r\n  SerializedLexicalNode\r\n>\r\n\r\nexport class DecoratorBlockNode extends DecoratorNode<Component> {\r\n  __format?: ElementFormatType\r\n\r\n  constructor(format?: ElementFormatType, key?: NodeKey) {\r\n    super(key)\r\n    this.__format = format || ''\r\n  }\r\n\r\n  exportJSON(): SerializedDecoratorBlockNode {\r\n    return {\r\n      format: this.__format || '',\r\n      type: 'decorator-block',\r\n      version: 1,\r\n    }\r\n  }\r\n\r\n  createDOM() {\r\n    return document.createElement('div')\r\n  }\r\n\r\n  updateDOM() {\r\n    return false\r\n  }\r\n\r\n  setFormat(format: ElementFormatType) {\r\n    const self = this.getWritable()\r\n    self.__format = format\r\n  }\r\n}\r\n\r\nexport function $createDecoratorBlockNode() {\r\n  return new DecoratorBlockNode()\r\n}\r\n\r\nexport function $isDecoratorBlockNode(node: LexicalNode | null | undefined): node is DecoratorBlockNode {\r\n  return node instanceof DecoratorBlockNode\r\n}\r\n"],"names":[],"mappings":";;;;AAYO,MAAM,2BAA2B,cAAyB;AAAA,EAG/D,YAAY,QAA4B,KAAe;AACrD,UAAM,GAAG;AAHX;AAIE,SAAK,WAAW,UAAU;AAAA,EAC5B;AAAA,EAEA,aAA2C;AAClC,WAAA;AAAA,MACL,QAAQ,KAAK,YAAY;AAAA,MACzB,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EAEA,YAAY;AACH,WAAA,SAAS,cAAc,KAAK;AAAA,EACrC;AAAA,EAEA,YAAY;AACH,WAAA;AAAA,EACT;AAAA,EAEA,UAAU,QAA2B;AAC7B,UAAA,OAAO,KAAK;AAClB,SAAK,WAAW;AAAA,EAClB;AACF;"}
+{"version":3,"file":"LexicalDecoratorBlockNode.js","sources":["../../../../../../../src/components/basic/doc-editor/lexical-vue/components/LexicalDecoratorBlockNode.ts"],"sourcesContent":["import type { ElementFormatType, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical'\r\n\r\nimport { DecoratorNode } from 'lexical'\r\nimport type { Component } from 'vue'\r\n\r\nexport type SerializedDecoratorBlockNode = Spread<\r\n  {\r\n    format: ElementFormatType\r\n  },\r\n  SerializedLexicalNode\r\n>\r\n\r\nexport class DecoratorBlockNode extends DecoratorNode<Component> {\r\n  __format?: ElementFormatType\r\n\r\n  constructor(format?: ElementFormatType, key?: NodeKey) {\r\n    super(key)\r\n    this.__format = format || ''\r\n  }\r\n\r\n  exportJSON(): SerializedDecoratorBlockNode {\r\n    return {\r\n      format: this.__format || '',\r\n      type: 'decorator-block',\r\n      version: 1,\r\n    }\r\n  }\r\n\r\n  createDOM() {\r\n    return document.createElement('div')\r\n  }\r\n\r\n  updateDOM() {\r\n    return false\r\n  }\r\n\r\n  setFormat(format: ElementFormatType) {\r\n    const self = this.getWritable()\r\n    self.__format = format\r\n  }\r\n}\r\n\r\nexport function $createDecoratorBlockNode() {\r\n  return new DecoratorBlockNode()\r\n}\r\n\r\nexport function $isDecoratorBlockNode(node: LexicalNode | null | undefined): node is DecoratorBlockNode {\r\n  return node instanceof DecoratorBlockNode\r\n}\r\n"],"names":[],"mappings":";;;;AAYO,MAAM,2BAA2B,cAAyB;AAAA,EAG/D,YAAY,QAA4B,KAAe;AACrD,UAAM,GAAG;AAHX;AAIE,SAAK,WAAW,UAAU;AAAA,EAC5B;AAAA,EAEA,aAA2C;AAClC,WAAA;AAAA,MACL,QAAQ,KAAK,YAAY;AAAA,MACzB,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EAEA,YAAY;AACH,WAAA,SAAS,cAAc,KAAK;AAAA,EACrC;AAAA,EAEA,YAAY;AACH,WAAA;AAAA,EACT;AAAA,EAEA,UAAU,QAA2B;AAC7B,UAAA,OAAO,KAAK;AAClB,SAAK,WAAW;AAAA,EAClB;AACF;AAMO,SAAS,sBAAsB,MAAkE;AACtG,SAAO,gBAAgB;AACzB;"}

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, onUnmounted, onMounted, openBlock, createElementBlock, renderSlot, unref, createCommentVNode, createVNode } from "vue";
+import { defineComponent, ref, computed, onMounted, watch, onUnmounted, openBlock, createElementBlock, renderSlot, unref, createCommentVNode, createVNode } from "vue";
 import { useCanShowPlaceholder } from "../composables/useCanShowPlaceholder.js";
 import "@lexical/overflow";
 import "@lexical/text";
@@ -32,26 +32,32 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const htmlContent = ref("");
     const contentIsEmpty = computed(() => htmlContent.value == `<p class="mk-doc__paragraph"><br></p>` || !htmlContent.value);
     const setHtml = (html) => {
-      let nodes = [];
-      htmlContent.value = html;
-      editor.update(() => {
-        var _a;
-        if (html.trim()) {
-          nodes = $generateNodesFromDOM(editor, parser.parseFromString(html.trim(), "text/html"));
-        }
-        $selectAll();
-        (_a = $getSelection()) == null ? void 0 : _a.insertNodes(nodes);
-      });
+      if (htmlContent.value != html) {
+        let nodes = [];
+        htmlContent.value = html;
+        editor.update(() => {
+          var _a, _b;
+          if (html.trim()) {
+            nodes = $generateNodesFromDOM(editor, parser.parseFromString(html.trim(), "text/html"));
+          }
+          $selectAll();
+          if (nodes.length > 0) {
+            (_a = $getSelection()) == null ? void 0 : _a.insertNodes(nodes);
+          } else {
+            (_b = $getSelection()) == null ? void 0 : _b.insertText("");
+          }
+        });
+      }
     };
-    const unregisterMergeListener = editor.registerUpdateListener(({ editorState }) => {
-      editorState.read(() => {
-        htmlContent.value = $generateHtmlFromNodes(editor);
-        emit("change", htmlContent.value);
-      });
-    });
-    onUnmounted(() => unregisterMergeListener());
     onMounted(() => {
-      setHtml(props.content);
+      watch(() => props.content, setHtml, { immediate: true });
+      watch(htmlContent, (value) => emit("change", value));
+      const unregisterMergeListener = editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          htmlContent.value = $generateHtmlFromNodes(editor);
+        });
+      });
+      onUnmounted(() => unregisterMergeListener());
     });
     useRichTextSetup(editor);
     return (_ctx, _cache) => {

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

@@ -1 +1 @@
-{"version":3,"file":"LexicalRichTextPlugin.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/lexical-vue/components/LexicalRichTextPlugin.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { useCanShowPlaceholder, useLexicalComposer, useRichTextSetup } from '../composables'\r\nimport Decorators from './LexicalDecoratedTeleports'\r\nimport { ref,defineProps,computed,defineEmits,onMounted,onUnmounted } from \"vue\"\r\nimport { $getRoot, $getSelection ,$createRangeSelection,$selectAll } from 'lexical'\r\nimport { $generateHtmlFromNodes,$generateNodesFromDOM } from '@lexical/html'\r\n\r\n// 事件\r\nconst emit = defineEmits([\"change\"]);\r\n\r\n// 参数\r\nconst props = defineProps({\r\n  content:{ 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\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    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        // 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      $selectAll();\r\n      $getSelection()?.insertNodes(nodes);\r\n    })\r\n}\r\n\r\n// 更新操作\r\nconst unregisterMergeListener = editor.registerUpdateListener(({ editorState }) => {\r\n  editorState.read(() => {\r\n    htmlContent.value = $generateHtmlFromNodes(editor);\r\n    emit('change',htmlContent.value);\r\n  })\r\n})\r\n\r\nonUnmounted(() => unregisterMergeListener());\r\n\r\nonMounted(()=>{\r\n  // 初始化\r\n  setHtml(props.content);\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    <slot name=\"contentEditable\"></slot>\r\n    <slot v-if=\"canShowPlaceholder && contentIsEmpty\" name=\"placeholder\"></slot>\r\n    <Decorators />\r\n  </div>\r\n\r\n</template>\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,UAAM,OAAO;AAGb,UAAM,QAAQ;AAId,UAAM,SAAS;AAET,UAAA,qBAAqB,sBAAsB,MAAM;AAEjD,UAAA,SAAS,IAAI;AAEb,UAAA,cAAc,IAAI,EAAE;AAGpB,UAAA,iBAAiB,SAAS,MAAI,YAAY,SAAS,2CAA2C,CAAC,YAAY,KAAK;AAGhH,UAAA,UAAU,CAAC,SAAa;AAE1B,UAAI,QAAqB,CAAA;AAEzB,kBAAY,QAAQ;AAEpB,aAAO,OAAO,MAAI;;AAEb,YAAA,KAAK,QAAO;AAEL,kBAAA,sBAAsB,QAAO,OAAO,gBAAgB,KAAK,KAAK,GAAE,WAAW,CAAC;AAAA,QACtF;AAEW;AACG,4BAAA,MAAA,mBAAG,YAAY;AAAA,MAAK,CACnC;AAAA,IAAA;AAIL,UAAM,0BAA0B,OAAO,uBAAuB,CAAC,EAAE,kBAAkB;AACjF,kBAAY,KAAK,MAAM;AACT,oBAAA,QAAQ,uBAAuB,MAAM;AAC5C,aAAA,UAAS,YAAY,KAAK;AAAA,MAAA,CAChC;AAAA,IAAA,CACF;AAEW,gBAAA,MAAM,yBAAyB;AAE3C,cAAU,MAAI;AAEZ,cAAQ,MAAM,OAAO;AAAA,IAAA,CACtB;AAID,qBAAiB,MAAM;;;;;;;;;;"}
+{"version":3,"file":"LexicalRichTextPlugin.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/lexical-vue/components/LexicalRichTextPlugin.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { useCanShowPlaceholder, useLexicalComposer, useRichTextSetup } from '../composables'\r\nimport Decorators from './LexicalDecoratedTeleports'\r\nimport { ref,defineProps,computed,defineEmits,onMounted,onUnmounted,watch } from \"vue\"\r\nimport { $getRoot, $getSelection ,$createRangeSelection,$selectAll } from 'lexical'\r\nimport { $generateHtmlFromNodes,$generateNodesFromDOM } from '@lexical/html'\r\n\r\n// 事件\r\nconst emit = defineEmits([\"change\"]);\r\n\r\n// 参数\r\nconst props = defineProps({\r\n  content:{ 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          // 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        $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\n\r\nonMounted(()=>{\r\n  // 初始化\r\n  watch(()=>props.content,setHtml,{ immediate:true });\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    <slot name=\"contentEditable\"></slot>\r\n    <slot v-if=\"canShowPlaceholder && contentIsEmpty\" name=\"placeholder\"></slot>\r\n    <Decorators />\r\n  </div>\r\n\r\n</template>\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,UAAM,OAAO;AAGb,UAAM,QAAQ;AAId,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;AAEL,oBAAA,sBAAsB,QAAO,OAAO,gBAAgB,KAAK,KAAK,GAAE,WAAW,CAAC;AAAA,UACtF;AAEW;AAER,cAAA,MAAM,SAAS,GAAE;AACJ,gCAAA,MAAA,mBAAG,YAAY;AAAA,UAAK,OAEhC;AACY,gCAAA,MAAA,mBAAG,WAAW;AAAA,UAC9B;AAAA,QAAA,CAED;AAAA,MACH;AAAA,IAAA;AAIJ,cAAU,MAAI;AAEZ,YAAM,MAAI,MAAM,SAAQ,SAAQ,EAAE,WAAU,MAAM;AAElD,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,CAC5C;AAID,qBAAiB,MAAM;;;;;;;;;;"}

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

@@ -0,0 +1,94 @@
+import { defineComponent, ref, createVNode, mergeProps } from "vue";
+import { CLICK_COMMAND, COMMAND_PRIORITY_LOW } from "lexical";
+import { mergeRegister } from "@lexical/utils";
+import "@lexical/text";
+import { useMounted } from "../../lexical-vue/composables/useMounted.js";
+import "@lexical/overflow";
+import "tiny-invariant";
+import "@lexical/history";
+import { useLexicalComposer } from "../../lexical-vue/composables/useLexicalComposer.js";
+import { useLexicalNodeSelection } from "../../lexical-vue/composables/useLexicalNodeSelection.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 _sfc_main from "../../lexical-vue/components/LexicalBlockWithAlignableContents.vue2.js";
+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";
+const DocHtmlBlockComponent = /* @__PURE__ */ defineComponent({
+  name: "DocHtmlBlockComponent",
+  props: ["baseClass", "focusClass", "nodeKey", "attrs"],
+  setup(props) {
+    const editor = useLexicalComposer();
+    const {
+      isSelected,
+      setSelected,
+      clearSelection
+    } = useLexicalNodeSelection(props.nodeKey);
+    const selfElRef = ref(null);
+    useMounted(() => {
+      return mergeRegister(
+        // 选中图
+        editor.registerCommand(CLICK_COMMAND, (event) => {
+          console.log(event.target);
+          if (event.target === selfElRef.value) {
+            event.preventDefault();
+            if (!event.shiftKey) {
+              clearSelection();
+            }
+            setSelected(true);
+            return true;
+          }
+          return false;
+        }, COMMAND_PRIORITY_LOW)
+      );
+    });
+    return () => {
+      return createVNode(_sfc_main, {
+        "nodeKey": "props.nodeKey"
+      }, {
+        default: () => [createVNode("iframe", mergeProps({
+          "ref": (el) => selfElRef.value = el,
+          "srcdoc": `
+          <html>
+            <head>
+              <style type="text/css">
+                ${props.attrs.css}
+              </style>
+               <script>
+                ${props.attrs.js}
+              <\/script>
+            </head>
+            <body>${props.attrs.content}</body>
+          </html>
+          `,
+          "style": {
+            width: "100%",
+            padding: 0,
+            margin: 0
+          }
+        }, {
+          frameborder: 0,
+          allowFullScreen: true
+        }, {
+          "allow": "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        }), null)]
+      });
+    };
+  }
+});
+export {
+  DocHtmlBlockComponent as default
+};
+//# sourceMappingURL=DocHtmlBlockComponent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DocHtmlBlockComponent.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/HtmlBlockPlugin/DocHtmlBlockComponent.tsx"],"sourcesContent":["import type { ElementFormatType } from \"lexical\";\nimport {\n  $getSelection,\n  $isNodeSelection,\n  CLICK_COMMAND,\n  COMMAND_PRIORITY_LOW,\n} from \"lexical\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport {\n  useLexicalComposer,\n  useLexicalNodeSelection,\n  useMounted,\n  DecoratorBlockNode,\n  LexicalBlockWithAlignableContents,\n} from \"../../lexical-vue\";\nimport { defineComponent, ref, reactive, computed, watch } from \"vue\";\nimport { Messager } from \"@maketribe/dm\";\n\n/**\n * 图片渲染组件\n */\nexport default defineComponent({\n  name: \"DocHtmlBlockComponent\",\n  props: [\"baseClass\", \"focusClass\", \"nodeKey\", \"attrs\"],\n  setup(props) {\n    const editor = useLexicalComposer();\n    const { isSelected, setSelected, clearSelection } = useLexicalNodeSelection(\n      props.nodeKey\n    );\n    const selfElRef = ref<any>(null);\n\n    // 编辑器挂载的时候\n    useMounted(() => {\n      return mergeRegister(\n        // 选中图\n        editor.registerCommand<MouseEvent>(\n          CLICK_COMMAND,\n          (event) => {\n            console.log(event.target);\n            if (event.target === selfElRef.value) {\n              event.preventDefault();\n\n              if (!event.shiftKey) {\n                clearSelection();\n              }\n\n              setSelected(true);\n\n              return true;\n            }\n\n            return false;\n          },\n          COMMAND_PRIORITY_LOW\n        )\n      );\n    });\n\n    return () => {\n      return (\n        <LexicalBlockWithAlignableContents nodeKey=\"props.nodeKey\">\n          <iframe\n            ref={(el) => (selfElRef.value = el)}\n            srcdoc={`\n          <html>\n            <head>\n              <style type=\"text/css\">\n                ${props.attrs.css}\n              </style>\n               <script>\n                ${props.attrs.js}\n              </script>\n            </head>\n            <body>${props.attrs.content}</body>\n          </html>\n          `}\n            style={{ width: \"100%\", padding: 0, margin: 0 }}\n            {...{ frameborder: 0, allowFullScreen: true }}\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n          ></iframe>\n        </LexicalBlockWithAlignableContents>\n      );\n    };\n  },\n});\n"],"names":["defineComponent","name","props","setup","editor","useLexicalComposer","isSelected","setSelected","clearSelection","useLexicalNodeSelection","nodeKey","selfElRef","ref","useMounted","mergeRegister","registerCommand","CLICK_COMMAND","event","console","log","target","value","preventDefault","shiftKey","COMMAND_PRIORITY_LOW","_createVNode","LexicalBlockWithAlignableContents","default","_mergeProps","el","attrs","css","js","content","width","padding","margin","frameborder","allowFullScreen"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAeA,wDAAgB;AAAA,EAC7BC,MAAM;AAAA,EACNC,OAAO,CAAC,aAAa,cAAc,WAAW,OAAO;AAAA,EACrDC,MAAMD,OAAO;AACX,UAAME,SAASC;AACf,UAAM;AAAA,MAAEC;AAAAA,MAAYC;AAAAA,MAAaC;AAAAA,IAAe,IAAIC,wBAClDP,MAAMQ,OACR;AACA,UAAMC,YAAYC,IAAS,IAAI;AAG/BC,eAAW,MAAM;AACf,aAAOC;AAAAA;AAAAA,QAELV,OAAOW,gBACLC,eACCC,WAAU;AACTC,kBAAQC,IAAIF,MAAMG,MAAM;AACxB,cAAIH,MAAMG,WAAWT,UAAUU,OAAO;AACpCJ,kBAAMK,eAAc;AAEpB,gBAAI,CAACL,MAAMM,UAAU;AACnBf;YACF;AAEAD,wBAAY,IAAI;AAEhB,mBAAO;AAAA,UACT;AAEA,iBAAO;AAAA,WAETiB,oBACF;AAAA,MACF;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,aAAAC,YAAAC,WAAA;AAAA,QAAA,WAAA;AAAA,MAAA,GAAA;AAAA,QAAAC,SAAAA,MAAAF,CAAAA,sBAAAG,WAAA;AAAA,UAAA,OAGYC,QAAQlB,UAAUU,QAAQQ;AAAAA,UAAG,UAC3B;AAAA;AAAA;AAAA;AAAA,kBAIF3B,MAAM4B,MAAMC,GAAG;AAAA;AAAA;AAAA,kBAGf7B,MAAM4B,MAAME,EAAE;AAAA;AAAA;AAAA,oBAGZ9B,MAAM4B,MAAMG,OAAO;AAAA;AAAA;AAAA,UAE5B,SACQ;AAAA,YAAEC,OAAO;AAAA,YAAQC,SAAS;AAAA,YAAGC,QAAQ;AAAA,UAAE;AAAA,QAAC,GAAA;AAAA,UACzCC,aAAa;AAAA,UAAGC,iBAAiB;AAAA,QAAI,GAAA;AAAA,UAAA,SAAA;AAAA,QAAA,CAAA,GAAA,IAAA,CAAA;AAAA,MAAA,CAAA;AAAA;EAMrD;AACF,CAAC;"}

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

@@ -0,0 +1,128 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { createCommand } from "lexical";
+import { h } from "vue";
+import "@lexical/text";
+import "@lexical/utils";
+import "@lexical/overflow";
+import "tiny-invariant";
+import "@lexical/history";
+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 { DecoratorBlockNode } from "../../lexical-vue/components/LexicalDecoratorBlockNode.js";
+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 DocHtmlBlockComponent from "./DocHtmlBlockComponent.js";
+createCommand("HTML_BLOCK_CHANGE");
+createCommand("REMOVE_HTML_BLOCK_COMMAND");
+const INSERT_HTML_BLOCK_COMMAND = createCommand("INSERT_HTML_BLOCK_COMMAND");
+class HtmlBlockNode extends DecoratorBlockNode {
+  constructor(attrs, format, key) {
+    super(format, key);
+    __publicField(this, "__attrs");
+    this.__attrs = attrs;
+  }
+  static getType() {
+    return "HtmlBlock";
+  }
+  static clone(node) {
+    return new HtmlBlockNode(node.__attrs, node.__format, node.__key);
+  }
+  static importJSON(serializedNode) {
+    const node = $createHtmlBlockNode(serializedNode.attrs);
+    node.setFormat(serializedNode.format);
+    return node;
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: this.getType(),
+      version: 1,
+      attrs: this.__attrs
+    };
+  }
+  exportDOM() {
+    const element = document.createElement("div");
+    element.innerHTML = this.__attrs.content;
+    if (this.__attrs.js) {
+      const script = document.createElement("script");
+      script.innerHTML = this.__attrs.js;
+      element.append(script);
+    }
+    if (this.__attrs.css) {
+      const style = document.createElement("style");
+      style.innerHTML = this.__attrs.css;
+      element.append(style);
+    }
+    element.setAttribute("class", "mk-doc-html-block");
+    return { element };
+  }
+  static importDOM() {
+    return {
+      img: (dn) => {
+        return {
+          conversion: (domNode) => {
+            let css = "";
+            let js = "";
+            domNode.childNodes.forEach((node) => {
+              if (node.nodeName.toLowerCase() == "style") {
+                css += "\r\n" + node.textContent;
+                node.remove();
+              } else if (node.nodeName.toLowerCase() == "script") {
+                js += "\r\n" + node.textContent;
+                node.remove();
+              }
+            });
+            return domNode.classList.contains("mk-doc-html-block") ? {
+              node: $createHtmlBlockNode({
+                content: domNode.innerHTML,
+                css,
+                js
+              })
+            } : null;
+          },
+          priority: 0
+        };
+      }
+    };
+  }
+  updateDOM() {
+    return false;
+  }
+  getTextContent(_includeInert, _includeDirectionless) {
+    return this.__attrs.content;
+  }
+  decorate(_editor, config) {
+    const embedBlockTheme = config.theme.embedBlock || {};
+    return h(DocHtmlBlockComponent, {
+      baseClass: embedBlockTheme.base || "",
+      focusClass: embedBlockTheme.focus || "",
+      format: this.__format,
+      nodeKey: this.getKey(),
+      attrs: this.__attrs
+    });
+  }
+}
+function $createHtmlBlockNode(attrs) {
+  return new HtmlBlockNode(attrs);
+}
+export {
+  $createHtmlBlockNode,
+  HtmlBlockNode,
+  INSERT_HTML_BLOCK_COMMAND
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/HtmlBlockPlugin/index.ts"],"sourcesContent":["\r\nimport type {\r\n  DOMConversionMap,\r\n  DOMConversionOutput,\r\n  DOMExportOutput,\r\n  EditorConfig,\r\n  ElementFormatType,\r\n  LexicalEditor,\r\n  LexicalNode,\r\n  NodeKey,\r\n  Spread,\r\n  LexicalCommand\r\n} from 'lexical'\r\nimport { createCommand } from 'lexical'\r\nimport { DecoratorBlockNode,type SerializedDecoratorBlockNode  } from '../../lexical-vue'\r\nimport { h ,type Component} from 'vue'\r\nimport DocHtmlBlockComponent from \"./DocHtmlBlockComponent\"\r\n\r\n/**\r\n * html块类型\r\n */\r\nexport type HtmlBlockAttrs = { content:string, css?:string, js?:string };\r\n\r\n/**\r\n * html块改变\r\n */\r\nexport const HTML_BLOCK_CHANGE: LexicalCommand<HtmlBlockAttrs> = createCommand('HTML_BLOCK_CHANGE')\r\n\r\n/**\r\n * 删除html块\r\n */\r\nexport const REMOVE_HTML_BLOCK_COMMAND: LexicalCommand<undefined|null> = createCommand('REMOVE_HTML_BLOCK_COMMAND')\r\n\r\n\r\n/**\r\n * 插入html块指令\r\n */\r\nexport const INSERT_HTML_BLOCK_COMMAND: LexicalCommand<HtmlBlockAttrs> = createCommand('INSERT_HTML_BLOCK_COMMAND')\r\n\r\n/**\r\n * 图片节点序列化\r\n */\r\nexport type SerializedHtmlBlockNode = Spread<\r\n  {\r\n    attrs: HtmlBlockAttrs\r\n  },\r\n  SerializedDecoratorBlockNode\r\n>\r\n\r\n/**\r\n * 定义图片节点\r\n */\r\nexport class HtmlBlockNode extends DecoratorBlockNode {\r\n  __attrs: HtmlBlockAttrs\r\n\r\n  static getType(): string {\r\n    return 'HtmlBlock'\r\n  }\r\n\r\n  static clone(node: HtmlBlockNode): HtmlBlockNode {\r\n    return new HtmlBlockNode(node.__attrs, node.__format, node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedHtmlBlockNode): HtmlBlockNode {\r\n    const node = $createHtmlBlockNode(serializedNode.attrs)\r\n    node.setFormat(serializedNode.format)\r\n    return node\r\n  }\r\n\r\n  constructor(attrs: HtmlBlockAttrs, format?: ElementFormatType, key?: NodeKey) {\r\n    super(format, key)\r\n    this.__attrs = attrs\r\n  }\r\n\r\n  exportJSON(): SerializedHtmlBlockNode {\r\n\r\n    return {\r\n      ...super.exportJSON(),\r\n      type: this.getType(),\r\n      version: 1,\r\n      attrs: this.__attrs,\r\n    }\r\n  }\r\n\r\n  exportDOM(): DOMExportOutput {\r\n\r\n    const element = document.createElement('div')  \r\n\r\n    // 内容\r\n    element.innerHTML = this.__attrs.content;\r\n\r\n    if(this.__attrs.js){\r\n      const script = document.createElement('script') \r\n      script.innerHTML = this.__attrs.js;\r\n      element.append(script);\r\n    }\r\n\r\n    if(this.__attrs.css){\r\n      const style = document.createElement('style')\r\n      style.innerHTML = this.__attrs.css;\r\n      element.append(style);\r\n    }\r\n\r\n\r\n    element.setAttribute(\"class\",\"mk-doc-html-block\")\r\n    \r\n    return { element }\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      img: (dn: HTMLElement) => {\r\n        return  {\r\n          conversion: (domNode: HTMLElement) => {\r\n\r\n            let css = \"\";\r\n            let js = \"\";\r\n\r\n            domNode.childNodes.forEach((node:ChildNode)=>{\r\n\r\n              if(node.nodeName.toLowerCase() == \"style\"){\r\n                css+=\"\\r\\n\"+node.textContent;\r\n                node.remove()\r\n              }\r\n              else if(node.nodeName.toLowerCase() == \"script\"){\r\n                js+=\"\\r\\n\"+node.textContent;\r\n                node.remove()\r\n              }\r\n            });\r\n        \r\n            return domNode.classList.contains(\"mk-doc-html-block\") ?  { \r\n              node:$createHtmlBlockNode({\r\n                content:domNode.innerHTML, css, js\r\n              } as HtmlBlockAttrs) \r\n            } : null;\r\n          },\r\n          priority: 0\r\n        }\r\n      },\r\n    }\r\n  }\r\n\r\n  updateDOM(): false {\r\n    return false\r\n  }\r\n\r\n  getTextContent(\r\n    _includeInert?: boolean | undefined,\r\n    _includeDirectionless?: false | undefined,\r\n  ): string {\r\n    return this.__attrs.content\r\n  }\r\n\r\n  decorate(_editor: LexicalEditor, config: EditorConfig): Component {\r\n    const embedBlockTheme = config.theme.embedBlock || {}\r\n    return h(DocHtmlBlockComponent, {\r\n      baseClass: embedBlockTheme.base || '',\r\n      focusClass: embedBlockTheme.focus || '',\r\n      format: this.__format,\r\n      nodeKey: this.getKey(),\r\n      attrs: this.__attrs\r\n    })\r\n  }\r\n}\r\n\r\n/**\r\n * 创建图片节点\r\n * @param src \r\n * @returns \r\n */\r\nexport function $createHtmlBlockNode(attrs: HtmlBlockAttrs): HtmlBlockNode {\r\n  return new HtmlBlockNode(attrs)\r\n}\r\n\r\n/**\r\n * 判断是否是图片节点\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isHtmlBlockNode(\r\n  node: HtmlBlockNode | LexicalNode | null | undefined,\r\n): node is HtmlBlockNode {\r\n  return node instanceof HtmlBlockNode\r\n}\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BiE,cAAc,mBAAmB;AAKzB,cAAc,2BAA2B;AAMrG,MAAA,4BAA4D,cAAc,2BAA2B;AAe3G,MAAM,sBAAsB,mBAAmB;AAAA,EAiBpD,YAAY,OAAuB,QAA4B,KAAe;AAC5E,UAAM,QAAQ,GAAG;AAjBnB;AAkBE,SAAK,UAAU;AAAA,EACjB;AAAA,EAjBA,OAAO,UAAkB;AAChB,WAAA;AAAA,EACT;AAAA,EAEA,OAAO,MAAM,MAAoC;AAC/C,WAAO,IAAI,cAAc,KAAK,SAAS,KAAK,UAAU,KAAK,KAAK;AAAA,EAClE;AAAA,EAEA,OAAO,WAAW,gBAAwD;AAClE,UAAA,OAAO,qBAAqB,eAAe,KAAK;AACjD,SAAA,UAAU,eAAe,MAAM;AAC7B,WAAA;AAAA,EACT;AAAA,EAOA,aAAsC;AAE7B,WAAA;AAAA,MACL,GAAG,MAAM,WAAW;AAAA,MACpB,MAAM,KAAK,QAAQ;AAAA,MACnB,SAAS;AAAA,MACT,OAAO,KAAK;AAAA,IAAA;AAAA,EAEhB;AAAA,EAEA,YAA6B;AAErB,UAAA,UAAU,SAAS,cAAc,KAAK;AAGpC,YAAA,YAAY,KAAK,QAAQ;AAE9B,QAAA,KAAK,QAAQ,IAAG;AACX,YAAA,SAAS,SAAS,cAAc,QAAQ;AACvC,aAAA,YAAY,KAAK,QAAQ;AAChC,cAAQ,OAAO,MAAM;AAAA,IACvB;AAEG,QAAA,KAAK,QAAQ,KAAI;AACZ,YAAA,QAAQ,SAAS,cAAc,OAAO;AACtC,YAAA,YAAY,KAAK,QAAQ;AAC/B,cAAQ,OAAO,KAAK;AAAA,IACtB;AAGQ,YAAA,aAAa,SAAQ,mBAAmB;AAEhD,WAAO,EAAE,QAAQ;AAAA,EACnB;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAK,CAAC,OAAoB;AAChB,eAAA;AAAA,UACN,YAAY,CAAC,YAAyB;AAEpC,gBAAI,MAAM;AACV,gBAAI,KAAK;AAED,oBAAA,WAAW,QAAQ,CAAC,SAAiB;AAE3C,kBAAG,KAAK,SAAS,YAAY,KAAK,SAAQ;AACxC,uBAAK,SAAO,KAAK;AACjB,qBAAK,OAAO;AAAA,cAEN,WAAA,KAAK,SAAS,YAAA,KAAiB,UAAS;AAC9C,sBAAI,SAAO,KAAK;AAChB,qBAAK,OAAO;AAAA,cACd;AAAA,YAAA,CACD;AAED,mBAAO,QAAQ,UAAU,SAAS,mBAAmB,IAAK;AAAA,cACxD,MAAK,qBAAqB;AAAA,gBACxB,SAAQ,QAAQ;AAAA,gBAAW;AAAA,gBAAK;AAAA,cAAA,CACf;AAAA,YACjB,IAAA;AAAA,UACN;AAAA,UACA,UAAU;AAAA,QAAA;AAAA,MAEd;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,YAAmB;AACV,WAAA;AAAA,EACT;AAAA,EAEA,eACE,eACA,uBACQ;AACR,WAAO,KAAK,QAAQ;AAAA,EACtB;AAAA,EAEA,SAAS,SAAwB,QAAiC;AAChE,UAAM,kBAAkB,OAAO,MAAM,cAAc,CAAA;AACnD,WAAO,EAAE,uBAAuB;AAAA,MAC9B,WAAW,gBAAgB,QAAQ;AAAA,MACnC,YAAY,gBAAgB,SAAS;AAAA,MACrC,QAAQ,KAAK;AAAA,MACb,SAAS,KAAK,OAAO;AAAA,MACrB,OAAO,KAAK;AAAA,IAAA,CACb;AAAA,EACH;AACF;AAOO,SAAS,qBAAqB,OAAsC;AAClE,SAAA,IAAI,cAAc,KAAK;AAChC;"}

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

@@ -0,0 +1,52 @@
+import { defineComponent, onMounted, onUnmounted } from "vue";
+import "@lexical/text";
+import { mergeRegister, $insertNodeToNearestRoot } from "@lexical/utils";
+import "@lexical/overflow";
+import { COMMAND_PRIORITY_EDITOR } from "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 { HtmlBlockNode, INSERT_HTML_BLOCK_COMMAND, $createHtmlBlockNode } from "./index.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  setup(__props) {
+    const editor = useLexicalComposer();
+    onMounted(() => {
+      if (!editor.hasNodes([HtmlBlockNode])) {
+        throw new Error("HtmlBlockPlugin: 自定义HTML代码块节点未注册！");
+      }
+      const unregister = mergeRegister(
+        // 插入
+        editor.registerCommand(INSERT_HTML_BLOCK_COMMAND, (payload) => {
+          $insertNodeToNearestRoot($createHtmlBlockNode(payload));
+          return true;
+        }, COMMAND_PRIORITY_EDITOR)
+      );
+      onUnmounted(() => unregister());
+    });
+    return (_ctx, _cache) => {
+      return null;
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=index.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/HtmlBlockPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useLexicalComposer } from '../../lexical-vue'\nimport { $insertNodeToNearestRoot,mergeRegister } from '@lexical/utils'\nimport { COMMAND_PRIORITY_EDITOR,COMMAND_PRIORITY_LOW,$getSelection,CLICK_COMMAND } from 'lexical'\n\nimport { onMounted, onUnmounted } from 'vue'\nimport { INSERT_HTML_BLOCK_COMMAND,HtmlBlockNode,$createHtmlBlockNode,HtmlBlockAttrs } from './index'\nimport { RegisterToolbarExtend,type ToolbarExtendPlugin } from \"../ToolbarPlugin/defines\"\n\n\nconst editor = useLexicalComposer()\n\nonMounted(() => {\n\n  if (!editor.hasNodes([HtmlBlockNode])){\n    throw new Error('HtmlBlockPlugin: 自定义HTML代码块节点未注册！')\n  }\n \n  // 注册到工具条\n  // RegisterToolbarExtend({\n  //   icon:\"html-code\",\n  //   text:\"自定义代码块\",\n  //   action:async ()=>{\n  //     editor.dispatchCommand(INSERT_HTML_BLOCK_COMMAND,{\n  //       content:`<div class=\"aa\">我是自定义代码块</div>`,\n  //       css:\"div.aa{ width:100%;height:300px }\"\n  //     })\n  //   },\n  //   sort:9\n  // } as ToolbarExtendPlugin)\n\n  // 注册指令\n  const unregister = mergeRegister(\n\n    // 插入\n    editor.registerCommand<HtmlBlockAttrs>(INSERT_HTML_BLOCK_COMMAND,(payload) => {\n      $insertNodeToNearestRoot($createHtmlBlockNode(payload))\n      return true\n    },COMMAND_PRIORITY_EDITOR),\n  );\n\n  onUnmounted(() => unregister())\n})\n</script>\n\n<template />\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,UAAM,SAAS;AAEf,cAAU,MAAM;AAEd,UAAI,CAAC,OAAO,SAAS,CAAC,aAAa,CAAC,GAAE;AAC9B,cAAA,IAAI,MAAM,mCAAmC;AAAA,MACrD;AAgBA,YAAM,aAAa;AAAA;AAAA,QAGjB,OAAO,gBAAgC,2BAA0B,CAAC,YAAY;AACnD,mCAAA,qBAAqB,OAAO,CAAC;AAC/C,iBAAA;AAAA,WACP,uBAAuB;AAAA,MAAA;AAGf,kBAAA,MAAM,YAAY;AAAA,IAAA,CAC/B;;;;;;"}

package/dist/esm/components/basic/doc-editor/plugins/HtmlBlockPlugin/index.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./index.vue.js";
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=index.vue2.js.map

package/dist/esm/components/basic/doc-editor/plugins/HtmlBlockPlugin/index.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -1,4 +1,4 @@
-import { defineComponent, ref, reactive, computed, onMounted, createVNode } from "vue";
+import { defineComponent, ref, reactive, computed, watch, createVNode } from "vue";
 import { CLICK_COMMAND, COMMAND_PRIORITY_LOW, $getSelection, $isNodeSelection } from "lexical";
 import { mergeRegister } from "@lexical/utils";
 import "@lexical/text";
@@ -73,21 +73,27 @@ const DocImageComponent = /* @__PURE__ */ defineComponent({
       loading.value = true;
       return new Promise((resolve, reject) => {
         const image = new Image();
-        image.onload = () => resolve(image.src);
+        const loadComplete = () => {
+          viewSrc.value = image.src;
+          attrs.src = src;
+          loadingText.value = "";
+          loading.value = false;
+          resolve(image.src);
+        };
+        image.onload = () => loadComplete();
         image.onerror = reject;
         image.src = src;
         if (image.complete) {
-          resolve(image.src);
+          loadComplete();
         }
       });
     };
-    onMounted(() => {
+    watch(() => attrs.src, (src) => {
       loadingText.value = "";
-      if (props.attrs.src && props.attrs.src.indexOf("data:image/") == 0) {
+      if (src && src.indexOf("data:image/") == 0) {
         loadingText.value = "上传中...";
-        const blob = base64ToBlob(props.attrs.src);
-        console.log(blob.type);
-        webFileUpload.upload(new File([blob], `${md5(Math.random().toString())}.png`, {
+        const blob = base64ToBlob(src);
+        webFileUpload.upload(new File([blob], `${md5(Math.random().toString())}.${blob.type.toString().replace("image/", "") || "png"}`, {
           type: blob.type
         })).then((result) => {
           if (result.data.code !== 200) {
@@ -96,50 +102,19 @@ const DocImageComponent = /* @__PURE__ */ defineComponent({
             });
             return;
           }
-          imageLoad(props.attrs.src).then((src) => {
-            viewSrc.value = src;
-          }).finally(() => {
-            loading.value = false;
-          });
+          imageLoad(result.data.data.path);
         });
+      } else if (src) {
+        imageLoad(src);
       } else {
-        imageLoad(props.attrs.src).then((src) => {
-          viewSrc.value = src;
-        }).finally(() => {
-          loading.value = false;
-        });
+        loading.value = true;
+        loadingText.value = "无图片内容";
       }
+    }, {
+      immediate: true
     });
     useMounted(() => {
       return mergeRegister(
-        // editor.registerCommand<ElementFormatType>(FORMAT_ELEMENT_COMMAND,(formatType) => {
-        //     if (isSelected.value) {
-        //       const selection = $getSelection()
-        //       if ($isNodeSelection(selection)) {
-        //         const node = $getNodeByKey(props.nodeKey)
-        //         if (node && $isImageNode(node)){   
-        //           node.setFormat(formatType)  
-        //         }
-        //       }
-        //       else if ($isRangeSelection(selection)) {
-        //         const nodes = selection.getNodes()
-        //         for (const node of nodes) {
-        //           if ($isImageNode(node)) {
-        //             node.setFormat(formatType)
-        //           }
-        //           else {
-        //             const element = $getNearestBlockElementAncestorOrThrow(node)
-        //             element.setFormat(formatType)
-        //           }
-        //         }
-        //       }
-        //       setTimeout(()=>updateImageActiveBox(),10)
-        //       return true
-        //     }
-        //     return false
-        //   },
-        //   COMMAND_PRIORITY_LOW,
-        // ),
         // 选中图
         editor.registerCommand(CLICK_COMMAND, (event) => {
           if (event.target === selfElRef.value) {
@@ -181,8 +156,13 @@ const DocImageComponent = /* @__PURE__ */ defineComponent({
                   (_a = node == null ? void 0 : node.getParent()) == null ? void 0 : _a.setFormat(payload.value);
                 }
               } else if (payload.name == "edit") {
-                ShowImageEditPanel(attrs).then((data) => {
+                ShowImageEditPanel({
+                  ...attrs
+                }).then((data) => {
                   Object.assign(attrs, data || {});
+                  setTimeout(() => updateImageActiveBox(), 10);
+                }).catch((err) => {
+                  console.log(err);
                 });
               } else {
                 attrs[payload.name] = payload.value;