Poll Node Type – contenteditable.lab

Schema Definition

Schema definition for the Poll node type:

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

Model Representation

Example model representation:

{
  type: 'poll',
  attrs: {
    question: 'What is your favorite color?',
    options: JSON.stringify(['Red', 'Blue', 'Green']),
    multiple: false
  }
}

HTML Serialization

Converting model to 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 Deserialization

Parsing HTML to model:

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

View Integration

View Integration Notes: Pay special attention to contenteditable behavior, selection handling, and event management when implementing this node type in your view layer.

View integration code:

// Rendering poll
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'; // Polls are typically interactive but not directly editable

Common Issues

Common Pitfalls: These are issues frequently encountered when implementing this node type. Review carefully before implementation.

Common issues and solutions:

// Issue: Poll vote handling
// Solution: Handle vote submission
function handlePollVote(poll, selectedOptions) {
  // Submit vote to server
  // Update poll display
}

// Issue: Poll results display
// Solution: Show results after voting
function displayPollResults(poll, results) {
  // Render results as percentages or counts
}

Implementation

Complete implementation example:

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'
    });
  }
}