fix: add ts and json mode (#37)

src/codemirror/CodeMirror.vue

@@ -3,12 +3,13 @@
 </template>
 
 <script setup lang="ts">
+import type { ModeSpec, ModeSpecOptions } from 'codemirror'
 import { ref, onMounted, watchEffect, inject } from 'vue'
 import { debounce } from '../utils'
 import CodeMirror from './codemirror'
 
 export interface Props {
-  mode?: string
+  mode?: string | ModeSpec<ModeSpecOptions>
   value?: string
   readonly?: boolean
 }

src/editor/Editor.vue

@@ -1,24 +1,42 @@
 <script setup lang="ts">
 import FileSelector from './FileSelector.vue'
-import CodeMirror from '../codemirror/CodeMirror.vue'
+import CodeMirror, { type Props } from '../codemirror/CodeMirror.vue'
 import Message from '../Message.vue'
 import { debounce } from '../utils'
 import { computed, inject } from 'vue'
 import { Store } from '../store'
 
 const store = inject('store') as Store
 
+const modes: Record<string, Props['mode']> = {
+  css: 'css',
+  html: 'htmlmixed',
+  js: {
+    name: 'javascript',
+  },
+  json: {
+    name: 'javascript',
+    json: true,
+  },
+  ts: {
+    name: 'javascript',
+    typescript: true,
+  },
+  vue: 'htmlmixed',
+}
+
 const onChange = debounce((code: string) => {
   store.state.activeFile.code = code
 }, 250)
 
 const activeMode = computed(() => {
   const { filename } = store.state.activeFile
-  return filename.endsWith('.vue') || filename.endsWith('.html')
-    ? 'htmlmixed'
-    : filename.endsWith('.css')
-    ? 'css'
-    : 'javascript'
+
+  const mode = modes[filename.split('.').pop()!]
+
+  return filename.lastIndexOf('.') !== -1 && mode
+    ? mode
+    : modes.js
 })
 </script>