@xh/hoist 79.0.0-SNAPSHOT.1765576473366 → 79.0.0-SNAPSHOT.1765576704346

package/desktop/cmp/input/CodeInput.ts

@@ -4,39 +4,6 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
-import {autocompletion} from '@codemirror/autocomplete';
-import {defaultKeymap, history, historyKeymap, indentWithTab} from '@codemirror/commands';
-import {
-    defaultHighlightStyle,
-    foldGutter,
-    foldKeymap,
-    indentOnInput,
-    LanguageDescription,
-    LanguageSupport,
-    syntaxHighlighting
-} from '@codemirror/language';
-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 {dracula, solarizedLight} from '@uiw/codemirror-themes-all';
 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';
@@ -46,15 +13,31 @@ 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 {compact, find, includes, isEmpty, isFunction, isObject} from 'lodash';
+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 {ReactElement} from 'react';
+import {findDOMNode} from 'react-dom';
 import './CodeInput.scss';
-import {languages} from '@codemirror/language-data';
 
 export interface CodeInputProps extends HoistProps, HoistInputProps, LayoutProps {
     /** True to focus the control on render. */
@@ -63,6 +46,12 @@ 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
@@ -83,10 +72,10 @@ export interface CodeInputProps extends HoistProps, HoistInputProps, LayoutProps
 
     /**
      * 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
@@ -112,15 +101,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;
 }
 
 /**
@@ -151,17 +131,17 @@ class CodeInputModel extends HoistInputModel {
     @managed
     modalSupportModel: ModalSupportModel = new ModalSupportModel();
 
-    editor: EditorView;
+    /** A CodeMirror editor instance. */
+    editor: any;
 
     // Support for internal search feature.
     cursor = null;
     @bindable query: string = '';
     @observable currentMatchIdx: number = -1;
-    @observable.ref matches: {from: number; to: number}[] = [];
-
-    private updateMatchesEffect = StateEffect.define<void>();
-    private highlightField: StateField<DecorationSet>;
-    private themeCompartment = new Compartment();
+    @observable.ref matches = [];
+    get matchCount(): number {
+        return this.matches.length;
+    }
 
     get fullScreen(): boolean {
         return this.modalSupportModel.isModal;
@@ -234,7 +214,8 @@ class CodeInputModel extends HoistInputModel {
     }
 
     override blur() {
-        this.editor?.contentDOM.blur();
+        this.editor?.execCommand('undoSelection');
+        this.editor?.getInputField().blur();
     }
 
     override focus() {
@@ -242,34 +223,12 @@ class CodeInputModel extends HoistInputModel {
     }
 
     override select() {
-        if (!this.editor) return;
-        this.editor.dispatch({selection: {anchor: 0, head: this.editor.state.doc.length}});
+        this.editor?.execCommand('selectAll');
     }
 
     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(),
@@ -281,61 +240,103 @@ class CodeInputModel extends HoistInputModel {
         this.addReaction({
             track: () => XH.darkTheme,
             run: () => {
-                if (!this.editor) return;
-                this.editor.dispatch({
-                    effects: this.themeCompartment.reconfigure(this.getThemeExtension())
-                });
+                const {editor} = this;
+                if (editor) editor.setOption('theme', XH.darkTheme ? 'dracula' : 'default');
             }
         });
 
         this.addReaction({
             track: () => this.renderValue,
-            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 ?? ''}
-                    });
+            run: value => {
+                const {editor} = this;
+                if (editor && editor.getValue() != value) {
+                    // CodeMirror will throw on null value.
+                    editor.setValue(value == null ? '' : value);
                 }
             }
         });
 
         this.addReaction({
             track: () => this.componentProps.readonly || this.componentProps.disabled,
-            run: readOnly => {
-                if (this.editor)
-                    this.editor.dispatch({
-                        effects: StateEffect.appendConfig.of(EditorView.editable.of(!readOnly))
-                    });
+            run: editorReadOnly => {
+                this.editor.setOption('readOnly', editorReadOnly);
             }
         });
 
         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
         });
     }
 
-    createCodeEditor = async (container: HTMLElement) => {
-        if (!container) return;
-        const extensions = await this.getExtensionsAsync();
-
-        const state = EditorState.create({doc: this.renderValue || '', extensions});
-        this.editor = new EditorView({state, parent: container});
+    manageCodeEditor = textAreaComp => {
+        if (textAreaComp) {
+            this.editor = this.createCodeEditor(textAreaComp);
+            this.preserveSearchResults();
+        }
     };
 
-    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}});
+    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
+        };
     }
 
-    tryPrettyPrint(str: string) {
+    onChange = ev => {
+        this.noteValueChange(ev.target.value);
+    };
+
+    handleEditorChange = editor => {
+        this.noteValueChange(editor.getValue());
+        if (this.cursor) this.clearSearchResults();
+    };
+
+    onAutoFormat = () => {
+        if (!isFunction(this.componentProps.formatter)) return;
+
+        const editor = this.editor,
+            val = this.tryPrettyPrint(editor.getValue());
+        editor.setValue(val);
+    };
+
+    tryPrettyPrint(str) {
         try {
-            return this.componentProps.formatter?.(str) ?? str;
+            return this.componentProps.formatter(str);
         } catch (e) {
             return str;
         }
@@ -343,166 +344,106 @@ 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() {
-        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 = 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
+        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'})
             });
         }
+
+        this.matches = newMatches;
+        if (newMatches.length) {
+            this.findNext();
+        } else {
+            this.currentMatchIdx = -1;
+        }
     }
 
     @action
     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
-        });
+        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();
+        }
     }
 
     @action
     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
-        });
+        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();
+        }
     }
 
     @action
-    updateMatchDecorations() {
-        if (!this.editor) return;
-        this.editor.dispatch({effects: this.updateMatchesEffect.of()});
+    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'
+            });
+        });
     }
 
     @action
     clearSearchResults() {
-        this.matches = [];
+        this.cursor = null;
         this.currentMatchIdx = -1;
-        this.updateMatchDecorations();
+        this.matches.forEach(match => match.textMarker.clear());
+        this.matches = [];
     }
 
     override destroy() {
-        this.editor?.destroy();
+        // Cleanup editor component as per CodeMirror docs.
+        if (this.editor) this.editor.toTextArea();
         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() {
-        return XH.darkTheme ? dracula : solarizedLight;
-    }
-
-    private async getLanguageExtensionAsync(lang: string): Promise<LanguageSupport> {
-        try {
-            const langDesc: LanguageDescription | undefined = find(
-                languages,
-                it => includes(it.alias, lang) || it.name.toLowerCase() === lang.toLowerCase()
-            );
-            if (!langDesc) return null;
-            return await langDesc.load();
-        } 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) => {
@@ -530,7 +471,11 @@ const inputCmp = hoistCmp.factory<CodeInputModel>(({model, ...props}, ref) =>
         items: [
             div({
                 className: 'xh-code-input__inner-wrapper',
-                ref: model.createCodeEditor
+                item: textArea({
+                    value: model.renderValue || '',
+                    inputRef: model.manageCodeEditor,
+                    onChange: model.onChange
+                })
             }),
             model.showToolbar ? toolbarCmp() : actionButtonsCmp()
         ],
@@ -551,9 +496,7 @@ const toolbarCmp = hoistCmp.factory<CodeInputModel>(({model}) => {
 });
 
 const searchInputCmp = hoistCmp.factory<CodeInputModel>(({model}) => {
-    const {query, currentMatchIdx, matches, fullScreen} = model,
-        matchCount = matches.length;
-
+    const {query, cursor, currentMatchIdx, matchCount, fullScreen} = model;
     return fragment(
         // Frame wrapper added due to issues with textInput not supporting all layout props as it should.
         frame({
@@ -562,16 +505,20 @@ const searchInputCmp = hoistCmp.factory<CodeInputModel>(({model}) => {
             item: textInput({
                 width: null,
                 flex: 1,
-                model,
+                model: this,
                 bind: 'query',
                 leftIcon: Icon.search(),
                 enableClear: true,
                 commitOnChange: true,
                 onKeyDown: e => {
                     if (e.key !== 'Enter') return;
-                    if (!matches.length) model.findAll();
-                    else if (e.shiftKey) model.findPrevious();
-                    else model.findNext();
+                    if (!cursor) {
+                        model.findAll();
+                    } else if (e.shiftKey) {
+                        model.findPrevious();
+                    } else {
+                        model.findNext();
+                    }
                 }
             })
         }),