Просмотр исходного кода

[Improvement][UI] Improve monaco-editor component in ts. (#11274)

Amy0104 2 лет назад
Родитель
Сommit
adfec41986

+ 1 - 1
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)
   })

+ 11 - 12
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
         })

+ 2 - 1
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 }