@atlaskit/editor-plugin-table 2.5.4 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 2.6.0
+
+### Minor Changes
+
+- [`0ae6f70038a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0ae6f70038a) - [ED-17635] Add analytics event for table width resizing
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.5.5
+
+### Patch Changes
+
+- [`d55db921de3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d55db921de3) - improve performance when adding a new column in table
+
 ## 2.5.4
 
 ### Patch Changes

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

@@ -71,8 +71,11 @@ var ResizableTableContainer = function ResizableTableContainer(_ref2) {
       guidelines: guidelines
     })) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : false;
   }, [pluginInjectionApi, editorView]);
+  var attachAnalyticsEvent = (0, _react.useCallback)(function (payload) {
+    var _pluginInjectionApi$d5;
+    return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d5 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d5 === void 0 ? void 0 : _pluginInjectionApi$d5.analytics.actions.attachAnalyticsEvent(payload);
+  }, [pluginInjectionApi]);
   var tableWidth = (0, _nodeWidth.getTableContainerWidth)(node);
-
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   var responsiveContainerWidth = containerWidth - 76;
   var width = Math.min(tableWidth, responsiveContainerWidth);
@@ -93,7 +96,8 @@ var ResizableTableContainer = function ResizableTableContainer(_ref2) {
     getPos: getPos,
     node: node,
     tableRef: tableRef,
-    displayGuideline: displayGuideline
+    displayGuideline: displayGuideline,
+    attachAnalyticsEvent: attachAnalyticsEvent
   }, /*#__PURE__*/_react.default.createElement(InnerContainer, {
     className: className,
     node: node

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

@@ -10,11 +10,14 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _guideline = require("@atlaskit/editor-common/guideline");
 var _resizer = require("@atlaskit/editor-common/resizer");
+var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("../pm-plugins/table-resizing/utils");
 var _tableWidth = require("../pm-plugins/table-width");
 var _consts = require("../ui/consts");
+var _utils2 = require("../utils");
 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); }
@@ -25,6 +28,23 @@ var handles = {
   right: true
 };
 var tableHandleMarginTop = 11;
+var generateResizedPayload = function generateResizedPayload(props) {
+  var _props$originalNode$a;
+  var tableMap = _editorTables.TableMap.get(props.resizedNode);
+  return {
+    action: _analytics.TABLE_ACTION.RESIZED,
+    actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+    eventType: _analytics.EVENT_TYPE.TRACK,
+    attributes: {
+      newWidth: props.resizedNode.attrs.width,
+      prevWidth: (_props$originalNode$a = props.originalNode.attrs.width) !== null && _props$originalNode$a !== void 0 ? _props$originalNode$a : null,
+      nodeSize: props.resizedNode.nodeSize,
+      totalTableWidth: (0, _utils.hasTableBeenResized)(props.resizedNode) ? (0, _utils2.getTableWidth)(props.resizedNode) : null,
+      totalRowCount: tableMap.height,
+      totalColumnCount: tableMap.width
+    }
+  };
+};
 var TableResizer = function TableResizer(_ref) {
   var children = _ref.children,
     width = _ref.width,
@@ -34,7 +54,8 @@ var TableResizer = function TableResizer(_ref) {
     getPos = _ref.getPos,
     node = _ref.node,
     tableRef = _ref.tableRef,
-    displayGuideline = _ref.displayGuideline;
+    displayGuideline = _ref.displayGuideline,
+    attachAnalyticsEvent = _ref.attachAnalyticsEvent;
   var currentColumnCount = (0, _utils.getColgroupChildrenLength)(node);
   var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * _utils.COLUMN_MIN_WIDTH : 3 * _utils.COLUMN_MIN_WIDTH;
   var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
@@ -88,6 +109,7 @@ var TableResizer = function TableResizer(_ref) {
       resizing: false
     });
     if (typeof pos === 'number') {
+      var _attachAnalyticsEvent;
       tr = tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
         width: newWidth
       }));
@@ -98,6 +120,11 @@ var TableResizer = function TableResizer(_ref) {
         start: pos + 1,
         parentWidth: newWidth
       }, editorView.domAtPos.bind(editorView))(tr);
+      var scaledNode = tr.doc.nodeAt(pos);
+      (_attachAnalyticsEvent = attachAnalyticsEvent(generateResizedPayload({
+        originalNode: node,
+        resizedNode: scaledNode
+      }))) === null || _attachAnalyticsEvent === void 0 ? void 0 : _attachAnalyticsEvent(tr);
     }
     dispatch(tr);
 
@@ -105,7 +132,26 @@ var TableResizer = function TableResizer(_ref) {
     displayGuideline([]);
     updateWidth(newWidth);
     return newWidth;
-  }, [updateWidth, editorView, getPos, node, tableRef, displayGuideline]);
+  }, [updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent]);
+  var handleResize = (0, _react.useCallback)(function (originalState, delta) {
+    var newWidth = originalState.width + delta.width;
+    var pos = getPos();
+    if (typeof pos !== 'number') {
+      return;
+    }
+    (0, _utils.previewScaleTable)(tableRef, {
+      node: node,
+      prevNode: node,
+      start: pos + 1,
+      parentWidth: newWidth
+    }, editorView.domAtPos.bind(editorView));
+    updateActiveGuidelines((0, _snapping.findClosestSnap)(newWidth, _guidelines.defaultGuidelineWidths, _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP));
+    updateWidth(newWidth);
+    return newWidth;
+  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines]);
+  var scheduleResize = (0, _react.useMemo)(function () {
+    return (0, _rafSchd.default)(handleResize);
+  }, [handleResize]);
   return /*#__PURE__*/_react.default.createElement(_resizer.ResizerNext, {
     enable: handles,
     width: width,
@@ -113,22 +159,7 @@ var TableResizer = function TableResizer(_ref) {
     handleHeightSize: handleHeightSize,
     handleMarginTop: tableHandleMarginTop,
     handleResizeStart: handleResizeStart,
-    handleResize: (0, _rafSchd.default)(function (originalState, delta) {
-      var newWidth = originalState.width + delta.width;
-      var pos = getPos();
-      if (typeof pos !== 'number') {
-        return;
-      }
-      (0, _utils.previewScaleTable)(tableRef, {
-        node: node,
-        prevNode: node,
-        start: pos + 1,
-        parentWidth: newWidth
-      }, editorView.domAtPos.bind(editorView));
-      updateActiveGuidelines((0, _snapping.findClosestSnap)(newWidth, _guidelines.defaultGuidelineWidths, _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP));
-      updateWidth(newWidth);
-      return newWidth;
-    }),
+    handleResize: scheduleResize,
     handleResizeStop: handleResizeStop,
     resizeRatio: 2,
     minWidth: minColumnWidth,

package/dist/cjs/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -32,22 +32,6 @@ var anyChildCellMergedAcrossRow = function anyChildCellMergedAcrossRow(node) {
   });
 };
 
-/**
- * Compare two table row nodes and return true if the two table rows have a
- * different number of table cells or if table cell row spans are different
- */
-var rowHasDifferentMergedCells = function rowHasDifferentMergedCells(prevNode, incomingNode) {
-  var incomingNodeChildrenRowSpan = (0, _utils.mapChildren)(prevNode, function (child) {
-    return child.attrs.rowspan || 0;
-  });
-  var currentNodeChildrenRowSpan = (0, _utils.mapChildren)(incomingNode, function (child) {
-    return child.attrs.rowspan || 0;
-  });
-  return incomingNodeChildrenRowSpan.length !== currentNodeChildrenRowSpan.length || currentNodeChildrenRowSpan.some(function (child, index) {
-    return child !== incomingNodeChildrenRowSpan[index];
-  });
-};
-
 /**
  * Check if a given node is a header row with this definition:
  *  - all children are tableHeader cells
@@ -512,10 +496,6 @@ var TableRowNodeView = /*#__PURE__*/function () {
         return false; // re-create nodeview
       }
 
-      if (rowHasDifferentMergedCells(this.node, node)) {
-        return false;
-      }
-
       // node is different but no need to re-create nodeview
       this.node = node;
 

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.5.4",
+	"version": "2.6.0",
 	"sideEffects": false
 }

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

@@ -62,8 +62,11 @@ export const ResizableTableContainer = ({
       guidelines
     })) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : false;
   }, [pluginInjectionApi, editorView]);
+  const attachAnalyticsEvent = useCallback(payload => {
+    var _pluginInjectionApi$d5;
+    return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d5 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d5 === void 0 ? void 0 : _pluginInjectionApi$d5.analytics.actions.attachAnalyticsEvent(payload);
+  }, [pluginInjectionApi]);
   const tableWidth = getTableContainerWidth(node);
-
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   const responsiveContainerWidth = containerWidth - 76;
   const width = Math.min(tableWidth, responsiveContainerWidth);
@@ -84,7 +87,8 @@ export const ResizableTableContainer = ({
     getPos: getPos,
     node: node,
     tableRef: tableRef,
-    displayGuideline: displayGuideline
+    displayGuideline: displayGuideline,
+    attachAnalyticsEvent: attachAnalyticsEvent
   }, /*#__PURE__*/React.createElement(InnerContainer, {
     className: className,
     node: node

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

@@ -1,16 +1,36 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import rafSchd from 'raf-schd';
+import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
-import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
+import { TableMap } from '@atlaskit/editor-tables';
+import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, hasTableBeenResized, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_HIGHLIGHT_GAP, TABLE_SNAP_GAP } from '../ui/consts';
+import { getTableWidth } from '../utils';
 import { defaultGuidelines, defaultGuidelineWidths } from '../utils/guidelines';
 import { findClosestSnap } from '../utils/snapping';
 const handles = {
   right: true
 };
 const tableHandleMarginTop = 11;
+const generateResizedPayload = props => {
+  var _props$originalNode$a;
+  const tableMap = TableMap.get(props.resizedNode);
+  return {
+    action: TABLE_ACTION.RESIZED,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      newWidth: props.resizedNode.attrs.width,
+      prevWidth: (_props$originalNode$a = props.originalNode.attrs.width) !== null && _props$originalNode$a !== void 0 ? _props$originalNode$a : null,
+      nodeSize: props.resizedNode.nodeSize,
+      totalTableWidth: hasTableBeenResized(props.resizedNode) ? getTableWidth(props.resizedNode) : null,
+      totalRowCount: tableMap.height,
+      totalColumnCount: tableMap.width
+    }
+  };
+};
 export const TableResizer = ({
   children,
   width,
@@ -20,7 +40,8 @@ export const TableResizer = ({
   getPos,
   node,
   tableRef,
-  displayGuideline
+  displayGuideline,
+  attachAnalyticsEvent
 }) => {
   const currentColumnCount = getColgroupChildrenLength(node);
   const minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
@@ -77,6 +98,7 @@ export const TableResizer = ({
       resizing: false
     });
     if (typeof pos === 'number') {
+      var _attachAnalyticsEvent;
       tr = tr.setNodeMarkup(pos, undefined, {
         ...node.attrs,
         width: newWidth
@@ -88,6 +110,11 @@ export const TableResizer = ({
         start: pos + 1,
         parentWidth: newWidth
       }, editorView.domAtPos.bind(editorView))(tr);
+      const scaledNode = tr.doc.nodeAt(pos);
+      (_attachAnalyticsEvent = attachAnalyticsEvent(generateResizedPayload({
+        originalNode: node,
+        resizedNode: scaledNode
+      }))) === null || _attachAnalyticsEvent === void 0 ? void 0 : _attachAnalyticsEvent(tr);
     }
     dispatch(tr);
 
@@ -95,7 +122,24 @@ export const TableResizer = ({
     displayGuideline([]);
     updateWidth(newWidth);
     return newWidth;
-  }, [updateWidth, editorView, getPos, node, tableRef, displayGuideline]);
+  }, [updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent]);
+  const handleResize = useCallback((originalState, delta) => {
+    const newWidth = originalState.width + delta.width;
+    const pos = getPos();
+    if (typeof pos !== 'number') {
+      return;
+    }
+    previewScaleTable(tableRef, {
+      node,
+      prevNode: node,
+      start: pos + 1,
+      parentWidth: newWidth
+    }, editorView.domAtPos.bind(editorView));
+    updateActiveGuidelines(findClosestSnap(newWidth, defaultGuidelineWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP));
+    updateWidth(newWidth);
+    return newWidth;
+  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines]);
+  const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
   return /*#__PURE__*/React.createElement(ResizerNext, {
     enable: handles,
     width: width,
@@ -103,22 +147,7 @@ export const TableResizer = ({
     handleHeightSize: handleHeightSize,
     handleMarginTop: tableHandleMarginTop,
     handleResizeStart: handleResizeStart,
-    handleResize: rafSchd((originalState, delta) => {
-      const newWidth = originalState.width + delta.width;
-      const pos = getPos();
-      if (typeof pos !== 'number') {
-        return;
-      }
-      previewScaleTable(tableRef, {
-        node,
-        prevNode: node,
-        start: pos + 1,
-        parentWidth: newWidth
-      }, editorView.domAtPos.bind(editorView));
-      updateActiveGuidelines(findClosestSnap(newWidth, defaultGuidelineWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP));
-      updateWidth(newWidth);
-      return newWidth;
-    }),
+    handleResize: scheduleResize,
     handleResizeStop: handleResizeStop,
     resizeRatio: 2,
     minWidth: minColumnWidth,

package/dist/es2019/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -18,16 +18,6 @@ const HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
 const HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
 const anyChildCellMergedAcrossRow = node => mapChildren(node, child => child.attrs.rowspan || 0).some(rowspan => rowspan > 1);
 
-/**
- * Compare two table row nodes and return true if the two table rows have a
- * different number of table cells or if table cell row spans are different
- */
-const rowHasDifferentMergedCells = (prevNode, incomingNode) => {
-  const incomingNodeChildrenRowSpan = mapChildren(prevNode, child => child.attrs.rowspan || 0);
-  const currentNodeChildrenRowSpan = mapChildren(incomingNode, child => child.attrs.rowspan || 0);
-  return incomingNodeChildrenRowSpan.length !== currentNodeChildrenRowSpan.length || currentNodeChildrenRowSpan.some((child, index) => child !== incomingNodeChildrenRowSpan[index]);
-};
-
 /**
  * Check if a given node is a header row with this definition:
  *  - all children are tableHeader cells
@@ -477,10 +467,6 @@ export class TableRowNodeView {
       return false; // re-create nodeview
     }
 
-    if (rowHasDifferentMergedCells(this.node, node)) {
-      return false;
-    }
-
     // node is different but no need to re-create nodeview
     this.node = node;
 

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.5.4",
+	"version": "2.6.0",
 	"sideEffects": false
 }

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

@@ -60,8 +60,11 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
       guidelines: guidelines
     })) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : false;
   }, [pluginInjectionApi, editorView]);
+  var attachAnalyticsEvent = useCallback(function (payload) {
+    var _pluginInjectionApi$d5;
+    return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d5 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d5 === void 0 ? void 0 : _pluginInjectionApi$d5.analytics.actions.attachAnalyticsEvent(payload);
+  }, [pluginInjectionApi]);
   var tableWidth = getTableContainerWidth(node);
-
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   var responsiveContainerWidth = containerWidth - 76;
   var width = Math.min(tableWidth, responsiveContainerWidth);
@@ -82,7 +85,8 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
     getPos: getPos,
     node: node,
     tableRef: tableRef,
-    displayGuideline: displayGuideline
+    displayGuideline: displayGuideline,
+    attachAnalyticsEvent: attachAnalyticsEvent
   }, /*#__PURE__*/React.createElement(InnerContainer, {
     className: className,
     node: node

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

@@ -4,17 +4,37 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import rafSchd from 'raf-schd';
+import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
-import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
+import { TableMap } from '@atlaskit/editor-tables';
+import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, hasTableBeenResized, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_HIGHLIGHT_GAP, TABLE_SNAP_GAP } from '../ui/consts';
+import { getTableWidth } from '../utils';
 import { defaultGuidelines, defaultGuidelineWidths } from '../utils/guidelines';
 import { findClosestSnap } from '../utils/snapping';
 var handles = {
   right: true
 };
 var tableHandleMarginTop = 11;
+var generateResizedPayload = function generateResizedPayload(props) {
+  var _props$originalNode$a;
+  var tableMap = TableMap.get(props.resizedNode);
+  return {
+    action: TABLE_ACTION.RESIZED,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      newWidth: props.resizedNode.attrs.width,
+      prevWidth: (_props$originalNode$a = props.originalNode.attrs.width) !== null && _props$originalNode$a !== void 0 ? _props$originalNode$a : null,
+      nodeSize: props.resizedNode.nodeSize,
+      totalTableWidth: hasTableBeenResized(props.resizedNode) ? getTableWidth(props.resizedNode) : null,
+      totalRowCount: tableMap.height,
+      totalColumnCount: tableMap.width
+    }
+  };
+};
 export var TableResizer = function TableResizer(_ref) {
   var children = _ref.children,
     width = _ref.width,
@@ -24,7 +44,8 @@ export var TableResizer = function TableResizer(_ref) {
     getPos = _ref.getPos,
     node = _ref.node,
     tableRef = _ref.tableRef,
-    displayGuideline = _ref.displayGuideline;
+    displayGuideline = _ref.displayGuideline,
+    attachAnalyticsEvent = _ref.attachAnalyticsEvent;
   var currentColumnCount = getColgroupChildrenLength(node);
   var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
   var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
@@ -78,6 +99,7 @@ export var TableResizer = function TableResizer(_ref) {
       resizing: false
     });
     if (typeof pos === 'number') {
+      var _attachAnalyticsEvent;
       tr = tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
         width: newWidth
       }));
@@ -88,6 +110,11 @@ export var TableResizer = function TableResizer(_ref) {
         start: pos + 1,
         parentWidth: newWidth
       }, editorView.domAtPos.bind(editorView))(tr);
+      var scaledNode = tr.doc.nodeAt(pos);
+      (_attachAnalyticsEvent = attachAnalyticsEvent(generateResizedPayload({
+        originalNode: node,
+        resizedNode: scaledNode
+      }))) === null || _attachAnalyticsEvent === void 0 ? void 0 : _attachAnalyticsEvent(tr);
     }
     dispatch(tr);
 
@@ -95,7 +122,26 @@ export var TableResizer = function TableResizer(_ref) {
     displayGuideline([]);
     updateWidth(newWidth);
     return newWidth;
-  }, [updateWidth, editorView, getPos, node, tableRef, displayGuideline]);
+  }, [updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent]);
+  var handleResize = useCallback(function (originalState, delta) {
+    var newWidth = originalState.width + delta.width;
+    var pos = getPos();
+    if (typeof pos !== 'number') {
+      return;
+    }
+    previewScaleTable(tableRef, {
+      node: node,
+      prevNode: node,
+      start: pos + 1,
+      parentWidth: newWidth
+    }, editorView.domAtPos.bind(editorView));
+    updateActiveGuidelines(findClosestSnap(newWidth, defaultGuidelineWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP));
+    updateWidth(newWidth);
+    return newWidth;
+  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines]);
+  var scheduleResize = useMemo(function () {
+    return rafSchd(handleResize);
+  }, [handleResize]);
   return /*#__PURE__*/React.createElement(ResizerNext, {
     enable: handles,
     width: width,
@@ -103,22 +149,7 @@ export var TableResizer = function TableResizer(_ref) {
     handleHeightSize: handleHeightSize,
     handleMarginTop: tableHandleMarginTop,
     handleResizeStart: handleResizeStart,
-    handleResize: rafSchd(function (originalState, delta) {
-      var newWidth = originalState.width + delta.width;
-      var pos = getPos();
-      if (typeof pos !== 'number') {
-        return;
-      }
-      previewScaleTable(tableRef, {
-        node: node,
-        prevNode: node,
-        start: pos + 1,
-        parentWidth: newWidth
-      }, editorView.domAtPos.bind(editorView));
-      updateActiveGuidelines(findClosestSnap(newWidth, defaultGuidelineWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP));
-      updateWidth(newWidth);
-      return newWidth;
-    }),
+    handleResize: scheduleResize,
     handleResizeStop: handleResizeStop,
     resizeRatio: 2,
     minWidth: minColumnWidth,

package/dist/esm/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -26,22 +26,6 @@ var anyChildCellMergedAcrossRow = function anyChildCellMergedAcrossRow(node) {
   });
 };
 
-/**
- * Compare two table row nodes and return true if the two table rows have a
- * different number of table cells or if table cell row spans are different
- */
-var rowHasDifferentMergedCells = function rowHasDifferentMergedCells(prevNode, incomingNode) {
-  var incomingNodeChildrenRowSpan = mapChildren(prevNode, function (child) {
-    return child.attrs.rowspan || 0;
-  });
-  var currentNodeChildrenRowSpan = mapChildren(incomingNode, function (child) {
-    return child.attrs.rowspan || 0;
-  });
-  return incomingNodeChildrenRowSpan.length !== currentNodeChildrenRowSpan.length || currentNodeChildrenRowSpan.some(function (child, index) {
-    return child !== incomingNodeChildrenRowSpan[index];
-  });
-};
-
 /**
  * Check if a given node is a header row with this definition:
  *  - all children are tableHeader cells
@@ -505,10 +489,6 @@ export var TableRowNodeView = /*#__PURE__*/function () {
         return false; // re-create nodeview
       }
 
-      if (rowHasDifferentMergedCells(this.node, node)) {
-        return false;
-      }
-
       // node is different but no need to re-create nodeview
       this.node = node;
 

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.5.4",
+	"version": "2.6.0",
 	"sideEffects": false
 }

package/dist/types/plugins/table/nodeviews/TableResizer.d.ts

@@ -1,6 +1,8 @@
 import { PropsWithChildren } from 'react';
 import { Node as PMNode } from 'prosemirror-model';
+import { Transaction } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
+import { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import type { GuidelineConfig } from '@atlaskit/editor-plugin-guideline';
 interface TableResizerProps {
     width: number;
@@ -11,6 +13,7 @@ interface TableResizerProps {
     node: PMNode;
     tableRef: HTMLTableElement;
     displayGuideline: (guideline: GuidelineConfig[]) => boolean;
+    attachAnalyticsEvent: (payload: TableEventPayload) => ((tr: Transaction) => boolean) | undefined;
 }
-export declare const TableResizer: ({ children, width, maxWidth, updateWidth, editorView, getPos, node, tableRef, displayGuideline, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
 export {};

package/dist/types-ts4.5/plugins/table/nodeviews/TableResizer.d.ts

@@ -1,6 +1,8 @@
 import { PropsWithChildren } from 'react';
 import { Node as PMNode } from 'prosemirror-model';
+import { Transaction } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
+import { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import type { GuidelineConfig } from '@atlaskit/editor-plugin-guideline';
 interface TableResizerProps {
     width: number;
@@ -11,6 +13,7 @@ interface TableResizerProps {
     node: PMNode;
     tableRef: HTMLTableElement;
     displayGuideline: (guideline: GuidelineConfig[]) => boolean;
+    attachAnalyticsEvent: (payload: TableEventPayload) => ((tr: Transaction) => boolean) | undefined;
 }
-export declare const TableResizer: ({ children, width, maxWidth, updateWidth, editorView, getPos, node, tableRef, displayGuideline, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.5.4",
+  "version": "2.6.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -27,8 +27,8 @@
     "releaseModel": "continuous"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^26.2.0",
-    "@atlaskit/editor-common": "^74.26.0",
+    "@atlaskit/adf-schema": "^26.3.0",
+    "@atlaskit/editor-common": "^74.27.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.6",

package/src/__tests__/unit/nodeviews/TableContainer.tsx

@@ -1,8 +1,13 @@
 import React from 'react';
 
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import { TableAttributes } from '@atlaskit/adf-schema';
+import {
+  ACTION_SUBJECT,
+  EVENT_TYPE,
+  TABLE_ACTION,
+} from '@atlaskit/editor-common/analytics';
 import { akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { createEditorFactory } from '@atlaskit/editor-test-helpers/create-editor';
@@ -43,12 +48,12 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
     });
   };
   const createNode = (attrs?: TableAttributes) => {
-    const { editorView: view } = editor(
-      doc(p('text'), table(attrs)(tr(td()(p('{<>}text')), tdEmpty, tdEmpty))),
+    const { editorView } = editor(
+      doc(table(attrs)(tr(td()(p('{<>}text')), tdEmpty, tdEmpty))),
     );
-    const resolvedTable = findTable(view.state.selection);
+    const resolvedTable = findTable(editorView.state.selection);
 
-    return resolvedTable!.node;
+    return { editorView, node: resolvedTable!.node };
   };
 
   describe('show correct container for FF and options', () => {
@@ -56,7 +61,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
       isTableResizingEnabled: boolean,
       isBreakoutEnabled: boolean = true,
     ) => {
-      const node = createNode();
+      const { node, editorView } = createNode();
 
       const { container } = render(
         <TableContainer
@@ -68,7 +73,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
           isTableResizingEnabled={isTableResizingEnabled}
           isBreakoutEnabled={isBreakoutEnabled}
           className={''}
-          editorView={{} as any}
+          editorView={editorView}
           getPos={() => 1}
           tableRef={{} as any}
           isNested={false}
@@ -94,7 +99,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
       isTableResizingEnabled: boolean,
       isBreakoutEnabled: boolean = true,
     ) => {
-      const node = createNode();
+      const { node, editorView } = createNode();
 
       const { container } = render(
         <TableContainer
@@ -106,7 +111,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
           isTableResizingEnabled={isTableResizingEnabled}
           isBreakoutEnabled={isBreakoutEnabled}
           className={''}
-          editorView={{} as any}
+          editorView={editorView}
           getPos={() => 1}
           tableRef={{} as any}
           isNested={true}
@@ -129,7 +134,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
 
   describe('sets width and margin correctly for resizable container', () => {
     const buildContainer = (attrs: TableAttributes) => {
-      const node = createNode(attrs);
+      const { node, editorView } = createNode(attrs);
 
       const { container } = render(
         <ResizableTableContainer
@@ -137,7 +142,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
           lineLength={720}
           node={node}
           className={''}
-          editorView={{} as any}
+          editorView={editorView}
           getPos={() => 1}
           tableRef={{} as any}
         />,
@@ -154,4 +159,62 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
       expect(style.marginLeft).toBe('-120px');
     });
   });
+
+  describe('analytics', () => {
+    const buildContainer = (attrs: TableAttributes) => {
+      const { node, editorView } = createNode(attrs);
+      const analyticsMock = jest.fn();
+
+      const { container } = render(
+        <ResizableTableContainer
+          containerWidth={1800}
+          lineLength={720}
+          node={node}
+          className={''}
+          editorView={editorView}
+          getPos={() => 0}
+          tableRef={
+            {
+              querySelector: () => null,
+              insertBefore: () => {},
+              style: {},
+            } as any
+          }
+          pluginInjectionApi={
+            {
+              dependencies: {
+                analytics: { actions: { attachAnalyticsEvent: analyticsMock } },
+              },
+            } as any
+          }
+        />,
+      );
+
+      return { container, analyticsMock };
+    };
+
+    test('fires when resizing is finished', async () => {
+      const { container, analyticsMock } = buildContainer({ layout: 'wide' });
+
+      fireEvent.mouseDown(container.querySelector('.resizer-handle-right')!);
+      fireEvent.mouseMove(container.querySelector('.resizer-handle-right')!);
+      fireEvent.mouseMove(container.querySelector('.resizer-handle-right')!);
+      fireEvent.mouseMove(container.querySelector('.resizer-handle-right')!);
+      fireEvent.mouseUp(container.querySelector('.resizer-handle-right')!);
+
+      expect(analyticsMock).toHaveBeenLastCalledWith({
+        action: TABLE_ACTION.RESIZED,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          width: undefined, // Can't get the events right to trigger re-resizeable
+          prevWidth: null,
+          nodeSize: 20,
+          totalTableWidth: null,
+          totalRowCount: 1,
+          totalColumnCount: 3,
+        },
+      });
+    });
+  });
 });

package/src/__tests__/visual-regression/sticky-header.ts

@@ -39,7 +39,8 @@ describe('Snapshot Test: Table', () => {
   });
 
   describe('sticky header', () => {
-    it('should align with table cell when active', async () => {
+    // FIXME: This test was automatically skipped due to failure on 26/07/2023: https://product-fabric.atlassian.net/browse/ED-19223
+    it.skip('should align with table cell when active', async () => {
       await initEditor(page, stickyHeaderWithHorizontalScroll);
 
       await clickFirstCell(page, true);

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

@@ -9,6 +9,7 @@ import classNames from 'classnames';
 import { Node as PMNode } from 'prosemirror-model';
 import { EditorView } from 'prosemirror-view';
 
+import { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import { EditorContainerWidth } from '@atlaskit/editor-common/types';
@@ -115,15 +116,20 @@ export const ResizableTableContainer = ({
     [pluginInjectionApi, editorView],
   );
 
-  const tableWidth = getTableContainerWidth(node);
+  const attachAnalyticsEvent = useCallback(
+    (payload: TableEventPayload) => {
+      return pluginInjectionApi?.dependencies?.analytics.actions.attachAnalyticsEvent(
+        payload,
+      );
+    },
+    [pluginInjectionApi],
+  );
 
+  const tableWidth = getTableContainerWidth(node);
   // 76 is currently an accepted padding value considering the spacing for resizer handle
   const responsiveContainerWidth = containerWidth - 76;
-
   const width = Math.min(tableWidth, responsiveContainerWidth);
-
   marginLeftRef.current = getMarginLeft(lineLength, width);
-
   const maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
 
   return (
@@ -141,6 +147,7 @@ export const ResizableTableContainer = ({
         node={node}
         tableRef={tableRef}
         displayGuideline={displayGuideline}
+        attachAnalyticsEvent={attachAnalyticsEvent}
       >
         <InnerContainer className={className} node={node}>
           {children}

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

@@ -7,9 +7,16 @@ import React, {
 } from 'react';
 
 import { Node as PMNode } from 'prosemirror-model';
+import { Transaction } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import rafSchd from 'raf-schd';
 
+import {
+  ACTION_SUBJECT,
+  EVENT_TYPE,
+  TABLE_ACTION,
+  TableEventPayload,
+} from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import {
   HandleHeightSizeType,
@@ -17,15 +24,18 @@ import {
   ResizerNext,
 } from '@atlaskit/editor-common/resizer';
 import type { GuidelineConfig } from '@atlaskit/editor-plugin-guideline';
+import { TableMap } from '@atlaskit/editor-tables';
 
 import {
   COLUMN_MIN_WIDTH,
   getColgroupChildrenLength,
+  hasTableBeenResized,
   previewScaleTable,
   scaleTable,
 } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_HIGHLIGHT_GAP, TABLE_SNAP_GAP } from '../ui/consts';
+import { getTableWidth } from '../utils';
 import { defaultGuidelines, defaultGuidelineWidths } from '../utils/guidelines';
 import { findClosestSnap } from '../utils/snapping';
 
@@ -38,11 +48,37 @@ interface TableResizerProps {
   node: PMNode;
   tableRef: HTMLTableElement;
   displayGuideline: (guideline: GuidelineConfig[]) => boolean;
+  attachAnalyticsEvent: (
+    payload: TableEventPayload,
+  ) => ((tr: Transaction) => boolean) | undefined;
 }
 
 const handles = { right: true };
 const tableHandleMarginTop = 11;
 
+const generateResizedPayload = (props: {
+  originalNode: PMNode;
+  resizedNode: PMNode;
+}): TableEventPayload => {
+  const tableMap = TableMap.get(props.resizedNode);
+
+  return {
+    action: TABLE_ACTION.RESIZED,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      newWidth: props.resizedNode.attrs.width,
+      prevWidth: props.originalNode.attrs.width ?? null,
+      nodeSize: props.resizedNode.nodeSize,
+      totalTableWidth: hasTableBeenResized(props.resizedNode)
+        ? getTableWidth(props.resizedNode)
+        : null,
+      totalRowCount: tableMap.height,
+      totalColumnCount: tableMap.width,
+    },
+  };
+};
+
 export const TableResizer = ({
   children,
   width,
@@ -53,6 +89,7 @@ export const TableResizer = ({
   node,
   tableRef,
   displayGuideline,
+  attachAnalyticsEvent,
 }: PropsWithChildren<TableResizerProps>) => {
   const currentColumnCount = getColgroupChildrenLength(node);
   const minColumnWidth =
@@ -111,6 +148,7 @@ export const TableResizer = ({
       dispatch,
       state: { tr },
     } = editorView;
+
     dispatch(tr.setMeta(tableWidthPluginKey, { resizing: true }));
 
     setSnappingEnabled(displayGuideline(defaultGuidelines));
@@ -142,19 +180,73 @@ export const TableResizer = ({
           },
           editorView.domAtPos.bind(editorView),
         )(tr);
+
+        const scaledNode = tr.doc.nodeAt(pos)!;
+
+        attachAnalyticsEvent(
+          generateResizedPayload({
+            originalNode: node,
+            resizedNode: scaledNode,
+          }),
+        )?.(tr);
       }
 
       dispatch(tr);
 
       // Hide guidelines when resizing stops
       displayGuideline([]);
+      updateWidth(newWidth);
+
+      return newWidth;
+    },
+    [
+      updateWidth,
+      editorView,
+      getPos,
+      node,
+      tableRef,
+      displayGuideline,
+      attachAnalyticsEvent,
+    ],
+  );
+
+  const handleResize = useCallback(
+    (originalState, delta) => {
+      const newWidth = originalState.width + delta.width;
+      const pos = getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+
+      previewScaleTable(
+        tableRef,
+        {
+          node,
+          prevNode: node,
+          start: pos + 1,
+          parentWidth: newWidth,
+        },
+        editorView.domAtPos.bind(editorView),
+      );
+
+      updateActiveGuidelines(
+        findClosestSnap(
+          newWidth,
+          defaultGuidelineWidths,
+          defaultGuidelines,
+          TABLE_HIGHLIGHT_GAP,
+        ),
+      );
 
       updateWidth(newWidth);
+
       return newWidth;
     },
-    [updateWidth, editorView, getPos, node, tableRef, displayGuideline],
+    [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines],
   );
 
+  const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
+
   return (
     <ResizerNext
       enable={handles}
@@ -163,36 +255,7 @@ export const TableResizer = ({
       handleHeightSize={handleHeightSize}
       handleMarginTop={tableHandleMarginTop}
       handleResizeStart={handleResizeStart}
-      handleResize={rafSchd((originalState, delta) => {
-        const newWidth = originalState.width + delta.width;
-        const pos = getPos();
-        if (typeof pos !== 'number') {
-          return;
-        }
-
-        previewScaleTable(
-          tableRef,
-          {
-            node,
-            prevNode: node,
-            start: pos + 1,
-            parentWidth: newWidth,
-          },
-          editorView.domAtPos.bind(editorView),
-        );
-
-        updateActiveGuidelines(
-          findClosestSnap(
-            newWidth,
-            defaultGuidelineWidths,
-            defaultGuidelines,
-            TABLE_HIGHLIGHT_GAP,
-          ),
-        );
-
-        updateWidth(newWidth);
-        return newWidth;
-      })}
+      handleResize={scheduleResize}
       handleResizeStop={handleResizeStop}
       resizeRatio={2}
       minWidth={minColumnWidth}

package/src/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.ts

@@ -40,28 +40,6 @@ const anyChildCellMergedAcrossRow = (node: PmNode) =>
     (rowspan) => rowspan > 1,
   );
 
-/**
- * Compare two table row nodes and return true if the two table rows have a
- * different number of table cells or if table cell row spans are different
- */
-const rowHasDifferentMergedCells = (prevNode: PmNode, incomingNode: PmNode) => {
-  const incomingNodeChildrenRowSpan = mapChildren(
-    prevNode,
-    (child) => child.attrs.rowspan || 0,
-  );
-  const currentNodeChildrenRowSpan = mapChildren(
-    incomingNode,
-    (child) => child.attrs.rowspan || 0,
-  );
-
-  return (
-    incomingNodeChildrenRowSpan.length !== currentNodeChildrenRowSpan.length ||
-    currentNodeChildrenRowSpan.some(
-      (child, index) => child !== incomingNodeChildrenRowSpan[index],
-    )
-  );
-};
-
 /**
  * Check if a given node is a header row with this definition:
  *  - all children are tableHeader cells
@@ -429,10 +407,6 @@ export class TableRowNodeView implements NodeView {
       return false; // re-create nodeview
     }
 
-    if (rowHasDifferentMergedCells(this.node, node)) {
-      return false;
-    }
-
     // node is different but no need to re-create nodeview
     this.node = node;