feat: use monaco

Author: Kingwl

package.json

@@ -49,5 +49,11 @@
   },
   "peerDependencies": {
     "vue": "^3.2.13"
+  },
+  "dependencies": {
+    "monaco-editor": "^0.33.0",
+    "monaco-editor-textmate": "^3.0.0",
+    "monaco-textmate": "^3.0.1",
+    "onigasm": "^2.2.5"
   }
 }

pnpm-lock.yaml

@@ -1,34 +1,41 @@
 <script setup lang="ts">
 import FileSelector from './FileSelector.vue'
-import CodeMirror from '../codemirror/CodeMirror.vue'
+import Monaco from '../monaco/Monaco.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 onChange = debounce((code: string) => {
+const onChange = (code: string) => {
   store.state.activeFile.code = code
-}, 250)
+}
 
-const activeMode = computed(() => {
+const language = computed(() => {
   const { filename } = store.state.activeFile
-  return filename.endsWith('.vue') || filename.endsWith('.html')
-    ? 'htmlmixed'
-    : filename.endsWith('.css')
-    ? 'css'
-    : 'javascript'
+  if (filename.endsWith('.vue')) {
+    return 'vue'
+  }
+  if (filename.endsWith('.html')) {
+    return 'html'
+  }
+  if (filename.endsWith('.css')) {
+    return 'css'
+  }
+  if (filename.endsWith('.ts')) {
+    return 'typescript'
+  }
+  return 'javascript'
 })
 </script>
 
 <template>
   <FileSelector />
   <div class="editor-container">
-    <CodeMirror
-      @change="onChange"
+    <Monaco
       :value="store.state.activeFile.code"
-      :mode="activeMode"
+      :language="language"
+      @save="onChange"
     />
     <Message :err="store.state.errors[0]" />
   </div>

src/editor/Editor.vue

@@ -0,0 +1,87 @@
+<script lang="ts">
+import { setupMonacoEnv } from './utils';
+setupMonacoEnv();
+</script>
+<script lang="ts" setup>
+import { onMounted, onBeforeUnmount, ref, shallowRef, nextTick, watchEffect } from 'vue';
+import { loadGrammars } from './grammars';
+import * as monaco from 'monaco-editor';
+import { setupThemePromise } from './utils';
+
+interface Props {
+    value?: string
+    language?: string;
+    readonly?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    value: '',
+    readonly: false
+})
+
+const emits = defineEmits<{
+    (e: 'change', value: string): void,
+    (e: 'save', value: string): void
+}>()
+
+const containerRef = ref<HTMLDivElement | null>();
+const ready = ref(false);
+const editor = shallowRef<monaco.editor.IStandaloneCodeEditor | undefined>(undefined);
+
+onMounted(async () => {
+    const theme = await setupThemePromise;
+    ready.value = true;
+    await nextTick();
+
+    if (!containerRef.value) {
+        throw new Error("Cannot find containerRef");
+    }
+
+    const editorInstance = monaco.editor.create(containerRef.value, {
+        theme,
+        value: props.value,
+        language: props.language,
+        readOnly: props.readonly,
+        automaticLayout: true,
+        scrollBeyondLastLine: false,
+        minimap: {
+            enabled: false,
+        },
+        inlineSuggest: {
+            enabled: false,
+        },
+    });
+    editor.value = editorInstance
+
+    await loadGrammars(editorInstance);
+
+    editorInstance.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+        emits('save', editorInstance.getValue());
+    });
+
+    editorInstance.onDidChangeModelContent(() => {
+        emits('change', editorInstance.getValue());
+    });
+});
+
+watchEffect(() => {
+    if (editor.value && editor.value.getValue() !== props.value) {
+        editor.value.setValue(props.value);
+    }
+})
+
+onBeforeUnmount(() => {
+    editor.value?.dispose();
+});
+</script>
+<template>
+    <div class="editor" ref="containerRef"></div>
+</template>
+<style>
+.editor {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+</style>