@atlaskit/editor-common 102.11.3 → 102.11.5

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-common
 
+## 102.11.5
+
+### Patch Changes
+
+- [#126837](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/126837)
+  [`3f513ff6dac97`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3f513ff6dac97) -
+  [ux] Displays Text Formatting toolbar on CellSelection.
+
+## 102.11.4
+
+### Patch Changes
+
+- [#129262](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129262)
+  [`9408a99b473bb`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9408a99b473bb) -
+  EDF-2570 Fixed config panel not closing when navigating to other page issue is fixed.
+
 ## 102.11.3
 
 ### Patch Changes

package/dist/cjs/extensions/messages.js

@@ -137,10 +137,5 @@ var configPanelMessages = exports.configPanelMessages = (0, _reactIntlNext.defin
     id: 'fabric.editor.configPanel.errorBoundary.note',
     defaultMessage: "We've let the team know. You can still edit and publish this page, or check the error console for more information.",
     description: 'Note for uncaught config panel error'
-  },
-  objectSidebarPanelHeaderLabel: {
-    id: 'fabric.editor.configPanel.objectSidebarPanelHeaderLabel',
-    defaultMessage: ' ',
-    description: 'Keep this empty. Defined it as headerLabel is required field.'
   }
 });

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "102.11.3";
+var packageVersion = "102.11.5";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "102.11.3";
+var packageVersion = "102.11.5";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/cjs/ui-menu/Dropdown/index.js

@@ -84,19 +84,28 @@ var Dropdown = exports.Dropdown = /*#__PURE__*/function (_PureComponent) {
         zIndex = _this$props.zIndex,
         arrowKeyNavigationProviderOptions = _this$props.arrowKeyNavigationProviderOptions,
         dropdownListId = _this$props.dropdownListId,
-        alignDropdownWithParentElement = _this$props.alignDropdownWithParentElement;
+        alignDropdownWithParentElement = _this$props.alignDropdownWithParentElement,
+        targetProp = _this$props.target,
+        forcePlacement = _this$props.forcePlacement,
+        alignX = _this$props.alignX,
+        alignY = _this$props.alignY,
+        offset = _this$props.offset;
       return /*#__PURE__*/_react.default.createElement(_Popup.default, {
-        target: alignDropdownWithParentElement ? // Ignored via go/ees005
+        target: targetProp !== null && targetProp !== void 0 ? targetProp : alignDropdownWithParentElement ? // Ignored via go/ees005
         // eslint-disable-next-line @atlaskit/editor/no-as-casting
         target === null || target === void 0 ? void 0 : target.closest("[data-testid='editor-floating-toolbar']") : target,
         mountTo: mountTo,
         boundariesElement: boundariesElement,
         scrollableElement: scrollableElement,
-        onPlacementChanged: this.updatePopupPlacement,
+        onPlacementChanged: forcePlacement ? undefined : this.updatePopupPlacement,
         fitHeight: fitHeight,
         fitWidth: fitWidth,
         zIndex: zIndex,
-        allowOutOfBounds: alignDropdownWithParentElement
+        allowOutOfBounds: alignDropdownWithParentElement,
+        alignX: alignX,
+        alignY: alignY,
+        forcePlacement: forcePlacement,
+        offset: offset
       }, /*#__PURE__*/_react.default.createElement(_ArrowKeyNavigationProvider.ArrowKeyNavigationProvider
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
@@ -123,11 +132,11 @@ var Dropdown = exports.Dropdown = /*#__PURE__*/function (_PureComponent) {
       var _this$props2 = this.props,
         trigger = _this$props2.trigger,
         isOpen = _this$props2.isOpen;
-      return /*#__PURE__*/_react.default.createElement(_uiReact.OutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
+      return trigger ? /*#__PURE__*/_react.default.createElement(_uiReact.OutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
         return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
           ref: _this2.handleRef(setOutsideClickTargetRef)
         }, trigger), isOpen ? _this2.renderDropdown() : null);
-      });
+      }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isOpen ? this.renderDropdown() : null);
     }
   }]);
 }(_react.PureComponent);

package/dist/cjs/utils/calculate-toolbar-position.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.calculateToolbarPositionTrackHead = exports.calculateToolbarPositionAboveSelection = void 0;
+exports.calculateToolbarPositionTrackHead = exports.calculateToolbarPositionOnCellSelection = exports.calculateToolbarPositionAboveSelection = void 0;
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /*
   Calculates the position of the floating toolbar relative to the selection.
@@ -135,8 +137,8 @@ var calculateToolbarPositionTrackHead = exports.calculateToolbarPositionTrackHea
     var leftCoord = Math.max(0, left - wrapperBounds.left);
     if ((0, _platformFeatureFlags.fg)('platform_editor_selection_toolbar_scroll_fix')) {
       if (leftCoord + toolbarRect.width > wrapperBounds.width) {
-        var scrollbarWidth = 20;
-        leftCoord = Math.max(0, wrapperBounds.width - (toolbarRect.width + scrollbarWidth));
+        var _scrollbarWidth = 20;
+        leftCoord = Math.max(0, wrapperBounds.width - (toolbarRect.width + _scrollbarWidth));
       }
     }
 
@@ -156,4 +158,81 @@ var getCoordsBelowSelection = function getCoordsBelowSelection(bottomCoords, too
     top: (bottomCoords.top || 0) + toolbarRect.height / 1.15,
     left: bottomCoords.right - toolbarRect.width / 2
   };
+};
+var cellSelectionToolbarCffsetTop = 10;
+var scrollbarWidth = 20;
+var calculateToolbarPositionOnCellSelection = exports.calculateToolbarPositionOnCellSelection = function calculateToolbarPositionOnCellSelection(toolbarTitle) {
+  return function (editorView, nextPos) {
+    var toolbar = document.querySelector("div[aria-label=\"".concat(toolbarTitle, "\"]"));
+    if (!toolbar) {
+      return nextPos;
+    }
+    var selection = editorView.state.selection;
+    if (!(selection instanceof _cellSelection.CellSelection)) {
+      return nextPos;
+    }
+    var $anchorCell = selection.$anchorCell,
+      $headCell = selection.$headCell;
+    var domAtPos = editorView.domAtPos.bind(editorView);
+    var anchorCellDOM = (0, _utils.findDomRefAtPos)($anchorCell.pos, domAtPos);
+    var headCellDOM = (0, _utils.findDomRefAtPos)($headCell.pos, domAtPos);
+    if (!(anchorCellDOM instanceof HTMLElement) || !(headCellDOM instanceof HTMLElement)) {
+      return nextPos;
+    }
+    var anchorCellRect = anchorCellDOM.getBoundingClientRect();
+    var headCellRect = headCellDOM.getBoundingClientRect();
+    var toolbarRect = toolbar.getBoundingClientRect();
+    var top;
+    if (headCellRect.top <= anchorCellRect.top) {
+      // Display Selection toolbar at the top of the selection
+      top = headCellRect.top - toolbarRect.height - cellSelectionToolbarCffsetTop;
+    } else {
+      // Display Selection toolbar at the bottom of the selection
+      top = headCellRect.bottom + cellSelectionToolbarCffsetTop;
+    }
+
+    // scroll wrapper for full page, fall back to document body
+    // Ignored via go/ees007
+    // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
+    // TODO: look into using getScrollGutterOptions()
+    var scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
+    var wrapperBounds = scrollWrapper.getBoundingClientRect();
+    // Place toolbar below selection if not sufficient space above
+    if (top < wrapperBounds.top && headCellRect.top <= anchorCellRect.top) {
+      top = anchorCellRect.bottom + cellSelectionToolbarCffsetTop;
+    }
+    var left;
+    if (headCellRect.left < anchorCellRect.left) {
+      left = headCellRect.left;
+    } else if (headCellRect.left === anchorCellRect.left) {
+      left = headCellRect.left + headCellRect.width / 2;
+    } else {
+      left = headCellRect.right;
+    }
+
+    // If a user selected multiple columns via clicking on a drag handle
+    // (clicking first on the left column and then shift clicking on the right column),
+    // the $headcell stays in place and $anchorcell changes position. If they clicked on the right column
+    // and then shift clicked on the left, the $headCell will change while $anchor stays in place.
+    // Where is no way to know if user was dragging to select the cells or clicking on the drag handle.
+    // So if all cells in columns are selected, we will align the Text Formatting toolbar
+    // relative to center of the selected area.
+    if (selection.isColSelection()) {
+      if (headCellRect.left < anchorCellRect.left) {
+        left = headCellRect.left + (anchorCellRect.right - headCellRect.left) / 2;
+      } else if (headCellRect.left === anchorCellRect.left) {
+        left = left;
+      } else {
+        left = anchorCellRect.left + (headCellRect.right - anchorCellRect.left) / 2;
+      }
+    }
+    var adjustedLeft = Math.max(0, left - toolbarRect.width / 2 - wrapperBounds.left);
+    if (adjustedLeft + toolbarRect.width > wrapperBounds.width) {
+      adjustedLeft = Math.max(0, wrapperBounds.width - (toolbarRect.width + scrollbarWidth));
+    }
+    return {
+      top: top - wrapperBounds.top + scrollWrapper.scrollTop,
+      left: adjustedLeft
+    };
+  };
 };

package/dist/cjs/utils/index.js

@@ -202,6 +202,12 @@ Object.defineProperty(exports, "calculateToolbarPositionAboveSelection", {
     return _calculateToolbarPosition.calculateToolbarPositionAboveSelection;
   }
 });
+Object.defineProperty(exports, "calculateToolbarPositionOnCellSelection", {
+  enumerable: true,
+  get: function get() {
+    return _calculateToolbarPosition.calculateToolbarPositionOnCellSelection;
+  }
+});
 Object.defineProperty(exports, "calculateToolbarPositionTrackHead", {
   enumerable: true,
   get: function get() {

package/dist/es2019/extensions/messages.js

@@ -131,10 +131,5 @@ export const configPanelMessages = defineMessages({
     id: 'fabric.editor.configPanel.errorBoundary.note',
     defaultMessage: `We've let the team know. You can still edit and publish this page, or check the error console for more information.`,
     description: 'Note for uncaught config panel error'
-  },
-  objectSidebarPanelHeaderLabel: {
-    id: 'fabric.editor.configPanel.objectSidebarPanelHeaderLabel',
-    defaultMessage: ' ',
-    description: 'Keep this empty. Defined it as headerLabel is required field.'
   }
 });

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "102.11.3";
+const packageVersion = "102.11.5";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "102.11.3";
+const packageVersion = "102.11.5";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/es2019/ui-menu/Dropdown/index.js

@@ -60,20 +60,29 @@ export class Dropdown extends PureComponent {
       zIndex,
       arrowKeyNavigationProviderOptions,
       dropdownListId,
-      alignDropdownWithParentElement
+      alignDropdownWithParentElement,
+      target: targetProp,
+      forcePlacement,
+      alignX,
+      alignY,
+      offset
     } = this.props;
     return /*#__PURE__*/React.createElement(Popup, {
-      target: alignDropdownWithParentElement ? // Ignored via go/ees005
+      target: targetProp !== null && targetProp !== void 0 ? targetProp : alignDropdownWithParentElement ? // Ignored via go/ees005
       // eslint-disable-next-line @atlaskit/editor/no-as-casting
       target === null || target === void 0 ? void 0 : target.closest("[data-testid='editor-floating-toolbar']") : target,
       mountTo: mountTo,
       boundariesElement: boundariesElement,
       scrollableElement: scrollableElement,
-      onPlacementChanged: this.updatePopupPlacement,
+      onPlacementChanged: forcePlacement ? undefined : this.updatePopupPlacement,
       fitHeight: fitHeight,
       fitWidth: fitWidth,
       zIndex: zIndex,
-      allowOutOfBounds: alignDropdownWithParentElement
+      allowOutOfBounds: alignDropdownWithParentElement,
+      alignX: alignX,
+      alignY: alignY,
+      forcePlacement: forcePlacement,
+      offset: offset
     }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
@@ -98,9 +107,9 @@ export class Dropdown extends PureComponent {
       trigger,
       isOpen
     } = this.props;
-    return /*#__PURE__*/React.createElement(OutsideClickTargetRefContext.Consumer, null, setOutsideClickTargetRef => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    return trigger ? /*#__PURE__*/React.createElement(OutsideClickTargetRefContext.Consumer, null, setOutsideClickTargetRef => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       ref: this.handleRef(setOutsideClickTargetRef)
-    }, trigger), isOpen ? this.renderDropdown() : null));
+    }, trigger), isOpen ? this.renderDropdown() : null)) : /*#__PURE__*/React.createElement(React.Fragment, null, isOpen ? this.renderDropdown() : null);
   }
 }
 const DropdownWithOuterListeners = withReactEditorViewOuterListeners(Dropdown);

package/dist/es2019/utils/calculate-toolbar-position.js

@@ -1,3 +1,5 @@
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { fg } from '@atlaskit/platform-feature-flags';
 /*
   Calculates the position of the floating toolbar relative to the selection.
@@ -150,4 +152,83 @@ const getCoordsBelowSelection = (bottomCoords, toolbarRect) => {
     top: (bottomCoords.top || 0) + toolbarRect.height / 1.15,
     left: bottomCoords.right - toolbarRect.width / 2
   };
+};
+const cellSelectionToolbarCffsetTop = 10;
+const scrollbarWidth = 20;
+export const calculateToolbarPositionOnCellSelection = toolbarTitle => (editorView, nextPos) => {
+  const toolbar = document.querySelector(`div[aria-label="${toolbarTitle}"]`);
+  if (!toolbar) {
+    return nextPos;
+  }
+  const {
+    selection
+  } = editorView.state;
+  if (!(selection instanceof CellSelection)) {
+    return nextPos;
+  }
+  const {
+    $anchorCell,
+    $headCell
+  } = selection;
+  const domAtPos = editorView.domAtPos.bind(editorView);
+  const anchorCellDOM = findDomRefAtPos($anchorCell.pos, domAtPos);
+  const headCellDOM = findDomRefAtPos($headCell.pos, domAtPos);
+  if (!(anchorCellDOM instanceof HTMLElement) || !(headCellDOM instanceof HTMLElement)) {
+    return nextPos;
+  }
+  const anchorCellRect = anchorCellDOM.getBoundingClientRect();
+  const headCellRect = headCellDOM.getBoundingClientRect();
+  const toolbarRect = toolbar.getBoundingClientRect();
+  let top;
+  if (headCellRect.top <= anchorCellRect.top) {
+    // Display Selection toolbar at the top of the selection
+    top = headCellRect.top - toolbarRect.height - cellSelectionToolbarCffsetTop;
+  } else {
+    // Display Selection toolbar at the bottom of the selection
+    top = headCellRect.bottom + cellSelectionToolbarCffsetTop;
+  }
+
+  // scroll wrapper for full page, fall back to document body
+  // Ignored via go/ees007
+  // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
+  // TODO: look into using getScrollGutterOptions()
+  const scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
+  const wrapperBounds = scrollWrapper.getBoundingClientRect();
+  // Place toolbar below selection if not sufficient space above
+  if (top < wrapperBounds.top && headCellRect.top <= anchorCellRect.top) {
+    top = anchorCellRect.bottom + cellSelectionToolbarCffsetTop;
+  }
+  let left;
+  if (headCellRect.left < anchorCellRect.left) {
+    left = headCellRect.left;
+  } else if (headCellRect.left === anchorCellRect.left) {
+    left = headCellRect.left + headCellRect.width / 2;
+  } else {
+    left = headCellRect.right;
+  }
+
+  // If a user selected multiple columns via clicking on a drag handle
+  // (clicking first on the left column and then shift clicking on the right column),
+  // the $headcell stays in place and $anchorcell changes position. If they clicked on the right column
+  // and then shift clicked on the left, the $headCell will change while $anchor stays in place.
+  // Where is no way to know if user was dragging to select the cells or clicking on the drag handle.
+  // So if all cells in columns are selected, we will align the Text Formatting toolbar
+  // relative to center of the selected area.
+  if (selection.isColSelection()) {
+    if (headCellRect.left < anchorCellRect.left) {
+      left = headCellRect.left + (anchorCellRect.right - headCellRect.left) / 2;
+    } else if (headCellRect.left === anchorCellRect.left) {
+      left = left;
+    } else {
+      left = anchorCellRect.left + (headCellRect.right - anchorCellRect.left) / 2;
+    }
+  }
+  let adjustedLeft = Math.max(0, left - toolbarRect.width / 2 - wrapperBounds.left);
+  if (adjustedLeft + toolbarRect.width > wrapperBounds.width) {
+    adjustedLeft = Math.max(0, wrapperBounds.width - (toolbarRect.width + scrollbarWidth));
+  }
+  return {
+    top: top - wrapperBounds.top + scrollWrapper.scrollTop,
+    left: adjustedLeft
+  };
 };

package/dist/es2019/utils/index.js

@@ -361,7 +361,7 @@ export { createWrapSelectionTransaction, getWrappingOptions } from './create-wra
 export { transformNodeIntoListItem } from './insert-node-into-ordered-list';
 export { wrapSelectionIn } from './wrap-selection-in';
 export { toJSON, nodeToJSON } from './nodes';
-export { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead } from './calculate-toolbar-position';
+export { calculateToolbarPositionAboveSelection, calculateToolbarPositionOnCellSelection, calculateToolbarPositionTrackHead } from './calculate-toolbar-position';
 export { findNodePosByLocalIds } from './nodes-by-localIds';
 export { getPageElementCounts } from './page-element-counts';
 export { withFeatureFlaggedComponent } from './withFeatureFlaggedComponent';

package/dist/esm/extensions/messages.js

@@ -131,10 +131,5 @@ export var configPanelMessages = defineMessages({
     id: 'fabric.editor.configPanel.errorBoundary.note',
     defaultMessage: "We've let the team know. You can still edit and publish this page, or check the error console for more information.",
     description: 'Note for uncaught config panel error'
-  },
-  objectSidebarPanelHeaderLabel: {
-    id: 'fabric.editor.configPanel.objectSidebarPanelHeaderLabel',
-    defaultMessage: ' ',
-    description: 'Keep this empty. Defined it as headerLabel is required field.'
   }
 });

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "102.11.3";
+var packageVersion = "102.11.5";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -20,7 +20,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "102.11.3";
+var packageVersion = "102.11.5";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/esm/ui-menu/Dropdown/index.js

@@ -74,19 +74,28 @@ export var Dropdown = /*#__PURE__*/function (_PureComponent) {
         zIndex = _this$props.zIndex,
         arrowKeyNavigationProviderOptions = _this$props.arrowKeyNavigationProviderOptions,
         dropdownListId = _this$props.dropdownListId,
-        alignDropdownWithParentElement = _this$props.alignDropdownWithParentElement;
+        alignDropdownWithParentElement = _this$props.alignDropdownWithParentElement,
+        targetProp = _this$props.target,
+        forcePlacement = _this$props.forcePlacement,
+        alignX = _this$props.alignX,
+        alignY = _this$props.alignY,
+        offset = _this$props.offset;
       return /*#__PURE__*/React.createElement(Popup, {
-        target: alignDropdownWithParentElement ? // Ignored via go/ees005
+        target: targetProp !== null && targetProp !== void 0 ? targetProp : alignDropdownWithParentElement ? // Ignored via go/ees005
         // eslint-disable-next-line @atlaskit/editor/no-as-casting
         target === null || target === void 0 ? void 0 : target.closest("[data-testid='editor-floating-toolbar']") : target,
         mountTo: mountTo,
         boundariesElement: boundariesElement,
         scrollableElement: scrollableElement,
-        onPlacementChanged: this.updatePopupPlacement,
+        onPlacementChanged: forcePlacement ? undefined : this.updatePopupPlacement,
         fitHeight: fitHeight,
         fitWidth: fitWidth,
         zIndex: zIndex,
-        allowOutOfBounds: alignDropdownWithParentElement
+        allowOutOfBounds: alignDropdownWithParentElement,
+        alignX: alignX,
+        alignY: alignY,
+        forcePlacement: forcePlacement,
+        offset: offset
       }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider
       // Ignored via go/ees005
       // eslint-disable-next-line react/jsx-props-no-spreading
@@ -113,11 +122,11 @@ export var Dropdown = /*#__PURE__*/function (_PureComponent) {
       var _this$props2 = this.props,
         trigger = _this$props2.trigger,
         isOpen = _this$props2.isOpen;
-      return /*#__PURE__*/React.createElement(OutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
+      return trigger ? /*#__PURE__*/React.createElement(OutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
         return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
           ref: _this2.handleRef(setOutsideClickTargetRef)
         }, trigger), isOpen ? _this2.renderDropdown() : null);
-      });
+      }) : /*#__PURE__*/React.createElement(React.Fragment, null, isOpen ? this.renderDropdown() : null);
     }
   }]);
 }(PureComponent);

package/dist/esm/utils/calculate-toolbar-position.js

@@ -1,3 +1,5 @@
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { fg } from '@atlaskit/platform-feature-flags';
 /*
   Calculates the position of the floating toolbar relative to the selection.
@@ -129,8 +131,8 @@ export var calculateToolbarPositionTrackHead = function calculateToolbarPosition
     var leftCoord = Math.max(0, left - wrapperBounds.left);
     if (fg('platform_editor_selection_toolbar_scroll_fix')) {
       if (leftCoord + toolbarRect.width > wrapperBounds.width) {
-        var scrollbarWidth = 20;
-        leftCoord = Math.max(0, wrapperBounds.width - (toolbarRect.width + scrollbarWidth));
+        var _scrollbarWidth = 20;
+        leftCoord = Math.max(0, wrapperBounds.width - (toolbarRect.width + _scrollbarWidth));
       }
     }
 
@@ -150,4 +152,81 @@ var getCoordsBelowSelection = function getCoordsBelowSelection(bottomCoords, too
     top: (bottomCoords.top || 0) + toolbarRect.height / 1.15,
     left: bottomCoords.right - toolbarRect.width / 2
   };
+};
+var cellSelectionToolbarCffsetTop = 10;
+var scrollbarWidth = 20;
+export var calculateToolbarPositionOnCellSelection = function calculateToolbarPositionOnCellSelection(toolbarTitle) {
+  return function (editorView, nextPos) {
+    var toolbar = document.querySelector("div[aria-label=\"".concat(toolbarTitle, "\"]"));
+    if (!toolbar) {
+      return nextPos;
+    }
+    var selection = editorView.state.selection;
+    if (!(selection instanceof CellSelection)) {
+      return nextPos;
+    }
+    var $anchorCell = selection.$anchorCell,
+      $headCell = selection.$headCell;
+    var domAtPos = editorView.domAtPos.bind(editorView);
+    var anchorCellDOM = findDomRefAtPos($anchorCell.pos, domAtPos);
+    var headCellDOM = findDomRefAtPos($headCell.pos, domAtPos);
+    if (!(anchorCellDOM instanceof HTMLElement) || !(headCellDOM instanceof HTMLElement)) {
+      return nextPos;
+    }
+    var anchorCellRect = anchorCellDOM.getBoundingClientRect();
+    var headCellRect = headCellDOM.getBoundingClientRect();
+    var toolbarRect = toolbar.getBoundingClientRect();
+    var top;
+    if (headCellRect.top <= anchorCellRect.top) {
+      // Display Selection toolbar at the top of the selection
+      top = headCellRect.top - toolbarRect.height - cellSelectionToolbarCffsetTop;
+    } else {
+      // Display Selection toolbar at the bottom of the selection
+      top = headCellRect.bottom + cellSelectionToolbarCffsetTop;
+    }
+
+    // scroll wrapper for full page, fall back to document body
+    // Ignored via go/ees007
+    // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
+    // TODO: look into using getScrollGutterOptions()
+    var scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
+    var wrapperBounds = scrollWrapper.getBoundingClientRect();
+    // Place toolbar below selection if not sufficient space above
+    if (top < wrapperBounds.top && headCellRect.top <= anchorCellRect.top) {
+      top = anchorCellRect.bottom + cellSelectionToolbarCffsetTop;
+    }
+    var left;
+    if (headCellRect.left < anchorCellRect.left) {
+      left = headCellRect.left;
+    } else if (headCellRect.left === anchorCellRect.left) {
+      left = headCellRect.left + headCellRect.width / 2;
+    } else {
+      left = headCellRect.right;
+    }
+
+    // If a user selected multiple columns via clicking on a drag handle
+    // (clicking first on the left column and then shift clicking on the right column),
+    // the $headcell stays in place and $anchorcell changes position. If they clicked on the right column
+    // and then shift clicked on the left, the $headCell will change while $anchor stays in place.
+    // Where is no way to know if user was dragging to select the cells or clicking on the drag handle.
+    // So if all cells in columns are selected, we will align the Text Formatting toolbar
+    // relative to center of the selected area.
+    if (selection.isColSelection()) {
+      if (headCellRect.left < anchorCellRect.left) {
+        left = headCellRect.left + (anchorCellRect.right - headCellRect.left) / 2;
+      } else if (headCellRect.left === anchorCellRect.left) {
+        left = left;
+      } else {
+        left = anchorCellRect.left + (headCellRect.right - anchorCellRect.left) / 2;
+      }
+    }
+    var adjustedLeft = Math.max(0, left - toolbarRect.width / 2 - wrapperBounds.left);
+    if (adjustedLeft + toolbarRect.width > wrapperBounds.width) {
+      adjustedLeft = Math.max(0, wrapperBounds.width - (toolbarRect.width + scrollbarWidth));
+    }
+    return {
+      top: top - wrapperBounds.top + scrollWrapper.scrollTop,
+      left: adjustedLeft
+    };
+  };
 };

package/dist/esm/utils/index.js

@@ -364,7 +364,7 @@ export { createWrapSelectionTransaction, getWrappingOptions } from './create-wra
 export { transformNodeIntoListItem } from './insert-node-into-ordered-list';
 export { wrapSelectionIn } from './wrap-selection-in';
 export { toJSON, nodeToJSON } from './nodes';
-export { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead } from './calculate-toolbar-position';
+export { calculateToolbarPositionAboveSelection, calculateToolbarPositionOnCellSelection, calculateToolbarPositionTrackHead } from './calculate-toolbar-position';
 export { findNodePosByLocalIds } from './nodes-by-localIds';
 export { getPageElementCounts } from './page-element-counts';
 export { withFeatureFlaggedComponent } from './withFeatureFlaggedComponent';

package/dist/types/extensions/messages.d.ts

@@ -131,9 +131,4 @@ export declare const configPanelMessages: {
         defaultMessage: string;
         description: string;
     };
-    objectSidebarPanelHeaderLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
 };

package/dist/types/ui-menu/Dropdown/index.d.ts

@@ -7,7 +7,7 @@ export interface Props {
     mountTo?: HTMLElement;
     boundariesElement?: HTMLElement;
     scrollableElement?: HTMLElement;
-    trigger: React.ReactElement<any>;
+    trigger?: React.ReactElement<any>;
     isOpen?: boolean;
     onOpenChange?: (attrs: OpenChangedEvent) => void;
     fitWidth?: number;
@@ -16,6 +16,11 @@ export interface Props {
     arrowKeyNavigationProviderOptions: ArrowKeyNavigationProviderOptions;
     dropdownListId?: string;
     alignDropdownWithParentElement?: boolean;
+    target?: HTMLElement;
+    forcePlacement?: boolean;
+    alignX?: 'left' | 'right' | 'center';
+    alignY?: 'start' | 'bottom' | 'top';
+    offset?: [number, number];
 }
 export interface State {
     target?: HTMLElement;

package/dist/types/utils/calculate-toolbar-position.d.ts

@@ -8,3 +8,4 @@ export type CoordsAtPos = {
     left: number;
     right: number;
 };
+export declare const calculateToolbarPositionOnCellSelection: (toolbarTitle: string) => (editorView: EditorView, nextPos: Position) => Position;

package/dist/types/utils/index.d.ts

@@ -211,7 +211,7 @@ export { createWrapSelectionTransaction, getWrappingOptions, } from './create-wr
 export { transformNodeIntoListItem } from './insert-node-into-ordered-list';
 export { wrapSelectionIn } from './wrap-selection-in';
 export { toJSON, nodeToJSON } from './nodes';
-export { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead, } from './calculate-toolbar-position';
+export { calculateToolbarPositionAboveSelection, calculateToolbarPositionOnCellSelection, calculateToolbarPositionTrackHead, } from './calculate-toolbar-position';
 export { findNodePosByLocalIds } from './nodes-by-localIds';
 export { getPageElementCounts } from './page-element-counts';
 export type { PageElementCounts } from './page-element-counts';

package/dist/types-ts4.5/extensions/messages.d.ts

@@ -131,9 +131,4 @@ export declare const configPanelMessages: {
         defaultMessage: string;
         description: string;
     };
-    objectSidebarPanelHeaderLabel: {
-        id: string;
-        defaultMessage: string;
-        description: string;
-    };
 };

package/dist/types-ts4.5/ui-menu/Dropdown/index.d.ts

@@ -7,7 +7,7 @@ export interface Props {
     mountTo?: HTMLElement;
     boundariesElement?: HTMLElement;
     scrollableElement?: HTMLElement;
-    trigger: React.ReactElement<any>;
+    trigger?: React.ReactElement<any>;
     isOpen?: boolean;
     onOpenChange?: (attrs: OpenChangedEvent) => void;
     fitWidth?: number;
@@ -16,6 +16,14 @@ export interface Props {
     arrowKeyNavigationProviderOptions: ArrowKeyNavigationProviderOptions;
     dropdownListId?: string;
     alignDropdownWithParentElement?: boolean;
+    target?: HTMLElement;
+    forcePlacement?: boolean;
+    alignX?: 'left' | 'right' | 'center';
+    alignY?: 'start' | 'bottom' | 'top';
+    offset?: [
+        number,
+        number
+    ];
 }
 export interface State {
     target?: HTMLElement;

package/dist/types-ts4.5/utils/calculate-toolbar-position.d.ts

@@ -8,3 +8,4 @@ export type CoordsAtPos = {
     left: number;
     right: number;
 };
+export declare const calculateToolbarPositionOnCellSelection: (toolbarTitle: string) => (editorView: EditorView, nextPos: Position) => Position;

package/dist/types-ts4.5/utils/index.d.ts

@@ -211,7 +211,7 @@ export { createWrapSelectionTransaction, getWrappingOptions, } from './create-wr
 export { transformNodeIntoListItem } from './insert-node-into-ordered-list';
 export { wrapSelectionIn } from './wrap-selection-in';
 export { toJSON, nodeToJSON } from './nodes';
-export { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead, } from './calculate-toolbar-position';
+export { calculateToolbarPositionAboveSelection, calculateToolbarPositionOnCellSelection, calculateToolbarPositionTrackHead, } from './calculate-toolbar-position';
 export { findNodePosByLocalIds } from './nodes-by-localIds';
 export { getPageElementCounts } from './page-element-counts';
 export type { PageElementCounts } from './page-element-counts';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "102.11.3",
+	"version": "102.11.5",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"