fix(editor): fix overlay of tool is not shown or repeated when switching tool (#11575)

Close [BS-3029](https://linear.app/affine-design/issue/BS-3029/frame-里面的-shape-没办法进入文本编辑模式)
Close [BS-3082](https://linear.app/affine-design/issue/BS-3082/按s切换至shape工具，在白板上点击会创建两个shape)
Close [BS-3091](https://linear.app/affine-design/issue/BS-3082/按s切换至shape工具，在白板上点击会创建两个shape)

## Fix Shape Tool Issues

This PR addresses several issues with the shape and mindmap tools functionality in the editor:

1. **Fix text editing after mode switching**: Resolves an issue where users couldn't edit text in shapes after switching editor modes. The fix ensures the edgeless block is properly retrieved when double-clicking on a shape.

2. **Improve tool switching behavior**: Fixes issues with tool overlays not showing or being repeated when switching between tools. This includes:
   - Properly handling tool overlay visibility
   - Ensuring only one tool is active at a time when using keyboard shortcuts
   - Adding proper cleanup when switching tools

3. **Add comprehensive tests**: Adds new test cases to verify:
   - Shape creation with keyboard shortcuts
   - Shape text editing after mode switching
   - Tool switching behavior with keyboard shortcuts

tests/blocksuite/e2e/edgeless/element-toolbar.spec.ts

@@ -1,13 +1,19 @@
 import { expect } from '@playwright/test';
 
+import { clickView } from '../utils/actions/click.js';
 import {
   addBasicRectShapeElement,
+  getSelectedBoundCount,
   locatorComponentToolbar,
   resizeElementByHandle,
   selectNoteInEdgeless,
   switchEditorMode,
   zoomResetByKeyboard,
 } from '../utils/actions/edgeless.js';
+import {
+  pressBackspace,
+  selectAllBlocksByKeyboard,
+} from '../utils/actions/keyboard.js';
 import {
   enterPlaygroundRoom,
   initEmptyEdgelessState,
@@ -87,3 +93,26 @@ test('should be hidden when resizing element', async ({ page }) => {
 
   await expect(toolbar).toBeVisible();
 });
+
+test('should only one tool active at the same time when using shortcut to switch tool', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await switchEditorMode(page);
+  await clickView(page, [0, 0]);
+  await selectAllBlocksByKeyboard(page);
+  await pressBackspace(page);
+
+  await page.keyboard.press('s');
+  await page.keyboard.press('m');
+  await page.keyboard.press('n');
+
+  await clickView(page, [100, 100]);
+  await clickView(page, [0, 0]); // click on empty space to deselect the note
+  await selectAllBlocksByKeyboard(page);
+  expect(
+    await getSelectedBoundCount(page),
+    'only a note should be created'
+  ).toBe(1);
+});

tests/blocksuite/e2e/edgeless/shape.spec.ts

@@ -9,7 +9,9 @@ import {
   changeShapeStrokeStyle,
   changeShapeStrokeWidth,
   clickComponentToolbarMoreMenuButton,
+  dragBetweenViewCoords,
   getEdgelessSelectedRect,
+  getSelectedBoundCount,
   locatorComponentToolbar,
   locatorEdgelessToolButton,
   locatorShapeStrokeStyleButton,
@@ -24,13 +26,17 @@ import {
 import {
   addBasicBrushElement,
   addBasicRectShapeElement,
+  clickView,
   copyByKeyboard,
+  dblclickView,
   dragBetweenCoords,
   enterPlaygroundRoom,
   focusRichText,
   initEmptyEdgelessState,
   pasteByKeyboard,
+  pressBackspace,
   pressEscape,
+  selectAllBlocksByKeyboard,
   type,
   waitNextFrame,
 } from '../utils/actions/index.js';
@@ -40,6 +46,7 @@ import {
   assertEdgelessNonSelectedRect,
   assertEdgelessSelectedRect,
   assertRichTexts,
+  assertSelectedBound,
 } from '../utils/asserts.js';
 import { test } from '../utils/playwright.js';
 
@@ -739,3 +746,45 @@ test.describe('shape hit test', () => {
     await assertEdgelessCanvasText(page, 'hello world');
   });
 });
+
+test('should create a shape when press s and click on canvas', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await switchEditorMode(page);
+  await clickView(page, [0, 0]);
+  await zoomResetByKeyboard(page);
+  await selectAllBlocksByKeyboard(page);
+  await pressBackspace(page);
+
+  await page.keyboard.press('s');
+  await assertEdgelessTool(page, 'shape');
+  await clickView(page, [100, 100]);
+  await selectAllBlocksByKeyboard(page);
+  expect(await getSelectedBoundCount(page)).toBe(1);
+  await assertSelectedBound(page, [100, 100, 100, 100]);
+});
+
+test('shape should be editable when re-enter canvas', async ({ page }) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await switchEditorMode(page);
+  await clickView(page, [0, 0]);
+  await zoomResetByKeyboard(page);
+  await selectAllBlocksByKeyboard(page);
+  await pressBackspace(page);
+
+  await page.keyboard.press('s');
+  await dragBetweenViewCoords(page, [0, 0], [100, 100]);
+  await dblclickView(page, [50, 50]);
+  await type(page, 'hello');
+  await expect(page.locator('edgeless-shape-text-editor')).toBeAttached();
+  await assertEdgelessCanvasText(page, 'hello');
+
+  await switchEditorMode(page);
+  await switchEditorMode(page);
+
+  await dblclickView(page, [50, 50]);
+  await expect(page.locator('edgeless-shape-text-editor')).toBeAttached();
+});