@xh/hoist 79.0.0-SNAPSHOT.1765831120891 → 79.0.0-SNAPSHOT.1765833120742

package/desktop/cmp/input/CodeInput.ts

@@ -11,6 +11,7 @@ import {
     foldGutter,
     foldKeymap,
     indentOnInput,
+    LanguageSupport,
     syntaxHighlighting
 } from '@codemirror/language';
 import {linter, lintGutter} from '@codemirror/lint';
@@ -53,9 +54,10 @@ import {compact, isEmpty, isFunction, isObject} from 'lodash';
 import {ReactElement} from 'react';
 import './CodeInput.scss';
 import {javascript} from '@codemirror/lang-javascript';
-
-// import {languages} from '@codemirror/language-data';
-
+import {json} from '@codemirror/lang-json';
+import {html} from '@codemirror/lang-html';
+import {sql} from '@codemirror/lang-sql';
+import {css} from '@codemirror/lang-css';
 export interface CodeInputProps extends HoistProps, HoistInputProps, LayoutProps {
     /** True to focus the control on render. */
     autoFocus?: boolean;
@@ -474,7 +476,7 @@ class CodeInputModel extends HoistInputModel {
         if (propsHighlightActiveLine)
             extensions.push(highlightActiveLine(), highlightActiveLineGutter());
         if (autoFocus) extensions.push(this.autofocusExtension);
-        if (language) extensions.push(javascript());
+        if (language) extensions.push(await this.getLanguageExtensionAsync(language));
 
         return extensions.filter(it => !isEmpty(it));
     }
@@ -484,19 +486,31 @@ class CodeInputModel extends HoistInputModel {
         return XH.darkTheme ? oneDark : lightTheme;
     }
 
-    // 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 LANGUAGE_EXTENSIONS: Record<string, () => LanguageSupport> = {
+        js: javascript,
+        javascript: javascript,
+        html: html,
+        css: css,
+        json: json,
+        sql: sql
+    };
+
+    private async getLanguageExtensionAsync(lang: string): Promise<LanguageSupport> {
+        if (!lang) return null;
+        const extFactory = this.LANGUAGE_EXTENSIONS[lang.toLowerCase()];
+        if (!extFactory) {
+            console.warn(`Language not found: ${lang}`);
+            return null;
+        }
+        try {
+            // DEBUG
+            console.log(extFactory());
+            return extFactory(); // returns a LanguageSupport instance
+        } catch (err) {
+            console.error(`Failed to load language: ${lang}`, err);
+            return null;
+        }
+    }
 
     private autofocusExtension = ViewPlugin.fromClass(
         class {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "79.0.0-SNAPSHOT.1765831120891",
+  "version": "79.0.0-SNAPSHOT.1765833120742",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -34,7 +34,11 @@
     "@blueprintjs/datetime": "^5.3.7",
     "@blueprintjs/datetime2": "^2.3.7",
     "@codemirror/commands": "6.9.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/lint": "6.9.0",
     "@codemirror/search": "6.5.11",