From adfec41986f1a4ae19f2f24f9e37e00355236c3e Mon Sep 17 00:00:00 2001
From: Amy0104 <amywang0104@163.com>
Date: Wed, 3 Aug 2022 15:17:56 +0800
Subject: [PATCH] [Improvement][UI] Improve monaco-editor component in ts.
 (#11274)

---
 .../components/form/fields/monaco-editor.ts   |  2 +-
 .../src/components/monaco-editor/index.tsx    | 23 +++++++++----------
 .../src/components/monaco-editor/types.ts     |  3 ++-
 3 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/dolphinscheduler-ui/src/components/form/fields/monaco-editor.ts b/dolphinscheduler-ui/src/components/form/fields/monaco-editor.ts
index b7e0676502..d138534149 100644
--- a/dolphinscheduler-ui/src/components/form/fields/monaco-editor.ts
+++ b/dolphinscheduler-ui/src/components/form/fields/monaco-editor.ts
@@ -26,7 +26,7 @@ export function renderEditor(
 ) {
   const { props, field } = isFunction(item) ? item() : item
   return h(Editor, {
-    ...props,
+    options: props,
     value: fields[field],
     onUpdateValue: (value: string) => void (fields[field] = value)
   })
diff --git a/dolphinscheduler-ui/src/components/monaco-editor/index.tsx b/dolphinscheduler-ui/src/components/monaco-editor/index.tsx
index 7dd637f749..bc0bdf75cc 100644
--- a/dolphinscheduler-ui/src/components/monaco-editor/index.tsx
+++ b/dolphinscheduler-ui/src/components/monaco-editor/index.tsx
@@ -32,7 +32,12 @@ import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
 import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
 import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
-import type { MaybeArray, OnUpdateValue, OnUpdateValueImpl } from './types'
+import type {
+  MaybeArray,
+  OnUpdateValue,
+  OnUpdateValueImpl,
+  monaco as Monaco
+} from './types'
 
 const props = {
   value: {
@@ -44,17 +49,12 @@ const props = {
   },
   'onUpdate:value': [Function, Array] as PropType<MaybeArray<OnUpdateValue>>,
   onUpdateValue: [Function, Array] as PropType<MaybeArray<OnUpdateValue>>,
-  language: {
-    type: String as PropType<string>,
-    default: 'shell'
-  },
-  readOnly: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
   options: {
-    type: Object,
-    default: () => {}
+    type: Object as PropType<Monaco.editor.IStandaloneEditorConstructionOptions>,
+    default: () => ({
+      readOnly: false,
+      language: 'shell'
+    })
   }
 }
 
@@ -96,7 +96,6 @@ export default defineComponent({
           ...props.options,
           readOnly: formItem.mergedDisabledRef.value || props.options?.readOnly,
           value: props.defaultValue ?? props.value,
-          language: props.language,
           automaticLayout: true,
           theme: monacoEditorThemeRef.value
         })
diff --git a/dolphinscheduler-ui/src/components/monaco-editor/types.ts b/dolphinscheduler-ui/src/components/monaco-editor/types.ts
index 830c07aebf..829c616794 100644
--- a/dolphinscheduler-ui/src/components/monaco-editor/types.ts
+++ b/dolphinscheduler-ui/src/components/monaco-editor/types.ts
@@ -15,8 +15,9 @@
  * limitations under the License.
  */
 import type { MaybeArray } from 'naive-ui/es/_utils'
+import type monaco from 'monaco-editor'
 
 type OnUpdateValue = <T extends string>(value: T) => void
 type OnUpdateValueImpl = (value: string) => void
 
-export { MaybeArray, OnUpdateValue, OnUpdateValueImpl }
+export { MaybeArray, OnUpdateValue, OnUpdateValueImpl, monaco }