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

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

import Quill from 'quill';

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

class AggregateBlot extends BlockEmbed {
  static create({
    title, url, publicationDate, content,
  }) {
    const divNode = document.createElement('div');
    divNode.classList.add('composer__aggregate__wrapper');
    divNode.classList.add('d-flex');
    divNode.setAttribute('data-title', title);
    divNode.setAttribute('data-url', url);
    divNode.setAttribute('data-publication-date', publicationDate);
    divNode.setAttribute('data-content', content);
    divNode.contentEditable = 'false';

    const titleNode = document.createElement('h3');
    titleNode.classList.add('composer__aggregate__title');
    titleNode.innerHTML = `<a href=${url}>${title}</a>`;

    const dateNode = document.createElement('p');
    dateNode.classList.add('composer__aggregate__date');
    dateNode.innerHTML = publicationDate;

    const contentNode = document.createElement('p');
    contentNode.classList.add('composer__aggregate__content');
    contentNode.innerHTML = content;

    divNode.appendChild(titleNode);
    divNode.appendChild(dateNode);
    divNode.appendChild(contentNode);

    return divNode;
  }

  static value(node) {
    return {
      title: node.getAttribute('data-title'),
      url: node.getAttribute('data-url'),
      publicationDate: node.getAttribute('data-publication-date'),
      content: node.getAttribute('data-content'),
    };
  }
}
AggregateBlot.blotName = 'aggregateBlot';
AggregateBlot.className = 'composer__aggregate';

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