Whats the valid schema for table nodes in TipTap?

354 views Asked by At

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: <>*

1

There are 1 answers

0
Matt Austin On

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(?).

  const tableNode = {
type: 'table',
withHeaderRow: true, 
content: [{
  type: 'tableRow',
  content:[{
      type: 'tableHeader',
      content: [{
        type: 'paragraph',
        content: [{
          type: 'text',
          text: 'HEADER 1'
        }]
      }]
  },{
      type: 'tableHeader',
      content: [{
        type: 'paragraph',
        content: [{
          type: 'text',
          text: 'HEADER 2'
        }]
      }]
  }]
},{
  type: 'tableRow',
  content:[{
      type: 'tableCell',
      content: [{
        type: 'paragraph',
        content: [{
          type: 'text',
          text: 'ROW 1 - CELL 1'
        }]
      }]
  },{
      type: 'tableCell',
      content: [{
        type: 'paragraph',
        content: [{
          type: 'text',
          text: 'ROW 1 - CELL 2'
        }]
      }]
  }]
}]
  };