Canvas Full HTML

Replaces Canvas's restricted text formats with the Full HTML text format in Drupal Canvas (Experience Builder) WYSIWYG editors, enabling unrestricted HTML editing capabilities.

While working with Canvas, I noticed that several people were struggling with its restricted WYSIWYG setup. Canvas currently allows only its own Canvas block and Canvas inline text formats, which means there’s no flexibility to customize the toolbar or apply additional text formats.

To address this limitation, I built a module that enables full_html text format support within Canvas. However, since Canvas enforces strict constraints, it doesn’t allow toggling between text filters directly during page editing. As a workaround, the configuration for enabling full_html needs to be managed separately in Drupal.

Features

• Toggle full_html format on/off via admin configuration
• Automatic CKEditor 5 toolbar overflow fixes for Canvas UI
• Works with any component using contentMediaType: text/html props
• Example "Rich Text Block" component included

Requires Canvas module and a full_html text format.

Requirements

• Drupal 10.3+ or Drupal 11
• PHP 8.1+
• Canvas module
• A text format with machine name full_html

Installation

composer require drupal/canvas_full_html
drush en canvas_full_html

Configuration

Navigate to Administration > Configuration > Content > Canvas Full
HTML
(/admin/config/content/canvas-full-html)

• Enable Full HTML format in Canvas: Toggle to
  enable/disable the full_html text format replacement.

How to Use

1. Enable the module
2. Ensure the setting is enabled at
   /admin/config/content/canvas-full-html
3. Clear caches: drush cr
4. Open Canvas editor and add a component with rich text props
5. The CKEditor 5 will now have full HTML toolbar options

Example Component

The module includes an example "Rich Text Block" component demonstrating how
to use contentMediaType: text/html props with full HTML support.