@theia/monaco 1.47.0-next.0 → 1.47.1

package/src/browser/monaco-init.ts

@@ -0,0 +1,114 @@
+// *****************************************************************************
+// Copyright (C) 2023 STMicroelectronics and others.
+//
+// This program and the accompanying materials are made available under the
+// terms of the Eclipse Public License v. 2.0 which is available at
+// http://www.eclipse.org/legal/epl-2.0.
+//
+// This Source Code may also be made available under the following Secondary
+// Licenses when the conditions for such availability set forth in the Eclipse
+// Public License v. 2.0 are satisfied: GNU General Public License, version 2
+// with the GNU Classpath Exception which is available at
+// https://www.gnu.org/software/classpath/license.html.
+//
+// SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+// *****************************************************************************
+
+/*
+ * The code in this file is responsible for overriding service implementations in the Monaco editor with our own Theia-based implementations.
+ * Since we only get a single chance to call `StandaloneServies.initialize()` with our overrides, we need to make sure that intialize is called before the first call to
+ * `StandaloneServices.get()` or `StandaloneServies.initialize()`. As we do not control the mechanics of Inversify instance constructions, the approach here is to call
+ * `MonacoInit.init()` from the `index.js` file after all container modules are loaded, but before the first object is fetched from it.
+ * `StandaloneServices.initialize()` is called with service descriptors, not service instances. This lets us finish all overrides before any inversify object is constructed and
+ * might call `initialize()` while being constructed.
+ * The service descriptors require a constructor function, so we declare dummy class for each Monaco service we override. But instead of returning an instance of the dummy class,
+ * we fetch the implementation of the monaco service from the inversify container.
+ * The inversify-constructed services must not call StandaloneServices.get() or StandaloneServices.initialize() from their constructors. Calling `get`()` in postConstruct mehtods
+ * is allowed.
+ */
+
+import { Container } from '@theia/core/shared/inversify';
+import { ICodeEditorService } from '@theia/monaco-editor-core/esm/vs/editor/browser/services/codeEditorService';
+import { StandaloneServices } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices';
+import { SyncDescriptor } from '@theia/monaco-editor-core/esm/vs/platform/instantiation/common/descriptors';
+import { MonacoEditorServiceFactory, MonacoEditorServiceFactoryType } from './monaco-editor-service';
+import { IConfigurationService } from '@theia/monaco-editor-core/esm/vs/platform/configuration/common/configuration';
+import { ITextModelService } from '@theia/monaco-editor-core/esm/vs/editor/common/services/resolverService';
+import { MonacoConfigurationService } from './monaco-frontend-module';
+import { MonacoTextModelService } from './monaco-text-model-service';
+import { MonacoContextMenuService } from './monaco-context-menu';
+import { IContextMenuService } from '@theia/monaco-editor-core/esm/vs/platform/contextview/browser/contextView';
+import { IContextKeyService } from '@theia/monaco-editor-core/esm/vs/platform/contextkey/common/contextkey';
+import { IThemeService } from '@theia/monaco-editor-core/esm/vs/platform/theme/common/themeService';
+import { MonacoBulkEditService } from './monaco-bulk-edit-service';
+import { MonacoCommandService } from './monaco-command-service';
+import { IBulkEditService } from '@theia/monaco-editor-core/esm/vs/editor/browser/services/bulkEditService';
+import { ICommandService } from '@theia/monaco-editor-core/esm/vs/platform/commands/common/commands';
+import { MonacoQuickInputImplementation } from './monaco-quick-input-service';
+import { IQuickInputService } from '@theia/monaco-editor-core/esm/vs/platform/quickinput/common/quickInput';
+
+class MonacoEditorServiceConstructor {
+    /**
+     * MonacoEditorService needs other Monaco services as constructor parameters, so we need to do use a factory for constructing the service. If we want the singleton instance,
+     * we need to fetch it from the `StandaloneServices` class instead of injecting it.
+     * @param container
+     * @param contextKeyService
+     * @param themeService
+     */
+    constructor(container: Container,
+        @IContextKeyService contextKeyService: IContextKeyService,
+        @IThemeService themeService: IThemeService) {
+
+        return container.get<MonacoEditorServiceFactoryType>(MonacoEditorServiceFactory)(contextKeyService, themeService);
+    };
+}
+
+class MonacoConfigurationServiceConstructor {
+    constructor(container: Container) {
+        return container.get(MonacoConfigurationService);
+    }
+}
+
+class MonacoTextModelServiceConstructor {
+    constructor(container: Container) {
+        return container.get(MonacoTextModelService);
+    }
+}
+
+class MonacoContextMenuServiceConstructor {
+    constructor(container: Container) {
+        return container.get(MonacoContextMenuService);
+    }
+}
+
+class MonacoBulkEditServiceConstructor {
+    constructor(container: Container) {
+        return container.get(MonacoBulkEditService);
+    }
+}
+
+class MonacoCommandServiceConstructor {
+    constructor(container: Container) {
+        return container.get(MonacoCommandService);
+    }
+}
+
+class MonacoQuickInputImplementationConstructor {
+    constructor(container: Container) {
+        return container.get(MonacoQuickInputImplementation);
+    }
+}
+
+export namespace MonacoInit {
+    export function init(container: Container): void {
+        StandaloneServices.initialize({
+            [ICodeEditorService.toString()]: new SyncDescriptor(MonacoEditorServiceConstructor, [container]),
+            [IConfigurationService.toString()]: new SyncDescriptor(MonacoConfigurationServiceConstructor, [container]),
+            [ITextModelService.toString()]: new SyncDescriptor(MonacoTextModelServiceConstructor, [container]),
+            [IContextMenuService.toString()]: new SyncDescriptor(MonacoContextMenuServiceConstructor, [container]),
+            [IBulkEditService.toString()]: new SyncDescriptor(MonacoBulkEditServiceConstructor, [container]),
+            [ICommandService.toString()]: new SyncDescriptor(MonacoCommandServiceConstructor, [container]),
+            [IQuickInputService.toString()]: new SyncDescriptor(MonacoQuickInputImplementationConstructor, [container]),
+        });
+    }
+}

package/src/browser/monaco-keybinding.ts

@@ -45,14 +45,14 @@ export class MonacoKeybindingContribution implements KeybindingContribution {
     registerKeybindings(registry: KeybindingRegistry): void {
         const defaultKeybindings = KeybindingsRegistry.getDefaultKeybindings();
         for (const item of defaultKeybindings) {
-            const command = this.commands.validate(item.command);
-            if (command) {
+            const command = this.commands.validate(item.command || undefined);
+            if (command && item.keybinding) {
                 const when = (item.when && item.when.serialize()) ?? undefined;
                 let keybinding;
                 if (item.command === MonacoCommands.GO_TO_DEFINITION && !environment.electron.is()) {
                     keybinding = 'ctrlcmd+f11';
                 } else {
-                    keybinding = MonacoResolvedKeybinding.toKeybinding(item.keybinding);
+                    keybinding = MonacoResolvedKeybinding.toKeybinding(item.keybinding.chords);
                 }
                 registry.registerKeybinding({ command, keybinding, when });
             }

package/src/browser/monaco-quick-input-service.ts

@@ -16,21 +16,21 @@
 
 import {
     ApplicationShell,
-    InputBox, InputOptions, KeybindingRegistry, NormalizedQuickInputButton, PickOptions,
+    InputBox, InputOptions, KeybindingRegistry, PickOptions,
     QuickInputButton, QuickInputHideReason, QuickInputService, QuickPick, QuickPickItem,
-    QuickPickItemButtonEvent, QuickPickItemHighlights, QuickPickOptions, QuickPickSeparator, codiconArray
+    QuickPickItemButtonEvent, QuickPickItemHighlights, QuickPickOptions, QuickPickSeparator
 } from '@theia/core/lib/browser';
 import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
 import {
     IInputBox, IInputOptions, IKeyMods, IPickOptions, IQuickInput, IQuickInputButton,
-    IQuickInputService, IQuickNavigateConfiguration, IQuickPick, IQuickPickItem, IQuickPickItemButtonEvent, IQuickPickSeparator, QuickPickInput
+    IQuickInputService, IQuickNavigateConfiguration, IQuickPick, IQuickPickItem, IQuickPickItemButtonEvent, IQuickPickSeparator, IQuickWidget, QuickPickInput
 } from '@theia/monaco-editor-core/esm/vs/platform/quickinput/common/quickInput';
-import { IQuickInputOptions, IQuickInputStyles, QuickInputController } from '@theia/monaco-editor-core/esm/vs/base/parts/quickinput/browser/quickInput';
+import { IQuickInputOptions, IQuickInputStyles } from '@theia/monaco-editor-core/esm/vs/platform/quickinput/browser/quickInput';
+import { QuickInputController } from '@theia/monaco-editor-core/esm/vs/platform/quickinput/browser/quickInputController';
 import { MonacoResolvedKeybinding } from './monaco-resolved-keybinding';
 import { IQuickAccessController } from '@theia/monaco-editor-core/esm/vs/platform/quickinput/common/quickAccess';
 import { QuickAccessController } from '@theia/monaco-editor-core/esm/vs/platform/quickinput/browser/quickAccess';
-import { ContextKeyService as VSCodeContextKeyService } from '@theia/monaco-editor-core/esm/vs/platform/contextkey/browser/contextKeyService';
-import { IContextKey } from '@theia/monaco-editor-core/esm/vs/platform/contextkey/common/contextkey';
+import { IContextKey, IContextKeyService } from '@theia/monaco-editor-core/esm/vs/platform/contextkey/common/contextkey';
 import { IListOptions, List } from '@theia/monaco-editor-core/esm/vs/base/browser/ui/list/listWidget';
 import * as monaco from '@theia/monaco-editor-core';
 import { ResolvedKeybinding } from '@theia/monaco-editor-core/esm/vs/base/common/keybindings';
@@ -38,11 +38,10 @@ import { IInstantiationService } from '@theia/monaco-editor-core/esm/vs/platform
 import { StandaloneServices } from '@theia/monaco-editor-core/esm/vs/editor/standalone/browser/standaloneServices';
 import { IMatch } from '@theia/monaco-editor-core/esm/vs/base/common/filters';
 import { IListRenderer, IListVirtualDelegate } from '@theia/monaco-editor-core/esm/vs/base/browser/ui/list/list';
-import { Event } from '@theia/core';
+import { CancellationToken, Event } from '@theia/core';
 import { MonacoColorRegistry } from './monaco-color-registry';
 import { ThemeService } from '@theia/core/lib/browser/theming';
 import { IStandaloneThemeService } from '@theia/monaco-editor-core/esm/vs/editor/standalone/common/standaloneTheme';
-import { ThemeIcon } from '@theia/monaco-editor-core/esm/vs/platform/theme/common/themeService';
 
 // Copied from @vscode/src/vs/base/parts/quickInput/browser/quickInputList.ts
 export interface IListElement {
@@ -62,6 +61,7 @@ export interface IListElement {
 
 @injectable()
 export class MonacoQuickInputImplementation implements IQuickInputService {
+
     declare readonly _serviceBrand: undefined;
 
     controller: QuickInputController;
@@ -76,9 +76,6 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
     @inject(ThemeService)
     protected readonly themeService: ThemeService;
 
-    @inject(VSCodeContextKeyService)
-    protected readonly contextKeyService: VSCodeContextKeyService;
-
     protected container: HTMLElement;
     private quickInputList: List<unknown>;
 
@@ -93,25 +90,29 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
         this.initContainer();
         this.initController();
         this.quickAccess = new QuickAccessController(this, StandaloneServices.get(IInstantiationService));
-        this.inQuickOpen = this.contextKeyService.createKey<boolean>('inQuickOpen', false);
+        this.inQuickOpen = StandaloneServices.get(IContextKeyService).createKey<boolean>('inQuickOpen', false);
         this.controller.onShow(() => {
             this.container.style.top = this.shell.mainPanel.node.getBoundingClientRect().top + 'px';
             this.inQuickOpen.set(true);
         });
         this.controller.onHide(() => this.inQuickOpen.set(false));
 
-        this.themeService.initialized.then(() => this.controller.applyStyles(this.getStyles()));
+        this.themeService.initialized.then(() => this.controller.applyStyles(this.computeStyles()));
         // Hook into the theming service of Monaco to ensure that the updates are ready.
-        StandaloneServices.get(IStandaloneThemeService).onDidColorThemeChange(() => this.controller.applyStyles(this.getStyles()));
+        StandaloneServices.get(IStandaloneThemeService).onDidColorThemeChange(() => this.controller.applyStyles(this.computeStyles()));
         window.addEventListener('resize', () => this.updateLayout());
     }
 
     setContextKey(key: string | undefined): void {
         if (key) {
-            this.contextKeyService.createKey<string>(key, undefined);
+            StandaloneServices.get(IContextKeyService).createKey<string>(key, undefined);
         }
     }
 
+    createQuickWidget(): IQuickWidget {
+        return this.controller.createQuickWidget();
+    }
+
     createQuickPick<T extends IQuickPickItem>(): IQuickPick<T> {
         return this.controller.createQuickPick<T>();
     }
@@ -184,7 +185,7 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
     }
 
     private initController(): void {
-        this.controller = new QuickInputController(this.getOptions());
+        this.controller = new QuickInputController(this.getOptions(), StandaloneServices.get(IStandaloneThemeService));
         this.updateLayout();
     }
 
@@ -202,72 +203,107 @@ export class MonacoQuickInputImplementation implements IQuickInputService {
         const options: IQuickInputOptions = {
             idPrefix: 'quickInput_',
             container: this.container,
-            styles: { widget: {}, list: {}, inputBox: {}, countBadge: {}, button: {}, progressBar: {}, keybindingLabel: {}, },
+            styles: this.computeStyles(),
             ignoreFocusOut: () => false,
-            isScreenReaderOptimized: () => false, // TODO change to true once support is added.
             backKeybindingLabel: () => undefined,
             setContextKey: (id?: string) => this.setContextKey(id),
             returnFocus: () => this.container.focus(),
             createList: <T>(
                 user: string, container: HTMLElement, delegate: IListVirtualDelegate<T>, renderers: IListRenderer<T, unknown>[], listOptions: IListOptions<T>
             ): List<T> => this.quickInputList = new List(user, container, delegate, renderers, listOptions),
+            linkOpenerDelegate: () => {
+                // @monaco-uplift: not sure what to do here
+            }
         };
         return options;
     }
 
     // @monaco-uplift
     // Keep the styles up to date with https://github.com/microsoft/vscode/blob/7888ff3a6b104e9e2e3d0f7890ca92dd0828215f/src/vs/platform/quickinput/browser/quickInput.ts#L171.
-    private getStyles(): IQuickInputStyles {
+    private computeStyles(): IQuickInputStyles {
         return {
+            toggle: {
+                inputActiveOptionBorder: this.colorRegistry.toCssVariableName('inputOption.activeBorder'),
+                inputActiveOptionForeground: this.colorRegistry.toCssVariableName('inputOption.activeForeground'),
+                inputActiveOptionBackground: this.colorRegistry.toCssVariableName('inputOption.activeBackground')
+            },
+            pickerGroup: {
+                pickerGroupBorder: this.colorRegistry.toCssVariableName('pickerGroup.Border'),
+                pickerGroupForeground: this.colorRegistry.toCssVariableName('pickerGroupForeground')
+            },
             widget: {
-                quickInputBackground: this.colorRegistry.getColor('quickInput.background'),
-                quickInputForeground: this.colorRegistry.getColor('quickInput.foreground'),
-                quickInputTitleBackground: this.colorRegistry.getColor('quickInputTitle.background')
+                quickInputBackground: this.colorRegistry.toCssVariableName('quickInput.background'),
+                quickInputForeground: this.colorRegistry.toCssVariableName('quickInput.foreground'),
+                quickInputTitleBackground: this.colorRegistry.toCssVariableName('quickInputTitle.background'),
+                widgetBorder: this.colorRegistry.toCssVariableName('widget.border'),
+                widgetShadow: this.colorRegistry.toCssVariableName('widget.shadow')
             },
             list: {
-                listBackground: this.colorRegistry.getColor('quickInput.background'),
-                listInactiveFocusForeground: this.colorRegistry.getColor('quickInputList.focusForeground'),
-                listInactiveSelectionIconForeground: this.colorRegistry.getColor('quickInputList.focusIconForeground'),
-                listInactiveFocusBackground: this.colorRegistry.getColor('quickInputList.focusBackground'),
-                listFocusOutline: this.colorRegistry.getColor('activeContrastBorder'),
-                listInactiveFocusOutline: this.colorRegistry.getColor('activeContrastBorder'),
-                pickerGroupBorder: this.colorRegistry.getColor('pickerGroup.border'),
-                pickerGroupForeground: this.colorRegistry.getColor('pickerGroup.foreground')
+                listBackground: this.colorRegistry.toCssVariableName('quickInput.background'),
+                listInactiveFocusForeground: this.colorRegistry.toCssVariableName('quickInputList.focusForeground'),
+                listInactiveSelectionIconForeground: this.colorRegistry.toCssVariableName('quickInputList.focusIconForeground'),
+                listInactiveFocusBackground: this.colorRegistry.toCssVariableName('quickInputList.focusBackground'),
+                listFocusOutline: this.colorRegistry.toCssVariableName('activeContrastBorder'),
+                listInactiveFocusOutline: this.colorRegistry.toCssVariableName('activeContrastBorder'),
+
+                listFocusBackground: this.colorRegistry.toCssVariableName('list.focusBackground'),
+                listFocusForeground: this.colorRegistry.toCssVariableName('list.focusForeground'),
+                listActiveSelectionBackground: this.colorRegistry.toCssVariableName('list.activeSelectionBackground'),
+                listActiveSelectionForeground: this.colorRegistry.toCssVariableName('list.ActiveSelectionForeground'),
+                listActiveSelectionIconForeground: this.colorRegistry.toCssVariableName('list.ActiveSelectionIconForeground'),
+                listFocusAndSelectionOutline: this.colorRegistry.toCssVariableName('list.FocusAndSelectionOutline'),
+                listFocusAndSelectionBackground: this.colorRegistry.toCssVariableName('list.ActiveSelectionBackground'),
+                listFocusAndSelectionForeground: this.colorRegistry.toCssVariableName('list.ActiveSelectionForeground'),
+                listInactiveSelectionBackground: this.colorRegistry.toCssVariableName('list.InactiveSelectionBackground'),
+                listInactiveSelectionForeground: this.colorRegistry.toCssVariableName('list.InactiveSelectionForeground'),
+                listHoverBackground: this.colorRegistry.toCssVariableName('list.HoverBackground'),
+                listHoverForeground: this.colorRegistry.toCssVariableName('list.HoverForeground'),
+                listDropBackground: this.colorRegistry.toCssVariableName('list.DropBackground'),
+                listSelectionOutline: this.colorRegistry.toCssVariableName('activeContrastBorder'),
+                listHoverOutline: this.colorRegistry.toCssVariableName('activeContrastBorder'),
+                treeIndentGuidesStroke: this.colorRegistry.toCssVariableName('tree.indentGuidesStroke'),
+                treeInactiveIndentGuidesStroke: this.colorRegistry.toCssVariableName('tree.inactiveIndentGuidesStroke'),
+                tableColumnsBorder: this.colorRegistry.toCssVariableName('tree.tableColumnsBorder'),
+                tableOddRowsBackgroundColor: this.colorRegistry.toCssVariableName('tree.tableOddRowsBackground'),
             },
             inputBox: {
-                inputForeground: this.colorRegistry.getColor('inputForeground'),
-                inputBackground: this.colorRegistry.getColor('inputBackground'),
-                inputBorder: this.colorRegistry.getColor('inputBorder'),
-                inputValidationInfoBackground: this.colorRegistry.getColor('inputValidation.infoBackground'),
-                inputValidationInfoForeground: this.colorRegistry.getColor('inputValidation.infoForeground'),
-                inputValidationInfoBorder: this.colorRegistry.getColor('inputValidation.infoBorder'),
-                inputValidationWarningBackground: this.colorRegistry.getColor('inputValidation.warningBackground'),
-                inputValidationWarningForeground: this.colorRegistry.getColor('inputValidation.warningForeground'),
-                inputValidationWarningBorder: this.colorRegistry.getColor('inputValidation.warningBorder'),
-                inputValidationErrorBackground: this.colorRegistry.getColor('inputValidation.errorBackground'),
-                inputValidationErrorForeground: this.colorRegistry.getColor('inputValidation.errorForeground'),
-                inputValidationErrorBorder: this.colorRegistry.getColor('inputValidation.errorBorder'),
+                inputForeground: this.colorRegistry.toCssVariableName('inputForeground'),
+                inputBackground: this.colorRegistry.toCssVariableName('inputBackground'),
+                inputBorder: this.colorRegistry.toCssVariableName('inputBorder'),
+                inputValidationInfoBackground: this.colorRegistry.toCssVariableName('inputValidation.infoBackground'),
+                inputValidationInfoForeground: this.colorRegistry.toCssVariableName('inputValidation.infoForeground'),
+                inputValidationInfoBorder: this.colorRegistry.toCssVariableName('inputValidation.infoBorder'),
+                inputValidationWarningBackground: this.colorRegistry.toCssVariableName('inputValidation.warningBackground'),
+                inputValidationWarningForeground: this.colorRegistry.toCssVariableName('inputValidation.warningForeground'),
+                inputValidationWarningBorder: this.colorRegistry.toCssVariableName('inputValidation.warningBorder'),
+                inputValidationErrorBackground: this.colorRegistry.toCssVariableName('inputValidation.errorBackground'),
+                inputValidationErrorForeground: this.colorRegistry.toCssVariableName('inputValidation.errorForeground'),
+                inputValidationErrorBorder: this.colorRegistry.toCssVariableName('inputValidation.errorBorder'),
             },
             countBadge: {
-                badgeBackground: this.colorRegistry.getColor('badge.background'),
-                badgeForeground: this.colorRegistry.getColor('badge.foreground'),
-                badgeBorder: this.colorRegistry.getColor('contrastBorder')
+                badgeBackground: this.colorRegistry.toCssVariableName('badge.background'),
+                badgeForeground: this.colorRegistry.toCssVariableName('badge.foreground'),
+                badgeBorder: this.colorRegistry.toCssVariableName('contrastBorder')
             },
             button: {
-                buttonForeground: this.colorRegistry.getColor('button.foreground'),
-                buttonBackground: this.colorRegistry.getColor('button.background'),
-                buttonHoverBackground: this.colorRegistry.getColor('button.hoverBackground'),
-                buttonBorder: this.colorRegistry.getColor('contrastBorder')
+                buttonForeground: this.colorRegistry.toCssVariableName('button.foreground'),
+                buttonBackground: this.colorRegistry.toCssVariableName('button.background'),
+                buttonHoverBackground: this.colorRegistry.toCssVariableName('button.hoverBackground'),
+                buttonBorder: this.colorRegistry.toCssVariableName('contrastBorder'),
+                buttonSeparator: this.colorRegistry.toCssVariableName('button.Separator'),
+                buttonSecondaryForeground: this.colorRegistry.toCssVariableName('button.secondaryForeground'),
+                buttonSecondaryBackground: this.colorRegistry.toCssVariableName('button.secondaryBackground'),
+                buttonSecondaryHoverBackground: this.colorRegistry.toCssVariableName('button.secondaryHoverBackground'),
             },
             progressBar: {
-                progressBarBackground: this.colorRegistry.getColor('progressBar.background')
+                progressBarBackground: this.colorRegistry.toCssVariableName('progressBar.background')
             },
             keybindingLabel: {
-                keybindingLabelBackground: this.colorRegistry.getColor('keybindingLabe.background'),
-                keybindingLabelForeground: this.colorRegistry.getColor('keybindingLabel.foreground'),
-                keybindingLabelBorder: this.colorRegistry.getColor('keybindingLabel.border'),
-                keybindingLabelBottomBorder: this.colorRegistry.getColor('keybindingLabel.bottomBorder'),
-                keybindingLabelShadow: this.colorRegistry.getColor('widget.shadow')
+                keybindingLabelBackground: this.colorRegistry.toCssVariableName('keybindingLabel.background'),
+                keybindingLabelForeground: this.colorRegistry.toCssVariableName('keybindingLabel.foreground'),
+                keybindingLabelBorder: this.colorRegistry.toCssVariableName('keybindingLabel.border'),
+                keybindingLabelBottomBorder: this.colorRegistry.toCssVariableName('keybindingLabel.bottomBorder'),
+                keybindingLabelShadow: this.colorRegistry.toCssVariableName('widget.shadow')
             },
         };
     }
@@ -282,7 +318,8 @@ export class MonacoQuickInputService implements QuickInputService {
     protected readonly keybindingRegistry: KeybindingRegistry;
 
     get backButton(): QuickInputButton {
-        return this.monacoService.backButton;
+        // need to cast because of vscode issue https://github.com/microsoft/vscode/issues/190584
+        return this.monacoService.backButton as QuickInputButton;
     }
 
     get onShow(): Event<void> { return this.monacoService.onShow; }
@@ -293,7 +330,8 @@ export class MonacoQuickInputService implements QuickInputService {
     }
 
     createInputBox(): InputBox {
-        return this.monacoService.createInputBox();
+        // need to cast because of vscode issue https://github.com/microsoft/vscode/issues/190584
+        return this.monacoService.createInputBox() as InputBox;
     }
 
     input(options?: InputOptions, token?: monaco.CancellationToken): Promise<string | undefined> {
@@ -309,39 +347,9 @@ export class MonacoQuickInputService implements QuickInputService {
     }
 
     async pick<T extends QuickPickItem, O extends PickOptions<T> = PickOptions<T>>(
-        picks: Promise<QuickPickInput<T>[]> | QuickPickInput<T>[], options?: O, token?: monaco.CancellationToken
-    ): Promise<(O extends { canPickMany: true; } ? T[] : T) | undefined> {
-        type M = T & { buttons?: NormalizedQuickInputButton[] };
-        type R = (O extends { canPickMany: true; } ? T[] : T);
-
-        const monacoPicks: Promise<QuickPickInput<IQuickPickItem>[]> = new Promise(async resolve => {
-            const updatedPicks = (await picks).map(pick => {
-                if (pick.type !== 'separator') {
-                    const icon = pick.iconPath;
-                    // @monaco-uplift
-                    // Other kind of icons (URI and URI dark/light) shall be supported once monaco editor has been upgraded to at least 1.81.
-                    // see https://github.com/eclipse-theia/theia/pull/12945#issue-1913645228
-                    if (ThemeIcon.isThemeIcon(icon)) {
-                        const codicon = codiconArray(icon.id);
-                        if (pick.iconClasses) {
-                            pick.iconClasses.push(...codicon);
-                        } else {
-                            pick.iconClasses = codicon;
-                        }
-                    }
-                    pick.buttons &&= pick.buttons.map(QuickInputButton.normalize);
-                }
-                return pick as M;
-            });
-            resolve(updatedPicks);
-        });
-        const monacoOptions = options as IPickOptions<M>;
-        const picked = await this.monacoService.pick(monacoPicks, monacoOptions, token);
-        if (!picked) { return picked; }
-        if (options?.canPickMany) {
-            return (Array.isArray(picked) ? picked : [picked]) as R;
-        }
-        return Array.isArray(picked) ? picked[0] : picked;
+        picks: Promise<QuickPickInput<T>[]> | QuickPickInput<T>[], options?: O, token?: CancellationToken
+    ): Promise<T[] | T | undefined> {
+        return this.monacoService.pick(picks, options, token);
     }
 
     showQuickPick<T extends QuickPickItem>(items: Array<T | QuickPickSeparator>, options?: QuickPickOptions<T>): Promise<T | undefined> {
@@ -394,7 +402,8 @@ export class MonacoQuickInputService implements QuickInputService {
                 });
                 wrapped.onDidTriggerButton((button: IQuickInputButton) => {
                     if (options.onDidTriggerButton) {
-                        options.onDidTriggerButton(button);
+                        // need to cast because of vscode issue https://github.com/microsoft/vscode/issues/190584
+                        options.onDidTriggerButton(button as QuickInputButton);
                     }
                 });
                 wrapped.onDidTriggerItemButton((event: QuickPickItemButtonEvent<T>) => {
@@ -577,7 +586,14 @@ class MonacoQuickPick<T extends QuickPickItem> extends MonacoQuickInput implemen
     }
 
     get items(): readonly (T | QuickPickSeparator)[] {
-        return this.wrapped.items.map(item => QuickPickSeparator.is(item) ? item : item.item);
+        // need to cast because of vscode issue https://github.com/microsoft/vscode/issues/190584
+        return this.wrapped.items.map(item => {
+            if (item instanceof MonacoQuickPickItem) {
+                return item.item;
+            } else {
+                return item;
+            }
+        });
     }
 
     set items(itemList: readonly (T | QuickPickSeparator)[]) {
@@ -610,12 +626,14 @@ class MonacoQuickPick<T extends QuickPickItem> extends MonacoQuickInput implemen
 
     readonly onDidAccept: Event<{ inBackground: boolean }> = this.wrapped.onDidAccept;
     readonly onDidChangeValue: Event<string> = this.wrapped.onDidChangeValue;
-    readonly onDidTriggerButton: Event<QuickInputButton> = this.wrapped.onDidTriggerButton;
+
+    // need to cast because of vscode issue https://github.com/microsoft/vscode/issues/190584
+    readonly onDidTriggerButton: Event<QuickInputButton> = this.wrapped.onDidTriggerButton as Event<QuickInputButton>;
     readonly onDidTriggerItemButton: Event<QuickPickItemButtonEvent<T>> =
         Event.map(this.wrapped.onDidTriggerItemButton, (evt: IQuickPickItemButtonEvent<MonacoQuickPickItem<T>>) => ({
             item: evt.item.item,
             button: evt.button
-        }));
+        })) as Event<QuickPickItemButtonEvent<T>>;
     readonly onDidChangeActive: Event<T[]> = Event.map(
         this.wrapped.onDidChangeActive,
         (items: MonacoQuickPickItem<T>[]) => items.map(item => item.item));
@@ -630,7 +648,7 @@ class MonacoQuickPick<T extends QuickPickItem> extends MonacoQuickInput implemen
         const monacoReferences: MonacoQuickPickItem<T>[] = [];
         for (const item of items) {
             for (const wrappedItem of source) {
-                if (!QuickPickSeparator.is(wrappedItem) && wrappedItem.item === item) {
+                if (wrappedItem instanceof MonacoQuickPickItem && wrappedItem.item === item) {
                     monacoReferences.push(wrappedItem);
                 }
             }
@@ -663,7 +681,7 @@ export class MonacoQuickPickItem<T extends QuickPickItem> implements IQuickPickI
         this.detail = item.detail;
         this.keybinding = item.keySequence ? new MonacoResolvedKeybinding(item.keySequence, kbRegistry) : undefined;
         this.iconClasses = item.iconClasses;
-        this.buttons = item.buttons?.map(QuickInputButton.normalize);
+        this.buttons = item.buttons;
         this.alwaysShow = item.alwaysShow;
         this.highlights = item.highlights;
     }

package/src/browser/monaco-resolved-keybinding.ts

@@ -16,7 +16,7 @@
 
 import { KeyCode as MonacoKeyCode } from '@theia/monaco-editor-core/esm/vs/base/common/keyCodes';
 import {
-    ChordKeybinding, KeybindingModifier, ResolvedKeybinding, ResolvedKeybindingPart, ScanCodeBinding, SimpleKeybinding
+    ResolvedKeybinding, ResolvedChord, SingleModifierChord, KeyCodeChord, Chord
 } from '@theia/monaco-editor-core/esm/vs/base/common/keybindings';
 import { ElectronAcceleratorLabelProvider, UILabelProvider, UserSettingsLabelProvider } from '@theia/monaco-editor-core/esm/vs/base/common/keybindingLabels';
 import { USLayoutResolvedKeybinding } from '@theia/monaco-editor-core/esm/vs/platform/keybinding/common/usLayoutResolvedKeybinding';
@@ -28,15 +28,15 @@ import { KEY_CODE_MAP } from './monaco-keycode-map';
 
 export class MonacoResolvedKeybinding extends ResolvedKeybinding {
 
-    protected readonly parts: ResolvedKeybindingPart[];
+    protected readonly chords: ResolvedChord[];
 
     constructor(protected readonly keySequence: KeySequence, keybindingService: KeybindingRegistry) {
         super();
-        this.parts = keySequence.map(keyCode => {
+        this.chords = keySequence.map(keyCode => {
             // eslint-disable-next-line no-null/no-null
             const keyLabel = keyCode.key ? keybindingService.acceleratorForKey(keyCode.key) : null;
             const keyAriaLabel = keyLabel;
-            return new ResolvedKeybindingPart(
+            return new ResolvedChord(
                 keyCode.ctrl,
                 keyCode.shift,
                 keyCode.alt,
@@ -48,43 +48,43 @@ export class MonacoResolvedKeybinding extends ResolvedKeybinding {
     }
 
     getLabel(): string | null {
-        return UILabelProvider.toLabel(MonacoPlatform.OS, this.parts, p => p.keyLabel);
+        return UILabelProvider.toLabel(MonacoPlatform.OS, this.chords, p => p.keyLabel);
     }
 
     getAriaLabel(): string | null {
-        return UILabelProvider.toLabel(MonacoPlatform.OS, this.parts, p => p.keyAriaLabel);
+        return UILabelProvider.toLabel(MonacoPlatform.OS, this.chords, p => p.keyAriaLabel);
     }
 
     getElectronAccelerator(): string | null {
-        if (this.isChord()) {
+        if (this.hasMultipleChords()) {
             // Electron cannot handle chords
             // eslint-disable-next-line no-null/no-null
             return null;
         }
-        return ElectronAcceleratorLabelProvider.toLabel(MonacoPlatform.OS, this.parts, p => p.keyLabel);
+        return ElectronAcceleratorLabelProvider.toLabel(MonacoPlatform.OS, this.chords, p => p.keyLabel);
     }
 
     getUserSettingsLabel(): string | null {
-        return UserSettingsLabelProvider.toLabel(MonacoPlatform.OS, this.parts, p => p.keyLabel);
+        return UserSettingsLabelProvider.toLabel(MonacoPlatform.OS, this.chords, p => p.keyLabel);
     }
 
     isWYSIWYG(): boolean {
         return true;
     }
 
-    isChord(): boolean {
-        return this.parts.length > 1;
+    hasMultipleChords(): boolean {
+        return this.chords.length > 1;
     }
 
-    getDispatchParts(): (string | null)[] {
+    getDispatchChords(): (string | null)[] {
         return this.keySequence.map(keyCode => USLayoutResolvedKeybinding.getDispatchStr(this.toKeybinding(keyCode)));
     }
 
-    getSingleModifierDispatchParts(): (KeybindingModifier | null)[] {
+    getSingleModifierDispatchChords(): (SingleModifierChord | null)[] {
         return this.keySequence.map(keybinding => this.getSingleModifierDispatchPart(keybinding));
     }
 
-    protected getSingleModifierDispatchPart(code: KeyCode): KeybindingModifier | null {
+    protected getSingleModifierDispatchPart(code: KeyCode): SingleModifierChord | null {
         if (code.key?.keyCode === undefined) {
             return null; // eslint-disable-line no-null/no-null
         }
@@ -103,8 +103,8 @@ export class MonacoResolvedKeybinding extends ResolvedKeybinding {
         return null; // eslint-disable-line no-null/no-null
     }
 
-    private toKeybinding(keyCode: KeyCode): SimpleKeybinding {
-        return new SimpleKeybinding(
+    private toKeybinding(keyCode: KeyCode): KeyCodeChord {
+        return new KeyCodeChord(
             keyCode.ctrl,
             keyCode.shift,
             keyCode.alt,
@@ -113,16 +113,16 @@ export class MonacoResolvedKeybinding extends ResolvedKeybinding {
         );
     }
 
-    public getParts(): ResolvedKeybindingPart[] {
-        return this.parts;
+    public getChords(): ResolvedChord[] {
+        return this.chords;
     }
 
-    static toKeybinding(keybindings: Array<SimpleKeybinding | ScanCodeBinding>): string {
+    static toKeybinding(keybindings: Array<Chord>): string {
         return keybindings.map(binding => this.keyCode(binding)).join(' ');
     }
 
-    static keyCode(keybinding: SimpleKeybinding | ScanCodeBinding): KeyCode {
-        const keyCode = keybinding instanceof SimpleKeybinding ? keybinding.keyCode : USLayoutResolvedKeybinding['_scanCodeToKeyCode'](keybinding.scanCode);
+    static keyCode(keybinding: Chord): KeyCode {
+        const keyCode = keybinding instanceof KeyCodeChord ? keybinding.keyCode : USLayoutResolvedKeybinding['_scanCodeToKeyCode'](keybinding.scanCode);
         const sequence: Keystroke = {
             first: Key.getKey(this.monaco2BrowserKeyCode(keyCode & 0xff)),
             modifiers: []
@@ -146,8 +146,8 @@ export class MonacoResolvedKeybinding extends ResolvedKeybinding {
         return KeyCode.createKeyCode(sequence);
     }
 
-    static keySequence(keybinding: ChordKeybinding): KeySequence {
-        return keybinding.parts.map(part => this.keyCode(part));
+    static keySequence(keybinding: Chord[]): KeySequence {
+        return keybinding.map(part => this.keyCode(part));
     }
 
     private static monaco2BrowserKeyCode(keyCode: MonacoKeyCode): number {

package/src/browser/monaco-text-model-service.ts

@@ -194,6 +194,6 @@ export class MonacoTextModelService implements ITextModelService {
     }
 
     canHandleResource(resource: monaco.Uri): boolean {
-        return this.fileService.canHandleResource(new URI(resource));
+        return this.fileService.canHandleResource(URI.fromComponents(resource));
     }
 }