perf: optimize monaco editor

cc-hearts · Jun 2, 2024 · 8320002 · 8320002
1 parent 837d2e7
commit 8320002
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 15 deletions.
diff --git a/packages/vue-kit/src/components/monaco-editor/helper.ts b/packages/vue-kit/src/components/monaco-editor/helper.ts
@@ -1,5 +1,3 @@
-export const VERSION = '0.0.1'
-
 export const MonacoEditorProps = {
   theme: {
     type: String,
@@ -14,4 +12,8 @@ export const MonacoEditorProps = {
     type: String,
     default: 'javascript',
   },
+  modelValue: {
+    type: String,
+    default: '',
+  },
 }
diff --git a/packages/vue-kit/src/components/monaco-editor/monaco-editor.vue b/packages/vue-kit/src/components/monaco-editor/monaco-editor.vue
@@ -2,29 +2,39 @@
   <div ref="monacoRef"></div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watchEffect, watch } from 'vue'
 import { MonacoEditorProps } from './helper'
-// /esm/vs/editor/editor.api
-import * as monaco from 'monaco-editor'
+import { editor } from 'monaco-editor'
 
 const props = defineProps(MonacoEditorProps)
 
 const monacoRef = ref()
-let monacoEditorInstance: monaco.editor.IStandaloneCodeEditor | null = null
+let monacoEditorInstance: editor.IStandaloneCodeEditor | null = null
 
 const updateMonacoValue = (value: string) => {
   monacoEditorInstance?.setValue(value)
 }
+watchEffect(() => {
+  updateMonacoValue(props.modelValue)
+})
 
 const getValue = () => {
   return monacoEditorInstance?.getValue()
 }
 
+watch(
+  () => props.language,
+  () => {
+    if (monacoEditorInstance) {
+      editor.setModelLanguage(monacoEditorInstance.getModel()!, props.language)
+    }
+  }
+)
+
 onMounted(() => {
-  console.log(props.language)
-  monacoEditorInstance = monaco.editor.create(monacoRef.value, {
-    language: 'javascript',
-    value: '',
+  monacoEditorInstance = editor.create(monacoRef.value, {
+    language: props.language,
+    value: props.modelValue,
     folding: true,
     theme: props.theme,
     scrollbar: {
@@ -34,6 +44,7 @@ onMounted(() => {
     minimap: {
       enabled: props.minimapEnabled,
     },
+    automaticLayout: true,
     renderValidationDecorations: 'on',
   })
 })

diff --git a/packages/vue-kit/src/docs/monaco-editor.md b/packages/vue-kit/src/docs/monaco-editor.md
@@ -20,11 +20,12 @@
 
 ## props
 
-| 属性名         | 类型    | 默认值       | 描述                                             |
-| -------------- | ------- | ------------ | ------------------------------------------------ |
-| theme          | String  | `vs-dark`    | 编辑器主题，可选值为 `vs`, `vs-dark`, `hc-black` |
-| minimapEnabled | Boolean | true         | 是否启用缩略图                                   |
-| language       | String  | `javascript` | 编辑器语言                                       |
+| 属性名              | 类型    | 默认值       | 描述                                             |
+| ------------------- | ------- | ------------ | ------------------------------------------------ |
+| theme               | String  | `vs-dark`    | 编辑器主题，可选值为 `vs`, `vs-dark`, `hc-black` |
+| minimapEnabled      | Boolean | true         | 是否启用缩略图                                   |
+| language            | String  | `javascript` | 编辑器语言                                       |
+| modelValue(v-model) | String  | ``           | 编辑器内容                                       |
 
 ## expose