@eclipse-glsp/client 1.1.0-next.fdfeeeb.193 → 2.1.0-next.12ca798.289

package/src/base/action-dispatcher.spec.ts

@@ -0,0 +1,87 @@
+/********************************************************************************
+ * Copyright (c) 2023 EclipseSource 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 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import { expect } from 'chai';
+import { Container } from 'inversify';
+import { ActionHandlerRegistry, IActionHandler, RequestAction, ResponseAction, TYPES } from '@eclipse-glsp/sprotty';
+import { IDiagramOptions } from '..';
+import { GLSPActionDispatcher } from './action-dispatcher';
+import { defaultModule } from './default.module';
+
+const container = new Container();
+container.load(defaultModule);
+container.bind(TYPES.IDiagramOptions).toConstantValue(<IDiagramOptions>(<unknown>{
+    clientId: 'client1',
+    diagramType: 'diagramType',
+    glspClientProvider: async () => ({} as any)
+}));
+const registry = container.get(ActionHandlerRegistry);
+const actionDispatcher = container.get(GLSPActionDispatcher);
+
+let testHandlerDelay = 0;
+const testHandler: IActionHandler = {
+    handle: action => {
+        const request = action as RequestAction<ResponseAction>;
+        new Promise(resolve => setTimeout(resolve, testHandlerDelay)).then(() =>
+            actionDispatcher.dispatch(<ResponseAction>{
+                kind: 'response',
+                responseId: request.requestId
+            })
+        );
+    }
+};
+registry.register('request', testHandler);
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+registry.register('response', { handle: () => {} });
+actionDispatcher.initialize().then(() => {
+    actionDispatcher['blockUntil'] = undefined;
+});
+
+describe('GLSPActionDispatcher', () => {
+    describe('requestUntil', () => {
+        it('should resolve successfully if response dispatched within timeout', async () => {
+            testHandlerDelay = 15;
+            const requestAction = { kind: 'request', requestId: '' };
+            const response = await actionDispatcher.requestUntil(requestAction, 150);
+            expect(response?.responseId).to.be.equal(requestAction.requestId);
+        });
+        it('should resolve to `undefined` if no response dispatched within timeout & `rejectOnTimeout` flag is false', async () => {
+            testHandlerDelay = 30;
+            const requestAction = { kind: 'request', requestId: '' };
+            const response = await actionDispatcher.requestUntil(requestAction, 5);
+            expect(response).to.be.undefined;
+        });
+        it('should be rejected if no response dispatched within timeout & `rejectOnTimeout` flag is true', async () => {
+            testHandlerDelay = 30;
+            const requestAction = { kind: 'request', requestId: '' };
+            const gotRejected = await actionDispatcher.requestUntil(requestAction, 5, true).then(
+                () => false,
+                () => true
+            );
+            expect(gotRejected, 'Response promise should be rejected').to.be.true;
+        });
+    });
+    describe('request & re-dispatch', () => {
+        it('should be possible to re-dispatch the response of a `request` call', async () => {
+            const requestAction = { kind: 'request', requestId: '' };
+            const response = await actionDispatcher.request(requestAction);
+            const dispatchSuccessful = await actionDispatcher.dispatch(response).then(
+                () => true,
+                err => false
+            );
+            expect(dispatchSuccessful, 'Promise of re-dispatch should resolve successfully').to.be.true;
+        });
+    });
+});

package/src/base/action-dispatcher.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2022 EclipseSource and others.
+ * Copyright (c) 2019-2023 EclipseSource 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
@@ -13,15 +13,17 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { Action, RequestAction, ResponseAction } from '@eclipse-glsp/protocol';
-import { inject } from 'inversify';
-import { ActionDispatcher } from 'sprotty';
-import { ModelInitializationConstraint } from './model-initialization-constraint';
+import { inject, injectable } from 'inversify';
+import { Action, ActionDispatcher, RequestAction, ResponseAction } from '@eclipse-glsp/sprotty';
+import { ModelInitializationConstraint } from './model/model-initialization-constraint';
 
+@injectable()
 export class GLSPActionDispatcher extends ActionDispatcher {
     protected readonly timeouts: Map<string, NodeJS.Timeout> = new Map();
     protected initializedConstraint = false;
-    @inject(ModelInitializationConstraint) protected initializationConstraint: ModelInitializationConstraint;
+
+    @inject(ModelInitializationConstraint)
+    protected initializationConstraint: ModelInitializationConstraint;
 
     override initialize(): Promise<void> {
         return super.initialize().then(() => this.startModelInitialization());
@@ -30,7 +32,7 @@ export class GLSPActionDispatcher extends ActionDispatcher {
     startModelInitialization(): void {
         if (!this.initializedConstraint) {
             this.logger.log(this, 'Starting model initialization mode');
-            this.initializationConstraint.onInitialized().then(() => this.logger.log(this, 'Model initialization completed'));
+            this.initializationConstraint.onInitialized(() => this.logger.log(this, 'Model initialization completed'));
             this.initializedConstraint = true;
         }
     }
@@ -39,8 +41,21 @@ export class GLSPActionDispatcher extends ActionDispatcher {
         return this.initializationConstraint.onInitialized();
     }
 
-    override dispatch(action: Action): Promise<void> {
-        const result = super.dispatch(action);
+    hasHandler(action: Action): boolean {
+        return this.actionHandlerRegistry.get(action.kind).length > 0;
+    }
+
+    /**
+     * Processes all given actions, by dispatching them to the corresponding handlers, after the model initialization is completed.
+     *
+     * @param actions The actions that should be dispatched after the model initialization
+     */
+    dispatchOnceModelInitialized(...actions: Action[]): void {
+        this.initializationConstraint.onInitialized(() => this.dispatchAll(actions));
+    }
+
+    override async dispatch(action: Action): Promise<void> {
+        const result = await super.dispatch(action);
         this.initializationConstraint.notifyDispatched(action);
         return result;
     }
@@ -54,11 +69,11 @@ export class GLSPActionDispatcher extends ActionDispatcher {
                 this.timeouts.delete(action.responseId);
             }
 
-            // we might have reached a timeout, so we simply drop the response
+            // Check if we have a pending request for the response.
+            // If not the  we clear the responseId => action will be dispatched normally
             const deferred = this.requests.get(action.responseId);
             if (deferred === undefined) {
-                this.logger.log(this, 'No matching request for response', action);
-                return Promise.resolve();
+                action.responseId = '';
             }
         }
         return super.handleAction(action);
@@ -82,7 +97,11 @@ export class GLSPActionDispatcher extends ActionDispatcher {
      * If `rejectOnTimeout` is set to false (default) the returned promise will be resolved with
      * no value, otherwise it will be rejected.
      */
-    requestUntil<Res extends ResponseAction>(action: RequestAction<Res>, timeoutMs = 2000, rejectOnTimeout = false): Promise<Res> {
+    requestUntil<Res extends ResponseAction>(
+        action: RequestAction<Res>,
+        timeoutMs = 2000,
+        rejectOnTimeout = false
+    ): Promise<Res | undefined> {
         if (!action.requestId && action.requestId === '') {
             // No request id has been specified. So we use a generated one.
             action.requestId = RequestAction.generateRequestId();
@@ -107,6 +126,6 @@ export class GLSPActionDispatcher extends ActionDispatcher {
         }, timeoutMs);
         this.timeouts.set(requestId, timeout);
 
-        return super.request(action);
+        return super.request<Res>(action);
     }
 }

package/src/base/action-handler-registry.ts

@@ -0,0 +1,30 @@
+/********************************************************************************
+ * Copyright (c) 2023 EclipseSource 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 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { injectable } from 'inversify';
+import { ActionHandlerRegistry } from '@eclipse-glsp/sprotty';
+
+@injectable()
+export class GLSPActionHandlerRegistry extends ActionHandlerRegistry {
+    /**
+     * Retrieve a set of all action kinds for which (at least) one
+     * handler is registered
+     * @returns the set of handled action kinds
+     */
+    getHandledActionKinds(): string[] {
+        return Array.from(this.elements.keys());
+    }
+}

package/src/base/args-feature.ts

@@ -0,0 +1,37 @@
+/********************************************************************************
+ * Copyright (c) 2020-2023 EclipseSource 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 WITH Classpath-exception-2.0
+ ********************************************************************************/
+import { Args, GModelElement } from '@eclipse-glsp/sprotty';
+
+export const argsFeature = Symbol('argsFeature');
+
+/**
+ * Adds an optional `args` property to a {@link GModelElement}. This allows
+ * to add arbitrary arguments to the element (on client or server side) without having
+ * to extend the model class.
+ *
+ * Feature extension interface for {@link argsFeature}.
+ */
+export interface ArgsAware {
+    args?: Args;
+}
+
+export function isArgsAware(element: GModelElement): element is GModelElement & ArgsAware {
+    return element.hasFeature(argsFeature);
+}
+
+export function hasArgs(element?: GModelElement): element is GModelElement & Required<ArgsAware> {
+    return element !== undefined && isArgsAware(element) && element.args !== undefined;
+}

package/src/base/auto-complete/auto-complete-actions.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020-2022 EclipseSource and others.
+ * Copyright (c) 2020-2023 EclipseSource 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
@@ -13,8 +13,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { hasStringProp, LabeledAction } from '@eclipse-glsp/protocol';
+import { hasStringProp, LabeledAction } from '@eclipse-glsp/sprotty';
 
+/** A special {@link LabeledAction} that has a `text` property in addition to the `label  */
 export interface AutoCompleteValue extends LabeledAction {
     readonly text: string;
 }

package/src/base/auto-complete/auto-complete-widget.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020-2022 EclipseSource and others.
+ * Copyright (c) 2020-2023 EclipseSource 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
@@ -13,11 +13,17 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { Action, LabeledAction, ValidationStatus } from '@eclipse-glsp/protocol';
 import { AutocompleteResult, AutocompleteSettings } from 'autocompleter';
-import { codiconCSSClasses, ILogger, SModelRoot } from 'sprotty';
-import { toArray } from 'sprotty/lib/utils/iterable';
-import { matchesKeystroke } from 'sprotty/lib/utils/keyboard';
+import {
+    Action,
+    ILogger,
+    LabeledAction,
+    GModelRoot,
+    ValidationStatus,
+    codiconCSSClasses,
+    matchesKeystroke,
+    toArray
+} from '@eclipse-glsp/sprotty';
 import { AutoCompleteValue } from './auto-complete-actions';
 import { IValidationDecorator } from './validation-decorator';
 
@@ -28,6 +34,7 @@ export interface AutoCompleteSettings {
     readonly showOnFocus?: boolean;
 }
 
+export type CloseReason = 'submission' | 'blur' | 'escape';
 export interface InputValidator {
     validate(input: string): Promise<ValidationStatus>;
 }
@@ -37,7 +44,7 @@ export interface SuggestionProvider {
 }
 
 export interface InputValueInitializer {
-    initializeValue(containerElement: HTMLElement, root: Readonly<SModelRoot>, ...contextElementIds: string[]): string;
+    initializeValue(containerElement: HTMLElement, root: Readonly<GModelRoot>, ...contextElementIds: string[]): string;
 }
 
 export interface SuggestionSubmitHandler {
@@ -48,6 +55,11 @@ export interface TextSubmitHandler {
     executeFromTextOnlyInput(input: string): void;
 }
 
+export interface AutoCompleteWidgetOptions {
+    visibleSuggestionsChanged?: (suggestions: LabeledAction[]) => void;
+    selectedSuggestionChanged?: (suggestion?: LabeledAction) => void;
+}
+
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const configureAutocomplete: (settings: AutocompleteSettings<LabeledAction>) => AutocompleteResult = require('autocompleter');
 
@@ -78,8 +90,9 @@ export class AutoCompleteWidget {
         public suggestionProvider: SuggestionProvider,
         public suggestionSubmitHandler: SuggestionSubmitHandler,
         // eslint-disable-next-line @typescript-eslint/no-empty-function
-        protected notifyClose: () => void = () => {},
-        protected logger?: ILogger
+        protected notifyClose: (reason: CloseReason) => void = () => {},
+        protected logger?: ILogger,
+        protected options?: AutoCompleteWidgetOptions
     ) {}
 
     configureValidation(
@@ -106,16 +119,21 @@ export class AutoCompleteWidget {
         inputElement.style.position = 'absolute';
         inputElement.spellcheck = false;
         inputElement.autocapitalize = 'false';
-        inputElement.autocomplete = 'false';
+        inputElement.autocomplete = 'off';
         inputElement.style.width = '100%';
         inputElement.addEventListener('keydown', event => this.handleKeyDown(event));
-        inputElement.addEventListener('blur', () => window.setTimeout(() => this.notifyClose(), 200));
+        inputElement.addEventListener('blur', () => {
+            if (this.containerElement.style.visibility !== 'hidden') {
+                window.setTimeout(() => this.notifyClose('blur'), 200);
+            }
+        });
+
         return inputElement;
     }
 
     protected handleKeyDown(event: KeyboardEvent): void {
         if (matchesKeystroke(event, 'Escape')) {
-            this.notifyClose();
+            this.notifyClose('escape');
             return;
         }
         if (matchesKeystroke(event, 'Enter') && !this.isInputElementChanged() && this.isSuggestionAvailable()) {
@@ -133,7 +151,7 @@ export class AutoCompleteWidget {
         }
         if (this.textSubmitHandler) {
             this.executeFromTextOnlyInput();
-            this.notifyClose();
+            this.notifyClose('submission');
         }
     }
 
@@ -146,7 +164,7 @@ export class AutoCompleteWidget {
         this.validationDecorator.invalidate();
     }
 
-    open(root: Readonly<SModelRoot>, ...contextElementIds: string[]): void {
+    open(root: Readonly<GModelRoot>, ...contextElementIds: string[]): void {
         this.contextActions = undefined;
         this.autoCompleteResult = configureAutocomplete(this.autocompleteSettings(root));
         this.previousContent = this.inputElement.value;
@@ -154,7 +172,7 @@ export class AutoCompleteWidget {
         this.inputElement.focus();
     }
 
-    protected autocompleteSettings(root: Readonly<SModelRoot>): AutocompleteSettings<LabeledAction> {
+    protected autocompleteSettings(root: Readonly<GModelRoot>): AutocompleteSettings<LabeledAction> {
         return {
             input: this.inputElement,
             emptyMsg: this.autoSuggestionSettings.noSuggestionsMessage,
@@ -165,23 +183,39 @@ export class AutoCompleteWidget {
             fetch: (text: string, update: (items: LabeledAction[]) => void) => this.updateSuggestions(update, text, root),
             onSelect: (item: LabeledAction) => this.onSelect(item),
             render: (item: LabeledAction, currentValue: string): HTMLDivElement | undefined => this.renderSuggestions(item, currentValue),
-            customize: (input: HTMLInputElement, inputRect: DOMRect, container: HTMLDivElement, maxHeight: number) => {
+            customize: (input, inputRect, container, maxHeight) => {
                 this.customizeInputElement(input, inputRect, container, maxHeight);
             }
         };
     }
 
-    protected customizeInputElement(input: HTMLInputElement, inputRect: DOMRect, container: HTMLDivElement, maxHeight: number): void {
+    protected customizeInputElement(
+        input: HTMLInputElement | HTMLTextAreaElement,
+        inputRect: DOMRect,
+        container: HTMLDivElement,
+        maxHeight: number
+    ): void {
         // move container into our UIExtension container as this is already positioned correctly
         if (this.containerElement) {
             this.containerElement.appendChild(container);
+
+            if (this.options && this.options.selectedSuggestionChanged) {
+                const selectedElement = container.querySelector('.selected');
+                // eslint-disable-next-line no-null/no-null
+                if (selectedElement !== null && selectedElement !== undefined) {
+                    const index = Array.from(container.children).indexOf(selectedElement);
+                    this.options.selectedSuggestionChanged(this.contextActions?.[index]);
+                } else {
+                    this.options.selectedSuggestionChanged(undefined);
+                }
+            }
         }
     }
 
     protected updateSuggestions(
         update: (items: LabeledAction[]) => void,
         text: string,
-        root: Readonly<SModelRoot>,
+        root: Readonly<GModelRoot>,
         ...contextElementIds: string[]
     ): void {
         this.onLoading();
@@ -189,6 +223,7 @@ export class AutoCompleteWidget {
             .then(actions => {
                 this.contextActions = this.filterActions(text, actions);
                 update(this.contextActions);
+                this.options?.visibleSuggestionsChanged?.(this.contextActions);
                 this.onLoaded('success');
             })
             .catch(reason => {
@@ -208,7 +243,7 @@ export class AutoCompleteWidget {
         this.containerElement.appendChild(this.loadingIndicator);
     }
 
-    protected doUpdateSuggestions(text: string, root: Readonly<SModelRoot>, ...contextElementIds: string[]): Promise<LabeledAction[]> {
+    protected doUpdateSuggestions(text: string, root: Readonly<GModelRoot>, ...contextElementIds: string[]): Promise<LabeledAction[]> {
         return this.suggestionProvider.provideSuggestions(text);
     }
 
@@ -223,16 +258,16 @@ export class AutoCompleteWidget {
 
     protected renderSuggestions(item: LabeledAction, value: string): HTMLDivElement {
         const itemElement = document.createElement('div');
-        const wordMatcher = this.espaceForRegExp(value).split(' ').join('|');
+        const wordMatcher = this.escapeForRegExp(value).split(' ').join('|');
         const regex = new RegExp(wordMatcher, 'gi');
         if (item.icon) {
             this.renderIcon(itemElement, item.icon);
         }
-        itemElement.innerHTML += item.label.replace(regex, match => '<em>' + match + '</em>');
+        itemElement.innerHTML += item.label.replace(regex, match => '<em>' + match + '</em>').replace(/ /g, '&nbsp;');
         return itemElement;
     }
 
-    protected espaceForRegExp(value: string): string {
+    protected escapeForRegExp(value: string): string {
         return value.replace(/([.?*+^$[\]\\(){}|-])/g, '\\$1');
     }
 
@@ -257,7 +292,7 @@ export class AutoCompleteWidget {
             window.setTimeout(() => this.inputElement.dispatchEvent(new Event('keyup')));
         } else {
             this.executeFromSuggestion(item);
-            this.notifyClose();
+            this.notifyClose('submission');
         }
     }
 

package/src/base/auto-complete/autocomplete-suggestion-providers.ts

@@ -0,0 +1,37 @@
+/********************************************************************************
+ * Copyright (c) 2023 Business Informatics Group (TU Wien) 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 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { GModelElement, GModelRoot, LabeledAction } from '@eclipse-glsp/sprotty';
+
+/**
+ * Interface for a provider that provides suggestions that can be used to fill the autocomplete
+ */
+export interface IAutocompleteSuggestionProvider {
+    /**
+     * Returns the suggestions based on the provided parameters.
+     * @param root: The root model
+     * @param text: The text input provided by the user.
+     */
+    retrieveSuggestions(root: Readonly<GModelRoot>, text: string): Promise<AutocompleteSuggestion[]>;
+}
+
+/**
+ * Interface for autocomplete suggestions.
+ */
+export interface AutocompleteSuggestion {
+    element: GModelElement;
+    action: LabeledAction;
+}

package/src/base/auto-complete/base-autocomplete-palette.ts

@@ -0,0 +1,92 @@
+/********************************************************************************
+ * Copyright (c) 2023 Business Informatics Group (TU Wien) 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 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { inject } from 'inversify';
+import { AbstractUIExtension, Action, LabeledAction, GModelRoot, TYPES } from '@eclipse-glsp/sprotty';
+import '../../../css/autocomplete-palette.css';
+import { GLSPActionDispatcher } from '../action-dispatcher';
+import { AutoCompleteWidget, CloseReason, toActionArray } from './auto-complete-widget';
+
+/**
+ * A reusable base implementation for `UIExtensions` that want to provide autocomplete functionality
+ * using the {@link AutoCompleteWidget}.
+ *
+ */
+export abstract class BaseAutocompletePalette extends AbstractUIExtension {
+    protected readonly autoSuggestionSettings = {
+        noSuggestionsMessage: 'No suggestions available',
+        suggestionsClass: 'command-palette-suggestions',
+        debounceWaitMs: 50,
+        showOnFocus: true
+    };
+
+    protected root?: Readonly<GModelRoot>;
+    protected autocompleteWidget: AutoCompleteWidget;
+
+    @inject(TYPES.IActionDispatcher)
+    protected actionDispatcher: GLSPActionDispatcher;
+
+    containerClass(): string {
+        return 'autocomplete-palette';
+    }
+
+    override show(root: Readonly<GModelRoot>, ...contextElementIds: string[]): void {
+        super.show(root, ...contextElementIds);
+        this.root = root;
+        this.autocompleteWidget.open(root);
+    }
+
+    override hide(): void {
+        this.autocompleteWidget?.dispose();
+        this.root = undefined;
+        super.hide();
+    }
+
+    protected initializeContents(containerElement: HTMLElement): void {
+        containerElement.classList.add('command-palette');
+
+        this.autocompleteWidget = new AutoCompleteWidget(
+            this.autoSuggestionSettings,
+            { provideSuggestions: input => this.retrieveSuggestions(this.root!, input) },
+            { executeFromSuggestion: input => this.executeSuggestion(input) },
+            reason => this.autocompleteHide(reason),
+            this.logger,
+            {
+                visibleSuggestionsChanged: suggestions => this.visibleSuggestionsChanged(this.root!, suggestions),
+                selectedSuggestionChanged: suggestion => this.selectedSuggestionChanged(this.root!, suggestion)
+            }
+        );
+        this.autocompleteWidget.initialize(containerElement);
+    }
+
+    protected abstract retrieveSuggestions(root: Readonly<GModelRoot>, input: string): Promise<LabeledAction[]>;
+
+    protected async visibleSuggestionsChanged(root: Readonly<GModelRoot>, labeledActions: LabeledAction[]): Promise<void> {
+        return;
+    }
+
+    protected async selectedSuggestionChanged(root: Readonly<GModelRoot>, labeledAction?: LabeledAction): Promise<void> {
+        return;
+    }
+
+    protected autocompleteHide(reason: CloseReason): void {
+        this.hide();
+    }
+
+    protected executeSuggestion(input: LabeledAction | Action[] | Action): void {
+        this.actionDispatcher.dispatchAll(toActionArray(input));
+    }
+}

package/src/base/auto-complete/validation-decorator.ts

@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020-2021 EclipseSource and others.
+ * Copyright (c) 2020-2023 EclipseSource 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
@@ -13,8 +13,7 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-import { codiconCSSString } from 'sprotty/lib/utils/codicon';
-import { ValidationStatus } from '@eclipse-glsp/protocol';
+import { ValidationStatus, codiconCSSString } from '@eclipse-glsp/sprotty';
 
 export interface IValidationDecorator {
     decorateValidationResult(status: ValidationStatus): void;