Hi !
I encounter an issue with the PM selection when using button which are not rendered by prosemirror-menu.
What I tried to acheived is : create an accessible HTML editor. We want the user be able to interract with the text-editor by using the keyboard. With keyboard shortcuts of course, but also by “navigate” on the toolbar with keyboard (Tab, Shift+tab) & “click” on the toolbar button with keyboard.
AFAIK the actual prosemirror-menu does not provide any focusable element or a11y behavior.
So we decide to use our own “menu” to trigger action on PMView… But by doing this we had an issue on PM Selection.
Here is a reproduction of the issue :
https://glitch.com/edit/#!/amazing-blue-8ipq4j5us
As you can see when I select a text, press Shift+tab to focus the button, press enter/space to “click” on the button, the toggle Strong Mark actions works.
But when I focus again the pm view (with Tab) the cursor is placed at the begining of the line but the internal PM selection is still on the previously selected word & then when I press ENTER the word is replace by a new line…
This behavior is strange & seems to be specific to using an “external” button.
For information I can reproduce with using the mouse :
Same issue happened here. I found a way to fix it by using the mousedown event instead of click. From what I understand here, the usage of mousedown prevent the selection to change when the user click on the button. But it’s doesn’t fix the keyboard issue, even by using an onkeydown event to deal with a keyboard “click”.
The only way I found to prevent this happening when user interract with the keyboard is to do something like this on the click method :
onClick(){
toggleMark(schema.marks.strong)(view.state, view.dispatch)
// Force the selection to be updated
let { anchor, head } = view.state.selection
view.docView.setSelection(anchor, head, view.root, true)
// Focus back the button
button.focus()
}
This workaround fix my issue, but it’s look like a weird fix to me. Any help is welcome…
After some additionnal tests I also found that there is a “strange” behavior on PM selection even when using only prosemirror-menu item :
Here, the issue mention above, did not happened, but when I select a text on the page, the PM selection disapear, but it seems that PM keep it internaly… I don’t know if it have to be considered as a bug or not, but maybe it’s related to my issue ?
Let me know if something is unclear or if more information is needed.
Thank you.
(I did not create an issue yet, because I wanted to have some feedback before)
, thank you 