@xh/hoist 79.0.0-SNAPSHOT.1765576094437 → 79.0.0-SNAPSHOT.1765576473366

package/desktop/cmp/input/JsonInput.ts

@@ -4,15 +4,27 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {hoistCmp} from '@xh/hoist/core';
+import {hoistCmp, PlainObject} from '@xh/hoist/core';
 import '@xh/hoist/desktop/register';
 import {fmtJson} from '@xh/hoist/format';
-import * as codemirror from 'codemirror';
-import 'codemirror/mode/javascript/javascript';
+import Ajv, {Options, SchemaObject, ValidateFunction} from 'ajv';
 import {codeInput, CodeInputProps} from './CodeInput';
-import {jsonlint} from './impl/jsonlint';
+import {jsonlint} from './impl/jsonlint.js';
 
-export type JsonInputProps = CodeInputProps;
+export interface JsonInputProps extends CodeInputProps {
+    /**
+     * JSON Schema object used to validate the input JSON. Accepts any valid JSON Schema keywords
+     * supported by AJV, such as `type`, `properties`, `required`, and `additionalProperties`.
+     * @see https://ajv.js.org/json-schema.html
+     */
+    jsonSchema?: SchemaObject;
+
+    /**
+     * Configuration object with any properties supported by the AJV API.
+     * @see {@link https://ajv.js.org/options.html}
+     */
+    ajvProps?: Options;
+}
 
 /**
  * Code-editor style input for editing and validating JSON, powered by CodeMirror.
@@ -21,11 +33,13 @@ export const [JsonInput, jsonInput] = hoistCmp.withFactory<JsonInputProps>({
     displayName: 'JsonInput',
     className: 'xh-json-input',
     render(props, ref) {
+        const {jsonSchema, ajvProps, ...rest} = props;
+
         return codeInput({
-            linter: linter,
+            linter: jsonLinterWrapper(jsonSchema, ajvProps),
             formatter: fmtJson,
-            mode: 'application/json',
-            ...props,
+            language: 'json',
+            ...rest,
             ref
         });
     }
@@ -33,24 +47,114 @@ export const [JsonInput, jsonInput] = hoistCmp.withFactory<JsonInputProps>({
 (JsonInput as any).hasLayoutSupport = true;
 
 //----------------------
-// Implementation
-//-----------------------
-function linter(text: string) {
-    const errors = [];
-    if (!text) return errors;
-
-    jsonlint.parseError = function (str, hash) {
-        const loc = hash.loc;
-        errors.push({
-            from: codemirror.Pos(loc.first_line - 1, loc.first_column),
-            to: codemirror.Pos(loc.last_line - 1, loc.last_column),
-            message: str
+// JSON Linter helper
+//----------------------
+function jsonLinterWrapper(jsonSchema?: PlainObject, ajvProps?: Options) {
+    // No schema → only use JSONLint
+    if (!jsonSchema) return jsonLintOnly;
+
+    const ajv = new Ajv({...ajvProps}),
+        validate = ajv.compile(jsonSchema);
+
+    return (text: string) => {
+        const annotations: any[] = [];
+
+        if (!text.trim()) return annotations;
+
+        runJsonLint(text, annotations);
+        if (annotations.length) return annotations;
+
+        runAjvValidation(text, validate, annotations);
+
+        return annotations;
+    };
+}
+
+/** Run JSONLint and append errors to annotations */
+function runJsonLint(text: string, annotations: any[]) {
+    jsonlint.parseError = (message, hash) => {
+        const {first_line, first_column, last_line, last_column} = hash.loc;
+        annotations.push({
+            from: indexFromLineCol(text, first_line, first_column),
+            to: indexFromLineCol(text, last_line, last_column),
+            message,
+            severity: 'error'
         });
     };
 
     try {
         jsonlint.parse(text);
-    } catch (ignored) {}
+    } catch {
+        // intentionally ignored: parseError handles reporting
+    }
+}
+
+/** Run AJV schema validation and append errors to annotations */
+function runAjvValidation(text: string, validate: ValidateFunction, annotations: any[]) {
+    let data: any;
+    try {
+        data = JSON.parse(text);
+    } catch {
+        return;
+    }
+
+    const valid = validate(data);
+    if (valid || !validate.errors) return;
+
+    validate.errors.forEach(err => {
+        const {from, to} = getErrorPosition(err, text),
+            message = formatAjvMessage(err);
+
+        annotations.push({from, to, message, severity: 'error'});
+    });
+}
+
+/** Determine text positions for AJV error highlighting */
+function getErrorPosition(err: any, text: string): {from: number; to: number} {
+    let from = 0,
+        to = 0,
+        key: string;
+
+    if (err.keyword === 'additionalProperties' && err.params?.additionalProperty) {
+        key = err.params.additionalProperty;
+    } else {
+        const parts = (err.instancePath || '').split('/').filter(Boolean);
+        key = parts[parts.length - 1];
+    }
+
+    if (key) {
+        const idx = text.indexOf(`"${key}"`);
+        if (idx >= 0) {
+            from = idx;
+            to = idx + key.length + 2;
+        }
+    }
+
+    return {from, to};
+}
+
+/** Format AJV error messages nicely */
+function formatAjvMessage(err: any): string {
+    const path = err.instancePath || '(root)';
+    if (err.keyword === 'additionalProperties' && err.params?.additionalProperty) {
+        return `Unexpected property "${err.params.additionalProperty}"`;
+    }
+    return `${path} ${err.message}`;
+}
+
+/** JSONLint-only linter (used when no jsonSchema prop) */
+function jsonLintOnly(text: string) {
+    const annotations: any[] = [];
+    if (!text) return annotations;
+
+    runJsonLint(text, annotations);
+    return annotations;
+}
 
-    return errors;
+/** Convert line/col to string index */
+function indexFromLineCol(text: string, line: number, col: number): number {
+    const lines = text.split('\n');
+    let idx = 0;
+    for (let i = 0; i < line - 1; i++) idx += lines[i].length + 1;
+    return idx + col;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "79.0.0-SNAPSHOT.1765576094437",
+  "version": "79.0.0-SNAPSHOT.1765576473366",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -33,6 +33,12 @@
     "@blueprintjs/core": "^5.10.5",
     "@blueprintjs/datetime": "^5.3.7",
     "@blueprintjs/datetime2": "^2.3.7",
+    "@codemirror/commands": "6.9.0",
+    "@codemirror/language": "6.11.3",
+    "@codemirror/language-data": "6.5.2",
+    "@codemirror/lint": "6.9.0",
+    "@codemirror/search": "6.5.11",
+    "@codemirror/view": "6.38.6",
     "@fortawesome/fontawesome-pro": "^6.6.0",
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/pro-light-svg-icons": "^6.6.0",
@@ -43,9 +49,11 @@
     "@onsenui/fastclick": "~1.1.1",
     "@popperjs/core": "~2.11.0",
     "@seznam/compose-react-refs": "~1.0.5",
+    "@uiw/codemirror-themes-all": "~4.25.2",
+    "ajv": "~8.17.1",
     "classnames": "~2.5.1",
     "clipboard-copy": "~4.0.1",
-    "codemirror": "~5.65.0",
+    "codemirror": "~6.0.2",
     "core-js": "3.x",
     "debounce-promise": "~3.1.0",
     "dompurify": "~3.3.0",