@xh/hoist 79.0.0-SNAPSHOT.1765846193322 → 79.0.0-SNAPSHOT.1765854402334

package/desktop/cmp/input/CodeInput.ts

@@ -11,9 +11,11 @@ import {
     foldGutter,
     foldKeymap,
     indentOnInput,
+    LanguageDescription,
     LanguageSupport,
     syntaxHighlighting
 } from '@codemirror/language';
+import {languages} from '@codemirror/language-data';
 import {linter, lintGutter} from '@codemirror/lint';
 import {highlightSelectionMatches, search} from '@codemirror/search';
 import {
@@ -35,7 +37,6 @@ import {
     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';
@@ -50,14 +51,11 @@ import {action, bindable, makeObservable, observable} from '@xh/hoist/mobx';
 import {withDefault} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
 import classNames from 'classnames';
-import {compact, isEmpty, isFunction, isObject} from 'lodash';
+import {compact, find, includes, isEmpty, isFunction, isObject} from 'lodash';
 import {ReactElement} from 'react';
 import './CodeInput.scss';
-import {javascript} from '@codemirror/lang-javascript';
-import {json} from '@codemirror/lang-json';
-import {html} from '@codemirror/lang-html';
-import {sql} from '@codemirror/lang-sql';
-import {css} from '@codemirror/lang-css';
+import {githubLight, githubDark} from '@uiw/codemirror-theme-github';
+
 export interface CodeInputProps extends HoistProps, HoistInputProps, LayoutProps {
     /** True to focus the control on render. */
     autoFocus?: boolean;
@@ -477,9 +475,9 @@ class CodeInputModel extends HoistInputModel {
             extensions.push(highlightActiveLine(), highlightActiveLineGutter());
         if (autoFocus) extensions.push(this.autofocusExtension);
         if (language) {
-            const langExt = this.getLanguageExtension(language);
+            const langExt = this.getLanguageExtensionAsync(language);
             if (langExt) {
-                extensions.push(langExt);
+                extensions.push(await langExt);
             } else {
                 console.warn('Failed to load language:', language);
             }
@@ -488,28 +486,17 @@ class CodeInputModel extends HoistInputModel {
     }
 
     private getThemeExtension() {
-        const lightTheme = EditorView.theme({}, {dark: false});
-        return XH.darkTheme ? oneDark : lightTheme;
+        return XH.darkTheme ? githubDark : githubLight;
     }
 
-    private LANGUAGE_EXTENSIONS: Record<string, () => LanguageSupport> = {
-        js: javascript,
-        javascript: javascript,
-        html: html,
-        css: css,
-        json: json,
-        sql: sql
-    };
-
-    private getLanguageExtension(lang: string): LanguageSupport {
-        if (!lang) return null;
-        const extFactory = this.LANGUAGE_EXTENSIONS[lang.toLowerCase()];
-        if (!extFactory) {
-            console.warn(`Language not found: ${lang}`);
-            return null;
-        }
+    private async getLanguageExtensionAsync(lang: string): Promise<LanguageSupport> {
         try {
-            return extFactory(); // returns a LanguageSupport instance
+            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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "79.0.0-SNAPSHOT.1765846193322",
+  "version": "79.0.0-SNAPSHOT.1765854402334",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -34,12 +34,8 @@
     "@blueprintjs/datetime": "^5.3.7",
     "@blueprintjs/datetime2": "^2.3.7",
     "@codemirror/commands": "6.10.0",
-    "@codemirror/lang-css": "6.3.1",
-    "@codemirror/lang-html": "6.4.11",
-    "@codemirror/lang-javascript": "6.2.4",
-    "@codemirror/lang-json": "6.0.2",
-    "@codemirror/lang-sql": "6.10.0",
     "@codemirror/language": "6.11.3",
+    "@codemirror/language-data": "6.5.2",
     "@codemirror/lint": "6.9.2",
     "@codemirror/search": "6.5.11",
     "@codemirror/view": "6.39.4",
@@ -53,6 +49,7 @@
     "@onsenui/fastclick": "~1.1.1",
     "@popperjs/core": "~2.11.0",
     "@seznam/compose-react-refs": "~1.0.5",
+    "@uiw/codemirror-theme-github": "^4.25.4",
     "ajv": "~8.17.1",
     "classnames": "~2.5.1",
     "clipboard-copy": "~4.0.1",