Columns Node Type – contenteditable.lab

Schema Definition

Schema definition for the Columns node type:

{
  columns: {
    content: 'block+',
    group: 'block',
    attrs: {
      count: { default: 2 }
    },
  }
}

Model Representation

Example model representation:

{
  type: 'columns',
  attrs: { count: 2 },
  children: [
    {
      type: 'paragraph',
      children: [{ type: 'text', text: 'Column 1' }]
    },
    {
      type: 'paragraph',
      children: [{ type: 'text', text: 'Column 2' }]
    }
  ]
}

HTML Serialization

Converting model to HTML:

function serializeColumns(node) {
  return '<div data-type="columns" data-count="' + node.attrs.count + '">' + 
         serializeChildren(node.children) + '</div>';
}

HTML Deserialization

Parsing HTML to model:

function parseColumns(domNode) {
  return {
    type: 'columns',
    attrs: { count: parseInt(domNode.getAttribute('data-count')) || 2 },
    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 columns
const columns = document.createElement('div');
columns.setAttribute('data-type', 'columns');
columns.setAttribute('data-count', node.attrs.count);
columns.className = 'columns';
columns.style.display = 'grid';
columns.style.gridTemplateColumns = 'repeat(' + node.attrs.count + ', 1fr)';
columns.contentEditable = 'true';
node.children.forEach(child => {
  columns.appendChild(renderNode(child));
});

Common Issues

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

Common issues and solutions:

// Issue: Column count mismatch
// Solution: Ensure children match column count
function validateColumns(columns, count) {
  const children = columns.children;
  while (children.length < count) {
    const col = document.createElement('div');
    col.className = 'column';
    columns.appendChild(col);
  }
  while (children.length > count) {
    columns.removeChild(children[children.length - 1]);
  }
}

// Issue: Responsive columns
// Solution: Use CSS Grid or Flexbox
function makeColumnsResponsive(columns) {
  columns.style.display = 'grid';
  columns.style.gridTemplateColumns = 'repeat(auto-fit, minmax(200px, 1fr))';
}

Implementation

Complete implementation example:

class ColumnsNode {
  constructor(attrs, children) {
    this.type = 'columns';
    this.attrs = { count: attrs?.count || 2 };
    this.children = children || [];
  }
  
  toDOM() {
    const columns = document.createElement('div');
    columns.setAttribute('data-type', 'columns');
    columns.setAttribute('data-count', this.attrs.count);
    columns.className = 'columns';
    this.children.forEach(child => {
      columns.appendChild(child.toDOM());
    });
    return columns;
  }
  
  static fromDOM(domNode) {
    return new ColumnsNode(
      { count: parseInt(domNode.getAttribute('data-count')) || 2 },
      Array.from(domNode.childNodes)
        .map(node => parseNode(node))
        .filter(Boolean)
    );
  }
}