투표 노드 타입 – contenteditable.lab

스키마 정의

투표 노드 타입의 스키마 정의:

{
  poll: {
    group: 'block',
    attrs: {
      question: { default: '' },
      options: { default: '[]' },
      multiple: { default: false }
    },
  }
}

모델 표현

모델 표현 예제:

{
  type: 'poll',
  attrs: {
    question: '좋아하는 색상은?',
    options: JSON.stringify(['빨강', '파랑', '초록']),
    multiple: false
  }
}

HTML 직렬화

모델을 HTML로 변환:

function serializePoll(node) {
  return '<div data-type="poll" data-question="' + escapeHtml(node.attrs.question) + 
         '" data-options="' + escapeHtml(node.attrs.options) + 
         '" data-multiple="' + node.attrs.multiple + '"></div>';
}

HTML 역직렬화

HTML을 모델로 파싱:

function parsePoll(domNode) {
  return {
    type: 'poll',
    attrs: {
      question: domNode.getAttribute('data-question') || '',
      options: domNode.getAttribute('data-options') || '[]',
      multiple: domNode.getAttribute('data-multiple') === 'true'
    }
  };
}

뷰 연동

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

뷰 연동 코드:

// 투표 렌더링
const poll = document.createElement('div');
poll.setAttribute('data-type', 'poll');
poll.setAttribute('data-question', node.attrs.question);
poll.setAttribute('data-options', node.attrs.options);
poll.setAttribute('data-multiple', node.attrs.multiple);
poll.contentEditable = 'false'; // 투표는 일반적으로 상호작용하지만 직접 편집되지 않음

일반적인 문제

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

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

// 문제: 투표 처리
// 해결: 투표 제출 처리
function handlePollVote(poll, selectedOptions) {
  // 서버에 투표 제출
  // 투표 표시 업데이트
}

// 문제: 투표 결과 표시
// 해결: 투표 후 결과 표시
function displayPollResults(poll, results) {
  // 결과를 백분율 또는 개수로 렌더링
}

구현

완전한 구현 예제:

class PollNode {
  constructor(attrs) {
    this.type = 'poll';
    this.attrs = {
      question: attrs?.question || '',
      options: attrs?.options || '[]',
      multiple: attrs?.multiple || false
    };
  }
  
  toDOM() {
    const poll = document.createElement('div');
    poll.setAttribute('data-type', 'poll');
    poll.setAttribute('data-question', this.attrs.question);
    poll.setAttribute('data-options', this.attrs.options);
    poll.setAttribute('data-multiple', this.attrs.multiple);
    return poll;
  }
  
  static fromDOM(domNode) {
    return new PollNode({
      question: domNode.getAttribute('data-question') || '',
      options: domNode.getAttribute('data-options') || '[]',
      multiple: domNode.getAttribute('data-multiple') === 'true'
    });
  }
}