Bug: Can't capture the image node and data when dragging an image into the editor
- 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
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