[Bug]: table add HTMLAttributes

[xiaolizi333]

Affected Packages

"@tiptap/extension-code-block-lowlight": "^2.11.5",     "@tiptap/extension-image": "^2.11.5",     "@tiptap/extension-table": "^2.11.5",     "@tiptap/extension-table-cell": "^2.11.5",     "@tiptap/extension-table-header": "^2.11.5",     "@tiptap/extension-table-row": "^2.11.5",     "@tiptap/extension-underline": "^2.11.5",     "@tiptap/pm": "^2.11.5",     "@tiptap/starter-kit": "^2.11.5",     "@tiptap/vue-3": "^2.11.5",

Version(s)

vue:^3.5.13

Bug Description

i try to add HTMLAttributes，use your methods:

table.configure({
  HTMLAttributes: {
    class: 'my-table-class',
  },
})

it work,but when i try to put 'resizable 'into the configure,that's when it become:

table.configure({
  HTMLAttributes: {
    class: 'my-table-class',
  },
resizable: true,
})

the 'HTMLAttributes' become failure,
and when i try to put something customize attrs like :

table.configure({
    // HTMLAttributes: {
    //   class: 'tiptap-table',
    // },
    HTMLAttributes: {
      // 自动生成唯一ID
      'data-node-id': () => `table-${Math.random().toString(36).slice(2, 9)}`
    },
    resizable: true, 
    allowTableNodeSelection: true,
  })

it dosen't work too.
that is to say:
when i add "resizable" or "allowTableNodeSelection"(this atts i try too) to table.configure,it will cause the failure of the atts:"HTMLAttributes"
and by the way:

'data-node-id': () => `table-${Math.random().toString(36).slice(2, 9)}`

the function become String in web，i think everytime i create a table i will add a different data-node-id,like 'data-node-id: table-jfc5mwe',instead of a String: 'data-node-id': () => table-${Math.random().toString(36).slice(2, 9)}

Browser Used

Chrome

Code Example URL

No response

Expected Behavior

all the atts you show should not be mutually exclusive

Additional Context (Optional)

No response

Dependency Updates

• Yes, I've updated all my dependencies.

[guanriyue]

You have two issues here in total. Let me explain the reasons.

1. After adding the 'resizable' config, the HTML attributes became ineffective.
   This is because Tiptap relies on prosemirror-tables.
   When resizable is enabled, the columnResizing plugin is registered in the editor, which forces a nodeView for the table node. This nodeView does not consume the HTMLAttributes you provide.

   tiptap/packages/extension-table/src/table.ts

   Lines 429 to 438 in f3258d9

   	...(isResizable
   	? [
   	columnResizing({
   	handleWidth: this.options.handleWidth,
   	cellMinWidth: this.options.cellMinWidth,
   	defaultCellMinWidth: this.options.cellMinWidth,
   	View: this.options.View,
   	lastColumnResizable: this.options.lastColumnResizable,
   	}),
   	]

   https://github.com/ProseMirror/prosemirror-tables/blob/b0130d3bea42c368d38c47dcd5ff09f40dfdd33e/src/columnresizing.ts#L67-L76

   Conversely, when resizable is not enabled, the plugin is not registered, and since no nodeView is provided for the table in the editor, it directly uses renderHTML to convert the node into a DOM element displayed on the web page. In this case, HTMLAttributes are correctly applied.

   tiptap/packages/extension-table/src/table.ts

   Lines 284 to 293 in f3258d9

   	const table: DOMOutputSpec = [
   	'table',
   	mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
   	style: tableWidth
   	? `width: ${tableWidth}`
   	: `min-width: ${tableMinWidth}`,
   	}),
   	colgroup,
   	['tbody', 0],
   	]

2. Adding data-node-id has no effect and does not assign a unique ID to each table as expected.
   You cannot add a unique ID to a node (of any type) using this method.
   Tiptap's HTMLAttributes only attach additional HTML attributes to a node. Can we provide a function as an attribute for an HTML tag? Obviously not. You might expect that each time a table node is generated, your function would be automatically called to get an ID, but this is not possible.
   The simplest and most effective solution is to use Tiptap's ID extension (available in Tiptap Pro) or implement a custom uniqueID plugin.