@atlaskit/editor-plugin-block-controls/dist/esm/pm-plugins/utils/widget-positions.js

Block controls plugin for @atlaskit/editor-core

import { rootElementGap } from '../../ui/consts';

// Adapted from `src/pm-plugins/utils/drag-handle-positions.ts`
// CHANGES - removed parentNodeType, use only for positioning widgets for top level element
// CHANGES - removed layout
// CHANGES - added overrides for constants for widget dimensions
export var getLeftPositionForRootElement = function getLeftPositionForRootElement(dom, nodeType, widgetDimensions, innerContainer, macroInteractionUpdates) {
  if (!dom) {
    return 'auto';
  }
  if (!innerContainer) {
    return "".concat(dom.offsetLeft - rootElementGap(nodeType) - widgetDimensions.width, "px");
  }

  // There is a showMacroInteractionDesignUpdates prop in extension node wrapper that can add a relative span under the top level div
  // We need to adjust the left offset position of the drag handle to account for the relative span
  var relativeSpan = macroInteractionUpdates ? dom.querySelector('span.relative') : null;
  var leftAdjustment = relativeSpan ? relativeSpan.offsetLeft : 0;
  return getComputedStyle(innerContainer).transform === 'none' ? "".concat(innerContainer.offsetLeft + leftAdjustment - rootElementGap(nodeType) - widgetDimensions.width, "px") : "".concat(innerContainer.offsetLeft + leftAdjustment - innerContainer.offsetWidth / 2 - rootElementGap(nodeType) - widgetDimensions.width, "px");
};

/**
 * Left position (in px) for a widget on the right edge of the block.
 * Mirrors getLeftPositionForRootElement: when innerContainer is set (table, mediaSingle,
 * extension, blockCard, embedCard) use it for the right edge so the button aligns to the
 * content box and does not overlap; otherwise use the block (dom).
 */
export var getRightPositionForRootElement = function getRightPositionForRootElement(dom, nodeType, widgetDimensions, innerContainer, macroInteractionUpdates) {
  if (!dom) {
    return 'auto';
  }
  var relativeSpan = macroInteractionUpdates ? dom.querySelector('span.relative') : null;
  var leftAdjustment = relativeSpan ? relativeSpan.offsetLeft : 0;
  var gap = rootElementGap(nodeType);
  var width = widgetDimensions.width;
  if (!innerContainer) {
    return "".concat(dom.offsetLeft + leftAdjustment + dom.offsetWidth - gap - width, "px");
  }
  return getComputedStyle(innerContainer).transform === 'none' ? "".concat(innerContainer.offsetLeft + leftAdjustment + innerContainer.offsetWidth - gap - width, "px") : "".concat(innerContainer.offsetLeft + leftAdjustment + innerContainer.offsetWidth / 2 - gap - width, "px");
};