순서 없는 목록 노드 타입

스키마 정의

순서 없는 목록 노드 타입의 스키마 정의:

{
  bulletList: {
    content: 'listItem+',
    group: 'block',
  }
}

모델 표현

모델 표현 예제:

{
  type: 'bulletList',
  children: [
    {
      type: 'listItem',
      children: [
        {
          type: 'paragraph',
          children: [{ type: 'text', text: '첫 번째 항목' }]
        }
      ]
    }
  ]
}

HTML 직렬화

모델을 HTML로 변환:

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

HTML 역직렬화

HTML을 모델로 파싱:

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

뷰 연동

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

뷰 연동 코드:

// 순서 없는 목록 렌더링
const ul = document.createElement('ul');
ul.contentEditable = 'true';
node.children.forEach(item => {
  ul.appendChild(renderNode(item));
});

// 순서 없는 목록 생성
function createBulletList() {
  return {
    type: 'bulletList',
    children: [{
      type: 'listItem',
      children: [{
        type: 'paragraph',
        children: []
      }]
    }]
  };
}

일반적인 문제

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

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

// 문제: 중첩된 목록
// 해결: 중첩된 목록 항목을 올바르게 처리
function handleNestedList(list, nestedList) {
  const lastItem = list.lastElementChild;
  if (lastItem) {
    lastItem.appendChild(nestedList);
  }
}

// 문제: 목록 스타일 타입
// 해결: 다양한 불릿 스타일 지원
function setBulletStyle(list, style) {
  list.style.listStyleType = style; // disc, circle, square
}

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

구현

완전한 구현 예제:

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