Tiptap RTE: Toolbar menu active highlighting

[leekelleher]

Description

Adds isActive support to the Tiptap RTE toolbar menus (including cascading menus).

Recording.2025-06-11.164345.mp4

To note, I'd tried various styling options for the highlighted menu item, (see UUI for options), and decided on select-mode="highlight". I'm happy for this to be reviewed and discussed further.

How to test?

Click around the Tiptap RTE, check that the corresponding toolbar menu is highlighted.

[Copilot]

Pull Request Overview

This PR introduces support for active highlighting in the Tiptap RTE toolbar menus, including cascading menus. Key changes include extending the API method signatures with additional arguments, updating the active state checks in various toolbar extensions, and enhancing the cascading menu popover functionality with active state support and style adjustments.

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/types.ts	Extended the isActive API signature to accept additional arguments.
src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/font-size.tiptap-toolbar-api.ts	Updated the isActive logic to determine active state based on font-size styles.
src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/toolbar/font-family.tiptap-toolbar-api.ts	Updated the isActive logic to determine active state based on font-family styles.
src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/table/table.tiptap-toolbar-api.ts	Overrode isActive to invoke base behavior or return false when an item is provided.
src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/table/components/table-toolbar-menu.element.ts	Applied an inline style change to the popover container for enhanced visual emphasis.
src/Umbraco.Web.UI.Client/src/packages/tiptap/components/toolbar/tiptap-toolbar-menu.element.ts	Integrated active state logic into menu button rendering with cascading menu checks.
src/Umbraco.Web.UI.Client/src/packages/tiptap/components/toolbar/style-menu.tiptap-toolbar-api.ts	Refactored heading commands into a helper function and updated active state logic for style menus.
src/Umbraco.Web.UI.Client/src/packages/tiptap/components/cascading-menu-popover/cascading-menu-popover.element.ts	Enhanced cascading menu handling by incorporating active state checks and refined popover behavior.

Comments suppressed due to low confidence (1)

src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/table/table.tiptap-toolbar-api.ts:34

• The override of isActive returns false when an 'item' argument is provided, which may lead to unexpected behavior. Please document the intended behavior or adjust the implementation for consistency.

return false;