@atlaskit/editor-plugin-table 5.4.6 → 5.4.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 5.4.8
+
+### Patch Changes
+
+- [#57815](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/57815) [`5cd97624a19d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5cd97624a19d) - Replace getBooleanFF calls inside stylesheets and replace with isDragAndDrop table option - fixes column controls not rendering in comments
+
+## 5.4.7
+
+### Patch Changes
+
+- [#56725](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/56725) [`4401801c484b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4401801c484b) - Add new rowOrColumnMoved event to table plugin, behind a feature flag
+
 ## 5.4.6
 
 ### Patch Changes

package/dist/cjs/plugins/table/commands/insert.js

@@ -12,14 +12,14 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils2 = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _commands = require("../pm-plugins/analytics/commands");
 var _tableAnalytics = require("../pm-plugins/table-analytics");
 var _columnWidth = require("../transforms/column-width");
 var _utils3 = require("../utils");
 var _getAllowAddColumnCustomStep = require("../utils/get-allow-add-column-custom-step");
 // #region Imports
 
-// #endregion
-
 function addColumnAtCustomStep(column) {
   return function (tr) {
     var table = (0, _utils2.findTable)(tr.selection);
@@ -45,6 +45,11 @@ function addColumnAt(getEditorContainerWidth) {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
         updatedTr = (0, _columnWidth.rescaleColumns)(getEditorContainerWidth)(table, view)(updatedTr);
       }
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.analytics-plugin-moved-event') && view) {
+        updatedTr = (0, _commands.updateRowOrColumnMovedTransform)({
+          type: 'column'
+        }, 'addRowOrColumn')(view.state, updatedTr);
+      }
       updatedTr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_TRIGGER, {
         name: _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.ADDED_COLUMN
       });
@@ -128,6 +133,11 @@ var insertRow = exports.insertRow = function insertRow(row, moveCursorToTheNewRo
       } else {
         tr.setSelection(selection.map(tr.doc, tr.mapping));
       }
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.analytics-plugin-moved-event')) {
+        (0, _commands.updateRowOrColumnMovedTransform)({
+          type: 'row'
+        }, 'addRowOrColumn')(state, tr);
+      }
       dispatch(tr);
     }
     return true;

package/dist/cjs/plugins/table/commands/misc.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateResizeHandleDecorations = exports.triggerUnlessTableHeader = exports.transformSliceToRemoveColumnsWidths = exports.transformSliceToAddTableHeaders = exports.transformSliceRemoveCellBackgroundColor = exports.showInsertRowButton = exports.showInsertColumnButton = exports.setTableRef = exports.setMultipleCellAttrs = exports.setEditorFocus = exports.setCellAttr = exports.selectRow = exports.selectColumn = exports.removeResizeHandleDecorations = exports.moveCursorBackward = exports.hideInsertColumnOrRowButton = exports.deleteTableIfSelected = exports.deleteTable = exports.convertFirstRowToHeader = exports.autoSizeTable = exports.addResizeHandleDecorations = exports.addBoldInEmptyHeaderCells = void 0;
+exports.updateResizeHandleDecorations = exports.triggerUnlessTableHeader = exports.transformSliceToRemoveColumnsWidths = exports.transformSliceToAddTableHeaders = exports.transformSliceRemoveCellBackgroundColor = exports.showInsertRowButton = exports.showInsertColumnButton = exports.setTableRef = exports.setMultipleCellAttrs = exports.setEditorFocus = exports.setCellAttr = exports.selectRow = exports.selectColumn = exports.removeResizeHandleDecorations = exports.moveCursorBackward = exports.isInsideFirstCellOfRowOrColumn = exports.hideInsertColumnOrRowButton = exports.getTableSelectionType = exports.getTableElementMoveTypeBySlice = exports.deleteTableIfSelected = exports.deleteTable = exports.countCellsInSlice = exports.convertFirstRowToHeader = exports.autoSizeTable = exports.addResizeHandleDecorations = exports.addBoldInEmptyHeaderCells = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
@@ -20,7 +20,7 @@ var _decoration = require("../utils/decoration");
 var _nodes = require("../utils/nodes");
 var _updatePluginStateDecorations = require("../utils/update-plugin-state-decorations");
 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; } // #region Imports
+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 setEditorFocus = exports.setEditorFocus = function setEditorFocus(editorHasFocus) {
   return (0, _pluginFactory.createCommand)({
     type: 'SET_EDITOR_FOCUS',
@@ -37,7 +37,8 @@ var setTableRef = exports.setTableRef = function setTableRef(ref) {
     var tablePos = ref && foundTable ? foundTable.pos : undefined;
     var tableWrapperTarget = (0, _utils.closestElement)(tableRef, ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER)) || undefined;
     var layout = tableNode ? tableNode.attrs.layout : undefined;
-    var decorationSet = (0, _updatePluginStateDecorations.updatePluginStateDecorations)(state, (0, _decoration.createColumnControlsDecoration)(state.selection), _types.TableDecorations.COLUMN_CONTROLS_DECORATIONS);
+    var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+      isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
     return {
       type: 'SET_TABLE_REF',
       data: {
@@ -49,7 +50,8 @@ var setTableRef = exports.setTableRef = function setTableRef(ref) {
         isNumberColumnEnabled: (0, _nodes.checkIfNumberColumnEnabled)(state.selection),
         isHeaderRowEnabled: (0, _nodes.checkIfHeaderRowEnabled)(state.selection),
         isHeaderColumnEnabled: (0, _nodes.checkIfHeaderColumnEnabled)(state.selection),
-        decorationSet: decorationSet,
+        // decoration set is drawn by the decoration plugin, skip this for DnD as all controls are floating
+        decorationSet: !isDragAndDropEnabled ? (0, _updatePluginStateDecorations.updatePluginStateDecorations)(state, (0, _decoration.createColumnControlsDecoration)(state.selection), _types.TableDecorations.COLUMN_CONTROLS_DECORATIONS) : undefined,
         resizeHandleRowIndex: undefined,
         resizeHandleColumnIndex: undefined
       }
@@ -157,6 +159,54 @@ var transformSliceToRemoveColumnsWidths = exports.transformSliceToRemoveColumnsW
     return maybeCell;
   });
 };
+var countCellsInSlice = exports.countCellsInSlice = function countCellsInSlice(slice, schema, type) {
+  var _schema$nodes4 = schema.nodes,
+    tableHeader = _schema$nodes4.tableHeader,
+    tableCell = _schema$nodes4.tableCell;
+  var count = 0;
+  if (!type) {
+    return count;
+  }
+  slice.content.descendants(function (maybeCell) {
+    if (maybeCell.type === tableCell || maybeCell.type === tableHeader) {
+      count += type === 'row' ? maybeCell.attrs.colspan : maybeCell.attrs.rowspan;
+      return false;
+    }
+  });
+  return count;
+};
+var getTableSelectionType = exports.getTableSelectionType = function getTableSelectionType(selection) {
+  if (selection instanceof _cellSelection.CellSelection) {
+    return selection.isRowSelection() ? 'row' : selection.isColSelection() ? 'column' : undefined;
+  }
+};
+var getTableElementMoveTypeBySlice = exports.getTableElementMoveTypeBySlice = function getTableElementMoveTypeBySlice(slice, state) {
+  if (!slice.content.firstChild) {
+    return;
+  }
+  var schema = state.schema;
+
+  // if the slice only contains one table row, assume it's a row
+  if (slice.content.childCount === 1 && slice.content.firstChild.type === schema.nodes.tableRow) {
+    return 'row';
+  }
+  var table = (0, _utils2.findTable)(state.tr.selection);
+  var map = _tableMap.TableMap.get(table.node);
+  var slicedMap = _tableMap.TableMap.get(slice.content.firstChild);
+  return map.width === slicedMap.width ? 'row' : map.height === slicedMap.height ? 'column' : undefined;
+};
+var isInsideFirstCellOfRowOrColumn = exports.isInsideFirstCellOfRowOrColumn = function isInsideFirstCellOfRowOrColumn(selection, type) {
+  var table = (0, _utils2.findTable)(selection);
+  if (!table || !type) {
+    return;
+  }
+  var map = _tableMap.TableMap.get(table.node);
+  var cell = (0, _utils2.selectionCell)(selection);
+  var index = map.map.findIndex(function (value) {
+    return value === cell.pos - 1;
+  });
+  return type === 'row' ? index % map.width === 0 : index < map.width;
+};
 var deleteTable = exports.deleteTable = function deleteTable(state, dispatch) {
   if (dispatch) {
     dispatch((0, _utils2.removeTable)(state.tr));
@@ -338,9 +388,9 @@ var hideInsertColumnOrRowButton = exports.hideInsertColumnOrRowButton = function
 var addResizeHandleDecorations = exports.addResizeHandleDecorations = function addResizeHandleDecorations(rowIndex, columnIndex, includeTooltip) {
   return (0, _pluginFactory.createCommand)(function (state) {
     var tableNode = (0, _utils2.findTable)(state.selection);
-    var _getPluginState = (0, _pluginFactory.getPluginState)(state),
-      allowColumnResizing = _getPluginState.pluginConfig.allowColumnResizing,
-      getIntl = _getPluginState.getIntl;
+    var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
+      allowColumnResizing = _getPluginState2.pluginConfig.allowColumnResizing,
+      getIntl = _getPluginState2.getIntl;
     if (!tableNode || !allowColumnResizing) {
       return false;
     }
@@ -363,12 +413,12 @@ var addResizeHandleDecorations = exports.addResizeHandleDecorations = function a
 var updateResizeHandleDecorations = exports.updateResizeHandleDecorations = function updateResizeHandleDecorations(rowIndex, columnIndex, includeTooltip) {
   return (0, _pluginFactory.createCommand)(function (state) {
     var tableNode = (0, _utils2.findTable)(state.selection);
-    var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
-      resizeHandleRowIndex = _getPluginState2.resizeHandleRowIndex,
-      resizeHandleColumnIndex = _getPluginState2.resizeHandleColumnIndex,
-      resizeHandleIncludeTooltip = _getPluginState2.resizeHandleIncludeTooltip,
-      allowColumnResizing = _getPluginState2.pluginConfig.allowColumnResizing,
-      getIntl = _getPluginState2.getIntl;
+    var _getPluginState3 = (0, _pluginFactory.getPluginState)(state),
+      resizeHandleRowIndex = _getPluginState3.resizeHandleRowIndex,
+      resizeHandleColumnIndex = _getPluginState3.resizeHandleColumnIndex,
+      resizeHandleIncludeTooltip = _getPluginState3.resizeHandleIncludeTooltip,
+      allowColumnResizing = _getPluginState3.pluginConfig.allowColumnResizing,
+      getIntl = _getPluginState3.getIntl;
     if (!tableNode || !allowColumnResizing) {
       return false;
     }

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

@@ -19,11 +19,13 @@ var _pmPlugins = require("@atlaskit/editor-tables/pm-plugins");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _createPluginConfig = require("./create-plugin-config");
-var _plugin = require("./pm-plugins/decorations/plugin");
+var _plugin = require("./pm-plugins/analytics/plugin");
+var _pluginKey = require("./pm-plugins/analytics/plugin-key");
+var _plugin2 = require("./pm-plugins/decorations/plugin");
 var _dragAndDrop = require("./pm-plugins/drag-and-drop");
 var _keymap = require("./pm-plugins/keymap");
 var _main = require("./pm-plugins/main");
-var _pluginKey = require("./pm-plugins/plugin-key");
+var _pluginKey2 = require("./pm-plugins/plugin-key");
 var _safariDeleteCompositionTextIssueWorkaround = require("./pm-plugins/safari-delete-composition-text-issue-workaround");
 var _stickyHeaders = require("./pm-plugins/sticky-headers");
 var _tableAnalytics = require("./pm-plugins/table-analytics");
@@ -134,7 +136,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }, {
         name: 'tableEditing',
         plugin: function plugin() {
-          return (0, _plugin.createPlugin)();
+          return (0, _plugin2.createPlugin)();
         }
       },
       // Needs to be lower priority than editor-tables.tableEditing
@@ -198,14 +200,23 @@ var tablesPlugin = function tablesPlugin(_ref) {
             dispatch = _ref10.dispatch;
           return options !== null && options !== void 0 && options.tableResizingEnabled ? (0, _tableWidth.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false) : undefined;
         }
-      }, {
-        name: 'tableAnalyticsPlugin',
+      },
+      // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
+      {
+        name: 'tableOverflowAnalyticsPlugin',
         plugin: function plugin(_ref11) {
           var _options$tableResizin;
           var dispatch = _ref11.dispatch,
             dispatchAnalyticsEvent = _ref11.dispatchAnalyticsEvent;
           return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.overflow-state-analytics') ? (0, _tableAnalytics.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false) : undefined;
         }
+      }, {
+        name: 'tableAnalyticsPlugin',
+        plugin: function plugin(_ref12) {
+          var dispatch = _ref12.dispatch,
+            dispatchAnalyticsEvent = _ref12.dispatchAnalyticsEvent;
+          return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.analytics-plugin-moved-event') ? (0, _plugin.createPlugin)(dispatch, dispatchAnalyticsEvent) : undefined;
+        }
       }, {
         name: 'tableGetEditorViewReferencePlugin',
         plugin: function plugin() {
@@ -234,49 +245,49 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref12) {
-      var editorView = _ref12.editorView,
-        popupsMountPoint = _ref12.popupsMountPoint,
-        popupsBoundariesElement = _ref12.popupsBoundariesElement,
-        popupsScrollableElement = _ref12.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref12.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref13) {
+      var editorView = _ref13.editorView,
+        popupsMountPoint = _ref13.popupsMountPoint,
+        popupsBoundariesElement = _ref13.popupsBoundariesElement,
+        popupsScrollableElement = _ref13.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref13.dispatchAnalyticsEvent;
       return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
         component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
         fallbackComponent: null
       }, /*#__PURE__*/_react.default.createElement(_withPluginState.WithPluginState, {
         plugins: {
-          tableAnalyticsPluginState: _tableAnalytics.pluginKey,
-          tablePluginState: _pluginKey.pluginKey,
+          tableAnalyticsPluginState: _pluginKey.pluginKey,
+          tablePluginState: _pluginKey2.pluginKey,
           tableWidthPluginState: _tableWidth.pluginKey,
           tableResizingPluginState: _tableResizing.pluginKey,
           stickyHeadersState: _stickyHeaders.pluginKey,
           dragAndDropState: _dragAndDrop.pluginKey
         },
-        render: function render(_ref13) {
-          var resizingPluginState = _ref13.tableResizingPluginState,
-            stickyHeadersState = _ref13.stickyHeadersState,
-            tablePluginState = _ref13.tablePluginState,
-            tableWidthPluginState = _ref13.tableWidthPluginState,
-            dragAndDropState = _ref13.dragAndDropState;
+        render: function render(_ref14) {
+          var resizingPluginState = _ref14.tableResizingPluginState,
+            stickyHeadersState = _ref14.stickyHeadersState,
+            tablePluginState = _ref14.tablePluginState,
+            tableWidthPluginState = _ref14.tableWidthPluginState,
+            dragAndDropState = _ref14.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;
           var isResizing = isColumnResizing || isTableResizing;
-          var _ref14 = tablePluginState,
-            tableNode = _ref14.tableNode,
-            tablePos = _ref14.tablePos,
-            targetCellPosition = _ref14.targetCellPosition,
-            isContextualMenuOpen = _ref14.isContextualMenuOpen,
-            layout = _ref14.layout,
-            tableRef = _ref14.tableRef,
-            pluginConfig = _ref14.pluginConfig,
-            insertColumnButtonIndex = _ref14.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref14.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref14.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref14.isHeaderRowEnabled,
-            isDragAndDropEnabled = _ref14.isDragAndDropEnabled,
-            tableWrapperTarget = _ref14.tableWrapperTarget;
+          var _ref15 = tablePluginState,
+            tableNode = _ref15.tableNode,
+            tablePos = _ref15.tablePos,
+            targetCellPosition = _ref15.targetCellPosition,
+            isContextualMenuOpen = _ref15.isContextualMenuOpen,
+            layout = _ref15.layout,
+            tableRef = _ref15.tableRef,
+            pluginConfig = _ref15.pluginConfig,
+            insertColumnButtonIndex = _ref15.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref15.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref15.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref15.isHeaderRowEnabled,
+            isDragAndDropEnabled = _ref15.isDragAndDropEnabled,
+            tableWrapperTarget = _ref15.tableWrapperTarget;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? (0, _stickyHeaders.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
           var LayoutContent = options && !options.tableResizingEnabled && (0, _utils3.isLayoutSupported)(state) && options.breakoutEnabled ? /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
@@ -354,8 +365,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref15) {
-        var formatMessage = _ref15.formatMessage;
+      quickInsert: function quickInsert(_ref16) {
+        var formatMessage = _ref16.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(_messages.toolbarInsertBlockMessages.table),

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

@@ -17,7 +17,6 @@ var _classnames2 = _interopRequireDefault(require("classnames"));
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _analytics = require("@atlaskit/editor-common/analytics");
-var _eventDispatcher = require("@atlaskit/editor-common/event-dispatcher");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -197,25 +196,22 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "setTimerToSendInitialOverflowCaptured", function (isOverflowing) {
       var _this$state;
       var _this$props3 = _this.props,
-        eventDispatcher = _this$props3.eventDispatcher,
+        dispatchAnalyticsEvent = _this$props3.dispatchAnalyticsEvent,
         containerWidth = _this$props3.containerWidth,
         options = _this$props3.options;
-      var dispatch = (0, _eventDispatcher.createDispatch)(eventDispatcher);
       var parentWidth = ((_this$state = _this.state) === null || _this$state === void 0 ? void 0 : _this$state.parentWidth) || 0;
       _this.initialOverflowCaptureTimerId = setTimeout(function () {
-        dispatch(_utils.analyticsEventKey, {
-          payload: {
-            action: _analytics.TABLE_ACTION.INITIAL_OVERFLOW_CAPTURED,
-            actionSubject: _analytics.ACTION_SUBJECT.TABLE,
-            actionSubjectId: null,
-            eventType: _analytics.EVENT_TYPE.TRACK,
-            attributes: {
-              editorWidth: containerWidth.width || 0,
-              isOverflowing: isOverflowing,
-              tableResizingEnabled: (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) || false,
-              width: _this.node.attrs.width || 0,
-              parentWidth: parentWidth
-            }
+        dispatchAnalyticsEvent({
+          action: _analytics.TABLE_ACTION.INITIAL_OVERFLOW_CAPTURED,
+          actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+          actionSubjectId: null,
+          eventType: _analytics.EVENT_TYPE.TRACK,
+          attributes: {
+            editorWidth: containerWidth.width || 0,
+            isOverflowing: isOverflowing,
+            tableResizingEnabled: (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) || false,
+            width: _this.node.attrs.width || 0,
+            parentWidth: parentWidth
           }
         });
         _this.isInitialOverflowSent = true;
@@ -535,9 +531,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var tableRef = this.table || undefined;
       var headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
       var hasHeaderRow = (0, _utils4.containsHeaderRow)(node);
-      var rowControls = /*#__PURE__*/_react.default.createElement("div", {
-        className: _types.TableCssClassName.ROW_CONTROLS_WRAPPER
-      }, /*#__PURE__*/_react.default.createElement(_TableFloatingControls.default, {
+      var rowControls = /*#__PURE__*/_react.default.createElement(_TableFloatingControls.default, {
         editorView: view,
         tableRef: tableRef,
         tableNode: node,
@@ -557,7 +551,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         selection: view.state.selection,
         headerRowHeight: headerRow ? headerRow.offsetHeight : undefined,
         stickyHeader: this.state.stickyHeader
-      }));
+      });
       var colControls = isDragAndDropEnabled ? /*#__PURE__*/_react.default.createElement(_TableFloatingColumnControls.default, {
         editorView: view,
         tableRef: tableRef,

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

@@ -145,10 +145,10 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     isResizing.current = true;
     var dispatch = editorView.dispatch,
       tr = editorView.state.tr;
+    displayGapCursor(false);
     tr.setMeta(_tableWidth.pluginKey, {
       resizing: true
     });
-    displayGapCursor(false);
     tr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_TRIGGER, {
       name: _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });

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

@@ -184,6 +184,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
             containerWidth: containerWidth,
             contentDOM: forwardRef,
             getEditorFeatureFlags: props.getEditorFeatureFlags,
+            dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
             pluginInjectionApi: props.pluginInjectionApi
           });
         }
@@ -249,7 +250,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
   }]);
   return TableView;
 }(_reactNodeView.default);
-var createTableView = exports.createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi) {
+var createTableView = exports.createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi) {
   var _getPluginState2 = (0, _pluginFactory.getPluginState)(view.state),
     pluginConfig = _getPluginState2.pluginConfig,
     isBreakoutEnabled = _getPluginState2.isBreakoutEnabled,
@@ -276,6 +277,7 @@ var createTableView = exports.createTableView = function createTableView(node, v
     },
     getEditorContainerWidth: getEditorContainerWidth,
     getEditorFeatureFlags: getEditorFeatureFlags,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     hasIntlContext: hasIntlContext,
     pluginInjectionApi: pluginInjectionApi
   }).init();

package/dist/cjs/plugins/table/pm-plugins/analytics/actions.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AnalyticPluginTypes = void 0;
+var AnalyticPluginTypes = exports.AnalyticPluginTypes = /*#__PURE__*/function (AnalyticPluginTypes) {
+  AnalyticPluginTypes[AnalyticPluginTypes["UpdateOverflowTriggerNameAction"] = 0] = "UpdateOverflowTriggerNameAction";
+  AnalyticPluginTypes[AnalyticPluginTypes["UpdateRowOrColumnMovedAction"] = 1] = "UpdateRowOrColumnMovedAction";
+  AnalyticPluginTypes[AnalyticPluginTypes["RemoveRowOrColumnMovedAction"] = 2] = "RemoveRowOrColumnMovedAction";
+  AnalyticPluginTypes[AnalyticPluginTypes["RemoveOverFlowTriggerNameAction"] = 3] = "RemoveOverFlowTriggerNameAction";
+  AnalyticPluginTypes[AnalyticPluginTypes["UpdateRowOrColumnMovedAndOverflowTrigger"] = 4] = "UpdateRowOrColumnMovedAndOverflowTrigger";
+  return AnalyticPluginTypes;
+}({});

package/dist/cjs/plugins/table/pm-plugins/analytics/commands.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateRowOrColumnMovedTransform = exports.updateRowOrColumnMoved = exports.resetRowOrColumnMovedTransform = void 0;
+var _actions = require("./actions");
+var _pluginFactory = require("./plugin-factory");
+var _pluginKey = require("./plugin-key");
+var _movedEvent = require("./utils/moved-event");
+var updateRowOrColumnMoved = exports.updateRowOrColumnMoved = function updateRowOrColumnMoved(nextState, nextAction) {
+  return (0, _pluginFactory.createCommand)(function (state) {
+    var _getPluginState = (0, _pluginFactory.getPluginState)(state),
+      rowOrColumnMoved = _getPluginState.rowOrColumnMoved;
+    var data = (0, _movedEvent.getMovedPayload)(nextState, nextAction, rowOrColumnMoved);
+    return {
+      type: _actions.AnalyticPluginTypes.UpdateRowOrColumnMovedAction,
+      data: data
+    };
+  }, function (tr) {
+    return tr.setMeta('addToHistory', false);
+  });
+};
+
+// --- transforms, prefer these over commands to avoid an extra 'dispatch'
+var resetRowOrColumnMovedTransform = exports.resetRowOrColumnMovedTransform = function resetRowOrColumnMovedTransform() {
+  return function (tr) {
+    var payload = {
+      type: _actions.AnalyticPluginTypes.RemoveRowOrColumnMovedAction
+    };
+    return tr.setMeta(_pluginKey.pluginKey, payload);
+  };
+};
+var updateRowOrColumnMovedTransform = exports.updateRowOrColumnMovedTransform = function updateRowOrColumnMovedTransform(nextState, nextAction) {
+  return function (state, tr) {
+    var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
+      rowOrColumnMoved = _getPluginState2.rowOrColumnMoved;
+    var data = (0, _movedEvent.getMovedPayload)(nextState, nextAction, rowOrColumnMoved);
+    var payload = {
+      type: _actions.AnalyticPluginTypes.UpdateRowOrColumnMovedAction,
+      data: data
+    };
+    return tr.setMeta(_pluginKey.pluginKey, payload);
+  };
+};

package/dist/cjs/plugins/table/pm-plugins/analytics/plugin-factory.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPluginState = exports.createPluginState = exports.createCommand = void 0;
+var _utils = require("@atlaskit/editor-common/utils");
+var _pluginKey = require("./plugin-key");
+var _reducer = require("./reducer");
+var _pluginFactory = (0, _utils.pluginFactory)(_pluginKey.pluginKey, _reducer.reducer),
+  createPluginState = exports.createPluginState = _pluginFactory.createPluginState,
+  createCommand = exports.createCommand = _pluginFactory.createCommand,
+  getPluginState = exports.getPluginState = _pluginFactory.getPluginState;

package/dist/cjs/plugins/table/pm-plugins/analytics/plugin-key.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginKey = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var pluginKey = exports.pluginKey = new _state.PluginKey('tableAnalyticPlugin');

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

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createPlugin = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _misc = require("../../commands/misc");
+var _commands = require("./commands");
+var _pluginFactory = require("./plugin-factory");
+var _pluginKey = require("./plugin-key");
+var _types = require("./types");
+var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent) {
+  return new _safePlugin.SafePlugin({
+    key: _pluginKey.pluginKey,
+    state: (0, _pluginFactory.createPluginState)(dispatch, _types.defaultState),
+    appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      var tr = transactions.find(function (tr) {
+        var _tr$getMeta;
+        return (_tr$getMeta = tr.getMeta(_pluginKey.pluginKey)) === null || _tr$getMeta === void 0 || (_tr$getMeta = _tr$getMeta.data) === null || _tr$getMeta === void 0 || (_tr$getMeta = _tr$getMeta.currentActions) === null || _tr$getMeta === void 0 ? void 0 : _tr$getMeta.includes('pasted');
+      });
+      if (tr) {
+        var _tr$getMeta2;
+        dispatchAnalyticsEvent({
+          action: _analytics.TABLE_ACTION.ROW_OR_COLUMN_MOVED,
+          actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+          actionSubjectId: null,
+          eventType: _analytics.EVENT_TYPE.TRACK,
+          attributes: {
+            type: (_tr$getMeta2 = tr.getMeta(_pluginKey.pluginKey)) === null || _tr$getMeta2 === void 0 || (_tr$getMeta2 = _tr$getMeta2.data) === null || _tr$getMeta2 === void 0 ? void 0 : _tr$getMeta2.type
+          }
+        });
+        return (0, _commands.resetRowOrColumnMovedTransform)()(tr);
+      }
+      return undefined;
+    },
+    props: {
+      handlePaste: function handlePaste(_ref, event, slice) {
+        var state = _ref.state,
+          dispatch = _ref.dispatch;
+        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.analytics-plugin-moved-event')) {
+          var schema = state.schema;
+          var type = (0, _misc.getTableElementMoveTypeBySlice)(slice, state);
+
+          // if the selection wasn't in the first cell of a row or column, don't count it
+          if (!(0, _misc.isInsideFirstCellOfRowOrColumn)(state.selection, type)) {
+            return;
+          }
+          var count = (0, _misc.countCellsInSlice)(slice, schema, type);
+          (0, _commands.updateRowOrColumnMoved)({
+            numberOfCells: count,
+            type: type
+          }, 'pasted')(state, dispatch);
+        }
+      },
+      transformCopied: function transformCopied(slice, _ref2) {
+        var state = _ref2.state,
+          dispatch = _ref2.dispatch;
+        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.analytics-plugin-moved-event')) {
+          var schema = state.schema;
+          var type = (0, _misc.getTableSelectionType)(state.selection);
+          var count = (0, _misc.countCellsInSlice)(slice, schema, type);
+          (0, _commands.updateRowOrColumnMoved)({
+            numberOfCells: count,
+            type: type
+          }, 'copyOrCut')(state, dispatch);
+        }
+        return slice;
+      }
+    }
+  });
+};

package/dist/cjs/plugins/table/pm-plugins/analytics/reducer.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.reducer = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _actions = require("./actions");
+var _types = require("./types");
+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 reducer = exports.reducer = function reducer(state, action) {
+  switch (action.type) {
+    case _actions.AnalyticPluginTypes.UpdateRowOrColumnMovedAction:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        rowOrColumnMoved: _objectSpread(_objectSpread({}, state.rowOrColumnMoved), action.data)
+      });
+    case _actions.AnalyticPluginTypes.RemoveRowOrColumnMovedAction:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        rowOrColumnMoved: _types.defaultState.rowOrColumnMoved
+      });
+    default:
+      return state;
+  }
+};

package/dist/cjs/plugins/table/pm-plugins/analytics/types.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultState = void 0;
+var defaultState = exports.defaultState = {
+  rowOrColumnMoved: {
+    type: undefined,
+    numberOfCells: undefined,
+    currentActions: []
+  }
+};