Hello there. After reading the new cursor/caret design from Bike (link), I try to implement it with ProseMirror. There is my result: GitHub - ocavue/prosemirror-virtual-cursor
When the cursor if right between two different marks, it will show a little tail to indicate the mark of following input. Pressing arrow key can change the direction of the tail.
Under the hood, I hide the native cursor and use Decoration.widget to insert a <span> element to the cursor position. This approach have some issues since the <span> element break the word. Particularly, I found these two issues quite difficult:
Another approach would be calculate the coordinate of the cursor and put an element at that coordinate. By doing that, the DOM structure inside the paragraph doesn’t change, so these issues above should be fixed. However, this approach would be more difficult, since I need to ensure that the virtual cursor is at the correct coordinate. For example (1) the cursor position will change after the browser window is resized; (2) the cursor height is different in different elements.
I would appreciate to hear some advices from the community.