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

Block controls plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.calculatePosition = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _consts = require("../ui/consts");
var _anchorName = require("../ui/utils/anchor-name");
var _domAttrName = require("../ui/utils/dom-attr-name");
var _dragHandlePositions = require("./utils/drag-handle-positions");
var _widgetPositions = require("./utils/widget-positions");
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) { (0, _defineProperty2.default)(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; }
// 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
var calculatePosition = exports.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 = (0, _anchorName.refreshAnchorName)({
    getPos: getPos,
    view: view,
    anchorName: rootAnchorName
  });
  var dom = view.dom.querySelector("[".concat((0, _domAttrName.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 = (0, _dragHandlePositions.shouldBeSticky)(rootNodeType);
  var bottom = (0, _dragHandlePositions.getControlBottomCSSValue)(safeAnchorName || anchorName, isSticky, true);
  if (supportsAnchor) {
    return _objectSpread({
      left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_consts.QUICK_INSERT_DIMENSIONS.width, "px - ").concat((0, _consts.rootElementGap)(rootNodeType), "px + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)"),
      top: "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(rootNodeType), "px)")
    }, bottom);
  }

  // expensive, calls offsetHeight
  var nodeHeight = (0, _dragHandlePositions.getNodeHeight)(dom, safeAnchorName || anchorName, anchorRectCache) || 0;
  var height = (0, _dragHandlePositions.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((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(".concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)"),
    top: (0, _dragHandlePositions.getTopPosition)(dom, rootNodeType)
  }, height);
};