인용구 노드 타입 – contenteditable.lab

스키마 정의

인용구 노드 타입의 스키마 정의:

{
  blockquote: {
    content: 'block+',
    group: 'block',
  }
}

모델 표현

모델 표현 예제:

{
  type: 'blockquote',
  children: [
    {
      type: 'paragraph',
      children: [{ type: 'text', text: '인용된 텍스트' }]
    }
  ]
}

HTML 직렬화

모델을 HTML로 변환:

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

HTML 역직렬화

HTML을 모델로 파싱:

function parseBlockquote(domNode) {
  return {
    type: 'blockquote',
    children: parseChildren(domNode.childNodes)
  };
}

뷰 연동

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

뷰 연동 코드:

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

// 인용구 생성
function createBlockquote() {
  return {
    type: 'blockquote',
    children: [{
      type: 'paragraph',
      children: []
    }]
  };
}

일반적인 문제

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

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

// 문제: 빈 인용구
// 해결: 최소 하나의 블록 보장
if (node.children.length === 0) {
  node.children.push({
    type: 'paragraph',
    children: []
  });
}

// 문제: 중첩된 인용구
// 해결: 중첩 처리 또는 방지
function validateBlockquote(blockquote) {
  // 중첩된 인용구 확인
  const nested = blockquote.querySelector('blockquote');
  if (nested) {
    // 언래핑 또는 처리
  }
}

구현

완전한 구현 예제:

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