@atlaskit/editor-plugin-table 5.3.13 → 5.3.15

package/dist/es2019/plugins/table/ui/common-styles.js

@@ -7,7 +7,7 @@ import { B300, N0, N20A, N300, N40A, R500 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { TableCssClassName as ClassName } from '../types';
 import { columnControlsDecorationHeight, resizeHandlerAreaWidth, resizeLineWidth, rowControlsZIndex, stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableBorderColor, tableBorderDeleteColor, tableBorderRadiusSize, tableBorderSelectedColor, tableCellBackgroundColor, tableCellDeleteColor, tableCellSelectedColor, tableControlsSpacing, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tablePadding, tableScrollbarOffset, tableTextColor, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
-import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle, rowControlsWrapperDotStyle } from './ui-styles';
+import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, dragInsertButtonWrapper, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle, rowControlsWrapperDotStyle } from './ui-styles';
 const cornerControlHeight = tableToolbarSize + 1;
 
 /*
@@ -270,6 +270,8 @@ export const tableStyles = props => {
       ${insertRowButtonWrapper(props)}
     }
 
+    ${dragInsertButtonWrapper(props)}
+
     /* Delete button */
     ${DeleteButton(props)}
     /* Ends Delete button */
@@ -602,12 +604,58 @@ export const tableStyles = props => {
       `)}
     }
 
-    .${ClassName.ROW_CONTROLS_WITH_DRAG} {
+    .${ClassName.DRAG_ROW_CONTROLS} {
       display: grid;
       align-items: center;
       position: absolute;
       left: -4px;
       z-index: ${akEditorUnitZIndex};
+
+      .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER} {
+        align-self: end;
+        position: absolute;
+        height: 100%;
+        width: 24px;
+      }
+
+      .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT} {
+        position: absolute;
+        bottom: -3px;
+        left: 6px;
+        background-color: ${"var(--ds-background-accent-gray-subtler, #C1C7D0)"};
+        height: 4px;
+        width: 4px;
+        border-radius: 50%;
+      }
+    }
+
+    .${ClassName.DRAG_COLUMN_CONTROLS} {
+      .${ClassName.COLUMN_CONTROLS_INNER} {
+        height: 24px;
+        position: absolute;
+        top: ${"var(--ds-space-negative-150, -12px)"};
+        z-index: ${akEditorUnitZIndex};
+      }
+
+      .${ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER} {
+        position: absolute;
+        height: 24px;
+        width: 100%;
+      }
+
+      .${ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT} {
+        background-color: ${"var(--ds-background-accent-gray-subtler, #C1C7D0)"};
+        height: 4px;
+        width: 4px;
+        border-radius: 50%;
+        position: absolute;
+        right: -2px;
+      }
+    }
+
+    .${ClassName.CONTROLS_FLOATING_BUTTON_ROW}
+      .${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER} {
+      bottom: -1px;
     }
 
     .${ClassName.DRAG_HANDLE_BUTTON_CONTAINER} {
@@ -621,10 +669,10 @@ export const tableStyles = props => {
       display: flex;
       justify-content: center;
       align-items: center;
+      outline: none !important;
 
       svg {
         rect {
-          //
           fill: ${"var(--ds-background-accent-gray-subtlest, #F1F2F4)"};
         }
         g {

package/dist/es2019/plugins/table/ui/icons/AddColLeftIcon.js

@@ -0,0 +1,35 @@
+import React from 'react';
+export const AddColLeftIcon = () => /*#__PURE__*/React.createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "currentColor",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("rect", {
+  width: "24",
+  height: "24",
+  transform: "matrix(0 -1 1 0 0 24)",
+  fill: "none",
+  fillOpacity: "0.01"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "12",
+  y: "18",
+  width: "12",
+  height: "3",
+  rx: "0.5",
+  transform: "rotate(-90 12 18)",
+  fill: "currentColor"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "16",
+  y: "18",
+  width: "12",
+  height: "3",
+  rx: "0.5",
+  transform: "rotate(-90 16 18)",
+  fill: "currentColor"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M7 11H5.99C5.72652 11.0026 5.47473 11.1092 5.28935 11.2964C5.10397 11.4837 4.99999 11.7365 5 12C5 12.556 5.444 13 5.99 13H7V14C7 14.2652 7.10536 14.5196 7.29289 14.7071C7.48043 14.8946 7.73478 15 8 15C8.26522 15 8.51957 14.8946 8.70711 14.7071C8.89464 14.5196 9 14.2652 9 14V13H10.01C10.2735 12.9974 10.5253 12.8908 10.7107 12.7036C10.896 12.5163 11 12.2635 11 12C11 11.444 10.556 11 10.01 11H9V10C9 9.73478 8.89464 9.48043 8.70711 9.29289C8.51957 9.10536 8.26522 9 8 9C7.73478 9 7.48043 9.10536 7.29289 9.29289C7.10536 9.48043 7 9.73478 7 10V11Z",
+  fill: "currentColor"
+}));

package/dist/es2019/plugins/table/ui/icons/AddColRightIcon.js

@@ -0,0 +1,35 @@
+import React from 'react';
+export const AddColRightIcon = () => /*#__PURE__*/React.createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("rect", {
+  width: "24",
+  height: "24",
+  transform: "translate(0 24) rotate(-90)",
+  fill: "none",
+  fillOpacity: "0.01"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "9",
+  y: "18",
+  width: "12",
+  height: "3",
+  rx: "0.5",
+  transform: "rotate(-90 9 18)",
+  fill: "currentColor"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "5",
+  y: "18",
+  width: "12",
+  height: "3",
+  rx: "0.5",
+  transform: "rotate(-90 5 18)",
+  fill: "currentColor"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M15 11L13.99 11C13.7265 11.0026 13.4747 11.1092 13.2893 11.2964C13.104 11.4837 13 11.7365 13 12C13 12.556 13.444 13 13.99 13L15 13L15 14C15 14.2652 15.1054 14.5196 15.2929 14.7071C15.4804 14.8946 15.7348 15 16 15C16.2652 15 16.5196 14.8946 16.7071 14.7071C16.8946 14.5196 17 14.2652 17 14L17 13L18.01 13C18.2735 12.9974 18.5253 12.8908 18.7107 12.7036C18.896 12.5163 19 12.2635 19 12C19 11.444 18.556 11 18.01 11L17 11L17 10C17 9.73478 16.8946 9.48043 16.7071 9.29289C16.5196 9.10536 16.2652 9 16 9C15.7348 9 15.4804 9.10536 15.2929 9.29289C15.1054 9.48043 15 9.73478 15 10L15 11Z",
+  fill: "currentColor"
+}));

package/dist/es2019/plugins/table/ui/icons/AddRowAboveIcon.js

@@ -0,0 +1,36 @@
+import React from 'react';
+export const AddRowAboveIcon = () => /*#__PURE__*/React.createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("rect", {
+  width: "24",
+  height: "24",
+  fill: "var(--ds-border-inverse, #FFFFFF)",
+  fillOpacity: "0.01"
+}), /*#__PURE__*/React.createElement("mask", {
+  id: "path-1-inside-1_896_17822",
+  fill: "var(--ds-border-inverse, #FFFFFF)"
+}, /*#__PURE__*/React.createElement("rect", {
+  x: "6",
+  y: "12",
+  width: "12",
+  height: "8",
+  rx: "0.5"
+})), /*#__PURE__*/React.createElement("rect", {
+  x: "6",
+  y: "12",
+  width: "12",
+  height: "8",
+  rx: "0.5",
+  stroke: "currentColor",
+  strokeWidth: "4",
+  mask: "url(#path-1-inside-1_896_17822)"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M13 7V5.99C12.9974 5.72652 12.8908 5.47473 12.7036 5.28935C12.5163 5.10397 12.2635 4.99999 12 5C11.444 5 11 5.444 11 5.99V7H10C9.73478 7 9.48043 7.10536 9.29289 7.29289C9.10536 7.48043 9 7.73478 9 8C9 8.26522 9.10536 8.51957 9.29289 8.70711C9.48043 8.89464 9.73478 9 10 9H11V10.01C11.0026 10.2735 11.1092 10.5253 11.2964 10.7107C11.4837 10.896 11.7365 11 12 11C12.556 11 13 10.556 13 10.01V9H14C14.2652 9 14.5196 8.89464 14.7071 8.70711C14.8946 8.51957 15 8.26522 15 8C15 7.73478 14.8946 7.48043 14.7071 7.29289C14.5196 7.10536 14.2652 7 14 7H13Z",
+  fill: "currentColor"
+}));

package/dist/es2019/plugins/table/ui/icons/AddRowBelowIcon.js

@@ -0,0 +1,31 @@
+import React from 'react';
+export const AddRowBelowIcon = () => /*#__PURE__*/React.createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("mask", {
+  id: "path-1-inside-1_920_47112",
+  fill: "var(--ds-border-inverse, #FFFFFF)"
+}, /*#__PURE__*/React.createElement("rect", {
+  x: "6",
+  y: "4",
+  width: "12",
+  height: "8",
+  rx: "0.5"
+})), /*#__PURE__*/React.createElement("rect", {
+  x: "6",
+  y: "4",
+  width: "12",
+  height: "8",
+  rx: "0.5",
+  stroke: "currentColor",
+  strokeWidth: "4",
+  mask: "url(#path-1-inside-1_920_47112)"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M13 15V13.99C12.9974 13.7265 12.8908 13.4747 12.7036 13.2893C12.5163 13.104 12.2635 13 12 13C11.444 13 11 13.444 11 13.99V15H10C9.73478 15 9.48043 15.1054 9.29289 15.2929C9.10536 15.4804 9 15.7348 9 16C9 16.2652 9.10536 16.5196 9.29289 16.7071C9.48043 16.8946 9.73478 17 10 17H11V18.01C11.0026 18.2735 11.1092 18.5253 11.2964 18.7107C11.4837 18.896 11.7365 19 12 19C12.556 19 13 18.556 13 18.01V17H14C14.2652 17 14.5196 16.8946 14.7071 16.7071C14.8946 16.5196 15 16.2652 15 16C15 15.7348 14.8946 15.4804 14.7071 15.2929C14.5196 15.1054 14.2652 15 14 15H13Z",
+  fill: "currentColor"
+}));

package/dist/es2019/plugins/table/ui/icons/index.js

@@ -1,2 +1,6 @@
 export { DragHandleIcon } from './DragHandleIcon';
-export { DragInMotionIcon } from './DragInMotionIcon';
+export { DragInMotionIcon } from './DragInMotionIcon';
+export { AddRowAboveIcon } from './AddRowAboveIcon';
+export { AddRowBelowIcon } from './AddRowBelowIcon';
+export { AddColLeftIcon } from './AddColLeftIcon';
+export { AddColRightIcon } from './AddColRightIcon';

package/dist/es2019/plugins/table/ui/ui-styles.js

@@ -129,6 +129,28 @@ const InsertButtonHover = () => css`
     cursor: pointer;
   }
 `;
+export const dragInsertButtonWrapper = props => css`
+  .${ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER} {
+    position: absolute;
+    z-index: ${akEditorUnitZIndex + 10};
+    bottom: -5px;
+    left: 3px;
+  }
+  .${ClassName.DRAG_CONTROLS_INSERT_BUTTON} {
+    ${Button(`
+    background: ${"var(--ds-surface-overlay, white)"};
+    color: ${`var(--ds-icon, ${N300})`};
+    border: 1px solid ${"var(--ds-background-accent-gray-subtler, #C1C7D0)"};
+    border-radius: 50%;
+  `)}
+  }
+  .${ClassName.DRAG_CONTROLS_INSERT_BUTTON}:hover {
+    background: ${`var(--ds-background-brand-bold, ${B300})`};
+    border: 1px solid ${`var(--ds-background-brand-bold, ${B300})`};
+    color: ${"var(--ds-icon-inverse, white)"};
+    cursor: pointer;
+  }
+`;
 export const insertColumnButtonWrapper = props => css`
   ${InsertButton()}
   ${InsertButtonHover()}
@@ -299,7 +321,7 @@ export const floatingColumnControls = props => {
       }
     }
 
-    .${ClassName.COLUMN_CONTROLS_WITH_DRAG} {
+    .${ClassName.DRAG_COLUMN_CONTROLS} {
       box-sizing: border-box;
 
       .${ClassName.COLUMN_CONTROLS_INNER} {

package/dist/es2019/plugins/table/utils/dom.js

@@ -10,11 +10,15 @@ export const isInsertRowButton = node => containsClassName(node, ClassName.CONTR
 export const getColumnOrRowIndex = target => [parseInt(target.getAttribute('data-start-index') || '-1', 10), parseInt(target.getAttribute('data-end-index') || '-1', 10)];
 export const isColumnControlsDecorations = node => containsClassName(node, ClassName.COLUMN_CONTROLS_DECORATIONS);
 export const isRowControlsButton = node => containsClassName(node, ClassName.ROW_CONTROLS_BUTTON) || containsClassName(node, ClassName.NUMBERED_COLUMN_BUTTON);
-export const isRowDragControlsButton = node => containsClassName(node, ClassName.ROW_CONTROLS_WITH_DRAG) || closestElement(node, `.${ClassName.ROW_CONTROLS_WITH_DRAG}`);
 export const isResizeHandleDecoration = node => containsClassName(node, ClassName.RESIZE_HANDLE_DECORATION);
 export const isTableControlsButton = node => containsClassName(node, ClassName.CONTROLS_BUTTON) || containsClassName(node, ClassName.ROW_CONTROLS_BUTTON_WRAP);
 export const isTableContainerOrWrapper = node => containsClassName(node, ClassName.TABLE_CONTAINER) || containsClassName(node, ClassName.TABLE_NODE_WRAPPER);
 
+/** drag-and-drop classes */
+export const isRowDragControlsButton = node => containsClassName(node, ClassName.DRAG_ROW_CONTROLS) || closestElement(node, `.${ClassName.DRAG_ROW_CONTROLS}`);
+export const isDragRowFloatingInsertDot = node => containsClassName(node, ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER);
+export const isDragColumnFloatingInsertDot = node => containsClassName(node, ClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER);
+
 /*
  * This function returns which side of a given element the mouse cursor is,
  * using as a base the half of the width by default, for example:

package/dist/es2019/plugins/table/utils/drag-menu.js

@@ -1,38 +1,136 @@
+import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
+import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
+import ArrowDownIcon from '@atlaskit/icon/glyph/arrow-down';
+import ArrowLeftIcon from '@atlaskit/icon/glyph/arrow-left';
+import ArrowRightIcon from '@atlaskit/icon/glyph/arrow-right';
+import ArrowUpIcon from '@atlaskit/icon/glyph/arrow-up';
+import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
+import EditorLayoutThreeEqualIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
+import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import HipchatChevronDoubleDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-down';
+import HipchatChevronDoubleUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-up';
+import { clearMultipleCells, insertColumn, insertRow, sortByColumn } from '../commands';
+import { deleteColumnsCommand } from '../commands/delete';
 import { moveSource } from '../pm-plugins/drag-and-drop/commands';
+import { deleteRows } from '../transforms';
+import { AddColLeftIcon, AddColRightIcon, AddRowAboveIcon, AddRowBelowIcon } from '../ui/icons';
 const canDecrease = (index, min = 0) => index !== undefined && index > min;
 const canIncrease = (index, max = 0) => index !== undefined && index < max;
-export const getDragMenuConfig = (direction, tableMap, index) => {
+export const getDragMenuConfig = (direction, getEditorContainerWidth, tableMap, index, targetCellPosition, selectionRect) => {
+  const addOptions = direction === 'row' ? [{
+    label: 'above',
+    offset: 0,
+    icon: AddRowAboveIcon,
+    keymap: addRowBefore
+  }, {
+    label: 'below',
+    offset: 1,
+    icon: AddRowBelowIcon,
+    keymap: addRowAfter
+  }] : [{
+    label: 'left',
+    offset: 0,
+    icon: AddColLeftIcon,
+    keymap: addColumnBefore
+  }, {
+    label: 'right',
+    offset: 1,
+    icon: AddColRightIcon,
+    keymap: addColumnAfter
+  }];
   const moveOptions = direction === 'row' ? [{
     label: 'up',
     offset: -1,
-    canMove: canDecrease
+    canMove: canDecrease,
+    icon: ArrowUpIcon
   }, {
     label: 'down',
     offset: 1,
     canMove: index => {
       var _tableMap$height;
       return canIncrease(index, ((_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0) - 1);
-    }
+    },
+    icon: ArrowDownIcon
   }] : [{
     label: 'left',
     offset: -1,
-    canMove: canDecrease
+    canMove: canDecrease,
+    icon: ArrowLeftIcon
   }, {
     label: 'right',
     offset: 1,
     canMove: index => {
       var _tableMap$width;
       return canIncrease(index, ((_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0) - 1);
-    }
+    },
+    icon: ArrowRightIcon
   }];
-  return [...moveOptions.map(({
+  const sortOptions = direction === 'column' ? [{
+    label: 'increasing',
+    order: SortOrder.ASC,
+    icon: HipchatChevronDoubleUpIcon
+  }, {
+    label: 'decreasing',
+    order: SortOrder.DESC,
+    icon: HipchatChevronDoubleDownIcon
+  }] : [];
+  return [...addOptions.map(({
     label,
     offset,
-    canMove
+    icon,
+    keymap
+  }) => ({
+    id: `add_${direction}_${label}`,
+    title: `Add ${direction} ${label}`,
+    icon,
+    onClick: (state, dispatch) => {
+      if (direction === 'row') {
+        insertRow(index + offset, true)(state, dispatch);
+      } else {
+        insertColumn(getEditorContainerWidth)(index + offset)(state, dispatch);
+      }
+      return true;
+    },
+    keymap: keymap && tooltip(keymap)
+  })), direction === 'column' ? {
+    id: 'distribute_columns',
+    title: 'Distribute columns',
+    disabled: true,
+    onClick: () => {
+      return false;
+    },
+    icon: EditorLayoutThreeEqualIcon
+  } : undefined, {
+    id: 'clear_cells',
+    title: 'Clear cells',
+    onClick: (state, dispatch) => {
+      clearMultipleCells(targetCellPosition)(state, dispatch);
+      return true;
+    },
+    icon: CrossCircleIcon,
+    keymap: tooltip(backspace)
+  }, {
+    id: `delete_${direction}`,
+    title: `Delete ${direction}`,
+    onClick: (state, dispatch) => {
+      if (direction === 'row') {
+        dispatch === null || dispatch === void 0 ? void 0 : dispatch(deleteRows(selectionRect, false)(state.tr));
+      } else {
+        deleteColumnsCommand(selectionRect)(state, dispatch);
+      }
+      return true;
+    },
+    icon: RemoveIcon
+  }, ...moveOptions.map(({
+    label,
+    offset,
+    canMove,
+    icon
   }) => ({
     id: `move_${direction}_${label}`,
     title: `Move ${direction} ${label}`,
     disabled: !canMove(index),
+    icon,
     onClick: (state, dispatch) => {
       if (canMove(index)) {
         moveSource(`table-${direction}`, index, index + offset)(state, dispatch);
@@ -40,5 +138,17 @@ export const getDragMenuConfig = (direction, tableMap, index) => {
       }
       return false;
     }
-  }))];
+  })), ...sortOptions.map(({
+    label,
+    order,
+    icon
+  }) => ({
+    id: `sort_column_${order}`,
+    title: `Sort ${label}`,
+    icon,
+    onClick: (state, dispatch) => {
+      sortByColumn(index, order)(state, dispatch);
+      return true;
+    }
+  }))].filter(Boolean);
 };

package/dist/es2019/plugins/table/utils/index.js

@@ -2,7 +2,7 @@ export { getSelectedColumnIndexes, getSelectedRowIndexes, normalizeSelection, is
 export { findControlsHoverDecoration, createControlsHoverDecoration, createColumnControlsDecoration, createColumnSelectedDecoration, createCellHoverDecoration, updateDecorations, createResizeHandleDecoration, createColumnInsertLine, createColumnLineResize, createRowInsertLine } from './decoration';
 export { isIsolating, containsHeaderColumn, containsHeaderRow, checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColumnEnabled, isLayoutSupported, getTableWidth, tablesHaveDifferentColumnWidths, tablesHaveDifferentNoOfColumns, isTableNested, anyChildCellMergedAcrossRow, supportedHeaderRow } from './nodes';
 export { unwrapContentFromTable, removeTableFromFirstChild, removeTableFromLastChild, transformSliceToRemoveOpenTable, transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell } from './paste';
-export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowDragControlsButton, isRowControlsButton, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler } from './dom';
+export { isCell, isCornerButton, isInsertRowButton, isColumnControlsDecorations, isTableControlsButton, isTableContainerOrWrapper, isRowDragControlsButton, isRowControlsButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, updateResizeHandles, isResizeHandleDecoration, hasResizeHandler } from './dom';
 export { getColumnsWidths, isColumnDeleteButtonVisible, getColumnDeleteButtonParams, getColumnClassNames } from './column-controls';
 export { getRowHeights, isRowDeleteButtonVisible, getRowDeleteButtonParams, getRowsParams, getRowClassNames, copyPreviousRow } from './row-controls';
 export { getSelectedTableInfo, getSelectedCellInfo } from './analytics';

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

@@ -10,7 +10,7 @@ import { getPluginState } from './pm-plugins/plugin-factory';
 import { getPluginState as getResizePluginState } from './pm-plugins/table-resizing/plugin-factory';
 import { deleteColumns, deleteRows } from './transforms';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from './types';
-import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from './utils';
+import { getColumnOrRowIndex, getMousePositionHorizontalRelativeByElement, getMousePositionVerticalRelativeByElement, getSelectedCellInfo, hasResizeHandler, isCell, isColumnControlsDecorations, isCornerButton, isDragColumnFloatingInsertDot, isDragRowFloatingInsertDot, isInsertRowButton, isResizeHandleDecoration, isRowControlsButton, isTableContainerOrWrapper, isTableControlsButton } from './utils';
 import { getAllowAddColumnCustomStep } from './utils/get-allow-add-column-custom-step';
 var isFocusingCalendar = function isFocusingCalendar(event) {
   return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
@@ -21,12 +21,15 @@ var isFocusingModal = function isFocusingModal(event) {
 var isFocusingFloatingToolbar = function isFocusingFloatingToolbar(event) {
   return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('[role="toolbar"]');
 };
+var isFocusingDragHandles = function isFocusingDragHandles(event) {
+  return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest('button') && event.relatedTarget.getAttribute('draggable') === 'true';
+};
 export var handleBlur = function handleBlur(view, event) {
   var state = view.state,
     dispatch = view.dispatch;
   // IE version check for ED-4665
   // Calendar focus check for ED-10466
-  if (browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event)) {
+  if (browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event) && !isFocusingDragHandles(event)) {
     setEditorFocus(false)(state, dispatch);
   }
   event.preventDefault();
@@ -183,7 +186,7 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
     return false;
   }
   var element = event.target;
-  if (isColumnControlsDecorations(element)) {
+  if (isColumnControlsDecorations(element) || isDragColumnFloatingInsertDot(element)) {
     var state = view.state,
       dispatch = view.dispatch;
     var _getPluginState3 = getPluginState(state),
@@ -197,7 +200,7 @@ export var handleMouseMove = function handleMouseMove(view, event, elementConten
       return showInsertColumnButton(positionColumn)(state, dispatch);
     }
   }
-  if (isRowControlsButton(element)) {
+  if (isRowControlsButton(element) || isDragRowFloatingInsertDot(element)) {
     var _state3 = view.state,
       _dispatch4 = view.dispatch;
     var _getPluginState4 = getPluginState(_state3),

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

@@ -268,8 +268,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             insertRowButtonIndex = _ref14.insertRowButtonIndex,
             isHeaderColumnEnabled = _ref14.isHeaderColumnEnabled,
             isHeaderRowEnabled = _ref14.isHeaderRowEnabled,
-            tableWrapperTarget = _ref14.tableWrapperTarget,
-            isDragAndDropEnabled = _ref14.isDragAndDropEnabled;
+            isDragAndDropEnabled = _ref14.isDragAndDropEnabled,
+            tableWrapperTarget = _ref14.tableWrapperTarget;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
           var LayoutContent = options && !options.tableResizingEnabled && isLayoutSupported(state) && options.breakoutEnabled ? /*#__PURE__*/React.createElement(LayoutButton, {
@@ -302,6 +302,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             insertRowButtonIndex: insertRowButtonIndex,
             isHeaderColumnEnabled: isHeaderColumnEnabled,
             isHeaderRowEnabled: isHeaderRowEnabled,
+            isDragAndDropEnabled: isDragAndDropEnabled,
             editorView: editorView,
             mountPoint: popupsMountPoint,
             boundariesElement: popupsBoundariesElement,
@@ -329,8 +330,9 @@ var tablesPlugin = function tablesPlugin(_ref) {
             targetCellPosition: targetCellPosition,
             direction: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
             index: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
-            isOpen: !!(dragAndDropState !== null && dragAndDropState !== void 0 && dragAndDropState.isDragMenuOpen) && !isResizing
-          }), allowControls && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
+            isOpen: !!(dragAndDropState !== null && dragAndDropState !== void 0 && dragAndDropState.isDragMenuOpen) && !isResizing,
+            getEditorContainerWidth: defaultGetEditorContainerWidth
+          }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,
             tableRef: tableRef,

package/dist/esm/plugins/table/pm-plugins/decorations/plugin.js

@@ -11,7 +11,7 @@ export var getDecorations = function getDecorations(state) {
   return pluginKey.getState(state);
 };
 export var handleDocOrSelectionChanged = function handleDocOrSelectionChanged(tr, decorationSet, oldState, newState) {
-  var _tableWidthPluginKey$, _tableWidthPluginKey$2, _tr$getMeta;
+  var _tableWidthPluginKey$, _tableWidthPluginKey$2;
   var isResizing = (_tableWidthPluginKey$ = tableWidthPluginKey.getState(newState)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
   var wasResizing = (_tableWidthPluginKey$2 = tableWidthPluginKey.getState(oldState)) === null || _tableWidthPluginKey$2 === void 0 ? void 0 : _tableWidthPluginKey$2.resizing;
   var changedResizing = isResizing !== wasResizing;
@@ -19,7 +19,7 @@ export var handleDocOrSelectionChanged = function handleDocOrSelectionChanged(tr
   // Remove column controls when resizing and don't add column decoration controls when DnD enabled
   if (isResizing || getBooleanFF('platform.editor.table.drag-and-drop')) {
     return DecorationSet.empty;
-  } else if (tr.docChanged || tr.selection instanceof CellSelection || changedResizing || ((_tr$getMeta = tr.getMeta(tablePluginKey)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.type) === 'HOVER_CELL') {
+  } else if (tr.docChanged || tr.selection instanceof CellSelection || changedResizing) {
     return buildColumnControlsDecorations({
       decorationSet: decorationSet,
       tr: tr
@@ -42,16 +42,12 @@ export var createPlugin = function createPlugin() {
         return DecorationSet.empty;
       },
       apply: function apply(tr, decorationSet, oldState, newState) {
-        var _tablePluginKey$getSt, _tablePluginKey$getSt2;
         var pluginState = decorationSet;
         var meta = tr.getMeta(tablePluginKey);
-        var previousHover = (_tablePluginKey$getSt = tablePluginKey.getState(oldState)) === null || _tablePluginKey$getSt === void 0 ? void 0 : _tablePluginKey$getSt.hoveredCell;
-        var newHover = (_tablePluginKey$getSt2 = tablePluginKey.getState(newState)) === null || _tablePluginKey$getSt2 === void 0 ? void 0 : _tablePluginKey$getSt2.hoveredCell;
-        var changedCellHover = (previousHover === null || previousHover === void 0 ? void 0 : previousHover.colIndex) !== (newHover === null || newHover === void 0 ? void 0 : newHover.colIndex) || (previousHover === null || previousHover === void 0 ? void 0 : previousHover.rowIndex) !== (newHover === null || newHover === void 0 ? void 0 : newHover.rowIndex);
         if (meta && meta.data && meta.data.decorationSet) {
           pluginState = meta.data.decorationSet;
         }
-        if (tr.docChanged || tr.selectionSet || tr.getMeta(tableWidthPluginKey) || changedCellHover) {
+        if (tr.docChanged || tr.selectionSet || tr.getMeta(tableWidthPluginKey)) {
           pluginState = pluginState.map(tr.mapping, tr.doc);
           return handleDocOrSelectionChanged(tr, pluginState, oldState, newState);
         }

package/dist/esm/plugins/table/pm-plugins/decorations/utils/column-controls.js

@@ -4,7 +4,6 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { TableDecorations } from '../../../types';
 import { createColumnControlsDecoration, createColumnSelectedDecoration, findColumnControlSelectedDecoration, findControlsHoverDecoration, updateDecorations } from '../../../utils/decoration';
-import { pluginKey as tablePluginKey } from '../../plugin-key';
 import { composeDecorations } from './compose-decorations';
 var isColumnSelected = function isColumnSelected(tr) {
   return tr.selection instanceof CellSelection && tr.selection.isColSelection();
@@ -27,10 +26,9 @@ var maybeUpdateColumnControlsDecoration = function maybeUpdateColumnControlsDeco
   var decorationSet = _ref3.decorationSet,
     tr = _ref3.tr;
   var table = findTable(tr.selection);
-  var meta = tr.getMeta(tablePluginKey);
 
   // avoid re-drawing state if dnd decorations don't need to be updated
-  if (!table && (meta === null || meta === void 0 ? void 0 : meta.type) !== 'HOVER_CELL') {
+  if (!table) {
     return decorationSet;
   }
   return updateDecorations(tr.doc, decorationSet, createColumnControlsDecoration(tr.selection), TableDecorations.COLUMN_CONTROLS_DECORATIONS);

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

@@ -2,6 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { getCellsInRow } from '@atlaskit/editor-tables/utils';
+import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
 import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils/merged-cells';
 import { getPluginState as getTablePluginState } from '../plugin-factory';
@@ -80,7 +81,16 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
             // watch for changes
             return localId === (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.localId);
           },
+          onDragStart: function onDragStart(_ref3) {
+            var location = _ref3.location;
+            autoScroller.start({
+              input: location.current.input
+            });
+          },
           onDrag: function onDrag(event) {
+            autoScroller.updateInput({
+              input: event.location.current.input
+            });
             var data = getDraggableDataFromEvent(event);
             // If no data can be found then it's most like we do not want to perform any drag actions
             if (!data) {
@@ -96,6 +106,7 @@ export var createPlugin = function createPlugin(dispatch, eventDispatcher) {
             setDropTarget(dropTargetType, targetAdjustedIndex)(editorView.state, editorView.dispatch);
           },
           onDrop: function onDrop(event) {
+            autoScroller.stop();
             var data = getDraggableDataFromEvent(event);
 
             // If no data can be found then it's most like we do not want to perform any drop action