Custom RTE TipTap Style Dropdown - Trying to applying a CSS class to a link

Questions
,
1

Hello :waving_hand:
I am trying to apply a simple CSS class to a link inserted into the editor.

I have used the custom style menu approach from the docs, which works well in that I can add different header types to insert H1 → H6 and other elements.

I am trying to highlight a link in the TipTap editor that I insert with the toolbar and then use the style dropdown menu approach to then try and apply a CSS class to the <a> tag.

When doing so it applies the CSS class to the parent element in this case a <p> tag as well as the <a> tag.

Video

Configuration

Have I defined the configuration for this incorrectly, or is this a bug or is it intended to work like this?

manifest.ts

export const manifests: Array<UmbExtensionManifest> = [
    {
        name: 'TipTap - Custom Style Menu',
        alias: 'TipTap.StyleMenu',
        type: 'tiptapToolbarExtension',
        kind: 'styleMenu',
        weight: 100,
        meta: {
            alias: "Custom.StyleMenu",
            icon: "icon-palette",
            label: "Styles",
        },
        items: [
            {
                label: 'Links',
                items: [
                    {
                        label: 'Button Link',
                        data: { tag: 'a', class: 'button-link' },
                        appearance: { icon: 'icon-link', style: 'border: 1px solid black; padding: 4px 6px;' }
                    }
                ],
            },
        ]
    },
];
2

Hi @warren I think this might be a bit of both according to the docs though the anchor tag isn’t supported as a HTML tag for the style menu. In-comparison if I was to target the span instead it applies the class correctly to the span within the anchor.

It’s odd that it does partially work but annoying that anchor isn’t supported as it’s such a commonly styled element for the RTE.

Perhaps as a workaround you may have to do some sort of custom extension specifically for targeting anchors?

3

I missed that part of the docs that an <a> tag is not supported.
That is very odd in my opinion that a very common element can not have a class element added to it.

Curious to know how other people are solving this and hoping that I don’t need to write a custom TipTap extension to achieve this.

Hoping some more people see this and have some thoughts on it.

4

Found the source code for this part with the Styles Dropdown in the CMS.
There is no mention of the <a> tag in it.

The docs mention this:

Due to Tiptap’s strict rich-text schema, only supported HTML tags are allowed in the style select menu, (arbitrary markup will be excluded).

But I would say an <a> is not arbitrary markup IMO. I would be curious to hear from the dev gang at HQ who may be able to give deeper context as to why we are not allowed and what the alternative/solution is to apply a simple class to an anchor is (without it applying to other elements)

As to me in my mind it applying to other elements and not just the <a> is a bug, what do you think @jawood1 ?

5

Yeah I would agree but this may also just be an issue with how TipTap works as well.

As TipTap uses a schema with nodes and marks a link is classed as a mark but with the umbraco styles implementation it’s also a mark but the rules around TipTap is that marks can’t be nested so it bubbles up and applies it to the parent element.

6

Hmmm not sure how best to solve this problem then.
Open to any suggestions or ideas…

7

Install the TinyMCE package again and use that…?

1 Like
8

Yep that is one option.
One for me to think about next week. On a different project/client end half of week.

9

don’t know if this extension would help

Link extension | Tiptap Editor Docs

2 Likes
10

We are also running into this problem. A solution or help would be very much appreciated.
The link extension does not seem to solve the problem.

11

It was more a pointer to the link extension code for anyone wanting to write their own extension rather than a solution to the problem itself.

1 Like