wbu-design-system/dist/services/giphyBlotService.js

WhereBy.Design is the nascent design system for WhereBy.Us

import Quill from 'quill';

const BlockEmbed = Quill.import('blots/block/embed');

class GiphyBlot extends BlockEmbed {
  static create({ src, align }) {
    const divNode = document.createElement('div');
    divNode.classList.add('composer__figure');

    const imageNode = document.createElement('img');
    imageNode.setAttribute('src', src);
    divNode.appendChild(imageNode);

    const deleteBtnNode = document.createElement('button');
    deleteBtnNode.classList.add('composer__figure__overlay-button', 'border-white', 'cursor-pointer', 'rounded-full', 'z-10', 'top-3', 'right-3');
    deleteBtnNode.innerText = 'X';
    deleteBtnNode.contentEditable = 'false';
    divNode.appendChild(deleteBtnNode);

    if (align === 'right') {
      divNode.classList.add('ml-auto', 'mr-0');
    }
    if (align === 'center') {
      divNode.classList.add('ml-auto', 'mr-auto');
    }

    divNode.setAttribute('data-align', align);
    divNode.setAttribute('data-src', src);

    // eslint-disable-next-line func-names
    deleteBtnNode.onclick = function () {
      return divNode.parentNode.removeChild(divNode);
    };

    return divNode;
  }

  static value(node) {
    return {
      align: node.getAttribute('data-align'),
      src: node.getAttribute('data-src'),
    };
  }
}
GiphyBlot.blotName = 'giphyBlot';

export {
  GiphyBlot, // eslint-disable-line import/prefer-default-export
};