Skip to content

Tiptap RTE: Fix Clear Formatting errors when HTML attribute extensions aren't enabled (closes #22502)#22509

Merged
leekelleher merged 2 commits intomainfrom
v17/bugfix/22502-tiptap-clear-formatting
Apr 17, 2026
Merged

Tiptap RTE: Fix Clear Formatting errors when HTML attribute extensions aren't enabled (closes #22502)#22509
leekelleher merged 2 commits intomainfrom
v17/bugfix/22502-tiptap-clear-formatting

Conversation

@AndyButland
Copy link
Copy Markdown
Contributor

@AndyButland AndyButland commented Apr 17, 2026

Prerequisites

  • I have added steps to test this contribution in the description below

Fixes #22502

Description

The "Clear Formatting" toolbar button in the TipTap RTE throws a TypeError on click when the HtmlAttributeClass or HtmlAttributeStyle extensions are not enabled on the data type:

clear-formatting.tiptap-toolbar-api.ts:6 Uncaught TypeError: e?.chain(...).focus(...).clearNodes(...).unsetAllMarks(...).unsetClassName is not a function

Root cause

The "Clear Formatting" toolbar API calls .unsetClassName() and .unsetStyles() — custom chain commands provided by Umb.Tiptap.HtmlAttributeClass and Umb.Tiptap.HtmlAttributeStyle respectively. These extensions used to be bundled into "Rich Text Essentials" (guaranteed to be present) but were unbundled into separate opt-in extensions in #20042 (Sep 2025). Users whose saved toolbar still contains "Clear Formatting" after the upgrade — but whose data type doesn''t opt into both underlying extensions — hit the TypeError because the chain commands simply don''t exist.

Fix

Invoke unsetClassName and unsetStyles via a custom Tiptap command using optional chaining on commands.*. When the HTML-attribute extensions aren''t registered, those calls silently no-op, while clearNodes() and unsetAllMarks() (core commands) always run. No manifest dependency is declared — the button stays available regardless of which HTML-attribute extensions are opted into, and degrades gracefully.

Behaviour after the fix

  • Users with both HTML-attribute extensions enabled: no change — button clears nodes, marks, classes and inline styles.
  • Users missing one or both extensions: button clears nodes and marks; class/style unset steps no-op safely (there''s nothing to clear). No TypeError.

Testing

  1. Create a Data Type using the TipTap Rich Text Editor.
  2. Without enabling the `class` attributes or `style` attributes extensions, add "Clear Formatting" to the toolbar.
  3. Apply formatting to a content item → click Clear Formatting → nodes and marks are cleared, no console errors.
  4. Enable the `class` attributes and `style` attributes extensions, add classes/inline styles to content → click Clear Formatting → classes and inline styles are also cleared.

Copilot AI review requested due to automatic review settings April 17, 2026 04:43
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Fixes a TipTap RTE runtime error by declaring the extension dependencies for the “Clear Formatting” toolbar button so it is disabled/hidden when the required HTML-attribute extensions are not enabled on the data type.

Changes:

  • Add forExtensions dependency declarations to the Clear Formatting toolbar manifest to require Umb.Tiptap.HtmlAttributeClass and Umb.Tiptap.HtmlAttributeStyle.

on the `class` and `style` attribute extensions
@leekelleher leekelleher changed the title TipTap: Fix Clear Formatting button throwing TypeError when HTML attribute extensions are disabled (closes #22502) TipTap: Fix Clear Formatting TypeError when HTML attribute extensions aren't enabled (closes #22502) Apr 17, 2026
@leekelleher leekelleher changed the title TipTap: Fix Clear Formatting TypeError when HTML attribute extensions aren't enabled (closes #22502) Tiptap RTE: Fix Clear Formatting errors when HTML attribute extensions aren't enabled (closes #22502) Apr 17, 2026
Copy link
Copy Markdown
Member

@leekelleher leekelleher left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @AndyButland. I reworked the Clear Formatting code to conditionally call the unset class and style attribute methods. This way we can avoid the hard dependency on those 2 extensions in the UI.

@leekelleher leekelleher enabled auto-merge (squash) April 17, 2026 10:21
@leekelleher leekelleher merged commit a06c4aa into main Apr 17, 2026
30 checks passed
@leekelleher leekelleher deleted the v17/bugfix/22502-tiptap-clear-formatting branch April 17, 2026 10:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

TipTap "Clear Formatting" doesn't work

3 participants