The scenario:
We’re using ProseMirror in a React environment where we built our own menu components to compliment the editor itself. One of the use cases is an emoji menu that inserts an emoji as text when you pick one in a popover component.
The insertion itself is not a problem. But as soon as the selection spans one or more positions, after applying the transaction the whole word will be selected.
Example text: My example
Selected text: xam
Selected text after insertion: My e👍ple
I’ve already tried several variants of inserting/replacing and manually selecting. But even if I inspect the transaction right before dispatching, the selection doesn’t match the result I’m seeing.
While researching the problem I noticed that there were several Chrome issues related to selections as well. Could this be a side effect of one of the fixes?
You didn’t really mention how you’re doing the insertion. tr.replaceSelection should work for this, and makes sure the new selection ends up at the end of the insertion.
replaceSelectionWith should also work. Can you reproduce this problem in a minimal editor outside of your code base, where you just dispatch a simple transaction?
Also look into the DOM events that are involved—depending on where the control to activate this is, and how you’re handling events, you may be seeing a native double-click happening alongside your own effect.
I tried to replicate the scenario with a basic react setup in this sandbox - just try to select some of the text and press the test-button on top:
The problem doesn’t occur here so I’m fairly certain the fixes I mentioned are not responsible for my problem.
I checked the DOM events surrounding the editor, but I didn’t notice anything I wasn’t expecting (no unwanted clicks, focus or blur events - just those necessary).
I’ll try to investigate this further and post an update once I got my head around the root cause.