@atlaskit/editor-plugin-table 2.6.0 → 2.6.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-table
 
+## 2.6.2
+
+### Patch Changes
+
+- [`bc9f806f84a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc9f806f84a) - Toggle handle visibility of resizer if current table is selected
+- Updated dependencies
+
+## 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

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/TableResizer.js

@@ -14,10 +14,11 @@ 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 _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 _utils2 = require("../utils");
+var _utils3 = 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); }
@@ -39,25 +40,13 @@ var generateResizedPayload = function generateResizedPayload(props) {
       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,
+      totalTableWidth: (0, _utils2.hasTableBeenResized)(props.resizedNode) ? (0, _utils3.getTableWidth)(props.resizedNode) : null,
       totalRowCount: tableMap.height,
       totalColumnCount: tableMap.width
     }
   };
 };
-var TableResizer = function TableResizer(_ref) {
-  var children = _ref.children,
-    width = _ref.width,
-    maxWidth = _ref.maxWidth,
-    updateWidth = _ref.updateWidth,
-    editorView = _ref.editorView,
-    getPos = _ref.getPos,
-    node = _ref.node,
-    tableRef = _ref.tableRef,
-    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 getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
   var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
   var handleHeightSize = 'small';
   /*
@@ -73,11 +62,32 @@ var TableResizer = function TableResizer(_ref) {
   } else if (tableHeight && tableHeight >= 96) {
     handleHeightSize = 'large';
   }
+  return handleHeightSize;
+};
+var getResizerMinWidth = function getResizerMinWidth(node) {
+  var currentColumnCount = (0, _utils2.getColgroupChildrenLength)(node);
+  var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * _utils2.COLUMN_MIN_WIDTH : 3 * _utils2.COLUMN_MIN_WIDTH;
+  return minColumnWidth;
+};
+var TableResizer = function TableResizer(_ref) {
+  var _findTable, _editorView$state;
+  var children = _ref.children,
+    width = _ref.width,
+    maxWidth = _ref.maxWidth,
+    updateWidth = _ref.updateWidth,
+    editorView = _ref.editorView,
+    getPos = _ref.getPos,
+    node = _ref.node,
+    tableRef = _ref.tableRef,
+    displayGuideline = _ref.displayGuideline,
+    attachAnalyticsEvent = _ref.attachAnalyticsEvent;
   var currentGap = (0, _react.useRef)(0);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     snappingEnabled = _useState2[0],
     setSnappingEnabled = _useState2[1];
+  var resizerMinWidth = getResizerMinWidth(node);
+  var handleHeightSize = getResizerHandleHeight(tableRef);
   var updateActiveGuidelines = (0, _react.useCallback)(function (_ref2) {
     var gap = _ref2.gap,
       keys = _ref2.keys;
@@ -98,8 +108,7 @@ var TableResizer = function TableResizer(_ref) {
       resizing: true
     }));
     setSnappingEnabled(displayGuideline(_guidelines.defaultGuidelines));
-    return width;
-  }, [width, displayGuideline, editorView]);
+  }, [displayGuideline, editorView]);
   var handleResizeStop = (0, _react.useCallback)(function (originalState, delta) {
     var newWidth = originalState.width + delta.width;
     var state = editorView.state,
@@ -114,7 +123,7 @@ var TableResizer = function TableResizer(_ref) {
         width: newWidth
       }));
       var newNode = tr.doc.nodeAt(pos);
-      tr = (0, _utils.scaleTable)(tableRef, {
+      tr = (0, _utils2.scaleTable)(tableRef, {
         node: newNode,
         prevNode: node,
         start: pos + 1,
@@ -139,7 +148,7 @@ var TableResizer = function TableResizer(_ref) {
     if (typeof pos !== 'number') {
       return;
     }
-    (0, _utils.previewScaleTable)(tableRef, {
+    (0, _utils2.previewScaleTable)(tableRef, {
       node: node,
       prevNode: node,
       start: pos + 1,
@@ -162,11 +171,12 @@ var TableResizer = function TableResizer(_ref) {
     handleResize: scheduleResize,
     handleResizeStop: handleResizeStop,
     resizeRatio: 2,
-    minWidth: minColumnWidth,
+    minWidth: resizerMinWidth,
     maxWidth: maxWidth,
     snapGap: _consts.TABLE_SNAP_GAP,
     snap: guidelineSnaps,
-    handlePositioning: "adjacent"
+    handlePositioning: "adjacent",
+    isHandleVisible: ((_findTable = (0, _utils.findTable)((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos()
   }, children);
 };
 exports.TableResizer = TableResizer;

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,12 +142,12 @@ 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
       // To force reflow of columns upon delete.
       (0, _colgroup.insertColgroupFromNode)(tableRef, node);
+      tr.setMeta('scrollIntoView', false);
       return tr;
     }
     var resizeState;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.6.0",
+	"version": "2.6.2",
 	"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/TableResizer.js

@@ -4,6 +4,7 @@ import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-commo
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 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 { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_HIGHLIGHT_GAP, TABLE_SNAP_GAP } from '../ui/consts';
@@ -31,20 +32,7 @@ const generateResizedPayload = props => {
     }
   };
 };
-export const TableResizer = ({
-  children,
-  width,
-  maxWidth,
-  updateWidth,
-  editorView,
-  getPos,
-  node,
-  tableRef,
-  displayGuideline,
-  attachAnalyticsEvent
-}) => {
-  const currentColumnCount = getColgroupChildrenLength(node);
-  const minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
+const getResizerHandleHeight = tableRef => {
   const tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
   let handleHeightSize = 'small';
   /*
@@ -60,8 +48,30 @@ export const TableResizer = ({
   } else if (tableHeight && tableHeight >= 96) {
     handleHeightSize = 'large';
   }
+  return handleHeightSize;
+};
+const getResizerMinWidth = node => {
+  const currentColumnCount = getColgroupChildrenLength(node);
+  const minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
+  return minColumnWidth;
+};
+export const TableResizer = ({
+  children,
+  width,
+  maxWidth,
+  updateWidth,
+  editorView,
+  getPos,
+  node,
+  tableRef,
+  displayGuideline,
+  attachAnalyticsEvent
+}) => {
+  var _findTable, _editorView$state;
   const currentGap = useRef(0);
   const [snappingEnabled, setSnappingEnabled] = useState(false);
+  const resizerMinWidth = getResizerMinWidth(node);
+  const handleHeightSize = getResizerHandleHeight(tableRef);
   const updateActiveGuidelines = useCallback(({
     gap,
     keys
@@ -85,8 +95,7 @@ export const TableResizer = ({
       resizing: true
     }));
     setSnappingEnabled(displayGuideline(defaultGuidelines));
-    return width;
-  }, [width, displayGuideline, editorView]);
+  }, [displayGuideline, editorView]);
   const handleResizeStop = useCallback((originalState, delta) => {
     const newWidth = originalState.width + delta.width;
     const {
@@ -150,10 +159,11 @@ export const TableResizer = ({
     handleResize: scheduleResize,
     handleResizeStop: handleResizeStop,
     resizeRatio: 2,
-    minWidth: minColumnWidth,
+    minWidth: resizerMinWidth,
     maxWidth: maxWidth,
     snapGap: TABLE_SNAP_GAP,
     snap: guidelineSnaps,
-    handlePositioning: "adjacent"
+    handlePositioning: "adjacent",
+    isHandleVisible: ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos()
   }, children);
 };

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,12 +136,12 @@ 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
     // To force reflow of columns upon delete.
     insertColgroupFromNode(tableRef, node);
+    tr.setMeta('scrollIntoView', false);
     return tr;
   }
   let resizeState;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.6.0",
+	"version": "2.6.2",
 	"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/TableResizer.js

@@ -8,6 +8,7 @@ import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-commo
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 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 { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_HIGHLIGHT_GAP, TABLE_SNAP_GAP } from '../ui/consts';
@@ -35,19 +36,7 @@ var generateResizedPayload = function generateResizedPayload(props) {
     }
   };
 };
-export var TableResizer = function TableResizer(_ref) {
-  var children = _ref.children,
-    width = _ref.width,
-    maxWidth = _ref.maxWidth,
-    updateWidth = _ref.updateWidth,
-    editorView = _ref.editorView,
-    getPos = _ref.getPos,
-    node = _ref.node,
-    tableRef = _ref.tableRef,
-    displayGuideline = _ref.displayGuideline,
-    attachAnalyticsEvent = _ref.attachAnalyticsEvent;
-  var currentColumnCount = getColgroupChildrenLength(node);
-  var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
+var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
   var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
   var handleHeightSize = 'small';
   /*
@@ -63,11 +52,32 @@ export var TableResizer = function TableResizer(_ref) {
   } else if (tableHeight && tableHeight >= 96) {
     handleHeightSize = 'large';
   }
+  return handleHeightSize;
+};
+var getResizerMinWidth = function getResizerMinWidth(node) {
+  var currentColumnCount = getColgroupChildrenLength(node);
+  var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
+  return minColumnWidth;
+};
+export var TableResizer = function TableResizer(_ref) {
+  var _findTable, _editorView$state;
+  var children = _ref.children,
+    width = _ref.width,
+    maxWidth = _ref.maxWidth,
+    updateWidth = _ref.updateWidth,
+    editorView = _ref.editorView,
+    getPos = _ref.getPos,
+    node = _ref.node,
+    tableRef = _ref.tableRef,
+    displayGuideline = _ref.displayGuideline,
+    attachAnalyticsEvent = _ref.attachAnalyticsEvent;
   var currentGap = useRef(0);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     snappingEnabled = _useState2[0],
     setSnappingEnabled = _useState2[1];
+  var resizerMinWidth = getResizerMinWidth(node);
+  var handleHeightSize = getResizerHandleHeight(tableRef);
   var updateActiveGuidelines = useCallback(function (_ref2) {
     var gap = _ref2.gap,
       keys = _ref2.keys;
@@ -88,8 +98,7 @@ export var TableResizer = function TableResizer(_ref) {
       resizing: true
     }));
     setSnappingEnabled(displayGuideline(defaultGuidelines));
-    return width;
-  }, [width, displayGuideline, editorView]);
+  }, [displayGuideline, editorView]);
   var handleResizeStop = useCallback(function (originalState, delta) {
     var newWidth = originalState.width + delta.width;
     var state = editorView.state,
@@ -152,10 +161,11 @@ export var TableResizer = function TableResizer(_ref) {
     handleResize: scheduleResize,
     handleResizeStop: handleResizeStop,
     resizeRatio: 2,
-    minWidth: minColumnWidth,
+    minWidth: resizerMinWidth,
     maxWidth: maxWidth,
     snapGap: TABLE_SNAP_GAP,
     snap: guidelineSnaps,
-    handlePositioning: "adjacent"
+    handlePositioning: "adjacent",
+    isHandleVisible: ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos()
   }, children);
 };

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

@@ -15,6 +15,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';
@@ -29,7 +30,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) && !isTableNested(state, pos);
-  var style = shouldHaveInlineWidth ? "width: ".concat(getTableContainerWidth(node), "px") : undefined;
+  var style = shouldHaveInlineWidth ? "width: ".concat(node.attrs.isNumberColumnEnabled ? getTableContainerWidth(node) - akEditorTableNumberColumnWidth : getTableContainerWidth(node), "px") : undefined;
   return {
     'data-number-column': node.attrs.isNumberColumnEnabled,
     'data-layout': node.attrs.layout,

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

@@ -1,6 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 { 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';
@@ -23,12 +24,13 @@ export var scale = function scale(tableRef, options, domAtPos) {
     prevNode = options.prevNode,
     start = options.start,
     isBreakoutEnabled = options.isBreakoutEnabled,
-    layoutChanged = options.layoutChanged;
-  var maxSize = getLayoutSize(node.attrs.layout, containerWidth, {
+    layoutChanged = options.layoutChanged,
+    isTableResizingEnabled = options.isTableResizingEnabled;
+  var maxSize = isTableResizingEnabled ? getTableContainerWidth(node) : getLayoutSize(node.attrs.layout, containerWidth, {
     isBreakoutEnabled: isBreakoutEnabled
   });
   var prevTableWidth = getTableWidth(prevNode);
-  var previousMaxSize = getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {
+  var previousMaxSize = isTableResizingEnabled ? getTableContainerWidth(node) : getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {
     isBreakoutEnabled: isBreakoutEnabled
   });
   var newWidth = maxSize;
@@ -105,7 +107,9 @@ export var previewScaleTable = function previewScaleTable(tableRef, options, dom
     return;
   }
   if (parentWidth) {
-    tableRef.style.width = "".concat(parentWidth, "px");
+    var isNumberColumnEnabled = node.attrs.isNumberColumnEnabled;
+    var width = isNumberColumnEnabled ? parentWidth - akEditorTableNumberColumnWidth : parentWidth;
+    tableRef.style.width = "".concat(width, "px");
   }
   if (!hasTableBeenResized(node)) {
     return;
@@ -126,12 +130,12 @@ export 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 (hasTableBeenResized(node) === false) {
       // If its not a re-sized table, we still want to re-create cols
       // To force reflow of columns upon delete.
       insertColgroupFromNode(tableRef, node);
+      tr.setMeta('scrollIntoView', false);
       return tr;
     }
     var resizeState;

package/dist/esm/version.json

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

package/dist/types/plugins/table/pm-plugins/table-resizing/utils/scale-table.d.ts

@@ -12,6 +12,7 @@ export interface ScaleOptions {
     layoutChanged?: boolean;
     isBreakoutEnabled?: boolean;
     isFullWidthModeEnabled?: boolean;
+    isTableResizingEnabled?: boolean;
 }
 export declare const scale: (tableRef: HTMLTableElement, options: ScaleOptions, domAtPos: DomAtPos) => ResizeState | undefined;
 export declare const scaleWithParent: (tableRef: HTMLTableElement, parentWidth: number, table: PMNode, start: number, domAtPos: DomAtPos) => ResizeState;

package/dist/types-ts4.5/plugins/table/pm-plugins/table-resizing/utils/scale-table.d.ts

@@ -12,6 +12,7 @@ export interface ScaleOptions {
     layoutChanged?: boolean;
     isBreakoutEnabled?: boolean;
     isFullWidthModeEnabled?: boolean;
+    isTableResizingEnabled?: boolean;
 }
 export declare const scale: (tableRef: HTMLTableElement, options: ScaleOptions, domAtPos: DomAtPos) => ResizeState | undefined;
 export declare const scaleWithParent: (tableRef: HTMLTableElement, parentWidth: number, table: PMNode, start: number, domAtPos: DomAtPos) => ResizeState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.6.0",
+  "version": "2.6.2",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^26.3.0",
-    "@atlaskit/editor-common": "^74.27.0",
+    "@atlaskit/editor-common": "^74.28.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.6",

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

@@ -53,15 +53,15 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
     );
     const resolvedTable = findTable(editorView.state.selection);
 
-    return { editorView, node: resolvedTable!.node };
+    return { table: resolvedTable!.node, editorView };
   };
 
-  describe('show correct container for FF and options', () => {
+  describe('show correct table container', () => {
     const buildContainer = (
       isTableResizingEnabled: boolean,
       isBreakoutEnabled: boolean = true,
     ) => {
-      const { node, editorView } = createNode();
+      const { table, editorView } = createNode();
 
       const { container } = render(
         <TableContainer
@@ -69,7 +69,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
             width: 1800,
             lineLength: 720,
           }}
-          node={node}
+          node={table}
           isTableResizingEnabled={isTableResizingEnabled}
           isBreakoutEnabled={isBreakoutEnabled}
           className={''}
@@ -83,12 +83,12 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
       return container;
     };
 
-    test('when isTableResizingEnabled is true', () => {
+    test('should wrap table in resizer when isTableResizingEnabled is true', () => {
       const container = buildContainer(true);
       expect(!!container.querySelector('.resizer-item')).toBeTruthy();
     });
 
-    test('when isTableResizingEnabled is false', () => {
+    test('should not wrap table in resizer when isTableResizingEnabled is false', () => {
       const container = buildContainer(false);
       expect(!!container.querySelector('.resizer-item')).toBeFalsy();
     });
@@ -99,7 +99,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
       isTableResizingEnabled: boolean,
       isBreakoutEnabled: boolean = true,
     ) => {
-      const { node, editorView } = createNode();
+      const { table, editorView } = createNode();
 
       const { container } = render(
         <TableContainer
@@ -107,7 +107,7 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
             width: 1800,
             lineLength: 720,
           }}
-          node={node}
+          node={table}
           isTableResizingEnabled={isTableResizingEnabled}
           isBreakoutEnabled={isBreakoutEnabled}
           className={''}
@@ -121,12 +121,12 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
       return container;
     };
 
-    test('when isTableResizingEnabled is true - should not render resizer', () => {
+    test('should not render resizer when isTableResizingEnabled is true', () => {
       const container = buildContainer(true);
       expect(!!container.querySelector('.resizer-item')).toBeFalsy();
     });
 
-    test('when isTableResizingEnabled is false - should not render resizer', () => {
+    test('should not render resizer when isTableResizingEnabled is false', () => {
       const container = buildContainer(false);
       expect(!!container.querySelector('.resizer-item')).toBeFalsy();
     });
@@ -134,13 +134,13 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
 
   describe('sets width and margin correctly for resizable container', () => {
     const buildContainer = (attrs: TableAttributes) => {
-      const { node, editorView } = createNode(attrs);
+      const { table, editorView } = createNode(attrs);
 
       const { container } = render(
         <ResizableTableContainer
           containerWidth={1800}
           lineLength={720}
-          node={node}
+          node={table}
           className={''}
           editorView={editorView}
           getPos={() => 1}
@@ -162,14 +162,14 @@ describe('table -> nodeviews -> TableContainer.tsx', () => {
 
   describe('analytics', () => {
     const buildContainer = (attrs: TableAttributes) => {
-      const { node, editorView } = createNode(attrs);
+      const { table, editorView } = createNode(attrs);
       const analyticsMock = jest.fn();
 
       const { container } = render(
         <ResizableTableContainer
           containerWidth={1800}
           lineLength={720}
-          node={node}
+          node={table}
           className={''}
           editorView={editorView}
           getPos={() => 0}

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

@@ -31,6 +31,7 @@ import {
   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,
@@ -562,8 +563,24 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
       // If column has been inserted/deleted avoid multi dispatch
       if (shouldScaleTable) {
-        this.scaleTable({ parentWidth, layoutChanged });
+        this.scaleTable({
+          parentWidth,
+          layoutChanged,
+          isTableResizingEnabled: options?.isTableResizingEnabled,
+        });
       }
+
+      // only when table resizing is enabled and toggle numbered column to run scaleTable
+      if (options?.isTableResizingEnabled && hasNumberedColumnChanged) {
+        if (!hasTableBeenResized(prevNode)) {
+          this.scaleTable({
+            parentWidth,
+            layoutChanged,
+            isTableResizingEnabled: options?.isTableResizingEnabled,
+          });
+        }
+      }
+
       this.updateParentWidth(parentWidth);
     }
 
@@ -575,6 +592,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
   private scaleTable = (scaleOptions: {
     layoutChanged: boolean;
     parentWidth?: number;
+    isTableResizingEnabled?: boolean;
   }) => {
     const { view, getNode, getPos, containerWidth, options } = this.props;
     const node = getNode();

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

@@ -25,6 +25,7 @@ import {
 } from '@atlaskit/editor-common/resizer';
 import type { GuidelineConfig } from '@atlaskit/editor-plugin-guideline';
 import { TableMap } from '@atlaskit/editor-tables';
+import { findTable } from '@atlaskit/editor-tables/utils';
 
 import {
   COLUMN_MIN_WIDTH,
@@ -38,7 +39,6 @@ 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';
-
 interface TableResizerProps {
   width: number;
   maxWidth: number;
@@ -79,24 +79,7 @@ const generateResizedPayload = (props: {
   };
 };
 
-export const TableResizer = ({
-  children,
-  width,
-  maxWidth,
-  updateWidth,
-  editorView,
-  getPos,
-  node,
-  tableRef,
-  displayGuideline,
-  attachAnalyticsEvent,
-}: PropsWithChildren<TableResizerProps>) => {
-  const currentColumnCount = getColgroupChildrenLength(node);
-  const minColumnWidth =
-    currentColumnCount <= 3
-      ? currentColumnCount * COLUMN_MIN_WIDTH
-      : 3 * COLUMN_MIN_WIDTH;
-
+const getResizerHandleHeight = (tableRef: HTMLTableElement) => {
   const tableHeight = tableRef?.clientHeight;
   let handleHeightSize: HandleHeightSizeType | undefined = 'small';
   /*
@@ -113,9 +96,38 @@ export const TableResizer = ({
   } else if (tableHeight && tableHeight >= 96) {
     handleHeightSize = 'large';
   }
+
+  return handleHeightSize;
+};
+
+const getResizerMinWidth = (node: PMNode) => {
+  const currentColumnCount = getColgroupChildrenLength(node);
+  const minColumnWidth =
+    currentColumnCount <= 3
+      ? currentColumnCount * COLUMN_MIN_WIDTH
+      : 3 * COLUMN_MIN_WIDTH;
+
+  return minColumnWidth;
+};
+
+export const TableResizer = ({
+  children,
+  width,
+  maxWidth,
+  updateWidth,
+  editorView,
+  getPos,
+  node,
+  tableRef,
+  displayGuideline,
+  attachAnalyticsEvent,
+}: PropsWithChildren<TableResizerProps>) => {
   const currentGap = useRef(0);
   const [snappingEnabled, setSnappingEnabled] = useState(false);
 
+  const resizerMinWidth = getResizerMinWidth(node);
+  const handleHeightSize = getResizerHandleHeight(tableRef);
+
   const updateActiveGuidelines = useCallback(
     ({ gap, keys }: { gap: number; keys: string[] }) => {
       if (gap !== currentGap.current) {
@@ -152,8 +164,7 @@ export const TableResizer = ({
     dispatch(tr.setMeta(tableWidthPluginKey, { resizing: true }));
 
     setSnappingEnabled(displayGuideline(defaultGuidelines));
-    return width;
-  }, [width, displayGuideline, editorView]);
+  }, [displayGuideline, editorView]);
 
   const handleResizeStop = useCallback<HandleResize>(
     (originalState, delta) => {
@@ -258,11 +269,12 @@ export const TableResizer = ({
       handleResize={scheduleResize}
       handleResizeStop={handleResizeStop}
       resizeRatio={2}
-      minWidth={minColumnWidth}
+      minWidth={resizerMinWidth}
       maxWidth={maxWidth}
       snapGap={TABLE_SNAP_GAP}
       snap={guidelineSnaps}
       handlePositioning="adjacent"
+      isHandleVisible={findTable(editorView.state?.selection)?.pos === getPos()}
     >
       {children}
     </ResizerNext>

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

@@ -20,6 +20,7 @@ import type {
   getPosHandlerNode,
 } from '@atlaskit/editor-common/types';
 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';
@@ -49,7 +50,11 @@ const tableAttributes = (
     options?.isTableResizingEnabled && !isTableNested(state, pos);
 
   let style = shouldHaveInlineWidth
-    ? `width: ${getTableContainerWidth(node)}px`
+    ? `width: ${
+        node.attrs.isNumberColumnEnabled
+          ? getTableContainerWidth(node) - akEditorTableNumberColumnWidth
+          : getTableContainerWidth(node)
+      }px`
     : undefined;
 
   return {

package/src/plugins/table/pm-plugins/table-resizing/utils/scale-table.ts

@@ -2,6 +2,7 @@ import { Node as PMNode } from 'prosemirror-model';
 import { Transaction } from 'prosemirror-state';
 import type { DomAtPos } from 'prosemirror-utils';
 
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 
@@ -29,6 +30,7 @@ export interface ScaleOptions {
   layoutChanged?: boolean;
   isBreakoutEnabled?: boolean;
   isFullWidthModeEnabled?: boolean;
+  isTableResizingEnabled?: boolean;
 }
 
 // Base function to trigger the actual scale on a table node.
@@ -51,24 +53,27 @@ export const scale = (
     start,
     isBreakoutEnabled,
     layoutChanged,
+    isTableResizingEnabled,
   } = options;
 
-  const maxSize = getLayoutSize(node.attrs.layout, containerWidth, {
-    isBreakoutEnabled,
-  });
+  const maxSize = isTableResizingEnabled
+    ? getTableContainerWidth(node)
+    : getLayoutSize(node.attrs.layout, containerWidth, {
+        isBreakoutEnabled,
+      });
+
   const prevTableWidth = getTableWidth(prevNode);
-  const previousMaxSize = getLayoutSize(
-    prevNode.attrs.layout,
-    previousContainerWidth,
-    {
-      isBreakoutEnabled,
-    },
-  );
+  const previousMaxSize = isTableResizingEnabled
+    ? getTableContainerWidth(node)
+    : getLayoutSize(prevNode.attrs.layout, previousContainerWidth, {
+        isBreakoutEnabled,
+      });
 
   let newWidth = maxSize;
 
   // adjust table width if layout is updated
   const hasOverflow = prevTableWidth > previousMaxSize;
+
   if (layoutChanged && hasOverflow) {
     // No keep overflow if the old content can be in the new size
     const canFitInNewSize = prevTableWidth < maxSize;
@@ -157,7 +162,11 @@ export const previewScaleTable = (
   }
 
   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)) {
@@ -186,12 +195,12 @@ export const scaleTable =
     }
 
     const { node, start, 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
       // To force reflow of columns upon delete.
       insertColgroupFromNode(tableRef, node);
+      tr.setMeta('scrollIntoView', false);
       return tr;
     }