@maketribe/ms-app 3.2.21 → 3.2.23

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

@@ -2,90 +2,70 @@
 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 lexicalVue = require("lexical-vue");
+const index = require("./index.js");
+const commands = require("../commands.js");
+const HtmlBlockTools_vue_vue_type_script_setup_true_lang = require("./HtmlBlockTools.vue.js");
 const DocHtmlBlockComponent = /* @__PURE__ */ vue.defineComponent({
   name: "DocHtmlBlockComponent",
-  props: ["baseClass", "focusClass", "nodeKey", "attrs"],
+  props: ["baseClass", "focusClass", "class", "nodeKey", "html"],
   setup(props) {
-    const editor = useLexicalComposer.useLexicalComposer();
+    const editor = lexicalVue.useLexicalComposer();
     const {
       isSelected,
       setSelected,
       clearSelection
-    } = useLexicalNodeSelection.useLexicalNodeSelection(props.nodeKey);
+    } = lexicalVue.useLexicalNodeSelection(props.nodeKey);
     const selfElRef = vue.ref(null);
-    useMounted.useMounted(() => {
+    const htmlContent = vue.ref(props.html);
+    lexicalVue.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);
+            editor.dispatchCommand(commands.SELECTED_COMPONENT_COMMAND, {
+              el: selfElRef.value,
+              component: HtmlBlockTools_vue_vue_type_script_setup_true_lang
+            });
             return true;
           }
+          editor.dispatchCommand(commands.SELECTED_COMPONENT_COMMAND, null);
+          return false;
+        }, lexical.COMMAND_PRIORITY_LOW),
+        // 删除
+        editor.registerCommand(index.REMOVE_HTML_BLOCK_COMMAND, () => {
+          const selection = lexical.$getSelection();
+          if (lexical.$isNodeSelection(selection)) {
+            selection.getNodes().forEach((node) => node.remove());
+            editor.dispatchCommand(commands.SELECTED_COMPONENT_COMMAND, null);
+          }
+          return false;
+        }, lexical.COMMAND_PRIORITY_LOW),
+        // 修改
+        editor.registerCommand(index.HTML_BLOCK_CHANGE, (payload) => {
+          const selection = lexical.$getSelection();
+          if (lexical.$isNodeSelection(selection)) {
+            const node = selection.getNodes()[0];
+            if (node.getKey() == props.nodeKey) {
+              htmlContent.value = payload;
+              node.setHtml(payload);
+            }
+          }
           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)]
-      });
+      return vue.createVNode("div", {
+        "class": `${props.baseClass} ${props.class} ${isSelected.value ? props.focusClass : ""}`,
+        "ref": (el) => selfElRef.value = el,
+        "innerHTML": htmlContent.value
+      }, null);
     };
   }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"DocHtmlBlockComponent.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/HtmlBlockPlugin/DocHtmlBlockComponent.tsx"],"sourcesContent":["import type { ElementFormatType } from \"lexical\";\r\nimport {\r\n  $getSelection,\r\n  $isNodeSelection,\r\n  CLICK_COMMAND,\r\n  COMMAND_PRIORITY_LOW,\r\n} from \"lexical\";\r\nimport { mergeRegister } from \"@lexical/utils\";\r\nimport {\r\n  useLexicalComposer,\r\n  useLexicalNodeSelection,\r\n  useMounted,\r\n  DecoratorBlockNode,\r\n  LexicalBlockWithAlignableContents,\r\n} from \"../../lexical-vue\";\r\nimport { defineComponent, ref, reactive, computed, watch } from \"vue\";\r\nimport { Messager } from \"@maketribe/dm\";\r\n\r\n/**\r\n * 图片渲染组件\r\n */\r\nexport default defineComponent({\r\n  name: \"DocHtmlBlockComponent\",\r\n  props: [\"baseClass\", \"focusClass\", \"nodeKey\", \"attrs\"],\r\n  setup(props) {\r\n    const editor = useLexicalComposer();\r\n    const { isSelected, setSelected, clearSelection } = useLexicalNodeSelection(\r\n      props.nodeKey\r\n    );\r\n    const selfElRef = ref<any>(null);\r\n\r\n    // 编辑器挂载的时候\r\n    useMounted(() => {\r\n      return mergeRegister(\r\n        // 选中图\r\n        editor.registerCommand<MouseEvent>(\r\n          CLICK_COMMAND,\r\n          (event) => {\r\n            console.log(event.target);\r\n            if (event.target === selfElRef.value) {\r\n              event.preventDefault();\r\n\r\n              if (!event.shiftKey) {\r\n                clearSelection();\r\n              }\r\n\r\n              setSelected(true);\r\n\r\n              return true;\r\n            }\r\n\r\n            return false;\r\n          },\r\n          COMMAND_PRIORITY_LOW\r\n        )\r\n      );\r\n    });\r\n\r\n    return () => {\r\n      return (\r\n        <LexicalBlockWithAlignableContents nodeKey=\"props.nodeKey\">\r\n          <iframe\r\n            ref={(el) => (selfElRef.value = el)}\r\n            srcdoc={`\r\n          <html>\r\n            <head>\r\n              <style type=\"text/css\">\r\n                ${props.attrs.css}\r\n              </style>\r\n               <script>\r\n                ${props.attrs.js}\r\n              </script>\r\n            </head>\r\n            <body>${props.attrs.content}</body>\r\n          </html>\r\n          `}\r\n            style={{ width: \"100%\", padding: 0, margin: 0 }}\r\n            {...{ frameborder: 0, allowFullScreen: true }}\r\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\r\n          ></iframe>\r\n        </LexicalBlockWithAlignableContents>\r\n      );\r\n    };\r\n  },\r\n});\r\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;;"}
+{"version":3,"file":"DocHtmlBlockComponent.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/HtmlBlockPlugin/DocHtmlBlockComponent.tsx"],"sourcesContent":["import {\r\n  $getSelection,\r\n  $isNodeSelection,\r\n  CLICK_COMMAND,\r\n  COMMAND_PRIORITY_LOW,\r\n} from \"lexical\";\r\nimport { mergeRegister } from \"@lexical/utils\";\r\nimport {\r\n  useLexicalComposer,\r\n  useLexicalNodeSelection,\r\n  useMounted,\r\n} from \"lexical-vue\";\r\nimport { defineComponent, ref } from \"vue\";\r\nimport { REMOVE_HTML_BLOCK_COMMAND,HTML_BLOCK_CHANGE, HtmlBlockNode } from './index'\r\nimport { SELECTED_COMPONENT_COMMAND,ComponentSelectEvent } from \"../commands\"\r\nimport HtmlBlockTools from \"./HtmlBlockTools.vue\";\r\n\r\n/**\r\n * 图片渲染组件\r\n */\r\nexport default defineComponent({\r\n  name: \"DocHtmlBlockComponent\",\r\n  props: [\"baseClass\", \"focusClass\", \"class\",\"nodeKey\", \"html\"],\r\n  setup(props) {\r\n    const editor = useLexicalComposer();\r\n    const { isSelected, setSelected, clearSelection } = useLexicalNodeSelection(props.nodeKey);\r\n\r\n    const selfElRef = ref<any>(null);\r\n    const htmlContent = ref(props.html);\r\n\r\n    // 编辑器挂载的时候\r\n    useMounted(() => {\r\n      return mergeRegister(\r\n        // 选中\r\n        editor.registerCommand<MouseEvent>(CLICK_COMMAND,(event) => {\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\r\n            // 选中后显示工具条\r\n            editor.dispatchCommand(SELECTED_COMPONENT_COMMAND,{ \r\n              el:selfElRef.value,\r\n              component:HtmlBlockTools\r\n            } as ComponentSelectEvent);\r\n\r\n            return true;\r\n          }\r\n          // 没选中\r\n          editor.dispatchCommand(SELECTED_COMPONENT_COMMAND,null);\r\n          return false;\r\n        }, COMMAND_PRIORITY_LOW),\r\n        // 删除\r\n        editor.registerCommand(REMOVE_HTML_BLOCK_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(HTML_BLOCK_CHANGE,(payload:string) => {\r\n\r\n          const selection = $getSelection();\r\n\r\n          if($isNodeSelection(selection)){\r\n    \r\n            const node = selection.getNodes()[0] as HtmlBlockNode;\r\n\r\n            if(node.getKey() == props.nodeKey){\r\n              htmlContent.value = payload;\r\n              node.setHtml(payload)\r\n            }\r\n           \r\n          }\r\n        \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} ${props.class} ${isSelected.value ? props.focusClass : ''}`} \r\n      ref={el=>selfElRef.value=el} v-html={htmlContent.value}>\r\n      </div>\r\n    };\r\n  },\r\n});\r\n"],"names":["defineComponent","name","props","setup","editor","useLexicalComposer","isSelected","setSelected","clearSelection","useLexicalNodeSelection","nodeKey","selfElRef","ref","htmlContent","html","useMounted","mergeRegister","registerCommand","CLICK_COMMAND","event","target","value","preventDefault","shiftKey","dispatchCommand","SELECTED_COMPONENT_COMMAND","el","component","HtmlBlockTools","COMMAND_PRIORITY_LOW","REMOVE_HTML_BLOCK_COMMAND","selection","$getSelection","$isNodeSelection","getNodes","forEach","node","remove","HTML_BLOCK_CHANGE","payload","getKey","setHtml","_createVNode","baseClass","class","focusClass"],"mappings":";;;;;;;;AAoBA,MAAeA,4DAAgB;AAAA,EAC7BC,MAAM;AAAA,EACNC,OAAO,CAAC,aAAa,cAAc,SAAQ,WAAW,MAAM;AAAA,EAC5DC,MAAMD,OAAO;AACX,UAAME,SAASC,WAAAA;AACf,UAAM;AAAA,MAAEC;AAAAA,MAAYC;AAAAA,MAAaC;AAAAA,IAAe,IAAIC,WAAuB,wBAACP,MAAMQ,OAAO;AAEzF,UAAMC,YAAYC,QAAS,IAAI;AAC/B,UAAMC,cAAcD,IAAAA,IAAIV,MAAMY,IAAI;AAGlCC,eAAAA,WAAW,MAAM;AACf,aAAOC,MAAa;AAAA;AAAA,QAElBZ,OAAOa,gBAA4BC,QAAa,eAAEC,WAAU;AAC1D,cAAIA,MAAMC,WAAWT,UAAUU,OAAO;AAEpCF,kBAAMG,eAAc;AAEpB,gBAAI,CAACH,MAAMI,UAAU;AAAEf;YAAmB;AAE1CD,wBAAY,IAAI;AAGhBH,mBAAOoB,gBAAgBC,qCAA2B;AAAA,cAChDC,IAAGf,UAAUU;AAAAA,cACbM,WAAUC;AAAAA,YACZ,CAAyB;AAEzB,mBAAO;AAAA,UACT;AAEAxB,iBAAOoB,gBAAgBC,qCAA2B,IAAI;AACtD,iBAAO;AAAA,QACR,GAAEI,4BAAoB;AAAA;AAAA,QAEvBzB,OAAOa,gBAAgBa,MAAAA,2BAA2B,MAAM;AAEtD,gBAAMC,YAAYC,QAAAA;AAElB,cAAGC,QAAAA,iBAAiBF,SAAS,GAAE;AAE7BA,sBAAUG,SAAQ,EAAGC,QAAQC,UAAMA,KAAKC,OAAM,CAAE;AAEhDjC,mBAAOoB,gBAAgBC,qCAA2B,IAAI;AAAA,UACxD;AACA,iBAAO;AAAA,QACR,GAACI,4BAAoB;AAAA;AAAA,QAEtBzB,OAAOa,gBAAgBqB,MAAiB,mBAAEC,aAAmB;AAE3D,gBAAMR,YAAYC,QAAAA;AAElB,cAAGC,QAAAA,iBAAiBF,SAAS,GAAE;AAE7B,kBAAMK,OAAOL,UAAUG,SAAU,EAAC,CAAC;AAEnC,gBAAGE,KAAKI,YAAYtC,MAAMQ,SAAQ;AAChCG,0BAAYQ,QAAQkB;AACpBH,mBAAKK,QAAQF,OAAO;AAAA,YACtB;AAAA,UAEF;AAEA,iBAAO;AAAA,WACPV,QAAAA,oBAAoB;AAAA,MACxB;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,aAAAa,IAAAA,YAAA,OAAA;AAAA,QAAA,SAAmB,GAAGxC,MAAMyC,SAAS,IAAIzC,MAAM0C,KAAK,IAAItC,WAAWe,QAAQnB,MAAM2C,aAAa,EAAE;AAAA,QAAE,OAC7FnB,QAAIf,UAAUU,QAAMK;AAAAA,QAAE,aAAUb,YAAYQ;AAAAA,MAAK,GAAA,IAAA;AAAA;EAG1D;AACF,CAAC;;"}

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

@@ -0,0 +1,64 @@
+"use strict";
+const vue = require("vue");
+const lexical = require("lexical");
+const utils = require("@lexical/utils");
+const lexicalVue = require("lexical-vue");
+const index = require("./index.js");
+const HtmlEditDialog = require("./HtmlEditDialog.js");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "HtmlBlockTools",
+  setup(__props) {
+    const editor = lexicalVue.useLexicalComposer();
+    const htmlContent = vue.ref("");
+    const editHandle = async () => {
+      var result = await HtmlEditDialog.ShowHtmlEditPanel(htmlContent.value);
+      editor.dispatchCommand(index.HTML_BLOCK_CHANGE, result);
+    };
+    vue.onMounted(() => {
+      const unregisterMergeListener = utils.mergeRegister(
+        editor.registerCommand(lexical.SELECTION_CHANGE_COMMAND, (payload, newEditor) => {
+          const selection = lexical.$getSelection();
+          if (lexical.$isNodeSelection(selection)) {
+            const node = selection.getNodes()[0];
+            if (node.__type == index.HtmlBlockNode.getType()) {
+              htmlContent.value = node == null ? void 0 : node.__html;
+            }
+          }
+          return false;
+        }, 1)
+      );
+      vue.onUnmounted(() => unregisterMergeListener());
+    });
+    return (_ctx, _cache) => {
+      const _component_MKSvgIcon = vue.resolveComponent("MKSvgIcon");
+      const _component_el_button = vue.resolveComponent("el-button");
+      const _component_el_button_group = vue.resolveComponent("el-button-group");
+      return vue.openBlock(), vue.createBlock(_component_el_button_group, null, {
+        default: vue.withCtx(() => [
+          vue.createVNode(_component_el_button, {
+            text: "",
+            onClick: editHandle
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_MKSvgIcon, { iconClass: `Edit` })
+            ]),
+            _: 1
+          }),
+          vue.createVNode(_component_el_button, {
+            text: "",
+            type: "danger",
+            onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(editor).dispatchCommand(vue.unref(index.REMOVE_HTML_BLOCK_COMMAND), null))
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_MKSvgIcon, { iconClass: `Delete` })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+module.exports = _sfc_main;
+//# sourceMappingURL=HtmlBlockTools.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HtmlBlockTools.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/HtmlBlockPlugin/HtmlBlockTools.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { \r\n  SELECTION_CHANGE_COMMAND,$getSelection,$isNodeSelection \r\n} from 'lexical'\r\nimport { mergeRegister } from '@lexical/utils'\r\nimport { onMounted, onUnmounted,ref } from 'vue'\r\nimport { useLexicalComposer } from 'lexical-vue'\r\nimport { REMOVE_HTML_BLOCK_COMMAND,HTML_BLOCK_CHANGE, HtmlBlockNode } from './index'\r\nimport { ShowHtmlEditPanel } from \"./HtmlEditDialog\"\r\n\r\n \r\nconst editor = useLexicalComposer()\r\nconst htmlContent = ref(\"\")\r\n\r\n// 编辑\r\nconst editHandle = async  ()=>{\r\n  var result = await ShowHtmlEditPanel(htmlContent.value);\r\n  editor.dispatchCommand(HTML_BLOCK_CHANGE,result as string)\r\n}\r\n\r\nonMounted(()=>{\r\n\r\n  const unregisterMergeListener = mergeRegister(\r\n    editor.registerCommand(SELECTION_CHANGE_COMMAND, (payload, newEditor) => {\r\n        \r\n      const selection = $getSelection();\r\n\r\n      if($isNodeSelection(selection)){\r\n\r\n        const node = selection.getNodes()[0] as HtmlBlockNode;\r\n        \r\n        if(node.__type == HtmlBlockNode.getType()){\r\n          htmlContent.value = node?.__html\r\n        }\r\n        \r\n      }\r\n      return false;\r\n    },1)\r\n  )\r\n\r\n  // 卸载\r\n  onUnmounted(() => unregisterMergeListener())\r\n\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n   <el-button-group>\r\n    <el-button text  @click=\"editHandle\">\r\n      <MKSvgIcon :iconClass=\"`Edit`\" /> \r\n    </el-button>\r\n    <el-button text type=\"danger\" @click=\"editor.dispatchCommand(REMOVE_HTML_BLOCK_COMMAND,null)\">\r\n      <MKSvgIcon :iconClass=\"`Delete`\" /> \r\n    </el-button>\r\n  </el-button-group>\r\n</template>\r\n"],"names":["useLexicalComposer","ref","ShowHtmlEditPanel","HTML_BLOCK_CHANGE","onMounted","mergeRegister","SELECTION_CHANGE_COMMAND","$getSelection","$isNodeSelection","HtmlBlockNode","onUnmounted"],"mappings":";;;;;;;;;;AAWA,UAAM,SAASA,WAAAA;AACT,UAAA,cAAcC,QAAI,EAAE;AAG1B,UAAM,aAAa,YAAW;AAC5B,UAAI,SAAS,MAAMC,eAAAA,kBAAkB,YAAY,KAAK;AAC/C,aAAA,gBAAgBC,yBAAkB,MAAgB;AAAA,IAAA;AAG3DC,QAAAA,UAAU,MAAI;AAEZ,YAAM,0BAA0BC,MAAA;AAAA,QAC9B,OAAO,gBAAgBC,QAAAA,0BAA0B,CAAC,SAAS,cAAc;AAEvE,gBAAM,YAAYC,QAAAA;AAEf,cAAAC,QAAAA,iBAAiB,SAAS,GAAE;AAE7B,kBAAM,OAAO,UAAU,SAAS,EAAE,CAAC;AAEnC,gBAAG,KAAK,UAAUC,MAAc,cAAA,QAAA,GAAU;AACxC,0BAAY,QAAQ,6BAAM;AAAA,YAC5B;AAAA,UAEF;AACO,iBAAA;AAAA,WACP,CAAC;AAAA,MAAA;AAIOC,sBAAA,MAAM,yBAAyB;AAAA,IAAA,CAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/HtmlBlockPlugin/HtmlBlockTools.vue2.js

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

package/dist/cjs/components/basic/doc-editor/plugins/HtmlBlockPlugin/HtmlBlockTools.vue2.js.map

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

package/dist/cjs/components/basic/doc-editor/plugins/HtmlBlockPlugin/HtmlEditDialog.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const dm = require("@maketribe/dm");
+const elementPlus = require("element-plus");
+const index = require("../../../code-editor/index.js");
+const langHtml = require("@codemirror/lang-html");
+const ShowHtmlEditPanel = async (content) => {
+  return new Promise((resolve, reject) => {
+    const htmlValue = vue.ref(content);
+    const extensions = [langHtml.html()];
+    const handleCancelClick = () => {
+      dialogInstance.destroy();
+    };
+    const handleConfirmClick = () => {
+      dialogInstance.destroy();
+      resolve(htmlValue.value);
+    };
+    const dialogInstance = dm.Dialoger.customRender({
+      title: "自定义HTML代码块",
+      class: "mk-html-editor-dialog",
+      width: "70%",
+      onClose: () => {
+        dialogInstance.destroy();
+      },
+      body: () => {
+        return vue.createVNode(index.MKCodeEditor, {
+          "modelValue": htmlValue.value,
+          "onUpdate:modelValue": ($event) => htmlValue.value = $event,
+          "extensions": extensions
+        }, null);
+      },
+      footer: () => {
+        return vue.createVNode(vue.Fragment, null, [vue.createVNode(elementPlus.ElButton, {
+          "onClick": handleCancelClick
+        }, {
+          default: () => [vue.createTextVNode("取消")]
+        }), vue.createVNode(elementPlus.ElButton, {
+          "type": "primary",
+          "onClick": handleConfirmClick
+        }, {
+          default: () => [vue.createTextVNode("确定")]
+        })]);
+      }
+    });
+  });
+};
+exports.ShowHtmlEditPanel = ShowHtmlEditPanel;
+//# sourceMappingURL=HtmlEditDialog.js.map

package/dist/cjs/components/basic/doc-editor/plugins/HtmlBlockPlugin/HtmlEditDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HtmlEditDialog.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/HtmlBlockPlugin/HtmlEditDialog.tsx"],"sourcesContent":["\r\nimport { Fragment,ref,unref } from 'vue'\r\nimport { Dialoger } from '@maketribe/dm'\r\nimport {  ElButton} from \"element-plus\";\r\nimport { MKCodeEditor } from \"../../../code-editor\"\r\nimport { html } from \"@codemirror/lang-html\"\r\n/**\r\n * \r\n * @param html \r\n * @returns \r\n */\r\nexport const ShowHtmlEditPanel = async  (content:any) => {\r\n  return new Promise((resolve,reject) => {\r\n\r\n    const htmlValue = ref(content)\r\n\r\n    const extensions = [html()]\r\n\r\n    // 取消编辑\r\n    const handleCancelClick = () => {\r\n      dialogInstance.destroy();\r\n    };\r\n\r\n    // 确认编辑\r\n    const handleConfirmClick = () => {\r\n      dialogInstance.destroy();\r\n      resolve(htmlValue.value);\r\n    };\r\n\r\n    const dialogInstance = Dialoger.customRender({\r\n      title: \"自定义HTML代码块\",\r\n      class: \"mk-html-editor-dialog\",\r\n      width: \"70%\",\r\n      onClose: () => {\r\n        dialogInstance.destroy();\r\n      },\r\n      body: () => {\r\n        return <MKCodeEditor v-model={htmlValue.value} extensions={extensions} ></MKCodeEditor>\r\n      },\r\n      footer: () => {\r\n        return <Fragment>\r\n          <ElButton onClick={handleCancelClick}>取消</ElButton>\r\n          <ElButton type=\"primary\" onClick={handleConfirmClick}>\r\n            确定\r\n          </ElButton>\r\n      </Fragment>\r\n      },\r\n    });\r\n  });\r\n}\r\n"],"names":["ShowHtmlEditPanel","content","Promise","resolve","reject","htmlValue","ref","extensions","html","handleCancelClick","dialogInstance","destroy","handleConfirmClick","value","Dialoger","customRender","title","class","width","onClose","body","_createVNode","MKCodeEditor","$event","footer","_Fragment","ElButton","default","_createTextVNode"],"mappings":";;;;;;;AAWaA,MAAAA,oBAAoB,OAAQC,YAAgB;AACvD,SAAO,IAAIC,QAAQ,CAACC,SAAQC,WAAW;AAErC,UAAMC,YAAYC,QAAIL,OAAO;AAE7B,UAAMM,aAAa,CAACC,SAAI,KAAA,CAAE;AAG1B,UAAMC,oBAAoBA,MAAM;AAC9BC,qBAAeC,QAAO;AAAA;AAIxB,UAAMC,qBAAqBA,MAAM;AAC/BF,qBAAeC,QAAO;AACtBR,cAAQE,UAAUQ,KAAK;AAAA;AAGzB,UAAMH,iBAAiBI,GAAQ,SAACC,aAAa;AAAA,MAC3CC,OAAO;AAAA,MACPC,OAAO;AAAA,MACPC,OAAO;AAAA,MACPC,SAASA,MAAM;AACbT,uBAAeC,QAAO;AAAA,MACvB;AAAA,MACDS,MAAMA,MAAM;AACV,eAAAC,IAAAA,YAAAC,MAAAA,cAAA;AAAA,UAAA,cAA8BjB,UAAUQ;AAAAA,UAAK,uBAAAU,YAAflB,UAAUQ,QAAKU;AAAAA,UAAA,cAAchB;AAAAA,QAAU,GAAA,IAAA;AAAA,MACtE;AAAA,MACDiB,QAAQA,MAAM;AACZ,eAAAH,IAAA,YAAAI,IAAA,UAAAJ,MAAAA,CAAAA,IAAAA,YAAAK,YAAAA,UAAA;AAAA,UAAA,WACqBjB;AAAAA,QAAiB,GAAA;AAAA,UAAAkB,SAAAA,MAAA,CAAAC,oBAAA,IAAA,CAAA;AAAA,SAAAP,GAAAA,IAAA,YAAAK,sBAAA;AAAA,UAAA,QAAA;AAAA,UAAA,WACFd;AAAAA,QAAkB,GAAA;AAAA,UAAAe,SAAAA,MAAA,CAAAC,oBAAA,IAAA,CAAA;AAAA,QAAA,CAAA,CAAA,CAAA;AAAA,MAIxD;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;;"}

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

@@ -5,124 +5,100 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
 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 HTML_BLOCK_CHANGE = lexical.createCommand("HTML_BLOCK_CHANGE");
+const REMOVE_HTML_BLOCK_COMMAND = 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;
+const ClassMake = "mk-doc-html-block";
+class HtmlBlockNode extends lexical.DecoratorNode {
+  constructor(html, key) {
+    super(key);
+    __publicField(this, "__html");
+    __publicField(this, "__indent");
+    this.__html = html;
+    this.__indent = 0;
   }
   static getType() {
     return "HtmlBlock";
   }
   static clone(node) {
-    return new HtmlBlockNode(node.__attrs, node.__format, node.__key);
+    return new HtmlBlockNode(node.__html, node.__key);
   }
   static importJSON(serializedNode) {
-    const node = $createHtmlBlockNode(serializedNode.attrs);
-    node.setFormat(serializedNode.format);
+    const node = $createHtmlBlockNode(serializedNode.html);
     return node;
   }
+  setHtml(html) {
+    this.getWritable().__html = html;
+  }
   exportJSON() {
     return {
       ...super.exportJSON(),
       type: this.getType(),
       version: 1,
-      attrs: this.__attrs
+      indent: this.__indent,
+      html: this.__html
     };
   }
   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");
+    element.innerHTML = this.__html;
+    element.setAttribute("class", ClassMake);
     return { element };
   }
   static importDOM() {
     return {
-      img: (dn) => {
+      div: (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
+          conversion: dn.classList.contains(ClassMake) ? (domNode) => {
+            return {
+              node: $createHtmlBlockNode(domNode.innerHTML)
+            };
+          } : null,
+          priority: 10
         };
       }
     };
   }
+  createDOM() {
+    return document.createElement("div");
+  }
   updateDOM() {
     return false;
   }
   getTextContent(_includeInert, _includeDirectionless) {
-    return this.__attrs.content;
+    const element = document.createElement("div");
+    element.innerHTML = this.__html;
+    return element.textContent;
   }
   decorate(_editor, config) {
     const embedBlockTheme = config.theme.embedBlock || {};
     return vue.h(DocHtmlBlockComponent, {
       baseClass: embedBlockTheme.base || "",
       focusClass: embedBlockTheme.focus || "",
-      format: this.__format,
+      class: ClassMake,
       nodeKey: this.getKey(),
-      attrs: this.__attrs
+      html: this.__html
     });
   }
+  setIndent(indentLevel) {
+    const self = this.getWritable();
+    self.__indent = indentLevel;
+    return this;
+  }
+  getIndent() {
+    return this.getLatest().__indent;
+  }
+  isInline() {
+    return false;
+  }
 }
-function $createHtmlBlockNode(attrs) {
-  return new HtmlBlockNode(attrs);
+function $createHtmlBlockNode(html) {
+  return new HtmlBlockNode(html);
 }
 exports.$createHtmlBlockNode = $createHtmlBlockNode;
+exports.HTML_BLOCK_CHANGE = HTML_BLOCK_CHANGE;
 exports.HtmlBlockNode = HtmlBlockNode;
 exports.INSERT_HTML_BLOCK_COMMAND = INSERT_HTML_BLOCK_COMMAND;
+exports.REMOVE_HTML_BLOCK_COMMAND = REMOVE_HTML_BLOCK_COMMAND;
 //# sourceMappingURL=index.js.map

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

@@ -1 +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;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/HtmlBlockPlugin/index.ts"],"sourcesContent":["\r\nimport type {\r\n  DOMConversionMap,\r\n  DOMExportOutput,\r\n  EditorConfig,\r\n  LexicalEditor,\r\n  LexicalNode,\r\n  NodeKey,\r\n  Spread,\r\n  LexicalCommand,\r\n  SerializedLexicalNode\r\n} from 'lexical'\r\nimport { createCommand,DecoratorNode } from 'lexical'\r\nimport { h ,type Component } from 'vue'\r\nimport DocHtmlBlockComponent from \"./DocHtmlBlockComponent\"\r\n\r\n\r\n/**\r\n * html块改变\r\n */\r\nexport const HTML_BLOCK_CHANGE: LexicalCommand<string> = 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 * 插入html块指令\r\n */\r\nexport const INSERT_HTML_BLOCK_COMMAND: LexicalCommand<string> = createCommand('INSERT_HTML_BLOCK_COMMAND')\r\n\r\n/**\r\n * 图片节点序列化\r\n */\r\nexport type SerializedHtmlBlockNode = Spread<\r\n  {\r\n    html: string,\r\n    indent:number\r\n  },\r\n  SerializedLexicalNode\r\n>\r\n\r\n// 类标识\r\nconst ClassMake = \"mk-doc-html-block\";\r\n\r\n/**\r\n * 定义html节点\r\n */\r\nexport class HtmlBlockNode extends DecoratorNode<Component> {\r\n  __html: string\r\n  __indent:number\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.__html,node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedHtmlBlockNode): HtmlBlockNode {\r\n    const node = $createHtmlBlockNode(serializedNode.html)\r\n    return node\r\n  }\r\n\r\n  constructor(html: string,  key?: NodeKey) {\r\n    super(key)\r\n    this.__html = html\r\n    this.__indent = 0;\r\n  }\r\n\r\n  setHtml(html:string){\r\n    this.getWritable().__html = html\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      indent:this.__indent,\r\n      html: this.__html\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.__html;\r\n\r\n    element.setAttribute(\"class\",ClassMake)\r\n    \r\n    return { element }\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      div:  (dn: HTMLElement):any => {\r\n        return  {\r\n          conversion: dn.classList.contains(ClassMake) ? (domNode: HTMLElement) => {\r\n            return { \r\n              node:$createHtmlBlockNode(domNode.innerHTML as string) \r\n            };\r\n          } : null,\r\n          priority: 10\r\n        }\r\n      },\r\n    }\r\n  }\r\n  createDOM() {\r\n    return document.createElement('div')\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\r\n    const element = document.createElement('div')  \r\n    element.innerHTML = this.__html;\r\n    return element.textContent as string;\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      class:ClassMake,\r\n      nodeKey: this.getKey(),\r\n      html: this.__html\r\n    })\r\n  }\r\n  setIndent(indentLevel:number) {\r\n    const self = this.getWritable();\r\n    self.__indent = indentLevel;\r\n    return this;\r\n  }\r\n  getIndent() {\r\n    return this.getLatest().__indent;\r\n  }\r\n  isInline() {\r\n    return false;\r\n  }\r\n}\r\n\r\n/**\r\n * 创建图片节点\r\n * @param src \r\n * @returns \r\n */\r\nexport function $createHtmlBlockNode(html: string): HtmlBlockNode {\r\n  return new HtmlBlockNode(html)\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","DecoratorNode","h"],"mappings":";;;;;;;;AAoBa,MAAA,oBAA4CA,sBAAc,mBAAmB;AAK7E,MAAA,4BAA4DA,sBAAc,2BAA2B;AAKrG,MAAA,4BAAoDA,sBAAc,2BAA2B;AAc1G,MAAM,YAAY;AAKX,MAAM,sBAAsBC,QAAAA,cAAyB;AAAA,EAiB1D,YAAY,MAAe,KAAe;AACxC,UAAM,GAAG;AAjBX;AACA;AAiBE,SAAK,SAAS;AACd,SAAK,WAAW;AAAA,EAClB;AAAA,EAjBA,OAAO,UAAkB;AAChB,WAAA;AAAA,EACT;AAAA,EAEA,OAAO,MAAM,MAAoC;AAC/C,WAAO,IAAI,cAAc,KAAK,QAAO,KAAK,KAAK;AAAA,EACjD;AAAA,EAEA,OAAO,WAAW,gBAAwD;AAClE,UAAA,OAAO,qBAAqB,eAAe,IAAI;AAC9C,WAAA;AAAA,EACT;AAAA,EAQA,QAAQ,MAAY;AACb,SAAA,YAAA,EAAc,SAAS;AAAA,EAC9B;AAAA,EAEA,aAAsC;AAE7B,WAAA;AAAA,MACL,GAAG,MAAM,WAAW;AAAA,MACpB,MAAM,KAAK,QAAQ;AAAA,MACnB,SAAS;AAAA,MACT,QAAO,KAAK;AAAA,MACZ,MAAM,KAAK;AAAA,IAAA;AAAA,EAEf;AAAA,EAEA,YAA6B;AAErB,UAAA,UAAU,SAAS,cAAc,KAAK;AAG5C,YAAQ,YAAY,KAAK;AAEjB,YAAA,aAAa,SAAQ,SAAS;AAEtC,WAAO,EAAE,QAAQ;AAAA,EACnB;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAM,CAAC,OAAwB;AACrB,eAAA;AAAA,UACN,YAAY,GAAG,UAAU,SAAS,SAAS,IAAI,CAAC,YAAyB;AAChE,mBAAA;AAAA,cACL,MAAK,qBAAqB,QAAQ,SAAmB;AAAA,YAAA;AAAA,UACvD,IACE;AAAA,UACJ,UAAU;AAAA,QAAA;AAAA,MAEd;AAAA,IAAA;AAAA,EAEJ;AAAA,EACA,YAAY;AACH,WAAA,SAAS,cAAc,KAAK;AAAA,EACrC;AAAA,EACA,YAAmB;AACV,WAAA;AAAA,EACT;AAAA,EAEA,eACE,eACA,uBACQ;AAEF,UAAA,UAAU,SAAS,cAAc,KAAK;AAC5C,YAAQ,YAAY,KAAK;AACzB,WAAO,QAAQ;AAAA,EACjB;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,OAAM;AAAA,MACN,SAAS,KAAK,OAAO;AAAA,MACrB,MAAM,KAAK;AAAA,IAAA,CACZ;AAAA,EACH;AAAA,EACA,UAAU,aAAoB;AACtB,UAAA,OAAO,KAAK;AAClB,SAAK,WAAW;AACT,WAAA;AAAA,EACT;AAAA,EACA,YAAY;AACH,WAAA,KAAK,UAAY,EAAA;AAAA,EAC1B;AAAA,EACA,WAAW;AACF,WAAA;AAAA,EACT;AACF;AAOO,SAAS,qBAAqB,MAA6B;AACzD,SAAA,IAAI,cAAc,IAAI;AAC/B;;;;;;"}

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

@@ -1,38 +1,28 @@
 "use strict";
 const vue = require("vue");
-require("@lexical/text");
+const lexicalVue = require("lexical-vue");
 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 defines = require("../ToolbarPlugin/defines.js");
+const HtmlEditDialog = require("./HtmlEditDialog.js");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   setup(__props) {
-    const editor = useLexicalComposer.useLexicalComposer();
+    const editor = lexicalVue.useLexicalComposer();
     vue.onMounted(() => {
       if (!editor.hasNodes([index.HtmlBlockNode])) {
         throw new Error("HtmlBlockPlugin: 自定义HTML代码块节点未注册！");
       }
+      defines.RegisterToolbarExtend({
+        icon: "html-code",
+        text: "自定义代码块",
+        action: async () => {
+          var result = await HtmlEditDialog.ShowHtmlEditPanel("");
+          editor.dispatchCommand(index.INSERT_HTML_BLOCK_COMMAND, result);
+        },
+        sort: 9
+      });
       const unregister = utils.mergeRegister(
         // 插入
         editor.registerCommand(index.INSERT_HTML_BLOCK_COMMAND, (payload) => {

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

@@ -1 +1 @@
-{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/HtmlBlockPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { useLexicalComposer } from '../../lexical-vue'\r\nimport { $insertNodeToNearestRoot,mergeRegister } from '@lexical/utils'\r\nimport { COMMAND_PRIORITY_EDITOR,COMMAND_PRIORITY_LOW,$getSelection,CLICK_COMMAND } from 'lexical'\r\n\r\nimport { onMounted, onUnmounted } from 'vue'\r\nimport { INSERT_HTML_BLOCK_COMMAND,HtmlBlockNode,$createHtmlBlockNode,HtmlBlockAttrs } from './index'\r\nimport { RegisterToolbarExtend,type ToolbarExtendPlugin } from \"../ToolbarPlugin/defines\"\r\n\r\n\r\nconst editor = useLexicalComposer()\r\n\r\nonMounted(() => {\r\n\r\n  if (!editor.hasNodes([HtmlBlockNode])){\r\n    throw new Error('HtmlBlockPlugin: 自定义HTML代码块节点未注册！')\r\n  }\r\n \r\n  // 注册到工具条\r\n  // RegisterToolbarExtend({\r\n  //   icon:\"html-code\",\r\n  //   text:\"自定义代码块\",\r\n  //   action:async ()=>{\r\n  //     editor.dispatchCommand(INSERT_HTML_BLOCK_COMMAND,{\r\n  //       content:`<div class=\"aa\">我是自定义代码块</div>`,\r\n  //       css:\"div.aa{ width:100%;height:300px }\"\r\n  //     })\r\n  //   },\r\n  //   sort:9\r\n  // } as ToolbarExtendPlugin)\r\n\r\n  // 注册指令\r\n  const unregister = mergeRegister(\r\n\r\n    // 插入\r\n    editor.registerCommand<HtmlBlockAttrs>(INSERT_HTML_BLOCK_COMMAND,(payload) => {\r\n      $insertNodeToNearestRoot($createHtmlBlockNode(payload))\r\n      return true\r\n    },COMMAND_PRIORITY_EDITOR),\r\n  );\r\n\r\n  onUnmounted(() => unregister())\r\n})\r\n</script>\r\n\r\n<template />\r\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;;;;;;;"}
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/HtmlBlockPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { useLexicalComposer } from 'lexical-vue'\r\nimport { $insertNodeToNearestRoot,mergeRegister } from '@lexical/utils'\r\nimport { \r\n  $isNodeSelection, COMMAND_PRIORITY_EDITOR,COMMAND_PRIORITY_LOW,$getSelection,CLICK_COMMAND \r\n} from 'lexical'\r\n\r\nimport { onMounted, onUnmounted } from 'vue'\r\nimport { REMOVE_HTML_BLOCK_COMMAND,HTML_BLOCK_CHANGE,INSERT_HTML_BLOCK_COMMAND,HtmlBlockNode,$createHtmlBlockNode } from './index'\r\nimport { RegisterToolbarExtend,type ToolbarExtendPlugin } from \"../ToolbarPlugin/defines\"\r\nimport { ShowHtmlEditPanel } from \"./HtmlEditDialog\"\r\nimport { SELECTED_COMPONENT_COMMAND,ComponentSelectEvent } from \"../commands\"\r\n\r\n\r\nconst editor = useLexicalComposer()\r\n\r\nonMounted(() => {\r\n\r\n  if (!editor.hasNodes([HtmlBlockNode])){\r\n    throw new Error('HtmlBlockPlugin: 自定义HTML代码块节点未注册！')\r\n  }\r\n \r\n  // 注册到工具条\r\n  RegisterToolbarExtend({\r\n    icon:\"html-code\",\r\n    text:\"自定义代码块\",\r\n    action:async ()=>{\r\n\r\n      var result = await ShowHtmlEditPanel(\"\");\r\n\r\n      editor.dispatchCommand(INSERT_HTML_BLOCK_COMMAND,result as string)\r\n    },\r\n    sort:9\r\n  } as ToolbarExtendPlugin)\r\n\r\n  // 注册指令\r\n  const unregister = mergeRegister(\r\n    // 插入\r\n    editor.registerCommand<string>(INSERT_HTML_BLOCK_COMMAND,(payload) => {\r\n      $insertNodeToNearestRoot($createHtmlBlockNode(payload))\r\n      return true\r\n    },COMMAND_PRIORITY_EDITOR)\r\n  );\r\n\r\n  onUnmounted(() => unregister())\r\n})\r\n</script>\r\n\r\n<template />\r\n"],"names":["useLexicalComposer","onMounted","HtmlBlockNode","RegisterToolbarExtend","ShowHtmlEditPanel","INSERT_HTML_BLOCK_COMMAND","mergeRegister","$insertNodeToNearestRoot","$createHtmlBlockNode","COMMAND_PRIORITY_EDITOR","onUnmounted"],"mappings":";;;;;;;;;;;AAeA,UAAM,SAASA,WAAAA;AAEfC,QAAAA,UAAU,MAAM;AAEd,UAAI,CAAC,OAAO,SAAS,CAACC,MAAAA,aAAa,CAAC,GAAE;AAC9B,cAAA,IAAI,MAAM,mCAAmC;AAAA,MACrD;AAGsBC,oCAAA;AAAA,QACpB,MAAK;AAAA,QACL,MAAK;AAAA,QACL,QAAO,YAAU;AAEX,cAAA,SAAS,MAAMC,iCAAkB,EAAE;AAEhC,iBAAA,gBAAgBC,iCAA0B,MAAgB;AAAA,QACnE;AAAA,QACA,MAAK;AAAA,MAAA,CACiB;AAGxB,YAAM,aAAaC,MAAA;AAAA;AAAA,QAEjB,OAAO,gBAAwBD,iCAA0B,CAAC,YAAY;AAC3CE,yCAAAC,MAAAA,qBAAqB,OAAO,CAAC;AAC/C,iBAAA;AAAA,WACPC,+BAAuB;AAAA,MAAA;AAGfC,sBAAA,MAAM,YAAY;AAAA,IAAA,CAC/B;;;;;;;"}