Customizing and extending the Formatting Toolbar

[bph]

Discussed in #255

^{Originally posted by magdalenapaciorek April 30, 2024}
I'm proposing this topic (and volunteering myself as the author) because patterns similar to the one below are quite common in web design. I believe the formatting API is often overlooked, and developers who are unfamiliar with it might struggle to implement such designs.

The initial plan for the article:

• an overview of available formats with examples of how they can be used (e.g., adding an inline image to the citation in the Quote Block)
• how to unregister default formats
• how to add a basic format, similar to the one shown in the screenshot
• how to implement more complex format controls, such as the one in the Language Format, where a click opens a popover with multiple options.

[magdalenapaciorek]

I'm happy to take this on.

[flexseth]

I'm happy to take this on.

+1 - happy to see this, hidden gem in the toolbar!!

[justintadlock]

@magdalenapaciorek - If you need any inspiration for examples, I have quite a few: https://github.com/x3p0-dev/x3p0-ideas/tree/9d2e309ab639b169709c53260dab8377c44d47ad/resources/js/format-library The abbreviation and span (custom class) formats are more advanced and include popups for additional attribute input.

[magdalenapaciorek]

@justintadlock great examples, thank you! :)

[bph]

@magdalenapaciorek just wanted to check in with you on the progress of your article and if there are any blockers, I can assist you with.

[magdalenapaciorek]

I'm getting close to the finish line and should have a draft ready to share in just a few days