Browse Source

[Feature][UI Next][V1.0.0-Beta] Monaco Editor supports theme switching function. (#9521)

3.0.0/version-upgrade
songjianet 3 years ago committed by GitHub
parent
commit
0972610204
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 59
      dolphinscheduler-ui-next/src/components/monaco-editor/index.tsx

59
dolphinscheduler-ui-next/src/components/monaco-editor/index.tsx

@ -20,12 +20,12 @@ import {
onMounted, onMounted,
onUnmounted, onUnmounted,
PropType, PropType,
nextTick,
ref, ref,
watch watch
} from 'vue' } from 'vue'
import { useFormItem } from 'naive-ui/es/_mixins' import { useFormItem } from 'naive-ui/es/_mixins'
import { call } from 'naive-ui/es/_utils' import { call } from 'naive-ui/es/_utils'
import {useThemeStore} from "@/store/theme/theme";
import * as monaco from 'monaco-editor' import * as monaco from 'monaco-editor'
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker' import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker' import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
@ -83,30 +83,13 @@ export default defineComponent({
emits: ['change', 'focus', 'blur'], emits: ['change', 'focus', 'blur'],
setup(props, ctx) { setup(props, ctx) {
let editor = null as monaco.editor.IStandaloneCodeEditor | null let editor = null as monaco.editor.IStandaloneCodeEditor | null
const themeStore = useThemeStore()
const monacoEditorThemeRef = ref(themeStore.darkTheme ? 'vs-dark' : 'vs')
const editorRef = ref() const editorRef = ref()
const getValue = () => editor?.getValue() const getValue = () => editor?.getValue()
const formItem = useFormItem({}) const formItem = useFormItem({})
watch( const initMonacoEditor = () => {
() => props.value,
(val) => {
if (val !== getValue()) {
editor?.setValue(val)
}
}
)
watch(
() => formItem.mergedDisabledRef.value,
(value) => {
editor?.updateOptions({ readOnly: value })
}
)
onMounted(async () => {
await nextTick()
const dom = editorRef.value const dom = editorRef.value
if (dom) { if (dom) {
editor = monaco.editor.create(dom, { editor = monaco.editor.create(dom, {
@ -114,7 +97,8 @@ export default defineComponent({
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, language: props.language,
automaticLayout: true automaticLayout: true,
theme: monacoEditorThemeRef.value
}) })
editor.onDidChangeModelContent(() => { editor.onDidChangeModelContent(() => {
const { onUpdateValue, 'onUpdate:value': _onUpdateValue } = props const { onUpdateValue, 'onUpdate:value': _onUpdateValue } = props
@ -136,12 +120,39 @@ export default defineComponent({
formItem.nTriggerFormFocus() formItem.nTriggerFormFocus()
}) })
} }
}) }
onMounted(() => initMonacoEditor())
onUnmounted(() => { onUnmounted(() => {
editor?.dispose() editor?.dispose()
}) })
watch(
() => props.value,
(val) => {
if (val !== getValue()) {
editor?.setValue(val)
}
}
)
watch(
() => formItem.mergedDisabledRef.value,
(value) => {
editor?.updateOptions({ readOnly: value })
}
)
watch(
() => themeStore.darkTheme,
() => {
editor?.dispose()
monacoEditorThemeRef.value = themeStore.darkTheme ? 'vs-dark' : 'vs'
initMonacoEditor()
}
)
ctx.expose({ getValue }) ctx.expose({ getValue })
return { editorRef } return { editorRef }
@ -155,7 +166,7 @@ export default defineComponent({
width: '100%', width: '100%',
border: '1px solid #eee' border: '1px solid #eee'
}} }}
></div> />
) )
} }
}) })

Loading…
Cancel
Save