@maketribe/ms-app 3.2.21 → 3.2.23

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

@@ -1,41 +1,19 @@
-import { defineComponent, ref, computed, onMounted, watch, openBlock, createBlock, unref, withCtx, createElementVNode, normalizeClass, createVNode, renderSlot, Teleport, toDisplayString, createCommentVNode } from "vue";
-import "@lexical/text";
-import "@lexical/utils";
-import "@lexical/overflow";
-import "lexical";
-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 _sfc_main$4 from "./lexical-vue/components/LexicalContentEditable.vue.js";
-import _sfc_main$1 from "./lexical-vue/components/LexicalComposer.vue.js";
-import _sfc_main$6 from "./lexical-vue/components/LexicalHistoryPlugin.vue.js";
-import "@lexical/html";
-import "@lexical/link";
-import "@lexical/mark";
-import "@lexical/table";
-import _sfc_main$3 from "./lexical-vue/components/LexicalRichTextPlugin.vue.js";
-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 _sfc_main$2 from "./plugins/ToolbarPlugin/index.vue.js";
+import { defineComponent, ref, computed, onMounted, watch, openBlock, createBlock, unref, withCtx, createElementVNode, normalizeClass, createVNode, renderSlot, Teleport, createCommentVNode } from "vue";
+import { LexicalComposer, LexicalHistoryPlugin } from "lexical-vue";
+import _sfc_main$4 from "./plugins/AutoLinkPlugin.vue.js";
+import _sfc_main$5 from "./plugins/ImagePlugin/index.vue.js";
+import _sfc_main$6 from "./plugins/ImageTextPlugin/index.vue.js";
+import _sfc_main$3 from "./plugins/ToolbarPlugin/InlineToolsPlugin.vue.js";
+import _sfc_main$7 from "./plugins/HtmlBlockPlugin/index.vue.js";
+import _sfc_main$1 from "./plugins/ToolbarPlugin/index.vue.js";
+import _sfc_main$2 from "./plugins/RichTextPlugin/index.vue.js";
+import Nodes from "./plugins/nodes.js";
 import { DEVICE_VIEW_MODE } from "./plugins/commands.js";
-import _sfc_main$5 from "./plugins/index.vue.js";
 import theme from "./themes/DocTheme.js";
-import Nodes from "./plugins/nodes.js";
 import DocEditorCss from "./themes/doc-editor.css.js";
 import DocThemeCss from "./themes/doc-theme.css.js";
 const _hoisted_1 = { class: "mk-doc-editor__stage_warp" };
 const _hoisted_2 = { class: "mk-doc-editor__stage_body" };
-const _hoisted_3 = { class: "mk-doc-editor__stage__placeholder mk-doc__paragraph" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{ name: "MKDocEditor" },
   __name: "editor",
@@ -77,7 +55,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("change", content);
       updateStage();
     };
-    const lexicalInitHandler = (editor) => {
+    const editorInitHandler = (editor) => {
       editor.registerCommand(DEVICE_VIEW_MODE, (payload) => {
         viewDevice.value = payload;
         return false;
@@ -111,15 +89,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, { immediate: true });
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1), {
-        "initial-config": config,
-        onInit: lexicalInitHandler
-      }, {
+      return openBlock(), createBlock(unref(LexicalComposer), { "initial-config": config }, {
         default: withCtx(() => [
           createElementVNode("div", {
             class: normalizeClass(["mk-doc-editor", viewDevice.value])
           }, [
-            createVNode(_sfc_main$2),
+            createVNode(unref(_sfc_main$1), {
+              js: __props.js,
+              css: __props.css
+            }, null, 8, ["js", "css"]),
             createElementVNode("div", _hoisted_1, [
               renderSlot(_ctx.$slots, "before-extentions"),
               createElementVNode("div", _hoisted_2, [
@@ -134,26 +112,24 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   key: 0,
                   to: iframeBody.value
                 }, [
-                  createVNode(unref(_sfc_main$3), {
+                  createVNode(unref(_sfc_main$2), {
+                    onInit: editorInitHandler,
                     content: props.content,
-                    onChange: contentChangeHandle
-                  }, {
-                    contentEditable: withCtx(() => [
-                      createVNode(unref(_sfc_main$4))
-                    ]),
-                    placeholder: withCtx(() => [
-                      createElementVNode("div", _hoisted_3, toDisplayString(props.placeholder), 1)
-                    ]),
-                    _: 1
-                  }, 8, ["content"])
+                    onChange: contentChangeHandle,
+                    placeholder: __props.placeholder
+                  }, null, 8, ["content", "placeholder"])
                 ], 8, ["to"])) : createCommentVNode("", true),
                 renderSlot(_ctx.$slots, "footer"),
-                createVNode(_sfc_main$5)
+                createVNode(unref(_sfc_main$3)),
+                createVNode(unref(_sfc_main$4)),
+                createVNode(unref(_sfc_main$5)),
+                createVNode(unref(_sfc_main$6)),
+                createVNode(unref(_sfc_main$7))
               ]),
               renderSlot(_ctx.$slots, "after-extentions")
             ])
           ], 2),
-          createVNode(unref(_sfc_main$6))
+          createVNode(unref(LexicalHistoryPlugin))
         ]),
         _: 3
       });

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

@@ -1 +1 @@
-{"version":3,"file":"editor.vue.js","sources":["../../../../../src/components/basic/doc-editor/editor.vue"],"sourcesContent":["<template>\r\n  <LexicalComposer :initial-config=\"config\" @init=\"lexicalInitHandler\">\r\n    <div class=\"mk-doc-editor\" :class=\"viewDevice\">\r\n      <ToolbarPlugin />\r\n      <div class=\"mk-doc-editor__stage_warp\">\r\n        <slot name=\"before-extentions\"></slot>\r\n        <div class=\"mk-doc-editor__stage_body\">\r\n          <slot name=\"header\"></slot>\r\n          <iframe title=\"iframe\" class=\"mk-doc-editor__stage_iframe\" ref=\"iframeContentRef\"></iframe>\r\n          <Teleport v-if=\"iframeBody\" :to=\"iframeBody\">\r\n            <LexicalRichTextPlugin :content=\"props.content\" @change=\"contentChangeHandle\">\r\n              <template #contentEditable>\r\n                <LexicalContentEditable />\r\n              </template>\r\n              <template #placeholder>\r\n                <div class=\"mk-doc-editor__stage__placeholder mk-doc__paragraph\">\r\n                  {{props.placeholder}}\r\n                </div>\r\n              </template>\r\n            </LexicalRichTextPlugin>\r\n          </Teleport>\r\n          <slot name=\"footer\"></slot>\r\n          <DocPlugin />\r\n        </div>\r\n        <slot name=\"after-extentions\"></slot>\r\n      </div>\r\n      \r\n    </div>\r\n    <LexicalHistoryPlugin />\r\n  </LexicalComposer>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { defineOptions,defineProps,defineEmits,computed,ref,onMounted,watch } from \"vue\"\r\nimport type {  LexicalEditor } from 'lexical'\r\nimport { LexicalComposer,LexicalContentEditable, LexicalHistoryPlugin,LexicalRichTextPlugin } from './lexical-vue'\r\nimport ToolbarPlugin from \"./plugins/ToolbarPlugin/index.vue\"\r\nimport { DEVICE_VIEW_MODE } from \"./plugins/commands\"\r\nimport DocPlugin from \"./plugins/index.vue\"\r\n\r\nimport DocTheme from \"./themes/DocTheme\";\r\nimport DocNodes from \"./plugins/nodes\"\r\nimport DocEditorCss from \"./themes/doc-editor.css?raw\";\r\nimport DocThemeCss from \"./themes/doc-theme.css?raw\";\r\n\r\n// 定义组件\r\ndefineOptions({ name: \"MKDocEditor\" })\r\n\r\n// 事件\r\nconst emit = defineEmits(['change']);\r\n\r\n// 参数\r\nconst props = defineProps({\r\n  placeholder:{type:String,default:\"这里输入正文...\"},\r\n  content:{ type:String,default:`` },\r\n  js:{ type:String,default:`` },\r\n  css:{ type:String,default:`` }\r\n})\r\n\r\n// pc | mobile\r\nconst viewDevice = ref('pc')\r\n\r\n// 配置\r\nconst config = {\r\n  namespace: 'MyEditor',\r\n  theme: DocTheme,\r\n  nodes: [\r\n    ...DocNodes,\r\n  ],\r\n  onError(error:Error) {\r\n    // Catch any errors that occur during Lexical updates and log them\r\n    // or throw them as needed. If you don't throw them, Lexical will\r\n    // try to recover gracefully without losing user data.\r\n    console.error(error)\r\n  },\r\n}\r\n\r\n// iframe 编辑器\r\nconst iframeContentRef = ref(null as any);\r\nconst iframeBody = computed(()=>iframeContentRef.value?.contentWindow?.document?.body)\r\n\r\n//内容改变时\r\nconst updateStage = ()=>{\r\n  setTimeout(() => {\r\n    if(iframeBody.value?.scrollHeight > iframeBody.value?.offsetHeight){\r\n      iframeContentRef.value.style.height = (iframeBody.value?.scrollHeight + 10)+\"px\";\r\n    }\r\n  }, 10);\r\n}\r\nconst contentChangeHandle = (content:any)=>{\r\n  emit('change',content);\r\n  updateStage();\r\n}\r\n\r\n// 初始化\r\nconst lexicalInitHandler = (editor:LexicalEditor)=>{\r\n  editor.registerCommand(DEVICE_VIEW_MODE,(payload: string) => {\r\n    viewDevice.value = payload;\r\n    return false\r\n  },1)\r\n}\r\n\r\nonMounted(()=>{\r\n\r\n  const doc = iframeContentRef.value?.contentWindow?.document;\r\n  // 编辑器外观\r\n  const editorStyle = document.createElement(\"style\");\r\n  editorStyle.innerHTML = DocEditorCss;\r\n  doc.head.append(editorStyle);\r\n\r\n  // 皮肤样式\r\n  const docThemeStyle = document.createElement(\"style\");\r\n  docThemeStyle.innerHTML = DocThemeCss;\r\n  doc.head.append(docThemeStyle);\r\n\r\n  // 扩展的js和css\r\n  props.js.split(\",\").forEach(path=>{\r\n    const script = document.createElement(\"script\");\r\n    script.src = path;\r\n    script.setAttribute(\"crossorigin\",\"true\")\r\n    doc.head.append(script);\r\n  })\r\n  props.css.split(\",\").forEach(path=>{\r\n    const link = document.createElement(\"link\");\r\n    link.href = path;\r\n    link.setAttribute(\"crossorigin\",\"true\")\r\n    doc.head.append(link);\r\n  })\r\n\r\n  watch(viewDevice,(payload: string) => {\r\n    doc.body.style.fontSize = payload == \"pc\" ? \"14px\" : \"18px\";\r\n    updateStage();\r\n    return false\r\n  },{ immediate :true})\r\n});\r\n\r\n</script>\r\n"],"names":["DocNodes"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDA,UAAM,OAAO;AAGb,UAAM,QAAQ;AAQR,UAAA,aAAa,IAAI,IAAI;AAG3B,UAAM,SAAS;AAAA,MACb,WAAW;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,GAAGA;AAAAA,MACL;AAAA,MACA,QAAQ,OAAa;AAInB,gBAAQ,MAAM,KAAK;AAAA,MACrB;AAAA,IAAA;AAII,UAAA,mBAAmB,IAAI,IAAW;AACxC,UAAM,aAAa,SAAS;;AAAI,gDAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC,aAAvC,mBAAiD;AAAA,KAAI;AAGrF,UAAM,cAAc,MAAI;AACtB,iBAAW,MAAM;;AACf,cAAG,gBAAW,UAAX,mBAAkB,kBAAe,gBAAW,UAAX,mBAAkB,eAAa;AACjE,2BAAiB,MAAM,MAAM,WAAU,gBAAW,UAAX,mBAAkB,gBAAe,KAAI;AAAA,QAC9E;AAAA,SACC,EAAE;AAAA,IAAA;AAED,UAAA,sBAAsB,CAAC,YAAc;AACzC,WAAK,UAAS,OAAO;AACT;IAAA;AAIR,UAAA,qBAAqB,CAAC,WAAuB;AAC1C,aAAA,gBAAgB,kBAAiB,CAAC,YAAoB;AAC3D,mBAAW,QAAQ;AACZ,eAAA;AAAA,SACP,CAAC;AAAA,IAAA;AAGL,cAAU,MAAI;;AAEN,YAAA,OAAM,4BAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC;AAE7C,YAAA,cAAc,SAAS,cAAc,OAAO;AAClD,kBAAY,YAAY;AACpB,UAAA,KAAK,OAAO,WAAW;AAGrB,YAAA,gBAAgB,SAAS,cAAc,OAAO;AACpD,oBAAc,YAAY;AACtB,UAAA,KAAK,OAAO,aAAa;AAG7B,YAAM,GAAG,MAAM,GAAG,EAAE,QAAQ,CAAM,SAAA;AAC1B,cAAA,SAAS,SAAS,cAAc,QAAQ;AAC9C,eAAO,MAAM;AACN,eAAA,aAAa,eAAc,MAAM;AACpC,YAAA,KAAK,OAAO,MAAM;AAAA,MAAA,CACvB;AACD,YAAM,IAAI,MAAM,GAAG,EAAE,QAAQ,CAAM,SAAA;AAC3B,cAAA,OAAO,SAAS,cAAc,MAAM;AAC1C,aAAK,OAAO;AACP,aAAA,aAAa,eAAc,MAAM;AAClC,YAAA,KAAK,OAAO,IAAI;AAAA,MAAA,CACrB;AAEK,YAAA,YAAW,CAAC,YAAoB;AACpC,YAAI,KAAK,MAAM,WAAW,WAAW,OAAO,SAAS;AACzC;AACL,eAAA;AAAA,MAAA,GACP,EAAE,WAAW,KAAA,CAAK;AAAA,IAAA,CACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"editor.vue.js","sources":["../../../../../src/components/basic/doc-editor/editor.vue"],"sourcesContent":["<template>\r\n  <LexicalComposer :initial-config=\"config\">\r\n    <div class=\"mk-doc-editor\" :class=\"viewDevice\">\r\n      <ToolbarPlugin  :js=\"js\" :css=\"css\"  />\r\n      <div class=\"mk-doc-editor__stage_warp\">\r\n        <slot name=\"before-extentions\"></slot>\r\n        <div class=\"mk-doc-editor__stage_body\">\r\n          <slot name=\"header\"></slot>\r\n          <iframe title=\"iframe\" class=\"mk-doc-editor__stage_iframe\" ref=\"iframeContentRef\"></iframe>\r\n          <Teleport v-if=\"iframeBody\" :to=\"iframeBody\">\r\n            <RichTextPlugin  @init=\"editorInitHandler\" :content=\"props.content\" @change=\"contentChangeHandle\" :placeholder=\"placeholder\">\r\n            </RichTextPlugin>\r\n          </Teleport>\r\n          <slot name=\"footer\"></slot>\r\n          <InlineToolsPlugin />\r\n          <AutoLinkPlugin />\r\n          <ImagePlugin />\r\n          <ImageTextPlugin />\r\n          <HtmlBlockPlugin />\r\n        </div>\r\n        <slot name=\"after-extentions\"></slot>\r\n      </div>\r\n      \r\n    </div>\r\n    <LexicalHistoryPlugin />\r\n  </LexicalComposer>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { defineOptions,defineProps,defineEmits,computed,ref,onMounted,watch } from \"vue\"\r\nimport { type LexicalEditor } from 'lexical'\r\nimport { LexicalComposer, LexicalHistoryPlugin } from 'lexical-vue'\r\nimport { \r\n  ToolbarPlugin,\r\n  RichTextPlugin,\r\n  AutoLinkPlugin,\r\n  ImagePlugin,\r\n  ImageTextPlugin,\r\n  InlineToolsPlugin,\r\n  HtmlBlockPlugin,\r\n  \r\n} from \"./plugins\"\r\nimport { DEVICE_VIEW_MODE } from \"./plugins/commands\"\r\n\r\nimport DocTheme from \"./themes/DocTheme\";\r\nimport DocNodes from \"./plugins/nodes\"\r\nimport DocEditorCss from \"./themes/doc-editor.css?raw\";\r\nimport DocThemeCss from \"./themes/doc-theme.css?raw\";\r\n\r\n// 定义组件\r\ndefineOptions({ name: \"MKDocEditor\" })\r\n\r\n// 事件\r\nconst emit = defineEmits(['change']);\r\n\r\n// 参数\r\nconst props = defineProps({\r\n  placeholder:{type:String,default:\"这里输入正文...\"},\r\n  content:{ type:String,default:`` },\r\n  js:{ type:String,default:`` },\r\n  css:{ type:String,default:`` }\r\n})\r\n\r\n// pc | mobile\r\nconst viewDevice = ref('pc')\r\n\r\n// 配置\r\nconst config = {\r\n  namespace: 'MyEditor',\r\n  theme: DocTheme,\r\n  nodes: [\r\n    ...DocNodes,\r\n  ],\r\n  onError(error:Error) {\r\n    // Catch any errors that occur during Lexical updates and log them\r\n    // or throw them as needed. If you don't throw them, Lexical will\r\n    // try to recover gracefully without losing user data.\r\n    console.error(error)\r\n  },\r\n}\r\n\r\n// iframe 编辑器\r\nconst iframeContentRef = ref(null as any);\r\nconst iframeBody = computed(()=>iframeContentRef.value?.contentWindow?.document?.body)\r\n\r\n//内容改变时\r\nconst updateStage = ()=>{\r\n  setTimeout(() => {\r\n    if(iframeBody.value?.scrollHeight > iframeBody.value?.offsetHeight){\r\n      iframeContentRef.value.style.height = (iframeBody.value?.scrollHeight + 10)+\"px\";\r\n    }\r\n  }, 10);\r\n}\r\nconst contentChangeHandle = (content:any)=>{\r\n  emit('change',content);\r\n  updateStage();\r\n}\r\n\r\n// 初始化\r\nconst editorInitHandler = (editor:LexicalEditor)=>{\r\n  editor.registerCommand(DEVICE_VIEW_MODE,(payload: string) => {\r\n    viewDevice.value = payload;\r\n    return false\r\n  },1)\r\n}\r\n\r\nonMounted(()=>{\r\n\r\n  const doc = iframeContentRef.value?.contentWindow?.document;\r\n  // 编辑器外观\r\n  const editorStyle = document.createElement(\"style\");\r\n  editorStyle.innerHTML = DocEditorCss;\r\n  doc.head.append(editorStyle);\r\n\r\n  // 皮肤样式\r\n  const docThemeStyle = document.createElement(\"style\");\r\n  docThemeStyle.innerHTML = DocThemeCss;\r\n  doc.head.append(docThemeStyle);\r\n\r\n  // 扩展的js和css\r\n  props.js.split(\",\").forEach(path=>{\r\n    const script = document.createElement(\"script\");\r\n    script.src = path;\r\n    script.setAttribute(\"crossorigin\",\"true\")\r\n    doc.head.append(script);\r\n  })\r\n  props.css.split(\",\").forEach(path=>{\r\n    const link = document.createElement(\"link\");\r\n    link.href = path;\r\n    link.setAttribute(\"crossorigin\",\"true\")\r\n    doc.head.append(link);\r\n  })\r\n\r\n  watch(viewDevice,(payload: string) => {\r\n    doc.body.style.fontSize = payload == \"pc\" ? \"14px\" : \"18px\";\r\n    updateStage();\r\n    return false\r\n  },{ immediate :true})\r\n});\r\n\r\n</script>\r\n"],"names":["DocNodes"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAqDA,UAAM,OAAO;AAGb,UAAM,QAAQ;AAQR,UAAA,aAAa,IAAI,IAAI;AAG3B,UAAM,SAAS;AAAA,MACb,WAAW;AAAA,MACX;AAAA,MACA,OAAO;AAAA,QACL,GAAGA;AAAAA,MACL;AAAA,MACA,QAAQ,OAAa;AAInB,gBAAQ,MAAM,KAAK;AAAA,MACrB;AAAA,IAAA;AAII,UAAA,mBAAmB,IAAI,IAAW;AACxC,UAAM,aAAa,SAAS;;AAAI,gDAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC,aAAvC,mBAAiD;AAAA,KAAI;AAGrF,UAAM,cAAc,MAAI;AACtB,iBAAW,MAAM;;AACf,cAAG,gBAAW,UAAX,mBAAkB,kBAAe,gBAAW,UAAX,mBAAkB,eAAa;AACjE,2BAAiB,MAAM,MAAM,WAAU,gBAAW,UAAX,mBAAkB,gBAAe,KAAI;AAAA,QAC9E;AAAA,SACC,EAAE;AAAA,IAAA;AAED,UAAA,sBAAsB,CAAC,YAAc;AACzC,WAAK,UAAS,OAAO;AACT;IAAA;AAIR,UAAA,oBAAoB,CAAC,WAAuB;AACzC,aAAA,gBAAgB,kBAAiB,CAAC,YAAoB;AAC3D,mBAAW,QAAQ;AACZ,eAAA;AAAA,SACP,CAAC;AAAA,IAAA;AAGL,cAAU,MAAI;;AAEN,YAAA,OAAM,4BAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC;AAE7C,YAAA,cAAc,SAAS,cAAc,OAAO;AAClD,kBAAY,YAAY;AACpB,UAAA,KAAK,OAAO,WAAW;AAGrB,YAAA,gBAAgB,SAAS,cAAc,OAAO;AACpD,oBAAc,YAAY;AACtB,UAAA,KAAK,OAAO,aAAa;AAG7B,YAAM,GAAG,MAAM,GAAG,EAAE,QAAQ,CAAM,SAAA;AAC1B,cAAA,SAAS,SAAS,cAAc,QAAQ;AAC9C,eAAO,MAAM;AACN,eAAA,aAAa,eAAc,MAAM;AACpC,YAAA,KAAK,OAAO,MAAM;AAAA,MAAA,CACvB;AACD,YAAM,IAAI,MAAM,GAAG,EAAE,QAAQ,CAAM,SAAA;AAC3B,cAAA,OAAO,SAAS,cAAc,MAAM;AAC1C,aAAK,OAAO;AACP,aAAA,aAAa,eAAc,MAAM;AAClC,YAAA,KAAK,OAAO,IAAI;AAAA,MAAA,CACrB;AAEK,YAAA,YAAW,CAAC,YAAoB;AACpC,YAAI,KAAK,MAAM,WAAW,WAAW,OAAO,SAAS;AACzC;AACL,eAAA;AAAA,MAAA,GACP,EAAE,WAAW,KAAA,CAAK;AAAA,IAAA,CACrB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -1,28 +1,5 @@
 import { defineComponent, openBlock, createBlock, unref } from "vue";
-import "@lexical/text";
-import "@lexical/utils";
-import "@lexical/overflow";
-import "lexical";
-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 "@lexical/markdown";
-import "../lexical-vue/composables/useCollaborationContext.js";
-import "../lexical-vue/components/LexicalMenu/shared.js";
-import "../lexical-vue/components/LexicalAutoEmbedPlugin/shared.js";
-import _sfc_main$1 from "../lexical-vue/components/LexicalAutoLinkPlugin/index.vue2.js";
-import "../lexical-vue/components/LexicalTypeaheadMenuPlugin/shared.js";
+import { LexicalAutoLinkPlugin } from "lexical-vue";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "AutoLinkPlugin",
   setup(__props) {
@@ -49,7 +26,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     ];
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1), { matchers: MATCHERS });
+      return openBlock(), createBlock(unref(LexicalAutoLinkPlugin), { matchers: MATCHERS });
     };
   }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"AutoLinkPlugin.vue.js","sources":["../../../../../../src/components/basic/doc-editor/plugins/AutoLinkPlugin.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { LexicalAutoLinkPlugin } from '../lexical-vue'\r\n\r\nconst URL_MATCHER = /((https?:\\/\\/(www\\.)?)|(www\\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/\r\n\r\nconst EMAIL_MATCHER = /(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))/\r\n\r\nconst MATCHERS = [\r\n  (text: string) => {\r\n    const match = URL_MATCHER.exec(text)\r\n    return (\r\n      match && {\r\n        index: match.index,\r\n        length: match[0].length,\r\n        text: match[0],\r\n        url: match[0],\r\n      }\r\n    )\r\n  },\r\n  (text: string) => {\r\n    const match = EMAIL_MATCHER.exec(text)\r\n    return (\r\n      match && {\r\n        index: match.index,\r\n        length: match[0].length,\r\n        text: match[0],\r\n        url: `mailto:${match[0]}`,\r\n      }\r\n    )\r\n  },\r\n]\r\n</script>\r\n\r\n<template>\r\n  <LexicalAutoLinkPlugin :matchers=\"MATCHERS\" />\r\n</template>\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAGA,UAAM,cAAc;AAEpB,UAAM,gBAAgB;AAEtB,UAAM,WAAW;AAAA,MACf,CAAC,SAAiB;AACV,cAAA,QAAQ,YAAY,KAAK,IAAI;AACnC,eACE,SAAS;AAAA,UACP,OAAO,MAAM;AAAA,UACb,QAAQ,MAAM,CAAC,EAAE;AAAA,UACjB,MAAM,MAAM,CAAC;AAAA,UACb,KAAK,MAAM,CAAC;AAAA,QAAA;AAAA,MAGlB;AAAA,MACA,CAAC,SAAiB;AACV,cAAA,QAAQ,cAAc,KAAK,IAAI;AACrC,eACE,SAAS;AAAA,UACP,OAAO,MAAM;AAAA,UACb,QAAQ,MAAM,CAAC,EAAE;AAAA,UACjB,MAAM,MAAM,CAAC;AAAA,UACb,KAAK,UAAU,MAAM,CAAC,CAAC;AAAA,QAAA;AAAA,MAG7B;AAAA,IAAA;;;;;;"}
+{"version":3,"file":"AutoLinkPlugin.vue.js","sources":["../../../../../../src/components/basic/doc-editor/plugins/AutoLinkPlugin.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { LexicalAutoLinkPlugin } from 'lexical-vue'\r\n\r\nconst URL_MATCHER = /((https?:\\/\\/(www\\.)?)|(www\\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\\.[a-zA-Z0-9()]{1,6}\\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/\r\n\r\nconst EMAIL_MATCHER = /(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))/\r\n\r\nconst MATCHERS = [\r\n  (text: string) => {\r\n    const match = URL_MATCHER.exec(text)\r\n    return (\r\n      match && {\r\n        index: match.index,\r\n        length: match[0].length,\r\n        text: match[0],\r\n        url: match[0],\r\n      }\r\n    )\r\n  },\r\n  (text: string) => {\r\n    const match = EMAIL_MATCHER.exec(text)\r\n    return (\r\n      match && {\r\n        index: match.index,\r\n        length: match[0].length,\r\n        text: match[0],\r\n        url: `mailto:${match[0]}`,\r\n      }\r\n    )\r\n  },\r\n]\r\n</script>\r\n\r\n<template>\r\n  <LexicalAutoLinkPlugin :matchers=\"MATCHERS\" />\r\n</template>\r\n"],"names":[],"mappings":";;;;;AAGA,UAAM,cAAc;AAEpB,UAAM,gBAAgB;AAEtB,UAAM,WAAW;AAAA,MACf,CAAC,SAAiB;AACV,cAAA,QAAQ,YAAY,KAAK,IAAI;AACnC,eACE,SAAS;AAAA,UACP,OAAO,MAAM;AAAA,UACb,QAAQ,MAAM,CAAC,EAAE;AAAA,UACjB,MAAM,MAAM,CAAC;AAAA,UACb,KAAK,MAAM,CAAC;AAAA,QAAA;AAAA,MAGlB;AAAA,MACA,CAAC,SAAiB;AACV,cAAA,QAAQ,cAAc,KAAK,IAAI;AACrC,eACE,SAAS;AAAA,UACP,OAAO,MAAM;AAAA,UACb,QAAQ,MAAM,CAAC,EAAE;AAAA,UACjB,MAAM,MAAM,CAAC;AAAA,UACb,KAAK,UAAU,MAAM,CAAC,CAAC;AAAA,QAAA;AAAA,MAG7B;AAAA,IAAA;;;;;;"}

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\";\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,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;"}