지도 노드 타입 – contenteditable.lab

스키마 정의

지도 노드 타입의 스키마 정의:

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

모델 표현

모델 표현 예제:

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

HTML 직렬화

모델을 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 역직렬화

HTML을 모델로 파싱:

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
    }
  };
}

뷰 연동

뷰 연동 노트: 이 노드 타입을 뷰 레이어에서 구현할 때 contenteditable 동작, 선택 처리, 이벤트 관리에 특히 주의하세요.

뷰 연동 코드:

// 지도 렌더링
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'; // 지도는 일반적으로 렌더링됨

// Leaflet 또는 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);
  }
}

일반적인 문제

일반적인 함정: 이 노드 타입을 구현할 때 자주 발생하는 문제들입니다. 구현 전에 주의 깊게 검토하세요.

일반적인 문제 및 해결 방법:

// 문제: 지도 라이브러리 초기화
// 해결: 지도 라이브러리 초기화
function initMapLibrary() {
  if (window.L) {
    // Leaflet 준비됨
  }
}

// 문제: 지도 좌표 검증
// 해결: 좌표 검증
function validateCoordinates(lat, lng) {
  return lat >= -90 && lat <= 90 && lng >= -180 && lng <= 180;
}

구현

완전한 구현 예제:

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
    });
  }
}