Notebook: Escaping code completion pop-up disables cell edit mode

.github/workflows/playwright.yml

@@ -67,4 +67,4 @@ jobs:
           path: |
             examples/playwright/test-results/
             examples/playwright/playwright-report/
-          retention-days: 2
+          retention-days: 7

examples/playwright/src/tests/theia-notebook-editor.test.ts

@@ -14,7 +14,7 @@
 // SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
 // *****************************************************************************
 
-import { PlaywrightWorkerArgs, expect, test } from '@playwright/test';
+import { Locator, PlaywrightWorkerArgs, expect, test } from '@playwright/test';
 import { TheiaApp } from '../theia-app';
 import { TheiaAppLoader, TheiaPlaywrightTestConfig } from '../theia-app-loader';
 import { TheiaNotebookCell } from '../theia-notebook-cell';
@@ -188,8 +188,47 @@ test.describe('Theia Notebook Cell interaction', () => {
         expect(await cell.executionCount()).toBe('3');
     });
 
+    test('Check arrow up and down works', async () => {
+        const cell = await firstCell(editor);
+        await editor.addCodeCell();
+        const secondCell = (await editor.cells())[1];
+        // second cell is selected after creation
+        expect(await secondCell.isSelected()).toBe(true);
+        // select cell above
+        await editor.page.keyboard.type('second cell');
+        await secondCell.editor.page.keyboard.press('ArrowUp');
+        expect(await cell.isSelected()).toBe(true);
+
+        // select cell below
+        await cell.app.page.keyboard.press('ArrowDown');
+        expect(await secondCell.isSelected()).toBe(true);
+    });
+
+    test('Check arrow-up/arrow-down/escape with code completion', async () => {
+        await editor.addMarkdownCell();
+        const mdCell = (await editor.cells())[1];
+        await mdCell.addEditorText('h');
+
+        await editor.page.keyboard.press('Control+Space'); // call CC (suggestWidgetVisible=true)
+        await ensureCodeCompletionVisible(mdCell.editor.locator);
+        await editor.page.keyboard.press('Escape');  // close CC
+        // check the same cell still selected and not lose the edit mode
+        expect(await mdCell.editor.isFocused()).toBe(true);
+
+        await editor.page.keyboard.press('Control+Space'); // call CC (suggestWidgetVisible=true)
+        await ensureCodeCompletionVisible(mdCell.editor.locator);
+        await editor.page.keyboard.press('ArrowUp'); // select next entry in CC list
+        await editor.page.keyboard.press('Enter'); // apply completion
+        // check the same cell still selected and not the second one due to 'ArrowDown' being pressed
+        expect(await mdCell.isSelected()).toBe(true);
+
+    });
 });
 
+async function ensureCodeCompletionVisible(parent: Locator): Promise<void> {
+    await parent.locator('.monaco-editor .suggest-widget').waitFor({ timeout: 5000 });
+}
+
 async function firstCell(editor: TheiaNotebookEditor): Promise<TheiaNotebookCell> {
     return (await editor.cells())[0];
 }

examples/playwright/src/theia-monaco-editor.ts

@@ -104,6 +104,19 @@ export class TheiaMonacoEditor extends TheiaPageObject {
         await this.page.keyboard.type(text);
     }
 
+    /**
+     * @returns `true` if the editor is focused, `false` otherwise.
+     */
+    async isFocused(): Promise<boolean> {
+        const viewElement = await this.viewElement();
+        const monacoEditor = await viewElement?.$('div.monaco-editor');
+        if (!monacoEditor) {
+            throw new Error('Couldn\'t retrieve monaco editor element.');
+        }
+        const editorClass = await monacoEditor.getAttribute('class');
+        return editorClass?.includes('focused') ?? false;
+    }
+
     protected replaceEditorSymbolsWithSpace(content: string): string | Promise<string | undefined> {
         // [ ] &nbsp; => \u00a0 -- NO-BREAK SPACE
         // [·] &middot; => \u00b7 -- MIDDLE DOT

examples/playwright/src/theia-notebook-cell.ts

@@ -177,6 +177,14 @@ export class TheiaNotebookCell extends TheiaPageObject {
         return text?.substring(1, text.length - 1);
     }
 
+    /**
+     * @returns `true` if the cell is selected (blue vertical line), `false` otherwise.
+     */
+    async isSelected(): Promise<boolean> {
+        const markerClass = await this.locator.locator('div.theia-notebook-cell-marker').getAttribute('class');
+        return markerClass?.includes('theia-notebook-cell-marker-selected') ?? false;
+    }
+
     /**
      * @returns The output text of the cell.
      */

packages/notebook/src/browser/contributions/notebook-cell-actions-contribution.ts

@@ -516,7 +516,7 @@ export class NotebookCellActionContribution implements MenuContribution, Command
             {
                 command: NotebookCellCommands.STOP_EDIT_COMMAND.id,
                 keybinding: 'esc',
-                when: `editorTextFocus && ${NOTEBOOK_EDITOR_FOCUSED}`,
+                when: `editorTextFocus && ${NOTEBOOK_EDITOR_FOCUSED} && !suggestWidgetVisible`,
             },
             {
                 command: NotebookCellCommands.EXECUTE_SINGLE_CELL_COMMAND.id,