In our app we have
- an inline mark,
- a widget decoration that is essentially a span with an svg inside.
We’ve discovered that having the decoration inside the mark that is in the middle of a word changes the word break behavior.
Codesandbox: https://codesandbox.io/p/sandbox/gallant-bose-dyyssc
Demo: https://dyyssc.csb.app/
It’s not really a ProseMirror problem - it is reproduced with just HTML and CSS.
We’ve found out that using position: absolute on the widget decoration makes word breaks work perfectly. But it introduces a different issue with how Backspace works when editing text in a ProseMirror editor:
- When the mark with the decoration is on the right side of the cursor, and the last character of a paragraph is on the left side, pressing Backspace creates a new line above the paragraph.
Codesandbox: https://codesandbox.io/p/sandbox/gracious-cloud-jnxr5g
Demo: https://jnxr5g.csb.app/
(Chrome MacOS Version 145.0.7632.117)
It doesn’t matter if position: absolute is used on the widget root element, or somewhere inside. The same thing happens if instead of position: absolute we use position: fixed with a new fixed positioning containing block. Only changing the position back to static makes Backspace work normally again.
The only thing left for us is to try and write a ProseMirror plugin that will inspect transactions and try and figure out those unexpected newline cases and fix them on the fly. But a combination of a mark and a decoration seems like a common one - maybe we’re missing something obvious?