feat: use monaco editor

Author: zeevenn

apps/web/src/components/editor/CustomUploadForm.vue

@@ -1,5 +1,6 @@
 <script setup lang='ts'>
-import CodeMirror from 'codemirror'
+import type { editor as MonacoEditor } from 'monaco-editor'
+import * as monaco from 'monaco-editor'
 import { useStore } from '@/stores'
 import { removeLeft } from '@/utils'
 
@@ -18,22 +19,46 @@ const code = useLocalStorage(`formCustomConfig`, removeLeft(`
   })
 `).trim())
 
-const formCustomTextarea = useTemplateRef<HTMLTextAreaElement>(`formCustomTextarea`)
+const editorRef = useTemplateRef<HTMLDivElement>(`editorRef`)
 
-const editor = ref<CodeMirror.EditorFromTextArea | null>(null)
+const editor = ref<MonacoEditor.IStandaloneCodeEditor | null>(null)
 
 onMounted(() => {
-  editor.value = markRaw(CodeMirror.fromTextArea(formCustomTextarea.value!, {
-    mode: `javascript`,
-    theme: store.isDark ? `darcula` : `xq-light`,
-    lineNumbers: true,
-  }))
+  editor.value = monaco.editor.create(editorRef.value!, {
+    value: code.value,
+    language: `javascript`,
+    theme: store.isDark ? `vs-dark` : `vs`,
+    lineNumbers: `on`,
+    automaticLayout: true,
+    fontSize: 12,
+    lineHeight: 18,
+  })
+})
 
-  // 嵌套使用 nextTick 才能确保生效，具体原因未知
-  nextTick(() => {
-    nextTick(() => {
-      editor.value?.setValue(code.value)
+function updateEditorStyle(fontSize: number, lineHeight: number) {
+  if (editor.value) {
+    editor.value.updateOptions({
+      fontSize,
+      lineHeight,
     })
+  }
+}
+
+onMounted(() => {
+  const updateStyle = () => {
+    if (window.innerWidth >= 768) {
+      updateEditorStyle(14, 24)
+    }
+    else {
+      updateEditorStyle(12, 20)
+    }
+  }
+
+  window.addEventListener(`resize`, updateStyle)
+  updateStyle()
+
+  onUnmounted(() => {
+    window.removeEventListener(`resize`, updateStyle)
   })
 })
 
@@ -46,10 +71,10 @@ function formCustomSave() {
 
 <template>
   <div class="space-y-4 min-w-0">
-    <div class="h-60 border flex flex-col">
-      <textarea
-        ref="formCustomTextarea"
-        placeholder="Your custom code here."
+    <div class="h-60 border flex flex-col rounded-md">
+      <div
+        ref="editorRef"
+        class="flex-1"
       />
     </div>
     <Button
@@ -68,15 +93,4 @@ function formCustomSave() {
 </template>
 
 <style scoped>
-/* 覆盖全局的 overflow-x: hidden 设置 */
-:deep(.CodeMirror-scroll) {
-  overflow-x: auto !important;
-  overflow-y: auto !important;
-}
-
-@media (max-width: 768px) {
-  :deep(.CodeMirror) {
-    font-size: 12px;
-  }
-}
 </style>