feat: 强一致预览与实际展示效果

components/Edit/index.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, computed, nextTick } from "vue";
+import { ref, onMounted, computed, nextTick, onUnmounted } from "vue";
 import _ from "lodash";
 import { v4 as uuid4 } from "uuid";
 import {
@@ -17,7 +17,6 @@ import type { TreeData } from "./Tree";
 import { ElNotification, type ElTree } from "element-plus";
 import { MdEditor } from "md-editor-v3";
 import { s3ContentsToTree, getTreeFlatten } from "@/utils/s3Helper";
-import "md-editor-v3/lib/style.css";
 import type ETNode from "element-plus/es/components/tree/src/model/node";
 import type { DragEvents } from "element-plus/es/components/tree/src/model/useDragNode";
 import type {
@@ -347,6 +346,22 @@ const onDragEnd = async (
 const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
   return !(!dropNode.data.isDir && type === "inner");
 };
+
+let observer: InstanceType<typeof MutationObserver>
+const callback = (mutationList: MutationRecord[]) => {
+  const preview$ = ( mutationList.at(-1)?.target as HTMLElement ).querySelector('#helpdocs-editor-preview')
+  preview$?.classList.remove('md-editor-preview')
+};
+onMounted(() => {
+  const el = document.querySelector('#helpdocs-editor')
+  if (el) {
+    observer = new MutationObserver(callback)
+    observer.observe(el, { childList: true, subtree: true })
+  }
+})
+onUnmounted(() => {
+  observer && observer.disconnect()
+})
 </script>
 <template>
   <div class="md-container">
@@ -394,9 +409,13 @@ const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
       </el-tree>
     </div>
     <MdEditor
+      editorId="helpdocs-editor"
+      v-model="text"
       v-loading="textLoading"
       :disabled="!currentOpenData"
-      v-model="text"
+      :toolbarsExclude="['github']"
+      previewTheme="custom"
+      class="vp-doc"
       @save="onSave"
       @uploadImg="onUploadImg"
     />
@@ -410,6 +429,7 @@ const allowDrop = (draggingNode: Node, dropNode: Node, type: AllowDropType) => {
   />
 </template>
 
+<style src="md-editor-v3/lib/style.css"></style>
 <style lang="scss" scoped>
 .md-container {
   width: 100vw;