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

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

import Quill from 'quill';

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

class TwitterBlot extends BlockEmbed {
  static create({ html }) {
    const updatedHtml = html.replace('class="twitter-tweet"', 'class="twitter-tweet w-full"');
    const divNode = document.createElement('div');
    divNode.innerHTML = updatedHtml;
    divNode.classList.add('relative');

    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);
    divNode.setAttribute('data-html', updatedHtml);
    divNode.contentEditable = 'false';

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

    return divNode;
  }

  static value(node) {
    return {
      html: node.getAttribute('data-html'),
    };
  }
}
TwitterBlot.blotName = 'twitterBlot';

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