@maketribe/ms-app 3.2.22 → 3.2.23

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

@@ -1,34 +1,13 @@
-import { defineComponent, ref, createVNode, mergeProps } from "vue";
-import { CLICK_COMMAND, COMMAND_PRIORITY_LOW } from "lexical";
+import { defineComponent, ref, createVNode } from "vue";
+import { CLICK_COMMAND, COMMAND_PRIORITY_LOW, $getSelection, $isNodeSelection } from "lexical";
 import { mergeRegister } from "@lexical/utils";
-import "@lexical/text";
-import { useMounted } from "../../lexical-vue/composables/useMounted.js";
-import "@lexical/overflow";
-import "tiny-invariant";
-import "@lexical/history";
-import { useLexicalComposer } from "../../lexical-vue/composables/useLexicalComposer.js";
-import { useLexicalNodeSelection } from "../../lexical-vue/composables/useLexicalNodeSelection.js";
-import "@lexical/list";
-import "@lexical/dragon";
-import "@lexical/plain-text";
-import "@lexical/rich-text";
-import "@lexical/yjs";
-import "yjs";
-import "../../lexical-vue/components/LexicalDecoratedTeleports.js";
-import "@lexical/html";
-import "@lexical/link";
-import "@lexical/mark";
-import "@lexical/table";
-import "@lexical/hashtag";
-import _sfc_main from "../../lexical-vue/components/LexicalBlockWithAlignableContents.vue2.js";
-import "@lexical/markdown";
-import "../../lexical-vue/composables/useCollaborationContext.js";
-import "../../lexical-vue/components/LexicalMenu/shared.js";
-import "../../lexical-vue/components/LexicalAutoEmbedPlugin/shared.js";
-import "../../lexical-vue/components/LexicalTypeaheadMenuPlugin/shared.js";
+import { useLexicalComposer, useLexicalNodeSelection, useMounted } from "lexical-vue";
+import { REMOVE_HTML_BLOCK_COMMAND, HTML_BLOCK_CHANGE } from "./index.js";
+import { SELECTED_COMPONENT_COMMAND } from "../commands.js";
+import _sfc_main from "./HtmlBlockTools.vue.js";
 const DocHtmlBlockComponent = /* @__PURE__ */ defineComponent({
   name: "DocHtmlBlockComponent",
-  props: ["baseClass", "focusClass", "nodeKey", "attrs"],
+  props: ["baseClass", "focusClass", "class", "nodeKey", "html"],
   setup(props) {
     const editor = useLexicalComposer();
     const {
@@ -37,54 +16,55 @@ const DocHtmlBlockComponent = /* @__PURE__ */ defineComponent({
       clearSelection
     } = useLexicalNodeSelection(props.nodeKey);
     const selfElRef = ref(null);
+    const htmlContent = ref(props.html);
     useMounted(() => {
       return mergeRegister(
-        // 选中图
+        // 选中
         editor.registerCommand(CLICK_COMMAND, (event) => {
-          console.log(event.target);
           if (event.target === selfElRef.value) {
             event.preventDefault();
             if (!event.shiftKey) {
               clearSelection();
             }
             setSelected(true);
+            editor.dispatchCommand(SELECTED_COMPONENT_COMMAND, {
+              el: selfElRef.value,
+              component: _sfc_main
+            });
             return true;
           }
+          editor.dispatchCommand(SELECTED_COMPONENT_COMMAND, null);
+          return false;
+        }, COMMAND_PRIORITY_LOW),
+        // 删除
+        editor.registerCommand(REMOVE_HTML_BLOCK_COMMAND, () => {
+          const selection = $getSelection();
+          if ($isNodeSelection(selection)) {
+            selection.getNodes().forEach((node) => node.remove());
+            editor.dispatchCommand(SELECTED_COMPONENT_COMMAND, null);
+          }
+          return false;
+        }, COMMAND_PRIORITY_LOW),
+        // 修改
+        editor.registerCommand(HTML_BLOCK_CHANGE, (payload) => {
+          const selection = $getSelection();
+          if ($isNodeSelection(selection)) {
+            const node = selection.getNodes()[0];
+            if (node.getKey() == props.nodeKey) {
+              htmlContent.value = payload;
+              node.setHtml(payload);
+            }
+          }
           return false;
         }, COMMAND_PRIORITY_LOW)
       );
     });
     return () => {
-      return createVNode(_sfc_main, {
-        "nodeKey": "props.nodeKey"
-      }, {
-        default: () => [createVNode("iframe", mergeProps({
-          "ref": (el) => selfElRef.value = el,
-          "srcdoc": `
-          <html>
-            <head>
-              <style type="text/css">
-                ${props.attrs.css}
-              </style>
-               <script>
-                ${props.attrs.js}
-              <\/script>
-            </head>
-            <body>${props.attrs.content}</body>
-          </html>
-          `,
-          "style": {
-            width: "100%",
-            padding: 0,
-            margin: 0
-          }
-        }, {
-          frameborder: 0,
-          allowFullScreen: true
-        }, {
-          "allow": "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-        }), null)]
-      });
+      return createVNode("div", {
+        "class": `${props.baseClass} ${props.class} ${isSelected.value ? props.focusClass : ""}`,
+        "ref": (el) => selfElRef.value = el,
+        "innerHTML": htmlContent.value
+      }, null);
     };
   }
 });

package/dist/esm/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\";\nimport {\n  $getSelection,\n  $isNodeSelection,\n  CLICK_COMMAND,\n  COMMAND_PRIORITY_LOW,\n} from \"lexical\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport {\n  useLexicalComposer,\n  useLexicalNodeSelection,\n  useMounted,\n  DecoratorBlockNode,\n  LexicalBlockWithAlignableContents,\n} from \"../../lexical-vue\";\nimport { defineComponent, ref, reactive, computed, watch } from \"vue\";\nimport { Messager } from \"@maketribe/dm\";\n\n/**\n * 图片渲染组件\n */\nexport default defineComponent({\n  name: \"DocHtmlBlockComponent\",\n  props: [\"baseClass\", \"focusClass\", \"nodeKey\", \"attrs\"],\n  setup(props) {\n    const editor = useLexicalComposer();\n    const { isSelected, setSelected, clearSelection } = useLexicalNodeSelection(\n      props.nodeKey\n    );\n    const selfElRef = ref<any>(null);\n\n    // 编辑器挂载的时候\n    useMounted(() => {\n      return mergeRegister(\n        // 选中图\n        editor.registerCommand<MouseEvent>(\n          CLICK_COMMAND,\n          (event) => {\n            console.log(event.target);\n            if (event.target === selfElRef.value) {\n              event.preventDefault();\n\n              if (!event.shiftKey) {\n                clearSelection();\n              }\n\n              setSelected(true);\n\n              return true;\n            }\n\n            return false;\n          },\n          COMMAND_PRIORITY_LOW\n        )\n      );\n    });\n\n    return () => {\n      return (\n        <LexicalBlockWithAlignableContents nodeKey=\"props.nodeKey\">\n          <iframe\n            ref={(el) => (selfElRef.value = el)}\n            srcdoc={`\n          <html>\n            <head>\n              <style type=\"text/css\">\n                ${props.attrs.css}\n              </style>\n               <script>\n                ${props.attrs.js}\n              </script>\n            </head>\n            <body>${props.attrs.content}</body>\n          </html>\n          `}\n            style={{ width: \"100%\", padding: 0, margin: 0 }}\n            {...{ frameborder: 0, allowFullScreen: true }}\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n          ></iframe>\n        </LexicalBlockWithAlignableContents>\n      );\n    };\n  },\n});\n"],"names":["defineComponent","name","props","setup","editor","useLexicalComposer","isSelected","setSelected","clearSelection","useLexicalNodeSelection","nodeKey","selfElRef","ref","useMounted","mergeRegister","registerCommand","CLICK_COMMAND","event","console","log","target","value","preventDefault","shiftKey","COMMAND_PRIORITY_LOW","_createVNode","LexicalBlockWithAlignableContents","default","_mergeProps","el","attrs","css","js","content","width","padding","margin","frameborder","allowFullScreen"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAeA,wDAAgB;AAAA,EAC7BC,MAAM;AAAA,EACNC,OAAO,CAAC,aAAa,cAAc,WAAW,OAAO;AAAA,EACrDC,MAAMD,OAAO;AACX,UAAME,SAASC;AACf,UAAM;AAAA,MAAEC;AAAAA,MAAYC;AAAAA,MAAaC;AAAAA,IAAe,IAAIC,wBAClDP,MAAMQ,OACR;AACA,UAAMC,YAAYC,IAAS,IAAI;AAG/BC,eAAW,MAAM;AACf,aAAOC;AAAAA;AAAAA,QAELV,OAAOW,gBACLC,eACCC,WAAU;AACTC,kBAAQC,IAAIF,MAAMG,MAAM;AACxB,cAAIH,MAAMG,WAAWT,UAAUU,OAAO;AACpCJ,kBAAMK,eAAc;AAEpB,gBAAI,CAACL,MAAMM,UAAU;AACnBf;YACF;AAEAD,wBAAY,IAAI;AAEhB,mBAAO;AAAA,UACT;AAEA,iBAAO;AAAA,WAETiB,oBACF;AAAA,MACF;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,aAAAC,YAAAC,WAAA;AAAA,QAAA,WAAA;AAAA,MAAA,GAAA;AAAA,QAAAC,SAAAA,MAAAF,CAAAA,sBAAAG,WAAA;AAAA,UAAA,OAGYC,QAAQlB,UAAUU,QAAQQ;AAAAA,UAAG,UAC3B;AAAA;AAAA;AAAA;AAAA,kBAIF3B,MAAM4B,MAAMC,GAAG;AAAA;AAAA;AAAA,kBAGf7B,MAAM4B,MAAME,EAAE;AAAA;AAAA;AAAA,oBAGZ9B,MAAM4B,MAAMG,OAAO;AAAA;AAAA;AAAA,UAE5B,SACQ;AAAA,YAAEC,OAAO;AAAA,YAAQC,SAAS;AAAA,YAAGC,QAAQ;AAAA,UAAE;AAAA,QAAC,GAAA;AAAA,UACzCC,aAAa;AAAA,UAAGC,iBAAiB;AAAA,QAAI,GAAA;AAAA,UAAA,SAAA;AAAA,QAAA,CAAA,GAAA,IAAA,CAAA;AAAA,MAAA,CAAA;AAAA;EAMrD;AACF,CAAC;"}
+{"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,wDAAgB;AAAA,EAC7BC,MAAM;AAAA,EACNC,OAAO,CAAC,aAAa,cAAc,SAAQ,WAAW,MAAM;AAAA,EAC5DC,MAAMD,OAAO;AACX,UAAME,SAASC;AACf,UAAM;AAAA,MAAEC;AAAAA,MAAYC;AAAAA,MAAaC;AAAAA,IAAe,IAAIC,wBAAwBP,MAAMQ,OAAO;AAEzF,UAAMC,YAAYC,IAAS,IAAI;AAC/B,UAAMC,cAAcD,IAAIV,MAAMY,IAAI;AAGlCC,eAAW,MAAM;AACf,aAAOC;AAAAA;AAAAA,QAELZ,OAAOa,gBAA4BC,eAAeC,WAAU;AAC1D,cAAIA,MAAMC,WAAWT,UAAUU,OAAO;AAEpCF,kBAAMG,eAAc;AAEpB,gBAAI,CAACH,MAAMI,UAAU;AAAEf;YAAmB;AAE1CD,wBAAY,IAAI;AAGhBH,mBAAOoB,gBAAgBC,4BAA2B;AAAA,cAChDC,IAAGf,UAAUU;AAAAA,cACbM,WAAUC;AAAAA,YACZ,CAAyB;AAEzB,mBAAO;AAAA,UACT;AAEAxB,iBAAOoB,gBAAgBC,4BAA2B,IAAI;AACtD,iBAAO;AAAA,QACR,GAAEI,oBAAoB;AAAA;AAAA,QAEvBzB,OAAOa,gBAAgBa,2BAA2B,MAAM;AAEtD,gBAAMC,YAAYC;AAElB,cAAGC,iBAAiBF,SAAS,GAAE;AAE7BA,sBAAUG,SAAQ,EAAGC,QAAQC,UAAMA,KAAKC,OAAM,CAAE;AAEhDjC,mBAAOoB,gBAAgBC,4BAA2B,IAAI;AAAA,UACxD;AACA,iBAAO;AAAA,QACR,GAACI,oBAAoB;AAAA;AAAA,QAEtBzB,OAAOa,gBAAgBqB,mBAAmBC,aAAmB;AAE3D,gBAAMR,YAAYC;AAElB,cAAGC,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,oBAAoB;AAAA,MACxB;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,aAAAa,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/esm/components/basic/doc-editor/plugins/HtmlBlockPlugin/HtmlBlockTools.vue.js

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

package/dist/esm/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":[],"mappings":";;;;;;;;;AAWA,UAAM,SAAS;AACT,UAAA,cAAc,IAAI,EAAE;AAG1B,UAAM,aAAa,YAAW;AAC5B,UAAI,SAAS,MAAM,kBAAkB,YAAY,KAAK;AAC/C,aAAA,gBAAgB,mBAAkB,MAAgB;AAAA,IAAA;AAG3D,cAAU,MAAI;AAEZ,YAAM,0BAA0B;AAAA,QAC9B,OAAO,gBAAgB,0BAA0B,CAAC,SAAS,cAAc;AAEvE,gBAAM,YAAY;AAEf,cAAA,iBAAiB,SAAS,GAAE;AAE7B,kBAAM,OAAO,UAAU,SAAS,EAAE,CAAC;AAEnC,gBAAG,KAAK,UAAU,cAAc,QAAA,GAAU;AACxC,0BAAY,QAAQ,6BAAM;AAAA,YAC5B;AAAA,UAEF;AACO,iBAAA;AAAA,WACP,CAAC;AAAA,MAAA;AAIO,kBAAA,MAAM,yBAAyB;AAAA,IAAA,CAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

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

package/dist/esm/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/esm/components/basic/doc-editor/plugins/HtmlBlockPlugin/HtmlEditDialog.js

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

package/dist/esm/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,IAAIL,OAAO;AAE7B,UAAMM,aAAa,CAACC,KAAI,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,SAASC,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,YAAAC,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,YAAAI,UAAAJ,MAAAA,CAAAA,YAAAK,UAAA;AAAA,UAAA,WACqBjB;AAAAA,QAAiB,GAAA;AAAA,UAAAkB,SAAAA,MAAA,CAAAC,gBAAA,IAAA,CAAA;AAAA,SAAAP,GAAAA,YAAAK,UAAA;AAAA,UAAA,QAAA;AAAA,UAAA,WACFd;AAAAA,QAAkB,GAAA;AAAA,UAAAe,SAAAA,MAAA,CAAAC,gBAAA,IAAA,CAAA;AAAA,QAAA,CAAA,CAAA,CAAA;AAAA,MAIxD;AAAA,IACF,CAAC;AAAA,EACH,CAAC;AACH;"}

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

@@ -1,128 +1,104 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { createCommand } from "lexical";
+import { createCommand, DecoratorNode } from "lexical";
 import { h } from "vue";
-import "@lexical/text";
-import "@lexical/utils";
-import "@lexical/overflow";
-import "tiny-invariant";
-import "@lexical/history";
-import "@lexical/list";
-import "@lexical/dragon";
-import "@lexical/plain-text";
-import "@lexical/rich-text";
-import "@lexical/yjs";
-import "yjs";
-import "../../lexical-vue/components/LexicalDecoratedTeleports.js";
-import "@lexical/html";
-import "@lexical/link";
-import "@lexical/mark";
-import "@lexical/table";
-import "@lexical/hashtag";
-import { DecoratorBlockNode } from "../../lexical-vue/components/LexicalDecoratorBlockNode.js";
-import "@lexical/markdown";
-import "../../lexical-vue/composables/useCollaborationContext.js";
-import "../../lexical-vue/components/LexicalMenu/shared.js";
-import "../../lexical-vue/components/LexicalAutoEmbedPlugin/shared.js";
-import "../../lexical-vue/components/LexicalTypeaheadMenuPlugin/shared.js";
 import DocHtmlBlockComponent from "./DocHtmlBlockComponent.js";
-createCommand("HTML_BLOCK_CHANGE");
-createCommand("REMOVE_HTML_BLOCK_COMMAND");
+const HTML_BLOCK_CHANGE = createCommand("HTML_BLOCK_CHANGE");
+const REMOVE_HTML_BLOCK_COMMAND = createCommand("REMOVE_HTML_BLOCK_COMMAND");
 const INSERT_HTML_BLOCK_COMMAND = createCommand("INSERT_HTML_BLOCK_COMMAND");
-class HtmlBlockNode extends DecoratorBlockNode {
-  constructor(attrs, format, key) {
-    super(format, key);
-    __publicField(this, "__attrs");
-    this.__attrs = attrs;
+const ClassMake = "mk-doc-html-block";
+class HtmlBlockNode extends 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 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);
 }
 export {
   $createHtmlBlockNode,
+  HTML_BLOCK_CHANGE,
   HtmlBlockNode,
-  INSERT_HTML_BLOCK_COMMAND
+  INSERT_HTML_BLOCK_COMMAND,
+  REMOVE_HTML_BLOCK_COMMAND
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/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":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BiE,cAAc,mBAAmB;AAKzB,cAAc,2BAA2B;AAMrG,MAAA,4BAA4D,cAAc,2BAA2B;AAe3G,MAAM,sBAAsB,mBAAmB;AAAA,EAiBpD,YAAY,OAAuB,QAA4B,KAAe;AAC5E,UAAM,QAAQ,GAAG;AAjBnB;AAkBE,SAAK,UAAU;AAAA,EACjB;AAAA,EAjBA,OAAO,UAAkB;AAChB,WAAA;AAAA,EACT;AAAA,EAEA,OAAO,MAAM,MAAoC;AAC/C,WAAO,IAAI,cAAc,KAAK,SAAS,KAAK,UAAU,KAAK,KAAK;AAAA,EAClE;AAAA,EAEA,OAAO,WAAW,gBAAwD;AAClE,UAAA,OAAO,qBAAqB,eAAe,KAAK;AACjD,SAAA,UAAU,eAAe,MAAM;AAC7B,WAAA;AAAA,EACT;AAAA,EAOA,aAAsC;AAE7B,WAAA;AAAA,MACL,GAAG,MAAM,WAAW;AAAA,MACpB,MAAM,KAAK,QAAQ;AAAA,MACnB,SAAS;AAAA,MACT,OAAO,KAAK;AAAA,IAAA;AAAA,EAEhB;AAAA,EAEA,YAA6B;AAErB,UAAA,UAAU,SAAS,cAAc,KAAK;AAGpC,YAAA,YAAY,KAAK,QAAQ;AAE9B,QAAA,KAAK,QAAQ,IAAG;AACX,YAAA,SAAS,SAAS,cAAc,QAAQ;AACvC,aAAA,YAAY,KAAK,QAAQ;AAChC,cAAQ,OAAO,MAAM;AAAA,IACvB;AAEG,QAAA,KAAK,QAAQ,KAAI;AACZ,YAAA,QAAQ,SAAS,cAAc,OAAO;AACtC,YAAA,YAAY,KAAK,QAAQ;AAC/B,cAAQ,OAAO,KAAK;AAAA,IACtB;AAGQ,YAAA,aAAa,SAAQ,mBAAmB;AAEhD,WAAO,EAAE,QAAQ;AAAA,EACnB;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAK,CAAC,OAAoB;AAChB,eAAA;AAAA,UACN,YAAY,CAAC,YAAyB;AAEpC,gBAAI,MAAM;AACV,gBAAI,KAAK;AAED,oBAAA,WAAW,QAAQ,CAAC,SAAiB;AAE3C,kBAAG,KAAK,SAAS,YAAY,KAAK,SAAQ;AACxC,uBAAK,SAAO,KAAK;AACjB,qBAAK,OAAO;AAAA,cAEN,WAAA,KAAK,SAAS,YAAA,KAAiB,UAAS;AAC9C,sBAAI,SAAO,KAAK;AAChB,qBAAK,OAAO;AAAA,cACd;AAAA,YAAA,CACD;AAED,mBAAO,QAAQ,UAAU,SAAS,mBAAmB,IAAK;AAAA,cACxD,MAAK,qBAAqB;AAAA,gBACxB,SAAQ,QAAQ;AAAA,gBAAW;AAAA,gBAAK;AAAA,cAAA,CACf;AAAA,YACjB,IAAA;AAAA,UACN;AAAA,UACA,UAAU;AAAA,QAAA;AAAA,MAEd;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,YAAmB;AACV,WAAA;AAAA,EACT;AAAA,EAEA,eACE,eACA,uBACQ;AACR,WAAO,KAAK,QAAQ;AAAA,EACtB;AAAA,EAEA,SAAS,SAAwB,QAAiC;AAChE,UAAM,kBAAkB,OAAO,MAAM,cAAc,CAAA;AACnD,WAAO,EAAE,uBAAuB;AAAA,MAC9B,WAAW,gBAAgB,QAAQ;AAAA,MACnC,YAAY,gBAAgB,SAAS;AAAA,MACrC,QAAQ,KAAK;AAAA,MACb,SAAS,KAAK,OAAO;AAAA,MACrB,OAAO,KAAK;AAAA,IAAA,CACb;AAAA,EACH;AACF;AAOO,SAAS,qBAAqB,OAAsC;AAClE,SAAA,IAAI,cAAc,KAAK;AAChC;"}
+{"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":[],"mappings":";;;;;;AAoBa,MAAA,oBAA4C,cAAc,mBAAmB;AAK7E,MAAA,4BAA4D,cAAc,2BAA2B;AAKrG,MAAA,4BAAoD,cAAc,2BAA2B;AAc1G,MAAM,YAAY;AAKX,MAAM,sBAAsB,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,WAAO,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/esm/components/basic/doc-editor/plugins/HtmlBlockPlugin/index.vue.js

@@ -1,29 +1,10 @@
 import { defineComponent, onMounted, onUnmounted } from "vue";
-import "@lexical/text";
+import { useLexicalComposer } from "lexical-vue";
 import { mergeRegister, $insertNodeToNearestRoot } from "@lexical/utils";
-import "@lexical/overflow";
 import { COMMAND_PRIORITY_EDITOR } from "lexical";
-import "tiny-invariant";
-import "@lexical/history";
-import { useLexicalComposer } from "../../lexical-vue/composables/useLexicalComposer.js";
-import "@lexical/list";
-import "@lexical/dragon";
-import "@lexical/plain-text";
-import "@lexical/rich-text";
-import "@lexical/yjs";
-import "yjs";
-import "../../lexical-vue/components/LexicalDecoratedTeleports.js";
-import "@lexical/html";
-import "@lexical/link";
-import "@lexical/mark";
-import "@lexical/table";
-import "@lexical/hashtag";
-import "@lexical/markdown";
-import "../../lexical-vue/composables/useCollaborationContext.js";
-import "../../lexical-vue/components/LexicalMenu/shared.js";
-import "../../lexical-vue/components/LexicalAutoEmbedPlugin/shared.js";
-import "../../lexical-vue/components/LexicalTypeaheadMenuPlugin/shared.js";
 import { HtmlBlockNode, INSERT_HTML_BLOCK_COMMAND, $createHtmlBlockNode } from "./index.js";
+import { RegisterToolbarExtend } from "../ToolbarPlugin/defines.js";
+import { ShowHtmlEditPanel } from "./HtmlEditDialog.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   setup(__props) {
@@ -32,6 +13,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!editor.hasNodes([HtmlBlockNode])) {
         throw new Error("HtmlBlockPlugin: 自定义HTML代码块节点未注册！");
       }
+      RegisterToolbarExtend({
+        icon: "html-code",
+        text: "自定义代码块",
+        action: async () => {
+          var result = await ShowHtmlEditPanel("");
+          editor.dispatchCommand(INSERT_HTML_BLOCK_COMMAND, result);
+        },
+        sort: 9
+      });
       const unregister = mergeRegister(
         // 插入
         editor.registerCommand(INSERT_HTML_BLOCK_COMMAND, (payload) => {

package/dist/esm/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\">\nimport { useLexicalComposer } from '../../lexical-vue'\nimport { $insertNodeToNearestRoot,mergeRegister } from '@lexical/utils'\nimport { COMMAND_PRIORITY_EDITOR,COMMAND_PRIORITY_LOW,$getSelection,CLICK_COMMAND } from 'lexical'\n\nimport { onMounted, onUnmounted } from 'vue'\nimport { INSERT_HTML_BLOCK_COMMAND,HtmlBlockNode,$createHtmlBlockNode,HtmlBlockAttrs } from './index'\nimport { RegisterToolbarExtend,type ToolbarExtendPlugin } from \"../ToolbarPlugin/defines\"\n\n\nconst editor = useLexicalComposer()\n\nonMounted(() => {\n\n  if (!editor.hasNodes([HtmlBlockNode])){\n    throw new Error('HtmlBlockPlugin: 自定义HTML代码块节点未注册！')\n  }\n \n  // 注册到工具条\n  // RegisterToolbarExtend({\n  //   icon:\"html-code\",\n  //   text:\"自定义代码块\",\n  //   action:async ()=>{\n  //     editor.dispatchCommand(INSERT_HTML_BLOCK_COMMAND,{\n  //       content:`<div class=\"aa\">我是自定义代码块</div>`,\n  //       css:\"div.aa{ width:100%;height:300px }\"\n  //     })\n  //   },\n  //   sort:9\n  // } as ToolbarExtendPlugin)\n\n  // 注册指令\n  const unregister = mergeRegister(\n\n    // 插入\n    editor.registerCommand<HtmlBlockAttrs>(INSERT_HTML_BLOCK_COMMAND,(payload) => {\n      $insertNodeToNearestRoot($createHtmlBlockNode(payload))\n      return true\n    },COMMAND_PRIORITY_EDITOR),\n  );\n\n  onUnmounted(() => unregister())\n})\n</script>\n\n<template />\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,UAAM,SAAS;AAEf,cAAU,MAAM;AAEd,UAAI,CAAC,OAAO,SAAS,CAAC,aAAa,CAAC,GAAE;AAC9B,cAAA,IAAI,MAAM,mCAAmC;AAAA,MACrD;AAgBA,YAAM,aAAa;AAAA;AAAA,QAGjB,OAAO,gBAAgC,2BAA0B,CAAC,YAAY;AACnD,mCAAA,qBAAqB,OAAO,CAAC;AAC/C,iBAAA;AAAA,WACP,uBAAuB;AAAA,MAAA;AAGf,kBAAA,MAAM,YAAY;AAAA,IAAA,CAC/B;;;;;;"}
+{"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":[],"mappings":";;;;;;;;;;AAeA,UAAM,SAAS;AAEf,cAAU,MAAM;AAEd,UAAI,CAAC,OAAO,SAAS,CAAC,aAAa,CAAC,GAAE;AAC9B,cAAA,IAAI,MAAM,mCAAmC;AAAA,MACrD;AAGsB,4BAAA;AAAA,QACpB,MAAK;AAAA,QACL,MAAK;AAAA,QACL,QAAO,YAAU;AAEX,cAAA,SAAS,MAAM,kBAAkB,EAAE;AAEhC,iBAAA,gBAAgB,2BAA0B,MAAgB;AAAA,QACnE;AAAA,QACA,MAAK;AAAA,MAAA,CACiB;AAGxB,YAAM,aAAa;AAAA;AAAA,QAEjB,OAAO,gBAAwB,2BAA0B,CAAC,YAAY;AAC3C,mCAAA,qBAAqB,OAAO,CAAC;AAC/C,iBAAA;AAAA,WACP,uBAAuB;AAAA,MAAA;AAGf,kBAAA,MAAM,YAAY;AAAA,IAAA,CAC/B;;;;;;"}

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

@@ -1,30 +1,7 @@
 import { defineComponent, ref, reactive, computed, watch, createVNode } from "vue";
 import { CLICK_COMMAND, COMMAND_PRIORITY_LOW, $getSelection, $isNodeSelection } from "lexical";
 import { mergeRegister } from "@lexical/utils";
-import "@lexical/text";
-import { useMounted } from "../../lexical-vue/composables/useMounted.js";
-import "@lexical/overflow";
-import "tiny-invariant";
-import "@lexical/history";
-import { useLexicalComposer } from "../../lexical-vue/composables/useLexicalComposer.js";
-import { useLexicalNodeSelection } from "../../lexical-vue/composables/useLexicalNodeSelection.js";
-import "@lexical/list";
-import "@lexical/dragon";
-import "@lexical/plain-text";
-import "@lexical/rich-text";
-import "@lexical/yjs";
-import "yjs";
-import "../../lexical-vue/components/LexicalDecoratedTeleports.js";
-import "@lexical/html";
-import "@lexical/link";
-import "@lexical/mark";
-import "@lexical/table";
-import "@lexical/hashtag";
-import "@lexical/markdown";
-import "../../lexical-vue/composables/useCollaborationContext.js";
-import "../../lexical-vue/components/LexicalMenu/shared.js";
-import "../../lexical-vue/components/LexicalAutoEmbedPlugin/shared.js";
-import "../../lexical-vue/components/LexicalTypeaheadMenuPlugin/shared.js";
+import { useLexicalComposer, useLexicalNodeSelection, useMounted } from "lexical-vue";
 import { Messager } from "@maketribe/dm";
 import { SELECTED_COMPONENT_COMMAND, DEVICE_VIEW_MODE } from "../commands.js";
 import { WebFileUpload } from "@maketribe/request";