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?
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.