@atlaskit/editor-plugin-table 5.3.12 → 5.3.14

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @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
+
+- [#41846](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41846) [`7fe6ab0832b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7fe6ab0832b) - [ux] Add utility function to create drag menu content and integrate with row control behind platform.editor.table.drag-and-drop FF
+- [#42137](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42137) [`88058fc0fcb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/88058fc0fcb) - ED-20197 moved editor preset and other prod code out of labs
+- Updated dependencies
+
 ## 5.3.12
 
 ### 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

@@ -35,6 +35,7 @@ var _toolbar = require("./toolbar");
 var _FloatingContextualButton = _interopRequireDefault(require("./ui/FloatingContextualButton"));
 var _FloatingContextualMenu = _interopRequireDefault(require("./ui/FloatingContextualMenu"));
 var _FloatingDeleteButton = _interopRequireDefault(require("./ui/FloatingDeleteButton"));
+var _FloatingDragMenu = _interopRequireDefault(require("./ui/FloatingDragMenu"));
 var _FloatingInsertButton = _interopRequireDefault(require("./ui/FloatingInsertButton"));
 var _LayoutButton = _interopRequireDefault(require("./ui/LayoutButton"));
 var _utils3 = require("./utils");
@@ -256,7 +257,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
           var resizingPluginState = _ref13.tableResizingPluginState,
             stickyHeadersState = _ref13.stickyHeadersState,
             tablePluginState = _ref13.tablePluginState,
-            tableWidthPluginState = _ref13.tableWidthPluginState;
+            tableWidthPluginState = _ref13.tableWidthPluginState,
+            dragAndDropState = _ref13.dragAndDropState;
           var state = editorView.state;
           var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
@@ -273,6 +275,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             insertRowButtonIndex = _ref14.insertRowButtonIndex,
             isHeaderColumnEnabled = _ref14.isHeaderColumnEnabled,
             isHeaderRowEnabled = _ref14.isHeaderRowEnabled,
+            isDragAndDropEnabled = _ref14.isDragAndDropEnabled,
             tableWrapperTarget = _ref14.tableWrapperTarget;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? (0, _stickyHeaders.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
@@ -306,6 +309,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             insertRowButtonIndex: insertRowButtonIndex,
             isHeaderColumnEnabled: isHeaderColumnEnabled,
             isHeaderRowEnabled: isHeaderRowEnabled,
+            isDragAndDropEnabled: isDragAndDropEnabled,
             editorView: editorView,
             mountPoint: popupsMountPoint,
             boundariesElement: popupsBoundariesElement,
@@ -324,7 +328,17 @@ var tablesPlugin = function tablesPlugin(_ref) {
             editorAnalyticsAPI: editorAnalyticsAPI,
             getEditorContainerWidth: defaultGetEditorContainerWidth,
             getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
-          }), allowControls && !isResizing && /*#__PURE__*/_react.default.createElement(_FloatingDeleteButton.default, {
+          }), isDragAndDropEnabled && /*#__PURE__*/_react.default.createElement(_FloatingDragMenu.default, {
+            editorView: editorView,
+            mountPoint: popupsMountPoint,
+            boundariesElement: popupsBoundariesElement,
+            tableRef: tableRef,
+            tableNode: tableNode,
+            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 && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/_react.default.createElement(_FloatingDeleteButton.default, {
             editorView: editorView,
             selection: editorView.state.selection,
             tableRef: tableRef,

package/dist/cjs/plugins/table/nodeviews/TableComponent.js

@@ -479,6 +479,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react.default.createElement(_TableFloatingControls.default, {
         editorView: view,
         tableRef: tableRef,
+        tableNode: node,
         tableActive: tableActive,
         hoveredRows: hoveredRows,
         hoveredCell: hoveredCell,
@@ -486,7 +487,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isResizing: isResizing,
         isNumberColumnEnabled: node.attrs.isNumberColumnEnabled,
         isHeaderRowEnabled: isHeaderRowEnabled,
-        isDragAndDropEnabled: options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled,
+        isDragAndDropEnabled: isDragAndDropEnabled,
         ordering: ordering,
         isHeaderColumnEnabled: isHeaderColumnEnabled,
         hasHeaderRow: hasHeaderRow

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/actions.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.DragAndDropActionType = void 0;
 var DragAndDropActionType = exports.DragAndDropActionType = {
   SET_DROP_TARGET: 'SET_DROP_TARGET',
-  CLEAR_DROP_TARGET: 'CLEAR_DROP_TARGET'
+  CLEAR_DROP_TARGET: 'CLEAR_DROP_TARGET',
+  TOGGLE_DRAG_MENU: 'TOGGLE_DRAG_MENU'
 };
 
 // NOTE: This should be a Union of all possible actions

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updatePluginStateDecorations = exports.setDropTarget = exports.moveSource = exports.getDecorations = exports.clearDropTarget = void 0;
+exports.updatePluginStateDecorations = exports.toggleDragMenu = exports.setDropTarget = exports.moveSource = exports.getDecorations = exports.clearDropTarget = void 0;
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _types = require("../../types");
@@ -82,4 +82,25 @@ var moveSource = exports.moveSource = function moveSource(sourceType, sourceInde
     var select = isTableRow ? _utils.selectRow : _utils.selectColumn;
     return select(targetIndex)(newTr);
   });
+};
+var toggleDragMenu = exports.toggleDragMenu = function toggleDragMenu(isDragMenuOpen, direction, index) {
+  return (0, _pluginFactory.createCommand)(function (state) {
+    var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
+      previousOpenState = _getPluginState3.isDragMenuOpen,
+      dragMenuDirection = _getPluginState3.dragMenuDirection,
+      dragMenuIndex = _getPluginState3.dragMenuIndex;
+    if (previousOpenState === isDragMenuOpen) {
+      return false;
+    }
+    return {
+      type: _actions.DragAndDropActionType.TOGGLE_DRAG_MENU,
+      data: {
+        isDragMenuOpen: isDragMenuOpen === undefined ? !previousOpenState : isDragMenuOpen,
+        direction: direction !== null && direction !== void 0 ? direction : dragMenuDirection,
+        index: index !== null && index !== void 0 ? index : dragMenuIndex
+      }
+    };
+  }, function (tr) {
+    return tr.setMeta('addToHistory', false);
+  });
 };

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

@@ -8,9 +8,12 @@ exports.createPlugin = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 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");
+var _actions = require("./actions");
 var _commands = require("./commands");
 var _consts = require("./consts");
 var _pluginFactory2 = require("./plugin-factory");
@@ -21,13 +24,47 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
     state: (0, _pluginFactory2.createPluginState)(dispatch, function (state) {
       return {
         decorationSet: _view.DecorationSet.empty,
-        // TODO: This is example placeholder state. We could use this to track which row/col is currently set as the drop target
-        // This would result in a blue highlight being displayed on the corrisponding row/column to single the drop target location.
         dropTargetType: _consts.DropTargetType.NONE,
-        dropTargetIndex: 0
+        dropTargetIndex: 0,
+        isDragMenuOpen: false,
+        dragMenuIndex: 0
       };
     }),
     key: _pluginKey.pluginKey,
+    appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      var _getTablePluginState = (0, _pluginFactory.getPluginState)(oldState),
+        oldTargetCellPosition = _getTablePluginState.targetCellPosition;
+      var _getTablePluginState2 = (0, _pluginFactory.getPluginState)(newState),
+        newTargetCellPosition = _getTablePluginState2.targetCellPosition;
+      var _getPluginState = (0, _pluginFactory2.getPluginState)(newState),
+        isDragMenuOpen = _getPluginState.isDragMenuOpen,
+        dragMenuIndex = _getPluginState.dragMenuIndex;
+
+      // What's happening here? you asked... In a nutshell;
+      // If the target cell position changes while the drag menu is open then we want to close the drag menu if it has been opened.
+      // This will stop the drag menu from moving around the screen to different row/cols. Too achieve this we need
+      // to check if the new target cell position is pointed at a different cell than what the drag menu was opened on.
+      if (oldTargetCellPosition !== newTargetCellPosition) {
+        if (isDragMenuOpen) {
+          var tr = newState.tr;
+          var action = {
+            type: _actions.DragAndDropActionType.TOGGLE_DRAG_MENU,
+            data: {
+              isDragMenuOpen: false,
+              direction: undefined
+            }
+          };
+          if (newTargetCellPosition !== undefined) {
+            var cells = (0, _utils.getCellsInRow)(dragMenuIndex)(tr.selection);
+            if (cells && cells.length && cells[0].node !== tr.doc.nodeAt(newTargetCellPosition)) {
+              return tr.setMeta(_pluginKey.pluginKey, action);
+            } // else NOP
+          } else {
+            return tr.setMeta(_pluginKey.pluginKey, action);
+          }
+        }
+      }
+    },
     view: function view(editorView) {
       return {
         destroy: (0, _element.monitorForElements)({
@@ -45,13 +82,22 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
             indexes.length !== 1 || !(type === 'table-row' || type === 'table-column')) {
               return false;
             }
-            var _getTablePluginState = (0, _pluginFactory.getPluginState)(editorView.state),
-              tableNode = _getTablePluginState.tableNode;
+            var _getTablePluginState3 = (0, _pluginFactory.getPluginState)(editorView.state),
+              tableNode = _getTablePluginState3.tableNode;
             // If the draggable localId is the same as the current selected table localId then we will allow the monitor
             // 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) {
@@ -67,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
@@ -94,8 +141,8 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventD
     },
     props: {
       decorations: function decorations(state) {
-        var _getPluginState = (0, _pluginFactory2.getPluginState)(state),
-          decorationSet = _getPluginState.decorationSet;
+        var _getPluginState2 = (0, _pluginFactory2.getPluginState)(state),
+          decorationSet = _getPluginState2.decorationSet;
         return decorationSet;
       }
     }

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

@@ -24,6 +24,12 @@ var _default = exports.default = function _default(pluginState, action) {
         dropTargetType: _consts.DropTargetType.NONE,
         dropTargetIndex: 0
       });
+    case _actions.DragAndDropActionType.TOGGLE_DRAG_MENU:
+      return _objectSpread(_objectSpread({}, pluginState), {}, {
+        isDragMenuOpen: action.data.isDragMenuOpen,
+        dragMenuDirection: action.data.direction,
+        dragMenuIndex: action.data.index
+      });
     default:
       return pluginState;
   }

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/DragHandle/index.js

@@ -28,6 +28,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     previewHeight = _ref.previewHeight,
     onMouseOver = _ref.onMouseOver,
     onMouseOut = _ref.onMouseOut,
+    onMouseUp = _ref.onMouseUp,
     onClick = _ref.onClick;
   var dragHandleDivRef = (0, _react.useRef)(null);
   var _useState = (0, _react.useState)(null),
@@ -87,6 +88,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
     "data-testid": "table-floating-column-controls-drag-handle",
     onMouseOver: onMouseOver,
     onMouseOut: onMouseOut,
+    onMouseUp: onMouseUp,
     onClick: onClick
   }, /*#__PURE__*/_react.default.createElement(_icons.DragHandleIcon, null), previewContainer && previewWidth !== undefined && previewHeight !== undefined && /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_DragPreview.DragPreview, {
     direction: direction,

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

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragMenu = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _tableMap = require("@atlaskit/editor-tables/table-map");
+var _commands = require("../../pm-plugins/drag-and-drop/commands");
+var _dragMenu = require("../../utils/drag-menu");
+var _consts = require("../consts");
+var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig) {
+  var menuItems = [];
+  var menuCallback = {};
+  dragMenuConfig.forEach(function (item) {
+    menuItems.push({
+      key: item.id,
+      content: item.title,
+      value: {
+        name: item.id
+      },
+      isDisabled: item.disabled
+    });
+    item.onClick && (menuCallback[item.id] = item.onClick);
+  });
+  return {
+    menuItems: menuItems,
+    menuCallback: menuCallback
+  };
+};
+var DragMenu = exports.DragMenu = function DragMenu(_ref) {
+  var _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'row' : _ref$direction,
+    index = _ref.index,
+    isOpen = _ref.isOpen,
+    editorView = _ref.editorView,
+    tableNode = _ref.tableNode,
+    mountPoint = _ref.mountPoint,
+    boundariesElement = _ref.boundariesElement,
+    scrollableElement = _ref.scrollableElement;
+  var tableMap = tableNode ? _tableMap.TableMap.get(tableNode) : undefined;
+  var dragMenuConfig = (0, _dragMenu.getDragMenuConfig)(direction, tableMap, index);
+  var _convertToDropdownIte = convertToDropdownItems(dragMenuConfig),
+    menuItems = _convertToDropdownIte.menuItems,
+    menuCallback = _convertToDropdownIte.menuCallback;
+  var closeMenu = function closeMenu() {
+    var state = editorView.state,
+      dispatch = editorView.dispatch;
+    (0, _commands.toggleDragMenu)(false)(state, dispatch);
+  };
+  var onMenuItemActivated = function onMenuItemActivated(_ref2) {
+    var _menuCallback$item$va;
+    var item = _ref2.item;
+    (_menuCallback$item$va = menuCallback[item.value.name]) === null || _menuCallback$item$va === void 0 || _menuCallback$item$va.call(menuCallback, editorView.state, editorView.dispatch);
+    closeMenu();
+  };
+  if (!menuItems) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownMenu, {
+    mountTo: mountPoint
+    //This needs be removed when the a11y is completely handled
+    //Disabling key navigation now as it works only partially
+    ,
+    arrowKeyNavigationProviderOptions: {
+      type: _uiMenu.ArrowKeyNavigationType.MENU,
+      disableArrowKeyNavigation: true
+    },
+    items: [{
+      items: menuItems
+    }],
+    isOpen: isOpen,
+    onOpenChange: closeMenu,
+    onItemActivated: onMenuItemActivated,
+    fitWidth: _consts.dragMenuDropdownWidth,
+    boundariesElement: boundariesElement
+  });
+};

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

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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) {
+  var mountPoint = _ref.mountPoint,
+    boundariesElement = _ref.boundariesElement,
+    scrollableElement = _ref.scrollableElement,
+    editorView = _ref.editorView,
+    isOpen = _ref.isOpen,
+    tableRef = _ref.tableRef,
+    tableNode = _ref.tableNode,
+    direction = _ref.direction,
+    index = _ref.index,
+    targetCellPosition = _ref.targetCellPosition;
+  if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
+    return null;
+  }
+  var domAtPos = editorView.domAtPos.bind(editorView);
+  var targetCellRef = (0, _utils.findDomRefAtPos)(targetCellPosition, domAtPos);
+  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: direction === 'row' ? 'left' : 'center',
+    alignY: "top",
+    target: targetCellRef,
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    fitWidth: _consts.dragMenuDropdownWidth
+    // z-index value below is to ensure that this menu is above other floating menu
+    // in table, but below floating dialogs like typeaheads, pickers, etc.
+    ,
+    zIndex: _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
+    forcePlacement: true,
+    offset: offset,
+    stick: true
+  }, /*#__PURE__*/_react.default.createElement(_DragMenu.DragMenu, {
+    editorView: editorView,
+    isOpen: isOpen,
+    boundariesElement: boundariesElement,
+    tableNode: tableNode,
+    direction: direction,
+    index: index
+  }));
+};
+FloatingDragMenu.displayName = 'FloatingDragMenu';
+var _default = exports.default = FloatingDragMenu;

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,13 +43,13 @@ 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,
     type = _ref2.type,
@@ -59,6 +61,52 @@ var InsertButton = function InsertButton(_ref2) {
       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", {
     className: _types.TableCssClassName.CONTROLS_INSERT_BUTTON_INNER
   }, /*#__PURE__*/_react.default.createElement("button", {