Merge branch 'pr@main@application_flow' of github.com:1Panel-dev/MaxKB into pr@main@application_flow

ui/package.json

@@ -22,20 +22,12 @@
     "echarts": "^5.5.0",
     "element-plus": "^2.5.6",
     "file-saver": "^2.0.5",
+    "highlight.js": "^11.9.0",
     "install": "^0.13.0",
     "katex": "^0.16.10",
     "lodash": "^4.17.21",
-    "markdown-it": "^13.0.2",
-    "markdown-it-abbr": "^1.0.4",
-    "markdown-it-anchor": "^8.6.7",
-    "markdown-it-footnote": "^3.0.3",
-    "markdown-it-highlightjs": "^4.0.1",
-    "markdown-it-sub": "^1.0.0",
-    "markdown-it-sup": "^1.0.0",
-    "markdown-it-task-lists": "^2.1.1",
-    "markdown-it-toc-done-right": "^4.2.0",
     "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",
@@ -55,8 +47,6 @@
     "@tsconfig/node18": "^18.2.0",
     "@types/file-saver": "^2.0.7",
     "@types/jsdom": "^21.1.1",
-    "@types/markdown-it": "^13.0.7",
-    "@types/markdown-it-highlightjs": "^3.3.4",
     "@types/node": "^18.17.5",
     "@types/nprogress": "^0.2.0",
     "@vitejs/plugin-vue": "^4.3.1",

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>

ui/src/components/index.ts

@@ -12,7 +12,6 @@ import AppTable from './app-table/index.vue'
 import ReadWrite from './read-write/index.vue'
 import TagEllipsis from './tag-ellipsis/index.vue'
 import CommonList from './common-list/index.vue'
-import MarkdownRenderer from './markdown-renderer/index.vue'
 import dynamicsForm from './dynamics-form'
 import CardCheckbox from './card-checkbox/index.vue'
 import AiChat from './ai-chat/index.vue'
@@ -35,7 +34,6 @@ export default {
     app.component(TagEllipsis.name, TagEllipsis)
     app.component(CommonList.name, CommonList)
     app.use(dynamicsForm)
-    app.component(MarkdownRenderer.name, MarkdownRenderer)
     app.component(CardCheckbox.name, CardCheckbox)
     app.component(AiChat.name, AiChat)
     app.component(InfiniteScroll.name, InfiniteScroll)

ui/src/components/markdown-editor/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <MdEditor noIconfont v-bind="$attrs">
+  <MdEditor noIconfont noPrettier v-bind="$attrs">
     <template #defFooters>
       <slot name="defFooters"> </slot>
     </template>
@@ -7,50 +7,15 @@
 </template>
 
 <script setup lang="ts">
-import { MdEditor, config } from 'md-editor-v3'
-import 'md-editor-v3/lib/style.css'
+import { MdEditor } 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'
-
-// >=3.0
-import * as prettier from 'prettier'
-import parserMarkdown from 'prettier/plugins/markdown'
+// // <3.0
+// import prettier from 'prettier'
+// import parserMarkdown from 'prettier/parser-markdown'
+// // >=3.0
+// import * as prettier from 'prettier'
+// import parserMarkdown from 'prettier/plugins/markdown'
 
 // https://at.alicdn.com/t/c/font_2605852_u82y61ve02.js
-import './assets/font_prouiefeic.js'
-
-config({
-  editorExtensions: {
-    prettier: {
-      prettierInstance: prettier,
-      parserMarkdownInstance: parserMarkdown
-    },
-    highlight: {
-      instance: highlight
-    },
-    screenfull: {
-      instance: screenfull
-    },
-    katex: {
-      instance: katex
-    },
-    cropper: {
-      instance: Cropper
-    },
-    mermaid: {
-      instance: mermaid
-    }
-  }
-})
+import './assets/iconfont.js'
 </script>

ui/src/components/markdown-renderer/MdRenderer.vue

@@ -1,5 +1,6 @@
 <template>
   <MdPreview
+    noIconfont
     ref="editorRef"
     editorId="preview-only"
     :modelValue="item"

ui/src/components/markdown-renderer/index.vue

@@ -1,66 +0,0 @@
-<template>
-  <div v-html="inner" />
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue'
-import MarkdownIt from 'markdown-it'
-import MarkdownItAbbr from 'markdown-it-abbr'
-import MarkdownItAnchor from 'markdown-it-anchor'
-import MarkdownItFootnote from 'markdown-it-footnote'
-import MarkdownItHighlightjs from 'markdown-it-highlightjs'
-import MarkdownItTasklists from 'markdown-it-task-lists'
-import MarkdownItSub from 'markdown-it-sub'
-import MarkdownItSup from 'markdown-it-sup'
-import MarkdownItTOC from 'markdown-it-toc-done-right'
-
-defineOptions({ name: 'MarkdownRenderer' })
-
-const markdownIt = MarkdownIt({
-  html: true, // 允许HTML语法
-  typographer: true, // 启用Typographer插件，可以更好地处理中文字符和标点符号
-  linkify: true // 自动将文本中的URL转换为链接
-})
-
-markdownIt
-  .use(MarkdownItHighlightjs)
-  .use(MarkdownItTasklists)
-  .use(MarkdownItAbbr)
-  .use(MarkdownItAnchor)
-  .use(MarkdownItFootnote)
-  .use(MarkdownItSub)
-  .use(MarkdownItSup)
-  .use(MarkdownItTOC)
-
-const props = withDefaults(defineProps<{ source?: string; inner_suffix?: boolean }>(), {
-  source: '',
-  inner_suffix: false
-})
-
-const suffix = '{inner_suffix_' + new Date().getTime() + '}'
-
-const inner = computed(() => {
-  if (props.inner_suffix) {
-    return markdownIt.render(props.source + suffix).replace(suffix, "<span class='loading'></span>")
-  } else {
-    return markdownIt.render(props.source)
-  }
-})
-</script>
-<style>
-.loading:after {
-  overflow: hidden;
-  display: inline-block;
-  vertical-align: bottom;
-  animation: ellipsis 0.5s infinite;
-  content: '\2026'; /* ascii code for the ellipsis character */
-}
-@keyframes ellipsis {
-  from {
-    width: 2px;
-  }
-  to {
-    width: 20px;
-  }
-}
-</style>

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)

ui/src/styles/index.scss

@@ -3,6 +3,5 @@
 @import './app.scss';
 @import './element-plus.scss';
 @import 'nprogress/nprogress.css';
-@import 'highlight.js/styles/default.css';
 @import 'md-editor-v3/lib/style.css';
 @import './md-editor.scss';

ui/src/views/paragraph/component/ParagraphForm.vue

@@ -40,6 +40,7 @@
         editorId="preview-only"
         :modelValue="form.content"
         class="maxkb-md"
+        noIconfont
       />
     </el-form-item>
   </el-form>