@atlaskit/editor-plugin-table 2.7.2 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-table
 
+## 2.8.0
+
+### Minor Changes
+
+- [`7472b6ab3b4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7472b6ab3b4) - [ED-19329] Add analytics event for table resize framerate
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.7.2
 
 ### Patch Changes

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

@@ -10,16 +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 _styles = require("@atlaskit/editor-common/styles");
-var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _utils2 = require("../pm-plugins/table-resizing/utils");
 var _tableWidth = require("../pm-plugins/table-width");
 var _consts = require("../ui/consts");
-var _utils3 = require("../utils");
+var _analytics = require("../utils/analytics");
 var _guidelines = require("../utils/guidelines");
 var _snapping = require("../utils/snapping");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -30,23 +28,6 @@ var handles = {
   right: true
 };
 var tableHandleMarginTop = 12;
-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, _utils2.hasTableBeenResized)(props.resizedNode) ? (0, _utils3.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';
@@ -89,6 +70,10 @@ var TableResizer = function TableResizer(_ref) {
     setSnappingEnabled = _useState2[1];
   var resizerMinWidth = getResizerMinWidth(node);
   var handleHeightSize = getResizerHandleHeight(tableRef);
+  var _useMeasureFramerate = (0, _analytics.useMeasureFramerate)(),
+    startMeasure = _useMeasureFramerate.startMeasure,
+    endMeasure = _useMeasureFramerate.endMeasure,
+    countFrames = _useMeasureFramerate.countFrames;
   var updateActiveGuidelines = (0, _react.useCallback)(function (_ref2) {
     var gap = _ref2.gap,
       keys = _ref2.keys;
@@ -103,13 +88,14 @@ var TableResizer = function TableResizer(_ref) {
     } : undefined;
   }, [snappingEnabled]);
   var handleResizeStart = (0, _react.useCallback)(function () {
+    startMeasure();
     var dispatch = editorView.dispatch,
       tr = editorView.state.tr;
     dispatch(tr.setMeta(_tableWidth.pluginKey, {
       resizing: true
     }));
     setSnappingEnabled(displayGuideline(_guidelines.defaultGuidelines));
-  }, [displayGuideline, editorView]);
+  }, [displayGuideline, editorView, startMeasure]);
   var handleResizeStop = (0, _react.useCallback)(function (originalState, delta) {
     var newWidth = originalState.width + delta.width;
     var state = editorView.state,
@@ -118,8 +104,20 @@ var TableResizer = function TableResizer(_ref) {
     var tr = state.tr.setMeta(_tableWidth.pluginKey, {
       resizing: false
     });
+    var frameRateSamples = endMeasure();
+    if (frameRateSamples.length > 0) {
+      var resizeFrameRatePayloads = (0, _analytics.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
       }));
@@ -131,10 +129,10 @@ var TableResizer = function TableResizer(_ref) {
         parentWidth: newWidth
       }, editorView.domAtPos.bind(editorView))(tr);
       var scaledNode = tr.doc.nodeAt(pos);
-      (_attachAnalyticsEvent = attachAnalyticsEvent(generateResizedPayload({
+      (_attachAnalyticsEvent2 = attachAnalyticsEvent((0, _analytics.generateResizedPayload)({
         originalNode: node,
         resizedNode: scaledNode
-      }))) === null || _attachAnalyticsEvent === void 0 ? void 0 : _attachAnalyticsEvent(tr);
+      }))) === null || _attachAnalyticsEvent2 === void 0 ? void 0 : _attachAnalyticsEvent2(tr);
     }
     dispatch(tr);
 
@@ -142,8 +140,9 @@ 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 = (0, _react.useCallback)(function (originalState, delta) {
+    countFrames();
     var newWidth = originalState.width + delta.width;
     var pos = getPos();
     if (typeof pos !== 'number') {
@@ -158,7 +157,7 @@ var TableResizer = function TableResizer(_ref) {
     updateActiveGuidelines((0, _snapping.findClosestSnap)(newWidth, _guidelines.defaultGuidelineWidths, _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP));
     updateWidth(newWidth);
     return newWidth;
-  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines]);
+  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames]);
   var scheduleResize = (0, _react.useMemo)(function () {
     return (0, _rafSchd.default)(handleResize);
   }, [handleResize]);

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

@@ -3,11 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.generateResizedPayload = exports.generateResizeFrameRatePayloads = void 0;
 exports.getSelectedCellInfo = getSelectedCellInfo;
 exports.getSelectedTableInfo = getSelectedTableInfo;
-exports.withEditorAnalyticsAPI = void 0;
+exports.withEditorAnalyticsAPI = exports.useMeasureFramerate = exports.reduceResizeFrameRateSamples = void 0;
+var _react = require("react");
+var _analytics = require("@atlaskit/editor-common/analytics");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _utils2 = require("../pm-plugins/table-resizing/utils");
+var _utils3 = require("../utils");
 function getSelectedTableInfo(selection) {
   var map;
   var totalRowCount = 0;
@@ -68,4 +73,143 @@ var withEditorAnalyticsAPI = function withEditorAnalyticsAPI(payload) {
     };
   };
 };
-exports.withEditorAnalyticsAPI = withEditorAnalyticsAPI;
+exports.withEditorAnalyticsAPI = withEditorAnalyticsAPI;
+var generateResizedPayload = function generateResizedPayload(props) {
+  var _props$originalNode$a;
+  var tableMap = _tableMap.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, _utils2.hasTableBeenResized)(props.resizedNode) ? (0, _utils3.getTableWidth)(props.resizedNode) : null,
+      totalRowCount: tableMap.height,
+      totalColumnCount: tableMap.width
+    }
+  };
+};
+exports.generateResizedPayload = generateResizedPayload;
+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;
+  }
+};
+exports.reduceResizeFrameRateSamples = reduceResizeFrameRateSamples;
+var generateResizeFrameRatePayloads = function generateResizeFrameRatePayloads(props) {
+  var reducedResizeFrameRateSamples = reduceResizeFrameRateSamples(props.frameRateSamples);
+  return reducedResizeFrameRateSamples.map(function (frameRateSample, index) {
+    return {
+      action: _analytics.TABLE_ACTION.RESIZE_PERF_SAMPLING,
+      actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+      eventType: _analytics.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.
+ */
+exports.generateResizeFrameRatePayloads = generateResizeFrameRatePayloads;
+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 = (0, _react.useRef)(0);
+  var lastTime = (0, _react.useRef)(0);
+  var timeoutId = (0, _react.useRef)();
+  var frameRateSamples = (0, _react.useRef)([]);
+  (0, _react.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
+  };
+};
+exports.useMeasureFramerate = useMeasureFramerate;

package/dist/cjs/version.json

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

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

@@ -1,38 +1,19 @@
 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';
 const handles = {
   right: true
 };
 const tableHandleMarginTop = 12;
-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
-    }
-  };
-};
 const getResizerHandleHeight = tableRef => {
   const tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
   let handleHeightSize = 'small';
@@ -73,6 +54,11 @@ export const TableResizer = ({
   const [snappingEnabled, setSnappingEnabled] = useState(false);
   const resizerMinWidth = getResizerMinWidth(node);
   const handleHeightSize = getResizerHandleHeight(tableRef);
+  const {
+    startMeasure,
+    endMeasure,
+    countFrames
+  } = useMeasureFramerate();
   const updateActiveGuidelines = useCallback(({
     gap,
     keys
@@ -86,6 +72,7 @@ export const TableResizer = ({
     x: defaultGuidelineWidths
   } : undefined, [snappingEnabled]);
   const handleResizeStart = useCallback(() => {
+    startMeasure();
     const {
       dispatch,
       state: {
@@ -96,7 +83,7 @@ export const TableResizer = ({
       resizing: true
     }));
     setSnappingEnabled(displayGuideline(defaultGuidelines));
-  }, [displayGuideline, editorView]);
+  }, [displayGuideline, editorView, startMeasure]);
   const handleResizeStop = useCallback((originalState, delta) => {
     const newWidth = originalState.width + delta.width;
     const {
@@ -107,8 +94,20 @@ export const TableResizer = ({
     let tr = state.tr.setMeta(tableWidthPluginKey, {
       resizing: false
     });
+    const frameRateSamples = endMeasure();
+    if (frameRateSamples.length > 0) {
+      const resizeFrameRatePayloads = generateResizeFrameRatePayloads({
+        docSize: state.doc.nodeSize,
+        frameRateSamples,
+        originalNode: node
+      });
+      resizeFrameRatePayloads.forEach(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, {
         ...node.attrs,
         width: newWidth
@@ -121,10 +120,10 @@ export const TableResizer = ({
         parentWidth: newWidth
       }, editorView.domAtPos.bind(editorView))(tr);
       const 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 +131,9 @@ export const TableResizer = ({
     displayGuideline([]);
     updateWidth(newWidth);
     return newWidth;
-  }, [updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent]);
+  }, [updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, endMeasure]);
   const handleResize = useCallback((originalState, delta) => {
+    countFrames();
     const newWidth = originalState.width + delta.width;
     const pos = getPos();
     if (typeof pos !== 'number') {
@@ -148,7 +148,7 @@ export const TableResizer = ({
     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]);
   const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
   const handleComponent = useMemo(() => ({
     left: /*#__PURE__*/React.createElement("div", {

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.0",
 	"sideEffects": false
 }