FilamentF
Filament•11mo ago
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
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
'extensions' => [
    [
        'id' => 'table',
        'name' => 'Table',
        'button' => 'filament-tiptap-editor::tools.table',
        'parser' => \App\TiptapExtensions\Table::class,
    ]
],

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',
            ],
        ];
    }
}
Jump to solution
Was this page helpful?