Question about drop cursor's position

1

With this example (https://prosemirror.net/examples/upload/), If I attempt to drag and drop an image onto a drop cursor in the editor, and the editor content contains only nodes like block images without any text, then state.selection consistently returns from:0 .

However, if there is text present in the editor, state.selection consistently provides the position of the last text cursor, whereas what I had anticipated was the position of the drop cursor.

I attempted to understand why this was happening and noticed that when I dropped an image onto the drop cursor, the console.log(state.selection) indicated that the selection was not a ‘drop cursor’ but rather a ‘node’.

_NodeSelection {$anchor: _ResolvedPos, $head: _ResolvedPos, ranges: Array(1), node: _Node}
  ...
  [[Prototype]]: Selection
  jsonID: "node"
  ...

Monosnap screencast 2023-10-05 17-48-22

So, I have two questions:

  1. Why is the selection not identified as a dropcursor like gapcursor but as a node? I expected it to be the dropcursor.
  2. How can I obtain the correct position of the drop cursor?
2

The drop cursor has nothing to do with state.selection. It is just an indicator displayed to show where the dragged content will be dropped.

There is currently no way to find the position of the drop cursor.

4

Then, no way to insert an image into the drop cursor? Is there any way to use a logic similar to drag and drop nodes for change position with drop cursor? @marijn thank you for your support :smiling_face_with_tear:

5

ondragstart:

e.dataTransfer.setData("text/html", `<img src='xxx.png'/>`)

the html will insert into the pos cursor drop

@emewjin

6 
const dragElement = document.createElement('img');
evt.dataTransfer.setDragImage(dragElement, 0, 0);

this will show the drop cursor with image

7

@marijn when we drag over listItems that are positioned with margin the drop cursor’s position fails to reflect the actual position unless we remove all margin.

Is that something that’s addressable?