@atlaskit/editor-plugin-table 5.3.13 → 5.3.14

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-table
 
+## 5.3.14
+
+### Patch Changes
+
+- [#42038](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42038) [`071533736a8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/071533736a8) - Fixed an bug in the tables where the onBlur was causing the editor has focus flag to be reset to false. This would result in the drag handle disappearing due to the table not being active anymore.
+- [#42188](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42188) [`5b8b565940b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5b8b565940b) - Killed the outline for the drag handle button which appears only in firfox when the button has focus
+- [#42186](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42186) [`20b5f464a2b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/20b5f464a2b) - [ux] Integrate drag menu with column control
+- [#42148](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42148) [`fb0c3a2c035`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fb0c3a2c035) - Add row and column select functionality for table drag controls
+- [#42182](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42182) [`1053f5745d3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1053f5745d3) - Added autoscroller functionality to the table DnD plugin. When dragging rows/cols the table will auto scroll into view when the drag approaches the borders of the table
+
 ## 5.3.13
 
 ### Patch Changes

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

@@ -30,12 +30,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';
+};
 var handleBlur = exports.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 (_utils.browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event)) {
+  if (_utils.browser.ie_version !== 11 && !isFocusingCalendar(event) && !isFocusingModal(event) && !isFocusingFloatingToolbar(event) && !isFocusingDragHandles(event)) {
     (0, _commands.setEditorFocus)(false)(state, dispatch);
   }
   event.preventDefault();
@@ -192,7 +195,7 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, e
     return false;
   }
   var element = event.target;
-  if ((0, _utils3.isColumnControlsDecorations)(element)) {
+  if ((0, _utils3.isColumnControlsDecorations)(element) || (0, _utils3.isDragColumnFloatingInsertDot)(element)) {
     var state = view.state,
       dispatch = view.dispatch;
     var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
@@ -206,7 +209,7 @@ var handleMouseMove = exports.handleMouseMove = function handleMouseMove(view, e
       return (0, _commands.showInsertColumnButton)(positionColumn)(state, dispatch);
     }
   }
-  if ((0, _utils3.isRowControlsButton)(element)) {
+  if ((0, _utils3.isRowControlsButton)(element) || (0, _utils3.isDragRowFloatingInsertDot)(element)) {
     var _state3 = view.state,
       _dispatch4 = view.dispatch;
     var _getPluginState4 = (0, _pluginFactory.getPluginState)(_state3),

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

@@ -275,8 +275,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 ? (0, _stickyHeaders.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
           var LayoutContent = options && !options.tableResizingEnabled && (0, _utils3.isLayoutSupported)(state) && options.breakoutEnabled ? /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
@@ -309,6 +309,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             insertRowButtonIndex: insertRowButtonIndex,
             isHeaderColumnEnabled: isHeaderColumnEnabled,
             isHeaderRowEnabled: isHeaderRowEnabled,
+            isDragAndDropEnabled: isDragAndDropEnabled,
             editorView: editorView,
             mountPoint: popupsMountPoint,
             boundariesElement: popupsBoundariesElement,
@@ -337,7 +338,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.default.createElement(_FloatingDeleteButton.default, {
+          }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/_react.default.createElement(_FloatingDeleteButton.default, {
             editorView: editorView,
             selection: editorView.state.selection,
             tableRef: tableRef,

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

@@ -17,7 +17,7 @@ var getDecorations = exports.getDecorations = function getDecorations(state) {
   return pluginKey.getState(state);
 };
 var handleDocOrSelectionChanged = exports.handleDocOrSelectionChanged = function handleDocOrSelectionChanged(tr, decorationSet, oldState, newState) {
-  var _tableWidthPluginKey$, _tableWidthPluginKey$2, _tr$getMeta;
+  var _tableWidthPluginKey$, _tableWidthPluginKey$2;
   var isResizing = (_tableWidthPluginKey$ = _tableWidth.pluginKey.getState(newState)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
   var wasResizing = (_tableWidthPluginKey$2 = _tableWidth.pluginKey.getState(oldState)) === null || _tableWidthPluginKey$2 === void 0 ? void 0 : _tableWidthPluginKey$2.resizing;
   var changedResizing = isResizing !== wasResizing;
@@ -25,7 +25,7 @@ var handleDocOrSelectionChanged = exports.handleDocOrSelectionChanged = function
   // Remove column controls when resizing and don't add column decoration controls when DnD enabled
   if (isResizing || (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.drag-and-drop')) {
     return _view.DecorationSet.empty;
-  } else if (tr.docChanged || tr.selection instanceof _cellSelection.CellSelection || changedResizing || ((_tr$getMeta = tr.getMeta(_pluginKey.pluginKey)) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.type) === 'HOVER_CELL') {
+  } else if (tr.docChanged || tr.selection instanceof _cellSelection.CellSelection || changedResizing) {
     return (0, _utils.buildColumnControlsDecorations)({
       decorationSet: decorationSet,
       tr: tr
@@ -48,16 +48,12 @@ var createPlugin = exports.createPlugin = function createPlugin() {
         return _view.DecorationSet.empty;
       },
       apply: function apply(tr, decorationSet, oldState, newState) {
-        var _tablePluginKey$getSt, _tablePluginKey$getSt2;
         var pluginState = decorationSet;
         var meta = tr.getMeta(_pluginKey.pluginKey);
-        var previousHover = (_tablePluginKey$getSt = _pluginKey.pluginKey.getState(oldState)) === null || _tablePluginKey$getSt === void 0 ? void 0 : _tablePluginKey$getSt.hoveredCell;
-        var newHover = (_tablePluginKey$getSt2 = _pluginKey.pluginKey.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(_tableWidth.pluginKey) || changedCellHover) {
+        if (tr.docChanged || tr.selectionSet || tr.getMeta(_tableWidth.pluginKey)) {
           pluginState = pluginState.map(tr.mapping, tr.doc);
           return handleDocOrSelectionChanged(tr, pluginState, oldState, newState);
         }

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

@@ -8,7 +8,6 @@ var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _types = require("../../../types");
 var _decoration = require("../../../utils/decoration");
-var _pluginKey = require("../../plugin-key");
 var _composeDecorations = require("./compose-decorations");
 // @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
 
@@ -33,10 +32,9 @@ var maybeUpdateColumnControlsDecoration = function maybeUpdateColumnControlsDeco
   var decorationSet = _ref3.decorationSet,
     tr = _ref3.tr;
   var table = (0, _utils.findTable)(tr.selection);
-  var meta = tr.getMeta(_pluginKey.pluginKey);
 
   // 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 (0, _decoration.updateDecorations)(tr.doc, decorationSet, (0, _decoration.createColumnControlsDecoration)(tr.selection), _types.TableDecorations.COLUMN_CONTROLS_DECORATIONS);

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

@@ -9,6 +9,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _pragmaticDragAndDropReactBeautifulDndAutoscroll = require("@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll");
 var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
 var _mergedCells = require("../../utils/merged-cells");
 var _pluginFactory = require("../plugin-factory");
@@ -87,7 +88,16 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
             // watch for changes
             return localId === (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.localId);
           },
+          onDragStart: function onDragStart(_ref3) {
+            var location = _ref3.location;
+            _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.start({
+              input: location.current.input
+            });
+          },
           onDrag: function onDrag(event) {
+            _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.updateInput({
+              input: event.location.current.input
+            });
             var data = (0, _monitor.getDraggableDataFromEvent)(event);
             // If no data can be found then it's most like we do not want to perform any drag actions
             if (!data) {
@@ -103,6 +113,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
             (0, _commands.setDropTarget)(dropTargetType, targetAdjustedIndex)(editorView.state, editorView.dispatch);
           },
           onDrop: function onDrop(event) {
+            _pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.stop();
             var data = (0, _monitor.getDraggableDataFromEvent)(event);
 
             // If no data can be found then it's most like we do not want to perform any drop action

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

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

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

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _consts = require("../consts");
 var _DragMenu = require("./DragMenu");
 var FloatingDragMenu = function FloatingDragMenu(_ref) {
@@ -30,10 +31,11 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
   if (!targetCellRef) {
     return null;
   }
-
+  var tableMap = tableNode ? _tableMap.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.default.createElement(_ui.Popup, {
-    alignX: "left",
+    alignX: direction === 'row' ? 'left' : 'center',
     alignY: "top",
     target: targetCellRef,
     mountTo: mountPoint,
@@ -45,7 +47,7 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     ,
     zIndex: _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
     forcePlacement: true,
-    offset: [7, 0],
+    offset: offset,
     stick: true
   }, /*#__PURE__*/_react.default.createElement(_DragMenu.DragMenu, {
     editorView: editorView,

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.InsertButtonForDragAndDrop = exports.DragAndDropInsertButton = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
@@ -15,6 +15,8 @@ var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _types = require("../../types");
 var _consts = require("../consts");
 var _messages = _interopRequireDefault(require("../messages"));
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 var getInsertLineHeight = function getInsertLineHeight(tableRef, hasStickyHeaders) {
   // The line gets height 100% from the table,
   // but since we have an overflow on the left,
@@ -30,7 +32,7 @@ var getToolbarSize = function getToolbarSize(tableRef) {
   }
   return _consts.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.
@@ -41,22 +43,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' ? _messages.default.insertRow : _messages.default.insertColumn;
 };
-var InsertButton = function InsertButton(_ref2) {
+var InsertButtonForDragAndDrop = exports.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.default.createElement(_tooltip.default, {
     content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
-      description: formatMessage(tooltipMessageByType(direction)),
-      keymap: direction === 'row' ? _keymaps.addRowAfter : _keymaps.addColumnAfter
+      description: formatMessage(tooltipMessageByType(type)),
+      keymap: type === 'row' ? _keymaps.addRowAfter : _keymaps.addColumnAfter
+    }),
+    position: "top"
+  }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: _types.TableCssClassName.DRAG_CONTROLS_INSERT_BUTTON,
+    onMouseDown: onMouseDown
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    width: "10",
+    height: "10",
+    viewBox: "0 0 10 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.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.default.createElement("div", {
+    className: _types.TableCssClassName.CONTROLS_INSERT_LINE,
+    style: type === 'row' ? {
+      width: getInsertLineWidth(tableRef, true),
+      left: '14px'
+    } : {
+      height: getInsertLineHeight(tableRef, hasStickyHeaders) - 11
+    }
+  })));
+  var floatingButtonClassName = type === 'column' ? _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN : _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: floatingButtonClassName
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(_types.TableCssClassName.CONTROLS_INSERT_BUTTON_WRAP, " ").concat(_types.TableCssClassName.CONTROLS_INSERT_ROW)
+  }, content));
+};
+var DragAndDropInsertButton = exports.DragAndDropInsertButton = (0, _reactIntlNext.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.default.createElement(_tooltip.default, {
+    content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+      description: formatMessage(tooltipMessageByType(type)),
+      keymap: type === 'row' ? _keymaps.addRowAfter : _keymaps.addColumnAfter
     }),
     position: "top"
   }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
@@ -73,13 +121,13 @@ var InsertButton = function InsertButton(_ref2) {
     fillRule: "evenodd"
   })))), /*#__PURE__*/_react.default.createElement("div", {
     className: _types.TableCssClassName.CONTROLS_INSERT_LINE,
-    style: direction === 'row' ? {
+    style: type === 'row' ? {
       width: getInsertLineWidth(tableRef)
     } : {
       height: getInsertLineHeight(tableRef, hasStickyHeaders)
     }
   })));
-  var floatingButtonClassName = direction === 'column' ? _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN : _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW;
+  var floatingButtonClassName = type === 'column' ? _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN : _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: floatingButtonClassName
   }, /*#__PURE__*/_react.default.createElement("div", {

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

@@ -13,9 +13,11 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 var HORIZONTAL_ALIGN_COLUMN_BUTTON = -(_consts.tableInsertColumnButtonSize / 2);
 var HORIZONTAL_ALIGN_NUMBERED_COLUMN_BUTTON = HORIZONTAL_ALIGN_COLUMN_BUTTON + _editorSharedStyles.akEditorTableNumberColumnWidth;
 var VERTICAL_ALIGN_COLUMN_BUTTON = _consts.tableToolbarSize + _consts.tableInsertColumnButtonOffset;
+var VERTICAL_ALIGN_COLUMN_BUTTON_DRAG = _consts.tableInsertColumnButtonOffset;
 var HORIZONTAL_ALIGN_ROW_BUTTON = -(_consts.tableToolbarSize + _consts.tableInsertColumnButtonOffset + _consts.tableInsertColumnButtonSize);
+var HORIZONTAL_ALIGN_ROW_BUTTON_DRAG = -18;
 var VERTICAL_ALIGN_ROW_BUTTON = _consts.tableInsertColumnButtonSize / 2;
-function getRowOptions(index) {
+function getRowOptions(index, isDragAndDropEnabled) {
   var defaultOptions = {
     alignX: 'left',
     alignY: 'bottom',
@@ -32,16 +34,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
@@ -77,12 +79,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/cjs/plugins/table/ui/FloatingInsertButton/index.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -27,7 +28,9 @@ var _commandsWithAnalytics = require("../../commands-with-analytics");
 var _types = require("../../types");
 var _utils4 = require("../../utils");
 var _getPopupOptions = _interopRequireDefault(require("./getPopupOptions"));
-var _InsertButton = _interopRequireDefault(require("./InsertButton"));
+var _InsertButton = _interopRequireWildcard(require("./InsertButton"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
@@ -54,6 +57,7 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
         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) {
@@ -128,10 +132,15 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
         scrollableElement: tableWrapper,
         forcePlacement: true,
         allowOutOfBounds: true
-      }, (0, _getPopupOptions.default)(type, index, hasNumberedColumns, tableContainerWrapper), {
+      }, (0, _getPopupOptions.default)(type, index, hasNumberedColumns, !!isDragAndDropEnabled, tableContainerWrapper), {
         zIndex: zIndex
-      }), /*#__PURE__*/_react.default.createElement(_InsertButton.default, {
-        direction: type,
+      }), isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_InsertButton.DragAndDropInsertButton, {
+        type: type,
+        tableRef: tableRef,
+        onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,
+        hasStickyHeaders: this.props.hasStickyHeaders || false
+      }) : /*#__PURE__*/_react.default.createElement(_InsertButton.default, {
+        type: type,
         tableRef: tableRef,
         onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,
         hasStickyHeaders: this.props.hasStickyHeaders || false

package/dist/cjs/plugins/table/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _commands = require("../../../commands");
+var _commands2 = require("../../../pm-plugins/drag-and-drop/commands");
 var _types = require("../../../types");
 var _utils2 = require("../../../utils");
 var _DragHandle = require("../../DragHandle");
@@ -35,10 +36,13 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     localId = _ref.localId,
     isInDanger = _ref.isInDanger,
     rowHeights = _ref.rowHeights,
-    colWidths = _ref.colWidths;
+    colWidths = _ref.colWidths,
+    hasHeaderColumn = _ref.hasHeaderColumn;
   var widths = (_colWidths$map$join = colWidths === null || colWidths === void 0 ? void 0 : colWidths.map(function (width) {
     return width ? "".concat(width - 1, "px") : '0px';
   }).join(' ')) !== null && _colWidths$map$join !== void 0 ? _colWidths$map$join : '0px';
+  // TODO: reusing getRowsParams here because it's generic enough to work for columns -> rename
+  var columnParams = (0, _utils2.getRowsParams)(colWidths !== null && colWidths !== void 0 ? colWidths : []);
   var colIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.colIndex;
   var selectedColIndexes = getSelectedColumns(editorView.state.selection);
   var gridColumnPosition = (0, _react.useMemo)(function () {
@@ -68,8 +72,13 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
       (0, _commands.clearHoverSelection)()(state, dispatch);
     }
   }, [editorView, tableActive]);
+  var handleMouseUp = (0, _react.useCallback)(function () {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    (0, _commands2.toggleDragMenu)(undefined, 'column', colIndex)(state, dispatch);
+  }, [editorView, colIndex]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _types.TableCssClassName.COLUMN_CONTROLS_WITH_DRAG
+    className: _types.TableCssClassName.DRAG_COLUMN_CONTROLS
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: _types.TableCssClassName.COLUMN_CONTROLS_INNER,
     "data-testid": "table-floating-column-controls",
@@ -77,10 +86,39 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
       gridTemplateColumns: widths,
       marginTop: marginTop
     }
-  }, tableActive && !isResizing && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/_react.default.createElement("div", {
+  }, !isResizing && columnParams.map(function (_ref2, index) {
+    var startIndex = _ref2.startIndex,
+      endIndex = _ref2.endIndex;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        gridColumn: "".concat(index + 1, " / span 1")
+      },
+      "data-start-index": startIndex,
+      "data-end-index": endIndex,
+      className: _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER,
+      contentEditable: false,
+      key: index
+    }, !hasHeaderColumn && index === 0 && /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        left: '0px',
+        right: 'unset'
+      },
+      className: _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT,
+      style: columnParams.length - 1 === index ? {
+        right: '0'
+      } : {}
+    }));
+  }), tableActive && !isResizing && !!hoveredCell && Number.isFinite(hoveredCell.colIndex) && /*#__PURE__*/_react.default.createElement("div", {
     style: {
       gridColumn: gridColumnPosition,
-      marginTop: "-15px"
+      zIndex: 99,
+      display: 'flex',
+      width: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginTop: "var(--ds-space-negative-025, -2px)"
     },
     "data-column-control-index": hoveredCell.colIndex,
     "data-testid": "table-floating-column-control"
@@ -93,7 +131,8 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
     appearance: selectedColIndexes.includes(hoveredCell.colIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
     onClick: handleClick,
     onMouseOver: handleMouseOver,
-    onMouseOut: handleMouseOut
+    onMouseOut: handleMouseOut,
+    onMouseUp: handleMouseUp
   }))));
 };
 var _default = exports.default = ColumnControls;

package/dist/cjs/plugins/table/ui/TableFloatingColumnControls/index.js

@@ -43,6 +43,7 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     setHasDropTargets = _useState4[1];
   var node = getNode();
   var currentNodeLocalId = node === null || node === void 0 ? void 0 : node.attrs.localId;
+  var hasHeaderColumn = (0, _utils.containsHeaderColumn)(node);
   (0, _react.useEffect)(function () {
     var _window;
     if (tableRef && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
@@ -105,11 +106,11 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
   var colWidths = (0, _utils.getColumnsWidths)(editorView);
   var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
   var mountTo = tableRef && (tableRef === null || tableRef === void 0 ? void 0 : tableRef.parentElement) || document.body;
+  if (!tableActive) {
+    return null;
+  }
   return /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement("div", {
     className: _types.TableCssClassName.COLUMN_CONTROLS_WRAPPER,
-    style: {
-      pointerEvents: 'none'
-    },
     "data-testid": "table-floating-column-controls-wrapper"
   }, /*#__PURE__*/_react.default.createElement(_ColumnControls.ColumnControls, {
     editorView: editorView,
@@ -121,7 +122,8 @@ var TableFloatingColumnControls = exports.TableFloatingColumnControls = function
     localId: currentNodeLocalId,
     isInDanger: isInDanger,
     rowHeights: rowHeights,
-    colWidths: colWidths
+    colWidths: colWidths,
+    hasHeaderColumn: hasHeaderColumn
   }), hasDropTargets && /*#__PURE__*/_react.default.createElement(_ColumnDropTargets.ColumnDropTargets, {
     tableRef: tableRef,
     stickyTop: tableActive ? stickyTop : undefined,