fix: Drag & drop of blocks without inline content opens formatting toolbar (BLO-1116) (#2628)

* fix: move an image doesn't work with drag and drop (#2603)

* Removed redundant check in formatting toolbar `shouldShow`

* Moved/refactored tests

* Implemented PR feedback

---------

Co-authored-by: Matthew Lipski <matthewlipski@gmail.com>

Author: miadnguyen

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", () => {

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();
+  });
 });

…-snapshots/dragImage-chromium-linux.json …-snapshots/dragImage-chromium-linux.jsontests/src/end-to-end/images/images.test.ts-snapshots/dragImage-chromium-linux.json renamed to tests/src/end-to-end/dragdrop/dragdrop.test.ts-snapshots/dragImage-chromium-linux.json tests/src/end-to-end/images/images.test.ts-snapshots/dragImage-chromium-linux.json renamed to tests/src/end-to-end/dragdrop/dragdrop.test.ts-snapshots/dragImage-chromium-linux.json

@@ -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");
-  });
 });