fix(mdeditor): fix dark mode

.eslintrc.js

@@ -2,10 +2,5 @@
 process.env.ESLINT_TSCONFIG = 'tsconfig.json'
 
 module.exports = {
-  extends: '@antfu',
+  extends: '@chansee97/eslint-config-vue',
-  rules: {
-    '@typescript-eslint/no-unsafe-assignment': 'off',
-    '@typescript-eslint/no-unsafe-return': 'off',
-    '@typescript-eslint/no-unsafe-member-access': 'off',
-  },
 }

build/plugins/vue.ts

@@ -5,6 +5,10 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
 // https://github.com/vitejs/vite/tree/main/packages/plugin-vue-jsx
 import VueDevTools from 'vite-plugin-vue-devtools' // https://github.com/webfansplz/vite-plugin-vue-devtools
 
-const plugins = [vue(), vueJsx(), VueDevTools()]
+const plugins = [vue({
+  script: {
+    defineModel: true,
+  },
+}), vueJsx(), VueDevTools()]
 
 export default plugins

package.json

@@ -52,24 +52,22 @@
     }
   },
   "dependencies": {
-    "@vueuse/core": "^10.1.2",
+    "@vueuse/core": "^10.2.0",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
     "axios": "^1.4.0",
     "crypto-js": "^4.1.1",
     "echarts": "^5.4.2",
-    "md-editor-v3": "^2.9.3",
+    "md-editor-v3": "^4.2.0",
     "pinia": "^2.1.3",
     "pinia-plugin-persist": "^1.0.0",
-    "qs": "^6.11.1",
+    "qs": "^6.11.2",
     "vue": "^3.3.4",
     "vue-qr": "^4.0.9",
     "vue-router": "^4.2.2"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.39.5",
+    "@chansee97/eslint-config-vue": "^0.3.5",
-    "@chansee97/commitlint-config": "^0.3.3",
-    "@chansee97/eslint-config-vue": "^0.3.3",
     "@commitlint/cli": "^17.6.5",
     "@commitlint/config-conventional": "^17.6.5",
     "@iconify-json/icon-park-outline": "^1.1.11",

src/components/custom/Editor/MdEditor.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { MdEditor } from 'md-editor-v3' // https://imzbf.github.io/md-editor-v3/zh-CN/docs
+import 'md-editor-v3/lib/style.css'
+import { useAppStore } from '@/store'
+
+const appStore = useAppStore()
+
+const modelValue = defineModel()
+const theme = computed(() => {
+  return appStore.darkMode ? 'dark' : 'light'
+})
+
+const toolbarsExclude = [
+  'mermaid',
+  'katex',
+  'github',
+  'htmlPreview',
+  'catalog',
+]
+</script>
+
+<template>
+  <MdEditor
+    v-model="modelValue" :theme="theme" read-only :toolbars-exclude="toolbarsExclude"
+  />
+</template>
+
+<style scoped></style>

src/components/custom/Editor/RichEditor.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div />
+</template>
+
+<style scoped></style>

src/components/custom/Editor/index.ts

@@ -0,0 +1,4 @@
+import MdEditor from './MdEditor.vue'
+import RichEditor from './RichEditor.vue'
+
+export { MdEditor, RichEditor }

src/views/plugin/editor/md/index.vue

@@ -1,15 +1,10 @@
 <script setup lang="ts">
-import MdEditor from 'md-editor-v3'
+const text = ref('# Hello Editor ![图片描述](https://via.placeholder.com/350x150)')
-import 'md-editor-v3/lib/style.css'
-
-// https://github.com/imzbf/md-editor-v3/blob/dev/README-CN.md
-
-const text = ref('# Hello Editor')
 </script>
 
 <template>
   <n-card>
-    <MdEditor v-model="text" :preview-only="false" />
+    <MdEditor v-model="text" />
   </n-card>
 </template>