Filament•2mo 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

Solution:

resource\js\tiptap\extensions.js ```js import Table from "@tiptap/extension-table"; import TableCell from "@tiptap/extension-table-cell"; import TableHeader from "@tiptap/extension-table-header";...

Jump to solution

15 Replies

LeandroFerreira•2mo ago

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

TheEvilTomat0OP•2mo 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•2mo 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•2mo 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•2mo 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•2mo 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•2mo 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•2mo 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•2mo 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•2mo ago

Aah oke, i will replace it Did you mean replace addClass with table in the filament-tiptap-editor config? like this:

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

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

Or in the extensions.js like this:

import AddClass from './addclass.js';

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

import AddClass from './addclass.js';

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

awcodes•2mo ago

Both. Just change it all to Table

TheEvilTomat0OP•2mo ago

Sorry to bother you again, but unfortunately it's still not working. Not sure if i'm doing something wrong here. Please see my code: resource\js\tiptap\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;

resource\js\tiptap\extensions.js

import AddClass from './addclass.js';

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

import AddClass from './addclass.js';

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

filament-tiptap-editor.php

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

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

app\TiptapExtensions\AddClass.php

<?php

namespace App\TiptapExtensions;

use Tiptap\Core\Node;

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

<?php

namespace App\TiptapExtensions;

use Tiptap\Core\Node;

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

vite.config.js

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/js/tiptap/extensions.js',
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**',
            ],
        }),
    ],
});

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'resources/js/tiptap/extensions.js',
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**',
            ],
        }),
    ],
});

I did encounter an error when i ran npm run build It said [vite]: Rollup failed to resolve import "@tiptap/extension-table" from but fixed that by running npm install @tiptap/extension-table. When i add a table in my editor i see no class appearing in the inspector or when i open the editor with the source tool.

Solution

awcodes•2mo ago

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

'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

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',
            ],
        ];
    }
}

awcodes•2mo ago

you don't even need the custom js extension file in this case

TheEvilTomat0OP•2w ago

Oh sorry i haven't replied anymore, it worked btw. When i save the table to the database i see the class is set! So thanks for that 😊

Gaming

Programming

awcodes tiptap editor

Did you find this page helpful?