@atlaskit/editor-plugin-table 3.0.5 → 3.1.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 3.1.1
+
+### Patch Changes
+
+- [`05b9c2db1dc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/05b9c2db1dc) - [ux] Increase visibility of table scroll shadows
+
+## 3.1.0
+
+### Minor Changes
+
+- [`20d1964ba9d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/20d1964ba9d) - Adds a new table-analytics plugin to collect payload information and dispatch a new tableOverflowChanged event
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.0.5
 
 ### Patch Changes

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

@@ -7,10 +7,12 @@ exports.addColumnAfter = void 0;
 exports.addColumnAt = addColumnAt;
 exports.insertRow = exports.insertColumn = exports.createTable = exports.addColumnBefore = void 0;
 var _steps = require("@atlaskit/adf-schema/steps");
+var _analytics = require("@atlaskit/editor-common/analytics");
 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 _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");
@@ -43,6 +45,9 @@ function addColumnAt(getEditorContainerWidth) {
         // [ED-8288] Update colwidths manually to avoid multiple dispatch in TableComponent
         updatedTr = (0, _columnWidth.rescaleColumns)(getEditorContainerWidth)(table, view)(updatedTr);
       }
+      updatedTr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_TRIGGER, {
+        name: _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.ADDED_COLUMN
+      });
       return updatedTr;
     };
   };

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

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.toggleTableLayout = exports.toggleNumberColumn = exports.toggleHeaderRow = exports.toggleHeaderColumn = exports.toggleContextualMenu = exports.getNextLayout = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
+var _tableAnalytics = require("../pm-plugins/table-analytics");
 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
 //#endregion
@@ -58,10 +60,15 @@ var toggleNumberColumn = function toggleNumberColumn(state, dispatch) {
   var _ref = (0, _utils.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 ? _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.DISABLED_NUMBERED_COLUMN : _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.ENABLED_NUMBERED_COLUMN;
+  tr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_TRIGGER, {
+    name: tableOverflowChangeTriggerName
+  });
   if (dispatch) {
     dispatch(tr);
   }
@@ -83,6 +90,9 @@ var toggleTableLayout = function toggleTableLayout(state, dispatch) {
     tr.setNodeMarkup(table.pos, state.schema.nodes.table, _objectSpread(_objectSpread({}, table.node.attrs), {}, {
       layout: layout
     }));
+    tr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_TRIGGER, {
+      name: _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
+    });
     return tr.setMeta('scrollIntoView', false);
   })(state, dispatch);
 };

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

@@ -17,6 +17,7 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
 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 _keymap = require("./pm-plugins/keymap");
@@ -24,6 +25,7 @@ var _main = require("./pm-plugins/main");
 var _pluginKey = 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");
 var _tableLocalId = require("./pm-plugins/table-local-id");
 var _tableResizing = require("./pm-plugins/table-resizing");
 var _tableSelectionKeymap = require("./pm-plugins/table-selection-keymap");
@@ -188,6 +190,14 @@ var tablesPlugin = function tablesPlugin(_ref) {
             dispatch = _ref9.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',
+        plugin: function plugin(_ref10) {
+          var _options$tableResizin;
+          var dispatch = _ref10.dispatch,
+            dispatchAnalyticsEvent = _ref10.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: 'tableGetEditorViewReferencePlugin',
         plugin: function plugin() {
@@ -216,45 +226,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.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,
           tableWidthPluginState: _tableWidth.pluginKey,
           tableResizingPluginState: _tableResizing.pluginKey,
           stickyHeadersState: _stickyHeaders.pluginKey
         },
-        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 ? (0, _stickyHeaders.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
           var LayoutContent = options && !options.tableResizingEnabled && (0, _utils3.isLayoutSupported)(state) && options.breakoutEnabled ? /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
@@ -320,8 +331,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.toolbarInsertBlockMessages.table),

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

@@ -16,6 +16,8 @@ var _react = _interopRequireDefault(require("react"));
 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");
@@ -25,6 +27,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../commands");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _stickyHeaders = require("../pm-plugins/sticky-headers");
+var _tableAnalytics = require("../pm-plugins/table-analytics");
 var _utils3 = require("../pm-plugins/table-resizing/utils");
 var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
 var _dom = require("../pm-plugins/table-resizing/utils/dom");
@@ -39,6 +42,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var isIE11 = _utils.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.
+var initialOverflowCaptureTimeroutDelay = 300;
 var TableComponent = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(TableComponent, _React$Component);
   var _super = _createSuper(TableComponent);
@@ -176,13 +183,40 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }, options), domAtPos)(state.tr);
       dispatch(tr);
     });
+    (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "setTimerToSendInitialOverflowCaptured", function (isOverflowing) {
+      var _this$state;
+      var _this$props3 = _this.props,
+        eventDispatcher = _this$props3.eventDispatcher,
+        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
+            }
+          }
+        });
+        _this.isInitialOverflowSent = true;
+      }, initialOverflowCaptureTimeroutDelay);
+    });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleAutoSize", function () {
       if (_this.table) {
-        var _this$props3 = _this.props,
-          view = _this$props3.view,
-          getNode = _this$props3.getNode,
-          getPos = _this$props3.getPos,
-          containerWidth = _this$props3.containerWidth;
+        var _this$props4 = _this.props,
+          view = _this$props4.view,
+          getNode = _this$props4.getNode,
+          getPos = _this$props4.getPos,
+          containerWidth = _this$props4.containerWidth;
         var _node = getNode();
         var pos = getPos();
         if (!(0, _utils.isValidPosition)(pos, view.state)) {
@@ -195,9 +229,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleWindowResize", function () {
       var _node$attrs, _node$attrs2;
-      var _this$props4 = _this.props,
-        getNode = _this$props4.getNode,
-        containerWidth = _this$props4.containerWidth;
+      var _this$props5 = _this.props,
+        getNode = _this$props5.getNode,
+        containerWidth = _this$props5.containerWidth;
       var node = getNode();
       var prevNode = _this.node;
       var layoutSize = _this.tableNodeLayoutSize(node);
@@ -213,11 +247,11 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       });
     });
     (0, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "getParentNodeWidth", function () {
-      var _this$props5 = _this.props,
-        getPos = _this$props5.getPos,
-        containerWidth = _this$props5.containerWidth,
-        options = _this$props5.options,
-        state = _this$props5.view.state;
+      var _this$props6 = _this.props,
+        getPos = _this$props6.getPos,
+        containerWidth = _this$props6.containerWidth,
+        options = _this$props6.options,
+        state = _this$props6.view.state;
       var pos = getPos();
       if (!(0, _utils.isValidPosition)(pos, state)) {
         return;
@@ -243,6 +277,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       _getNode = props.getNode;
     _this.node = _getNode();
     _this.containerWidth = _containerWidth;
+    _this.isInitialOverflowSent = false;
 
     // store table size using previous full-width mode so can detect if it has changed
     var isFullWidthModeEnabled = _options ? _options.wasFullWidthModeEnabled : false;
@@ -264,10 +299,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(TableComponent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props6 = this.props,
-        allowColumnResizing = _this$props6.allowColumnResizing,
-        eventDispatcher = _this$props6.eventDispatcher,
-        options = _this$props6.options;
+      var _this$props7 = this.props,
+        allowColumnResizing = _this$props7.allowColumnResizing,
+        eventDispatcher = _this$props7.eventDispatcher,
+        options = _this$props7.options;
       if (allowColumnResizing && this.wrapper && !isIE11) {
         this.wrapper.addEventListener('scroll', this.handleScrollDebounced);
       }
@@ -286,14 +321,18 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         this.onStickyState(currentStickyState);
       }
       eventDispatcher.on(_stickyHeaders.pluginKey.key, this.onStickyState);
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.overflow-state-analytics')) {
+        var initialIsOveflowing = this.state[_types.ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[_types.ShadowEvent.SHOW_AFTER_SHADOW];
+        this.setTimerToSendInitialOverflowCaptured(initialIsOveflowing);
+      }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      var _this$props7 = this.props,
-        allowColumnResizing = _this$props7.allowColumnResizing,
-        eventDispatcher = _this$props7.eventDispatcher,
-        options = _this$props7.options;
+      var _this$props8 = this.props,
+        allowColumnResizing = _this$props8.allowColumnResizing,
+        eventDispatcher = _this$props8.eventDispatcher,
+        options = _this$props8.options;
       if (this.wrapper && !isIE11) {
         this.wrapper.removeEventListener('scroll', this.handleScrollDebounced);
       }
@@ -311,18 +350,21 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         this.overflowShadowsObserver.dispose();
       }
       eventDispatcher.off(_stickyHeaders.pluginKey.key, this.onStickyState);
+      if (this.initialOverflowCaptureTimerId) {
+        clearTimeout(this.initialOverflowCaptureTimerId);
+      }
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate() {
+    value: function componentDidUpdate(_, prevState) {
       var _this$wrapper;
-      var _this$props8 = this.props,
-        view = _this$props8.view,
-        getNode = _this$props8.getNode,
-        isMediaFullscreen = _this$props8.isMediaFullscreen,
-        allowColumnResizing = _this$props8.allowColumnResizing,
-        isResizing = _this$props8.isResizing,
-        options = _this$props8.options;
+      var _this$props9 = this.props,
+        view = _this$props9.view,
+        getNode = _this$props9.getNode,
+        isMediaFullscreen = _this$props9.isMediaFullscreen,
+        allowColumnResizing = _this$props9.allowColumnResizing,
+        isResizing = _this$props9.isResizing,
+        options = _this$props9.options;
       var _getPluginState = (0, _pluginFactory.getPluginState)(view.state),
         isInDanger = _getPluginState.isInDanger;
       var table = (0, _utils2.findTable)(view.state.selection);
@@ -357,29 +399,52 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         }
         this.handleTableResizingDebounced();
       }
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.overflow-state-analytics')) {
+        var newIsOverflowing = this.state[_types.ShadowEvent.SHOW_BEFORE_SHADOW] || this.state[_types.ShadowEvent.SHOW_AFTER_SHADOW];
+        var prevIsOverflowing = prevState[_types.ShadowEvent.SHOW_BEFORE_SHADOW] || prevState[_types.ShadowEvent.SHOW_AFTER_SHADOW];
+        if (this.initialOverflowCaptureTimerId) {
+          clearTimeout(this.initialOverflowCaptureTimerId);
+        }
+        if (!this.isInitialOverflowSent) {
+          this.setTimerToSendInitialOverflowCaptured(newIsOverflowing);
+        }
+        if (this.isInitialOverflowSent && prevIsOverflowing !== newIsOverflowing) {
+          var _this$state2;
+          var _this$props$view = this.props.view,
+            dispatch = _this$props$view.dispatch,
+            tr = _this$props$view.state.tr;
+          dispatch(tr.setMeta(_tableAnalytics.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
+          }));
+        }
+      }
     }
   }, {
     key: "render",
     value: function render() {
       var _classnames,
         _this2 = this;
-      var _this$props9 = this.props,
-        view = _this$props9.view,
-        getNode = _this$props9.getNode,
-        isResizing = _this$props9.isResizing,
-        _this$props9$allowCon = _this$props9.allowControls,
-        allowControls = _this$props9$allowCon === void 0 ? true : _this$props9$allowCon,
-        isHeaderRowEnabled = _this$props9.isHeaderRowEnabled,
-        ordering = _this$props9.ordering,
-        isHeaderColumnEnabled = _this$props9.isHeaderColumnEnabled,
-        tableActive = _this$props9.tableActive,
-        containerWidth = _this$props9.containerWidth,
-        options = _this$props9.options,
-        getPos = _this$props9.getPos,
-        pluginInjectionApi = _this$props9.pluginInjectionApi;
-      var _this$state = this.state,
-        showBeforeShadow = _this$state.showBeforeShadow,
-        showAfterShadow = _this$state.showAfterShadow;
+      var _this$props10 = this.props,
+        view = _this$props10.view,
+        getNode = _this$props10.getNode,
+        isResizing = _this$props10.isResizing,
+        _this$props10$allowCo = _this$props10.allowControls,
+        allowControls = _this$props10$allowCo === void 0 ? true : _this$props10$allowCo,
+        isHeaderRowEnabled = _this$props10.isHeaderRowEnabled,
+        ordering = _this$props10.ordering,
+        isHeaderColumnEnabled = _this$props10.isHeaderColumnEnabled,
+        tableActive = _this$props10.tableActive,
+        containerWidth = _this$props10.containerWidth,
+        options = _this$props10.options,
+        getPos = _this$props10.getPos,
+        pluginInjectionApi = _this$props10.pluginInjectionApi;
+      var _this$state3 = this.state,
+        showBeforeShadow = _this$state3.showBeforeShadow,
+        showAfterShadow = _this$state3.showAfterShadow;
       var node = getNode();
       // doesn't work well with WithPluginState
       var _getPluginState2 = (0, _pluginFactory.getPluginState)(view.state),
@@ -471,7 +536,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       }), this.state.stickyHeader && /*#__PURE__*/_react.default.createElement("div", {
         style: {
           position: 'absolute',
-          right: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? "".concat(_consts.tableOverflowShadowWidth, "px") : '-2px'
+          right: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? "".concat((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.increase-shadow-visibility_lh89r') ? _consts.tableOverflowShadowWidthWide : _consts.tableOverflowShadowWidth, "px") : '-2px'
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: "".concat(_types.TableCssClassName.TABLE_RIGHT_SHADOW, " ").concat(_types.TableCssClassName.TABLE_STICKY_SHADOW),

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

@@ -11,15 +11,17 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _guideline = require("@atlaskit/editor-common/guideline");
 var _resizer = require("@atlaskit/editor-common/resizer");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
+var _tableAnalytics = require("../pm-plugins/table-analytics");
 var _utils2 = require("../pm-plugins/table-resizing/utils");
 var _tableWidth = require("../pm-plugins/table-width");
 var _consts = require("../ui/consts");
-var _analytics = require("../utils/analytics");
+var _analytics2 = require("../utils/analytics");
 var _guidelines = require("../utils/guidelines");
 var _snapping = require("../utils/snapping");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -108,7 +110,7 @@ var TableResizer = function TableResizer(_ref) {
   var handleHeightSize = getResizerHandleHeight(tableRef);
   var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
     isInDanger = _getPluginState.isInDanger;
-  var _useMeasureFramerate = (0, _analytics.useMeasureFramerate)(),
+  var _useMeasureFramerate = (0, _analytics2.useMeasureFramerate)(),
     startMeasure = _useMeasureFramerate.startMeasure,
     endMeasure = _useMeasureFramerate.endMeasure,
     countFrames = _useMeasureFramerate.countFrames;
@@ -145,6 +147,9 @@ var TableResizer = function TableResizer(_ref) {
       resizing: true
     });
     displayGapCursor(false);
+    tr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_TRIGGER, {
+      name: _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
+    });
     dispatch(tr);
     var visibleGuidelines = getVisibleGuidelines(_guidelines.defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
@@ -188,7 +193,7 @@ var TableResizer = function TableResizer(_ref) {
     });
     var frameRateSamples = endMeasure();
     if (frameRateSamples.length > 0) {
-      var resizeFrameRatePayloads = (0, _analytics.generateResizeFrameRatePayloads)({
+      var resizeFrameRatePayloads = (0, _analytics2.generateResizeFrameRatePayloads)({
         docSize: state.doc.nodeSize,
         frameRateSamples: frameRateSamples,
         originalNode: node
@@ -211,7 +216,7 @@ var TableResizer = function TableResizer(_ref) {
         parentWidth: newWidth
       }, editorView.domAtPos.bind(editorView))(tr);
       var scaledNode = tr.doc.nodeAt(pos);
-      (_attachAnalyticsEvent2 = attachAnalyticsEvent((0, _analytics.generateResizedPayload)({
+      (_attachAnalyticsEvent2 = attachAnalyticsEvent((0, _analytics2.generateResizedPayload)({
         originalNode: node,
         resizedNode: scaledNode
       }))) === null || _attachAnalyticsEvent2 === void 0 ? void 0 : _attachAnalyticsEvent2(tr);

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

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginKey = exports.createPlugin = exports.META_KEYS = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+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; } /**
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       * A plugin is created for collecting payload data for tableOverflowChanged analytics event
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                       */
+var pluginKey = new _state.PluginKey('tableAnalyticsPlugin');
+exports.pluginKey = pluginKey;
+var META_KEYS = {
+  OVERFLOW_TRIGGER: 'tableOverflowTrigger',
+  OVERFLOW_STATE_CHANGED: 'tableOverflowStateChanged'
+};
+exports.META_KEYS = META_KEYS;
+var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, tableResizingEnabled) {
+  return new _safePlugin.SafePlugin({
+    key: pluginKey,
+    state: {
+      init: function init() {
+        return {
+          lastTrigger: undefined
+        };
+      },
+      apply: function apply(tr, pluginState) {
+        var meta = tr.getMeta(META_KEYS.OVERFLOW_TRIGGER);
+        var newState = _objectSpread({}, pluginState);
+        if (meta) {
+          newState.lastTrigger = _objectSpread({}, meta);
+          dispatch(pluginKey, newState);
+          return newState;
+        }
+        return pluginState;
+      }
+    },
+    appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      var _newPluginState$lastT;
+      var newPluginState = pluginKey.getState(newState);
+      var hasAnalyticsBeenDispatched = false;
+      var 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.
+      _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.EXTERNAL;
+      transactions.forEach(function (tr) {
+        var payload = tr.getMeta(META_KEYS.OVERFLOW_STATE_CHANGED);
+        if (payload) {
+          dispatchAnalyticsEvent({
+            action: _analytics.TABLE_ACTION.OVERFLOW_CHANGED,
+            actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+            actionSubjectId: null,
+            eventType: _analytics.EVENT_TYPE.TRACK,
+            attributes: {
+              editorWidth: payload.editorWidth,
+              parentWidth: payload.parentWidth,
+              isOverflowing: payload.isOverflowing,
+              wasOverflowing: payload.wasOverflowing,
+              width: payload.width,
+              tableResizingEnabled: tableResizingEnabled,
+              trigger: lastTriggerName
+            }
+          });
+          hasAnalyticsBeenDispatched = true;
+        }
+      });
+      if (hasAnalyticsBeenDispatched) {
+        var tr = newState.tr;
+        return tr.setMeta(META_KEYS.OVERFLOW_TRIGGER, {});
+      }
+      return undefined;
+    }
+  });
+};
+exports.createPlugin = createPlugin;

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

@@ -4,8 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.stopResizing = exports.setResizeHandlePos = exports.setLastClick = exports.setDragging = exports.evenColumns = exports.distributeColumnsWidths = void 0;
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _transforms = require("../../transforms");
+var _tableAnalytics = require("../table-analytics");
 var _pluginFactory = require("./plugin-factory");
 var _utils2 = require("./utils");
 var evenColumns = function evenColumns(_ref) {
@@ -43,6 +45,9 @@ var distributeColumnsWidths = function distributeColumnsWidths(newResizeState, t
   return function (state, dispatch) {
     if (dispatch) {
       var _tr = (0, _transforms.updateColumnWidths)(newResizeState, table.node, table.start)(state.tr);
+      _tr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_TRIGGER, {
+        name: _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.DISTRIBUTED_COLUMNS
+      });
       stopResizing(_tr)(state, dispatch);
     }
     return true;

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

@@ -14,6 +14,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _misc = require("../../commands/misc");
 var _transforms = require("../../transforms");
 var _utils2 = require("../../utils");
+var _tableAnalytics = require("../table-analytics");
 var _commands = require("./commands");
 var _pluginFactory = require("./plugin-factory");
 var _utils3 = require("./utils");
@@ -26,6 +27,13 @@ var handleMouseDown = function handleMouseDown(view, event, localResizeHandlePos
     return false;
   }
   event.preventDefault();
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.overflow-state-analytics')) {
+    var tr = view.state.tr;
+    tr.setMeta(_tableAnalytics.META_KEYS.OVERFLOW_TRIGGER, {
+      name: _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED_COLUMN
+    });
+    dispatch(tr);
+  }
   var mouseDownTime = event.timeStamp;
   var cell = state.doc.nodeAt(localResizeHandlePos);
   var $cell = state.doc.resolve(localResizeHandlePos);