아이프레임 노드 타입 – contenteditable.lab

스키마 정의

아이프레임 노드 타입의 스키마 정의:

{
  iframe: {
    group: 'block',
    attrs: {
      src: { default: '' },
      width: { default: null },
      height: { default: null },
      allowfullscreen: { default: false }
    },
  }
}

모델 표현

모델 표현 예제:

{
  type: 'iframe',
  attrs: {
    src: 'https://example.com/embed',
    width: 800,
    height: 600,
    allowfullscreen: true
  }
}

HTML 직렬화

모델을 HTML로 변환:

function serializeIframe(node) {
  const attrs = {};
  if (node.attrs.src) attrs.src = escapeHtml(node.attrs.src);
  if (node.attrs.width) attrs.width = node.attrs.width;
  if (node.attrs.height) attrs.height = node.attrs.height;
  if (node.attrs.allowfullscreen) attrs.allowfullscreen = true;
  return '<iframe' + serializeAttrs(attrs) + '></iframe>';
}

HTML 역직렬화

HTML을 모델로 파싱:

function parseIframe(domNode) {
  return {
    type: 'iframe',
    attrs: {
      src: domNode.getAttribute('src') || '',
      width: parseInt(domNode.getAttribute('width')) || null,
      height: parseInt(domNode.getAttribute('height')) || null,
      allowfullscreen: domNode.hasAttribute('allowfullscreen')
    }
  };
}

뷰 연동

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

뷰 연동 코드:

// 아이프레임 렌더링
const iframe = document.createElement('iframe');
iframe.src = node.attrs.src;
if (node.attrs.width) iframe.width = node.attrs.width;
if (node.attrs.height) iframe.height = node.attrs.height;
iframe.allowFullscreen = node.attrs.allowfullscreen === true;
iframe.contentEditable = 'false'; // 아이프레임은 편집 불가

일반적인 문제

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

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

// 문제: XSS 보안
// 해결: src URL 검증 및 정제
function validateIframeSrc(src) {
  const allowedDomains = ['youtube.com', 'vimeo.com'];
  try {
    const url = new URL(src);
    return allowedDomains.some(domain => url.hostname.includes(domain));
  } catch {
    return false;
  }
}

// 문제: 샌드박스 속성
// 해결: 보안을 위해 sandbox 사용
iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');

// 문제: 반응형 아이프레임
// 해결: 반응형 래퍼 사용
function makeIframeResponsive(iframe) {
  const wrapper = document.createElement('div');
  wrapper.className = 'iframe-wrapper';
  wrapper.style.position = 'relative';
  wrapper.style.paddingBottom = '56.25%'; // 16:9
  iframe.style.position = 'absolute';
  iframe.style.width = '100%';
  iframe.style.height = '100%';
  wrapper.appendChild(iframe);
  return wrapper;
}

구현

완전한 구현 예제:

class IframeNode {
  constructor(attrs) {
    this.type = 'iframe';
    this.attrs = {
      src: attrs?.src || '',
      width: attrs?.width || null,
      height: attrs?.height || null,
      allowfullscreen: attrs?.allowfullscreen === true
    };
  }
  
  toDOM() {
    const iframe = document.createElement('iframe');
    Object.assign(iframe, this.attrs);
    return iframe;
  }
  
  static fromDOM(domNode) {
    return new IframeNode({
      src: domNode.getAttribute('src') || '',
      width: parseInt(domNode.getAttribute('width')) || null,
      height: parseInt(domNode.getAttribute('height')) || null,
      allowfullscreen: domNode.hasAttribute('allowfullscreen')
    });
  }
}