Tiptap: Possibility to change mention (suggestion) HTML

[ppasler]

Hi there,

I followed the suggestion example here to add mentions to my project. As I am part of a bigger system, I have to follow some "html rules".

I wonder if / how I can change the html of an inserted mention. By default a mention looks like this

<span class="mention" data-mention-id="123" contenteditable="false">
    @Bertha.Walter
</span>

and I want to customize that, so the HTML looks like this

<a class="mention" data-username="Bertha.Walter" userkey="123" href="/display/~Bertha.Walter" data-linked-resource-type="userinfo">
    Bertha.Walter
</a>

Thanks in advance!

[ppasler]

Ok, I managed doing it by extending the Mention class

export default class CustomMention extends Mention {

    get schema() {
        const customSchema = {
            toDOM: node => [
                "a",
                {
                    class: this.options.mentionClass`,
                    "userkey": node.attrs.id,
                    "data-username": node.attrs.label,
                    "data-linked-resource-type": "userinfo",
                    "href": `/display/~${node.attrs.label}`
                },
                node.attrs.label,
            ],
            parseDOM: [
                {
                    tag: "a[userkey]",
                    getAttrs: dom => {
                        const id = dom.getAttribute("userkey");
                        const label = dom.innerText.split(this.options.matcher.char).join("");
                        return {id, label}
                    },
                },
            ],
        };

        return {
            ...super.schema,
            ...customSchema
        }
    }
}