fix(editor): edgeless selected rect should be below the edgeless toolbar (#12370)

Close [BS-3512](https://linear.app/affine-design/issue/BS-3512/bug-note-选中状态会穿透-toolbar)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **Tests**
  - Added a new end-to-end test to verify that selection handles are visually and interactively layered beneath the edgeless element toolbar in the editor.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/all/src/extensions/view.ts

@@ -102,9 +102,9 @@ export function getInternalViewExtensions() {
     InlinePresetViewExtension,
 
     // Widget
+    // order will affect the z-index of the widget
     DragHandleViewExtension,
     EdgelessAutoConnectViewExtension,
-    EdgelessToolbarViewExtension,
     FrameTitleViewExtension,
     KeyboardToolbarViewExtension,
     LinkedDocViewExtension,
@@ -118,6 +118,7 @@ export function getInternalViewExtensions() {
     EdgelessSelectedRectViewExtension,
     EdgelessDraggingAreaViewExtension,
     NoteSlicerViewExtension,
+    EdgelessToolbarViewExtension,
 
     // Fragment
     DocTitleViewExtension,

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

@@ -17,6 +17,7 @@ import {
   initEmptyEdgelessState,
   initThreeParagraphs,
   pressEnter,
+  pressEscape,
   waitNextFrame,
 } from '../../utils/actions/index.js';
 import {
@@ -25,6 +26,7 @@ import {
   assertEdgelessRemoteSelectedRect,
   assertEdgelessSelectedModelRect,
   assertEdgelessSelectedRect,
+  assertRectExist,
   assertSelectionInNote,
 } from '../../utils/asserts.js';
 import { test } from '../../utils/playwright.js';
@@ -464,3 +466,54 @@ test('should select shapes while moving selection', async ({ page }) => {
 
   await assertEdgelessSelectedRect(page, [100, 98, 212, 204]);
 });
+
+test('should the selected rect be below the edgeless element toolbar', async ({
+  page,
+}) => {
+  await enterPlaygroundRoom(page);
+  await initEmptyEdgelessState(page);
+  await switchEditorMode(page);
+
+  const toolbar = page.locator('.edgeless-toolbar-container');
+  const toolbarRect = await toolbar.boundingBox();
+  assertRectExist(toolbarRect);
+
+  await actions.addNote(page, 'hello', toolbarRect.x, toolbarRect.y - 20);
+  await pressEscape(page, 3);
+
+  await page.mouse.click(toolbarRect.x, toolbarRect.y - 20);
+
+  const selectedRect = page.locator('.affine-edgeless-selected-rect');
+  await expect(selectedRect).toBeVisible();
+
+  const brHandle = selectedRect.getByLabel('bottom-right');
+  const brHandleRect = await brHandle.boundingBox();
+  assertRectExist(brHandleRect);
+
+  // make sure the position of br handle is inside the toolbar
+  expect(
+    brHandleRect.x > toolbarRect.x &&
+      brHandleRect.x < toolbarRect.x + toolbarRect.width &&
+      brHandleRect.y > toolbarRect.y &&
+      brHandleRect.y < toolbarRect.y + toolbarRect.height
+  ).toBe(true);
+
+  const brHandleCenter = [
+    brHandleRect.x + brHandleRect.width / 2,
+    brHandleRect.y + brHandleRect.height / 2,
+  ];
+
+  // get element from the center of br handle
+  const topElement = await page.evaluate(brHandleCenter => {
+    const element = document.elementFromPoint(
+      brHandleCenter[0],
+      brHandleCenter[1]
+    );
+    if (!element) {
+      throw new Error('element not found');
+    }
+    return element.tagName;
+  }, brHandleCenter);
+
+  expect(topElement).toBe('EDGELESS-TOOLBAR-WIDGET');
+});