@atlaskit/editor-plugin-layout 11.1.0 → 11.1.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-layout
 
+## 11.1.2
+
+### Patch Changes
+
+- [`7f12a2679677d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7f12a2679677d) -
+  Open the layout column menu above the drag handle when space allows
+- Updated dependencies
+
+## 11.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.1.0
 
 ### Minor Changes

package/dist/cjs/ui/LayoutColumnMenu/index.js

@@ -19,9 +19,9 @@ var _editorUiControlModel = require("@atlaskit/editor-ui-control-model");
 var _layoutColumnSelection = require("../../pm-plugins/utils/layout-column-selection");
 var _components = require("./components");
 var _keys = require("./keys");
+var _utils = require("./utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
-var LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 4];
 var TOOLBAR_MENU_SELECTOR = '[data-toolbar-component="menu"]';
 var NESTED_DROPDOWN_MENU_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
 
@@ -125,6 +125,22 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     return isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null;
   }, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection]);
   var hasValidTarget = target instanceof HTMLElement;
+  var positionLayoutColumnMenu = (0, _react.useCallback)(function (position) {
+    var _menuWrapperRef$curre;
+    var popup = (_menuWrapperRef$curre = menuWrapperRef.current) === null || _menuWrapperRef$curre === void 0 ? void 0 : _menuWrapperRef$curre.parentElement;
+    if (!(target instanceof HTMLElement) || !(popup instanceof HTMLElement)) {
+      return position;
+    }
+    if ((0, _utils.shouldOpenLayoutColumnMenuBelow)({
+      editorView: editorView,
+      popup: popup,
+      scrollableElement: scrollableElement,
+      target: target
+    })) {
+      return (0, _utils.calculateFallbackBottomPosition)(position, target, popup);
+    }
+    return position;
+  }, [editorView, scrollableElement, target]);
   (0, _react.useEffect)(function () {
     if (isLayoutColumnMenuOpen && (!hasValidTarget || components.length === 0)) {
       closeLayoutColumnMenu();
@@ -140,9 +156,12 @@ var LayoutColumnMenu = exports.LayoutColumnMenu = /*#__PURE__*/_react.default.me
     scrollableElement: scrollableElement,
     zIndex: _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
     alignX: "center",
+    alignY: "top",
+    forcePlacement: true,
     preventOverflow: true,
     stick: true,
-    offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
+    offset: _utils.LAYOUT_COLUMN_MENU_POPUP_OFFSET,
+    onPositionCalculated: positionLayoutColumnMenu,
     handleClickOutside: handleClickOutside,
     handleEscapeKeydown: closeLayoutColumnMenu,
     focusTrap: openedViaKeyboard ? focusTrap : undefined

package/dist/cjs/ui/LayoutColumnMenu/utils.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldOpenLayoutColumnMenuBelow = exports.calculateFallbackBottomPosition = exports.LAYOUT_COLUMN_MENU_POPUP_OFFSET = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _ui = require("@atlaskit/editor-common/ui");
+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; }
+var LAYOUT_COLUMN_MENU_POPUP_OFFSET = exports.LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 4];
+var getVisibleEditorAreaTop = function getVisibleEditorAreaTop(editorView, scrollableElement) {
+  var visibleEditorArea = scrollableElement || (0, _ui.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).
+var shouldOpenLayoutColumnMenuBelow = exports.shouldOpenLayoutColumnMenuBelow = function shouldOpenLayoutColumnMenuBelow(_ref) {
+  var editorView = _ref.editorView,
+    popup = _ref.popup,
+    scrollableElement = _ref.scrollableElement,
+    target = _ref.target;
+  var offsetY = LAYOUT_COLUMN_MENU_POPUP_OFFSET[1];
+  var spaceAbove = target.getBoundingClientRect().top - getVisibleEditorAreaTop(editorView, scrollableElement);
+  var popupHeight = popup.getBoundingClientRect().height || popup.clientHeight;
+  return spaceAbove <= popupHeight + offsetY;
+};
+var calculateFallbackBottomPosition = exports.calculateFallbackBottomPosition = function calculateFallbackBottomPosition(position, target, popup) {
+  if (!(popup.offsetParent instanceof HTMLElement)) {
+    return position;
+  }
+  var offsetParent = popup.offsetParent;
+  var borderBottomWidth = parseInt(window.getComputedStyle(offsetParent).borderBottomWidth, 10) || 0;
+  var _offsetParent$getBoun = offsetParent.getBoundingClientRect(),
+    offsetParentTop = _offsetParent$getBoun.top;
+  var _target$getBoundingCl = target.getBoundingClientRect(),
+    targetTop = _target$getBoundingCl.top,
+    targetHeight = _target$getBoundingCl.height;
+  var offsetY = LAYOUT_COLUMN_MENU_POPUP_OFFSET[1];
+  var top = Math.ceil(targetTop - offsetParentTop + targetHeight + (offsetParent === offsetParent.ownerDocument.body ? 0 : offsetParent.scrollTop) - borderBottomWidth + offsetY);
+  var positionWithoutBottom = _objectSpread({}, position);
+  delete positionWithoutBottom.bottom;
+  return _objectSpread(_objectSpread({}, positionWithoutBottom), {}, {
+    top: top
+  });
+};

package/dist/es2019/ui/LayoutColumnMenu/index.js

@@ -12,8 +12,8 @@ import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
 import { getLayoutColumnMenuAnchorPos } from '../../pm-plugins/utils/layout-column-selection';
 import { LAYOUT_COLUMN_MENU_FALLBACKS } from './components';
 import { LAYOUT_COLUMN_MENU } from './keys';
+import { calculateFallbackBottomPosition, LAYOUT_COLUMN_MENU_POPUP_OFFSET, shouldOpenLayoutColumnMenuBelow } from './utils';
 const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
-const LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 4];
 const TOOLBAR_MENU_SELECTOR = '[data-toolbar-component="menu"]';
 const NESTED_DROPDOWN_MENU_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
 
@@ -117,6 +117,22 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
   const components = (_api$uiControlRegistr = api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(LAYOUT_COLUMN_MENU.key)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
   const target = useMemo(() => isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection]);
   const hasValidTarget = target instanceof HTMLElement;
+  const positionLayoutColumnMenu = useCallback(position => {
+    var _menuWrapperRef$curre;
+    const popup = (_menuWrapperRef$curre = menuWrapperRef.current) === null || _menuWrapperRef$curre === void 0 ? void 0 : _menuWrapperRef$curre.parentElement;
+    if (!(target instanceof HTMLElement) || !(popup instanceof HTMLElement)) {
+      return position;
+    }
+    if (shouldOpenLayoutColumnMenuBelow({
+      editorView,
+      popup,
+      scrollableElement,
+      target
+    })) {
+      return calculateFallbackBottomPosition(position, target, popup);
+    }
+    return position;
+  }, [editorView, scrollableElement, target]);
   useEffect(() => {
     if (isLayoutColumnMenuOpen && (!hasValidTarget || components.length === 0)) {
       closeLayoutColumnMenu();
@@ -132,9 +148,12 @@ export const LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMen
     scrollableElement: scrollableElement,
     zIndex: akEditorFloatingOverlapPanelZIndex,
     alignX: "center",
+    alignY: "top",
+    forcePlacement: true,
     preventOverflow: true,
     stick: true,
     offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
+    onPositionCalculated: positionLayoutColumnMenu,
     handleClickOutside: handleClickOutside,
     handleEscapeKeydown: closeLayoutColumnMenu,
     focusTrap: openedViaKeyboard ? focusTrap : undefined

package/dist/es2019/ui/LayoutColumnMenu/utils.js

@@ -0,0 +1,44 @@
+import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
+export const LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 4];
+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
+  };
+};

package/dist/esm/ui/LayoutColumnMenu/index.js

@@ -12,8 +12,8 @@ import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
 import { getLayoutColumnMenuAnchorPos } from '../../pm-plugins/utils/layout-column-selection';
 import { LAYOUT_COLUMN_MENU_FALLBACKS } from './components';
 import { LAYOUT_COLUMN_MENU } from './keys';
+import { calculateFallbackBottomPosition, LAYOUT_COLUMN_MENU_POPUP_OFFSET, shouldOpenLayoutColumnMenuBelow } from './utils';
 var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
-var LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 4];
 var TOOLBAR_MENU_SELECTOR = '[data-toolbar-component="menu"]';
 var NESTED_DROPDOWN_MENU_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
 
@@ -117,6 +117,22 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
     return isLayoutColumnMenuOpen ? getLayoutColumnMenuTarget(editorView, selection, layoutColumnMenuAnchorPos) : null;
   }, [editorView, isLayoutColumnMenuOpen, layoutColumnMenuAnchorPos, selection]);
   var hasValidTarget = target instanceof HTMLElement;
+  var positionLayoutColumnMenu = useCallback(function (position) {
+    var _menuWrapperRef$curre;
+    var popup = (_menuWrapperRef$curre = menuWrapperRef.current) === null || _menuWrapperRef$curre === void 0 ? void 0 : _menuWrapperRef$curre.parentElement;
+    if (!(target instanceof HTMLElement) || !(popup instanceof HTMLElement)) {
+      return position;
+    }
+    if (shouldOpenLayoutColumnMenuBelow({
+      editorView: editorView,
+      popup: popup,
+      scrollableElement: scrollableElement,
+      target: target
+    })) {
+      return calculateFallbackBottomPosition(position, target, popup);
+    }
+    return position;
+  }, [editorView, scrollableElement, target]);
   useEffect(function () {
     if (isLayoutColumnMenuOpen && (!hasValidTarget || components.length === 0)) {
       closeLayoutColumnMenu();
@@ -132,9 +148,12 @@ export var LayoutColumnMenu = /*#__PURE__*/React.memo(function LayoutColumnMenu(
     scrollableElement: scrollableElement,
     zIndex: akEditorFloatingOverlapPanelZIndex,
     alignX: "center",
+    alignY: "top",
+    forcePlacement: true,
     preventOverflow: true,
     stick: true,
     offset: LAYOUT_COLUMN_MENU_POPUP_OFFSET,
+    onPositionCalculated: positionLayoutColumnMenu,
     handleClickOutside: handleClickOutside,
     handleEscapeKeydown: closeLayoutColumnMenu,
     focusTrap: openedViaKeyboard ? focusTrap : undefined

package/dist/esm/ui/LayoutColumnMenu/utils.js

@@ -0,0 +1,41 @@
+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 { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
+export var LAYOUT_COLUMN_MENU_POPUP_OFFSET = [0, 4];
+var getVisibleEditorAreaTop = function getVisibleEditorAreaTop(editorView, scrollableElement) {
+  var 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 var shouldOpenLayoutColumnMenuBelow = function shouldOpenLayoutColumnMenuBelow(_ref) {
+  var editorView = _ref.editorView,
+    popup = _ref.popup,
+    scrollableElement = _ref.scrollableElement,
+    target = _ref.target;
+  var offsetY = LAYOUT_COLUMN_MENU_POPUP_OFFSET[1];
+  var spaceAbove = target.getBoundingClientRect().top - getVisibleEditorAreaTop(editorView, scrollableElement);
+  var popupHeight = popup.getBoundingClientRect().height || popup.clientHeight;
+  return spaceAbove <= popupHeight + offsetY;
+};
+export var calculateFallbackBottomPosition = function calculateFallbackBottomPosition(position, target, popup) {
+  if (!(popup.offsetParent instanceof HTMLElement)) {
+    return position;
+  }
+  var offsetParent = popup.offsetParent;
+  var borderBottomWidth = parseInt(window.getComputedStyle(offsetParent).borderBottomWidth, 10) || 0;
+  var _offsetParent$getBoun = offsetParent.getBoundingClientRect(),
+    offsetParentTop = _offsetParent$getBoun.top;
+  var _target$getBoundingCl = target.getBoundingClientRect(),
+    targetTop = _target$getBoundingCl.top,
+    targetHeight = _target$getBoundingCl.height;
+  var offsetY = LAYOUT_COLUMN_MENU_POPUP_OFFSET[1];
+  var top = Math.ceil(targetTop - offsetParentTop + targetHeight + (offsetParent === offsetParent.ownerDocument.body ? 0 : offsetParent.scrollTop) - borderBottomWidth + offsetY);
+  var positionWithoutBottom = _objectSpread({}, position);
+  delete positionWithoutBottom.bottom;
+  return _objectSpread(_objectSpread({}, positionWithoutBottom), {}, {
+    top: top
+  });
+};

package/dist/types/ui/LayoutColumnMenu/utils.d.ts

@@ -0,0 +1,10 @@
+import { type PopupPosition } from '@atlaskit/editor-common/ui';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const LAYOUT_COLUMN_MENU_POPUP_OFFSET: [number, number];
+export declare const shouldOpenLayoutColumnMenuBelow: ({ editorView, popup, scrollableElement, target, }: {
+    editorView: EditorView;
+    popup: HTMLElement;
+    scrollableElement?: HTMLElement;
+    target: HTMLElement;
+}) => boolean;
+export declare const calculateFallbackBottomPosition: (position: PopupPosition, target: HTMLElement, popup: HTMLElement) => PopupPosition;

package/dist/types-ts4.5/ui/LayoutColumnMenu/utils.d.ts

@@ -0,0 +1,13 @@
+import { type PopupPosition } from '@atlaskit/editor-common/ui';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const LAYOUT_COLUMN_MENU_POPUP_OFFSET: [
+    number,
+    number
+];
+export declare const shouldOpenLayoutColumnMenuBelow: ({ editorView, popup, scrollableElement, target, }: {
+    editorView: EditorView;
+    popup: HTMLElement;
+    scrollableElement?: HTMLElement;
+    target: HTMLElement;
+}) => boolean;
+export declare const calculateFallbackBottomPosition: (position: PopupPosition, target: HTMLElement, popup: HTMLElement) => PopupPosition;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-layout",
-	"version": "11.1.0",
+	"version": "11.1.2",
 	"description": "Layout plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,7 +32,7 @@
 		"@atlaskit/adf-schema": "^52.16.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/editor-plugin-analytics": "^11.0.0",
-		"@atlaskit/editor-plugin-block-controls": "^12.1.0",
+		"@atlaskit/editor-plugin-block-controls": "^12.2.0",
 		"@atlaskit/editor-plugin-block-menu": "^10.1.0",
 		"@atlaskit/editor-plugin-decorations": "^11.0.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^11.0.0",
@@ -50,7 +50,7 @@
 		"@atlaskit/icon": "^35.4.0",
 		"@atlaskit/icon-lab": "^6.13.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^89.4.0",
+		"@atlaskit/tmp-editor-statsig": "^91.0.0",
 		"@atlaskit/tokens": "^13.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",