[lexical-clipboard][lexical-rich-text][lexical-plain-text] Bug Fix: Drag-and-drop within the same block

[etrepum]

Description

Dragging selected text inside a single block (or within a single TextNode) did not move the text to the drop location — it was typically inserted at the beginning of the block instead. Cross-block drags appeared to work by accident.

Root cause. DROP_COMMAND in registerRichText returned true for range selections without calling preventDefault, so the browser's default drop handling ran. The beforeinput/insertFromDrop path in LexicalEvents only calls selection.applyDOMRange(targetRange) when the selection is collapsed, so with a range selection still active from the drag source the insertion landed on a stale/incorrect selection. registerPlainText disabled drag-and-drop entirely.

Fix. A new shared helper in @lexical/clipboard, exposed as $handleRichTextDrop and $handlePlainTextDrop, implements text drag-and-drop:

• Bails for drags with no application/x-lexical-drag marker (i.e. external drags), letting the browser's native drag-and-drop flow and Lexical's existing beforeinput insertFromDrop handler take over.
• Otherwise, resolves the drop point from event.clientX/Y via caretFromPoint to a Lexical PointCaret, then splits at that caret with $splitAtPointCaretNext to obtain a stable NodeCaret (an element-point boundary between two siblings) that survives any text-content mutation in its siblings — the same code path handles same-text-node, cross-text-node, cross-block, and element-point drops without bespoke offset adjustments.
• For drops from a non-collapsed RangeSelection in the same editor, removes the dragged range and inserts the DataTransfer payload at the stable drop caret. Drops that land strictly inside the source range are a no-op (single $comparePointCaretNext check against the source's anchor/focus).
• Calls event.preventDefault() on the handled paths so the browser doesn't also run its own drop behavior.

registerRichText wires $handleRichTextDrop; registerPlainText wires $handlePlainTextDrop and no longer cancels DRAGSTART_COMMAND.

Preserving non-text nodes. DRAGSTART_COMMAND in rich-text now populates the DataTransfer via setLexicalClipboardDataTransfer + $getClipboardDataFromSelection, so DecoratorNodes (images, etc.) and formatting survive the drop instead of being downgraded to text/html.

Cross-editor drags. $writeDragSourceToDataTransfer writes a {editorKey} marker into application/x-lexical-drag on DRAGSTART (called from both rich-text and plain-text). On DROP, when the marker's editor key differs from the destination editor's, the destination's handler:

1. Inserts the payload at the drop caret.
2. Looks up the source editor's root element in the same document via [data-lexical-editor="true"] + __lexicalEditor.getKey().
3. Dispatches a synthetic InputEvent('beforeinput', {inputType: 'deleteByDrag'}) at that root. This is what the browser would have fired natively if we hadn't preventDefaulted the drop — the browser's own deleteByDrag isn't reliable when the source is a nested contenteditable of the destination (e.g. an image caption inside the main editor). The source editor's own beforeinput handler runs the deletion through its own REMOVE_TEXT_COMMAND against its own current selection (Lexical preserves the source selection across the drag).

The synthetic-event approach means cross-editor drag works correctly even when two different versions of Lexical are loaded on the same page — there's no shared module-level state and no need for the destination's $createRangeSelection / $getSelection to interoperate with the source's. The marker carries only the editor key; the source's selection is read live from the source editor at deletion time, so there's no stale-node-key risk.

Focus. $handleBeforeInput in LexicalEvents now adds SKIP_SELECTION_FOCUS_TAG to the update when it dispatches REMOVE_TEXT_COMMAND for deleteByDrag, so the source editor's reconciliation doesn't pull DOM focus or the document's selection back to itself after the drag-out. The destination editor keeps focus without any explicit re-focus call.

Playground. FloatingTextFormatToolbarPlugin hides its popup while a drag is in progress (tracked via dragstart / dragend / drop at the document level) so the toolbar doesn't sit on top of the drag image or the drop target and doesn't re-render from selectionchange during the drag.

Closes #353

Test plan

Unit tests in packages/lexical/src/__tests__/unit/HandleTextDrop.test.ts cover same-block forward/backward moves, drops inside the source range (single-node and multi-node), cross-TextNode inserts, the external-drag bail, backward selections, DecoratorNode preservation, and the cross-editor dispatch contract.

E2E spec in packages/lexical-playground/__tests__/e2e/TextDragDrop.spec.mjs exercises the same-block cases for both rich-text and plain-text by dispatching synthesized DragEvents (Playwright's mouse API does not fire native drag events).

Manual playground repros confirm: same-block drag moves the text correctly, an image (DecoratorNode) survives a drag-and-drop, and a caption-to-main-editor drag cuts from the caption and pastes into main with focus ending in main.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
lexical	Ready	Preview, Comment	Apr 22, 2026 5:00pm
lexical-playground	Ready	Preview, Comment	Apr 22, 2026 5:00pm