@xh/hoist 79.0.0-SNAPSHOT.1765828486265 → 79.0.0-SNAPSHOT.1765831120891

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/desktop/cmp/input/impl/one-dark.ts

@@ -0,0 +1,163 @@
+import {EditorView} from '@codemirror/view';
+import {Extension} from '@codemirror/state';
+import {HighlightStyle, syntaxHighlighting} from '@codemirror/language';
+import {tags as t} from '@lezer/highlight';
+
+// Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors
+
+const chalky = '#e5c07b',
+    coral = '#e06c75',
+    cyan = '#56b6c2',
+    invalid = '#ffffff',
+    ivory = '#abb2bf',
+    stone = '#7d8799', // Brightened compared to original to increase contrast
+    malibu = '#61afef',
+    sage = '#98c379',
+    whiskey = '#d19a66',
+    violet = '#c678dd',
+    darkBackground = '#21252b',
+    highlightBackground = '#2c313a',
+    background = '#282c34',
+    tooltipBackground = '#353a42',
+    selection = '#3E4451',
+    cursor = '#528bff';
+
+/// The colors used in the theme, as CSS color strings.
+export const color = {
+    chalky,
+    coral,
+    cyan,
+    invalid,
+    ivory,
+    stone,
+    malibu,
+    sage,
+    whiskey,
+    violet,
+    darkBackground,
+    highlightBackground,
+    background,
+    tooltipBackground,
+    selection,
+    cursor
+};
+
+/// The editor theme styles for One Dark.
+export const oneDarkTheme = EditorView.theme(
+    {
+        '&': {
+            color: ivory,
+            backgroundColor: background
+        },
+
+        '.cm-content': {
+            caretColor: cursor
+        },
+
+        '.cm-cursor, .cm-dropCursor': {borderLeftColor: cursor},
+        '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':
+            {backgroundColor: selection},
+
+        '.cm-panels': {backgroundColor: darkBackground, color: ivory},
+        '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'},
+        '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'},
+
+        '.cm-searchMatch': {
+            backgroundColor: '#72a1ff59',
+            outline: '1px solid #457dff'
+        },
+        '.cm-searchMatch.cm-searchMatch-selected': {
+            backgroundColor: '#6199ff2f'
+        },
+
+        '.cm-activeLine': {backgroundColor: '#6699ff0b'},
+        '.cm-selectionMatch': {backgroundColor: '#aafe661a'},
+
+        '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+            backgroundColor: '#bad0f847'
+        },
+
+        '.cm-gutters': {
+            backgroundColor: background,
+            color: stone,
+            border: 'none'
+        },
+
+        '.cm-activeLineGutter': {
+            backgroundColor: highlightBackground
+        },
+
+        '.cm-foldPlaceholder': {
+            backgroundColor: 'transparent',
+            border: 'none',
+            color: '#ddd'
+        },
+
+        '.cm-tooltip': {
+            border: 'none',
+            backgroundColor: tooltipBackground
+        },
+        '.cm-tooltip .cm-tooltip-arrow:before': {
+            borderTopColor: 'transparent',
+            borderBottomColor: 'transparent'
+        },
+        '.cm-tooltip .cm-tooltip-arrow:after': {
+            borderTopColor: tooltipBackground,
+            borderBottomColor: tooltipBackground
+        },
+        '.cm-tooltip-autocomplete': {
+            '& > ul > li[aria-selected]': {
+                backgroundColor: highlightBackground,
+                color: ivory
+            }
+        }
+    },
+    {dark: true}
+);
+
+/// The highlighting style for code in the One Dark theme.
+export const oneDarkHighlightStyle = HighlightStyle.define([
+    {tag: t.keyword, color: violet},
+    {tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], color: coral},
+    {tag: [t.function(t.variableName), t.labelName], color: malibu},
+    {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: whiskey},
+    {tag: [t.definition(t.name), t.separator], color: ivory},
+    {
+        tag: [
+            t.typeName,
+            t.className,
+            t.number,
+            t.changed,
+            t.annotation,
+            t.modifier,
+            t.self,
+            t.namespace
+        ],
+        color: chalky
+    },
+    {
+        tag: [
+            t.operator,
+            t.operatorKeyword,
+            t.url,
+            t.escape,
+            t.regexp,
+            t.link,
+            t.special(t.string)
+        ],
+        color: cyan
+    },
+    {tag: [t.meta, t.comment], color: stone},
+    {tag: t.strong, fontWeight: 'bold'},
+    {tag: t.emphasis, fontStyle: 'italic'},
+    {tag: t.strikethrough, textDecoration: 'line-through'},
+    {tag: t.link, color: stone, textDecoration: 'underline'},
+    {tag: t.heading, fontWeight: 'bold', color: coral},
+    {tag: [t.atom, t.bool, t.special(t.variableName)], color: whiskey},
+    {tag: [t.processingInstruction, t.string, t.inserted], color: sage},
+    {tag: t.invalid, color: invalid}
+]);
+
+/// Extension to enable the One Dark theme (both the editor theme and
+/// the highlight style).
+export const oneDark: Extension = [oneDarkTheme, syntaxHighlighting(oneDarkHighlightStyle)];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "79.0.0-SNAPSHOT.1765828486265",
+  "version": "79.0.0-SNAPSHOT.1765831120891",
   "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/lang-javascript": "^6.2.4",
+    "@codemirror/language": "6.11.3",
+    "@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,10 @@
     "@onsenui/fastclick": "~1.1.1",
     "@popperjs/core": "~2.11.0",
     "@seznam/compose-react-refs": "~1.0.5",
+    "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",