[Bug]: Cannot extend and configure a Table extension

[rezaffm]

Which packages did you experience the bug in?

table

What Tiptap version are you using?

Latest (stable)

What’s the bug you are facing?

If doing something like

  const CustomTable = Table.extend({
      renderHTML({ HTMLAttributes }) {
          return ['div', { class: 'table-responsive' }, ['table', HTMLAttributes, ['tbody', 0]]];
      },
  });

will not work when doing:

          CustomTable.configure({
             cellMinWidth: 100,
             resizable: true
           }),

However, if works when you just do

  CustomTable

Obviously when setting the extensions of the editor.

What browser are you using?

Chrome

Code example

No response

What did you expect to happen?

n/a

Anything to add? (optional)

No response

Did you update your dependencies?

• [X] Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• [ ] Yes, I’m a sponsor. 💖

[Mynraw]

any updates on this? i have added alignment feature to the tables but it doesn't work when extending default table with addOptions.

[Nantris]

Do you get any error?

When we try to both extend and configure an extension (not table) we face this issue: https://github.com/ueberdosis/tiptap/issues/4704

[Mynraw]

Hi, I wasn't be able to get any errors. Having configure is just override the custom attributes or ignore them somehow. For instance, I wanted to keep resizable option while aligning the table attribute being implemented as well. In this scenario custom attr. didn't work and resizing was working as intended. I had to give up on resizing at the end.

addOptions() {
            return {
                ...this.parent?.(),
                resizable: true,
                allowTableNodeSelection: true,
            }
        },
addAttributes() {
            return {
                align: {
                    parseHTML: (element) => {
                        const tableStyle = element.getAttribute("align");
                        return tableStyle;
                    },
                    renderHTML: (attributes) => {

                        if (attributes.align === null) {
                            return { align: 'center' };
                        }

                        return { align: attributes.align };
                    }
                },

Tiptap version I've been using: 2.1.13

[Nantris]

@Mynraw I'm not entirely clear on what you're saying, but if I'm reading it correctly it sounds like a limitation (of mixing align with resize) rather than a bug?

[Mynraw]

Hey once again, sorry for the inconvenience. What I meant was I had to extend the table plugin so users could align tables, but when I also added the table's default features, such as resizing cells, the alignment was not working and the styling features were lost (e.g. a table copied from word)

It doesn't matter anymore since I've switched to a different rich text editor package. Thanks anyway.

[Nantris]

@Mynraw I don't think this is a bug. I think you've overlooked including the default values in your custom renderHTML and parseHTML as well: https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table/src/table.ts#L111-L133

If this resolves your issue, be sure to remember to close it! If not let me know.