Tiptap RTE: Style Menu extension kind

[leekelleher]

Description

Adds styleMenu extension kind for the Tiptap RTE toolbar.

This will enable developers to implement custom style menus for Tiptap.

Each item can be visually configured in its appearance with an icon or inline style rules; and the data property supports applying a tag, as well as class and id attributes.

Here is an example manifest using the styleMenu with the menu item configuration.

{
  "type": "tiptapToolbarExtension",
  "kind": "styleMenu",
  "alias": "MyCustom.Tiptap.StyleMenu",
  "name": "My Custom Tiptap Style Menu",
  "items": [
    {
      "label": "Headings",
      "items": [
        { "label": "Heading 2", "data": { "tag": "h2" }, "appearance": { "icon": "icon-heading-2" } },
        { "label": "Heading 3", "data": { "tag": "h3" }, "appearance": { "style": "font-size: large;" } },
        { "label": "Heading 4", "data": { "tag": "h4" } }
      ]
    },
    {
      "label": "Attributes",
      "items": [
        { "label": "Classes", "data": { "class": "foo" } },
        { "label": "IDs", "data": { "id": "bar" } },
        { "label": "Mixed", "data": { "tag": "span", "class": "foo", "id": "bar" } }
      ]
    }
  ],
  "meta": {
    "alias": "myCustomStyleMenu",
    "icon": "icon-palette",
    "label": "My custom styles"
  }
}

How to test?

The built-in Style Select toolbar menu has been refactored to make use of the styleMenu kind, this can be tested to verify the feature/functionality.

For further testing, a custom manifest (using an example similar to the above) could be added. This will make an additional toolbar option available in the Tiptap data-type configuration, (to be added to your toolbar).

[Copilot]

Pull Request Overview

This pull request introduces a new "styleMenu" extension kind for the Tiptap toolbar, enabling developers to implement custom style menus with configurable appearances, including icons and inline style rules. Key changes include:

• Updating manifest and metadata interfaces to support the new styleMenu kind and deprecate legacy properties.
• Refactoring the style-select extension to extend the new style menu API instead of directly using legacy commands.
• Adjusting several components (toolbar, popover, icon registry, and Tiptap extensions) to integrate the new styleMenu functionality and improve consistency.

Reviewed Changes

Copilot reviewed 16 out of 17 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/tiptap-toolbar.extension.ts	Updated manifest interfaces to include generics and deprecation comments for legacy properties.
src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/style-select/manifests.ts	Changed the kind from "menu" to "styleMenu" and updated menu item structure to use the new "appearance" object.
src/Umbraco.Web.UI.Client/src/packages/tiptap/components/toolbar/style-menu.tiptap-toolbar-api.ts	Added a new implementation for styleMenu commands using chained commands for setting attributes.
src/Umbraco.Web.UI.Client/src/external/tiptap/extensions/tiptap-span.extension.ts	Removed the unused "chain" parameter in the setSpanStyle command.
Other files (manifests, components, icon registry, etc.)	Minor modifications to align with the new “styleMenu” configuration and deprecation of legacy properties.

Files not reviewed (1)

• src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-dictionary.json: Language not supported

Comments suppressed due to low confidence (1)

src/Umbraco.Web.UI.Client/src/external/tiptap/extensions/tiptap-span.extension.ts:31

• The removal of the 'chain' parameter in the setSpanStyle command may affect the expected chaining behavior. Please verify that any functionality depending on 'chain' is correctly handled with the current parameters.

({ commands, editor }) => {