From f1882061a260ef04ed2ae849abe397b48c2f5a09 Mon Sep 17 00:00:00 2001
From: fundon <fundon@pindash.io>
Date: Mon, 31 Mar 2025 11:05:01 +0000
Subject: [PATCH] fix(editor): should exit drawing tools menu when Escape is
 pressed (#11306)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes: [BS-2978](https://linear.app/affine-design/issue/BS-2978/二级菜单的激活状态错误) [BS-2977](https://linear.app/affine-design/issue/BS-2977/pen和highlighter没做esc)
---
 .../src/toolbar/components/pen/pen-tool-button.ts  |  9 +++++++++
 .../e2e/blocksuite/edgeless/highlighter.spec.ts    | 14 ++++++++++++++
 2 files changed, 23 insertions(+)

diff --git a/blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-tool-button.ts b/blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-tool-button.ts
index bcbc80bf1..f7fe3240e 100644
--- a/blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-tool-button.ts
+++ b/blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-tool-button.ts
@@ -87,6 +87,15 @@ export class EdgelessPenToolButton extends EdgelessToolbarToolMixin(
 
   override type: Pen[] = ['brush', 'highlighter'];
 
+  override firstUpdated() {
+    this.disposables.add(
+      this.gfx.tool.currentToolName$.subscribe(tool => {
+        if (this.type.map(String).includes(tool)) return;
+        this.tryDisposePopper();
+      })
+    );
+  }
+
   private _togglePenMenu() {
     if (this.tryDisposePopper()) return;
     !this.active && this.setEdgelessTool(this.pen$.peek());
diff --git a/tests/affine-local/e2e/blocksuite/edgeless/highlighter.spec.ts b/tests/affine-local/e2e/blocksuite/edgeless/highlighter.spec.ts
index 90a31219b..b3e7b9281 100644
--- a/tests/affine-local/e2e/blocksuite/edgeless/highlighter.spec.ts
+++ b/tests/affine-local/e2e/blocksuite/edgeless/highlighter.spec.ts
@@ -43,3 +43,17 @@ test('should add highlighter', async ({ page }) => {
 
   expect(defaultLineWidth).toBe('22');
 });
+
+test('should exit drawing tools menu when Escape is pressed', async ({
+  page,
+}) => {
+  await setEdgelessTool(page, 'highlighter');
+
+  const drawingToolsMenu = page.locator('edgeless-pen-menu');
+
+  await expect(drawingToolsMenu).toBeVisible();
+
+  await page.keyboard.press('Escape');
+
+  await expect(drawingToolsMenu).toBeHidden();
+});