@atlaskit/editor-plugin-table 2.7.2 → 2.8.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 2.8.1
+
+### Patch Changes
+
+- [`800c927efd1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/800c927efd1) - [ux] ED-19317: fix numbered column shift up issue with custom table FF on
+
+## 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/nodeviews/table.js

@@ -13,8 +13,8 @@ var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
@@ -32,35 +32,38 @@ var _utils2 = require("../utils");
 var _TableComponent = _interopRequireDefault(require("./TableComponent"));
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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) { (0, _defineProperty2.default)(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; }
-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) && !(0, _utils2.isTableNested)(state, pos);
-  var style = "width: ".concat(node.attrs.isNumberColumnEnabled ? (0, _nodeWidth.getTableContainerWidth)(node) - _editorSharedStyles.akEditorTableNumberColumnWidth : (0, _nodeWidth.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) && !(0, _utils2.isTableNested)(state, pos);
+  var widthValue = (0, _nodeWidth.getTableContainerWidth)(node);
+  if (node.attrs.isNumberColumnEnabled) {
+    widthValue -= _editorSharedStyles.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((0, _toConsumableArray2.default)((0, _utils.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) {
   (0, _inherits2.default)(TableView, _ReactNodeView);
@@ -82,8 +85,12 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
     key: "getContentDOM",
     value: function getContentDOM() {
       var rendered = _model.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;
     }
@@ -94,10 +101,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/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.1",
 	"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/nodeviews/table.js

@@ -14,34 +14,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';
-const 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
-  const shouldHaveInlineWidth = (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) && !isTableNested(state, pos);
-  let style = `width: ${node.attrs.isNumberColumnEnabled ? getTableContainerWidth(node) - akEditorTableNumberColumnWidth : getTableContainerWidth(node)}px`;
-  const dataAttrsInTable = {
+const 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 {
-      ...dataAttrsInTable,
-      style
-    };
+};
+const 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
+  const shouldHaveInlineWidth = (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) && !isTableNested(state, pos);
+  let widthValue = getTableContainerWidth(node);
+  if (node.attrs.isNumberColumnEnabled) {
+    widthValue -= akEditorTableNumberColumnWidth;
+  }
+  return shouldHaveInlineWidth ? widthValue : undefined;
+};
+const handleInlineTableWidth = (table, width) => {
+  if (!table || !width) {
+    return;
   }
-  return dataAttrsInTable;
+  table.style.setProperty('width', `${width}px`);
 };
 const toDOM = (node, props) => {
   let colgroup = '';
   if (props.allowColumnResizing) {
     colgroup = ['colgroup', {}, ...generateColgroup(node)];
   }
-  return ['table', tableAttributes(node, props.options, props.view.state, props.getPos()), colgroup, ['tbody', 0]];
+  return ['table', tableAttributes(node), colgroup, ['tbody', 0]];
 };
 export default class TableView extends ReactNodeView {
   constructor(props) {
@@ -56,8 +60,12 @@ export default class TableView extends ReactNodeView {
   }
   getContentDOM() {
     const rendered = DOMSerializer.renderSpec(document, toDOM(this.node, this.reactComponentProps));
+    const 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;
   }
@@ -65,10 +73,16 @@ export default class TableView extends ReactNodeView {
     if (!this.table) {
       return;
     }
-    const attrs = tableAttributes(node, this.reactComponentProps.options, this.view.state, this.getPos());
+    const attrs = tableAttributes(node);
     Object.keys(attrs).forEach(attr => {
       this.table.setAttribute(attr, attrs[attr]);
     });
+
+    // handle inline style when table been resized
+    const tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos());
+    if (tableInlineWidth) {
+      handleInlineTableWidth(this.table, tableInlineWidth);
+    }
   }
   render(props, forwardRef) {
     // TODO: ED-15663