@atlaskit/editor-common 102.11.4 → 102.11.6

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-common
 
+## 102.11.6
+
+### Patch Changes
+
+- [#129445](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129445)
+  [`0eb9b03d34eff`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0eb9b03d34eff) -
+  Cleans up feature flag that reduces padding in the element browser
+- Updated dependencies
+
+## 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

package/dist/cjs/element-browser/components/ElementList/ElementList.js

@@ -9,7 +9,6 @@ exports.ElementItem = ElementItem;
 exports.itemIcon = exports.default = exports.ICON_WIDTH = exports.ICON_HEIGHT = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactVirtualized = require("react-virtualized");
@@ -25,20 +24,20 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _analytics = require("../../../analytics");
 var _quickInsert = require("../../../quick-insert");
 var _constants = require("../../constants");
-var _useContainerWidth3 = _interopRequireDefault(require("../../hooks/use-container-width"));
+var _useContainerWidth2 = _interopRequireDefault(require("../../hooks/use-container-width"));
 var _useFocus = _interopRequireDefault(require("../../hooks/use-focus"));
 var _types = require("../../types");
 var _EmptyState = _interopRequireDefault(require("./EmptyState"));
 var _utils = require("./utils");
-var _excluded = ["items", "mode", "selectedItemIndex", "focusedItemIndex", "columnCount", "setColumnCount", "createAnalyticsEvent", "emptyStateHandler", "selectedCategory", "selectedCategoryIndex", "searchTerm", "setFocusedCategoryIndex", "setFocusedItemIndex"],
-  _excluded2 = ["items", "mode", "selectedItemIndex", "focusedItemIndex", "columnCount", "setColumnCount", "createAnalyticsEvent", "emptyStateHandler", "selectedCategory", "selectedCategoryIndex", "searchTerm", "setFocusedCategoryIndex", "setFocusedItemIndex"];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+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; }
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-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 ICON_HEIGHT = exports.ICON_HEIGHT = 40;
 var ICON_WIDTH = exports.ICON_WIDTH = 40;
 
@@ -60,7 +59,7 @@ var itemIcon = exports.itemIcon = (0, _react2.css)({
     height: "".concat(ICON_HEIGHT, "px")
   }
 });
-function ElementListOld(_ref) {
+function ElementList(_ref) {
   var items = _ref.items,
     mode = _ref.mode,
     selectedItemIndex = _ref.selectedItemIndex,
@@ -74,8 +73,9 @@ function ElementListOld(_ref) {
     searchTerm = _ref.searchTerm,
     setFocusedCategoryIndex = _ref.setFocusedCategoryIndex,
     setFocusedItemIndex = _ref.setFocusedItemIndex,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var _useContainerWidth = (0, _useContainerWidth3.default)(),
+    cache = _ref.cache,
+    onInsertItem = _ref.onInsertItem;
+  var _useContainerWidth = (0, _useContainerWidth2.default)(),
     containerWidth = _useContainerWidth.containerWidth,
     ContainerWidthMonitor = _useContainerWidth.ContainerWidthMonitor;
   var _useState = (0, _react.useState)(_constants.SCROLLBAR_WIDTH),
@@ -105,169 +105,6 @@ function ElementListOld(_ref) {
       }
     });
   }, [createAnalyticsEvent]);
-  var cache = (0, _react.useMemo)(function () {
-    return new _CellMeasurer.CellMeasurerCache({
-      fixedWidth: true,
-      defaultHeight: 75,
-      minHeight: 75
-    });
-  }, []);
-  var columnWidth = (containerWidth - _constants.ELEMENT_ITEM_PADDING * 2) / columnCount;
-  var rowCount = Math.ceil(items.length / columnCount);
-  var rowHeight = function rowHeight(_ref2) {
-    var index = _ref2.index;
-    return cache.rowHeight({
-      index: index
-    }) <= 75 ? 75 : cache.rowHeight({
-      index: index
-    }) + _constants.ELEMENT_ITEM_PADDING * 2;
-  };
-  var cellRenderer = (0, _react.useMemo)(function () {
-    return function (_ref3) {
-      var columnIndex = _ref3.columnIndex,
-        key = _ref3.key,
-        parent = _ref3.parent,
-        rowIndex = _ref3.rowIndex,
-        style = _ref3.style;
-      var index = rowIndex * columnCount + columnIndex;
-      if (items[index] == null) {
-        return;
-      }
-      return index > items.length - 1 ? null : (0, _react2.jsx)(_CellMeasurer.CellMeasurer, {
-        cache: cache,
-        key: key,
-        rowIndex: rowIndex,
-        columnIndex: columnIndex,
-        parent: parent
-      }, (0, _react2.jsx)("div", {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        style: style,
-        key: key
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 -- Ignored via go/DSP-18766
-        ,
-        className: "element-item-wrapper",
-        css: elementItemWrapper,
-        onKeyDown: function onKeyDown(e) {
-          if (e.key === 'Tab') {
-            if (e.shiftKey && index === 0) {
-              if (setFocusedCategoryIndex) {
-                if (!!selectedCategoryIndex) {
-                  setFocusedCategoryIndex(selectedCategoryIndex);
-                } else {
-                  setFocusedCategoryIndex(0);
-                }
-                e.preventDefault();
-              }
-            }
-            // before focus jumps from elements list we need to rerender react-virtualized grid.
-            // Otherwise on the next render 'scrollToCell' will have same cached value
-            // and grid will not be scrolled to top.
-            // So Tab press on category will not work anymore due to invisible 1-t element.
-            else if (index === items.length - 2) {
-              setFocusedItemIndex(items.length - 1);
-            }
-          }
-        }
-      }, (0, _react2.jsx)(MemoizedElementItem, (0, _extends2.default)({
-        inlineMode: !fullMode,
-        index: index,
-        item: items[index],
-        selected: selectedItemIndex === index,
-        focus: focusedItemIndex === index,
-        setFocusedItemIndex: setFocusedItemIndex
-        // Ignored via go/ees005
-        // eslint-disable-next-line react/jsx-props-no-spreading
-      }, props))));
-    };
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [cache, items, fullMode, selectedItemIndex, columnCount, focusedItemIndex, selectedCategoryIndex, setFocusedCategoryIndex, setFocusedItemIndex, props]);
-  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(ContainerWidthMonitor, null), (0, _react2.jsx)("div", {
-    css: elementItemsWrapper,
-    "data-testid": "element-items",
-    id: selectedCategory ? "browse-category-".concat(selectedCategory, "-tab") : 'browse-category-tab',
-    "aria-labelledby": selectedCategory ? "browse-category--".concat(selectedCategory, "-button") : 'browse-category-button',
-    role: "tabpanel",
-    tabIndex: items.length === 0 ? 0 : undefined
-  }, !items.length ? emptyStateHandler ? emptyStateHandler({
-    mode: mode,
-    selectedCategory: selectedCategory,
-    searchTerm: searchTerm
-  }) : (0, _react2.jsx)(_EmptyState.default, {
-    onExternalLinkClick: onExternalLinkClick
-  }) : (0, _react2.jsx)(_react.Fragment, null, containerWidth > 0 && (0, _react2.jsx)(_AutoSizer.AutoSizer, {
-    disableWidth: true
-  }, function (_ref4) {
-    var height = _ref4.height;
-    return (0, _react2.jsx)(_reactVirtualized.Grid, (0, _extends2.default)({
-      cellRenderer: cellRenderer,
-      height: height,
-      width: containerWidth - _constants.ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
-      /**
-       * Refresh Grid on WidthObserver value change.
-       * Length of the items used to force re-render to solve Firefox bug with react-virtualized retaining
-       * scroll position after updating the data. If new data has different number of cells, a re-render
-       * is forced to prevent the scroll position render bug.
-       */,
-      key: containerWidth + items.length,
-      rowHeight: rowHeight,
-      rowCount: rowCount,
-      columnCount: columnCount,
-      columnWidth: columnWidth,
-      deferredMeasurementCache: cache
-      // Ignored via go/ees005
-      // eslint-disable-next-line react/jsx-props-no-spreading
-    }, selectedItemIndex !== undefined && {
-      scrollToRow: Math.floor(selectedItemIndex / columnCount)
-    }));
-  }))));
-}
-function ElementListNew(_ref5) {
-  var items = _ref5.items,
-    mode = _ref5.mode,
-    selectedItemIndex = _ref5.selectedItemIndex,
-    focusedItemIndex = _ref5.focusedItemIndex,
-    columnCount = _ref5.columnCount,
-    setColumnCount = _ref5.setColumnCount,
-    createAnalyticsEvent = _ref5.createAnalyticsEvent,
-    emptyStateHandler = _ref5.emptyStateHandler,
-    selectedCategory = _ref5.selectedCategory,
-    selectedCategoryIndex = _ref5.selectedCategoryIndex,
-    searchTerm = _ref5.searchTerm,
-    setFocusedCategoryIndex = _ref5.setFocusedCategoryIndex,
-    setFocusedItemIndex = _ref5.setFocusedItemIndex,
-    cache = _ref5.cache,
-    onInsertItem = _ref5.onInsertItem;
-  var _useContainerWidth2 = (0, _useContainerWidth3.default)(),
-    containerWidth = _useContainerWidth2.containerWidth,
-    ContainerWidthMonitor = _useContainerWidth2.ContainerWidthMonitor;
-  var _useState3 = (0, _react.useState)(_constants.SCROLLBAR_WIDTH),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    scrollbarWidth = _useState4[0],
-    setScrollbarWidth = _useState4[1];
-  var fullMode = mode === _types.Modes.full;
-  (0, _react.useEffect)(function () {
-    /**
-     * More of an optimization condition.
-     * Initially the containerWidths are reported 0 twice.
-     **/
-    if (fullMode && containerWidth > 0) {
-      setColumnCount((0, _utils.getColumnCount)(containerWidth));
-      var updatedScrollbarWidth = (0, _utils.getScrollbarWidth)();
-      if (updatedScrollbarWidth > 0) {
-        setScrollbarWidth(updatedScrollbarWidth);
-      }
-    }
-  }, [fullMode, containerWidth, setColumnCount, scrollbarWidth]);
-  var onExternalLinkClick = (0, _react.useCallback)(function () {
-    (0, _analytics.fireAnalyticsEvent)(createAnalyticsEvent)({
-      payload: {
-        action: _analytics.ACTION.VISITED,
-        actionSubject: _analytics.ACTION_SUBJECT.SMART_LINK,
-        eventType: _analytics.EVENT_TYPE.TRACK
-      }
-    });
-  }, [createAnalyticsEvent]);
   var listCache = (0, _react.useMemo)(function () {
     return cache !== null && cache !== void 0 ? cache : new _CellMeasurer.CellMeasurerCache({
       fixedWidth: true,
@@ -279,8 +116,8 @@ function ElementListNew(_ref5) {
     // need to recalculate values if we have the same items, but they're reordered
     listCache.clearAll();
   }, [listCache, searchTerm]);
-  var rowHeight = function rowHeight(_ref6) {
-    var index = _ref6.index;
+  var rowHeight = function rowHeight(_ref2) {
+    var index = _ref2.index;
     return listCache.rowHeight({
       index: index
     });
@@ -300,8 +137,8 @@ function ElementListNew(_ref5) {
     onExternalLinkClick: onExternalLinkClick
   }) : (0, _react2.jsx)(_react.Fragment, null, containerWidth > 0 && (0, _react2.jsx)(_AutoSizer.AutoSizer, {
     disableWidth: true
-  }, function (_ref7) {
-    var height = _ref7.height;
+  }, function (_ref3) {
+    var height = _ref3.height;
     return columnCount === 1 ? (0, _react2.jsx)(ElementListSingleColumn, {
       cache: listCache,
       setFocusedCategoryIndex: setFocusedCategoryIndex,
@@ -346,11 +183,11 @@ var ElementListSingleColumn = function ElementListSingleColumn(props) {
     selectedCategoryIndex = props.selectedCategoryIndex,
     selectedItemIndex = props.selectedItemIndex;
   var rowRenderer = (0, _react.useMemo)(function () {
-    return function (_ref8) {
-      var index = _ref8.index,
-        key = _ref8.key,
-        style = _ref8.style,
-        parent = _ref8.parent;
+    return function (_ref4) {
+      var index = _ref4.index,
+        key = _ref4.key,
+        style = _ref4.style,
+        parent = _ref4.parent;
       return (0, _react2.jsx)(_CellMeasurer.CellMeasurer, {
         key: key,
         cache: cache,
@@ -431,12 +268,12 @@ var ElementListMultipleColumns = function ElementListMultipleColumns(props) {
   var columnWidth = (containerWidth - _constants.ELEMENT_ITEM_PADDING * 2) / columnCount;
   var rowCount = Math.ceil(items.length / columnCount);
   var cellRenderer = (0, _react.useMemo)(function () {
-    return function (_ref9) {
-      var columnIndex = _ref9.columnIndex,
-        key = _ref9.key,
-        parent = _ref9.parent,
-        rowIndex = _ref9.rowIndex,
-        style = _ref9.style;
+    return function (_ref5) {
+      var columnIndex = _ref5.columnIndex,
+        key = _ref5.key,
+        parent = _ref5.parent,
+        rowIndex = _ref5.rowIndex,
+        style = _ref5.style;
       var index = rowIndex * columnCount + columnIndex;
       if (items[index] == null) {
         return;
@@ -513,14 +350,14 @@ var ElementListMultipleColumns = function ElementListMultipleColumns(props) {
 };
 var MemoizedElementItem = /*#__PURE__*/(0, _react.memo)(ElementItem);
 MemoizedElementItem.displayName = 'MemoizedElementItem';
-function ElementItem(_ref10) {
-  var inlineMode = _ref10.inlineMode,
-    selected = _ref10.selected,
-    item = _ref10.item,
-    index = _ref10.index,
-    onInsertItem = _ref10.onInsertItem,
-    focus = _ref10.focus,
-    setFocusedItemIndex = _ref10.setFocusedItemIndex;
+function ElementItem(_ref6) {
+  var inlineMode = _ref6.inlineMode,
+    selected = _ref6.selected,
+    item = _ref6.item,
+    index = _ref6.index,
+    onInsertItem = _ref6.onInsertItem,
+    focus = _ref6.focus,
+    setFocusedItemIndex = _ref6.setFocusedItemIndex;
   var ref = (0, _useFocus.default)(focus);
 
   /**
@@ -588,17 +425,17 @@ function ElementItem(_ref10) {
 var itemStyleOverrides = {
   alignItems: 'flex-start'
 };
-var ElementBefore = /*#__PURE__*/(0, _react.memo)(function (_ref11) {
-  var icon = _ref11.icon;
+var ElementBefore = /*#__PURE__*/(0, _react.memo)(function (_ref7) {
+  var icon = _ref7.icon;
   return (0, _react2.jsx)("div", {
     css: [itemIcon, itemIconStyle]
   }, icon ? icon() : (0, _react2.jsx)(_quickInsert.IconFallback, null));
 });
-var ItemContent = /*#__PURE__*/(0, _react.memo)(function (_ref12) {
-  var title = _ref12.title,
-    description = _ref12.description,
-    keyshortcut = _ref12.keyshortcut,
-    isDisabled = _ref12.isDisabled;
+var ItemContent = /*#__PURE__*/(0, _react.memo)(function (_ref8) {
+  var title = _ref8.title,
+    description = _ref8.description,
+    keyshortcut = _ref8.keyshortcut,
+    isDisabled = _ref8.isDisabled;
   if ((0, _platformFeatureFlags.fg)('platform_editor_typography_ugc')) {
     return (
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -767,58 +604,6 @@ var itemIconStyle = (0, _react2.css)({
     objectFit: 'cover'
   }
 });
-function ElementList(_ref13) {
-  var items = _ref13.items,
-    mode = _ref13.mode,
-    selectedItemIndex = _ref13.selectedItemIndex,
-    focusedItemIndex = _ref13.focusedItemIndex,
-    columnCount = _ref13.columnCount,
-    setColumnCount = _ref13.setColumnCount,
-    createAnalyticsEvent = _ref13.createAnalyticsEvent,
-    emptyStateHandler = _ref13.emptyStateHandler,
-    selectedCategory = _ref13.selectedCategory,
-    selectedCategoryIndex = _ref13.selectedCategoryIndex,
-    searchTerm = _ref13.searchTerm,
-    setFocusedCategoryIndex = _ref13.setFocusedCategoryIndex,
-    setFocusedItemIndex = _ref13.setFocusedItemIndex,
-    props = (0, _objectWithoutProperties2.default)(_ref13, _excluded2);
-  if ((0, _platformFeatureFlags.fg)('platform_editor_reduce_element_browser_padding')) {
-    return (0, _react2.jsx)(ElementListNew, (0, _extends2.default)({
-      items: items,
-      mode: mode,
-      selectedItemIndex: selectedItemIndex,
-      focusedItemIndex: focusedItemIndex,
-      columnCount: columnCount,
-      setColumnCount: setColumnCount,
-      createAnalyticsEvent: createAnalyticsEvent,
-      emptyStateHandler: emptyStateHandler,
-      selectedCategory: selectedCategory,
-      selectedCategoryIndex: selectedCategoryIndex,
-      searchTerm: searchTerm,
-      setFocusedCategoryIndex: setFocusedCategoryIndex,
-      setFocusedItemIndex: setFocusedItemIndex
-      // Ignored via go/ees005
-      // eslint-disable-next-line react/jsx-props-no-spreading
-    }, props));
-  }
-  return (0, _react2.jsx)(ElementListOld, (0, _extends2.default)({
-    items: items,
-    mode: mode,
-    selectedItemIndex: selectedItemIndex,
-    focusedItemIndex: focusedItemIndex,
-    columnCount: columnCount,
-    setColumnCount: setColumnCount,
-    createAnalyticsEvent: createAnalyticsEvent,
-    emptyStateHandler: emptyStateHandler,
-    selectedCategory: selectedCategory,
-    selectedCategoryIndex: selectedCategoryIndex,
-    searchTerm: searchTerm,
-    setFocusedCategoryIndex: setFocusedCategoryIndex,
-    setFocusedItemIndex: setFocusedItemIndex
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/jsx-props-no-spreading
-  }, props));
-}
 var MemoizedElementListWithAnalytics = /*#__PURE__*/(0, _react.memo)((0, _withAnalyticsContext.default)({
   component: 'ElementList'
 })(ElementList));

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.4";
+var packageVersion = "102.11.6";
 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.4";
+var packageVersion = "102.11.6";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

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() {