feat: 优化markdown

ui/package.json

@@ -22,18 +22,10 @@
     "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",
     "medium-zoom": "^1.1.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/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>
@@ -8,7 +8,6 @@
 
 <script setup lang="ts">
 import { MdEditor, config } from 'md-editor-v3'
-import 'md-editor-v3/lib/style.css'
 
 import screenfull from 'screenfull'
 
@@ -23,19 +22,22 @@ 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'
+import './assets/iconfont.js'
 
 config({
   editorExtensions: {
-    prettier: {
-      prettierInstance: prettier,
-      parserMarkdownInstance: parserMarkdown
-    },
+    // prettier: {
+    //   prettierInstance: prettier,
+    //   parserMarkdownInstance: parserMarkdown
+    // },
     highlight: {
       instance: highlight
     },

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/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>