The dropdown allows a user to select the image being shown and sets the attrs.image-uri. But I want the dropdown and the image to be completely ignored by the editor (no cursor selection, deletion, etc). And I want to be able to interact with the text node as normal (ability to split, toggle mark, etc).
I’ve tried using a custom node view but it appears that children of a contentEditable=true element is interact-able. I found that ::before and ::after elements are the exception to this and I may try to use that - but that seems limited and hacky as I would have to determine boundaries to be able to attach click / hover handlers on the dropdown.
Another approach I’ve considered is trying to overlay the dropdown and image on top of the editor so that they aren’t children of the top-level contentEditable=true element. In this case what’s the best way to determine when the top position of this node changes if the user inserts content above it?
I’ve found a few older threads about this but none seem to be conclusive:
In your custom Nodeview, you could set all your additional elements to contentEditable=false, to avoid having a visible blinking text cursor. And you just set contentDOM to define the children you want to interact as normal. About your second question, not sure whether I understood it properly, but you could use decorations to inject your dropdowns overlays, right at the custom node, then I don’t see a need to track position changes as you described it.
In your custom Nodeview, you could set all your additional elements to contentEditable=false, to avoid having a visible blinking text cursor. And you just set contentDOM to define the children you want to interact as normal.
It appears that setting the additional elements to contentEditable=false still allows them to be selectable and deletable…
About your second question, not sure whether I understood it properly, but you could use decorations to inject your dropdowns overlays, right at the custom node, then I don’t see a need to track position changes as you described it.
Same problem as above. I modified the linting example (ProseMirror lint example) to always show the arrow decorations. In Chrome at least, it’s possible to get into a very weird state by hitting backspace a few times:
If you put content into a non-editable display:block element, the browser will mostly not interact with it during editing. Inline elements in between editable content are more problematic. They will be involved in the cursor motion in the surrounding editable element.
Selecting across things is always possible when they are children of an editable node.