prosemirror-tables supporting table sections(thead, tbody, tfoot) - problem with colgroup

1

Hello, I modified the code of prosemirror-tables to support table sections: thead, tbody, tfoot (and caption).

My goal is supporting the table structure of Pandoc.

I’m going to publish it on github, but I have two problems:

  • choosing an appropriate name: prosemirror-tables-sections, prosemirror-tables-plus, something else?

  • how to implement the colgroup DOM element

The code seems to work fine, I’ve adapted the tests and they all pass. I’m getting rid of the custom TableView of prosemirror-tables, because this is the new schema:

const schema = {
    table: {
      // content: 'table_row+',
      content: 'table_caption? table_head? table_body+ table_foot?',
      tableRole: 'table',
      isolating: true,
      group: options.tableGroup,
      attrs: tableAttrs,
      parseDOM: [{ tag: 'table' }],
      toDOM() {
        // return ['table', ['tbody', 0]];
        return ['table']
      },
    },
    table_caption: {
      content: 'block+',
      tableRole: 'caption',
      isolating: true,
      parseDOM: [{ tag: 'caption' }],
      toDOM() {
        return ['caption', 0];
      },
    },
    table_head: {
      content: 'table_row+',
      tableRole: 'table_section',
      isolating: true,
      parseDOM: [{ tag: 'thead' }],
      toDOM() {
        return ['thead', 0];
      },
    },
    table_foot: {
      content: 'table_row+',
      tableRole: 'table_section',
      isolating: true,
      parseDOM: [{ tag: 'tfoot' }],
      toDOM() {
        return ['tfoot', 0];
      },
    },
    table_body: {
      content: 'table_row+',
      tableRole: 'table_section',
      isolating: true,
      parseDOM: [{ tag: 'tbody' }],
      toDOM() {
        return ['tbody', 0];
      },
    },
    table_row: {
      content: '(table_cell | table_header)*',
      tableRole: 'row',
      parseDOM: [{ tag: 'tr' }],
      toDOM() {
        return ['tr', 0];
      },
    },
    table_cell: {
      content: options.cellContent,
      attrs: cellAttrs,
      tableRole: 'cell',
      isolating: true,
      parseDOM: [
        { tag: 'td', getAttrs: (dom) => getCellAttrs(dom, extraAttrs) },
      ],
      toDOM(node) {
        return ['td', setCellAttrs(node, extraAttrs), 0];
      },
    },
    table_header: {
      content: options.cellContent,
      attrs: cellAttrs,
      tableRole: 'header_cell',
      isolating: true,
      parseDOM: [
        { tag: 'th', getAttrs: (dom) => getCellAttrs(dom, extraAttrs) },
      ],
      toDOM(node) {
        return ['th', setCellAttrs(node, extraAttrs), 0];
      },
    },
  };

TableView created and managed the colgroup element. Since I can’t write something like this for the table node:

      toDOM() {
        // return ['table', ['tbody', 0]];
        return ['table', ['colgroup'], 0]
      },

A solution could be setting the content of a table to:

'colgroup table_caption? table_head? table_body+ table_foot?'

where colgroup would be an atomic element to be created automatically.

Is there a better solution?

2 Likes
2

Sorry for the poor explanation of the colgroup problem.

I’ll try to explain it better:

prosemirror-tables (PMT from now on) defines a custom view (TableView) for the table Node, that automatically creates a colgroup and a tbody elements. The custom View also manages the col DOM elements under colgroup, according to the value of the columns’ widths. The tbody is the contentDOM element to which the children of the table Node are attached. The contentDOM must be a single HTML DOM element.

In my implementation – let’s call it prosemirror-table-sections, PMTS – the HTML table element is the contentDOM of an ordinary (non custom) View. The caption, table head, bodies and foot of the table have their own Nodes in the schema (see above), and they are rendered with HTML caption, thead, tbody and tfoot elements.

The problem is colgroup, which is child of the table element in the DOM, but it should be automatically generated.

And colgroup is necessary to let users modify column widths, as it happens in PMT.

I thought of two ways:

  • make the colgroup node explicit and compulsory in the schema

  • make it a widget decoration of a table (this is a dirty trick)

1 Like
3

prosemirror-tables-sections is online.

I’m using decorations to generate the colgroup element and no TableView.

1 Like