스마트에디터 Plugin 이야기

productConfig: {
  documentToolbar: {
    buttonSet: [
      "social-media-image",
      "sticker",
      // 사용자 정의 버튼 삽입 위치
      "custom-count", 
        ...
    ],
    additionalButtons: [
      {
        "name": "custom-count",
        "imageUrl": "https://i.imgur.com/sojc9G2.png", // 버튼 이미지 주소
        "label": "카운트", // 버튼 레이블
        "logId": "count", // 버튼 nClicks 로그.
        "title": "카운트 첨부" // 버튼 요소의 title 값
      }
    ]
  }
}

events: {
  click: function (editorEvent) {
    var dataset = editorEvent.detail.dataset;
    console.log(dataset);
  }
}

events: {
  click: function (editorEvent) {
    var dataset = editorEvent.detail.dataset;
    if (dataset.group === "documentToolbar") {
      if(dataset.name === "custom-count") {
        seEditor.pauseDocumentEdit(); // 스마트에디터의 문서 편집을 막습니다.
        // 클릭 동작하기 
        console.log(dataset);
        seEditor.unpauseDocumentEdit(); // 스마트에디터의 문서 편집을 원래 상태로 변경합니다.
      }
    }
  }
}

plugins: {
  customComponents: [
    {
      type: "count", // 사용자 정의 컴포넌트 타입 정의
      onRender: function(payload) {
        var currentCount = payload.data.currentCount;
        var render = function(count) {
          var innerStyle = "border:1px solid red; width:500px; height:50px; text-align: center; display: flex; justify-content: center; align-items: center;"
          return "<div style='" + innerStyle + "'>" + count + "</div>";
        }
        return render(currentCount);
      }
    }
  ]
},

productConfig: {
  documentToolbar: {
    additionalButtons: [
      // 플러그인 매니저에 등록된 플러그인들에서 추가될 버튼을 모아서 정의해줍니다. 
      ...PluginManager.buttons
    ]
  }
},
plugins: {
  customComponents: [
    // 플러그인 매니저에 등록된 커스텀 컴포넌트 리스트를 정의해줍니다. 
    ....PluginManager.components
  ]
},
events: {
  click: function (editorEvent) {
    // 플러그인 매니저에 등록된 개별 매니저에 메세지를 보냅니다. 
    PluginManager.fireEvent('click', editorEvent);
  }
}

PluginManager.add(MyPlugin);

export default class PluginManager {
  // 등록될 플러그인 리스트
  static plugins = [];
  // 플러그인 등록하기
  static add(pluginInstance) {
    PluginManager.plugins.push(pluginInstance);
  }
  // 추가될 버튼 리스트 구하기
  static get buttons() {
    return PluginManager.plugins.map((plugin) => plugin.button).filter(Boolean);
  }
  // 추가될 커스텀 컴포넌트 리스트 구하기
  static get components() {
    return PluginManager.plugins
      .map((plugin) => plugin.component)
      .filter(Boolean);
  }
  // 특정 이벤트 실행하기
  static fireEvent(eventName, dataset) {
    switch (eventName) {
      case 'ready':
        PluginManager.plugins.forEach((plugin) => plugin.emit(eventName));
        break;
      default:
        Plugin.fireEvent(eventName, dataset);
        return;
    }
  }
}

export default class Plugin {
  constructor(obj = {}) {
    this.obj = obj;
  }
  // DocumentToolbar 에서 사용될 버튼의 정의를 만들어줍니다.
  get button() {
    if (this.obj.noneButton) {
      return undefined;
    }
    // 문서 도구 막대 버튼 정의
    return {
      name: this.obj.type,
      imageUrl: this.obj.imageUrl || 'https://i.imgur.com/sojc9G2.png', // 버튼 이미지 주소
      label: this.obj.label, // 버튼 레이블
      logId: this.obj.logId, // 버튼 nClicks 로그.
      title: this.obj.title, // 버튼 요소의 title 값
    };
  }
  // 커스텀 컴포넌트가 될 정보를 정의합니다.
  // 이 때 onRender 함수를 분리해서 정의할 수 있게 해줍니다.
  get component() {
    const self = this;
    return {
      type: this.obj.type, // 사용자 정의 컴포넌트 타입 정의
      propertyToolbar: this.obj.propertyToolbar || [],
      contextToolbar: this.obj.contextToolbar || [],
      onRender: function (payload) {
        return self.render(payload.data, this);
      },
    };
  }
  // render 결과 리턴
  render(data, component) {
    if (this.obj.render) {
      setTimeout(() => {
        // setTimeout 으로 시간축을 다르게 해서 render 이후에 함수를 실행 할 수 있도록 합니다.
        // 커스텀 컴포넌트에 부가 기능 넣을 때 유용합니다.
        this.emit('afterRender', data, component);
      }, this.obj.delayRender || 0);
      return this.obj.render(this, data, component);
    }
  }
  // 플러그인 에서 사용될 간단한 이벤트 시스템을 만듭니다.
  static fireEvent(eventName, dataset) {
    const func = Plugin.getCallback(eventName, dataset);
    if (func) {
      func();
    }
  }
}

PluginManager.add(new Plugin({
  type: 'clickCounter',
  imageUrl: "https://i.imgur.com/sojc9G2.png", // 버튼 이미지 주소
  label: "클릭 카운터", // 버튼 레이블
  logId: "clickCounter", // 버튼 nClicks 로그.
  title: "클릭 카운터", // 버튼 요소의 title 값,
  render: (instance, { count }, { id }) => {
    return `
      <button type="button">
        ${count} 
      </button>
    `;
  }
})

PluginManager.add(new Plugin({
  ...,
  // 다른 속성과 실행되는 함수를 분리하기 위해서 callbacks 라는 그룹으로 관리하고자 합니다. 
  callbacks: {  
    // documentToolbar 에서 버튼이 클릭될 때 실행되는 함수
    'click': (instance) => {
      console.log(`${instance.type} button is clicked`);
    }
  }
})  

class PluginManager {
  ...,
  static fireEvent(eventName, dataset) {
    if (dataset.group === 'documentToolbar') {
      PluginManager.plugins.filter(plugin => plugin.type === dataset.name).forEach(plugin => {
        plugin.emit('click', dataset)
      });
    }
  }
}

class Plugin {
  ...,
  emit (eventName, ...args) {
    if (typeof this.obj.callbacks[eventName] === 'function') {
      this.obj.callbacks[eventName](this, ...args);
    }
  }  
}

PluginManager.add(new Plugin({
  ...,
  callbacks: {
    click: (instance) => {
      // 플러그인 인스턴스에 정의된 api 를 통해서 커스텀 컴포넌트를 추가 
      instance.insertCustomComponent({ 
        count: 0
      })
    }
  }   
})

PluginManager.add(new Plugin({
  ...,
  render: (instance, { count }, { id }) => {
    return `
      <button type="button">
        ${count}   
      </button> 
    `;
  }
})

PluginManager.add(new Plugin({
  ...,
  // render 이후 실행 되는 함수 
  afterRender: (instance, {count}, {id} ) => {
    const $el = document.getElementById('custom-component-' + id);
    if ($el) {
      $el.addEventListener('click', () => {
        insert.updateCustomData({ count: count + 1 })
      });
    }  
  },
  render: (instance, { count }, { id }) => {
    return `
      <div id="custom-component-${id}">
        <button type="button">${count}</button>
      </div>
    `;
  }
})

PluginManager.add(new Plugin({
  ...,
  // render 이후 실행 되는 함수 
  afterRender: (instance, {count}, {id} ) => {
    const $el = document.getElementById('custom-component-' + id);
    if ($el) {
      // ReactDOM.render 를 사용해서 간단히 컴포넌트를 렌더링 할 수도 있습니다. 
      ReactDOM.render(
        <div onClick={() => instance.update(id, { count: count + 1 } )}>
          {count}
        </div>,
        $el
      );
    }
  },
  render: (instance, { count }, { id }) => {
    return `<div id="custom-component-${id}"></div>`;
  }  
})