Fix Safari Linking: Check for selection range count before calling getRangeAt

[gwwar]

Calling window.getSelection.getRangeAt(0) is unsafe without first checking for selection.rangeCount > 0. In certain situations this can cause unexpected block errors like the gif below. This is most easily reproducible in Safari, but will be inconsistent.

To attempt to reproduce:

1. Add a new link
2. Focus on another paragraph
3. Focus on the original paragraph, or on the link directly

See also related: Automattic/wp-calypso#32965 and #11209 and potentially #15491

Before:

See https://stackoverflow.com/questions/22935320/uncaught-indexsizeerror-failed-to-execute-getrangeat-on-selection-0-is-not/23699875 for a short example of the window.getSelection.getRangeAt(0) issue.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[vesaraiskila]

I was able to reproduce this bug using precisely the steps described with Safari on iMac.

[aduth]

Doing a codebase search for window.getSelection().getRangeAt( 0 ), I find another instance:

gutenberg/packages/components/src/autocomplete/index.js

Line 142 in 449c254

const range = window.getSelection().getRangeAt( 0 );

Would it be fair to say that if window.getSelection().getRangeAt( 0 ) is unsafe without prior consideration of selection.rangeCount, that this one too should be updated?

[gwwar]

Would it be fair to say that if window.getSelection().getRangeAt( 0 ) is unsafe without prior consideration of selection.rangeCount, that this one too should be updated?

Yes, any instances should be updated. I wonder if we can add a custom lint rule here?

[aduth]

Yes, any instances should be updated. I wonder if we can add a custom lint rule here?

The naive check might be simple enough:

https://astexplorer.net/#/gist/26984b64750ba301178a38680fbce17f/66c7af6eb40fa09446d81d33f4adf3697eb13b47

But it fails at:

window.getSelection().rangeCount > 0 ? window.getSelection().getRangeAt( 0 ) : null;

...unadvisable anyways, re: repeated window.getSelection() vs. variable assignment.

const selection = window.getSelection();
selection.getRangeAt( 0 );

...probably the less likely case if doing an unguarded check anyways, and a "better than nothing" allowable false negative.

[aduth]

An issue for the remaining item / possible ESLint rule: #15606

[vesaraiskila]

Sorry, when will a fix be available? In the next WordPress release?

[youknowriad]

@vesaraiskila yes, WP 5.2.1

[vesaraiskila]

Thanks @youknowriad Do you know when it will be released? Our site should upgrade to it automatically.

[youknowriad]

Sometime next week probably. There's no precise date yet.