F
Filament•2mo ago
mmoollllee

Custom RichEditor LinkPicker

I'm trying to create a custom Link Picker to replace the original Link Tool in the Editor, because I want to be able to add class names to a attributes. For the Editor in the Panel it works, but using it as plugin for the RichContentRenderer seems to parse both, the original and my custom one, resulting in two nested a-Elements. link-picker.js 
import { Link } from "@tiptap/extension-link";

export default Link.extend({
    addOptions() {
        return {
            ...this.parent?.(),
            // prevent a second autolink plugin from being added
            autolink: false,
            linkOnPaste: false,
        };
    },
    addAttributes() {
        return {
            // Preserve any existing attributes from the parent Link extension:
            ...this.parent?.(),
            // Define a new 'class' attribute for link marks:
            class: {
                default: null,
                parseHTML: (element) => element.getAttribute("class"),
                renderHTML: (attributes) => {
                    // Only include the class attribute if it’s set
                    if (!attributes.class) return {};
                    return { class: attributes.class };
                },
            },
        };
    },
});
import { Link } from "@tiptap/extension-link";

export default Link.extend({
    addOptions() {
        return {
            ...this.parent?.(),
            // prevent a second autolink plugin from being added
            autolink: false,
            linkOnPaste: false,
        };
    },
    addAttributes() {
        return {
            // Preserve any existing attributes from the parent Link extension:
            ...this.parent?.(),
            // Define a new 'class' attribute for link marks:
            class: {
                default: null,
                parseHTML: (element) => element.getAttribute("class"),
                renderHTML: (attributes) => {
                    // Only include the class attribute if it’s set
                    if (!attributes.class) return {};
                    return { class: attributes.class };
                },
            },
        };
    },
});
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?