Map Node Type – contenteditable.lab

Schema Definition

Schema definition for the Map node type:

{
  map: {
    group: 'block',
    attrs: {
      lat: { default: 0 },
      lng: { default: 0 },
      zoom: { default: 10 }
    },
  }
}

Model Representation

Example model representation:

{
  type: 'map',
  attrs: {
    lat: 37.5665,
    lng: 126.9780,
    zoom: 10
  }
}

HTML Serialization

Converting model to HTML:

function serializeMap(node) {
  return '<div data-type="map" data-lat="' + node.attrs.lat + 
         '" data-lng="' + node.attrs.lng + '" data-zoom="' + node.attrs.zoom + '"></div>';
}

HTML Deserialization

Parsing HTML to model:

function parseMap(domNode) {
  return {
    type: 'map',
    attrs: {
      lat: parseFloat(domNode.getAttribute('data-lat')) || 0,
      lng: parseFloat(domNode.getAttribute('data-lng')) || 0,
      zoom: parseInt(domNode.getAttribute('data-zoom')) || 10
    }
  };
}

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 map
const map = document.createElement('div');
map.setAttribute('data-type', 'map');
map.setAttribute('data-lat', node.attrs.lat);
map.setAttribute('data-lng', node.attrs.lng);
map.setAttribute('data-zoom', node.attrs.zoom);
map.contentEditable = 'false'; // Maps are typically rendered

// Render with Leaflet or Google Maps
function renderMap(element) {
  const lat = parseFloat(element.getAttribute('data-lat'));
  const lng = parseFloat(element.getAttribute('data-lng'));
  const zoom = parseInt(element.getAttribute('data-zoom'));
  if (window.L) {
    L.map(element).setView([lat, lng], zoom);
  }
}

Common Issues

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

Common issues and solutions:

// Issue: Map library initialization
// Solution: Initialize map library
function initMapLibrary() {
  if (window.L) {
    // Leaflet is ready
  }
}

// Issue: Map coordinates validation
// Solution: Validate coordinates
function validateCoordinates(lat, lng) {
  return lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180;
}

Implementation

Complete implementation example:

class MapNode {
  constructor(attrs) {
    this.type = 'map';
    this.attrs = {
      lat: attrs?.lat || 0,
      lng: attrs?.lng || 0,
      zoom: attrs?.zoom || 10
    };
  }
  
  toDOM() {
    const map = document.createElement('div');
    map.setAttribute('data-type', 'map');
    map.setAttribute('data-lat', this.attrs.lat);
    map.setAttribute('data-lng', this.attrs.lng);
    map.setAttribute('data-zoom', this.attrs.zoom);
    return map;
  }
  
  static fromDOM(domNode) {
    return new MapNode({
      lat: parseFloat(domNode.getAttribute('data-lat')) || 0,
      lng: parseFloat(domNode.getAttribute('data-lng')) || 0,
      zoom: parseInt(domNode.getAttribute('data-zoom')) || 10
    });
  }
}