Allow to influence monaco editor configuration directly in both modes

Author: kaisalmen

Diff for: packages/monaco-editor-wrapper/src/editorAppBase.ts

@@ -19,6 +19,9 @@ export type EditorAppConfigBase = ModelUpdate & {
     domReadOnly?: boolean;
     readOnly?: boolean;
     awaitExtensionReadiness?: Array<() => Promise<void>>;
+    overrideAutomaticLayout?: boolean;
+    editorOptions?: editor.IStandaloneEditorConstructionOptions;
+    diffEditorOptions?: editor.IStandaloneDiffEditorConstructionOptions;
 }
 
 export enum ModelUpdateType {
@@ -49,7 +52,7 @@ export abstract class EditorAppBase {
     }
 
     protected buildConfig(userAppConfig: EditorAppConfigBase): EditorAppConfigBase {
-        return {
+        const config: EditorAppConfigBase = {
             $type: userAppConfig.$type,
             languageId: userAppConfig.languageId,
             code: userAppConfig.code ?? '',
@@ -59,8 +62,18 @@ export abstract class EditorAppBase {
             codeOriginalUri: userAppConfig.codeOriginalUri ?? undefined,
             readOnly: userAppConfig.readOnly ?? false,
             domReadOnly: userAppConfig.domReadOnly ?? false,
-            awaitExtensionReadiness: userAppConfig.awaitExtensionReadiness ?? undefined
+            overrideAutomaticLayout: userAppConfig.overrideAutomaticLayout ?? true,
+            awaitExtensionReadiness: userAppConfig.awaitExtensionReadiness ?? undefined,
         };
+        config.editorOptions = {
+            ...userAppConfig.editorOptions,
+            automaticLayout: userAppConfig.overrideAutomaticLayout ?? true
+        };
+        config.diffEditorOptions = {
+            ...userAppConfig.diffEditorOptions,
+            automaticLayout: userAppConfig.overrideAutomaticLayout ?? true
+        };
+        return config;
     }
 
     haveEditor() {
@@ -75,14 +88,14 @@ export abstract class EditorAppBase {
         return this.diffEditor;
     }
 
-    protected async createEditor(container: HTMLElement, editorOptions?: editor.IStandaloneEditorConstructionOptions): Promise<void> {
-        this.editor = createConfiguredEditor(container, editorOptions);
-        await this.updateEditorModel();
-    }
-
-    protected async createDiffEditor(container: HTMLElement, diffEditorOptions?: editor.IStandaloneDiffEditorConstructionOptions): Promise<void> {
-        this.diffEditor = createConfiguredDiffEditor(container, diffEditorOptions);
-        await this.updateDiffEditorModel();
+    async createEditors(container: HTMLElement): Promise<void> {
+        if (this.getConfig().useDiffEditor) {
+            this.diffEditor = createConfiguredDiffEditor(container, this.getConfig().diffEditorOptions);
+            await this.updateDiffEditorModel();
+        } else {
+            this.editor = createConfiguredEditor(container, this.getConfig().editorOptions);
+            await this.updateEditorModel();
+        }
     }
 
     protected disposeEditor() {
@@ -231,8 +244,7 @@ export abstract class EditorAppBase {
     }
 
     abstract init(): Promise<void>;
-    abstract specifyService(): editor.IEditorOverrideServices;
-    abstract createEditors(container: HTMLElement): Promise<void>;
+    abstract specifyServices(): editor.IEditorOverrideServices;
     abstract getConfig(): EditorAppConfigBase;
     abstract disposeApp(): void;
     abstract isAppConfigDifferent(orgConfig: EditorAppConfigBase, config: EditorAppConfigBase, includeModelData: boolean): boolean;

Diff for: packages/monaco-editor-wrapper/src/editorAppClassic.ts

@@ -5,10 +5,7 @@ import { Logger } from './logger.js';
 
 export type EditorAppConfigClassic = EditorAppConfigBase & {
     $type: 'classic';
-    automaticLayout?: boolean;
     theme?: editor.BuiltinTheme | string;
-    editorOptions?: editor.IStandaloneEditorConstructionOptions;
-    diffEditorOptions?: editor.IStandaloneDiffEditorConstructionOptions;
     languageExtensionConfig?: languages.ILanguageExtensionPoint;
     languageDef?: languages.IMonarchLanguage;
     themeData?: editor.IStandaloneThemeData;
@@ -29,15 +26,6 @@ export class EditorAppClassic extends EditorAppBase {
         this.config = this.buildConfig(userAppConfig) as EditorAppConfigClassic;
         // default to vs-light
         this.config.theme = userAppConfig.theme ?? 'vs-light';
-        // default to true
-        this.config.automaticLayout = userAppConfig.automaticLayout ?? true;
-
-        this.config.editorOptions = userAppConfig.editorOptions ?? {};
-        this.config.editorOptions.automaticLayout = userAppConfig.automaticLayout ?? true;
-
-        this.config.diffEditorOptions = userAppConfig.diffEditorOptions ?? {};
-        this.config.diffEditorOptions.automaticLayout = userAppConfig.automaticLayout ?? true;
-
         this.config.languageExtensionConfig = userAppConfig.languageExtensionConfig ?? undefined;
         this.config.languageDef = userAppConfig.languageDef ?? undefined;
         this.config.themeData = userAppConfig.themeData ?? undefined;
@@ -47,18 +35,10 @@ export class EditorAppClassic extends EditorAppBase {
         return this.config;
     }
 
-    override specifyService(): editor.IEditorOverrideServices {
+    override specifyServices(): editor.IEditorOverrideServices {
         return {};
     }
 
-    async createEditors(container: HTMLElement): Promise<void> {
-        if (this.config.useDiffEditor) {
-            await this.createDiffEditor(container, this.config.diffEditorOptions);
-        } else {
-            await this.createEditor(container, this.config.editorOptions);
-        }
-    }
-
     async init() {
         // await all extenson that should be ready beforehand
         await this.awaitReadiness(this.config.awaitExtensionReadiness);
@@ -109,15 +89,11 @@ export class EditorAppClassic extends EditorAppBase {
             different = isModelUpdateRequired(orgConfig, config) !== ModelUpdateType.none;
         }
         type ClassicKeys = keyof typeof orgConfig;
-        const propsClassic = ['useDiffEditor', 'readOnly', 'domReadOnly', 'awaitExtensionReadiness', 'automaticLayout', 'languageDef', 'languageExtensionConfig', 'theme', 'themeData'];
-        const propsClassicEditorOptions = ['editorOptions', 'diffEditorOptions'];
-
+        const propsClassic = ['useDiffEditor', 'domReadOnly', 'readOnly', 'awaitExtensionReadiness', 'overrideAutomaticLayout', 'editorOptions', 'diffEditorOptions', 'languageDef', 'languageExtensionConfig', 'theme', 'themeData'];
         const propCompareClassic = (name: string) => {
             return orgConfig[name as ClassicKeys] !== config[name as ClassicKeys];
         };
-
         different = different || propsClassic.some(propCompareClassic);
-        different = different || propsClassicEditorOptions.some(propCompareClassic);
         return different;
     }
 }

Diff for: packages/monaco-editor-wrapper/src/editorAppExtended.ts

@@ -65,21 +65,13 @@ export class EditorAppExtended extends EditorAppBase {
         return this.extensionRegisterResults.get(extensionName);
     }
 
-    override specifyService(): editor.IEditorOverrideServices {
+    override specifyServices(): editor.IEditorOverrideServices {
         return {
             ...getThemeServiceOverride(),
             ...getTextmateServiceOverride()
         };
     }
 
-    async createEditors(container: HTMLElement): Promise<void> {
-        if (this.config.useDiffEditor) {
-            await this.createDiffEditor(container);
-        } else {
-            await this.createEditor(container);
-        }
-    }
-
     override async init() {
         // await all extensions that should be ready beforehand
         // always await theme extension
@@ -118,7 +110,7 @@ export class EditorAppExtended extends EditorAppBase {
         if (includeModelData) {
             different = isModelUpdateRequired(orgConfig, config) !== ModelUpdateType.none;
         }
-        const propsExtended = ['useDiffEditor', 'readOnly', 'domReadOnly', 'awaitExtensionReadiness', 'userConfiguration', 'extensions'];
+        const propsExtended = ['useDiffEditor', 'domReadOnly', 'readOnly', 'awaitExtensionReadiness', 'overrideAutomaticLayout', 'editorOptions', 'diffEditorOptions', 'userConfiguration', 'extensions'];
         type ExtendedKeys = keyof typeof orgConfig;
         const propCompareExtended = (name: string) => {
             return orgConfig[name as ExtendedKeys] !== config[name as ExtendedKeys];

Diff for: packages/monaco-editor-wrapper/src/wrapper.ts

@@ -54,7 +54,7 @@ export class MonacoEditorLanguageClientWrapper {
             };
             mergeServices(mlcDefautServices, this.serviceConfig.userServices);
         }
-        mergeServices(this.editorApp?.specifyService() ?? {}, this.serviceConfig.userServices);
+        mergeServices(this.editorApp?.specifyServices() ?? {}, this.serviceConfig.userServices);
 
         // overrule debug log flag
         this.serviceConfig.debugLogging = this.logger.isEnabled() && (this.serviceConfig.debugLogging || this.logger.isDebugEnabled());

Diff for: packages/monaco-editor-wrapper/test/wrapper.test.ts

@@ -26,7 +26,7 @@ describe('Test MonacoEditorLanguageClientWrapper', () => {
         expect(app).toBeDefined();
 
         const appConfig = app.getConfig();
-        expect(appConfig.automaticLayout).toBeTruthy();
+        expect(appConfig.overrideAutomaticLayout).toBeTruthy();
         expect(appConfig.theme).toBe('vs-light');
     });