[composer] tabbing through to body doesn't work in firefox

[gudsson]

Issues:

The following issues were identified with the Composer component in Firefox, and seem to be known issues with the Firefox's Selection API implementation with contenteditable elements in the Shadow DOM.

• Focusing non-body elements directly prior to focusing the HTML editor prevents cursor from displaying.
• Focusing non-body elements which store selection caret/range prior to focusing the HTML editor prevents selection caret from switching to the HTML editor.
  • The selection caret seems to get trapped in <input> elements and prevents typing into the HTML editor unless document.activeElement is updated by clicking on the background/body.

What you did:

• Add focusing flag that triggers a re-focusing of the HTML editor via a setTimeout to update selection's anchorNode/focusNode, and focus on correct element in the shadow DOM.
  • Adapted from ProseMirror plugin solution found here: Caret does not appear when switching focus between two prosemirror editors embedded in the shadow root of custom elements ProseMirror/prosemirror#1113

Screen Captures

Lost cursor and typing lockout on tab-through

Re-focus solution

License

I confirm that this contribution is made under the terms of the MIT license and that I have the authority necessary to make this contribution on behalf of its copyright owner.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
components	✅ Ready (Inspect)	Visit Preview	Oct 11, 2022 at 5:52AM (UTC)

[yifanplanet]

🥇 Thank you for solving this!