이탤릭 노드 타입 – contenteditable.lab

스키마 정의

이탤릭 마크 타입의 스키마 정의:

{
  italic: {
  }
}

모델 표현

모델 표현 예제:

{
  type: 'text',
  text: '이탤릭 텍스트',
  marks: [{ type: 'italic' }]
}

HTML 직렬화

모델을 HTML로 변환:

function serializeItalicMark(text, mark) {
  return '<em>' + text + '</em>';
}

HTML 역직렬화

HTML을 모델로 파싱:

function extractItalicMark(element) {
  if (element.tagName === 'EM' || element.tagName === 'I') {
    return { type: 'italic' };
  }
  return null;
}

뷰 연동

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

뷰 연동 코드:

// 이탤릭 토글
function toggleItalic() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  
  const range = selection.getRangeAt(0);
  const hasItalic = hasMarkInSelection(range, 'italic');
  
  if (hasItalic) {
    removeMark('italic');
  } else {
    addMark({ type: 'italic' });
  }
}

일반적인 문제

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

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

// 문제: <i> vs <em> 정규화
// 해결: 항상 <i>를 <em>으로 변환
function normalizeItalic(element) {
  element.querySelectorAll('i').forEach(i => {
    const em = document.createElement('em');
    em.innerHTML = i.innerHTML;
    i.parentNode.replaceChild(em, i);
  });
}

// 문제: 볼드와 이탤릭 함께
// 해결: 중첩된 마크를 올바르게 처리
// <strong><em>텍스트</em></strong> 또는 <em><strong>텍스트</strong></em>
function applyBoldAndItalic(text) {
  // 시맨틱 HTML을 위해 순서가 중요함
  return '<strong><em>' + text + '</em></strong>';
}

구현

완전한 구현 예제:

class ItalicMark {
  constructor() {
    this.type = 'italic';
  }
  
  toDOM() {
    return ['em', 0];
  }
  
  static fromDOM(element) {
    if (element.tagName === 'EM' || element.tagName === 'I') {
      return new ItalicMark();
    }
    return null;
  }
}