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

245 views Asked by At

If I drag an image from my local disk into the Lexical editor, the onDrop function can't capture the dragged image node and data. Is is a bug? If the imaged was dragged into the editor and then you drag the inserted image, the onDrop function can capture both the node and data. I want to do some node replacement here. Any help would be appreciated.


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

0

There are 0 answers