fix(editor): pass language mode to editors

src/editor/CodeMirrorEditor.vue

@@ -16,6 +16,10 @@ const onChange = (code: string, fileName?: string, save?: boolean) => {
 
 const modes: Record<string, Props['mode']> = {
   css: 'css',
+  sass: 'sass',
+  scss: 'css',
+  less: 'css',
+  md: 'gfm',
   html: 'htmlmixed',
   js: {
     name: 'javascript',

src/editor/MonacoEditor.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import Monaco from '../monaco/Monaco.vue'
 import type { EditorEmits, EditorProps } from './types'
 
-defineProps<EditorProps>()
+const props = defineProps<EditorProps>()
 const emit = defineEmits<EditorEmits>()
 
 defineOptions({
@@ -12,6 +13,15 @@ defineOptions({
 const onChange = (code: string, fileName?: string, save?: boolean) => {
   emit('change', code, fileName, save)
 }
+
+const activeMode = computed(() => {
+  const { mode: forcedMode, filename } = props
+  return forcedMode
+    ? forcedMode
+    : ['css', 'sass', 'scss', 'less'].includes(filename.split('.').pop()!)
+      ? 'css'
+      : 'js'
+})
 </script>
 
 <template>
@@ -20,6 +30,6 @@ const onChange = (code: string, fileName?: string, save?: boolean) => {
     :filename="filename"
     :value="value"
     :readonly="readonly"
-    :mode="mode"
+    :mode="activeMode"
   />
 </template>

src/monaco/Monaco.vue

@@ -16,16 +16,9 @@ import { getOrCreateModel } from './utils'
 import { loadGrammars, loadTheme } from 'monaco-volar'
 import { debounce } from '../utils'
 import type { Store } from '../store'
-import type { EditorEmits, PreviewMode } from '../editor/types'
+import type { EditorProps, EditorEmits } from '../editor/types'
 
-export interface Props {
-  filename: string
-  value?: string
-  readonly?: boolean
-  mode?: PreviewMode
-}
-
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<EditorProps>(), {
   readonly: false,
 })
 

src/store.ts

@@ -58,7 +58,12 @@ export class File {
     if (this.filename.endsWith('.html')) {
       return 'html'
     }
-    if (this.filename.endsWith('.css')) {
+    if (
+      this.filename.endsWith('.css') ||
+      this.filename.endsWith('.sass') ||
+      this.filename.endsWith('.scss') ||
+      this.filename.endsWith('.less')
+    ) {
       return 'css'
     }
     if (this.filename.endsWith('.ts')) {
@@ -67,9 +72,6 @@ export class File {
     if (this.filename.endsWith('.md')) {
       return 'markdown'
     }
-    if (this.filename.endsWith('.sass') || this.filename.endsWith('.scss')) {
-      return 'scss'
-    }
     return 'javascript'
   }
 }