feat(editor): 调整深色主题为one dark

ZvonimirSun · Dec 19, 2023 · cd54bea · cd54bea
1 parent edd0d45
commit cd54bea
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -17,8 +17,10 @@
     "@codemirror/lang-html": "^6.4.7",
     "@codemirror/lang-javascript": "^6.2.1",
     "@codemirror/lang-xml": "^6.0.2",
+    "@codemirror/language": "^6.9.3",
     "@codemirror/lint": "^6.4.2",
     "@codemirror/state": "^6.3.3",
+    "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "^6.22.3",
     "@geoman-io/leaflet-geoman-free": "^2.15.0",
     "@highlightjs/vue-plugin": "^2.1.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/editor/Editor.vue b/src/components/editor/Editor.vue
@@ -5,6 +5,8 @@ import { undo, redo, undoDepth, redoDepth } from '@codemirror/commands'
 import basic from './lang-basic'
 import { EditorPlugin } from './editor'
 import { useStyleStore } from '@/stores/style'
+import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language'
+import { oneDarkTheme, oneDarkHighlightStyle } from '@codemirror/theme-one-dark'
 
 const props = withDefaults(defineProps<{
   inputDefault?: string,
@@ -20,6 +22,7 @@ const emits = defineEmits<{(e: 'change', v: string): void}>()
 const editor = ref<HTMLDivElement>()
 let cm: EditorView
 const themeCompartment = new Compartment()
+const hightLightCompartment = new Compartment()
 const hasUndo = ref(false)
 const hasRedo = ref(false)
 
@@ -28,7 +31,8 @@ onMounted(() => {
     ...basic.extensions,
     ...props.plugin?.extensions || [],
     EditorView.updateListener.of(onChange),
-    themeCompartment.of(EditorView.theme({}, { dark: useStyleStore().isDark }))
+    themeCompartment.of(useStyleStore().isDark ? oneDarkTheme : EditorView.theme({}, { dark: false })),
+    hightLightCompartment.of(useStyleStore().isDark ? syntaxHighlighting(oneDarkHighlightStyle, { fallback: true }) : syntaxHighlighting(defaultHighlightStyle))
   ]
   if (props.placeholder) {
     extensions.push(PlaceHolder(props.placeholder))
@@ -48,7 +52,10 @@ onBeforeUnmount(() => {
 
 watch(() => useStyleStore().isDark, (val) => {
   cm.dispatch({
-    effects: themeCompartment.reconfigure(EditorView.theme({}, { dark: val }))
+    effects: [
+      themeCompartment.reconfigure(val ? oneDarkTheme : EditorView.theme({}, { dark: false })),
+      hightLightCompartment.reconfigure(val ? syntaxHighlighting(oneDarkHighlightStyle, { fallback: true }) : syntaxHighlighting(defaultHighlightStyle))
+    ]
   })
 })
 

diff --git a/src/components/editor/EditorMini.vue b/src/components/editor/EditorMini.vue
@@ -4,6 +4,8 @@ import { Compartment, EditorState } from '@codemirror/state'
 import mini from './lang-mini'
 import { useStyleStore } from '@/stores/style'
 import { EditorPlugin } from '@/components/editor/editor'
+import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language'
+import { oneDarkTheme, oneDarkHighlightStyle } from '@codemirror/theme-one-dark'
 
 const props = withDefaults(defineProps<{
   inputDefault?: string,
@@ -19,13 +21,15 @@ const emits = defineEmits<{(e: 'change', v: string): void}>()
 const editor = ref<HTMLDivElement>()
 let cm: EditorView
 const themeCompartment = new Compartment()
+const hightLightCompartment = new Compartment()
 
 onMounted(() => {
   const extensions = [
     ...mini.extensions,
     ...props.plugin ? props.plugin.miniExtensions || props.plugin.extensions : [],
     EditorView.updateListener.of(onChange),
-    themeCompartment.of(EditorView.theme({}, { dark: useStyleStore().isDark }))
+    themeCompartment.of(useStyleStore().isDark ? oneDarkTheme : EditorView.theme({}, { dark: false })),
+    hightLightCompartment.of(useStyleStore().isDark ? syntaxHighlighting(oneDarkHighlightStyle, { fallback: true }) : syntaxHighlighting(defaultHighlightStyle))
   ]
   if (props.placeholder) {
     extensions.push(PlaceHolder(props.placeholder))
@@ -45,7 +49,10 @@ onBeforeUnmount(() => {
 
 watch(() => useStyleStore().isDark, (val) => {
   cm.dispatch({
-    effects: themeCompartment.reconfigure(EditorView.theme({}, { dark: val }))
+    effects: [
+      themeCompartment.reconfigure(val ? oneDarkTheme : EditorView.theme({}, { dark: false })),
+      hightLightCompartment.reconfigure(val ? syntaxHighlighting(oneDarkHighlightStyle, { fallback: true }) : syntaxHighlighting(defaultHighlightStyle))
+    ]
   })
 })