테이블 행 노드 타입 – contenteditable.lab

스키마 정의

테이블 행 노드 타입의 스키마 정의:

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

모델 표현

모델 표현 예제:

{
  type: 'tableRow',
  children: [
    {
      type: 'tableHeader',
      children: [{ type: 'paragraph', children: [{ type: 'text', text: '헤더' }] }]
    },
    {
      type: 'tableCell',
      children: [{ type: 'paragraph', children: [{ type: 'text', text: '셀' }] }]
    }
  ]
}

HTML 직렬화

모델을 HTML로 변환:

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

HTML 역직렬화

HTML을 모델로 파싱:

function parseTableRow(domNode) {
  return {
    type: 'tableRow',
    children: Array.from(domNode.children)
      .map(child => parseNode(child))
      .filter(Boolean)
  };
}

뷰 연동

뷰 연동 노트: 이 노드 타입을 뷰 레이어에서 구현할 때 contenteditable 동작, 선택 처리, 이벤트 관리에 특히 주의하세요.

뷰 연동 코드:

// 테이블 행 렌더링
const tr = document.createElement('tr');
tr.contentEditable = 'true';
node.children.forEach(cell => {
  tr.appendChild(renderNode(cell));
}

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

일반적인 문제

일반적인 함정: 이 노드 타입을 구현할 때 자주 발생하는 문제들입니다. 구현 전에 주의 깊게 검토하세요.

일반적인 문제 및 해결 방법:

// 문제: 행 셀 개수 불일치
// 해결: 일관된 셀 개수 보장
function validateRowCells(row, expectedCount) {
  const cells = row.querySelectorAll('td, th');
  if (cells.length !== expectedCount) {
    // 일치하도록 셀 추가 또는 제거
    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]);
    }
  }
}

// 문제: 행 선택
// 해결: 행 선택 처리
function selectRow(tr) {
  const range = document.createRange();
  range.selectNodeContents(tr);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
}

구현

완전한 구현 예제:

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)
    );
  }
}