fix(editor): should show toolbar after mouse is released (#10698)

blocksuite/affine/blocks/block-root/src/widgets/page-dragging-area/page-dragging-area.ts

@@ -205,23 +205,21 @@ export class AffinePageDraggingAreaWidget extends WidgetComponent<
         const state = ctx.get('pointerState');
         const { button } = state.raw;
         if (button !== 0) return;
-        if (isDragArea(state)) {
-          if (!this._viewport) {
-            return;
-          }
-          this._dragging = true;
-          const { scrollLeft, scrollTop } = this._viewport;
-          this._initialScrollOffset = {
-            left: scrollLeft,
-            top: scrollTop,
-          };
-          this._initialContainerOffset = {
-            x: state.containerOffset.x,
-            y: state.containerOffset.y,
-          };
-          return true;
-        }
-        return;
+        if (!isDragArea(state)) return;
+        if (!this._viewport) return;
+
+        this._dragging = true;
+        const { scrollLeft, scrollTop } = this._viewport;
+        this._initialScrollOffset = {
+          left: scrollLeft,
+          top: scrollTop,
+        };
+        this._initialContainerOffset = {
+          x: state.containerOffset.x,
+          y: state.containerOffset.y,
+        };
+
+        return true;
       },
       { global: true }
     );

blocksuite/affine/widgets/widget-toolbar/src/toolbar.ts

@@ -274,8 +274,10 @@ export class AffineToolbarWidget extends WidgetComponent {
     const dragStart = () => flags.toggle(Flag.Hiding, true);
     const dragEnd = () => flags.toggle(Flag.Hiding, false);
     const eventOptions = { passive: false };
-    this.handleEvent('dragStart', dragStart);
-    this.handleEvent('dragEnd', dragEnd);
+    this.handleEvent('dragStart', () => {
+      dragStart();
+      host.addEventListener('pointerup', dragEnd, { once: true });
+    });
     this.handleEvent('nativeDrop', dragEnd);
     disposables.addFromEvent(host, 'dragenter', dragStart, eventOptions);
     disposables.addFromEvent(
@@ -288,9 +290,9 @@ export class AffineToolbarWidget extends WidgetComponent {
           const rect = host.getBoundingClientRect();
           if (
             x >= rect.left &&
+            x <= rect.right &&
             y >= rect.top &&
-            x <= rect.bottom &&
-            y <= rect.right
+            y <= rect.bottom
           )
             return;
           dragEnd();

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

@@ -1,5 +1,5 @@
 import { test } from '@affine-test/kit/playwright';
-import { locateFormatBar } from '@affine-test/kit/utils/editor';
+import { locateToolbar } from '@affine-test/kit/utils/editor';
 import {
   pressEnter,
   pressShiftTab,
@@ -33,16 +33,16 @@ test('heading icon should be updated after change heading level', async ({
   const paragraph = page.locator('affine-note affine-paragraph').nth(0);
 
   await selectAllByKeyboard(page);
-  const formatBar = locateFormatBar(page);
-  await formatBar.getByLabel('Conversions').click();
-  await formatBar.getByLabel('Heading 1').click();
+  const toolbar = locateToolbar(page);
+  await toolbar.getByLabel('Conversions').click();
+  await toolbar.getByLabel('Heading 1').click();
 
   await paragraph.hover();
   await expect(page.getByTestId('heading-icon-1')).toBeVisible();
 
   await selectAllByKeyboard(page);
-  await formatBar.getByLabel('Conversions').click();
-  await formatBar.getByLabel('Heading 2').click();
+  await toolbar.getByLabel('Conversions').click();
+  await toolbar.getByLabel('Heading 2').click();
 
   await paragraph.hover();
   await expect(page.getByTestId('heading-icon-1')).toBeHidden();

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

@@ -1,5 +1,6 @@
 import { test } from '@affine-test/kit/playwright';
-import { locateFormatBar } from '@affine-test/kit/utils/editor';
+import { locateToolbar } from '@affine-test/kit/utils/editor';
+import { selectAllByKeyboard } from '@affine-test/kit/utils/keyboard';
 import { openHomePage } from '@affine-test/kit/utils/load-page';
 import {
   clickNewPageButton,
@@ -34,6 +35,33 @@ test.beforeEach(async ({ page }) => {
   await waitForEmptyEditor(page);
 });
 
+test('should toggle toolbar when dragging page area', async ({ page }) => {
+  await page.keyboard.press('Enter');
+  await page.keyboard.type('Roman');
+  await selectAllByKeyboard(page);
+
+  const toolbar = locateToolbar(page);
+
+  await expect(toolbar).toBeVisible();
+  await expect(toolbar).toBeInViewport();
+
+  const paragraph = page.locator('affine-note affine-paragraph').nth(0);
+  const bounds = await paragraph.boundingBox();
+
+  expect(bounds).toBeTruthy();
+  const { x, y, width } = bounds!;
+
+  await page.mouse.move(x + width + 10, y - 10, { steps: 2 });
+  await page.mouse.down();
+  await page.mouse.move(x + width - 10, y + 10, { steps: 2 });
+
+  await expect(toolbar).toBeHidden();
+
+  await page.mouse.up();
+
+  await expect(toolbar).toBeVisible();
+});
+
 test.describe('Formatting', () => {
   test('should change text color', async ({ page }) => {
     await page.keyboard.press('Enter');
@@ -43,12 +71,12 @@ test.describe('Formatting', () => {
     await page.keyboard.press('Shift+ArrowLeft');
     await page.keyboard.press('Shift+ArrowLeft');
 
-    const formatBar = locateFormatBar(page);
-    const highlightButton = formatBar.locator('affine-highlight-duotone-icon');
+    const toolbar = locateToolbar(page);
+    const highlightButton = toolbar.locator('affine-highlight-duotone-icon');
 
     await highlightButton.click();
 
-    const fgGreenButton = formatBar.locator('[data-testid="foreground-green"]');
+    const fgGreenButton = toolbar.locator('[data-testid="foreground-green"]');
     await fgGreenButton.click();
     const fgColor = await fgGreenButton
       .locator('affine-text-duotone-icon')
@@ -73,12 +101,12 @@ test.describe('Formatting', () => {
     await page.keyboard.press('Shift+ArrowLeft');
     await page.keyboard.press('Shift+ArrowLeft');
 
-    const formatBar = locateFormatBar(page);
-    const highlightButton = formatBar.locator('affine-highlight-duotone-icon');
+    const toolbar = locateToolbar(page);
+    const highlightButton = toolbar.locator('affine-highlight-duotone-icon');
 
     await highlightButton.click();
 
-    const fgGreenButton = formatBar.locator('[data-testid="foreground-green"]');
+    const fgGreenButton = toolbar.locator('[data-testid="foreground-green"]');
     await fgGreenButton.click();
 
     await page.waitForTimeout(200);
@@ -104,9 +132,7 @@ test.describe('Formatting', () => {
     await highlightButton.click();
 
     const yellow = 'var(--affine-text-highlight-yellow)';
-    const bgYellowButton = formatBar.locator(
-      '[data-testid="background-yellow"]'
-    );
+    const bgYellowButton = toolbar.locator('[data-testid="background-yellow"]');
     await bgYellowButton.click();
 
     const textSpan2 = paragraph

tests/kit/src/utils/editor.ts

@@ -64,7 +64,7 @@ export async function focusDocTitle(page: Page, editorIndex = 0) {
 }
 
 // ================== Page ==================
-export function locateFormatBar(page: Page, editorIndex = 0) {
+export function locateToolbar(page: Page, editorIndex = 0) {
   return locateEditorContainer(page, editorIndex).locator(
     'affine-toolbar-widget editor-toolbar'
   );