Possible to chain extend and configure?

[ryanmunger]

Hello! I am looking to chain and configure the wonderful Table plugin all in one go. Something along the lines of:

const testEditor = [
    Table.extend({
      renderHTML(props) {
        return ['div', props.HTMLAttributes, 0]
      }
    }).configure({
      resizable: true
    }),
];

Is this possible? Thank you in advance for any help!

[kart-c]

Both the methods, return you the extension which allows to chain them together. I think all the official extensions will allow you to do that

[nperez0111]

Yes this is totally correct usage

[ryanmunger]

Thank you. I appreciate the answer!

[ryanmunger]

Hi,

Thanks again for the answer to this one. Just to further clarify (and help anyone else who got stuck in the same position I was), it seems that when resizable was set to true on the Table plugin node configuration, it would wipe any of the addAttributes away when extending (specifically styles). So, based on this thread: #1766 (comment), I was able to cobble together my own solution.

I basically created my own CustomTableView (based on this view in the plugin: https://github.com/ueberdosis/tiptap/blob/main/packages/extension-table/src/TableView.ts) and added this code in the constructor:

if (node.attrs.style) {
    this.table.style = node.attrs.style
}

Then used that in the extend({View: CustomTableView}) section when calling and extending the Table plugin.

Works like a charm! If anyone needs any more info on the workaround, I'd be happy to provide more info.