Ordered List Node Type – contenteditable.lab

Schema Definition

Schema definition for the Ordered List node type:

{
  orderedList: {
    content: 'listItem+',
    group: 'block',
    attrs: {
      start: { default: 1 },
      order: { default: 1 }
    },
  }
}

Model Representation

Example model representation:

{
  type: 'orderedList',
  attrs: { start: 1 },
  children: [
    {
      type: 'listItem',
      children: [
        {
          type: 'paragraph',
          children: [{ type: 'text', text: 'First item' }]
        }
      ]
    }
  ]
}

HTML Serialization

Converting model to HTML:

function serializeOrderedList(node) {
  const attrs = node.attrs?.start !== 1 ? { start: node.attrs.start } : {};
  return '<ol' + serializeAttrs(attrs) + '>' + 
         serializeChildren(node.children) + '</ol>';
}

HTML Deserialization

Parsing HTML to model:

function parseOrderedList(domNode) {
  const start = parseInt(domNode.getAttribute('start')) || 1;
  return {
    type: 'orderedList',
    attrs: { start },
    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 ordered list
const ol = document.createElement('ol');
ol.contentEditable = 'true';
if (node.attrs?.start !== 1) {
  ol.setAttribute('start', node.attrs.start);
}
node.children.forEach(item => {
  ol.appendChild(renderNode(item));
});

// Creating ordered list
function createOrderedList() {
  return {
    type: 'orderedList',
    attrs: { start: 1 },
    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) {
  // Ensure proper nesting structure
  const lastItem = list.lastElementChild;
  if (lastItem) {
    lastItem.appendChild(nestedList);
  }
}

// Issue: List numbering
// Solution: Maintain correct numbering
function updateListNumbering(list) {
  const items = list.querySelectorAll('li');
  items.forEach((item, index) => {
    // Update numbering if needed
  });
}

// 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 OrderedListNode {
  constructor(attrs, children) {
    this.type = 'orderedList';
    this.attrs = { start: attrs?.start || 1 };
    this.children = children || [];
  }
  
  toDOM() {
    const ol = document.createElement('ol');
    if (this.attrs.start !== 1) {
      ol.setAttribute('start', this.attrs.start);
    }
    this.children.forEach(child => {
      ol.appendChild(child.toDOM());
    });
    return ol;
  }
  
  static fromDOM(domNode) {
    const start = parseInt(domNode.getAttribute('start')) || 1;
    return new OrderedListNode(
      { start },
      Array.from(domNode.children)
        .map(child => parseNode(child))
        .filter(Boolean)
    );
  }
}