diff --git a/packages/core/src/extensions/FormattingToolbar/FormattingToolbar.ts b/packages/core/src/extensions/FormattingToolbar/FormattingToolbar.ts index 021c20ea3d..0b30d7474b 100644 --- a/packages/core/src/extensions/FormattingToolbar/FormattingToolbar.ts +++ b/packages/core/src/extensions/FormattingToolbar/FormattingToolbar.ts @@ -61,16 +61,17 @@ export const FormattingToolbarExtension = createExtension(({ editor }) => { * We want to mimic the Notion behavior of not showing the toolbar while the user is holding down the mouse button (to create a selection) */ let preventShowWhileMouseDown = false; + let preventShowWhileDragging = false; const unsubscribeOnChange = editor.onChange(() => { - if (preventShowWhileMouseDown) { + if (preventShowWhileMouseDown || preventShowWhileDragging) { return; } // re-evaluate whether the toolbar should be shown store.setState(shouldShow()); }); const unsubscribeOnSelectionChange = editor.onSelectionChange(() => { - if (preventShowWhileMouseDown) { + if (preventShowWhileMouseDown || preventShowWhileDragging) { return; } // re-evaluate whether the toolbar should be shown @@ -91,6 +92,7 @@ export const FormattingToolbarExtension = createExtension(({ editor }) => { "pointerup", () => { preventShowWhileMouseDown = false; + // We only want to re-show the toolbar if the mouse made the selection if (editor.isFocused()) { store.setState(shouldShow()); @@ -102,12 +104,27 @@ export const FormattingToolbarExtension = createExtension(({ editor }) => { dom.addEventListener( "pointercancel", () => { - preventShowWhileMouseDown = false; + preventShowWhileMouseDown = true; + }, + { signal, + capture: true }, + ); + + editor.prosemirrorView.root.addEventListener( + "dragstart", + () => { + preventShowWhileDragging = true; + store.setState(false); }, - { - signal, - capture: true, + { signal }, + ); + + editor.prosemirrorView.root.addEventListener( + "dragend", + () => { + preventShowWhileDragging = false; }, + { signal }, ); signal.addEventListener("abort", () => { diff --git a/tests/src/end-to-end/images/images.test.ts b/tests/src/end-to-end/images/images.test.ts index 7e1a862a18..bf2cf98c3f 100644 --- a/tests/src/end-to-end/images/images.test.ts +++ b/tests/src/end-to-end/images/images.test.ts @@ -2,12 +2,13 @@ import { FileChooser, expect } from "@playwright/test"; import { test } from "../../setup/setupScript.js"; import { BASE_URL, + DRAG_HANDLE_SELECTOR, H_ONE_BLOCK_SELECTOR, IMAGE_SELECTOR, } from "../../utils/const.js"; import { insertHeading } from "../../utils/copypaste.js"; import { compareDocToSnapshot, focusOnEditor } from "../../utils/editor.js"; -import { dragAndDropBlock } from "../../utils/mouse.js"; +import { dragAndDropBlock, moveMouseOverElement } from "../../utils/mouse.js"; import { executeSlashCommand } from "../../utils/slashmenu.js"; const IMAGE_UPLOAD_PATH = "src/end-to-end/images/placeholder.png"; @@ -128,4 +129,44 @@ test.describe("Check Image Block and Toolbar functionality", () => { await compareDocToSnapshot(page, "dragImage"); }); + test("Formatting toolbar should not appear when dragging image block", async ({ + page, + }) => { + await focusOnEditor(page); + await executeSlashCommand(page, "image"); + await insertHeading(page, 1); + + // move mouse over image to reveal drag handle + const dragTarget = page.locator(IMAGE_SELECTOR); + await moveMouseOverElement(page, dragTarget); + await page.waitForTimeout(100); + + await page.waitForSelector(DRAG_HANDLE_SELECTOR); + const dragHandle = page.locator(DRAG_HANDLE_SELECTOR); + const dragHandleBox = (await dragHandle.boundingBox())!; + + // start drag from the drag handle + await page.mouse.move( + dragHandleBox.x + dragHandleBox.width / 2, + dragHandleBox.y + dragHandleBox.height / 2, + { steps: 5 }, + ); + await page.mouse.down(); + await page.waitForTimeout(100); + + // move mid-drag to the heading block + const dropTarget = page.locator(H_ONE_BLOCK_SELECTOR); + const dropTargetBox = (await dropTarget.boundingBox())!; + await page.mouse.move( + dropTargetBox.x + dropTargetBox.width / 2, + dropTargetBox.y + dropTargetBox.height / 2, + { steps: 5 }, + ); + + // assert formatting toolbar is not visible during drag + const toolbar = page.locator(".bn-formatting-toolbar"); + await expect(toolbar).not.toBeVisible(); + + await page.mouse.up(); + }); });