@atlaskit/editor-plugin-table 2.5.5 → 2.6.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 2.6.1
+
+### Patch Changes
+
+- [`84516fbd72d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/84516fbd72d) - [ux] ED-19068: fix numbered columns scroll bar issue
+
+## 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

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

@@ -25,6 +25,7 @@ var _commands = require("../commands");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
 var _stickyHeaders = require("../pm-plugins/sticky-headers");
 var _utils3 = require("../pm-plugins/table-resizing/utils");
+var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
 var _dom = require("../pm-plugins/table-resizing/utils/dom");
 var _types = require("../types");
 var _TableFloatingControls = _interopRequireDefault(require("../ui/TableFloatingControls"));
@@ -140,9 +141,21 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         if (shouldScaleTable) {
           _this.scaleTable({
             parentWidth: parentWidth,
-            layoutChanged: layoutChanged
+            layoutChanged: layoutChanged,
+            isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
           });
         }
+
+        // only when table resizing is enabled and toggle numbered column to run scaleTable
+        if (options !== null && options !== void 0 && options.isTableResizingEnabled && hasNumberedColumnChanged) {
+          if (!(0, _colgroup.hasTableBeenResized)(prevNode)) {
+            _this.scaleTable({
+              parentWidth: parentWidth,
+              layoutChanged: layoutChanged,
+              isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
+            });
+          }
+        }
         _this.updateParentWidth(parentWidth);
       }
       _this.node = node;

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/nodeviews/table.js

@@ -20,6 +20,7 @@ var _prosemirrorModel = require("prosemirror-model");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _createPluginConfig = require("../create-plugin-config");
 var _pluginFactory = require("../pm-plugins/plugin-factory");
@@ -36,7 +37,7 @@ var tableAttributes = function tableAttributes(node, options, state, pos) {
   // 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 = shouldHaveInlineWidth ? "width: ".concat((0, _nodeWidth.getTableContainerWidth)(node), "px") : undefined;
+  var style = shouldHaveInlineWidth ? "width: ".concat(node.attrs.isNumberColumnEnabled ? (0, _nodeWidth.getTableContainerWidth)(node) - _editorSharedStyles.akEditorTableNumberColumnWidth : (0, _nodeWidth.getTableContainerWidth)(node), "px") : undefined;
   return {
     'data-number-column': node.attrs.isNumberColumnEnabled,
     'data-layout': node.attrs.layout,

package/dist/cjs/plugins/table/pm-plugins/table-resizing/utils/scale-table.js

@@ -8,6 +8,7 @@ exports.scaleTable = exports.scale = exports.previewScaleTable = void 0;
 exports.scaleTableTo = scaleTableTo;
 exports.scaleWithParent = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _transforms = require("../../../transforms");
@@ -32,12 +33,13 @@ var scale = function scale(tableRef, options, domAtPos) {
     prevNode = options.prevNode,
     start = options.start,
     isBreakoutEnabled = options.isBreakoutEnabled,
-    layoutChanged = options.layoutChanged;
-  var maxSize = (0, _misc.getLayoutSize)(node.attrs.layout, containerWidth, {
+    layoutChanged = options.layoutChanged,
+    isTableResizingEnabled = options.isTableResizingEnabled;
+  var maxSize = isTableResizingEnabled ? (0, _nodeWidth.getTableContainerWidth)(node) : (0, _misc.getLayoutSize)(node.attrs.layout, containerWidth, {
     isBreakoutEnabled: isBreakoutEnabled
   });
   var prevTableWidth = (0, _utils.getTableWidth)(prevNode);
-  var previousMaxSize = (0, _misc.getLayoutSize)(prevNode.attrs.layout, previousContainerWidth, {
+  var previousMaxSize = isTableResizingEnabled ? (0, _nodeWidth.getTableContainerWidth)(node) : (0, _misc.getLayoutSize)(prevNode.attrs.layout, previousContainerWidth, {
     isBreakoutEnabled: isBreakoutEnabled
   });
   var newWidth = maxSize;
@@ -116,7 +118,9 @@ var previewScaleTable = function previewScaleTable(tableRef, options, domAtPos)
     return;
   }
   if (parentWidth) {
-    tableRef.style.width = "".concat(parentWidth, "px");
+    var isNumberColumnEnabled = node.attrs.isNumberColumnEnabled;
+    var width = isNumberColumnEnabled ? parentWidth - _editorSharedStyles.akEditorTableNumberColumnWidth : parentWidth;
+    tableRef.style.width = "".concat(width, "px");
   }
   if (!(0, _colgroup.hasTableBeenResized)(node)) {
     return;
@@ -138,7 +142,6 @@ var scaleTable = function scaleTable(tableRef, options, domAtPos) {
       start = options.start,
       parentWidth = options.parentWidth,
       layoutChanged = options.layoutChanged;
-
     // If a table has not been resized yet, columns should be auto.
     if ((0, _colgroup.hasTableBeenResized)(node) === false) {
       // If its not a re-sized table, we still want to re-create cols

package/dist/cjs/version.json

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

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

@@ -12,6 +12,7 @@ import { autoSizeTable, clearHoverSelection } from '../commands';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
 import { getLayoutSize, insertColgroupFromNode as recreateResizeColsByNode, scaleTable } from '../pm-plugins/table-resizing/utils';
+import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import TableFloatingControls from '../ui/TableFloatingControls';
@@ -125,9 +126,21 @@ class TableComponent extends React.Component {
         if (shouldScaleTable) {
           this.scaleTable({
             parentWidth,
-            layoutChanged
+            layoutChanged,
+            isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
           });
         }
+
+        // only when table resizing is enabled and toggle numbered column to run scaleTable
+        if (options !== null && options !== void 0 && options.isTableResizingEnabled && hasNumberedColumnChanged) {
+          if (!hasTableBeenResized(prevNode)) {
+            this.scaleTable({
+              parentWidth,
+              layoutChanged,
+              isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
+            });
+          }
+        }
         this.updateParentWidth(parentWidth);
       }
       this.node = node;

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/nodeviews/table.js

@@ -4,6 +4,7 @@ import { DOMSerializer } from 'prosemirror-model';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
+import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { pluginConfig as getPluginConfig } from '../create-plugin-config';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -18,7 +19,7 @@ const tableAttributes = (node, options, state, pos) => {
   // 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 = shouldHaveInlineWidth ? `width: ${getTableContainerWidth(node)}px` : undefined;
+  let style = shouldHaveInlineWidth ? `width: ${node.attrs.isNumberColumnEnabled ? getTableContainerWidth(node) - akEditorTableNumberColumnWidth : getTableContainerWidth(node)}px` : undefined;
   return {
     'data-number-column': node.attrs.isNumberColumnEnabled,
     'data-layout': node.attrs.layout,

package/dist/es2019/plugins/table/pm-plugins/table-resizing/utils/scale-table.js

@@ -1,3 +1,4 @@
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { updateColumnWidths } from '../../../transforms';
@@ -21,13 +22,14 @@ export const scale = (tableRef, options, domAtPos) => {
     prevNode,
     start,
     isBreakoutEnabled,
-    layoutChanged
+    layoutChanged,
+    isTableResizingEnabled
   } = options;
-  const maxSize = getLayoutSize(node.attrs.layout, containerWidth, {
+  const maxSize = isTableResizingEnabled ? getTableContainerWidth(node) : getLayoutSize(node.attrs.layout, containerWidth, {
     isBreakoutEnabled
   });
   const prevTableWidth = getTableWidth(prevNode);
-  const previousMaxSize = getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {
+  const previousMaxSize = isTableResizingEnabled ? getTableContainerWidth(node) : getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {
     isBreakoutEnabled
   });
   let newWidth = maxSize;
@@ -110,7 +112,9 @@ export const previewScaleTable = (tableRef, options, domAtPos) => {
     return;
   }
   if (parentWidth) {
-    tableRef.style.width = `${parentWidth}px`;
+    const isNumberColumnEnabled = node.attrs.isNumberColumnEnabled;
+    const width = isNumberColumnEnabled ? parentWidth - akEditorTableNumberColumnWidth : parentWidth;
+    tableRef.style.width = `${width}px`;
   }
   if (!hasTableBeenResized(node)) {
     return;
@@ -132,7 +136,6 @@ export const scaleTable = (tableRef, options, domAtPos) => tr => {
     parentWidth,
     layoutChanged
   } = options;
-
   // If a table has not been resized yet, columns should be auto.
   if (hasTableBeenResized(node) === false) {
     // If its not a re-sized table, we still want to re-create cols

package/dist/es2019/version.json

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

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

@@ -22,6 +22,7 @@ import { autoSizeTable, clearHoverSelection } from '../commands';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { findStickyHeaderForTable, pluginKey as stickyHeadersPluginKey } from '../pm-plugins/sticky-headers';
 import { getLayoutSize, insertColgroupFromNode as recreateResizeColsByNode, scaleTable } from '../pm-plugins/table-resizing/utils';
+import { hasTableBeenResized } from '../pm-plugins/table-resizing/utils/colgroup';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
 import TableFloatingControls from '../ui/TableFloatingControls';
@@ -133,9 +134,21 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         if (shouldScaleTable) {
           _this.scaleTable({
             parentWidth: parentWidth,
-            layoutChanged: layoutChanged
+            layoutChanged: layoutChanged,
+            isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
           });
         }
+
+        // only when table resizing is enabled and toggle numbered column to run scaleTable
+        if (options !== null && options !== void 0 && options.isTableResizingEnabled && hasNumberedColumnChanged) {
+          if (!hasTableBeenResized(prevNode)) {
+            _this.scaleTable({
+              parentWidth: parentWidth,
+              layoutChanged: layoutChanged,
+              isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled
+            });
+          }
+        }
         _this.updateParentWidth(parentWidth);
       }
       _this.node = node;

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