Merge pull request #1700 from mermaid-js/sidv/jsonSchema

feat: Support jsonSchema to validate config

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);
     });