Skip to content

fix: Display drag-and-drop indicator#217

Merged
dcalhoun merged 1 commit intotrunkfrom
fix/display-drag-and-drop-indicator
Nov 5, 2025
Merged

fix: Display drag-and-drop indicator#217
dcalhoun merged 1 commit intotrunkfrom
fix/display-drag-and-drop-indicator

Conversation

@dcalhoun
Copy link
Member

@dcalhoun dcalhoun commented Nov 5, 2025

What?

Display the block insertion point indicator when dragging blocks.

Why?

Close CMM-731. Communicate the destination position for a dragged block.

How?

The popover used for this feature was hidden previously because it
disrupts tap/click events in the block inserter, requiring two taps to
insert a block.

These changes continue hiding the "add block" button popover displayed
alongside empty text blocks, but allows the insertion point indicator to
now be displayed. We disable the insertion point display from the block
inserter only by detecting touch devices (as best possible) and prevent
the relevant onMouseEnter event callback triggering the onHover
callback.

Testing Instructions

1. Drag insertion point indicator is displayed

  1. Insert several blocks, including a non-text block1.
  2. Attempt to drag and drop the non-text block.
  3. Verify the insertion point indicator (wide blue line) is displayed at the target location
    between the blocks.

2. Inserting blocks from the block inserter requires a single tap

  1. Open the editor.
  2. Focus the placeholder block to insert a Paragraph block.
  3. Tap the + button open the block inserter.
  4. Tap a block.
  5. Verify the block is inserted after a single tap. a

Accessibility Testing Instructions

N/A, no navigation changes.

Screenshots or screencast

Simulator.Screen.Recording.-.iPhone.17.-.2025-11-05.at.11.46.15.mov

Footnotes

  1. Dragging text blocks is difficult on web due to the contenteditable
    generally stealing focus and activate cursor/text actions.

@dcalhoun dcalhoun added the [Type] Enhancement A suggestion for improvement. label Nov 5, 2025
Communicate the destination position for a dragged block.

The popover used for this feature was hidden previously because it
disrupts tap/click events in the block inserter, requiring two taps to
insert a block.

These changes continue hiding the "add block" button popover displayed
alongside empty text blocks, but allows the insertion point indicator to
now be displayed. We disable the insertion point display from the block
inserter only by detecting touch devices (as best possible) and prevent
the relevant `onMouseEnter` event callback triggering the `onHover`
callback.
@dcalhoun dcalhoun force-pushed the fix/display-drag-and-drop-indicator branch from 5840a62 to 2ec7357 Compare November 5, 2025 16:55
@dcalhoun dcalhoun marked this pull request as ready for review November 5, 2025 16:56
@dcalhoun dcalhoun requested a review from kean November 5, 2025 20:42
Copy link
Contributor

@kean kean left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm surprised how drag-n-drop works in a web view, even on a device. I just want to share a couple of small observations and potential things to improve:

  • "Gallery" seems to indicate a drop target for itself
  • As you drag your finger the insertion point gets continuously animated (appear/disappear) even if there is no change
  • The insertion points disappears over some blocks. For example, if you hold your finger over core/block, the insertion point is always shown as the closest to your finger. If you do it over core/list, it disappears
  • I tried using drag-n-drop for text the same way as you can do in the Notes app, and it didn't work.
test-device.mov

@dcalhoun
Copy link
Member Author

dcalhoun commented Nov 5, 2025

Captured the reported improvement opportunities in CMM-936-linear-issue. Most, if not call, occur for cursor devices in the web editor, but worthwhile improvements nonetheless. Thank you for sharing!

@dcalhoun dcalhoun merged commit 1dc0ef3 into trunk Nov 5, 2025
11 checks passed
@dcalhoun dcalhoun deleted the fix/display-drag-and-drop-indicator branch November 5, 2025 21:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants