I am using tiptap and I am trying to implement a ColumnGroup Extension. I actually got it to work writing a custom command for insertion, but I am struggling to render the columnGroup correctly when it is defined as a content string.
For example, the following works just fine for the table extension, but trying to get something similar for my ColumnGroup just never parses correctly:
<tr>
<th>Name</th>
<th colspan="3">Description</th>
</tr>
<tr>
<td>Cyndi Lauper</td>
<td>Singer</td>
<td>Songwriter</td>
<td>Actress</td>
</tr>
</tbody>
Looking at the table extensions source code they do something that actually causes an error when I try to replicate it:
const { colgroup, tableWidth, tableMinWidth } = createColGroup(
node,
this.options.cellMinWidth,
)
const table: DOMOutputSpec = [
'table',
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
style: tableWidth
? `width: ${tableWidth}`
: `min-width: ${tableMinWidth}`,
}),
colgroup,
['tbody', 0],
]
return table
},
The error I get is “multiple holes”, because allegedly you are not allowed to actually have more than 1 child?
I am using this with vue so I also have a NodeViewWrapper and NodeViewContent. Does that have anything to do with it?
Before providing much code and making this an even longer post than it is already, I just wanted to ask if somebody has any experience with this and knows about this error. Maybe I am missing something about how things work in general.