feat: add json-records language

Author: WeihanLi

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

@@ -0,0 +1,69 @@
+import type * as MonacoTypes from 'monaco-editor'
+import * as json_parser from 'jsonc-parser'
+
+export function setupJsonRecordsValidation(monaco: typeof MonacoTypes) {
+    const markerId = 'json-records-validation'
+
+    function validate(model: MonacoTypes.editor.ITextModel) {
+        const markers: MonacoTypes.editor.IMarkerData[] = []
+        const text = model.getValue();
+
+        if (text) {
+            const separator = text[text.length - 1];
+            const splits = text.split(separator);
+            let offset = 0;
+            for (let i = 0; i < splits.length; i++) {
+                const part = splits[i];
+                if (part) {
+                    let errors: json_parser.ParseError[] = []
+                    json_parser.parse(part, errors, { allowTrailingComma: false, disallowComments: true });
+                    console.log(`Validating JSON record part [${i}] `, part, `error ${JSON.stringify(errors)}`);
+                    if (errors) {
+                        errors.forEach((err) => {
+                            markers.push({
+                                severity: monaco.MarkerSeverity.Error,
+                                startLineNumber: i,
+                                startColumn: offset, // +1 for the separator
+                                endLineNumber: i,
+                                endColumn: offset + err.length,
+                                message: err.error.toString(),
+                            })
+                        });
+                    }
+                }
+
+                offset += part.length + 1; // +1 for the separator
+            }
+        }
+
+        monaco.editor.setModelMarkers(model, markerId, markers)
+    }
+
+    const contentChangeListeners = new Map<MonacoTypes.editor.ITextModel, MonacoTypes.IDisposable>()
+    function manageContentChangeListener(model: MonacoTypes.editor.ITextModel) {
+        const isJsonRecords = model.getModeId() === 'json-records'
+        const listener = contentChangeListeners.get(model)
+
+        if (isJsonRecords && !listener) {
+            contentChangeListeners.set(
+                model,
+                model.onDidChangeContent(() => validate(model))
+            )
+            validate(model)
+        } else if (!isJsonRecords && 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)
+    })
+}

src/components/editor/monaco.ts

@@ -7,6 +7,7 @@ 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';
 
 export type {
     MonacoTypes,
@@ -75,7 +76,12 @@ async function loadMonacoEditor(retries = 5): Promise<void> {
             },
         });
 
+        monaco.languages.register({
+            id: 'json-records'
+        });
+
         setupXMLValidation(monaco);
+        setupJsonRecordsValidation(monaco);
 
         MonacoEditor = rmeModule.default;
     } catch (err) {

src/model/events/body-formatting.ts

@@ -9,6 +9,7 @@ import type { WorkerFormatterKey } from '../../services/ui-worker-formatters';
 import { formatBufferAsync } from '../../services/ui-worker-api';
 import { ReadOnlyParams } from '../../components/common/editable-params';
 import { ImageViewer } from '../../components/editor/image-viewer';
+import { Buffer } from 'buffer';
 
 export interface EditorFormatter {
     language: string;
@@ -128,35 +129,32 @@ export const Formatters: { [key in ViewableContentType]: Formatter } = {
         }
     },
     'json-records': {
-        language: 'json',
+        language: 'json-records',
         cacheKey: Symbol('json-records'),
         isEditApplicable: false,
         render: (input: Buffer, headers?: Headers) => {
             if (input.byteLength < 10_000) {
                 try {
-                    let records = new Array();
+                    let records = new Array<string>();
                     const separator = input[input.length - 1];
+                    const separatorString = Buffer.of(separator).toString('utf8');
+
                     splitBuffer(input, separator).forEach((recordBuffer: Buffer) => {
                         if (recordBuffer.length > 0) {
                             const record = recordBuffer.toString('utf-8');
-                            records.push(JSON.parse(record.trim()));
+                            records.push(record + separatorString);
                         }
                     });
-                    // For short-ish inputs, we return synchronously - conveniently this avoids
-                    // showing the loading spinner that churns the layout in short content cases.
-                    return JSON.stringify(
-                        records,
-                        null,
-                        2
-                    );
+
+                    return records.join('');
                     // ^ Same logic as in UI-worker-formatter
                 } catch (e) {
                     // Fallback to showing the raw un-formatted:
                     return bufferToString(input);
                 }
             } else {
                 return observablePromise(
-                    formatBufferAsync(input, 'json', headers)
+                    formatBufferAsync(input, 'json-records', headers)
                 );
             }
         }

src/services/ui-worker-formatters.ts

@@ -84,13 +84,16 @@ const WorkerFormatters = {
         try {
             let records = new Array();
             const separator = content[content.length - 1];
+            const separatorString = Buffer.of(separator).toString('utf8');
+
             splitBuffer(content, separator).forEach((recordBuffer: Buffer) => {
                 if (recordBuffer.length > 0) {
                     const record = recordBuffer.toString('utf-8');
-                    records.push(JSON.parse(record.trim()));
+                    records.push(record + separatorString);
                 }
             });
-            return JSON.stringify(records, null, 2);
+
+            return records.join('');
         } catch (e) {
             return content.toString('utf8');
         }