@atlaskit/editor-plugin-table 0.0.10 → 0.1.0

package/dist/esm/plugins/table/commands-with-analytics.js

@@ -55,75 +55,77 @@ export var emptyMultipleCellsWithAnalytics = function emptyMultipleCellsWithAnal
   };
 };
 export var mergeCellsWithAnalytics = function mergeCellsWithAnalytics(editorAnalyticsAPI) {
-  return withEditorAnalyticsAPI(function (_ref2) {
-    var selection = _ref2.selection;
-
-    var _getSelectedCellInfo2 = getSelectedCellInfo(selection),
-        horizontalCells = _getSelectedCellInfo2.horizontalCells,
-        verticalCells = _getSelectedCellInfo2.verticalCells,
-        totalCells = _getSelectedCellInfo2.totalCells,
-        totalRowCount = _getSelectedCellInfo2.totalRowCount,
-        totalColumnCount = _getSelectedCellInfo2.totalColumnCount;
-
-    return {
-      action: TABLE_ACTION.MERGED,
-      actionSubject: ACTION_SUBJECT.TABLE,
-      actionSubjectId: null,
-      attributes: {
-        inputMethod: INPUT_METHOD.CONTEXT_MENU,
-        // TODO: merge with floating toolbar once command is updated
-        horizontalCells: horizontalCells,
-        verticalCells: verticalCells,
-        totalCells: totalCells,
-        totalRowCount: totalRowCount,
-        totalColumnCount: totalColumnCount
-      },
-      eventType: EVENT_TYPE.TRACK
-    };
-  })(editorAnalyticsAPI)(function (state, dispatch) {
-    if (dispatch) {
-      dispatch(mergeCells(state.tr));
-    }
-
-    return true;
-  });
-};
-export var splitCellWithAnalytics = function splitCellWithAnalytics(editorAnalyticsAPI) {
-  return withEditorAnalyticsAPI(function (_ref3) {
-    var selection = _ref3.selection;
-
-    var _getSelectedCellInfo3 = getSelectedCellInfo(selection),
-        totalRowCount = _getSelectedCellInfo3.totalRowCount,
-        totalColumnCount = _getSelectedCellInfo3.totalColumnCount;
+  return function (inputMethod) {
+    return withEditorAnalyticsAPI(function (_ref2) {
+      var selection = _ref2.selection;
 
-    var cell = findCellClosestToPos(selection.$anchor);
+      var _getSelectedCellInfo2 = getSelectedCellInfo(selection),
+          horizontalCells = _getSelectedCellInfo2.horizontalCells,
+          verticalCells = _getSelectedCellInfo2.verticalCells,
+          totalCells = _getSelectedCellInfo2.totalCells,
+          totalRowCount = _getSelectedCellInfo2.totalRowCount,
+          totalColumnCount = _getSelectedCellInfo2.totalColumnCount;
 
-    if (cell) {
-      var _cell$node$attrs = cell.node.attrs,
-          verticalCells = _cell$node$attrs.rowspan,
-          horizontalCells = _cell$node$attrs.colspan;
       return {
-        action: TABLE_ACTION.SPLIT,
+        action: TABLE_ACTION.MERGED,
         actionSubject: ACTION_SUBJECT.TABLE,
         actionSubjectId: null,
         attributes: {
-          inputMethod: INPUT_METHOD.CONTEXT_MENU,
-          // TODO: merge with floating toolbar once command is updated
+          inputMethod: inputMethod,
           horizontalCells: horizontalCells,
           verticalCells: verticalCells,
-          totalCells: horizontalCells * verticalCells,
+          totalCells: totalCells,
           totalRowCount: totalRowCount,
           totalColumnCount: totalColumnCount
         },
         eventType: EVENT_TYPE.TRACK
       };
-    }
+    })(editorAnalyticsAPI)(function (state, dispatch) {
+      if (dispatch) {
+        dispatch(mergeCells(state.tr));
+      }
 
-    return;
-  })(editorAnalyticsAPI)(splitCell);
+      return true;
+    });
+  };
+};
+export var splitCellWithAnalytics = function splitCellWithAnalytics(editorAnalyticsAPI) {
+  return function (inputMethod) {
+    return withEditorAnalyticsAPI(function (_ref3) {
+      var selection = _ref3.selection;
+
+      var _getSelectedCellInfo3 = getSelectedCellInfo(selection),
+          totalRowCount = _getSelectedCellInfo3.totalRowCount,
+          totalColumnCount = _getSelectedCellInfo3.totalColumnCount;
+
+      var cell = findCellClosestToPos(selection.$anchor);
+
+      if (cell) {
+        var _cell$node$attrs = cell.node.attrs,
+            verticalCells = _cell$node$attrs.rowspan,
+            horizontalCells = _cell$node$attrs.colspan;
+        return {
+          action: TABLE_ACTION.SPLIT,
+          actionSubject: ACTION_SUBJECT.TABLE,
+          actionSubjectId: null,
+          attributes: {
+            inputMethod: inputMethod,
+            horizontalCells: horizontalCells,
+            verticalCells: verticalCells,
+            totalCells: horizontalCells * verticalCells,
+            totalRowCount: totalRowCount,
+            totalColumnCount: totalColumnCount
+          },
+          eventType: EVENT_TYPE.TRACK
+        };
+      }
+
+      return;
+    })(editorAnalyticsAPI)(splitCell);
+  };
 };
 export var setColorWithAnalytics = function setColorWithAnalytics(editorAnalyticsAPI) {
-  return function (cellColor, targetCellPosition) {
+  return function (inputMethod, cellColor, targetCellPosition) {
     return withEditorAnalyticsAPI(function (_ref4) {
       var selection = _ref4.selection;
 
@@ -139,8 +141,7 @@ export var setColorWithAnalytics = function setColorWithAnalytics(editorAnalytic
         actionSubject: ACTION_SUBJECT.TABLE,
         actionSubjectId: null,
         attributes: {
-          inputMethod: INPUT_METHOD.CONTEXT_MENU,
-          // TODO: merge with floating toolbar once command is updated
+          inputMethod: inputMethod,
           cellColor: (tableBackgroundColorPalette.get(cellColor.toLowerCase()) || cellColor).toLowerCase(),
           horizontalCells: horizontalCells,
           verticalCells: verticalCells,

package/dist/esm/plugins/table/event-handlers.js

@@ -4,8 +4,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { cellAround, findCellRectClosestToPos, findTable, getSelectionRect, removeTable } from '@atlaskit/editor-tables/utils';
 import { browser } from '@atlaskit/editor-common/utils';
-import { isElementInTableCell, isLastItemMediaGroup, setNodeSelection } from '@atlaskit/editor-common/utils'; // import { closestElement } from '@atlaskit/editor-core/src/utils/dom';
-
+import { isElementInTableCell, isLastItemMediaGroup, setNodeSelection } from '@atlaskit/editor-common/utils';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { addResizeHandleDecorations, clearHoverSelection, hideInsertColumnOrRowButton, hideResizeHandleLine, hoverColumns, selectColumn, setEditorFocus, showInsertColumnButton, showInsertRowButton, showResizeHandleLine } from './commands';

package/dist/esm/plugins/table/handlers.js

@@ -6,8 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 // #region Imports
 import { findParentNodeOfType } from 'prosemirror-utils';
-import { findTable } from '@atlaskit/editor-tables/utils'; // import { isTextInput } from '../../utils/is-text-input';
-
+import { findTable } from '@atlaskit/editor-tables/utils';
 import { isTextInput } from '@atlaskit/editor-common/utils';
 import { isTableCollapsible } from './utils/collapse';
 import { defaultTableSelection } from './pm-plugins/default-table-selection';

package/dist/esm/plugins/table/index.js

@@ -6,7 +6,7 @@ import { createTable } from '@atlaskit/editor-tables/utils';
 import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
 import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconTable } from '@atlaskit/editor-common/icons';
 import { pluginConfig } from './create-plugin-config';
@@ -128,21 +128,38 @@ var tablesPlugin = function tablesPlugin(options) {
       }, {
         name: 'tableEditing',
         plugin: function plugin() {
-          return tableEditing();
+          return tableEditing({
+            reportFixedTable: function reportFixedTable(_ref5) {
+              var _options$editorAnalyt;
+
+              var state = _ref5.state,
+                  tr = _ref5.tr,
+                  reason = _ref5.reason;
+              options === null || options === void 0 ? void 0 : (_options$editorAnalyt = options.editorAnalyticsAPI) === null || _options$editorAnalyt === void 0 ? void 0 : _options$editorAnalyt.attachAnalyticsEvent({
+                action: TABLE_ACTION.FIXED,
+                actionSubject: ACTION_SUBJECT.TABLE,
+                actionSubjectId: null,
+                attributes: {
+                  reason: reason
+                },
+                eventType: EVENT_TYPE.TRACK
+              })(tr);
+            }
+          });
         }
       }, {
         name: 'tableStickyHeaders',
-        plugin: function plugin(_ref5) {
-          var dispatch = _ref5.dispatch,
-              eventDispatcher = _ref5.eventDispatcher;
+        plugin: function plugin(_ref6) {
+          var dispatch = _ref6.dispatch,
+              eventDispatcher = _ref6.eventDispatcher;
           return options && options.tableOptions.stickyHeaders ? createStickyHeadersPlugin(dispatch, eventDispatcher, function () {
             return [];
           }, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags) : undefined;
         }
       }, {
         name: 'tableLocalId',
-        plugin: function plugin(_ref6) {
-          var dispatch = _ref6.dispatch;
+        plugin: function plugin(_ref7) {
+          var dispatch = _ref7.dispatch;
           return createTableLocalIdPlugin(dispatch);
         }
       }, {
@@ -187,12 +204,12 @@ var tablesPlugin = function tablesPlugin(options) {
 
       return plugins;
     },
-    contentComponent: function contentComponent(_ref7) {
-      var editorView = _ref7.editorView,
-          popupsMountPoint = _ref7.popupsMountPoint,
-          popupsBoundariesElement = _ref7.popupsBoundariesElement,
-          popupsScrollableElement = _ref7.popupsScrollableElement,
-          dispatchAnalyticsEvent = _ref7.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref8) {
+      var editorView = _ref8.editorView,
+          popupsMountPoint = _ref8.popupsMountPoint,
+          popupsBoundariesElement = _ref8.popupsBoundariesElement,
+          popupsScrollableElement = _ref8.popupsScrollableElement,
+          dispatchAnalyticsEvent = _ref8.dispatchAnalyticsEvent;
       return /*#__PURE__*/React.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -203,25 +220,25 @@ var tablesPlugin = function tablesPlugin(options) {
           tableResizingPluginState: tableResizingPluginKey,
           stickyHeadersState: stickyHeadersPluginKey
         },
-        render: function render(_ref8) {
-          var resizingPluginState = _ref8.tableResizingPluginState,
-              stickyHeadersState = _ref8.stickyHeadersState,
-              tablePluginState = _ref8.tablePluginState;
+        render: function render(_ref9) {
+          var resizingPluginState = _ref9.tableResizingPluginState,
+              stickyHeadersState = _ref9.stickyHeadersState,
+              tablePluginState = _ref9.tablePluginState;
           var state = editorView.state;
           var isDragging = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
-          var _ref9 = tablePluginState,
-              tableNode = _ref9.tableNode,
-              tablePos = _ref9.tablePos,
-              targetCellPosition = _ref9.targetCellPosition,
-              isContextualMenuOpen = _ref9.isContextualMenuOpen,
-              layout = _ref9.layout,
-              tableRef = _ref9.tableRef,
-              pluginConfig = _ref9.pluginConfig,
-              insertColumnButtonIndex = _ref9.insertColumnButtonIndex,
-              insertRowButtonIndex = _ref9.insertRowButtonIndex,
-              isHeaderColumnEnabled = _ref9.isHeaderColumnEnabled,
-              isHeaderRowEnabled = _ref9.isHeaderRowEnabled,
-              tableWrapperTarget = _ref9.tableWrapperTarget;
+          var _ref10 = tablePluginState,
+              tableNode = _ref10.tableNode,
+              tablePos = _ref10.tablePos,
+              targetCellPosition = _ref10.targetCellPosition,
+              isContextualMenuOpen = _ref10.isContextualMenuOpen,
+              layout = _ref10.layout,
+              tableRef = _ref10.tableRef,
+              pluginConfig = _ref10.pluginConfig,
+              insertColumnButtonIndex = _ref10.insertColumnButtonIndex,
+              insertRowButtonIndex = _ref10.insertRowButtonIndex,
+              isHeaderColumnEnabled = _ref10.isHeaderColumnEnabled,
+              isHeaderRowEnabled = _ref10.isHeaderRowEnabled,
+              tableWrapperTarget = _ref10.tableWrapperTarget;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
           return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && tableRef && !isDragging && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
@@ -286,9 +303,9 @@ var tablesPlugin = function tablesPlugin(options) {
     pluginsOptions: {
       // TODO: ED-14676 This is not the final API design
       // For now, we are using this on (insert-api/api.ts) but we may create a proper place for it
-      createNodeHandler: function createNodeHandler(_ref10) {
-        var nodeName = _ref10.nodeName,
-            schema = _ref10.schema;
+      createNodeHandler: function createNodeHandler(_ref11) {
+        var nodeName = _ref11.nodeName,
+            schema = _ref11.schema;
 
         // An EditorPlugin may manage more than one node.
         if (nodeName !== 'table') {
@@ -300,8 +317,8 @@ var tablesPlugin = function tablesPlugin(options) {
         });
         return table;
       },
-      quickInsert: function quickInsert(_ref11) {
-        var formatMessage = _ref11.formatMessage;
+      quickInsert: function quickInsert(_ref12) {
+        var formatMessage = _ref12.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(messages.table),
@@ -313,12 +330,12 @@ var tablesPlugin = function tablesPlugin(options) {
             return /*#__PURE__*/React.createElement(IconTable, null);
           },
           action: function action(insert, state) {
-            var _options$editorAnalyt;
+            var _options$editorAnalyt2;
 
             var tr = insert(createTable({
               schema: state.schema
             }));
-            options === null || options === void 0 ? void 0 : (_options$editorAnalyt = options.editorAnalyticsAPI) === null || _options$editorAnalyt === void 0 ? void 0 : _options$editorAnalyt.attachAnalyticsEvent({
+            options === null || options === void 0 ? void 0 : (_options$editorAnalyt2 = options.editorAnalyticsAPI) === null || _options$editorAnalyt2 === void 0 ? void 0 : _options$editorAnalyt2.attachAnalyticsEvent({
               action: ACTION.INSERTED,
               actionSubject: ACTION_SUBJECT.DOCUMENT,
               actionSubjectId: ACTION_SUBJECT_ID.TABLE,
@@ -331,7 +348,7 @@ var tablesPlugin = function tablesPlugin(options) {
           }
         }];
       },
-      floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
+      floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
     }
   };
 };

package/dist/esm/plugins/table/pm-plugins/keymap.js

@@ -2,7 +2,7 @@ import { keymap } from 'prosemirror-keymap';
 import { chainCommands } from 'prosemirror-commands';
 import * as keymaps from '@atlaskit/editor-common/keymaps';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { createTable, goToNextCell, moveCursorBackward, triggerUnlessTableHeader } from '../commands';
+import { triggerUnlessTableHeader, createTable, goToNextCell, moveCursorBackward } from '../commands';
 import { addRowAroundSelection, emptyMultipleCellsWithAnalytics, deleteTableIfSelectedWithAnalytics } from '../commands-with-analytics';
 import { addColumnAfter, addColumnBefore } from '../commands/insert';
 import { withEditorAnalyticsAPI } from '../utils/analytics';

package/dist/esm/plugins/table/pm-plugins/table-local-id.js

@@ -16,12 +16,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * TODO: https://product-fabric.atlassian.net/browse/ED-12714
  *
  */
-// import { Dispatch } from '../../../event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from 'prosemirror-state';
 import rafSchedule from 'raf-schd';
-import { uuid } from '@atlaskit/adf-schema'; // import { stepAddsOneOf } from '../../../utils/step';
-
+import { uuid } from '@atlaskit/adf-schema';
 import { stepAddsOneOf } from '@atlaskit/editor-common/utils';
 var pluginKey = new PluginKey('tableLocalIdPlugin');
 

package/dist/esm/plugins/table/pm-plugins/table-resizing/index.js

@@ -1,3 +1,4 @@
 export { createPlugin } from './plugin';
 export { scaleTable } from './commands';
-export { pluginKey } from './plugin-key';
+export { pluginKey } from './plugin-key';
+export { getPluginState } from './plugin-factory';

package/dist/esm/plugins/table/toolbar.js

@@ -1,12 +1,16 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { defineMessages } from 'react-intl-next';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import commonMessages from '@atlaskit/editor-common/messages';
 import { clearHoverSelection, hoverTable } from './commands';
-import { deleteTableWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, insertRowWithAnalytics, deleteRowsWithAnalytics, mergeCellsWithAnalytics, splitCellWithAnalytics, deleteColumnsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
+import { deleteTableWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, insertRowWithAnalytics, deleteRowsWithAnalytics, mergeCellsWithAnalytics, splitCellWithAnalytics, deleteColumnsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, wrapTableInExpandWithAnalytics, sortColumnWithAnalytics, setColorWithAnalytics, distributeColumnsWidthsWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { TableCssClassName } from './types';
+import { getMergedCellsPositions } from './utils';
 import { isReferencedSource } from './utils/referentiality';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
@@ -16,6 +20,11 @@ import tableMessages from './ui/messages';
 import { messages as ContextualMenuMessages } from './ui/FloatingContextualMenu/ContextualMenu';
 import { findParentDomRefOfType } from 'prosemirror-utils';
 import { closestElement } from '@atlaskit/editor-common/utils';
+import { addColumnAfter, addRowAfter, tooltip, backspace } from '@atlaskit/editor-common/keymaps';
+import { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizing/utils/resize-state';
+import { TableSortOrder as SortOrder } from '@atlaskit/adf-schema/steps';
+import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import { cellBackgroundColorPalette, DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
 export var messages = defineMessages({
   tableOptions: {
     id: 'fabric.editor.tableOptions',
@@ -85,6 +94,8 @@ export var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _
 // with native widgets. It's enabled via a plugin config.
 
 export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(editorState, initialSelectionRect, _ref2, getEditorContainerWidth, editorAnalyticsAPI) {
+  var _pluginState$pluginCo, _pluginState$pluginCo2;
+
   var formatMessage = _ref2.formatMessage;
   var top = initialSelectionRect.top,
       bottom = initialSelectionRect.bottom,
@@ -92,6 +103,7 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
       left = initialSelectionRect.left;
   var numberOfColumns = right - left;
   var numberOfRows = bottom - top;
+  var pluginState = getPluginState(editorState);
   var options = [{
     id: 'editor.table.insertColumn',
     title: formatMessage(tableMessages.insertColumn),
@@ -106,7 +118,10 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
       return true;
     },
     selected: false,
-    disabled: false
+    disabled: false,
+    elemAfter: jsx("div", {
+      css: shortcutStyle
+    }, tooltip(addColumnAfter))
   }, {
     id: 'editor.table.insertRow',
     title: formatMessage(tableMessages.insertRow),
@@ -124,7 +139,10 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
       return true;
     },
     selected: false,
-    disabled: false
+    disabled: false,
+    elemAfter: jsx("div", {
+      css: shortcutStyle
+    }, tooltip(addRowAfter))
   }, {
     id: 'editor.table.removeColumns',
     title: formatMessage(tableMessages.removeColumns, {
@@ -160,16 +178,63 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
   }, {
     id: 'editor.table.mergeCells',
     title: formatMessage(ContextualMenuMessages.mergeCells),
-    onClick: mergeCellsWithAnalytics(editorAnalyticsAPI),
+    onClick: mergeCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB),
     selected: false,
     disabled: !canMergeCells(editorState.tr)
   }, {
     id: 'editor.table.splitCell',
     title: formatMessage(ContextualMenuMessages.splitCell),
-    onClick: splitCellWithAnalytics(editorAnalyticsAPI),
+    onClick: splitCellWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB),
     selected: false,
     disabled: !splitCell(editorState)
-  }, {
+  }];
+
+  if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo = pluginState.pluginConfig) !== null && _pluginState$pluginCo !== void 0 && _pluginState$pluginCo.allowDistributeColumns) {
+    var distributeColumnWidths = function distributeColumnWidths(state, dispatch, view) {
+      var newResizeStateWithAnalytics = view ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, view.domAtPos.bind(view), getEditorContainerWidth) : undefined;
+
+      if (newResizeStateWithAnalytics) {
+        distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
+        return true;
+      }
+
+      return false;
+    };
+
+    options.push({
+      id: 'editor.table.distributeColumns',
+      title: formatMessage(ContextualMenuMessages.distributeColumns),
+      onClick: distributeColumnWidths,
+      selected: false,
+      disabled: numberOfColumns <= 1
+    });
+  }
+
+  if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo2 = pluginState.pluginConfig) !== null && _pluginState$pluginCo2 !== void 0 && _pluginState$pluginCo2.allowColumnSorting) {
+    var hasMergedCellsInTable = getMergedCellsPositions(editorState.tr).length > 0;
+    options.push({
+      id: 'editor.table.sortColumnAsc',
+      title: formatMessage(ContextualMenuMessages.sortColumnASC),
+      onClick: function onClick(state, dispatch) {
+        sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, initialSelectionRect.left, SortOrder.ASC)(state, dispatch);
+        return true;
+      },
+      selected: false,
+      disabled: hasMergedCellsInTable
+    });
+    options.push({
+      id: 'editor.table.sortColumnDesc',
+      title: formatMessage(ContextualMenuMessages.sortColumnDESC),
+      onClick: function onClick(state, dispatch) {
+        sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, initialSelectionRect.left, SortOrder.DESC)(state, dispatch);
+        return true;
+      },
+      selected: false,
+      disabled: hasMergedCellsInTable
+    });
+  }
+
+  options.push({
     id: 'editor.table.clearCells',
     title: formatMessage(ContextualMenuMessages.clearCells, {
       0: Math.max(numberOfColumns, numberOfRows)
@@ -182,14 +247,19 @@ export var getToolbarCellOptionsConfig = function getToolbarCellOptionsConfig(ed
       return true;
     },
     selected: false,
-    disabled: false
-  }];
+    disabled: false,
+    elemAfter: jsx("div", {
+      css: shortcutStyle
+    }, tooltip(backspace))
+  });
   return {
     id: 'editor.table.cellOptions',
     type: 'dropdown',
     title: formatMessage(tableMessages.cellOptions),
-    hidden: true,
-    options: options
+    options: options,
+    // Increased dropdown item width to prevent labels from being truncated
+    dropdownWidth: 230,
+    showSelected: false
   };
 };
 
@@ -198,7 +268,7 @@ var getClosestSelectionRect = function getClosestSelectionRect(state) {
   return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
 };
 
-export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI) {
+export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, editorAnalyticsAPI, getEditorFeatureFlags) {
   return function (config) {
     return function (state, intl) {
       var tableObject = findTable(state.selection);
@@ -208,7 +278,12 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
       if (tableObject && pluginState.editorHasFocus) {
         var nodeType = state.schema.nodes.table;
         var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
-        var cellItems = getCellItems(config, state, intl, getEditorContainerWidth, editorAnalyticsAPI); // Check if we need to show confirm dialog for delete button
+
+        var _ref3 = getEditorFeatureFlags() || {},
+            tableCellOptionsInFloatingToolbar = _ref3.tableCellOptionsInFloatingToolbar;
+
+        var cellItems = getCellItems(config, state, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar);
+        var colorPicker = getColorPicker(state, menu, intl, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar); // Check if we need to show confirm dialog for delete button
 
         var confirmDialog;
         var localId = tableObject.node.attrs.localId;
@@ -241,9 +316,20 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
           getDomRef: getDomRef,
           nodeType: nodeType,
           offset: [0, 3],
-          items: [menu, separator(menu.hidden)].concat(_toConsumableArray(cellItems), [{
+          items: [menu, separator(menu.hidden)].concat(_toConsumableArray(cellItems), _toConsumableArray(colorPicker), [{
             type: 'extensions-placeholder',
             separator: 'end'
+          }, {
+            type: 'copy-button',
+            items: [{
+              state: state,
+              formatMessage: intl.formatMessage,
+              nodeType: nodeType,
+              onMouseEnter: hoverTable(false, true),
+              onMouseLeave: clearHoverSelection()
+            }, {
+              type: 'separator'
+            }]
           }, {
             id: 'editor.table.delete',
             type: 'button',
@@ -255,7 +341,8 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
             onMouseLeave: clearHoverSelection(),
             title: intl.formatMessage(commonMessages.remove),
             confirmDialog: confirmDialog
-          }])
+          }]),
+          scrollable: true
         };
       }
 
@@ -271,10 +358,10 @@ var separator = function separator(hidden) {
   };
 };
 
-var getCellItems = function getCellItems(pluginConfig, state, _ref3, getEditorContainerWidth, editorAnalyticsAPI) {
-  var formatMessage = _ref3.formatMessage;
+var getCellItems = function getCellItems(pluginConfig, state, _ref4, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) {
+  var formatMessage = _ref4.formatMessage;
 
-  if (pluginConfig.allowCellOptionsInFloatingToolbar) {
+  if (pluginConfig.allowCellOptionsInFloatingToolbar || tableCellOptionsInFloatingToolbar) {
     var initialSelectionRect = getClosestSelectionRect(state);
 
     if (initialSelectionRect) {
@@ -286,4 +373,39 @@ var getCellItems = function getCellItems(pluginConfig, state, _ref3, getEditorCo
   }
 
   return [];
+};
+
+var getColorPicker = function getColorPicker(state, menu, _ref5, getEditorContainerWidth, editorAnalyticsAPI, tableCellOptionsInFloatingToolbar) {
+  var _node$attrs;
+
+  var formatMessage = _ref5.formatMessage;
+
+  var _getPluginState2 = getPluginState(state),
+      targetCellPosition = _getPluginState2.targetCellPosition,
+      pluginConfig = _getPluginState2.pluginConfig;
+
+  if (!pluginConfig.allowBackgroundColor || !tableCellOptionsInFloatingToolbar) {
+    return [];
+  }
+
+  var node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : undefined;
+  var currentBackground = (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff';
+  var defaultPalette = cellBackgroundColorPalette.find(function (item) {
+    return item.value === currentBackground;
+  }) || {
+    label: 'Custom',
+    value: currentBackground,
+    border: DEFAULT_BORDER_COLOR
+  };
+  return [{
+    id: 'editor.panel.colorPicker',
+    title: formatMessage(ContextualMenuMessages.cellBackground),
+    type: 'select',
+    selectType: 'color',
+    defaultValue: defaultPalette,
+    options: cellBackgroundColorPalette,
+    onChange: function onChange(option) {
+      return setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, option.value, targetCellPosition);
+    }
+  }, separator(menu.hidden)];
 };

package/dist/esm/plugins/table/transforms/fix-tables.js

@@ -5,10 +5,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
-import { akEditorDefaultLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles'; // import { sendLogs } from '../../../utils/sendLogs';
-// import { sendLogs } from '@atlaskit/editor-core/src/utils/sendLogs';
-
-import { sendLogs } from '../todo-stubs';
+import { akEditorDefaultLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { sendLogs } from '@atlaskit/editor-common/utils';
 import { calculateColumnWidth, contentWidth, getCellsRefsInColumn, getLayoutSize } from '../pm-plugins/table-resizing/utils';
 export var fireAnalytics = function fireAnalytics() {
   var properties = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};

package/dist/esm/plugins/table/ui/FloatingContextualButton/index.js

@@ -148,8 +148,7 @@ export var FloatingContextualButtonInner = /*#__PURE__*/function (_React$Compone
     key: "shouldComponentUpdate",
     value: function shouldComponentUpdate(nextProps) {
       return this.props.tableNode !== nextProps.tableNode || this.props.targetCellPosition !== nextProps.targetCellPosition || this.props.layout !== nextProps.layout || this.props.isContextualMenuOpen !== nextProps.isContextualMenuOpen || this.props.isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || this.props.stickyHeader !== nextProps.stickyHeader;
-    } // TODO: restore
-
+    }
   }]);
 
   return FloatingContextualButtonInner;