@xh/hoist 79.0.0-SNAPSHOT.1765835240904 → 79.0.0-SNAPSHOT.1765843522401

package/CHANGELOG.md

@@ -143,6 +143,32 @@
 * Added new `ViewRowData.cubeRowType` property to support identifying bucketed rows.
 * Improved `waitFor` to accept a `null` value for its timeout.
 
+### 💥 Breaking Changes (upgrade difficulty: 🟠 MEDIUM - Code mirror v6 update)
+* Hoist v77 **upgrades Code Mirror to v6** (from v5)
+  * editorProps deprecated:
+    The v5-style editorProps object (which accepted any CodeMirror config keys) is no longer
+    supported. Most former options can be achieved via v6 extensions or by setting CodeInput props
+    such as readonly, language, and linter.
+  * `mode` to set the language of code input now changed to `language` prop.
+    * Check [language-data](https://github.com/codemirror/language-data/blob/main/src/language-data.ts) for language string (alias and name allowed)
+
+### 🎁 New Features
+* Added `jsonSchema` and `ajvProps` configs to JsonInputProps.
+  * `jsonSchema` - Used to validate the input Json
+  * `ajvProps` - Used to configure AJV Object
+
+### 📚 Libraries
+* codemirror `5.65.0 -> 6.0.2`
+* @codemirror/view `6.38.6`
+* @uiw/codemirror-themes-all `4.25.2`
+* @codemirror/commands `6.9.0`
+* @codemirror/language `6.11.3`
+* @codemirror/lint `6.9.0`
+* @codemirror/search `6.5.11`
+* @codemirror/autocomplete `6.19.0`
+* @codemirror/language-data `6.5.2`
+* ajv `8.17.1`,
+
 ## 76.1.0 - 2025-10-17
 
 ### 🎁 New Features

package/admin/tabs/cluster/instances/connpool/ConnPoolMonitorPanel.ts

@@ -90,7 +90,7 @@ const poolConfigPanel = hoistCmp.factory<ConnPoolMonitorModel>({
                 width: '100%',
                 enableSearch: true,
                 showFullscreenButton: false,
-                editorProps: {lineNumbers: false},
+                lineNumbers: false,
                 value: JSON.stringify(model.poolConfiguration, null, 2)
             })
         });

package/admin/tabs/cluster/instances/services/DetailsPanel.ts

@@ -57,7 +57,7 @@ const stats = hoistCmp.factory<DetailsModel>({
                       height: '100%',
                       enableSearch: true,
                       showFullscreenButton: false,
-                      editorProps: {lineNumbers: false},
+                      lineNumbers: false,
                       value: fmtJson(stats, {replacer: timestampReplacer()})
                   })
               );

package/admin/tabs/cluster/objects/DetailPanel.ts

@@ -42,7 +42,7 @@ export const detailPanel = hoistCmp.factory({
                         width: '100%',
                         height: '100%',
                         showFullscreenButton: false,
-                        editorProps: {lineNumbers: false},
+                        lineNumbers: false,
                         value: fmtJson(selectedAdminStats, {replacer: timestampReplacer()})
                     })
                 })

package/build/types/core/HoistBase.d.ts

@@ -139,7 +139,7 @@ export declare abstract class HoistBase {
     /** @returns true if this instance has been destroyed. */
     get isDestroyed(): boolean;
     /**
-     * Clean up resources associated with this object.
+     * Clean up resources associated with this object
      */
     destroy(): void;
 }

package/build/types/desktop/cmp/input/CodeInput.d.ts

@@ -1,29 +1,11 @@
 import { HoistInputProps } from '@xh/hoist/cmp/input';
 import { HoistProps, LayoutProps, PlainObject } from '@xh/hoist/core';
-import '@xh/hoist/desktop/register';
-import 'codemirror/addon/fold/brace-fold.js';
-import 'codemirror/addon/fold/foldcode.js';
-import 'codemirror/addon/fold/foldgutter.css';
-import 'codemirror/addon/fold/foldgutter.js';
-import 'codemirror/addon/lint/lint.css';
-import 'codemirror/addon/lint/lint.js';
-import 'codemirror/addon/scroll/simplescrollbars.css';
-import 'codemirror/addon/scroll/simplescrollbars.js';
-import 'codemirror/addon/search/searchcursor.js';
-import 'codemirror/addon/selection/mark-selection.js';
-import 'codemirror/lib/codemirror.css';
-import 'codemirror/theme/dracula.css';
 import './CodeInput.scss';
 export interface CodeInputProps extends HoistProps, HoistInputProps, LayoutProps {
     /** True to focus the control on render. */
     autoFocus?: boolean;
     /** False to not commit on every change/keystroke, default true. */
     commitOnChange?: boolean;
-    /**
-     * Configuration object with any properties supported by the CodeMirror API.
-     * @see {@link https://codemirror.net/doc/manual.html#api_configuration|CodeMirror Docs}
-     */
-    editorProps?: PlainObject;
     /**
      * True to enable case-insensitive searching within the input. Default false, except in
      * fullscreen mode, where search will be shown unless explicitly *disabled*. Note that
@@ -41,10 +23,10 @@ export interface CodeInputProps extends HoistProps, HoistInputProps, LayoutProps
     linter?: (text: string) => any[];
     /**
      * A CodeMirror language mode - default none (plain-text). See the CodeMirror docs
-     * ({@link https://codemirror.net/mode/}) regarding available modes.
-     * Applications must import any mode they wish to enable.
+     * ({@link https://github.com/codemirror/language-data/blob/main/src/language-data.ts}) regarding available languages.
+     * String can be the alias or name
      */
-    mode?: string;
+    language?: string;
     /**
      * True to prevent user modification of editor contents, while still allowing user to
      * focus, select, and copy contents.
@@ -65,6 +47,12 @@ export interface CodeInputProps extends HoistProps, HoistInputProps, LayoutProps
      * action buttons show only when the input focused and float in the bottom-right corner.
      */
     showToolbar?: boolean;
+    /** False (default) to highlight active line in input. */
+    highlightActiveLine?: boolean;
+    /** True (default) to add line numbers to gutter. */
+    lineNumbers?: boolean | PlainObject;
+    /** False (default) to add line numbers to gutter. */
+    lineWrapping?: boolean | PlainObject;
 }
 /**
  * Code-editor style input, powered by CodeMirror. Displays a gutter with line numbers, mono-spaced

package/build/types/desktop/cmp/input/JsonInput.d.ts

@@ -1,8 +1,20 @@
 import '@xh/hoist/desktop/register';
-import 'codemirror/mode/javascript/javascript';
+import { Options, SchemaObject } from 'ajv';
 import { CodeInputProps } from './CodeInput';
-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.
  */
-export declare const JsonInput: import("react").FC<CodeInputProps>, jsonInput: import("@xh/hoist/core").ElementFactory<CodeInputProps>;
+export declare const JsonInput: import("react").FC<JsonInputProps>, jsonInput: import("@xh/hoist/core").ElementFactory<JsonInputProps>;

package/build/types/desktop/cmp/input/impl/one-dark.d.ts

@@ -0,0 +1,23 @@
+import { Extension } from '@codemirror/state';
+import { HighlightStyle } from '@codemirror/language';
+export declare const color: {
+    chalky: string;
+    coral: string;
+    cyan: string;
+    invalid: string;
+    ivory: string;
+    stone: string;
+    malibu: string;
+    sage: string;
+    whiskey: string;
+    violet: string;
+    darkBackground: string;
+    highlightBackground: string;
+    background: string;
+    tooltipBackground: string;
+    selection: string;
+    cursor: string;
+};
+export declare const oneDarkTheme: Extension;
+export declare const oneDarkHighlightStyle: HighlightStyle;
+export declare const oneDark: Extension;

package/core/HoistBase.ts

@@ -287,15 +287,9 @@ export abstract class HoistBase {
     }
 
     /**
-     * Clean up resources associated with this object.
+     * Clean up resources associated with this object
      */
     destroy() {
-        // If a model is being destroyed or has already been destroyed, no need to destroy it again.
-        // Prevents stack overflow in case this model gets a managed reference chain back to itself.
-        if (this.isDestroyed) {
-            this.logWarn('Destruction skipped - this model is already destroyed.');
-            return;
-        }
         this._destroyed = true;
         this.disposers.forEach(f => f());
         this.managedInstances.forEach(i => XH.safeDestroy(i));

package/desktop/cmp/filechooser/FileChooserModel.ts

@@ -10,9 +10,8 @@ import {actionCol, calcActionColWidth} from '@xh/hoist/desktop/cmp/grid';
 import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
-import {isEmpty} from 'codemirror/src/util/misc';
 import {filesize} from 'filesize';
-import {find, uniqBy, without} from 'lodash';
+import {find, isEmpty, uniqBy, without} from 'lodash';
 
 export class FileChooserModel extends HoistModel {
     @observable.ref

package/desktop/cmp/input/CodeInput.scss

@@ -5,13 +5,14 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 .xh-app .xh-input {
-  .CodeMirror {
+  .cm-editor {
     background-color: var(--xh-input-bg) !important;
     font-family: var(--xh-font-family-mono);
     font-size: var(--xh-font-size-px);
     line-height: calc(var(--xh-font-size-px) * 1.4);
+    height: 100%;
 
-    pre.CodeMirror-line {
+    pre.cm-line {
       box-shadow: inset 0 0 0 0 rgba(16, 22, 26, 0.4);
       -webkit-box-shadow: inset 0 0 0 0 rgba(16, 22, 26, 0.4);
     }
@@ -21,7 +22,11 @@
     }
   }
 
-  .CodeMirror-gutter {
+  .cm-gutters {
+    border: none;
+  }
+
+  .cm-gutter {
     background-color: var(--xh-bg-alt);
   }
 }
@@ -30,13 +35,13 @@
   height: 100px;
 
   &.xh-input-invalid {
-    div.CodeMirror {
+    div.cm-editor {
       border: var(--xh-form-field-invalid-border);
     }
   }
 
   &.xh-input-disabled {
-    .CodeMirror {
+    .cm-editor {
       background-color: var(--xh-input-disabled-bg);
       color: var(--xh-input-disabled-text-color);
     }
@@ -46,24 +51,25 @@
     position: relative;
     flex: 1;
 
-    & > .CodeMirror {
-      position: absolute;
+    & > .cm-editor {
+      position: absolute !important;
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
       height: 100%;
 
-      .CodeMirror-selected {
+      .cm-editor-selected {
         background-color: var(--xh-bg-highlight);
       }
 
-      .CodeMirror-scroll {
-        box-sizing: content-box !important;
+      .cm-scroller {
+        overflow: auto;
+        //box-sizing: content-box !important;
       }
 
-      .CodeMirror-simplescroll-vertical,
-      .CodeMirror-simplescroll-horizontal {
+      .cm-editor-simplescroll-vertical,
+      .cm-editor-simplescroll-horizontal {
         background-color: var(--xh-scrollbar-bg);
         > div {
           background-color: var(--xh-scrollbar-thumb);
@@ -71,15 +77,15 @@
         }
       }
 
-      .CodeMirror-scrollbar-filler {
+      .cm-editor-scrollbar-filler {
         background-color: var(--xh-scrollbar-bg);
       }
 
-      .CodeMirror-simplescroll-horizontal {
+      .cm-editor-simplescroll-horizontal {
         height: var(--xh-scrollbar-size-px);
       }
 
-      .CodeMirror-simplescroll-vertical {
+      .cm-editor-simplescroll-vertical {
         width: var(--xh-scrollbar-size-px);
       }
     }