Merge pull request #158 from ceifa/main

feat: add xml content type custom validation

Author: pimterry

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,58 @@
+import type * as MonacoTypes from 'monaco-editor'
+import { XMLValidator } from 'fast-xml-parser'
+
+export function setupXMLValidation(monaco: typeof MonacoTypes) {
+    const markerId = 'xml-validation'
+
+    function validate(model: MonacoTypes.editor.ITextModel) {
+        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: model.getLineContent(validationResult.err.line).length + 1,
+                    message: validationResult.err.msg,
+                })
+            }
+        }
+
+        monaco.editor.setModelMarkers(model, markerId, markers)
+    }
+
+    const contentChangeListeners = new Map<MonacoTypes.editor.ITextModel, MonacoTypes.IDisposable>()
+    function manageContentChangeListener(model: MonacoTypes.editor.ITextModel) {
+        const isXml = model.getModeId() === 'xml'
+        const listener = contentChangeListeners.get(model)
+
+        if (isXml && !listener) {
+            contentChangeListeners.set(
+                model,
+                model.onDidChangeContent(() => validate(model))
+            )
+            validate(model)
+        } else if (!isXml && listener) {
+            listener.dispose()
+            contentChangeListeners.delete(model)
+            monaco.editor.setModelMarkers(model, markerId, [])
+        }
+    }
+
+    monaco.editor.onWillDisposeModel(model => {
+        contentChangeListeners.delete(model)
+    })
+    monaco.editor.onDidChangeModelLanguage(({ model }) => {
+        manageContentChangeListener(model)
+    })
+    monaco.editor.onDidCreateModel(model => {
+        manageContentChangeListener(model)
+    })
+}