Browse Source

fix(gui-v2): add monaco editor to Vite

pull/2795/head
Wing-Kam Wong 2 years ago
parent
commit
11180d518c
  1. 17
      packages/nc-gui-v2/components/monaco/Editor.vue

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

@ -1,11 +1,27 @@
<script setup lang="ts"> <script setup lang="ts">
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 EditorWorker from 'monaco-editor/esm/vs/editor/editor.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 }>() const { modelValue } = defineProps<{ modelValue: any }>()
const emit = defineEmits(['update:modelValue']) const emit = defineEmits(['update:modelValue'])
/**
* Adding monaco editor to Vite
*
* @ts-expect-error */
self.MonacoEnvironment = {
getWorker(_: any, label: string) {
if (label === 'json') {
return new JsonWorker()
}
return new EditorWorker()
},
}
const root = ref<HTMLDivElement>() const root = ref<HTMLDivElement>()
let editor: monaco.editor.IStandaloneCodeEditor let editor: monaco.editor.IStandaloneCodeEditor
@ -41,7 +57,6 @@ onMounted(() => {
editor.onDidChangeModelContent(async (e) => { editor.onDidChangeModelContent(async (e) => {
try { try {
// console.log(e)
const obj = JSON.parse(editor.getValue()) const obj = JSON.parse(editor.getValue())
if (!deepCompare(modelValue, obj)) emit('update:modelValue', obj) if (!deepCompare(modelValue, obj)) emit('update:modelValue', obj)
} catch (e) { } catch (e) {

Loading…
Cancel
Save