How to insert content with JavaScript behavior and avoid infinite loop of mutation observer ?

[tonai]

I am trying to create a button that will insert a table inside a tiptap editor.
But I need to wrap that table inside a div to get the styles from the design system I use.
But not only the styles, the design system also adds some features (it basically calculates a dynamically pading for the caption).
I extended the @tiptap/extension-table to do that:

import Table from "@tiptap/extension-table";
const TableExtension = Table.extend({
    parseHTML() {
        return [{ tag: ".fr-table" }];
    },
    renderHTML({ node, HTMLAttributes }) {
        const table = this.parent?.({ node, HTMLAttributes });
        return ["div", { class: "fr-table" }, table];
    },
});
export default TableExtension;

The problem is that when I click the buttons that runs the command editor.chain().focus().insertTable({ rows: 2, cols: 2 }).run() I got stuck in an infinite loop.
I think it is doing the following:

1. it goes through the renderHTML function and insert the HTML: <div class="fr-table"><table>...</table></div>
2. then the design system library is doing some transformation: adding a style attribute and some data attributes to the div
3. that transformation triggers the mutation observer from tiptap
4. it reruns the renderHTML function that return the same HTML as in step 1 (without the styles and data attributes)
5. it retriggers the design system..Etc.

How can I insert my custom table without ending in this infinite loop ?

Thanks a lot

[nperez0111]

You should not touch the elements generated by tiptap. So, unfortunately you may have to drop your design system (or at least tell it to not modify the html).