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

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

import Quill from 'quill';
import { isNull, isUndefined } from 'lodash';

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

class ImageBlot extends BlockEmbed {
  static create({
    src, caption, alt, imageLink, id, align, style = '',
  }) {
    const figureNode = document.createElement('figure');
    figureNode.classList.add('composer__figure', 'cursor-pointer', 'd-block');
    if (align === 'right') {
      figureNode.classList.add('ml-auto', 'mr-0');
    }
    if (align === 'center') {
      figureNode.classList.add('ml-auto', 'mr-auto');
    }

    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';

    /** Insert the image */
    const imgNode = document.createElement('img');
    imgNode.setAttribute('src', src);
    imgNode.classList.add('composer__figure__img', 'hover:bg-gray-500');

    /** hover overlay */
    const overlayNode = document.createElement('div');
    overlayNode.classList.add('composer__figure__overlay', 'bg-gray-500');
    const overlayTextNode = document.createElement('div');

    overlayTextNode.innerText = 'Edit';
    overlayTextNode.contentEditable = 'false';
    overlayTextNode.classList.add('composer__figure__overlay-text');
    overlayNode.appendChild(overlayTextNode);

    /** caption */
    const textNode = document.createElement('figcaption');
    textNode.classList.add('composer__figure__text', 'mt-3');
    if (align === 'right') {
      textNode.classList.add('text-right');
    }
    if (align === 'center') {
      textNode.classList.add('text-center');
    }
    textNode.contentEditable = 'false';
    textNode.innerHTML = caption || '';

    figureNode.appendChild(imgNode);
    figureNode.appendChild(deleteBtnNode);
    figureNode.appendChild(overlayNode);
    figureNode.appendChild(textNode);

    const existedImageBlotWithoutId = isNull(id) || isUndefined(id);
    const imageBlotId = existedImageBlotWithoutId
      ? Math.floor((1 + Math.random()) * 0x10000)
        .toString(16)
        .substring(1)
      : id;

    figureNode.setAttribute('data-alt', alt || '');
    figureNode.setAttribute('data-caption', caption || '');
    figureNode.setAttribute('data-src', src);
    figureNode.setAttribute('data-image-link', imageLink || '');
    figureNode.setAttribute('data-id', imageBlotId);
    figureNode.setAttribute('data-align', align || 'center');
    figureNode.setAttribute('data-style', style || '');

    const imageBlotToEmit = {
      src,
      id: imageBlotId,
      caption,
      alt,
      imageLink,
      align,
      style,
    };

    // eslint-disable-next-line func-names
    overlayNode.onclick = function () {
      const triggerImageSettingsOverlayEvent = new CustomEvent('trigger-image-settings-overlay', {
        bubbles: true,
        cancelable: true,
        composed: false,
        detail: imageBlotToEmit,
      });

      document.dispatchEvent(triggerImageSettingsOverlayEvent);
    };

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

    return figureNode;
  }

  static value(node) {
    return {
      src: node.getAttribute('data-src'),
      id: node.getAttribute('data-id'),
      caption: node.getAttribute('data-caption'),
      alt: node.getAttribute('data-alt'),
      imageLink: node.getAttribute('data-image-link'),
      align: node.getAttribute('data-align'),
      style: node.getAttribute('data-style'),
    };
  }
}

ImageBlot.blotName = 'imageBlot';
ImageBlot.className = 'composer__image-blot-divider';

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