다이어그램 노드 타입 – contenteditable.lab

스키마 정의

다이어그램 노드 타입의 스키마 정의:

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

모델 표현

모델 표현 예제:

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

HTML 직렬화

모델을 HTML로 변환:

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

HTML 역직렬화

HTML을 모델로 파싱:

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

뷰 연동

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

뷰 연동 코드:

// 다이어그램 렌더링
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'; // 다이어그램은 일반적으로 렌더링됨

// Mermaid 또는 다른 다이어그램 라이브러리로 렌더링
function renderDiagram(element) {
  if (window.mermaid) {
    mermaid.initialize({ startOnLoad: false });
    mermaid.render('diagram-' + Date.now(), element.textContent, (svg) => {
      element.innerHTML = svg;
    });
  }
}

일반적인 문제

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

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

// 문제: 다이어그램 라이브러리 초기화
// 해결: 다이어그램 라이브러리 초기화
function initDiagramLibrary() {
  if (window.mermaid) {
    mermaid.initialize({ startOnLoad: false });
  }
}

// 문제: 다이어그램 데이터 검증
// 해결: 다이어그램 구문 검증
function validateDiagramData(data, type) {
  // 다이어그램 타입에 따라 검증 (Mermaid, PlantUML 등)
  return data.length > 0;
}

구현

완전한 구현 예제:

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