@atlaskit/editor-plugin-table 5.3.11 → 5.3.13

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-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
+
+- [#42109](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42109) [`d25ae495fed`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d25ae495fed) - [ux] Adds a fix to keep selection on a dropped row or column.
+
 ## 5.3.11
 
 ### Patch Changes

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,7 +275,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
             insertRowButtonIndex = _ref14.insertRowButtonIndex,
             isHeaderColumnEnabled = _ref14.isHeaderColumnEnabled,
             isHeaderRowEnabled = _ref14.isHeaderRowEnabled,
-            tableWrapperTarget = _ref14.tableWrapperTarget;
+            tableWrapperTarget = _ref14.tableWrapperTarget,
+            isDragAndDropEnabled = _ref14.isDragAndDropEnabled;
           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, {
@@ -324,6 +327,16 @@ var tablesPlugin = function tablesPlugin(_ref) {
             editorAnalyticsAPI: editorAnalyticsAPI,
             getEditorContainerWidth: defaultGetEditorContainerWidth,
             getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
+          }), 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 && !isResizing && /*#__PURE__*/_react.default.createElement(_FloatingDeleteButton.default, {
             editorView: editorView,
             selection: editorView.state.selection,

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/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");
@@ -76,7 +76,31 @@ var moveSource = exports.moveSource = function moveSource(sourceType, sourceInde
     if (sourceIndex === targetIndex) {
       return tr.setMeta('addToHistory', false);
     }
-    var move = sourceType === 'table-row' ? _utils.moveRow : _utils.moveColumn;
-    return move(sourceIndex, targetIndex)(tr);
+    var isTableRow = sourceType === 'table-row';
+    var move = isTableRow ? _utils.moveRow : _utils.moveColumn;
+    var newTr = move(sourceIndex, targetIndex)(tr);
+    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,11 @@ 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 _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 +23,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,8 +81,8 @@ 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);
@@ -94,8 +130,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/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,60 @@
+"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 _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;
+  }
+
+  // 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",
+    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: [7, 0],
+    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

@@ -50,13 +50,13 @@ var tooltipMessageByType = function tooltipMessageByType(type) {
 var InsertButton = function InsertButton(_ref2) {
   var onMouseDown = _ref2.onMouseDown,
     tableRef = _ref2.tableRef,
-    type = _ref2.type,
+    direction = _ref2.direction,
     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(type)),
-      keymap: type === 'row' ? _keymaps.addRowAfter : _keymaps.addColumnAfter
+      description: formatMessage(tooltipMessageByType(direction)),
+      keymap: direction === 'row' ? _keymaps.addRowAfter : _keymaps.addColumnAfter
     }),
     position: "top"
   }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
@@ -73,13 +73,13 @@ var InsertButton = function InsertButton(_ref2) {
     fillRule: "evenodd"
   })))), /*#__PURE__*/_react.default.createElement("div", {
     className: _types.TableCssClassName.CONTROLS_INSERT_LINE,
-    style: type === 'row' ? {
+    style: direction === 'row' ? {
       width: getInsertLineWidth(tableRef)
     } : {
       height: getInsertLineHeight(tableRef, hasStickyHeaders)
     }
   })));
-  var floatingButtonClassName = type === 'column' ? _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN : _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW;
+  var floatingButtonClassName = direction === '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

@@ -77,8 +77,8 @@ function getColumnOptions(index, tableContainer, hasNumberedColumns) {
   }
   return options;
 }
-function getPopupOptions(type, index, hasNumberedColumns, tableContainer) {
-  switch (type) {
+function getPopupOptions(direction, index, hasNumberedColumns, tableContainer) {
+  switch (direction) {
     case 'column':
       return getColumnOptions(index, tableContainer, hasNumberedColumns);
     case 'row':

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

@@ -131,7 +131,7 @@ var FloatingInsertButton = exports.FloatingInsertButton = /*#__PURE__*/function
       }, (0, _getPopupOptions.default)(type, index, hasNumberedColumns, tableContainerWrapper), {
         zIndex: zIndex
       }), /*#__PURE__*/_react.default.createElement(_InsertButton.default, {
-        type: type,
+        direction: type,
         tableRef: tableRef,
         onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,
         hasStickyHeaders: this.props.hasStickyHeaders || false

package/dist/cjs/plugins/table/ui/TableFloatingControls/RowControls/DragControls.js

@@ -10,6 +10,7 @@ var _reactIntlNext = require("react-intl-next");
 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");
@@ -26,7 +27,9 @@ var getSelectedRows = function getSelectedRows(selection) {
   return [];
 };
 var DragControlsComponent = function DragControlsComponent(_ref) {
+  var _tableNode$attrs$loca, _tableNode$attrs;
   var tableRef = _ref.tableRef,
+    tableNode = _ref.tableNode,
     hoveredCell = _ref.hoveredCell,
     tableActive = _ref.tableActive,
     editorView = _ref.editorView,
@@ -40,6 +43,9 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
   }).join(' ');
   var selectedRowIndexes = getSelectedRows(editorView.state.selection);
   var rowWidth = tableRef.offsetWidth;
+  var onMouseUp = (0, _react.useCallback)(function () {
+    (0, _commands2.toggleDragMenu)(undefined, 'row', hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex)(editorView.state, editorView.dispatch);
+  }, [editorView, hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex]);
   var rowIndex = hoveredCell === null || hoveredCell === void 0 ? void 0 : hoveredCell.rowIndex;
   var gridRowPosition = (0, _react.useMemo)(function () {
     // if more than one row is selected, ensure the handle spans over the selected range
@@ -48,11 +54,6 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
     }
     return "".concat(rowIndex + 1, " / span 1");
   }, [rowIndex, selectedRowIndexes]);
-  var getLocalId = function getLocalId() {
-    var _tableNode$node;
-    var tableNode = (0, _utils.findTable)(editorView.state.selection);
-    return (tableNode === null || tableNode === void 0 || (_tableNode$node = tableNode.node) === null || _tableNode$node === void 0 || (_tableNode$node = _tableNode$node.attrs) === null || _tableNode$node === void 0 ? void 0 : _tableNode$node.localId) || '';
-  };
   var handleMouseOut = (0, _react.useCallback)(function () {
     if (tableActive) {
       var state = editorView.state,
@@ -94,14 +95,15 @@ var DragControlsComponent = function DragControlsComponent(_ref) {
       justifyContent: 'center'
     }
   }, /*#__PURE__*/_react.default.createElement(_DragHandle.DragHandle, {
-    tableLocalId: getLocalId(),
+    tableLocalId: (_tableNode$attrs$loca = tableNode === null || tableNode === void 0 || (_tableNode$attrs = tableNode.attrs) === null || _tableNode$attrs === void 0 ? void 0 : _tableNode$attrs.localId) !== null && _tableNode$attrs$loca !== void 0 ? _tableNode$attrs$loca : '',
     indexes: [rowIndex],
     previewWidth: rowWidth,
     previewHeight: rowHeights[rowIndex],
     appearance: selectedRowIndexes.includes(rowIndex) ? isInDanger ? 'danger' : 'selected' : 'default',
     onClick: handleClick,
     onMouseOver: handleMouseOver,
-    onMouseOut: handleMouseOut
+    onMouseOut: handleMouseOut,
+    onMouseUp: onMouseUp
   })));
 };
 var DragControls = exports.DragControls = (0, _reactIntlNext.injectIntl)(DragControlsComponent);

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

@@ -144,6 +144,7 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
       var _this$props3 = this.props,
         editorView = _this$props3.editorView,
         tableRef = _this$props3.tableRef,
+        tableNode = _this$props3.tableNode,
         isInDanger = _this$props3.isInDanger,
         isResizing = _this$props3.isResizing,
         isNumberColumnEnabled = _this$props3.isNumberColumnEnabled,
@@ -178,6 +179,7 @@ var TableFloatingControls = exports.default = /*#__PURE__*/function (_Component)
         isDragAndDropEnabled: isDragAndDropEnabled
       }) : null, tableActive && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_RowControls.DragControls, {
         tableRef: tableRef,
+        tableNode: tableNode,
         hoveredCell: hoveredCell,
         editorView: editorView,
         tableActive: tableActive,

package/dist/cjs/plugins/table/ui/consts.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tablePadding = exports.tableOverflowShadowWidthWide = exports.tableOverflowShadowWidth = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.rowControlsZIndex = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.insertLineWidth = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidth = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_GAP = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = void 0;
+exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tablePadding = exports.tableOverflowShadowWidthWide = exports.tableOverflowShadowWidth = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.rowControlsZIndex = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.insertLineWidth = exports.dragMenuDropdownWidth = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidth = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_GAP = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = void 0;
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
@@ -109,4 +109,5 @@ var tableOverflowShadowWidthWide = exports.tableOverflowShadowWidthWide = 32;
 var TABLE_SNAP_GAP = exports.TABLE_SNAP_GAP = 9;
 var TABLE_HIGHLIGHT_GAP = exports.TABLE_HIGHLIGHT_GAP = 10;
 var TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_TOLERANCE = 2;
-var STICKY_HEADER_TOGGLE_TOLERANCE_MS = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
+var STICKY_HEADER_TOGGLE_TOLERANCE_MS = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
+var dragMenuDropdownWidth = exports.dragMenuDropdownWidth = 240;

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

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDragMenuConfig = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _commands = require("../pm-plugins/drag-and-drop/commands");
+var canDecrease = function canDecrease(index) {
+  var min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  return index !== undefined && index > min;
+};
+var canIncrease = function canIncrease(index) {
+  var max = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  return index !== undefined && index < max;
+};
+var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(direction, tableMap, index) {
+  var moveOptions = direction === 'row' ? [{
+    label: 'up',
+    offset: -1,
+    canMove: canDecrease
+  }, {
+    label: 'down',
+    offset: 1,
+    canMove: function canMove(index) {
+      var _tableMap$height;
+      return canIncrease(index, ((_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0) - 1);
+    }
+  }] : [{
+    label: 'left',
+    offset: -1,
+    canMove: canDecrease
+  }, {
+    label: 'right',
+    offset: 1,
+    canMove: function canMove(index) {
+      var _tableMap$width;
+      return canIncrease(index, ((_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0) - 1);
+    }
+  }];
+  return (0, _toConsumableArray2.default)(moveOptions.map(function (_ref) {
+    var label = _ref.label,
+      offset = _ref.offset,
+      canMove = _ref.canMove;
+    return {
+      id: "move_".concat(direction, "_").concat(label),
+      title: "Move ".concat(direction, " ").concat(label),
+      disabled: !canMove(index),
+      onClick: function onClick(state, dispatch) {
+        if (canMove(index)) {
+          (0, _commands.moveSource)("table-".concat(direction), index, index + offset)(state, dispatch);
+          return true;
+        }
+        return false;
+      }
+    };
+  }));
+};

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

@@ -28,6 +28,7 @@ import { getToolbarConfig } from './toolbar';
 import FloatingContextualButton from './ui/FloatingContextualButton';
 import FloatingContextualMenu from './ui/FloatingContextualMenu';
 import FloatingDeleteButton from './ui/FloatingDeleteButton';
+import FloatingDragMenu from './ui/FloatingDragMenu';
 import FloatingInsertButton from './ui/FloatingInsertButton';
 import LayoutButton from './ui/LayoutButton';
 import { isLayoutSupported } from './utils';
@@ -242,7 +243,8 @@ const tablesPlugin = ({
           tableResizingPluginState: resizingPluginState,
           stickyHeadersState,
           tablePluginState,
-          tableWidthPluginState
+          tableWidthPluginState,
+          dragAndDropState
         }) => {
           const {
             state
@@ -262,7 +264,8 @@ const tablesPlugin = ({
             insertRowButtonIndex,
             isHeaderColumnEnabled,
             isHeaderRowEnabled,
-            tableWrapperTarget
+            tableWrapperTarget,
+            isDragAndDropEnabled
           } = tablePluginState;
           const {
             allowControls
@@ -316,6 +319,16 @@ const tablesPlugin = ({
             editorAnalyticsAPI: editorAnalyticsAPI,
             getEditorContainerWidth: defaultGetEditorContainerWidth,
             getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags
+          }), isDragAndDropEnabled && /*#__PURE__*/React.createElement(FloatingDragMenu, {
+            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 && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
             editorView: editorView,
             selection: editorView.state.selection,