[SlateEditor] Multiple issues in different browsers when the component is rendered under ShadowDOM

[siarheiyelin]

Notes

• All issues mentioned here are specific to the use case when SlateEditor is rendered inside ShadowDOM
• Start local DEV server using yarn start-sd command in order to wrap the entire UUI app in ShadowDOM. After that you can navigate to the Rich Text Editor page to reproduce the issues mentioned in this bug

Issues

1. [Safari] Selected text toolbar (aka PositionedToolbar) is not rendered at all. To reproduce, just select some text in the editor. Actual result: the toolbar is not shown.
2. [FF][Safari?] Text is typed in reversed direction. To reproduce:
   • put focus into the editor without any content inside it;
   • try to type several characters in a row, e.g.: "abc". Actual result: "cba" is typed instead
3. [FF][Safari?] Unable to type more than one charater when trying to type after selecting all text in the editor. To reproduce:
   • put focus into the editor with some content inside it;
   • select all text and try to type several characters in a row, e.g.: "abc". Actual result: "c" only is typed.
4. [FF][Safari?] Unable to remove characters using backspace. To reproduce:
   • Type several characters into the editor
   • Put cursor position after the last character
   • Press and hold backspace to remove all text starting from the last character. Actual result: after the first (starting from end) character is removed, the cursor position is set to the very beginning, thus unable to continue removing characters.
5. [Chrome] Text editor crashes after trying to delete text using backspace. To reproduce:
   • Add some long text to the editor (like 500 characters). Put cursor after the very last character.
   • Press and hold backspace to remove all text starting from the last character. Actual result: editor crashes (and the entire page is crashed) somewhere in the middle of the process. See the error message below.

     Uncaught runtime errors:
     ×
     ERROR
     Cannot resolve a DOM point from Slate point: {"path":[0,0],"offset":30}
     at Object.toDOMPoint (webpack-internal:///../node_modules/slate-react/dist/index.es.js:672:13)
     at Object.toDOMRange (webpack-internal:///../node_modules/slate-react/dist/index.es.js:682:33)
     at setDomSelection (webpack-internal:///../node_modules/slate-react/dist/index.es.js:3081:50)
     at eval (webpack-internal:///../node_modules/slate-react/dist/index.es.js:3098:7)

[AlekseyManetov]

related to https://github.com/ianstormtaylor/slate/issues/5144

[AlekseyManetov]

Seems to have been fixed according to https://github.com/ianstormtaylor/slate/pull/5648