fastmail/Squire

Firefox wrong Range from proto.getSelection

the-djmaze opened this issue · 1 comments

When typing in Firefox and then calling an action like Squire.bold() the cursor jumps and causes action on the wrong place.
This is because the wrong Range is used.
Replace if ( this._isFocused && sel && sel.rangeCount ) {
With if ( sel && sel.rangeCount ) {

Or add:
this.addEventListener( 'keyup', ()=>this.getSelection() ); this.addEventListener( 'touchend', ()=>this.getSelection() );

greetings from 2022.

behaviour i was observing:

select text "dolor sit amit". click bold. sometimes you:

  • end up with the entire block from where you clicked, to the end of it, selected afterwards.
  • end up with only some of the text you had selected getting the bold.

image

the first fix from op did not work for me. originally my goal was to just unselect what was selected because of how it selected the entire box. while debugging i found that if you disable _getRangeAndRemoveBookmark instead of getting a full fucky range you only get a mildly fucky range, based on how much longer the content got from the insertion of the html tags. this put me on the warpath of trying to actually salvage the selection.

op was on to something regarding focus. my fix is equally dumb, too. as long as i focus the editable viewport first, everything works as intended.

additionally, this also accidentally "fixed" iOS in that when i click the bold button, my selection is no longer lost.

editors note: i bet it "fixes" ios in that, the editor is re-focused before ios has time to fade the current one out and that it cancels it canceling itself. no idea but the caused behaviour is better.

in this following code:

  • this.editor.viewport.element is the html element that i targeted with new Squire
  • this.editor.api is the result of new Squire

image

image

the tl;dr code for anyone doing it raw would probably look more like

let el = document.getElementById('Editor');
let api = new Squire(el);

el.focus();
api.changeFormat(...);

some public lamenting of debugging: https://twitter.com/bobmagicii/status/1597376241728122880