I've building a TipTap editor from structured data using insertContent() to add nodes programmatically.
This has worked really well until I've tried to build and add a table.
All the examples I can find show creating a table from html but I'm very keen to build the content from the structured data I already have in context.
I've tried hundreds of variations of the following syntax but I can't seem to get the right structure of data to pass into insertContent()... does anyone know how this data should be properly structured?
const tableNode = {
type: 'table',
rowsCount: 3,
colsCount: 3,
withHeaderRow: true,
headerCells: [{
cellContent: [{ type: 'text', text: 'Header 1' }],
}],
cells: [{
cellContent: [{ type: 'text', text: 'Cell 1' }],
}]
};
editor.value?.chain().focus().insertContent(letterContent).run()
Note: The above code yields the following error in javascript:
*RangeError: Invalid content for node table: <>*
Ok, after hours or guessing I managed to figure this out so posting in case someone else needs it in the future.
Tables and headers are both defined as nodes with type="tableRow". The content of a tableRow is an array of nodes of type tableHeader or tableCell. Each of those expects content like a paragraph (although could maybe be other types(?).