@atlaskit/editor-plugin-table 5.4.6 → 5.4.8

package/dist/es2019/plugins/table/ui/ui-styles.js

@@ -400,27 +400,24 @@ export const floatingColumnControls = props => {
   `;
 };
 export const rowControlsWrapperDotStyle = props => {
-  if (getBooleanFF('platform.editor.table.drag-and-drop')) {
-    return css`
-      div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
-        display: none;
-      }
-    `;
-  } else {
-    return css`
-      div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
-        content: ' ';
-        background-color: ${tableBorderColor(props)};
-        position: absolute;
-        height: ${lineMarkerSize}px;
-        width: ${lineMarkerSize}px;
-        border-radius: 50%;
-        pointer-events: none;
-        top: -${tableToolbarSize + tableCellBorderWidth}px;
-        right: -1px;
-      }
-    `;
-  }
+  return css`
+    // override for DnD controls
+    div.${ClassName.WITH_CONTROLS}>.${ClassName.DRAG_ROW_CONTROLS_WRAPPER}::after {
+      display: none;
+    }
+
+    div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
+      content: ' ';
+      background-color: ${tableBorderColor(props)};
+      position: absolute;
+      height: ${lineMarkerSize}px;
+      width: ${lineMarkerSize}px;
+      border-radius: 50%;
+      pointer-events: none;
+      top: -${tableToolbarSize + tableCellBorderWidth}px;
+      right: -1px;
+    }
+  `;
 };
 export const columnControlsDecoration = props => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {

package/dist/es2019/plugins/table/utils/decoration.js

@@ -8,7 +8,6 @@ import { nonNullable } from '@atlaskit/editor-common/utils';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, getCellsInRow, getSelectionRect } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName, TableDecorations } from '../types';
 import { ColumnResizeWidget } from '../ui/ColumnResizeWidget';
 const filterDecorationByKey = (key, decorationSet) => decorationSet.find(undefined, undefined, spec => spec.key.indexOf(key) > -1);
@@ -138,32 +137,28 @@ export const createColumnSelectedDecoration = tr => {
 };
 export const createColumnControlsDecoration = selection => {
   const cells = getCellsInRow(0)(selection) || [];
-  if (getBooleanFF('platform.editor.table.drag-and-drop')) {
-    return [];
-  } else {
-    let index = 0;
-    return cells.map(cell => {
-      const colspan = cell.node.attrs.colspan || 1;
-      // It's important these values are scoped locally as the widget callback could be executed anytime in the future
-      // and we want to avoid value leak
-      const startIndex = index;
-      const endIndex = startIndex + colspan;
+  let index = 0;
+  return cells.map(cell => {
+    const colspan = cell.node.attrs.colspan || 1;
+    // It's important these values are scoped locally as the widget callback could be executed anytime in the future
+    // and we want to avoid value leak
+    const startIndex = index;
+    const endIndex = startIndex + colspan;
 
-      // The next cell start index will commence from the current cell end index.
-      index = endIndex;
-      return Decoration.widget(cell.pos + 1, () => {
-        const element = document.createElement('div');
-        element.classList.add(ClassName.COLUMN_CONTROLS_DECORATIONS);
-        element.dataset.startIndex = `${startIndex}`;
-        element.dataset.endIndex = `${endIndex}`;
-        return element;
-      }, {
-        key: `${TableDecorations.COLUMN_CONTROLS_DECORATIONS}_${endIndex}`,
-        // this decoration should be the first one, even before gap cursor.
-        side: -100
-      });
+    // The next cell start index will commence from the current cell end index.
+    index = endIndex;
+    return Decoration.widget(cell.pos + 1, () => {
+      const element = document.createElement('div');
+      element.classList.add(ClassName.COLUMN_CONTROLS_DECORATIONS);
+      element.dataset.startIndex = `${startIndex}`;
+      element.dataset.endIndex = `${endIndex}`;
+      return element;
+    }, {
+      key: `${TableDecorations.COLUMN_CONTROLS_DECORATIONS}_${endIndex}`,
+      // this decoration should be the first one, even before gap cursor.
+      side: -100
     });
-  }
+  });
 };
 export const updateDecorations = (node, decorationSet, decorations, key) => {
   const filteredDecorations = filterDecorationByKey(key, decorationSet);

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

@@ -5,13 +5,12 @@ import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { addColumnAt as addColumnAtPMUtils, addRowAt, createTable as createTableNode, findTable, selectedRect } from '@atlaskit/editor-tables/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { updateRowOrColumnMovedTransform } from '../pm-plugins/analytics/commands';
 import { META_KEYS } from '../pm-plugins/table-analytics';
 import { rescaleColumns } from '../transforms/column-width';
 import { checkIfHeaderRowEnabled, copyPreviousRow } from '../utils';
 import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
-
-// #endregion
-
 function addColumnAtCustomStep(column) {
   return function (tr) {
     var table = findTable(tr.selection);
@@ -37,6 +36,11 @@ export function addColumnAt(getEditorContainerWidth) {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
         updatedTr = rescaleColumns(getEditorContainerWidth)(table, view)(updatedTr);
       }
+      if (getBooleanFF('platform.editor.table.analytics-plugin-moved-event') && view) {
+        updatedTr = updateRowOrColumnMovedTransform({
+          type: 'column'
+        }, 'addRowOrColumn')(view.state, updatedTr);
+      }
       updatedTr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
         name: TABLE_OVERFLOW_CHANGE_TRIGGER.ADDED_COLUMN
       });
@@ -120,6 +124,11 @@ export var insertRow = function insertRow(row, moveCursorToTheNewRow) {
       } else {
         tr.setSelection(selection.map(tr.doc, tr.mapping));
       }
+      if (getBooleanFF('platform.editor.table.analytics-plugin-moved-event')) {
+        updateRowOrColumnMovedTransform({
+          type: 'row'
+        }, 'addRowOrColumn')(state, tr);
+      }
       dispatch(tr);
     }
     return true;

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

@@ -1,8 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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
-
 import { closestElement, isParagraph, isTextSelection, mapSlice } from '@atlaskit/editor-common/utils';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -32,7 +30,8 @@ export var setTableRef = function setTableRef(ref) {
     var tablePos = ref && foundTable ? foundTable.pos : undefined;
     var tableWrapperTarget = closestElement(tableRef, ".".concat(ClassName.TABLE_NODE_WRAPPER)) || undefined;
     var layout = tableNode ? tableNode.attrs.layout : undefined;
-    var decorationSet = updatePluginStateDecorations(state, createColumnControlsDecoration(state.selection), TableDecorations.COLUMN_CONTROLS_DECORATIONS);
+    var _getPluginState = getPluginState(state),
+      isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
     return {
       type: 'SET_TABLE_REF',
       data: {
@@ -44,7 +43,8 @@ export var setTableRef = function setTableRef(ref) {
         isNumberColumnEnabled: checkIfNumberColumnEnabled(state.selection),
         isHeaderRowEnabled: checkIfHeaderRowEnabled(state.selection),
         isHeaderColumnEnabled: checkIfHeaderColumnEnabled(state.selection),
-        decorationSet: decorationSet,
+        // decoration set is drawn by the decoration plugin, skip this for DnD as all controls are floating
+        decorationSet: !isDragAndDropEnabled ? updatePluginStateDecorations(state, createColumnControlsDecoration(state.selection), TableDecorations.COLUMN_CONTROLS_DECORATIONS) : undefined,
         resizeHandleRowIndex: undefined,
         resizeHandleColumnIndex: undefined
       }
@@ -152,6 +152,54 @@ export var transformSliceToRemoveColumnsWidths = function transformSliceToRemove
     return maybeCell;
   });
 };
+export var 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;
+};
+export var getTableSelectionType = function getTableSelectionType(selection) {
+  if (selection instanceof CellSelection) {
+    return selection.isRowSelection() ? 'row' : selection.isColSelection() ? 'column' : undefined;
+  }
+};
+export var 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 = findTable(state.tr.selection);
+  var map = TableMap.get(table.node);
+  var slicedMap = TableMap.get(slice.content.firstChild);
+  return map.width === slicedMap.width ? 'row' : map.height === slicedMap.height ? 'column' : undefined;
+};
+export var isInsideFirstCellOfRowOrColumn = function isInsideFirstCellOfRowOrColumn(selection, type) {
+  var table = findTable(selection);
+  if (!table || !type) {
+    return;
+  }
+  var map = TableMap.get(table.node);
+  var cell = selectionCell(selection);
+  var index = map.map.findIndex(function (value) {
+    return value === cell.pos - 1;
+  });
+  return type === 'row' ? index % map.width === 0 : index < map.width;
+};
 export var deleteTable = function deleteTable(state, dispatch) {
   if (dispatch) {
     dispatch(removeTable(state.tr));
@@ -333,9 +381,9 @@ export var hideInsertColumnOrRowButton = function hideInsertColumnOrRowButton()
 export var addResizeHandleDecorations = function addResizeHandleDecorations(rowIndex, columnIndex, includeTooltip) {
   return createCommand(function (state) {
     var tableNode = findTable(state.selection);
-    var _getPluginState = getPluginState(state),
-      allowColumnResizing = _getPluginState.pluginConfig.allowColumnResizing,
-      getIntl = _getPluginState.getIntl;
+    var _getPluginState2 = getPluginState(state),
+      allowColumnResizing = _getPluginState2.pluginConfig.allowColumnResizing,
+      getIntl = _getPluginState2.getIntl;
     if (!tableNode || !allowColumnResizing) {
       return false;
     }
@@ -358,12 +406,12 @@ export var addResizeHandleDecorations = function addResizeHandleDecorations(rowI
 export var updateResizeHandleDecorations = function updateResizeHandleDecorations(rowIndex, columnIndex, includeTooltip) {
   return createCommand(function (state) {
     var tableNode = findTable(state.selection);
-    var _getPluginState2 = getPluginState(state),
-      resizeHandleRowIndex = _getPluginState2.resizeHandleRowIndex,
-      resizeHandleColumnIndex = _getPluginState2.resizeHandleColumnIndex,
-      resizeHandleIncludeTooltip = _getPluginState2.resizeHandleIncludeTooltip,
-      allowColumnResizing = _getPluginState2.pluginConfig.allowColumnResizing,
-      getIntl = _getPluginState2.getIntl;
+    var _getPluginState3 = 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/esm/plugins/table/index.js

@@ -12,6 +12,8 @@ import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
 import { createTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { pluginConfig } from './create-plugin-config';
+import { createPlugin as createTableAnalyticsPlugin } from './pm-plugins/analytics/plugin';
+import { pluginKey as tableAnalyticsPluginKey } from './pm-plugins/analytics/plugin-key';
 import { createPlugin as createDecorationsPlugin } from './pm-plugins/decorations/plugin';
 import { createPlugin as createDragAndDropPlugin, pluginKey as dragAndDropPluginKey } from './pm-plugins/drag-and-drop';
 import { keymapPlugin } from './pm-plugins/keymap';
@@ -19,7 +21,7 @@ import { createPlugin } from './pm-plugins/main';
 import { pluginKey } from './pm-plugins/plugin-key';
 import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
 import { createPlugin as createStickyHeadersPlugin, findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from './pm-plugins/sticky-headers';
-import { createPlugin as createTableAnalyticsPlugin, pluginKey as tableAnalyticsPluginKey } from './pm-plugins/table-analytics';
+import { createPlugin as createTableOverflowAnalyticsPlugin } from './pm-plugins/table-analytics';
 import { createPlugin as createTableLocalIdPlugin } from './pm-plugins/table-local-id';
 import { createPlugin as createFlexiResizingPlugin, pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
@@ -191,13 +193,22 @@ var tablesPlugin = function tablesPlugin(_ref) {
             dispatch = _ref10.dispatch;
           return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(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 getBooleanFF('platform.editor.table.overflow-state-analytics') ? createTableAnalyticsPlugin(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false) : undefined;
+          return getBooleanFF('platform.editor.table.overflow-state-analytics') ? createTableOverflowAnalyticsPlugin(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 getBooleanFF('platform.editor.table.analytics-plugin-moved-event') ? createTableAnalyticsPlugin(dispatch, dispatchAnalyticsEvent) : undefined;
         }
       }, {
         name: 'tableGetEditorViewReferencePlugin',
@@ -227,12 +238,12 @@ 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.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -246,30 +257,30 @@ var tablesPlugin = function tablesPlugin(_ref) {
           stickyHeadersState: stickyHeadersPluginKey,
           dragAndDropState: dragAndDropPluginKey
         },
-        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 ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
           var LayoutContent = options && !options.tableResizingEnabled && isLayoutSupported(state) && options.breakoutEnabled ? /*#__PURE__*/React.createElement(LayoutButton, {
@@ -347,8 +358,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.table),

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

@@ -14,10 +14,9 @@ import classnames from 'classnames';
 import memoizeOne from 'memoize-one';
 import rafSchedule from 'raf-schd';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
-import { createDispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
 import { tableMarginSides } from '@atlaskit/editor-common/styles';
-import { analyticsEventKey, browser, isValidPosition } from '@atlaskit/editor-common/utils';
+import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import { MAX_BROWSER_SCROLLBAR_HEIGHT, akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -190,25 +189,22 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_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 = createDispatch(eventDispatcher);
       var parentWidth = ((_this$state = _this.state) === null || _this$state === void 0 ? void 0 : _this$state.parentWidth) || 0;
       _this.initialOverflowCaptureTimerId = setTimeout(function () {
-        dispatch(analyticsEventKey, {
-          payload: {
-            action: TABLE_ACTION.INITIAL_OVERFLOW_CAPTURED,
-            actionSubject: ACTION_SUBJECT.TABLE,
-            actionSubjectId: null,
-            eventType: 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: TABLE_ACTION.INITIAL_OVERFLOW_CAPTURED,
+          actionSubject: ACTION_SUBJECT.TABLE,
+          actionSubjectId: null,
+          eventType: 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;
@@ -528,9 +524,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var tableRef = this.table || undefined;
       var headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
       var hasHeaderRow = containsHeaderRow(node);
-      var rowControls = /*#__PURE__*/React.createElement("div", {
-        className: ClassName.ROW_CONTROLS_WRAPPER
-      }, /*#__PURE__*/React.createElement(TableFloatingControls, {
+      var rowControls = /*#__PURE__*/React.createElement(TableFloatingControls, {
         editorView: view,
         tableRef: tableRef,
         tableNode: node,
@@ -550,7 +544,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.createElement(TableFloatingColumnControls, {
         editorView: view,
         tableRef: tableRef,

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

@@ -135,10 +135,10 @@ export var TableResizer = function TableResizer(_ref) {
     isResizing.current = true;
     var dispatch = editorView.dispatch,
       tr = editorView.state.tr;
+    displayGapCursor(false);
     tr.setMeta(tableWidthPluginKey, {
       resizing: true
     });
-    displayGapCursor(false);
     tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });

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

@@ -177,6 +177,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
             containerWidth: containerWidth,
             contentDOM: forwardRef,
             getEditorFeatureFlags: props.getEditorFeatureFlags,
+            dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
             pluginInjectionApi: props.pluginInjectionApi
           });
         }
@@ -243,7 +244,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
   return TableView;
 }(ReactNodeView);
 export { TableView as default };
-export var createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, pluginInjectionApi) {
+export var createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi) {
   var _getPluginState2 = getPluginState(view.state),
     pluginConfig = _getPluginState2.pluginConfig,
     isBreakoutEnabled = _getPluginState2.isBreakoutEnabled,
@@ -270,6 +271,7 @@ export var createTableView = function createTableView(node, view, getPos, portal
     },
     getEditorContainerWidth: getEditorContainerWidth,
     getEditorFeatureFlags: getEditorFeatureFlags,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
     hasIntlContext: hasIntlContext,
     pluginInjectionApi: pluginInjectionApi
   }).init();

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

@@ -0,0 +1,8 @@
+export var 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/esm/plugins/table/pm-plugins/analytics/commands.js

@@ -0,0 +1,39 @@
+import { AnalyticPluginTypes } from './actions';
+import { createCommand, getPluginState } from './plugin-factory';
+import { pluginKey } from './plugin-key';
+import { getMovedPayload } from './utils/moved-event';
+export var updateRowOrColumnMoved = function updateRowOrColumnMoved(nextState, nextAction) {
+  return createCommand(function (state) {
+    var _getPluginState = getPluginState(state),
+      rowOrColumnMoved = _getPluginState.rowOrColumnMoved;
+    var data = getMovedPayload(nextState, nextAction, rowOrColumnMoved);
+    return {
+      type: AnalyticPluginTypes.UpdateRowOrColumnMovedAction,
+      data: data
+    };
+  }, function (tr) {
+    return tr.setMeta('addToHistory', false);
+  });
+};
+
+// --- transforms, prefer these over commands to avoid an extra 'dispatch'
+export var resetRowOrColumnMovedTransform = function resetRowOrColumnMovedTransform() {
+  return function (tr) {
+    var payload = {
+      type: AnalyticPluginTypes.RemoveRowOrColumnMovedAction
+    };
+    return tr.setMeta(pluginKey, payload);
+  };
+};
+export var updateRowOrColumnMovedTransform = function updateRowOrColumnMovedTransform(nextState, nextAction) {
+  return function (state, tr) {
+    var _getPluginState2 = getPluginState(state),
+      rowOrColumnMoved = _getPluginState2.rowOrColumnMoved;
+    var data = getMovedPayload(nextState, nextAction, rowOrColumnMoved);
+    var payload = {
+      type: AnalyticPluginTypes.UpdateRowOrColumnMovedAction,
+      data: data
+    };
+    return tr.setMeta(pluginKey, payload);
+  };
+};

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

@@ -0,0 +1,8 @@
+import { pluginFactory } from '@atlaskit/editor-common/utils';
+import { pluginKey } from './plugin-key';
+import { reducer } from './reducer';
+var _pluginFactory = pluginFactory(pluginKey, reducer),
+  createPluginState = _pluginFactory.createPluginState,
+  createCommand = _pluginFactory.createCommand,
+  getPluginState = _pluginFactory.getPluginState;
+export { createPluginState, createCommand, getPluginState };

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

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export var pluginKey = new PluginKey('tableAnalyticPlugin');

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

@@ -0,0 +1,68 @@
+import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { countCellsInSlice, getTableElementMoveTypeBySlice, getTableSelectionType, isInsideFirstCellOfRowOrColumn } from '../../commands/misc';
+import { resetRowOrColumnMovedTransform, updateRowOrColumnMoved } from './commands';
+import { createPluginState } from './plugin-factory';
+import { pluginKey } from './plugin-key';
+import { defaultState } from './types';
+export var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent) {
+  return new SafePlugin({
+    key: pluginKey,
+    state: createPluginState(dispatch, defaultState),
+    appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      var tr = transactions.find(function (tr) {
+        var _tr$getMeta;
+        return (_tr$getMeta = tr.getMeta(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: TABLE_ACTION.ROW_OR_COLUMN_MOVED,
+          actionSubject: ACTION_SUBJECT.TABLE,
+          actionSubjectId: null,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            type: (_tr$getMeta2 = tr.getMeta(pluginKey)) === null || _tr$getMeta2 === void 0 || (_tr$getMeta2 = _tr$getMeta2.data) === null || _tr$getMeta2 === void 0 ? void 0 : _tr$getMeta2.type
+          }
+        });
+        return resetRowOrColumnMovedTransform()(tr);
+      }
+      return undefined;
+    },
+    props: {
+      handlePaste: function handlePaste(_ref, event, slice) {
+        var state = _ref.state,
+          dispatch = _ref.dispatch;
+        if (getBooleanFF('platform.editor.table.analytics-plugin-moved-event')) {
+          var schema = state.schema;
+          var type = getTableElementMoveTypeBySlice(slice, state);
+
+          // if the selection wasn't in the first cell of a row or column, don't count it
+          if (!isInsideFirstCellOfRowOrColumn(state.selection, type)) {
+            return;
+          }
+          var count = countCellsInSlice(slice, schema, type);
+          updateRowOrColumnMoved({
+            numberOfCells: count,
+            type: type
+          }, 'pasted')(state, dispatch);
+        }
+      },
+      transformCopied: function transformCopied(slice, _ref2) {
+        var state = _ref2.state,
+          dispatch = _ref2.dispatch;
+        if (getBooleanFF('platform.editor.table.analytics-plugin-moved-event')) {
+          var schema = state.schema;
+          var type = getTableSelectionType(state.selection);
+          var count = countCellsInSlice(slice, schema, type);
+          updateRowOrColumnMoved({
+            numberOfCells: count,
+            type: type
+          }, 'copyOrCut')(state, dispatch);
+        }
+        return slice;
+      }
+    }
+  });
+};