Diagram Node Type – contenteditable.lab

Schema Definition

Schema definition for the Diagram node type:

{
  diagram: {
    group: 'block',
    attrs: {
      type: { default: 'flowchart' },
      data: { default: '' }
    },
  }
}

Model Representation

Example model representation:

{
  type: 'diagram',
  attrs: {
    type: 'flowchart',
    data: 'graph TD; A-->B;'
  }
}

HTML Serialization

Converting model to HTML:

function serializeDiagram(node) {
  return '<div data-type="diagram" data-diagram-type="' + node.attrs.type + '">' + 
         escapeHtml(node.attrs.data) + '</div>';
}

HTML Deserialization

Parsing HTML to model:

function parseDiagram(domNode) {
  return {
    type: 'diagram',
    attrs: {
      type: domNode.getAttribute('data-diagram-type') || 'flowchart',
      data: domNode.textContent || ''
    }
  };
}

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 diagram
const diagram = document.createElement('div');
diagram.setAttribute('data-type', 'diagram');
diagram.setAttribute('data-diagram-type', node.attrs.type);
diagram.textContent = node.attrs.data;
diagram.contentEditable = 'false'; // Diagrams are typically rendered

// Render with Mermaid or other diagram library
function renderDiagram(element) {
  if (window.mermaid) {
    mermaid.initialize({ startOnLoad: false });
    mermaid.render('diagram-' + Date.now(), element.textContent, (svg) => {
      element.innerHTML = svg;
    });
  }
}

Common Issues

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

Common issues and solutions:

// Issue: Diagram library initialization
// Solution: Initialize diagram library
function initDiagramLibrary() {
  if (window.mermaid) {
    mermaid.initialize({ startOnLoad: false });
  }
}

// Issue: Diagram data validation
// Solution: Validate diagram syntax
function validateDiagramData(data, type) {
  // Validate based on diagram type (Mermaid, PlantUML, etc.)
  return data.length > 0;
}

Implementation

Complete implementation example:

class DiagramNode {
  constructor(attrs) {
    this.type = 'diagram';
    this.attrs = {
      type: attrs?.type || 'flowchart',
      data: attrs?.data || ''
    };
  }
  
  toDOM() {
    const diagram = document.createElement('div');
    diagram.setAttribute('data-type', 'diagram');
    diagram.setAttribute('data-diagram-type', this.attrs.type);
    diagram.textContent = this.attrs.data;
    return diagram;
  }
  
  static fromDOM(domNode) {
    return new DiagramNode({
      type: domNode.getAttribute('data-diagram-type') || 'flowchart',
      data: domNode.textContent || ''
    });
  }
}