CodeMirror v6 + JSON Schema support

CHANGELOG.md

@@ -9,6 +9,13 @@
       please review new CSS vars (below) and consider using those instead of class-based selectors.
     * Modifier classes now follow BEM conventions (e.g. `xh-form-field-invalid` is now
       `xh-form-field--invalid`).
+* Hoist v80 **upgrades CodeMirror to v6** (from v5)
+    * editorProps deprecated:
+      The v5-style editorProps object (which accepted any CodeMirror config keys) is no longer
+      supported. Most former editorProps use cases are now supported via first-class CodeInput props,
+      such as, `readonly`, `language`, `lineNumbers`, and `lineWrapping`.
+    * `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)
 * Completed the refactoring from `loadModel` to `loadObserver` started in v79:
     * Renamed `XH.appLoadModel` to `XH.appLoadObserver`. The prior getter remains as an alias but is
       deprecated and scheduled for removal in v82.
@@ -28,6 +35,9 @@
   hamburger menu. Set to `true` to render the current user's initials instead or provide a function
   to render a custom element for the user.
 * Added `AggregationContext` as an additional argument to `CubeField.canAggregateFn`.
+* Added `ajvSchema` and `ajvOptions` configs to JsonInputProps.
+    * `ajvSchema` - Used to validate the input JSON
+    * `ajvOptions` - Options to be passed to Ajv constructor (JSON schema validator)
 
 ### ⚙️ Typescript API Adjustments
 
@@ -54,6 +64,16 @@
 * Added new CSS variables `--xh-intent-danger-text-color` (and others). Consider using these when
   styling text with Hoist intent colors to enhance legibility in dark mode.
 
+### 📚 Libraries
+* @codemirror/commands `6.10.1`
+* @codemirror/language `6.12.1`
+* @codemirror/language-data `6.5.2`
+* @codemirror/lint `6.9.2`
+* @codemirror/state `6.5.3`
+* @codemirror/view `6.39.9`
+* @uiw/codemirror-theme-github `4.25.4`,
+* ajv `8.17.1`,
+
 ## 79.0.0 - 2026-01-05
 
 ### 💥 Breaking Changes

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)
             })
         });

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()})
                   })
               );

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()})
                     })
                 })

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

desktop/cmp/input/CodeInput.scss

@@ -5,23 +5,26 @@
  * Copyright © 2026 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);
 
-    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);
     }
 
     .xh-code-input--highlight {
       background-color: var(--xh-bg-highlight);
+      &-active {
+        background-color: var(--xh-bg-highlight-alt);
+      }
     }
   }
 
-  .CodeMirror-gutter {
+  .cm-gutter {
     background-color: var(--xh-bg-alt);
   }
 }
@@ -30,7 +33,7 @@
   height: 100px;
 
   &.xh-input--invalid {
-    div.CodeMirror {
+    div.cm-editor {
       border: var(--xh-form-field-invalid-border);
     }
   }
@@ -48,7 +51,7 @@
   }
 
   &.xh-input-disabled {
-    .CodeMirror {
+    .cm-editor {
       background-color: var(--xh-input-disabled-bg);
       color: var(--xh-input-disabled-text-color);
     }
@@ -58,40 +61,39 @@
     position: relative;
     flex: 1;
 
-    & > .CodeMirror {
-      position: absolute;
+    & > .cm-editor {
+      /*
+       * Absolute positioning gives CodeMirror a fixed-height viewport so `.cm-scroller`
+       * can handle overflow internally instead of growing with content.
+       */
+      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;
-      }
-
-      .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);
           border: none;
         }
       }
 
-      .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);
       }
     }