Filament•3d ago

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

10 Replies

LeandroFerreira•3d ago

I have seen some solutions for the tiptap editor what solutions, could you share it?

TheEvilTomat0OP•3d ago

https://stackoverflow.com/questions/75581538/add-a-class-to-a-paragraph-node-in-tiptap

Stack Overflow

Add a class to a paragraph node in TipTap

I'm stuck trying to accomplish what I'd imagine is a very simple task in TipTap 2.0. I'm trying to add a class to a selected paragraph. The code I'm trying is below: this.editor.chain().focus().

LeandroFerreira•3d ago

Tiptap supports custom extensions https://filamentphp.com/plugins/awcodes-tiptap-editor#custom-extensions

Filament

Tiptap Editor by Adam Weston - Filament

A Rich Text Editor plugin for Filament Forms.

TheEvilTomat0OP•2d ago

Alright thanks, I'll gonna try this. Hmm i can't really figure out how this is used. I want to have a predefined css class on my tables. What i did added a addclass.js:

import Table from '@tiptap/extension-table'

const AddClass = Table.configure({
    HTMLAtributes: {
        table: {
            class: 'tiptap-table',
        },
    },
})

export default AddClass

import Table from '@tiptap/extension-table'

const AddClass = Table.configure({
    HTMLAtributes: {
        table: {
            class: 'tiptap-table',
        },
    },
})

export default AddClass

Made an extensions.js and loaded in the addclass:

import AddClass from './addclass.js';

window.TiptapEditorExtensions = {
    addClass: [AddClass],
}

import AddClass from './addclass.js';

window.TiptapEditorExtensions = {
    addClass: [AddClass],
}

Than made a new class in app\TiptapExtensions\AddClass.php

<?php

namespace App\TiptapExtensions;

use Tiptap\Core\Node;

class AddClass extends Node
{
    public static $name = 'addClass';
}

<?php

namespace App\TiptapExtensions;

use Tiptap\Core\Node;

class AddClass extends Node
{
    public static $name = 'addClass';
}

Also added the resources/js/tiptap/extensions.js line to my vite.config and in my filament-tiptap-editor.php added this:

'extensions_script' => null,
    'extensions_styles' => null,
    'extensions' => [
        [
            'name' => 'addClass',
            'parser' => \App\TiptapExtensions\AddClass::class,
        ],
    ],

'extensions_script' => null,
    'extensions_styles' => null,
    'extensions' => [
        [
            'name' => 'addClass',
            'parser' => \App\TiptapExtensions\AddClass::class,
        ],
    ],

Please see my comment above, don't know if you get a notification when i just send a new message in the channel

awcodes•2d ago

If it’s all tables do you even need class on them? You could target them with a selector higher up the tree. Something like ‘.tiptap table’

TheEvilTomat0OP•2d ago

Yes, the tables are getting exported as a pdf. Tried to target it with the selectors higher up but the styling is't getting passed on. It works when i directly add a class through the 'source' tool. But i don't want to add the class manually everytime some one adds a new table.

awcodes•2d ago

Ok. Based on what you shared then. I think the problem is that you need to call your extension Table as well so that when it gets registered with the plugin it will override the default table that’s already included.

TheEvilTomat0OP•2d ago

So you mean that i need to create a new extension, include everything from the original table tool and then add the class there? There is no option to just add the class in some configuration then or add the class to the existing table tool?

awcodes•2d ago

No, you just need to extend Tiptap’s table like you have done. But when you add it to the extensions array you need to call it Table instead off addClass The extensions all get merged so anything in custom with the same key will replace anything in core.

TheEvilTomat0OP•2d ago

Aah oke, i will replace it

Gaming

Programming

awcodes tiptap editor

Did you find this page helpful?