임베드 노드 타입 – contenteditable.lab

스키마 정의

임베드 노드 타입의 스키마 정의:

{
  embed: {
    group: 'block',
    attrs: {
      url: { default: '' },
      type: { default: 'unknown' }
    },
  }
}

모델 표현

모델 표현 예제:

{
  type: 'embed',
  attrs: {
    url: 'https://example.com/embed',
    type: 'youtube'
  }
}

HTML 직렬화

모델을 HTML로 변환:

function serializeEmbed(node) {
  return '<div data-type="embed" data-embed-type="' + node.attrs.type + 
         '" data-url="' + escapeHtml(node.attrs.url) + '"></div>';
}

HTML 역직렬화

HTML을 모델로 파싱:

function parseEmbed(domNode) {
  return {
    type: 'embed',
    attrs: {
      url: domNode.getAttribute('data-url') || '',
      type: domNode.getAttribute('data-embed-type') || 'unknown'
    }
  };
}

뷰 연동

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

뷰 연동 코드:

// 임베드 렌더링
const embed = document.createElement('div');
embed.setAttribute('data-type', 'embed');
embed.setAttribute('data-embed-type', node.attrs.type);
embed.setAttribute('data-url', node.attrs.url);
embed.contentEditable = 'false'; // 임베드는 일반적으로 렌더링됨

일반적인 문제

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

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

// 문제: 임베드 URL 검증
// 해결: 임베드 URL 검증
function validateEmbedUrl(url, type) {
  const patterns = {
    youtube: /youtube.com|youtu.be/,
    vimeo: /vimeo.com/,
    twitter: /twitter.com|tweet/
  };
  return patterns[type]?.test(url) || false;
}

// 문제: 임베드 타입 감지
// 해결: URL에서 임베드 타입 자동 감지
function detectEmbedType(url) {
  if (/youtube|youtu.be/.test(url)) return 'youtube';
  if (/vimeo/.test(url)) return 'vimeo';
  if (/twitter|tweet/.test(url)) return 'twitter';
  return 'unknown';
}

구현

완전한 구현 예제:

class EmbedNode {
  constructor(attrs) {
    this.type = 'embed';
    this.attrs = {
      url: attrs?.url || '',
      type: attrs?.type || 'unknown'
    };
  }
  
  toDOM() {
    const embed = document.createElement('div');
    embed.setAttribute('data-type', 'embed');
    embed.setAttribute('data-embed-type', this.attrs.type);
    embed.setAttribute('data-url', this.attrs.url);
    return embed;
  }
  
  static fromDOM(domNode) {
    return new EmbedNode({
      url: domNode.getAttribute('data-url') || '',
      type: domNode.getAttribute('data-embed-type') || 'unknown'
    });
  }
}