@atlaskit/editor-plugin-table 2.12.3 → 2.12.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 2.12.5
+
+### Patch Changes
+
+- [`1da71810c5d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1da71810c5d) - [Regression] Fix Invalid getPos issue happening for Table nodeviews
+
+## 2.12.4
+
+### Patch Changes
+
+- [`74cf8d56408`](https://bitbucket.org/atlassian/atlassian-frontend/commits/74cf8d56408) - ED-19748: dispatch analytics when a table is selected.
+
 ## 2.12.3
 
 ### Patch Changes

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

@@ -182,8 +182,9 @@ var tablesPlugin = function tablesPlugin(_ref) {
         name: 'tableWidth',
         plugin: function plugin(_ref9) {
           var _options$fullWidthEna;
-          var dispatch = _ref9.dispatch;
-          return options !== null && options !== void 0 && options.tableResizingEnabled ? (0, _tableWidth.createPlugin)(dispatch, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false) : undefined;
+          var dispatchAnalyticsEvent = _ref9.dispatchAnalyticsEvent,
+            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: 'tableGetEditorViewReferencePlugin',

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

@@ -153,7 +153,19 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
           var containerWidth = props.getEditorContainerWidth();
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           var isResizing = Boolean((tableResizingPluginState === null || tableResizingPluginState === void 0 ? void 0 : tableResizingPluginState.dragging) || isTableResizing);
-          var tableActive = props.getPos() === pluginState.tablePos && !isTableResizing;
+
+          /**
+           *  ED-19810
+           *  There is a getPos issue coming from this code. We need to apply this workaround for now and apply a patch
+           *  before CR6 lands in production
+           */
+          var tablePos;
+          try {
+            tablePos = typeof props.getPos === 'function' ? props.getPos() : undefined;
+          } catch (e) {
+            tablePos = undefined;
+          }
+          var tableActive = tablePos === pluginState.tablePos && !isTableResizing;
           return /*#__PURE__*/_react.default.createElement(_TableComponent.default, {
             view: props.view,
             allowColumnResizing: props.allowColumnResizing,

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

@@ -8,10 +8,12 @@ exports.pluginKey = exports.createPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _steps = require("@atlaskit/adf-schema/steps");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _utils = require("@atlaskit/editor-tables/utils");
 var _excluded = ["width"];
 /**
  * A plugin for handle table custom widths
@@ -22,7 +24,7 @@ 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) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var pluginKey = new _state.PluginKey('tableWidthPlugin');
 exports.pluginKey = pluginKey;
-var createPlugin = function createPlugin(dispatch, fullWidthEnabled) {
+var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled) {
   return new _safePlugin.SafePlugin({
     key: pluginKey,
     state: {
@@ -43,7 +45,27 @@ var createPlugin = function createPlugin(dispatch, fullWidthEnabled) {
         return pluginState;
       }
     },
-    appendTransaction: function appendTransaction(transactions, _oldState, newState) {
+    appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      // do not fire select table analytics events when a table is being created or deleted
+      var selectedTableOldState = (0, _utils.findTable)(oldState.selection);
+      var selectedTableNewState = (0, _utils.findTable)(newState.selection);
+
+      /**
+       * Select table event
+       *   condition: 1
+       * When users selection changes to table
+       */
+      if (!selectedTableOldState && selectedTableNewState) {
+        dispatchAnalyticsEvent({
+          action: _analytics.ACTION.SELECTED,
+          actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+          actionSubjectId: _analytics.ACTION_SUBJECT_ID.TABLE,
+          eventType: _analytics.EVENT_TYPE.TRACK,
+          attributes: {
+            localId: selectedTableNewState.node.attrs.localId || ''
+          }
+        });
+      }
       // When document first load in Confluence, initially it is an empty document
       // and Collab service triggers a transaction to replace the empty document with the real document that should be rendered.
       // what we need to do is to add width attr to all tables in the real document
@@ -57,7 +79,7 @@ var createPlugin = function createPlugin(dispatch, fullWidthEnabled) {
             return false;
           }
           var isStepReplacingFromDocStart = step.from === 0;
-          var isStepReplacingUntilTheEndOfDocument = step.to === _oldState.doc.content.size;
+          var isStepReplacingUntilTheEndOfDocument = step.to === oldState.doc.content.size;
           if (!isStepReplacingFromDocStart || !isStepReplacingUntilTheEndOfDocument) {
             return false;
           }
@@ -70,6 +92,23 @@ var createPlugin = function createPlugin(dispatch, fullWidthEnabled) {
       }
       var tr = newState.tr;
       var table = newState.schema.nodes.table;
+
+      /**
+       * Select table event
+       *   condition: 2
+       * Users selection defaults to table, if first node
+       */
+      if (selectedTableOldState) {
+        dispatchAnalyticsEvent({
+          action: _analytics.ACTION.SELECTED,
+          actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
+          actionSubjectId: _analytics.ACTION_SUBJECT_ID.TABLE,
+          eventType: _analytics.EVENT_TYPE.TRACK,
+          attributes: {
+            localId: selectedTableOldState.node.attrs.localId || ''
+          }
+        });
+      }
       newState.doc.forEach(function (node, offset) {
         if (node.type === table) {
           var width = node.attrs.width;

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

@@ -165,10 +165,11 @@ const tablesPlugin = ({
       }, {
         name: 'tableWidth',
         plugin: ({
+          dispatchAnalyticsEvent,
           dispatch
         }) => {
           var _options$fullWidthEna;
-          return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(dispatch, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false) : undefined;
+          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: 'tableGetEditorViewReferencePlugin',

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

@@ -125,7 +125,19 @@ export default class TableView extends ReactNodeView {
         const containerWidth = props.getEditorContainerWidth();
         const isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
         const isResizing = Boolean((tableResizingPluginState === null || tableResizingPluginState === void 0 ? void 0 : tableResizingPluginState.dragging) || isTableResizing);
-        const tableActive = props.getPos() === pluginState.tablePos && !isTableResizing;
+
+        /**
+         *  ED-19810
+         *  There is a getPos issue coming from this code. We need to apply this workaround for now and apply a patch
+         *  before CR6 lands in production
+         */
+        let tablePos;
+        try {
+          tablePos = typeof props.getPos === 'function' ? props.getPos() : undefined;
+        } catch (e) {
+          tablePos = undefined;
+        }
+        const tableActive = tablePos === pluginState.tablePos && !isTableResizing;
         return /*#__PURE__*/React.createElement(TableComponent, {
           view: props.view,
           allowColumnResizing: props.allowColumnResizing,

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

@@ -5,12 +5,14 @@
  */
 
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { findTable } from '@atlaskit/editor-tables/utils';
 export const pluginKey = new PluginKey('tableWidthPlugin');
-const createPlugin = (dispatch, fullWidthEnabled) => new SafePlugin({
+const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled) => new SafePlugin({
   key: pluginKey,
   state: {
     init() {
@@ -30,7 +32,27 @@ const createPlugin = (dispatch, fullWidthEnabled) => new SafePlugin({
       return pluginState;
     }
   },
-  appendTransaction: (transactions, _oldState, newState) => {
+  appendTransaction: (transactions, oldState, newState) => {
+    // do not fire select table analytics events when a table is being created or deleted
+    const selectedTableOldState = findTable(oldState.selection);
+    const selectedTableNewState = findTable(newState.selection);
+
+    /**
+     * Select table event
+     *   condition: 1
+     * When users selection changes to table
+     */
+    if (!selectedTableOldState && selectedTableNewState) {
+      dispatchAnalyticsEvent({
+        action: ACTION.SELECTED,
+        actionSubject: ACTION_SUBJECT.DOCUMENT,
+        actionSubjectId: ACTION_SUBJECT_ID.TABLE,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          localId: selectedTableNewState.node.attrs.localId || ''
+        }
+      });
+    }
     // When document first load in Confluence, initially it is an empty document
     // and Collab service triggers a transaction to replace the empty document with the real document that should be rendered.
     // what we need to do is to add width attr to all tables in the real document
@@ -44,7 +66,7 @@ const createPlugin = (dispatch, fullWidthEnabled) => new SafePlugin({
           return false;
         }
         const isStepReplacingFromDocStart = step.from === 0;
-        const isStepReplacingUntilTheEndOfDocument = step.to === _oldState.doc.content.size;
+        const isStepReplacingUntilTheEndOfDocument = step.to === oldState.doc.content.size;
         if (!isStepReplacingFromDocStart || !isStepReplacingUntilTheEndOfDocument) {
           return false;
         }
@@ -59,6 +81,23 @@ const createPlugin = (dispatch, fullWidthEnabled) => new SafePlugin({
     const {
       table
     } = newState.schema.nodes;
+
+    /**
+     * Select table event
+     *   condition: 2
+     * Users selection defaults to table, if first node
+     */
+    if (selectedTableOldState) {
+      dispatchAnalyticsEvent({
+        action: ACTION.SELECTED,
+        actionSubject: ACTION_SUBJECT.DOCUMENT,
+        actionSubjectId: ACTION_SUBJECT_ID.TABLE,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          localId: selectedTableOldState.node.attrs.localId || ''
+        }
+      });
+    }
     newState.doc.forEach((node, offset) => {
       if (node.type === table) {
         const width = node.attrs.width;

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

@@ -175,8 +175,9 @@ var tablesPlugin = function tablesPlugin(_ref) {
         name: 'tableWidth',
         plugin: function plugin(_ref9) {
           var _options$fullWidthEna;
-          var dispatch = _ref9.dispatch;
-          return options !== null && options !== void 0 && options.tableResizingEnabled ? createTableWidthPlugin(dispatch, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false) : undefined;
+          var dispatchAnalyticsEvent = _ref9.dispatchAnalyticsEvent,
+            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: 'tableGetEditorViewReferencePlugin',

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

@@ -146,7 +146,19 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
           var containerWidth = props.getEditorContainerWidth();
           var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
           var isResizing = Boolean((tableResizingPluginState === null || tableResizingPluginState === void 0 ? void 0 : tableResizingPluginState.dragging) || isTableResizing);
-          var tableActive = props.getPos() === pluginState.tablePos && !isTableResizing;
+
+          /**
+           *  ED-19810
+           *  There is a getPos issue coming from this code. We need to apply this workaround for now and apply a patch
+           *  before CR6 lands in production
+           */
+          var tablePos;
+          try {
+            tablePos = typeof props.getPos === 'function' ? props.getPos() : undefined;
+          } catch (e) {
+            tablePos = undefined;
+          }
+          var tableActive = tablePos === pluginState.tablePos && !isTableResizing;
           return /*#__PURE__*/React.createElement(TableComponent, {
             view: props.view,
             allowColumnResizing: props.allowColumnResizing,

package/dist/esm/plugins/table/pm-plugins/table-width.js

@@ -10,12 +10,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { findTable } from '@atlaskit/editor-tables/utils';
 export var pluginKey = new PluginKey('tableWidthPlugin');
-var createPlugin = function createPlugin(dispatch, fullWidthEnabled) {
+var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled) {
   return new SafePlugin({
     key: pluginKey,
     state: {
@@ -36,7 +38,27 @@ var createPlugin = function createPlugin(dispatch, fullWidthEnabled) {
         return pluginState;
       }
     },
-    appendTransaction: function appendTransaction(transactions, _oldState, newState) {
+    appendTransaction: function appendTransaction(transactions, oldState, newState) {
+      // do not fire select table analytics events when a table is being created or deleted
+      var selectedTableOldState = findTable(oldState.selection);
+      var selectedTableNewState = findTable(newState.selection);
+
+      /**
+       * Select table event
+       *   condition: 1
+       * When users selection changes to table
+       */
+      if (!selectedTableOldState && selectedTableNewState) {
+        dispatchAnalyticsEvent({
+          action: ACTION.SELECTED,
+          actionSubject: ACTION_SUBJECT.DOCUMENT,
+          actionSubjectId: ACTION_SUBJECT_ID.TABLE,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            localId: selectedTableNewState.node.attrs.localId || ''
+          }
+        });
+      }
       // When document first load in Confluence, initially it is an empty document
       // and Collab service triggers a transaction to replace the empty document with the real document that should be rendered.
       // what we need to do is to add width attr to all tables in the real document
@@ -50,7 +72,7 @@ var createPlugin = function createPlugin(dispatch, fullWidthEnabled) {
             return false;
           }
           var isStepReplacingFromDocStart = step.from === 0;
-          var isStepReplacingUntilTheEndOfDocument = step.to === _oldState.doc.content.size;
+          var isStepReplacingUntilTheEndOfDocument = step.to === oldState.doc.content.size;
           if (!isStepReplacingFromDocStart || !isStepReplacingUntilTheEndOfDocument) {
             return false;
           }
@@ -63,6 +85,23 @@ var createPlugin = function createPlugin(dispatch, fullWidthEnabled) {
       }
       var tr = newState.tr;
       var table = newState.schema.nodes.table;
+
+      /**
+       * Select table event
+       *   condition: 2
+       * Users selection defaults to table, if first node
+       */
+      if (selectedTableOldState) {
+        dispatchAnalyticsEvent({
+          action: ACTION.SELECTED,
+          actionSubject: ACTION_SUBJECT.DOCUMENT,
+          actionSubjectId: ACTION_SUBJECT_ID.TABLE,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            localId: selectedTableOldState.node.attrs.localId || ''
+          }
+        });
+      }
       newState.doc.forEach(function (node, offset) {
         if (node.type === table) {
           var width = node.attrs.width;

package/dist/types/plugins/table/pm-plugins/table-width.d.ts

@@ -3,6 +3,7 @@
  * Has login to scan the document, add width value to table's width attribute when necessary
  * Also holds resizing state to hide / show table controls
  */
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
@@ -10,7 +11,7 @@ type TableWidthPluginState = {
     resizing: boolean;
 };
 export declare const pluginKey: PluginKey<TableWidthPluginState>;
-declare const createPlugin: (dispatch: Dispatch, fullWidthEnabled: boolean) => SafePlugin<{
+declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean) => SafePlugin<{
     resizing: boolean;
 }>;
 export { createPlugin };

package/dist/types-ts4.5/plugins/table/pm-plugins/table-width.d.ts

@@ -3,6 +3,7 @@
  * Has login to scan the document, add width value to table's width attribute when necessary
  * Also holds resizing state to hide / show table controls
  */
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
@@ -10,7 +11,7 @@ type TableWidthPluginState = {
     resizing: boolean;
 };
 export declare const pluginKey: PluginKey<TableWidthPluginState>;
-declare const createPlugin: (dispatch: Dispatch, fullWidthEnabled: boolean) => SafePlugin<{
+declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean) => SafePlugin<{
     resizing: boolean;
 }>;
 export { createPlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.12.3",
+  "version": "2.12.5",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
     "@atlaskit/editor-tables": "^2.3.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
-    "@atlaskit/theme": "^12.5.0",
+    "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.18.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@babel/runtime": "^7.0.0",

package/src/plugins/table/index.tsx

@@ -268,10 +268,11 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
         },
         {
           name: 'tableWidth',
-          plugin: ({ dispatch }) =>
+          plugin: ({ dispatchAnalyticsEvent, dispatch }) =>
             options?.tableResizingEnabled
               ? createTableWidthPlugin(
                   dispatch,
+                  dispatchAnalyticsEvent,
                   options?.fullWidthEnabled ?? false,
                 )
               : undefined,

package/src/plugins/table/nodeviews/table.tsx

@@ -221,8 +221,22 @@ export default class TableView extends ReactNodeView<Props> {
           const isResizing = Boolean(
             tableResizingPluginState?.dragging || isTableResizing,
           );
+
+          /**
+           *  ED-19810
+           *  There is a getPos issue coming from this code. We need to apply this workaround for now and apply a patch
+           *  before CR6 lands in production
+           */
+          let tablePos: number | undefined;
+          try {
+            tablePos =
+              typeof props.getPos === 'function' ? props.getPos() : undefined;
+          } catch (e) {
+            tablePos = undefined;
+          }
+
           const tableActive =
-            props.getPos() === pluginState!.tablePos && !isTableResizing;
+            tablePos === pluginState!.tablePos && !isTableResizing;
 
           return (
             <TableComponent

package/src/plugins/table/pm-plugins/table-width.ts

@@ -5,6 +5,13 @@
  */
 
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
+import {
+  ACTION,
+  ACTION_SUBJECT,
+  ACTION_SUBJECT_ID,
+  EVENT_TYPE,
+} from '@atlaskit/editor-common/analytics';
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
@@ -14,6 +21,7 @@ import {
   akEditorFullWidthLayoutWidth,
   akEditorWideLayoutWidth,
 } from '@atlaskit/editor-shared-styles';
+import { findTable } from '@atlaskit/editor-tables/utils';
 
 type __ReplaceStep = ReplaceStep & {
   // Properties `to` and `from` are private attributes of ReplaceStep.
@@ -29,7 +37,11 @@ export const pluginKey = new PluginKey<TableWidthPluginState>(
   'tableWidthPlugin',
 );
 
-const createPlugin = (dispatch: Dispatch, fullWidthEnabled: boolean) =>
+const createPlugin = (
+  dispatch: Dispatch,
+  dispatchAnalyticsEvent: DispatchAnalyticsEvent,
+  fullWidthEnabled: boolean,
+) =>
   new SafePlugin({
     key: pluginKey,
     state: {
@@ -50,7 +62,27 @@ const createPlugin = (dispatch: Dispatch, fullWidthEnabled: boolean) =>
         return pluginState;
       },
     },
-    appendTransaction: (transactions, _oldState, newState) => {
+    appendTransaction: (transactions, oldState, newState) => {
+      // do not fire select table analytics events when a table is being created or deleted
+      const selectedTableOldState = findTable(oldState.selection);
+      const selectedTableNewState = findTable(newState.selection);
+
+      /**
+       * Select table event
+       *   condition: 1
+       * When users selection changes to table
+       */
+      if (!selectedTableOldState && selectedTableNewState) {
+        dispatchAnalyticsEvent({
+          action: ACTION.SELECTED,
+          actionSubject: ACTION_SUBJECT.DOCUMENT,
+          actionSubjectId: ACTION_SUBJECT_ID.TABLE,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            localId: selectedTableNewState.node.attrs.localId || '',
+          },
+        });
+      }
       // When document first load in Confluence, initially it is an empty document
       // and Collab service triggers a transaction to replace the empty document with the real document that should be rendered.
       // what we need to do is to add width attr to all tables in the real document
@@ -68,7 +100,7 @@ const createPlugin = (dispatch: Dispatch, fullWidthEnabled: boolean) =>
           const isStepReplacingFromDocStart =
             (step as __ReplaceStep).from === 0;
           const isStepReplacingUntilTheEndOfDocument =
-            (step as __ReplaceStep).to === _oldState.doc.content.size;
+            (step as __ReplaceStep).to === oldState.doc.content.size;
 
           if (
             !isStepReplacingFromDocStart ||
@@ -89,6 +121,23 @@ const createPlugin = (dispatch: Dispatch, fullWidthEnabled: boolean) =>
       const tr = newState.tr;
       const { table } = newState.schema.nodes;
 
+      /**
+       * Select table event
+       *   condition: 2
+       * Users selection defaults to table, if first node
+       */
+      if (selectedTableOldState) {
+        dispatchAnalyticsEvent({
+          action: ACTION.SELECTED,
+          actionSubject: ACTION_SUBJECT.DOCUMENT,
+          actionSubjectId: ACTION_SUBJECT_ID.TABLE,
+          eventType: EVENT_TYPE.TRACK,
+          attributes: {
+            localId: selectedTableOldState.node.attrs.localId || '',
+          },
+        });
+      }
+
       newState.doc.forEach((node, offset) => {
         if (node.type === table) {
           const width = node.attrs.width;

package/src/__tests__/integration/__snapshots__/change-date-inside-table.ts.snap

@@ -1,173 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`change-date-inside-table.ts: Change date inside table 1`] = `
-Object {
-  "content": Array [
-    Object {
-      "attrs": Object {
-        "__autoSize": false,
-        "isNumberColumnEnabled": false,
-        "layout": "default",
-        "localId": "abc-123",
-      },
-      "content": Array [
-        Object {
-          "content": Array [
-            Object {
-              "attrs": Object {
-                "background": null,
-                "colspan": 1,
-                "colwidth": null,
-                "rowspan": 1,
-              },
-              "content": Array [
-                Object {
-                  "content": Array [
-                    Object {
-                      "attrs": Object {
-                        "timestamp": "1502841600000",
-                      },
-                      "type": "date",
-                    },
-                    Object {
-                      "text": " ",
-                      "type": "text",
-                    },
-                  ],
-                  "type": "paragraph",
-                },
-              ],
-              "type": "tableHeader",
-            },
-            Object {
-              "attrs": Object {
-                "background": null,
-                "colspan": 1,
-                "colwidth": null,
-                "rowspan": 1,
-              },
-              "content": Array [
-                Object {
-                  "type": "paragraph",
-                },
-              ],
-              "type": "tableHeader",
-            },
-            Object {
-              "attrs": Object {
-                "background": null,
-                "colspan": 1,
-                "colwidth": null,
-                "rowspan": 1,
-              },
-              "content": Array [
-                Object {
-                  "type": "paragraph",
-                },
-              ],
-              "type": "tableHeader",
-            },
-          ],
-          "type": "tableRow",
-        },
-        Object {
-          "content": Array [
-            Object {
-              "attrs": Object {
-                "background": null,
-                "colspan": 1,
-                "colwidth": null,
-                "rowspan": 1,
-              },
-              "content": Array [
-                Object {
-                  "type": "paragraph",
-                },
-              ],
-              "type": "tableCell",
-            },
-            Object {
-              "attrs": Object {
-                "background": null,
-                "colspan": 1,
-                "colwidth": null,
-                "rowspan": 1,
-              },
-              "content": Array [
-                Object {
-                  "type": "paragraph",
-                },
-              ],
-              "type": "tableCell",
-            },
-            Object {
-              "attrs": Object {
-                "background": null,
-                "colspan": 1,
-                "colwidth": null,
-                "rowspan": 1,
-              },
-              "content": Array [
-                Object {
-                  "type": "paragraph",
-                },
-              ],
-              "type": "tableCell",
-            },
-          ],
-          "type": "tableRow",
-        },
-        Object {
-          "content": Array [
-            Object {
-              "attrs": Object {
-                "background": null,
-                "colspan": 1,
-                "colwidth": null,
-                "rowspan": 1,
-              },
-              "content": Array [
-                Object {
-                  "type": "paragraph",
-                },
-              ],
-              "type": "tableCell",
-            },
-            Object {
-              "attrs": Object {
-                "background": null,
-                "colspan": 1,
-                "colwidth": null,
-                "rowspan": 1,
-              },
-              "content": Array [
-                Object {
-                  "type": "paragraph",
-                },
-              ],
-              "type": "tableCell",
-            },
-            Object {
-              "attrs": Object {
-                "background": null,
-                "colspan": 1,
-                "colwidth": null,
-                "rowspan": 1,
-              },
-              "content": Array [
-                Object {
-                  "type": "paragraph",
-                },
-              ],
-              "type": "tableCell",
-            },
-          ],
-          "type": "tableRow",
-        },
-      ],
-      "type": "table",
-    },
-  ],
-  "type": "doc",
-}
-`;

package/src/__tests__/integration/change-date-inside-table.ts

@@ -1,46 +0,0 @@
-import {
-  editable,
-  fullpage,
-  getDocFromElement,
-  insertBlockMenuItem,
-  quickInsert,
-} from '@atlaskit/editor-test-helpers/integration/helpers';
-import {
-  goToEditorTestingWDExample,
-  mountEditor,
-} from '@atlaskit/editor-test-helpers/testing-example-page';
-import { BrowserTestCase } from '@atlaskit/webdriver-runner/runner';
-
-const calendar = '[aria-label="calendar"]';
-const nextDate = 'button[aria-selected=true] + button';
-
-BrowserTestCase(
-  'change-date-inside-table.ts: Change date inside table',
-  {},
-  async (client: any, testName: string) => {
-    const page = await goToEditorTestingWDExample(
-      client,
-      'editor-plugin-table',
-    );
-    await mountEditor(page, {
-      appearance: fullpage.appearance,
-      allowDate: true,
-      allowTables: {
-        advanced: true,
-      },
-    });
-
-    await page.click(editable);
-
-    // Insert table
-    await quickInsert(page, 'Table');
-    // Insert Date
-    await insertBlockMenuItem(page, 'Date');
-    expect(await page.isExisting(calendar)).toBe(true);
-
-    await page.click(nextDate);
-
-    const doc = await page.$eval(editable, getDocFromElement);
-    expect(doc).toMatchCustomDocSnapshot(testName);
-  },
-);