@atlaskit/editor-plugin-table 3.0.5 → 3.1.0

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

@@ -1,9 +1,11 @@
 // #region Imports
 import { AddColumnStep } from '@atlaskit/adf-schema/steps';
+import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 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 { 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';
@@ -33,6 +35,9 @@ export function addColumnAt(getEditorContainerWidth) {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
         updatedTr = rescaleColumns(getEditorContainerWidth)(table, view)(updatedTr);
       }
+      updatedTr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+        name: TABLE_OVERFLOW_CHANGE_TRIGGER.ADDED_COLUMN
+      });
       return updatedTr;
     };
   };

package/dist/es2019/plugins/table/commands/toggle.js

@@ -1,7 +1,9 @@
 //#region Imports
 
+import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { findTable, toggleHeader } from '@atlaskit/editor-tables/utils';
 import { createCommand } from '../pm-plugins/plugin-factory';
+import { META_KEYS } from '../pm-plugins/table-analytics';
 //#endregion
 
 // #region Utils
@@ -38,11 +40,16 @@ export const toggleNumberColumn = (state, dispatch) => {
     node,
     pos
   } = findTable(state.selection);
+  const isNumberedColumnEnabled = node.attrs.isNumberColumnEnabled;
   tr.setNodeMarkup(pos, state.schema.nodes.table, {
     ...node.attrs,
-    isNumberColumnEnabled: !node.attrs.isNumberColumnEnabled
+    isNumberColumnEnabled: !isNumberedColumnEnabled
   });
   tr.setMeta('scrollIntoView', false);
+  const tableOverflowChangeTriggerName = isNumberedColumnEnabled ? TABLE_OVERFLOW_CHANGE_TRIGGER.DISABLED_NUMBERED_COLUMN : TABLE_OVERFLOW_CHANGE_TRIGGER.ENABLED_NUMBERED_COLUMN;
+  tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+    name: tableOverflowChangeTriggerName
+  });
   if (dispatch) {
     dispatch(tr);
   }
@@ -64,6 +71,9 @@ export const toggleTableLayout = (state, dispatch) => {
       ...table.node.attrs,
       layout
     });
+    tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+      name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
+    });
     return tr.setMeta('scrollIntoView', false);
   })(state, dispatch);
 };

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

@@ -10,6 +10,7 @@ import { browser } from '@atlaskit/editor-common/utils';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 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 createDecorationsPlugin } from './pm-plugins/decorations/plugin';
 import { keymapPlugin } from './pm-plugins/keymap';
@@ -17,6 +18,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 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';
@@ -174,6 +176,15 @@ const tablesPlugin = ({
           var _options$fullWidthEna;
           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',
+        plugin: ({
+          dispatch,
+          dispatchAnalyticsEvent
+        }) => {
+          var _options$tableResizin;
+          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;
+        }
       }, {
         name: 'tableGetEditorViewReferencePlugin',
         plugin: () => {
@@ -215,6 +226,7 @@ const tablesPlugin = ({
         fallbackComponent: null
       }, /*#__PURE__*/React.createElement(WithPluginState, {
         plugins: {
+          tableAnalyticsPluginState: tableAnalyticsPluginKey,
           tablePluginState: pluginKey,
           tableWidthPluginState: tableWidthPluginKey,
           tableResizingPluginState: tableResizingPluginKey,

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

@@ -3,15 +3,18 @@ import React from 'react';
 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 { browser, isValidPosition } from '@atlaskit/editor-common/utils';
+import { analyticsEventKey, browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { autoSizeTable, clearHoverSelection } from '../commands';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
+import { META_KEYS } from '../pm-plugins/table-analytics';
 import { getLayoutSize, insertColgroupFromNode as recreateResizeColsByNode, scaleTable } from '../pm-plugins/table-resizing/utils';
 import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
@@ -22,6 +25,10 @@ import { containsHeaderRow, isTableNested, tablesHaveDifferentColumnWidths, tabl
 import { OverflowShadowsObserver } from './OverflowShadowsObserver';
 import { TableContainer } from './TableContainer';
 const isIE11 = browser.ie_version === 11;
+// When table is inserted via paste, keyboard shortcut or quickInsert,
+// componentDidUpdate is called multiple times. The isOverflowing value is correct only on the last update.
+// To make sure we capture the last update, we use setTimeout.
+const initialOverflowCaptureTimeroutDelay = 300;
 class TableComponent extends React.Component {
   constructor(props) {
     super(props);
@@ -168,6 +175,34 @@ class TableComponent extends React.Component {
       }, domAtPos)(state.tr);
       dispatch(tr);
     });
+    _defineProperty(this, "setTimerToSendInitialOverflowCaptured", isOverflowing => {
+      var _this$state;
+      const {
+        eventDispatcher,
+        containerWidth,
+        options
+      } = this.props;
+      const dispatch = createDispatch(eventDispatcher);
+      const parentWidth = ((_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.parentWidth) || 0;
+      this.initialOverflowCaptureTimerId = setTimeout(() => {
+        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,
+              tableResizingEnabled: (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) || false,
+              width: this.node.attrs.width || 0,
+              parentWidth
+            }
+          }
+        });
+        this.isInitialOverflowSent = true;
+      }, initialOverflowCaptureTimeroutDelay);
+    });
     _defineProperty(this, "handleAutoSize", () => {
       if (this.table) {
         const {
@@ -240,6 +275,7 @@ class TableComponent extends React.Component {
     } = props;
     this.node = _getNode();
     this.containerWidth = _containerWidth;
+    this.isInitialOverflowSent = false;
 
     // store table size using previous full-width mode so can detect if it has changed
     const isFullWidthModeEnabled = _options ? _options.wasFullWidthModeEnabled : false;
@@ -281,6 +317,10 @@ class TableComponent extends React.Component {
       this.onStickyState(currentStickyState);
     }
     eventDispatcher.on(stickyHeadersPluginKey.key, this.onStickyState);
+    if (getBooleanFF('platform.editor.table.overflow-state-analytics')) {
+      const initialIsOveflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+      this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
+    }
   }
   componentWillUnmount() {
     const {
@@ -305,8 +345,11 @@ class TableComponent extends React.Component {
       this.overflowShadowsObserver.dispose();
     }
     eventDispatcher.off(stickyHeadersPluginKey.key, this.onStickyState);
+    if (this.initialOverflowCaptureTimerId) {
+      clearTimeout(this.initialOverflowCaptureTimerId);
+    }
   }
-  componentDidUpdate() {
+  componentDidUpdate(_, prevState) {
     var _this$wrapper;
     const {
       view,
@@ -353,6 +396,32 @@ class TableComponent extends React.Component {
       }
       this.handleTableResizingDebounced();
     }
+    if (getBooleanFF('platform.editor.table.overflow-state-analytics')) {
+      const newIsOverflowing = this.state[ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[ShadowEvent.SHOW_AFTER_SHADOW];
+      const prevIsOverflowing = prevState[ShadowEvent.SHOW_BEFORE_SHADOW] || prevState[ShadowEvent.SHOW_AFTER_SHADOW];
+      if (this.initialOverflowCaptureTimerId) {
+        clearTimeout(this.initialOverflowCaptureTimerId);
+      }
+      if (!this.isInitialOverflowSent) {
+        this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
+      }
+      if (this.isInitialOverflowSent && prevIsOverflowing !== newIsOverflowing) {
+        var _this$state2;
+        const {
+          dispatch,
+          state: {
+            tr
+          }
+        } = this.props.view;
+        dispatch(tr.setMeta(META_KEYS.OVERFLOW_STATE_CHANGED, {
+          isOverflowing: newIsOverflowing,
+          wasOverflowing: prevIsOverflowing,
+          editorWidth: this.props.containerWidth.width || 0,
+          width: this.node.attrs.width || 0,
+          parentWidth: ((_this$state2 = this.state) === null || _this$state2 === void 0 ? void 0 : _this$state2.parentWidth) || 0
+        }));
+      }
+    }
   }
   render() {
     const {

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

@@ -1,11 +1,13 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import rafSchd from 'raf-schd';
 import { defineMessages, useIntl } from 'react-intl-next';
+import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getPluginState } from '../pm-plugins/plugin-factory';
+import { META_KEYS } from '../pm-plugins/table-analytics';
 import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
@@ -135,6 +137,9 @@ export const TableResizer = ({
       resizing: true
     });
     displayGapCursor(false);
+    tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+      name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
+    });
     dispatch(tr);
     const visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));

package/dist/es2019/plugins/table/pm-plugins/table-analytics.js

@@ -0,0 +1,74 @@
+/**
+ * A plugin is created for collecting payload data for tableOverflowChanged analytics event
+ */
+import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION, TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export const pluginKey = new PluginKey('tableAnalyticsPlugin');
+export const META_KEYS = {
+  OVERFLOW_TRIGGER: 'tableOverflowTrigger',
+  OVERFLOW_STATE_CHANGED: 'tableOverflowStateChanged'
+};
+const createPlugin = (dispatch, dispatchAnalyticsEvent, tableResizingEnabled) => new SafePlugin({
+  key: pluginKey,
+  state: {
+    init() {
+      return {
+        lastTrigger: undefined
+      };
+    },
+    apply(tr, pluginState) {
+      const meta = tr.getMeta(META_KEYS.OVERFLOW_TRIGGER);
+      const newState = {
+        ...pluginState
+      };
+      if (meta) {
+        newState.lastTrigger = {
+          ...meta
+        };
+        dispatch(pluginKey, newState);
+        return newState;
+      }
+      return pluginState;
+    }
+  },
+  appendTransaction: (transactions, oldState, newState) => {
+    var _newPluginState$lastT;
+    const newPluginState = pluginKey.getState(newState);
+    let hasAnalyticsBeenDispatched = false;
+    let lastTriggerName = (newPluginState === null || newPluginState === void 0 ? void 0 : (_newPluginState$lastT = newPluginState.lastTrigger) === null || _newPluginState$lastT === void 0 ? void 0 : _newPluginState$lastT.name) ||
+    // NOTE: We assume that we know and can correctly differentiate
+    // between all triggers of table overflow state change.
+    // The only trigger we can't identify is viewport width change.
+    // However, since there is still a chance that there are other triggers we didn't think of,
+    // all these unknown triggers and viwport width change trigger are captured as EXTERNAL.
+    TABLE_OVERFLOW_CHANGE_TRIGGER.EXTERNAL;
+    transactions.forEach(tr => {
+      const payload = tr.getMeta(META_KEYS.OVERFLOW_STATE_CHANGED);
+      if (payload) {
+        dispatchAnalyticsEvent({
+          action: TABLE_ACTION.OVERFLOW_CHANGED,
+          actionSubject: ACTION_SUBJECT.TABLE,
+          actionSubjectId: null,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            editorWidth: payload.editorWidth,
+            parentWidth: payload.parentWidth,
+            isOverflowing: payload.isOverflowing,
+            wasOverflowing: payload.wasOverflowing,
+            width: payload.width,
+            tableResizingEnabled,
+            trigger: lastTriggerName
+          }
+        });
+        hasAnalyticsBeenDispatched = true;
+      }
+    });
+    if (hasAnalyticsBeenDispatched) {
+      const tr = newState.tr;
+      return tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {});
+    }
+    return undefined;
+  }
+});
+export { createPlugin };

package/dist/es2019/plugins/table/pm-plugins/table-resizing/commands.js

@@ -1,5 +1,7 @@
+import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { isTableSelected } from '@atlaskit/editor-tables/utils';
 import { updateColumnWidths } from '../../transforms';
+import { META_KEYS } from '../table-analytics';
 import { createCommand, getPluginState } from './plugin-factory';
 import { evenAllColumnsWidths, isClickNear } from './utils';
 export const evenColumns = ({
@@ -33,6 +35,9 @@ export const evenColumns = ({
 export const distributeColumnsWidths = (newResizeState, table) => (state, dispatch) => {
   if (dispatch) {
     const tr = updateColumnWidths(newResizeState, table.node, table.start)(state.tr);
+    tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+      name: TABLE_OVERFLOW_CHANGE_TRIGGER.DISTRIBUTED_COLUMNS
+    });
     stopResizing(tr)(state, dispatch);
   }
   return true;

package/dist/es2019/plugins/table/pm-plugins/table-resizing/event-handlers.js

@@ -1,4 +1,4 @@
-import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION, TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { getParentNodeWidth } from '@atlaskit/editor-common/node-width';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
@@ -8,6 +8,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { updateResizeHandleDecorations } from '../../commands/misc';
 import { updateColumnWidths } from '../../transforms';
 import { getSelectedColumnIndexes, updateResizeHandles } from '../../utils';
+import { META_KEYS } from '../table-analytics';
 import { evenColumns, setDragging, stopResizing } from './commands';
 import { getPluginState } from './plugin-factory';
 import { currentColWidth, getLayoutSize, getResizeState, pointsAtCell, resizeColumn, updateControls } from './utils';
@@ -22,6 +23,13 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
     return false;
   }
   event.preventDefault();
+  if (getBooleanFF('platform.editor.table.overflow-state-analytics')) {
+    const tr = view.state.tr;
+    tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+      name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED_COLUMN
+    });
+    dispatch(tr);
+  }
   const mouseDownTime = event.timeStamp;
   const cell = state.doc.nodeAt(localResizeHandlePos);
   const $cell = state.doc.resolve(localResizeHandlePos);

package/dist/es2019/plugins/table/transforms/delete-columns.js

@@ -1,7 +1,9 @@
 import { AddColumnStep } from '@atlaskit/adf-schema/steps';
+import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { META_KEYS } from '../pm-plugins/table-analytics';
 import { splitCellsInColumns } from './split';
 const deleteColumnsCustomStep = rect => tr => {
   const table = findTable(tr.selection);
@@ -190,6 +192,9 @@ function fixRowSpans(table) {
   return table.type.createChecked(table.attrs, rows, table.marks);
 }
 export const deleteColumns = (rect, allowAddColumnCustomStep = false) => tr => {
+  tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+    name: TABLE_OVERFLOW_CHANGE_TRIGGER.DELETED_COLUMN
+  });
   if (allowAddColumnCustomStep) {
     return deleteColumnsCustomStep(rect)(tr);
   }

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

@@ -1,9 +1,11 @@
 // #region Imports
 import { AddColumnStep } from '@atlaskit/adf-schema/steps';
+import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 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 { 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';
@@ -35,6 +37,9 @@ export function addColumnAt(getEditorContainerWidth) {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
         updatedTr = rescaleColumns(getEditorContainerWidth)(table, view)(updatedTr);
       }
+      updatedTr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+        name: TABLE_OVERFLOW_CHANGE_TRIGGER.ADDED_COLUMN
+      });
       return updatedTr;
     };
   };

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

@@ -3,8 +3,10 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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 { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { findTable, toggleHeader } from '@atlaskit/editor-tables/utils';
 import { createCommand } from '../pm-plugins/plugin-factory';
+import { META_KEYS } from '../pm-plugins/table-analytics';
 //#endregion
 
 // #region Utils
@@ -50,10 +52,15 @@ export var toggleNumberColumn = function toggleNumberColumn(state, dispatch) {
   var _ref = findTable(state.selection),
     node = _ref.node,
     pos = _ref.pos;
+  var isNumberedColumnEnabled = node.attrs.isNumberColumnEnabled;
   tr.setNodeMarkup(pos, state.schema.nodes.table, _objectSpread(_objectSpread({}, node.attrs), {}, {
-    isNumberColumnEnabled: !node.attrs.isNumberColumnEnabled
+    isNumberColumnEnabled: !isNumberedColumnEnabled
   }));
   tr.setMeta('scrollIntoView', false);
+  var tableOverflowChangeTriggerName = isNumberedColumnEnabled ? TABLE_OVERFLOW_CHANGE_TRIGGER.DISABLED_NUMBERED_COLUMN : TABLE_OVERFLOW_CHANGE_TRIGGER.ENABLED_NUMBERED_COLUMN;
+  tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+    name: tableOverflowChangeTriggerName
+  });
   if (dispatch) {
     dispatch(tr);
   }
@@ -74,6 +81,9 @@ export var toggleTableLayout = function toggleTableLayout(state, dispatch) {
     tr.setNodeMarkup(table.pos, state.schema.nodes.table, _objectSpread(_objectSpread({}, table.node.attrs), {}, {
       layout: layout
     }));
+    tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {
+      name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
+    });
     return tr.setMeta('scrollIntoView', false);
   })(state, dispatch);
 };

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

@@ -10,6 +10,7 @@ import { browser } from '@atlaskit/editor-common/utils';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 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 createDecorationsPlugin } from './pm-plugins/decorations/plugin';
 import { keymapPlugin } from './pm-plugins/keymap';
@@ -17,6 +18,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 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';
@@ -182,6 +184,14 @@ var tablesPlugin = function tablesPlugin(_ref) {
             dispatch = _ref9.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',
+        plugin: function plugin(_ref10) {
+          var _options$tableResizin;
+          var dispatch = _ref10.dispatch,
+            dispatchAnalyticsEvent = _ref10.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;
+        }
       }, {
         name: 'tableGetEditorViewReferencePlugin',
         plugin: function plugin() {
@@ -210,45 +220,46 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
       return plugins;
     },
-    contentComponent: function contentComponent(_ref10) {
-      var editorView = _ref10.editorView,
-        popupsMountPoint = _ref10.popupsMountPoint,
-        popupsBoundariesElement = _ref10.popupsBoundariesElement,
-        popupsScrollableElement = _ref10.popupsScrollableElement,
-        dispatchAnalyticsEvent = _ref10.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref11) {
+      var editorView = _ref11.editorView,
+        popupsMountPoint = _ref11.popupsMountPoint,
+        popupsBoundariesElement = _ref11.popupsBoundariesElement,
+        popupsScrollableElement = _ref11.popupsScrollableElement,
+        dispatchAnalyticsEvent = _ref11.dispatchAnalyticsEvent;
       return /*#__PURE__*/React.createElement(ErrorBoundary, {
         component: ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
         fallbackComponent: null
       }, /*#__PURE__*/React.createElement(WithPluginState, {
         plugins: {
+          tableAnalyticsPluginState: tableAnalyticsPluginKey,
           tablePluginState: pluginKey,
           tableWidthPluginState: tableWidthPluginKey,
           tableResizingPluginState: tableResizingPluginKey,
           stickyHeadersState: stickyHeadersPluginKey
         },
-        render: function render(_ref11) {
-          var resizingPluginState = _ref11.tableResizingPluginState,
-            stickyHeadersState = _ref11.stickyHeadersState,
-            tablePluginState = _ref11.tablePluginState,
-            tableWidthPluginState = _ref11.tableWidthPluginState;
+        render: function render(_ref12) {
+          var resizingPluginState = _ref12.tableResizingPluginState,
+            stickyHeadersState = _ref12.stickyHeadersState,
+            tablePluginState = _ref12.tablePluginState,
+            tableWidthPluginState = _ref12.tableWidthPluginState;
           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 _ref12 = tablePluginState,
-            tableNode = _ref12.tableNode,
-            tablePos = _ref12.tablePos,
-            targetCellPosition = _ref12.targetCellPosition,
-            isContextualMenuOpen = _ref12.isContextualMenuOpen,
-            layout = _ref12.layout,
-            tableRef = _ref12.tableRef,
-            pluginConfig = _ref12.pluginConfig,
-            insertColumnButtonIndex = _ref12.insertColumnButtonIndex,
-            insertRowButtonIndex = _ref12.insertRowButtonIndex,
-            isHeaderColumnEnabled = _ref12.isHeaderColumnEnabled,
-            isHeaderRowEnabled = _ref12.isHeaderRowEnabled,
-            tableWrapperTarget = _ref12.tableWrapperTarget;
+          var _ref13 = tablePluginState,
+            tableNode = _ref13.tableNode,
+            tablePos = _ref13.tablePos,
+            targetCellPosition = _ref13.targetCellPosition,
+            isContextualMenuOpen = _ref13.isContextualMenuOpen,
+            layout = _ref13.layout,
+            tableRef = _ref13.tableRef,
+            pluginConfig = _ref13.pluginConfig,
+            insertColumnButtonIndex = _ref13.insertColumnButtonIndex,
+            insertRowButtonIndex = _ref13.insertRowButtonIndex,
+            isHeaderColumnEnabled = _ref13.isHeaderColumnEnabled,
+            isHeaderRowEnabled = _ref13.isHeaderRowEnabled,
+            tableWrapperTarget = _ref13.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, {
@@ -314,8 +325,8 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }));
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref13) {
-        var formatMessage = _ref13.formatMessage;
+      quickInsert: function quickInsert(_ref14) {
+        var formatMessage = _ref14.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(messages.table),