@maketribe/ms-app 3.2.32 → 3.2.34

package/dist/cjs/components/basic/doc-editor/{plugins/RichTextPlugin → core/plugins/LexicalRichTextPlugin}/index.vue.js

@@ -1,7 +1,19 @@
 "use strict";
 const vue = require("vue");
-const lexicalVue = require("lexical-vue");
+const useCanShowPlaceholder = require("../../composables/useCanShowPlaceholder.js");
+require("@lexical/overflow");
+require("@lexical/text");
+require("@lexical/utils");
 const lexical = require("lexical");
+require("tiny-invariant");
+const useMounted = require("../../composables/useMounted.js");
+require("@lexical/history");
+const useLexicalComposer = require("../../composables/useLexicalComposer.js");
+require("@lexical/list");
+require("@lexical/dragon");
+require("@lexical/plain-text");
+const useRichTextSetup = require("../../composables/useRichTextSetup.js");
+require("@lexical/rich-text");
 const html = require("@lexical/html");
 const ContentEditable_vue_vue_type_script_setup_true_lang = require("./ContentEditable.vue.js");
 const DecoratedTeleports = require("./DecoratedTeleports.js");
@@ -20,8 +32,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const props = __props;
-    const editor = lexicalVue.useLexicalComposer();
-    const canShowPlaceholder = lexicalVue.useCanShowPlaceholder(editor);
+    const editor = useLexicalComposer.useLexicalComposer();
+    const canShowPlaceholder = useCanShowPlaceholder.useCanShowPlaceholder(editor);
     const parser = new DOMParser();
     const htmlContent = vue.ref("");
     const contentIsEmpty = vue.computed(() => htmlContent.value == `<p class="mk-doc__paragraph"><br></p>` || !htmlContent.value);
@@ -42,17 +54,16 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         });
       }
     };
-    vue.onMounted(() => {
-      vue.watch(() => props.content, setHtml, { immediate: true });
-      vue.watch(htmlContent, (value) => emit("change", value));
-      const unregisterMergeListener = editor.registerUpdateListener(({ editorState }) => {
+    useMounted.useMounted(() => {
+      return editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
           htmlContent.value = html.$generateHtmlFromNodes(editor);
         });
       });
-      vue.onUnmounted(() => unregisterMergeListener());
     });
-    lexicalVue.useRichTextSetup(editor);
+    vue.watch(() => props.content, setHtml, { immediate: true });
+    vue.watch(htmlContent, (value) => emit("change", value));
+    useRichTextSetup.useRichTextSetup(editor);
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
         vue.createVNode(ContentEditable_vue_vue_type_script_setup_true_lang),

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../../src/components/basic/doc-editor/core/plugins/LexicalRichTextPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { ref,defineProps,computed,defineEmits,watch } from \"vue\"\r\nimport { useCanShowPlaceholder, useLexicalComposer, useRichTextSetup,useMounted } from '../../composables'\r\nimport {  $getSelection ,$selectAll } from 'lexical'\r\nimport { $generateHtmlFromNodes,$generateNodesFromDOM } from '@lexical/html'\r\nimport ContentEditable from \"./ContentEditable.vue\"\r\nimport DecoratedTeleports from \"./DecoratedTeleports\"\r\n\r\n// 事件\r\nconst emit = defineEmits([\"change\"]);\r\n\r\n// 参数\r\nconst props = defineProps({\r\n  content:{ type:String,default:`` },\r\n  placeholder:{ type:String,default:`` }\r\n})\r\n\r\nconst editor = useLexicalComposer()\r\n\r\nconst canShowPlaceholder = useCanShowPlaceholder(editor)\r\n\r\nconst parser = new DOMParser();\r\n\r\n// html 内容\r\nconst htmlContent = ref(\"\");\r\n\r\n// 空内容\r\nconst contentIsEmpty = computed(()=>htmlContent.value == `<p class=\"mk-doc__paragraph\"><br></p>` || !htmlContent.value);\r\n\r\n// 设置 HTML\r\nconst setHtml = (html : any)=>{\r\n\r\n    // 内容不同则重置 \r\n    if(htmlContent.value != html){\r\n\r\n      let nodes : Array<any> = [];\r\n\r\n      htmlContent.value = html;\r\n\r\n      editor.update(()=>{\r\n\r\n        if(html.trim()){\r\n          // Once you have the DOM instance it's easy to generate LexicalNodes.\r\n          nodes = $generateNodesFromDOM(editor,parser.parseFromString(html.trim(),\"text/html\"));\r\n          // console.log($generateNodesFromDOM,parser.parseFromString(html.trim(),\"text/html\"));\r\n        }\r\n        // 设置权限替换\r\n        $selectAll();\r\n        $getSelection()?.insertText(\"\")\r\n        if(nodes.length > 0){\r\n          $getSelection()?.insertNodes(nodes);\r\n        }\r\n      })\r\n    }\r\n}\r\n\r\nuseMounted(()=>{\r\n  return editor.registerUpdateListener(({ editorState }) => {\r\n    editorState.read(() => {\r\n      htmlContent.value = $generateHtmlFromNodes(editor);\r\n    })\r\n  })\r\n})\r\n\r\n\r\n// 初始化\r\nwatch(()=>props.content,setHtml,{ immediate:true });\r\n\r\n// 监听内容变化\r\nwatch(htmlContent,(value:any)=>emit('change',value));\r\n\r\n// 使用富文本\r\nuseRichTextSetup(editor)\r\n\r\n</script>\r\n\r\n<template>\r\n <div class=\"mk-doc-editor__stage__editable\">\r\n    <ContentEditable />\r\n    <template v-if=\"canShowPlaceholder && contentIsEmpty\">\r\n      <div class=\"mk-doc-editor__stage__placeholder mk-doc__paragraph\">\r\n        {{props.placeholder}}\r\n      </div>\r\n    </template>\r\n    <DecoratedTeleports />\r\n  </div>\r\n\r\n</template>\r\n"],"names":["useLexicalComposer","useCanShowPlaceholder","ref","computed","html","$generateNodesFromDOM","$selectAll","$getSelection","useMounted","$generateHtmlFromNodes","watch","useRichTextSetup"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,UAAM,OAAO;AAGb,UAAM,QAAQ;AAKd,UAAM,SAASA,mBAAAA;AAET,UAAA,qBAAqBC,4CAAsB,MAAM;AAEjD,UAAA,SAAS,IAAI;AAGb,UAAA,cAAcC,QAAI,EAAE;AAGpB,UAAA,iBAAiBC,aAAS,MAAI,YAAY,SAAS,2CAA2C,CAAC,YAAY,KAAK;AAGhH,UAAA,UAAU,CAACC,WAAa;AAGvB,UAAA,YAAY,SAASA,QAAK;AAE3B,YAAI,QAAqB,CAAA;AAEzB,oBAAY,QAAQA;AAEpB,eAAO,OAAO,MAAI;;AAEb,cAAAA,OAAK,QAAO;AAEL,oBAAAC,KAAAA,sBAAsB,QAAO,OAAO,gBAAgBD,OAAK,KAAK,GAAE,WAAW,CAAC;AAAA,UAEtF;AAEWE,kBAAAA;AACGC,sCAAA,MAAAA,mBAAG,WAAW;AACzB,cAAA,MAAM,SAAS,GAAE;AACJA,wCAAA,MAAAA,mBAAG,YAAY;AAAA,UAC/B;AAAA,QAAA,CACD;AAAA,MACH;AAAA,IAAA;AAGJC,eAAAA,WAAW,MAAI;AACb,aAAO,OAAO,uBAAuB,CAAC,EAAE,kBAAkB;AACxD,oBAAY,KAAK,MAAM;AACT,sBAAA,QAAQC,4BAAuB,MAAM;AAAA,QAAA,CAClD;AAAA,MAAA,CACF;AAAA,IAAA,CACF;AAIDC,QAAA,MAAM,MAAI,MAAM,SAAQ,SAAQ,EAAE,WAAU,MAAM;AAGlDA,QAAA,MAAM,aAAY,CAAC,UAAY,KAAK,UAAS,KAAK,CAAC;AAGnDC,qBAAA,iBAAiB,MAAM;;;;;;;;;;;"}

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

@@ -1,20 +1,27 @@
 "use strict";
 const vue = require("vue");
-const lexicalVue = require("lexical-vue");
+const LexicalComposer_vue_vue_type_script_setup_true_lang = require("./core/LexicalComposer.vue.js");
+const index = require("./core/index.js");
 const index_vue_vue_type_script_setup_true_lang$3 = require("./plugins/AutoLinkPlugin/index.vue.js");
 const index_vue_vue_type_script_setup_true_lang$2 = require("./plugins/ImagePlugin/index.vue.js");
 const index_vue_vue_type_script_setup_true_lang = require("./plugins/ToolbarPlugin/index.vue.js");
-const index_vue_vue_type_script_setup_true_lang$1 = require("./plugins/RichTextPlugin/index.vue.js");
 const index_vue_vue_type_script_setup_true_lang$6 = require("./plugins/ElementBlockSelectionPlugin/index.vue.js");
 const index_vue_vue_type_script_setup_true_lang$4 = require("./plugins/ModulePlugin/index.vue.js");
 const index_vue_vue_type_script_setup_true_lang$5 = require("./plugins/GridPlugin/index.vue.js");
-const nodes = require("./plugins/nodes.js");
-const composables = require("./plugins/ModulePlugin/composables.js");
-const index = require("./core/index.js");
+const index_vue_vue_type_script_setup_true_lang$7 = require("./plugins/TemplatePlugin/index.vue.js");
+const nodes = require("./nodes.js");
+const composables$1 = require("./plugins/ModulePlugin/composables.js");
+const composables = require("./plugins/TemplatePlugin/composables.js");
 const DocTheme = require("./themes/DocTheme.js");
 const docEditor = require("./themes/doc-editor.css.js");
 const docEditorEdit = require("./themes/doc-editor-edit.css.js");
 const docTheme = require("./themes/doc-theme.css.js");
+const index_vue_vue_type_script_setup_true_lang$1 = require("./core/plugins/LexicalRichTextPlugin/index.vue.js");
+const LexicalAutoFocusPlugin_vue_vue_type_script_setup_true_lang = require("./core/plugins/LexicalAutoFocusPlugin.vue.js");
+const LexicalCheckListPlugin_vue_vue_type_script_setup_true_lang = require("./core/plugins/LexicalCheckListPlugin.vue.js");
+const LexicalHashtagPlugin_vue_vue_type_script_setup_true_lang = require("./core/plugins/LexicalHashtagPlugin.vue.js");
+const LexicalListPlugin_vue_vue_type_script_setup_true_lang = require("./core/plugins/LexicalListPlugin.vue.js");
+const LexicalHistoryPlugin_vue_vue_type_script_setup_true_lang = require("./core/plugins/LexicalHistoryPlugin.vue.js");
 const _hoisted_1 = { class: "mk-doc-editor__stage_warp" };
 const _hoisted_2 = { class: "mk-doc-editor__stage_body" };
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
@@ -61,10 +68,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     vue.onMounted(() => {
       var _a, _b;
       const doc = (_b = (_a = iframeContentRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document;
+      const { Modules } = composables$1.useModule();
       const style = document.createElement("style");
       style.setAttribute("type", "text/css");
       style.innerHTML = [docEditor, docTheme, docEditorEdit].join("\r\n");
-      style.innerHTML += composables.useModules().filter((item) => item.editorCss).map((item) => item.editorCss).join("\r\n");
+      style.innerHTML += Modules.filter((item) => item.editorCss).map((item) => item.editorCss).join("\r\n");
+      style.innerHTML += composables.Templates.filter((item) => item.editorCss).map((item) => item.editorCss).join("\r\n");
       doc.head.append(style);
       props.js.split(",").filter((item) => !!item).forEach((path) => {
         const script = document.createElement("script");
@@ -88,7 +97,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     });
     return (_ctx, _cache) => {
       const _directive_loading = vue.resolveDirective("loading");
-      return vue.openBlock(), vue.createBlock(vue.unref(lexicalVue.LexicalComposer), { "initial-config": config }, {
+      return vue.openBlock(), vue.createBlock(LexicalComposer_vue_vue_type_script_setup_true_lang, { "initial-config": config }, {
         default: vue.withCtx(() => [
           vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
             class: vue.normalizeClass(["mk-doc-editor", vue.unref(index.DEVICE_VIEW_MODE)])
@@ -129,11 +138,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           ], 2)), [
             [_directive_loading, __props.loading]
           ]),
-          vue.createVNode(vue.unref(lexicalVue.LexicalAutoFocusPlugin)),
-          vue.createVNode(vue.unref(lexicalVue.LexicalCheckListPlugin)),
-          vue.createVNode(vue.unref(lexicalVue.LexicalHashtagPlugin)),
-          vue.createVNode(vue.unref(lexicalVue.LexicalListPlugin)),
-          vue.createVNode(vue.unref(lexicalVue.LexicalHistoryPlugin))
+          vue.createVNode(vue.unref(index_vue_vue_type_script_setup_true_lang$7)),
+          vue.createVNode(vue.unref(LexicalAutoFocusPlugin_vue_vue_type_script_setup_true_lang)),
+          vue.createVNode(vue.unref(LexicalCheckListPlugin_vue_vue_type_script_setup_true_lang)),
+          vue.createVNode(vue.unref(LexicalHashtagPlugin_vue_vue_type_script_setup_true_lang)),
+          vue.createVNode(vue.unref(LexicalListPlugin_vue_vue_type_script_setup_true_lang)),
+          vue.createVNode(vue.unref(LexicalHistoryPlugin_vue_vue_type_script_setup_true_lang))
         ]),
         _: 3
       });

package/dist/cjs/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\">\r\n    <div class=\"mk-doc-editor\" v-loading=\"loading\" :class=\"DEVICE_VIEW_MODE\">\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 :content=\"props.content\" @change=\"contentChangeHandle\" :placeholder=\"placeholder\">\r\n            </RichTextPlugin>\r\n            <ImagePlugin />\r\n            <AutoLinkPlugin />\r\n            <ModulePlugin />\r\n            <GridPlugin />\r\n          </Teleport>\r\n          <ElementBlockSelectionPlugin />\r\n          <slot name=\"footer\"></slot>\r\n        </div>\r\n        <slot name=\"after-extentions\"></slot>\r\n      </div>\r\n      \r\n    </div>\r\n    <LexicalAutoFocusPlugin />\r\n    <LexicalCheckListPlugin />\r\n    <LexicalHashtagPlugin />\r\n    <LexicalListPlugin />\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 {\r\n  LexicalComposer,\r\n  LexicalAutoFocusPlugin,\r\n  LexicalCheckListPlugin,\r\n  LexicalHashtagPlugin,\r\n  LexicalHistoryPlugin,\r\n  LexicalListPlugin,\r\n} from 'lexical-vue'\r\nimport { \r\n  ToolbarPlugin,\r\n  RichTextPlugin,\r\n  AutoLinkPlugin,\r\n  ImagePlugin,\r\n  ElementBlockSelectionPlugin,\r\n  GridPlugin,\r\n  ModulePlugin\r\n} from \"./plugins\"\r\nimport { useModules } from \"./plugins/ModulePlugin/composables\"\r\nimport { DEVICE_VIEW_MODE } from \"./core\"\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 DocEditorEditCss from \"./themes/doc-editor-edit.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  loading:{ type:Boolean,defualt:false},\r\n  js:{ type:String,default:`` },\r\n  css:{ type:String,default:`` }\r\n})\r\n \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\nonMounted(()=>{\r\n\r\n  const doc = iframeContentRef.value?.contentWindow?.document;\r\n\r\n  // 样式\r\n  const style = document.createElement(\"style\");\r\n  style.setAttribute(\"type\",\"text/css\")\r\n\r\n  // 默认样式\r\n  style.innerHTML = [DocEditorCss,DocThemeCss,DocEditorEditCss].join(\"\\r\\n\");\r\n\r\n  //模块渲染样式\r\n  style.innerHTML += useModules().filter(item=>item.editorCss).map(item=>item.editorCss).join(\"\\r\\n\");\r\n\r\n  doc.head.append(style);\r\n\r\n  // 扩展的js和css\r\n  props.js.split(\",\").filter(item=>!!item).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\r\n  props.css.split(\",\").filter(item=>!!item).forEach(path=>{\r\n    const link = document.createElement(\"link\");\r\n    link.href = path;\r\n    link.setAttribute(\"rel\",\"stylesheet\")\r\n    link.setAttribute(\"crossorigin\",\"true\")\r\n    doc.head.append(link);\r\n  })\r\n\r\n  // 设备显示模式改变\r\n  watch(DEVICE_VIEW_MODE,(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  setTimeout(()=> updateStage(),500)\r\n});\r\n\r\n</script>\r\n"],"names":["DocNodes","ref","computed","onMounted","DocEditorCss","DocThemeCss","DocEditorEditCss","useModules","watch","DEVICE_VIEW_MODE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,UAAM,OAAO;AAGb,UAAM,QAAQ;AAUd,UAAM,SAAS;AAAA,MACb,WAAW;AAAA,MACX,OAAO;AAAA,MACP,OAAO;AAAA,QACL,GAAGA;AAAAA,MACL;AAAA,MACA,QAAQ,OAAa;AAInB,gBAAQ,MAAM,KAAK;AAAA,MACrB;AAAA,IAAA;AAII,UAAA,mBAAmBC,QAAI,IAAW;AACxC,UAAM,aAAaC,IAAS,SAAA;;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;AAGdC,QAAAA,UAAU,MAAI;;AAEN,YAAA,OAAM,4BAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC;AAG7C,YAAA,QAAQ,SAAS,cAAc,OAAO;AACtC,YAAA,aAAa,QAAO,UAAU;AAGpC,YAAM,YAAY,CAACC,WAAaC,UAAYC,aAAgB,EAAE,KAAK,MAAM;AAGzE,YAAM,aAAaC,YAAA,WAAA,EAAa,OAAO,UAAM,KAAK,SAAS,EAAE,IAAI,CAAM,SAAA,KAAK,SAAS,EAAE,KAAK,MAAM;AAE9F,UAAA,KAAK,OAAO,KAAK;AAGf,YAAA,GAAG,MAAM,GAAG,EAAE,OAAO,CAAM,SAAA,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAM,SAAA;AAC/C,cAAA,SAAS,SAAS,cAAc,QAAQ;AAC9C,eAAO,MAAM;AACN,eAAA,aAAa,eAAc,MAAM;AACpC,YAAA,KAAK,OAAO,MAAM;AAAA,MAAA,CACvB;AAEK,YAAA,IAAI,MAAM,GAAG,EAAE,OAAO,CAAM,SAAA,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAM,SAAA;AAChD,cAAA,OAAO,SAAS,cAAc,MAAM;AAC1C,aAAK,OAAO;AACP,aAAA,aAAa,OAAM,YAAY;AAC/B,aAAA,aAAa,eAAc,MAAM;AAClC,YAAA,KAAK,OAAO,IAAI;AAAA,MAAA,CACrB;AAGKC,gBAAAC,MAAAA,kBAAiB,CAAC,YAAoB;AAC1C,YAAI,KAAK,MAAM,WAAW,WAAW,OAAO,SAAS;AACzC;AACL,eAAA;AAAA,MAAA,GACP,EAAE,WAAW,KAAA,CAAK;AAGT,iBAAA,MAAK,eAAc,GAAG;AAAA,IAAA,CAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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\" v-loading=\"loading\" :class=\"DEVICE_VIEW_MODE\">\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            <LexicalRichTextPlugin :content=\"props.content\" @change=\"contentChangeHandle\" :placeholder=\"placeholder\">\r\n            </LexicalRichTextPlugin>\r\n            <ImagePlugin />\r\n            <AutoLinkPlugin />\r\n            <ModulePlugin />\r\n            <GridPlugin />\r\n          </Teleport>\r\n          <ElementBlockSelectionPlugin />\r\n          <slot name=\"footer\"></slot>\r\n        </div>\r\n        <slot name=\"after-extentions\"></slot>\r\n      </div>\r\n      \r\n    </div>\r\n    <TemplatePlguin />\r\n    <LexicalAutoFocusPlugin />\r\n    <LexicalCheckListPlugin />\r\n    <LexicalHashtagPlugin />\r\n    <LexicalListPlugin />\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 LexicalComposer from \"./core/LexicalComposer.vue\"\r\nimport { \r\n  DEVICE_VIEW_MODE,\r\n  LexicalAutoFocusPlugin,\r\n  LexicalCheckListPlugin,\r\n  LexicalHashtagPlugin,\r\n  LexicalHistoryPlugin,\r\n  LexicalListPlugin,\r\n  LexicalRichTextPlugin,\r\n} from \"./core\"\r\n\r\nimport { \r\n  ToolbarPlugin,\r\n  AutoLinkPlugin,\r\n  ImagePlugin,\r\n  ElementBlockSelectionPlugin,\r\n  GridPlugin,\r\n  ModulePlugin,\r\n  TemplatePlguin\r\n} from \"./plugins\"\r\n\r\nimport DocNodes from \"./nodes\"\r\n\r\nimport { useModule } from \"./plugins/ModulePlugin/composables\"\r\nimport { Templates } from \"./plugins/TemplatePlugin/composables\"\r\nimport DocTheme from \"./themes/DocTheme\";\r\nimport DocEditorCss from \"./themes/doc-editor.css?raw\";\r\nimport DocEditorEditCss from \"./themes/doc-editor-edit.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  loading:{ type:Boolean,defualt:false},\r\n  js:{ type:String,default:`` },\r\n  css:{ type:String,default:`` }\r\n})\r\n \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\nonMounted(()=>{\r\n\r\n  const doc = iframeContentRef.value?.contentWindow?.document;\r\n  const { Modules } = useModule(); \r\n\r\n  // 样式\r\n  const style = document.createElement(\"style\");\r\n  style.setAttribute(\"type\",\"text/css\")\r\n\r\n  // 默认样式\r\n  style.innerHTML = [DocEditorCss,DocThemeCss,DocEditorEditCss].join(\"\\r\\n\");\r\n\r\n  //模块渲染样式\r\n  style.innerHTML += Modules.filter(item=>item.editorCss).map(item=>item.editorCss).join(\"\\r\\n\");\r\n\r\n  //模版渲染样式\r\n  style.innerHTML += Templates.filter(item=>item.editorCss).map(item=>item.editorCss).join(\"\\r\\n\");\r\n\r\n  doc.head.append(style);\r\n\r\n  // 扩展的js和css\r\n  props.js.split(\",\").filter(item=>!!item).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\r\n  props.css.split(\",\").filter(item=>!!item).forEach(path=>{\r\n    const link = document.createElement(\"link\");\r\n    link.href = path;\r\n    link.setAttribute(\"rel\",\"stylesheet\")\r\n    link.setAttribute(\"crossorigin\",\"true\")\r\n    doc.head.append(link);\r\n  })\r\n\r\n  // 设备显示模式改变\r\n  watch(DEVICE_VIEW_MODE,(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  setTimeout(()=> updateStage(),500)\r\n});\r\n\r\n</script>\r\n"],"names":["DocNodes","ref","computed","onMounted","useModule","DocEditorCss","DocThemeCss","DocEditorEditCss","Templates","watch","DEVICE_VIEW_MODE"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEA,UAAM,OAAO;AAGb,UAAM,QAAQ;AAUd,UAAM,SAAS;AAAA,MACb,WAAW;AAAA,MACX,OAAO;AAAA,MACP,OAAO;AAAA,QACL,GAAGA;AAAAA,MACL;AAAA,MACA,QAAQ,OAAa;AAInB,gBAAQ,MAAM,KAAK;AAAA,MACrB;AAAA,IAAA;AAII,UAAA,mBAAmBC,QAAI,IAAW;AACxC,UAAM,aAAaC,IAAS,SAAA;;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;AAGdC,QAAAA,UAAU,MAAI;;AAEN,YAAA,OAAM,4BAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC;AAC7C,YAAA,EAAE,YAAYC,cAAAA;AAGd,YAAA,QAAQ,SAAS,cAAc,OAAO;AACtC,YAAA,aAAa,QAAO,UAAU;AAGpC,YAAM,YAAY,CAACC,WAAaC,UAAYC,aAAgB,EAAE,KAAK,MAAM;AAGzE,YAAM,aAAa,QAAQ,OAAO,CAAA,SAAM,KAAK,SAAS,EAAE,IAAI,CAAM,SAAA,KAAK,SAAS,EAAE,KAAK,MAAM;AAG7F,YAAM,aAAaC,YAAA,UAAU,OAAO,CAAA,SAAM,KAAK,SAAS,EAAE,IAAI,CAAM,SAAA,KAAK,SAAS,EAAE,KAAK,MAAM;AAE3F,UAAA,KAAK,OAAO,KAAK;AAGf,YAAA,GAAG,MAAM,GAAG,EAAE,OAAO,CAAM,SAAA,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAM,SAAA;AAC/C,cAAA,SAAS,SAAS,cAAc,QAAQ;AAC9C,eAAO,MAAM;AACN,eAAA,aAAa,eAAc,MAAM;AACpC,YAAA,KAAK,OAAO,MAAM;AAAA,MAAA,CACvB;AAEK,YAAA,IAAI,MAAM,GAAG,EAAE,OAAO,CAAM,SAAA,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAM,SAAA;AAChD,cAAA,OAAO,SAAS,cAAc,MAAM;AAC1C,aAAK,OAAO;AACP,aAAA,aAAa,OAAM,YAAY;AAC/B,aAAA,aAAa,eAAc,MAAM;AAClC,YAAA,KAAK,OAAO,IAAI;AAAA,MAAA,CACrB;AAGKC,gBAAAC,MAAAA,kBAAiB,CAAC,YAAoB;AAC1C,YAAI,KAAK,MAAM,WAAW,WAAW,OAAO,SAAS;AACzC;AACL,eAAA;AAAA,MAAA,GACP,EAAE,WAAW,KAAA,CAAK;AAGT,iBAAA,MAAK,eAAc,GAAG;AAAA,IAAA,CAClC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -2,7 +2,9 @@
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const utils = require("@maketribe/utils");
 const editor_vue_vue_type_script_setup_true_lang = require("./editor.vue.js");
+const composables$1 = require("./plugins/TemplatePlugin/composables.js");
 const MKDocEditor = utils.withInstall(editor_vue_vue_type_script_setup_true_lang);
+exports.registerDocTemplate = composables$1.registerDocTemplate;
 exports.MKDocEditor = MKDocEditor;
 exports.default = MKDocEditor;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/components/basic/doc-editor/index.ts"],"sourcesContent":["import { withInstall } from \"@maketribe/utils\";\r\nimport Editor from \"./editor.vue\";\r\nimport { registerDocModule } from \"./plugins/ModulePlugin/composables\";\r\n\r\nexport const MKDocEditor = withInstall(Editor);\r\n\r\nexport { registerDocModule }\r\n\r\nexport default MKDocEditor;\r\n\r\n"],"names":["withInstall","Editor"],"mappings":";;;;AAIa,MAAA,cAAcA,kBAAYC,0CAAM;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../src/components/basic/doc-editor/index.ts"],"sourcesContent":["import { withInstall } from \"@maketribe/utils\";\r\nimport Editor from \"./editor.vue\";\r\nimport { registerDocModule } from \"./plugins/ModulePlugin/composables\";\r\nimport { registerDocTemplate } from \"./plugins/TemplatePlugin/composables\";\r\n\r\nexport const MKDocEditor = withInstall(Editor);\r\n\r\nexport { registerDocModule,registerDocTemplate }\r\n\r\nexport default MKDocEditor;\r\n\r\n"],"names":["withInstall","Editor"],"mappings":";;;;;AAKa,MAAA,cAAcA,kBAAYC,0CAAM;;;;"}

package/dist/cjs/components/basic/doc-editor/{plugins/nodes.js → nodes.js}

@@ -1,21 +1,23 @@
 "use strict";
+const lexical = require("lexical");
 const richText = require("@lexical/rich-text");
 const table = require("@lexical/table");
 const list = require("@lexical/list");
 const code = require("@lexical/code");
 const link = require("@lexical/link");
 const hashtag = require("@lexical/hashtag");
-require("./ImagePlugin/commands.js");
-const ImageNode = require("./ImagePlugin/ImageNode.js");
-const RichTextNode = require("./RichTextPlugin/nodes/RichTextNode.js");
-require("./ModulePlugin/commands.js");
-const ModuleBlockNode = require("./ModulePlugin/ModuleBlockNode.js");
-const GridNode = require("./GridPlugin/GridNode.js");
-const TextGridNode = require("./GridPlugin/TextGridNode.js");
-const LayoutGridNode = require("./GridPlugin/LayoutGridNode.js");
-const ImageTextGridNode = require("./GridPlugin/ImageTextGridNode.js");
-const ModuleGridNode = require("./GridPlugin/ModuleGridNode.js");
+require("./plugins/ImagePlugin/commands.js");
+const ImageNode = require("./plugins/ImagePlugin/ImageNode.js");
+require("./plugins/ModulePlugin/commands.js");
+const ModuleBlockNode = require("./plugins/ModulePlugin/ModuleBlockNode.js");
+const GridNode = require("./plugins/GridPlugin/GridNode.js");
+const TextGridNode = require("./plugins/GridPlugin/TextGridNode.js");
+const LayoutGridNode = require("./plugins/GridPlugin/LayoutGridNode.js");
+const ImageTextGridNode = require("./plugins/GridPlugin/ImageTextGridNode.js");
+const ModuleGridNode = require("./plugins/GridPlugin/ModuleGridNode.js");
+const RichElementNode = require("./core/nodes/RichElementNode.js");
 const Nodes = [
+  lexical.TextNode,
   richText.HeadingNode,
   list.ListNode,
   list.ListItemNode,
@@ -28,7 +30,7 @@ const Nodes = [
   link.AutoLinkNode,
   link.LinkNode,
   hashtag.HashtagNode,
-  RichTextNode.RichTextNode,
+  RichElementNode.RichElementNode,
   ImageNode.ImageNode,
   ImageNode.InlineImageNode,
   ModuleBlockNode.ModuleBlockNode,

package/dist/cjs/components/basic/doc-editor/nodes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nodes.js","sources":["../../../../../src/components/basic/doc-editor/nodes.ts"],"sourcesContent":["\r\nimport { type Klass, type LexicalNode,TextNode } from 'lexical'\r\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\r\nimport { TableCellNode, TableNode, TableRowNode } from '@lexical/table'\r\nimport { ListItemNode, ListNode } from '@lexical/list'\r\nimport { CodeHighlightNode, CodeNode } from '@lexical/code'\r\nimport { AutoLinkNode, LinkNode } from '@lexical/link'\r\nimport { HashtagNode } from '@lexical/hashtag'\r\nimport { ImageNode,InlineImageNode } from \"./plugins/ImagePlugin\"\r\nimport { ModuleBlockNode } from \"./plugins/ModulePlugin\"\r\nimport { GridNode,LayoutGridNode,TextGridNode,ImageTextGridNode,ModuleGridNode } from \"./plugins/GridPlugin\"\r\n\r\nimport { RichElementNode} from \"./core/nodes\"\r\n\r\nconst Nodes: Array<Klass<LexicalNode>> = [\r\n  TextNode,\r\n  HeadingNode,\r\n  ListNode,\r\n  ListItemNode,\r\n  QuoteNode,\r\n  CodeNode,\r\n  CodeHighlightNode,\r\n  TableNode,\r\n  TableCellNode,\r\n  TableRowNode,\r\n  AutoLinkNode,\r\n  LinkNode,\r\n  HashtagNode,\r\n\r\n  RichElementNode,\r\n  ImageNode,\r\n  InlineImageNode,\r\n  ModuleBlockNode,\r\n  GridNode,\r\n  TextGridNode,\r\n  LayoutGridNode,\r\n  ImageTextGridNode,\r\n  ModuleGridNode\r\n]\r\n\r\nexport default Nodes\r\n\r\n"],"names":["TextNode","HeadingNode","ListNode","ListItemNode","QuoteNode","CodeNode","CodeHighlightNode","TableNode","TableCellNode","TableRowNode","AutoLinkNode","LinkNode","HashtagNode","RichElementNode","ImageNode","InlineImageNode","ModuleBlockNode","GridNode","TextGridNode","LayoutGridNode","ImageTextGridNode","ModuleGridNode"],"mappings":";;;;;;;;;;;;;;;;;;AAcA,MAAM,QAAmC;AAAA,EACvCA,QAAA;AAAA,EACAC,SAAA;AAAA,EACAC,KAAA;AAAA,EACAC,KAAA;AAAA,EACAC,SAAA;AAAA,EACAC,KAAA;AAAA,EACAC,KAAA;AAAA,EACAC,MAAA;AAAA,EACAC,MAAA;AAAA,EACAC,MAAA;AAAA,EACAC,KAAA;AAAA,EACAC,KAAA;AAAA,EACAC,QAAA;AAAA,EAEAC,gBAAA;AAAA,EACAC,UAAA;AAAA,EACAC,UAAA;AAAA,EACAC,gBAAA;AAAA,EACAC,SAAA;AAAA,EACAC,aAAA;AAAA,EACAC,eAAA;AAAA,EACAC,kBAAA;AAAA,EACAC,eAAA;AACF;;"}

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

@@ -1,6 +1,8 @@
 "use strict";
 const vue = require("vue");
-const lexicalVue = require("lexical-vue");
+require("../../core/index.js");
+const index_vue_vue_type_script_setup_true_lang = require("../../core/plugins/LexicalAutoLinkPlugin/index.vue2.js");
+const LexicalLinkPlugin_vue_vue_type_script_setup_true_lang = require("../../core/plugins/LexicalLinkPlugin.vue2.js");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   setup(__props) {
@@ -28,8 +30,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     ];
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
-        vue.createVNode(vue.unref(lexicalVue.LexicalAutoLinkPlugin), { matchers: MATCHERS }),
-        vue.createVNode(vue.unref(lexicalVue.LexicalLinkPlugin))
+        vue.createVNode(vue.unref(index_vue_vue_type_script_setup_true_lang), { matchers: MATCHERS }),
+        vue.createVNode(vue.unref(LexicalLinkPlugin_vue_vue_type_script_setup_true_lang))
       ], 64);
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/AutoLinkPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { LexicalAutoLinkPlugin,LexicalLinkPlugin } from 'lexical-vue'\r\n\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  <LexicalLinkPlugin />\r\n</template>\r\n"],"names":[],"mappings":";;;;;;AAIA,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":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/AutoLinkPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { LexicalAutoLinkPlugin,LexicalLinkPlugin } from '../../core'\r\n\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  <LexicalLinkPlugin />\r\n</template>\r\n"],"names":[],"mappings":";;;;;;;;AAIA,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/cjs/components/basic/doc-editor/plugins/ElementBlockSelectionPlugin/index.vue.js

@@ -2,14 +2,34 @@
 const vue = require("vue");
 const lexical = require("lexical");
 const utils = require("@lexical/utils");
-const lexicalVue = require("lexical-vue");
+require("@lexical/text");
+const useMounted = require("../../core/composables/useMounted.js");
+require("@lexical/overflow");
+require("tiny-invariant");
+require("@lexical/history");
+const useLexicalComposer = require("../../core/composables/useLexicalComposer.js");
+require("@lexical/list");
+require("@lexical/dragon");
+require("@lexical/plain-text");
+require("@lexical/rich-text");
+const GridNode = require("../GridPlugin/GridNode.js");
+require("../GridPlugin/TextGridNode.js");
+require("../GridPlugin/LayoutGridNode.js");
+require("../GridPlugin/ImageTextGridNode.js");
+require("../GridPlugin/ModuleGridNode.js");
+require("../ImagePlugin/commands.js");
+const ImageNode = require("../ImagePlugin/ImageNode.js");
+require("../ModulePlugin/commands.js");
+const ModuleBlockNode = require("../ModulePlugin/ModuleBlockNode.js");
 const index = require("../../core/index.js");
 const elementBlock = require("../../core/element-block.js");
 const lowPriority = 1;
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   setup(__props) {
-    const editor = lexicalVue.useLexicalComposer();
+    const editor = useLexicalComposer.useLexicalComposer();
+    const isSelectGrid = vue.ref(false);
+    const selectionMarkPos = vue.ref({ left: "px", top: "0px", width: "0", height: "0" });
     const toolbarRef = vue.ref(null);
     const selectPayload = vue.shallowRef(null);
     const toolsPos = vue.reactive({ left: "px", top: "0px" });
@@ -19,20 +39,64 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const updateToolsPos = () => {
       vue.nextTick(() => {
         if (selectPayload.value != null && toolbarRef.value != null) {
+          const element = editor.getElementByKey(selectPayload.value.nodeKey);
           const editIframeRect = toolbarRef.value.getRootNode().body.querySelector(".mk-doc-editor__stage_iframe").getBoundingClientRect();
           const editBodyRect = toolbarRef.value.getRootNode().body.querySelector(".mk-doc-editor__stage_body").getBoundingClientRect();
           const baseY = editIframeRect.y - editBodyRect.y;
-          const selectRect = selectPayload.value.element.getBoundingClientRect();
+          const selectRect = element.getBoundingClientRect();
           const toolsRect = toolbarRef.value.getBoundingClientRect();
           if (toolsRect) {
             toolsPos.top = Math.max(selectRect.y - toolsRect.height - 5 + baseY, 5 + baseY) + "px";
-            toolsPos.left = toolsRect.width / -2 + selectRect.x + selectRect.width / 2 + "px";
+            toolsPos.left = Math.max(toolsRect.width / -2 + selectRect.x + selectRect.width / 2, 0) + "px";
           }
+          selectionMarkPos.value = {
+            top: `${selectRect.y + baseY}px`,
+            left: `${selectRect.x}px`,
+            width: `${selectRect.width}px`,
+            height: `${selectRect.height}px`
+          };
         }
       });
       return false;
     };
-    lexicalVue.useMounted(() => {
+    const nodeDesc = vue.computed(() => {
+      if (selectPayload.value) {
+        const node = editor.getEditorState().read(() => {
+          return lexical.$getNodeByKey(selectPayload.value.nodeKey);
+        });
+        return node.getTitle ? node.getTitle() : "";
+      } else {
+        return "";
+      }
+    });
+    const canSelectedParentNode = vue.ref(false);
+    const selectedParentNode = () => {
+      const node = editor.getEditorState().read(() => {
+        return lexical.$getNodeByKey(selectPayload.value.nodeKey);
+      });
+      if (node && node.__parent) {
+        elementBlock.setElementBlockSelection(editor, node.__parent);
+      }
+    };
+    const canSelectedNextNode = vue.ref(false);
+    const selectedNextNode = () => {
+      const node = editor.getEditorState().read(() => {
+        return lexical.$getNodeByKey(selectPayload.value.nodeKey);
+      });
+      if (node && node.__next) {
+        elementBlock.setElementBlockSelection(editor, node.__next);
+      }
+    };
+    const canSelectedPrevNode = vue.ref(false);
+    const selectedPrevNode = () => {
+      const node = editor.getEditorState().read(() => {
+        return lexical.$getNodeByKey(selectPayload.value.nodeKey);
+      });
+      if (node && node.__prev) {
+        elementBlock.setElementBlockSelection(editor, node.__prev);
+      }
+    };
+    useMounted.useMounted(() => {
       return utils.mergeRegister(
         editor.registerCommand(elementBlock.UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND, () => updateToolsPos(), lowPriority),
         editor.registerUpdateListener(() => setTimeout(() => updateToolsPos(), 50)),
@@ -41,19 +105,11 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           if (payload != null) {
             let toolsbarList = [];
             if (typeof payload.toolsbars == "function") {
-              const selection = lexical.$getSelection();
-              if (lexical.$isNodeSelection(selection)) {
-                toolsbarList = payload.toolsbars(selection) ?? [];
-              } else {
-                toolsbarList = payload.toolsbars(null) ?? [];
-              }
+              toolsbarList = payload.toolsbars(payload.nodeKey) ?? [];
             } else {
               toolsbarList = payload.toolsbars;
             }
-            selectPayload.value = {
-              element: payload.element,
-              toolsbars: toolsbarList
-            };
+            selectPayload.value = { nodeKey: payload.nodeKey, toolsbars: toolsbarList };
           } else {
             selectPayload.value = null;
           }
@@ -67,76 +123,167 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             editor.dispatchCommand(elementBlock.SELECTED_ELEMENTBLOCK_COMMAND, null);
           }
           return false;
+        }, lowPriority),
+        editor.registerCommand(lexical.SELECTION_CHANGE_COMMAND, () => {
+          const selection = lexical.$getSelection();
+          if (lexical.$isNodeSelection(selection)) {
+            const node = selection.getNodes()[0];
+            canSelectedParentNode.value = GridNode.$isGridNode(node == null ? void 0 : node.getParent());
+            if (node == null ? void 0 : node.__next) {
+              const nextNode = lexical.$getNodeByKey(node.__next);
+              canSelectedNextNode.value = (node == null ? void 0 : node.__next) ? GridNode.$isGridNode(nextNode) || ModuleBlockNode.$isModuleBlockNode(nextNode) || ImageNode.$isImageNode(nextNode) : false;
+            } else {
+              canSelectedNextNode.value = false;
+            }
+            if (node == null ? void 0 : node.__prev) {
+              const prevNode = lexical.$getNodeByKey(node.__prev);
+              canSelectedPrevNode.value = (node == null ? void 0 : node.__prev) ? GridNode.$isGridNode(prevNode) || ModuleBlockNode.$isModuleBlockNode(prevNode) || ImageNode.$isImageNode(prevNode) : false;
+            } else {
+              canSelectedPrevNode.value = false;
+            }
+          } else {
+            canSelectedParentNode.value = false;
+            canSelectedNextNode.value = false;
+            canSelectedPrevNode.value = false;
+          }
+          return updateToolsPos();
         }, lowPriority)
-        // editor.registerCommand(SELECTION_CHANGE_COMMAND, (payload, newEditor) => {
-        //   const selection = $getSelection();
-        //   if($isNodeSelection(selection)){
-        //     const node = selection.getNodes()[0]
-        //     console.log(node,node.getTopLevelElement());
-        //   }
-        //   return updateToolsPos();
-        // },lowPriority)
       );
     });
     return (_ctx, _cache) => {
-      const _component_MKSvgIcon = vue.resolveComponent("MKSvgIcon");
       const _component_el_button = vue.resolveComponent("el-button");
+      const _component_MKSvgIcon = vue.resolveComponent("MKSvgIcon");
       const _component_el_tooltip = vue.resolveComponent("el-tooltip");
       const _component_el_button_group = vue.resolveComponent("el-button-group");
-      return selectPayload.value != null ? (vue.openBlock(), vue.createElementBlock("div", {
-        key: 0,
-        ref_key: "toolbarRef",
-        ref: toolbarRef,
-        class: "mk-doc-editor-decorator-module-toolbar",
-        style: vue.normalizeStyle(toolsPos)
-      }, [
-        vue.createVNode(_component_el_button_group, null, {
-          default: vue.withCtx(() => [
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(selectPayload.value.toolsbars, (item) => {
-              return vue.openBlock(), vue.createBlock(_component_el_tooltip, {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        selectPayload.value != null ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          ref_key: "toolbarRef",
+          ref: toolbarRef,
+          class: "mk-doc-editor-decorator-module-toolbar",
+          style: vue.normalizeStyle(toolsPos)
+        }, [
+          vue.createVNode(_component_el_button_group, null, {
+            default: vue.withCtx(() => [
+              nodeDesc.value ? (vue.openBlock(), vue.createBlock(_component_el_button, {
+                key: 0,
+                text: "",
+                bg: "",
+                style: { "font-size": "14px" }
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(vue.toDisplayString(nodeDesc.value), 1)
+                ]),
+                _: 1
+              })) : vue.createCommentVNode("", true),
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(selectPayload.value.toolsbars, (item) => {
+                return vue.openBlock(), vue.createBlock(_component_el_tooltip, {
+                  effect: "dark",
+                  content: item.title,
+                  placement: "top"
+                }, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_component_el_button, {
+                      text: "",
+                      onClick: ($event) => item.action()
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(_component_MKSvgIcon, {
+                          iconClass: item.icon
+                        }, null, 8, ["iconClass"])
+                      ]),
+                      _: 2
+                    }, 1032, ["onClick"])
+                  ]),
+                  _: 2
+                }, 1032, ["content"]);
+              }), 256)),
+              canSelectedParentNode.value ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
+                key: 1,
                 effect: "dark",
-                content: item.title,
+                content: "上层容器",
                 placement: "top"
               }, {
                 default: vue.withCtx(() => [
                   vue.createVNode(_component_el_button, {
                     text: "",
-                    onClick: ($event) => item.action()
+                    onClick: _cache[0] || (_cache[0] = ($event) => selectedParentNode())
                   }, {
                     default: vue.withCtx(() => [
-                      vue.createVNode(_component_MKSvgIcon, {
-                        iconClass: item.icon
-                      }, null, 8, ["iconClass"])
+                      vue.createVNode(_component_MKSvgIcon, { iconClass: `ArrowUpBold` })
                     ]),
-                    _: 2
-                  }, 1032, ["onClick"])
+                    _: 1
+                  })
                 ]),
-                _: 2
-              }, 1032, ["content"]);
-            }), 256)),
-            vue.createVNode(_component_el_tooltip, {
-              effect: "dark",
-              content: "删除",
-              placement: "top"
-            }, {
-              default: vue.withCtx(() => [
-                vue.createVNode(_component_el_button, {
-                  text: "",
-                  type: "danger",
-                  onClick: _cache[0] || (_cache[0] = ($event) => vue.unref(editor).dispatchCommand(vue.unref(elementBlock.REMOVE_ELEMENTBLOCK_COMMAND), null))
-                }, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(_component_MKSvgIcon, { iconClass: `Delete` })
-                  ]),
-                  _: 1
-                })
-              ]),
-              _: 1
-            })
-          ]),
-          _: 1
-        })
-      ], 4)) : vue.createCommentVNode("", true);
+                _: 1
+              })) : vue.createCommentVNode("", true),
+              canSelectedPrevNode.value ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
+                key: 2,
+                effect: "dark",
+                content: "上一个",
+                placement: "top"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_el_button, {
+                    text: "",
+                    onClick: _cache[1] || (_cache[1] = ($event) => selectedPrevNode())
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(_component_MKSvgIcon, { iconClass: `ArrowLeftBold` })
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })) : vue.createCommentVNode("", true),
+              canSelectedNextNode.value ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
+                key: 3,
+                effect: "dark",
+                content: "下一个",
+                placement: "top"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_el_button, {
+                    text: "",
+                    onClick: _cache[2] || (_cache[2] = ($event) => selectedNextNode())
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(_component_MKSvgIcon, { iconClass: `ArrowRightBold` })
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })) : vue.createCommentVNode("", true),
+              vue.createVNode(_component_el_tooltip, {
+                effect: "dark",
+                content: "删除",
+                placement: "top"
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_el_button, {
+                    text: "",
+                    type: "danger",
+                    onClick: _cache[3] || (_cache[3] = ($event) => vue.unref(editor).dispatchCommand(vue.unref(elementBlock.REMOVE_ELEMENTBLOCK_COMMAND), null))
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(_component_MKSvgIcon, { iconClass: `Delete` })
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ], 4)) : vue.createCommentVNode("", true),
+        selectPayload.value != null ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 1,
+          class: vue.normalizeClass(["mk-doc-selection-element-block-mark box", { box: isSelectGrid.value }]),
+          style: vue.normalizeStyle(selectionMarkPos.value)
+        }, null, 6)) : vue.createCommentVNode("", true)
+      ], 64);
     };
   }
 });