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

Block controls plugin for @atlaskit/editor-core

import { DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H1_TOP_ADJUSTMENT, DRAG_HANDLE_H2_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT, DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT, dragHandleGap } from '../../ui/consts';
var STICKY_NODES = ['panel', 'table', 'expand', 'layoutSection', 'bodiedExtension'];
export var getTopPosition = function getTopPosition(dom, type) {
  if (!dom) {
    return 'auto';
  }
  var table = dom.querySelector('table');
  var isTable = table && (!type || type === 'table');
  if (isTable) {
    return "".concat(dom.offsetTop + ((table === null || table === void 0 ? void 0 : table.offsetTop) || 0), "px");
  } else if (type === 'rule') {
    return "".concat(dom.offsetTop - DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, "px");
  } else if (type === 'layoutColumn') {
    return "".concat(-dom.offsetTop / 2, "px");
  } else if (type === 'heading-1') {
    return "".concat(dom.offsetTop + DRAG_HANDLE_H1_TOP_ADJUSTMENT, "px");
  } else if (type === 'heading-2') {
    return "".concat(dom.offsetTop + DRAG_HANDLE_H2_TOP_ADJUSTMENT, "px");
  } else if (type === 'heading-3') {
    return "".concat(dom.offsetTop, "px");
  } else if (type === 'heading-4') {
    return "".concat(dom.offsetTop - DRAG_HANDLE_H4_TOP_ADJUSTMENT, "px");
  } else if (type === 'heading-5') {
    return "".concat(dom.offsetTop - DRAG_HANDLE_H5_TOP_ADJUSTMENT, "px");
  } else if (type === 'heading-6') {
    return "".concat(dom.offsetTop - DRAG_HANDLE_H6_TOP_ADJUSTMENT, "px");
  } else if (type === 'paragraph-small') {
    return "".concat(dom.offsetTop + DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT, "px");
  } else if (type === 'paragraph') {
    return "".concat(dom.offsetTop + DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT, "px");
  } else {
    return "".concat(dom.offsetTop, "px");
  }
};
export var getLeftPosition = function getLeftPosition(dom, type, innerContainer, macroInteractionUpdates, parentType) {
  if (!dom) {
    return 'auto';
  }
  if (!innerContainer) {
    return type === 'layoutColumn' ? "".concat(dom.offsetLeft + dom.clientWidth / 2 - DRAG_HANDLE_HEIGHT / 2, "px") : "".concat(dom.offsetLeft - dragHandleGap(type, parentType) - DRAG_HANDLE_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 - dragHandleGap(type, parentType) - DRAG_HANDLE_WIDTH, "px") : "".concat(innerContainer.offsetLeft + leftAdjustment - innerContainer.offsetWidth / 2 - dragHandleGap(type, parentType) - DRAG_HANDLE_WIDTH, "px");
};

// anchorRectCache seems to have a 100% cache miss rate
export var getNodeHeight = function getNodeHeight(dom, anchor, anchorRectCache) {
  return (anchorRectCache === null || anchorRectCache === void 0 ? void 0 : anchorRectCache.getHeight(anchor)) || (dom === null || dom === void 0 ? void 0 : dom.offsetHeight);
};
export var shouldBeSticky = function shouldBeSticky(nodeType) {
  return editorExperiment('platform_editor_controls', 'variant1') && STICKY_NODES.includes(nodeType);
};
export var getControlBottomCSSValue = function getControlBottomCSSValue(anchor, isSticky, isTopLevelNode, isLayoutColumn) {
  return editorExperiment('advanced_layouts', true) && isLayoutColumn || !isSticky || !isTopLevelNode ? {
    bottom: 'unset'
  } : {
    bottom: "anchor(".concat(anchor, " end)")
  };
};
export var getControlHeightCSSValue = function getControlHeightCSSValue(nodeHeight, isSticky, isTopLevelNode, fallbackPxHeight, isLayoutColumn) {
  return editorExperiment('advanced_layouts', true) && isLayoutColumn || !isSticky || !isTopLevelNode ? {
    height: 'unset'
  } : {
    height: "".concat(nodeHeight || fallbackPxHeight, "px")
  };
};
export var shouldMaskNodeControls = function shouldMaskNodeControls(nodeType, isTopLevelNode) {
  return (
    // eslint-disable-next-line @atlaskit/platform/no-preconditioning
    isTopLevelNode && ['table'].includes(nodeType) && editorExperiment('platform_editor_controls', 'variant1')
  );
};