Selection changes when inline Decoration is applied


#1

Hey!

I have a plugin that highlights the current selection.

import {Plugin} from 'prosemirror-state'
import {DecorationSet, Decoration} from 'prosemirror-view'

export default new Plugin({
    props: {
        decorations(state) {
            return state.selection.empty ? null : DecorationSet.create(
                state.doc,
                [Decoration.inline(state.selection.from, state.selection.to, {class: 'selection'})]
            )
        }
    }
})

The expected behavior is, that the current selection does not change and the selected text is highlighted. The class selection turns the background green. What happens is, that when the decoration is applied, the selection jumps to the start of the node (paragraph) and the decoration is applied from there. Depending on the direction that i am selecting, the selection sometimes also jumps to the end of the node. A demonstration: http://recordit.co/5XEviIG7L5

Please point me in the right direction so solve this, thanks a lot!

It seems to be a general problem with the native selection when inline decorations are added. I guess it is because of the change in the DOM. Is there a way to sync from the correct selection that was created by prosemirror?!

Remixing the decoration Example on glitch does not result in this error. So either there is a new bug or I am messing something up. Will investigate further!

The problem is coupled to editable, if it is set to false, the selection behaves in that weird manner.

What I am trying to achieve is, that I have a non editable prosemirror view where I can select text and add inline decorations to the selections. The user should not be able to alter the content in any way. I think editable => false is the way to go, however the selection problem needs to be solved. I will have a look at the selection.js in prosemirror-view, if I can figure out what is happening. Help is still much appreciated!

Thank you!


#2

Well it took, uh, 4 months, but I finally took a look at this today. I think this patch should help with this. If you’re still interested, could you take a look?


#3

Hey

I am seeing this issue after the fix.

Updated to prosemirror-view: 1.2.0 and I can see this issue. It is more pronounced in Safari 10.1 (It only happens when the inline decoration contains the selection, the selection is moved) Is it possible that there is a race condition here?

Thanks for any assistance here.