From 7dc54797d2b58a1b6d1053fa283ec9ccc5df498c Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 13 May 2022 14:51:15 +0800
Subject: [PATCH] =?UTF-8?q?fix(editor):=20=E4=BB=A3=E7=A0=81=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8=E5=A4=A7=E5=B0=8F=E5=8F=98=E5=8C=96=E6=B2=A1?=
 =?UTF-8?q?=E6=9C=89=E8=87=AA=E9=80=82=E5=BA=94=E5=A4=A7=E5=B0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/layouts/CodeEditor.vue | 30 ++++++++++++++--------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/packages/editor/src/layouts/CodeEditor.vue b/packages/editor/src/layouts/CodeEditor.vue
index e9a48267..99afd987 100644
--- a/packages/editor/src/layouts/CodeEditor.vue
+++ b/packages/editor/src/layouts/CodeEditor.vue
@@ -4,6 +4,7 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+import { throttle } from 'lodash-es';
 import * as monaco from 'monaco-editor';
 import serialize from 'serialize-javascript';
 
@@ -36,14 +37,19 @@ export default defineComponent({
     },
 
     type: {
-      type: [String],
+      type: String,
       default: () => '',
     },
 
     language: {
-      type: [String],
+      type: String,
       default: () => 'javascript',
     },
+
+    options: {
+      type: Object,
+      default: () => ({}),
+    },
   },
 
   emits: ['initd', 'save'],
@@ -51,10 +57,18 @@ export default defineComponent({
   setup(props, { emit }) {
     let vsEditor: monaco.editor.IStandaloneCodeEditor | null = null;
     let vsDiffEditor: monaco.editor.IStandaloneDiffEditor | null = null;
+
     const values = ref('');
     const loading = ref(false);
     const codeEditor = ref<HTMLDivElement>();
 
+    const resizeObserver = new globalThis.ResizeObserver(
+      throttle((): void => {
+        vsEditor?.layout();
+        vsDiffEditor?.layout();
+      }, 300),
+    );
+
     const setEditorValue = (v: string | any, m: string | any) => {
       values.value = toString(v, props.language);
 
@@ -71,11 +85,6 @@ export default defineComponent({
       return vsEditor?.setValue(values.value);
     };
 
-    const resizeHandler = () => {
-      vsEditor?.layout();
-      vsDiffEditor?.layout();
-    };
-
     const getEditorValue = () =>
       props.type === 'diff' ? vsDiffEditor?.getModifiedEditor().getValue() : vsEditor?.getValue();
 
@@ -88,8 +97,9 @@ export default defineComponent({
         tabSize: 2,
         theme: 'vs-dark',
         fontFamily: 'dm, Menlo, Monaco, "Courier New", monospace',
-        fontSize: 15,
+        fontSize: 14,
         formatOnPaste: true,
+        ...props.options,
       };
 
       if (props.type === 'diff') {
@@ -117,7 +127,7 @@ export default defineComponent({
         });
       }
 
-      globalThis.addEventListener('resize', resizeHandler);
+      resizeObserver.observe(codeEditor.value);
     };
 
     watch(
@@ -140,7 +150,7 @@ export default defineComponent({
     });
 
     onUnmounted(() => {
-      globalThis.removeEventListener('resize', resizeHandler);
+      resizeObserver.disconnect();
     });
 
     return {