diff --git a/README.md b/README.md index 5c700b41..dde0d2dc 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ Edit, preview and share mermaid charts/diagrams. ## Live demo -You can try out a live version [here](https://mermaid.live/). +You can try out a [live version](https://mermaid.live/). # Contributors are welcome! diff --git a/src/lib/components/DesktopEditor.svelte b/src/lib/components/DesktopEditor.svelte index c7827040..85a4b46c 100644 --- a/src/lib/components/DesktopEditor.svelte +++ b/src/lib/components/DesktopEditor.svelte @@ -21,6 +21,17 @@ } satisfies monaco.editor.IStandaloneEditorConstructionOptions; let currentText = ''; + const jsonModel = monaco.editor.createModel( + '', + 'json', + monaco.Uri.parse('internal://config.json') + ); + const mermaidModel = monaco.editor.createModel( + '', + 'mermaid', + monaco.Uri.parse('internal://mermaid.mmd') + ); + onMount(() => { self.MonacoEnvironment = { getWorker(_, label) { @@ -35,6 +46,17 @@ throw new Error('divEl is undefined'); } + monaco.languages.json.jsonDefaults.setDiagnosticsOptions({ + validate: true, + enableSchemaRequest: true, + schemas: [ + { + fileMatch: ['config.json'], + uri: 'https://mermaid.js.org/schemas/config.schema.json' + } + ] + }); + initEditor(monaco); errorDebug(); editor = monaco.editor.create(divElement, editorOptions); @@ -52,6 +74,12 @@ return; } + const model = editorMode === 'code' ? mermaidModel : jsonModel; + + if (editor.getModel()?.id !== model.id) { + editor.setModel(model); + } + // Update editor text if it's different const newText = editorMode === 'code' ? code : mermaid; if (newText !== currentText) { @@ -60,17 +88,6 @@ currentText = newText; } - // Update editor mode if it's different - const language = editorMode === 'code' ? 'mermaid' : 'json'; - const model = editor.getModel(); - if (!model) { - console.error("editor model doesn't exist"); - return; - } - if (model.getLanguageId() !== language) { - monaco.editor.setModelLanguage(model, language); - } - // Display/clear errors monaco.editor.setModelMarkers(model, 'mermaid', errorMarkers); });