@atlaskit/editor-plugin-table 2.12.3 → 2.12.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 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/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/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/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.4",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

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/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;