I am experimenting with customizing a mark schema item and am running into an issue when rendering nested elements with holes. The goal is to, as simply as possible, render an image when a certain URL is detected (but for the example’s sake, the same image is always rendered.)
In the mock example above, the problem is that cursor won’t traverse through the nested elements, and reverts back to just before the nested link schema item. To demonstrate this just try pressing the right arrow key from before the link item. In addition, even pressing the down arrow key doesn’t go to the next line but has an issue with selection state, and the cursor still refuses to go past the nested schema.
Is this supposed to be supported?
Let me know if I should post an issue on the official github repo. Much appreciated.
Not really. The problem is that the browser will treat the image as creating an additional cursor position, whereas ProseMirror doesn’t reserve extra position offsets for the boundaries of marks. So there’ll be a mismatch between the browser’s cursor motion (which thinks it’s made progress by skipping over the image) and ProseMirror’s normalization of the selection (which still thinks the cursor is in the same place and puts it back in the canonical DOM position for that place).
It might be possible to fix this by having the pre-cursor-motion selection normalization in view/src/capturekeys.js handle this situation (skipping over the image before the browser’s cursor motion takes effect), but I don’t expect to find time to work on that myself in the near future.
Thanks for the speedy reply. I’m nearly sure I can figure out a work around / uglier solution by using nested elements but instead of using <img>, one using ::before to add the image via css. I’ll post here if that solution works (I think I’ve seen it done somewhere else.)
