Code Node Type – contenteditable.lab

Schema Definition

Schema definition for the Code mark type:

{
  code: {
    excludes: 'bold italic underline link'
    // Code mark excludes other formatting marks
  }
}

Model Representation

Example model representation:

{
  type: 'text',
  text: 'inline code',
  marks: [{ type: 'code' }]
}

HTML Serialization

Converting model to HTML:

function serializeCodeMark(text, mark) {
  return '<code>' + escapeHtml(text) + '</code>';
}

HTML Deserialization

Parsing HTML to model:

function extractCodeMark(element) {
  if (element.tagName === 'CODE') {
    return { type: 'code' };
  }
  return null;
}

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:

// Toggling code
function toggleCode() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return;
  
  const range = selection.getRangeAt(0);
  const hasCode = hasMarkInSelection(range, 'code');
  
  if (hasCode) {
    removeMark('code');
  } else {
    // Remove conflicting marks first
    removeConflictingMarks(['bold', 'italic', 'underline', 'link']);
    addMark({ type: 'code' });
  }
}

Common Issues

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

Common issues and solutions:

// Issue: Code mark excludes other marks
// Solution: Remove conflicting marks when applying code
function applyCodeMark(textNode) {
  // Remove bold, italic, underline, link
  const conflictingMarks = ['bold', 'italic', 'underline', 'link'];
  conflictingMarks.forEach(mark => {
    removeMark(mark);
  });
  addMark({ type: 'code' });
}

// Issue: Code vs codeBlock
// Solution: Distinguish inline code from code blocks
function isCodeBlock(element) {
  return element.tagName === 'PRE' || 
         (element.tagName === 'CODE' && element.parentElement?.tagName === 'PRE');
}

// Issue: Code mark with special characters
// Solution: Escape HTML in code
function escapeHtml(text) {
  const div = document.createElement('div');
  div.textContent = text;
  return div.innerHTML;
}

Implementation

Complete implementation example:

class CodeMark {
  constructor() {
    this.type = 'code';
  }
  
  toDOM() {
    return ['code', 0];
  }
  
  static fromDOM(element) {
    if (element.tagName === 'CODE' && 
        element.parentElement?.tagName !== 'PRE') {
      return new CodeMark();
    }
    return null;
  }
}