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

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

import Quill from 'quill';

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

/**
 * Registers a custom `SegmentSection` blot we can use to embed custom blots into
 * quill. This particular one is responsible for handling segment dividers that
 * are associated with merge tags.
 *
 * @since 0.6.0
 */
class SegmentSection extends BlockEmbed {
  static create({ mergeTag, segmentName, src }) {
    const segmentSectionDivider = document.createElement('img');

    segmentSectionDivider.classList.add('composer__segment-section-divider');
    segmentSectionDivider.classList.add('d-block');
    segmentSectionDivider.setAttribute('data-segment', segmentName);
    segmentSectionDivider.setAttribute('data-segment-merge-tag', mergeTag);
    segmentSectionDivider.setAttribute('src', src);

    return segmentSectionDivider;
  }

  static value(node) {
    return {
      mergeTag: node.getAttribute('data-segment-merge-tag'),
      segmentName: node.getAttribute('data-segment'),
      src: node.getAttribute('src'),
    };
  }
}
SegmentSection.blotName = 'segmentSection';
SegmentSection.className = 'composer__segment-section-divider';

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