@atlaskit/editor-plugin-table 2.7.2 → 2.8.1

package/dist/es2019/plugins/table/utils/analytics.js

@@ -1,5 +1,9 @@
+import { useEffect, useRef } from 'react';
+import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
+import { getTableWidth } from '../utils';
 export function getSelectedTableInfo(selection) {
   let map;
   let totalRowCount = 0;
@@ -54,4 +58,130 @@ export const withEditorAnalyticsAPI = payload => editorAnalyticsAPI => {
     }
     return true;
   }, view);
+};
+export 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 reduceResizeFrameRateSamples = frameRateSamples => {
+  if (frameRateSamples.length > 1) {
+    const frameRateSum = frameRateSamples.reduce((sum, frameRate, index) => {
+      if (index === 0) {
+        return sum;
+      } else {
+        return sum + frameRate;
+      }
+    }, 0);
+    const averageFrameRate = Math.round(frameRateSum / (frameRateSamples.length - 1));
+    return [frameRateSamples[0], averageFrameRate];
+  } else {
+    return frameRateSamples;
+  }
+};
+export const generateResizeFrameRatePayloads = props => {
+  const reducedResizeFrameRateSamples = reduceResizeFrameRateSamples(props.frameRateSamples);
+  return reducedResizeFrameRateSamples.map((frameRateSample, index) => ({
+    action: TABLE_ACTION.RESIZE_PERF_SAMPLING,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    eventType: EVENT_TYPE.OPERATIONAL,
+    attributes: {
+      frameRate: frameRateSample,
+      nodeSize: props.originalNode.nodeSize,
+      docSize: props.docSize,
+      isInitialSample: index === 0
+    }
+  }));
+};
+
+/**
+ * Measures the framerate of a component over a given time period.
+ */
+export const useMeasureFramerate = (config = {}) => {
+  const {
+    maxSamples = 10,
+    minFrames = 5,
+    minTimeMs = 500,
+    sampleRateMs = 1000,
+    timeoutMs = 200
+  } = config;
+  let frameCount = useRef(0);
+  let lastTime = useRef(0);
+  let timeoutId = useRef();
+  let frameRateSamples = useRef([]);
+  useEffect(() => {
+    return () => {
+      if (timeoutId.current) {
+        clearTimeout(timeoutId.current);
+      }
+    };
+  }, []);
+  const startMeasure = () => {
+    frameCount.current = 0;
+    lastTime.current = performance.now();
+  };
+
+  /**
+   * Returns an array of frame rate samples as integers.
+   */
+  const endMeasure = () => {
+    const samples = frameRateSamples.current;
+    frameRateSamples.current = [];
+    return samples;
+  };
+  const sampleFrameRate = (delay = 0) => {
+    const currentTime = performance.now();
+    const deltaTime = currentTime - lastTime.current - delay;
+    const isValidSample = deltaTime > minTimeMs && frameCount.current >= minFrames;
+    if (isValidSample) {
+      const frameRate = Math.round(frameCount.current / (deltaTime / 1000));
+      frameRateSamples.current.push(frameRate);
+    }
+    frameCount.current = 0;
+    lastTime.current = 0;
+  };
+
+  /**
+   * Counts the number of frames that occur within a given time period. Intended to be called
+   * inside a `requestAnimationFrame` callback.
+   */
+  const countFrames = () => {
+    if (frameRateSamples.current.length >= maxSamples && timeoutId.current) {
+      clearTimeout(timeoutId.current);
+      return;
+    }
+
+    /**
+     * Allows us to keep counting frames even if `startMeasure` is not called
+     */
+    if (lastTime.current === 0) {
+      lastTime.current = performance.now();
+    }
+    frameCount.current++;
+    if (timeoutId.current) {
+      clearTimeout(timeoutId.current);
+    }
+    if (performance.now() - lastTime.current > sampleRateMs) {
+      sampleFrameRate();
+    } else {
+      timeoutId.current = setTimeout(() => sampleFrameRate(timeoutMs), timeoutMs);
+    }
+  };
+  return {
+    startMeasure,
+    endMeasure,
+    countFrames
+  };
 };

package/dist/es2019/version.json

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

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

@@ -4,39 +4,20 @@ 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 { resizerHandleShadowClassName } from '@atlaskit/editor-common/styles';
-import { TableMap } from '@atlaskit/editor-tables';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, hasTableBeenResized, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
+import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_HIGHLIGHT_GAP, TABLE_SNAP_GAP } from '../ui/consts';
-import { getTableWidth } from '../utils';
+import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
 import { defaultGuidelines, defaultGuidelineWidths } from '../utils/guidelines';
 import { findClosestSnap } from '../utils/snapping';
 var handles = {
   right: true
 };
 var tableHandleMarginTop = 12;
-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
-    }
-  };
-};
 var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
   var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
   var handleHeightSize = 'small';
@@ -79,6 +60,10 @@ export var TableResizer = function TableResizer(_ref) {
     setSnappingEnabled = _useState2[1];
   var resizerMinWidth = getResizerMinWidth(node);
   var handleHeightSize = getResizerHandleHeight(tableRef);
+  var _useMeasureFramerate = useMeasureFramerate(),
+    startMeasure = _useMeasureFramerate.startMeasure,
+    endMeasure = _useMeasureFramerate.endMeasure,
+    countFrames = _useMeasureFramerate.countFrames;
   var updateActiveGuidelines = useCallback(function (_ref2) {
     var gap = _ref2.gap,
       keys = _ref2.keys;
@@ -93,13 +78,14 @@ export var TableResizer = function TableResizer(_ref) {
     } : undefined;
   }, [snappingEnabled]);
   var handleResizeStart = useCallback(function () {
+    startMeasure();
     var dispatch = editorView.dispatch,
       tr = editorView.state.tr;
     dispatch(tr.setMeta(tableWidthPluginKey, {
       resizing: true
     }));
     setSnappingEnabled(displayGuideline(defaultGuidelines));
-  }, [displayGuideline, editorView]);
+  }, [displayGuideline, editorView, startMeasure]);
   var handleResizeStop = useCallback(function (originalState, delta) {
     var newWidth = originalState.width + delta.width;
     var state = editorView.state,
@@ -108,8 +94,20 @@ export var TableResizer = function TableResizer(_ref) {
     var tr = state.tr.setMeta(tableWidthPluginKey, {
       resizing: false
     });
+    var frameRateSamples = endMeasure();
+    if (frameRateSamples.length > 0) {
+      var resizeFrameRatePayloads = generateResizeFrameRatePayloads({
+        docSize: state.doc.nodeSize,
+        frameRateSamples: frameRateSamples,
+        originalNode: node
+      });
+      resizeFrameRatePayloads.forEach(function (payload) {
+        var _attachAnalyticsEvent;
+        (_attachAnalyticsEvent = attachAnalyticsEvent(payload)) === null || _attachAnalyticsEvent === void 0 ? void 0 : _attachAnalyticsEvent(tr);
+      });
+    }
     if (typeof pos === 'number') {
-      var _attachAnalyticsEvent;
+      var _attachAnalyticsEvent2;
       tr = tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, node.attrs), {}, {
         width: newWidth
       }));
@@ -121,10 +119,10 @@ export var TableResizer = function TableResizer(_ref) {
         parentWidth: newWidth
       }, editorView.domAtPos.bind(editorView))(tr);
       var scaledNode = tr.doc.nodeAt(pos);
-      (_attachAnalyticsEvent = attachAnalyticsEvent(generateResizedPayload({
+      (_attachAnalyticsEvent2 = attachAnalyticsEvent(generateResizedPayload({
         originalNode: node,
         resizedNode: scaledNode
-      }))) === null || _attachAnalyticsEvent === void 0 ? void 0 : _attachAnalyticsEvent(tr);
+      }))) === null || _attachAnalyticsEvent2 === void 0 ? void 0 : _attachAnalyticsEvent2(tr);
     }
     dispatch(tr);
 
@@ -132,8 +130,9 @@ export var TableResizer = function TableResizer(_ref) {
     displayGuideline([]);
     updateWidth(newWidth);
     return newWidth;
-  }, [updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent]);
+  }, [updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, endMeasure]);
   var handleResize = useCallback(function (originalState, delta) {
+    countFrames();
     var newWidth = originalState.width + delta.width;
     var pos = getPos();
     if (typeof pos !== 'number') {
@@ -148,7 +147,7 @@ export var TableResizer = function TableResizer(_ref) {
     updateActiveGuidelines(findClosestSnap(newWidth, defaultGuidelineWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP));
     updateWidth(newWidth);
     return newWidth;
-  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines]);
+  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames]);
   var scheduleResize = useMemo(function () {
     return rafSchd(handleResize);
   }, [handleResize]);

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

@@ -6,12 +6,10 @@ import _get from "@babel/runtime/helpers/get";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-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 from 'react';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
@@ -27,33 +25,38 @@ import { generateColgroup } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { isTableNested } from '../utils';
 import TableComponent from './TableComponent';
-var tableAttributes = function tableAttributes(node, options, state, pos) {
-  // provide a width for tables when custom table width is supported
-  // this is to ensure 'responsive' tables (colgroup widths are undefined) become fixed to
-  // support screen size adjustments
-  var shouldHaveInlineWidth = (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) && !isTableNested(state, pos);
-  var style = "width: ".concat(node.attrs.isNumberColumnEnabled ? getTableContainerWidth(node) - akEditorTableNumberColumnWidth : getTableContainerWidth(node), "px");
-  var dataAttrsInTable = {
+var tableAttributes = function tableAttributes(node) {
+  return {
     'data-number-column': node.attrs.isNumberColumnEnabled,
     'data-layout': node.attrs.layout,
     'data-autosize': node.attrs.__autoSize,
     'data-table-local-id': node.attrs.localId || '',
     'data-table-width': node.attrs.width
   };
-  if (shouldHaveInlineWidth) {
-    // this should be fixed because style will overwrite any existing styles, current found conflict with sticky headers
-    return _objectSpread(_objectSpread({}, dataAttrsInTable), {}, {
-      style: style
-    });
+};
+var getInlineWidth = function getInlineWidth(node, options, state, pos) {
+  // provide a width for tables when custom table width is supported
+  // this is to ensure 'responsive' tables (colgroup widths are undefined) become fixed to
+  // support screen size adjustments
+  var shouldHaveInlineWidth = (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) && !isTableNested(state, pos);
+  var widthValue = getTableContainerWidth(node);
+  if (node.attrs.isNumberColumnEnabled) {
+    widthValue -= akEditorTableNumberColumnWidth;
+  }
+  return shouldHaveInlineWidth ? widthValue : undefined;
+};
+var handleInlineTableWidth = function handleInlineTableWidth(table, width) {
+  if (!table || !width) {
+    return;
   }
-  return dataAttrsInTable;
+  table.style.setProperty('width', "".concat(width, "px"));
 };
 var toDOM = function toDOM(node, props) {
   var colgroup = '';
   if (props.allowColumnResizing) {
     colgroup = ['colgroup', {}].concat(_toConsumableArray(generateColgroup(node)));
   }
-  return ['table', tableAttributes(node, props.options, props.view.state, props.getPos()), colgroup, ['tbody', 0]];
+  return ['table', tableAttributes(node), colgroup, ['tbody', 0]];
 };
 var TableView = /*#__PURE__*/function (_ReactNodeView) {
   _inherits(TableView, _ReactNodeView);
@@ -75,8 +78,12 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     key: "getContentDOM",
     value: function getContentDOM() {
       var rendered = DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
+      var tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
       if (rendered.dom) {
         this.table = rendered.dom;
+        if (tableInlineWidth) {
+          handleInlineTableWidth(this.table, tableInlineWidth);
+        }
       }
       return rendered;
     }
@@ -87,10 +94,16 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
       if (!this.table) {
         return;
       }
-      var attrs = tableAttributes(node, this.reactComponentProps.options, this.view.state, this.getPos());
+      var attrs = tableAttributes(node);
       Object.keys(attrs).forEach(function (attr) {
         _this2.table.setAttribute(attr, attrs[attr]);
       });
+
+      // handle inline style when table been resized
+      var tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos());
+      if (tableInlineWidth) {
+        handleInlineTableWidth(this.table, tableInlineWidth);
+      }
     }
   }, {
     key: "render",

package/dist/esm/plugins/table/utils/analytics.js

@@ -1,5 +1,9 @@
+import { useEffect, useRef } from 'react';
+import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable, getSelectionRect } from '@atlaskit/editor-tables/utils';
+import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils';
+import { getTableWidth } from '../utils';
 export function getSelectedTableInfo(selection) {
   var map;
   var totalRowCount = 0;
@@ -59,4 +63,139 @@ export var withEditorAnalyticsAPI = function withEditorAnalyticsAPI(payload) {
       };
     };
   };
+};
+export 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 reduceResizeFrameRateSamples = function reduceResizeFrameRateSamples(frameRateSamples) {
+  if (frameRateSamples.length > 1) {
+    var frameRateSum = frameRateSamples.reduce(function (sum, frameRate, index) {
+      if (index === 0) {
+        return sum;
+      } else {
+        return sum + frameRate;
+      }
+    }, 0);
+    var averageFrameRate = Math.round(frameRateSum / (frameRateSamples.length - 1));
+    return [frameRateSamples[0], averageFrameRate];
+  } else {
+    return frameRateSamples;
+  }
+};
+export var generateResizeFrameRatePayloads = function generateResizeFrameRatePayloads(props) {
+  var reducedResizeFrameRateSamples = reduceResizeFrameRateSamples(props.frameRateSamples);
+  return reducedResizeFrameRateSamples.map(function (frameRateSample, index) {
+    return {
+      action: TABLE_ACTION.RESIZE_PERF_SAMPLING,
+      actionSubject: ACTION_SUBJECT.TABLE,
+      eventType: EVENT_TYPE.OPERATIONAL,
+      attributes: {
+        frameRate: frameRateSample,
+        nodeSize: props.originalNode.nodeSize,
+        docSize: props.docSize,
+        isInitialSample: index === 0
+      }
+    };
+  });
+};
+
+/**
+ * Measures the framerate of a component over a given time period.
+ */
+export var useMeasureFramerate = function useMeasureFramerate() {
+  var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _config$maxSamples = config.maxSamples,
+    maxSamples = _config$maxSamples === void 0 ? 10 : _config$maxSamples,
+    _config$minFrames = config.minFrames,
+    minFrames = _config$minFrames === void 0 ? 5 : _config$minFrames,
+    _config$minTimeMs = config.minTimeMs,
+    minTimeMs = _config$minTimeMs === void 0 ? 500 : _config$minTimeMs,
+    _config$sampleRateMs = config.sampleRateMs,
+    sampleRateMs = _config$sampleRateMs === void 0 ? 1000 : _config$sampleRateMs,
+    _config$timeoutMs = config.timeoutMs,
+    timeoutMs = _config$timeoutMs === void 0 ? 200 : _config$timeoutMs;
+  var frameCount = useRef(0);
+  var lastTime = useRef(0);
+  var timeoutId = useRef();
+  var frameRateSamples = useRef([]);
+  useEffect(function () {
+    return function () {
+      if (timeoutId.current) {
+        clearTimeout(timeoutId.current);
+      }
+    };
+  }, []);
+  var startMeasure = function startMeasure() {
+    frameCount.current = 0;
+    lastTime.current = performance.now();
+  };
+
+  /**
+   * Returns an array of frame rate samples as integers.
+   */
+  var endMeasure = function endMeasure() {
+    var samples = frameRateSamples.current;
+    frameRateSamples.current = [];
+    return samples;
+  };
+  var sampleFrameRate = function sampleFrameRate() {
+    var delay = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var currentTime = performance.now();
+    var deltaTime = currentTime - lastTime.current - delay;
+    var isValidSample = deltaTime > minTimeMs && frameCount.current >= minFrames;
+    if (isValidSample) {
+      var frameRate = Math.round(frameCount.current / (deltaTime / 1000));
+      frameRateSamples.current.push(frameRate);
+    }
+    frameCount.current = 0;
+    lastTime.current = 0;
+  };
+
+  /**
+   * Counts the number of frames that occur within a given time period. Intended to be called
+   * inside a `requestAnimationFrame` callback.
+   */
+  var countFrames = function countFrames() {
+    if (frameRateSamples.current.length >= maxSamples && timeoutId.current) {
+      clearTimeout(timeoutId.current);
+      return;
+    }
+
+    /**
+     * Allows us to keep counting frames even if `startMeasure` is not called
+     */
+    if (lastTime.current === 0) {
+      lastTime.current = performance.now();
+    }
+    frameCount.current++;
+    if (timeoutId.current) {
+      clearTimeout(timeoutId.current);
+    }
+    if (performance.now() - lastTime.current > sampleRateMs) {
+      sampleFrameRate();
+    } else {
+      timeoutId.current = setTimeout(function () {
+        return sampleFrameRate(timeoutMs);
+      }, timeoutMs);
+    }
+  };
+  return {
+    startMeasure: startMeasure,
+    endMeasure: endMeasure,
+    countFrames: countFrames
+  };
 };

package/dist/esm/version.json

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

package/dist/types/plugins/table/utils/analytics.d.ts

@@ -1,5 +1,6 @@
-import type { AnalyticsEventPayload, AnalyticsEventPayloadCallback, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { AnalyticsEventPayload, AnalyticsEventPayloadCallback, EditorAnalyticsAPI, TableEventPayload } from '@atlaskit/editor-common/analytics';
 import { HigherOrderCommand } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 export declare function getSelectedTableInfo(selection: Selection): {
@@ -16,3 +17,29 @@ export declare function getSelectedCellInfo(selection: Selection): {
     totalCells: number;
 };
 export declare const withEditorAnalyticsAPI: (payload: AnalyticsEventPayload | AnalyticsEventPayloadCallback) => (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => HigherOrderCommand;
+interface UseMeasureFramerateConfig {
+    maxSamples?: number;
+    minFrames?: number;
+    minTimeMs?: number;
+    sampleRateMs?: number;
+    timeoutMs?: number;
+}
+export declare const generateResizedPayload: (props: {
+    originalNode: PMNode;
+    resizedNode: PMNode;
+}) => TableEventPayload;
+export declare const reduceResizeFrameRateSamples: (frameRateSamples: number[]) => number[];
+export declare const generateResizeFrameRatePayloads: (props: {
+    docSize: number;
+    frameRateSamples: number[];
+    originalNode: PMNode;
+}) => TableEventPayload[];
+/**
+ * Measures the framerate of a component over a given time period.
+ */
+export declare const useMeasureFramerate: (config?: UseMeasureFramerateConfig) => {
+    startMeasure: () => void;
+    endMeasure: () => number[];
+    countFrames: () => void;
+};
+export {};

package/dist/types-ts4.5/plugins/table/utils/analytics.d.ts

@@ -1,5 +1,6 @@
-import type { AnalyticsEventPayload, AnalyticsEventPayloadCallback, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { AnalyticsEventPayload, AnalyticsEventPayloadCallback, EditorAnalyticsAPI, TableEventPayload } from '@atlaskit/editor-common/analytics';
 import { HigherOrderCommand } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 export declare function getSelectedTableInfo(selection: Selection): {
@@ -16,3 +17,29 @@ export declare function getSelectedCellInfo(selection: Selection): {
     totalCells: number;
 };
 export declare const withEditorAnalyticsAPI: (payload: AnalyticsEventPayload | AnalyticsEventPayloadCallback) => (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => HigherOrderCommand;
+interface UseMeasureFramerateConfig {
+    maxSamples?: number;
+    minFrames?: number;
+    minTimeMs?: number;
+    sampleRateMs?: number;
+    timeoutMs?: number;
+}
+export declare const generateResizedPayload: (props: {
+    originalNode: PMNode;
+    resizedNode: PMNode;
+}) => TableEventPayload;
+export declare const reduceResizeFrameRateSamples: (frameRateSamples: number[]) => number[];
+export declare const generateResizeFrameRatePayloads: (props: {
+    docSize: number;
+    frameRateSamples: number[];
+    originalNode: PMNode;
+}) => TableEventPayload[];
+/**
+ * Measures the framerate of a component over a given time period.
+ */
+export declare const useMeasureFramerate: (config?: UseMeasureFramerateConfig) => {
+    startMeasure: () => void;
+    endMeasure: () => number[];
+    countFrames: () => void;
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.7.2",
+  "version": "2.8.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^28.0.0",
-    "@atlaskit/editor-common": "^74.41.0",
+    "@atlaskit/editor-common": "^74.42.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.7",
@@ -67,6 +67,7 @@
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/feature-flags-test-utils": "^0.1.2",
     "@testing-library/react": "^12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
     "raf-stub": "^2.0.1",
     "typescript": "~4.9.5"
   },