Table Header Node Type – contenteditable.lab

Schema Definition

Schema definition for the Table Header node type:

{
  tableHeader: {
    content: 'block+',
    tableRole: 'header_cell',
    isolating: true,
    attrs: {
      colspan: { default: 1 },
      rowspan: { default: 1 }
    },
                      node.attrs.rowspan > 1 ? { rowspan: node.attrs.rowspan } : {}, 0]
  }
}

Model Representation

Example model representation:

{
  type: 'tableHeader',
  attrs: { colspan: 1, rowspan: 1 },
  children: [
    {
      type: 'paragraph',
      children: [{ type: 'text', text: 'Header' }]
    }
  ]
}

HTML Serialization

Converting model to HTML:

function serializeTableHeader(node) {
  const attrs = {};
  if (node.attrs.colspan > 1) attrs.colspan = node.attrs.colspan;
  if (node.attrs.rowspan > 1) attrs.rowspan = node.attrs.rowspan;
  return '<th' + serializeAttrs(attrs) + '>' + 
         serializeChildren(node.children) + '</th>';
}

HTML Deserialization

Parsing HTML to model:

function parseTableHeader(domNode) {
  return {
    type: 'tableHeader',
    attrs: {
      colspan: parseInt(domNode.getAttribute('colspan')) || 1,
      rowspan: parseInt(domNode.getAttribute('rowspan')) || 1
    },
    children: Array.from(domNode.childNodes)
      .map(node => parseNode(node))
      .filter(Boolean)
  };
}

View Integration

View Integration Notes: Pay special attention to contenteditable behavior, selection handling, and event management when implementing this node type in your view layer.

View integration code:

// Rendering table header
const th = document.createElement('th');
th.contentEditable = 'true';
if (node.attrs.colspan > 1) th.colSpan = node.attrs.colspan;
if (node.attrs.rowspan > 1) th.rowSpan = node.attrs.rowspan;
node.children.forEach(child => {
  th.appendChild(renderNode(child));
}

Common Issues

Common Pitfalls: These are issues frequently encountered when implementing this node type. Review carefully before implementation.

Common issues and solutions:

// Issue: Header styling
// Solution: Apply consistent header styles
function styleTableHeader(th) {
  th.style.fontWeight = 'bold';
  th.style.textAlign = 'center';
}

// Issue: Scope attribute
// Solution: Set scope for accessibility
function setHeaderScope(th, scope) {
  th.setAttribute('scope', scope); // 'col' or 'row'
}

Implementation

Complete implementation example:

class TableHeaderNode {
  constructor(attrs, children) {
    this.type = 'tableHeader';
    this.attrs = {
      colspan: attrs?.colspan || 1,
      rowspan: attrs?.rowspan || 1
    };
    this.children = children || [];
  }
  
  toDOM() {
    const th = document.createElement('th');
    if (this.attrs.colspan > 1) th.colSpan = this.attrs.colspan;
    if (this.attrs.rowspan > 1) th.rowSpan = this.attrs.rowspan;
    this.children.forEach(child => {
      th.appendChild(child.toDOM());
    });
    return th;
  }
  
  static fromDOM(domNode) {
    return new TableHeaderNode(
      {
        colspan: parseInt(domNode.getAttribute('colspan')) || 1,
        rowspan: parseInt(domNode.getAttribute('rowspan')) || 1
      },
      Array.from(domNode.childNodes)
        .map(node => parseNode(node))
        .filter(Boolean)
    );
  }
}