@atlaskit/editor-plugin-table 22.4.14 → 22.4.16

package/dist/esm/ui/TableMenu/cell/getCellMenuComponents.js

@@ -3,7 +3,8 @@ import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
 import { MergeCellsItem } from './items/MergeCellsItem';
 import { SplitCellItem } from './items/SplitCellItem';
 import { CELL_MENU, CELL_ACTION_SECTION, CELL_DANGER_SECTION, CELL_MENU_RANK, MERGE_CELLS_ITEM, SPLIT_CELL_ITEM, CELL_ACTION_SECTION_RANK } from './keys';
-export var getCellMenuComponents = function getCellMenuComponents() {
+export var getCellMenuComponents = function getCellMenuComponents(_ref) {
+  var api = _ref.api;
   return [
   // --- Menu surface ---
   {
@@ -31,7 +32,9 @@ export var getCellMenuComponents = function getCellMenuComponents() {
       rank: CELL_ACTION_SECTION_RANK[MERGE_CELLS_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/React.createElement(MergeCellsItem, null);
+      return /*#__PURE__*/React.createElement(MergeCellsItem, {
+        api: api
+      });
     }
   }, {
     type: SPLIT_CELL_ITEM.type,
@@ -42,7 +45,9 @@ export var getCellMenuComponents = function getCellMenuComponents() {
       rank: CELL_ACTION_SECTION_RANK[SPLIT_CELL_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/React.createElement(SplitCellItem, null);
+      return /*#__PURE__*/React.createElement(SplitCellItem, {
+        api: api
+      });
     }
   },
   // --- Danger section (Clear cell) ---

package/dist/esm/ui/TableMenu/cell/items/MergeCellsItem.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TableCellMergeIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
+import { mergeCellsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
-
 /**
  * Merge cells is only visible when the active selection can actually be merged
  * (multi-cell, non-overlapping).
@@ -11,14 +13,26 @@ import { useTableMenuContext } from '../../shared/TableMenuContext';
 var shouldShowMergeCells = function shouldShowMergeCells(tableMenuContext) {
   return (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.canMergeCells) === true;
 };
-export var MergeCellsItem = function MergeCellsItem() {
+export var MergeCellsItem = function MergeCellsItem(_ref) {
+  var api = _ref.api;
   var tableMenuContext = useTableMenuContext();
+  var _ref2 = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    mergeCellsWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.CONTEXT_MENU)(editorView.state, editorView.dispatch);
+    closeActiveTableMenu()(editorView.state, editorView.dispatch);
+  };
   if (!shouldShowMergeCells(tableMenuContext)) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/React.createElement(TableCellMergeIcon, {
       label: "",
       size: "small"

package/dist/esm/ui/TableMenu/cell/items/SplitCellItem.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TableCellSplitIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
+import { splitCellWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
-
 /**
  * Split cell is only visible when the active selection sits in a cell whose
  * `rowspan` or `colspan` is greater than one.
@@ -11,14 +13,26 @@ import { useTableMenuContext } from '../../shared/TableMenuContext';
 var shouldShowSplitCell = function shouldShowSplitCell(tableMenuContext) {
   return (tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.canSplitCell) === true;
 };
-export var SplitCellItem = function SplitCellItem() {
+export var SplitCellItem = function SplitCellItem(_ref) {
+  var api = _ref.api;
   var tableMenuContext = useTableMenuContext();
+  var _ref2 = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
+  var handleClick = function handleClick() {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    splitCellWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.CONTEXT_MENU)(editorView.state, editorView.dispatch);
+    closeActiveTableMenu()(editorView.state, editorView.dispatch);
+  };
   if (!shouldShowSplitCell(tableMenuContext)) {
     return null;
   }
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    onClick: handleClick,
     elemBefore: /*#__PURE__*/React.createElement(TableCellSplitIcon, {
       label: "",
       size: "small"

package/dist/esm/ui/TableMenu/column/items/AddColumnLeftItem.js

@@ -4,15 +4,15 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { addColumnBefore, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnAddLeftIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { insertColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var AddColumnLeftItem = function AddColumnLeftItem(_ref) {
-  var _tooltip;
+  var _useTableMenuContext, _tooltip;
   var api = _ref.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
+  var _ref2 = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {

package/dist/esm/ui/TableMenu/column/items/AddColumnRightItem.js

@@ -4,15 +4,15 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { addColumnAfter, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnAddRightIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { insertColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var AddColumnRightItem = function AddColumnRightItem(_ref) {
-  var _tooltip;
+  var _useTableMenuContext, _tooltip;
   var api = _ref.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
+  var _ref2 = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {

package/dist/esm/ui/TableMenu/column/items/DeleteColumnItem.js

@@ -4,7 +4,6 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { deleteColumn, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { DeleteIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { clearHoverSelection, hoverColumns } from '../../../../pm-plugins/commands';
@@ -14,9 +13,9 @@ import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var DeleteColumnItem = function DeleteColumnItem(_ref) {
   var _tableMenuContext$sel, _tooltip;
   var api = _ref.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
+  var _ref2 = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref2.editorView;
   var selectedColumnCount = (_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;

package/dist/esm/ui/TableMenu/column/items/DistributeColumnsItem.js

@@ -3,7 +3,6 @@ import { useIntl } from 'react-intl';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnsDistributeIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import { distributeColumnsWidthsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
@@ -15,9 +14,9 @@ var shouldShowDistributeColumns = function shouldShowDistributeColumns(selectedC
 };
 export var DistributeColumnsItem = function DistributeColumnsItem(_ref) {
   var api = _ref.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
+  var _ref2 = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {

package/dist/esm/ui/TableMenu/column/items/HeaderColumnToggleItem.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import Toggle from '@atlaskit/toggle';
 import { toggleHeaderColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
@@ -23,9 +22,9 @@ export var shouldShowHeaderColumnToggle = function shouldShowHeaderColumnToggle(
 };
 export var HeaderColumnToggleItem = function HeaderColumnToggleItem(props) {
   var api = props.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
+  var _ref2 = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
       var _states$tableState, _states$tableState2;
       return {

package/dist/esm/ui/TableMenu/column/items/MoveColumnLeftItem.js

@@ -4,7 +4,6 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { moveColumnLeft, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import TableColumnMoveLeftIcon from '@atlaskit/icon/core/table-column-move-left';
@@ -19,9 +18,9 @@ var shouldShowMoveColumnLeft = function shouldShowMoveColumnLeft(isFirstColumn)
 export var MoveColumnLeftItem = function MoveColumnLeftItem(props) {
   var _tableMenuContext$sel, _tooltip;
   var api = props.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
+  var _ref = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref.editorView;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
       var _states$tableState;
       return {

package/dist/esm/ui/TableMenu/column/items/MoveColumnRightItem.js

@@ -4,7 +4,6 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { moveColumnRight, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableColumnMoveRightIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { moveSourceWithAnalytics } from '../../../../pm-plugins/drag-and-drop/commands-with-analytics';
@@ -18,9 +17,9 @@ var shouldShowMoveColumnRight = function shouldShowMoveColumnRight(isLastColumn)
 export var MoveColumnRightItem = function MoveColumnRightItem(props) {
   var _tableMenuContext$sel, _tooltip;
   var api = props.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
+  var _ref = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref.editorView;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
       var _states$tableState;
       return {

package/dist/esm/ui/TableMenu/column/items/SortDecreasingItem.js

@@ -3,16 +3,15 @@ import { useIntl } from 'react-intl';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { ArrowDownIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import { sortColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var SortDecreasingItem = function SortDecreasingItem(_ref) {
   var api = _ref.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
+  var _ref2 = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var handleClick = function handleClick() {

package/dist/esm/ui/TableMenu/column/items/SortIncreasingItem.js

@@ -3,16 +3,15 @@ import { useIntl } from 'react-intl';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { ArrowUpIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import { sortColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var SortIncreasingItem = function SortIncreasingItem(_ref) {
   var api = _ref.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
+  var _ref2 = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var handleClick = function handleClick() {

package/dist/esm/ui/TableMenu/row/items/AddRowAboveItem.js

@@ -3,15 +3,15 @@ import { useIntl } from 'react-intl';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addRowBefore, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableRowAddAboveIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { insertRowWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var AddRowAboveItem = function AddRowAboveItem(props) {
-  var _tooltip;
+  var _useTableMenuContext, _tooltip;
   var api = props.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
+  var _ref = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
+    editorView = _ref.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var handleClick = function handleClick() {

package/dist/esm/ui/TableMenu/row/items/AddRowBelowItem.js

@@ -3,15 +3,15 @@ import { useIntl } from 'react-intl';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addRowAfter, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableRowAddBelowIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { insertRowWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var AddRowBelowItem = function AddRowBelowItem(props) {
-  var _tooltip;
+  var _useTableMenuContext, _tooltip;
   var api = props.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
+  var _ref = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
+    editorView = _ref.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var handleClick = function handleClick() {

package/dist/esm/ui/TableMenu/row/items/DeleteRowItem.js

@@ -4,7 +4,6 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { deleteRow, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { DeleteIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { clearHoverSelection, hoverRows } from '../../../../pm-plugins/commands';
@@ -14,9 +13,9 @@ import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var DeleteRowItem = function DeleteRowItem(props) {
   var _tableMenuContext$sel, _tooltip;
   var api = props.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
+  var _ref = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref.editorView;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
       var _states$tableState;
       return {

package/dist/esm/ui/TableMenu/row/items/HeaderRowToggleItem.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import Toggle from '@atlaskit/toggle';
 import { toggleHeaderRowWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
@@ -17,9 +16,9 @@ var shouldShowHeaderRowToggle = function shouldShowHeaderRowToggle(_ref) {
 export var HeaderRowToggleItem = function HeaderRowToggleItem(props) {
   var _tableMenuContext$sel;
   var api = props.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
+  var _ref2 = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
       var _states$tableState, _states$tableState2;
       return {

package/dist/esm/ui/TableMenu/row/items/MoveRowDownItem.js

@@ -4,7 +4,6 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { moveRowDown, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableRowMoveDownIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { moveSourceWithAnalytics } from '../../../../pm-plugins/drag-and-drop/commands-with-analytics';
@@ -18,9 +17,9 @@ var shouldShowMoveRowDown = function shouldShowMoveRowDown(isLastRow) {
 export var MoveRowDownItem = function MoveRowDownItem(props) {
   var _tableMenuContext$sel, _tooltip;
   var api = props.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
+  var _ref = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref.editorView;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
       var _states$tableState;
       return {

package/dist/esm/ui/TableMenu/row/items/MoveRowUpItem.js

@@ -4,7 +4,6 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { moveRowUp, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { TableRowMoveUpIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
 import { moveSourceWithAnalytics } from '../../../../pm-plugins/drag-and-drop/commands-with-analytics';
@@ -18,9 +17,9 @@ var shouldShowMoveRowUp = function shouldShowMoveRowUp(isFirstRow) {
 export var MoveRowUpItem = function MoveRowUpItem(props) {
   var _tableMenuContext$sel, _tooltip;
   var api = props.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
+  var _ref = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref.editorView;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
       var _states$tableState;
       return {

package/dist/esm/ui/TableMenu/row/items/NumberedRowsToggleItem.js

@@ -2,14 +2,15 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
 import Toggle from '@atlaskit/toggle';
 import { toggleNumberColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { useTableMenuContext } from '../../shared/TableMenuContext';
 export var NumberedRowsToggleItem = function NumberedRowsToggleItem(props) {
+  var _useTableMenuContext;
   var api = props.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
+  var _ref = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
+    editorView = _ref.editorView;
   var _useSharedPluginState = useSharedPluginStateWithSelector(api !== null && api !== void 0 ? api : undefined, ['table'], function (states) {
       var _states$tableState, _states$tableState2;
       return {

package/dist/esm/ui/TableMenu/shared/TableMenu.compiled.css

@@ -1,6 +1,4 @@
 
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
-._18m915vq{overflow-y:hidden}
 ._1bsb1178{width:280px}
-._1reo15vq{overflow-x:hidden}
 ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}

package/dist/esm/ui/TableMenu/shared/TableMenu.js

@@ -6,7 +6,6 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 React, { memo, useMemo } from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
-import { EditorToolbarProvider } from '@atlaskit/editor-common/toolbar';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { SurfaceRenderer } from '@atlaskit/editor-ui-control-model';
@@ -15,9 +14,8 @@ import { canSplitCellSelection } from '../../../pm-plugins/commands/split-cell';
 import { canMergeCellSelection } from '../../../pm-plugins/transforms/merge';
 import { TableMenuProvider } from './TableMenuContext';
 var tableMenuContainerStyles = {
-  container: "_2rko1qi0 _1reo15vq _18m915vq _1bsb1178 _16qs130s _bfhk1bhr"
+  container: "_2rko1qi0 _1bsb1178 _16qs130s _bfhk1bhr"
 };
-var EMPTY_CONTEXT = {};
 export var TableMenu = /*#__PURE__*/memo(function (_ref) {
   var api = _ref.api,
     editorView = _ref.editorView,
@@ -37,11 +35,14 @@ export var TableMenu = /*#__PURE__*/memo(function (_ref) {
     selection = _useSharedPluginState.selection;
   var tableMenuContext = useMemo(function () {
     if (!selection || !tableNode) {
-      return EMPTY_CONTEXT;
+      return {
+        editorView: editorView
+      };
     }
     var tableMap = TableMap.get(tableNode);
     var selectionRect = getSelectionRect(selection);
     var cellOps = {
+      editorView: editorView,
       canMergeCells: canMergeCellSelection(selection),
       canSplitCell: canSplitCellSelection(selection),
       hasMergedCellsInTable: tableMap.hasMergedCells()
@@ -57,13 +58,11 @@ export var TableMenu = /*#__PURE__*/memo(function (_ref) {
       isLastColumn: selectionRect.right === tableMap.width,
       selectedColumnCount: selectionRect.right - selectionRect.left
     });
-  }, [selection, tableNode]);
+  }, [editorView, selection, tableNode]);
   if (components.length === 0) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(EditorToolbarProvider, {
-    editorView: editorView !== null && editorView !== void 0 ? editorView : null
-  }, /*#__PURE__*/React.createElement(TableMenuProvider, {
+  return /*#__PURE__*/React.createElement(TableMenuProvider, {
     value: tableMenuContext
   }, /*#__PURE__*/React.createElement(Box, {
     xcss: tableMenuContainerStyles.container,
@@ -71,6 +70,6 @@ export var TableMenu = /*#__PURE__*/memo(function (_ref) {
   }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
     surface: surface,
     components: components
-  }))));
+  })));
 });
 TableMenu.displayName = 'TableMenu';

package/dist/esm/ui/TableMenu/shared/getSharedItems.js

@@ -24,7 +24,9 @@ export var getSharedItems = function getSharedItems(_ref) {
       rank: CELL_ACTION_SECTION_RANK[BACKGROUND_COLOR_ITEM.key]
     }],
     component: function component() {
-      return /*#__PURE__*/React.createElement(BackgroundColorItem, null);
+      return /*#__PURE__*/React.createElement(BackgroundColorItem, {
+        api: api
+      });
     }
   }, {
     type: CLEAR_CELLS_ITEM.type,

package/dist/esm/ui/TableMenu/shared/getTableMenuComponents.js

@@ -4,5 +4,5 @@ import { getColumnMenuComponents } from '../column/getColumnMenuComponents';
 import { getRowMenuComponents } from '../row/getRowMenuComponents';
 import { getSharedItems } from './getSharedItems';
 export var getTableMenuComponents = function getTableMenuComponents(params) {
-  return [].concat(_toConsumableArray(getRowMenuComponents(params)), _toConsumableArray(getColumnMenuComponents(params)), _toConsumableArray(getCellMenuComponents()), _toConsumableArray(getSharedItems(params)));
+  return [].concat(_toConsumableArray(getRowMenuComponents(params)), _toConsumableArray(getColumnMenuComponents(params)), _toConsumableArray(getCellMenuComponents(params)), _toConsumableArray(getSharedItems(params)));
 };

package/dist/esm/ui/TableMenu/shared/items/BackgroundColorItem.js

@@ -3,27 +3,53 @@ import "./BackgroundColorItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useMemo } from 'react';
 import { useIntl } from 'react-intl';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette } from '@atlaskit/editor-common/ui-color';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { NestedDropdownRightIcon, PaintBucketIcon, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
 import { Box } from '@atlaskit/primitives/compiled';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
+import { setColorWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
+import { getPluginState } from '../../../../pm-plugins/plugin-factory';
+import { useTableMenuContext } from '../TableMenuContext';
 var colorPaletteColumns = 7;
 var colorPaletteStyles = {
   container: "_1rjcu2gc",
   elemAfter: "_zulp1b66 _1e0c1txw _4cvr1h6o",
   colorPreview: "_2rko12b0 _1h6d1l7x _1dqonqa1 _189ee4h9 _1bsbdlk8 _4t3idlk8 _1o9zidpf"
 };
-export var BackgroundColorItem = function BackgroundColorItem() {
+export var BackgroundColorItem = function BackgroundColorItem(_ref) {
+  var _useTableMenuContext, _api$analytics2;
+  var api = _ref.api;
+  var _ref2 = (_useTableMenuContext = useTableMenuContext()) !== null && _useTableMenuContext !== void 0 ? _useTableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
-  var onClick = useCallback(function () {}, []);
+  var selectedColor = useMemo(function () {
+    var _node$attrs;
+    if (!editorView) {
+      return '#ffffff';
+    }
+    var _getPluginState = getPluginState(editorView.state),
+      targetCellPosition = _getPluginState.targetCellPosition;
+    var node = targetCellPosition ? editorView.state.doc.nodeAt(targetCellPosition) : null;
+    return hexToEditorBackgroundPaletteColor((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
+  }, [editorView]);
+  var onClick = useCallback(function (color) {
+    var _api$analytics;
+    if (!editorView) {
+      return;
+    }
+    setColorWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, color, editorView)(editorView.state, editorView.dispatch);
+    closeActiveTableMenu()(editorView.state, editorView.dispatch);
+  }, [api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, editorView]);
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   var colorPreviewStyle = useMemo(function () {
     return {
-      backgroundColor: '#ffffff'
+      backgroundColor: selectedColor
     };
-  }, []);
+  }, [selectedColor]);
   var paletteOptions = useMemo(function () {
     return {
       palette: cellBackgroundColorPalette,

package/dist/esm/ui/TableMenu/shared/items/ClearCellsItem.js

@@ -3,17 +3,17 @@ import { useIntl } from 'react-intl';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { backspace, tooltip } from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
 import { CrossIcon, ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
 import { emptyMultipleCellsWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
 import { getPluginState } from '../../../../pm-plugins/plugin-factory';
 import { useTableMenuContext } from '../TableMenuContext';
 export var ClearCellsItem = function ClearCellsItem(_ref) {
   var _tableMenuContext$sel, _tableMenuContext$sel2, _tooltip;
   var api = _ref.api;
-  var _useEditorToolbar = useEditorToolbar(),
-    editorView = _useEditorToolbar.editorView;
   var tableMenuContext = useTableMenuContext();
+  var _ref2 = tableMenuContext !== null && tableMenuContext !== void 0 ? tableMenuContext : {},
+    editorView = _ref2.editorView;
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var selectedCellCount = Math.max((_tableMenuContext$sel = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedColumnCount) !== null && _tableMenuContext$sel !== void 0 ? _tableMenuContext$sel : 1, (_tableMenuContext$sel2 = tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.selectedRowCount) !== null && _tableMenuContext$sel2 !== void 0 ? _tableMenuContext$sel2 : 1);
@@ -25,6 +25,7 @@ export var ClearCellsItem = function ClearCellsItem(_ref) {
     var _getPluginState = getPluginState(editorView.state),
       targetCellPosition = _getPluginState.targetCellPosition;
     emptyMultipleCellsWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition)(editorView.state, editorView.dispatch);
+    closeActiveTableMenu()(editorView.state, editorView.dispatch);
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     onClick: handleClick,