하드 브레이크 노드 타입 – contenteditable.lab

스키마 정의

하드 브레이크 노드 타입의 스키마 정의:

{
  hardBreak: {
    group: 'inline',
    inline: true,
  }
}

모델 표현

모델 표현 예제:

{
  type: 'hardBreak'
}

HTML 직렬화

모델을 HTML로 변환:

function serializeHardBreak(node) {
  return '<br>';
}

HTML 역직렬화

HTML을 모델로 파싱:

function parseHardBreak(domNode) {
  return {
    type: 'hardBreak'
  };
}

뷰 연동

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

뷰 연동 코드:

// 렌더링
const br = document.createElement('br');
// 하드 브레이크는 자체 닫는 요소임

// 인라인 컨텍스트에서 Enter 키 처리
function handleEnterInInline(e) {
  e.preventDefault();
  insertNode({
    type: 'hardBreak'
  });
}

일반적인 문제

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

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

// 문제: 여러 개의 연속된 <br> 태그
// 해결: 단일 <br>로 정규화하거나 단락으로 변환
function normalizeHardBreaks(element) {
  const brs = element.querySelectorAll('br');
  let consecutive = 0;
  
  brs.forEach(br => {
    if (br.nextSibling?.tagName === 'BR') {
      consecutive++;
      if (consecutive >= 2) {
        // 단락 브레이크로 변환
        convertToParagraph(br);
      }
    } else {
      consecutive = 0;
    }
  });
}

// 문제: 블록 컨텍스트 vs 인라인 컨텍스트의 <br>
// 해결: 컨텍스트 인식 처리
function handleHardBreak(context) {
  if (context === 'block') {
    // 새 단락 생성
    return createNewParagraph();
  } else {
    // 하드 브레이크 삽입
    return { type: 'hardBreak' };
  }
}

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

구현

완전한 구현 예제:

class HardBreakNode {
  constructor() {
    this.type = 'hardBreak';
  }
  
  toDOM() {
    return document.createElement('br');
  }
  
  static fromDOM(domNode) {
    return new HardBreakNode();
  }
}