Tiptap RTE: Adds link (umbLink) support to styleMenu API

[leekelleher]

Description

Based on feedback on the forum:

• https://forum.umbraco.com/t/custom-rte-tiptap-style-dropdown-trying-to-applying-a-css-class-to-a-link/6595
• https://forum.umbraco.com/t/tiptap-applying-styles-to-a-tags/5662

It was not possible to configure a custom style menu to add a class to a link <a> tag. To resolve this, I have added support for the umbLink Tiptap extension to apply a custom class (or id) attribute.

[Copilot]

Pull request overview

Adds support for applying id/class styles to links (<a>) in the Tiptap styleMenu, specifically targeting Umbraco’s umbLink extension so custom style menus can style anchors.

Changes:

• Extend the styleMenu tag-to-extension mapping to recognize <a> and apply attributes via umbLink.
• Make styleMenu command entries optionally omit a tag-toggle command (needed for links).
• Update toggleClassName handling to add/remove a specific class token while preserving other existing classes.

Reviewed changes

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

File	Description
src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/style-menu/style-menu.tiptap-toolbar-api.ts	Adds <a> → umbLink mapping and supports entries without a command so style application works on existing links.
src/Umbraco.Web.UI.Client/src/packages/tiptap/extensions/html-attr-class/html-attr-class.tiptap-extension.ts	Adjusts class toggling to manipulate individual class tokens (instead of overwriting/removing the whole attribute).

[AndyButland]

I've not been able to verify this one I'm afraid @leekelleher - possibly due to user error, but let me replay and you can see if I'm doing anything wrong.

Have configured this extension using a combination of the example from the docs and the linked forum post.

{
   "type":"tiptapToolbarExtension",
   "kind":"styleMenu",
   "alias":"MyCustom.Tiptap.StyleMenu",
   "name":"My Custom Tiptap Style Menu",
   "meta":{
      "alias":"myCustomStyleMenu",
      "icon":"icon-palette",
      "label":"My custom styles"
   },
   "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":"Heading 5",
               "data":{
                  "tag":"h5"
               }
            }
         ]
      },
      {
         "label":"Links",
         "items":[
            {
               "label":"Button Link",
               "data":{
                  "tag":"a",
                  "class":"button-link"
               },
               "appearance":{
                  "icon":"icon-link",
                  "style":"border: 1px solid black; padding: 4px 6px;"
               }
            }
         ]
      }
   ]
}

This appears OK in the backoffice when I add it to be my RTE.

But it doesn't do anything to the selected text when I choose it - if I view the RTE source, it's unchanged.

[AndyButland]

P.S. When this is merged, looks like a docs update to add the a tag support is needed here.

[leekelleher]

Sorry, I should have clarified, this was more of an intermediate fix to enable applying class attributes to an existing link (<a> tag). It doesn't create a new link, (mostly because it requires the URL Picker modal for configuration).

I'll set this PR as draft - as there is also Copilot feedback I need to address - and I'll see if I can wire up the URL Picker modal.

[leekelleher]

@AndyButland I've updated the PR with new logic. If the tag: 'a' part is configured (in the style menu manifest), then we try to create an <a> tag if it doesn't already exist. The href will default to #, as wiring up the URL Picker modal into this workflow started to become a significant effort.
We can come back to this in future, but for now this will resolve the issue that users were experiencing.

[nielslyngsoe]

I read the front-end code changes and am happy about that. I'm not completely sure about the issue/use-case but it seems Andy is on to that. So I'm happy about applying this code, leaving it up to you to align on the rest and getting it merged :-)

[AndyButland]

Thanks @leekelleher - this works as you describe, and can see it's an improvement on the existing behaviour and solves the immediate issue. You can click to open the link modal after adding a new <a> tag via this method.

[umbracocommunity]

This pull request has been mentioned on Umbraco community forum. There might be relevant details there:

https://forum.umbraco.com/t/custom-rte-tiptap-style-dropdown-trying-to-applying-a-css-class-to-a-link/6595/20