북마크 노드 타입 – contenteditable.lab

스키마 정의

북마크 노드 타입의 스키마 정의:

{
  bookmark: {
    group: 'block',
    attrs: {
      url: { default: '' },
      title: { default: '' },
      description: { default: '' },
      image: { default: null }
    },
  }
}

모델 표현

모델 표현 예제:

{
  type: 'bookmark',
  attrs: {
    url: 'https://example.com',
    title: '예제 웹사이트',
    description: '예제 웹사이트입니다',
    image: 'https://example.com/image.jpg'
  }
}

HTML 직렬화

모델을 HTML로 변환:

function serializeBookmark(node) {
  return '<div data-type="bookmark" data-url="' + escapeHtml(node.attrs.url) + 
         '" data-title="' + escapeHtml(node.attrs.title) + 
         '" data-description="' + escapeHtml(node.attrs.description) + 
         '" data-image="' + (node.attrs.image ? escapeHtml(node.attrs.image) : '') + '"></div>';
}

HTML 역직렬화

HTML을 모델로 파싱:

function parseBookmark(domNode) {
  return {
    type: 'bookmark',
    attrs: {
      url: domNode.getAttribute('data-url') || '',
      title: domNode.getAttribute('data-title') || '',
      description: domNode.getAttribute('data-description') || '',
      image: domNode.getAttribute('data-image') || null
    }
  };
}

뷰 연동

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

뷰 연동 코드:

// 북마크 렌더링
const bookmark = document.createElement('div');
bookmark.setAttribute('data-type', 'bookmark');
bookmark.setAttribute('data-url', node.attrs.url);
bookmark.setAttribute('data-title', node.attrs.title);
bookmark.setAttribute('data-description', node.attrs.description);
if (node.attrs.image) bookmark.setAttribute('data-image', node.attrs.image);
bookmark.contentEditable = 'false'; // 북마크는 일반적으로 렌더링됨

일반적인 문제

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

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

// 문제: 북마크 메타데이터 가져오기
// 해결: Open Graph 메타데이터 가져오기
async function fetchBookmarkMetadata(url) {
  // URL을 가져와서 Open Graph 태그 추출
  const response = await fetch(url);
  const html = await response.text();
  // Open Graph 메타데이터 파싱
  return extractOpenGraphData(html);
}

// 문제: 북마크 URL 검증
// 해결: URL 형식 검증
function validateBookmarkUrl(url) {
  try {
    new URL(url);
    return true;
  } catch {
    return false;
  }
}

구현

완전한 구현 예제:

class BookmarkNode {
  constructor(attrs) {
    this.type = 'bookmark';
    this.attrs = {
      url: attrs?.url || '',
      title: attrs?.title || '',
      description: attrs?.description || '',
      image: attrs?.image || null
    };
  }
  
  toDOM() {
    const bookmark = document.createElement('div');
    bookmark.setAttribute('data-type', 'bookmark');
    bookmark.setAttribute('data-url', this.attrs.url);
    bookmark.setAttribute('data-title', this.attrs.title);
    bookmark.setAttribute('data-description', this.attrs.description);
    if (this.attrs.image) bookmark.setAttribute('data-image', this.attrs.image);
    return bookmark;
  }
  
  static fromDOM(domNode) {
    return new BookmarkNode({
      url: domNode.getAttribute('data-url') || '',
      title: domNode.getAttribute('data-title') || '',
      description: domNode.getAttribute('data-description') || '',
      image: domNode.getAttribute('data-image') || null
    });
  }
}