@atlaskit/editor-plugin-table 5.7.9 → 5.8.0

package/dist/es2019/commands/go-to-next-cell.js

@@ -4,7 +4,10 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { goToNextCell as baseGotoNextCell, findTable } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { insertRowWithAnalytics } from '../commands-with-analytics';
+import { getPluginState as getResizePluginState, createCommand as tableResizingPluginCreateCommand } from '../pm-plugins/table-resizing/plugin-factory';
+import { hideResizeHandleLine } from './hover';
 const TAB_FORWARD_DIRECTION = 1;
 const TAB_BACKWARD_DIRECTION = -1;
 export const goToNextCell = editorAnalyticsAPI => direction => (state, dispatch) => {
@@ -12,6 +15,16 @@ export const goToNextCell = editorAnalyticsAPI => direction => (state, dispatch)
   if (!table) {
     return false;
   }
+  if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+    var _getResizePluginState;
+    const isColumnResizing = !!((_getResizePluginState = getResizePluginState(state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging);
+    if (isColumnResizing) {
+      tableResizingPluginCreateCommand({
+        type: 'STOP_RESIZING'
+      }, originalTr => (state.tr || originalTr).setMeta('scrollIntoView', false))(state, dispatch);
+      hideResizeHandleLine()(state, dispatch);
+    }
+  }
   const map = TableMap.get(table.node);
   const {
     tableCell,

package/dist/es2019/commands/selection.js

@@ -3,7 +3,9 @@ import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, isColumnSelected, isRowSelected, isTableSelected, selectedRect } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { selectColumn, selectRow } from '../commands/misc';
+import { getPluginState as getResizePluginState } from '../pm-plugins/table-resizing/plugin-factory';
 import { getClosestSelectionRect } from '../toolbar';
 export let TableSelectionDirection = /*#__PURE__*/function (TableSelectionDirection) {
   TableSelectionDirection["TopToBottom"] = "TopToBottom";
@@ -175,9 +177,14 @@ const arrowLeftFromText = editorSelectionAPI => selection => (state, dispatch) =
     const {
       $from
     } = selection;
+    let isColumnResizing = false;
+    if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+      const columResizePluginState = getResizePluginState(state) || {};
+      isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.dragging);
+    }
     if (isSelectionAtStartOfTable($from, selection) && $from.parent.type.name === 'paragraph' && $from.depth === table.depth + 3 &&
     // + 3 for: row, cell & paragraph nodes
-    editorSelectionAPI) {
+    editorSelectionAPI && !isColumnResizing) {
       const selectionState = editorSelectionAPI.sharedState.currentState() || {};
       if ((selectionState === null || selectionState === void 0 ? void 0 : selectionState.selectionRelativeToNode) === RelativeSelectionPos.Before) {
         // we have a text selection at start of first table cell, directly inside a top level paragraph,
@@ -202,8 +209,14 @@ const arrowRightFromText = editorSelectionAPI => selection => (state, dispatch)
     const {
       $to
     } = selection;
-    if (isSelectionAtEndOfTable($to, selection) && $to.parent.type.name === 'paragraph' && $to.depth === table.depth + 3 // + 3 for: row, cell & paragraph nodes
-    ) {
+    let isColumnResizing = false;
+    if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+      const columResizePluginState = getResizePluginState(state) || {};
+      isColumnResizing = Boolean(columResizePluginState === null || columResizePluginState === void 0 ? void 0 : columResizePluginState.dragging);
+    }
+    if (isSelectionAtEndOfTable($to, selection) && $to.parent.type.name === 'paragraph' && $to.depth === table.depth + 3 &&
+    // + 3 for: row, cell & paragraph nodes
+    !isColumnResizing) {
       // we have a text selection at end of last table cell, directly inside a top level paragraph,
       // and want to set a full table cell selection
       return selectFullTable(editorSelectionAPI)({

package/dist/es2019/nodeviews/ExternalDropTargets.js

@@ -44,7 +44,8 @@ export const ExternalDropTargets = ({
       top: `-${dropTargetExtendedWidth - tableMarginTop}px`,
       pointerEvents: 'auto',
       zIndex: `${dropTargetsZIndex}`
-    }
+    },
+    "data-testid": "table-floating-column-extended-drop-targets"
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',

package/dist/es2019/plugin.js

@@ -359,7 +359,8 @@ const tablesPlugin = ({
             canDrag: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.canDrag,
             getEditorContainerWidth: defaultGetEditorContainerWidth,
             editorAnalyticsAPI: editorAnalyticsAPI,
-            stickyHeaders: stickyHeader
+            stickyHeaders: stickyHeader,
+            pluginConfig: pluginConfig
           }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,

package/dist/es2019/pm-plugins/drag-and-drop/commands.js

@@ -15,7 +15,7 @@ export const getDecorations = state => {
   return ((_pluginKey$getState = pluginKey.getState(state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.decorationSet) || DecorationSet.empty;
 };
 export const updatePluginStateDecorations = (state, decorations, key) => updateDecorations(state.doc, getDecorations(state), decorations, key);
-export const setDropTarget = (type, index, tr) => createCommand(state => {
+export const setDropTarget = (type, index, hasMergedCells, tr) => createCommand(state => {
   const {
     dropTargetType,
     dropTargetIndex
@@ -25,9 +25,9 @@ export const setDropTarget = (type, index, tr) => createCommand(state => {
   }
   let decorationSet = DecorationSet.empty;
   if (type === 'column') {
-    decorationSet = updatePluginStateDecorations(state, createColumnInsertLine(index, state.selection), TableDecorations.COLUMN_INSERT_LINE);
+    decorationSet = updatePluginStateDecorations(state, createColumnInsertLine(index, state.selection, hasMergedCells), TableDecorations.COLUMN_INSERT_LINE);
   } else if (type === 'row') {
-    decorationSet = updatePluginStateDecorations(state, createRowInsertLine(index, state.selection), TableDecorations.ROW_INSERT_LINE);
+    decorationSet = updatePluginStateDecorations(state, createRowInsertLine(index, state.selection, hasMergedCells), TableDecorations.ROW_INSERT_LINE);
   }
   return {
     type: DragAndDropActionType.SET_DROP_TARGET,

package/dist/es2019/pm-plugins/drag-and-drop/plugin.js

@@ -137,7 +137,8 @@ export const createPlugin = (dispatch, eventDispatcher, editorAnalyticsAPI) => {
               targetAdjustedIndex
             } = data;
             const dropTargetType = sourceType === 'table-row' ? DropTargetType.ROW : DropTargetType.COLUMN;
-            setDropTarget(dropTargetType, targetAdjustedIndex)(editorView.state, editorView.dispatch);
+            const hasMergedCells = hasMergedCellsInBetween([targetAdjustedIndex - 1, targetAdjustedIndex], dropTargetType)(editorView.state.selection);
+            setDropTarget(dropTargetType, targetAdjustedIndex, hasMergedCells)(editorView.state, editorView.dispatch);
           },
           onDrop(event) {
             var _cell$row, _cell$col;

package/dist/es2019/pm-plugins/keymap.js

@@ -1,9 +1,11 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, backspace, bindKeymapWithCommand, deleteColumn, deleteRow, moveColumnLeft, moveColumnRight, moveRowDown, moveRowUp, nextCell, previousCell, toggleTable } from '@atlaskit/editor-common/keymaps';
+import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, backspace, bindKeymapWithCommand, decreaseMediaSize, deleteColumn, deleteRow, increaseMediaSize, moveColumnLeft, moveColumnRight, moveLeft, moveRight, moveRowDown, moveRowUp, nextCell, previousCell, startColumnResizing, toggleTable } from '@atlaskit/editor-common/keymaps';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { createTable, goToNextCell, moveCursorBackward, triggerUnlessTableHeader } from '../commands';
 import { addRowAroundSelection, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut, deleteTableIfSelectedWithAnalytics, emptyMultipleCellsWithAnalytics } from '../commands-with-analytics';
+import { activateNextResizeArea, changeColumnWidthByStep, initiateKeyboardColumnResizing } from '../commands/column-resize';
 import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand } from '../commands/insert';
 import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/commands-with-analytics';
 import { withEditorAnalyticsAPI } from '../utils/analytics';
@@ -40,6 +42,13 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
     bindKeymapWithCommand(deleteColumn.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI), list);
     bindKeymapWithCommand(deleteRow.common, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut(editorAnalyticsAPI), list);
   }
+  if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+    bindKeymapWithCommand(startColumnResizing.common, initiateKeyboardColumnResizing, list);
+    bindKeymapWithCommand(moveRight.common, activateNextResizeArea(1), list);
+    bindKeymapWithCommand(moveLeft.common, activateNextResizeArea(-1), list);
+    bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStep(-10, getEditorContainerWidth), list);
+    bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStep(10, getEditorContainerWidth), list);
+  }
   return keymap(list);
 }
 export default keymapPlugin;

package/dist/es2019/pm-plugins/table-resizing/event-handlers.js

@@ -11,7 +11,7 @@ import { getSelectedColumnIndexes } from '../../utils';
 import { META_KEYS } from '../table-analytics';
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
-import { currentColWidth, getLayoutSize, getResizeState, pointsAtCell, resizeColumn, updateControls } from './utils';
+import { currentColWidth, getLayoutSize, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, updateControls } from './utils';
 export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI) => {
   const {
     state,
@@ -37,13 +37,24 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
   if (dom && dom.nodeName !== 'TABLE') {
     dom = dom.closest('table');
   }
-  const containerWidth = getEditorContainerWidth();
-  const parentWidth = getParentNodeWidth(start, state, containerWidth);
-  let maxSize = getBooleanFF('platform.editor.custom-table-width') ? parentWidth ||
-  // its safe to reference table width from node as this will not have changed
-  originalTable.attrs.width || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {}) : parentWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
-  if (originalTable.attrs.isNumberColumnEnabled) {
-    maxSize -= akEditorTableNumberColumnWidth;
+  let maxSize;
+  if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+    const containerWidth = getEditorContainerWidth();
+    const parentWidth = getParentNodeWidth(start, state, containerWidth);
+    maxSize = getBooleanFF('platform.editor.custom-table-width') ? parentWidth ||
+    // its safe to reference table width from node as this will not have changed
+    originalTable.attrs.width || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {}) : parentWidth || getLayoutSize(dom.getAttribute('data-layout'), containerWidth.width, {});
+    if (originalTable.attrs.isNumberColumnEnabled) {
+      maxSize -= akEditorTableNumberColumnWidth;
+    }
+  } else {
+    maxSize = getTableMaxWidth({
+      table: originalTable,
+      tableStart: start,
+      state,
+      layout: originalTable.attrs.layout,
+      getEditorContainerWidth
+    });
   }
   const resizeState = getResizeState({
     minWidth: tableCellMinWidth,

package/dist/es2019/pm-plugins/table-resizing/utils/index.js

@@ -3,7 +3,7 @@ export { contentWidth } from './content-width';
 export { getColumnStateFromDOM, getFreeSpace, getCellsRefsInColumn, calculateColumnWidth, addContainerLeftRightPadding } from './column-state';
 export { growColumn, shrinkColumn, reduceSpace } from './resize-logic';
 export { getResizeState, updateColgroup, getTotalWidth, evenAllColumnsWidths, bulkColumnsResize, areColumnsEven, adjustColumnsWidths } from './resize-state';
-export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround } from './misc';
+export { getLayoutSize, getDefaultLayoutMaxWidth, pointsAtCell, currentColWidth, domCellAround, getTableMaxWidth } from './misc';
 export { updateControls, isClickNear, getResizeCellPos } from './dom';
 export { scale, scaleWithParent, scaleTable, previewScaleTable } from './scale-table';
 export { resizeColumn } from './resize-column';

package/dist/es2019/types.js

@@ -97,6 +97,8 @@ export const TableCssClassName = {
   DRAG_HANDLE_DISABLED: `${tablePrefixSelector}-drag-handle-disabled`,
   /** minimised handle class */
   DRAG_HANDLE_MINIMISED: `${tablePrefixSelector}-drag-handle-minimised`,
+  DRAG_SUBMENU: `${tablePrefixSelector}-drag-submenu`,
+  DRAG_SUBMENU_ICON: `${tablePrefixSelector}-drag-submenu-icon`,
   /** Other classes */
   NUMBERED_COLUMN: `${tablePrefixSelector}-numbered-column`,
   NUMBERED_COLUMN_BUTTON: `${tablePrefixSelector}-numbered-column__button`,
@@ -132,12 +134,17 @@ export const TableCssClassName = {
   TOP_LEFT_CELL: 'table > tbody > tr:nth-child(2) > td:nth-child(1)',
   LAST_ITEM_IN_CELL: `${tablePrefixSelector}-last-item-in-cell`,
   WITH_COLUMN_INSERT_LINE: `${tablePrefixSelector}-column-insert-line`,
+  WITH_COLUMN_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-column-insert-line__inactive`,
   WITH_FIRST_COLUMN_INSERT_LINE: `${tablePrefixSelector}-first-column-insert-line`,
+  WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-first-column-insert-line__inactive`,
   WITH_LAST_COLUMN_INSERT_LINE: `${tablePrefixSelector}-last-column-insert-line`,
+  WITH_LAST_COLUMN_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-last-column-insert-line__inactive`,
   WITH_RESIZE_LINE: `${tablePrefixSelector}-column-resize-line`,
   WITH_RESIZE_LINE_LAST_COLUMN: `${tablePrefixSelector}-column-resize-line-last-column`,
   WITH_ROW_INSERT_LINE: `${tablePrefixSelector}-row-insert-line`,
-  WITH_LAST_ROW_INSERT_LINE: `${tablePrefixSelector}-last-row-insert-line`
+  WITH_ROW_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-row-insert-line__inactive`,
+  WITH_LAST_ROW_INSERT_LINE: `${tablePrefixSelector}-last-row-insert-line`,
+  WITH_LAST_ROW_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-last-row-insert-line__inactive`
 };
 export let ShadowEvent = /*#__PURE__*/function (ShadowEvent) {
   ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";

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

@@ -109,7 +109,7 @@ export const DragHandle = ({
     style: {
       transform: direction === 'column' ? 'none' : 'rotate(90deg)'
     },
-    "data-testid": "table-floating-column-controls-drag-handle",
+    "data-testid": "table-drag-handle-button",
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
     onMouseUp: e => {

package/dist/es2019/ui/FloatingDragMenu/DragMenu.js

@@ -1,15 +1,29 @@
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
 /** @jsx jsx */
+import { useState } from 'react';
 import { jsx } from '@emotion/react';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { backgroundPaletteTooltipMessages, cellBackgroundColorPalette, ColorPalette } from '@atlaskit/editor-common/ui-color';
 import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { closestElement } from '@atlaskit/editor-common/utils';
+import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
+import EditorBackgroundColorIcon from '@atlaskit/icon/glyph/editor/background-color';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import Toggle from '@atlaskit/toggle';
 import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
+import { setColorWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics } from '../../commands-with-analytics';
 import { toggleDragMenu } from '../../pm-plugins/drag-and-drop/commands';
 import { getPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
-import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes, hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
+import { getPluginState as getTablePluginState } from '../../pm-plugins/plugin-factory';
+import { TableCssClassName as ClassName } from '../../types';
+import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes, hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils';
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { dragMenuDropdownWidth } from '../consts';
+import { cellColourPreviewStyles, dragMenuBackgroundColorStyles, toggleStyles } from './styles';
 const groupedDragMenuConfig = [['add_row_above', 'add_row_below', 'add_column_left', 'add_column_right', 'distribute_columns', 'clear_cells', 'delete_row', 'delete_column'], ['move_column_left', 'move_column_right', 'move_row_up', 'move_row_down'], ['sort_column_asc', 'sort_column_desc']];
 const convertToDropdownItems = dragMenuConfig => {
   let menuItemsArr = [...Array(groupedDragMenuConfig.length)].map(() => []);
@@ -28,7 +42,6 @@ const convertToDropdownItems = dragMenuConfig => {
       isDisabled: item.disabled,
       elemBefore: item.icon ? jsx("div", {
         style: {
-          marginRight: "var(--ds-space-negative-075, -6px)",
           display: 'flex'
         }
       }, jsx(item.icon, {
@@ -63,9 +76,10 @@ export const DragMenu = ({
   targetCellPosition,
   getEditorContainerWidth,
   canDrag,
-  editorAnalyticsAPI
+  editorAnalyticsAPI,
+  pluginConfig
 }) => {
-  const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
+  var _pluginConfig$allowBa;
   const {
     state,
     dispatch
@@ -73,19 +87,133 @@ export const DragMenu = ({
   const {
     selection
   } = state;
+  const tableMap = tableNode ? TableMap.get(tableNode) : undefined;
+  const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
   const selectionRect = isSelectionType(selection, 'cell') ? getSelectionRect(selection) : findCellRectClosestToPos(selection.$from);
   const hasMergedCells = direction === 'row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
   const shouldMoveDisabled = index !== undefined && hasMergedCells(index)(selection);
   const hasMergedCellsInTable = getMergedCellsPositions(state.tr).length > 0;
+  const allowBackgroundColor = (_pluginConfig$allowBa = pluginConfig === null || pluginConfig === void 0 ? void 0 : pluginConfig.allowBackgroundColor) !== null && _pluginConfig$allowBa !== void 0 ? _pluginConfig$allowBa : false;
   const dragMenuConfig = getDragMenuConfig(direction, getEditorContainerWidth, !!canDrag && !shouldMoveDisabled, hasMergedCellsInTable, editorView, tableMap, index, targetCellPosition, selectionRect, editorAnalyticsAPI);
   const {
     menuItems,
     menuCallback
   } = convertToDropdownItems(dragMenuConfig);
+  const handleSubMenuRef = ref => {
+    const parent = closestElement(editorView.dom, '.fabric-editor-popup-scroll-parent');
+    if (!(parent && ref)) {
+      return;
+    }
+    const boundariesRect = parent.getBoundingClientRect();
+    const rect = ref.getBoundingClientRect();
+    if (rect.left + rect.width > boundariesRect.width) {
+      ref.style.left = `-${rect.width}px`;
+    }
+  };
+  const setColor = color => {
+    const {
+      targetCellPosition
+    } = getTablePluginState(editorView.state);
+    const {
+      state,
+      dispatch
+    } = editorView;
+    setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, color, targetCellPosition)(state, dispatch);
+    closeMenu();
+    setIsSubmenuOpen(false);
+  };
+  const createBackgroundColorMenuItem = () => {
+    var _node$attrs;
+    const {
+      targetCellPosition
+    } = getTablePluginState(editorView.state);
+    const node = targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
+    const background = hexToEditorBackgroundPaletteColor((node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
+    return {
+      content: 'Background color',
+      value: {
+        name: 'background'
+      },
+      elemBefore: jsx(EditorBackgroundColorIcon, {
+        label: 'background color',
+        size: "medium"
+      }),
+      elemAfter: jsx("div", {
+        className: DropdownMenuSharedCssClassName.SUBMENU,
+        css: dragMenuBackgroundColorStyles
+      }, jsx("div", {
+        css: cellColourPreviewStyles(background),
+        className: ClassName.DRAG_SUBMENU_ICON
+      }), isSubmenuOpen && jsx("div", {
+        className: ClassName.DRAG_SUBMENU,
+        ref: handleSubMenuRef
+      }, jsx(ColorPalette, {
+        cols: 7,
+        onClick: setColor,
+        selectedColor: background,
+        paletteOptions: {
+          palette: cellBackgroundColorPalette,
+          paletteColorTooltipMessages: backgroundPaletteTooltipMessages,
+          hexToPaletteColor: hexToEditorBackgroundPaletteColor
+        }
+      })))
+    };
+  };
+  const toggleHeaderColumn = () => {
+    toggleHeaderColumnWithAnalytics(editorAnalyticsAPI)(state, dispatch);
+  };
+  const toggleHeaderRow = () => {
+    toggleHeaderRowWithAnalytics(editorAnalyticsAPI)(state, dispatch);
+  };
+  const toggleRowNumbers = () => {
+    toggleNumberColumnWithAnalytics(editorAnalyticsAPI)(state, dispatch);
+  };
+  const createhHeaderRowColumnMenuItem = direction => {
+    return direction === 'column' ? {
+      content: 'Header column',
+      value: {
+        name: 'header_column'
+      },
+      elemAfter: jsx("div", {
+        css: toggleStyles
+      }, jsx(Toggle, {
+        id: "toggle-header-column",
+        onChange: toggleHeaderColumn,
+        isChecked: checkIfHeaderColumnEnabled(selection)
+      }))
+    } : {
+      content: 'Header row',
+      value: {
+        name: 'header_row'
+      },
+      elemAfter: jsx("div", {
+        css: toggleStyles
+      }, jsx(Toggle, {
+        id: "toggle-header-row",
+        onChange: toggleHeaderRow,
+        isChecked: checkIfHeaderRowEnabled(selection)
+      }))
+    };
+  };
+  const createRowNumbersMenuItem = () => {
+    return {
+      content: 'Row numbers',
+      value: {
+        name: 'row_numbers'
+      },
+      elemAfter: jsx("div", {
+        css: toggleStyles
+      }, jsx(Toggle, {
+        id: "toggle-row-numbers",
+        onChange: toggleRowNumbers,
+        isChecked: checkIfNumberColumnEnabled(selection)
+      }))
+    };
+  };
 
   /**
    * This function is to check if the menu should be closed or not.
-   * As when continously clicking on drag handle on different rows/columns,
+   * As when continously clicking on tyle handle on different rows/columns,
    * should open the menu corresponding to the position of the drag handle.
    * @returns true when the menu should be closed, false otherwise
    */
@@ -119,13 +247,34 @@ export const DragMenu = ({
   }) => {
     var _menuCallback$item$va;
     (_menuCallback$item$va = menuCallback[item.value.name]) === null || _menuCallback$item$va === void 0 ? void 0 : _menuCallback$item$va.call(menuCallback, state, dispatch);
-    closeMenu();
+    switch (item.value.name) {
+      case 'header_column':
+        toggleHeaderColumn();
+        break;
+      case 'header_row':
+        toggleHeaderRow();
+        break;
+      case 'row_numbers':
+        toggleRowNumbers();
+        break;
+      default:
+        break;
+    }
+    if (['header_column', 'header_row', 'row_numbers', 'background'].indexOf(item.value.name) <= -1) {
+      closeMenu();
+    }
   };
   const handleItemMouseEnter = ({
     item
   }) => {
     var _item$value$name;
-    if (!selectionRect || !((_item$value$name = item.value.name) !== null && _item$value$name !== void 0 && _item$value$name.startsWith('delete'))) {
+    if (!selectionRect) {
+      return;
+    }
+    if (item.value.name === 'background' && !isSubmenuOpen) {
+      setIsSubmenuOpen(true);
+    }
+    if (!((_item$value$name = item.value.name) !== null && _item$value$name !== void 0 && _item$value$name.startsWith('delete'))) {
       return;
     }
     (item.value.name === 'delete_column' ? hoverColumns(getSelectedColumnIndexes(selectionRect), true) : hoverRows(getSelectedRowIndexes(selectionRect), true))(state, dispatch);
@@ -133,6 +282,9 @@ export const DragMenu = ({
   const handleItemMouseLeave = ({
     item
   }) => {
+    if (item.value.name === 'background' && isSubmenuOpen) {
+      setIsSubmenuOpen(false);
+    }
     if (['sort_column_asc', 'sort_column_desc', 'delete_column', 'delete_row'].indexOf(item.value.name) > -1) {
       clearHoverSelection()(state, dispatch);
     }
@@ -140,6 +292,24 @@ export const DragMenu = ({
   if (!menuItems) {
     return null;
   }
+  if (allowBackgroundColor && getBooleanFF('platform.editor.table.new-cell-context-menu-styling')) {
+    menuItems[0].items.unshift(createBackgroundColorMenuItem());
+  }
+
+  // If first row, add toggle for Hearder row, default is true
+  // If first column, add toggle for Header column, default is false
+  if (getBooleanFF('platform.editor.table.new-cell-context-menu-styling') && index === 0) {
+    menuItems.push({
+      items: [createhHeaderRowColumnMenuItem(direction)]
+    });
+  }
+
+  // All rows, add toggle for numbered rows, default is false
+  if (getBooleanFF('platform.editor.table.new-cell-context-menu-styling') && direction === 'row') {
+    index === 0 ? menuItems[menuItems.length - 1].items.push(createRowNumbersMenuItem()) : menuItems.push({
+      items: [createRowNumbersMenuItem()]
+    });
+  }
   return jsx(DropdownMenu, {
     mountTo: mountPoint
     //This needs be removed when the a11y is completely handled

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

@@ -17,7 +17,8 @@ const FloatingDragMenu = ({
   getEditorContainerWidth,
   canDrag,
   editorAnalyticsAPI,
-  stickyHeaders
+  stickyHeaders,
+  pluginConfig
 }) => {
   if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
     return null;
@@ -56,7 +57,8 @@ const FloatingDragMenu = ({
     targetCellPosition: targetCellPosition,
     getEditorContainerWidth: getEditorContainerWidth,
     canDrag: canDrag,
-    editorAnalyticsAPI: editorAnalyticsAPI
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    pluginConfig: pluginConfig
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

package/dist/es2019/ui/FloatingDragMenu/styles.js

@@ -0,0 +1,62 @@
+import { css } from '@emotion/react';
+import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
+import { N60A, N90 } from '@atlaskit/theme/colors';
+import { TableCssClassName as ClassName } from '../../types';
+import { dragMenuDropdownWidth } from '../consts';
+export const cellColourPreviewStyles = selectedColor => css`
+  &::before {
+    background: ${selectedColor};
+  }
+`;
+export const dragMenuBackgroundColorStyles = css`
+  .${ClassName.DRAG_SUBMENU} {
+    border-radius: ${"var(--ds-border-radius, 3px)"};
+    background: ${"var(--ds-surface-overlay, white)"};
+    box-shadow: ${`var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`})`};
+    display: block;
+    position: absolute;
+    top: 0;
+    left: ${dragMenuDropdownWidth}px;
+    padding: ${"var(--ds-space-100, 8px)"};
+
+    > div {
+      padding: 0;
+    }
+  }
+
+  .${ClassName.DRAG_SUBMENU_ICON} {
+    display: flex;
+
+    &::before {
+      content: '';
+      display: block;
+      border: 1px solid ${tableBackgroundBorderColor};
+      border-radius: ${"var(--ds-border-radius, 3px)"};
+      width: 14px;
+      height: 14px;
+    }
+
+    &::after {
+      content: '›';
+      margin-left: ${"var(--ds-space-050, 4px)"};
+      line-height: 14px;
+      color: ${`var(--ds-icon, ${N90})`};
+    }
+  }
+`;
+export const toggleStyles = css`
+  display: flex;
+  input[type='checkbox'] {
+    width: 30px;
+    height: 14px;
+    pointer-events: initial;
+    cursor: pointer;
+  }
+  > label {
+    margin: 0px;
+    pointer-events: none;
+    > span {
+      pointer-events: none;
+    }
+  }
+`;

package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -150,7 +150,7 @@ export const ColumnControls = ({
 
     // this indexes are used to calculate the drag and drop source
     const indexes = isColumnsSelected ? isHover ? colIndexes : selectedColIndexes : colIndexes;
-    return showCondition && /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       key: type,
       style: {
         gridColumn: isSelecting ? selectedColumnPosition : gridColumnPosition,
@@ -162,7 +162,7 @@ export const ColumnControls = ({
         zIndex: 99
       },
       "data-column-control-index": hoveredCell.colIndex,
-      "data-testid": 'table-floating-column-control'
+      "data-testid": `table-floating-column-${isSelecting ? selectedColIndexes[0] : colIndex}-drag-handle`
     }, /*#__PURE__*/React.createElement(DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "column",

package/dist/es2019/ui/TableFloatingControls/RowControls/DragControls.js

@@ -130,7 +130,7 @@ const DragControlsComponent = ({
     const currentSelectionAppearance = isRowsSelected ? isInDanger ? 'danger' : 'selected' : hoveredAppearance;
     const isSelecting = isRowsSelected && !isHover;
     const indexes = isRowsSelected ? isHover ? rowIndexes : selectedRowIndexes : rowIndexes;
-    return showCondition && /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       key: type,
       style: {
         gridRow: isSelecting ? selectedRowPosition : gridRowPosition,
@@ -140,7 +140,7 @@ const DragControlsComponent = ({
         position: 'relative',
         right: '-0.5px'
       },
-      "data-testid": 'table-floating-row-drag-handle'
+      "data-testid": `table-floating-row-${isSelecting ? selectedRowIndexes[0] : rowIndex}-drag-handle`
     }, /*#__PURE__*/React.createElement(DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "row",

package/dist/es2019/ui/consts.js

@@ -1,5 +1,6 @@
 import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { akEditorTableBorder, akEditorTableBorderSelected, akEditorTableCellBlanketDeleted, akEditorTableCellBlanketSelected, akEditorTableHeaderCellBackground, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B200, N0, N20, N200, N20A, N300, R300, R400, R75 } from '@atlaskit/theme/colors';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
 
@@ -49,7 +50,7 @@ export const resizeHandlerAreaWidth = RESIZE_HANDLE_AREA_DECORATION_GAP / 3;
 export const resizeLineWidth = 2;
 export const resizeHandlerZIndex = columnControlsZIndex + akRichMediaResizeZIndex;
 export const contextualMenuTriggerSize = 16;
-export const contextualMenuDropdownWidth = 180;
+export const contextualMenuDropdownWidth = getBooleanFF('platform.editor.table.drag-and-drop') ? 250 : 180;
 export const stickyRowZIndex = resizeHandlerZIndex + 2;
 export const stickyRowOffsetTop = 8;
 export const stickyHeaderBorderBottomWidth = 1;