From babf9dbdb0779e9d28765cbeda2146cbea326c0a Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 14 Jun 2024 14:44:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20markdown=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/package.json                               |  2 +-
 ui/src/components/ai-chat/index.vue           |  2 +
 ui/src/components/markdown-editor/index.vue   | 39 +------------------
 .../markdown-renderer/MdRenderer.vue          |  1 +
 ui/src/main.ts                                | 35 +++++++++++++++++
 5 files changed, 40 insertions(+), 39 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index 64821d886..fb9d937d0 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -27,7 +27,7 @@
     "katex": "^0.16.10",
     "lodash": "^4.17.21",
     "marked": "^12.0.2",
-    "md-editor-v3": "4.12.1",
+    "md-editor-v3": "^4.16.7",
     "medium-zoom": "^1.1.0",
     "mermaid": "^10.9.0",
     "mitt": "^3.0.0",
diff --git a/ui/src/components/ai-chat/index.vue b/ui/src/components/ai-chat/index.vue
index e753b6ee8..51c5e387f 100644
--- a/ui/src/components/ai-chat/index.vue
+++ b/ui/src/components/ai-chat/index.vue
@@ -27,6 +27,8 @@
                   ref="editorRef"
                   editorId="preview-only"
                   :modelValue="item.str"
+                  noIconfont
+                  no-mermaid
                 />
               </template>
             </el-card>
diff --git a/ui/src/components/markdown-editor/index.vue b/ui/src/components/markdown-editor/index.vue
index 4bd078e14..681d631a0 100644
--- a/ui/src/components/markdown-editor/index.vue
+++ b/ui/src/components/markdown-editor/index.vue
@@ -7,20 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { MdEditor, config } from 'md-editor-v3'
-
-import screenfull from 'screenfull'
-
-import katex from 'katex'
-import 'katex/dist/katex.min.css'
-
-import Cropper from 'cropperjs'
-import 'cropperjs/dist/cropper.css'
-
-import mermaid from 'mermaid'
-
-import highlight from 'highlight.js'
-import 'highlight.js/styles/atom-one-dark.css'
+import { MdEditor } from 'md-editor-v3'
 
 // // <3.0
 // import prettier from 'prettier'
@@ -31,28 +18,4 @@ import 'highlight.js/styles/atom-one-dark.css'
 
 // https://at.alicdn.com/t/c/font_2605852_u82y61ve02.js
 import './assets/iconfont.js'
-
-config({
-  editorExtensions: {
-    // prettier: {
-    //   prettierInstance: prettier,
-    //   parserMarkdownInstance: parserMarkdown
-    // },
-    highlight: {
-      instance: highlight
-    },
-    screenfull: {
-      instance: screenfull
-    },
-    katex: {
-      instance: katex
-    },
-    cropper: {
-      instance: Cropper
-    },
-    mermaid: {
-      instance: mermaid
-    }
-  }
-})
 </script>
diff --git a/ui/src/components/markdown-renderer/MdRenderer.vue b/ui/src/components/markdown-renderer/MdRenderer.vue
index 416cf7f2b..1f9adba19 100644
--- a/ui/src/components/markdown-renderer/MdRenderer.vue
+++ b/ui/src/components/markdown-renderer/MdRenderer.vue
@@ -1,5 +1,6 @@
 <template>
   <MdPreview
+    noIconfont
     ref="editorRef"
     editorId="preview-only"
     :modelValue="item"
diff --git a/ui/src/main.ts b/ui/src/main.ts
index ab1b803fa..277a2fc26 100644
--- a/ui/src/main.ts
+++ b/ui/src/main.ts
@@ -10,6 +10,41 @@ import App from './App.vue'
 import router from '@/router'
 import Components from '@/components'
 import i18n from './locales'
+import { config } from 'md-editor-v3'
+
+import screenfull from 'screenfull'
+
+import katex from 'katex'
+import 'katex/dist/katex.min.css'
+
+import Cropper from 'cropperjs'
+import 'cropperjs/dist/cropper.css'
+
+import mermaid from 'mermaid'
+
+import highlight from 'highlight.js'
+import 'highlight.js/styles/atom-one-dark.css'
+
+config({
+  editorExtensions: {
+    highlight: {
+      instance: highlight
+    },
+    screenfull: {
+      instance: screenfull
+    },
+    katex: {
+      instance: katex
+    },
+    cropper: {
+      instance: Cropper
+    },
+    mermaid: {
+      instance: mermaid
+    }
+  }
+})
+
 const app = createApp(App)
 app.use(store)
 app.use(directives)