구분선 노드 타입 – contenteditable.lab

스키마 정의

구분선 노드 타입의 스키마 정의:

{
  divider: {
    group: 'block',
    attrs: {
      style: { default: 'solid' }
    },
  }
}

모델 표현

모델 표현 예제:

{
  type: 'divider',
  attrs: { style: 'solid' }
}

HTML 직렬화

모델을 HTML로 변환:

function serializeDivider(node) {
  return '<div data-type="divider" data-style="' + node.attrs.style + '"></div>';
}

HTML 역직렬화

HTML을 모델로 파싱:

function parseDivider(domNode) {
  return {
    type: 'divider',
    attrs: { style: domNode.getAttribute('data-style') || 'solid' }
  };
}

뷰 연동

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

뷰 연동 코드:

// 구분선 렌더링
const divider = document.createElement('div');
divider.setAttribute('data-type', 'divider');
divider.setAttribute('data-style', node.attrs.style);
divider.className = 'divider';
divider.contentEditable = 'false'; // 구분선은 일반적으로 편집 불가

일반적인 문제

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

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

// 문제: 구분선 스타일링
// 해결: 일관된 스타일 적용
function styleDivider(divider, style) {
  divider.className = 'divider divider-' + style;
  divider.style.borderTop = '1px solid #ccc';
  divider.style.margin = '1em 0';
}

// 문제: 구분선 선택
// 해결: 구분선 선택 처리
function selectDivider(divider) {
  const range = document.createRange();
  range.setStartBefore(divider);
  range.setEndAfter(divider);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);
}

구현

완전한 구현 예제:

class DividerNode {
  constructor(attrs) {
    this.type = 'divider';
    this.attrs = { style: attrs?.style || 'solid' };
  }
  
  toDOM() {
    const divider = document.createElement('div');
    divider.setAttribute('data-type', 'divider');
    divider.setAttribute('data-style', this.attrs.style);
    divider.className = 'divider';
    return divider;
  }
  
  static fromDOM(domNode) {
    return new DividerNode({
      style: domNode.getAttribute('data-style') || 'solid'
    });
  }
}