© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•6mo ago•
1 reply
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
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 };
                },
            },
        };
    },
});
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources

Similar Threads

Was this page helpful?
Recent Announcements

Similar Threads

Custom buttons/styles for RichEditor?
FilamentFFilament / ❓┊help
2y ago
RichEditor
FilamentFFilament / ❓┊help
3y ago
RichEditor not using custom validation message provided.
FilamentFFilament / ❓┊help
2mo ago
RichEditor - TipTap - Custom Block for embedding HTML
FilamentFFilament / ❓┊help
5mo ago