Card Node Type – contenteditable.lab

Schema Definition

Schema definition for the Card node type:

{
  card: {
    content: 'cardHeader cardBody*',
    group: 'block',
    attrs: {
      type: { default: 'default' }
    },
  }
}

Model Representation

Example model representation:

{
  type: 'card',
  attrs: { type: 'default' },
  children: [
    {
      type: 'cardHeader',
      children: [{ type: 'paragraph', children: [{ type: 'text', text: 'Title' }] }]
    },
    {
      type: 'cardBody',
      children: [{ type: 'paragraph', children: [{ type: 'text', text: 'Content' }] }]
    }
  ]
}

HTML Serialization

Converting model to HTML:

function serializeCard(node) {
  return '<div data-type="card" class="card">' + 
         serializeChildren(node.children) + '</div>';
}

HTML Deserialization

Parsing HTML to model:

function parseCard(domNode) {
  return {
    type: 'card',
    attrs: { type: domNode.getAttribute('data-type') || 'default' },
    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 card
const card = document.createElement('div');
card.setAttribute('data-type', 'card');
card.className = 'card';
card.contentEditable = 'true';
node.children.forEach(child => {
  card.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: Card structure validation
// Solution: Ensure card has header
function validateCard(card) {
  if (!card.querySelector('[data-type="card-header"]')) {
    const header = document.createElement('div');
    header.setAttribute('data-type', 'card-header');
    card.insertBefore(header, card.firstChild);
  }
}

Implementation

Complete implementation example:

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