주석 노드 타입 – contenteditable.lab

스키마 정의

주석 노드 타입의 스키마 정의:

{
  annotation: {
    inline: true,
    attrs: {
      id: { default: '' },
      type: { default: 'comment' }
    },
  }
}

모델 표현

모델 표현 예제:

{
  type: 'annotation',
  attrs: {
    id: 'annotation123',
    type: 'comment'
  }
}

HTML 직렬화

모델을 HTML로 변환:

function serializeAnnotation(node) {
  return '<span data-type="annotation" data-id="' + escapeHtml(node.attrs.id) + 
         '" data-annotation-type="' + node.attrs.type + '"></span>';
}

HTML 역직렬화

HTML을 모델로 파싱:

function parseAnnotation(domNode) {
  return {
    type: 'annotation',
    attrs: {
      id: domNode.getAttribute('data-id') || '',
      type: domNode.getAttribute('data-annotation-type') || 'comment'
    }
  };
}

뷰 연동

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

뷰 연동 코드:

// 주석 렌더링
const annotation = document.createElement('span');
annotation.setAttribute('data-type', 'annotation');
annotation.setAttribute('data-id', node.attrs.id);
annotation.setAttribute('data-annotation-type', node.attrs.type);
annotation.className = 'annotation';
annotation.contentEditable = 'false'; // 주석은 일반적으로 직접 편집되지 않음

일반적인 문제

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

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

// 문제: 주석 표시
// 해결: 호버 또는 클릭 시 주석 표시
function showAnnotation(annotation) {
  const id = annotation.getAttribute('data-id');
  // 주석 콘텐츠 가져와서 표시
  displayAnnotationPopup(id);
}

// 문제: 주석 동기화
// 해결: 협업 편집에서 주석 동기화
function syncAnnotation(annotation, changes) {
  // 문서 변경에 따라 주석 업데이트
}

구현

완전한 구현 예제:

class AnnotationNode {
  constructor(attrs) {
    this.type = 'annotation';
    this.attrs = {
      id: attrs?.id || '',
      type: attrs?.type || 'comment'
    };
  }
  
  toDOM() {
    const annotation = document.createElement('span');
    annotation.setAttribute('data-type', 'annotation');
    annotation.setAttribute('data-id', this.attrs.id);
    annotation.setAttribute('data-annotation-type', this.attrs.type);
    annotation.className = 'annotation';
    return annotation;
  }
  
  static fromDOM(domNode) {
    return new AnnotationNode({
      id: domNode.getAttribute('data-id') || '',
      type: domNode.getAttribute('data-annotation-type') || 'comment'
    });
  }
}