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-左键不关闭根菜单)
This commit is contained in:
L-Sun
2025-03-10 13:36:37 +00:00
parent c45abb013a
commit 027d3a51dc
2 changed files with 43 additions and 7 deletions
@@ -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();
+27 -5
View File
@@ -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 ({
page,
}) => {
test('navigate menu with left right arrow and Enter', async ({ 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();
});