feat: json-records content type support

package.json

@@ -98,6 +98,7 @@
     "har-validator": "^5.1.3",
     "http-encoding": "^2.0.1",
     "js-beautify": "^1.8.8",
+    "jsonc-parser": "^3.3.1",
     "jsonwebtoken": "^8.4.0",
     "localforage": "^1.7.3",
     "lodash": "^4.17.21",

src/components/editor/monaco.ts

@@ -1,12 +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 { ContentValidator, validateJsonRecords, validateXml } from '../../model/events/content-validation';
 
 export type {
     MonacoTypes,
@@ -75,7 +76,12 @@ async function loadMonacoEditor(retries = 5): Promise<void> {
             },
         });
 
-        setupXMLValidation(monaco);
+        monaco.languages.register({
+            id: 'json-records'
+        });
+
+        addValidator(monaco, 'xml', validateXml);
+        addValidator(monaco, 'json-records', validateJsonRecords);
 
         MonacoEditor = rmeModule.default;
     } catch (err) {
@@ -89,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/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 { formatJson } from '../../util/json';
 
 export interface EditorFormatter {
     language: string;
@@ -106,27 +107,29 @@ export const Formatters: { [key in ViewableContentType]: Formatter } = {
         render: (input: Buffer, headers?: Headers) => {
             if (input.byteLength < 10_000) {
                 const inputAsString = bufferToString(input);
-
-                try {
-                    // 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(
-                        JSON.parse(inputAsString),
-                        null,
-                        2
-                    );
-                    // ^ Same logic as in UI-worker-formatter
-                } catch (e) {
-                    // Fallback to showing the raw un-formatted JSON:
-                    return inputAsString;
-                }
+                return formatJson(inputAsString, { formatRecords: false });
             } else {
                 return observablePromise(
                     formatBufferAsync(input, 'json', headers)
                 );
             }
         }
     },
+    'json-records': {
+        language: 'json-records',
+        cacheKey: Symbol('json-records'),
+        isEditApplicable: false,
+        render: (input: Buffer, headers?: Headers) => {
+            if (input.byteLength < 10_000) {
+                const inputAsString = bufferToString(input);
+                return formatJson(inputAsString, { formatRecords: true });
+            } else {
+                return observablePromise(
+                    formatBufferAsync(input, 'json-records', headers)
+                );
+            }
+        }
+    },
     javascript: {
         language: 'javascript',
         cacheKey: Symbol('javascript'),

src/model/events/content-types.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) => {
@@ -51,7 +52,9 @@ export type ViewableContentType =
     | 'yaml'
     | 'image'
     | 'protobuf'
-    | 'grpc-proto';
+    | 'grpc-proto'
+    | 'json-records'
+    ;
 
 export const EditableContentTypes = [
     'text',
@@ -119,6 +122,14 @@ 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;
 
@@ -141,6 +152,7 @@ export function getEditableContentType(mimeType: string | undefined): EditableCo
 
 export function getContentEditorName(contentType: ViewableContentType): string {
     return contentType === 'raw' ? 'Hex'
+        : contentType === 'json-records' ? 'JSON Records'
         : contentType === 'json' ? 'JSON'
         : contentType === 'css' ? 'CSS'
         : contentType === 'url-encoded' ? 'URL-Encoded'
@@ -186,16 +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 (!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 === '{' || 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');
     }