By jwilson3 on
Change record status: 
Published (View all published change records)
Project: 
Drupal core
Introduced in branch: 
10.1.x
Introduced in version: 
10.1.0-beta1
Issue links: 
https://www.drupal.org/node/3227354
Description: 
CKEditor 5 on Drupal 10 now supports an autoformat feature that lets content creators quickly format plain text prose into HTML rich text via Markdown-like shortcodes from right inside the WYSIWYG editor. Universal, well-known shortcut keys can be used for the most common formatting features as an alternative to interacting with CKEditor toolbar buttons or dropdowns.

Examples

Autoformat key code examples include, but are not limited to:

  • Basic formatting
    • Type _ or * around some text to make it Italics.
    • Type __ or ** around some text to make it Bold.
    • Start a line with > followed by a space to create a Blockquote.
  • Lists
    • Start a line with 1. followed by a space to create an Ordered List.
    • Start a line with - followed by a space to create an Unordered List.
  • Headings
    • Start a line with # followed by a space to create a Heading 1.
    • Start a line with ## followed by a space to create a Heading 2.
    • Start a line with ### followed by a space to create a Heading 3.
    • ... and so on.
    • Note: only the heading levels added to your Drupal Text format will work.
  • Code formatting
    • Type ˋ (backtick) around some text to make it an inline code snippet.
    • Start a line with ˋˋˋ (three backticks) to create a code block.

Demo

Demo CKEditor autoformatting capabilities and learn the shortcodes at the autoformatting page from CKEditor.com.

Impact

There are no API changes and module developers should not be impacted. This is a usability enhancement for content creators and anyone using the CKEditor 5 WYSIWYG.

Feature Management

As of Drupal 10.1.0-beta1, the ckeditor5-autoformat package is enabled by default.

Since there is no UI or toolbar button, to disable this feature a hook must be written in a custom module:

// mymodule.module

/**
 * @file
 * Primary module hooks for My Module.
 */

/**
 * Implements hook_ckeditor5_plugin_info_alter().
 */
function mymodule_ckeditor5_plugin_info_alter(array &$plugin_definitions): void {
  // Disable the autoformat package from all Drupal text formats that use CKEditor 5.
  unset($plugin_definitions['ckeditor5_autoformat']);

  // @todo Provide sample code to disable autoformat from a single Drupal text format.
}

Track and report autoformat bugs at the upstream ckeditor issue queue on Github.com or on Drupal core's CKEditor5 sub-system issue queue.

Impacts: 
Site builders, administrators, editors