From 3097e8eddb61331cc249d1b18d74560bc8bfbefe Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 6 Jun 2025 16:03:56 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=94=AF=E6=8C=81=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E8=87=AA=E5=AE=9A=E4=B9=89=E5=88=9B=E5=BB=BAMonaco=20?=
 =?UTF-8?q?editor=E5=87=BD=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/src/components/CodeBlockEditor.vue |  6 +--
 packages/editor/src/index.ts                  |  3 ++
 packages/editor/src/layouts/CodeEditor.vue    | 46 +++++++++++++++----
 packages/editor/src/theme/code-editor.scss    |  9 +++-
 packages/editor/src/theme/props-panel.scss    | 10 ++++
 packages/editor/src/type.ts                   | 12 +++++
 6 files changed, 71 insertions(+), 15 deletions(-)

diff --git a/packages/editor/src/components/CodeBlockEditor.vue b/packages/editor/src/components/CodeBlockEditor.vue
index 21541977..63eca517 100644
--- a/packages/editor/src/components/CodeBlockEditor.vue
+++ b/packages/editor/src/components/CodeBlockEditor.vue
@@ -32,20 +32,20 @@
   </FloatingBox>
 
   <Teleport to="body">
-    <TMagicDialog title="查看修改" v-model="difVisible" fullscreen>
+    <TMagicDialog title="查看修改" v-model="difVisible" fullscreen destroy-on-close>
       <div style="display: flex; margin-bottom: 10px">
         <div style="flex: 1"><TMagicTag size="small" type="info">修改前</TMagicTag></div>
         <div style="flex: 1"><TMagicTag size="small" type="success">修改后</TMagicTag></div>
       </div>
 
       <CodeEditor
-        v-if="difVisible"
         ref="magicVsEditor"
         type="diff"
         language="json"
+        :disabled-full-screen="true"
         :initValues="content.content"
         :modifiedValues="formBox?.form?.values.content"
-        :style="`height: ${windowRect.height - 150}px`"
+        :height="`${windowRect.height - 150}px`"
       ></CodeEditor>
 
       <template #footer>
diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts
index 55f24ee2..a0a4894a 100644
--- a/packages/editor/src/index.ts
+++ b/packages/editor/src/index.ts
@@ -112,6 +112,9 @@ export { default as StyleSetter } from './fields/StyleSetter/Index.vue';
 const defaultInstallOpt: EditorInstallOptions = {
   // eslint-disable-next-line no-eval
   parseDSL: (dsl: string) => eval(dsl),
+  customCreateMonacoEditor: (monaco, codeEditorEl, options) => monaco.editor.create(codeEditorEl, options),
+  customCreateMonacoDiffEditor: (monaco, codeEditorEl, options) =>
+    monaco.editor.createDiffEditor(codeEditorEl, options),
 };
 
 export default {
diff --git a/packages/editor/src/layouts/CodeEditor.vue b/packages/editor/src/layouts/CodeEditor.vue
index d1bd7f37..4b8233e1 100644
--- a/packages/editor/src/layouts/CodeEditor.vue
+++ b/packages/editor/src/layouts/CodeEditor.vue
@@ -5,7 +5,12 @@
         :class="`magic-code-editor-wrapper${fullScreen ? ' full-screen' : ''}`"
         :style="!fullScreen && height ? `height: ${height}` : '100%'"
       >
-        <TMagicButton class="magic-code-editor-full-screen-icon" circle size="small" @click="fullScreenHandler"
+        <TMagicButton
+          v-if="!disabledFullScreen"
+          class="magic-code-editor-full-screen-icon"
+          circle
+          size="small"
+          @click="fullScreenHandler"
           ><MIcon :icon="FullScreen"></MIcon
         ></TMagicButton>
         <div ref="codeEditor" class="magic-code-editor-content"></div>
@@ -15,7 +20,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
+import { nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
 import { FullScreen } from '@element-plus/icons-vue';
 import { throttle } from 'lodash-es';
 import serialize from 'serialize-javascript';
@@ -36,12 +41,11 @@ const props = withDefaults(
     modifiedValues?: any;
     type?: 'diff';
     language?: string;
-    options?: {
-      [key: string]: any;
-    };
+    options?: monaco.editor.IStandaloneEditorConstructionOptions;
     height?: string;
     autoSave?: boolean;
     parse?: boolean;
+    disabledFullScreen?: boolean;
   }>(),
   {
     initValues: '',
@@ -51,6 +55,7 @@ const props = withDefaults(
       tabSize: 2,
     }),
     parse: false,
+    disabledFullScreen: false,
   },
 );
 
@@ -124,6 +129,10 @@ const getEditorValue = () =>
 const init = async () => {
   if (!codeEditorEl.value) return;
 
+  if (codeEditorEl.value.clientHeight === 0) {
+    await nextTick();
+  }
+
   const options = {
     value: values.value,
     language: props.language,
@@ -132,15 +141,13 @@ const init = async () => {
   };
 
   if (props.type === 'diff') {
-    vsDiffEditor = monaco.editor.createDiffEditor(codeEditorEl.value, options);
+    vsDiffEditor = getEditorConfig('customCreateMonacoDiffEditor')(monaco, codeEditorEl.value, options);
   } else {
-    vsEditor = monaco.editor.create(codeEditorEl.value, options);
+    vsEditor = getEditorConfig('customCreateMonacoEditor')(monaco, codeEditorEl.value, options);
   }
 
   setEditorValue(props.initValues, props.modifiedValues);
 
-  loading.value = false;
-
   emit('initd', vsEditor);
 
   codeEditorEl.value.addEventListener('keydown', (e) => {
@@ -179,14 +186,33 @@ watch(
   },
 );
 
+watch(
+  () => props.options,
+  (v) => {
+    vsEditor?.updateOptions(v);
+    vsDiffEditor?.updateOptions(v);
+  },
+  {
+    deep: true,
+  },
+);
+
 onMounted(async () => {
   loading.value = true;
 
-  init();
+  await init();
+
+  loading.value = false;
 });
 
 onBeforeUnmount(() => {
   resizeObserver.disconnect();
+
+  vsEditor?.dispose();
+  vsDiffEditor?.dispose();
+
+  vsEditor = null;
+  vsDiffEditor = null;
 });
 
 const fullScreen = ref(false);
diff --git a/packages/editor/src/theme/code-editor.scss b/packages/editor/src/theme/code-editor.scss
index 9132c495..8b4388e3 100644
--- a/packages/editor/src/theme/code-editor.scss
+++ b/packages/editor/src/theme/code-editor.scss
@@ -31,8 +31,13 @@
 
   .magic-code-editor-full-screen-icon {
     position: absolute;
-    top: 5px;
-    right: 0;
+    top: 20px;
+    right: 10px;
     z-index: 11;
+    opacity: 0.3;
+
+    &:hover {
+      opacity: 1;
+    }
   }
 }
diff --git a/packages/editor/src/theme/props-panel.scss b/packages/editor/src/theme/props-panel.scss
index 6be35377..fd6deb25 100644
--- a/packages/editor/src/theme/props-panel.scss
+++ b/packages/editor/src/theme/props-panel.scss
@@ -84,6 +84,11 @@
     right: 15px;
     bottom: 15px;
     z-index: 30;
+    opacity: 0.5;
+
+    &:hover {
+      opacity: 1;
+    }
   }
 
   .m-editor-props-panel-style-icon {
@@ -91,6 +96,11 @@
     right: 15px;
     bottom: 60px;
     z-index: 30;
+    opacity: 0.5;
+
+    &:hover {
+      opacity: 1;
+    }
   }
 
   .m-editor-props-panel-src-code.magic-code-editor {
diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts
index 4f105897..5bde80bb 100644
--- a/packages/editor/src/type.ts
+++ b/packages/editor/src/type.ts
@@ -33,6 +33,8 @@ import type {
   UpdateDragEl,
 } from '@tmagic/stage';
 
+import Monaco from '@editor/utils/monaco-editor';
+
 import type { CodeBlockService } from './services/codeBlock';
 import type { ComponentListService } from './services/componentList';
 import type { DataSourceService } from './services/dataSource';
@@ -119,6 +121,16 @@ export type GetConfig = (config: FormConfig) => Promise<FormConfig> | FormConfig
 
 export interface EditorInstallOptions {
   parseDSL: <T = any>(dsl: string) => T;
+  customCreateMonacoEditor: (
+    monaco: typeof Monaco,
+    codeEditorEl: HTMLElement,
+    options: Monaco.editor.IStandaloneEditorConstructionOptions,
+  ) => Monaco.editor.IStandaloneCodeEditor;
+  customCreateMonacoDiffEditor: (
+    monaco: typeof Monaco,
+    codeEditorEl: HTMLElement,
+    options: Monaco.editor.IStandaloneEditorConstructionOptions,
+  ) => Monaco.editor.IStandaloneDiffEditor;
   [key: string]: any;
 }