@atlaskit/editor-plugin-block-controls/dist/esm/pm-plugins/quick-insert-calculate-position.js

Block controls plugin for @atlaskit/editor-core

import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import { rootElementGap, topPositionAdjustment, QUICK_INSERT_DIMENSIONS, QUICK_INSERT_LEFT_OFFSET } from '../ui/consts';
import { refreshAnchorName } from '../ui/utils/anchor-name';
import { getAnchorAttrName } from '../ui/utils/dom-attr-name';
import { getControlBottomCSSValue, getControlHeightCSSValue, getNodeHeight, getTopPosition, shouldBeSticky } from './utils/drag-handle-positions';
import { getLeftPositionForRootElement } from './utils/widget-positions';

// Adapted from `src/ui/drag-handle.tsx` as positioning logic is similar
// CHANGES - added an offset so quick insert button can be positioned beside drag handle
// CHANGES - removed `editorExperiment('nested-dnd', true)` check and rootNodeType calculation
// CHANGES - replace anchorName with rootAnchorName
// CHANGES - `removed editorExperiment('advanced_layouts', true) && isLayoutColumn` checks as quick insert button will not be positioned for layout column
export var calculatePosition = function calculatePosition(_ref) {
  var rootAnchorName = _ref.rootAnchorName,
    anchorName = _ref.anchorName,
    view = _ref.view,
    getPos = _ref.getPos,
    rootNodeType = _ref.rootNodeType,
    macroInteractionUpdates = _ref.macroInteractionUpdates,
    anchorRectCache = _ref.anchorRectCache;
  var supportsAnchor = CSS.supports('top', "anchor(".concat(rootAnchorName, " start)")) && CSS.supports('left', "anchor(".concat(rootAnchorName, " start)"));
  var safeAnchorName = refreshAnchorName({
    getPos: getPos,
    view: view,
    anchorName: rootAnchorName
  });
  var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(safeAnchorName, "\"]"));
  var hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
  var isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension';
  var isBlockCard = rootNodeType === 'blockCard';
  var isEmbedCard = rootNodeType === 'embedCard';
  var isMacroInteractionUpdates = macroInteractionUpdates && isExtension;
  var innerContainer = null;
  if (dom) {
    if (isEmbedCard) {
      innerContainer = dom.querySelector('.rich-media-item');
    } else if (hasResizer) {
      innerContainer = dom.querySelector('.resizer-item');
    } else if (isExtension) {
      innerContainer = dom.querySelector('.extension-container[data-layout]');
    } else if (isBlockCard) {
      //specific to datasource blockCard
      innerContainer = dom.querySelector('.datasourceView-content-inner-wrap');
    }
  }
  var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
  var isSticky = shouldBeSticky(rootNodeType);
  var bottom = getControlBottomCSSValue(safeAnchorName || anchorName, isSticky, true);
  if (supportsAnchor) {
    return _objectSpread({
      left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(QUICK_INSERT_DIMENSIONS.width, "px - ").concat(rootElementGap(rootNodeType), "px + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)"),
      top: "calc(anchor(".concat(safeAnchorName, " start) + ").concat(topPositionAdjustment(rootNodeType), "px)")
    }, bottom);
  }

  // expensive, calls offsetHeight
  var nodeHeight = getNodeHeight(dom, safeAnchorName || anchorName, anchorRectCache) || 0;
  var height = getControlHeightCSSValue(nodeHeight, isSticky, true, "var(--ds-space-300, 24px)");
  return _objectSpread({
    left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(".concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)"),
    top: getTopPosition(dom, rootNodeType)
  }, height);
};