facebook / facebook/lexical

Bug: Can't capture the image node and data when dragging an image into the editor

Open
#5,265 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
23.9k
Forks
2.2k
Avg merge
1d 16h
Merged PRs (30d)
61

Description

```
function onDrop(event: DragEvent, editor: LexicalEditor): boolean {
const node = getImageNodeInSelection();
console.log("[onDrop] Image node : ", node); // node was not captured.
if (!node) {
return false;
}
const data = getDragImageData(event);
console.log("onDrop data: ", data); // data was not captured.

if (!data) {
return false;
}
event.preventDefault();
if (canDropImage(event)) {
console.log("canDropImage event: ", event);
const range = getDragSelection(event);
node.remove();

const rangeSelection = $createRangeSelection();
if (range !== null && range !== undefined) {
rangeSelection.applyDOMRange(range);
}

$setSelection(rangeSelection);
editor.dispatchCommand(INSERT_IMAGE_COMMAND, data);
}
return true;
}
```
## Lexical version: 0.12.4
## The current behavior
Can't capture the dragged image node and data
## The expected behavior
Image node and data get captured.

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the drag-and-drop behavior on Lexical 0.12.4 from the onDrop function shown in the report. Trace getImageNodeInSelection and getDragImageData, then verify that the dragged image node and data are available and that the expected image insertion path completes.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.