수평선 노드 타입 – contenteditable.lab

스키마 정의

수평선 노드 타입의 스키마 정의:

{
  horizontalRule: {
    group: 'block',
  }
}

모델 표현

모델 표현 예제:

{
  type: 'horizontalRule'
}

HTML 직렬화

모델을 HTML로 변환:

function serializeHorizontalRule(node) {
  return '<hr>';
}

HTML 역직렬화

HTML을 모델로 파싱:

function parseHorizontalRule(domNode) {
  return {
    type: 'horizontalRule'
  };
}

뷰 연동

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

뷰 연동 코드:

// 렌더링
const hr = document.createElement('hr');
// 수평선은 자체 닫는 블록 요소임

// 수평선 삽입
function insertHorizontalRule() {
  const hr = {
    type: 'horizontalRule'
  };
  insertNode(hr);
}

일반적인 문제

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

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

// 문제: 수평선 스타일링
// 해결: 일관된 스타일 적용
function styleHorizontalRule(hr) {
  hr.style.border = 'none';
  hr.style.borderTop = '1px solid #ccc';
  hr.style.margin = '1em 0';
}

// 문제: <hr> 주변의 선택
// 해결: 커서 위치 처리
function getPositionAroundHr(hr) {
  // <hr> 다음에 커서 위치
  const range = document.createRange();
  range.setStartAfter(hr);
  range.collapse(true);
  return range;
}

// 문제: 중첩된 컨텍스트의 <hr>
// 해결: <hr>이 항상 블록의 직접 자식인지 확인
function validateHorizontalRule(hr) {
  const parent = hr.parentNode;
  if (!isBlockNode(parent)) {
    // 블록 부모로 이동
    moveToBlockParent(hr);
  }
}

구현

완전한 구현 예제:

class HorizontalRuleNode {
  constructor() {
    this.type = 'horizontalRule';
  }
  
  toDOM() {
    const hr = document.createElement('hr');
    return hr;
  }
  
  static fromDOM(domNode) {
    return new HorizontalRuleNode();
  }
}