Hey, I am trying to draw widget decorations at the same position where the caret is. The result so far is that some times the caret isn’t drawn at all and sometimes it’s drawn either to the right or the left of the widget decoration. Is there a way to control on which side the caret will be shown? Would it be an option to create a plugin that draws a fake caret, then control whether it’s on the right or left by the order of the plugins, and try to hide the real caret by means of CSS (not possible on some browsers still, AFAIK)?
The side option to a widget should control how it is rendered relative to the cursor when the cursor is at the same position. Are you using version 0.22+? It may be that there’s still a bug in this feature.
Invisible cursors are usually browser bugs (verify that the DOM selection is what it should be – if it isn’t that may be a ProseMirror bug, but I’ve often seen cursors vanish next to uneditable widgets). You can sometimes work around that with CSS tweaks, but I don’t have a ready-made recipe to solve it in generally.
1 Like
I tried the side option, but it seemed to not make much of a difference. The caret would be displayed on either side of the decoration depending on which side I navigated there with the arrow keys with side===1.
I am using the newest 0.22.x packages published to npm. I believe prosemirror-transform is just used as a dependency of some of the packages I depend on. I don’t import it directly anywhere, so I don’t think I get the last patch update of that package, but all the other ones should be up to date.
Invisible cursors are usually browser bugs (verify that the DOM selection is what it should be – if it isn’t that may be a ProseMirror bug, but I’ve often seen cursors vanish next to uneditable widgets). You can sometimes work around that with CSS tweaks, but I don’t have a ready-made recipe to solve it in generally.
Interesting. This was also happening to us at times. One thing to try if the caret isn’t shown is to find the coordinates (view.coordsAtPos(view.state.selection.from) or window.getSelection().getRangeAt(0).getBoundingClientRect()) and then draw a caret there manually by placing it in another element on top of the editing text and positioning with CSS. But that would likely only make sense if one can make sure that the caret never shows. Has anyone here experimented with this? Did it work?