@atlaskit/editor-plugin-table 5.2.2 → 5.3.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-table
 
+## 5.3.1
+
+### Patch Changes
+
+- [#41703](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41703) [`3631a9d9750`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3631a9d9750) - [ux] Added a command to show insert line decoration/ drop target when dragging a table column or a row.
+- [#41640](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41640) [`c387b1bfcdd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c387b1bfcdd) - Added a Pragmatic Drag and Drop montior to the DnD table plugin. This is responsible for triggering the row/column move when a drop operation occurs.
+
+## 5.3.0
+
+### Minor Changes
+
+- [#41577](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41577) [`3d9daab8d32`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3d9daab8d32) - [ux] Added a new floating column control region to the table. This region now also contains Pragmatic DnD Drop targets so we can identify where draggable elements are dropped
+
 ## 5.2.2
 
 ### Patch Changes

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

@@ -33,6 +33,7 @@ var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
 var _dom = require("../pm-plugins/table-resizing/utils/dom");
 var _types = require("../types");
 var _consts = require("../ui/consts");
+var _TableFloatingColumnControls = _interopRequireDefault(require("../ui/TableFloatingColumnControls"));
 var _TableFloatingControls = _interopRequireDefault(require("../ui/TableFloatingControls"));
 var _utils4 = require("../utils");
 var _OverflowShadowsObserver = require("./OverflowShadowsObserver");
@@ -459,7 +460,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         containerWidth = _this$props10.containerWidth,
         options = _this$props10.options,
         getPos = _this$props10.getPos,
-        pluginInjectionApi = _this$props10.pluginInjectionApi;
+        pluginInjectionApi = _this$props10.pluginInjectionApi,
+        isDragAndDropEnabled = _this$props10.isDragAndDropEnabled;
       var _this$state3 = this.state,
         showBeforeShadow = _this$state3.showBeforeShadow,
         showAfterShadow = _this$state3.showAfterShadow;
@@ -492,6 +494,22 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         stickyHeader: this.state.stickyHeader,
         getEditorFeatureFlags: this.props.getEditorFeatureFlags
       }));
+      var colControls = /*#__PURE__*/_react.default.createElement("div", {
+        className: _types.TableCssClassName.COLUMN_CONTROLS_WRAPPER
+      }, /*#__PURE__*/_react.default.createElement(_TableFloatingColumnControls.default, {
+        editorView: view,
+        tableRef: tableRef,
+        tableActive: tableActive,
+        hoveredRows: hoveredRows,
+        ordering: ordering,
+        hasHeaderRow: hasHeaderRow
+        // pass `selection` and `tableHeight` to control re-render
+        ,
+        selection: view.state.selection,
+        headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
+        stickyHeader: this.state.stickyHeader,
+        getEditorFeatureFlags: this.props.getEditorFeatureFlags
+      }));
       var shadowPadding = allowControls && tableActive ? -_editorSharedStyles.akEditorTableToolbarSize : _styles.tableMarginSides;
       var shadowStyle = (0, _memoizeOne.default)(function (visible) {
         return {
@@ -529,7 +547,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }), (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table-sticky-scrollbar') && /*#__PURE__*/_react.default.createElement("div", {
         className: _types.TableCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
         "data-testid": "sticky-scrollbar-sentinel-top"
-      }), allowControls && rowControls, /*#__PURE__*/_react.default.createElement("div", {
+      }), allowControls && rowControls, isDragAndDropEnabled && allowControls && colControls, /*#__PURE__*/_react.default.createElement("div", {
         style: shadowStyle(showBeforeShadow),
         className: _types.TableCssClassName.TABLE_LEFT_SHADOW
       }), this.state.stickyHeader && /*#__PURE__*/_react.default.createElement("div", {

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

@@ -176,6 +176,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
             allowControls: pluginState.pluginConfig.allowControls,
             isHeaderRowEnabled: pluginState.isHeaderRowEnabled,
             isHeaderColumnEnabled: pluginState.isHeaderColumnEnabled,
+            isDragAndDropEnabled: pluginState.isDragAndDropEnabled,
             tableActive: tableActive,
             ordering: pluginState.ordering,
             isResizing: isResizing,

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

@@ -3,24 +3,53 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setDropTarget = exports.clearDropTarget = void 0;
+exports.updatePluginStateDecorations = exports.setDropTarget = exports.getDecorations = exports.clearDropTarget = void 0;
+var _view = require("@atlaskit/editor-prosemirror/view");
+var _types = require("../../types");
+var _utils = require("../../utils");
 var _actions = require("./actions");
 var _pluginFactory = require("./plugin-factory");
+var _pluginKey = require("./plugin-key");
 // TODO: This command is a placeholder example. Please replace this if required.
+var getDecorations = exports.getDecorations = function getDecorations(state) {
+  var _pluginKey$getState;
+  return ((_pluginKey$getState = _pluginKey.pluginKey.getState(state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.decorationSet) || _view.DecorationSet.empty;
+};
+var updatePluginStateDecorations = exports.updatePluginStateDecorations = function updatePluginStateDecorations(state, decorations, key) {
+  return (0, _utils.updateDecorations)(state.doc, getDecorations(state), decorations, key);
+};
 var setDropTarget = exports.setDropTarget = function setDropTarget(type, index, tr) {
-  return (0, _pluginFactory.createCommand)({
-    type: _actions.DragAndDropActionType.SET_DROP_TARGET,
-    data: {
-      type: type,
-      index: index
+  return (0, _pluginFactory.createCommand)(function (state) {
+    var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+      dropTargetType = _getPluginState.dropTargetType,
+      dropTargetIndex = _getPluginState.dropTargetIndex;
+    if (dropTargetType === type && dropTargetIndex === index) {
+      return false;
     }
+    var decorationSet = _view.DecorationSet.empty;
+    if (type === 'column') {
+      decorationSet = updatePluginStateDecorations(state, (0, _utils.createColumnInsertLine)(index, state.selection), _types.TableDecorations.COLUMN_INSERT_LINE);
+    } else if (type === 'row') {
+      decorationSet = updatePluginStateDecorations(state, (0, _utils.createRowInsertLine)(index, state.selection), _types.TableDecorations.ROW_INSERT_LINE);
+    }
+    return {
+      type: _actions.DragAndDropActionType.SET_DROP_TARGET,
+      data: {
+        decorationSet: decorationSet,
+        type: type,
+        index: index
+      }
+    };
   }, function (originalTr) {
     return (tr || originalTr).setMeta('addToHistory', false);
   });
 };
 var clearDropTarget = exports.clearDropTarget = function clearDropTarget(tr) {
   return (0, _pluginFactory.createCommand)({
-    type: _actions.DragAndDropActionType.CLEAR_DROP_TARGET
+    type: _actions.DragAndDropActionType.CLEAR_DROP_TARGET,
+    data: {
+      decorationSet: _view.DecorationSet.empty
+    }
   }, function (originalTr) {
     return (tr || originalTr).setMeta('addToHistory', false);
   });

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.handleDocOrSelectionChanged = void 0;
+var _utils = require("@atlaskit/editor-tables/utils");
+// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
+
+var buildPluginState = function buildPluginState(builders) {
+  return function (props) {
+    return function (pluginState) {
+      return builders.reduce(function (_pluginState, transform) {
+        return transform(props)(_pluginState);
+      }, pluginState);
+    };
+  };
+};
+var handleDocOrSelectionChanged = exports.handleDocOrSelectionChanged = function handleDocOrSelectionChanged(tr, pluginState) {
+  return buildPluginState([])({
+    tr: tr,
+    table: (0, _utils.findTable)(tr.selection)
+  })(pluginState);
+};

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

@@ -4,10 +4,35 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createPluginState = exports.createCommand = void 0;
+exports.getPluginState = exports.createPluginState = exports.createCommand = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _utils = require("@atlaskit/editor-common/utils");
-var _pluginKey = require("./plugin-key");
+var _pluginKey = require("../plugin-key");
+var _handlers = require("./handlers");
+var _pluginKey2 = require("./plugin-key");
 var _reducer = _interopRequireDefault(require("./reducer"));
-var _pluginFactory = (0, _utils.pluginFactory)(_pluginKey.pluginKey, _reducer.default),
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var _pluginFactory = (0, _utils.pluginFactory)(_pluginKey2.pluginKey, _reducer.default, {
+    mapping: function mapping(tr, pluginState) {
+      if (tr.docChanged) {
+        var decorationSet = pluginState.decorationSet;
+        var meta = tr.getMeta(_pluginKey.pluginKey);
+        if (meta && meta.data && meta.data.decorationSet) {
+          decorationSet = meta.data.decorationSet;
+        }
+        if (decorationSet) {
+          decorationSet = decorationSet.map(tr.mapping, tr.doc);
+        }
+        return _objectSpread(_objectSpread({}, pluginState), {
+          decorationSet: decorationSet
+        });
+      }
+      return pluginState;
+    },
+    onDocChanged: _handlers.handleDocOrSelectionChanged,
+    onSelectionChanged: _handlers.handleDocOrSelectionChanged
+  }),
   createPluginState = exports.createPluginState = _pluginFactory.createPluginState,
-  createCommand = exports.createCommand = _pluginFactory.createCommand;
+  createCommand = exports.createCommand = _pluginFactory.createCommand,
+  getPluginState = exports.getPluginState = _pluginFactory.getPluginState;

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

@@ -1,28 +1,102 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 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 _consts = require("./consts");
-var _pluginFactory = require("./plugin-factory");
+var _pluginFactory2 = require("./plugin-factory");
 var _pluginKey = require("./plugin-key");
+var _monitor = require("./utils/monitor");
 var createPlugin = exports.createPlugin = function createPlugin(dispatch, eventDispatcher) {
   return new _safePlugin.SafePlugin({
-    state: (0, _pluginFactory.createPluginState)(dispatch, {
-      // 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
+    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
+      };
     }),
     key: _pluginKey.pluginKey,
     view: function view(editorView) {
-      // TODO: Add Pragmatic DnD monitor when the view is constructed.
       return {
-        // TODO: Cleanup monitor instance
-        // destroy: cleanup,
+        destroy: (0, _element.monitorForElements)({
+          canMonitor: function canMonitor(_ref) {
+            var source = _ref.source;
+            var _ref2 = source.data,
+              type = _ref2.type,
+              localId = _ref2.localId,
+              indexes = _ref2.indexes;
+
+            // First; Perform any quick checks so we can abort early.
+            if (!indexes || !localId ||
+            // FIXME: We currently don't support DragNDrop of multiple elements. For now we will not bother to monitor drags
+            // of more then 1 item.
+            indexes.length !== 1 || !(type === 'table-row' || type === 'table-column')) {
+              return false;
+            }
+            var _getTablePluginState = (0, _pluginFactory.getPluginState)(editorView.state),
+              tableNode = _getTablePluginState.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);
+          },
+          onDrag: function onDrag(event) {
+            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) {
+              return;
+            }
+
+            // TODO: as we drag an element around we are going to want to update the state to acurately reflect the current
+            // insert location as to where the draggable will most likely be go. For example;
+            // const { sourceType, targetAdjustedIndex } = data;
+            // const highlight = sourceType === 'table-row' ? highlightRow : highlightColumn;
+            // return editorView.dispatch(
+            //   highlight(targetAdjustedIndex)(editorView.state.tr),
+            // );
+          },
+          onDrop: function onDrop(event) {
+            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
+            if (!data) {
+              return;
+            }
+            var sourceType = data.sourceType,
+              sourceIndexes = data.sourceIndexes,
+              targetAdjustedIndex = data.targetAdjustedIndex;
+
+            // If the drop target index contains merged cells then we should not allow the drop to occur.
+            var hasMergedCells = sourceType === 'table-row' ? _mergedCells.hasMergedCellsInRow : _mergedCells.hasMergedCellsInColumn;
+            if (hasMergedCells(targetAdjustedIndex)(editorView.state.selection)) {
+              return;
+            }
+            var move = sourceType === 'table-row' ? _utils.moveRow : _utils.moveColumn;
+            var _sourceIndexes = (0, _slicedToArray2.default)(sourceIndexes, 1),
+              sourceIndex = _sourceIndexes[0];
+            return editorView.dispatch(move(sourceIndex, targetAdjustedIndex)(editorView.state.tr));
+          }
+        })
       };
+    },
+    props: {
+      decorations: function decorations(state) {
+        var _getPluginState = (0, _pluginFactory2.getPluginState)(state),
+          decorationSet = _getPluginState.decorationSet;
+        return decorationSet;
+      }
     }
   });
 };

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

@@ -14,11 +14,13 @@ var _default = exports.default = function _default(pluginState, action) {
   switch (action.type) {
     case _actions.DragAndDropActionType.SET_DROP_TARGET:
       return _objectSpread(_objectSpread({}, pluginState), {}, {
+        decorationSet: action.data.decorationSet,
         dropTargetType: action.data.type,
         dropTargetIndex: action.data.index
       });
     case _actions.DragAndDropActionType.CLEAR_DROP_TARGET:
       return _objectSpread(_objectSpread({}, pluginState), {}, {
+        decorationSet: action.data.decorationSet,
         dropTargetType: _consts.DropTargetType.NONE,
         dropTargetIndex: 0
       });

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getDraggableDataFromEvent", {
+  enumerable: true,
+  get: function get() {
+    return _monitor.getDraggableDataFromEvent;
+  }
+});
+var _monitor = require("./monitor");

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

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDraggableDataFromEvent = void 0;
+var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge");
+var getDraggableDataFromEvent = exports.getDraggableDataFromEvent = function getDraggableDataFromEvent(_ref) {
+  var _extractClosestEdge;
+  var location = _ref.location,
+    source = _ref.source;
+  var destination = location.current.dropTargets.at(0);
+  // If no target exists at the current location, then the current draggable is not over a target or the target doesn't support
+  // the current draggable.
+  if (!destination) {
+    return undefined;
+  }
+
+  // This is the draggable elements data
+  var _ref2 = source.data,
+    sourceIndexes = _ref2.indexes,
+    sourceType = _ref2.type,
+    sourceLocalId = _ref2.localId;
+
+  // This is the drop target's data
+  var _ref3 = destination.data,
+    targetIndex = _ref3.targetIndex,
+    targetType = _ref3.type,
+    targetLocalId = _ref3.localId;
+
+  // Some basic check to abort early with...
+  if (!sourceIndexes || targetIndex < 0 ||
+  // abort if the type of the draggable is different to the target, for eg. rows cannot be dropped onto column targets.
+  sourceType !== targetType ||
+  // abort if the draggable is coming from a different table that the target is on.
+  sourceLocalId !== targetLocalId) {
+    return undefined;
+  }
+
+  // FIXME: currently we only support a single row/col index being moved, remove this clause when this is no longer the case.
+  if (sourceIndexes.length > 1) {
+    return undefined;
+  }
+  var targetClosestEdge = (_extractClosestEdge = (0, _closestEdge.extractClosestEdge)(destination.data)) !== null && _extractClosestEdge !== void 0 ? _extractClosestEdge : targetType === 'table-row' ? 'top' : 'left';
+  // NOTE: By default we always insert row/cols at the target index to the top/left (retrospectively of row/cols).
+  // This introduces an offset in the event the drop occured closer to the bottom/right of the target. We want
+  // the new target index to be 1 index higher.
+  var targetOffset = targetClosestEdge === 'right' || targetClosestEdge === 'bottom' ? 1 : 0;
+  return {
+    sourceType: sourceType,
+    sourceLocalId: sourceLocalId,
+    sourceIndexes: sourceIndexes,
+    targetType: targetType,
+    targetLocalId: targetLocalId,
+    targetIndex: targetIndex,
+    targetAdjustedIndex: targetIndex + targetOffset,
+    targetClosestEdge: targetClosestEdge
+  };
+};

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

@@ -43,10 +43,13 @@ var TableDecorations = exports.TableDecorations = /*#__PURE__*/function (TableDe
   TableDecorations["TABLE_CONTROLS_HOVER"] = "TABLE_CONTROLS_HOVER";
   TableDecorations["CELL_CONTROLS_HOVER"] = "CELL_CONTROLS_HOVER";
   TableDecorations["COLUMN_CONTROLS_DECORATIONS"] = "COLUMN_CONTROLS_DECORATIONS";
+  TableDecorations["COLUMN_DROP_TARGET_DECORATIONS"] = "COLUMN_DROP_TARGET_DECORATIONS";
   TableDecorations["COLUMN_SELECTED"] = "COLUMN_SELECTED";
   TableDecorations["COLUMN_RESIZING_HANDLE"] = "COLUMN_RESIZING_HANDLE";
   TableDecorations["COLUMN_RESIZING_HANDLE_WIDGET"] = "COLUMN_RESIZING_HANDLE_WIDGET";
   TableDecorations["COLUMN_RESIZING_HANDLE_LINE"] = "COLUMN_RESIZING_HANDLE_LINE";
+  TableDecorations["COLUMN_INSERT_LINE"] = "COLUMN_INSERT_LINE";
+  TableDecorations["ROW_INSERT_LINE"] = "ROW_INSERT_LINE";
   TableDecorations["LAST_CELL_ELEMENT"] = "LAST_CELL_ELEMENT";
   return TableDecorations;
 }({});
@@ -54,6 +57,9 @@ var TableCssClassName = exports.TableCssClassName = _objectSpread(_objectSpread(
   COLUMN_CONTROLS: "".concat(_adfSchema.tablePrefixSelector, "-column-controls"),
   COLUMN_CONTROLS_DECORATIONS: "".concat(_adfSchema.tablePrefixSelector, "-column-controls-decoration"),
   COLUMN_SELECTED: "".concat(_adfSchema.tablePrefixSelector, "-column__selected"),
+  COLUMN_CONTROLS_WRAPPER: "".concat(_adfSchema.tablePrefixSelector, "-col-controls-wrapper"),
+  COLUMN_DROP_TARGET_CONTROLS: "".concat(_adfSchema.tablePrefixSelector, "-col-drop-target-controls"),
+  COLUMN_CONTROLS_INNER: "".concat(_adfSchema.tablePrefixSelector, "-col-controls__inner"),
   ROW_CONTROLS_WRAPPER: "".concat(_adfSchema.tablePrefixSelector, "-row-controls-wrapper"),
   ROW_CONTROLS: "".concat(_adfSchema.tablePrefixSelector, "-row-controls"),
   ROW_CONTROLS_INNER: "".concat(_adfSchema.tablePrefixSelector, "-row-controls__inner"),
@@ -110,8 +116,13 @@ var TableCssClassName = exports.TableCssClassName = _objectSpread(_objectSpread(
   TABLE_STICKY: "".concat(_adfSchema.tablePrefixSelector, "-sticky"),
   TOP_LEFT_CELL: 'table > tbody > tr:nth-child(2) > td:nth-child(1)',
   LAST_ITEM_IN_CELL: "".concat(_adfSchema.tablePrefixSelector, "-last-item-in-cell"),
+  WITH_COLUMN_INSERT_LINE: "".concat(_adfSchema.tablePrefixSelector, "-column-insert-line"),
+  WITH_FIRST_COLUMN_INSERT_LINE: "".concat(_adfSchema.tablePrefixSelector, "-first-column-insert-line"),
+  WITH_LAST_COLUMN_INSERT_LINE: "".concat(_adfSchema.tablePrefixSelector, "-last-column-insert-line"),
   WITH_RESIZE_LINE: "".concat(_adfSchema.tablePrefixSelector, "-column-resize-line"),
-  WITH_RESIZE_LINE_LAST_COLUMN: "".concat(_adfSchema.tablePrefixSelector, "-column-resize-line-last-column")
+  WITH_RESIZE_LINE_LAST_COLUMN: "".concat(_adfSchema.tablePrefixSelector, "-column-resize-line-last-column"),
+  WITH_ROW_INSERT_LINE: "".concat(_adfSchema.tablePrefixSelector, "-row-insert-line"),
+  WITH_LAST_ROW_INSERT_LINE: "".concat(_adfSchema.tablePrefixSelector, "-last-row-insert-line")
 });
 var ShadowEvent = exports.ShadowEvent = /*#__PURE__*/function (ShadowEvent) {
   ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";

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

@@ -0,0 +1,106 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ColumnDropTargets = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _closestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge");
+var _element = require("@atlaskit/pragmatic-drag-and-drop/adapter/element");
+var _types = require("../../../types");
+var _utils = require("../../../utils");
+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; }
+var ColumnDropTargets = exports.ColumnDropTargets = function ColumnDropTargets(_ref) {
+  var _rowHeights$;
+  var editorView = _ref.editorView,
+    tableRef = _ref.tableRef,
+    tableHeight = _ref.tableHeight,
+    stickyTop = _ref.stickyTop,
+    localId = _ref.localId;
+  var colWidths = (0, _utils.getColumnsWidths)(editorView);
+  var rowHeights = (0, _react.useMemo)(function () {
+    // NOTE: we don't care so much as to what tableHeight is, we only care that it changed and is a sane value.
+    if (tableRef && !!tableHeight) {
+      return (0, _utils.getRowHeights)(tableRef);
+    }
+    return [0];
+  }, [tableRef, tableHeight]);
+  if (!tableRef) {
+    return null;
+  }
+  var firstRow = tableRef.querySelector('tr');
+  var hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
+  var marginTop = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _types.TableCssClassName.COLUMN_DROP_TARGET_CONTROLS
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _types.TableCssClassName.COLUMN_CONTROLS_INNER,
+    "data-testid": "table-floating-column-controls-drop-targets"
+  }, colWidths.map(function (width, index) {
+    return /*#__PURE__*/_react.default.createElement(ColumnDropTarget, {
+      key: index,
+      index: index,
+      localId: localId,
+      width: width,
+      height: tableHeight,
+      marginTop: marginTop
+    });
+  })));
+};
+var _default = exports.default = ColumnDropTargets;
+var ColumnDropTarget = function ColumnDropTarget(_ref2) {
+  var index = _ref2.index,
+    localId = _ref2.localId,
+    width = _ref2.width,
+    height = _ref2.height,
+    marginTop = _ref2.marginTop;
+  var dropTargetRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (!dropTargetRef.current) {
+      return;
+    }
+    return (0, _element.dropTargetForElements)({
+      element: dropTargetRef.current,
+      canDrop: function canDrop(_ref3) {
+        var _data$indexes, _data$indexes2;
+        var source = _ref3.source;
+        var data = source.data;
+        return (
+          // Only draggables of row type can be dropped on this target
+          data.type === 'table-column' &&
+          // Only draggables which came from the same table can be dropped on this target
+          data.localId === localId &&
+          // Only draggables which DO NOT include this drop targets index can be dropped
+          !!((_data$indexes = data.indexes) !== null && _data$indexes !== void 0 && _data$indexes.length) && ((_data$indexes2 = data.indexes) === null || _data$indexes2 === void 0 ? void 0 : _data$indexes2.indexOf(index)) === -1
+        );
+      },
+      getData: function getData(_ref4) {
+        var input = _ref4.input,
+          element = _ref4.element;
+        var data = {
+          localId: localId,
+          type: 'table-column',
+          targetIndex: index
+        };
+        return (0, _closestEdge.attachClosestEdge)(data, {
+          input: input,
+          element: element,
+          allowedEdges: ['left', 'right']
+        });
+      }
+    });
+  }, [index, localId]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: dropTargetRef,
+    style: {
+      width: width && "".concat(width - 1, "px"),
+      height: height && "".concat(height, "px"),
+      marginTop: marginTop && "".concat(marginTop, "px")
+    },
+    "data-drop-target-index": index,
+    "data-drop-target-localid": localId,
+    "data-testid": "table-floating-column-controls-drop-target"
+  });
+};

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

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TableFloatingColumnControls = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _editorTables = require("@atlaskit/editor-tables");
+var _ColumnDropTargets = require("./ColumnDropTargets");
+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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+var TableFloatingColumnControls = exports.TableFloatingColumnControls = function TableFloatingColumnControls(_ref) {
+  var editorView = _ref.editorView,
+    tableRef = _ref.tableRef,
+    tableActive = _ref.tableActive,
+    hasHeaderRow = _ref.hasHeaderRow,
+    stickyHeader = _ref.stickyHeader,
+    selection = _ref.selection;
+  var _useState = (0, _react.useState)({
+      width: 0,
+      height: 0
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    tableRect = _useState2[0],
+    setTableRect = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var _window;
+    if (tableRef && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
+      var resizeObserver = new ResizeObserver(function (entries) {
+        var _iterator = _createForOfIteratorHelper(entries),
+          _step;
+        try {
+          var _loop = function _loop() {
+            var entry = _step.value;
+            setTableRect(function (prev) {
+              if (prev.width !== entry.contentRect.width || prev.height !== entry.contentRect.height) {
+                return entry.contentRect;
+              }
+              return prev;
+            });
+          };
+          for (_iterator.s(); !(_step = _iterator.n()).done;) {
+            _loop();
+          }
+        } catch (err) {
+          _iterator.e(err);
+        } finally {
+          _iterator.f();
+        }
+      });
+      resizeObserver.observe(tableRef);
+      return function () {
+        resizeObserver.disconnect();
+      };
+    }
+  }, [tableRef]);
+  var selectedLocalId = (0, _react.useMemo)(function () {
+    if (!selection) {
+      return undefined;
+    }
+    var tableNode = (0, _editorTables.findTable)(selection);
+    if (!tableNode) {
+      return undefined;
+    }
+    return tableNode.node.attrs.localId;
+  }, [selection]);
+  if (!tableRef) {
+    return null;
+  }
+  var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    onMouseDown: function onMouseDown(e) {
+      return e.preventDefault();
+    },
+    "data-testid": "table-floating-column-controls-wrapper"
+  }, tableActive && /*#__PURE__*/_react.default.createElement(_ColumnDropTargets.ColumnDropTargets, {
+    editorView: editorView,
+    tableRef: tableRef,
+    stickyTop: tableActive ? stickyTop : undefined,
+    tableHeight: tableRect.height,
+    localId: selectedLocalId
+  }));
+};
+var _default = exports.default = TableFloatingColumnControls;