fix(richtext-lexical): allow exiting the RTE with the keyboard in Firefox

[rilrom]

Closes #8653.

Originally this PR was for making the IndentFeature opt-in instead of opt-out, which would have been a breaking change. After some discussion it was determined it would be better if we could keep the IndentFeature by default and instead come up with a custom escape key solution to prevent keyboard users from becoming trapped in the editor.

These changes are my interpretation of how we can solve this problem in a way that feels natural for a keyboard user. When a keyboard user becomes trapped, the usual approach is to press the escape key (e.g. modals) to be able to leave the current context and continue navigating. These changes allow that to happen while minimising the cognitive load by not needing to remember whether the IndentFeature is toggled on or off.

I've also ensured the IndentFeature can actually be turned off if consciously removed from the lexical editor features (previously it was still enabled even if it was removed).

Ideally this should be handled on the lexical side in the TabIndentationPlugin itself (I will begin to look into the feasibility of this), but for now this should be suitable to ensure the experience for keyboard users isn't completely blocked (there are a number of other improvements that could be made but I will create more specific issues for those).

Open to discussion and amendments. Once we're aligned on the approach I'm happy to implement tests as needed.

Before

https://github.com/user-attachments/assets/95183bb6-f36e-4b44-8c3b-d880c822d315

After

https://github.com/user-attachments/assets/d34be50a-8f31-4b81-83d1-236d5ce9d8b5

[rilrom]

This has been determined to be a Firefox specific issue. This fix brings the functionality in parity with other browsers such as Chrome and Edge.

[rilrom]

I found the reason. I was testing on the lexical-localized-fields collection. In lexical-fields which is the one you are testing it works fine, but it seems to have problems when after the focused paragraph there is a decoratorNode or block (upload, relation, etc). Could you take a look and see why?

There are three buttons rendered off-screen that are still focusable in the rich text editor (.add-block-menu, .link-edit and .link-trash). This means you need to tab 4 times before you get to the next field.

Since this issue is present in all browsers I have not addressed it here. Happy to do so in a separate PR.

[GermanJablo]

you need to tab 4 times before you get to the next field.

That's not my experience. This is what I mean:

https://github.com/user-attachments/assets/5e786375-fad2-40bb-9f27-a5e0f2cc1191

[GermanJablo]

Marked as draft for the moment. As it may not be obvious from the video, I can't exit the editor forward using tab. Please let me know if you have any problems reproducing my experience.

[rilrom]

@GermanJablo good catch, I am also able to reproduce it.

The issue you've found can also be replicated without this PR on Chromium based browsers such as Chrome.

Since this PR is specific to getting Firefox in parity with Chrome, I think that issue should be tackled in a separate PR. If you would prefer this fix to be tackled at the same time as the others, it's probably better we close this PR or rename it.

Based on my initial testing with inline blocks, it's looking like we might need to take the 'toggle indent' approach that you raised initially after all. Since inline blocks are nested inside the editor, any attempts to focus them cause the TabIndentPlugin to be automatically re-enabled. Everything just works when the TabIndentPlugin is completely disabled.

Thanks for your patience with me on this one, I think we're getting to the bottom of it.

[github-actions[bot]]

🚀 This is included in version v3.2.2