WIP

packages/examples/package.json

@@ -35,7 +35,6 @@
     "copy:comp": "npx shx cp -fr ../../packages/monaco-editor-comp/bundle ./libs/monaco-editor-comp",
     "copy:workers": "npx shx cp -fr ../../packages/monaco-editor-workers/dist ./libs/monaco-editor-workers",
     "copy:all": "npm run copy:prepare && npm run copy:wrapper && npm run copy:comp && npm run copy:workers",
-    "build:worker:vite": "vite --config vite.langium-worker.ts build",
     "build:worker": "vite-node ../../build/buildWorker.mts -- --script iife ./node_modules/langium-statemachine-dsl/out/language-server/main-browser.js ./packages/examples/dist/worker/statemachineServerWorker.js",
     "build": "npm run clean && npm run compile && npm run build:worker && npm run copy:all",
     "start": "http-server --port 20002 ./"

packages/examples/src/langium/wrapperLangium.ts

@@ -90,7 +90,6 @@ async function startEditor() {
 
     // Language Server preparation
     const langiumWorkerUrl = new URL('./dist/worker/statemachineServerWorker.js', window.location.href).href;
-    //const langiumWorkerUrl = new URL('../../node_modules/langium-statemachine-dsl/src/language-server/main-browser.ts', window.location.href).href;
     console.log(`Langium worker URL: ${langiumWorkerUrl}`);
     const lsWorker = new Worker(langiumWorkerUrl, {
         type: 'module',

packages/monaco-editor-workers/package.json

@@ -62,7 +62,6 @@
   "scripts": {
     "clean": "npx shx rm -rf ./dist && npx shx rm -fr *.tsbuildinfo",
     "compile": "tsc --build tsconfig.src.json",
-    "build:workers:vite": "vite -c ./workers/vite.editorWorker.ts build && vite -c ./workers/vite.tsWorker.ts build && vite -c ./workers/vite.htmlWorker.ts build && vite -c ./workers/vite.cssWorker.ts build && vite -c ./workers/vite.jsonWorker.ts build",
     "build:workers": "vite-node ./workers/buildWorkers.mts",
     "build": "npm run clean && npm run compile && npm run build:workers"
   },
@@ -71,7 +70,7 @@
     "npm": "9.5.1"
   },
   "devDependencies": {
-    "monaco-editor": "~0.36.1"
+    "monaco-editor": "0.36.1"
   },
   "repository": {
     "type": "git",

packages/monaco-editor-wrapper/build/src/buildAssets.mts

@@ -1,8 +1,8 @@
 import { existsSync, mkdirSync, readFile, writeFileSync } from 'fs';
-import { fetchAllThemesFromGitHub } from 'monaco-languageclient/themeRemoteHelper';
+import { fetchAllThemesFromGitHub } from '../../src/helpers/themeRemoteHelper.js';
 import { dirname, resolve } from 'path';
 import { fileURLToPath } from 'url';
-import shell from 'shelljs';
+import { cp, mkdir } from 'shelljs';
 
 /**
  * Solves: __dirname is not defined in ES module scope
@@ -32,10 +32,10 @@ readFile(resolve(getLocalDirectory(), '../../../../node_modules/monaco-editor/mi
     });
 });
 
-shell.mkdir('-p', resolve(getLocalDirectory(), '../../resources/wasm'));
+mkdir('-p', resolve(getLocalDirectory(), '../../resources/wasm'));
 const onigSource = resolve(getLocalDirectory(), '../../../../node_modules/vscode-oniguruma/release/onig.wasm');
 const onigTarget = resolve(getLocalDirectory(), '../../resources/wasm');
-shell.cp(onigSource, onigTarget);
+cp(onigSource, onigTarget);
 
-shell.mkdir('-p', resolve(getLocalDirectory(), '../../resources/themes'));
+mkdir('-p', resolve(getLocalDirectory(), '../../resources/themes'));
 await fetchAllThemesFromGitHub(resolve(getLocalDirectory(), '../../resources/themes'));

packages/monaco-editor-wrapper/build/tsconfig.src.json

@@ -6,6 +6,9 @@
     "declarationDir": "dist",
     "noEmit": true
   },
+  "references": [{
+    "path": "../tsconfig.src.json"
+  }],
   "include": [
     "src/**/*.ts",
     "src/**/*.mts"

packages/monaco-editor-wrapper/package.json

@@ -35,6 +35,14 @@
     "./monaco-css": {
       "types": "./dist/generated/css.d.ts",
       "default": "./dist/generated/css.js"
+    },
+    "./themeRemoteHelper": {
+      "types": "./lib/helpers/themeRemoteHelper.d.ts",
+      "default": "./lib/helpers/themeRemoteHelper.js"
+    },
+    "./themeLocalHelper": {
+      "types": "./lib/helpers/themeLocalHelper.d.ts",
+      "default": "./lib/helpers/themeLocalHelper.js"
     }
   },
   "typesVersions": {
@@ -56,6 +64,12 @@
       ],
       "monaco-css": [
         "dist/generated/css"
+      ],
+      "themeRemoteHelper": [
+        "./lib/helpers/themeRemoteHelper.d.ts"
+      ],
+      "themeLocalHelper": [
+        "./lib/helpers/themeLocalHelper.d.ts"
       ]
     }
   },
@@ -67,7 +81,7 @@
     "README.md"
   ],
   "scripts": {
-    "clean": "npx shx rm -rf ./dist ./bundle ./src/generated *.tsbuildinfo",
+    "clean": "npx shx rm -rf ./dist ./bundle ./src/generated ./resources *.tsbuildinfo",
     "handle:assets": "vite-node ./build/src/buildAssets.mts",
     "compile": "npm run handle:assets && tsc --build tsconfig.src.json",
     "build:bundle:main": "npx shx rm -rf bundle/generated && vite --config vite.bundle.config.ts build",

packages/monaco-editor-wrapper/src/codeEditorConfig.ts

@@ -1,5 +1,3 @@
-import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
-
 export type WebSocketConfigOptions = {
     wsSecured: boolean;
     wsHost: string;
@@ -25,8 +23,6 @@ export class CodeEditorConfig {
     private codeModified: LanguageDescription = { code: '', languageId: 'javascript' };
     private theme = 'vs-light';
     private automaticLayout = true;
-    private monacoEditorOptions: monaco.editor.IEditorOptions & monaco.editor.IGlobalEditorOptions & monaco.editor.IStandaloneEditorConstructionOptions = {};
-    private monacoDiffEditorOptions: monaco.editor.IDiffEditorOptions & monaco.editor.IGlobalEditorOptions & monaco.editor.IStandaloneDiffEditorConstructionOptions = {};
 
     // languageclient related configuration
     private useLanguageClient = false;
@@ -106,22 +102,6 @@ export class CodeEditorConfig {
         this.automaticLayout = automaticLayout;
     }
 
-    getMonacoEditorOptions() {
-        return this.monacoEditorOptions;
-    }
-
-    setMonacoEditorOptions(monacoEditorOptions: monaco.editor.IEditorOptions & monaco.editor.IGlobalEditorOptions): void {
-        this.monacoEditorOptions = monacoEditorOptions;
-    }
-
-    getMonacoDiffEditorOptions() {
-        return this.monacoDiffEditorOptions;
-    }
-
-    setMonacoDiffEditorOptions(monacoDiffEditorOptions: monaco.editor.IDiffEditorOptions & monaco.editor.IGlobalEditorOptions): void {
-        this.monacoDiffEditorOptions = monacoDiffEditorOptions;
-    }
-
     getLanguageClientConfigOptions(): WebSocketConfigOptions | WorkerConfigOptions {
         return this.lcConfigOptions;
     }

packages/monaco-editor-wrapper/src/helpers/themeHelper.ts

@@ -0,0 +1,6 @@
+/* --------------------------------------------------------------------------------------------
+ * Copyright (c) 2018-2022 TypeFox GmbH (http://www.typefox.io). All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ * ------------------------------------------------------------------------------------------ */
+export { fetchRemoteTheme, fetchAllThemesFromGitHub } from './themeRemoteHelper.js';
+export { loadAllDefaultThemes } from './themeLocalHelper.js';

packages/monaco-editor-wrapper/src/helpers/themeLocalHelper.ts

@@ -0,0 +1,103 @@
+/* --------------------------------------------------------------------------------------------
+ * Copyright (c) 2018-2022 TypeFox GmbH (http://www.typefox.io). All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ * ------------------------------------------------------------------------------------------ */
+import { IThemeExtensionPoint, setDefaultThemes } from 'vscode/service-override/theme';
+
+const createThemesDefintion = () => {
+    return [
+        {
+            id: 'Visual Studio Light',
+            label: 'Light (Visual Studio)',
+            uiTheme: 'vs-light',
+            path: './themes/light_vs.json',
+            extension: 'theme-defaults'
+        },
+        {
+            id: 'Default Light+',
+            label: 'Light+ (default light)',
+            uiTheme: 'vs-light',
+            path: './themes/light_plus.json',
+            extension: 'theme-defaults'
+        },
+        {
+            id: 'Light+ (Experimental)',
+            label: 'Light+ (Experimental)',
+            uiTheme: 'vs-light',
+            path: './themes/light_plus_experimental.json',
+            extension: 'theme-defaults'
+        },
+        {
+            id: 'Default High Contrast Light',
+            label: 'High Contrast Light',
+            uiTheme: 'hc-light',
+            path: './themes/hc_light.json'
+        },
+        {
+            id: 'Visual Studio Dark',
+            label: 'Dark (Visual Studio)',
+            uiTheme: 'vs-dark',
+            path: './themes/dark_vs.json',
+            extension: 'theme-defaults'
+        },
+        {
+            id: 'Default Dark+',
+            label: 'Dark+ (default dark)',
+            uiTheme: 'vs-dark',
+            path: './themes/dark_plus.json',
+            extension: 'theme-defaults'
+        },
+        {
+            id: 'Dark+ (Experimental)',
+            label: 'Dark+ (Experimental)',
+            uiTheme: 'vs-dark',
+            path: './themes/dark_plus_experimental.json',
+            extension: 'theme-defaults'
+        },
+        {
+            id: 'Default High Contrast Dark',
+            label: 'High Contrast Dark',
+            uiTheme: 'hc-black',
+            path: './themes/hc_black.json'
+        }
+    ] as IThemeExtensionPoint[];
+};
+
+const fetchLocalTheme = async (url: string) => {
+    const resp = await fetch(url);
+    return resp.text();
+};
+
+export const loadAllDefaultThemes = async (targetDir: string) => {
+    const themeLightVsUrl = new URL(targetDir + '/light_vs.json', window.location.href).href;
+    const themeLightPlusUrl = new URL(targetDir + '/light_plus.json', window.location.href).href;
+    const themeLightPlusExpUrl = new URL(targetDir + '/light_plus_experimental.json', window.location.href).href;
+    const themeLightHcUrl = new URL(targetDir + '/hc_light.json', window.location.href).href;
+    const themeDarkVsUrl = new URL(targetDir + '/dark_vs.json', window.location.href).href;
+    const themeDarkPlusUrl = new URL(targetDir + '/dark_plus.json', window.location.href).href;
+    const themeDarkPlusExpUrl = new URL(targetDir + '/dark_plus_experimental.json', window.location.href).href;
+    const themeDarkHcUrl = new URL(targetDir + '/hc_black.json', window.location.href).href;
+
+    setDefaultThemes(createThemesDefintion(), (theme) => {
+        switch (theme.path) {
+            case './themes/light_vs.json':
+                return fetchLocalTheme(themeLightVsUrl);
+            case './themes/light_plus.json':
+                return fetchLocalTheme(themeLightPlusUrl);
+            case './themes/light_plus_experimental.json':
+                return fetchLocalTheme(themeLightPlusExpUrl);
+            case './themes/hc_light.json':
+                return fetchLocalTheme(themeLightHcUrl);
+            case './themes/dark_vs.json':
+                return fetchLocalTheme(themeDarkVsUrl);
+            case './themes/dark_plus.json':
+                return fetchLocalTheme(themeDarkPlusUrl);
+            case './themes/dark_plus_experimental.json':
+                return fetchLocalTheme(themeDarkPlusExpUrl);
+            case './themes/hc_dark.json':
+                return fetchLocalTheme(themeDarkHcUrl);
+            default:
+                return Promise.reject(new Error(`Theme ${theme.path} not found`));
+        }
+    });
+};

packages/monaco-editor-wrapper/src/helpers/themeRemoteHelper.ts

@@ -0,0 +1,27 @@
+/* --------------------------------------------------------------------------------------------
+ * Copyright (c) 2018-2022 TypeFox GmbH (http://www.typefox.io). All rights reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ * ------------------------------------------------------------------------------------------ */
+import { writeFileSync } from 'fs';
+
+export const fetchRemoteTheme = async (url: string, targetFile: string) => {
+    const res = await fetch(url);
+    res.text().then(x => {
+        writeFileSync(targetFile, x);
+    });
+};
+
+// re-fectch required themes
+export const fetchAllThemesFromGitHub = async (targetDir: string) => {
+    // light
+    fetchRemoteTheme('https://raw.githubusercontent.com/microsoft/vscode/main/extensions/theme-defaults/themes/light_vs.json', targetDir + '/light_vs.json');
+    fetchRemoteTheme('https://raw.githubusercontent.com/microsoft/vscode/main/extensions/theme-defaults/themes/light_plus.json', targetDir + '/light_plus.json');
+    fetchRemoteTheme('https://raw.githubusercontent.com/microsoft/vscode/main/extensions/theme-defaults/themes/light_plus_experimental.json', targetDir + '/light_plus_experimental.json');
+    fetchRemoteTheme('https://raw.githubusercontent.com/microsoft/vscode/main/extensions/theme-defaults/themes/hc_light.json', targetDir + '/hc_light.json');
+
+    // dark
+    fetchRemoteTheme('https://raw.githubusercontent.com/microsoft/vscode/main/extensions/theme-defaults/themes/dark_vs.json', targetDir + '/dark_vs.json');
+    fetchRemoteTheme('https://raw.githubusercontent.com/microsoft/vscode/main/extensions/theme-defaults/themes/dark_plus.json', targetDir + '/dark_plus.json');
+    fetchRemoteTheme('https://raw.githubusercontent.com/microsoft/vscode/main/extensions/theme-defaults/themes/dark_plus_experimental.json', targetDir + '/dark_plus_experimental.json');
+    fetchRemoteTheme('https://raw.githubusercontent.com/microsoft/vscode/main/extensions/theme-defaults/themes/hc_black.json', targetDir + '/hc_black.json');
+};