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

package/CHANGELOG.md

@@ -143,32 +143,6 @@
 * 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,
-                lineNumbers: false,
+                editorProps: {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,
-                      lineNumbers: false,
+                      editorProps: {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,
-                        lineNumbers: false,
+                        editorProps: {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,11 +1,29 @@
 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
@@ -23,10 +41,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://github.com/codemirror/language-data/blob/main/src/language-data.ts}) regarding available languages.
-     * String can be the alias or name
+     * ({@link https://codemirror.net/mode/}) regarding available modes.
+     * Applications must import any mode they wish to enable.
      */
-    language?: string;
+    mode?: string;
     /**
      * True to prevent user modification of editor contents, while still allowing user to
      * focus, select, and copy contents.
@@ -47,12 +65,6 @@ 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,20 +1,8 @@
 import '@xh/hoist/desktop/register';
-import { Options, SchemaObject } from 'ajv';
+import 'codemirror/mode/javascript/javascript';
 import { CodeInputProps } from './CodeInput';
-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;
-}
+export type JsonInputProps = CodeInputProps;
 /**
  * Code-editor style input for editing and validating JSON, powered by CodeMirror.
  */
-export declare const JsonInput: import("react").FC<JsonInputProps>, jsonInput: import("@xh/hoist/core").ElementFactory<JsonInputProps>;
+export declare const JsonInput: import("react").FC<CodeInputProps>, jsonInput: import("@xh/hoist/core").ElementFactory<CodeInputProps>;

package/core/HoistBase.ts

@@ -287,9 +287,15 @@ 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,8 +10,9 @@ 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, isEmpty, uniqBy, without} from 'lodash';
+import {find, uniqBy, without} from 'lodash';
 
 export class FileChooserModel extends HoistModel {
     @observable.ref

package/desktop/cmp/input/CodeInput.scss

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