From 13c79cea021f5ec2958f7cdb69643a5e08344a31 Mon Sep 17 00:00:00 2001 From: Kai Salmen Date: Mon, 9 Oct 2023 14:58:25 +0200 Subject: [PATCH] Allow to influence monaco editor configuration directly in both modes --- .../src/editorAppBase.ts | 36 ++++++++++++------- .../src/editorAppClassic.ts | 28 ++------------- .../src/editorAppExtended.ts | 12 ++----- packages/monaco-editor-wrapper/src/wrapper.ts | 2 +- .../test/wrapper.test.ts | 2 +- 5 files changed, 30 insertions(+), 50 deletions(-) diff --git a/packages/monaco-editor-wrapper/src/editorAppBase.ts b/packages/monaco-editor-wrapper/src/editorAppBase.ts index 9ab48a0..d66c3d2 100644 --- a/packages/monaco-editor-wrapper/src/editorAppBase.ts +++ b/packages/monaco-editor-wrapper/src/editorAppBase.ts @@ -19,6 +19,9 @@ export type EditorAppConfigBase = ModelUpdate & { domReadOnly?: boolean; readOnly?: boolean; awaitExtensionReadiness?: Array<() => Promise>; + 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 { - this.editor = createConfiguredEditor(container, editorOptions); - await this.updateEditorModel(); - } - - protected async createDiffEditor(container: HTMLElement, diffEditorOptions?: editor.IStandaloneDiffEditorConstructionOptions): Promise { - this.diffEditor = createConfiguredDiffEditor(container, diffEditorOptions); - await this.updateDiffEditorModel(); + async createEditors(container: HTMLElement): Promise { + 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; - abstract specifyService(): editor.IEditorOverrideServices; - abstract createEditors(container: HTMLElement): Promise; + abstract specifyServices(): editor.IEditorOverrideServices; abstract getConfig(): EditorAppConfigBase; abstract disposeApp(): void; abstract isAppConfigDifferent(orgConfig: EditorAppConfigBase, config: EditorAppConfigBase, includeModelData: boolean): boolean; diff --git a/packages/monaco-editor-wrapper/src/editorAppClassic.ts b/packages/monaco-editor-wrapper/src/editorAppClassic.ts index 8e7d4e1..7595694 100644 --- a/packages/monaco-editor-wrapper/src/editorAppClassic.ts +++ b/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 { - 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 --git a/packages/monaco-editor-wrapper/src/editorAppExtended.ts b/packages/monaco-editor-wrapper/src/editorAppExtended.ts index 22654bc..7e5ba08 100644 --- a/packages/monaco-editor-wrapper/src/editorAppExtended.ts +++ b/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 { - 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 --git a/packages/monaco-editor-wrapper/src/wrapper.ts b/packages/monaco-editor-wrapper/src/wrapper.ts index 5bb130d..f24dd13 100644 --- a/packages/monaco-editor-wrapper/src/wrapper.ts +++ b/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 --git a/packages/monaco-editor-wrapper/test/wrapper.test.ts b/packages/monaco-editor-wrapper/test/wrapper.test.ts index d3efe63..ba9614b 100644 --- a/packages/monaco-editor-wrapper/test/wrapper.test.ts +++ b/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'); });