GLSP-1347: Fix autocomplete widget (#362)

- Update `onSelect` method of autocomplete Widget to dispatch a `input` event instead of a `keyup` event. (Since autocompleter 8.x the suggestion update uses `input` instead of `keyup` - Enable task editor in standalone example by adding an explicit standaloneTaskEditorModule. Fixes eclipse-glsp/glsp#1347 In addition: - Update dependencies and align with sprotty - Use fixed version of vscode-jsonrpc to avoid conflicts with Theia - Restore original container configuration order in `workflow-diagram-module` (was changed on accident in #355)
eclipse-glsp · Jun 18, 2024 · 1570f91 · 1570f91
1 parent 663c6df
commit 1570f91
Show file tree

Hide file tree

Showing 12 changed files with 168 additions and 32 deletions.
diff --git a/...glsp/src/direct-task-editing/di.config.ts → ...direct-task-editing/task-editor-module.ts b/...glsp/src/direct-task-editing/di.config.ts → ...direct-task-editing/task-editor-module.ts
@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2019-2023 EclipseSource and others.
+ * Copyright (c) 2019-2024 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
@@ -16,9 +16,9 @@
 import { bindAsService, FeatureModule, TYPES } from '@eclipse-glsp/client';
 import { TaskEditor } from './direct-task-editor';
 
-export const directTaskEditor = new FeatureModule(
+export const taskEditorModule = new FeatureModule(
     (bind, _unbind, _isBound) => {
         bindAsService(bind, TYPES.IUIExtension, TaskEditor);
     },
-    { featureId: Symbol('directTaskEditor') }
+    { featureId: Symbol('taskEditorModule') }
 );
diff --git a/examples/workflow-glsp/src/index.ts b/examples/workflow-glsp/src/index.ts
@@ -13,8 +13,8 @@
  *
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
-export * from './direct-task-editing/di.config';
 export * from './direct-task-editing/direct-task-editor';
+export * from './direct-task-editing/task-editor-module';
 export * from './model';
 export * from './workflow-diagram-module';
 export * from './workflow-snapper';

diff --git a/examples/workflow-glsp/src/workflow-diagram-module.ts b/examples/workflow-glsp/src/workflow-diagram-module.ts
@@ -49,7 +49,7 @@ import 'balloon-css/balloon.min.css';
 import { Container } from 'inversify';
 import 'sprotty/css/edit-label.css';
 import '../css/diagram.css';
-import { directTaskEditor } from './direct-task-editing/di.config';
+import { taskEditorModule } from './direct-task-editing/task-editor-module';
 import { BranchingNode, CategoryNode, Icon, SynchronizationNode, TaskNode, WeightedEdge } from './model';
 import { WorkflowSnapper } from './workflow-snapper';
 import { WorkflowStartup } from './workflow-startup';
@@ -103,11 +103,11 @@ export function createWorkflowDiagramContainer(...containerConfiguration: Contai
 export function initializeWorkflowDiagramContainer(container: Container, ...containerConfiguration: ContainerConfiguration): Container {
     return initializeDiagramContainer(
         container,
-        ...containerConfiguration,
-        directTaskEditor,
+        taskEditorModule,
         helperLineModule,
         gridModule,
         debugModule,
-        workflowDiagramModule
+        workflowDiagramModule,
+        ...containerConfiguration
     );
 }
diff --git a/examples/workflow-standalone/css/command-palette.css b/examples/workflow-standalone/css/command-palette.css
@@ -0,0 +1,59 @@
+/********************************************************************************
+ * Copyright (c) 2024 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
+ ********************************************************************************/
+.command-palette.validation.error {
+    font-size: small;
+}
+
+.command-palette.validation .validation-decorator {
+    position: absolute;
+    padding: 5px;
+    border-radius: 5px 5px 0px 0px;
+    color: white;
+    display: flex;
+    align-items: flex-start;
+    /* let error decoration fade in */
+    -webkit-animation: fadein 0.3s;
+    -moz-animation: fadein 0.3s;
+    -ms-animation: fadein 0.3s;
+    -o-animation: fadein 0.3s;
+    animation: fadein 0.3s;
+}
+
+.command-palette.validation .validation-decorator span {
+    margin-right: 5px;
+}
+
+.command-palette.validation.error input,
+.command-palette.validation.error input:focus {
+    color: var(--glsp-error-foregroundd);
+    outline-color: var(--glsp-error-foreground);
+}
+
+.command-palette.validation.error .validation-decorator.error {
+    border: 1px solid var(--glsp-error-foreground);
+    background-color: var(--glsp-error-foreground);
+}
+
+.command-palette.validation.warning input,
+.command-palette.validation.warning input:focus {
+    color: var(--glsp-warning-foreground);
+    outline-color: var(--glsp-warning-foreground);
+}
+
+.command-palette.validation.warning .validation-decorator.warning {
+    border: 1px solid var(--glsp-warning-foreground);
+    background-color: var(--glsp-warning-foreground);
+}
diff --git a/examples/workflow-standalone/src/di.config.ts b/examples/workflow-standalone/src/di.config.ts
@@ -29,6 +29,7 @@ import {
 import { Container } from 'inversify';
 import { makeLoggerMiddleware } from 'inversify-logger-middleware';
 import '../css/diagram.css';
+import { standaloneTaskEditorModule } from './features/direct-task-editing/standalone-task-editor-module';
 import { getParameters } from './url-parameters';
 export default function createContainer(options: IDiagramOptions): Container {
     const parameters = getParameters();
@@ -38,7 +39,7 @@ export default function createContainer(options: IDiagramOptions): Container {
     const container = createWorkflowDiagramContainer(
         createDiagramOptionsModule(options),
         {
-            add: accessibilityModule,
+            add: [standaloneTaskEditorModule, accessibilityModule],
             remove: toolPaletteModule
         },
         STANDALONE_MODULE_CONFIG

diff --git a/...les/workflow-standalone/src/features/direct-task-editing/standalone-task-editor-module.ts b/...les/workflow-standalone/src/features/direct-task-editing/standalone-task-editor-module.ts
@@ -0,0 +1,31 @@
+/********************************************************************************
+ * Copyright (c) 2024 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 { taskEditorModule } from '@eclipse-glsp-examples/workflow-glsp';
+import { FeatureModule, TYPES, bindAsService } from '@eclipse-glsp/client';
+import '../../../css/command-palette.css';
+import { TaskEditorKeyListener } from './task-editor-key-listener';
+
+export const standaloneTaskEditorModule = new FeatureModule(
+    (bind, unbind, isBound, rebind) => {
+        const context = { bind, unbind, isBound, rebind };
+        bindAsService(context, TYPES.KeyListener, TaskEditorKeyListener);
+    },
+    {
+        featureId: Symbol('standaloneTaskEditor'),
+        requires: taskEditorModule
+    }
+);
diff --git a/examples/workflow-standalone/src/features/direct-task-editing/task-editor-key-listener.ts b/examples/workflow-standalone/src/features/direct-task-editing/task-editor-key-listener.ts
@@ -0,0 +1,44 @@
+/********************************************************************************
+ * Copyright (c) 2024 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 { TaskEditor } from '@eclipse-glsp-examples/workflow-glsp';
+import {
+    Action,
+    EditorContextService,
+    GModelRoot,
+    KeyListener,
+    SetUIExtensionVisibilityAction,
+    matchesKeystroke
+} from '@eclipse-glsp/client';
+import { inject, injectable } from 'inversify';
+
+@injectable()
+export class TaskEditorKeyListener extends KeyListener {
+    @inject(EditorContextService)
+    protected editorContext: EditorContextService;
+
+    override keyDown(_element: GModelRoot, event: KeyboardEvent): Action[] {
+        if (matchesKeystroke(event, 'F2', 'ctrlCmd')) {
+            return [
+                SetUIExtensionVisibilityAction.create({
+                    extensionId: TaskEditor.ID,
+                    visible: true,
+                    contextElementsId: [this.editorContext.selectedElements[0].id]
+                })
+            ];
+        }
+        return [];
+    }
+}
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -47,16 +47,18 @@
   },
   "dependencies": {
     "@eclipse-glsp/sprotty": "2.2.0-next",
-    "autocompleter": "^9.1.0",
+    "autocompleter": "^9.1.2",
     "file-saver": "^2.0.5",
-    "lodash": "4.17.21"
+    "snabbdom": "~3.5.1",
+    "lodash": "4.17.21",
+    "vscode-jsonrpc": "8.2.0"
   },
   "devDependencies": {
     "@types/file-saver": "^2.0.5",
     "@types/lodash": "4.14.191"
   },
   "peerDependencies": {
-    "inversify": "^6.0.1"
+    "inversify": "~6.0.2"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/client/src/base/auto-complete/auto-complete-widget.ts b/packages/client/src/base/auto-complete/auto-complete-widget.ts
@@ -1,5 +1,5 @@
 /********************************************************************************
- * Copyright (c) 2020-2023 EclipseSource and others.
+ * Copyright (c) 2020-2024 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
@@ -290,7 +290,7 @@ export class AutoCompleteWidget {
         if (AutoCompleteValue.is(item)) {
             this.inputElement.value = item.text;
             // trigger update of suggestions with an keyup event
-            window.setTimeout(() => this.inputElement.dispatchEvent(new Event('keyup')));
+            window.setTimeout(() => this.inputElement.dispatchEvent(new Event('input')));
         } else {
             this.executeFromSuggestion(item);
             this.notifyClose('submission');

diff --git a/packages/glsp-sprotty/package.json b/packages/glsp-sprotty/package.json
@@ -37,15 +37,16 @@
     "autocompleter": "^9.1.0",
     "snabbdom": "~3.5.1",
     "sprotty": "1.2.0",
-    "sprotty-protocol": "1.2.0"
+    "sprotty-protocol": "1.2.0",
+    "vscode-jsonrpc": "8.2.0"
   },
   "devDependencies": {
     "@types/jsdom": "^21.1.3",
     "@vscode/codicons": "^0.0.25",
     "snabbdom-to-html": "^7.1.0"
   },
   "peerDependencies": {
-    "inversify": "^6.0.1"
+    "inversify": "~6.0.2"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/protocol/package.json b/packages/protocol/package.json
@@ -46,14 +46,14 @@
   },
   "dependencies": {
     "sprotty-protocol": "1.2.0",
-    "uuid": "7.0.3",
-    "vscode-jsonrpc": "^8.0.2"
+    "uuid": "~10.0.0",
+    "vscode-jsonrpc": "8.2.0"
   },
   "devDependencies": {
-    "@types/uuid": "3.4.5"
+    "@types/uuid": "~9.0.8"
   },
   "peerDependencies": {
-    "inversify": "^6.0.1"
+    "inversify": "~6.0.2"
   },
   "publishConfig": {
     "access": "public"

diff --git a/yarn.lock b/yarn.lock
@@ -1118,12 +1118,10 @@
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.5.tgz#cb6e2a691b70cb177c6e3ae9c1d2e8b2ea8cd304"
   integrity sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==
 
-"@types/[email protected]":
-  version "3.4.5"
-  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-3.4.5.tgz#d4dc10785b497a1474eae0ba7f0cb09c0ddfd6eb"
-  integrity sha512-MNL15wC3EKyw1VLF+RoVO4hJJdk9t/Hlv3rt1OL65Qvuadm4BYo6g9ZJQqoq7X8NBFSsQXgAujWciovh2lpVjA==
-  dependencies:
-    "@types/node" "*"
+"@types/uuid@~9.0.8":
+  version "9.0.8"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.8.tgz#7545ba4fc3c003d6c756f651f3bf163d8f0f29ba"
+  integrity sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==
 
 "@typescript-eslint/eslint-plugin@^6.7.5":
   version "6.21.0"
@@ -7596,11 +7594,6 @@ util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
 
-[email protected]:
-  version "7.0.3"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-7.0.3.tgz#c5c9f2c8cf25dc0a372c4df1441c41f5bd0c680b"
-  integrity sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==
-
 uuid@^3.0.1, uuid@^3.3.2:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
@@ -7616,6 +7609,11 @@ uuid@^9.0.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.1.tgz#e188d4c8853cc722220392c424cd637f32293f30"
   integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
 
+uuid@~10.0.0:
+  version "10.0.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-10.0.0.tgz#5a95aa454e6e002725c79055fd42aaba30ca6294"
+  integrity sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==
+
 v8-compile-cache-lib@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz#6336e8d71965cb3d35a1bbb7868445a7c05264bf"
@@ -7648,7 +7646,7 @@ validate-npm-package-name@^3.0.0:
   dependencies:
     builtins "^1.0.3"
 
-vscode-jsonrpc@^8.0.2:
+vscode-jsonrpc@8.2.0:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz#f43dfa35fb51e763d17cd94dcca0c9458f35abf9"
   integrity sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==