Draftail (rich text editor) - using cmd + left arrow to navigate to the start of the line is broken in Firefox

[lb-]

Issue Summary

I used the Rich text editor for a large amounts of editing links this week and found some very frustrating behaviour with cmd + left arrow interaction.

When there is an inline element (e.g. a link), it is impossible to navigate to the start of the line in the way that works in every other text editor I have used.

• cmd + left arrow should navigate to the start of the line.
  • Instead - this moves the scroll position to the start of the page and loses the focus of the current editor
• cmd + shift + left arrow should highlight from the current position to the start of the line
  • Instead - this does nothing
• Oddly the behaviour to the end of the line works great, cmd + right arrow moves to the end of the line & cmd + shift + right arrow selects the text from the current position the end of the line.

Steps to Reproduce

1. Ensure you are running this in Firefox & on macOS
2. Load any Wagtail instance with Rich text in use - e.g. the nightly build https://wagtaildemo-nightly.herokuapp.com/admin/pages/64/edit/
3. Add a link to the Page Body in a rich text block
4. Using the keyboard only, navigate to the end of the link
5. On your keyboard, click cmd + left arrow to move to the start of the line
6. Expected: Cursor moves to the start of the line
7. Actual: Page scrolls up

• I have confirmed that this issue can be reproduced as described on a fresh Wagtail project: (no)

Technical details

• Python version: 3.9
• Django version: 4.1
• Wagtail version: Tested on 3.0 and on 4.1a (in dev) and issue is present in both
• Browser version: Firefox 105 on macOS 12.3

Manual testing

Shortcut	Expectation	Browser	Behaviour
⌘ + ⬅️	Navigate from end position to the start of the line	Firefox	❌moves up the page
⌘ + ⬅️	Navigate from end position to the start of the line	Firefox	❌ moves up the page
⌘ + ⬅️	Navigate from end position to the start of the line	Safari	✅ moves to the start of the line
⌘ + ⬅️	Navigate from end position to the start of the line	Safari	✅ moves to the start of the line
⌘ + ⬅️	Navigate from end position to the start of the line	Chrome	✅ moves to the start of the line
⌘ + ⬅️	Navigate from end position to the start of the line	Chrome	✅ moves to the start of the line

Recording

Screen.Recording.2022-10-14.at.5.15.40.pm.mp4

[Dev-Yusuf]

I will be great if you assign me to this @lb-

[lb-]

@Dev-Yusuf we don't really assign issues outside of the core team.

I encourage you to first try to reproduce the problem and confirm it exists, from here maybe have a look at the code and see if you think you know what the issue could be.

After that you may be able to a PR to fix it, if so, just add a comment that you're working on a fix.

Also, I am not sure if this can even be fixed in Wagtail's code, it may be a Draftail issue or even a Draft.js issue. I did search those repos but we may end up moving this bug to a different project.

[fyunusa]

Hi @lb- I was able to determine that the issue still remains by comparing results on the Chrome and Firefox browsers.
I'm not sure as to if @Dev-Yusuf is still working on the issue, but I was able to find comparable complaints on the draftail repo that were reported concerning draftail keyboard behavior on the wagtail bakerydemo site in the year 2021.
springload/draftail#451

https://www.youtube.com/watch?v=mWpgbmxRZqg