chore(editor): keep root slash menu open when pressing left arrow left (#10730)

Close [BS-2643](https://linear.app/affine-design/issue/BS-2643/slash-menu-左键不关闭根菜单)

blocksuite/affine/widgets/widget-slash-menu/src/slash-menu-popover.ts

@@ -216,7 +216,14 @@ export class SlashMenu extends WithDisposable(LitElement) {
           return;
         }
 
-        if (key === 'ArrowRight' || key === 'ArrowLeft' || key === 'Escape') {
+        if (key === 'Escape') {
+          this.abortController.abort();
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+
+        if (key === 'ArrowRight' || key === 'ArrowLeft') {
           return;
         }
 
@@ -542,7 +549,14 @@ export class InnerSlashMenu extends WithDisposable(LitElement) {
           event.stopPropagation();
         }
 
-        if ((key === 'ArrowLeft' || key === 'Escape') && notControlShift) {
+        if (key === 'ArrowLeft' && notControlShift) {
+          if (this.depth != 0) this.abortController.abort();
+
+          event.preventDefault();
+          event.stopPropagation();
+        }
+
+        if (key === 'Escape' && notControlShift) {
           this.abortController.abort();
 
           event.preventDefault();

blocksuite/tests-legacy/e2e/slash-menu.spec.ts

@@ -365,9 +365,7 @@ test.describe('slash menu should show and hide correctly', () => {
     await expect(subMenu).toBeHidden();
   });
 
-  test('should open and close menu when using left right arrow, Enter, Esc keys', async ({
+  test('navigate menu with left right arrow and Enter', async ({ page }) => {
-    page,
-  }) => {
     await initEmptyParagraphState(page);
     await focusRichText(page);
 
@@ -381,7 +379,11 @@ test.describe('slash menu should show and hide correctly', () => {
     await type(page, '/');
     await expect(slashMenu).toBeVisible();
     await pressArrowLeft(page);
-    await expect(slashMenu).toBeHidden();
+    await expect(
+      slashMenu,
+      'root menu should be visible when press arrow left'
+    ).toBeVisible();
+    await pressEscape(page);
 
     // Test sub menu case
     const slashItems = slashMenu.locator('icon-button');
@@ -407,9 +409,29 @@ test.describe('slash menu should show and hide correctly', () => {
     await pressEnter(page);
     await expect(slashMenu).toBeVisible();
     await expect(subMenu).toBeVisible();
+  });
 
-    await pressEscape(page);
+  test('menu should be hidden when press escape', async ({ page }) => {
+    await initEmptyParagraphState(page);
+    await focusRichText(page);
+
+    const slashMenu = page.locator('.slash-menu[data-testid=sub-menu-0]');
+
+    await type(page, '/');
     await expect(slashMenu).toBeVisible();
+    await pressEscape(page);
+    await expect(slashMenu).toBeHidden();
+
+    // go to sub menu
+    await type(page, '/');
+    await expect(slashMenu).toBeVisible();
+    await pressArrowDown(page, 4);
+    await pressArrowRight(page);
+    await expect(slashMenu).toBeVisible();
+    const subMenu = page.locator('.slash-menu[data-testid=sub-menu-1]');
+    await expect(subMenu).toBeVisible();
+    await pressEscape(page);
+    await expect(slashMenu).toBeHidden();
     await expect(subMenu).toBeHidden();
   });