This is an automated email from the ASF dual-hosted git repository.
songjian pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
The following commit(s) were added to refs/heads/dev by this push:
new 0972610204 [Feature][UI Next][V1.0.0-Beta] Monaco Editor supports
theme switching function. (#9521)
0972610204 is described below
commit 0972610204d1cd88de13f943a6281eaa93ba828f
Author: songjianet <[email protected]>
AuthorDate: Fri Apr 15 21:50:15 2022 +0800
[Feature][UI Next][V1.0.0-Beta] Monaco Editor supports theme switching
function. (#9521)
---
.../src/components/monaco-editor/index.tsx | 59 +++++++++++++---------
1 file changed, 35 insertions(+), 24 deletions(-)
diff --git a/dolphinscheduler-ui-next/src/components/monaco-editor/index.tsx
b/dolphinscheduler-ui-next/src/components/monaco-editor/index.tsx
index ae6445bf4d..8fbb40ce35 100644
--- a/dolphinscheduler-ui-next/src/components/monaco-editor/index.tsx
+++ b/dolphinscheduler-ui-next/src/components/monaco-editor/index.tsx
@@ -20,12 +20,12 @@ import {
onMounted,
onUnmounted,
PropType,
- nextTick,
ref,
watch
} from 'vue'
import { useFormItem } from 'naive-ui/es/_mixins'
import { call } from 'naive-ui/es/_utils'
+import {useThemeStore} from "@/store/theme/theme";
import * as monaco from 'monaco-editor'
import editorWorker from 'monaco-editor/esm/vs/editor/editor.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'],
setup(props, ctx) {
let editor = null as monaco.editor.IStandaloneCodeEditor | null
-
+ const themeStore = useThemeStore()
+ const monacoEditorThemeRef = ref(themeStore.darkTheme ? 'vs-dark' : 'vs')
const editorRef = ref()
-
const getValue = () => editor?.getValue()
-
const formItem = useFormItem({})
- watch(
- () => props.value,
- (val) => {
- if (val !== getValue()) {
- editor?.setValue(val)
- }
- }
- )
- watch(
- () => formItem.mergedDisabledRef.value,
- (value) => {
- editor?.updateOptions({ readOnly: value })
- }
- )
-
- onMounted(async () => {
- await nextTick()
+ const initMonacoEditor = () => {
const dom = editorRef.value
if (dom) {
editor = monaco.editor.create(dom, {
@@ -114,7 +97,8 @@ export default defineComponent({
readOnly: formItem.mergedDisabledRef.value ||
props.options?.readOnly,
value: props.defaultValue ?? props.value,
language: props.language,
- automaticLayout: true
+ automaticLayout: true,
+ theme: monacoEditorThemeRef.value
})
editor.onDidChangeModelContent(() => {
const { onUpdateValue, 'onUpdate:value': _onUpdateValue } = props
@@ -136,12 +120,39 @@ export default defineComponent({
formItem.nTriggerFormFocus()
})
}
- })
+ }
+
+ onMounted(() => initMonacoEditor())
onUnmounted(() => {
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 })
return { editorRef }
@@ -155,7 +166,7 @@ export default defineComponent({
width: '100%',
border: '1px solid #eee'
}}
- ></div>
+ />
)
}
})
