TheEvilTomat0 Comments - Answer Overflow

TheEvilTomat0

•Created by TheEvilTomat0 on 2/20/2025 in #❓┊help

awcodes tiptap editor

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 😊

23 replies

FFilament

•Created by TheEvilTomat0 on 2/20/2025 in #❓┊help

awcodes tiptap editor

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.

23 replies

FFilament

•Created by TheEvilTomat0 on 2/20/2025 in #❓┊help

awcodes tiptap editor

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

23 replies

FFilament

•Created by TheEvilTomat0 on 2/20/2025 in #❓┊help

awcodes tiptap editor

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,
        ],
    ],

23 replies

FFilament

•Created by TheEvilTomat0 on 2/20/2025 in #❓┊help

awcodes tiptap editor

Aah oke, i will replace it

23 replies

FFilament

•Created by TheEvilTomat0 on 2/20/2025 in #❓┊help

awcodes tiptap editor

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?

23 replies

FFilament

•Created by TheEvilTomat0 on 2/20/2025 in #❓┊help

awcodes tiptap editor

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.

23 replies

FFilament

•Created by TheEvilTomat0 on 2/20/2025 in #❓┊help

awcodes tiptap editor

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

23 replies

FFilament

•Created by TheEvilTomat0 on 2/20/2025 in #❓┊help

awcodes tiptap editor

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,
        ],
    ],