© 2026 Hedgehog Software, LLC

TwitterGitHubDiscord
More
CommunitiesDocsAboutTermsPrivacy
Search
Star
Setup for Free
FilamentF
Filament•12mo ago•
22 replies
TheEvilTomat0

awcodes tiptap editor

We have used this editor in Filament. I would however like to add a class to tables created with the editor. I cannot find how to do that in the plugin. I have seen some solutions for the tiptap editor in general but i cannot find how to do it in the plugin.

#awcodes-tiptap-editor
Solution
resource\js\tiptap\extensions.js
resource\js\tiptap\extensions.js

import Table from "@tiptap/extension-table";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
import TableRow from "@tiptap/extension-table-row";

window.TiptapEditorExtensions = {
    table: [Table.configure({
        HTMLAttributes: {
            class: 'tiptap-table'
        },
    }), TableHeader, TableCell, TableRow],
}
import Table from "@tiptap/extension-table";
import TableCell from "@tiptap/extension-table-cell";
import TableHeader from "@tiptap/extension-table-header";
import TableRow from "@tiptap/extension-table-row";

window.TiptapEditorExtensions = {
    table: [Table.configure({
        HTMLAttributes: {
            class: 'tiptap-table'
        },
    }), TableHeader, TableCell, TableRow],
}

filament-tiptap-editor.php
filament-tiptap-editor.php

'extensions' => [
    [
        'id' => 'table',
        'name' => 'Table',
        'button' => 'filament-tiptap-editor::tools.table',
        'parser' => \App\TiptapExtensions\Table::class,
    ]
],
'extensions' => [
    [
        'id' => 'table',
        'name' => 'Table',
        'button' => 'filament-tiptap-editor::tools.table',
        'parser' => \App\TiptapExtensions\Table::class,
    ]
],

app\TiptapExtensions\AddClass.php
app\TiptapExtensions\AddClass.php

namespace App\TiptapExtensions;

use Tiptap\Nodes\Table as TiptapTable;

class Table extends TiptapTable
{
    public static $priority = 1000;

    public function addOptions(): array
    {
        return [
            'HTMLAttributes' => [
                'class' => 'tiptap-table',
            ],
        ];
    }
}
namespace App\TiptapExtensions;

use Tiptap\Nodes\Table as TiptapTable;

class Table extends TiptapTable
{
    public static $priority = 1000;

    public function addOptions(): array
    {
        return [
            'HTMLAttributes' => [
                'class' => 'tiptap-table',
            ],
        ];
    }
}
Jump to solution
Filament banner
FilamentJoin
A powerful open source UI framework for Laravel • Build and ship admin panels & apps fast with Livewire
20,307Members
Resources
Was this page helpful?

Similar Threads

Recent Announcements

Similar Threads

TipTapEditor Edit Alignment Issue #awcodes-tiptap-editor
FilamentFFilament / ❓┊help
15mo ago
TipTap Editor
FilamentFFilament / ❓┊help
16mo ago
TipTap Editor Issue
FilamentFFilament / ❓┊help
16mo ago
Tiptap Editor overflow problem
FilamentFFilament / ❓┊help
13mo ago