@atlaskit/editor-core 172.3.2 → 173.0.0

package/dist/esm/plugins/paste/pm-plugins/plugin-factory.js

@@ -0,0 +1,46 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+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 { PluginKey } from 'prosemirror-state';
+import { pluginFactory } from '../../../utils/plugin-state-factory';
+import { reducer } from '../reducer';
+export var pluginKey = new PluginKey('pastePlugin');
+
+var _pluginFactory = pluginFactory(pluginKey, reducer, {
+  mapping: function mapping(tr, pluginState) {
+    if (tr.docChanged) {
+      var atLeastOnePositionChanged = false;
+      var positionsMappedThroughChanges = Object.entries(pluginState.pastedMacroPositions).reduce(function (acc, _ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+            key = _ref2[0],
+            position = _ref2[1];
+
+        var mappedPosition = tr.mapping.map(position);
+
+        if (position !== mappedPosition) {
+          atLeastOnePositionChanged = true;
+        }
+
+        acc[key] = tr.mapping.map(position);
+        return acc;
+      }, {});
+
+      if (atLeastOnePositionChanged) {
+        return _objectSpread(_objectSpread({}, pluginState), {}, {
+          pastedMacroPositions: positionsMappedThroughChanges
+        });
+      }
+    }
+
+    return pluginState;
+  }
+}),
+    createPluginState = _pluginFactory.createPluginState,
+    createCommand = _pluginFactory.createCommand,
+    getPluginState = _pluginFactory.getPluginState;
+
+export { createPluginState, createCommand, getPluginState };

package/dist/esm/plugins/paste/reducer.js

@@ -0,0 +1,34 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+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 { PastePluginActionTypes as ActionTypes } from './actions';
+export var reducer = function reducer(state, action) {
+  switch (action.type) {
+    case ActionTypes.START_TRACKING_PASTED_MACRO_POSITIONS:
+      {
+        return _objectSpread(_objectSpread({}, state), {}, {
+          pastedMacroPositions: _objectSpread(_objectSpread({}, state.pastedMacroPositions), action.pastedMacroPositions)
+        });
+      }
+
+    case ActionTypes.STOP_TRACKING_PASTED_MACRO_POSITIONS:
+      {
+        var filteredMacroPositions = Object.fromEntries(Object.entries(state.pastedMacroPositions).filter(function (_ref) {
+          var _ref2 = _slicedToArray(_ref, 1),
+              key = _ref2[0];
+
+          return !action.pastedMacroPositionKeys.includes(key);
+        }));
+        return _objectSpread(_objectSpread({}, state), {}, {
+          pastedMacroPositions: filteredMacroPositions
+        });
+      }
+
+    default:
+      return state;
+  }
+};

package/dist/esm/plugins/paste/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -8,6 +8,7 @@ import { placeHolderClassName } from './styles';
 export var pluginKey = new PluginKey('placeholderPlugin');
 import { focusStateKey } from '../base/pm-plugins/focus-handler';
 import { isTypeAheadOpen } from '../type-ahead/utils';
+import { isComposing } from '../base/pm-plugins/composition';
 
 function getPlaceholderState(editorState) {
   return pluginKey.getState(editorState);
@@ -134,7 +135,7 @@ export function createPlugin(defaultPlaceholderText, placeholderHints, bracketPl
             placeholderText = _getPlaceholderState.placeholderText,
             pos = _getPlaceholderState.pos;
 
-        if (hasPlaceholder && placeholderText && pos !== undefined) {
+        if (hasPlaceholder && placeholderText && pos !== undefined && !isComposing(editorState)) {
           return createPlaceholderDecoration(editorState, placeholderText, pos);
         }
 

package/dist/esm/plugins/placeholder-text/index.js

@@ -72,10 +72,16 @@ export function createPlugin(dispatch, options) {
         var placeholderNodeType = newState.schema.nodes.placeholder;
 
         if (adjacentNode && adjacentNode.type === placeholderNodeType && didPlaceholderExistBeforeTxn) {
-          // Check that cursor has moved forward in the document **and** that there is content before the cursor
-          var wasContentAdded = oldState.selection.$head.pos < newState.selection.$head.pos && !isNodeEmpty(newState.selection.$head.nodeBefore);
+          var _$newHead$nodeBefore;
 
-          if (wasContentAdded) {
+          var $newHead = newState.selection.$head;
+          var $oldHead = oldState.selection.$head; // Check that cursor has moved forward in the document **and** that there is content before the cursor
+
+          var cursorMoved = $oldHead.pos < $newHead.pos;
+          var nodeBeforeHasContent = !isNodeEmpty($newHead.nodeBefore);
+          var nodeBeforeIsInline = (_$newHead$nodeBefore = $newHead.nodeBefore) === null || _$newHead$nodeBefore === void 0 ? void 0 : _$newHead$nodeBefore.type.isInline;
+
+          if (cursorMoved && (nodeBeforeHasContent || nodeBeforeIsInline)) {
             var _NodeSelection$create = NodeSelection.create(newState.doc, adjacentNodePos),
                 $from = _NodeSelection$create.$from,
                 $to = _NodeSelection$create.$to;

package/dist/esm/plugins/status/ui/statusPicker.js

@@ -51,8 +51,11 @@ export var StatusPickerWithoutAnalytcs = /*#__PURE__*/function (_React$Component
     _defineProperty(_assertThisInitialized(_this), "handleClickOutside", function (event) {
       event.preventDefault();
       _this.inputMethod = InputMethod.blur;
+      var selectedText = window.getSelection();
 
-      _this.props.closeStatusPicker();
+      if (!selectedText) {
+        _this.props.closeStatusPicker();
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleEscapeKeydown", function (event) {

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

@@ -55,71 +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: {
-        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: 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;
 
@@ -135,6 +141,7 @@ export var setColorWithAnalytics = function setColorWithAnalytics(editorAnalytic
         actionSubject: ACTION_SUBJECT.TABLE,
         actionSubjectId: null,
         attributes: {
+          inputMethod: inputMethod,
           cellColor: (tableBackgroundColorPalette.get(cellColor.toLowerCase()) || cellColor).toLowerCase(),
           horizontalCells: horizontalCells,
           verticalCells: verticalCells,

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

@@ -5,7 +5,7 @@ import { createTable } from '@atlaskit/editor-tables/utils';
 import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
 import { toggleTable, tooltip } from '../../keymaps';
 import WithPluginState from '../../ui/WithPluginState';
-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';
@@ -116,21 +116,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);
         }
       }]; // workaround for prosemirrors delayed dom selection syncing during pointer drag
@@ -161,12 +178,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,
@@ -177,25 +194,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, {
@@ -260,9 +277,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') {
@@ -274,8 +291,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),
@@ -287,12 +304,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,

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';
@@ -17,6 +21,12 @@ import { messages as ContextualMenuMessages } from './ui/FloatingContextualMenu/
 import { findParentDomRefOfType } from 'prosemirror-utils';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { getCopyButtonConfig, showCopyButton } from '../copy-button/toolbar';
+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';
+import { getFeatureFlags } from '../feature-flags-context';
 // TODO: ED-14403 investigate why these translations don't work
 export var messages = defineMessages({
   tableOptions: {
@@ -94,6 +104,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),
@@ -108,7 +119,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),
@@ -126,7 +140,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, {
@@ -162,16 +179,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.pluginConfig.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.pluginConfig.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)
@@ -184,14 +248,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
   };
 };
 
@@ -210,7 +279,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 = getFeatureFlags(state) || {},
+            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;
@@ -243,7 +317,7 @@ 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'
           }], _toConsumableArray(state && showCopyButton(state) ? [getCopyButtonConfig(state, intl.formatMessage, nodeType, hoverTable(false, true), clearHoverSelection()), {
@@ -275,10 +349,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) {
@@ -290,4 +364,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)];
 };