F
Filament•4w ago
TheEvilTomat0

Classes and closing tags are repeating in custom extension TipTap

We've created and extended some extensions for the #awcodes-tiptap-editor. The problem we're facing now is that everytime we save the class is added again to the already existing element. Also when we save it apears it adds multiple closing tags at the end. It appears it does this only for the table tags. Is this a known problem? If so, how can we fix it? Preview of how the code is being saved 
"content":"<table class=\"tiptap-table tiptap-table\"><tbody><tr><th rowspan=\"1\" colspan=\"1\"><p>asd<\/p><\/th><th rowspan=\"1\" colspan=\"1\"><p>asd<\/p><\/th><th rowspan=\"1\" colspan=\"1\"><p>asd<\/p><\/th><\/tr><tr><td rowspan=\"1\" colspan=\"1\"><p>aa<\/p><\/td><td rowspan=\"1\" colspan=\"1\"><p>aa<\/p><\/td><td rowspan=\"1\" colspan=\"1\"><p>aa<\/p><\/td><\/tr><tr><td rowspan=\"1\" colspan=\"1\"><p>zz<\/p><\/td><td rowspan=\"1\" colspan=\"1\"><p>zz<\/p><\/td><td rowspan=\"1\" colspan=\"1\"><p>zz<\/p><\/td><\/tr><\/tbody><\/table><\/tbody><\/table>"
"content":"<table class=\"tiptap-table tiptap-table\"><tbody><tr><th rowspan=\"1\" colspan=\"1\"><p>asd<\/p><\/th><th rowspan=\"1\" colspan=\"1\"><p>asd<\/p><\/th><th rowspan=\"1\" colspan=\"1\"><p>asd<\/p><\/th><\/tr><tr><td rowspan=\"1\" colspan=\"1\"><p>aa<\/p><\/td><td rowspan=\"1\" colspan=\"1\"><p>aa<\/p><\/td><td rowspan=\"1\" colspan=\"1\"><p>aa<\/p><\/td><\/tr><tr><td rowspan=\"1\" colspan=\"1\"><p>zz<\/p><\/td><td rowspan=\"1\" colspan=\"1\"><p>zz<\/p><\/td><td rowspan=\"1\" colspan=\"1\"><p>zz<\/p><\/td><\/tr><\/tbody><\/table><\/tbody><\/table>"
3 Replies
TheEvilTomat0
TheEvilTomat0OP•4w ago
My own code: resources > 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";

import Pagebreak from './pagebreak'
import Tags from "./tags";

window.TiptapEditorExtensions = {
    table: [Table.configure({
        HTMLAttributes: {
            class: 'tiptap-table'
        },
    }), TableHeader, TableCell, TableRow],
    pagebreak: [Pagebreak.configure({
        HTMLAttributes: {
            'class': 'pagebreak'
        },
    })],
    
    tags: [Tags.configure({
        HTMLAttributes: {
            class: 'tiptap-tag',
        },
    })],
}
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";

import Pagebreak from './pagebreak'
import Tags from "./tags";

window.TiptapEditorExtensions = {
    table: [Table.configure({
        HTMLAttributes: {
            class: 'tiptap-table'
        },
    }), TableHeader, TableCell, TableRow],
    pagebreak: [Pagebreak.configure({
        HTMLAttributes: {
            'class': 'pagebreak'
        },
    })],
    
    tags: [Tags.configure({
        HTMLAttributes: {
            class: 'tiptap-tag',
        },
    })],
}
App > TiptapExtensions > Table.php 
<?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',
            ],
        ];
    }
}
<?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',
            ],
        ];
    }
}
Dennis Koch
Dennis Koch•4w ago
Best to ask in #awcodes-tiptap-editor
awcodes
awcodes•4w ago
I think the issue is the underlying Tiptap js extension which has not context of classes. But more importantly, why do you need a class on it? There’s other ways to style it if that’s the use case.

Did you find this page helpful?