Add callout styles for the Standard text format

[bberndt-uaz]

Motivation

Many Quickstart sites use Arizona Bootstrap callouts to highlight particular sections of content. Callout styling options should be added to the Styles dropdown in the CKEditor toolbar so that users can easily add callouts to their text areas which use the Standard text format.

Is your feature request related to a problem? Please describe.

Previously, a callout style such as div.callout.callout-red|Callout Red could be added as a customization to the Quickstart CKEditor settings for the Standard text format, allowing users to select it from the Styles dropdown to insert an entire element such as <div class="callout callout-red">text</div> into a text area. With CKEditor 5, it is not possible to insert this style since the style is required to match an element before it can be applied, and the editor toolbar does not provide a way to add <div> elements to a text area.

Proposed Resolution

Describe the solution you'd like

Ideally, the editor should provide a way to insert a <div> element with the desired callout styles into a Standard format text area. This is the type of element used in the Arizona Bootstrap documentation.

Open questions for discussion:

1. How can we enable the callout styles on <div> elements in CKEditor 5?
2. Would applying the callout styles to <p> elements be an acceptable alternative?
3. Which Arizona Bootstrap callout styles should be included in the Styles dropdown?

Roles and Permissions considerations

No roles or permissions will be impacted by this change.

Additional context

Relevant CKEditor and Drupal core issues

• ckeditor5: [Style] Style dropdown should insert (some) elements. #14372
• Drupal core: [upstream] [Style] Allow CKEditor 5 to create a <h2 class="something"> directly (instead of first <h2>, then adding a class)
• Drupal core: [upstream] [GHS] Allow CKEditor 5 support for containers: div, article, section, aside, etc.

Standard text format Styles dropdown in Quickstart 2.8.3

[joeparsons]

Related: az-digital/arizona-bootstrap#1122

[bberndt-uaz]

Added relevant CKEditor and Drupal core issues to the description. This is blocked by those issues unless we would like to implement a workaround solution.