Hard Break Node Type – contenteditable.lab

Schema Definition

Schema definition for the Hard Break node type:

{
  hardBreak: {
    group: 'inline',
    inline: true,
  }
}

Model Representation

Example model representation:

{
  type: 'hardBreak'
}

HTML Serialization

Converting model to HTML:

function serializeHardBreak(node) {
  return '<br>';
}

HTML Deserialization

Parsing HTML to model:

function parseHardBreak(domNode) {
  return {
    type: 'hardBreak'
  };
}

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
const br = document.createElement('br');
// Hard breaks are self-closing elements

// Handling Enter key in inline context
function handleEnterInInline(e) {
  e.preventDefault();
  insertNode({
    type: 'hardBreak'
  });
}

Common Issues

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

Common issues and solutions:

// Issue: Multiple consecutive <br> tags
// Solution: Normalize to single <br> or convert to paragraph
function normalizeHardBreaks(element) {
  const brs = element.querySelectorAll('br');
  let consecutive = 0;
  
  brs.forEach(br => {
    if (br.nextSibling?.tagName === 'BR') {
      consecutive++;
      if (consecutive >= 2) {
        // Convert to paragraph break
        convertToParagraph(br);
      }
    } else {
      consecutive = 0;
    }
  });
}

// Issue: <br> in block context vs inline context
// Solution: Context-aware handling
function handleHardBreak(context) {
  if (context === 'block') {
    // Create new paragraph
    return createNewParagraph();
  } else {
    // Insert hard break
    return { type: 'hardBreak' };
  }
}

// Issue: Selection around <br>
// Solution: Handle cursor positioning
function getPositionAroundBr(br) {
  // Position cursor after <br>
  const range = document.createRange();
  range.setStartAfter(br);
  range.collapse(true);
  return range;
}

Implementation

Complete implementation example:

class HardBreakNode {
  constructor() {
    this.type = 'hardBreak';
  }
  
  toDOM() {
    return document.createElement('br');
  }
  
  static fromDOM(domNode) {
    return new HardBreakNode();
  }
}