@atlaskit/editor-plugin-layout/dist/es2019/ui/LayoutColumnMenu/utils.js

Layout plugin for @atlaskit/editor-core

import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
import { fg } from '@atlaskit/platform-feature-flags';
export const LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 4];

// Gate OFF: small gap below the handle; Popup handles invert/nudge fallbacks.
export const LAYOUT_COLUMN_MENU_POPUP_OFFSET_BELOW = [0, 2];
// Gate OFF: left-aligned, below the handle. Gate ON (legacy): centred, prefer above with manual flip.
export const getLayoutColumnMenuPositioningProps = () => {
  if (!fg('platform_editor_layout_column_menu_kill_switch_1')) {
    return {
      alignX: undefined,
      alignY: undefined,
      offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET_BELOW,
      useManualBelowFlip: false
    };
  }
  return {
    alignX: 'center',
    alignY: 'top',
    offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
    useManualBelowFlip: true
  };
};
const getVisibleEditorAreaTop = (editorView, scrollableElement) => {
  const visibleEditorArea = scrollableElement || findOverflowScrollParent(editorView.dom);
  return Math.max(visibleEditorArea ? visibleEditorArea.getBoundingClientRect().top : 0, 0);
};

// Prefer opening above the column drag handle, but fall back below when the visible editor
// area does not have enough space above (for example near the top toolbar).
export const shouldOpenLayoutColumnMenuBelow = ({
  editorView,
  popup,
  scrollableElement,
  target
}) => {
  const [, offsetY] = LAYOUT_COLUMN_MENU_POPUP_OFFSET;
  const spaceAbove = target.getBoundingClientRect().top - getVisibleEditorAreaTop(editorView, scrollableElement);
  const popupHeight = popup.getBoundingClientRect().height || popup.clientHeight;
  return spaceAbove <= popupHeight + offsetY;
};
export const calculateFallbackBottomPosition = (position, target, popup) => {
  if (!(popup.offsetParent instanceof HTMLElement)) {
    return position;
  }
  const offsetParent = popup.offsetParent;
  const borderBottomWidth = parseInt(window.getComputedStyle(offsetParent).borderBottomWidth, 10) || 0;
  const {
    top: offsetParentTop
  } = offsetParent.getBoundingClientRect();
  const {
    top: targetTop,
    height: targetHeight
  } = target.getBoundingClientRect();
  const [, offsetY] = LAYOUT_COLUMN_MENU_POPUP_OFFSET;
  const top = Math.ceil(targetTop - offsetParentTop + targetHeight + (offsetParent === offsetParent.ownerDocument.body ? 0 : offsetParent.scrollTop) - borderBottomWidth + offsetY);
  const positionWithoutBottom = {
    ...position
  };
  delete positionWithoutBottom.bottom;
  return {
    ...positionWithoutBottom,
    top
  };
};