npm - @maketribe/ms-app - Versions diffs - 3.2.29 → 3.2.31 - Mend

@maketribe/ms-app 3.2.29 → 3.2.31

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

Files changed (49) hide show

package/dist/cjs/modules/cms/pages/cms-contents/index.vue2.js CHANGED Viewed

@@ -53,12 +53,13 @@ const _hoisted_3 = { class: "flex items-center" };
 const _hoisted_4 = { class: "mk-cms-contents__body" };
 const _hoisted_5 = { class: "mk-cms-contents__body__right__action" };
 const _hoisted_6 = { class: "el-dropdown-link" };
-const _hoisted_7 = { class: "mk-cms-contents__publish" };
-const _hoisted_8 = /* @__PURE__ */ vue.createElementVNode("span", null, "是否发布列表：", -1);
-const _hoisted_9 = /* @__PURE__ */ vue.createElementVNode("span", null, "是否发布封面：", -1);
-const _hoisted_10 = /* @__PURE__ */ vue.createElementVNode("span", null, "是否发布内容：", -1);
-const _hoisted_11 = /* @__PURE__ */ vue.createElementVNode("span", null, "是否发布资源：", -1);
-const _hoisted_12 = /* @__PURE__ */ vue.createElementVNode("span", null, "是否强制发布：", -1);
+const _hoisted_7 = { style: { "background": "#fff", "margin-top": "-10px", "height": "100%", "overflow": "auto" } };
+const _hoisted_8 = { class: "mk-cms-contents__publish" };
+const _hoisted_9 = /* @__PURE__ */ vue.createElementVNode("span", null, "是否发布列表：", -1);
+const _hoisted_10 = /* @__PURE__ */ vue.createElementVNode("span", null, "是否发布封面：", -1);
+const _hoisted_11 = /* @__PURE__ */ vue.createElementVNode("span", null, "是否发布内容：", -1);
+const _hoisted_12 = /* @__PURE__ */ vue.createElementVNode("span", null, "是否发布资源：", -1);
+const _hoisted_13 = /* @__PURE__ */ vue.createElementVNode("span", null, "是否强制发布：", -1);
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   setup(__props) {
@@ -84,6 +85,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const curSelectPartItem = vue.ref(null);
     const partTreeRef = vue.ref(null);
     const partExList = vue.ref([]);
+    const partContentComponent = vue.ref(null);
     const partDataForm = vue.reactive(new CmsContentManPartForm.CmsContentManPartForm());
     partDataForm.init();
     let beforeInitFormPart = null;
@@ -107,6 +109,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         }
         router.replace({ name: "cms/contents", query: { pid: curSelectPartItem.value.id } });
         partExList.value = partExtensions.usePartExtensionList(curSelectPartItem.value.id).concat(partExtensions.usePartExtensionList(curSelectPartItem.value.name));
+        partContentComponent.value = partExtensions.usePartContentComponent(curSelectPartItem.value.id) || partExtensions.usePartContentComponent(curSelectPartItem.value.name);
       }
     };
     const deletePartHandle = (item) => {
@@ -271,7 +274,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     }, 1032, ["onClick"])) : vue.createCommentVNode("", true)
                   ], 64);
                 }), 256)),
-                activeTabName.value == "part" || activeTabName.value == "part-content" ? (vue.openBlock(), vue.createBlock(_component_el_button, {
+                activeTabName.value == "part" || activeTabName.value == "part-content" && !partContentComponent.value ? (vue.openBlock(), vue.createBlock(_component_el_button, {
                   key: 0,
                   type: "primary",
                   text: "",
@@ -378,41 +381,50 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               })), [
                 [_directive_loading, partDataForm.loading]
               ]),
-              curSelectPartItem.value.cmsPartTypeId != 1 ? vue.withDirectives((vue.openBlock(), vue.createBlock(_component_el_tab_pane, {
+              curSelectPartItem.value.cmsPartTypeId != 1 ? (vue.openBlock(), vue.createBlock(_component_el_tab_pane, {
                 key: 1,
                 label: "页面内容",
                 name: "part-content",
                 style: { "background-color": "#f4f4f4" }
               }, {
                 default: vue.withCtx(() => {
-                  var _a;
+                  var _a, _b, _c, _d;
                   return [
-                    activeTabName.value == "part-content" ? (vue.openBlock(), vue.createBlock(vue.unref(index$1.MKDocEditor), {
-                      key: 0,
+                    partContentComponent.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                      ((_a = partDataForm.data) == null ? void 0 : _a.id) ? (vue.openBlock(), vue.createBlock(partBannerEdit_vue_vue_type_script_setup_true_lang, {
+                        key: 0,
+                        partId: (_b = partDataForm.data) == null ? void 0 : _b.id,
+                        title: (_c = partDataForm.data) == null ? void 0 : _c.title
+                      }, null, 8, ["partId", "title"])) : vue.createCommentVNode("", true),
+                      vue.createElementVNode("div", _hoisted_7, [
+                        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(partContentComponent.value)))
+                      ])
+                    ], 64)) : activeTabName.value == "part-content" ? vue.withDirectives((vue.openBlock(), vue.createBlock(vue.unref(index$1.MKDocEditor), {
+                      key: 1,
                       css: vue.unref(CmsSettings).part.doc.css,
                       js: vue.unref(CmsSettings).part.doc.js,
-                      content: (_a = partDataForm.data) == null ? void 0 : _a.content,
+                      content: (_d = partDataForm.data) == null ? void 0 : _d.content,
                       placeholder: "从这里开始写正文...",
                       onChange: EditorChangeHandle
                     }, {
                       "before-extentions": vue.withCtx(() => {
-                        var _a2, _b, _c;
+                        var _a2, _b2, _c2;
                         return [
                           ((_a2 = partDataForm.data) == null ? void 0 : _a2.id) ? (vue.openBlock(), vue.createBlock(partBannerEdit_vue_vue_type_script_setup_true_lang, {
                             key: 0,
-                            partId: (_b = partDataForm.data) == null ? void 0 : _b.id,
-                            title: (_c = partDataForm.data) == null ? void 0 : _c.title
+                            partId: (_b2 = partDataForm.data) == null ? void 0 : _b2.id,
+                            title: (_c2 = partDataForm.data) == null ? void 0 : _c2.title
                           }, null, 8, ["partId", "title"])) : vue.createCommentVNode("", true)
                         ];
                       }),
                       _: 1
-                    }, 8, ["css", "js", "content"])) : vue.createCommentVNode("", true)
+                    }, 8, ["css", "js", "content"])), [
+                      [_directive_loading, partDataForm.loading]
+                    ]) : vue.createCommentVNode("", true)
                   ];
                 }),
                 _: 1
-              })), [
-                [_directive_loading, partDataForm.loading]
-              ]) : vue.createCommentVNode("", true),
+              })) : vue.createCommentVNode("", true),
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(partExList.value, (ext, i) => {
                 return vue.openBlock(), vue.createBlock(_component_el_tab_pane, {
                   label: ext.title || `页面扩展设置 ${i == 0 ? "" : i}`,
@@ -460,9 +472,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             }, 8, ["loading"])
           ]),
           default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_7, [
+            vue.createElementVNode("div", _hoisted_8, [
               vue.createElementVNode("div", null, [
-                _hoisted_8,
+                _hoisted_9,
                 vue.createTextVNode(),
                 vue.createVNode(vue.unref(elementPlus.ElSwitch), {
                   modelValue: optionData.value.isPublishList,
@@ -471,7 +483,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 }, null, 8, ["modelValue", "disabled"])
               ]),
               vue.createElementVNode("div", null, [
-                _hoisted_9,
+                _hoisted_10,
                 vue.createTextVNode(),
                 vue.createVNode(vue.unref(elementPlus.ElSwitch), {
                   modelValue: optionData.value.isPublishCover,
@@ -480,7 +492,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 }, null, 8, ["modelValue", "disabled"])
               ]),
               vue.createElementVNode("div", null, [
-                _hoisted_10,
+                _hoisted_11,
                 vue.createTextVNode(),
                 vue.createVNode(vue.unref(elementPlus.ElSwitch), {
                   modelValue: optionData.value.isPublishContent,
@@ -489,7 +501,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 }, null, 8, ["modelValue", "disabled"])
               ]),
               vue.createElementVNode("div", null, [
-                _hoisted_11,
+                _hoisted_12,
                 vue.createTextVNode(),
                 vue.createVNode(vue.unref(elementPlus.ElSwitch), {
                   modelValue: optionData.value.isPublishAssets,
@@ -497,7 +509,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                 }, null, 8, ["modelValue"])
               ]),
               vue.createElementVNode("div", null, [
-                _hoisted_12,
+                _hoisted_13,
                 vue.createTextVNode(),
                 vue.createVNode(vue.unref(elementPlus.ElSwitch), {
                   modelValue: optionData.value.isCompulsion,

package/dist/cjs/modules/cms/pages/cms-contents/index.vue2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.vue2.js","sources":["../../../../../../src/modules/cms/pages/cms-contents/index.vue"],"sourcesContent":["<template>\r\n <div class=\"mk-cms-contents__warp\" v-loading=\"loading\">\r\n <el-page-header style=\"background-color: #fff; padding: 10px\" :icon=\"null\">\r\n <template #title>\r\n <h3 style=\"color: var(--el-text-color-regular); margin-left: 10px\">\r\n <MKSvgIcon iconClass=\"richtext-outline\" style=\"margin-right: 5px\" />\r\n 内容管理\r\n </h3>\r\n </template>\r\n <template #extra>\r\n <div class=\"flex items-center\">\r\n <el-button-group>\r\n <el-button type=\"primary\" size=\"large\" text v-if=\"CmsSettings.publish.mode == 'static'\" @click=\"publishAllPartHandle\">\r\n <MKSvgIcon iconClass=\"Promotion\" style=\"margin-right: 10px\" />\r\n 整站发布\r\n </el-button>\r\n <el-button type=\"primary\" size=\"large\" text @click=\"showPartFormHandle\">\r\n <MKSvgIcon iconClass=\"Plus\" style=\"margin-right: 10px\" />\r\n 新增栏目\r\n </el-button>\r\n </el-button-group>\r\n </div>\r\n </template>\r\n </el-page-header>\r\n <div class=\"mk-cms-contents__body\">\r\n <MKPartTree class=\"mk-cms-contents__body__left\" @select=\"selectPartHandle\" @edit=\"editPartHandle\"\r\n @add=\"showPartFormHandle\" @deleteSuccessfully=\"deletePartHandle\" ref=\"partTreeRef\"\r\n :curSelectId=\"curSelectPartId\" />\r\n <el-tabs v-if=\"curSelectPartItem\" v-model=\"activeTabName\" class=\"mk-cms-contents__body__right\">\r\n <div class=\"mk-cms-contents__body__right__action\">\r\n\r\n <template v-for=\"(ext,i) in partExList\" :label=\"ext.title \|\| `页面扩展设置 ${i+1}`\" :name=\"\">\r\n <el-button type=\"primary\" text @click=\"ext.save()\" v-if=\"activeTabName == `part-ext${i}` && ext.save\">\r\n <MKSvgIcon iconClass=\"save\" style=\"margin-right: 5px\" />\r\n 保存{{ext.title}}\r\n </el-button>\r\n </template>\r\n <template v-if=\"activeTabName == 'part' \|\| activeTabName == 'part-content'\">\r\n <el-button type=\"primary\" text @click=\"savePartHandle()\" :disabled=\"!partDataForm?.isChanged\">\r\n <MKSvgIcon iconClass=\"save\" style=\"margin-right: 5px\" />\r\n 保存\r\n </el-button>\r\n </template>\r\n <el-dropdown v-if=\"CmsSettings.publish.mode == 'static' && curSelectPartItem.coverTemplate \|\| curSelectPartItem.listTemplate \|\| curSelectPartItem.contentTemplate\">\r\n <span class=\"el-dropdown-link\">\r\n <el-button type=\"primary\" text>\r\n <MKSvgIcon iconClass=\"MoreFilled\" />\r\n </el-button>\r\n </span>\r\n <template #dropdown>\r\n <el-dropdown-menu>\r\n <el-dropdown-item @click=\"CmsPartForm.openPreview(curSelectPartItem.id)\" v-if=\"CmsSettings.publish.mode == 'static' && curSelectPartItem.coverTemplate\">\r\n <MKSvgIcon iconClass=\"View\" style=\"margin-left: 10px;\" />\r\n 预览封面\r\n </el-dropdown-item>\r\n <el-dropdown-item @click=\"CmsPartForm.openPreview(curSelectPartItem.id,'1')\" v-if=\"curSelectPartItem.listTemplate\">\r\n <MKSvgIcon iconClass=\"View\" style=\"margin-left: 10px;\" />\r\n 预览列表\r\n </el-dropdown-item>\r\n <el-dropdown-item @click=\"showPublish = true\">\r\n <MKSvgIcon iconClass=\"Promotion\" style=\"margin-left: 10px;\" />\r\n 发布当前栏目\r\n </el-dropdown-item>\r\n </el-dropdown-menu>\r\n </template>\r\n </el-dropdown>\r\n </div>\r\n <el-tab-pane label=\"文章列表\" name=\"article-list\" v-if=\"curSelectPartItem.contentTemplate\">\r\n <ArticleList v-if=\"activeTabName == 'article-list'\" :part=\"curSelectPartItem\" />\r\n </el-tab-pane>\r\n <el-tab-pane label=\"栏目设置\" name=\"part\" v-loading=\"partDataForm.loading\">\r\n <PartInfo v-if=\"activeTabName == 'part'\" :part=\"curSelectPartItem\" ref=\"partInfoRef\"\r\n :partDataForm=\"partDataForm\" />\r\n </el-tab-pane>\r\n <el-tab-pane label=\"页面内容\" name=\"part-content\" style=\"background-color: #f4f4f4\"\r\n v-if=\"curSelectPartItem.cmsPartTypeId != 1\" v-loading=\"partDataForm.loading\">\r\n <MKDocEditor v-if=\"activeTabName == 'part-content'\" :css=\"CmsSettings.part.doc.css\" :js=\"CmsSettings.part.doc.js\" :content=\"partDataForm.data?.content\"\r\n placeholder=\"从这里开始写正文...\" @change=\"EditorChangeHandle\">\r\n <template #before-extentions>\r\n <PartBannerEdit v-if=\"partDataForm.data?.id\" :partId=\"partDataForm.data?.id\" :title=\"partDataForm.data?.title\" />\r\n </template>\r\n </MKDocEditor>\r\n </el-tab-pane>\r\n <el-tab-pane v-for=\"(ext,i) in partExList\" :label=\"ext.title \|\| `页面扩展设置 ${i==0 ?'':i}`\" :name=\"`part-ext${i}`\">\r\n <component :is=\"ext.component\" />\r\n </el-tab-pane>\r\n \r\n </el-tabs>\r\n <el-empty v-else description=\"请选择栏目\" style=\"width: 100%\" />\r\n </div>\r\n <el-dialog v-model=\"showPublish\" title=\"栏目发布\" width=\"475px\" :append-to-body=\"false\">\r\n <div class=\"mk-cms-contents__publish\">\r\n <div><span>是否发布列表：</span> <el-switch v-model=\"optionData.isPublishList\"\r\n :disabled=\"!curSelectPartItem.listTemplate\" /></div>\r\n <div><span>是否发布封面：</span> <el-switch v-model=\"optionData.isPublishCover\"\r\n :disabled=\"!curSelectPartItem.coverTemplate\" /></div>\r\n <div><span>是否发布内容：</span> <el-switch v-model=\"optionData.isPublishContent\"\r\n :disabled=\"!curSelectPartItem.contentTemplate\" /></div>\r\n <div><span>是否发布资源：</span> <el-switch v-model=\"optionData.isPublishAssets\" /></div>\r\n <div><span>是否强制发布：</span> <el-switch v-model=\"optionData.isCompulsion\" /></div>\r\n </div>\r\n <template #footer>\r\n <el-button @click=\"showPublish = false\">取消</el-button>\r\n <el-button type=\"primary\" @click=\"publishPartHandle\" :loading=\"publishLoading\">确定</el-button>\r\n </template>\r\n </el-dialog>\r\n </div>\r\n</template>\r\n<script setup lang=\"ts\" >\r\nimport { MKPartTree } from \"../../components\";\r\nimport ArticleList from \"./components/article-list.vue\";\r\nimport PartInfo from \"./components/part-info.vue\";\r\nimport PartBannerEdit from \"./components/part-banner-edit.vue\";\r\nimport { MKDocEditor } from \"../../../../components\";\r\nimport { reactive, ref, watch,watchEffect } from \"vue\";\r\nimport { Dialoger } from \"@maketribe/dm\";\r\nimport { CmsContentManPartForm,CmsPartForm, CmsPartMiniForm } from \"../../dataviews/cms-parts\";\r\nimport { useRoute, useRouter } from \"vue-router\";\r\nimport { usePartExtensionList, type PartExtension } from \"../../composables/part-extensions\"\r\nimport { ElSwitch } from \"element-plus\";\r\nimport { useCmsSettings } from \"../../cms-settings\"\r\n//路由 \r\nconst route = useRoute();\r\nconst router = useRouter();\r\n\r\n// 当前选中的栏目id\r\nconst curSelectPartId = ref<string>(route.query.pid as string)\r\nwatch(()=>route.query.pid,(v:any)=>{\r\n curSelectPartId.value = v \r\n},{ immediate:true });\r\n\r\n//栏目Mini表单\r\nconst partMiniForm = reactive<CmsPartMiniForm>(new CmsPartMiniForm());\r\n\r\n// cms 配置\r\nconst CmsSettings = useCmsSettings(true);\r\n\r\n//发布栏目时的配置\r\nconst showPublish = ref(false)\r\n\r\n//发布配置项\r\nconst optionData = ref({\r\n isPublishList: false,\r\n isPublishCover: false,\r\n isPublishContent: false,\r\n isPublishAssets: false,\r\n isCompulsion: true\r\n});\r\n\r\n//发布加载状态\r\nconst publishLoading = ref(false);\r\n\r\n// 数据加载状态\r\nconst loading = ref(false)\r\n\r\n// 激活的tab\r\nconst activeTabName = ref(\"article-list\");\r\n\r\n// 当前选中的菜单\r\nconst curSelectPartItem = ref(null as any);\r\n\r\n// 栏目树ref\r\nconst partTreeRef = ref(null);\r\n\r\n//栏目扩展\r\nconst partExList = ref<Array<PartExtension>>([]);\r\n\r\n//栏目数据\r\nconst partDataForm = reactive(new CmsContentManPartForm()) as CmsContentManPartForm;\r\n\r\n// 初始化表单\r\npartDataForm.init();\r\n\r\n// 切换tab 加载栏目表单数据\r\nlet beforeInitFormPart:any = null;\r\nwatchEffect(async ()=>{\r\n if((activeTabName.value == \"part\" \|\| activeTabName.value == \"part-content\") && curSelectPartItem.value != beforeInitFormPart){\r\n try {\r\n beforeInitFormPart = curSelectPartItem.value;\r\n await partDataForm.editRecord(curSelectPartItem.value.id);\r\n } catch (error) {\r\n console.log(error)\r\n }\r\n }\r\n});\r\n\r\n// 选择栏目\r\nconst selectPartHandle = async (item: any) => {\r\n\r\n if (curSelectPartItem.value != item) {\r\n\r\n curSelectPartItem.value = item;\r\n\r\n if (!curSelectPartItem.value.contentTemplate) {\r\n activeTabName.value = \"part\";\r\n }\r\n else{\r\n activeTabName.value = \"article-list\";\r\n }\r\n router.replace({ name: 'cms/contents', query: { pid: curSelectPartItem.value.id } } as any)\r\n partExList.value = usePartExtensionList(curSelectPartItem.value.id).concat(usePartExtensionList(curSelectPartItem.value.name));\r\n }\r\n};\r\n\r\n//删除栏目\r\nconst deletePartHandle = (item: any) => {\r\n if (item.id == curSelectPartItem.value.id) {\r\n curSelectPartItem.value = null;\r\n }\r\n};\r\n\r\n//编辑栏目\r\nconst editPartHandle = (item: any) => {\r\n curSelectPartItem.value = item;\r\n activeTabName.value = \"part\";\r\n};\r\n\r\n/*\r\n 显示添加栏目表单\r\n /\r\nconst showPartFormHandle = async (item?: any) => {\r\n await Dialoger.dataFormDialog({\r\n dataForm: partMiniForm as CmsContentManPartForm,\r\n });\r\n\r\n if (item.id) {\r\n partMiniForm.addRecord({ parentId: item.id });\r\n }\r\n\r\n};\r\n\r\nwatch(showPublish, async (v) => {\r\n if(v){\r\n optionData.value.isPublishList = !!curSelectPartItem.value.listTemplate\r\n optionData.value.isPublishCover = !!curSelectPartItem.value.coverTemplate\r\n optionData.value.isPublishContent = !!curSelectPartItem.value.contentTemplate\r\n }\r\n})\r\n \r\n//监听表单完成事件\r\npartMiniForm.submittedEvent.on(({ response }:any) => {\r\n if(response.data.data){\r\n // 重置选中\r\n curSelectPartId.value = response.data.data;\r\n // 刷新完成直接选中\r\n (partTreeRef.value! as any).dataTree?.load();\r\n }\r\n \r\n});\r\n\r\n//栏目发布\r\nconst publishAllPartHandle = async () => {\r\n\r\n try {\r\n\r\n loading.value = true;\r\n \r\n await CmsPartForm.publishAll()\r\n } \r\n finally {\r\n loading.value = false;\r\n }\r\n\r\n}\r\nconst publishPartHandle = async () => {\r\n \r\n try {\r\n\r\n publishLoading.value = true\r\n\r\n await CmsPartForm.publish(curSelectPartItem.value.id,optionData.value);\r\n\r\n showPublish.value = false;\r\n\r\n } finally {\r\n publishLoading.value = false\r\n }\r\n}\r\n\r\n/\r\n 保存栏目信息\r\n /\r\nconst savePartHandle = async () => {\r\n curSelectPartItem.value = partDataForm.data;\r\n await partDataForm.submit();\r\n}\r\n\r\n/\r\n 更新编辑器内容\r\n * @param v 内容\r\n */\r\nconst EditorChangeHandle = (v: any) => {\r\n partDataForm.data.content = v\r\n}\r\n</script>\r\n"],"names":["useRoute","useRouter","ref","watch","reactive","CmsPartMiniForm","useCmsSettings","CmsContentManPartForm","watchEffect","usePartExtensionList","Dialoger","CmsPartForm"],"mappings":"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"}
1	+ {"version":3,"file":"index.vue2.js","sources":["../../../../../../src/modules/cms/pages/cms-contents/index.vue"],"sourcesContent":["<template>\r\n <div class=\"mk-cms-contents__warp\" v-loading=\"loading\">\r\n <el-page-header style=\"background-color: #fff; padding: 10px\" :icon=\"null\">\r\n <template #title>\r\n <h3 style=\"color: var(--el-text-color-regular); margin-left: 10px\">\r\n <MKSvgIcon iconClass=\"richtext-outline\" style=\"margin-right: 5px\" />\r\n 内容管理\r\n </h3>\r\n </template>\r\n <template #extra>\r\n <div class=\"flex items-center\">\r\n <el-button-group>\r\n <el-button type=\"primary\" size=\"large\" text v-if=\"CmsSettings.publish.mode == 'static'\" @click=\"publishAllPartHandle\">\r\n <MKSvgIcon iconClass=\"Promotion\" style=\"margin-right: 10px\" />\r\n 整站发布\r\n </el-button>\r\n <el-button type=\"primary\" size=\"large\" text @click=\"showPartFormHandle\">\r\n <MKSvgIcon iconClass=\"Plus\" style=\"margin-right: 10px\" />\r\n 新增栏目\r\n </el-button>\r\n </el-button-group>\r\n </div>\r\n </template>\r\n </el-page-header>\r\n <div class=\"mk-cms-contents__body\">\r\n <MKPartTree class=\"mk-cms-contents__body__left\" @select=\"selectPartHandle\" @edit=\"editPartHandle\"\r\n @add=\"showPartFormHandle\" @deleteSuccessfully=\"deletePartHandle\" ref=\"partTreeRef\"\r\n :curSelectId=\"curSelectPartId\" />\r\n <el-tabs v-if=\"curSelectPartItem\" v-model=\"activeTabName\" class=\"mk-cms-contents__body__right\">\r\n <div class=\"mk-cms-contents__body__right__action\">\r\n\r\n <template v-for=\"(ext,i) in partExList\" :label=\"ext.title \|\| `页面扩展设置 ${i+1}`\" :name=\"\">\r\n <el-button type=\"primary\" text @click=\"ext.save()\" v-if=\"activeTabName == `part-ext${i}` && ext.save\">\r\n <MKSvgIcon iconClass=\"save\" style=\"margin-right: 5px\" />\r\n 保存{{ext.title}}\r\n </el-button>\r\n </template>\r\n <template v-if=\"activeTabName == 'part' \|\| (activeTabName == 'part-content' && !partContentComponent)\">\r\n <el-button type=\"primary\" text @click=\"savePartHandle()\" :disabled=\"!partDataForm?.isChanged\">\r\n <MKSvgIcon iconClass=\"save\" style=\"margin-right: 5px\" />\r\n 保存\r\n </el-button>\r\n </template>\r\n <el-dropdown v-if=\"CmsSettings.publish.mode == 'static' && curSelectPartItem.coverTemplate \|\| curSelectPartItem.listTemplate \|\| curSelectPartItem.contentTemplate\">\r\n <span class=\"el-dropdown-link\">\r\n <el-button type=\"primary\" text>\r\n <MKSvgIcon iconClass=\"MoreFilled\" />\r\n </el-button>\r\n </span>\r\n <template #dropdown>\r\n <el-dropdown-menu>\r\n <el-dropdown-item @click=\"CmsPartForm.openPreview(curSelectPartItem.id)\" v-if=\"CmsSettings.publish.mode == 'static' && curSelectPartItem.coverTemplate\">\r\n <MKSvgIcon iconClass=\"View\" style=\"margin-left: 10px;\" />\r\n 预览封面\r\n </el-dropdown-item>\r\n <el-dropdown-item @click=\"CmsPartForm.openPreview(curSelectPartItem.id,'1')\" v-if=\"curSelectPartItem.listTemplate\">\r\n <MKSvgIcon iconClass=\"View\" style=\"margin-left: 10px;\" />\r\n 预览列表\r\n </el-dropdown-item>\r\n <el-dropdown-item @click=\"showPublish = true\">\r\n <MKSvgIcon iconClass=\"Promotion\" style=\"margin-left: 10px;\" />\r\n 发布当前栏目\r\n </el-dropdown-item>\r\n </el-dropdown-menu>\r\n </template>\r\n </el-dropdown>\r\n </div>\r\n <el-tab-pane label=\"文章列表\" name=\"article-list\" v-if=\"curSelectPartItem.contentTemplate\">\r\n <ArticleList v-if=\"activeTabName == 'article-list'\" :part=\"curSelectPartItem\" />\r\n </el-tab-pane>\r\n <el-tab-pane label=\"栏目设置\" name=\"part\" v-loading=\"partDataForm.loading\">\r\n <PartInfo v-if=\"activeTabName == 'part'\" :part=\"curSelectPartItem\" ref=\"partInfoRef\"\r\n :partDataForm=\"partDataForm\" />\r\n </el-tab-pane>\r\n <el-tab-pane label=\"页面内容\" name=\"part-content\" style=\"background-color: #f4f4f4\" v-if=\"curSelectPartItem.cmsPartTypeId != 1\">\r\n \r\n <template v-if=\"partContentComponent\">\r\n <PartBannerEdit v-if=\"partDataForm.data?.id\" :partId=\"partDataForm.data?.id\" :title=\"partDataForm.data?.title\" />\r\n <div style=\"background: #fff;margin-top: -10px;height: 100%;overflow: auto;\">\r\n <component :is=\"partContentComponent\" />\r\n </div>\r\n </template>\r\n <template v-else-if=\"activeTabName == 'part-content'\">\r\n <MKDocEditor :css=\"CmsSettings.part.doc.css\" :js=\"CmsSettings.part.doc.js\" :content=\"partDataForm.data?.content\"\r\n placeholder=\"从这里开始写正文...\" @change=\"EditorChangeHandle\" v-loading=\"partDataForm.loading\">\r\n <template #before-extentions>\r\n <PartBannerEdit v-if=\"partDataForm.data?.id\" :partId=\"partDataForm.data?.id\" :title=\"partDataForm.data?.title\" />\r\n </template>\r\n </MKDocEditor>\r\n </template>\r\n \r\n </el-tab-pane>\r\n <el-tab-pane v-for=\"(ext,i) in partExList\" :label=\"ext.title \|\| `页面扩展设置 ${i==0 ?'':i}`\" :name=\"`part-ext${i}`\">\r\n <component :is=\"ext.component\" />\r\n </el-tab-pane>\r\n \r\n </el-tabs>\r\n <el-empty v-else description=\"请选择栏目\" style=\"width: 100%\" />\r\n </div>\r\n <el-dialog v-model=\"showPublish\" title=\"栏目发布\" width=\"475px\" :append-to-body=\"false\">\r\n <div class=\"mk-cms-contents__publish\">\r\n <div><span>是否发布列表：</span> <el-switch v-model=\"optionData.isPublishList\"\r\n :disabled=\"!curSelectPartItem.listTemplate\" /></div>\r\n <div><span>是否发布封面：</span> <el-switch v-model=\"optionData.isPublishCover\"\r\n :disabled=\"!curSelectPartItem.coverTemplate\" /></div>\r\n <div><span>是否发布内容：</span> <el-switch v-model=\"optionData.isPublishContent\"\r\n :disabled=\"!curSelectPartItem.contentTemplate\" /></div>\r\n <div><span>是否发布资源：</span> <el-switch v-model=\"optionData.isPublishAssets\" /></div>\r\n <div><span>是否强制发布：</span> <el-switch v-model=\"optionData.isCompulsion\" /></div>\r\n </div>\r\n <template #footer>\r\n <el-button @click=\"showPublish = false\">取消</el-button>\r\n <el-button type=\"primary\" @click=\"publishPartHandle\" :loading=\"publishLoading\">确定</el-button>\r\n </template>\r\n </el-dialog>\r\n </div>\r\n</template>\r\n<script setup lang=\"ts\" >\r\nimport { MKPartTree } from \"../../components\";\r\nimport ArticleList from \"./components/article-list.vue\";\r\nimport PartInfo from \"./components/part-info.vue\";\r\nimport PartBannerEdit from \"./components/part-banner-edit.vue\";\r\nimport { MKDocEditor } from \"../../../../components\";\r\nimport { reactive, ref, watch,watchEffect } from \"vue\";\r\nimport { Dialoger } from \"@maketribe/dm\";\r\nimport { CmsContentManPartForm,CmsPartForm, CmsPartMiniForm } from \"../../dataviews/cms-parts\";\r\nimport { useRoute, useRouter } from \"vue-router\";\r\nimport { usePartExtensionList,usePartContentComponent, type PartExtension } from \"../../composables/part-extensions\"\r\nimport { ElSwitch } from \"element-plus\";\r\nimport { useCmsSettings } from \"../../cms-settings\"\r\n//路由 \r\nconst route = useRoute();\r\nconst router = useRouter();\r\n\r\n// 当前选中的栏目id\r\nconst curSelectPartId = ref<string>(route.query.pid as string)\r\nwatch(()=>route.query.pid,(v:any)=>{\r\n curSelectPartId.value = v \r\n},{ immediate:true });\r\n\r\n//栏目Mini表单\r\nconst partMiniForm = reactive<CmsPartMiniForm>(new CmsPartMiniForm());\r\n\r\n// cms 配置\r\nconst CmsSettings = useCmsSettings(true);\r\n\r\n//发布栏目时的配置\r\nconst showPublish = ref(false)\r\n\r\n//发布配置项\r\nconst optionData = ref({\r\n isPublishList: false,\r\n isPublishCover: false,\r\n isPublishContent: false,\r\n isPublishAssets: false,\r\n isCompulsion: true\r\n});\r\n\r\n//发布加载状态\r\nconst publishLoading = ref(false);\r\n\r\n// 数据加载状态\r\nconst loading = ref(false)\r\n\r\n// 激活的tab\r\nconst activeTabName = ref(\"article-list\");\r\n\r\n// 当前选中的菜单\r\nconst curSelectPartItem = ref(null as any);\r\n\r\n// 栏目树ref\r\nconst partTreeRef = ref(null);\r\n\r\n//栏目扩展\r\nconst partExList = ref<Array<PartExtension>>([]);\r\nconst partContentComponent = ref<any>(null)\r\n\r\n//栏目数据\r\nconst partDataForm = reactive(new CmsContentManPartForm()) as CmsContentManPartForm;\r\n\r\n// 初始化表单\r\npartDataForm.init();\r\n\r\n// 切换tab 加载栏目表单数据\r\nlet beforeInitFormPart:any = null;\r\nwatchEffect(async ()=>{\r\n if((activeTabName.value == \"part\" \|\| activeTabName.value == \"part-content\") && curSelectPartItem.value != beforeInitFormPart){\r\n try {\r\n beforeInitFormPart = curSelectPartItem.value;\r\n await partDataForm.editRecord(curSelectPartItem.value.id);\r\n } catch (error) {\r\n console.log(error)\r\n }\r\n }\r\n});\r\n\r\n// 选择栏目\r\nconst selectPartHandle = async (item: any) => {\r\n\r\n if (curSelectPartItem.value != item) {\r\n\r\n curSelectPartItem.value = item;\r\n\r\n if (!curSelectPartItem.value.contentTemplate) {\r\n activeTabName.value = \"part\";\r\n }\r\n else{\r\n activeTabName.value = \"article-list\";\r\n }\r\n router.replace({ name: 'cms/contents', query: { pid: curSelectPartItem.value.id } } as any)\r\n partExList.value = usePartExtensionList(curSelectPartItem.value.id).concat(usePartExtensionList(curSelectPartItem.value.name));\r\n partContentComponent.value = usePartContentComponent(curSelectPartItem.value.id) \|\| usePartContentComponent(curSelectPartItem.value.name) \r\n }\r\n};\r\n\r\n//删除栏目\r\nconst deletePartHandle = (item: any) => {\r\n if (item.id == curSelectPartItem.value.id) {\r\n curSelectPartItem.value = null;\r\n }\r\n};\r\n\r\n//编辑栏目\r\nconst editPartHandle = (item: any) => {\r\n curSelectPartItem.value = item;\r\n activeTabName.value = \"part\";\r\n};\r\n\r\n/*\r\n 显示添加栏目表单\r\n /\r\nconst showPartFormHandle = async (item?: any) => {\r\n await Dialoger.dataFormDialog({\r\n dataForm: partMiniForm as CmsContentManPartForm,\r\n });\r\n\r\n if (item.id) {\r\n partMiniForm.addRecord({ parentId: item.id });\r\n }\r\n\r\n};\r\n\r\nwatch(showPublish, async (v) => {\r\n if(v){\r\n optionData.value.isPublishList = !!curSelectPartItem.value.listTemplate\r\n optionData.value.isPublishCover = !!curSelectPartItem.value.coverTemplate\r\n optionData.value.isPublishContent = !!curSelectPartItem.value.contentTemplate\r\n }\r\n})\r\n \r\n//监听表单完成事件\r\npartMiniForm.submittedEvent.on(({ response }:any) => {\r\n if(response.data.data){\r\n // 重置选中\r\n curSelectPartId.value = response.data.data;\r\n // 刷新完成直接选中\r\n (partTreeRef.value! as any).dataTree?.load();\r\n }\r\n \r\n});\r\n\r\n//栏目发布\r\nconst publishAllPartHandle = async () => {\r\n\r\n try {\r\n\r\n loading.value = true;\r\n \r\n await CmsPartForm.publishAll()\r\n } \r\n finally {\r\n loading.value = false;\r\n }\r\n\r\n}\r\nconst publishPartHandle = async () => {\r\n \r\n try {\r\n\r\n publishLoading.value = true\r\n\r\n await CmsPartForm.publish(curSelectPartItem.value.id,optionData.value);\r\n\r\n showPublish.value = false;\r\n\r\n } finally {\r\n publishLoading.value = false\r\n }\r\n}\r\n\r\n/\r\n 保存栏目信息\r\n /\r\nconst savePartHandle = async () => {\r\n curSelectPartItem.value = partDataForm.data;\r\n await partDataForm.submit();\r\n}\r\n\r\n/\r\n 更新编辑器内容\r\n * @param v 内容\r\n */\r\nconst EditorChangeHandle = (v: any) => {\r\n partDataForm.data.content = v\r\n}\r\n</script>\r\n"],"names":["useRoute","useRouter","ref","watch","reactive","CmsPartMiniForm","useCmsSettings","CmsContentManPartForm","watchEffect","usePartExtensionList","usePartContentComponent","Dialoger","CmsPartForm"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmIA,UAAM,QAAQA,UAAAA;AACd,UAAM,SAASC,UAAAA;AAGf,UAAM,kBAAkBC,IAAA,IAAY,MAAM,MAAM,GAAa;AAC7DC,QAAAA,MAAM,MAAI,MAAM,MAAM,KAAI,CAAC,MAAQ;AACjC,sBAAgB,QAAQ;AAAA,IAAA,GACxB,EAAE,WAAU,KAAA,CAAM;AAGpB,UAAM,eAAeC,IAAAA,SAA0B,IAAIC,gBAAAA,gBAAiB,CAAA;AAG9D,UAAA,cAAcC,2BAAe,IAAI;AAGjC,UAAA,cAAcJ,QAAI,KAAK;AAG7B,UAAM,aAAaA,IAAAA,IAAI;AAAA,MACrB,eAAe;AAAA,MACf,gBAAgB;AAAA,MAChB,kBAAkB;AAAA,MAClB,iBAAiB;AAAA,MACjB,cAAc;AAAA,IAAA,CACf;AAGK,UAAA,iBAAiBA,QAAI,KAAK;AAG1B,UAAA,UAAUA,QAAI,KAAK;AAGnB,UAAA,gBAAgBA,QAAI,cAAc;AAGlC,UAAA,oBAAoBA,QAAI,IAAW;AAGnC,UAAA,cAAcA,QAAI,IAAI;AAGtB,UAAA,aAAaA,QAA0B,CAAA,CAAE;AACzC,UAAA,uBAAuBA,QAAS,IAAI;AAG1C,UAAM,eAAeE,IAAAA,SAAS,IAAIG,sBAAAA,sBAAuB,CAAA;AAGzD,iBAAa,KAAK;AAGlB,QAAI,qBAAyB;AAC7BC,QAAAA,YAAY,YAAU;AAChB,WAAA,cAAc,SAAS,UAAU,cAAc,SAAS,mBAAmB,kBAAkB,SAAS,oBAAmB;AACvH,YAAA;AACF,+BAAqB,kBAAkB;AACvC,gBAAM,aAAa,WAAW,kBAAkB,MAAM,EAAE;AAAA,iBACjD,OAAO;AACd,kBAAQ,IAAI,KAAK;AAAA,QACnB;AAAA,MACF;AAAA,IAAA,CACD;AAGK,UAAA,mBAAmB,OAAO,SAAc;AAExC,UAAA,kBAAkB,SAAS,MAAM;AAEnC,0BAAkB,QAAQ;AAEtB,YAAA,CAAC,kBAAkB,MAAM,iBAAiB;AAC5C,wBAAc,QAAQ;AAAA,QAAA,OAEpB;AACF,wBAAc,QAAQ;AAAA,QACxB;AACO,eAAA,QAAQ,EAAE,MAAM,gBAAgB,OAAO,EAAE,KAAK,kBAAkB,MAAM,GAAG,EAAU,CAAA;AAC/E,mBAAA,QAAQC,eAAAA,qBAAqB,kBAAkB,MAAM,EAAE,EAAE,OAAOA,eAAqB,qBAAA,kBAAkB,MAAM,IAAI,CAAC;AACxG,6BAAA,QAAQC,uCAAwB,kBAAkB,MAAM,EAAE,KAAKA,uCAAwB,kBAAkB,MAAM,IAAI;AAAA,MAC1I;AAAA,IAAA;AAII,UAAA,mBAAmB,CAAC,SAAc;AACtC,UAAI,KAAK,MAAM,kBAAkB,MAAM,IAAI;AACzC,0BAAkB,QAAQ;AAAA,MAC5B;AAAA,IAAA;AAII,UAAA,iBAAiB,CAAC,SAAc;AACpC,wBAAkB,QAAQ;AAC1B,oBAAc,QAAQ;AAAA,IAAA;AAMlB,UAAA,qBAAqB,OAAO,SAAe;AAC/C,YAAMC,GAAAA,SAAS,eAAe;AAAA,QAC5B,UAAU;AAAA,MAAA,CACX;AAED,UAAI,KAAK,IAAI;AACX,qBAAa,UAAU,EAAE,UAAU,KAAK,GAAI,CAAA;AAAA,MAC9C;AAAA,IAAA;AAIIR,cAAA,aAAa,OAAO,MAAM;AAC9B,UAAG,GAAE;AACH,mBAAW,MAAM,gBAAgB,CAAC,CAAC,kBAAkB,MAAM;AAC3D,mBAAW,MAAM,iBAAiB,CAAC,CAAC,kBAAkB,MAAM;AAC5D,mBAAW,MAAM,mBAAmB,CAAC,CAAC,kBAAkB,MAAM;AAAA,MAChE;AAAA,IAAA,CACD;AAGD,iBAAa,eAAe,GAAG,CAAC,EAAE,eAAmB;;AAChD,UAAA,SAAS,KAAK,MAAK;AAEJ,wBAAA,QAAQ,SAAS,KAAK;AAErC,0BAAY,MAAe,aAA3B,mBAAqC;AAAA,MACxC;AAAA,IAAA,CAED;AAGD,UAAM,uBAAuB,YAAY;AAEnC,UAAA;AAEF,gBAAQ,QAAQ;AAEhB,cAAMS,YAAAA,YAAY;MAAW,UAE/B;AACE,gBAAQ,QAAQ;AAAA,MAClB;AAAA,IAAA;AAGF,UAAM,oBAAoB,YAAY;AAEhC,UAAA;AAEF,uBAAe,QAAQ;AAEvB,cAAMA,YAAAA,YAAY,QAAQ,kBAAkB,MAAM,IAAG,WAAW,KAAK;AAErE,oBAAY,QAAQ;AAAA,MAAA,UAEpB;AACA,uBAAe,QAAQ;AAAA,MACzB;AAAA,IAAA;AAMF,UAAM,iBAAiB,YAAY;AACjC,wBAAkB,QAAQ,aAAa;AACvC,YAAM,aAAa;IAAO;AAOtB,UAAA,qBAAqB,CAAC,MAAW;AACrC,mBAAa,KAAK,UAAU;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/basic/doc-editor/core/element-block.js CHANGED Viewed

@@ -47,6 +47,8 @@ const useElementBlockSelection = (func, toolsbars) => {
     curSelectEl.value = el == null ? editor.getElementByKey(nodeKey) : el;
     curSelectKey.value = nodeKey;
     isSelected.value = isNodeSelected(editor, nodeKey);
+    setTimeout(() => updateActiveBox(curSelectEl.value), 500);
+    setTimeout(() => updateActiveBox(curSelectEl.value), 1e3);
   };
   watch(isSelected, (state) => {
     if (state) {

package/dist/esm/components/basic/doc-editor/core/element-block.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"element-block.js","sources":["../../../../../../src/components/basic/doc-editor/core/element-block.ts"],"sourcesContent":["\r\n\r\nimport { mergeRegister } from '@lexical/utils'\r\nimport { COMMAND_PRIORITY_LOW,CLICK_COMMAND, LexicalCommand, createCommand, BaseSelection } from 'lexical'\r\nimport { useLexicalComposer,useMounted } from 'lexical-vue'\r\nimport { ref,watch } from 'vue'\r\n\r\nimport { \r\n isNodeSelected,setSelected,clearSelection,\r\n} from './utils'\r\n\r\n/*\r\n toolsbar的函数\r\n /\r\nexport type SelectElementBlockToolsbarFunction = (selection:BaseSelection\|null)=>Array<any>\|null;\r\n\r\n/\r\n 元素抗选中类型\r\n /\r\nexport type SelectElementBlocktEventType = {\r\n element:HTMLElement,\r\n toolsbars:Array<any>\|SelectElementBlockToolsbarFunction\r\n}\r\n\r\n/\r\n 选中元素快\r\n /\r\nexport const SELECTED_ELEMENTBLOCK_COMMAND: LexicalCommand<SelectElementBlocktEventType\|null> = createCommand('SELECTED_ELEMENTBLOCK_COMMAND')\r\n\r\n/\r\n 移除元素快\r\n /\r\nexport const REMOVE_ELEMENTBLOCK_COMMAND: LexicalCommand<undefined\|null> = createCommand('REMOVE_ELEMENTBLOCK_COMMAND')\r\n\r\n/\r\n 更新模块工具条位置信息\r\n /\r\nexport const UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND: LexicalCommand<undefined\|null> = createCommand('UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND')\r\n\r\n\r\n\r\n/\r\n 判断选中的方法\r\n /\r\nexport type SelectExistFunc = (el:HTMLElement)=>HTMLElement\|null\r\n\r\n/\r\n 判断选中的方法\r\n /\r\nexport type ElementSelectionHandle = (el:HTMLElement)=>undefined\r\n\r\n/\r\n 使用元素模块激活\r\n /\r\nexport const useElementBlockActive = (func:SelectExistFunc,selectionHandle:ElementSelectionHandle, unSelectionHandle:ElementSelectionHandle)=>{\r\n\r\n const editor = useLexicalComposer()\r\n\r\n let curSelectEl:HTMLElement\|null = null\r\n \r\n // 编辑器挂载\r\n useMounted(()=>{\r\n // 注册事件\r\n return mergeRegister(\r\n // 点击选中\r\n editor.registerCommand<MouseEvent>(CLICK_COMMAND,(event) => {\r\n \r\n const el = func(event.target as HTMLElement);\r\n const nodeKey = el?.getAttribute(\"node-key\");\r\n\r\n // 不为null的话则视为点击选中\r\n if(nodeKey){\r\n \r\n event.preventDefault();\r\n\r\n selectionHandle(el as HTMLElement)\r\n\r\n if(curSelectEl && curSelectEl != el){\r\n unSelectionHandle(curSelectEl);\r\n }\r\n curSelectEl = el;\r\n return true;\r\n }\r\n else{\r\n curSelectEl && unSelectionHandle(curSelectEl);\r\n curSelectEl = null;\r\n }\r\n \r\n return false;\r\n }, COMMAND_PRIORITY_LOW)\r\n )\r\n })\r\n\r\n}\r\n\r\n/\r\n 使用元素块选中\r\n */\r\nexport const useElementBlockSelection = (func:SelectExistFunc,toolsbars:Array<any>\|SelectElementBlockToolsbarFunction)=>{\r\n\r\n const editor = useLexicalComposer()\r\n const isSelected = ref(false)\r\n const curSelectKey = ref<any>(null)\r\n const curSelectEl = ref<any>(null)\r\n const curSelectPos = ref<any>(null)\r\n // 更新选中框\r\n const updateActiveBox = (el:HTMLElement\|null):undefined=>{\r\n if(el){\r\n const selectRect = el.getBoundingClientRect();\r\n curSelectPos.value = {\r\n top:`${selectRect.y}px`,left:`${selectRect.x}px`,\r\n width:`${selectRect.width}px`,height:`${selectRect.height}px`\r\n };\r\n }\r\n }\r\n // 更新选中\r\n const updateActiveViewState = (el:HTMLElement\|null):undefined=>{\r\n \r\n if(el){\r\n\r\n updateActiveBox(el);\r\n editor.dispatchCommand(SELECTED_ELEMENTBLOCK_COMMAND,{ \r\n element:curSelectEl.value,\r\n toolsbars:toolsbars\r\n });\r\n }\r\n else{\r\n curSelectEl.value = null;\r\n curSelectKey.value = null;\r\n curSelectPos.value = null;\r\n editor.dispatchCommand(SELECTED_ELEMENTBLOCK_COMMAND,null);\r\n }\r\n }\r\n\r\n // 设置选中\r\n const setSelection = async (nodeKey:string,el:HTMLElement\|null\|undefined)=>{\r\n\r\n // 没来得及取消的则先取消\r\n if(isSelected.value){ \r\n isSelected.value = false;\r\n await clearSelection(editor);\r\n }\r\n // 稍微停顿下\r\n await new Promise(reslove=>setTimeout(reslove, 10));\r\n await setSelected(editor,true,nodeKey);\r\n curSelectEl.value = el == null ? editor.getElementByKey(nodeKey) : el;\r\n curSelectKey.value = nodeKey;\r\n isSelected.value = isNodeSelected(editor, nodeKey);\r\n }\r\n // 是否选中\r\n watch(isSelected,(state)=>{\r\n if(state){\r\n updateActiveViewState(state ? curSelectEl.value : null)\r\n }\r\n else{\r\n updateActiveViewState(null)\r\n }\r\n })\r\n \r\n // 编辑器挂载\r\n useMounted(()=>{\r\n // 注册事件\r\n return mergeRegister(\r\n // 更新选中状态\r\n editor.registerUpdateListener(() => {\r\n \r\n isSelected.value = isNodeSelected(editor, curSelectKey.value);\r\n setTimeout(()=>updateActiveBox(curSelectEl.value),10)\r\n \r\n }),\r\n // 点击选中\r\n editor.registerCommand<MouseEvent>(CLICK_COMMAND,(event) => {\r\n \r\n const el = func(event.target as HTMLElement);\r\n const nodeKey = el?.getAttribute(\"node-key\");\r\n\r\n // 不为null的话则视为点击选中\r\n if(nodeKey != null){\r\n \r\n event.preventDefault();\r\n \r\n if (!event.shiftKey) { \r\n // 先取消\r\n clearSelection(editor).then(()=>{\r\n // 设置选中\r\n setSelection(nodeKey,el)\r\n })\r\n }\r\n else{\r\n // 设置选中\r\n setSelection(nodeKey,el)\r\n }\r\n\r\n return true;\r\n }\r\n \r\n return false;\r\n }, COMMAND_PRIORITY_LOW)\r\n )\r\n })\r\n\r\n\r\n return { isSelected,setSelection, curSelectKey,curSelectPos };\r\n\r\n}\r\n"],"names":[],"mappings":";;;;;AA2Ba,MAAA,gCAAmF,cAAc,+BAA+B;AAKhI,MAAA,8BAA8D,cAAc,6BAA6B;AAKzG,MAAA,0CAA0E,cAAc,yCAAyC;AA6DjI,MAAA,2BAA2B,CAAC,MAAqB,cAA0D;AAEtH,QAAM,SAAS;AACT,QAAA,aAAa,IAAI,KAAK;AACtB,QAAA,eAAe,IAAS,IAAI;AAC5B,QAAA,cAAc,IAAS,IAAI;AAC3B,QAAA,eAAe,IAAS,IAAI;AAE5B,QAAA,kBAAmB,CAAC,OAAgC;AACxD,QAAG,IAAG;AACE,YAAA,aAAa,GAAG;AACtB,mBAAa,QAAQ;AAAA,QACnB,KAAI,GAAG,WAAW,CAAC;AAAA,QAAK,MAAK,GAAG,WAAW,CAAC;AAAA,QAC5C,OAAM,GAAG,WAAW,KAAK;AAAA,QAAK,QAAO,GAAG,WAAW,MAAM;AAAA,MAAA;AAAA,IAE7D;AAAA,EAAA;AAGI,QAAA,wBAAwB,CAAC,OAAgC;AAE7D,QAAG,IAAG;AAEJ,sBAAgB,EAAE;AAClB,aAAO,gBAAgB,+BAA8B;AAAA,QACnD,SAAQ,YAAY;AAAA,QACpB;AAAA,MAAA,CACD;AAAA,IAAA,OAEC;AACF,kBAAY,QAAQ;AACpB,mBAAa,QAAQ;AACrB,mBAAa,QAAQ;AACd,aAAA,gBAAgB,+BAA8B,IAAI;AAAA,IAC3D;AAAA,EAAA;AAII,QAAA,eAAe,OAAO,SAAe,OAAgC;AAGzE,QAAG,WAAW,OAAM;AAClB,iBAAW,QAAQ;AACnB,YAAO,eAAe,MAAM;AAAA,IAC9B;AAEA,UAAM,IAAI,QAAQ,CAAA,YAAS,WAAW,SAAS,EAAE,CAAC;AAC5C,UAAA,YAAY,QAAO,MAAK,OAAO;AACrC,gBAAY,QAAQ,MAAM,OAAO,OAAO,gBAAgB,OAAO,IAAI;AACnE,iBAAa,QAAQ;AACV,eAAA,QAAQ,eAAe,QAAQ,OAAO;AAAA,EAAA;~~AAG7C~~,QAAA,YAAW,CAAC,UAAQ;AACxB,QAAG,OAAM;AACe,4BAAA,QAAQ,YAAY,QAAQ,IAAI;AAAA,IAAA,OAEpD;AACF,4BAAsB,IAAI;AAAA,IAC5B;AAAA,EAAA,CACD;AAGD,aAAW,MAAI;AAEN,WAAA;AAAA;AAAA,MAEL,OAAO,uBAAuB,MAAM;AAElC,mBAAW,QAAQ,eAAe,QAAQ,aAAa,KAAK;AAC5D,mBAAW,MAAI,gBAAgB,YAAY,KAAK,GAAE,EAAE;AAAA,MAAA,CAErD;AAAA;AAAA,MAED,OAAO,gBAA4B,eAAc,CAAC,UAAU;AAEpD,cAAA,KAAK,KAAK,MAAM,MAAqB;AACrC,cAAA,UAAU,yBAAI,aAAa;AAGjC,YAAG,WAAW,MAAK;AAEjB,gBAAM,eAAe;AAEjB,cAAA,CAAC,MAAM,UAAU;AAEJ,2BAAA,MAAM,EAAE,KAAK,MAAI;AAE9B,2BAAa,SAAQ,EAAE;AAAA,YAAA,CACxB;AAAA,UAAA,OAEC;AAEF,yBAAa,SAAQ,EAAE;AAAA,UACzB;AAEO,iBAAA;AAAA,QACT;AAEO,eAAA;AAAA,SACN,oBAAoB;AAAA,IAAA;AAAA,EACzB,CACD;AAGD,SAAO,EAAE,YAAW,cAAc,cAAa,aAAa;AAE9D;"}
1	+ {"version":3,"file":"element-block.js","sources":["../../../../../../src/components/basic/doc-editor/core/element-block.ts"],"sourcesContent":["\r\n\r\nimport { mergeRegister } from '@lexical/utils'\r\nimport { COMMAND_PRIORITY_LOW,CLICK_COMMAND, LexicalCommand, createCommand, BaseSelection } from 'lexical'\r\nimport { useLexicalComposer,useMounted } from 'lexical-vue'\r\nimport { ref,watch } from 'vue'\r\n\r\nimport { \r\n isNodeSelected,setSelected,clearSelection,\r\n} from './utils'\r\n\r\n/*\r\n toolsbar的函数\r\n /\r\nexport type SelectElementBlockToolsbarFunction = (selection:BaseSelection\|null)=>Array<any>\|null;\r\n\r\n/\r\n 元素抗选中类型\r\n /\r\nexport type SelectElementBlocktEventType = {\r\n element:HTMLElement,\r\n toolsbars:Array<any>\|SelectElementBlockToolsbarFunction\r\n}\r\n\r\n/\r\n 选中元素快\r\n /\r\nexport const SELECTED_ELEMENTBLOCK_COMMAND: LexicalCommand<SelectElementBlocktEventType\|null> = createCommand('SELECTED_ELEMENTBLOCK_COMMAND')\r\n\r\n/\r\n 移除元素快\r\n /\r\nexport const REMOVE_ELEMENTBLOCK_COMMAND: LexicalCommand<undefined\|null> = createCommand('REMOVE_ELEMENTBLOCK_COMMAND')\r\n\r\n/\r\n 更新模块工具条位置信息\r\n /\r\nexport const UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND: LexicalCommand<undefined\|null> = createCommand('UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND')\r\n\r\n\r\n\r\n/\r\n 判断选中的方法\r\n /\r\nexport type SelectExistFunc = (el:HTMLElement)=>HTMLElement\|null\r\n\r\n/\r\n 判断选中的方法\r\n /\r\nexport type ElementSelectionHandle = (el:HTMLElement)=>undefined\r\n\r\n/\r\n 使用元素模块激活\r\n /\r\nexport const useElementBlockActive = (func:SelectExistFunc,selectionHandle:ElementSelectionHandle, unSelectionHandle:ElementSelectionHandle)=>{\r\n\r\n const editor = useLexicalComposer()\r\n\r\n let curSelectEl:HTMLElement\|null = null\r\n \r\n // 编辑器挂载\r\n useMounted(()=>{\r\n // 注册事件\r\n return mergeRegister(\r\n // 点击选中\r\n editor.registerCommand<MouseEvent>(CLICK_COMMAND,(event) => {\r\n \r\n const el = func(event.target as HTMLElement);\r\n const nodeKey = el?.getAttribute(\"node-key\");\r\n\r\n // 不为null的话则视为点击选中\r\n if(nodeKey){\r\n \r\n event.preventDefault();\r\n\r\n selectionHandle(el as HTMLElement)\r\n\r\n if(curSelectEl && curSelectEl != el){\r\n unSelectionHandle(curSelectEl);\r\n }\r\n curSelectEl = el;\r\n return true;\r\n }\r\n else{\r\n curSelectEl && unSelectionHandle(curSelectEl);\r\n curSelectEl = null;\r\n }\r\n \r\n return false;\r\n }, COMMAND_PRIORITY_LOW)\r\n )\r\n })\r\n\r\n}\r\n\r\n/\r\n 使用元素块选中\r\n */\r\nexport const useElementBlockSelection = (func:SelectExistFunc,toolsbars:Array<any>\|SelectElementBlockToolsbarFunction)=>{\r\n\r\n const editor = useLexicalComposer()\r\n const isSelected = ref(false)\r\n const curSelectKey = ref<any>(null)\r\n const curSelectEl = ref<any>(null)\r\n const curSelectPos = ref<any>(null)\r\n // 更新选中框\r\n const updateActiveBox = (el:HTMLElement\|null):undefined=>{\r\n if(el){\r\n const selectRect = el.getBoundingClientRect();\r\n curSelectPos.value = {\r\n top:`${selectRect.y}px`,left:`${selectRect.x}px`,\r\n width:`${selectRect.width}px`,height:`${selectRect.height}px`\r\n };\r\n }\r\n }\r\n // 更新选中\r\n const updateActiveViewState = (el:HTMLElement\|null):undefined=>{\r\n \r\n if(el){\r\n\r\n updateActiveBox(el);\r\n editor.dispatchCommand(SELECTED_ELEMENTBLOCK_COMMAND,{ \r\n element:curSelectEl.value,\r\n toolsbars:toolsbars\r\n });\r\n }\r\n else{\r\n curSelectEl.value = null;\r\n curSelectKey.value = null;\r\n curSelectPos.value = null;\r\n editor.dispatchCommand(SELECTED_ELEMENTBLOCK_COMMAND,null);\r\n }\r\n }\r\n\r\n // 设置选中\r\n const setSelection = async (nodeKey:string,el:HTMLElement\|null\|undefined)=>{\r\n\r\n // 没来得及取消的则先取消\r\n if(isSelected.value){ \r\n isSelected.value = false;\r\n await clearSelection(editor);\r\n }\r\n // 稍微停顿下\r\n await new Promise(reslove=>setTimeout(reslove, 10));\r\n await setSelected(editor,true,nodeKey);\r\n curSelectEl.value = el == null ? editor.getElementByKey(nodeKey) : el;\r\n curSelectKey.value = nodeKey;\r\n isSelected.value = isNodeSelected(editor, nodeKey);\r\n // 500毫秒之后计算下选择框\r\n setTimeout(()=>updateActiveBox(curSelectEl.value),500)\r\n // 之后再计算下避免由于图片加载高度计算错误问题\r\n setTimeout(()=>updateActiveBox(curSelectEl.value),1000)\r\n }\r\n // 是否选中\r\n watch(isSelected,(state)=>{\r\n if(state){\r\n updateActiveViewState(state ? curSelectEl.value : null)\r\n }\r\n else{\r\n updateActiveViewState(null)\r\n }\r\n })\r\n \r\n // 编辑器挂载\r\n useMounted(()=>{\r\n // 注册事件\r\n return mergeRegister(\r\n // 更新选中状态\r\n editor.registerUpdateListener(() => {\r\n \r\n isSelected.value = isNodeSelected(editor, curSelectKey.value);\r\n setTimeout(()=>updateActiveBox(curSelectEl.value),10)\r\n \r\n }),\r\n // 点击选中\r\n editor.registerCommand<MouseEvent>(CLICK_COMMAND,(event) => {\r\n \r\n const el = func(event.target as HTMLElement);\r\n const nodeKey = el?.getAttribute(\"node-key\");\r\n\r\n // 不为null的话则视为点击选中\r\n if(nodeKey != null){\r\n \r\n event.preventDefault();\r\n \r\n if (!event.shiftKey) { \r\n // 先取消\r\n clearSelection(editor).then(()=>{\r\n // 设置选中\r\n setSelection(nodeKey,el)\r\n })\r\n }\r\n else{\r\n // 设置选中\r\n setSelection(nodeKey,el)\r\n }\r\n\r\n return true;\r\n }\r\n \r\n return false;\r\n }, COMMAND_PRIORITY_LOW)\r\n )\r\n })\r\n\r\n\r\n return { isSelected,setSelection, curSelectKey,curSelectPos };\r\n\r\n}\r\n"],"names":[],"mappings":";;;;;AA2Ba,MAAA,gCAAmF,cAAc,+BAA+B;AAKhI,MAAA,8BAA8D,cAAc,6BAA6B;AAKzG,MAAA,0CAA0E,cAAc,yCAAyC;AA6DjI,MAAA,2BAA2B,CAAC,MAAqB,cAA0D;AAEtH,QAAM,SAAS;AACT,QAAA,aAAa,IAAI,KAAK;AACtB,QAAA,eAAe,IAAS,IAAI;AAC5B,QAAA,cAAc,IAAS,IAAI;AAC3B,QAAA,eAAe,IAAS,IAAI;AAE5B,QAAA,kBAAmB,CAAC,OAAgC;AACxD,QAAG,IAAG;AACE,YAAA,aAAa,GAAG;AACtB,mBAAa,QAAQ;AAAA,QACnB,KAAI,GAAG,WAAW,CAAC;AAAA,QAAK,MAAK,GAAG,WAAW,CAAC;AAAA,QAC5C,OAAM,GAAG,WAAW,KAAK;AAAA,QAAK,QAAO,GAAG,WAAW,MAAM;AAAA,MAAA;AAAA,IAE7D;AAAA,EAAA;AAGI,QAAA,wBAAwB,CAAC,OAAgC;AAE7D,QAAG,IAAG;AAEJ,sBAAgB,EAAE;AAClB,aAAO,gBAAgB,+BAA8B;AAAA,QACnD,SAAQ,YAAY;AAAA,QACpB;AAAA,MAAA,CACD;AAAA,IAAA,OAEC;AACF,kBAAY,QAAQ;AACpB,mBAAa,QAAQ;AACrB,mBAAa,QAAQ;AACd,aAAA,gBAAgB,+BAA8B,IAAI;AAAA,IAC3D;AAAA,EAAA;AAII,QAAA,eAAe,OAAO,SAAe,OAAgC;AAGzE,QAAG,WAAW,OAAM;AAClB,iBAAW,QAAQ;AACnB,YAAO,eAAe,MAAM;AAAA,IAC9B;AAEA,UAAM,IAAI,QAAQ,CAAA,YAAS,WAAW,SAAS,EAAE,CAAC;AAC5C,UAAA,YAAY,QAAO,MAAK,OAAO;AACrC,gBAAY,QAAQ,MAAM,OAAO,OAAO,gBAAgB,OAAO,IAAI;AACnE,iBAAa,QAAQ;AACV,eAAA,QAAQ,eAAe,QAAQ,OAAO;AAEjD,eAAW,MAAI,gBAAgB,YAAY,KAAK,GAAE,GAAG;AAErD,eAAW,MAAI,gBAAgB,YAAY,KAAK,GAAE,GAAI;AAAA,EAAA;AAGlD,QAAA,YAAW,CAAC,UAAQ;AACxB,QAAG,OAAM;AACe,4BAAA,QAAQ,YAAY,QAAQ,IAAI;AAAA,IAAA,OAEpD;AACF,4BAAsB,IAAI;AAAA,IAC5B;AAAA,EAAA,CACD;AAGD,aAAW,MAAI;AAEN,WAAA;AAAA;AAAA,MAEL,OAAO,uBAAuB,MAAM;AAElC,mBAAW,QAAQ,eAAe,QAAQ,aAAa,KAAK;AAC5D,mBAAW,MAAI,gBAAgB,YAAY,KAAK,GAAE,EAAE;AAAA,MAAA,CAErD;AAAA;AAAA,MAED,OAAO,gBAA4B,eAAc,CAAC,UAAU;AAEpD,cAAA,KAAK,KAAK,MAAM,MAAqB;AACrC,cAAA,UAAU,yBAAI,aAAa;AAGjC,YAAG,WAAW,MAAK;AAEjB,gBAAM,eAAe;AAEjB,cAAA,CAAC,MAAM,UAAU;AAEJ,2BAAA,MAAM,EAAE,KAAK,MAAI;AAE9B,2BAAa,SAAQ,EAAE;AAAA,YAAA,CACxB;AAAA,UAAA,OAEC;AAEF,yBAAa,SAAQ,EAAE;AAAA,UACzB;AAEO,iBAAA;AAAA,QACT;AAEO,eAAA;AAAA,SACN,oBAAoB;AAAA,IAAA;AAAA,EACzB,CACD;AAGD,SAAO,EAAE,YAAW,cAAc,cAAa,aAAa;AAE9D;"}

package/dist/esm/components/basic/doc-editor/plugins/GridPlugin/GridNode.js CHANGED Viewed

@@ -84,6 +84,15 @@ class GridNode extends ElementNode {
         el.style[key] = this.__attrs[key];
       }
     });
+    let extraClassName = GridNode.getExtraClassName(el);
+    if (extraClassName != this.__attrs.class) {
+      if (extraClassName) {
+        el.classList.remove(extraClassName);
+      }
+      if (this.__attrs.class) {
+        el.classList.add(this.__attrs.class);
+      }
+    }
   }
   /**
    * 获取标识类
@@ -99,15 +108,6 @@ class GridNode extends ElementNode {
   exportDOM() {
     const element = document.createElement("div");
     this.updateElementAttr(element);
-    let extraClassName = GridNode.getExtraClassName(element);
-    if (extraClassName != this.__attrs.class) {
-      if (extraClassName) {
-        element.classList.remove(extraClassName);
-      }
-      if (this.__attrs.class) {
-        element.classList.add(this.__attrs.class);
-      }
-    }
     if (!element.classList.contains(GridNode.getMarkClassName())) {
       element.classList.add(GridNode.getMarkClassName());
     }

package/dist/esm/components/basic/doc-editor/plugins/GridPlugin/GridNode.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GridNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/GridNode.ts"],"sourcesContent":["\r\n\r\n\r\n\r\n\r\nimport type { DOMConversionMap, SerializedElementNode, LexicalNode, NodeKey, Spread,EditorConfig, DOMExportOutput } from 'lexical'\r\nimport { ElementNode } from 'lexical'\r\n\r\n/*\r\n 容器属性\r\n /\r\nexport type GridNodeAttrType = {\r\n class:string,\r\n width:string,\r\n height:string,\r\n maxWidth:string,\r\n maxHeight:string,\r\n flex:string\r\n};\r\n\r\n/\r\n 节点序列化 \r\n /\r\nexport type SerializedGridNode = Spread<{ attrs:GridNodeAttrType },SerializedElementNode>\r\n\r\n/\r\n 格子\r\n /\r\nexport class GridNode extends ElementNode{\r\n\r\n __attrs:GridNodeAttrType\r\n\r\n static getType(): string { return \"grid\"; }\r\n\r\n static hasGridNodeByElement(el:HTMLElement):HTMLElement\|null{\r\n return el.classList.contains(GridNode.getMarkClassName()) ? el : null;\r\n }\r\n\r\n static getMarkClassName(): string {\r\n return `mk-doc__${GridNode.getType()}`\r\n }\r\n\r\n static getExtraClassName(el:HTMLElement){\r\n return el.className.replace(GridNode.getMarkClassName(),\"\").trim();\r\n }\r\n\r\n static clone(node: GridNode): GridNode {\r\n \r\n return new GridNode(node.__attrs,node.__key)\r\n }\r\n\r\n static importJSON(serializedNode: SerializedGridNode): GridNode {\r\n return new GridNode(serializedNode.attrs)\r\n }\r\n\r\n static importDOM(): DOMConversionMap \| null {\r\n return {\r\n div : (domNode: HTMLElement) => {\r\n\r\n return GridNode.hasGridNodeByElement(domNode) ? {\r\n\r\n conversion: ()=>{ \r\n\r\n return { \r\n\r\n node:new GridNode({\r\n class:GridNode.getExtraClassName(domNode),\r\n width:domNode.style.width \|\| \"100%\",\r\n height:domNode.style.height,\r\n flex:domNode.style.flex,\r\n maxWidth:domNode.style.maxWidth,\r\n maxHeight:domNode.style.maxHeight\r\n } as GridNodeAttrType) \r\n };\r\n },\r\n priority: 1\r\n } : null;\r\n }\r\n }\r\n }\r\n\r\n constructor(attrs:GridNodeAttrType,key?: NodeKey) {\r\n super(key)\r\n this.__attrs = attrs;\r\n }\r\n\r\n /\r\n 设置属性\r\n * @param pos \r\n /\r\n setAttrs(data?:GridNodeAttrType){\r\n const writable = this.getWritable();\r\n Object.assign(writable.__attrs,data)\r\n }\r\n\r\n /\r\n 获取属性\r\n * @param pos \r\n /\r\n getAttrs():GridNodeAttrType{\r\n return this.__attrs;\r\n }\r\n\r\n /\r\n 导出JSON\r\n * @returns \r\n /\r\n exportJSON(): SerializedGridNode {\r\n return {\r\n ...super.exportJSON(), \r\n type: this.getType(),\r\n attrs:this.__attrs,\r\n version: 1\r\n }\r\n }\r\n\r\n /\r\n 更新元素属性\r\n * @param el \r\n /\r\n updateElementAttr(el:HTMLElement){\r\n // 更新属性\r\n Object.keys(this.__attrs).forEach((key:any)=>{\r\n if([\"class\",\"overflowX\"].indexOf(key) < 0){\r\n el.style[key] = (this.__attrs as any)[key];\r\n }\r\n })\r\n }\r\n\r\n /\r\n 获取标识类\r\n * @returns \r\n /\r\n getMarkClassName(): string {\r\n return `mk-doc__${this.getType()}`\r\n }\r\n\r\n /\r\n 导出DOM\r\n * @returns \r\n /\r\n exportDOM(): DOMExportOutput {\r\n \r\n const element = document.createElement('div')\r\n\r\n this.updateElementAttr(element);\r\n\r\n ~~// 移除老标识\r~~\~~n let extraClassName = GridNode.getExtraClassName(element);\~~r\n\r\n ~~if(extraClassName != this.__attrs.class){\r\n\r\n if(extraClassName){\r\n element.classList.remove(extraClassName);\r\n }\r\n\r\n~~ // ~~添加样式\r\n if (this.__attrs.class) {\r\n element.classList.add(this.__attrs.class);\r\n }\r\n }\r\n\r\n //~~ 标识格子\r\n if (!element.classList.contains(GridNode.getMarkClassName())) {\r\n element.classList.add(GridNode.getMarkClassName());\r\n }\r\n\r\n // 标识指定\r\n if (!element.classList.contains(this.getMarkClassName())) {\r\n element.classList.add(this.getMarkClassName());\r\n }\r\n\r\n return { element }\r\n }\r\n\r\n /\r\n 创建渲染DOM\r\n * @param config \r\n * @returns \r\n /\r\n createDOM(config: EditorConfig): HTMLElement {\r\n\r\n const el = this.exportDOM().element as HTMLElement;\r\n\r\n el.setAttribute(\"node-key\",this.__key)\r\n\r\n return el;\r\n }\r\n\r\n /\r\n 更新DOM\r\n * @param prevNode \r\n * @param dom \r\n * @param config \r\n * @returns \r\n /\r\n updateDOM(prevNode: GridNode, el: HTMLElement, config: EditorConfig): boolean {\r\n // 更新属性\r\n \r\n this.updateElementAttr(el);\r\n\r\n // 移除老标识\r\n let extraClassName = GridNode.getExtraClassName(el).replace(this.getMarkClassName(),\"\").trim();\r\n\r\n if(extraClassName != this.__attrs.class){\r\n\r\n if(extraClassName){\r\n el.classList.remove(extraClassName);\r\n }\r\n\r\n if (this.__attrs.class) {\r\n el.classList.add(this.__attrs.class);\r\n }\r\n }\r\n return false\r\n }\r\n\r\n /\r\n 非内联\r\n * @returns \r\n /\r\n isInline(): boolean {\r\n return false;\r\n }\r\n}\r\n\r\n/\r\n 是否是格子\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isGridNode(\r\n node: GridNode \| LexicalNode \| null \| undefined,\r\n): node is GridNode {\r\n return node instanceof GridNode\r\n}\r\n\r\n"],"names":[],"mappings":";;;;AA4BO,MAAM,iBAAiB,YAAW;AAAA,EAqDvC,YAAY,OAAuB,KAAe;AAChD,UAAM,GAAG;AApDX;AAqDE,SAAK,UAAU;AAAA,EACjB;AAAA,EApDA,OAAO,UAAkB;AAAS,WAAA;AAAA,EAAQ;AAAA,EAE1C,OAAO,qBAAqB,IAAgC;AAC1D,WAAO,GAAG,UAAU,SAAS,SAAS,kBAAkB,IAAI,KAAK;AAAA,EACnE;AAAA,EAEA,OAAO,mBAA2B;AACzB,WAAA,WAAW,SAAS,QAAA,CAAS;AAAA,EACtC;AAAA,EAEA,OAAO,kBAAkB,IAAe;AAC/B,WAAA,GAAG,UAAU,QAAQ,SAAS,oBAAmB,EAAE,EAAE;EAC9D;AAAA,EAEA,OAAO,MAAM,MAA0B;AAErC,WAAO,IAAI,SAAS,KAAK,SAAQ,KAAK,KAAK;AAAA,EAC7C;AAAA,EAEA,OAAO,WAAW,gBAA8C;AACvD,WAAA,IAAI,SAAS,eAAe,KAAK;AAAA,EAC1C;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAM,CAAC,YAAyB;AAEvB,eAAA,SAAS,qBAAqB,OAAO,IAAI;AAAA,UAE9C,YAAY,MAAI;AAEN,mBAAA;AAAA,cAEP,MAAK,IAAI,SAAS;AAAA,gBACf,OAAM,SAAS,kBAAkB,OAAO;AAAA,gBACxC,OAAM,QAAQ,MAAM,SAAS;AAAA,gBAC7B,QAAO,QAAQ,MAAM;AAAA,gBACrB,MAAK,QAAQ,MAAM;AAAA,gBACnB,UAAS,QAAQ,MAAM;AAAA,gBACvB,WAAU,QAAQ,MAAM;AAAA,cAAA,CACL;AAAA,YAAA;AAAA,UAEzB;AAAA,UACA,UAAU;AAAA,QACR,IAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,SAAS,MAAuB;AACxB,UAAA,WAAW,KAAK;AACf,WAAA,OAAO,SAAS,SAAQ,IAAI;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAA2B;AACzB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,aAAiC;AACxB,WAAA;AAAA,MACL,GAAG,MAAM,WAAW;AAAA,MACpB,MAAM,KAAK,QAAQ;AAAA,MACnB,OAAM,KAAK;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,kBAAkB,IAAe;AAE/B,WAAO,KAAK,KAAK,OAAO,EAAE,QAAQ,CAAC,QAAU;AAC3C,UAAG,CAAC,SAAQ,WAAW,EAAE,QAAQ,GAAG,IAAI,GAAE;AACxC,WAAG,MAAM,GAAG,IAAK,KAAK,QAAgB,GAAG;AAAA,MAC3C;AAAA,IAAA,CACD;~~AAAA~~,~~EACH;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,mBAA2B;AAClB,WAAA,WAAW,KAAK,~~QAAA,~~CAAS;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAA6B;AAErB,UAAA,UAAU,SAAS,cAAc,KAAK;AAE5C,SAAK,kBAAkB,OAAO;AAG1B,QAAA,~~iBAAiB,SAAS,kBAAkB,~~OAAO~~;~~AAEpD~~,QAAA,kBAAkB,KAAK,QAAQ,OAAM;AAEtC,UAAG,gBAAe;~~AACR~~,~~gBAAA~~,UAAU,OAAO,cAAc;AAAA,~~MACzC~~;AAGI,UAAA,KAAK,QAAQ,OAAO;AACtB,~~gBAAQ~~,UAAU,IAAI,KAAK,QAAQ,KAAK;AAAA,~~MAC1C~~;AAAA,IACF;~~AAGA~~,QAAI,CAAC,QAAQ,UAAU,SAAS,SAAS,iBAAA,CAAkB,GAAG;AAC5D,cAAQ,UAAU,IAAI,SAAS,iBAAkB,CAAA;AAAA,IACnD;AAGA,QAAI,CAAC,QAAQ,UAAU,SAAS,KAAK,iBAAA,CAAkB,GAAG;AACxD,cAAQ,UAAU,IAAI,KAAK,iBAAkB,CAAA;AAAA,IAC/C;AAEA,WAAO,EAAE,QAAQ;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,UAAU,QAAmC;AAErC,UAAA,KAAK,KAAK,UAAA,EAAY;AAEzB,OAAA,aAAa,YAAW,KAAK,KAAK;AAE9B,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,UAAU,UAAoB,IAAiB,QAA+B;AAG5E,SAAK,kBAAkB,EAAE;AAGrB,QAAA,iBAAiB,SAAS,kBAAkB,EAAE,EAAE,QAAQ,KAAK,iBAAiB,GAAE,EAAE,EAAE,KAAK;AAE1F,QAAA,kBAAkB,KAAK,QAAQ,OAAM;AAEtC,UAAG,gBAAe;AACb,WAAA,UAAU,OAAO,cAAc;AAAA,MACpC;AAEI,UAAA,KAAK,QAAQ,OAAO;AACtB,WAAG,UAAU,IAAI,KAAK,QAAQ,KAAK;AAAA,MACrC;AAAA,IACF;AACO,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAoB;AACX,WAAA;AAAA,EACT;AACF;AAOO,SAAS,YACd,MACkB;AAClB,SAAO,gBAAgB;AACzB;"}
1	+ {"version":3,"file":"GridNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/GridNode.ts"],"sourcesContent":["\r\n\r\n\r\n\r\n\r\nimport type { DOMConversionMap, SerializedElementNode, LexicalNode, NodeKey, Spread,EditorConfig, DOMExportOutput } from 'lexical'\r\nimport { ElementNode } from 'lexical'\r\n\r\n/*\r\n 容器属性\r\n /\r\nexport type GridNodeAttrType = {\r\n class:string,\r\n width:string,\r\n height:string,\r\n maxWidth:string,\r\n maxHeight:string,\r\n flex:string\r\n};\r\n\r\n/\r\n 节点序列化 \r\n /\r\nexport type SerializedGridNode = Spread<{ attrs:GridNodeAttrType },SerializedElementNode>\r\n\r\n/\r\n 格子\r\n /\r\nexport class GridNode extends ElementNode{\r\n\r\n __attrs:GridNodeAttrType\r\n\r\n static getType(): string { return \"grid\"; }\r\n\r\n static hasGridNodeByElement(el:HTMLElement):HTMLElement\|null{\r\n return el.classList.contains(GridNode.getMarkClassName()) ? el : null;\r\n }\r\n\r\n static getMarkClassName(): string {\r\n return `mk-doc__${GridNode.getType()}`\r\n }\r\n\r\n static getExtraClassName(el:HTMLElement){\r\n return el.className.replace(GridNode.getMarkClassName(),\"\").trim();\r\n }\r\n\r\n static clone(node: GridNode): GridNode {\r\n \r\n return new GridNode(node.__attrs,node.__key)\r\n }\r\n\r\n static importJSON(serializedNode: SerializedGridNode): GridNode {\r\n return new GridNode(serializedNode.attrs)\r\n }\r\n\r\n static importDOM(): DOMConversionMap \| null {\r\n return {\r\n div : (domNode: HTMLElement) => {\r\n\r\n return GridNode.hasGridNodeByElement(domNode) ? {\r\n\r\n conversion: ()=>{ \r\n\r\n return { \r\n\r\n node:new GridNode({\r\n class:GridNode.getExtraClassName(domNode),\r\n width:domNode.style.width \|\| \"100%\",\r\n height:domNode.style.height,\r\n flex:domNode.style.flex,\r\n maxWidth:domNode.style.maxWidth,\r\n maxHeight:domNode.style.maxHeight\r\n } as GridNodeAttrType) \r\n };\r\n },\r\n priority: 1\r\n } : null;\r\n }\r\n }\r\n }\r\n\r\n constructor(attrs:GridNodeAttrType,key?: NodeKey) {\r\n super(key)\r\n this.__attrs = attrs;\r\n }\r\n\r\n /\r\n 设置属性\r\n * @param pos \r\n /\r\n setAttrs(data?:GridNodeAttrType){\r\n const writable = this.getWritable();\r\n Object.assign(writable.__attrs,data)\r\n }\r\n\r\n /\r\n 获取属性\r\n * @param pos \r\n /\r\n getAttrs():GridNodeAttrType{\r\n return this.__attrs;\r\n }\r\n\r\n /\r\n 导出JSON\r\n * @returns \r\n /\r\n exportJSON(): SerializedGridNode {\r\n return {\r\n ...super.exportJSON(), \r\n type: this.getType(),\r\n attrs:this.__attrs,\r\n version: 1\r\n }\r\n }\r\n\r\n /\r\n 更新元素属性\r\n * @param el \r\n /\r\n updateElementAttr(el:HTMLElement){\r\n // 更新属性\r\n Object.keys(this.__attrs).forEach((key:any)=>{\r\n if([\"class\",\"overflowX\"].indexOf(key) < 0){\r\n el.style[key] = (this.__attrs as any)[key];\r\n }\r\n })\r\n // 移除老标识\r\n let extraClassName = GridNode.getExtraClassName(el);\r\n\r\n if(extraClassName != this.__attrs.class){\r\n\r\n if(extraClassName){\r\n el.classList.remove(extraClassName);\r\n }\r\n\r\n // 添加样式\r\n if (this.__attrs.class) {\r\n el.classList.add(this.__attrs.class);\r\n }\r\n }\r\n }\r\n\r\n /\r\n 获取标识类\r\n * @returns \r\n /\r\n getMarkClassName(): string {\r\n return `mk-doc__${this.getType()}`\r\n }\r\n\r\n /\r\n 导出DOM\r\n * @returns \r\n /\r\n exportDOM(): DOMExportOutput {\r\n \r\n const element = document.createElement('div')\r\n\r\n this.updateElementAttr(element);\r\n\r\n \r\n\r\n // 标识格子\r\n if (!element.classList.contains(GridNode.getMarkClassName())) {\r\n element.classList.add(GridNode.getMarkClassName());\r\n }\r\n\r\n // 标识指定\r\n if (!element.classList.contains(this.getMarkClassName())) {\r\n element.classList.add(this.getMarkClassName());\r\n }\r\n\r\n return { element }\r\n }\r\n\r\n /\r\n 创建渲染DOM\r\n * @param config \r\n * @returns \r\n /\r\n createDOM(config: EditorConfig): HTMLElement {\r\n\r\n const el = this.exportDOM().element as HTMLElement;\r\n\r\n el.setAttribute(\"node-key\",this.__key)\r\n\r\n return el;\r\n }\r\n\r\n /\r\n 更新DOM\r\n * @param prevNode \r\n * @param dom \r\n * @param config \r\n * @returns \r\n /\r\n updateDOM(prevNode: GridNode, el: HTMLElement, config: EditorConfig): boolean {\r\n // 更新属性\r\n \r\n this.updateElementAttr(el);\r\n\r\n // 移除老标识\r\n let extraClassName = GridNode.getExtraClassName(el).replace(this.getMarkClassName(),\"\").trim();\r\n\r\n if(extraClassName != this.__attrs.class){\r\n\r\n if(extraClassName){\r\n el.classList.remove(extraClassName);\r\n }\r\n\r\n if (this.__attrs.class) {\r\n el.classList.add(this.__attrs.class);\r\n }\r\n }\r\n return false\r\n }\r\n\r\n /\r\n 非内联\r\n * @returns \r\n /\r\n isInline(): boolean {\r\n return false;\r\n }\r\n}\r\n\r\n/\r\n 是否是格子\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isGridNode(\r\n node: GridNode \| LexicalNode \| null \| undefined,\r\n): node is GridNode {\r\n return node instanceof GridNode\r\n}\r\n\r\n"],"names":[],"mappings":"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"}

package/dist/esm/components/basic/doc-editor/plugins/GridPlugin/ModuleGridNode.js CHANGED Viewed

@@ -77,7 +77,6 @@ class ModuleGridNode extends GridNode {
   * @param el
   */
   updateElementAttr(el) {
-    super.updateElementAttr(el);
     Object.keys(this.__attrs).forEach((key) => {
       if (["class", "overflowX"].indexOf(key) < 0) {
         el.style[key] = this.__attrs[key];

package/dist/esm/components/basic/doc-editor/plugins/GridPlugin/ModuleGridNode.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ModuleGridNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/ModuleGridNode.ts"],"sourcesContent":["import { type DOMConversionMap,type NodeKey, type Spread, type DOMExportOutput, type LexicalCommand, createCommand, LexicalNode, EditorConfig } from 'lexical'\r\nimport { type GridNodeAttrType , GridNode,SerializedGridNode } from \"./GridNode\"\r\n\r\n/*\r\n 属性\r\n /\r\nexport type ModuleGridNodeAttrType = GridNodeAttrType & {\r\n overflowX:boolean\r\n};\r\n\r\n\r\n/\r\n 插入模块格子\r\n /\r\nexport const INSERT_MODULEGRID_COMMAND: LexicalCommand<ModuleGridNodeAttrType> = createCommand('INSERT_MODULEGRID_COMMAND')\r\n\r\n\r\n/\r\n 节点序列化 \r\n /\r\nexport type SerializedModuleGridNode = Spread<{ attrs:ModuleGridNodeAttrType },SerializedGridNode>\r\n\r\n/\r\n 模块格子\r\n /\r\nexport class ModuleGridNode extends GridNode{\r\n\r\n declare __attrs:ModuleGridNodeAttrType\r\n\r\n static getType(): string { return \"module-grid\"; }\r\n\r\n static hasGridNodeByElement(el:HTMLElement):HTMLElement\|null{\r\n return el.classList.contains(ModuleGridNode.getMarkClassName()) ? el : null;\r\n }\r\n \r\n static getMarkClassName(): string {\r\n return `mk-doc__${ModuleGridNode.getType()}`\r\n }\r\n static getExtraClassName(el:HTMLElement){\r\n return GridNode.getExtraClassName(el).replace(ModuleGridNode.getMarkClassName(),\"\").trim();\r\n }\r\n static clone(node: ModuleGridNode): ModuleGridNode {\r\n return new ModuleGridNode(node.__attrs,node.__key)\r\n }\r\n\r\n static importJSON(serializedNode: SerializedModuleGridNode): ModuleGridNode {\r\n return new ModuleGridNode(serializedNode.attrs)\r\n }\r\n\r\n static importDOM(): DOMConversionMap \| null {\r\n return {\r\n div : (domNode: HTMLElement) => {\r\n\r\n return ModuleGridNode.hasGridNodeByElement(domNode) ? {\r\n\r\n conversion: ()=>{ \r\n\r\n return { \r\n node:new ModuleGridNode({\r\n class:ModuleGridNode.getExtraClassName(domNode),\r\n width:domNode.style.width \|\| \"100%\",\r\n height:domNode.style.height,\r\n flex:domNode.style.flex,\r\n maxWidth:domNode.style.maxWidth,\r\n maxHeight:domNode.style.maxHeight,\r\n overflowX:domNode.style.overflowX == \"auto\"\r\n } as ModuleGridNodeAttrType) \r\n };\r\n },\r\n priority: 4\r\n } : null;\r\n }\r\n }\r\n }\r\n\r\n constructor(attrs:ModuleGridNodeAttrType,key?: NodeKey) {\r\n super(attrs,key)\r\n }\r\n\r\n /\r\n 设置属性\r\n * @param pos \r\n /\r\n setAttrs(data?:ModuleGridNodeAttrType){\r\n const writable = this.getWritable();\r\n Object.assign(writable.__attrs,data)\r\n }\r\n\r\n /\r\n 获取属性\r\n * @param pos \r\n /\r\n getAttrs():ModuleGridNodeAttrType{\r\n return this.__attrs;\r\n }\r\n /\r\n 导出JSON\r\n * @returns \r\n /\r\n exportJSON(): SerializedGridNode {\r\n return {\r\n ...super.exportJSON(),\r\n type: this.getType(),\r\n attrs:this.__attrs,\r\n version: 1\r\n }\r\n }\r\n\r\n /\r\n 更新元素属性\r\n * @param el \r\n /\r\n updateElementAttr(el:HTMLElement){\r\n ~~super.updateElementAttr(el);\r\n~~ // 更新属性\r\n Object.keys(this.__attrs).forEach((key:any)=>{\r\n if([\"class\",\"overflowX\"].indexOf(key) < 0){\r\n el.style[key] = (this.__attrs as any)[key];\r\n }\r\n })\r\n if(this.__attrs.overflowX){\r\n el.style.overflowX = \"auto\";\r\n el.style.whiteSpace = \"nowrap\";\r\n }\r\n else{\r\n el.style.overflowX = \"\";\r\n el.style.whiteSpace = \"\";\r\n }\r\n }\r\n\r\n /\r\n 创建渲染DOM\r\n * @param config \r\n * @returns \r\n /\r\n createDOM(config: EditorConfig): HTMLElement {\r\n\r\n const el = super.createDOM(config);\r\n\r\n el.setAttribute(\"contenteditable\",\"false\")\r\n el.setAttribute(\"data-lexical-decorator\",\"true\")\r\n\r\n return el;\r\n }\r\n \r\n // /\r\n // 非内联\r\n // * @returns \r\n // /\r\n // isInline(): boolean {\r\n // return false;\r\n // }\r\n\r\n // /\r\n // 定义为影子根\r\n // * @returns \r\n // /\r\n // isShadowRoot(): boolean {\r\n // return true;\r\n // }\r\n}\r\n\r\n/\r\n 是否是模块格子\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isModuleGridNode(\r\n node: ModuleGridNode \| LexicalNode \| null \| undefined,\r\n): node is ModuleGridNode {\r\n return node instanceof ModuleGridNode\r\n}\r\n"],"names":[],"mappings":";;AAca,MAAA,4BAAoE,cAAc,2BAA2B;AAWnH,MAAM,uBAAuB,SAAQ;AAAA,EAI1C,OAAO,UAAkB;AAAS,WAAA;AAAA,EAAe;AAAA,EAEjD,OAAO,qBAAqB,IAAgC;AAC1D,WAAO,GAAG,UAAU,SAAS,eAAe,kBAAkB,IAAI,KAAK;AAAA,EACzE;AAAA,EAEA,OAAO,mBAA2B;AACzB,WAAA,WAAW,eAAe,QAAA,CAAS;AAAA,EAC5C;AAAA,EACA,OAAO,kBAAkB,IAAe;AAC/B,WAAA,SAAS,kBAAkB,EAAE,EAAE,QAAQ,eAAe,oBAAmB,EAAE,EAAE;EACtF;AAAA,EACA,OAAO,MAAM,MAAsC;AACjD,WAAO,IAAI,eAAe,KAAK,SAAQ,KAAK,KAAK;AAAA,EACnD;AAAA,EAEA,OAAO,WAAW,gBAA0D;AACnE,WAAA,IAAI,eAAe,eAAe,KAAK;AAAA,EAChD;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAM,CAAC,YAAyB;AAEtB,eAAA,eAAe,qBAAqB,OAAO,IAAI;AAAA,UAErD,YAAY,MAAI;AAEN,mBAAA;AAAA,cACN,MAAK,IAAI,eAAe;AAAA,gBACtB,OAAM,eAAe,kBAAkB,OAAO;AAAA,gBAC9C,OAAM,QAAQ,MAAM,SAAS;AAAA,gBAC7B,QAAO,QAAQ,MAAM;AAAA,gBACrB,MAAK,QAAQ,MAAM;AAAA,gBACnB,UAAS,QAAQ,MAAM;AAAA,gBACvB,WAAU,QAAQ,MAAM;AAAA,gBACxB,WAAU,QAAQ,MAAM,aAAa;AAAA,cAAA,CACZ;AAAA,YAAA;AAAA,UAE/B;AAAA,UACA,UAAU;AAAA,QACR,IAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,YAAY,OAA6B,KAAe;AACtD,UAAM,OAAM,GAAG;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,SAAS,MAA6B;AAC9B,UAAA,WAAW,KAAK;AACf,WAAA,OAAO,SAAS,SAAQ,IAAI;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAiC;AAC/B,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAKA,aAAiC;AACxB,WAAA;AAAA,MACL,GAAG,MAAM,WAAW;AAAA,MACpB,MAAM,KAAK,QAAQ;AAAA,MACnB,OAAM,KAAK;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,kBAAkB,IAAe;~~AAC~~/B,~~UAAM,kBAAkB,EAAE;AAE1B,~~WAAO,KAAK,KAAK,OAAO,EAAE,QAAQ,CAAC,QAAU;AAC3C,UAAG,CAAC,SAAQ,WAAW,EAAE,QAAQ,GAAG,IAAI,GAAE;AACxC,WAAG,MAAM,GAAG,IAAK,KAAK,QAAgB,GAAG;AAAA,MAC3C;AAAA,IAAA,CACD;AACE,QAAA,KAAK,QAAQ,WAAU;AACxB,SAAG,MAAM,YAAY;AACrB,SAAG,MAAM,aAAa;AAAA,IAAA,OAEpB;AACF,SAAG,MAAM,YAAY;AACrB,SAAG,MAAM,aAAa;AAAA,IACxB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOC,UAAU,QAAmC;AAEtC,UAAA,KAAK,MAAM,UAAU,MAAM;AAE9B,OAAA,aAAa,mBAAkB,OAAO;AACtC,OAAA,aAAa,0BAAyB,MAAM;AAExC,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBF;AAOO,SAAS,kBACd,MACwB;AACxB,SAAO,gBAAgB;AACzB;"}
1	+ {"version":3,"file":"ModuleGridNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/ModuleGridNode.ts"],"sourcesContent":["import { type DOMConversionMap,type NodeKey, type Spread, type DOMExportOutput, type LexicalCommand, createCommand, LexicalNode, EditorConfig } from 'lexical'\r\nimport { type GridNodeAttrType , GridNode,SerializedGridNode } from \"./GridNode\"\r\n\r\n/*\r\n 属性\r\n /\r\nexport type ModuleGridNodeAttrType = GridNodeAttrType & {\r\n overflowX:boolean\r\n};\r\n\r\n\r\n/\r\n 插入模块格子\r\n /\r\nexport const INSERT_MODULEGRID_COMMAND: LexicalCommand<ModuleGridNodeAttrType> = createCommand('INSERT_MODULEGRID_COMMAND')\r\n\r\n\r\n/\r\n 节点序列化 \r\n /\r\nexport type SerializedModuleGridNode = Spread<{ attrs:ModuleGridNodeAttrType },SerializedGridNode>\r\n\r\n/\r\n 模块格子\r\n /\r\nexport class ModuleGridNode extends GridNode{\r\n\r\n declare __attrs:ModuleGridNodeAttrType\r\n\r\n static getType(): string { return \"module-grid\"; }\r\n\r\n static hasGridNodeByElement(el:HTMLElement):HTMLElement\|null{\r\n return el.classList.contains(ModuleGridNode.getMarkClassName()) ? el : null;\r\n }\r\n \r\n static getMarkClassName(): string {\r\n return `mk-doc__${ModuleGridNode.getType()}`\r\n }\r\n static getExtraClassName(el:HTMLElement){\r\n return GridNode.getExtraClassName(el).replace(ModuleGridNode.getMarkClassName(),\"\").trim();\r\n }\r\n static clone(node: ModuleGridNode): ModuleGridNode {\r\n return new ModuleGridNode(node.__attrs,node.__key)\r\n }\r\n\r\n static importJSON(serializedNode: SerializedModuleGridNode): ModuleGridNode {\r\n return new ModuleGridNode(serializedNode.attrs)\r\n }\r\n\r\n static importDOM(): DOMConversionMap \| null {\r\n return {\r\n div : (domNode: HTMLElement) => {\r\n\r\n return ModuleGridNode.hasGridNodeByElement(domNode) ? {\r\n\r\n conversion: ()=>{ \r\n\r\n return { \r\n node:new ModuleGridNode({\r\n class:ModuleGridNode.getExtraClassName(domNode),\r\n width:domNode.style.width \|\| \"100%\",\r\n height:domNode.style.height,\r\n flex:domNode.style.flex,\r\n maxWidth:domNode.style.maxWidth,\r\n maxHeight:domNode.style.maxHeight,\r\n overflowX:domNode.style.overflowX == \"auto\"\r\n } as ModuleGridNodeAttrType) \r\n };\r\n },\r\n priority: 4\r\n } : null;\r\n }\r\n }\r\n }\r\n\r\n constructor(attrs:ModuleGridNodeAttrType,key?: NodeKey) {\r\n super(attrs,key)\r\n }\r\n\r\n /\r\n 设置属性\r\n * @param pos \r\n /\r\n setAttrs(data?:ModuleGridNodeAttrType){\r\n const writable = this.getWritable();\r\n Object.assign(writable.__attrs,data)\r\n }\r\n\r\n /\r\n 获取属性\r\n * @param pos \r\n /\r\n getAttrs():ModuleGridNodeAttrType{\r\n return this.__attrs;\r\n }\r\n /\r\n 导出JSON\r\n * @returns \r\n /\r\n exportJSON(): SerializedGridNode {\r\n return {\r\n ...super.exportJSON(),\r\n type: this.getType(),\r\n attrs:this.__attrs,\r\n version: 1\r\n }\r\n }\r\n\r\n /\r\n 更新元素属性\r\n * @param el \r\n /\r\n updateElementAttr(el:HTMLElement){\r\n // 更新属性\r\n Object.keys(this.__attrs).forEach((key:any)=>{\r\n if([\"class\",\"overflowX\"].indexOf(key) < 0){\r\n el.style[key] = (this.__attrs as any)[key];\r\n }\r\n })\r\n if(this.__attrs.overflowX){\r\n el.style.overflowX = \"auto\";\r\n el.style.whiteSpace = \"nowrap\";\r\n }\r\n else{\r\n el.style.overflowX = \"\";\r\n el.style.whiteSpace = \"\";\r\n }\r\n }\r\n\r\n /\r\n 创建渲染DOM\r\n * @param config \r\n * @returns \r\n /\r\n createDOM(config: EditorConfig): HTMLElement {\r\n\r\n const el = super.createDOM(config);\r\n\r\n el.setAttribute(\"contenteditable\",\"false\")\r\n el.setAttribute(\"data-lexical-decorator\",\"true\")\r\n\r\n return el;\r\n }\r\n \r\n // /\r\n // 非内联\r\n // * @returns \r\n // /\r\n // isInline(): boolean {\r\n // return false;\r\n // }\r\n\r\n // /\r\n // 定义为影子根\r\n // * @returns \r\n // /\r\n // isShadowRoot(): boolean {\r\n // return true;\r\n // }\r\n}\r\n\r\n/\r\n 是否是模块格子\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isModuleGridNode(\r\n node: ModuleGridNode \| LexicalNode \| null \| undefined,\r\n): node is ModuleGridNode {\r\n return node instanceof ModuleGridNode\r\n}\r\n"],"names":[],"mappings":";;AAca,MAAA,4BAAoE,cAAc,2BAA2B;AAWnH,MAAM,uBAAuB,SAAQ;AAAA,EAI1C,OAAO,UAAkB;AAAS,WAAA;AAAA,EAAe;AAAA,EAEjD,OAAO,qBAAqB,IAAgC;AAC1D,WAAO,GAAG,UAAU,SAAS,eAAe,kBAAkB,IAAI,KAAK;AAAA,EACzE;AAAA,EAEA,OAAO,mBAA2B;AACzB,WAAA,WAAW,eAAe,QAAA,CAAS;AAAA,EAC5C;AAAA,EACA,OAAO,kBAAkB,IAAe;AAC/B,WAAA,SAAS,kBAAkB,EAAE,EAAE,QAAQ,eAAe,oBAAmB,EAAE,EAAE;EACtF;AAAA,EACA,OAAO,MAAM,MAAsC;AACjD,WAAO,IAAI,eAAe,KAAK,SAAQ,KAAK,KAAK;AAAA,EACnD;AAAA,EAEA,OAAO,WAAW,gBAA0D;AACnE,WAAA,IAAI,eAAe,eAAe,KAAK;AAAA,EAChD;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAM,CAAC,YAAyB;AAEtB,eAAA,eAAe,qBAAqB,OAAO,IAAI;AAAA,UAErD,YAAY,MAAI;AAEN,mBAAA;AAAA,cACN,MAAK,IAAI,eAAe;AAAA,gBACtB,OAAM,eAAe,kBAAkB,OAAO;AAAA,gBAC9C,OAAM,QAAQ,MAAM,SAAS;AAAA,gBAC7B,QAAO,QAAQ,MAAM;AAAA,gBACrB,MAAK,QAAQ,MAAM;AAAA,gBACnB,UAAS,QAAQ,MAAM;AAAA,gBACvB,WAAU,QAAQ,MAAM;AAAA,gBACxB,WAAU,QAAQ,MAAM,aAAa;AAAA,cAAA,CACZ;AAAA,YAAA;AAAA,UAE/B;AAAA,UACA,UAAU;AAAA,QACR,IAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,YAAY,OAA6B,KAAe;AACtD,UAAM,OAAM,GAAG;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,SAAS,MAA6B;AAC9B,UAAA,WAAW,KAAK;AACf,WAAA,OAAO,SAAS,SAAQ,IAAI;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAiC;AAC/B,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAKA,aAAiC;AACxB,WAAA;AAAA,MACL,GAAG,MAAM,WAAW;AAAA,MACpB,MAAM,KAAK,QAAQ;AAAA,MACnB,OAAM,KAAK;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,kBAAkB,IAAe;AAE/B,WAAO,KAAK,KAAK,OAAO,EAAE,QAAQ,CAAC,QAAU;AAC3C,UAAG,CAAC,SAAQ,WAAW,EAAE,QAAQ,GAAG,IAAI,GAAE;AACxC,WAAG,MAAM,GAAG,IAAK,KAAK,QAAgB,GAAG;AAAA,MAC3C;AAAA,IAAA,CACD;AACE,QAAA,KAAK,QAAQ,WAAU;AACxB,SAAG,MAAM,YAAY;AACrB,SAAG,MAAM,aAAa;AAAA,IAAA,OAEpB;AACF,SAAG,MAAM,YAAY;AACrB,SAAG,MAAM,aAAa;AAAA,IACxB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOC,UAAU,QAAmC;AAEtC,UAAA,KAAK,MAAM,UAAU,MAAM;AAE9B,OAAA,aAAa,mBAAkB,OAAO;AACtC,OAAA,aAAa,0BAAyB,MAAM;AAExC,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBF;AAOO,SAAS,kBACd,MACwB;AACxB,SAAO,gBAAgB;AACzB;"}

package/dist/esm/components/basic/doc-editor/plugins/GridPlugin/index.vue.js CHANGED Viewed

@@ -62,6 +62,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       if (el != null && el.parentElement != null && TextGridNode.hasGridNodeByElement(el) && ImageTextGridNode.hasGridNodeByElement(el.parentElement)) {
         return el.parentElement;
+      } else if (el != null && el.parentElement != null && ModuleGridNode.hasGridNodeByElement(el.parentElement)) {
+        return el.parentElement;
       }
       return el;
     };

package/dist/esm/components/basic/doc-editor/plugins/GridPlugin/index.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { useLexicalComposer } from 'lexical-vue'\r\nimport { $insertNodeToNearestRoot,mergeRegister } from '@lexical/utils'\r\nimport { \r\n $getNodeByKey,$createParagraphNode,$isNodeSelection, $getSelection,\r\n ElementNode,COMMAND_PRIORITY_EDITOR\r\n} from 'lexical'\r\nimport { onMounted, onUnmounted,ref } from 'vue'\r\nimport { registerDocEditorToolbarExtend,type ToolbarExtendPlugin } from \"../../core\"\r\nimport { GridNode,$isGridNode } from \"./GridNode\"\r\nimport { type LayoutGridNodeAttrType,LayoutGridNode,INSERT_LAYOUTGRID_COMMAND } from \"./LayoutGridNode\"\r\nimport { type TextGridNodeAttrType,TextGridNode,INSERT_TEXTGRID_COMMAND } from \"./TextGridNode\"\r\nimport { type ImageTextGridNodeAttrType,ImageTextGridNode,INSERT_IMAGETEXTGRID_COMMAND } from \"./ImageTextGridNode\"\r\nimport { type ModuleGridNodeAttrType,ModuleGridNode,INSERT_MODULEGRID_COMMAND,$isModuleGridNode } from \"./ModuleGridNode\"\r\nimport { INSERT_MODULE_COMMAND } from \"../ModulePlugin/commands\"\r\nimport { showModuleSelectDialog } from \"../ModulePlugin/utils\"\r\nimport { ModuleType,useModule } from \"../ModulePlugin/composables\"\r\nimport { ImageAttrType,InlineImageNode } from '../ImagePlugin'\r\nimport { useElementBlockSelection } from '../../core'\r\nimport { createDefaultFormData } from \"../../../dynamic-form-panel/utils\"\r\nimport { showGridEditDialoger } from \"./utils\"\r\n\r\n// 编辑器\r\nconst editor = useLexicalComposer()\r\n\r\n// 注册到工具条\r\nregisterDocEditorToolbarExtend({\r\n icon:\"richtext-outline\",\r\n text:\"图文环绕\",\r\n action:async ()=>{\r\n editor.dispatchCommand(INSERT_IMAGETEXTGRID_COMMAND,{ width:\"100%\" } as ImageTextGridNodeAttrType)\r\n },\r\n sort:80\r\n} as ToolbarExtendPlugin)\r\nregisterDocEditorToolbarExtend({\r\n icon:\"Grid\",\r\n text:\"文本容器\",\r\n action:async ()=>{\r\n editor.dispatchCommand(INSERT_TEXTGRID_COMMAND,{ width:\"100%\" } as TextGridNodeAttrType)\r\n },\r\n sort:81\r\n} as ToolbarExtendPlugin)\r\nregisterDocEditorToolbarExtend({\r\n icon:\"Grid\",\r\n text:\"模块容器\",\r\n action:async ()=>{\r\n editor.dispatchCommand(INSERT_MODULEGRID_COMMAND,{ width:\"100%\" } as ModuleGridNodeAttrType)\r\n },\r\n sort:70\r\n} as ToolbarExtendPlugin)\r\nregisterDocEditorToolbarExtend({\r\n icon:\"Grid\",\r\n text:\"布局容器\",\r\n action:async ()=>{\r\n editor.dispatchCommand(INSERT_LAYOUTGRID_COMMAND,{ display:\"flex\",width:\"100%\" } as LayoutGridNodeAttrType)\r\n },\r\n sort:1\r\n} as ToolbarExtendPlugin)\r\n\r\n// 当前激活的元素\r\nlet curActiveEl:HTMLElement\|null = null;\r\n// 找格子\r\nconst findGridNodeEl = (element:HTMLElement):HTMLElement\|null => {\r\n\r\n var el:HTMLElement\|null = element\r\n\r\n if(GridNode.hasGridNodeByElement(el)){\r\n return el;\r\n }\r\n\r\n while (el != null && !GridNode.hasGridNodeByElement(el)) {\r\n el = el.parentElement;\r\n }\r\n\r\n // 文本环绕的文本框不做激活处理\r\n if(el != null && el.parentElement != null && TextGridNode.hasGridNodeByElement(el) && ImageTextGridNode.hasGridNodeByElement(el.parentElement)){\r\n return el.parentElement;\r\n }\r\n\r\n return el;\r\n}\r\n// 设置激活\r\nconst setActiveGridElement = (el:HTMLElement\|null)=>{\r\n // 激活对应的格子\r\n if(el){\r\n el.classList.add(\"doc-edit-active\")\r\n if(curActiveEl && curActiveEl != el){\r\n curActiveEl.classList.remove(\"doc-edit-active\")\r\n }\r\n curActiveEl = el;\r\n }\r\n else{\r\n curActiveEl && curActiveEl.classList.remove(\"doc-edit-active\")\r\n curActiveEl = null;\r\n }\r\n}\r\n// 使用元素模块集成了模块选中删除以及工具条\r\nconst { isSelected, curSelectKey, curSelectPos,setSelection } = useElementBlockSelection((el)=>{\r\n\r\n\r\n // 设置激活\r\n setActiveGridElement(findGridNodeEl(el));\r\n\r\n // 文本环绕的文本框不做选中处理\r\n if(el != null && el.parentElement != null && TextGridNode.hasGridNodeByElement(el) && ImageTextGridNode.hasGridNodeByElement(el.parentElement)){\r\n return el.parentElement;\r\n }\r\n\r\n\r\n return GridNode.hasGridNodeByElement(el);\r\n},()=>{\r\n \r\n const node = $getNodeByKey(curSelectKey.value)\r\n \r\n if($isGridNode(node)){\r\n\r\n const parent = node.getParent() as ElementNode\r\n\r\n const toolbars = [\r\n {\r\n title:`编辑容器`,icon:\"Edit\",action:async ()=>{\r\n\r\n var result = await showGridEditDialoger(node,parent,node.getAttrs());\r\n \r\n editor.update(() => node.setAttrs(result as any))\r\n } \r\n },\r\n {\r\n title:`在此之前插入布局容器`,icon:\"BottomLeft\",action:async ()=>{\r\n editor.update(() => {\r\n node.insertBefore(new LayoutGridNode({ display:\"block\",width:\"100%\" } as any))\r\n })\r\n } \r\n },\r\n {\r\n title:`在此之后插入布局容器`,icon:\"BottomRight\",action:async ()=>{\r\n editor.update(() => {\r\n node.insertAfter(new LayoutGridNode({ display:\"block\",width:\"100%\" } as any))\r\n })\r\n } \r\n }\r\n ];\r\n\r\n // 有父亲\r\n if($isGridNode(parent)){\r\n toolbars.push(...[\r\n {\r\n title:\"选中上层容器\",icon:\"Upload\",action: async ()=> {\r\n let parentEl = editor.getElementByKey(parent.getKey());\r\n if(parentEl){\r\n setActiveGridElement(parentEl);\r\n setSelection(parent.__key,parentEl)\r\n }\r\n \r\n }\r\n }\r\n ])\r\n }\r\n\r\n // 模块容器\r\n if($isModuleGridNode(node)){\r\n toolbars.push(...[\r\n {\r\n title:\"添加模块\",icon:\"Plus\",action:async ()=>{\r\n // 打开模块面板\r\n const result = (await showModuleSelectDialog()) as ModuleType;\r\n const defaultData = createDefaultFormData(result.options);\r\n // 插入模块\r\n editor.dispatchCommand(INSERT_MODULE_COMMAND,{ name:result.name,data:defaultData})\r\n } \r\n }\r\n ])\r\n }\r\n\r\n return toolbars;\r\n }\r\n\r\n return null;\r\n})\r\n\r\n\r\nonMounted(() => {\r\n\r\n // 插入格子\r\n const insertGridHandle = (layoutGrid:GridNode)=>{\r\n const selection = $getSelection()\r\n const elementNode = $isNodeSelection(selection) ? selection?.getNodes()[0] as ElementNode : null;\r\n if (elementNode) {\r\n elementNode.append(layoutGrid);\r\n }\r\n else{\r\n $insertNodeToNearestRoot(layoutGrid)\r\n }\r\n }\r\n \r\n // 注册指令\r\n const unregister = mergeRegister(\r\n // 插入布局格子\r\n editor.registerCommand<LayoutGridNodeAttrType>(INSERT_LAYOUTGRID_COMMAND,(payload) => { \r\n \r\n insertGridHandle(new LayoutGridNode(payload));\r\n \r\n return true\r\n },COMMAND_PRIORITY_EDITOR),\r\n // 插入文本格子\r\n editor.registerCommand<TextGridNodeAttrType>(INSERT_TEXTGRID_COMMAND,(payload) => { \r\n \r\n const textGrid = new TextGridNode(payload)\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n insertGridHandle(textGrid);\r\n \r\n return true\r\n },COMMAND_PRIORITY_EDITOR),\r\n // 插入模块格子\r\n editor.registerCommand<ModuleGridNodeAttrType>(INSERT_MODULEGRID_COMMAND,(payload) => { \r\n insertGridHandle(new ModuleGridNode(payload));\r\n return true\r\n },COMMAND_PRIORITY_EDITOR),\r\n // 插入图文环绕格子\r\n editor.registerCommand<ImageTextGridNodeAttrType>(INSERT_IMAGETEXTGRID_COMMAND,(payload) => { \r\n \r\n const textImageGrid = new ImageTextGridNode(payload)\r\n const textGrid = new TextGridNode({} as TextGridNodeAttrType)\r\n\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n\r\n textImageGrid.append(new InlineImageNode({\r\n src:\"\",\r\n float:\"left\",\r\n width:\"200px\",\r\n margin:\"0 10px 10px 0\"\r\n } as ImageAttrType))\r\n textImageGrid.append(textGrid)\r\n\r\n\r\n insertGridHandle(textImageGrid);\r\n \r\n return true\r\n },COMMAND_PRIORITY_EDITOR)\r\n );\r\n\r\n onUnmounted(() => unregister())\r\n})\r\n</script>\r\n\r\n<template>\r\n <div class=\"mk-doc-active-element-block-mark box\" v-if=\"isSelected\" :style=\"curSelectPos\">\r\n \r\n </div>\r\n</template>\r\n./GridNode\r\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { useLexicalComposer } from 'lexical-vue'\r\nimport { $insertNodeToNearestRoot,mergeRegister } from '@lexical/utils'\r\nimport { \r\n $getNodeByKey,$createParagraphNode,$isNodeSelection, $getSelection,\r\n ElementNode,COMMAND_PRIORITY_EDITOR\r\n} from 'lexical'\r\nimport { onMounted, onUnmounted,ref } from 'vue'\r\nimport { registerDocEditorToolbarExtend,type ToolbarExtendPlugin } from \"../../core\"\r\nimport { GridNode,$isGridNode } from \"./GridNode\"\r\nimport { type LayoutGridNodeAttrType,LayoutGridNode,INSERT_LAYOUTGRID_COMMAND } from \"./LayoutGridNode\"\r\nimport { type TextGridNodeAttrType,TextGridNode,INSERT_TEXTGRID_COMMAND } from \"./TextGridNode\"\r\nimport { type ImageTextGridNodeAttrType,ImageTextGridNode,INSERT_IMAGETEXTGRID_COMMAND } from \"./ImageTextGridNode\"\r\nimport { type ModuleGridNodeAttrType,ModuleGridNode,INSERT_MODULEGRID_COMMAND,$isModuleGridNode } from \"./ModuleGridNode\"\r\nimport { INSERT_MODULE_COMMAND } from \"../ModulePlugin/commands\"\r\nimport { showModuleSelectDialog } from \"../ModulePlugin/utils\"\r\nimport { ModuleType,useModule } from \"../ModulePlugin/composables\"\r\nimport { ImageAttrType,InlineImageNode } from '../ImagePlugin'\r\nimport { useElementBlockSelection } from '../../core'\r\nimport { createDefaultFormData } from \"../../../dynamic-form-panel/utils\"\r\nimport { showGridEditDialoger } from \"./utils\"\r\n\r\n// 编辑器\r\nconst editor = useLexicalComposer()\r\n\r\n// 注册到工具条\r\nregisterDocEditorToolbarExtend({\r\n icon:\"richtext-outline\",\r\n text:\"图文环绕\",\r\n action:async ()=>{\r\n editor.dispatchCommand(INSERT_IMAGETEXTGRID_COMMAND,{ width:\"100%\" } as ImageTextGridNodeAttrType)\r\n },\r\n sort:80\r\n} as ToolbarExtendPlugin)\r\nregisterDocEditorToolbarExtend({\r\n icon:\"Grid\",\r\n text:\"文本容器\",\r\n action:async ()=>{\r\n editor.dispatchCommand(INSERT_TEXTGRID_COMMAND,{ width:\"100%\" } as TextGridNodeAttrType)\r\n },\r\n sort:81\r\n} as ToolbarExtendPlugin)\r\nregisterDocEditorToolbarExtend({\r\n icon:\"Grid\",\r\n text:\"模块容器\",\r\n action:async ()=>{\r\n editor.dispatchCommand(INSERT_MODULEGRID_COMMAND,{ width:\"100%\" } as ModuleGridNodeAttrType)\r\n },\r\n sort:70\r\n} as ToolbarExtendPlugin)\r\nregisterDocEditorToolbarExtend({\r\n icon:\"Grid\",\r\n text:\"布局容器\",\r\n action:async ()=>{\r\n editor.dispatchCommand(INSERT_LAYOUTGRID_COMMAND,{ display:\"flex\",width:\"100%\" } as LayoutGridNodeAttrType)\r\n },\r\n sort:1\r\n} as ToolbarExtendPlugin)\r\n\r\n// 当前激活的元素\r\nlet curActiveEl:HTMLElement\|null = null;\r\n// 找格子\r\nconst findGridNodeEl = (element:HTMLElement):HTMLElement\|null => {\r\n\r\n var el:HTMLElement\|null = element\r\n\r\n if(GridNode.hasGridNodeByElement(el)){\r\n return el;\r\n }\r\n\r\n while (el != null && !GridNode.hasGridNodeByElement(el)) {\r\n el = el.parentElement;\r\n }\r\n\r\n // 文本环绕的文本框不做激活处理\r\n if(el != null && el.parentElement != null && TextGridNode.hasGridNodeByElement(el) && ImageTextGridNode.hasGridNodeByElement(el.parentElement)){\r\n return el.parentElement;\r\n }\r\n // 选中模块容器\r\n else if(el != null && el.parentElement != null && ModuleGridNode.hasGridNodeByElement(el.parentElement)){\r\n return el.parentElement;\r\n }\r\n\r\n return el;\r\n}\r\n// 设置激活\r\nconst setActiveGridElement = (el:HTMLElement\|null)=>{\r\n // 激活对应的格子\r\n if(el){\r\n el.classList.add(\"doc-edit-active\")\r\n if(curActiveEl && curActiveEl != el){\r\n curActiveEl.classList.remove(\"doc-edit-active\")\r\n }\r\n curActiveEl = el;\r\n }\r\n else{\r\n curActiveEl && curActiveEl.classList.remove(\"doc-edit-active\")\r\n curActiveEl = null;\r\n }\r\n}\r\n// 使用元素模块集成了模块选中删除以及工具条\r\nconst { isSelected, curSelectKey, curSelectPos,setSelection } = useElementBlockSelection((el)=>{\r\n\r\n // 设置激活\r\n setActiveGridElement(findGridNodeEl(el));\r\n\r\n // 文本环绕的文本框不做选中处理\r\n if(el != null && el.parentElement != null && TextGridNode.hasGridNodeByElement(el) && ImageTextGridNode.hasGridNodeByElement(el.parentElement)){\r\n return el.parentElement;\r\n }\r\n\r\n\r\n return GridNode.hasGridNodeByElement(el);\r\n},()=>{\r\n \r\n const node = $getNodeByKey(curSelectKey.value)\r\n \r\n if($isGridNode(node)){\r\n\r\n const parent = node.getParent() as ElementNode\r\n\r\n const toolbars = [\r\n {\r\n title:`编辑容器`,icon:\"Edit\",action:async ()=>{\r\n\r\n var result = await showGridEditDialoger(node,parent,node.getAttrs());\r\n \r\n editor.update(() => node.setAttrs(result as any))\r\n } \r\n },\r\n {\r\n title:`在此之前插入布局容器`,icon:\"BottomLeft\",action:async ()=>{\r\n editor.update(() => {\r\n node.insertBefore(new LayoutGridNode({ display:\"block\",width:\"100%\" } as any))\r\n })\r\n } \r\n },\r\n {\r\n title:`在此之后插入布局容器`,icon:\"BottomRight\",action:async ()=>{\r\n editor.update(() => {\r\n node.insertAfter(new LayoutGridNode({ display:\"block\",width:\"100%\" } as any))\r\n })\r\n } \r\n }\r\n ];\r\n\r\n // 有父亲\r\n if($isGridNode(parent)){\r\n toolbars.push(...[\r\n {\r\n title:\"选中上层容器\",icon:\"Upload\",action: async ()=> {\r\n let parentEl = editor.getElementByKey(parent.getKey());\r\n if(parentEl){\r\n setActiveGridElement(parentEl);\r\n setSelection(parent.__key,parentEl)\r\n }\r\n \r\n }\r\n }\r\n ])\r\n }\r\n\r\n // 模块容器\r\n if($isModuleGridNode(node)){\r\n toolbars.push(...[\r\n {\r\n title:\"添加模块\",icon:\"Plus\",action:async ()=>{\r\n // 打开模块面板\r\n const result = (await showModuleSelectDialog()) as ModuleType;\r\n const defaultData = createDefaultFormData(result.options);\r\n // 插入模块\r\n editor.dispatchCommand(INSERT_MODULE_COMMAND,{ name:result.name,data:defaultData})\r\n } \r\n }\r\n ])\r\n }\r\n\r\n return toolbars;\r\n }\r\n\r\n return null;\r\n})\r\n\r\n\r\nonMounted(() => {\r\n\r\n // 插入格子\r\n const insertGridHandle = (layoutGrid:GridNode)=>{\r\n const selection = $getSelection()\r\n const elementNode = $isNodeSelection(selection) ? selection?.getNodes()[0] as ElementNode : null;\r\n if (elementNode) {\r\n elementNode.append(layoutGrid);\r\n }\r\n else{\r\n $insertNodeToNearestRoot(layoutGrid)\r\n }\r\n }\r\n \r\n // 注册指令\r\n const unregister = mergeRegister(\r\n // 插入布局格子\r\n editor.registerCommand<LayoutGridNodeAttrType>(INSERT_LAYOUTGRID_COMMAND,(payload) => { \r\n \r\n insertGridHandle(new LayoutGridNode(payload));\r\n \r\n return true\r\n },COMMAND_PRIORITY_EDITOR),\r\n // 插入文本格子\r\n editor.registerCommand<TextGridNodeAttrType>(INSERT_TEXTGRID_COMMAND,(payload) => { \r\n \r\n const textGrid = new TextGridNode(payload)\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n insertGridHandle(textGrid);\r\n \r\n return true\r\n },COMMAND_PRIORITY_EDITOR),\r\n // 插入模块格子\r\n editor.registerCommand<ModuleGridNodeAttrType>(INSERT_MODULEGRID_COMMAND,(payload) => { \r\n insertGridHandle(new ModuleGridNode(payload));\r\n return true\r\n },COMMAND_PRIORITY_EDITOR),\r\n // 插入图文环绕格子\r\n editor.registerCommand<ImageTextGridNodeAttrType>(INSERT_IMAGETEXTGRID_COMMAND,(payload) => { \r\n \r\n const textImageGrid = new ImageTextGridNode(payload)\r\n const textGrid = new TextGridNode({} as TextGridNodeAttrType)\r\n\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n textGrid.append($createParagraphNode())\r\n\r\n textImageGrid.append(new InlineImageNode({\r\n src:\"\",\r\n float:\"left\",\r\n width:\"200px\",\r\n margin:\"0 10px 10px 0\"\r\n } as ImageAttrType))\r\n textImageGrid.append(textGrid)\r\n\r\n\r\n insertGridHandle(textImageGrid);\r\n \r\n return true\r\n },COMMAND_PRIORITY_EDITOR)\r\n );\r\n\r\n onUnmounted(() => unregister())\r\n})\r\n</script>\r\n\r\n<template>\r\n <div class=\"mk-doc-active-element-block-mark box\" v-if=\"isSelected\" :style=\"curSelectPos\">\r\n \r\n </div>\r\n</template>\r\n./GridNode\r\n"],"names":[],"mappings":"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"}

package/dist/esm/components/basic/doc-editor/plugins/ModulePlugin/ModuleBlockNode.js CHANGED Viewed

@@ -1,14 +1,14 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { TextNode } from "lexical";
+import { DecoratorNode } from "lexical";
 import { useModule } from "./composables.js";
 import { createHtml, createModuleMetaData } from "./utils.js";
 const ClassMarkName = "mk-doc-block__module";
 const AttrMarkName = "module-name";
-class ModuleBlockNode extends TextNode {
+class ModuleBlockNode extends DecoratorNode {
   constructor(name, data, key) {
-    super("", key);
+    super(key);
     __publicField(this, "__name");
     __publicField(this, "__data");
     this.__name = name;
@@ -135,13 +135,21 @@ class ModuleBlockNode extends TextNode {
     dom.innerHTML = el.innerHTML;
     return false;
   }
-  /**
-   * 非内联
-   * @returns
-   */
-  isInline() {
+  decorate(editor, config) {
+    return null;
+  }
+  isEmpty() {
     return false;
   }
+  isIsolated() {
+    return false;
+  }
+  isInline() {
+    return true;
+  }
+  isKeyboardSelectable() {
+    return true;
+  }
 }
 function $createModuleBlockNode(name, data) {
   return new ModuleBlockNode(name, data);

package/dist/esm/components/basic/doc-editor/plugins/ModulePlugin/ModuleBlockNode.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ModuleBlockNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/ModuleBlockNode.ts"],"sourcesContent":["\r\nimport {\r\n type DOMConversionMap,\r\n type DOMExportOutput,\r\n type LexicalNode,\r\n type NodeKey,\r\n type Spread,\r\n type EditorConfig,\r\n type DOMConversion,\r\n type ~~SerializedTextNode~~,\r\n ~~TextNode~~,\r\n} from 'lexical'\r\nimport { useModule } from \"./composables\"\r\nimport { createHtml,createModuleMetaData } from \"./utils\"\r\n\r\n/*\r\n 模块模版节点序列化\r\n /\r\nexport type SerializedModuleBlockNode = Spread<\r\n {\r\n name:string,\r\n data: object\r\n },\r\n ~~SerializedTextNode~~\r\n>\r\n\r\n// 类标识\r\nconst ClassMarkName = \"mk-doc-block__module\";\r\n// 属性标识\r\nconst AttrMarkName = \"module-name\";\r\n\r\n/\r\n 模块节点\r\n /\r\nexport class ModuleBlockNode extends ~~TextNode~~ {\r\n __name: string\r\n __data: object\r\n\r\n static getType(): string { return \"module\"; }\r\n\r\n /\r\n 克隆\r\n * @param node \r\n * @returns \r\n /\r\n static clone(node: ModuleBlockNode): ModuleBlockNode {\r\n return new ModuleBlockNode(node.__name,node.__data,node.__key)\r\n }\r\n\r\n /\r\n 获取模块类标识\r\n * @returns \r\n /\r\n static getMarkClassName(): string { return ClassMarkName }\r\n\r\n /\r\n 导入\r\n * @param serializedNode \r\n * @returns \r\n /\r\n static importJSON(serializedNode: SerializedModuleBlockNode): ModuleBlockNode {\r\n return $createModuleBlockNode(serializedNode.name,serializedNode.data)\r\n }\r\n\r\n constructor(name: string, data: object, key?: NodeKey) {\r\n super(~~\"\",~~key)\r\n this.__name = name\r\n this.__data = data\r\n }\r\n\r\n /\r\n 获取html内容\r\n /\r\n getHtml(){\r\n const { module } = useModule(this.__name);\r\n return createHtml(module.template,this.__data)\r\n }\r\n\r\n /\r\n 设置内容\r\n * @param html \r\n /\r\n setContent(data:any){\r\n const writable = this.getWritable();\r\n writable.__data = data;\r\n }\r\n\r\n /\r\n 导出JSON\r\n * @returns \r\n /\r\n exportJSON(): SerializedModuleBlockNode {\r\n\r\n return {\r\n ...super.exportJSON(),\r\n type: this.getType(),\r\n version: 1,\r\n name:this.__name,\r\n data: this.__data\r\n }\r\n }\r\n\r\n\r\n static importDOM(): DOMConversionMap \| null {\r\n return {\r\n div : $covertModuleBlockDOM,\r\n section : $covertModuleBlockDOM \r\n }\r\n }\r\n\r\n /\r\n 获取文本内容\r\n * @param _includeInert \r\n * @param _includeDirectionless \r\n * @returns \r\n /\r\n getTextContent(\r\n _includeInert?: boolean \| undefined,\r\n _includeDirectionless?: false \| undefined,\r\n ): string {\r\n\r\n const element = document.createElement('div')\r\n const { module } = useModule(this.__name);\r\n element.innerHTML = createHtml(module.template,this.__data);\r\n\r\n return element.textContent as string;\r\n }\r\n\r\n /\r\n 创建模块的el\r\n * @returns \r\n /\r\n createModuleElement(): HTMLElement {\r\n\r\n const element = document.createElement('div')\r\n const { module } = useModule(this.__name);\r\n\r\n element.innerHTML = createHtml(module.template,this.__data);\r\n\r\n if(element.children.length > 1){\r\n throw new Error(\"定义模块模版的时候请用一个容器将模版内容包裹起来，不能有多个并列的元素！\");\r\n }\r\n\r\n const contentEl = element.children[0] as HTMLElement;\r\n\r\n if (!contentEl.classList.contains(ClassMarkName)) {\r\n contentEl.classList.add(ClassMarkName);\r\n }\r\n\r\n // 模块名称标识\r\n contentEl.setAttribute(AttrMarkName,this.__name)\r\n \r\n return contentEl;\r\n }\r\n\r\n /\r\n 导出DOM结构\r\n * @returns \r\n /\r\n exportDOM(): DOMExportOutput {\r\n return { element:this.createModuleElement() }\r\n }\r\n\r\n /\r\n 渲染\r\n * @param config \r\n * @returns \r\n /\r\n createDOM(config: EditorConfig): HTMLElement {\r\n const el = this.createModuleElement();\r\n el.setAttribute(\"node-key\",this.__key)\r\n el.setAttribute(\"contenteditable\",\"false\")\r\n el.setAttribute(\"data-lexical-decorator\",\"true\")\r\n return el;\r\n }\r\n\r\n /\r\n 更新DOM\r\n * @param prevNode \r\n * @param dom \r\n * @param config \r\n * @returns \r\n /\r\n updateDOM(prevNode: ModuleBlockNode, dom: HTMLElement, config: EditorConfig): boolean {\r\n const el = this.createModuleElement();\r\n dom.innerHTML = el.innerHTML;\r\n return false\r\n }\r\n \r\n ~~/\~~r\n ~~非内联\~~r\n * ~~@returns~~ \r\n /\r\n isInline(): ~~boolean~~ {\r\n return ~~false~~;\r\n }\r\n}\r\n\r\n/\r\n 创建节点\r\n * @param src \r\n * @returns \r\n /\r\nexport function $createModuleBlockNode(name:string,data: object): ModuleBlockNode {\r\n return new ModuleBlockNode(name,data)\r\n}\r\n\r\n/\r\n 判断节点\r\n * @param node \r\n * @returns \r\n /\r\nexport function $isModuleBlockNode(\r\n node: ModuleBlockNode \| LexicalNode \| null \| undefined,\r\n): node is ModuleBlockNode {\r\n return node instanceof ModuleBlockNode\r\n}\r\n\r\n\r\n/\r\n 转换模块DOM\r\n * @param node \r\n * @returns \r\n */\r\nexport const $covertModuleBlockDOM = (domNode: HTMLElement):DOMConversion<HTMLElement> \| null => {\r\n\r\n const name = domNode.getAttribute(AttrMarkName) as string;\r\n const isModule = domNode.classList.contains(ClassMarkName);\r\n const moduleContent = domNode.innerHTML ;\r\n\r\n if(isModule && name){ domNode.innerHTML = \"\"; }\r\n\r\n return isModule && name ? {\r\n conversion: ()=>{ \r\n const { module } = useModule(name);\r\n const { data } = createModuleMetaData(moduleContent,module.options);\r\n return { \r\n node:$createModuleBlockNode(name,data)\r\n };\r\n },\r\n priority: 4\r\n } : null;\r\n}\r\n"],"names":[],"mappings":";;;;;;~~AA2BA~~,MAAM,gBAAgB;AAEtB,MAAM,eAAe;AAKd,MAAM,wBAAwB,~~SAAS~~;AAAA,~~EA8B5C~~,YAAY,MAAc,MAAe,KAAe;AACtD,UAAM,~~IAAG,~~GAAG;~~AA9Bd~~;AACA;AA8BE,SAAK,SAAS;AACd,SAAK,SAAS;AAAA,EAChB;AAAA,EA9BA,OAAO,UAAkB;AAAS,WAAA;AAAA,EAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAO5C,OAAO,MAAM,MAAwC;AACnD,WAAO,IAAI,gBAAgB,KAAK,QAAO,KAAK,QAAO,KAAK,KAAK;AAAA,EAC/D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO,mBAA2B;AAAS,WAAA;AAAA,EAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOzD,OAAO,WAAW,gBAA4D;AAC5E,WAAO,uBAAuB,eAAe,MAAK,eAAe,IAAI;AAAA,EACvE;AAAA;AAAA;AAAA;AAAA,EAWA,UAAS;AACP,UAAM,EAAE,OAAW,IAAA,UAAU,KAAK,MAAM;AACxC,WAAO,WAAW,OAAO,UAAS,KAAK,MAAM;AAAA,EAC/C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAW,MAAS;AACZ,UAAA,WAAW,KAAK;AACtB,aAAS,SAAS;AAAA,EACpB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,aAAwC;AAE/B,WAAA;AAAA,MACL,GAAG,MAAM,WAAW;AAAA,MACpB,MAAM,KAAK,QAAQ;AAAA,MACnB,SAAS;AAAA,MACT,MAAK,KAAK;AAAA,MACV,MAAM,KAAK;AAAA,IAAA;AAAA,EAEf;AAAA,EAGA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAM;AAAA,MACN,SAAU;AAAA,IAAA;AAAA,EAEd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,eACE,eACA,uBACQ;AAEF,UAAA,UAAU,SAAS,cAAc,KAAK;AAC5C,UAAM,EAAE,OAAW,IAAA,UAAU,KAAK,MAAM;AACxC,YAAQ,YAAY,WAAW,OAAO,UAAS,KAAK,MAAM;AAE1D,WAAO,QAAQ;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,sBAAmC;AAE3B,UAAA,UAAU,SAAS,cAAc,KAAK;AAC5C,UAAM,EAAE,OAAW,IAAA,UAAU,KAAK,MAAM;AAExC,YAAQ,YAAY,WAAW,OAAO,UAAS,KAAK,MAAM;AAEvD,QAAA,QAAQ,SAAS,SAAS,GAAE;AACvB,YAAA,IAAI,MAAM,sCAAsC;AAAA,IACxD;AAEM,UAAA,YAAY,QAAQ,SAAS,CAAC;AAEpC,QAAI,CAAC,UAAU,UAAU,SAAS,aAAa,GAAG;AACtC,gBAAA,UAAU,IAAI,aAAa;AAAA,IACvC;AAGU,cAAA,aAAa,cAAa,KAAK,MAAM;AAExC,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAA6B;AAC3B,WAAO,EAAE,SAAQ,KAAK,oBAAsB,EAAA;AAAA,EAC9C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,UAAU,QAAmC;AACrC,UAAA,KAAK,KAAK;AACb,OAAA,aAAa,YAAW,KAAK,KAAK;AAClC,OAAA,aAAa,mBAAkB,OAAO;AACtC,OAAA,aAAa,0BAAyB,MAAM;AACxC,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,UAAU,UAA2B,KAAkB,QAA+B;AAC9E,UAAA,KAAK,KAAK;AAChB,QAAI,YAAY,GAAG;AACZ,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,~~EAMA~~,~~WAAoB~~;~~AACX~~,WAAA;AAAA,EACT;AACF;AAOgB,SAAA,uBAAuB,MAAY,MAA+B;AACzE,SAAA,IAAI,gBAAgB,MAAK,IAAI;AACtC;AAOO,SAAS,mBACd,MACyB;AACzB,SAAO,gBAAgB;AACzB;AAQa,MAAA,wBAAwB,CAAC,YAA2D;AAEzF,QAAA,OAAO,QAAQ,aAAa,YAAY;AAC9C,QAAM,WAAW,QAAQ,UAAU,SAAS,aAAa;AACzD,QAAM,gBAAgB,QAAQ;AAE9B,MAAG,YAAY,MAAK;AAAE,YAAQ,YAAY;AAAA,EAAI;AAE9C,SAAO,YAAY,OAAO;AAAA,IACxB,YAAY,MAAI;AACd,YAAM,EAAE,OAAA,IAAW,UAAU,IAAI;AACjC,YAAM,EAAE,KAAK,IAAI,qBAAqB,eAAc,OAAO,OAAO;AAC3D,aAAA;AAAA,QACL,MAAK,uBAAuB,MAAK,IAAI;AAAA,MAAA;AAAA,IAEzC;AAAA,IACA,UAAU;AAAA,EACR,IAAA;AACN;"}
1	+ {"version":3,"file":"ModuleBlockNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/ModuleBlockNode.ts"],"sourcesContent":["\r\nimport {\r\n type DOMConversionMap,\r\n type DOMExportOutput,\r\n type LexicalNode,\r\n type NodeKey,\r\n type Spread,\r\n type EditorConfig,\r\n type DOMConversion,\r\n type SerializedLexicalNode,\r\n DecoratorNode,\r\n LexicalEditor,\r\n} from 'lexical'\r\nimport { useModule } from \"./composables\"\r\nimport { createHtml,createModuleMetaData } from \"./utils\"\r\nimport { Component } from 'vue'\r\n\r\n/*\r\n 模块模版节点序列化\r\n /\r\nexport type SerializedModuleBlockNode = Spread<\r\n {\r\n name:string,\r\n data: object\r\n },\r\n SerializedLexicalNode\r\n>\r\n\r\n// 类标识\r\nconst ClassMarkName = \"mk-doc-block__module\";\r\n// 属性标识\r\nconst AttrMarkName = \"module-name\";\r\n\r\n/\r\n 模块节点\r\n /\r\nexport class ModuleBlockNode extends DecoratorNode<Component\|null> {\r\n __name: string\r\n __data: object\r\n\r\n static getType(): string { return \"module\"; }\r\n\r\n /\r\n 克隆\r\n * @param node \r\n * @returns \r\n /\r\n static clone(node: ModuleBlockNode): ModuleBlockNode {\r\n return new ModuleBlockNode(node.__name,node.__data,node.__key)\r\n }\r\n\r\n /\r\n 获取模块类标识\r\n * @returns \r\n /\r\n static getMarkClassName(): string { return ClassMarkName }\r\n\r\n /\r\n 导入\r\n * @param serializedNode \r\n * @returns \r\n /\r\n static importJSON(serializedNode: SerializedModuleBlockNode): ModuleBlockNode {\r\n return $createModuleBlockNode(serializedNode.name,serializedNode.data)\r\n }\r\n\r\n constructor(name: string, data: object, key?: NodeKey) {\r\n super(key)\r\n this.__name = name\r\n this.__data = data\r\n }\r\n\r\n /\r\n 获取html内容\r\n /\r\n getHtml(){\r\n const { module } = useModule(this.__name);\r\n return createHtml(module.template,this.__data)\r\n }\r\n\r\n /\r\n 设置内容\r\n * @param html \r\n /\r\n setContent(data:any){\r\n const writable = this.getWritable();\r\n writable.__data = data;\r\n }\r\n\r\n /\r\n 导出JSON\r\n * @returns \r\n /\r\n exportJSON(): SerializedModuleBlockNode {\r\n\r\n return {\r\n ...super.exportJSON(),\r\n type: this.getType(),\r\n version: 1,\r\n name:this.__name,\r\n data: this.__data\r\n }\r\n }\r\n\r\n\r\n static importDOM(): DOMConversionMap \| null {\r\n return {\r\n div : $covertModuleBlockDOM,\r\n section : $covertModuleBlockDOM \r\n }\r\n }\r\n\r\n /\r\n 获取文本内容\r\n * @param _includeInert \r\n * @param _includeDirectionless \r\n * @returns \r\n /\r\n getTextContent(\r\n _includeInert?: boolean \| undefined,\r\n _includeDirectionless?: false \| undefined,\r\n ): string {\r\n\r\n const element = document.createElement('div')\r\n const { module } = useModule(this.__name);\r\n element.innerHTML = createHtml(module.template,this.__data);\r\n\r\n return element.textContent as string;\r\n }\r\n\r\n /\r\n 创建模块的el\r\n * @returns \r\n /\r\n createModuleElement(): HTMLElement {\r\n\r\n const element = document.createElement('div')\r\n const { module } = useModule(this.__name);\r\n\r\n element.innerHTML = createHtml(module.template,this.__data);\r\n\r\n if(element.children.length > 1){\r\n throw new Error(\"定义模块模版的时候请用一个容器将模版内容包裹起来，不能有多个并列的元素！\");\r\n }\r\n\r\n const contentEl = element.children[0] as HTMLElement;\r\n\r\n if (!contentEl.classList.contains(ClassMarkName)) {\r\n contentEl.classList.add(ClassMarkName);\r\n }\r\n\r\n // 模块名称标识\r\n contentEl.setAttribute(AttrMarkName,this.__name)\r\n \r\n return contentEl;\r\n }\r\n\r\n /\r\n 导出DOM结构\r\n * @returns \r\n /\r\n exportDOM(): DOMExportOutput {\r\n return { element:this.createModuleElement() }\r\n }\r\n\r\n /\r\n 渲染\r\n * @param config \r\n * @returns \r\n /\r\n createDOM(config: EditorConfig): HTMLElement {\r\n const el = this.createModuleElement();\r\n el.setAttribute(\"node-key\",this.__key)\r\n el.setAttribute(\"contenteditable\",\"false\")\r\n el.setAttribute(\"data-lexical-decorator\",\"true\")\r\n return el;\r\n }\r\n\r\n /\r\n 更新DOM\r\n * @param prevNode \r\n * @param dom \r\n * @param config \r\n * @returns \r\n /\r\n updateDOM(prevNode: ModuleBlockNode, dom: HTMLElement, config: EditorConfig): boolean {\r\n const el = this.createModuleElement();\r\n dom.innerHTML = el.innerHTML;\r\n return false\r\n }\r\n decorate(editor: LexicalEditor, config: EditorConfig): Component \| null {\r\n return null;\r\n }\r\n isEmpty(){\r\n return false;\r\n }\r\n isIsolated() {\r\n return false;\r\n }\r\n isInline() {\r\n return true;\r\n }\r\n isKeyboardSelectable() {\r\n return true;\r\n }\r\n}\r\n\r\n/\r\n 创建节点\r\n * @param src \r\n * @returns \r\n /\r\nexport function $createModuleBlockNode(name:string,data: object): ModuleBlockNode {\r\n return new ModuleBlockNode(name,data)\r\n}\r\n\r\n/\r\n 判断节点\r\n * @param node \r\n * @returns \r\n /\r\nexport function $isModuleBlockNode(\r\n node: ModuleBlockNode \| LexicalNode \| null \| undefined,\r\n): node is ModuleBlockNode {\r\n return node instanceof ModuleBlockNode\r\n}\r\n\r\n\r\n/\r\n 转换模块DOM\r\n * @param node \r\n * @returns \r\n */\r\nexport const $covertModuleBlockDOM = (domNode: HTMLElement):DOMConversion<HTMLElement> \| null => {\r\n\r\n const name = domNode.getAttribute(AttrMarkName) as string;\r\n const isModule = domNode.classList.contains(ClassMarkName);\r\n const moduleContent = domNode.innerHTML ;\r\n\r\n if(isModule && name){ domNode.innerHTML = \"\"; }\r\n\r\n return isModule && name ? {\r\n conversion: ()=>{ \r\n const { module } = useModule(name);\r\n const { data } = createModuleMetaData(moduleContent,module.options);\r\n return { \r\n node:$createModuleBlockNode(name,data)\r\n };\r\n },\r\n priority: 4\r\n } : null;\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/components/basic/doc-editor/themes/doc-editor-edit.css.js CHANGED Viewed

@@ -1,4 +1,4 @@
-const DocEditorEditCss = '\r\n.mk-doc__img {\r\n  cursor: pointer;\r\n  z-index: 1;\r\n  position: relative;\r\n}\r\n\r\n.mk-doc__grid{\r\n  outline: 2px solid #eff5ff;\r\n  position: relative;\r\n  cursor: pointer;\r\n  white-space:initial;\r\n  word-break:initial;\r\n  min-height: 150px;\r\n}\r\n.mk-doc__grid.mk-doc__module-grid::before,\r\n.mk-doc__grid.doc-edit-active::before{\r\n  text-align: center;\r\n  background-color: #eff5ff;\r\n  color: #4284ff;\r\n  left: -20px;\r\n  top: 0px;\r\n  pointer-events: all;\r\n  font-size: 14px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  z-index: 999; \r\n  width: 20px;\r\n  cursor: pointer;\r\n  font-size: 12px;\r\n  padding: 5px 0;\r\n}\r\n\r\n.mk-doc__grid.doc-edit-active::before{\r\n  content: "容器";\r\n  position: absolute;\r\n}\r\n.mk-doc__grid.mk-doc__layout-grid.doc-edit-active::before{\r\n  content: "布局容器";\r\n}\r\n/* 文本框可编辑文字 */\r\n.mk-doc__grid.mk-doc__text-grid :not(.mk-doc__grid){\r\n  cursor: text;\r\n}\r\n.mk-doc__grid.mk-doc__text-grid.doc-edit-active::before{\r\n  content: "文本容器";\r\n}\r\n\r\n/* 图文环绕容器 */\r\n.mk-doc__grid.mk-doc__image-text.doc-edit-active::before{\r\n  content: "图文环绕容器";\r\n}\r\n\r\n/* 图文环绕容器下的文本框不做选中 */\r\n.mk-doc__grid.mk-doc__image-text .mk-doc__text-grid{\r\n  outline: 0;\r\n  padding-top: 0;\r\n}\r\n.mk-doc__grid.mk-doc__image-text .mk-doc__text-grid::before{\r\n  display: none;\r\n}\r\n\r\n/* 模块容器 */\r\n.mk-doc__grid.mk-doc__module-grid::before{\r\n  content: "模块容器";\r\n  width: 200px;\r\n  height: 20px;\r\n  top:0;\r\n  left: 0;;\r\n  position: sticky;\r\n}\r\n/* 避免模块下的a标签点击 */\r\n.mk-doc__grid.mk-doc__module-grid a{\r\n  pointer-events: none;\r\n}\r\n\r\n/* 给布局下的格子加内边距方便编辑 */\r\n.mk-doc__grid.mk-doc__layout-grid >.mk-doc__grid{\r\n  margin: 10px;\r\n}\r\n\r\n/* 块选中 */\r\n.mk-doc__embedBlock {\r\n  position: relative;\r\n  z-index: 1;\r\n  padding: 1px;\r\n  cursor: pointer;\r\n}\r\n.mk-doc__embedBlockFocus {\r\n  outline: 2px solid rgb(60, 132, 244);\r\n}\r\n\r\n.mk-doc__embedBlock >*{\r\n  pointer-events: none;\r\n}\r\n\r\n.mk-doc-active-element-block-mark{\r\n  position: absolute;\r\n  box-sizing:border-box;\r\n  background-color:#2776f63b;\r\n  z-index: 99;\r\n  pointer-events: none;\r\n}\r\n.mk-doc-active-element-block-mark.box{\r\n  outline: 2px solid #2776f63b;\r\n  background-color: transparent;\r\n}\r\n';
+const DocEditorEditCss = '\r\n.mk-doc__img {\r\n  cursor: pointer;\r\n  z-index: 1;\r\n  position: relative;\r\n}\r\n\r\n.mk-doc__grid{\r\n  outline: 2px solid #eff5ff;\r\n  position: relative;\r\n  cursor: pointer;\r\n  white-space:initial;\r\n  word-break:initial;\r\n  min-height: 150px;\r\n}\r\n.mk-doc__grid.doc-edit-active::before{\r\n  text-align: center;\r\n  background-color: #eff5ff;\r\n  color: #4284ff;\r\n  left: -20px;\r\n  top: 0px;\r\n  pointer-events: all;\r\n  font-size: 14px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  z-index: 999; \r\n  width: 20px;\r\n  cursor: pointer;\r\n  font-size: 12px;\r\n  padding: 5px 0;\r\n}\r\n\r\n.mk-doc__grid.doc-edit-active::before{\r\n  content: "容器";\r\n  position: absolute;\r\n}\r\n.mk-doc__grid.mk-doc__layout-grid.doc-edit-active::before{\r\n  content: "布局容器";\r\n}\r\n/* 文本框可编辑文字 */\r\n.mk-doc__grid.mk-doc__text-grid :not(.mk-doc__grid){\r\n  cursor: text;\r\n}\r\n.mk-doc__grid.mk-doc__text-grid.doc-edit-active::before{\r\n  content: "文本容器";\r\n}\r\n\r\n/* 图文环绕容器 */\r\n.mk-doc__grid.mk-doc__image-text.doc-edit-active::before{\r\n  content: "图文环绕容器";\r\n}\r\n\r\n/* 图文环绕容器下的文本框不做选中 */\r\n.mk-doc__grid.mk-doc__image-text .mk-doc__text-grid{\r\n  outline: 0;\r\n  padding-top: 0;\r\n}\r\n.mk-doc__grid.mk-doc__image-text .mk-doc__text-grid::before{\r\n  display: none;\r\n}\r\n\r\n/* 模块容器 */\r\n.mk-doc__grid.mk-doc__module-grid.doc-edit-active::before{\r\n  content: "模块容器";\r\n  top: -20px;\r\n  left: -2px;\r\n  height: 20px;\r\n  width: auto;\r\n  padding: 0 5px;\r\n}\r\n\r\n/* 避免模块下的a标签点击 */\r\n.mk-doc__grid.mk-doc__module-grid a{\r\n  pointer-events: none;\r\n}\r\n\r\n/* 给布局下的格子加内边距方便编辑 */\r\n.mk-doc__grid.mk-doc__layout-grid >.mk-doc__grid{\r\n  margin: 10px;\r\n}\r\n\r\n/* 块选中 */\r\n.mk-doc__embedBlock {\r\n  position: relative;\r\n  z-index: 1;\r\n  padding: 1px;\r\n  cursor: pointer;\r\n}\r\n.mk-doc__embedBlockFocus {\r\n  outline: 2px solid rgb(60, 132, 244);\r\n}\r\n\r\n.mk-doc__embedBlock >*{\r\n  pointer-events: none;\r\n}\r\n\r\n.mk-doc-active-element-block-mark{\r\n  position: absolute;\r\n  box-sizing:border-box;\r\n  background-color:#2776f63b;\r\n  z-index: 99;\r\n  pointer-events: none;\r\n}\r\n.mk-doc-active-element-block-mark.box{\r\n  outline: 2px solid #2776f63b;\r\n  background-color: transparent;\r\n}\r\n';
 export {
   DocEditorEditCss as default
 };