@atlaskit/editor-plugin-table 5.3.13 → 5.3.14

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/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/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,
@@ -330,7 +331,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             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, {
+          }), 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

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

@@ -68,6 +68,9 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
   CONTROLS_INSERT_LINE: "".concat(tablePrefixSelector, "-controls__insert-line"),
   CONTROLS_BUTTON_OVERLAY: "".concat(tablePrefixSelector, "-controls__button-overlay"),
   LAYOUT_BUTTON: "".concat(tablePrefixSelector, "-layout-button"),
+  DRAG_CONTROLS_INSERT_BUTTON: "".concat(tablePrefixSelector, "-controls__drag-insert-button"),
+  DRAG_CONTROLS_INSERT_BUTTON_INNER: "".concat(tablePrefixSelector, "-controls__drag-insert-button-inner"),
+  DRAG_CONTROLS_INSERT_BUTTON_WRAP: "".concat(tablePrefixSelector, "-controls__drag-insert-button-wrap"),
   CONTROLS_INSERT_MARKER: "".concat(tablePrefixSelector, "-controls__insert-marker"),
   CONTROLS_INSERT_COLUMN: "".concat(tablePrefixSelector, "-controls__insert-column"),
   CONTROLS_INSERT_ROW: "".concat(tablePrefixSelector, "-controls__insert-row"),
@@ -80,8 +83,12 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
   CORNER_CONTROLS_INSERT_COLUMN_MARKER: "".concat(tablePrefixSelector, "-corner-controls__insert-column-marker"),
   CONTROLS_CORNER_BUTTON: "".concat(tablePrefixSelector, "-corner-button"),
   /** Controls with drag handle */
-  COLUMN_CONTROLS_WITH_DRAG: "".concat(tablePrefixSelector, "-column-controls-with-drag"),
-  ROW_CONTROLS_WITH_DRAG: "".concat(tablePrefixSelector, "-row-controls-with-drag"),
+  DRAG_ROW_CONTROLS: "".concat(tablePrefixSelector, "-drag-row-controls"),
+  DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER: "".concat(tablePrefixSelector, "-drag-row-floating-insert-dot-wrapper"),
+  DRAG_ROW_FLOATING_INSERT_DOT: "".concat(tablePrefixSelector, "-drag-row-floating-insert-dot"),
+  DRAG_COLUMN_CONTROLS: "".concat(tablePrefixSelector, "-drag-column-controls"),
+  DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER: "".concat(tablePrefixSelector, "-drag-columns-floating-insert-dot-wrapper"),
+  DRAG_COLUMN_FLOATING_INSERT_DOT: "".concat(tablePrefixSelector, "-drag-columns-floating-insert-dot"),
   DRAG_HANDLE_BUTTON_CONTAINER: "".concat(tablePrefixSelector, "-drag-handle-button-container"),
   /** Other classes */
   NUMBERED_COLUMN: "".concat(tablePrefixSelector, "-numbered-column"),

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { dragMenuDropdownWidth } from '../consts';
 import { DragMenu } from './DragMenu';
 var FloatingDragMenu = function FloatingDragMenu(_ref) {
@@ -23,10 +24,11 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
   if (!targetCellRef) {
     return null;
   }
-
+  var tableMap = tableNode ? TableMap.get(tableNode) : undefined;
+  var offset = direction === 'row' ? [7, 0] : index === ((tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) || 1) - 1 ? [14, 0] : [-14, 0];
   // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
   return /*#__PURE__*/React.createElement(Popup, {
-    alignX: "left",
+    alignX: direction === 'row' ? 'left' : 'center',
     alignY: "top",
     target: targetCellRef,
     mountTo: mountPoint,
@@ -38,7 +40,7 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     ,
     zIndex: akEditorFloatingOverlapPanelZIndex,
     forcePlacement: true,
-    offset: [7, 0],
+    offset: offset,
     stick: true
   }, /*#__PURE__*/React.createElement(DragMenu, {
     editorView: editorView,

package/dist/esm/plugins/table/ui/FloatingInsertButton/InsertButton.js

@@ -1,3 +1,5 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 import React from 'react';
 import { injectIntl } from 'react-intl-next';
 import { addColumnAfter, addRowAfter, ToolTipContent } from '@atlaskit/editor-common/keymaps';
@@ -23,7 +25,7 @@ var getToolbarSize = function getToolbarSize(tableRef) {
   }
   return tableToolbarSize;
 };
-var getInsertLineWidth = function getInsertLineWidth(tableRef) {
+var getInsertLineWidth = function getInsertLineWidth(tableRef, isDragAndDropEnabled) {
   // The line gets width 100% from the table,
   // but since we have an overflow on the left,
   // we should add an offset to make up for it.
@@ -34,22 +36,68 @@ var getInsertLineWidth = function getInsertLineWidth(tableRef) {
   var _ref = parentElement,
     scrollLeft = _ref.scrollLeft;
   var diff = offsetWidth - parentOffsetWidth;
-  var toolbarSize = getToolbarSize(tableRef);
+  var toolbarSize = isDragAndDropEnabled ? 0 : getToolbarSize(tableRef);
   return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + LINE_OFFSET;
 };
 var tooltipMessageByType = function tooltipMessageByType(type) {
   return type === 'row' ? tableMessages.insertRow : tableMessages.insertColumn;
 };
-var InsertButton = function InsertButton(_ref2) {
+export var InsertButtonForDragAndDrop = function InsertButtonForDragAndDrop(_ref2) {
   var onMouseDown = _ref2.onMouseDown,
     tableRef = _ref2.tableRef,
-    direction = _ref2.direction,
+    type = _ref2.type,
     formatMessage = _ref2.intl.formatMessage,
     hasStickyHeaders = _ref2.hasStickyHeaders;
   var content = /*#__PURE__*/React.createElement(Tooltip, {
     content: /*#__PURE__*/React.createElement(ToolTipContent, {
-      description: formatMessage(tooltipMessageByType(direction)),
-      keymap: direction === 'row' ? addRowAfter : addColumnAfter
+      description: formatMessage(tooltipMessageByType(type)),
+      keymap: type === 'row' ? addRowAfter : addColumnAfter
+    }),
+    position: "top"
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: ClassName.DRAG_CONTROLS_INSERT_BUTTON,
+    onMouseDown: onMouseDown
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "10",
+    height: "10",
+    viewBox: "0 0 10 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.41667 4.58333V2.91667C5.41667 2.80616 5.37277 2.70018 5.29463 2.62204C5.21649 2.5439 5.11051 2.5 5 2.5C4.88949 2.5 4.78351 2.5439 4.70537 2.62204C4.62723 2.70018 4.58333 2.80616 4.58333 2.91667V4.58333H2.91667C2.80616 4.58333 2.70018 4.62723 2.62204 4.70537C2.5439 4.78351 2.5 4.88949 2.5 5C2.5 5.11051 2.5439 5.21649 2.62204 5.29463C2.70018 5.37277 2.80616 5.41667 2.91667 5.41667H4.58333V7.08333C4.58333 7.19384 4.62723 7.29982 4.70537 7.37796C4.78351 7.4561 4.88949 7.5 5 7.5C5.11051 7.5 5.21649 7.4561 5.29463 7.37796C5.37277 7.29982 5.41667 7.19384 5.41667 7.08333V5.41667H7.08333C7.19384 5.41667 7.29982 5.37277 7.37796 5.29463C7.4561 5.21649 7.5 5.11051 7.5 5C7.5 4.88949 7.4561 4.78351 7.37796 4.70537C7.29982 4.62723 7.19384 4.58333 7.08333 4.58333H5.41667Z",
+    fill: "currentColor"
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: ClassName.CONTROLS_INSERT_LINE,
+    style: type === 'row' ? {
+      width: getInsertLineWidth(tableRef, true),
+      left: '14px'
+    } : {
+      height: getInsertLineHeight(tableRef, hasStickyHeaders) - 11
+    }
+  })));
+  var floatingButtonClassName = type === 'column' ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
+  return /*#__PURE__*/React.createElement("div", {
+    className: floatingButtonClassName
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(ClassName.CONTROLS_INSERT_BUTTON_WRAP, " ").concat(ClassName.CONTROLS_INSERT_ROW)
+  }, content));
+};
+export var DragAndDropInsertButton = injectIntl(InsertButtonForDragAndDrop);
+var InsertButton = function InsertButton(_ref3) {
+  var onMouseDown = _ref3.onMouseDown,
+    tableRef = _ref3.tableRef,
+    type = _ref3.type,
+    formatMessage = _ref3.intl.formatMessage,
+    hasStickyHeaders = _ref3.hasStickyHeaders;
+  var content = /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement(ToolTipContent, {
+      description: formatMessage(tooltipMessageByType(type)),
+      keymap: type === 'row' ? addRowAfter : addColumnAfter
     }),
     position: "top"
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -66,13 +114,13 @@ var InsertButton = function InsertButton(_ref2) {
     fillRule: "evenodd"
   })))), /*#__PURE__*/React.createElement("div", {
     className: ClassName.CONTROLS_INSERT_LINE,
-    style: direction === 'row' ? {
+    style: type === 'row' ? {
       width: getInsertLineWidth(tableRef)
     } : {
       height: getInsertLineHeight(tableRef, hasStickyHeaders)
     }
   })));
-  var floatingButtonClassName = direction === 'column' ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
+  var floatingButtonClassName = type === 'column' ? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN : ClassName.CONTROLS_FLOATING_BUTTON_ROW;
   return /*#__PURE__*/React.createElement("div", {
     className: floatingButtonClassName
   }, /*#__PURE__*/React.createElement("div", {

package/dist/esm/plugins/table/ui/FloatingInsertButton/getPopupOptions.js

@@ -6,9 +6,11 @@ import { tableInsertColumnButtonOffset, tableInsertColumnButtonSize, tableToolba
 var HORIZONTAL_ALIGN_COLUMN_BUTTON = -(tableInsertColumnButtonSize / 2);
 var HORIZONTAL_ALIGN_NUMBERED_COLUMN_BUTTON = HORIZONTAL_ALIGN_COLUMN_BUTTON + akEditorTableNumberColumnWidth;
 var VERTICAL_ALIGN_COLUMN_BUTTON = tableToolbarSize + tableInsertColumnButtonOffset;
+var VERTICAL_ALIGN_COLUMN_BUTTON_DRAG = tableInsertColumnButtonOffset;
 var HORIZONTAL_ALIGN_ROW_BUTTON = -(tableToolbarSize + tableInsertColumnButtonOffset + tableInsertColumnButtonSize);
+var HORIZONTAL_ALIGN_ROW_BUTTON_DRAG = -18;
 var VERTICAL_ALIGN_ROW_BUTTON = tableInsertColumnButtonSize / 2;
-function getRowOptions(index) {
+function getRowOptions(index, isDragAndDropEnabled) {
   var defaultOptions = {
     alignX: 'left',
     alignY: 'bottom',
@@ -25,16 +27,16 @@ function getRowOptions(index) {
     onPositionCalculated: function onPositionCalculated(position) {
       return _objectSpread(_objectSpread({}, position), {}, {
         // Left position should be always the offset (To place in the correct position even if the table has overflow).
-        left: HORIZONTAL_ALIGN_ROW_BUTTON
+        left: isDragAndDropEnabled ? HORIZONTAL_ALIGN_ROW_BUTTON_DRAG : HORIZONTAL_ALIGN_ROW_BUTTON
       });
     }
   });
 }
-function getColumnOptions(index, tableContainer, hasNumberedColumns) {
+function getColumnOptions(index, tableContainer, hasNumberedColumns, isDragAndDropEnabled) {
   var options = {
     alignX: 'end',
     alignY: 'top',
-    offset: [HORIZONTAL_ALIGN_COLUMN_BUTTON, VERTICAL_ALIGN_COLUMN_BUTTON],
+    offset: [HORIZONTAL_ALIGN_COLUMN_BUTTON, isDragAndDropEnabled ? VERTICAL_ALIGN_COLUMN_BUTTON_DRAG : VERTICAL_ALIGN_COLUMN_BUTTON],
     // :: (position: PopupPosition) -> PopupPosition
     // Limit the InsertButton position to the table container
     // if the left position starts before it
@@ -70,12 +72,12 @@ function getColumnOptions(index, tableContainer, hasNumberedColumns) {
   }
   return options;
 }
-function getPopupOptions(direction, index, hasNumberedColumns, tableContainer) {
+function getPopupOptions(direction, index, hasNumberedColumns, isDragAndDropEnabled, tableContainer) {
   switch (direction) {
     case 'column':
-      return getColumnOptions(index, tableContainer, hasNumberedColumns);
+      return getColumnOptions(index, tableContainer, hasNumberedColumns, isDragAndDropEnabled);
     case 'row':
-      return getRowOptions(index);
+      return getRowOptions(index, isDragAndDropEnabled);
     default:
       return {};
   }

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

@@ -22,7 +22,7 @@ import { insertColumnWithAnalytics, insertRowWithAnalytics } from '../../command
 import { TableCssClassName as ClassName } from '../../types';
 import { checkIfNumberColumnEnabled } from '../../utils';
 import getPopupOptions from './getPopupOptions';
-import InsertButton from './InsertButton';
+import InsertButton, { DragAndDropInsertButton } from './InsertButton';
 export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
   _inherits(FloatingInsertButton, _React$Component);
   var _super = _createSuper(FloatingInsertButton);
@@ -47,6 +47,7 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
         boundariesElement = _this$props.boundariesElement,
         isHeaderColumnEnabled = _this$props.isHeaderColumnEnabled,
         isHeaderRowEnabled = _this$props.isHeaderRowEnabled,
+        isDragAndDropEnabled = _this$props.isDragAndDropEnabled,
         dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent;
       var type = typeof insertColumnButtonIndex !== 'undefined' ? 'column' : typeof insertRowButtonIndex !== 'undefined' ? 'row' : null;
       if (!tableNode || !tableRef || !type) {
@@ -121,10 +122,15 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
         scrollableElement: tableWrapper,
         forcePlacement: true,
         allowOutOfBounds: true
-      }, getPopupOptions(type, index, hasNumberedColumns, tableContainerWrapper), {
+      }, getPopupOptions(type, index, hasNumberedColumns, !!isDragAndDropEnabled, tableContainerWrapper), {
         zIndex: zIndex
-      }), /*#__PURE__*/React.createElement(InsertButton, {
-        direction: type,
+      }), isDragAndDropEnabled ? /*#__PURE__*/React.createElement(DragAndDropInsertButton, {
+        type: type,
+        tableRef: tableRef,
+        onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,
+        hasStickyHeaders: this.props.hasStickyHeaders || false
+      }) : /*#__PURE__*/React.createElement(InsertButton, {
+        type: type,
         tableRef: tableRef,
         onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,
         hasStickyHeaders: this.props.hasStickyHeaders || false