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

Author: miadnguyen

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

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