fix(editor): should clear selection when switching doc mode (#11545)

Closes: [BS-3050](https://linear.app/affine-design/issue/BS-3050/切换模式时，清除选区)

blocksuite/affine/blocks/root/src/common-specs/index.ts

@@ -23,6 +23,7 @@ import {
 } from '@blocksuite/affine-gfx-text';
 import { NoteBlockSchema } from '@blocksuite/affine-model';
 import {
+  AutoClearSelectionService,
   DNDAPIExtension,
   DocModeService,
   EmbedOptionService,
@@ -77,6 +78,7 @@ export const CommonSpecs: ExtensionType[] = [
   DNDAPIExtension,
   FileDropExtension,
   ToolbarRegistryExtension,
+  AutoClearSelectionService,
   ...RootBlockAdapterExtensions,
   ...clipboardConfigs,
   ...EdgelessElementViews,

blocksuite/affine/shared/src/services/auto-clear-selection-service.ts

@@ -0,0 +1,12 @@
+import { LifeCycleWatcher } from '@blocksuite/std';
+
+// Auto Clear selection when switching doc mode.
+export class AutoClearSelectionService extends LifeCycleWatcher {
+  static override readonly key = 'auto-clear-selection-service';
+
+  override unmounted() {
+    if (this.std.store.readonly) return;
+
+    this.std.selection.clear();
+  }
+}

blocksuite/affine/shared/src/services/index.ts

@@ -1,3 +1,4 @@
+export * from './auto-clear-selection-service';
 export * from './block-meta-service';
 export * from './doc-display-meta-service';
 export * from './doc-mode-service';

tests/affine-local/e2e/blocksuite/toolbar.spec.ts

@@ -353,3 +353,20 @@ test('Dropdown menus should be closed automatically when toolbar is displayed',
   await expect(toolbar).toBeVisible();
   await expect(moreMenu).toBeHidden();
 });
+
+test('should clear selection when switching doc mode', async ({ page }) => {
+  await page.keyboard.press('Enter');
+
+  await page.keyboard.type('hello world');
+  await page.keyboard.press('Shift+ArrowLeft');
+  await page.keyboard.press('Shift+ArrowLeft');
+  await page.keyboard.press('Shift+ArrowLeft');
+
+  const toolbar = locateToolbar(page);
+
+  await expect(toolbar).toBeVisible();
+
+  await clickEdgelessModeButton(page);
+
+  await expect(toolbar).toBeHidden();
+});

tests/affine-local/e2e/links.spec.ts

@@ -516,7 +516,7 @@ test('the viewport should be fit when the linked document is with edgeless mode'
 
   // move viewport
   const { x, y } = noteBoundingBox;
-  await page.mouse.click(x, y);
+  await page.mouse.click(x - 10, y - 10);
   await page.keyboard.down('Space');
   await page.waitForTimeout(50);
   await page.mouse.down();
@@ -524,10 +524,12 @@ test('the viewport should be fit when the linked document is with edgeless mode'
   await page.mouse.up();
   await page.keyboard.up('Space');
 
+  await expect(note).toBeHidden();
+
   // create edgeless text
   await page.keyboard.press('t');
   await page.mouse.click(x, y);
-  await page.locator('affine-edgeless-text').waitFor({ state: 'visible' });
+  await page.waitForSelector('affine-edgeless-text');
   await page.keyboard.type('Edgeless Text');
 
   const url = new URL(page.url());