List Item Node Type – contenteditable.lab

Schema Definition

Schema definition for the List Item node type:

{
  listItem: {
    content: 'paragraph block*',
    group: 'block',
    defining: true
  }
}

Model Representation

Example model representation:

{
  type: 'listItem',
  children: [
    {
      type: 'paragraph',
      children: [{ type: 'text', text: 'List item content' }]
    }
  ]
}

HTML Serialization

Converting model to HTML:

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

HTML Deserialization

Parsing HTML to model:

function parseListItem(domNode) {
  return {
    type: 'listItem',
    children: Array.from(domNode.childNodes)
      .map(node => parseNode(node))
      .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 list item
const li = document.createElement('li');
li.contentEditable = 'true';
node.children.forEach(child => {
  li.appendChild(renderNode(child));
});

// Handling Enter key in list item
function handleEnterInListItem(e) {
  e.preventDefault();
  // Create new list item
  const newItem = {
    type: 'listItem',
    children: [{
      type: 'paragraph',
      children: []
    }]
  };
  insertNode(newItem);
}

// Handling Backspace at start of list item
function handleBackspaceAtStart(e) {
  if (isAtStartOfListItem()) {
    e.preventDefault();
    // Convert to paragraph or merge with previous item
    convertListItemToParagraph();
  }
}

Common Issues

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

Common issues and solutions:

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

// Issue: Nested lists
// Solution: Handle nested lists within list items
function handleNestedListInItem(item) {
  const nestedList = item.querySelector('ul, ol');
  if (nestedList) {
    // Ensure proper structure
    const lastParagraph = item.querySelector('p:last-child');
    if (lastParagraph && lastParagraph.nextSibling !== nestedList) {
      // Reorder if needed
    }
  }
}

// Issue: List item indentation
// Solution: Handle indentation levels
function getListItemIndent(item) {
  let indent = 0;
  let parent = item.parentElement;
  while (parent && (parent.tagName === 'UL' || parent.tagName === 'OL')) {
    indent++;
    parent = parent.parentElement;
  }
  return indent;
}

Implementation

Complete implementation example:

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