Card Body Node Type – contenteditable.lab

Schema Definition

Schema definition for the Card Body node type:

{
  cardBody: {
    content: 'block+',
  }
}

Model Representation

Example model representation:

{
  type: 'cardBody',
  children: [
    {
      type: 'paragraph',
      children: [{ type: 'text', text: 'Card content' }]
    }
  ]
}

HTML Serialization

Converting model to HTML:

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

HTML Deserialization

Parsing HTML to model:

function parseCardBody(domNode) {
  return {
    type: 'cardBody',
    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 card body
const body = document.createElement('div');
body.setAttribute('data-type', 'card-body');
body.className = 'card-body';
body.contentEditable = 'true';
node.children.forEach(child => {
  body.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: Empty body
// Solution: Ensure at least one block
function validateCardBody(body) {
  if (!body.querySelector('p, ul, ol, h1, h2, h3, h4, h5, h6')) {
    const p = document.createElement('p');
    body.appendChild(p);
  }
}

Implementation

Complete implementation example:

class CardBodyNode {
  constructor(children) {
    this.type = 'cardBody';
    this.children = children || [];
  }
  
  toDOM() {
    const body = document.createElement('div');
    body.setAttribute('data-type', 'card-body');
    body.className = 'card-body';
    this.children.forEach(child => {
      body.appendChild(child.toDOM());
    });
    return body;
  }
  
  static fromDOM(domNode) {
    return new CardBodyNode(
      Array.from(domNode.childNodes)
        .map(node => parseNode(node))
        .filter(Boolean)
    );
  }
}