Ensure vscode editor always comes with themes and textmate enabled.

TypeFox · Oct 6, 2023 · 955e0c8 · 955e0c8
1 parent 4399a6f
commit 955e0c8
Show file tree

Hide file tree

Showing 13 changed files with 58 additions and 84 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/examples/package.json b/packages/examples/package.json
@@ -9,9 +9,6 @@
     "@codingame/monaco-vscode-json-default-extension": "~1.82.3",
     "@codingame/monaco-vscode-keybindings-service-override": "~1.82.3",
     "@codingame/monaco-vscode-python-default-extension": "~1.82.3",
-    "@codingame/monaco-vscode-textmate-service-override": "~1.82.3",
-    "@codingame/monaco-vscode-theme-defaults-default-extension": "~1.82.3",
-    "@codingame/monaco-vscode-theme-service-override": "~1.82.3",
     "@typefox/monaco-editor-react": "~2.2.4",
     "http-server": "~14.1.1",
     "langium": "~2.0.2",

diff --git a/packages/examples/src/langium/config/wrapperLangiumVscode.ts b/packages/examples/src/langium/config/wrapperLangiumVscode.ts
@@ -1,10 +1,5 @@
-import { Uri } from 'vscode';
-import getConfigurationServiceOverride from '@codingame/monaco-vscode-configuration-service-override';
 import getEditorServiceOverride from '@codingame/monaco-vscode-editor-service-override';
 import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
-import getThemeServiceOverride from '@codingame/monaco-vscode-theme-service-override';
-import getTextmateServiceOverride from '@codingame/monaco-vscode-textmate-service-override';
-import { whenReady as whenReadyThemes } from '@codingame/monaco-vscode-theme-defaults-default-extension';
 import { useOpenEditorStub } from 'monaco-languageclient';
 import { UserConfig } from 'monaco-editor-wrapper';
 import { getTextContent } from '../../common.js';
@@ -25,9 +20,6 @@ export const setupLangiumClientVscodeApi = async (): Promise<UserConfig> => {
         wrapperConfig: {
             serviceConfig: {
                 userServices: {
-                    ...getThemeServiceOverride(),
-                    ...getTextmateServiceOverride(),
-                    ...getConfigurationServiceOverride(Uri.file('/workspace')),
                     ...getEditorServiceOverride(useOpenEditorStub),
                     ...getKeybindingsServiceOverride()
                 },
@@ -38,8 +30,6 @@ export const setupLangiumClientVscodeApi = async (): Promise<UserConfig> => {
                 languageId: 'langium',
                 code: code,
                 useDiffEditor: false,
-                // Ensure all required extensions are loaded before setting up the language extension
-                awaitExtensionReadiness: [whenReadyThemes],
                 extensions: [{
                     config: {
                         name: 'langium-example',

diff --git a/packages/examples/src/langium/config/wrapperStatemachineConfig.ts b/packages/examples/src/langium/config/wrapperStatemachineConfig.ts
@@ -1,10 +1,5 @@
-import getConfigurationServiceOverride from '@codingame/monaco-vscode-configuration-service-override';
 import getEditorServiceOverride from '@codingame/monaco-vscode-editor-service-override';
 import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
-import getThemeServiceOverride from '@codingame/monaco-vscode-theme-service-override';
-import getTextmateServiceOverride from '@codingame/monaco-vscode-textmate-service-override';
-import { whenReady as whenReadyThemes } from '@codingame/monaco-vscode-theme-defaults-default-extension';
-import { Uri } from 'vscode';
 import { useOpenEditorStub } from 'monaco-languageclient';
 import { UserConfig } from 'monaco-editor-wrapper';
 import { loadStatemachinWorker } from '../wrapperStatemachine.js';
@@ -25,9 +20,6 @@ export const createLangiumGlobalConfig = async (): Promise<UserConfig> => {
         wrapperConfig: {
             serviceConfig: {
                 userServices: {
-                    ...getThemeServiceOverride(),
-                    ...getTextmateServiceOverride(),
-                    ...getConfigurationServiceOverride(Uri.file('/workspace')),
                     ...getEditorServiceOverride(useOpenEditorStub),
                     ...getKeybindingsServiceOverride()
                 },
@@ -38,8 +30,6 @@ export const createLangiumGlobalConfig = async (): Promise<UserConfig> => {
                 languageId: 'statemachine',
                 code: code,
                 useDiffEditor: false,
-                // Ensure all required extensions are loaded before setting up the language extension
-                awaitExtensionReadiness: [whenReadyThemes],
                 extensions: [{
                     config: {
                         name: 'statemachine-example',

diff --git a/packages/examples/src/reactPython.tsx b/packages/examples/src/reactPython.tsx
@@ -1,8 +1,4 @@
-import getConfigurationServiceOverride from '@codingame/monaco-vscode-configuration-service-override';
 import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
-import getThemeServiceOverride from '@codingame/monaco-vscode-theme-service-override';
-import getTextmateServiceOverride from '@codingame/monaco-vscode-textmate-service-override';
-import { whenReady as whenReadyThemes } from '@codingame/monaco-vscode-theme-defaults-default-extension';
 import { whenReady as whenReadyPython } from '@codingame/monaco-vscode-python-default-extension';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
@@ -56,9 +52,6 @@ const userConfig: UserConfig = {
     wrapperConfig: {
         serviceConfig: {
             userServices: {
-                ...getThemeServiceOverride(),
-                ...getTextmateServiceOverride(),
-                ...getConfigurationServiceOverride(Uri.file('/workspace')),
                 ...getKeybindingsServiceOverride()
             },
             debugLogging: true
@@ -67,7 +60,7 @@ const userConfig: UserConfig = {
             $type: 'vscodeApi',
             languageId: 'python',
             codeUri: '/workspace/python.py',
-            awaitExtensionReadiness: [whenReadyThemes, whenReadyPython],
+            awaitExtensionReadiness: [whenReadyPython],
             extensions: [{
                 config: {
                     name: 'python-client',

diff --git a/packages/examples/src/wrapperWs.ts b/packages/examples/src/wrapperWs.ts
@@ -1,7 +1,4 @@
 import getKeybindingsServiceOverride from '@codingame/monaco-vscode-keybindings-service-override';
-import getThemeServiceOverride from '@codingame/monaco-vscode-theme-service-override';
-import getTextmateServiceOverride from '@codingame/monaco-vscode-textmate-service-override';
-import { whenReady as whenReadyTheme } from '@codingame/monaco-vscode-theme-defaults-default-extension';
 import { whenReady as whenReadyJson } from '@codingame/monaco-vscode-json-default-extension';
 import { disposeEditor, startEditor, swapEditors } from './common.js';
 import { UserConfig } from 'monaco-editor-wrapper';
@@ -19,42 +16,28 @@ const codeOrg = `{
     "line_endings": {"value": "unix"}
 }`;
 
-const monacoEditorConfig = {
-    glyphMargin: true,
-    guides: {
-        bracketPairs: true
-    },
-    lightbulb: {
-        enabled: true
-    },
-};
-
 const userConfig: UserConfig = {
     wrapperConfig: {
         serviceConfig: {
             userServices: {
-                ...getThemeServiceOverride(),
-                ...getTextmateServiceOverride(),
                 ...getKeybindingsServiceOverride(),
             },
             debugLogging: true
         },
         editorAppConfig: {
-            $type: 'classic',
+            $type: 'vscodeApi',
             languageId: languageId,
             code: codeMain,
             useDiffEditor: false,
             codeOriginal: codeOrg,
-            editorOptions: monacoEditorConfig,
-            diffEditorOptions: monacoEditorConfig,
-            theme: 'vs-dark',
             // Ensure all required extensions are loaded before setting up the language extension
-            awaitExtensionReadiness: [whenReadyTheme, whenReadyJson],
-            languageExtensionConfig: {
-                id: 'json',
-                extensions: ['.json', '.jsonc'],
-                aliases: ['JSON', 'json'],
-                mimetypes: ['application/json']
+            awaitExtensionReadiness: [whenReadyJson],
+            userConfiguration: {
+                json: JSON.stringify({
+                    'workbench.colorTheme': 'Default Dark Modern',
+                    'editor.guides.bracketPairsHorizontal': 'active',
+                    'editor.lightbulb.enabled': true
+                })
             }
         }
     },

diff --git a/packages/monaco-editor-wrapper/package.json b/packages/monaco-editor-wrapper/package.json
@@ -59,6 +59,9 @@
   },
   "dependencies": {
     "@codingame/monaco-vscode-configuration-service-override": "~1.82.3",
+    "@codingame/monaco-vscode-textmate-service-override": "~1.82.3",
+    "@codingame/monaco-vscode-theme-defaults-default-extension": "~1.82.3",
+    "@codingame/monaco-vscode-theme-service-override": "~1.82.3",
     "monaco-languageclient": "~6.5.1"
   },
   "peerDependencies": {

diff --git a/packages/monaco-editor-wrapper/src/editorAppBase.ts b/packages/monaco-editor-wrapper/src/editorAppBase.ts
@@ -230,6 +230,7 @@ export abstract class EditorAppBase {
 
     abstract getAppType(): string;
     abstract init(): Promise<void>;
+    abstract specifyService(): editor.IEditorOverrideServices;
     abstract createEditors(container: HTMLElement): Promise<void>;
     abstract getConfig(): EditorAppConfigClassic | EditorAppConfigVscodeApi;
     abstract disposeApp(): void;

diff --git a/packages/monaco-editor-wrapper/src/editorAppClassic.ts b/packages/monaco-editor-wrapper/src/editorAppClassic.ts
@@ -1,5 +1,5 @@
-import { EditorAppBase, EditorAppBaseConfig, EditorAppType } from './editorAppBase.js';
 import { editor, languages } from 'monaco-editor';
+import { EditorAppBase, EditorAppBaseConfig, EditorAppType } from './editorAppBase.js';
 import { UserConfig } from './wrapper.js';
 import { Logger } from './logger.js';
 /**
@@ -76,6 +76,10 @@ export class EditorAppClassic extends EditorAppBase {
         return this.config;
     }
 
+    override specifyService(): editor.IEditorOverrideServices {
+        return {};
+    }
+
     async createEditors(container: HTMLElement): Promise<void> {
         if (this.config.useDiffEditor) {
             await this.createDiffEditor(container, this.diffEditorOptions);

diff --git a/packages/monaco-editor-wrapper/src/editorAppVscodeApi.ts b/packages/monaco-editor-wrapper/src/editorAppVscodeApi.ts
@@ -1,9 +1,12 @@
 import type * as vscode from 'vscode';
+import { IDisposable, editor } from 'monaco-editor';
+import getThemeServiceOverride from '@codingame/monaco-vscode-theme-service-override';
+import getTextmateServiceOverride from '@codingame/monaco-vscode-textmate-service-override';
+import { whenReady as whenReadyTheme } from '@codingame/monaco-vscode-theme-defaults-default-extension';
 import { EditorAppBase, EditorAppBaseConfig, EditorAppType } from './editorAppBase.js';
 import { registerExtension, IExtensionManifest, ExtensionHostKind } from 'vscode/extensions';
 import { UserConfig } from './wrapper.js';
 import { verifyUrlorCreateDataUrl } from './utils.js';
-import { IDisposable } from 'monaco-editor';
 import { Logger } from './logger.js';
 
 export type ExtensionConfig = {
@@ -60,6 +63,13 @@ export class EditorAppVscodeApi extends EditorAppBase {
         return this.extensionRegisterResults.get(extensionName);
     }
 
+    override specifyService(): editor.IEditorOverrideServices {
+        return {
+            ...getThemeServiceOverride(),
+            ...getTextmateServiceOverride()
+        };
+    }
+
     async createEditors(container: HTMLElement): Promise<void> {
         if (this.config.useDiffEditor) {
             await this.createDiffEditor(container);
@@ -68,9 +78,11 @@ export class EditorAppVscodeApi extends EditorAppBase {
         }
     }
 
-    async init() {
-        // await all extenson that should be ready beforehand
-        await this.awaitReadiness(this.config.awaitExtensionReadiness);
+    override async init() {
+        // await all extensions that should be ready beforehand
+        // always await theme extension
+        const awaitReadiness = (this.config.awaitExtensionReadiness ?? []).concat(whenReadyTheme);
+        await this.awaitReadiness(awaitReadiness);
 
         if (this.config.extensions) {
             const allPromises: Array<Promise<void>> = [];

diff --git a/packages/monaco-editor-wrapper/src/languageClientWrapper.ts b/packages/monaco-editor-wrapper/src/languageClientWrapper.ts
@@ -72,11 +72,12 @@ export class LanguageClientWrapper {
     private languageClient: MonacoLanguageClient | undefined;
     private languageClientConfig?: LanguageClientConfig;
     private worker: Worker | undefined;
-    private languageId: string | undefined;
+    private languageId: string;
     private name;
     private logger: Logger | undefined;
 
-    constructor(languageClientConfig?: LanguageClientConfig, logger?: Logger) {
+    constructor(languageId: string, languageClientConfig?: LanguageClientConfig, logger?: Logger) {
+        this.languageId = languageId;
         if (languageClientConfig) {
             this.languageClientConfig = languageClientConfig;
             this.name = this.languageClientConfig.options.name ?? 'unnamed';
@@ -104,10 +105,6 @@ export class LanguageClientWrapper {
         return this.languageClient !== undefined && this.languageClient?.isRunning();
     }
 
-    init(languageId: string) {
-        this.languageId = languageId;
-    }
-
     async start() {
         if (this.languageClientConfig) {
             return this.startLanguageClientConnection();

diff --git a/packages/monaco-editor-wrapper/src/wrapper.ts b/packages/monaco-editor-wrapper/src/wrapper.ts
@@ -1,5 +1,4 @@
-import { editor } from 'monaco-editor';
-import { Uri } from 'vscode';
+import { editor, Uri } from 'monaco-editor';
 import getConfigurationServiceOverride from '@codingame/monaco-vscode-configuration-service-override';
 import { initServices, wasVscodeApiInitialized, InitializeServiceConfig, MonacoLanguageClient, mergeServices } from 'monaco-languageclient';
 import { EditorAppVscodeApi, EditorAppConfigVscodeApi } from './editorAppVscodeApi.js';
@@ -34,15 +33,17 @@ export class MonacoEditorLanguageClientWrapper {
     private serviceConfig: InitializeServiceConfig;
     private logger: Logger;
 
-    private async init(userConfig: UserConfig) {
+    private init(userConfig: UserConfig) {
         if (userConfig.wrapperConfig.editorAppConfig.useDiffEditor && !userConfig.wrapperConfig.editorAppConfig.codeOriginal) {
             throw new Error('Use diff editor was used without a valid config.');
         }
 
         this.id = userConfig.id ?? Math.floor(Math.random() * 101).toString();
         this.logger = new Logger(userConfig.loggerConfig);
         this.serviceConfig = userConfig.wrapperConfig.serviceConfig ?? {};
+    }
 
+    private async initServices() {
         // always set required services if not configure
         this.serviceConfig.userServices = this.serviceConfig.userServices ?? {};
         const configureService = this.serviceConfig.userServices.configure;
@@ -53,6 +54,7 @@ export class MonacoEditorLanguageClientWrapper {
             };
             mergeServices(mlcDefautServices, this.serviceConfig.userServices);
         }
+        mergeServices(this.editorApp?.specifyService() ?? {}, this.serviceConfig.userServices);
 
         // overrule debug log flag
         this.serviceConfig.debugLogging = this.logger.isEnabled() && (this.serviceConfig.debugLogging || this.logger.isDebugEnabled());
@@ -63,26 +65,28 @@ export class MonacoEditorLanguageClientWrapper {
             this.logger.debug('Init Services', this.serviceConfig.debugLogging);
             await initServices(this.serviceConfig);
         }
-        this.languageClientWrapper = new LanguageClientWrapper(userConfig.languageClientConfig, this.logger);
     }
 
     async start(userConfig: UserConfig, htmlElement: HTMLElement | null) {
         if (!htmlElement) {
             throw new Error('No HTMLElement provided for monaco-editor.');
         }
-        await this.init(userConfig);
-
         // Always dispose old instances before start
         this.editorApp?.disposeApp();
 
+        this.init(userConfig);
+
         if (isVscodeApiEditorApp(userConfig.wrapperConfig)) {
             this.editorApp = new EditorAppVscodeApi(this.id, userConfig, this.logger);
         } else {
             this.editorApp = new EditorAppClassic(this.id, userConfig, this.logger);
         }
-        this.languageClientWrapper.init(this.editorApp.getConfig().languageId);
-        this.logger.info(`Starting monaco-editor (${this.id})`);
+        await this.initServices();
+
+        this.languageClientWrapper = new LanguageClientWrapper(this.editorApp.getConfig().languageId,
+            userConfig.languageClientConfig, this.logger);
 
+        this.logger.info(`Starting monaco-editor (${this.id})`);
         await this.editorApp?.init();
         await this.editorApp.createEditors(htmlElement);