npm - @maketribe/ms-app - Versions diffs - 3.2.4 → 3.2.6 - Mend

@maketribe/ms-app 3.2.4 → 3.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (224) hide show

package/dist/cjs/components/basic/doc-editor/lexical-vue/components/LexicalDecoratorBlockNode.js CHANGED Viewed

@@ -28,5 +28,9 @@ class DecoratorBlockNode extends lexical.DecoratorNode {
     self.__format = format;
   }
 }
+function $isDecoratorBlockNode(node) {
+  return node instanceof DecoratorBlockNode;
+}
+exports.$isDecoratorBlockNode = $isDecoratorBlockNode;
 exports.DecoratorBlockNode = DecoratorBlockNode;
 //# sourceMappingURL=LexicalDecoratorBlockNode.js.map

package/dist/cjs/components/basic/doc-editor/lexical-vue/components/LexicalDecoratorBlockNode.js.map CHANGED Viewed

	@@ -1 +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":["DecoratorNode"],"mappings":";;;;;;AAYO,MAAM,2BAA2BA,QAAAA,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;;"}
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":["DecoratorNode"],"mappings":";;;;;;AAYO,MAAM,2BAA2BA,QAAAA,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/cjs/components/basic/doc-editor/lexical-vue/components/LexicalRichTextPlugin.vue.js CHANGED Viewed

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

package/dist/cjs/components/basic/doc-editor/lexical-vue/components/LexicalRichTextPlugin.vue.js.map CHANGED Viewed

	@@ -1 +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":["useLexicalComposer","useCanShowPlaceholder","ref","computed","html","$generateNodesFromDOM","$selectAll","$getSelection","$generateHtmlFromNodes","onUnmounted","~~onMounted","~~useRichTextSetup"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,UAAM,OAAO;AAGb,UAAM,QAAQ;AAId,UAAM,SAASA,mBAAAA;AAET,UAAA,qBAAqBC,4CAAsB,MAAM;AAEjD,UAAA,SAAS,IAAI;~~AAEb~~,UAAA,cAAcC,QAAI,EAAE;AAGpB,UAAA,iBAAiBC,aAAS,MAAI,YAAY,SAAS,2CAA2C,CAAC,YAAY,KAAK;AAGhH,UAAA,UAAU,CAACC,WAAa;~~AAE1B~~,~~UAAI~~,QAAqB,CAAA;AAEzB,~~kBAAY~~,QAAQA;AAEpB,~~aAAO~~,OAAO,MAAI;;AAEb,~~YAAAA~~,OAAK,QAAO;AAEL,~~kBAAAC~~,KAAAA,sBAAsB,QAAO,OAAO,gBAAgBD,OAAK,KAAK,GAAE,WAAW,CAAC;AAAA,~~QACtF~~;AAEWE,~~gBAAAA~~;~~AACGC~~,~~oCAAA~~,MAAAA,mBAAG,YAAY;AAAA,~~MAAK~~,~~CACnC~~;AAAA,IAAA;~~AAIL~~,~~UAAM~~,0BAA0B,OAAO,uBAAuB,CAAC,EAAE,kBAAkB;AACjF,~~kBAAY~~,KAAK,MAAM;AACT,~~oBAAA~~,QAAQC,4BAAuB,MAAM;~~AAC5C~~,~~aAAA~~,~~UAAS,YAAY,KAAK~~;AAAA,MAAA,~~CAChC;AAAA,IAAA,~~CACF;~~AAEWC~~,~~oBAAA~~,MAAM,yBAAyB;~~AAE3CC,QAAAA,UAAU,MAAI;AAEZ,cAAQ,MAAM,OAAO;~~AAAA,IAAA,~~CACtB~~;AAIDC,qBAAA,iBAAiB,MAAM;;;;;;;;;;;"}
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,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":["useLexicalComposer","useCanShowPlaceholder","ref","computed","html","$generateNodesFromDOM","$selectAll","$getSelection","onMounted","watch","$generateHtmlFromNodes","onUnmounted","useRichTextSetup"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,UAAM,OAAO;AAGb,UAAM,QAAQ;AAId,UAAM,SAASA,mBAAAA;AAET,UAAA,qBAAqBC,4CAAsB,MAAM;AAEjD,UAAA,SAAS,IAAI;AAGb,UAAA,cAAcC,QAAI,EAAE;AAGpB,UAAA,iBAAiBC,aAAS,MAAI,YAAY,SAAS,2CAA2C,CAAC,YAAY,KAAK;AAGhH,UAAA,UAAU,CAACC,WAAa;AAGvB,UAAA,YAAY,SAASA,QAAK;AAE3B,YAAI,QAAqB,CAAA;AAEzB,oBAAY,QAAQA;AAEpB,eAAO,OAAO,MAAI;;AAEb,cAAAA,OAAK,QAAO;AAEL,oBAAAC,KAAAA,sBAAsB,QAAO,OAAO,gBAAgBD,OAAK,KAAK,GAAE,WAAW,CAAC;AAAA,UACtF;AAEWE,kBAAAA;AAER,cAAA,MAAM,SAAS,GAAE;AACJC,wCAAA,MAAAA,mBAAG,YAAY;AAAA,UAAK,OAEhC;AACYA,wCAAA,MAAAA,mBAAG,WAAW;AAAA,UAC9B;AAAA,QAAA,CAED;AAAA,MACH;AAAA,IAAA;AAIJC,QAAAA,UAAU,MAAI;AAEZC,UAAA,MAAM,MAAI,MAAM,SAAQ,SAAQ,EAAE,WAAU,MAAM;AAElDA,UAAA,MAAM,aAAY,CAAC,UAAY,KAAK,UAAS,KAAK,CAAC;AAGnD,YAAM,0BAA0B,OAAO,uBAAuB,CAAC,EAAE,kBAAkB;AACjF,oBAAY,KAAK,MAAM;AACT,sBAAA,QAAQC,4BAAuB,MAAM;AAAA,QAAA,CAClD;AAAA,MAAA,CACF;AAGWC,sBAAA,MAAM,yBAAyB;AAAA,IAAA,CAC5C;AAIDC,qBAAA,iBAAiB,MAAM;;;;;;;;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/HtmlBlockPlugin/DocHtmlBlockComponent.js ADDED Viewed

@@ -0,0 +1,93 @@
+"use strict";
+const vue = require("vue");
+const lexical = require("lexical");
+const utils = require("@lexical/utils");
+require("@lexical/text");
+const useMounted = require("../../lexical-vue/composables/useMounted.js");
+require("@lexical/overflow");
+require("tiny-invariant");
+require("@lexical/history");
+const useLexicalComposer = require("../../lexical-vue/composables/useLexicalComposer.js");
+const useLexicalNodeSelection = require("../../lexical-vue/composables/useLexicalNodeSelection.js");
+require("@lexical/list");
+require("@lexical/dragon");
+require("@lexical/plain-text");
+require("@lexical/rich-text");
+require("@lexical/yjs");
+require("yjs");
+require("../../lexical-vue/components/LexicalDecoratedTeleports.js");
+require("@lexical/html");
+require("@lexical/link");
+require("@lexical/mark");
+require("@lexical/table");
+require("@lexical/hashtag");
+const LexicalBlockWithAlignableContents_vue_vue_type_script_setup_true_lang = require("../../lexical-vue/components/LexicalBlockWithAlignableContents.vue2.js");
+require("@lexical/markdown");
+require("../../lexical-vue/composables/useCollaborationContext.js");
+require("../../lexical-vue/components/LexicalMenu/shared.js");
+require("../../lexical-vue/components/LexicalAutoEmbedPlugin/shared.js");
+require("../../lexical-vue/components/LexicalTypeaheadMenuPlugin/shared.js");
+const DocHtmlBlockComponent = /* @__PURE__ */ vue.defineComponent({
+  name: "DocHtmlBlockComponent",
+  props: ["baseClass", "focusClass", "nodeKey", "attrs"],
+  setup(props) {
+    const editor = useLexicalComposer.useLexicalComposer();
+    const {
+      isSelected,
+      setSelected,
+      clearSelection
+    } = useLexicalNodeSelection.useLexicalNodeSelection(props.nodeKey);
+    const selfElRef = vue.ref(null);
+    useMounted.useMounted(() => {
+      return utils.mergeRegister(
+        // 选中图
+        editor.registerCommand(lexical.CLICK_COMMAND, (event) => {
+          console.log(event.target);
+          if (event.target === selfElRef.value) {
+            event.preventDefault();
+            if (!event.shiftKey) {
+              clearSelection();
+            }
+            setSelected(true);
+            return true;
+          }
+          return false;
+        }, lexical.COMMAND_PRIORITY_LOW)
+      );
+    });
+    return () => {
+      return vue.createVNode(LexicalBlockWithAlignableContents_vue_vue_type_script_setup_true_lang, {
+        "nodeKey": "props.nodeKey"
+      }, {
+        default: () => [vue.createVNode("iframe", vue.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)]
+      });
+    };
+  }
+});
+module.exports = DocHtmlBlockComponent;
+//# sourceMappingURL=DocHtmlBlockComponent.js.map

package/dist/cjs/components/basic/doc-editor/plugins/HtmlBlockPlugin/DocHtmlBlockComponent.js.map ADDED Viewed

@@ -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,4DAAgB;AAAA,EAC7BC,MAAM;AAAA,EACNC,OAAO,CAAC,aAAa,cAAc,WAAW,OAAO;AAAA,EACrDC,MAAMD,OAAO;AACX,UAAME,SAASC,mBAAAA;AACf,UAAM;AAAA,MAAEC;AAAAA,MAAYC;AAAAA,MAAaC;AAAAA,IAAe,IAAIC,wBAAuB,wBACzEP,MAAMQ,OACR;AACA,UAAMC,YAAYC,QAAS,IAAI;AAG/BC,eAAAA,WAAW,MAAM;AACf,aAAOC,MAAa;AAAA;AAAA,QAElBV,OAAOW,gBACLC,QAAa,eACZC,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,QAAAA,oBACF;AAAA,MACF;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,aAAAC,IAAAA,YAAAC,uEAAA;AAAA,QAAA,WAAA;AAAA,MAAA,GAAA;AAAA,QAAAC,SAAAA,MAAAF,CAAAA,0BAAAG,IAAAA,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/cjs/components/basic/doc-editor/plugins/HtmlBlockPlugin/index.js ADDED Viewed

@@ -0,0 +1,128 @@
+"use strict";
+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);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lexical = require("lexical");
+const vue = require("vue");
+require("@lexical/text");
+require("@lexical/utils");
+require("@lexical/overflow");
+require("tiny-invariant");
+require("@lexical/history");
+require("@lexical/list");
+require("@lexical/dragon");
+require("@lexical/plain-text");
+require("@lexical/rich-text");
+require("@lexical/yjs");
+require("yjs");
+require("../../lexical-vue/components/LexicalDecoratedTeleports.js");
+require("@lexical/html");
+require("@lexical/link");
+require("@lexical/mark");
+require("@lexical/table");
+require("@lexical/hashtag");
+const LexicalDecoratorBlockNode = require("../../lexical-vue/components/LexicalDecoratorBlockNode.js");
+require("@lexical/markdown");
+require("../../lexical-vue/composables/useCollaborationContext.js");
+require("../../lexical-vue/components/LexicalMenu/shared.js");
+require("../../lexical-vue/components/LexicalAutoEmbedPlugin/shared.js");
+require("../../lexical-vue/components/LexicalTypeaheadMenuPlugin/shared.js");
+const DocHtmlBlockComponent = require("./DocHtmlBlockComponent.js");
+lexical.createCommand("HTML_BLOCK_CHANGE");
+lexical.createCommand("REMOVE_HTML_BLOCK_COMMAND");
+const INSERT_HTML_BLOCK_COMMAND = lexical.createCommand("INSERT_HTML_BLOCK_COMMAND");
+class HtmlBlockNode extends LexicalDecoratorBlockNode.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 vue.h(DocHtmlBlockComponent, {
+      baseClass: embedBlockTheme.base || "",
+      focusClass: embedBlockTheme.focus || "",
+      format: this.__format,
+      nodeKey: this.getKey(),
+      attrs: this.__attrs
+    });
+  }
+}
+function $createHtmlBlockNode(attrs) {
+  return new HtmlBlockNode(attrs);
+}
+exports.$createHtmlBlockNode = $createHtmlBlockNode;
+exports.HtmlBlockNode = HtmlBlockNode;
+exports.INSERT_HTML_BLOCK_COMMAND = INSERT_HTML_BLOCK_COMMAND;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/basic/doc-editor/plugins/HtmlBlockPlugin/index.js.map ADDED Viewed

@@ -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":["createCommand","DecoratorBlockNode","h"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BiEA,sBAAc,mBAAmB;AAKzBA,sBAAc,2BAA2B;AAMrG,MAAA,4BAA4DA,sBAAc,2BAA2B;AAe3G,MAAM,sBAAsBC,0BAAAA,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,WAAOC,IAAAA,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/cjs/components/basic/doc-editor/plugins/HtmlBlockPlugin/index.vue.js ADDED Viewed

@@ -0,0 +1,51 @@
+"use strict";
+const vue = require("vue");
+require("@lexical/text");
+const utils = require("@lexical/utils");
+require("@lexical/overflow");
+const lexical = require("lexical");
+require("tiny-invariant");
+require("@lexical/history");
+const useLexicalComposer = require("../../lexical-vue/composables/useLexicalComposer.js");
+require("@lexical/list");
+require("@lexical/dragon");
+require("@lexical/plain-text");
+require("@lexical/rich-text");
+require("@lexical/yjs");
+require("yjs");
+require("../../lexical-vue/components/LexicalDecoratedTeleports.js");
+require("@lexical/html");
+require("@lexical/link");
+require("@lexical/mark");
+require("@lexical/table");
+require("@lexical/hashtag");
+require("@lexical/markdown");
+require("../../lexical-vue/composables/useCollaborationContext.js");
+require("../../lexical-vue/components/LexicalMenu/shared.js");
+require("../../lexical-vue/components/LexicalAutoEmbedPlugin/shared.js");
+require("../../lexical-vue/components/LexicalTypeaheadMenuPlugin/shared.js");
+const index = require("./index.js");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "index",
+  setup(__props) {
+    const editor = useLexicalComposer.useLexicalComposer();
+    vue.onMounted(() => {
+      if (!editor.hasNodes([index.HtmlBlockNode])) {
+        throw new Error("HtmlBlockPlugin: 自定义HTML代码块节点未注册！");
+      }
+      const unregister = utils.mergeRegister(
+        // 插入
+        editor.registerCommand(index.INSERT_HTML_BLOCK_COMMAND, (payload) => {
+          utils.$insertNodeToNearestRoot(index.$createHtmlBlockNode(payload));
+          return true;
+        }, lexical.COMMAND_PRIORITY_EDITOR)
+      );
+      vue.onUnmounted(() => unregister());
+    });
+    return (_ctx, _cache) => {
+      return null;
+    };
+  }
+});
+module.exports = _sfc_main;
+//# sourceMappingURL=index.vue.js.map

package/dist/cjs/components/basic/doc-editor/plugins/HtmlBlockPlugin/index.vue.js.map ADDED Viewed

@@ -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":["useLexicalComposer","onMounted","HtmlBlockNode","mergeRegister","INSERT_HTML_BLOCK_COMMAND","$insertNodeToNearestRoot","$createHtmlBlockNode","COMMAND_PRIORITY_EDITOR","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,UAAM,SAASA,mBAAAA;AAEfC,QAAAA,UAAU,MAAM;AAEd,UAAI,CAAC,OAAO,SAAS,CAACC,MAAAA,aAAa,CAAC,GAAE;AAC9B,cAAA,IAAI,MAAM,mCAAmC;AAAA,MACrD;AAgBA,YAAM,aAAaC,MAAA;AAAA;AAAA,QAGjB,OAAO,gBAAgCC,iCAA0B,CAAC,YAAY;AACnDC,yCAAAC,MAAAA,qBAAqB,OAAO,CAAC;AAC/C,iBAAA;AAAA,WACPC,+BAAuB;AAAA,MAAA;AAGfC,sBAAA,MAAM,YAAY;AAAA,IAAA,CAC/B;;;;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/HtmlBlockPlugin/index.vue2.js ADDED Viewed

@@ -0,0 +1,4 @@
+"use strict";
+const index_vue_vue_type_script_setup_true_lang = require("./index.vue.js");
+module.exports = index_vue_vue_type_script_setup_true_lang;
+//# sourceMappingURL=index.vue2.js.map

package/dist/cjs/components/basic/doc-editor/plugins/HtmlBlockPlugin/index.vue2.js.map ADDED Viewed

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

package/dist/cjs/components/basic/doc-editor/plugins/ImagePlugin/DocImageComponent.js CHANGED Viewed

@@ -74,21 +74,27 @@ const DocImageComponent = /* @__PURE__ */ vue.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();
         }
       });
     };
-    vue.onMounted(() => {
+    vue.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 = utils.base64ToBlob(props.attrs.src);
-        console.log(blob.type);
-        webFileUpload.upload(new File([blob], `${utils.md5(Math.random().toString())}.png`, {
+        const blob = utils.base64ToBlob(src);
+        webFileUpload.upload(new File([blob], `${utils.md5(Math.random().toString())}.${blob.type.toString().replace("image/", "") || "png"}`, {
           type: blob.type
         })).then((result) => {
           if (result.data.code !== 200) {
@@ -97,50 +103,19 @@ const DocImageComponent = /* @__PURE__ */ vue.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.useMounted(() => {
       return utils$1.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(lexical.CLICK_COMMAND, (event) => {
           if (event.target === selfElRef.value) {
@@ -182,8 +157,13 @@ const DocImageComponent = /* @__PURE__ */ vue.defineComponent({
                   (_a = node == null ? void 0 : node.getParent()) == null ? void 0 : _a.setFormat(payload.value);
                 }
               } else if (payload.name == "edit") {
-                ImageEditPanel.ShowImageEditPanel(attrs).then((data) => {
+                ImageEditPanel.ShowImageEditPanel({
+                  ...attrs
+                }).then((data) => {
                   Object.assign(attrs, data || {});
+                  setTimeout(() => updateImageActiveBox(), 10);
+                }).catch((err) => {
+                  console.log(err);
                 });
               } else {
                 attrs[payload.name] = payload.value;

package/dist/cjs/components/basic/doc-editor/plugins/ImagePlugin/DocImageComponent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DocImageComponent.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/DocImageComponent.tsx"],"sourcesContent":["import type { ElementFormatType } from 'lexical'\r\nimport { $getSelection,$isNodeSelection, CLICK_COMMAND,COMMAND_PRIORITY_LOW } from 'lexical'\r\nimport { mergeRegister } from '@lexical/utils'\r\nimport { useLexicalComposer,useLexicalNodeSelection,useMounted } from '../../lexical-vue'\r\nimport { defineComponent, ref,reactive,computed,onMounted } from 'vue'\r\nimport { Messager } from \"@maketribe/dm\";\r\nimport { DEVICE_VIEW_MODE,SELECTED_COMPONENT_COMMAND,ComponentSelectEvent } from \"../commands\"\r\nimport { WebFileUpload } from \"@maketribe/request\";\r\nimport { REMOVE_IMAGE_COMMAND,ImageAttrData,IMAGE_ATTRS_CHANGE,ImageNode } from './index'\r\nimport { base64ToBlob,md5 } from \"@maketribe/utils\";\r\nimport { ShowImageEditPanel } from \"./ImageEditPanel\"\r\nimport ImageTools from './ImageTools.vue'\r\n\r\n// 默认图片\r\nconst ImageDefaultSrc = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAADkBJREFUeJzt3W/wHVdZwPHvL01S05AmbUhDm2L/0EJDaqVNbUmR2uIwBQtMbRxRJICow9BKFUZHxQr6ovIGZrDgqCNFgbajI6C2RR1NrRUKmYBpRQrTlmL8g9UpNKRtIk2bxhcnV5qQ5HfvPc/us3v3+5l5XiW/c59z555nd8/u2QOSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJGk+cy19xiXA5cCLgTOB44BFLXy21BdPAjuA+4EtwG3APwL7MpOqcRTwc8CDlE4YhjFZPAC8GVhAQ5o6AzgLuBFY31D70pB8Hng95ewgVBMF4DLg48CzGmhbGqrHgCuBzZGNRheAl1OuXRYHtysJ9gA/Atwe1WBkATgD2AYsC2xT0oF2AucBX4toLGpyYY5yze/gl5q1HPgYQQfvqAKwCbgwqC1JR3YR8JMRDUVdAnwZWBvUlqT53QucXdtIxBnARTj4pbatAy6obSSiALw6oA1Jk6seexEFYENAG5Imd1FtAxEF4PkBbUia3AtqG4iYBHwCH/yRMnwbWFLTQEQB2BfQhqTpVI3hxlYZSRqGyOWPmykLHk6gnXcVSG2YA04EXgt8htgxky6iE08CP9N24lKSa4C9WAD+P97SetZSrl/GAsA+ymuPpKGZA75IcgHowiTg9dkJSAn2ATdkJxGhtoId137KUidciGcA7MhOQEqyMzuBLhQASUksANKAWQCkPOm38SwA0oBZAKQBswBIebwEkJTHAiANmAVAypN+CbAwOwEpwMnApZTXZK8DTgVWAcfs//fdwMPAdsr79LcCfw98veU8Z1LvlzOql1YC7wD+iel/e1/Y38bKlnMfOXOMHDs/fnrfAfXKGuB3KUf12t/eKHYDH9zfdpssAAn5qp8WA79B7MA/OHYB1wKLWurTGQE5p+t9B9R564B/prmBf3DcQzvb3VkAEvJVv2wEHqe9wT+KxykvqG2SBSAhX/XH1cDTtD/4R7EXuKrB/j0vIMd0ve+AOulq8gb+wdFUEbAAJOSr7ttI7pH/4NhLM5cDFoCEfNVt68i55p8vHiN+YvD0gLzS9b4D6ozFtDvbP2ncTewtwvQC4FoAdcmvAOdkJ3EEL6Js6KFn8AxAEdbQ7EM+UfE4ZZ+/CKcF5FPFMwB1xTup3Ou+JUspuWo/zwBUayX9OPqPYjcxC4g8A5CAN9KPo//IEmBTdhIRLADqgp/KTmAKETmnnwFbAJTtZOC87CSmcD5wUnYStSwAynZpdgIV+pw7YAFQvguyE6hwYeXfewmgwVuXnUCFPucOWACU79TsBCqckp1ALQuAsq3KTqBCbe5eAmjwjpn/v3TW0uwEalkApAGzACjb7uwEKuyq/HsvATR4D2cnUKHPuQMWAOXbnp1Ahe3ZCdSyACjbvdkJVOhz7oAFQPm2ZidQoTZ35wA0eHdkJzClfZQdhnvNAqBs/0nZ4bdvvgA8lJ1ELQuAuuDm7ASmcFNAG+mXABF8JZhq9e2VYLuA4wP6vSYglyqeAagLvgl8ODuJCdwAPJKdRFd4BqAIayhH1uyj+3wR+VrwkwLyqeIZgLri68B7spMYw3XMwORfJM8AFGURcA/5R/nDxTZitwZLPwOI0PsOqFPW0t3NQc8K7uuJAXml630HOmop5QgRsQFF31xJ2ZI7e9CPYi9wRQP9tAAk5NtlLwP+CPg3vvvocztwDbAiLbt2XUX+wB/FWxvqowUgId8uWg9sYbzv61HKLrpHpWTarqvIPRPYS3ODHywA3ehAsmuAJ5n8e7uTmIdRuu5KyhlQ24P/MZo57X+m5wTkma73HUj0a9R9d3cDy1vPun1rKX1ta/DfTfyE36FYABLy7YrXEvNjvZN+baw5rUWUbbmbvEPwOKUoR97qOxILQEK+XbCe2GffbwEWttqDPCcCHyD2+9sFXE/cE37jWh2Qe7red6BlJ1KWwEYfvT4KzLXYj2wrgV8EPs/039lW4BfIu9WaXgAifjC1SQzpR/s9lFP2pvbD+x3KoBiakygbdV5I2a7rFMqmHaP39u+ivMBzO+U1XlspL/PIfqR3NfDflW2kjx/PAMZ3M/FH/oPj2tZ6o1onMAPjp/cdaMmv0/zgH0WT964VxwKQkG+GK4Cnaa8A7AV+opWeqYYFICHftn0/OYtb9gCXtdA/TW8VMzB+et+BBp3Adz/X32bsAjY03ktNywKQkG9bFgN3kTf4R/EIcHbDfdV0LAAJ+bblj8kf/KP4L+C0RnuraVgAEvJtwy+RP+gPjq9S7jurO57NDIyf3ncg2OV062UWz4x7GMbiob6wACTk26R1lPX62QP9SPFphrF4qA8sAAn5NmUl8CD5A3ycuI3hLB7qspXMwPjpfQcCLKJscpk9sCeJG+nAc+QDZwFIyLcJf0D+gJ4mrm/iy9DYLAAJ+UZ7G/kDuSbeHf+VaEzHMwPjp/cdqPBy4CnyB3Ft/Hz0F6OxWAAS8o3yfGAH+YM3Ip4GXhf79VRbTXmM+SWU9f6zyAKQkG+EFcB95A/cyNgDvDLyS5rCAmATh34B6Jcpl1uL07KLdxwzMH5634EJLQT+lvwB20TsphxxM5wBfG6MHL9EeUvwLLAAJORb6wPkD9QmYwdwTti3NZ5XATsnyPERyjLrvrMAJORb4y3kD9A24iHg9KDvbD7vYLpHpx+inDX0mQUgId9pXUK5Ts4enG3FgzT7muyFwO9X5viv9HuCcAUzMH5634ExnA58g/xB2XZ8kWY2I10B/F1Qjl+iv1ukWQAS8p3UsZRXSWcPxqy4Czim+lv8jucBXwnOcQvwrMAc22IBSMh3EguAT5E/CLPjr4jZLuulNHcmtRk4OiDHNi1nBsZP7ztwBO8lf/B1JW6mFMRpvQF4ouEcP0m/tk23ACTkO643kT/ouhY3Mfky4jnguhZz/DD9WeVoAUjIdxwvofmjVV/jLylbnI1jBfDxhBzfO2Z+2Y5lBsZP7ztwkFOA/yF/oHU5tgHnzvM9bqSZTVDHjXfOk18XpBcANwc90FLgs7T/JFwf7aPcyvsLyu3CHZQHW36Acr0/X4Fow1spzxp01bGUJyBrpI+f1AoWaA74c/KPrkZcdH2LtGXU9zFd7zuwX5sTVUZ70YVVjodjAUjI91BeR/4P1WgudgM/SPekFwDnAOAC4E7Gn9lWP+2krOe4JzmPZ1pGeY18jarxU/NgxyxYQ5nEcvDPvuXA39CtFYTVR/BaQy4ASyj3tJtc8aZuWU25c7EmO5GuGGoBmKNs3rk+OQ+171TKG51WJufRCUMtAO8Cfjw7CaV5IfDX5K8gTL8EiJA6izmFH6O8BTd7ZtrIj9vJXUG49DB5TRJVhnYGcC7wEfLvPKgbXgb8Cf1aQRhqSAXgOZRJv8iXW6j/rgA+RM5BofoIXmsoBeBoymO+z81ORJ30JuB92UlkGEoB+BDw4uwk1GlvB67NTqKPUicxxvCrATkaw4mraM+SgHzTdbkDr2G6d84bw40290lMLwCzvBbg+yhr+7Pv9ap/nqJMDn6q4c9ZQlmoVMO1AIewCrgFB7+msxD4M8pbjGfaLBaAxcAnKI98StNaAtxKs282qj6FrzWLBeD3GEDlVitGKwjPzE6kKbNWAN4OvDk7Cc2UEygrCE/OTqQJszQJ+ArgNgb8WKca9RXgYsrORlGOBr5d2YaTgMBa4E9x8Ks5aykrCJdlJxJpFgrA8ZQZ/2OzE9HMO5/yW5uZN0j1vQCMbtd06TVPmm2XUM42J90i7VC8C1DpesqSTqlNrwFuwGXlQN6jjFcHfLZh1MT7qbM4IId0GR34YeDJgM82jNp4F9NbFPD5Vfp4G/AMYCtlHzqpC94GfHCKv1tE2bmoRtUY7lsBWA5sAc6q/Ewp0j5gE3DThH+XXgD6NAl4FGX21cGvrhm9Zv5VyXlMrE8F4H3AZdlJSIcxuiX9QxP8TfU1fK2+XAL8LPCHlZ8jteFR4FJg2xj/dyFlMrvGzM8BXAxsplwvSX3wMGVF6n3z/D8LwDw5nEaZ8X925WdIbft3ypbk/3GE/3MU5e1DNWZ2EnAZ5blrB7/66Hspy4hXZSdyJF0tAAsot1TOzk5EqvACygtFOrtQrasF4D3Aq7OTkAKcx+FXEHoX4BA5bAI+Wtmm1DW3Aldy4DX/Aspr62vM1CTgBuAOcndslZpyI/AGvjNm0gtAly4BnkvZv8/Br1n1eg5cQZh+CdCVArCUcp20OjsRqWHXAL+ZncRIFwrAHPAR4EXZiUgteTelEKSLeK1Rrd8CNmYnIbXs/cC3spPowiSgNFRPUX8Q7v1dAEnTm5m7AJJaZgGQBswCIA2YBUAaMAuANGAWAGnALADSgFkApAGzAEgDZgGQBswCIA2YBUAaMAuANGAWAGnALADSgFkApAGzAEgDZgGQBswCIA2YBUAaMAuANGAWAGnALADSgFkApAGLKAB7AtqQNLn/rW0gogB8I6ANSZP7Zm0DEQXg/oA2JE3uvtoGIgrAZwPakDS5u2obiCgAtwS0IWlyt9Y2ELE7MMC9wAuD2pI0v38BzqltJOo24G8HtSNpPNdFNBJ1BjAHfAa4KKg9SYf3aeDiiIaiCgDA6cA2YHlgm5IO9C3gXGB7RGORTwJ+DdiIDwZJTXkC+FGCBj/EPwp8O3A58Ghwu9LQ7QReCfxDZKNNrAXYDJwPbG2gbWmItgDrgTuiG25qMdADwAbgp4GvNvQZ0qy7H3gjZXL9wSY+IHIS8Eif8VLKpcEG4EzgeGBxC58t9cUeyrP9DwCfA26jPOm3LzMpSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIE/wdtJeQPxMSAJQAAAABJRU5ErkJggg==\";\r\n\r\n/*\r\n 图片渲染组件\r\n */\r\nexport default defineComponent({\r\n name: 'DocImageComponent',\r\n props: ['format','baseClass','focusClass', 'nodeKey', 'attrs'],\r\n setup(props) {\r\n\r\n const editor = useLexicalComposer()\r\n const { isSelected, setSelected, clearSelection } = useLexicalNodeSelection(props.nodeKey)\r\n const selfElRef = ref<any>(null);\r\n const imageActiveBoxStyle = reactive({ width:\"\", height:\"\", top:\"\", left:\"\" });\r\n const updateImageActiveBox = ()=>{\r\n let stageRect = selfElRef.value.parentElement.getBoundingClientRect();\r\n let rect = selfElRef.value.getBoundingClientRect();\r\n imageActiveBoxStyle.width = rect.width+ \"px\";\r\n imageActiveBoxStyle.height = rect.height+ \"px\";\r\n imageActiveBoxStyle.left = rect.x - stageRect.x + \"px\";\r\n imageActiveBoxStyle.top = \"0px\";\r\n }\r\n\r\n const styles = computed<string[]>(()=>{\r\n return Object.keys(attrs).filter(k=>attrs[k] && k != \"float\" && k!=\"margin\" && k!=\"src\" && k!=\"alt\").map(k=>{\r\n return k.replace(/([A-Z])/g,\"-$1\").toLowerCase()+\":\"+attrs[k]\r\n });\r\n })\r\n\r\n // 显示的图\r\n const viewSrc = ref<string>(ImageDefaultSrc)\r\n const loading = ref(true);\r\n const loadingText = ref(\"\");\r\n const attrs = reactive(props.attrs)\r\n const webFileUpload = new WebFileUpload();\r\n // 图片加载\r\n const imageLoad = (src:string)=>{\r\n // 加载文案\r\n loadingText.value = \"加载中...\";\r\n loading.value = true;\r\n return new Promise((resolve,reject)=>{\r\n // 加载一下\r\n const image = new Image();\r\n image.onload = ()=>resolve(image.src)\r\n image.onerror = reject\r\n image.src = src;\r\n if(image.complete){\r\n resolve(image.src);\r\n }\r\n })\r\n }\r\n\r\n onMounted(()=>{\r\n // 初始化\r\n loadingText.value = \"\";\r\n // 多半 base64\r\n if(props.attrs.src && props.attrs.src.indexOf(\"data:image/\") == 0){\r\n\r\n // 文件上传\r\n loadingText.value = \"上传中...\";\r\n\r\n // 开始上传\r\n const blob = base64ToBlob(props.attrs.src); \r\n\r\n console.log(blob.type);\r\n\r\n webFileUpload.upload(new File([blob], `${md5(Math.random().toString())}.png`, { type: blob.type })).then(result=>{\r\n\r\n if (result.data.code !== 200) {\r\n Messager.error({ message: result.data.msg });\r\n return;\r\n }\r\n\r\n // 加载一下\r\n imageLoad(props.attrs.src).then(src=>{\r\n viewSrc.value = src as string;\r\n }).finally(()=>{\r\n loading.value = false;\r\n });\r\n\r\n });\r\n\r\n \r\n }\r\n else{\r\n // 加载一下\r\n imageLoad(props.attrs.src).then(src=>{\r\n viewSrc.value = src as string;\r\n }).finally(()=>{\r\n loading.value = false;\r\n });\r\n }\r\n })\r\n\r\n useMounted(() => {\r\n return mergeRegister(\r\n // editor.registerCommand<ElementFormatType>(FORMAT_ELEMENT_COMMAND,(formatType) => {\r\n // if (isSelected.value) {\r\n\r\n // const selection = $getSelection()\r\n\r\n // if ($isNodeSelection(selection)) {\r\n\r\n // const node = $getNodeByKey(props.nodeKey)\r\n\r\n // if (node && $isImageNode(node)){ \r\n // node.setFormat(formatType) \r\n // }\r\n // }\r\n // else if ($isRangeSelection(selection)) {\r\n\r\n // const nodes = selection.getNodes()\r\n \r\n // for (const node of nodes) {\r\n // if ($isImageNode(node)) {\r\n // node.setFormat(formatType)\r\n // }\r\n // else {\r\n // const element = $getNearestBlockElementAncestorOrThrow(node)\r\n // element.setFormat(formatType)\r\n // }\r\n // }\r\n // }\r\n // setTimeout(()=>updateImageActiveBox(),10)\r\n // return true\r\n // }\r\n // return false\r\n // },\r\n // COMMAND_PRIORITY_LOW,\r\n // ),\r\n // 选中图\r\n editor.registerCommand<MouseEvent>(CLICK_COMMAND,(event) => {\r\n\r\n if (event.target === selfElRef.value) {\r\n\r\n event.preventDefault();\r\n\r\n if (!event.shiftKey){ clearSelection() }\r\n \r\n setSelected(true)\r\n updateImageActiveBox();\r\n \r\n editor.dispatchCommand(SELECTED_COMPONENT_COMMAND,{ \r\n el:selfElRef.value,\r\n component:ImageTools\r\n } as ComponentSelectEvent);\r\n return true\r\n }\r\n\r\n // 没选中\r\n editor.dispatchCommand(SELECTED_COMPONENT_COMMAND,null);\r\n return false\r\n },\r\n COMMAND_PRIORITY_LOW,\r\n ),\r\n // 删除\r\n editor.registerCommand(REMOVE_IMAGE_COMMAND, () => {\r\n \r\n const selection = $getSelection();\r\n \r\n if($isNodeSelection(selection)){\r\n \r\n selection.getNodes().forEach(node=>node.remove());\r\n // 没选中\r\n editor.dispatchCommand(SELECTED_COMPONENT_COMMAND,null);\r\n }\r\n return false;\r\n },COMMAND_PRIORITY_LOW),\r\n // 修改图片属性\r\n editor.registerCommand(IMAGE_ATTRS_CHANGE,(payload:ImageAttrData) => {\r\n\r\n const selection = $getSelection();\r\n\r\n if($isNodeSelection(selection)){\r\n \r\n const node = selection.getNodes()[0] as ImageNode;\r\n \r\n // 是图片\r\n if(node.__key == props.nodeKey){\r\n\r\n // 对齐方式的改变\r\n if(payload.name == \"align\"){\r\n\r\n // 有浮动走浮动的逻辑\r\n if(attrs.float != null && attrs.float != \"\"){ attrs.float = payload.value }\r\n else{\r\n // 否则走文本对齐\r\n node?.getParent()?.setFormat(payload.value as ElementFormatType)\r\n }\r\n }\r\n else if(payload.name==\"edit\"){\r\n // 更新属性\r\n ShowImageEditPanel(attrs).then(data=>{\r\n Object.assign(attrs,data\|\|{});\r\n });\r\n }\r\n else{\r\n // 单个其他属性的改变\r\n attrs[payload.name] = payload.value\r\n }\r\n }\r\n }\r\n setTimeout(()=>updateImageActiveBox(),10)\r\n return false\r\n },COMMAND_PRIORITY_LOW),\r\n editor.registerCommand(DEVICE_VIEW_MODE,(payload: string) => {\r\n setTimeout(()=>updateImageActiveBox(),10)\r\n return false\r\n },COMMAND_PRIORITY_LOW)\r\n )\r\n })\r\n\r\n return () =>{\r\n return <div class={`${props.baseClass} ${isSelected.value ? props.focusClass : ''}`}\r\n style={`text-align: ${props.format};float:${ attrs.float };margin:${attrs.margin}`}>\r\n <img ref={el=>selfElRef.value=el} src={viewSrc.value} style={styles.value.join(\";\")} class={attrs.className} />\r\n {isSelected.value ? <div style={imageActiveBoxStyle} class=\"mk-doc-active-mark\"></div> : null}\r\n {loading.value ? <div class=\"mk-doc-loading-mark\">\r\n {loadingText.value}\r\n </div> : null}\r\n </div>\r\n }\r\n },\r\n})\r\n"],"names":["ImageDefaultSrc","defineComponent","name","props","setup","editor","useLexicalComposer","isSelected","setSelected","clearSelection","useLexicalNodeSelection","nodeKey","selfElRef","ref","imageActiveBoxStyle","reactive","width","height","top","left","updateImageActiveBox","stageRect","value","parentElement","getBoundingClientRect","rect","x","styles","computed","Object","keys","attrs","filter","k","map","replace","toLowerCase","viewSrc","loading","loadingText","webFileUpload","WebFileUpload","imageLoad","src","Promise","resolve","reject","image","Image","onload","onerror","complete","onMounted","indexOf","blob","base64ToBlob","console","log","type","upload","File","md5","Math","random","toString","then","result","data","code","Messager","error","message","msg","finally","useMounted","mergeRegister","registerCommand","CLICK_COMMAND","event","target","preventDefault","shiftKey","dispatchCommand","SELECTED_COMPONENT_COMMAND","el","component","ImageTools","COMMAND_PRIORITY_LOW","REMOVE_IMAGE_COMMAND","selection","$getSelection","$isNodeSelection","getNodes","forEach","node","remove","IMAGE_ATTRS_CHANGE","payload","__key","float","getParent","setFormat","ShowImageEditPanel","assign","setTimeout","DEVICE_VIEW_MODE","_createVNode","baseClass","focusClass","format","margin","join","className"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcA,MAAMA,kBAAkB;AAKxB,MAAeC,wDAAgB;AAAA,EAC7BC,MAAM;AAAA,EACNC,OAAO,CAAC,UAAS,aAAY,cAAc,WAAW,OAAO;AAAA,EAC7DC,MAAMD,OAAO;AAEX,UAAME,SAASC,mBAAAA;AACf,UAAM;AAAA,MAAEC;AAAAA,MAAYC;AAAAA,MAAaC;AAAAA,IAAe,IAAIC,wBAAuB,wBAACP,MAAMQ,OAAO;AACzF,UAAMC,YAAYC,QAAS,IAAI;AAC/B,UAAMC,sBAAsBC,IAAAA,SAAS;AAAA,MAAEC,OAAM;AAAA,MAAIC,QAAO;AAAA,MAAKC,KAAI;AAAA,MAAIC,MAAK;AAAA,IAAG,CAAC;AAC9E,UAAMC,uBAAuBA,MAAI;AAC/B,UAAIC,YAAYT,UAAUU,MAAMC,cAAcC,sBAAqB;AACnE,UAAIC,OAAOb,UAAUU,MAAME,sBAAqB;AAChDV,0BAAoBE,QAAQS,KAAKT,QAAO;AACxCF,0BAAoBG,SAASQ,KAAKR,SAAQ;AAC1CH,0BAAoBK,OAAOM,KAAKC,IAAIL,UAAUK,IAAI;AAClDZ,0BAAoBI,MAAM;AAAA;AAG5B,UAAMS,SAASC,IAAAA,SAAmB,MAAI;AACpC,aAAOC,OAAOC,KAAKC,KAAK,EAAEC,OAAOC,OAAGF,MAAME,CAAC,KAAKA,KAAK,WAAWA,KAAG,YAAYA,KAAG,SAASA,KAAG,KAAK,EAAEC,IAAID,OAAG;AAC1G,eAAOA,EAAEE,QAAQ,YAAW,KAAK,EAAEC,YAAW,IAAG,MAAIL,MAAME,CAAC;AAAA,MAC9D,CAAC;AAAA,IACH,CAAC;AAGD,UAAMI,UAAUxB,QAAYb,eAAe;AAC3C,UAAMsC,UAAUzB,QAAI,IAAI;AACxB,UAAM0B,cAAc1B,QAAI,EAAE;AAC1B,UAAMkB,QAAQhB,IAAAA,SAASZ,MAAM4B,KAAK;AAClC,UAAMS,gBAAgB,IAAIC,QAAAA;AAE1B,UAAMC,YAAaC,SAAa;AAE9BJ,kBAAYjB,QAAQ;AACpBgB,cAAQhB,QAAQ;AAChB,aAAO,IAAIsB,QAAQ,CAACC,SAAQC,WAAS;AAEnC,cAAMC,QAAQ,IAAIC;AAClBD,cAAME,SAAS,MAAIJ,QAAQE,MAAMJ,GAAG;AACpCI,cAAMG,UAAUJ;AAChBC,cAAMJ,MAAMA;AACZ,YAAGI,MAAMI,UAAS;AAChBN,kBAAQE,MAAMJ,GAAG;AAAA,QACnB;AAAA,MACF,CAAC;AAAA;AAGHS,QAAAA,UAAU,MAAI;AAEZb,kBAAYjB,QAAQ;AAEpB,UAAGnB,MAAM4B,MAAMY,OAAOxC,MAAM4B,MAAMY,IAAIU,QAAQ,aAAa,KAAK,GAAE;AAGhEd,oBAAYjB,QAAQ;AAGpB,cAAMgC,OAAOC,MAAY,aAACpD,MAAM4B,MAAMY,GAAG;AAEzCa,gBAAQC,IAAIH,KAAKI,IAAI;AAErBlB,sBAAcmB,OAAO,IAAIC,KAAK,CAACN,IAAI,GAAG,GAAGO,UAAIC,KAAKC,OAAQ,EAACC,SAAQ,CAAE,CAAC,QAAQ;AAAA,UAAEN,MAAMJ,KAAKI;AAAAA,QAAK,CAAC,CAAC,EAAEO,KAAKC,YAAQ;AAE/G,cAAIA,OAAOC,KAAKC,SAAS,KAAK;AAC5BC,eAAAA,SAASC,MAAM;AAAA,cAAEC,SAASL,OAAOC,KAAKK;AAAAA,YAAI,CAAC;AAC3C;AAAA,UACF;AAGA9B,oBAAUvC,MAAM4B,MAAMY,GAAG,EAAEsB,KAAKtB,SAAK;AACnCN,oBAAQf,QAAQqB;AAAAA,UAClB,CAAC,EAAE8B,QAAQ,MAAI;AACbnC,oBAAQhB,QAAQ;AAAA,UAClB,CAAC;AAAA,QAEH,CAAC;AAAA,MAGH,OACI;AAEFoB,kBAAUvC,MAAM4B,MAAMY,GAAG,EAAEsB,KAAKtB,SAAK;AACnCN,kBAAQf,QAAQqB;AAAAA,QAClB,CAAC,EAAE8B,QAAQ,MAAI;AACbnC,kBAAQhB,QAAQ;AAAA,QAClB,CAAC;AAAA,MACH;AAAA,IACF,CAAC;AAEDoD,eAAAA,WAAW,MAAM;AACf,aAAOC,QAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAoClBtE,OAAOuE,gBAA4BC,QAAa,eAAEC,WAAU;AAExD,cAAIA,MAAMC,WAAWnE,UAAUU,OAAO;AAEpCwD,kBAAME,eAAc;AAEpB,gBAAI,CAACF,MAAMG,UAAS;AAAExE;YAAiB;AAEvCD,wBAAY,IAAI;AAChBY;AAEAf,mBAAO6E,gBAAgBC,qCAA2B;AAAA,cAChDC,IAAGxE,UAAUU;AAAAA,cACb+D,WAAUC;AAAAA,YACZ,CAAyB;AACzB,mBAAO;AAAA,UACT;AAGAjF,iBAAO6E,gBAAgBC,qCAA2B,IAAI;AACtD,iBAAO;AAAA,QACR,GACDI,4BACF;AAAA;AAAA,QAEAlF,OAAOuE,gBAAgBY,MAAAA,sBAAsB,MAAM;AAEjD,gBAAMC,YAAYC,QAAAA;AAElB,cAAGC,QAAAA,iBAAiBF,SAAS,GAAE;AAE7BA,sBAAUG,SAAQ,EAAGC,QAAQC,UAAMA,KAAKC,OAAM,CAAE;AAEhD1F,mBAAO6E,gBAAgBC,qCAA2B,IAAI;AAAA,UACxD;AACA,iBAAO;AAAA,QACR,GAACI,4BAAoB;AAAA;AAAA,QAEtBlF,OAAOuE,gBAAgBoB,MAAkB,oBAAEC,aAA0B;;AAEnE,gBAAMR,YAAYC,QAAAA;AAElB,cAAGC,QAAAA,iBAAiBF,SAAS,GAAE;AAE7B,kBAAMK,OAAOL,UAAUG,SAAU,EAAC,CAAC;AAGnC,gBAAGE,KAAKI,SAAS/F,MAAMQ,SAAQ;AAG7B,kBAAGsF,QAAQ/F,QAAQ,SAAQ;AAGzB,oBAAG6B,MAAMoE,SAAS,QAAQpE,MAAMoE,SAAS,IAAG;AAAEpE,wBAAMoE,QAAQF,QAAQ3E;AAAAA,gBAAM,OACtE;AAEFwE,qDAAMM,gBAANN,mBAAmBO,UAAUJ,QAAQ3E;AAAAA,gBACvC;AAAA,cACF,WACQ2E,QAAQ/F,QAAM,QAAO;AAE3BoG,+BAAAA,mBAAmBvE,KAAK,EAAEkC,KAAKE,UAAM;AACnCtC,yBAAO0E,OAAOxE,OAAMoC,QAAM,CAAE,CAAA;AAAA,gBAC9B,CAAC;AAAA,cACH,OACI;AAEFpC,sBAAMkE,QAAQ/F,IAAI,IAAI+F,QAAQ3E;AAAAA,cAChC;AAAA,YACF;AAAA,UACF;AACAkF,qBAAW,MAAIpF,wBAAuB,EAAE;AACxC,iBAAO;AAAA,QACR,GAACmE,QAAoB,oBAAA;AAAA,QACtBlF,OAAOuE,gBAAgB6B,SAAAA,kBAAkBR,aAAoB;AAC3DO,qBAAW,MAAIpF,wBAAuB,EAAE;AACxC,iBAAO;AAAA,WACPmE,QAAAA,oBAAoB;AAAA,MACxB;AAAA,IACF,CAAC;AAED,WAAO,MAAK;AACV,aAAAmB,IAAAA,YAAA,OAAA;AAAA,QAAA,SAAmB,GAAGvG,MAAMwG,SAAS,IAAIpG,WAAWe,QAAQnB,MAAMyG,aAAa,EAAE;AAAA,QAAE,SAC5E,eAAezG,MAAM0G,MAAM,UAAW9E,MAAMoE,KAAK,WAAYpE,MAAM+E,MAAM;AAAA,MAAE,GAAA,CAAAJ,IAAA,YAAA,OAAA;AAAA,QAAA,OACtEtB,QAAIxE,UAAUU,QAAM8D;AAAAA,QAAE,OAAO/C,QAAQf;AAAAA,QAAK,SAASK,OAAOL,MAAMyF,KAAK,GAAG;AAAA,QAAC,SAAShF,MAAMiF;AAAAA,MAAS,GAAA,IAAA,GAC1GzG,WAAWe,QAAKoF,IAAAA,YAAA,OAAA;AAAA,QAAA,SAAe5F;AAAAA,QAAmB,SAAA;AAAA,MAAA,GAAA,IAAA,IAAsC,MACxFwB,QAAQhB,QAAKoF,IAAA,YAAA,OAAA;AAAA,QAAA,SAAA;AAAA,MAAA,GAAA,CACXnE,YAAYjB,KAAK,CAAA,IACX,IAAI,CAAA;AAAA;EAGnB;AACF,CAAC;;"}
1	+ {"version":3,"file":"DocImageComponent.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/DocImageComponent.tsx"],"sourcesContent":["import type { ElementFormatType } from 'lexical'\r\nimport { $getSelection,$isNodeSelection, CLICK_COMMAND,COMMAND_PRIORITY_LOW } from 'lexical'\r\nimport { mergeRegister } from '@lexical/utils'\r\nimport { useLexicalComposer,useLexicalNodeSelection,useMounted } from '../../lexical-vue'\r\nimport { defineComponent, ref,reactive,computed,onMounted,watch } from 'vue'\r\nimport { Messager } from \"@maketribe/dm\";\r\nimport { DEVICE_VIEW_MODE,SELECTED_COMPONENT_COMMAND,ComponentSelectEvent } from \"../commands\"\r\nimport { WebFileUpload } from \"@maketribe/request\";\r\nimport { REMOVE_IMAGE_COMMAND,ImageAttrData,IMAGE_ATTRS_CHANGE,ImageNode } from './index'\r\nimport { base64ToBlob,md5 } from \"@maketribe/utils\";\r\nimport { ShowImageEditPanel } from \"./ImageEditPanel\"\r\nimport ImageTools from './ImageTools.vue'\r\n\r\n// 默认图片\r\nconst ImageDefaultSrc = \"data:image/png;base64,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\";\r\n\r\n/*\r\n 图片渲染组件\r\n */\r\nexport default defineComponent({\r\n name: 'DocImageComponent',\r\n props: ['format','baseClass','focusClass', 'nodeKey', 'attrs'],\r\n setup(props) {\r\n\r\n const editor = useLexicalComposer()\r\n const { isSelected, setSelected, clearSelection } = useLexicalNodeSelection(props.nodeKey)\r\n const selfElRef = ref<any>(null);\r\n const imageActiveBoxStyle = reactive({ width:\"\", height:\"\", top:\"\", left:\"\" });\r\n const updateImageActiveBox = ()=>{\r\n let stageRect = selfElRef.value.parentElement.getBoundingClientRect();\r\n let rect = selfElRef.value.getBoundingClientRect();\r\n imageActiveBoxStyle.width = rect.width+ \"px\";\r\n imageActiveBoxStyle.height = rect.height+ \"px\";\r\n imageActiveBoxStyle.left = rect.x - stageRect.x + \"px\";\r\n imageActiveBoxStyle.top = \"0px\";\r\n }\r\n\r\n const styles = computed<string[]>(()=>{\r\n return Object.keys(attrs).filter(k=>attrs[k] && k != \"float\" && k!=\"margin\" && k!=\"src\" && k!=\"alt\").map(k=>{\r\n return k.replace(/([A-Z])/g,\"-$1\").toLowerCase()+\":\"+attrs[k]\r\n });\r\n })\r\n\r\n // 显示的图\r\n const viewSrc = ref<string>(ImageDefaultSrc)\r\n const loading = ref(true);\r\n const loadingText = ref(\"\");\r\n const attrs = reactive(props.attrs)\r\n const webFileUpload = new WebFileUpload();\r\n // 图片加载\r\n const imageLoad = (src:string)=>{\r\n // 加载文案\r\n loadingText.value = \"加载中...\";\r\n loading.value = true;\r\n return new Promise((resolve,reject)=>{\r\n // 加载一下\r\n const image = new Image();\r\n const loadComplete = ()=>{\r\n viewSrc.value = image.src;\r\n attrs.src = src;\r\n loadingText.value = \"\";\r\n loading.value = false;\r\n resolve(image.src);\r\n }\r\n image.onload = ()=>loadComplete()\r\n image.onerror = reject\r\n image.src = src;\r\n if(image.complete){\r\n loadComplete();\r\n }\r\n })\r\n // .finally(()=>{\r\n // loading.value = false;\r\n // });\r\n }\r\n\r\n // 图片路径变更的时候\r\n watch(()=>attrs.src,(src:string)=>{\r\n // 初始化\r\n loadingText.value = \"\";\r\n // 多半 base64\r\n if(src && src.indexOf(\"data:image/\") == 0){\r\n\r\n // 文件上传 \r\n loadingText.value = \"上传中...\";\r\n\r\n // 开始上传\r\n const blob = base64ToBlob(src); \r\n\r\n // 上传\r\n webFileUpload.upload(\r\n new File([blob], `${md5(Math.random().toString())}.${blob.type.toString().replace(\"image/\",\"\") \|\| \"png\"}`, { type: blob.type })\r\n ).then(result=>{\r\n\r\n if (result.data.code !== 200) {\r\n Messager.error({ message: result.data.msg });\r\n return;\r\n }\r\n // 加载一下\r\n imageLoad(result.data.data.path);\r\n });\r\n }\r\n else if(src){\r\n // 加载一下\r\n imageLoad(src);\r\n }\r\n else{\r\n // 文件上传\r\n loading.value = true;\r\n loadingText.value = \"无图片内容\";\r\n }\r\n },{ immediate:true })\r\n \r\n // 编辑器挂载的时候\r\n useMounted(() => {\r\n return mergeRegister(\r\n // 选中图\r\n editor.registerCommand<MouseEvent>(CLICK_COMMAND,(event) => {\r\n\r\n if (event.target === selfElRef.value) {\r\n\r\n event.preventDefault();\r\n\r\n if (!event.shiftKey){ clearSelection() }\r\n \r\n setSelected(true)\r\n updateImageActiveBox();\r\n \r\n editor.dispatchCommand(SELECTED_COMPONENT_COMMAND,{ \r\n el:selfElRef.value,\r\n component:ImageTools\r\n } as ComponentSelectEvent);\r\n return true\r\n }\r\n\r\n // 没选中\r\n editor.dispatchCommand(SELECTED_COMPONENT_COMMAND,null);\r\n return false\r\n },\r\n COMMAND_PRIORITY_LOW,\r\n ),\r\n // 删除\r\n editor.registerCommand(REMOVE_IMAGE_COMMAND, () => {\r\n \r\n const selection = $getSelection();\r\n \r\n if($isNodeSelection(selection)){\r\n \r\n selection.getNodes().forEach(node=>node.remove());\r\n // 没选中\r\n editor.dispatchCommand(SELECTED_COMPONENT_COMMAND,null);\r\n }\r\n return false;\r\n },COMMAND_PRIORITY_LOW),\r\n // 修改图片属性\r\n editor.registerCommand(IMAGE_ATTRS_CHANGE,(payload:ImageAttrData) => {\r\n\r\n const selection = $getSelection();\r\n\r\n if($isNodeSelection(selection)){\r\n \r\n const node = selection.getNodes()[0] as ImageNode;\r\n \r\n // 是图片\r\n if(node.__key == props.nodeKey){\r\n\r\n // 对齐方式的改变\r\n if(payload.name == \"align\"){\r\n\r\n // 有浮动走浮动的逻辑\r\n if(attrs.float != null && attrs.float != \"\"){ attrs.float = payload.value }\r\n else{\r\n // 否则走文本对齐\r\n node?.getParent()?.setFormat(payload.value as ElementFormatType)\r\n }\r\n }\r\n // 属性编辑\r\n else if(payload.name == \"edit\"){\r\n // 更新属性\r\n ShowImageEditPanel({...attrs}).then((data:any)=>{\r\n Object.assign(attrs,data\|\|{});\r\n setTimeout(()=>updateImageActiveBox(),10)\r\n }).catch(err=>{\r\n console.log(err);\r\n });\r\n \r\n }\r\n else{\r\n // 单个其他属性的改变\r\n attrs[payload.name] = payload.value\r\n }\r\n }\r\n }\r\n setTimeout(()=>updateImageActiveBox(),10)\r\n return false\r\n },COMMAND_PRIORITY_LOW),\r\n editor.registerCommand(DEVICE_VIEW_MODE,(payload: string) => {\r\n setTimeout(()=>updateImageActiveBox(),10)\r\n return false\r\n },COMMAND_PRIORITY_LOW)\r\n )\r\n })\r\n\r\n return () =>{\r\n return <div class={`${props.baseClass} ${isSelected.value ? props.focusClass : ''}`}\r\n style={`text-align: ${props.format};float:${ attrs.float };margin:${attrs.margin}`}>\r\n <img ref={el=>selfElRef.value=el} src={viewSrc.value} style={styles.value.join(\";\")} class={attrs.className} />\r\n {isSelected.value ? <div style={imageActiveBoxStyle} class=\"mk-doc-active-mark\"></div> : null}\r\n {loading.value ? <div class=\"mk-doc-loading-mark\">\r\n {loadingText.value}\r\n </div> : null}\r\n </div>\r\n }\r\n },\r\n})\r\n"],"names":["ImageDefaultSrc","defineComponent","name","props","setup","editor","useLexicalComposer","isSelected","setSelected","clearSelection","useLexicalNodeSelection","nodeKey","selfElRef","ref","imageActiveBoxStyle","reactive","width","height","top","left","updateImageActiveBox","stageRect","value","parentElement","getBoundingClientRect","rect","x","styles","computed","Object","keys","attrs","filter","k","map","replace","toLowerCase","viewSrc","loading","loadingText","webFileUpload","WebFileUpload","imageLoad","src","Promise","resolve","reject","image","Image","loadComplete","onload","onerror","complete","watch","indexOf","blob","base64ToBlob","upload","File","md5","Math","random","toString","type","then","result","data","code","Messager","error","message","msg","path","immediate","useMounted","mergeRegister","registerCommand","CLICK_COMMAND","event","target","preventDefault","shiftKey","dispatchCommand","SELECTED_COMPONENT_COMMAND","el","component","ImageTools","COMMAND_PRIORITY_LOW","REMOVE_IMAGE_COMMAND","selection","$getSelection","$isNodeSelection","getNodes","forEach","node","remove","IMAGE_ATTRS_CHANGE","payload","__key","float","getParent","setFormat","ShowImageEditPanel","assign","setTimeout","catch","err","console","log","DEVICE_VIEW_MODE","_createVNode","baseClass","focusClass","format","margin","join","className"],"mappings":"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"}