Keeping selection while using the menu or clicking outside the document

While making my menu, I’ve noticed that the selected text will disappear as soon as click anywhere outside the document (which my menu is). So if I have a dropdown of headers for example, clicking on the dropdown will unselect my text (though the prosemirror selection will stay). This makes it unclear what will happen when I style the text, i.e. which text is currently selected.

This is browser behavior and consistent across all web editors, most of them have a hack that highlights the selection manually, e.g. see Google Docs: http://recordit.co/Ux1Ja1riAc

I wrote a simple plugin to automate this process for prosemirror, but the new transaction system is not quite as explicit about when the selection is changed so I would like some feedback.

Here it is: https://gist.github.com/ThariqS/72cb138d33e7bcfd15d0440cc4bd555a

This functionality might be good to implement into prosemirror main but I’m happy to publish it as a plugin as well if other people have similar problems.

That’s a good idea. I am keeping the core library’s behavior as simple and as close to native behavior as possible, so yeah, a plugin is the right place for this.

transaction.curSelection is an undocumented implementation detail. You could just check transaction.docChanged || transaction.selectionSet, and reset the decoration when one of those is true.

Also, I don’t think you need the inclusiveLeft and inclusiveRight options, since you don’t need to ever map these decorations (you just recreate them when there’s a new selection).

Ran into this issue myself, since I’m trying to have a floating menu that pops up only when the editor has focus. The naive way was to just make it appear when editor.hasFocus is true, but then clicking on the menu makes it disappear!

I ended up using evt.preventDefault on mousedown interactions on the menu to keep those from stealing focus.

4 Likes