Browse Source

feat(gui-v2): generlise monaco

pull/2838/head
Wing-Kam Wong 2 years ago
parent
commit
cf956b3776
  1. 47
      packages/nc-gui-v2/components/monaco/Editor.vue

47
packages/nc-gui-v2/components/monaco/Editor.vue

@ -2,12 +2,20 @@
import * as monaco from 'monaco-editor' import * as monaco from 'monaco-editor'
import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker' import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker' import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import TypescriptWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
import { onMounted } from '#imports' import { onMounted } from '#imports'
import { deepCompare } from '~/utils/deepCompare' import { deepCompare } from '~/utils/deepCompare'
const { modelValue } = defineProps<{ modelValue: any }>() interface Props {
modelValue: string
lang?: string
validate?: Boolean
}
const { modelValue, lang = 'json', validate = true } = defineProps<Props>()
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])
const isValid = ref(true) const isValid = ref(true)
/** /**
@ -16,10 +24,14 @@ const isValid = ref(true)
* @ts-expect-error */ * @ts-expect-error */
self.MonacoEnvironment = { self.MonacoEnvironment = {
getWorker(_: any, label: string) { getWorker(_: any, label: string) {
if (label === 'json') { switch (label) {
case 'json':
return new JsonWorker() return new JsonWorker()
} case 'typescript':
return new TypescriptWorker()
default:
return new EditorWorker() return new EditorWorker()
}
}, },
} }
@ -36,13 +48,14 @@ defineExpose({
}) })
onMounted(() => { onMounted(() => {
if (root.value) { if (root.value && lang) {
const model = monaco.editor.createModel(JSON.stringify(modelValue, null, 2), 'json') const model = monaco.editor.createModel(JSON.stringify(modelValue, null, 2), lang)
if (lang === 'json') {
// configure the JSON language support with schemas and schema associations // configure the JSON language support with schemas and schema associations
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({ monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
validate: true, validate: validate as boolean,
}) })
}
editor = monaco.editor.create(root.value, { editor = monaco.editor.create(root.value, {
model, model,
@ -60,8 +73,15 @@ onMounted(() => {
editor.onDidChangeModelContent(async (e) => { editor.onDidChangeModelContent(async (e) => {
try { try {
isValid.value = true isValid.value = true
const obj = JSON.parse(editor.getValue())
if (!deepCompare(modelValue, obj)) emit('update:modelValue', obj) const value = editor?.getValue()
if (typeof modelValue === 'object') {
if (!value || !deepCompare(modelValue, JSON.parse(value))) {
emit('update:modelValue', JSON.stringify(modelValue, null, 2))
}
} else {
if (value !== modelValue) emit('update:modelValue', value)
}
} catch (e) { } catch (e) {
isValid.value = false isValid.value = false
console.log(e) console.log(e)
@ -73,9 +93,16 @@ onMounted(() => {
watch( watch(
() => modelValue, () => modelValue,
(v) => { (v) => {
if (editor && v && !deepCompare(v, JSON.parse(editor?.getValue() as string))) { if (editor && v) {
const value = editor?.getValue()
if (typeof v === 'object') {
if (!value || !deepCompare(v, JSON.parse(value))) {
editor.setValue(JSON.stringify(v, null, 2)) editor.setValue(JSON.stringify(v, null, 2))
} }
} else {
if (value !== v) editor.setValue(v)
}
}
}, },
) )
</script> </script>

Loading…
Cancel
Save