How to Apply Default Styles Only When Inserting a Table Using the Table Insert Command in Tiptap?

[its-me-dhina]

I’m working on a custom table node in Tiptap where I want to apply default styles only when a table is inserted using the insertTable command via the editor's chainable commands.

Currently, I have extended the Table extension and added attributes like style, cellpadding, cellspacing, etc., and I’m using a utility to merge styles. Here’s a simplified version of the code:

import { mergeStyles } from '@/helper/utils';
import { Table } from '@tiptap/extension-table';

const CustomTable = Table.extend({
  addAttributes() {
    return {
      ...this.parent?.(),
      style: {
        default: null,
        parseHTML: (element) => element.getAttribute('style'),
        renderHTML: ({ style = '' }) => {
          const defaultStyle =
            'box-sizing: border-box; border-collapse: collapse; margin: 0; overflow-x: auto; padding: 4px; table-layout: auto;';

          const mergedStyles = mergeStyles(style, defaultStyle);

          return { style: mergedStyles };
        },
      },
      // Other attributes...
    };
  },
  renderHTML({ HTMLAttributes }) {
    return ['table', HTMLAttributes, 0];
  },
}).configure({ resizable: false });

export default CustomTable;

Problem: I want the default styles (like table-layout, box-sizing, etc.) to be applied only when the table is inserted using the command:

editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run();

However, I don’t want these styles to be applied in other cases, such as when pasting HTML with a table or when importing HTML. Is there a way to differentiate between these cases, so I can apply the default styles conditionally?

Any suggestions on how to approach this would be appreciated!