목록 항목 노드 타입 – contenteditable.lab

스키마 정의

목록 항목 노드 타입의 스키마 정의:

{
  listItem: {
    content: 'paragraph block*',
    group: 'block',
    defining: true
  }
}

모델 표현

모델 표현 예제:

{
  type: 'listItem',
  children: [
    {
      type: 'paragraph',
      children: [{ type: 'text', text: '목록 항목 콘텐츠' }]
    }
  ]
}

HTML 직렬화

모델을 HTML로 변환:

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

HTML 역직렬화

HTML을 모델로 파싱:

function parseListItem(domNode) {
  return {
    type: 'listItem',
    children: Array.from(domNode.childNodes)
      .map(node => parseNode(node))
      .filter(Boolean)
  };
}

뷰 연동

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

뷰 연동 코드:

// 목록 항목 렌더링
const li = document.createElement('li');
li.contentEditable = 'true';
node.children.forEach(child => {
  li.appendChild(renderNode(child));
});

// 목록 항목에서 Enter 키 처리
function handleEnterInListItem(e) {
  e.preventDefault();
  // 새 목록 항목 생성
  const newItem = {
    type: 'listItem',
    children: [{
      type: 'paragraph',
      children: []
    }]
  };
  insertNode(newItem);
}

// 목록 항목 시작 부분에서 Backspace 처리
function handleBackspaceAtStart(e) {
  if (isAtStartOfListItem()) {
    e.preventDefault();
    // 단락으로 변환하거나 이전 항목과 병합
    convertListItemToParagraph();
  }
}

일반적인 문제

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

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

// 문제: 빈 목록 항목
// 해결: 최소 하나의 단락 보장
function validateListItem(item) {
  if (!item.querySelector('p, ul, ol')) {
    const p = document.createElement('p');
    item.appendChild(p);
  }
}

// 문제: 중첩된 목록
// 해결: 목록 항목 내부의 중첩된 목록 처리
function handleNestedListInItem(item) {
  const nestedList = item.querySelector('ul, ol');
  if (nestedList) {
    // 올바른 구조 보장
    const lastParagraph = item.querySelector('p:last-child');
    if (lastParagraph && lastParagraph.nextSibling !== nestedList) {
      // 필요시 재정렬
    }
  }
}

// 문제: 목록 항목 들여쓰기
// 해결: 들여쓰기 레벨 처리
function getListItemIndent(item) {
  let indent = 0;
  let parent = item.parentElement;
  while (parent && (parent.tagName === 'UL' || parent.tagName === 'OL')) {
    indent++;
    parent = parent.parentElement;
  }
  return indent;
}

구현

완전한 구현 예제:

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