Bug: Images not moving by drag and drop inside the editor

[PauloMendees]

Lexical version: 0.12.5

Steps To Reproduce

1. Create an editor following the documentation (using react)
2. Copy the ImageNode and ImageComponent from the playground
3. Add/install the necessary dependencies of ImageComponent and ImageNode
4. Run the code

The current behavior

https://www.loom.com/share/61ac1ec806e14e14a321a7a30f217f0d?sid=f80b5254-5542-4d7e-afdb-9415cbe6de5f

The expected behavior

Be able to move images by draggind and drop

[moy2010]

The code found in the playground is not expected to be production-ready, and definitely it's not expected to cover all use cases. It's only provided as example code.

[etrepum]

Yeah I just don't think that this is implemented at all. I believe we have drag and drop to insert a new image, but not to move an existing one. A PR to implement this would be appreciated!

[vantage-ola]

hi @etrepum from the mlh fellowship fall 24' program... I would love to work on this issue. can you assign me? @PauloMendees are you working on this? so I can go ahead

[etrepum]

Assignment isn't needed to work on an issue, when you have a solution just submit a pull request

[vantage-ola]

this is my first issue I and my mates are going to work on... from my understanding, can we take the approach of writing a plugin interface or working directly on the lexical core pkg.

Can you pls give me some advice on how to approach this issue, thanks

[vantage-ola]

looking at the lexical-playground ...

this for moving the img around

      editor.registerCommand<DragEvent>(
        DRAGOVER_COMMAND,
        (event) => {
          return $onDragover(event);
        },
        COMMAND_PRIORITY_LOW,
      )

function canDropImage(event: DragEvent): boolean {
  const target = event.target;
  return !!(
    target &&
    target instanceof HTMLElement &&
    !target.closest('code, span.editor-image') &&
    target.parentElement &&
    target.parentElement.closest('div.ContentEditable__root')
  );
}

function $onDragover(event: DragEvent): boolean {
  const node = $getImageNodeInSelection();
  if (!node) {
    return false;
  }
  if (!canDropImage(event)) {
    event.preventDefault();
  }
  return true;
}

the DRAG_OVER_COMMAND already exists in lexical .... how do you suggest i make it a feature

[etrepum]

The image code is entirely within the playground, so you don't have to worry much about making it too generic or reusable outside of that context.

You can follow the Contributing guide to get set up. In this case the relevant code for image nodes and drag and drop is entirely within the playground, so you don't have to worry so much about other use cases or documentation. I don't have any expertise with this specific code so I couldn't tell you exactly what needs to be done to make it work, but I would get started by doing a careful read-through of the code and the HTML Drag and Drop API.