Feature: make Playground's toolbar similar to Google Docs toolbar where possible (or maybe provide it behind an option as it's somewhat less compact toolbar layout)

[vadimkantorov]

As Lexical and Playground is quite powerful, its toolbar already has a lot of actions that Google Docs provides.

Google Docs also has a relatively lightweight toolbar, mostly focusing on text formatting.

Playground toolbar:

Google Docs toolbar:

1. I'm proposing to make Lexical's toolbar similar to Google Docs one, discarding unimplemented functions such as printing and menu search. It seems that Lexical currently has all other Google Docs' toolbar functions. And slightly reordering the buttons and adding some extra shortcuts (on line spacing, indent, bulleted/numbererd lists) would already make Lexical's toolbar matching the Google Docs' one - at least for basic text formatting functionality. Achieving this would make the default Playground toolbar setup directly recognizable and usable to end-users acquainted with Google Docs. I'm already doing something like this in my own Playground fork, but I think doing this in the official Playground would improve it as a foundation for other users too.

2. Make fixed the width of the text format. Because Normal and Heading 1 have different width, currently the toolbar buttons jump all the time when navigating the text from the keyboard (e.g. some headers, then some text, then some header again). Simply making its width fixed by default (e.g. by adding into the default Playground styles .block-controls > .dropdown-button-text { width: 7em; }) makes button-jumps-at-redrawal-during-text-navigation disappear and less visually cluttered

---

My take on tweaking the Playground's toolbar plugin by reordering buttons and pulling some buttons from dropdowns:

Buttons from Google Docs missing in here/Playground are very few:

1. Menu search - overall unimportant as currently there is no menu in Playground (although it would be cool to have it in Playground as scaffolding)
2. Print button - could be added (but then the HTML elements of the Lexical editor would somehow need to be transformed/prepared for the print mode)
3. Spellchecking button - would be great to have some basic spellchecking in the Playground
4. Paint format - never used this in Google Docs, don't know if it's useful or not
5. Zooming in/out - would be very useful to have it in Playground
6. Add comment - commenting already supported in Playground, so could be easily pulled onto the toolbar
7. Line and paragraph spacing - would be very useful functionality for Playground/Lexical
8. Editing/Suggesting/Viewing dropdown - Lexical already supports Editing/Read-only, so converting this to a dropdown should be easy (I'll try it in my fork of toolbar)
9. Hiding menus / compact view - again, as Menu doesn't exist in Playground, not very important, although this could be interpreted as some Compact View function in general, and then it's quite useful concept for any editor