feat: add xml content type custom validation

Author: ceifa

package-lock.json

@@ -93,6 +93,7 @@
     "deserialize-error": "0.0.3",
     "dompurify": "^2.5.6",
     "fast-json-patch": "^3.1.1",
+    "fast-xml-parser": "^5.2.3",
     "graphql": "^15.8.0",
     "har-validator": "^5.1.3",
     "http-encoding": "^2.0.1",

package.json

@@ -6,6 +6,7 @@ import { defineMonacoThemes } from '../../styles';
 import { delay } from '../../util/promise';
 import { asError } from '../../util/error';
 import { observable, runInAction } from 'mobx';
+import { setupXMLValidation } from './xml-validation';
 
 export type {
     MonacoTypes,
@@ -74,6 +75,8 @@ async function loadMonacoEditor(retries = 5): Promise<void> {
             },
         });
 
+        setupXMLValidation(monaco);
+
         MonacoEditor = rmeModule.default;
     } catch (err) {
         console.log('Monaco load failed', asError(err).message);

src/components/editor/monaco.ts

@@ -0,0 +1,40 @@
+import type * as MonacoTypes from 'monaco-editor'
+import { XMLValidator } from 'fast-xml-parser'
+
+export function setupXMLValidation(monaco: typeof MonacoTypes) {
+    const xmlModels = new Set<MonacoTypes.editor.ITextModel>()
+
+    monaco.editor.onWillDisposeModel(model => {
+        xmlModels.delete(model)
+    })
+
+    monaco.editor.onDidChangeModelLanguage(event => {
+        const model = event.model
+        if (model.getModeId() === 'xml' && !xmlModels.has(model)) {
+            xmlModels.add(model)
+            model.onDidChangeContent(() => {
+                const markers: MonacoTypes.editor.IMarkerData[] = []
+                const text = model.getValue()
+
+                if (text.trim()) {
+                    const validationResult = XMLValidator.validate(text, {
+                        allowBooleanAttributes: true,
+                    })
+
+                    if (validationResult !== true) {
+                        markers.push({
+                            severity: monaco.MarkerSeverity.Error,
+                            startLineNumber: validationResult.err.line,
+                            startColumn: validationResult.err.col,
+                            endLineNumber: validationResult.err.line,
+                            endColumn: validationResult.err.col + 10, // the 10 is totally arbitrary here
+                            message: validationResult.err.msg,
+                        })
+                    }
+                }
+
+                monaco.editor.setModelMarkers(model, 'xml-validation', markers)
+            })
+        }
+    })
+}