Browse Source

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

3.1.0-release
Amy0104 2 years ago committed by GitHub
parent
commit
adfec41986
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 2
      dolphinscheduler-ui/src/components/form/fields/monaco-editor.ts
  2. 23
      dolphinscheduler-ui/src/components/monaco-editor/index.tsx
  3. 3
      dolphinscheduler-ui/src/components/monaco-editor/types.ts

2
dolphinscheduler-ui/src/components/form/fields/monaco-editor.ts

@ -26,7 +26,7 @@ export function renderEditor(
) { ) {
const { props, field } = isFunction(item) ? item() : item const { props, field } = isFunction(item) ? item() : item
return h(Editor, { return h(Editor, {
...props, options: props,
value: fields[field], value: fields[field],
onUpdateValue: (value: string) => void (fields[field] = value) onUpdateValue: (value: string) => void (fields[field] = value)
}) })

23
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 cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.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 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 = { const props = {
value: { value: {
@ -44,17 +49,12 @@ const props = {
}, },
'onUpdate:value': [Function, Array] as PropType<MaybeArray<OnUpdateValue>>, 'onUpdate:value': [Function, Array] as PropType<MaybeArray<OnUpdateValue>>,
onUpdateValue: [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: { options: {
type: Object, type: Object as PropType<Monaco.editor.IStandaloneEditorConstructionOptions>,
default: () => {} default: () => ({
readOnly: false,
language: 'shell'
})
} }
} }
@ -96,7 +96,6 @@ export default defineComponent({
...props.options, ...props.options,
readOnly: formItem.mergedDisabledRef.value || props.options?.readOnly, readOnly: formItem.mergedDisabledRef.value || props.options?.readOnly,
value: props.defaultValue ?? props.value, value: props.defaultValue ?? props.value,
language: props.language,
automaticLayout: true, automaticLayout: true,
theme: monacoEditorThemeRef.value theme: monacoEditorThemeRef.value
}) })

3
dolphinscheduler-ui/src/components/monaco-editor/types.ts

@ -15,8 +15,9 @@
* limitations under the License. * limitations under the License.
*/ */
import type { MaybeArray } from 'naive-ui/es/_utils' import type { MaybeArray } from 'naive-ui/es/_utils'
import type monaco from 'monaco-editor'
type OnUpdateValue = <T extends string>(value: T) => void type OnUpdateValue = <T extends string>(value: T) => void
type OnUpdateValueImpl = (value: string) => void type OnUpdateValueImpl = (value: string) => void
export { MaybeArray, OnUpdateValue, OnUpdateValueImpl } export { MaybeArray, OnUpdateValue, OnUpdateValueImpl, monaco }

Loading…
Cancel
Save