Rich text toolbar is hidden by default making some edits difficult

Issue Summary

Prior to Wagtail v4, the rich text toolbar was always visible which made it easy to access the full range of options when editing. Now that the toolbar is hidden by default, it’s very difficult. I understand the desire to save screen real estate but it’s now nearly impossible for normal editors to discover how to make the same edits they could prior to v4.

The simplest example is adding a new RichTextBlock and wanting to kick things off with a numbered list. Previously this was just a toolbar button click away. Now one needs to unlearn this and begin to think of lists as a “block” that can be triggered per the “Write something or type ‘/’ to insert a block” prompt.

For a slightly more advanced but documented example, the Extending the Draftail Editor documentation gives an example of how to add a stock chooser. One has to look closely at the animated GIF to figure out that the only way to even access the toolbar in this scenario is to highlight some empty text:

The only more slightly discoverable way to trigger the toolbar is to highlight text, but of course that will result in the inline content replacing the highlighted text. In short, it seems the assumption behind the hidden-by-default toolbar is that the only buttons available in the toolbar are for formatting selected text.

This issue impacts plugins like wagtail-footnotes which expect to be able to insert a footnote inline, anywhere within a sentence. If editors want to insert a footnote mid-sentence, they now have to highlight a space, insert the footnote and then add an additional space so there is still a single space between the footnote link and the following word. (wagtail-footnotes is not fully Wagtail v4 compatible yet but there is work in progress and I noticed this issue when testing)

Ideally the toolbar would always display when the input field is in focus. This keeps the rest of the page that is not being actively edited to a minimum while making it extremely easy to access the full set of rich text “features” on the chunk of text you’re actively editing.

It doesn’t really work to add a new line to get the “type ‘/’” prompt since this would just place the e.g. stock chooser icon or footnote reference on a new line and would have to be manually maneuvered into place.

[elinfrancke]

We also like the idea of displaying the toolbar when the input field is in focus.

The problem we are experiencing is when we want to add internal links or documents and keep the original title as the link text. It is possible to add an internal link using the keyboard shortcut but that only works in desktop and there’s no shortcut for adding documents.

As it is now we need to enter the title manually, mark the text and then add the link or document.

[thibaudcolas]

Thank you all for the feedback so far. Just wanted to follow up to say we’re taking a hard look at this currently, and you can expect to see changes in the next version of Wagtail.

At this stage we still think our reasoning for switching over to a floating toolbar is sound, though we are going to do user testing with different options to confirm, including some options where the toolbar is at the top of the editor.

---

If anyone has further feedback on this, please go for it so we can take it into account. With that in mind, there are specific points I think are worth clarifying:

For a slightly more advanced but documented example, the Extending the Draftail Editor documentation gives an example of how to add a stock chooser

Numbered lists are a fundamental feature of all rich text editors, this stock picker is explicitly marked as an “advanced” feature in our documentation. So although we do want this to be possible, bear in mind this is far down the priority list. Footnotes and documents inserted with their title as-is are great examples.

Users are missing the toolbar and can’t figuring out how to enable it…

There shouldn’t be anything to enable, the toolbar just appears upon selecting text, either with the keyboard or mouse. Is there anything else getting in the way here?