Improve slash menu desktop parity

playwright/bdd/features/editor/editor-editing.feature

@@ -132,6 +132,58 @@ Feature: Editor editing
     When I press "Escape"
     Then the slash menu is hidden
 
+  Scenario: Question mark does not open the slash menu
+    When I type "?" in the editor
+    Then the editor contains "?"
+    And the slash menu is hidden
+
+  Scenario: Slash menu desktop grouping and aliases work
+    When I open the slash menu
+    Then the slash menu group "Basic blocks" is visible
+    And the slash menu group "Media" is visible
+    And the slash menu group "Database" is visible
+    When I search the slash menu for "heading 1"
+    Then the slash menu command "heading1" is visible
+    When I press "Escape"
+    And I open the slash menu
+    And I search the slash menu for "hr"
+    Then the slash menu command "divider" is visible
+
+  Scenario: Keyboard Enter follows grouped slash menu order
+    When I open the slash menu
+    And I search the slash menu for "table"
+    Then the slash menu command "simpleTable" is visible
+    When I press "Enter"
+    Then the document has 1 "simple_table" block
+
+  Scenario: Slash trigger ignores native inputs inside editor chrome
+    When I focus a native input inside the editor
+    And I type "/" in the nested native input
+    Then the nested native input contains "/"
+    And the slash menu is hidden
+
+  Scenario: Slash menu inside simple table follows desktop restrictions
+    When I choose slash command "simpleTable"
+    And I focus simple table cell 0, 0
+    And I type slash in the editor
+    Then the slash menu command "text" is visible
+    And the slash menu command "pdf" is available
+    And the slash menu command "dateOrReminder" is available
+    And the slash menu command "simpleTable" is hidden
+    And the slash menu command "grid" is hidden
+    And the slash menu command "linkedGrid" is hidden
+    And the slash menu command "chart" is hidden
+    And the slash menu command "linkedChart" is hidden
+    And the slash menu command "outline" is hidden
+
+  Scenario: Slash menu no-result state tolerates keyboard navigation
+    When I open the slash menu
+    And I search the slash menu for "zzzz-not-found"
+    Then the slash menu has 0 visible command
+    When I press "Tab"
+    And I press "ArrowDown"
+    Then the slash menu is visible
+
   Scenario: Keyboard Enter selects a filtered slash command
     When I open the slash menu
     And I search the slash menu for "quote"

playwright/bdd/steps/editor-editing.steps.ts

@@ -199,13 +199,11 @@ When('I redo the editor change {int} times', async ({ page }, count: number) =>
 
 When('I open the slash menu', async ({ page }) => {
   await focusEditor(page);
-  await page.keyboard.type('/');
-  await expect(SlashCommandSelectors.slashPanel(page)).toBeVisible({ timeout: 10000 });
+  await openSlashMenuAtCurrentSelection(page);
 });
 
 When('I type slash in the editor', async ({ page }) => {
-  await page.keyboard.type('/');
-  await expect(SlashCommandSelectors.slashPanel(page)).toBeVisible({ timeout: 10000 });
+  await openSlashMenuAtCurrentSelection(page);
 });
 
 When('I search the slash menu for {string}', async ({ page }, searchTerm: string) => {
@@ -223,7 +221,8 @@ When('I select slash command {string}', async ({ page }, command: string) => {
 
 When('I choose slash command {string}', async ({ page }, command: string) => {
   await focusEditor(page);
-  await page.keyboard.type(`/${slashCommandSearch(command)}`, { delay: 50 });
+  await openSlashMenuAtCurrentSelection(page);
+  await page.keyboard.type(slashCommandSearch(command), { delay: 50 });
 
   const commandItem = page.getByTestId(`slash-menu-${command}`);
 
@@ -247,6 +246,40 @@ When('I press the toggle block shortcut', async ({ page }) => {
   await page.waitForTimeout(300);
 });
 
+When('I focus simple table cell {int}, {int}', async ({ page }, rowIndex: number, cellIndex: number) => {
+  const cell = page.locator(`td[data-row-index="${rowIndex}"][data-cell-index="${cellIndex}"]`).first();
+
+  await expect(cell).toBeVisible({ timeout: 10000 });
+  await cell.click({ force: true });
+  await page.waitForTimeout(300);
+});
+
+When('I focus a native input inside the editor', async ({ page }) => {
+  await EditorSelectors.slateEditor(page).evaluate((editorElement) => {
+    let wrapper = editorElement.querySelector<HTMLElement>('[data-testid="nested-native-input-wrapper"]');
+    let input = editorElement.querySelector<HTMLInputElement>('[data-testid="nested-native-input"]');
+
+    if (!wrapper || !input) {
+      wrapper = document.createElement('div');
+      wrapper.setAttribute('contenteditable', 'false');
+      wrapper.setAttribute('data-testid', 'nested-native-input-wrapper');
+      input = document.createElement('input');
+      input.setAttribute('data-testid', 'nested-native-input');
+      wrapper.appendChild(input);
+      editorElement.appendChild(wrapper);
+    }
+
+    input.value = '';
+  });
+
+  await page.getByTestId('nested-native-input').focus();
+});
+
+When('I type {string} in the nested native input', async ({ page }, text: string) => {
+  await page.keyboard.type(text);
+  await page.waitForTimeout(300);
+});
+
 Then('the editor contains {string}', async ({ page }, text: string) => {
   await expect(EditorSelectors.slateEditor(page)).toContainText(text);
 });
@@ -368,12 +401,28 @@ Then('the slash menu command {string} is visible', async ({ page }, command: str
   await expect(page.getByTestId(`slash-menu-${command}`)).toBeVisible();
 });
 
+Then('the slash menu command {string} is available', async ({ page }, command: string) => {
+  await expect(page.getByTestId(`slash-menu-${command}`)).toHaveCount(1);
+});
+
+Then('the slash menu command {string} is hidden', async ({ page }, command: string) => {
+  await expect(page.getByTestId(`slash-menu-${command}`)).toHaveCount(0);
+});
+
+Then('the slash menu group {string} is visible', async ({ page }, groupName: string) => {
+  await expect(SlashCommandSelectors.slashPanel(page).getByText(groupName, { exact: true })).toBeVisible();
+});
+
 Then('the slash menu has {int} visible command', async ({ page }, count: number) => {
   await expect(SlashCommandSelectors.slashPanel(page).locator('[data-testid^="slash-menu-"]:visible')).toHaveCount(
     count
   );
 });
 
+Then('the nested native input contains {string}', async ({ page }, value: string) => {
+  await expect(page.getByTestId('nested-native-input')).toHaveValue(value);
+});
+
 Then(
   '{string} is nested under {string} in {string}',
   async ({ page }, childText: string, parentText: string, blockType: string) => {
@@ -432,6 +481,13 @@ async function focusEditor(page: Page) {
   await page.waitForTimeout(200);
 }
 
+async function openSlashMenuAtCurrentSelection(page: Page) {
+  const slashPanel = SlashCommandSelectors.slashPanel(page);
+
+  await page.keyboard.type('/');
+  await expect(slashPanel).toBeVisible({ timeout: 10000 });
+}
+
 async function undoEditorChange(page: Page) {
   await page.keyboard.press(`${modKey}+z`);
 }

playwright/e2e/page/simple-table.spec.ts

@@ -695,6 +695,16 @@ test.describe('SimpleTable', () => {
     const slashMenu = page.getByRole('button', { name: 'Text' });
 
     await expect(slashMenu).toBeVisible({ timeout: 3000 });
+    await expect(page.getByTestId('slash-menu-simpleTable')).toHaveCount(0);
+    await expect(page.getByTestId('slash-menu-grid')).toHaveCount(0);
+    await expect(page.getByTestId('slash-menu-linkedGrid')).toHaveCount(0);
+    await expect(page.getByTestId('slash-menu-board')).toHaveCount(0);
+    await expect(page.getByTestId('slash-menu-calendar')).toHaveCount(0);
+    await expect(page.getByTestId('slash-menu-chart')).toHaveCount(0);
+    await expect(page.getByTestId('slash-menu-linkedChart')).toHaveCount(0);
+    await expect(page.getByTestId('slash-menu-outline')).toHaveCount(0);
+    await expect(page.getByTestId('slash-menu-pdf')).toHaveCount(1);
+    await expect(page.getByTestId('slash-menu-dateOrReminder')).toHaveCount(1);
 
     // Press Escape to dismiss
     await page.keyboard.press('Escape');