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

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

import Quill from 'quill';
import { isEmpty } from 'lodash';

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

class MailingAddressBlot extends BlockEmbed {
  static create({
    street, city, postal, state,
  }) {
    if (isEmpty(street)
      || isEmpty(city)
      || isEmpty(postal)
      || isEmpty(state)) {
      return;
    }

    const divNode = document.createElement('div');
    divNode.classList.add('composer__contact-address', 'cursor-pointer');

    /**
     * title
     */
    const titleNode = document.createElement('b');
    titleNode.innerHTML = 'Our mailing address:';

    /**
     * street, city, state postal
     */
    const streetNode = document.createTextNode(street);
    const address = `${city}, ${state} ${postal}`;
    const cityStateAndPostalNode = document.createTextNode(address);

    divNode.appendChild(titleNode);
    const brNode1 = document.createElement('br');
    divNode.appendChild(brNode1);

    divNode.appendChild(streetNode);
    const brNode2 = document.createElement('br');
    divNode.appendChild(brNode2);

    divNode.appendChild(cityStateAndPostalNode);

    divNode.setAttribute('data-street', street);
    divNode.setAttribute('data-city', city);
    divNode.setAttribute('data-postal', postal);
    divNode.setAttribute('data-state', state);
    divNode.contentEditable = 'false';

    // eslint-disable-next-line consistent-return
    return divNode;
  }

  static value(node) {
    return {
      street: node.getAttribute('data-street'),
      city: node.getAttribute('data-city'),
      postal: node.getAttribute('data-postal'),
      state: node.getAttribute('data-state'),
    };
  }
}

MailingAddressBlot.blotName = 'mailingAddressBlot';
MailingAddressBlot.className = 'composer__mailing-address';

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