@atlaskit/editor-plugin-block-controls/dist/esm/ui/drag-preview.js

Block controls plugin for @atlaskit/editor-core

import _typeof from "@babel/runtime/helpers/typeof";
import { getBrowserInfo } from '@atlaskit/editor-common/browser';
var previewStyle = {
  borderColor: "var(--ds-border, #0B120E24)",
  borderStyle: 'solid',
  borderRadius: "var(--ds-radius-small, 3px)",
  borderWidth: "var(--ds-border-width-selected, 2px)",
  backgroundColor: "var(--ds-skeleton-subtle, #17171708)"
};
var getPreviewContainerDimensionsForSingle = function getPreviewContainerDimensionsForSingle(dom, nodeType) {
  var nodeContainer = dom;
  var iframeContainer = dom.querySelector('iframe');
  if (nodeType === 'embedCard') {
    nodeContainer = dom.querySelector('.rich-media-item') || dom;
  } else if (nodeType === 'extension' && iframeContainer) {
    nodeContainer = iframeContainer;
  }
  var nodeContainerRect = nodeContainer.getBoundingClientRect();
  return {
    width: nodeContainerRect.width,
    height: nodeContainerRect.height
  };
};
var getPreviewContainerDimensions = function getPreviewContainerDimensions(dragPreviewContent) {
  var maxWidth = 0;
  var heightSum = 0;
  for (var index = 0; index < dragPreviewContent.length; index++) {
    var element = dragPreviewContent[index];
    var _getPreviewContainerD = getPreviewContainerDimensionsForSingle(element.dom, element.nodeType),
      width = _getPreviewContainerD.width,
      height = _getPreviewContainerD.height;
    if (width > maxWidth) {
      maxWidth = width;
    }
    heightSum += height;
  }
  return {
    width: maxWidth,
    height: heightSum
  };
};
var createGenericPreview = function createGenericPreview() {
  var generalPreview = document.createElement('div');
  // ProseMirror class is required to make sure the cloned dom is styled correctly
  generalPreview.classList.add('ProseMirror', 'block-ctrl-drag-preview');
  generalPreview.style.border = "".concat(previewStyle.borderWidth, " ").concat(previewStyle.borderStyle, " ").concat(previewStyle.borderColor);
  generalPreview.style.borderRadius = previewStyle.borderRadius;
  generalPreview.style.backgroundColor = previewStyle.backgroundColor;
  generalPreview.style.height = '100%';
  generalPreview.setAttribute('data-testid', 'block-ctrl-generic-drag-preview');
  return generalPreview;
};
var createContentPreviewElement = function createContentPreviewElement(dom, nodeType, nodeSpacing) {
  var contentPreviewOneElement = document.createElement('div');
  contentPreviewOneElement.classList.add('ProseMirror', 'block-ctrl-drag-preview');
  var resizer = dom.querySelector('.resizer-item');
  var clonedDom = resizer && ['mediaSingle', 'table'].includes(nodeType) ?
  // Ignored via go/ees005
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
  resizer.cloneNode(true) :
  // Ignored via go/ees005
  // eslint-disable-next-line @atlaskit/editor/no-as-casting
  dom.cloneNode(true);
  var browser = getBrowserInfo();
  clonedDom.style.marginLeft = '0';
  clonedDom.style.marginTop = nodeSpacing ? "".concat(nodeSpacing.top) : '0';
  clonedDom.style.marginRight = '0';
  clonedDom.style.marginBottom = nodeSpacing ? "".concat(nodeSpacing.bottom) : '0';
  clonedDom.style.boxShadow = 'none';
  clonedDom.style.opacity = browser.windows ? '1' : '0.31';
  contentPreviewOneElement.appendChild(clonedDom);
  return contentPreviewOneElement;
};
var isGenericPreview = function isGenericPreview(dom, nodeType) {
  var embedCard = dom.querySelector('.embedCardView-content-wrap');
  return nodeType === 'embedCard' || !!embedCard || nodeType === 'extension' && !!dom.querySelector('iframe');
};
var createPreviewForElement = function createPreviewForElement(dom, nodeType, nodeSpacing) {
  var shouldBeGenericPreview = isGenericPreview(dom, nodeType);
  if (shouldBeGenericPreview) {
    return createGenericPreview();
  } else {
    return createContentPreviewElement(dom, nodeType, nodeSpacing);
  }
};
export var dragPreview = function dragPreview(container, dragPreviewContent) {
  container.style.pointerEvents = 'none';
  if (!Array.isArray(dragPreviewContent) && _typeof(dragPreviewContent) === 'object') {
    dragPreviewContent = [dragPreviewContent];
  }
  var _getPreviewContainerD2 = getPreviewContainerDimensions(dragPreviewContent),
    maxWidth = _getPreviewContainerD2.width,
    maxHeight = _getPreviewContainerD2.height;
  container.style.width = "".concat(maxWidth, "px");
  container.style.height = "".concat(maxHeight, "px");
  var previewWrapperFragment = document.createDocumentFragment();
  for (var index = 0; index < dragPreviewContent.length; index++) {
    var element = dragPreviewContent[index];
    var contentPreviewOneElement = createPreviewForElement(element.dom, element.nodeType, element.nodeSpacing);
    previewWrapperFragment.appendChild(contentPreviewOneElement);
  }
  container.appendChild(previewWrapperFragment);
  var scrollParent = document.querySelector('.fabric-editor-popup-scroll-parent');
  var scrollParentClassNames = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.className;
  // Add the scroll parent class to the container to ensure the cloned element is styled correctly
  container.className = scrollParentClassNames || '';
  container.classList.remove('fabric-editor-popup-scroll-parent');
  // Prevents a scrollbar from showing
  container.style.overflow = 'visible';
  return function () {
    return container;
  };
};