Review toolbars in the demos in the documentation to improve feature discoverability

[AnnaTomanek]

After multiline toolbar and marking UI buttons in the docs are done, we should review all demos and see:

• If the toolbar buttons selected for each sample are optimal both in terms in the number of features available in the demo and the button placement.
• Which buttons should be marked as important and what tooltip should be added there.
• Where using the multiline toolbar would make sense. Do we have any samples where we needed to disable the TOC to accommodate a larger number of buttons that we can now modify to use the multiline toolbar instead?

Toolbars checked / adjusted:

• Examples section
• autoformatting
• automatic text transformations
• basic text styles
• block indentation
• block quote
• block toolbar
• code blocks
• comments
• track changes
• real-time collaboration
• users
• document title
• document placeholder
• export to PDF
• export to Word
• font
• headings
• highlight
• horizontal line
• image upload
• Image Ready
• CKFinder
• Base64
• Simple upload
• images
• keyboard support
• link
• lists
• markdown output
• math/chemical formulas
• media embed
• mentions
• page break
• pagination
• pasting from Word
• pasting from GD
• pasting plain text
• raw HTML embedding
• read-only support
• remove formatting
• restricted editing
• select all
• special characters
• spelling/grammar checking
• tables
• text alignment
• to-do lists
• UI language
• watchdog
• word/character count

Toolbar tooltips added (including demos that do not need the tooltips):

• autoformatting
• automatic text transformations
• basic text styles
• block indentation
• block quote
• editor toolbar
• block toolbar
• code blocks
• comments
• track changes
• real-time collaboration
• users
• document title
• document placeholder
• export to PDF
• export to Word
• font
• headings
• highlight
• horizontal line
• HTML embed
• image upload
• images
• keyboard support
• link
• lists
• markdown output
• math/chemical formulas
• media embed
• mentions
• page break
• pagination
• pasting from Word
• pasting from GD
• pasting plaintext
• read-only support
• remove formatting
• restricted editing
• select all
• special characters
• spelling/grammar checking
• tables
• text alignment
• to-do lists
• UI language
• watchdog
• word/character count

[godai78]

Checked and eliminated all the ones that do not have a toolbar or the toolbar is proper length and there is no need for the indicator.

[godai78]

Toolbar guide has been extracted from the configuration guide and added as a standalone guide to aid discoverability and overcome the search engine standard issue.

[godai78]

A few screenshots for hand-split toolbars:

And a toolbar that will automatically wrap if anybody insists on using CKEditor 5 on their phone:

[godai78]

There is a larger discussion coming, we already took up this topic with @pkwasnik and @Mgsy.
The Classis Editor comes up with a toolbar about 2/3 the widescreen display demo width, as they have only the predefined set and no other items.

Now:

• do wee keep hiding buttons in these,
• or do we wrap buttons automatically into another line?

If the latter, we could introduce the wrapping switch straight into the editor base, because putting it in every one of those demos would require a substantial amount of code, as they do not have toolbar items listed and would need to.

---

Also future feature request on my part: allow automatic wrapping but set a predefined breakpoint. This is a combo approach between "wrap only as needed" and "wrap here so it looks good" that would produce the ultimate visual results for the editor.

[godai78]

Tooltip indicators for buttons were added where applicable with an enormous amount of help from @pkwasnik.

Sometimes more than one tooltip was added if there was more than one demo and it made sense.

Other changes: all lists have been grouped into one submenu, as it makes sense to keep them together both functionally and logically.

Images guide shall be anyway rewritten largely, so it was not tended to too carefully (just one indicator added, this may change once the guide is slashed into pieces).

[AnnaTomanek]

Moved the toolbar indicator task to a separate issue: https://github.com/cksource/ckeditor5-internal/issues/588

[AnnaTomanek]

There are still some unchecked guides in the list - @godai78 can you review them, propose changes if any are needed or check them and let's close this issue finally?

[godai78]

Sure.

[godai78]

• CKFinder needs the tooltip moved right not to stick out the editor window. Will have to make a PR for that.

• The same applies to the remove formatting feature and same solution.

• Didn't even touch the images guide, it will sooner or later be scrapped and rewritten anyway, so there is no point in doing it now.

• Markdown output is a borderline case - it is fine on a normal screen, but will wrap fast on mobile. I see no point in forcewrapping it, tho.

• All other toolbars have been assessed using the same methodology we employed previously and I deem those worthy being left alone as they are.

  I suggest closing this with a PR for CKFinder and Remove Formatting that I will prepare today.

[oleq]

I just stumbled upon this: the balloon in this guide should be positioned in the same way as in the export to PDF guide.

[godai78]

@pkwasnik - do we have power over it?

The PDF exporter indeed looks like this:

[oleq]

Yes, it's configurable. When I first created one for the PDF export guide I consciously made it look like this.

[godai78]

Share the knowledge, please :)

[godai78]

Never mind, I guess I found it.

[oleq]

You can use any of https://atomiks.github.io/tippyjs/v6/all-props/ options there.

[godai78]

Had I known of its existence before, that would have had been much splendid indeed. I'm taking the link to the documentation tech-tips database, thank you..

[AnnaTomanek]

Closed in 37dac1d. Hell of a ride it was! Thanks! 👏

[oleq]

It would be great if we could measure the impact of these changes. For instance, changes to the average visit/session duration for individual guides from Google Analytics would be very helpful.