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

package/desktop/cmp/input/CodeInput.ts

@@ -11,10 +11,17 @@ import {
     foldGutter,
     foldKeymap,
     indentOnInput,
-    LanguageDescription,
     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 {
@@ -51,10 +58,20 @@ 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, find, includes, isEmpty, isFunction, isObject} from 'lodash';
+import {compact, isEmpty, isFunction, isObject} from 'lodash';
 import {ReactElement} from 'react';
 import './CodeInput.scss';
-import {languages} from '@codemirror/language-data';
+// 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. */
@@ -485,13 +502,14 @@ class CodeInputModel extends HoistInputModel {
     }
 
     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 {
-            const langDesc: LanguageDescription | undefined = find(
-                languages,
-                it => includes(it.alias, lang) || it.name.toLowerCase() === lang.toLowerCase()
-            );
-            if (!langDesc) return null;
-            return await langDesc.load();
+            return langFactory();
         } 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.1765824728801",
+  "version": "79.0.0-SNAPSHOT.1765828263630",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -34,8 +34,13 @@
     "@blueprintjs/datetime": "^5.3.7",
     "@blueprintjs/datetime2": "^2.3.7",
     "@codemirror/commands": "6.9.0",
+    "@codemirror/lang-css": "^6.2.0",
+    "@codemirror/lang-html": "^6.2.0",
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-python": "^6.2.0",
+    "@codemirror/lang-sql": "^6.2.0",
     "@codemirror/language": "6.11.3",
-    "@codemirror/language-data": "6.5.2",
     "@codemirror/lint": "6.9.0",
     "@codemirror/search": "6.5.11",
     "@codemirror/view": "6.38.6",