diff --git a/packages/core/src/extensions/FormattingToolbar/FormattingToolbar.ts b/packages/core/src/extensions/FormattingToolbar/FormattingToolbar.ts index 021c20ea3d..84524eee2e 100644 --- a/packages/core/src/extensions/FormattingToolbar/FormattingToolbar.ts +++ b/packages/core/src/extensions/FormattingToolbar/FormattingToolbar.ts @@ -1,4 +1,4 @@ -import { NodeSelection, TextSelection } from "prosemirror-state"; +import { TextSelection } from "prosemirror-state"; import { createExtension, @@ -16,15 +16,6 @@ export const FormattingToolbarExtension = createExtension(({ editor }) => { return false; } - // Don't show if a block with inline content is selected. - if ( - tr.selection instanceof NodeSelection && - (tr.selection.node.type.spec.content === "inline*" || - tr.selection.node.firstChild?.type.spec.content === "inline*") - ) { - return false; - } - // Don't show if the selection is a text selection but contains no text. if ( tr.selection instanceof TextSelection && @@ -61,16 +52,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 +83,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 +95,26 @@ export const FormattingToolbarExtension = createExtension(({ editor }) => { dom.addEventListener( "pointercancel", () => { - preventShowWhileMouseDown = false; + preventShowWhileMouseDown = true; }, - { - signal, - capture: true, + { signal, capture: true }, + ); + + editor.prosemirrorView.root.addEventListener( + "dragstart", + () => { + preventShowWhileDragging = true; + store.setState(false); + }, + { signal }, + ); + + editor.prosemirrorView.root.addEventListener( + "dragend", + () => { + preventShowWhileDragging = false; }, + { signal }, ); signal.addEventListener("abort", () => { diff --git a/tests/src/end-to-end/dragdrop/dragdrop.test.ts b/tests/src/end-to-end/dragdrop/dragdrop.test.ts index aad78548c7..45a3e4a3db 100644 --- a/tests/src/end-to-end/dragdrop/dragdrop.test.ts +++ b/tests/src/end-to-end/dragdrop/dragdrop.test.ts @@ -1,14 +1,17 @@ +import { expect } from "@playwright/test"; import { test } from "../../setup/setupScript.js"; import { BASE_URL, H_ONE_BLOCK_SELECTOR, H_THREE_BLOCK_SELECTOR, H_TWO_BLOCK_SELECTOR, + IMAGE_SELECTOR, PARAGRAPH_SELECTOR, } from "../../utils/const.js"; import { insertHeading, insertParagraph } from "../../utils/copypaste.js"; import { compareDocToSnapshot, focusOnEditor } from "../../utils/editor.js"; import { dragAndDropBlock } from "../../utils/mouse.js"; +import { executeSlashCommand } from "../../utils/slashmenu.js"; test.describe.configure({ mode: "serial" }); @@ -80,4 +83,42 @@ test.describe("Check Block Dragging Functionality", () => { await compareDocToSnapshot(page, "dragdropnested"); }); + + test("Should be able to drag image", async ({ page, browserName }) => { + test.skip( + browserName === "firefox", + "Playwright doesn't correctly simulate drag events in Firefox.", + ); + await focusOnEditor(page); + await executeSlashCommand(page, "image"); + + await insertHeading(page, 1); + + const dragTarget = await page.locator(IMAGE_SELECTOR); + const dropTarget = await page.locator(H_ONE_BLOCK_SELECTOR); + await page.pause(); + await dragAndDropBlock(page, dragTarget, dropTarget, false); + + await compareDocToSnapshot(page, "dragImage"); + }); + + test("Formatting toolbar should not appear when dragging image block", async ({ + page, + browserName, + }) => { + test.skip( + browserName === "firefox", + "Playwright doesn't correctly simulate drag events in Firefox.", + ); + await focusOnEditor(page); + await executeSlashCommand(page, "image"); + await insertHeading(page, 1); + + const dragTarget = page.locator(IMAGE_SELECTOR); + const dropTarget = page.locator(H_ONE_BLOCK_SELECTOR); + await dragAndDropBlock(page, dragTarget, dropTarget, false); + + const toolbar = page.locator(".bn-formatting-toolbar"); + await expect(toolbar).not.toBeVisible(); + }); }); diff --git a/tests/src/end-to-end/images/images.test.ts-snapshots/dragImage-chromium-linux.json b/tests/src/end-to-end/dragdrop/dragdrop.test.ts-snapshots/dragImage-chromium-linux.json similarity index 100% rename from tests/src/end-to-end/images/images.test.ts-snapshots/dragImage-chromium-linux.json rename to tests/src/end-to-end/dragdrop/dragdrop.test.ts-snapshots/dragImage-chromium-linux.json diff --git a/tests/src/end-to-end/images/images.test.ts-snapshots/dragImage-firefox-linux.json b/tests/src/end-to-end/dragdrop/dragdrop.test.ts-snapshots/dragImage-firefox-linux.json similarity index 100% rename from tests/src/end-to-end/images/images.test.ts-snapshots/dragImage-firefox-linux.json rename to tests/src/end-to-end/dragdrop/dragdrop.test.ts-snapshots/dragImage-firefox-linux.json diff --git a/tests/src/end-to-end/images/images.test.ts-snapshots/dragImage-webkit-linux.json b/tests/src/end-to-end/dragdrop/dragdrop.test.ts-snapshots/dragImage-webkit-linux.json similarity index 100% rename from tests/src/end-to-end/images/images.test.ts-snapshots/dragImage-webkit-linux.json rename to tests/src/end-to-end/dragdrop/dragdrop.test.ts-snapshots/dragImage-webkit-linux.json diff --git a/tests/src/end-to-end/images/images.test.ts b/tests/src/end-to-end/images/images.test.ts index 7e1a862a18..b4c7dd2910 100644 --- a/tests/src/end-to-end/images/images.test.ts +++ b/tests/src/end-to-end/images/images.test.ts @@ -1,13 +1,7 @@ import { FileChooser, expect } from "@playwright/test"; import { test } from "../../setup/setupScript.js"; -import { - BASE_URL, - H_ONE_BLOCK_SELECTOR, - IMAGE_SELECTOR, -} from "../../utils/const.js"; -import { insertHeading } from "../../utils/copypaste.js"; +import { BASE_URL } from "../../utils/const.js"; import { compareDocToSnapshot, focusOnEditor } from "../../utils/editor.js"; -import { dragAndDropBlock } from "../../utils/mouse.js"; import { executeSlashCommand } from "../../utils/slashmenu.js"; const IMAGE_UPLOAD_PATH = "src/end-to-end/images/placeholder.png"; @@ -115,17 +109,4 @@ test.describe("Check Image Block and Toolbar functionality", () => { await compareDocToSnapshot(page, "deleteImage"); }); - test("Should be able to drag image", async ({ page }) => { - await focusOnEditor(page); - await executeSlashCommand(page, "image"); - - await insertHeading(page, 1); - - const dragTarget = await page.locator(IMAGE_SELECTOR); - const dropTarget = await page.locator(H_ONE_BLOCK_SELECTOR); - await page.pause(); - await dragAndDropBlock(page, dragTarget, dropTarget, false); - - await compareDocToSnapshot(page, "dragImage"); - }); });