npm - @maketribe/ms-app - Versions diffs - 3.2.23 → 3.2.25 - Mend

@maketribe/ms-app 3.2.23 → 3.2.25

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 (1003) hide show

package/dist/cjs/components/basic/doc-editor/plugins/ToolbarPlugin/FontStyleTool.vue.js CHANGED Viewed

@@ -2,9 +2,13 @@
 const vue = require("vue");
 const lexical = require("lexical");
 const selection = require("@lexical/selection");
+const link = require("@lexical/link");
+const url = require("../../utils/url.js");
+const getSelectedNode = require("../../utils/getSelectedNode.js");
 const utils = require("@lexical/utils");
 const lexicalVue = require("lexical-vue");
 const FontStyleDefines = require("./FontStyleDefines.js");
+const LinkEditDialog = require("../AutoLinkPlugin/LinkEditDialog.js");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "FontStyleTool",
   setup(__props) {
@@ -20,13 +24,23 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const alignList = vue.ref(["left", "center", "right", "justify"]);
     const alignValue = vue.ref(alignList.value[0]);
     const disabled = vue.ref(false);
+    const isLink = vue.ref(false);
+    const linkValue = vue.ref("");
+    async function insertLink() {
+      const result = await LinkEditDialog.ShowLinkEditPanel(linkValue.value);
+      if (result.trim()) {
+        editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, url.sanitizeUrl(result));
+      } else {
+        editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, null);
+      }
+    }
     function updateToolbar() {
       const selection$1 = lexical.$getSelection();
       if (lexical.$isRangeSelection(selection$1)) {
         const anchorNode = selection$1.anchor.getNode();
         let element = anchorNode.getKey() === "root" ? anchorNode : utils.$findMatchingParent(anchorNode, (e) => {
-          const parent = e.getParent();
-          return parent !== null && lexical.$isRootOrShadowRoot(parent);
+          const parent2 = e.getParent();
+          return parent2 !== null && lexical.$isRootOrShadowRoot(parent2);
         });
         if (element === null) {
           element = anchorNode.getTopLevelElementOrThrow();
@@ -51,6 +65,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         bgColor.value = selection.$getSelectionStyleValueForProperty(selection$1, "background-color", "#fff");
         fontFamily.value = FontStyleDefines.FONT_FAMILY_OPTIONS.find((item) => item.value == ff) || FontStyleDefines.FONT_FAMILY_OPTIONS[0];
         disabled.value = false;
+        const node = getSelectedNode.getSelectedNode(selection$1);
+        const parent = node.getParent();
+        isLink.value = link.$isLinkNode(parent) || link.$isLinkNode(node);
+        if (isLink.value) {
+          linkValue.value = link.$isLinkNode(parent) ? parent.getURL() : node.getURL();
+        } else {
+          linkValue.value = "";
+        }
       } else {
         disabled.value = true;
       }
@@ -317,7 +339,24 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             }, 8, ["style", "disabled"])
           ]),
           _: 1
-        }, 8, ["disabled"])
+        }, 8, ["disabled"]),
+        vue.createVNode(_component_el_divider, { direction: "vertical" }),
+        vue.createVNode(_component_el_button_group, null, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_el_button, {
+              text: "",
+              disabled: disabled.value,
+              class: vue.normalizeClass(`${isLink.value ? "active" : ""}`),
+              onClick: insertLink
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_MKSvgIcon, { iconClass: "doc-link" })
+              ]),
+              _: 1
+            }, 8, ["disabled", "class"])
+          ]),
+          _: 1
+        })
       ], 64);
     };
   }

package/dist/cjs/components/basic/doc-editor/plugins/ToolbarPlugin/FontStyleTool.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FontStyleTool.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/FontStyleTool.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {\r\n $getSelection,\r\n $isRangeSelection,\r\n $isRootOrShadowRoot,\r\n FORMAT_TEXT_COMMAND,\r\n FORMAT_ELEMENT_COMMAND,\r\n SELECTION_CHANGE_COMMAND,\r\n type CommandListenerPriority,\r\n type ElementFormatType\r\n} from 'lexical'\r\nimport {\r\n $getSelectionStyleValueForProperty,\r\n $patchStyleText,\r\n} from '@lexical/selection'\r\nimport { $findMatchingParent,mergeRegister } from '@lexical/utils'\r\nimport { useLexicalComposer } from 'lexical-vue'\r\nimport { onMounted, onUnmounted, ref,watch } from 'vue'\r\nimport { FONT_SIZE_OPTIONS,ROOT_FONT_SIZE,FONT_FAMILY_OPTIONS } from \"./FontStyleDefines\"\r\n\r\nconst editor = useLexicalComposer()\r\nconst fontSize = ref('14px')\r\nconst fontColor = ref<string>('#000')\r\nconst bgColor = ref<string>('#fff')\r\nconst fontFamily = ref<any>(FONT_FAMILY_OPTIONS[0])\r\nconst isBold = ref(false)\r\nconst isItalic = ref(false)\r\nconst isUnderline = ref(false)\r\nconst isStrikethrough = ref(false)\r\n\r\n\r\nconst lowPriority: CommandListenerPriority = 1\r\n\r\n// 对齐方式\r\nconst alignList = ref<ElementFormatType[]>([\"left\",\"center\",\"right\",\"justify\"])\r\nconst alignValue = ref(alignList.value[0])\r\nconst disabled = ref(false)\r\n\r\n\r\n// 更新状态栏\r\nfunction updateToolbar() {\r\n\r\n const selection = $getSelection()\r\n\r\n if ($isRangeSelection(selection)) {\r\n\r\n const anchorNode = selection.anchor.getNode()\r\n\r\n let element = anchorNode.getKey() === 'root'\r\n ? anchorNode\r\n : $findMatchingParent(anchorNode, (e) => {\r\n const parent = e.getParent()\r\n return parent !== null && $isRootOrShadowRoot(parent)\r\n });\r\n\r\n\r\n if (element === null){\r\n element = anchorNode.getTopLevelElementOrThrow()\r\n }\r\n\r\n let elementDOM = editor.getElementByKey(element.getKey());\r\n\r\n // 文本对齐\r\n alignValue.value = (elementDOM?.style.textAlign as ElementFormatType) \|\| \"left\";\r\n\r\n if(alignValue.value == \"start\"){ alignValue.value = \"left\"; }\r\n else if(alignValue.value == \"end\"){ alignValue.value = \"right\"; }\r\n\r\n // Update text format\r\n isBold.value = selection.hasFormat('bold')\r\n isItalic.value = selection.hasFormat('italic')\r\n isUnderline.value = selection.hasFormat('underline')\r\n isStrikethrough.value = selection.hasFormat('strikethrough')\r\n\r\n // Handle buttons\r\n var ff = $getSelectionStyleValueForProperty(selection, 'font-family', 'Arial');\r\n let fs = $getSelectionStyleValueForProperty(selection, 'font-size', '1rem');\r\n \r\n if(fs){\r\n fontSize.value = Math.round(parseFloat(fs) * ROOT_FONT_SIZE)+\"px\"\r\n }\r\n \r\n fontColor.value = $getSelectionStyleValueForProperty(selection, 'color', '#000')\r\n bgColor.value = $getSelectionStyleValueForProperty(selection, 'background-color', '#fff')\r\n fontFamily.value = FONT_FAMILY_OPTIONS.find(item=>item.value==ff) \|\| FONT_FAMILY_OPTIONS[0];\r\n\r\n disabled.value = false;\r\n }\r\n else{\r\n\r\n disabled.value = true;\r\n }\r\n}\r\n\r\n// 文字样式\r\nconst fontStyleHandle = (data : any,styleName?:any)=>{\r\n fontSize.value = data.label;\r\n editor.update(() => {\r\n const selection = $getSelection()\r\n if (selection !== null) {\r\n $patchStyleText(selection, {\r\n [styleName \|\| \"font-size\"]:data.value\r\n })\r\n }\r\n })\r\n}\r\n\r\n// 字体颜色\r\nwatch(fontColor,(color:any)=>{\r\n editor.update(() => {\r\n const selection = $getSelection()\r\n if (selection !== null){\r\n $patchStyleText(selection, { color })\r\n }\r\n },{})\r\n})\r\n\r\n// bg颜色\r\nwatch(bgColor,(color:any)=>{\r\n editor.update(() => {\r\n const selection = $getSelection()\r\n if (selection !== null){\r\n $patchStyleText(selection, { 'background-color':color })\r\n }\r\n },{})\r\n})\r\n\r\n// 挂载的时候\r\nonMounted(() => {\r\n\r\n const unregisterMergeListener = mergeRegister(\r\n editor.registerUpdateListener(({ editorState }) => {\r\n editorState.read(() => updateToolbar())\r\n }),\r\n // editor.registerCommand(SELECTION_CHANGE_COMMAND, (_payload, _newEditor) => updateToolbar()!,lowPriority)\r\n )\r\n\r\n onUnmounted(() => unregisterMergeListener());\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n <!-- 字体 -->\r\n <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n <el-button text :style=\"{fontFamily:fontFamily.value}\" :disabled=\"disabled\">\r\n {{fontFamily.label}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n </el-button>\r\n <template #dropdown>\r\n <el-dropdown-menu>\r\n <el-dropdown-item :class=\"{active:fontFamily.label == item.label}\" :disabled=\"disabled\" v-for=\"item in FONT_FAMILY_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item,'font-family')\">\r\n <span :style=\"{fontFamily:item.value}\">\r\n {{item.label}}\r\n </span>\r\n </el-dropdown-item>\r\n </el-dropdown-menu>\r\n </template>\r\n </el-dropdown>\r\n <el-divider direction=\"vertical\" /> \r\n <!-- 字体大小 -->\r\n <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n <el-button text :disabled=\"disabled\">\r\n {{fontSize}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n </el-button>\r\n <template #dropdown>\r\n <el-dropdown-menu>\r\n <el-dropdown-item :class=\"{active:fontSize==item.label}\" :disabled=\"disabled\" v-for=\"item in FONT_SIZE_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item)\">{{item.label}}</el-dropdown-item>\r\n </el-dropdown-menu>\r\n </template>\r\n </el-dropdown>\r\n <el-divider direction=\"vertical\" /> \r\n <!-- 字体颜色 -->\r\n <el-button text class=\"mk-doc-editor-toolbar__fontcolor\" :disabled=\"disabled\" >\r\n <el-color-picker v-model=\"fontColor\" :disabled=\"disabled\" />\r\n </el-button>\r\n <!-- 背景颜色 -->\r\n <el-button text class=\"mk-doc-editor-toolbar__bgcolor\" :disabled=\"disabled\" >\r\n <el-color-picker v-model=\"bgColor\" :disabled=\"disabled\" />\r\n <MKSvgIcon class=\"view\" iconClass=\"doc-background-color\" /> \r\n </el-button>\r\n\r\n <el-divider direction=\"vertical\" />\r\n <el-button-group>\r\n <el-button :disabled=\"disabled\" text :class=\"`${isBold ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\">\r\n <MKSvgIcon iconClass=\"doc-bold\" /> \r\n </el-button>\r\n <el-button :disabled=\"disabled\" text :class=\"`${isItalic ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')\">\r\n <MKSvgIcon iconClass=\"doc-italic\" /> \r\n </el-button>\r\n <el-button :disabled=\"disabled\" text :class=\"`${isUnderline ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')\">\r\n <MKSvgIcon iconClass=\"doc-underline\" /> \r\n </el-button>\r\n <el-button :disabled=\"disabled\" text :class=\"`${isStrikethrough ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')\">\r\n <MKSvgIcon iconClass=\"doc-strikethrough\" /> \r\n </el-button>\r\n </el-button-group>\r\n <el-divider direction=\"vertical\" />\r\n <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n <el-button text :style=\"{fontFamily:fontFamily.value}\" :disabled=\"disabled\">\r\n <MKSvgIcon :iconClass=\"`doc-align-${alignValue}`\" style=\"font-size: 18px;\" /> \r\n </el-button>\r\n <template #dropdown>\r\n <el-dropdown-menu>\r\n <el-dropdown-item :disabled=\"disabled\" :class=\"{active:alignValue == item}\" v-for=\"item in alignList\" :value=\"item\" @click=\"editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, item)\">\r\n <MKSvgIcon :iconClass=\"`doc-align-${item}`\" style=\"font-size: 18px;\" /> \r\n </el-dropdown-item>\r\n </el-dropdown-menu>\r\n </template>\r\n </el-dropdown>\r\n</template>\r\n"],"names":["useLexicalComposer","ref","FONT_FAMILY_OPTIONS","selection","$getSelection","$isRangeSelection","$findMatchingParent","$isRootOrShadowRoot","$getSelectionStyleValueForProperty","ROOT_FONT_SIZE","$patchStyleText","watch","onMounted","mergeRegister","onUnmounted"],"mappings":"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"}
1	+ {"version":3,"file":"FontStyleTool.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/FontStyleTool.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {\r\n $getSelection,\r\n $isRangeSelection,\r\n $isRootOrShadowRoot,\r\n $isParagraphNode,\r\n FORMAT_TEXT_COMMAND,\r\n FORMAT_ELEMENT_COMMAND,\r\n type ElementFormatType,\r\n} from 'lexical'\r\nimport {\r\n $getSelectionStyleValueForProperty,\r\n $patchStyleText,\r\n} from '@lexical/selection'\r\n\r\nimport { $isLinkNode, TOGGLE_LINK_COMMAND,LinkNode } from '@lexical/link'\r\nimport { sanitizeUrl } from '../../utils/url'\r\nimport { getSelectedNode } from '../../utils/getSelectedNode'\r\nimport { $findMatchingParent,mergeRegister } from '@lexical/utils'\r\nimport { useLexicalComposer } from 'lexical-vue'\r\nimport { onMounted, onUnmounted, ref,watch } from 'vue'\r\nimport { FONT_SIZE_OPTIONS,ROOT_FONT_SIZE,FONT_FAMILY_OPTIONS } from \"./FontStyleDefines\"\r\nimport { ShowLinkEditPanel } from \"../AutoLinkPlugin/LinkEditDialog\";\r\n\r\nconst editor = useLexicalComposer()\r\nconst fontSize = ref('14px')\r\nconst fontColor = ref<string>('#000')\r\nconst bgColor = ref<string>('#fff')\r\nconst fontFamily = ref<any>(FONT_FAMILY_OPTIONS[0])\r\nconst isBold = ref(false)\r\nconst isItalic = ref(false)\r\nconst isUnderline = ref(false)\r\nconst isStrikethrough = ref(false)\r\n\r\n// 对齐方式\r\nconst alignList = ref<ElementFormatType[]>([\"left\",\"center\",\"right\",\"justify\"])\r\nconst alignValue = ref(alignList.value[0])\r\nconst disabled = ref(false)\r\nconst isLink = ref(false)\r\nconst linkValue = ref(\"\");\r\n\r\nasync function insertLink() {\r\n\r\n const result:any = await ShowLinkEditPanel(linkValue.value);\r\n\r\n if(result.trim()){\r\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(result))\r\n }\r\n else{\r\n editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)\r\n }\r\n}\r\n\r\n// 更新状态栏\r\nfunction updateToolbar() {\r\n\r\n const selection = $getSelection()\r\n\r\n if ($isRangeSelection(selection)) {\r\n\r\n const anchorNode = selection.anchor.getNode()\r\n\r\n let element = anchorNode.getKey() === 'root'\r\n ? anchorNode\r\n : $findMatchingParent(anchorNode, (e) => {\r\n const parent = e.getParent()\r\n return parent !== null && $isRootOrShadowRoot(parent)\r\n });\r\n\r\n\r\n if (element === null){\r\n element = anchorNode.getTopLevelElementOrThrow()\r\n }\r\n\r\n let elementDOM = editor.getElementByKey(element.getKey());\r\n\r\n // 文本对齐\r\n alignValue.value = (elementDOM?.style.textAlign as ElementFormatType) \|\| \"left\";\r\n\r\n if(alignValue.value == \"start\"){ alignValue.value = \"left\"; }\r\n else if(alignValue.value == \"end\"){ alignValue.value = \"right\"; }\r\n\r\n // Update text format\r\n isBold.value = selection.hasFormat('bold')\r\n isItalic.value = selection.hasFormat('italic')\r\n isUnderline.value = selection.hasFormat('underline')\r\n isStrikethrough.value = selection.hasFormat('strikethrough')\r\n\r\n // Handle buttons\r\n var ff = $getSelectionStyleValueForProperty(selection, 'font-family', 'Arial');\r\n let fs = $getSelectionStyleValueForProperty(selection, 'font-size', '1rem');\r\n \r\n if(fs){\r\n fontSize.value = Math.round(parseFloat(fs) * ROOT_FONT_SIZE)+\"px\"\r\n }\r\n \r\n fontColor.value = $getSelectionStyleValueForProperty(selection, 'color', '#000')\r\n bgColor.value = $getSelectionStyleValueForProperty(selection, 'background-color', '#fff')\r\n fontFamily.value = FONT_FAMILY_OPTIONS.find(item=>item.value==ff) \|\| FONT_FAMILY_OPTIONS[0];\r\n\r\n disabled.value = false;\r\n\r\n // Update links\r\n const node = getSelectedNode(selection)\r\n const parent = node.getParent()\r\n isLink.value = $isLinkNode(parent) \|\| $isLinkNode(node)\r\n if(isLink.value){\r\n linkValue.value = $isLinkNode(parent) ? parent.getURL() : (node as LinkNode).getURL()\r\n }\r\n else{\r\n linkValue.value = \"\";\r\n }\r\n }\r\n else{\r\n\r\n disabled.value = true;\r\n }\r\n}\r\n\r\n// 文字样式\r\nconst fontStyleHandle = (data : any,styleName?:any)=>{\r\n fontSize.value = data.label;\r\n editor.update(() => {\r\n const selection = $getSelection()\r\n if (selection !== null) {\r\n $patchStyleText(selection, {\r\n [styleName \|\| \"font-size\"]:data.value\r\n })\r\n }\r\n })\r\n}\r\n\r\n// 字体颜色\r\nwatch(fontColor,(color:any)=>{\r\n editor.update(() => {\r\n const selection = $getSelection()\r\n if (selection !== null){\r\n $patchStyleText(selection, { color })\r\n }\r\n },{})\r\n})\r\n\r\n// bg颜色\r\nwatch(bgColor,(color:any)=>{\r\n editor.update(() => {\r\n const selection = $getSelection()\r\n if (selection !== null){\r\n $patchStyleText(selection, { 'background-color':color })\r\n }\r\n },{})\r\n})\r\n\r\n// 挂载的时候\r\nonMounted(() => {\r\n\r\n const unregisterMergeListener = mergeRegister(\r\n editor.registerUpdateListener(({ editorState }) => {\r\n editorState.read(() => updateToolbar())\r\n }),\r\n // editor.registerCommand(SELECTION_CHANGE_COMMAND, (_payload, _newEditor) => updateToolbar()!,lowPriority)\r\n )\r\n\r\n onUnmounted(() => unregisterMergeListener());\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n <!-- 字体 -->\r\n <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n <el-button text :style=\"{fontFamily:fontFamily.value}\" :disabled=\"disabled\">\r\n {{fontFamily.label}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n </el-button>\r\n <template #dropdown>\r\n <el-dropdown-menu>\r\n <el-dropdown-item :class=\"{active:fontFamily.label == item.label}\" :disabled=\"disabled\" v-for=\"item in FONT_FAMILY_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item,'font-family')\">\r\n <span :style=\"{fontFamily:item.value}\">\r\n {{item.label}}\r\n </span>\r\n </el-dropdown-item>\r\n </el-dropdown-menu>\r\n </template>\r\n </el-dropdown>\r\n <el-divider direction=\"vertical\" /> \r\n <!-- 字体大小 -->\r\n <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n <el-button text :disabled=\"disabled\">\r\n {{fontSize}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n </el-button>\r\n <template #dropdown>\r\n <el-dropdown-menu>\r\n <el-dropdown-item :class=\"{active:fontSize==item.label}\" :disabled=\"disabled\" v-for=\"item in FONT_SIZE_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item)\">{{item.label}}</el-dropdown-item>\r\n </el-dropdown-menu>\r\n </template>\r\n </el-dropdown>\r\n <el-divider direction=\"vertical\" /> \r\n <!-- 字体颜色 -->\r\n <el-button text class=\"mk-doc-editor-toolbar__fontcolor\" :disabled=\"disabled\" >\r\n <el-color-picker v-model=\"fontColor\" :disabled=\"disabled\" />\r\n </el-button>\r\n <!-- 背景颜色 -->\r\n <el-button text class=\"mk-doc-editor-toolbar__bgcolor\" :disabled=\"disabled\" >\r\n <el-color-picker v-model=\"bgColor\" :disabled=\"disabled\" />\r\n <MKSvgIcon class=\"view\" iconClass=\"doc-background-color\" /> \r\n </el-button>\r\n\r\n <el-divider direction=\"vertical\" />\r\n <el-button-group>\r\n <el-button :disabled=\"disabled\" text :class=\"`${isBold ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\">\r\n <MKSvgIcon iconClass=\"doc-bold\" /> \r\n </el-button>\r\n <el-button :disabled=\"disabled\" text :class=\"`${isItalic ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')\">\r\n <MKSvgIcon iconClass=\"doc-italic\" /> \r\n </el-button>\r\n <el-button :disabled=\"disabled\" text :class=\"`${isUnderline ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')\">\r\n <MKSvgIcon iconClass=\"doc-underline\" /> \r\n </el-button>\r\n <el-button :disabled=\"disabled\" text :class=\"`${isStrikethrough ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')\">\r\n <MKSvgIcon iconClass=\"doc-strikethrough\" /> \r\n </el-button>\r\n </el-button-group>\r\n <el-divider direction=\"vertical\" />\r\n <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n <el-button text :style=\"{fontFamily:fontFamily.value}\" :disabled=\"disabled\">\r\n <MKSvgIcon :iconClass=\"`doc-align-${alignValue}`\" style=\"font-size: 18px;\" /> \r\n </el-button>\r\n <template #dropdown>\r\n <el-dropdown-menu>\r\n <el-dropdown-item :disabled=\"disabled\" :class=\"{active:alignValue == item}\" v-for=\"item in alignList\" :value=\"item\" @click=\"editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, item)\">\r\n <MKSvgIcon :iconClass=\"`doc-align-${item}`\" style=\"font-size: 18px;\" /> \r\n </el-dropdown-item>\r\n </el-dropdown-menu>\r\n </template>\r\n </el-dropdown>\r\n <el-divider direction=\"vertical\" />\r\n <!-- 链接 -->\r\n <el-button-group>\r\n <el-button text :disabled=\"disabled\" :class=\"`${isLink ? 'active' : ''}`\" @click=\"insertLink\">\r\n <MKSvgIcon iconClass=\"doc-link\" /> \r\n </el-button>\r\n </el-button-group>\r\n</template>\r\n"],"names":["useLexicalComposer","ref","FONT_FAMILY_OPTIONS","ShowLinkEditPanel","TOGGLE_LINK_COMMAND","sanitizeUrl","selection","$getSelection","$isRangeSelection","$findMatchingParent","parent","$isRootOrShadowRoot","$getSelectionStyleValueForProperty","ROOT_FONT_SIZE","getSelectedNode","$isLinkNode","$patchStyleText","watch","onMounted","mergeRegister","onUnmounted"],"mappings":"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"}

package/dist/cjs/components/basic/doc-editor/plugins/ToolbarPlugin/PreviewToolbar.vue.js CHANGED Viewed

@@ -1,11 +1,12 @@
 "use strict";
 const vue = require("vue");
 const lexicalVue = require("lexical-vue");
-const commands = require("../commands.js");
 const html = require("@lexical/html");
+const index = require("../../core/index.js");
 const docTheme = require("../../themes/doc-theme.css.js");
 const docEditor = require("../../themes/doc-editor.css.js");
-const _hoisted_1 = ["srcdoc"];
+const composables = require("../ModulePlugin/composables.js");
+const _hoisted_1 = /* @__PURE__ */ vue.createElementVNode("div", null, null, -1);
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "PreviewToolbar",
   props: {
@@ -21,46 +22,46 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       return (_c = (_b = (_a = iframeContentRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document) == null ? void 0 : _c.body;
     });
     const codeDialogVisible = vue.ref(false);
-    const srcdoc = vue.ref("");
-    const linkStr = props.css.split(",").map((path) => {
-      return `<link crossorigin href="${path}" />`;
-    }).join("");
+    vue.ref("");
     props.css.split(",").map((path) => {
-      return `<link crossorigin href="${path}" />`;
-    }).join("");
-    const viewDevice = vue.ref("pc");
-    const createViewContent = (content) => {
-      srcdoc.value = `
-    <html>
-      <head>
-        <style type="text/css">
-          ${docEditor}
-          ${docTheme}
-        </style>
-        ${linkStr}
-      </head>
-      <body style="font-size:${viewDevice.value == "pc" ? "14px" : "18px"}">${content}</body>
-    </html>
-  `;
-    };
+      return `<link crossorigin href="${path}" type="text/xml" />`;
+    }).join("\r\n");
     const show = function() {
-      editor.getEditorState().read(() => {
-        createViewContent(html.$generateHtmlFromNodes(editor));
-        setTimeout(() => {
-          var _a;
-          if (iframeBody.value.scrollHeight > iframeBody.value.offsetHeight) {
-            iframeContentRef.value.style.height = ((_a = iframeBody.value) == null ? void 0 : _a.scrollHeight) + 10 + "px";
-          }
-        }, 100);
-      });
       codeDialogVisible.value = true;
+      vue.nextTick(() => {
+        editor.getEditorState().read(() => {
+          var _a, _b;
+          const doc = (_b = (_a = iframeContentRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document;
+          console.log(doc, doc.head);
+          const style = document.createElement("style");
+          style.setAttribute("type", "text/css");
+          style.innerHTML = [docEditor, docTheme].join("\r\n");
+          style.innerHTML += composables.useModules().filter((item) => item.editorCss).map((item) => item.editorCss).join("\r\n");
+          doc.head.append(style);
+          props.js.split(",").filter((item) => !!item).forEach((path) => {
+            const script = document.createElement("script");
+            script.src = path;
+            script.setAttribute("crossorigin", "true");
+            doc.head.append(script);
+          });
+          props.css.split(",").filter((item) => !!item).forEach((path) => {
+            const link = document.createElement("link");
+            link.href = path;
+            link.setAttribute("rel", "stylesheet");
+            link.setAttribute("crossorigin", "true");
+            doc.head.append(link);
+          });
+          iframeBody.value.style.fontSize = index.DEVICE_VIEW_MODE.value == "pc" ? "14px" : "18px";
+          doc.body.innerHTML = html.$generateHtmlFromNodes(editor);
+          setTimeout(() => {
+            var _a2;
+            if (iframeBody.value.scrollHeight > iframeBody.value.offsetHeight) {
+              iframeContentRef.value.style.height = ((_a2 = iframeBody.value) == null ? void 0 : _a2.scrollHeight) + 10 + "px";
+            }
+          }, 100);
+        });
+      });
     };
-    vue.onMounted(() => {
-      editor.registerCommand(commands.DEVICE_VIEW_MODE, (payload) => {
-        viewDevice.value = payload;
-        return false;
-      }, 1);
-    });
     return (_ctx, _cache) => {
       const _component_MKSvgIcon = vue.resolveComponent("MKSvgIcon");
       const _component_el_button = vue.resolveComponent("el-button");
@@ -84,17 +85,21 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           fullscreen: ""
         }, {
           default: vue.withCtx(() => [
-            codeDialogVisible.value ? (vue.openBlock(), vue.createElementBlock("div", {
-              key: 0,
-              class: vue.normalizeClass(["mk-doc-editor__view_warp", viewDevice.value])
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(["mk-doc-editor__view_warp", vue.unref(index.DEVICE_VIEW_MODE)])
             }, [
               vue.createElementVNode("iframe", {
                 class: "mk-doc-editor__view_iframe",
                 ref_key: "iframeContentRef",
-                ref: iframeContentRef,
-                srcdoc: srcdoc.value
-              }, null, 8, _hoisted_1)
-            ], 2)) : vue.createCommentVNode("", true)
+                ref: iframeContentRef
+              }, null, 512),
+              iframeBody.value ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
+                key: 0,
+                to: iframeBody.value
+              }, [
+                _hoisted_1
+              ], 8, ["to"])) : vue.createCommentVNode("", true)
+            ], 2)
           ]),
           _: 1
         }, 8, ["modelValue"])

package/dist/cjs/components/basic/doc-editor/plugins/ToolbarPlugin/PreviewToolbar.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PreviewToolbar.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/PreviewToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { useLexicalComposer } from 'lexical-vue'\r\nimport { ~~DEVICE_VIEW_MODE } from \"../commands\"\r\nimport {~~ $generateHtmlFromNodes} from '@lexical/html'\r\nimport { ~~onMounted,~~ref,computed,defineProps } from \"vue\"\r\nimport DocThemeCss from \"../../themes/doc-theme.css?raw\";\r\nimport DocEditorCss from \"../../themes/doc-editor.css?raw\";\r\n\r\nconst editor = useLexicalComposer()\r\n// 参数\r\nconst props = defineProps({\r\n js:{ type:String,default:`` },\r\n css:{ type:String,default:`` }\r\n})\r\n// iframe 编辑器\r\nconst iframeContentRef = ref(null as any);\r\nconst iframeBody = computed<any>(()=>iframeContentRef.value?.contentWindow?.document?.body)\r\n\r\nconst codeDialogVisible = ref(false);\r\nconst srcdoc = ref(\"\");\r\nconst linkStr = props.css.split(\",\").map(path=>{\r\n return `<link crossorigin href=\"${path}\" />`\r\n}).join(\"\");\r\~~nconst~~ scriptStr = props.css.split(\",\").map(path=>{\r\n return `<~~link~~ crossorigin ~~href~~=\"${path}\" ~~/>`\~~r\n}).join(\"\");\r\n // // ~~扩展的js和css~~\r\n // ~~props~~.~~js.split~~(~~\",\"~~).~~forEach~~(~~path~~=>{\r\n // const ~~script~~ = document.createElement(\"~~script~~\");\r\n // ~~script~~.~~src~~ = ~~path~~;\r\n ~~// script~~.~~setAttribute~~(\"~~crossorigin~~\"~~,\"true\"~~)\r\n // doc.head.append(~~script~~);\r\n // })\r\n // props.~~css~~.split(\",\").forEach(path=>{\r\n // const ~~link~~ = document.createElement(\"~~link~~\");\r\n ~~// link~~.~~href~~ = path;\r\n ~~// link~~.setAttribute(\"crossorigin\",\"true\")\r\n // doc.head.append(~~link~~);\r\n // })\r\n\~~r\n// pc \| mobile\r\nconst viewDevice = ref~~(~~'pc'~~)\r\n~~\r\n//~~ ~~创建预览内容\r\nconst~~ ~~createViewContent~~ = (~~content:string~~)~~=>{\~~r\n ~~srcdoc~~.~~value~~ = `\r\n ~~<html>\r~~\~~n <head>\r~~\~~n <style type=\~~"~~text/css~~\">\r\n ~~${DocEditorCss}~~\r\~~n ${DocThemeCss}~~\r\n ~~</style>\~~r\n ~~${linkStr~~}\r\n ~~</head>\~~r\n ~~<body~~ style~~=\"font-size:${(viewDevice~~.value=='pc~~'?\~~"14px\":\"18px\"~~)}\">${content}</body>\~~r\n ~~</html>\r~~\~~n `;\~~r\n~~}\r\n\r\n~~// ~~显示\~~r\~~nconst show = function(){\r\~~n~~\r\n editor~~.~~getEditorState()~~.~~read(()~~ => ~~{\r\n createViewContent(~~$generateHtmlFromNodes(editor))\r\n setTimeout(() => {\r\n if(iframeBody.value.scrollHeight > iframeBody.value.offsetHeight){\r\n iframeContentRef.value.style.height = (iframeBody.value?.scrollHeight + 10)+\"px\";\r\n }\r\n }, 100);\r\n })\r\n~~\r\n~~ ~~codeDialogVisible.value = true~~;\r\n \r\n}\r\~~nonMounted(()=>{\r\~~n ~~editor.registerCommand(DEVICE_VIEW_MODE,(payload: string) => {~~\r\n ~~viewDevice.value = payload;\r~~\~~n return false\~~r\n ~~},1)~~\r\n~~});\r~~\n\r\n</script>\r\n\r\n<template>\r\n <el-button text @click=\"show\">\r\n <MKSvgIcon iconClass=\"View\" /> \r\n </el-button>\r\n <el-dialog v-model=\"codeDialogVisible\" append-to-body title=\"预览\" width=\"80%\" fullscreen>\r\n <div class=\"mk-doc-editor__view_warp\" :class=\"~~viewDevice~~\" ~~v-if=\"codeDialogVisible\"~~>\r\n <iframe class=\"mk-doc-editor__view_iframe\" ref=\"iframeContentRef\" :~~srcdoc~~=\"~~srcdoc~~\"></~~iframe~~>\r\n </div>\r\n </el-dialog>\r\n</template>\r\n"],"names":["useLexicalComposer","ref","computed","DocEditorCss","DocThemeCss","~~$generateHtmlFromNodes~~","~~onMounted~~","~~DEVICE_VIEW_MODE~~"],"mappings":"~~;;;;;;;;;;;;;;;AASA~~,UAAM,SAASA,WAAAA;AAEf,UAAM,QAAQ;AAKR,UAAA,mBAAmBC,QAAI,IAAW;AACxC,UAAM,aAAaC,IAAc,SAAA;;AAAI,gDAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC,aAAvC,mBAAiD;AAAA,KAAI;AAEpF,UAAA,oBAAoBD,QAAI,KAAK;~~AAC7B~~,~~UAAA~~,~~SAASA~~,~~QAAI,~~EAAE;~~AACrB~~,UAAM,~~UAAU,MAAM,~~IAAI,MAAM,GAAG,EAAE,IAAI,CAAM,SAAA;AAC7C,aAAO,2BAA2B,IAAI;AAAA,IAAA,CACvC,EAAE,KAAK,EAAE;~~AACQ~~,UAAM,IAAI,MAAM,GAAG,EAAE,IAAI,CAAM,SAAA;AAC/C,~~aAAO~~,~~2BAA2B~~,~~IAAI~~;~~AAAA~~,~~IAAA~~,~~CACvC~~,~~EAAE~~,KAAK,~~EAAE~~;~~AAgBJ~~,UAAA,~~aAAaA~~,~~QAAI~~,IAAI~~;AAGrB~~,~~UAAA~~,~~oBAAoB~~,CAAC,~~YAAiB;AAC1C~~,~~aAAO~~,QAAQ~~;AAAA;AAAA;AAAA;AAAA~~,~~YAILE~~,~~SAAY~~;~~AAAA~~,~~YACZC~~,~~QAAW~~;~~AAAA;AAAA~~,~~UAEb~~,OAAO;~~AAAA~~;~~AAAA,+BAEe~~,~~WAAW~~,~~SAAO~~,~~OAAK~~,~~SAAO~~,~~MAAO~~,KAAK,OAAO;AAAA~~;AAAA;AAAA~~,~~IAAA~~;~~AAMjF~~,~~UAAM~~,OAAO,~~WAAU~~;~~AAEd~~,~~aAAA~~,~~iBAAiB,~~KAAK,~~MAAM;AACf~~,~~0BAAAC~~,~~KAAAA,~~uBAAuB,MAAM~~,CAAC~~;~~AAChD~~,~~mBAAW~~,MAAM;;AACf,~~cAAG~~,WAAW,MAAM,eAAe,WAAW,MAAM,cAAa;AAC/D,~~6BAAiB,~~MAAM,MAAM,~~WAAU~~,~~gBAAW~~,UAAX,~~mBAAkB~~,gBAAe,KAAI;AAAA,~~UAC9E~~;AAAA,~~WACC~~,GAAG;AAAA,~~MAAA~~,CACP;~~AAED,wBAAkB,QAAQ;~~AAAA,~~IAAA;AAG5BC~~,~~QAAAA,UAAU,MAAI~~;~~AACL,aAAA,gBAAgBC,2BAAiB,CAAC,YAAoB;AAC3D,mBAAW,QAAQ;AACZ,eAAA;~~AAAA,~~SACP,CAAC;AAAA,~~IAAA~~,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"PreviewToolbar.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/PreviewToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { useLexicalComposer } from 'lexical-vue'\r\nimport { $generateHtmlFromNodes} from '@lexical/html'\r\nimport { ref,computed,defineProps,watch, nextTick } from \"vue\"\r\nimport { DEVICE_VIEW_MODE } from \"../../core\"\r\nimport DocThemeCss from \"../../themes/doc-theme.css?raw\";\r\nimport DocEditorCss from \"../../themes/doc-editor.css?raw\";\r\nimport { useModules } from \"../ModulePlugin/composables\"\r\n\r\nconst editor = useLexicalComposer()\r\n// 参数\r\nconst props = defineProps({\r\n js:{ type:String,default:`` },\r\n css:{ type:String,default:`` }\r\n})\r\n// iframe 编辑器\r\nconst iframeContentRef = ref(null as any);\r\nconst iframeBody = computed<any>(()=>iframeContentRef.value?.contentWindow?.document?.body)\r\n\r\nconst codeDialogVisible = ref(false);\r\nconst srcdoc = ref(\"\");\r\nconst linkStr = props.css.split(\",\").map(path=>{\r\n return `<link crossorigin href=\"${path}\" type=\"text/xml\" />`\r\n}).join(\"\\r\\n\");\r\n\r\n// const scriptStr = props.css.split(\",\").map(path=>{\r\n// return `<script1 crossorigin src=\"${path}\"></script1>`\r\n// }).join(\"\");\r\n \r\n\r\n// 显示\r\nconst show = function(){\r\n\r\n codeDialogVisible.value = true;\r\n\r\n nextTick(()=>{\r\n\r\n editor.getEditorState().read(() => {\r\n\r\n const doc = iframeContentRef.value?.contentWindow?.document;\r\n\r\n console.log(doc,doc.head)\r\n\r\n // 样式\r\n const style = document.createElement(\"style\");\r\n style.setAttribute(\"type\",\"text/css\")\r\n\r\n // 默认样式\r\n style.innerHTML = [DocEditorCss,DocThemeCss].join(\"\\r\\n\");\r\n //模块渲染样式\r\n style.innerHTML += useModules().filter(item=>item.editorCss).map(item=>item.editorCss).join(\"\\r\\n\");\r\n doc.head.append(style);\r\n\r\n // 扩展的js和css\r\n props.js.split(\",\").filter(item=>!!item).forEach(path=>{\r\n const script = document.createElement(\"script\");\r\n script.src = path;\r\n script.setAttribute(\"crossorigin\",\"true\")\r\n doc.head.append(script);\r\n })\r\n props.css.split(\",\").filter(item=>!!item).forEach(path=>{\r\n const link = document.createElement(\"link\");\r\n link.href = path;\r\n link.setAttribute(\"rel\",\"stylesheet\")\r\n link.setAttribute(\"crossorigin\",\"true\")\r\n doc.head.append(link);\r\n })\r\n\r\n // 预览显示\r\n iframeBody.value.style.fontSize = DEVICE_VIEW_MODE.value == \"pc\" ? \"14px\" : \"18px\";\r\n\r\n // 预览内容\r\n doc.body.innerHTML = $generateHtmlFromNodes(editor);\r\n\r\n setTimeout(() => {\r\n if(iframeBody.value.scrollHeight > iframeBody.value.offsetHeight){\r\n iframeContentRef.value.style.height = (iframeBody.value?.scrollHeight + 10)+\"px\";\r\n }\r\n }, 100);\r\n })\r\n });\r\n\r\n\r\n \r\n}\r\n\r\n\r\n</script>\r\n\r\n<template>\r\n <el-button text @click=\"show\">\r\n <MKSvgIcon iconClass=\"View\" /> \r\n </el-button>\r\n <el-dialog v-model=\"codeDialogVisible\" append-to-body title=\"预览\" width=\"80%\" fullscreen>\r\n <div class=\"mk-doc-editor__view_warp\" :class=\"DEVICE_VIEW_MODE\">\r\n <iframe class=\"mk-doc-editor__view_iframe\" ref=\"iframeContentRef\"></iframe>\r\n <Teleport v-if=\"iframeBody\" :to=\"iframeBody\">\r\n <div></div>\r\n </Teleport>\r\n </div>\r\n </el-dialog>\r\n</template>\r\n"],"names":["useLexicalComposer","ref","computed","nextTick","DocEditorCss","DocThemeCss","useModules","DEVICE_VIEW_MODE","$generateHtmlFromNodes","_a"],"mappings":";;;;;;;;;;;;;;;;AAUA,UAAM,SAASA,WAAAA;AAEf,UAAM,QAAQ;AAKR,UAAA,mBAAmBC,QAAI,IAAW;AACxC,UAAM,aAAaC,IAAc,SAAA;;AAAI,gDAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC,aAAvC,mBAAiD;AAAA,KAAI;AAEpF,UAAA,oBAAoBD,QAAI,KAAK;AACpBA,QAAAA,IAAI,EAAE;AACL,UAAM,IAAI,MAAM,GAAG,EAAE,IAAI,CAAM,SAAA;AAC7C,aAAO,2BAA2B,IAAI;AAAA,IAAA,CACvC,EAAE,KAAK,MAAM;AAQd,UAAM,OAAO,WAAU;AAErB,wBAAkB,QAAQ;AAE1BE,UAAAA,SAAS,MAAI;AAEJ,eAAA,iBAAiB,KAAK,MAAM;;AAE3B,gBAAA,OAAM,4BAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC;AAE3C,kBAAA,IAAI,KAAI,IAAI,IAAI;AAGlB,gBAAA,QAAQ,SAAS,cAAc,OAAO;AACtC,gBAAA,aAAa,QAAO,UAAU;AAGpC,gBAAM,YAAY,CAACC,WAAaC,QAAW,EAAE,KAAK,MAAM;AAExD,gBAAM,aAAaC,YAAA,WAAA,EAAa,OAAO,UAAM,KAAK,SAAS,EAAE,IAAI,CAAM,SAAA,KAAK,SAAS,EAAE,KAAK,MAAM;AAC9F,cAAA,KAAK,OAAO,KAAK;AAGf,gBAAA,GAAG,MAAM,GAAG,EAAE,OAAO,CAAM,SAAA,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAM,SAAA;AAC/C,kBAAA,SAAS,SAAS,cAAc,QAAQ;AAC9C,mBAAO,MAAM;AACN,mBAAA,aAAa,eAAc,MAAM;AACpC,gBAAA,KAAK,OAAO,MAAM;AAAA,UAAA,CACvB;AACK,gBAAA,IAAI,MAAM,GAAG,EAAE,OAAO,CAAM,SAAA,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAM,SAAA;AAChD,kBAAA,OAAO,SAAS,cAAc,MAAM;AAC1C,iBAAK,OAAO;AACP,iBAAA,aAAa,OAAM,YAAY;AAC/B,iBAAA,aAAa,eAAc,MAAM;AAClC,gBAAA,KAAK,OAAO,IAAI;AAAA,UAAA,CACrB;AAGD,qBAAW,MAAM,MAAM,WAAWC,MAAiB,iBAAA,SAAS,OAAO,SAAS;AAGxE,cAAA,KAAK,YAAYC,KAAA,uBAAuB,MAAM;AAElD,qBAAW,MAAM;;AACf,gBAAG,WAAW,MAAM,eAAe,WAAW,MAAM,cAAa;AAC/D,+BAAiB,MAAM,MAAM,WAAUC,MAAA,WAAW,UAAX,gBAAAA,IAAkB,gBAAe,KAAI;AAAA,YAC9E;AAAA,aACC,GAAG;AAAA,QAAA,CACP;AAAA,MAAA,CACF;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/ToolbarPlugin/index.vue.js CHANGED Viewed

@@ -3,11 +3,10 @@ const vue = require("vue");
 const lexical = require("lexical");
 const utils = require("@lexical/utils");
 const lexicalVue = require("lexical-vue");
+const index = require("../../core/index.js");
 const PreviewToolbar_vue_vue_type_script_setup_true_lang = require("./PreviewToolbar.vue.js");
 const FontStyleTool_vue_vue_type_script_setup_true_lang = require("./FontStyleTool.vue.js");
 const ContentStyleTool_vue_vue_type_script_setup_true_lang = require("./ContentStyleTool.vue.js");
-const defines = require("./defines.js");
-const commands = require("../commands.js");
 const LowPriority = 1;
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
@@ -20,7 +19,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const editor = lexicalVue.useLexicalComposer();
     const canUndo = vue.ref(false);
     const canRedo = vue.ref(false);
-    const viewDevice = vue.ref("pc");
     vue.onMounted(() => {
       const unregisterMergeListener = utils.mergeRegister(
         editor.registerCommand(
@@ -38,18 +36,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             return false;
           },
           LowPriority
-        ),
-        editor.registerCommand(
-          commands.DEVICE_VIEW_MODE,
-          (payload) => {
-            viewDevice.value = payload;
-            return false;
-          },
-          LowPriority
         )
       );
       vue.onUnmounted(() => {
-        defines.ToolbarExtendPlugins.length = 0;
+        index.ToolbarExtendPlugins.length = 0;
         unregisterMergeListener();
       });
     });
@@ -100,8 +90,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           default: vue.withCtx(() => [
             vue.createVNode(_component_el_button, {
               text: "",
-              class: vue.normalizeClass(`${viewDevice.value == "pc" ? "active" : ""}`),
-              onClick: _cache[2] || (_cache[2] = ($event) => vue.unref(editor).dispatchCommand(vue.unref(commands.DEVICE_VIEW_MODE), "pc"))
+              class: vue.normalizeClass(`${vue.unref(index.DEVICE_VIEW_MODE) == "pc" ? "active" : ""}`),
+              onClick: _cache[2] || (_cache[2] = ($event) => index.DEVICE_VIEW_MODE.value = "pc")
             }, {
               default: vue.withCtx(() => [
                 vue.createVNode(_component_MKSvgIcon, { iconClass: "Platform" })
@@ -110,8 +100,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             }, 8, ["class"]),
             vue.createVNode(_component_el_button, {
               text: "",
-              class: vue.normalizeClass(`${viewDevice.value == "mobile" ? "active" : ""}`),
-              onClick: _cache[3] || (_cache[3] = ($event) => vue.unref(editor).dispatchCommand(vue.unref(commands.DEVICE_VIEW_MODE), "mobile"))
+              class: vue.normalizeClass(`${vue.unref(index.DEVICE_VIEW_MODE) == "mobile" ? "active" : ""}`),
+              onClick: _cache[3] || (_cache[3] = ($event) => index.DEVICE_VIEW_MODE.value = "mobile")
             }, {
               default: vue.withCtx(() => [
                 vue.createVNode(_component_MKSvgIcon, { iconClass: "Iphone" })
@@ -126,7 +116,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           dropdown: vue.withCtx(() => [
             vue.createVNode(_component_el_dropdown_menu, null, {
               default: vue.withCtx(() => [
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(defines.ToolbarExtendPlugins), (item) => {
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(index.ToolbarExtendPlugins), (item) => {
                   return vue.openBlock(), vue.createBlock(_component_el_dropdown_item, {
                     key: item,
                     onClick: ($event) => item.action()

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type { CommandListenerPriority } from 'lexical'\r\nimport {\r\n CAN_REDO_COMMAND,\r\n CAN_UNDO_COMMAND,\r\n REDO_COMMAND,\r\n UNDO_COMMAND,\r\n} from 'lexical'\r\~~n\r\~~nimport { mergeRegister } from '@lexical/utils'\r\nimport { useLexicalComposer } from 'lexical-vue'\r\nimport { onMounted, onUnmounted, ref,defineProps } from 'vue'\r\nimport ~~PreviewToolbar~~ from \"~~./PreviewToolbar.vue~~\"\r\nimport ~~FontStyleToolbar~~ from \"./~~FontStyleTool~~.vue\"\r\nimport ~~ContentStyleToolbar~~ from \"./~~ContentStyleTool~~.vue\"\r\nimport { ~~ToolbarExtendPlugins }~~ from \"./~~defines~~\"\r\nimport { ~~DEVICE_VIEW_MODE~~ } from \"~~../commands~~\"\r\n~~\r\n~~// 参数\r\~~nconst props = defineProps~~({\r\n js:{ type:String,default:`` },\r\n css:{ type:String,default:`` }\r\n})\r\n\r\nconst LowPriority: CommandListenerPriority = 1\r\n\r\nconst toolbarRef = ref<HTMLDivElement \| null>(null)\r\nconst editor = useLexicalComposer()\r\n\r\nconst canUndo = ref(false)\r\nconst canRedo = ref(false)\r\n~~// pc \| mobile~~\r\~~nconst viewDevice = ref('pc')\r\n\r\n\r\~~nonMounted(() => {\r\n const unregisterMergeListener = mergeRegister(\r\n editor.registerCommand(\r\n CAN_UNDO_COMMAND,\r\n (payload: boolean) => {\r\n canUndo.value = payload\r\n return false\r\n },\r\n LowPriority,\r\n ),\r\n editor.registerCommand(\r\n CAN_REDO_COMMAND,\r\n (payload: boolean) => {\r\n canRedo.value = payload\r\n return false\r\n },\r\n LowPriority,\r\n )~~,\r~~\~~n editor.registerCommand(\~~r\n ~~DEVICE_VIEW_MODE,\r\n (payload: string) => {\r\n viewDevice.value = payload\r\n return false\r\n },\r\n LowPriority,\r\n )\r\n~~ )\r\n\r\n onUnmounted(() => {\r\n ToolbarExtendPlugins.length = 0;\r\n unregisterMergeListener()\r\n })\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n <div ref=\"toolbarRef\" class=\"mk-doc-editor-toolbar\">\r\n <el-button-group>\r\n <el-button text :disabled=\"!canUndo\" @click=\"editor.dispatchCommand(UNDO_COMMAND, undefined)\">\r\n <MKSvgIcon iconClass=\"RefreshLeft\" /> \r\n </el-button>\r\n <el-button text :disabled=\"!canRedo\" @click=\"editor.dispatchCommand(REDO_COMMAND, undefined)\">\r\n <MKSvgIcon iconClass=\"RefreshRight\" /> \r\n </el-button>\r\n </el-button-group>\r\n <el-divider direction=\"vertical\" />\r\n <!-- 内容 -->\r\n <ContentStyleToolbar />\r\n <el-divider direction=\"vertical\" /> \r\n <!-- 文字样式 -->\r\n <FontStyleToolbar ~~/>\~~r\n <el-divider direction=\"vertical\" />\r\n \r\n <el-button-group>\r\n <el-button text :class=\"`${~~viewDevice~~=='pc' ? 'active' : ''}`\" @click=\"~~editor.dispatchCommand(~~DEVICE_VIEW_MODE, 'pc')\">\r\n <MKSvgIcon iconClass=\"Platform\" /> \r\n </el-button>\r\n <el-button text :class=\"`${~~viewDevice~~=='mobile' ? 'active' : ''}`\" @click=\"~~editor.dispatchCommand(~~DEVICE_VIEW_MODE, 'mobile')\">\r\n <MKSvgIcon iconClass=\"Iphone\" /> \r\n </el-button>\r\n </el-button-group>\r\n <el-divider direction=\"vertical\" />\r\n <el-dropdown>\r\n <el-button text>\r\n <MKSvgIcon iconClass=\"Plus\" style=\"margin-right: 5px;\" /> 插入\r\n </el-button>\r\n <template #dropdown>\r\n <el-dropdown-menu>\r\n <el-dropdown-item v-for=\"item in ToolbarExtendPlugins\" :key=\"item\" @click=\"item.action()\">\r\n <MKSvgIcon :iconClass=\"item.icon\" /> \r\n {{item.text}}\r\n </el-dropdown-item>\r\n </el-dropdown-menu>\r\n </template>\r\n </el-dropdown>\r\n <el-divider direction=\"vertical\" />\r\n <el-button-group>\r\n <PreviewToolbar :js=\"js\" :css=\"css\" />\r\n </el-button-group>\r\n </div>\r\n</template>\r\n"],"names":["ref","useLexicalComposer","onMounted","mergeRegister","CAN_UNDO_COMMAND","CAN_REDO_COMMAND","~~DEVICE_VIEW_MODE","~~onUnmounted","ToolbarExtendPlugins"],"mappings":"~~;;;;;;;;;;AAwBA~~,MAAM,cAAuC;;;;;;;;AAEvC,UAAA,aAAaA,QAA2B,IAAI;AAClD,UAAM,SAASC,WAAAA;AAET,UAAA,UAAUD,QAAI,KAAK;AACnB,UAAA,UAAUA,QAAI,KAAK;~~AAEnB~~,~~UAAA,aAAaA,QAAI,IAAI;AAG3BE,~~QAAAA,UAAU,MAAM;AACd,YAAM,0BAA0BC,MAAA;AAAA,QAC9B,OAAO;AAAA,UACLC,QAAA;AAAA,UACA,CAAC,YAAqB;AACpB,oBAAQ,QAAQ;AACT,mBAAA;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACLC,QAAA;AAAA,UACA,CAAC,YAAqB;AACpB,oBAAQ,QAAQ;AACT,mBAAA;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,~~QACA,OAAO;AAAA,UACLC,SAAA;AAAA,UACA,CAAC,YAAoB;AACnB,uBAAW,QAAQ;AACZ,mBAAA;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,~~MAAA;AAGFC,UAAAA,YAAY,MAAM;AAChBC,~~gBAAA~~,qBAAqB,SAAS;AACN;MAAA,CACzB;AAAA,IAAA,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type { CommandListenerPriority } from 'lexical'\r\nimport {\r\n CAN_REDO_COMMAND,\r\n CAN_UNDO_COMMAND,\r\n REDO_COMMAND,\r\n UNDO_COMMAND,\r\n} from 'lexical'\r\nimport { mergeRegister } from '@lexical/utils'\r\nimport { useLexicalComposer } from 'lexical-vue'\r\nimport { onMounted, onUnmounted, ref,defineProps } from 'vue'\r\nimport { DEVICE_VIEW_MODE } from \"../../core\"\r\nimport PreviewToolbar from \"./PreviewToolbar.vue\"\r\nimport FontStyleToolbar from \"./FontStyleTool.vue\"\r\nimport ContentStyleToolbar from \"./ContentStyleTool.vue\"\r\nimport { ToolbarExtendPlugins } from \"../../core\"\r\n// 参数\r\ndefineProps({\r\n js:{ type:String,default:`` },\r\n css:{ type:String,default:`` }\r\n})\r\n\r\nconst LowPriority: CommandListenerPriority = 1\r\n\r\nconst toolbarRef = ref<HTMLDivElement \| null>(null)\r\nconst editor = useLexicalComposer()\r\n\r\nconst canUndo = ref(false)\r\nconst canRedo = ref(false)\r\n\r\nonMounted(() => {\r\n const unregisterMergeListener = mergeRegister(\r\n editor.registerCommand(\r\n CAN_UNDO_COMMAND,\r\n (payload: boolean) => {\r\n canUndo.value = payload\r\n return false\r\n },\r\n LowPriority,\r\n ),\r\n editor.registerCommand(\r\n CAN_REDO_COMMAND,\r\n (payload: boolean) => {\r\n canRedo.value = payload\r\n return false\r\n },\r\n LowPriority,\r\n )\r\n )\r\n\r\n onUnmounted(() => {\r\n ToolbarExtendPlugins.length = 0;\r\n unregisterMergeListener()\r\n })\r\n})\r\n\r\n\r\n</script>\r\n\r\n<template>\r\n <div ref=\"toolbarRef\" class=\"mk-doc-editor-toolbar\">\r\n <el-button-group>\r\n <el-button text :disabled=\"!canUndo\" @click=\"editor.dispatchCommand(UNDO_COMMAND, undefined)\">\r\n <MKSvgIcon iconClass=\"RefreshLeft\" /> \r\n </el-button>\r\n <el-button text :disabled=\"!canRedo\" @click=\"editor.dispatchCommand(REDO_COMMAND, undefined)\">\r\n <MKSvgIcon iconClass=\"RefreshRight\" /> \r\n </el-button>\r\n </el-button-group>\r\n <el-divider direction=\"vertical\" />\r\n <!-- 内容 -->\r\n <ContentStyleToolbar />\r\n <el-divider direction=\"vertical\" /> \r\n <!-- 文字样式 -->\r\n <FontStyleToolbar /> \r\n <el-divider direction=\"vertical\" />\r\n \r\n <el-button-group>\r\n <el-button text :class=\"`${DEVICE_VIEW_MODE=='pc' ? 'active' : ''}`\" @click=\"DEVICE_VIEW_MODE='pc'\">\r\n <MKSvgIcon iconClass=\"Platform\" /> \r\n </el-button>\r\n <el-button text :class=\"`${DEVICE_VIEW_MODE=='mobile' ? 'active' : ''}`\" @click=\"DEVICE_VIEW_MODE='mobile'\">\r\n <MKSvgIcon iconClass=\"Iphone\" /> \r\n </el-button>\r\n </el-button-group>\r\n <el-divider direction=\"vertical\" />\r\n <el-dropdown>\r\n <el-button text>\r\n <MKSvgIcon iconClass=\"Plus\" style=\"margin-right: 5px;\" /> 插入\r\n </el-button>\r\n <template #dropdown>\r\n <el-dropdown-menu>\r\n <el-dropdown-item v-for=\"item in ToolbarExtendPlugins\" :key=\"item\" @click=\"item.action()\">\r\n <MKSvgIcon :iconClass=\"item.icon\" /> \r\n {{item.text}}\r\n </el-dropdown-item>\r\n </el-dropdown-menu>\r\n </template>\r\n </el-dropdown>\r\n <el-divider direction=\"vertical\" />\r\n <el-button-group>\r\n <PreviewToolbar :js=\"js\" :css=\"css\" />\r\n </el-button-group>\r\n </div>\r\n</template>\r\n"],"names":["ref","useLexicalComposer","onMounted","mergeRegister","CAN_UNDO_COMMAND","CAN_REDO_COMMAND","onUnmounted","ToolbarExtendPlugins"],"mappings":";;;;;;;;;AAsBA,MAAM,cAAuC;;;;;;;;AAEvC,UAAA,aAAaA,QAA2B,IAAI;AAClD,UAAM,SAASC,WAAAA;AAET,UAAA,UAAUD,QAAI,KAAK;AACnB,UAAA,UAAUA,QAAI,KAAK;AAEzBE,QAAAA,UAAU,MAAM;AACd,YAAM,0BAA0BC,MAAA;AAAA,QAC9B,OAAO;AAAA,UACLC,QAAA;AAAA,UACA,CAAC,YAAqB;AACpB,oBAAQ,QAAQ;AACT,mBAAA;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACLC,QAAA;AAAA,UACA,CAAC,YAAqB;AACpB,oBAAQ,QAAQ;AACT,mBAAA;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,MAAA;AAGFC,UAAAA,YAAY,MAAM;AAChBC,cAAA,qBAAqB,SAAS;AACN;MAAA,CACzB;AAAA,IAAA,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/nodes.js CHANGED Viewed

@@ -5,10 +5,13 @@ const list = require("@lexical/list");
 const code = require("@lexical/code");
 const link = require("@lexical/link");
 const hashtag = require("@lexical/hashtag");
-const index = require("./ImagePlugin/index.js");
-const index$1 = require("./ImageTextPlugin/index.js");
-const index$2 = require("./HtmlBlockPlugin/index.js");
+require("./ImagePlugin/commands.js");
+const ImageNode = require("./ImagePlugin/ImageNode.js");
+const ImageTextNode = require("./ImageTextPlugin/ImageTextNode.js");
 const RichTextNode = require("./RichTextPlugin/nodes/RichTextNode.js");
+require("./ModulePlugin/commands.js");
+const ModuleBlockNode = require("./ModulePlugin/ModuleBlockNode.js");
+const ModuleContainerNode = require("./ModulePlugin/ModuleContainerNode.js");
 const Nodes = [
   richText.HeadingNode,
   list.ListNode,
@@ -23,9 +26,11 @@ const Nodes = [
   link.LinkNode,
   hashtag.HashtagNode,
   RichTextNode.RichTextNode,
-  index.ImageNode,
-  index$1.ImageTextNode,
-  index$2.HtmlBlockNode
+  ImageNode.ImageNode,
+  ImageTextNode.ImageTextNode,
+  ImageNode.InlineImageNode,
+  ModuleBlockNode.ModuleBlockNode,
+  ModuleContainerNode.ModuleContainerNode
 ];
 module.exports = Nodes;
 //# sourceMappingURL=nodes.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nodes.js","sources":["../../../../../../src/components/basic/doc-editor/plugins/nodes.ts"],"sourcesContent":["import { type Klass, type LexicalNode,TextNode,ElementNode } from 'lexical'\r\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\r\nimport { TableCellNode, TableNode, TableRowNode } from '@lexical/table'\r\nimport { ListItemNode, ListNode } from '@lexical/list'\r\nimport { CodeHighlightNode, CodeNode } from '@lexical/code'\r\nimport { AutoLinkNode, LinkNode } from '@lexical/link'\r\nimport { HashtagNode } from '@lexical/hashtag'\r\nimport { ImageNode } from \"./ImagePlugin\"\r\nimport { ImageTextNode } from \"./ImageTextPlugin\"\r\nimport { ~~HtmlBlockNode~~ } from \"./~~HtmlBlockPlugin~~\"\r\nimport { ~~RichTextNode~~ } from \"./~~RichTextPlugin/nodes/RichTextNode~~\"\r\n\r\nconst Nodes: Array<Klass<LexicalNode>> = [\r\n HeadingNode,\r\n ListNode,\r\n ListItemNode,\r\n QuoteNode,\r\n CodeNode,\r\n CodeHighlightNode,\r\n TableNode,\r\n TableCellNode,\r\n TableRowNode,\r\n AutoLinkNode,\r\n LinkNode,\r\n HashtagNode,\r\n\r\n RichTextNode,\r\n ImageNode,\r\n ImageTextNode,\r\n ~~HtmlBlockNode~~\r\n]\r\n\r\nexport default Nodes\r\n"],"names":["HeadingNode","ListNode","ListItemNode","QuoteNode","CodeNode","CodeHighlightNode","TableNode","TableCellNode","TableRowNode","AutoLinkNode","LinkNode","HashtagNode","RichTextNode","ImageNode","ImageTextNode","~~HtmlBlockNode~~"],"mappings":"~~;;;;;;;;;;;AAYA~~,MAAM,QAAmC;AAAA,EACvCA,SAAA;AAAA,EACAC,KAAA;AAAA,EACAC,KAAA;AAAA,EACAC,SAAA;AAAA,EACAC,KAAA;AAAA,EACAC,KAAA;AAAA,EACAC,MAAA;AAAA,EACAC,MAAA;AAAA,EACAC,MAAA;AAAA,EACAC,KAAA;AAAA,EACAC,KAAA;AAAA,EACAC,QAAA;AAAA,EAEAC,aAAA;AAAA,EACAC,~~MAAA~~;AAAA,EACAC,~~QAAA~~;AAAA,EACAC,~~QAAA~~;AACF;;"}
1	+ {"version":3,"file":"nodes.js","sources":["../../../../../../src/components/basic/doc-editor/plugins/nodes.ts"],"sourcesContent":["import { type Klass, type LexicalNode,TextNode,ElementNode,ParagraphNode } from 'lexical'\r\nimport { HeadingNode, QuoteNode } from '@lexical/rich-text'\r\nimport { TableCellNode, TableNode, TableRowNode } from '@lexical/table'\r\nimport { ListItemNode, ListNode } from '@lexical/list'\r\nimport { CodeHighlightNode, CodeNode } from '@lexical/code'\r\nimport { AutoLinkNode, LinkNode } from '@lexical/link'\r\nimport { HashtagNode } from '@lexical/hashtag'\r\nimport { ImageNode,InlineImageNode } from \"./ImagePlugin\"\r\nimport { ImageTextNode } from \"./ImageTextPlugin\"\r\nimport { RichTextNode } from \"./RichTextPlugin/nodes/RichTextNode\"\r\nimport { ModuleBlockNode,ModuleContainerNode } from \"./ModulePlugin\"\r\n\r\n\r\nconst Nodes: Array<Klass<LexicalNode>> = [\r\n HeadingNode,\r\n ListNode,\r\n ListItemNode,\r\n QuoteNode,\r\n CodeNode,\r\n CodeHighlightNode,\r\n TableNode,\r\n TableCellNode,\r\n TableRowNode,\r\n AutoLinkNode,\r\n LinkNode,\r\n HashtagNode,\r\n\r\n RichTextNode,\r\n ImageNode,\r\n ImageTextNode,\r\n InlineImageNode,\r\n ModuleBlockNode,\r\n ModuleContainerNode\r\n]\r\n\r\nexport default Nodes\r\n"],"names":["HeadingNode","ListNode","ListItemNode","QuoteNode","CodeNode","CodeHighlightNode","TableNode","TableCellNode","TableRowNode","AutoLinkNode","LinkNode","HashtagNode","RichTextNode","ImageNode","ImageTextNode","InlineImageNode","ModuleBlockNode","ModuleContainerNode"],"mappings":";;;;;;;;;;;;;;AAaA,MAAM,QAAmC;AAAA,EACvCA,SAAA;AAAA,EACAC,KAAA;AAAA,EACAC,KAAA;AAAA,EACAC,SAAA;AAAA,EACAC,KAAA;AAAA,EACAC,KAAA;AAAA,EACAC,MAAA;AAAA,EACAC,MAAA;AAAA,EACAC,MAAA;AAAA,EACAC,KAAA;AAAA,EACAC,KAAA;AAAA,EACAC,QAAA;AAAA,EAEAC,aAAA;AAAA,EACAC,UAAA;AAAA,EACAC,cAAA;AAAA,EACAC,UAAA;AAAA,EACAC,gBAAA;AAAA,EACAC,oBAAA;AACF;;"}

package/dist/cjs/components/basic/doc-editor/themes/DocTheme.js CHANGED Viewed

@@ -48,9 +48,8 @@ const theme = {
     h5: "mk-doc__h5",
     h6: "mk-doc__h6"
   },
-  image: "editor-image",
+  image: "mk-doc__img",
   indent: "mk-doc__indent",
-  inlineImage: "inline-editor-image",
   layoutContainer: "mk-doc__layoutContainer",
   layoutItem: "mk-doc__layoutItem",
   link: "mk-doc__link",

package/dist/cjs/components/basic/doc-editor/themes/DocTheme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DocTheme.js","sources":["../../../../../../src/components/basic/doc-editor/themes/DocTheme.ts"],"sourcesContent":["/*\r\n Copyright (c) Meta Platforms, Inc. and affiliates.\r\n \r\n This source code is licensed under the MIT license found in the\r\n * LICENSE file in the root directory of this source tree.\r\n \r\n /\r\n\r\nimport type { EditorThemeClasses } from 'lexical'\r\n\r\nconst theme: EditorThemeClasses = {\r\n blockCursor: 'mk-doc__blockCursor',\r\n characterLimit: 'mk-doc__characterLimit',\r\n code: 'mk-doc__code',\r\n codeHighlight: {\r\n 'atrule': 'mk-doc__tokenAttr',\r\n 'attr': 'mk-doc__tokenAttr',\r\n 'boolean': 'mk-doc__tokenProperty',\r\n 'builtin': 'mk-doc__tokenSelector',\r\n 'cdata': 'mk-doc__tokenComment',\r\n 'char': 'mk-doc__tokenSelector',\r\n 'class': 'mk-doc__tokenFunction',\r\n 'class-name': 'mk-doc__tokenFunction',\r\n 'comment': 'mk-doc__tokenComment',\r\n 'constant': 'mk-doc__tokenProperty',\r\n 'deleted': 'mk-doc__tokenProperty',\r\n 'doctype': 'mk-doc__tokenComment',\r\n 'entity': 'mk-doc__tokenOperator',\r\n 'function': 'mk-doc__tokenFunction',\r\n 'important': 'mk-doc__tokenVariable',\r\n 'inserted': 'mk-doc__tokenSelector',\r\n 'keyword': 'mk-doc__tokenAttr',\r\n 'namespace': 'mk-doc__tokenVariable',\r\n 'number': 'mk-doc__tokenProperty',\r\n 'operator': 'mk-doc__tokenOperator',\r\n 'prolog': 'mk-doc__tokenComment',\r\n 'property': 'mk-doc__tokenProperty',\r\n 'punctuation': 'mk-doc__tokenPunctuation',\r\n 'regex': 'mk-doc__tokenVariable',\r\n 'selector': 'mk-doc__tokenSelector',\r\n 'string': 'mk-doc__tokenSelector',\r\n 'symbol': 'mk-doc__tokenProperty',\r\n 'tag': 'mk-doc__tokenProperty',\r\n 'url': 'mk-doc__tokenOperator',\r\n 'variable': 'mk-doc__tokenVariable',\r\n },\r\n embedBlock: {\r\n base: 'mk-doc__embedBlock',\r\n focus: 'mk-doc__embedBlockFocus',\r\n },\r\n hashtag: 'mk-doc__hashtag',\r\n heading: {\r\n h1: 'mk-doc__h1',\r\n h2: 'mk-doc__h2',\r\n h3: 'mk-doc__h3',\r\n h4: 'mk-doc__h4',\r\n h5: 'mk-doc__h5',\r\n h6: 'mk-doc__h6',\r\n },\r\n image: '~~editor~~-~~image~~',\r\n indent: 'mk-doc__indent',\r\n ~~inlineImage: 'inline-editor-image',\r\n~~ layoutContainer: 'mk-doc__layoutContainer',\r\n layoutItem: 'mk-doc__layoutItem',\r\n link: 'mk-doc__link',\r\n list: {\r\n checklist: 'mk-doc__checklist',\r\n listitem: 'mk-doc__listItem',\r\n listitemChecked: 'mk-doc__listItemChecked',\r\n listitemUnchecked: 'mk-doc__listItemUnchecked',\r\n nested: {\r\n listitem: 'mk-doc__nestedListItem',\r\n },\r\n olDepth: [\r\n 'mk-doc__ol1',\r\n 'mk-doc__ol2',\r\n 'mk-doc__ol3',\r\n 'mk-doc__ol4',\r\n 'mk-doc__ol5',\r\n ],\r\n ul: 'mk-doc__ul',\r\n },\r\n ltr: 'mk-doc__ltr',\r\n mark: 'mk-doc__mark',\r\n markOverlap: 'mk-doc__markOverlap',\r\n paragraph: 'mk-doc__paragraph',\r\n quote: 'mk-doc__quote',\r\n rtl: 'mk-doc__rtl',\r\n table: 'mk-doc__table',\r\n tableAddColumns: 'mk-doc__tableAddColumns',\r\n tableAddRows: 'mk-doc__tableAddRows',\r\n tableCell: 'mk-doc__tableCell',\r\n tableCellActionButton: 'mk-doc__tableCellActionButton',\r\n tableCellActionButtonContainer:\r\n 'mk-doc__tableCellActionButtonContainer',\r\n tableCellEditing: 'mk-doc__tableCellEditing',\r\n tableCellHeader: 'mk-doc__tableCellHeader',\r\n tableCellPrimarySelected: 'mk-doc__tableCellPrimarySelected',\r\n tableCellResizer: 'mk-doc__tableCellResizer',\r\n tableCellSelected: 'mk-doc__tableCellSelected',\r\n tableCellSortedIndicator: 'mk-doc__tableCellSortedIndicator',\r\n tableResizeRuler: 'mk-doc__tableCellResizeRuler',\r\n tableSelected: 'mk-doc__tableSelected',\r\n tableSelection: 'mk-doc__tableSelection',\r\n text: {\r\n bold: 'mk-doc__textBold',\r\n code: 'mk-doc__textCode',\r\n italic: 'mk-doc__textItalic',\r\n strikethrough: 'mk-doc__textStrikethrough',\r\n subscript: 'mk-doc__textSubscript',\r\n superscript: 'mk-doc__textSuperscript',\r\n underline: 'mk-doc__textUnderline',\r\n underlineStrikethrough: 'mk-doc__textUnderlineStrikethrough',\r\n },\r\n}\r\n\r\nexport default theme\r\n"],"names":[],"mappings":";AAUA,MAAM,QAA4B;AAAA,EAChC,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,eAAe;AAAA,IACb,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,cAAc;AAAA,IACd,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,aAAa;AAAA,IACb,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,EACd;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,EACT,SAAS;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,~~aAAa;AAAA,EACb,~~iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,QAAQ;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,IAAI;AAAA,EACN;AAAA,EACA,KAAK;AAAA,EACL,MAAM;AAAA,EACN,aAAa;AAAA,EACb,WAAW;AAAA,EACX,OAAO;AAAA,EACP,KAAK;AAAA,EACL,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,WAAW;AAAA,EACX,uBAAuB;AAAA,EACvB,gCACE;AAAA,EACF,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,0BAA0B;AAAA,EAC1B,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,0BAA0B;AAAA,EAC1B,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,WAAW;AAAA,IACX,aAAa;AAAA,IACb,WAAW;AAAA,IACX,wBAAwB;AAAA,EAC1B;AACF;;"}
1	+ {"version":3,"file":"DocTheme.js","sources":["../../../../../../src/components/basic/doc-editor/themes/DocTheme.ts"],"sourcesContent":["/*\r\n Copyright (c) Meta Platforms, Inc. and affiliates.\r\n \r\n This source code is licensed under the MIT license found in the\r\n * LICENSE file in the root directory of this source tree.\r\n \r\n /\r\n\r\nimport type { EditorThemeClasses } from 'lexical'\r\n\r\nconst theme: EditorThemeClasses = {\r\n blockCursor: 'mk-doc__blockCursor',\r\n characterLimit: 'mk-doc__characterLimit',\r\n code: 'mk-doc__code',\r\n codeHighlight: {\r\n 'atrule': 'mk-doc__tokenAttr',\r\n 'attr': 'mk-doc__tokenAttr',\r\n 'boolean': 'mk-doc__tokenProperty',\r\n 'builtin': 'mk-doc__tokenSelector',\r\n 'cdata': 'mk-doc__tokenComment',\r\n 'char': 'mk-doc__tokenSelector',\r\n 'class': 'mk-doc__tokenFunction',\r\n 'class-name': 'mk-doc__tokenFunction',\r\n 'comment': 'mk-doc__tokenComment',\r\n 'constant': 'mk-doc__tokenProperty',\r\n 'deleted': 'mk-doc__tokenProperty',\r\n 'doctype': 'mk-doc__tokenComment',\r\n 'entity': 'mk-doc__tokenOperator',\r\n 'function': 'mk-doc__tokenFunction',\r\n 'important': 'mk-doc__tokenVariable',\r\n 'inserted': 'mk-doc__tokenSelector',\r\n 'keyword': 'mk-doc__tokenAttr',\r\n 'namespace': 'mk-doc__tokenVariable',\r\n 'number': 'mk-doc__tokenProperty',\r\n 'operator': 'mk-doc__tokenOperator',\r\n 'prolog': 'mk-doc__tokenComment',\r\n 'property': 'mk-doc__tokenProperty',\r\n 'punctuation': 'mk-doc__tokenPunctuation',\r\n 'regex': 'mk-doc__tokenVariable',\r\n 'selector': 'mk-doc__tokenSelector',\r\n 'string': 'mk-doc__tokenSelector',\r\n 'symbol': 'mk-doc__tokenProperty',\r\n 'tag': 'mk-doc__tokenProperty',\r\n 'url': 'mk-doc__tokenOperator',\r\n 'variable': 'mk-doc__tokenVariable',\r\n },\r\n embedBlock: {\r\n base: 'mk-doc__embedBlock',\r\n focus: 'mk-doc__embedBlockFocus',\r\n },\r\n hashtag: 'mk-doc__hashtag',\r\n heading: {\r\n h1: 'mk-doc__h1',\r\n h2: 'mk-doc__h2',\r\n h3: 'mk-doc__h3',\r\n h4: 'mk-doc__h4',\r\n h5: 'mk-doc__h5',\r\n h6: 'mk-doc__h6',\r\n },\r\n image: 'mk-doc__img',\r\n indent: 'mk-doc__indent',\r\n layoutContainer: 'mk-doc__layoutContainer',\r\n layoutItem: 'mk-doc__layoutItem',\r\n link: 'mk-doc__link',\r\n list: {\r\n checklist: 'mk-doc__checklist',\r\n listitem: 'mk-doc__listItem',\r\n listitemChecked: 'mk-doc__listItemChecked',\r\n listitemUnchecked: 'mk-doc__listItemUnchecked',\r\n nested: {\r\n listitem: 'mk-doc__nestedListItem',\r\n },\r\n olDepth: [\r\n 'mk-doc__ol1',\r\n 'mk-doc__ol2',\r\n 'mk-doc__ol3',\r\n 'mk-doc__ol4',\r\n 'mk-doc__ol5',\r\n ],\r\n ul: 'mk-doc__ul',\r\n },\r\n ltr: 'mk-doc__ltr',\r\n mark: 'mk-doc__mark',\r\n markOverlap: 'mk-doc__markOverlap',\r\n paragraph: 'mk-doc__paragraph',\r\n quote: 'mk-doc__quote',\r\n rtl: 'mk-doc__rtl',\r\n table: 'mk-doc__table',\r\n tableAddColumns: 'mk-doc__tableAddColumns',\r\n tableAddRows: 'mk-doc__tableAddRows',\r\n tableCell: 'mk-doc__tableCell',\r\n tableCellActionButton: 'mk-doc__tableCellActionButton',\r\n tableCellActionButtonContainer:\r\n 'mk-doc__tableCellActionButtonContainer',\r\n tableCellEditing: 'mk-doc__tableCellEditing',\r\n tableCellHeader: 'mk-doc__tableCellHeader',\r\n tableCellPrimarySelected: 'mk-doc__tableCellPrimarySelected',\r\n tableCellResizer: 'mk-doc__tableCellResizer',\r\n tableCellSelected: 'mk-doc__tableCellSelected',\r\n tableCellSortedIndicator: 'mk-doc__tableCellSortedIndicator',\r\n tableResizeRuler: 'mk-doc__tableCellResizeRuler',\r\n tableSelected: 'mk-doc__tableSelected',\r\n tableSelection: 'mk-doc__tableSelection',\r\n text: {\r\n bold: 'mk-doc__textBold',\r\n code: 'mk-doc__textCode',\r\n italic: 'mk-doc__textItalic',\r\n strikethrough: 'mk-doc__textStrikethrough',\r\n subscript: 'mk-doc__textSubscript',\r\n superscript: 'mk-doc__textSuperscript',\r\n underline: 'mk-doc__textUnderline',\r\n underlineStrikethrough: 'mk-doc__textUnderlineStrikethrough',\r\n },\r\n}\r\n\r\nexport default theme\r\n"],"names":[],"mappings":";AAUA,MAAM,QAA4B;AAAA,EAChC,aAAa;AAAA,EACb,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,eAAe;AAAA,IACb,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,cAAc;AAAA,IACd,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,aAAa;AAAA,IACb,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,OAAO;AAAA,IACP,OAAO;AAAA,IACP,YAAY;AAAA,EACd;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA,SAAS;AAAA,EACT,SAAS;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,UAAU;AAAA,IACV,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,QAAQ;AAAA,MACN,UAAU;AAAA,IACZ;AAAA,IACA,SAAS;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,IAAI;AAAA,EACN;AAAA,EACA,KAAK;AAAA,EACL,MAAM;AAAA,EACN,aAAa;AAAA,EACb,WAAW;AAAA,EACX,OAAO;AAAA,EACP,KAAK;AAAA,EACL,OAAO;AAAA,EACP,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,WAAW;AAAA,EACX,uBAAuB;AAAA,EACvB,gCACE;AAAA,EACF,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,0BAA0B;AAAA,EAC1B,kBAAkB;AAAA,EAClB,mBAAmB;AAAA,EACnB,0BAA0B;AAAA,EAC1B,kBAAkB;AAAA,EAClB,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,WAAW;AAAA,IACX,aAAa;AAAA,IACb,WAAW;AAAA,IACX,wBAAwB;AAAA,EAC1B;AACF;;"}

package/dist/cjs/components/basic/doc-editor/themes/doc-editor-edit.css.js ADDED Viewed

@@ -0,0 +1,4 @@
+"use strict";
+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\r\n.mk-doc-block-container__module-container{\r\n  cursor: pointer;\r\n  position: relative;\r\n  padding: 1px;\r\n  box-sizing: border-box;\r\n  outline: 2px solid #eff5ff;\r\n  white-space:initial;\r\n  word-break:initial;\r\n}\r\n\r\n.mk-doc-block-container__module-container.empty{\r\n  min-height: 200px;\r\n}\r\n.mk-doc-block-container__module-container::before{\r\n  content: "点此选中模块";\r\n  text-align: center;\r\n  background-color: #eff5ff;\r\n  color: #4284ff;\r\n  position: sticky;\r\n  width: 200px;\r\n  height: 20px;\r\n  left: 0;\r\n  outline: 2px solid #eff5ff;\r\n  top: 0px;\r\n  pointer-events: all;\r\n  white-space: pre-wrap;\r\n  word-break: break-word;\r\n  font-size: 14px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\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-mark{\r\n  position: absolute;\r\n  box-sizing:border-box;\r\n  background-color:#2776f63b;\r\n  z-index: 99;\r\n}\r\n.mk-doc-active-mark.box{\r\n  outline: 2px solid #2776f63b;\r\n  background-color: transparent;\r\n  pointer-events: none;\r\n}\r\n';
+module.exports = DocEditorEditCss;
+//# sourceMappingURL=doc-editor-edit.css.js.map

package/dist/cjs/components/basic/doc-editor/themes/doc-editor-edit.css.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"doc-editor-edit.css.js","sources":["../../../../../../src/components/basic/doc-editor/themes/doc-editor-edit.css?raw"],"sourcesContent":["export default \"\\r\\n.mk-doc__img {\\r\\n cursor: pointer;\\r\\n z-index: 1;\\r\\n position: relative;\\r\\n}\\r\\n\\r\\n\\r\\n.mk-doc-block-container__module-container{\\r\\n cursor: pointer;\\r\\n position: relative;\\r\\n padding: 1px;\\r\\n box-sizing: border-box;\\r\\n outline: 2px solid #eff5ff;\\r\\n white-space:initial;\\r\\n word-break:initial;\\r\\n}\\r\\n\\r\\n.mk-doc-block-container__module-container.empty{\\r\\n min-height: 200px;\\r\\n}\\r\\n.mk-doc-block-container__module-container::before{\\r\\n content: \\\"点此选中模块\\\";\\r\\n text-align: center;\\r\\n background-color: #eff5ff;\\r\\n color: #4284ff;\\r\\n position: sticky;\\r\\n width: 200px;\\r\\n height: 20px;\\r\\n left: 0;\\r\\n outline: 2px solid #eff5ff;\\r\\n top: 0px;\\r\\n pointer-events: all;\\r\\n white-space: pre-wrap;\\r\\n word-break: break-word;\\r\\n font-size: 14px;\\r\\n display: flex;\\r\\n align-items: center;\\r\\n justify-content: center;\\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-mark{\\r\\n position: absolute;\\r\\n box-sizing:border-box;\\r\\n background-color:#2776f63b;\\r\\n z-index: 99;\\r\\n}\\r\\n.mk-doc-active-mark.box{\\r\\n outline: 2px solid #2776f63b;\\r\\n background-color: transparent;\\r\\n pointer-events: none;\\r\\n}\\r\\n\""],"names":[],"mappings":";AAAA,MAAe,mBAAA;;"}

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

@@ -1,4 +1,4 @@
 "use strict";
-const DocEditorCss = "html,body{\r\n  width:100%;\r\n  height:100%;\r\n  padding:0px;\r\n  margin:0px;\r\n  position: relative;\r\n  font-size: 14px;\r\n  color:#000;\r\n  overflow: hidden;\r\n}\r\nbody{\r\n  box-sizing: border-box;\r\n}\r\n.mk-doc-editor__stage__editable{\r\n  width: 100%;\r\n  min-height: 100%;\r\n  margin: auto;\r\n  position: relative;\r\n  z-index: 1;\r\n  padding: 10px 20px;\r\n  box-sizing: border-box;\r\n}\r\n.mk-doc-editor__stage__editable .mk-doc-editor-stage{\r\n  z-index: 1;\r\n  position: relative;\r\n  width: 100%;\r\n  min-height: 80%;\r\n  outline: 0;\r\n  border: 0;\r\n}\r\n.mk-doc-editor__stage__editable .mk-doc-editor__stage__placeholder{\r\n  position: absolute;\r\n  top: 10px;\r\n  left:20px;\r\n  z-index: 0;    \r\n  color: #ccc;\r\n}\r\n\r\n\r\n.mk-doc-active-mark{\r\n  position: absolute;\r\n  box-sizing:border-box;\r\n  background-color:#2776f63b;\r\n  pointer-events: none;\r\n  z-index: 1;\r\n}\r\n\r\n.mk-doc-loading-mark{\r\n  position: absolute;\r\n  box-sizing:border-box;\r\n  background-color:#201d1dd6;\r\n  pointer-events: none;\r\n  left: 0;\r\n  top: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  z-index: 2;    \r\n  display: flex;\r\n  align-items: center;\r\n  align-content: center;\r\n  justify-content: center;\r\n  color: #fff;\r\n}\r\n\r\n.mk-doc__embedBlock {\r\n  user-select: none;\r\n  position: relative;\r\n  z-index: 1;\r\n  padding: 1px;\r\n}\r\n.mk-doc__embedBlockFocus {\r\n  outline: 2px solid rgb(60, 132, 244);\r\n}\r\n\r\n.mk-doc-html-block >*{\r\n  user-select: none;\r\n  pointer-events: none;;\r\n}\r\n";
+const DocEditorCss = "html,body{\r\n  width:100%;\r\n  height:100%;\r\n  padding:0px;\r\n  margin:0px;\r\n  position: relative;\r\n  font-size: 14px;\r\n  color:#000;\r\n  overflow: hidden;\r\n}\r\nbody{\r\n  box-sizing: border-box;\r\n}\r\n.mk-doc-editor__stage__editable{\r\n  width: 100%;\r\n  min-height: 100%;\r\n  margin: auto;\r\n  position: relative;\r\n  z-index: 1;\r\n  padding: 10px 20px;\r\n  box-sizing: border-box;\r\n}\r\n.mk-doc-editor__stage__editable .mk-doc-editor-stage{\r\n  z-index: 1;\r\n  position: relative;\r\n  width: 100%;\r\n  min-height: 80%;\r\n  outline: 0;\r\n  border: 0;\r\n}\r\n.mk-doc-editor__stage__editable .mk-doc-editor__stage__placeholder{\r\n  position: absolute;\r\n  top: 10px;\r\n  left:20px;\r\n  z-index: 0;    \r\n  color: #ccc;\r\n}\r\n ";
 module.exports = DocEditorCss;
 //# sourceMappingURL=doc-editor.css.js.map

package/dist/cjs/components/basic/doc-editor/themes/doc-editor.css.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"doc-editor.css.js","sources":["../../../../../../src/components/basic/doc-editor/themes/doc-editor.css?raw"],"sourcesContent":["export default \"html,body{\\r\\n width:100%;\\r\\n height:100%;\\r\\n padding:0px;\\r\\n margin:0px;\\r\\n position: relative;\\r\\n font-size: 14px;\\r\\n color:#000;\\r\\n overflow: hidden;\\r\\n}\\r\\nbody{\\r\\n box-sizing: border-box;\\r\\n}\\r\\n.mk-doc-editor__stage__editable{\\r\\n width: 100%;\\r\\n min-height: 100%;\\r\\n margin: auto;\\r\\n position: relative;\\r\\n z-index: 1;\\r\\n padding: 10px 20px;\\r\\n box-sizing: border-box;\\r\\n}\\r\\n.mk-doc-editor__stage__editable .mk-doc-editor-stage{\\r\\n z-index: 1;\\r\\n position: relative;\\r\\n width: 100%;\\r\\n min-height: 80%;\\r\\n outline: 0;\\r\\n border: 0;\\r\\n}\\r\\n.mk-doc-editor__stage__editable .mk-doc-editor__stage__placeholder{\\r\\n position: absolute;\\r\\n top: 10px;\\r\\n left:20px;\\r\\n z-index: 0; \\r\\n color: #ccc;\\r\\n}\\r\\n~~\\r\\n\\r\\n.mk-doc-active-mark{\\r\\n position:~~ absolute;\\r\\n box-sizing:border-box;\\r\\n background-color:#2776f63b;\\r\\n pointer-events: none;\\r\\n z-index: 1;\\r\\n}\\r\\n\\r\\n.mk-doc-loading-mark{\\r\\n position: absolute;\\r\\n box-sizing:border-box;\\r\\n background-color:#201d1dd6;\\r\\n pointer-events: none;\\r\\n left: 0;\\r\\n top: 0;\\r\\n width: 100%;\\r\\n height: 100%;\\r\\n z-index: 2; \\r\\n display: flex;\\r\\n align-items: center;\\r\\n align-content: center;\\r\\n justify-content: center;\\r\\n color: #fff;\\r\\n}\\r\\n\\r\\n.mk-doc__embedBlock {\\r\\n user-select: none;\\r\\n position: relative;\\r\\n z-index: 1;\\r\\n padding: 1px;\\r\\n}\\r\\n.mk-doc__embedBlockFocus {\\r\\n outline: 2px solid rgb(60, 132, 244);\\r\\n}\\r\\n\\r\\n.mk-doc-html-block >*{\\r\\n user-select: none;\\r\\n pointer-events: none;;\\r\\n}\\r\\n\""],"names":[],"mappings":";AAAA,MAAe,eAAA;;"}
1	+ {"version":3,"file":"doc-editor.css.js","sources":["../../../../../../src/components/basic/doc-editor/themes/doc-editor.css?raw"],"sourcesContent":["export default \"html,body{\\r\\n width:100%;\\r\\n height:100%;\\r\\n padding:0px;\\r\\n margin:0px;\\r\\n position: relative;\\r\\n font-size: 14px;\\r\\n color:#000;\\r\\n overflow: hidden;\\r\\n}\\r\\nbody{\\r\\n box-sizing: border-box;\\r\\n}\\r\\n.mk-doc-editor__stage__editable{\\r\\n width: 100%;\\r\\n min-height: 100%;\\r\\n margin: auto;\\r\\n position: relative;\\r\\n z-index: 1;\\r\\n padding: 10px 20px;\\r\\n box-sizing: border-box;\\r\\n}\\r\\n.mk-doc-editor__stage__editable .mk-doc-editor-stage{\\r\\n z-index: 1;\\r\\n position: relative;\\r\\n width: 100%;\\r\\n min-height: 80%;\\r\\n outline: 0;\\r\\n border: 0;\\r\\n}\\r\\n.mk-doc-editor__stage__editable .mk-doc-editor__stage__placeholder{\\r\\n position: absolute;\\r\\n top: 10px;\\r\\n left:20px;\\r\\n z-index: 0; \\r\\n color: #ccc;\\r\\n}\\r\\n \""],"names":[],"mappings":";AAAA,MAAe,eAAA;;"}

package/dist/cjs/components/basic/doc-editor/themes/doc-theme.css.js CHANGED Viewed

@@ -8,8 +8,6 @@ const DocThemeCss = `\r
 }\r
 .mk-doc__paragraph {\r
   margin: 0;\r
-  position: relative;\r
-  line-height: 2em;\r
 }\r
 .mk-doc__quote {\r
   margin: 0;\r
@@ -281,36 +279,36 @@ const DocThemeCss = `\r
 .mk-doc__ol1 {\r
   padding: 0;\r
   margin: 0;\r
-  list-style-position: inside;\r
+  /* list-style-position: inside; */\r
 }\r
 .mk-doc__ol2 {\r
   padding: 0;\r
   margin: 0;\r
   list-style-type: upper-alpha;\r
-  list-style-position: inside;\r
+  /* list-style-position: inside; */\r
 }\r
 .mk-doc__ol3 {\r
   padding: 0;\r
   margin: 0;\r
   list-style-type: lower-alpha;\r
-  list-style-position: inside;\r
+  /* list-style-position: inside; */\r
 }\r
 .mk-doc__ol4 {\r
   padding: 0;\r
   margin: 0;\r
   list-style-type: upper-roman;\r
-  list-style-position: inside;\r
+  /* list-style-position: inside; */\r
 }\r
 .mk-doc__ol5 {\r
   padding: 0;\r
   margin: 0;\r
   list-style-type: lower-roman;\r
-  list-style-position: inside;\r
+  /* list-style-position: inside; */\r
 }\r
 .mk-doc__ul {\r
   padding: 0;\r
   margin: 0;\r
-  list-style-position: inside;\r
+  /* list-style-position: inside; */\r
 }\r
 .mk-doc__listItem {\r
   margin: 0 32px;\r
@@ -433,20 +431,16 @@ const DocThemeCss = `\r
   padding: 8px 16px;\r
 }\r
 \r
-/* block结构 */\r
-.mk-doc-block{\r
-  position: relative;\r
-}\r
-.mk-doc-block.mk-doc-block-image-text::after{\r
+\r
+.mk-doc__image-text::after,.mk-doc-block-container__module-container::after{\r
   content: ".";\r
   font-size: 0;\r
   clear: both;\r
   display: block;\r
 }\r
-.mk-doc-html-block {\r
+.mk-doc-block-container__module-container {\r
   line-height: normal;\r
 }\r
-\r
 `;
 module.exports = DocThemeCss;
 //# sourceMappingURL=doc-theme.css.js.map