Extract content validation + extend JSON record validation & detection

This now uses parseTree with model.getPosition to get the exact correct
line & column for errors, and to handle multiple errors in the same line
or elsewhere, and accepts JSON lines & NDJSON in addition to 0x1E
separated records like SignalR.

Detection is extended to match, and uses some slightly broader
heuristics to catch a few more cases.

Author: pimterry

src/components/editor/json-records-validation.ts

@@ -1,13 +1,13 @@
 import type * as MonacoTypes from 'monaco-editor';
 import type { default as _MonacoEditor, MonacoEditorProps } from 'react-monaco-editor';
+import { observable, runInAction } from 'mobx';
 
 import { defineMonacoThemes } from '../../styles';
 
 import { delay } from '../../util/promise';
 import { asError } from '../../util/error';
-import { observable, runInAction } from 'mobx';
-import { setupXMLValidation } from './xml-validation';
-import { setupJsonRecordsValidation } from './json-records-validation';
+
+import { ContentValidator, validateJsonRecords, validateXml } from '../../model/events/content-validation';
 
 export type {
     MonacoTypes,
@@ -80,8 +80,8 @@ async function loadMonacoEditor(retries = 5): Promise<void> {
             id: 'json-records'
         });
 
-        setupXMLValidation(monaco);
-        setupJsonRecordsValidation(monaco);
+        addValidator(monaco, 'xml', validateXml);
+        addValidator(monaco, 'json-records', validateJsonRecords);
 
         MonacoEditor = rmeModule.default;
     } catch (err) {
@@ -95,6 +95,43 @@ async function loadMonacoEditor(retries = 5): Promise<void> {
     }
 }
 
+function addValidator(monaco: typeof MonacoTypes, modeId: string, validator: ContentValidator) {
+    function validate(model: MonacoTypes.editor.ITextModel) {
+        const text = model.getValue();
+        const markers = validator(text, model);
+        monaco.editor.setModelMarkers(model, modeId, markers);
+    }
+
+    const contentChangeListeners = new Map<MonacoTypes.editor.ITextModel, MonacoTypes.IDisposable>();
+
+    function manageContentChangeListener(model: MonacoTypes.editor.ITextModel) {
+        const isActiveMode = model.getModeId() === modeId;
+        const listener = contentChangeListeners.get(model);
+
+        if (isActiveMode && !listener) {
+            contentChangeListeners.set(model, model.onDidChangeContent(() =>
+                validate(model)
+            ));
+            validate(model);
+        } else if (!isActiveMode && listener) {
+            listener.dispose();
+            contentChangeListeners.delete(model);
+            monaco.editor.setModelMarkers(model, modeId, []);
+        }
+    }
+
+    monaco.editor.onWillDisposeModel(model => {
+        contentChangeListeners.delete(model);
+    });
+    monaco.editor.onDidChangeModelLanguage(({ model }) => {
+        manageContentChangeListener(model);
+    });
+    monaco.editor.onDidCreateModel(model => {
+        manageContentChangeListener(model);
+    });
+
+}
+
 export function reloadMonacoEditor() {
     return monacoLoadingPromise = loadMonacoEditor(0);
 }

src/components/editor/monaco.ts

@@ -7,6 +7,7 @@ import {
     isProbablyGrpcProto,
     isValidGrpcProto,
 } from '../../util/protobuf';
+import { isProbablyJson, isProbablyJsonRecords } from '../../util/json';
 
 // Simplify a mime type as much as we can, without throwing any errors
 export const getBaseContentType = (mimeType: string | undefined) => {
@@ -121,13 +122,17 @@ const mimeTypeToContentTypeMap: { [mimeType: string]: ViewableContentType } = {
     'application/grpc-proto': 'grpc-proto',
     'application/grpc-protobuf': 'grpc-proto',
 
+    // Nobody can quite agree on the names for the various sequence-of-JSON formats:
+    'application/jsonlines': 'json-records',
+    'application/json-lines': 'json-records',
+    'application/x-jsonlines': 'json-records',
+    'application/jsonl': 'json-records',
+    'application/x-ndjson': 'json-records',
+    'application/json-seq': 'json-records',
+
     'application/octet-stream': 'raw'
 } as const;
 
-export const jsonRecordsSeparators = [
-    0x1E, // SignalR record separator https://github.com/dotnet/aspnetcore/blob/v8.0.0/src/SignalR/docs/specs/HubProtocol.md#json-encoding
-];
-
 export function getContentType(mimeType: string | undefined): ViewableContentType | undefined {
     const baseContentType = getBaseContentType(mimeType);
     return mimeTypeToContentTypeMap[baseContentType!];
@@ -193,26 +198,18 @@ export function getCompatibleTypes(
         body = body.decodedData;
     }
 
-    // Examine the first char of the body, assuming it's ascii
-    const firstChar = body && body.subarray(0, 1).toString('ascii');
-
     // Allow optionally formatting non-JSON-records as JSON-records, if it looks like it might be
-    if (body && body.length > 2 && firstChar === '{' 
-            && jsonRecordsSeparators.indexOf(body[body.length - 1]) > -1
-    ) {
-        const secondToLastChar = body.subarray(body.length - 2, body.length - 1).toString('ascii');
-        if (secondToLastChar === '}') {
-            types.add('json-records');
-        }
+    if (!types.has('json-records') && isProbablyJsonRecords(body)) {
+        types.add('json-records');
     }
 
-    // Allow optionally formatting non-JSON as JSON, if it looks like it might be
-    if ((firstChar === '{' && !types.has('json-records')) || firstChar === '[') {
+    if (!types.has('json-records') && isProbablyJson(body)) {
+        // Allow optionally formatting non-JSON as JSON, if it's anything remotely close
         types.add('json');
     }
 
     // Allow optionally formatting non-XML as XML, if it looks like it might be
-    if (firstChar === '<') {
+    if (body?.subarray(0, 1).toString('ascii') === '<') {
         types.add('xml');
     }