Bullet List Node Type – contenteditable.lab

Schema Definition

Schema definition for the Bullet List node type:

{
  bulletList: {
    content: 'listItem+',
    group: 'block',
  }
}

Model Representation

Example model representation:

{
  type: 'bulletList',
  children: [
    {
      type: 'listItem',
      children: [
        {
          type: 'paragraph',
          children: [{ type: 'text', text: 'First item' }]
        }
      ]
    }
  ]
}

HTML Serialization

Converting model to HTML:

function serializeBulletList(node) {
  return '<ul>' + serializeChildren(node.children) + '</ul>';
}

HTML Deserialization

Parsing HTML to model:

function parseBulletList(domNode) {
  return {
    type: 'bulletList',
    children: Array.from(domNode.children)
      .map(child => parseNode(child))
      .filter(Boolean)
  };
}

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 bullet list
const ul = document.createElement('ul');
ul.contentEditable = 'true';
node.children.forEach(item => {
  ul.appendChild(renderNode(item));
});

// Creating bullet list
function createBulletList() {
  return {
    type: 'bulletList',
    children: [{
      type: 'listItem',
      children: [{
        type: 'paragraph',
        children: []
      }]
    }]
  };
}

Common Issues

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

Common issues and solutions:

// Issue: Nested lists
// Solution: Handle nested list items properly
function handleNestedList(list, nestedList) {
  const lastItem = list.lastElementChild;
  if (lastItem) {
    lastItem.appendChild(nestedList);
  }
}

// Issue: List style types
// Solution: Support different bullet styles
function setBulletStyle(list, style) {
  list.style.listStyleType = style; // disc, circle, square
}

// Issue: Empty list items
// Solution: Ensure at least one paragraph in list item
function validateListItem(item) {
  if (!item.querySelector('p')) {
    const p = document.createElement('p');
    item.appendChild(p);
  }
}

Implementation

Complete implementation example:

class BulletListNode {
  constructor(children) {
    this.type = 'bulletList';
    this.children = children || [];
  }
  
  toDOM() {
    const ul = document.createElement('ul');
    this.children.forEach(child => {
      ul.appendChild(child.toDOM());
    });
    return ul;
  }
  
  static fromDOM(domNode) {
    return new BulletListNode(
      Array.from(domNode.children)
        .map(child => parseNode(child))
        .filter(Boolean)
    );
  }
}