Table Row Node Type – contenteditable.lab

Schema Definition

Schema definition for the Table Row node type:

{
  tableRow: {
    content: '(tableCell | tableHeader)+',
    tableRole: 'row',
  }
}

Model Representation

Example model representation:

{
  type: 'tableRow',
  children: [
    {
      type: 'tableHeader',
      children: [{ type: 'paragraph', children: [{ type: 'text', text: 'Header' }] }]
    },
    {
      type: 'tableCell',
      children: [{ type: 'paragraph', children: [{ type: 'text', text: 'Cell' }] }]
    }
  ]
}

HTML Serialization

Converting model to HTML:

function serializeTableRow(node) {
  return '<tr>' + serializeChildren(node.children) + '</tr>';
}

HTML Deserialization

Parsing HTML to model:

function parseTableRow(domNode) {
  return {
    type: 'tableRow',
    children: Array.from(domNode.children)
      .map(child => parseNode(child))
      .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 row
const tr = document.createElement('tr');
tr.contentEditable = 'true';
node.children.forEach(cell => {
  tr.appendChild(renderNode(cell));
}

// Adding new row
function addTableRow(table) {
  const row = {
    type: 'tableRow',
    children: Array.from({ length: table.attrs.cols || 1 }, () => ({
      type: 'tableCell',
      children: [{ type: 'paragraph', children: [] }]
    }))
  };
  insertNode(row);
}

Common Issues

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

Common issues and solutions:

// Issue: Row cell count mismatch
// Solution: Ensure consistent cell count
function validateRowCells(row, expectedCount) {
  const cells = row.querySelectorAll('td, th');
  if (cells.length !== expectedCount) {
    // Add or remove cells to match
    while (cells.length < expectedCount) {
      const cell = document.createElement('td');
      cell.appendChild(document.createElement('p'));
      row.appendChild(cell);
    }
    while (cells.length > expectedCount) {
      row.removeChild(cells[cells.length - 1]);
    }
  }
}

// Issue: Row selection
// Solution: Handle row selection
function selectRow(tr) {
  const range = document.createRange();
  range.selectNodeContents(tr);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
}

Implementation

Complete implementation example:

class TableRowNode {
  constructor(children) {
    this.type = 'tableRow';
    this.children = children || [];
  }
  
  toDOM() {
    const tr = document.createElement('tr');
    this.children.forEach(child => {
      tr.appendChild(child.toDOM());
    });
    return tr;
  }
  
  static fromDOM(domNode) {
    return new TableRowNode(
      Array.from(domNode.children)
        .map(child => parseNode(child))
        .filter(Boolean)
    );
  }
}