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

package/desktop/cmp/input/CodeInput.ts

@@ -4,6 +4,46 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {autocompletion} from '@codemirror/autocomplete';
+import {defaultKeymap, history, historyKeymap, indentWithTab} from '@codemirror/commands';
+import {
+    defaultHighlightStyle,
+    foldGutter,
+    foldKeymap,
+    indentOnInput,
+    LanguageSupport,
+    syntaxHighlighting
+} from '@codemirror/language';
+// Import the languages you want to support
+import {javascript} from '@codemirror/lang-javascript';
+import {python} from '@codemirror/lang-python';
+import {html} from '@codemirror/lang-html';
+import {css} from '@codemirror/lang-css';
+import {json} from '@codemirror/lang-json';
+import {sql} from '@codemirror/lang-sql';
+
+import {linter, lintGutter} from '@codemirror/lint';
+import {highlightSelectionMatches, search} from '@codemirror/search';
+import {
+    Compartment,
+    EditorState,
+    Extension,
+    RangeSetBuilder,
+    StateEffect,
+    StateField
+} from '@codemirror/state';
+import {
+    Decoration,
+    DecorationSet,
+    EditorView,
+    highlightActiveLine,
+    highlightActiveLineGutter,
+    keymap,
+    lineNumbers,
+    ViewPlugin,
+    ViewUpdate
+} from '@codemirror/view';
+import {oneDark} from './impl/one-dark';
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
 import {box, div, filler, fragment, frame, hbox, label, span, vbox} from '@xh/hoist/cmp/layout';
 import {hoistCmp, HoistProps, LayoutProps, managed, PlainObject, XH} from '@xh/hoist/core';
@@ -13,31 +53,25 @@ import {textInput} from '@xh/hoist/desktop/cmp/input/TextInput';
 import {modalSupport} from '@xh/hoist/desktop/cmp/modalsupport/ModalSupport';
 import {ModalSupportModel} from '@xh/hoist/desktop/cmp/modalsupport/ModalSupportModel';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
-import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
-import {textArea} from '@xh/hoist/kit/blueprint';
 import {action, bindable, makeObservable, observable} from '@xh/hoist/mobx';
-import {wait} from '@xh/hoist/promise';
 import {withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
-import * as codemirror from 'codemirror';
-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 {compact, defaultsDeep, isEqual, isFunction} from 'lodash';
+import {compact, isEmpty, isFunction, isObject} from 'lodash';
 import {ReactElement} from 'react';
-import {findDOMNode} from 'react-dom';
 import './CodeInput.scss';
+// Map of supported language aliases to CodeMirror factories
+const LANGUAGE_EXTENSIONS: Record<string, () => LanguageSupport> = {
+    js: javascript,
+    javascript: javascript,
+    py: python,
+    python: python,
+    html: html,
+    css: css,
+    json: json,
+    sql: sql
+};
 
 export interface CodeInputProps extends HoistProps, HoistInputProps, LayoutProps {
     /** True to focus the control on render. */
@@ -46,12 +80,6 @@ export interface CodeInputProps extends HoistProps, HoistInputProps, LayoutProps
     /** 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
@@ -72,10 +100,10 @@ export interface CodeInputProps extends HoistProps, HoistInputProps, LayoutProps
 
     /**
      * 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
@@ -101,6 +129,15 @@ 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;
 }
 
 /**
@@ -131,17 +168,17 @@ class CodeInputModel extends HoistInputModel {
     @managed
     modalSupportModel: ModalSupportModel = new ModalSupportModel();
 
-    /** A CodeMirror editor instance. */
-    editor: any;
+    editor: EditorView;
 
     // Support for internal search feature.
     cursor = null;
     @bindable query: string = '';
     @observable currentMatchIdx: number = -1;
-    @observable.ref matches = [];
-    get matchCount(): number {
-        return this.matches.length;
-    }
+    @observable.ref matches: {from: number; to: number}[] = [];
+
+    private updateMatchesEffect = StateEffect.define<void>();
+    private highlightField: StateField<DecorationSet>;
+    private themeCompartment = new Compartment();
 
     get fullScreen(): boolean {
         return this.modalSupportModel.isModal;
@@ -214,8 +251,7 @@ class CodeInputModel extends HoistInputModel {
     }
 
     override blur() {
-        this.editor?.execCommand('undoSelection');
-        this.editor?.getInputField().blur();
+        this.editor?.contentDOM.blur();
     }
 
     override focus() {
@@ -223,12 +259,34 @@ class CodeInputModel extends HoistInputModel {
     }
 
     override select() {
-        this.editor?.execCommand('selectAll');
+        if (!this.editor) return;
+        this.editor.dispatch({selection: {anchor: 0, head: this.editor.state.doc.length}});
     }
 
     constructor() {
         super();
         makeObservable(this);
+
+        this.highlightField = StateField.define<DecorationSet>({
+            create: () => Decoration.none,
+            update: (deco, tr) => {
+                deco = deco.map(tr.changes);
+                if (tr.effects.some(e => e.is(this.updateMatchesEffect))) {
+                    const builder = new RangeSetBuilder<Decoration>();
+                    this.matches.forEach(match => {
+                        builder.add(
+                            match.from,
+                            match.to,
+                            Decoration.mark({class: 'xh-code-input--highlight'})
+                        );
+                    });
+                    deco = builder.finish();
+                }
+                return deco;
+            },
+            provide: f => EditorView.decorations.from(f)
+        });
+
         this.addReaction({
             track: () => this.modalSupportModel.isModal,
             run: () => this.focus(),
@@ -240,103 +298,61 @@ class CodeInputModel extends HoistInputModel {
         this.addReaction({
             track: () => XH.darkTheme,
             run: () => {
-                const {editor} = this;
-                if (editor) editor.setOption('theme', XH.darkTheme ? 'dracula' : 'default');
+                if (!this.editor) return;
+                this.editor.dispatch({
+                    effects: this.themeCompartment.reconfigure(this.getThemeExtension())
+                });
             }
         });
 
         this.addReaction({
             track: () => this.renderValue,
-            run: value => {
-                const {editor} = this;
-                if (editor && editor.getValue() != value) {
-                    // CodeMirror will throw on null value.
-                    editor.setValue(value == null ? '' : value);
+            run: val => {
+                if (this.editor && this.editor.state.doc.toString() !== val) {
+                    this.editor.dispatch({
+                        changes: {from: 0, to: this.editor.state.doc.length, insert: val ?? ''}
+                    });
                 }
             }
         });
 
         this.addReaction({
             track: () => this.componentProps.readonly || this.componentProps.disabled,
-            run: editorReadOnly => {
-                this.editor.setOption('readOnly', editorReadOnly);
+            run: readOnly => {
+                if (this.editor)
+                    this.editor.dispatch({
+                        effects: StateEffect.appendConfig.of(EditorView.editable.of(!readOnly))
+                    });
             }
         });
 
         this.addReaction({
             track: () => this.query,
             run: query => {
-                if (query?.trim()) {
-                    this.findAll();
-                } else {
-                    this.clearSearchResults();
-                }
+                if (query?.trim()) this.findAll();
+                else this.clearSearchResults();
             },
             debounce: 300
         });
     }
 
-    manageCodeEditor = textAreaComp => {
-        if (textAreaComp) {
-            this.editor = this.createCodeEditor(textAreaComp);
-            this.preserveSearchResults();
-        }
-    };
-
-    createCodeEditor(textAreaComp) {
-        const editorSpec = defaultsDeep(this.componentProps.editorProps, this.createDefaults());
-
-        const taDom = findDOMNode(textAreaComp),
-            editor = codemirror.fromTextArea(taDom, editorSpec);
-
-        editor.on('change', this.handleEditorChange);
-        return editor;
-    }
-
-    createDefaults() {
-        const {disabled, readonly, mode, linter, autoFocus} = this.componentProps;
-        let gutters = ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'];
-        if (linter) gutters.push('CodeMirror-lint-markers');
-
-        return {
-            mode,
-            theme: XH.darkTheme ? 'dracula' : 'default',
-            lineWrapping: false,
-            lineNumbers: true,
-            autoCloseBrackets: true,
-            extraKeys: {
-                'Cmd-P': this.onAutoFormat,
-                'Ctrl-P': this.onAutoFormat
-            },
-            foldGutter: true,
-            scrollbarStyle: 'simple',
-            readOnly: disabled || readonly,
-            gutters,
-            lint: linter ? {getAnnotations: linter} : false,
-            autoFocus
-        };
-    }
-
-    onChange = ev => {
-        this.noteValueChange(ev.target.value);
-    };
+    createCodeEditor = async (container: HTMLElement) => {
+        if (!container) return;
+        const extensions = await this.getExtensionsAsync();
 
-    handleEditorChange = editor => {
-        this.noteValueChange(editor.getValue());
-        if (this.cursor) this.clearSearchResults();
+        const state = EditorState.create({doc: this.renderValue || '', extensions});
+        this.editor = new EditorView({state, parent: container});
     };
 
-    onAutoFormat = () => {
-        if (!isFunction(this.componentProps.formatter)) return;
-
-        const editor = this.editor,
-            val = this.tryPrettyPrint(editor.getValue());
-        editor.setValue(val);
-    };
+    onAutoFormat() {
+        if (!this.editor) return;
+        const val = this.tryPrettyPrint(this.editor.state.doc.toString());
+        this.editor.dispatch({changes: {from: 0, to: this.editor.state.doc.length, insert: val}});
+    }
 
-    tryPrettyPrint(str) {
+    tryPrettyPrint(str: string) {
         try {
-            return this.componentProps.formatter(str);
+            return this.componentProps.formatter?.(str) ?? str;
         } catch (e) {
             return str;
         }
@@ -344,106 +360,169 @@ class CodeInputModel extends HoistInputModel {
 
     toggleFullScreen() {
         this.modalSupportModel.toggleIsModal();
-
-        // 'Nudge' the mouse wheel to trigger CodeMirror to update scrollbar state
-        const scrollEvent = d => new window.WheelEvent('mousewheel', {deltaX: d, deltaY: d});
-        wait().then(() => {
-            this.editor.getScrollerElement().dispatchEvent(scrollEvent(2));
-            this.editor.getScrollerElement().dispatchEvent(scrollEvent(-2));
-        });
     }
 
-    //------------------------
-    // Local Searching
-    //------------------------
     @action
     findAll() {
-        this.clearSearchResults();
-        if (!this.query?.trim()) return;
-
-        this.cursor = this.editor.getSearchCursor(this.query, 0, true);
-
-        const {cursor, editor} = this,
-            newMatches = [];
-
-        while (cursor.findNext()) {
-            const anchor = cursor.from(),
-                head = cursor.to();
-            newMatches.push({
-                anchor,
-                head,
-                textMarker: editor.markText(anchor, head, {className: 'xh-code-input--highlight'})
-            });
+        if (!this.editor || !this.query?.trim()) return;
+
+        let doc = this.editor.state.doc.toString(),
+            matches = [],
+            idx = doc.indexOf(this.query);
+        while (idx !== -1) {
+            matches.push({from: idx, to: idx + this.query.length});
+            idx = doc.indexOf(this.query, idx + 1);
         }
-
-        this.matches = newMatches;
-        if (newMatches.length) {
-            this.findNext();
-        } else {
-            this.currentMatchIdx = -1;
+        this.matches = matches;
+        this.currentMatchIdx = matches.length ? 0 : -1;
+        this.updateMatchDecorations();
+
+        if (matches.length) {
+            const match = matches[0];
+            this.editor.dispatch({
+                selection: {anchor: match.from, head: match.to},
+                scrollIntoView: true
+            });
         }
     }
 
     @action
     findNext() {
-        const {editor, query, cursor, matchCount} = this;
-        if (!cursor || !matchCount) return;
-
-        if (cursor.findNext(query)) {
-            this.handleCursorMatchUpdate();
-        } else {
-            // Loop around
-            this.cursor = editor.getSearchCursor(query, 0, true);
-            this.findNext();
-        }
+        if (!this.editor || !this.matches.length) return;
+        this.currentMatchIdx = (this.currentMatchIdx + 1) % this.matches.length;
+        const match = this.matches[this.currentMatchIdx];
+        this.editor.dispatch({
+            selection: {anchor: match.from, head: match.to},
+            scrollIntoView: true
+        });
     }
 
     @action
     findPrevious() {
-        const {editor, query, cursor, matches, matchCount} = this;
-        if (!cursor || !matchCount) return;
-
-        if (cursor.findPrevious(query)) {
-            this.handleCursorMatchUpdate();
-        } else {
-            // Loop around
-            this.cursor = editor.getSearchCursor(query, matches[matchCount - 1].head, true);
-            this.findPrevious();
-        }
+        if (!this.editor || !this.matches.length) return;
+        this.currentMatchIdx =
+            (this.currentMatchIdx - 1 + this.matches.length) % this.matches.length;
+        const match = this.matches[this.currentMatchIdx];
+        this.editor.dispatch({
+            selection: {anchor: match.from, head: match.to},
+            scrollIntoView: true
+        });
     }
 
     @action
-    handleCursorMatchUpdate() {
-        const {editor, cursor, matches} = this,
-            from = cursor.from(),
-            to = cursor.to();
-        editor.scrollIntoView({from, to}, 50);
-        editor.setSelection(from, to);
-        this.currentMatchIdx = matches.findIndex(match => isEqual(match.anchor, from));
-    }
-
-    preserveSearchResults() {
-        const {matches, editor} = this;
-        matches.forEach(match => {
-            match.textMarker = editor.markText(match.anchor, match.head, {
-                className: 'xh-code-input--highlight'
-            });
-        });
+    updateMatchDecorations() {
+        if (!this.editor) return;
+        this.editor.dispatch({effects: this.updateMatchesEffect.of()});
     }
 
     @action
     clearSearchResults() {
-        this.cursor = null;
-        this.currentMatchIdx = -1;
-        this.matches.forEach(match => match.textMarker.clear());
         this.matches = [];
+        this.currentMatchIdx = -1;
+        this.updateMatchDecorations();
     }
 
     override destroy() {
-        // Cleanup editor component as per CodeMirror docs.
-        if (this.editor) this.editor.toTextArea();
+        this.editor?.destroy();
         super.destroy();
     }
+
+    //------------------------
+    // Implementation
+    //------------------------
+    private async getExtensionsAsync(): Promise<Extension[]> {
+        const {
+                autoFocus,
+                language,
+                readonly,
+                highlightActiveLine: propsHighlightActiveLine,
+                linter: propsLinter,
+                lineNumbers: propsLineNumbers = true,
+                lineWrapping: propsLineWrapping = false
+            } = this.componentProps,
+            extensions = [
+                // Theme
+                this.themeCompartment.of(this.getThemeExtension()),
+                // Editor state
+                EditorView.editable.of(!readonly),
+                EditorView.updateListener.of((update: ViewUpdate) => {
+                    if (update.docChanged) this.noteValueChange(update.state.doc.toString());
+                }),
+                // Search & custom highlight
+                search(),
+                syntaxHighlighting(defaultHighlightStyle),
+                highlightSelectionMatches(),
+                this.highlightField,
+                // Editor UI
+                foldGutter(),
+                lintGutter(),
+                indentOnInput(),
+                autocompletion(),
+                history(),
+                // Linter
+                propsLinter
+                    ? linter(async view => {
+                          const text = view.state.doc.toString();
+                          return await propsLinter(text);
+                      })
+                    : [],
+                // Key bindings
+                keymap.of([
+                    ...defaultKeymap,
+                    ...historyKeymap,
+                    ...foldKeymap,
+                    indentWithTab,
+                    {
+                        key: 'Mod-p',
+                        run: () => {
+                            this.onAutoFormat();
+                            return true;
+                        }
+                    }
+                ])
+            ];
+
+        if (propsLineWrapping) extensions.push(EditorView.lineWrapping);
+        if (propsLineNumbers) {
+            isObject(propsLineNumbers)
+                ? extensions.push(lineNumbers(propsLineNumbers))
+                : extensions.push(lineNumbers());
+        }
+        if (propsHighlightActiveLine)
+            extensions.push(highlightActiveLine(), highlightActiveLineGutter());
+        if (autoFocus) extensions.push(this.autofocusExtension);
+        if (language) extensions.push(await this.getLanguageExtensionAsync(language));
+
+        return extensions.filter(it => !isEmpty(it));
+    }
+
+    private getThemeExtension() {
+        const lightTheme = EditorView.theme({}, {dark: false});
+        return XH.darkTheme ? oneDark : lightTheme;
+    }
+
+    private async getLanguageExtensionAsync(lang: string): Promise<LanguageSupport> {
+        if (!lang) return null;
+        const langFactory = LANGUAGE_EXTENSIONS[lang.toLowerCase()];
+        if (!langFactory) {
+            console.warn(`Language not found: ${lang}`);
+            return null;
+        }
+        try {
+            return langFactory();
+        } catch (err) {
+            console.error(`Failed to load language: ${lang}`, err);
+            return null;
+        }
+    }
+
+    private autofocusExtension = ViewPlugin.fromClass(
+        class {
+            constructor(view: EditorView) {
+                queueMicrotask(() => view.focus());
+            }
+        }
+    );
 }
 
 const cmp = hoistCmp.factory<CodeInputModel>(({model, className, ...props}, ref) => {
@@ -471,11 +550,7 @@ const inputCmp = hoistCmp.factory<CodeInputModel>(({model, ...props}, ref) =>
         items: [
             div({
                 className: 'xh-code-input__inner-wrapper',
-                item: textArea({
-                    value: model.renderValue || '',
-                    inputRef: model.manageCodeEditor,
-                    onChange: model.onChange
-                })
+                ref: model.createCodeEditor
             }),
             model.showToolbar ? toolbarCmp() : actionButtonsCmp()
         ],
@@ -496,7 +571,9 @@ const toolbarCmp = hoistCmp.factory<CodeInputModel>(({model}) => {
 });
 
 const searchInputCmp = hoistCmp.factory<CodeInputModel>(({model}) => {
-    const {query, cursor, currentMatchIdx, matchCount, fullScreen} = model;
+    const {query, currentMatchIdx, matches, fullScreen} = model,
+        matchCount = matches.length;
+
     return fragment(
         // Frame wrapper added due to issues with textInput not supporting all layout props as it should.
         frame({
@@ -505,20 +582,16 @@ const searchInputCmp = hoistCmp.factory<CodeInputModel>(({model}) => {
             item: textInput({
                 width: null,
                 flex: 1,
-                model: this,
+                model,
                 bind: 'query',
                 leftIcon: Icon.search(),
                 enableClear: true,
                 commitOnChange: true,
                 onKeyDown: e => {
                     if (e.key !== 'Enter') return;
-                    if (!cursor) {
-                        model.findAll();
-                    } else if (e.shiftKey) {
-                        model.findPrevious();
-                    } else {
-                        model.findNext();
-                    }
+                    if (!matches.length) model.findAll();
+                    else if (e.shiftKey) model.findPrevious();
+                    else model.findNext();
                 }
             })
         }),