@ekzo-dev/bootstrap-addons 5.2.4 → 5.2.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ekzo-dev/bootstrap-addons",
   "description": "Aurelia Bootstrap additional component",
-  "version": "5.2.4",
+  "version": "5.2.6",
   "homepage": "https://github.com/ekzo-dev/aurelia-components/tree/main/packages/bootstrap-addons",
   "repository": {
     "type": "git",
@@ -10,7 +10,7 @@
   "license": "MIT",
   "dependencies": {
     "@ekzo-dev/bootstrap": "^5.2.11",
-    "@ekzo-dev/vanilla-jsoneditor": "^0.23.6",
+    "@ekzo-dev/vanilla-jsoneditor": "^0.23.7",
     "@ekzo-dev/toolkit": "^1.2.4",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@types/json-schema": "^7.0.14",

package/src/forms/json-input/json-input.html

@@ -1,12 +1,14 @@
 <template>
   <input ref="input" required.bind="inputRequired" />
   <json-editor
-    ref="editor"
-    json.bind="value"
+    ref="editorElement"
+    component.ref="editorComponent"
+    content.to-view="content"
     validator.bind="validator"
     read-only.bind="disabled"
     on-render-value.one-time="onRenderValue"
     on-render-menu.one-time="onRenderMenu"
+    on-change.one-time="onChange"
     mode="text"
     ...$bindables="jsonEditorOptions"
   ></json-editor>

package/src/forms/json-input/json-input.ts

@@ -2,27 +2,31 @@ import template from './json-input.html';
 
 import './json-input.scss';
 
-import { coerceBoolean } from '@ekzo-dev/toolkit';
-import { JsonEditor } from '@ekzo-dev/vanilla-jsoneditor';
-import { faUpRightAndDownLeftFromCenter } from '@fortawesome/free-solid-svg-icons/faUpRightAndDownLeftFromCenter';
-import Ajv, { ErrorObject, Options } from 'ajv';
-import Ajv2019 from 'ajv/dist/2019';
-import Ajv2020 from 'ajv/dist/2020';
-import addFormats from 'ajv-formats';
-import { bindable, BindingMode, customElement } from 'aurelia';
-import { JSONValue, parsePath } from 'immutable-json-patch';
-import {
+import type {
+  Content,
+  JSONContent,
   JSONEditorPropsOptional,
   JSONSchema,
   JSONSchemaDefinitions,
   MenuItem,
   RenderValueComponentDescription,
   RenderValueProps,
+  TextContent,
   ValidationError,
   ValidationSeverity,
   Validator,
 } from 'vanilla-jsoneditor';
 
+import { coerceBoolean } from '@ekzo-dev/toolkit';
+import { JsonEditor } from '@ekzo-dev/vanilla-jsoneditor';
+import { faUpRightAndDownLeftFromCenter } from '@fortawesome/free-solid-svg-icons/faUpRightAndDownLeftFromCenter';
+import Ajv, { ErrorObject, Options } from 'ajv';
+import Ajv2019 from 'ajv/dist/2019';
+import Ajv2020 from 'ajv/dist/2020';
+import addFormats from 'ajv-formats';
+import { bindable, BindingMode, customElement } from 'aurelia';
+import { JSONValue, parsePath } from 'immutable-json-patch';
+
 @customElement({
   name: 'bs-json-input',
   template,
@@ -47,36 +51,34 @@ export class BsJsonInput {
   @bindable()
   jsonEditorOptions: JSONEditorPropsOptional = {};
 
-  editorModule?: typeof import('vanilla-jsoneditor');
+  valueCache?: unknown;
 
-  schemaVersion?: string;
+  content?: JSONContent;
 
   readonly input!: HTMLInputElement;
 
-  readonly editor!: HTMLElement;
+  readonly editorElement!: HTMLElement;
+
+  readonly editorComponent!: JsonEditor;
 
-  async binding() {
-    this.schemaVersion = this.#getSchemaVersion(this.value);
-    this.editorModule = await import('vanilla-jsoneditor');
+  binding() {
+    this.#setContent(this.value);
   }
 
   valueChanged(value: unknown) {
-    this.schemaVersion = this.jsonSchema === true ? this.#getSchemaVersion(value) : undefined;
-
-    if (value == null || value === '') {
-      this.input.setCustomValidity('');
-    }
+    this.#setContent(value);
   }
 
   onRenderValue = (props: RenderValueProps): RenderValueComponentDescription[] => {
     let result: RenderValueComponentDescription[] | null;
     const { jsonSchema } = this;
+    const { editorModule } = this.editorComponent;
 
     if (jsonSchema && typeof jsonSchema === 'object') {
-      result = this.editorModule.renderJSONSchemaEnum(props, jsonSchema, this.#getSchemaDefinitions(jsonSchema));
+      result = editorModule.renderJSONSchemaEnum(props, jsonSchema, this.#getSchemaDefinitions(jsonSchema));
     }
 
-    return result ?? this.editorModule.renderValue(props);
+    return result ?? editorModule.renderValue(props);
   };
 
   onRenderMenu = (items: MenuItem[]): MenuItem[] | undefined => {
@@ -91,7 +93,7 @@ export class BsJsonInput {
           if (document.fullscreenElement) {
             void document.exitFullscreen();
           } else {
-            void this.editor.requestFullscreen();
+            void this.editorElement.requestFullscreen();
           }
         },
         icon: faUpRightAndDownLeftFromCenter,
@@ -100,34 +102,76 @@ export class BsJsonInput {
     ];
   };
 
+  onChange = (content: Content): void => {
+    const { json, text } = content as JSONContent & TextContent;
+
+    if (json !== undefined) {
+      this.valueCache = json;
+    } else {
+      const message = 'Please enter a valid JSON string';
+
+      try {
+        this.valueCache = text === '' ? '' : (this.jsonEditorOptions?.parser ?? JSON).parse(text);
+
+        if (this.input.validationMessage === message || text === '') {
+          this.input.setCustomValidity('');
+        }
+      } catch (e) {
+        if (e instanceof SyntaxError) {
+          this.input.setCustomValidity(message);
+        } else {
+          throw e;
+        }
+      }
+    }
+
+    this.value = this.valueCache;
+  };
+
   get inputRequired(): boolean {
     return this.required && (this.value == null || this.value === '');
   }
 
+  get schemaVersion(): string {
+    if (this.jsonSchema !== true) return undefined;
+
+    const { value } = this;
+
+    return value == null || value['$schema'] == null ? '' : (value['$schema'] as string);
+  }
+
   get validator(): Validator | undefined {
-    const { jsonSchema, schemaVersion, disabled } = this;
+    const { schemaVersion, disabled, ajvOptions } = this;
+    // use raw object because proxies don't work with private properties
     const rawThis = this['__raw__'] as BsJsonInput;
+    // use jsonSchema from raw object to pass original (non-proxied) object to AJV
+    const { jsonSchema } = rawThis;
 
     if (jsonSchema && typeof jsonSchema === 'object' && !disabled) {
-      const ajv = rawThis.#initAjv(jsonSchema.$schema as string);
+      const ajv = rawThis.#initAjv(jsonSchema.$schema as string, ajvOptions);
 
       addFormats(ajv);
-      const clonedSchema = JSON.parse(JSON.stringify(jsonSchema)) as JSONSchema;
-      const validate = ajv.compile(clonedSchema);
+      const validate = ajv.compile(jsonSchema);
 
       if (validate.errors) {
         throw validate.errors[0];
       }
 
       return (json: unknown): ValidationError[] => {
+        // do not validate empty documents
+        if (json === undefined) return [];
+
         validate(json);
 
         return rawThis.#processErrors(validate.errors, json);
       };
     } else if (schemaVersion != null && !disabled) {
-      const ajv = rawThis.#initAjv(schemaVersion);
+      const ajv = rawThis.#initAjv(schemaVersion, ajvOptions);
 
       return (json: unknown): ValidationError[] => {
+        // do not validate empty documents
+        if (json === undefined) return [];
+
         void ajv.validateSchema(json);
 
         return rawThis.#processErrors(ajv.errors, json);
@@ -135,11 +179,21 @@ export class BsJsonInput {
     }
   }
 
-  #initAjv($schema: string): Ajv {
+  #setContent(value: unknown): void {
+    if (value !== this.valueCache) {
+      // reset validation state before assigning new content
+      this.input?.setCustomValidity('');
+
+      this.content = { json: value };
+      this.valueCache = value;
+    }
+  }
+
+  #initAjv($schema: string, ajvOptions: Options): Ajv {
     const options: Options = {
       strict: false,
       multipleOfPrecision: 2,
-      ...this.ajvOptions,
+      ...ajvOptions,
     };
     let ajv: Ajv;
 
@@ -163,10 +217,6 @@ export class BsJsonInput {
     return (schema.$defs ?? schema.definitions) as JSONSchemaDefinitions;
   }
 
-  #getSchemaVersion(value: unknown): string {
-    return value === Object(value) && value['$schema'] ? (value['$schema'] as string) : '';
-  }
-
   #processErrors(errors: ErrorObject[] | null, json: unknown): ValidationError[] {
     const message = this.jsonSchema === true ? 'JSON is not a valid JSONSchema' : 'JSON does not match schema';