@atlaskit/editor-plugin-table 7.6.12 → 7.6.14

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 7.6.14
+
+### Patch Changes
+
+- [#89135](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/89135) [`134b3db4945d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/134b3db4945d) - fix drag menu flicker issue
+
+## 7.6.13
+
+### Patch Changes
+
+- [#88770](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88770) [`c86d9e7941f1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c86d9e7941f1) - [ux] fixing the numbered columns blue insert line indicator with correct length
+
 ## 7.6.12
 
 ### Patch Changes

package/dist/cjs/ui/FloatingDragMenu/DropdownMenu.js

@@ -13,6 +13,7 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _menu = require("@atlaskit/menu");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _consts = require("../consts");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -24,7 +25,7 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
     section = _ref.section,
     disableKeyboardHandling = _ref.disableKeyboardHandling,
     onItemActivated = _ref.onItemActivated,
-    handleClose = _ref.handleClose,
+    _handleClose = _ref.handleClose,
     onMouseEnter = _ref.onMouseEnter,
     onMouseLeave = _ref.onMouseLeave,
     fitWidth = _ref.fitWidth,
@@ -44,17 +45,21 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
   var handleRef = function handleRef(ref) {
     setTargetRefDiv(ref);
   };
+
+  // more offsets calculation as offsets depend on the direction and updated placement here
+  var offsetY = direction === 'row' ? popupPlacement[0] === 'bottom' ? -8 : -34 : 0;
+  var offsetX = direction === 'column' ? popupPlacement[1] === 'left' ? 0 : -7 : 0;
   var innerMenu = function innerMenu() {
     return /*#__PURE__*/_react.default.createElement(DropListWithOutsideListeners, {
       isOpen: true,
       shouldFitContainer: true,
       position: popupPlacement.join(' '),
       handleClickOutside: function handleClickOutside() {
-        return handleClose('editor');
+        return _handleClose('editor');
       },
       handleEscapeKeydown: function handleEscapeKeydown() {
         if (!disableKeyboardHandling) {
-          handleClose('handle');
+          _handleClose('handle');
         }
       },
       handleEnterKeydown: function handleEnterKeydown(e) {
@@ -90,12 +95,31 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
     })));
   };
   if (disableKeyboardHandling) {
-    return innerMenu();
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.background-color-flicker-in-drag-menu')) {
+      // This part need be refactor when clean up the ff, to reuse the wrapper
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "drag-dropdown-menu-wrapper"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "drag-dropdown-menu-popup-ref",
+        ref: handleRef
+      }), /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+        target: targetRefDiv,
+        mountTo: mountPoint,
+        boundariesElement: boundariesElement,
+        scrollableElement: scrollableElement,
+        onPlacementChanged: function onPlacementChanged(placement) {
+          setPopupPlacement(placement);
+        },
+        fitHeight: fitHeight,
+        fitWidth: fitWidth,
+        zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex,
+        offset: [offsetX, offsetY],
+        allowOutOfBounds: true // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
+      }, innerMenu()));
+    } else {
+      return innerMenu();
+    }
   }
-
-  // more offsets calculation as offsets depend on the direction and updated placement here
-  var offsetY = direction === 'row' ? popupPlacement[0] === 'bottom' ? -8 : -34 : 0;
-  var offsetX = direction === 'column' ? popupPlacement[1] === 'left' ? 0 : -7 : 0;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "drag-dropdown-menu-wrapper"
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -117,6 +141,9 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
     closeOnTab: true,
     type: _uiMenu.ArrowKeyNavigationType.MENU,
+    handleClose: function handleClose() {
+      return _handleClose('handle');
+    },
     onSelection: function onSelection(index) {
       var results = items.flatMap(function (item) {
         return 'items' in item ? item.items : item;

package/dist/cjs/ui/FloatingInsertButton/InsertButton.js

@@ -34,6 +34,13 @@ var getToolbarSize = function getToolbarSize(tableRef) {
   }
   return _consts.tableToolbarSize;
 };
+var getNumberColumnWidth = function getNumberColumnWidth(tableRef, isDragAndDropEnabled) {
+  var parent = (0, _utils.closestElement)(tableRef, ".".concat(_types.TableCssClassName.TABLE_CONTAINER));
+  if (parent && isDragAndDropEnabled) {
+    return parent.querySelector(".".concat(_types.TableCssClassName.NUMBERED_COLUMN)) ? _editorSharedStyles.akEditorTableNumberColumnWidth - 1 : 0;
+  }
+  return 0;
+};
 var getInsertLineWidth = function getInsertLineWidth(tableRef, isDragAndDropEnabled) {
   // The line gets width 100% from the table,
   // but since we have an overflow on the left,
@@ -48,7 +55,7 @@ var getInsertLineWidth = function getInsertLineWidth(tableRef, isDragAndDropEnab
   var diff = offsetWidth - parentOffsetWidth;
   var toolbarSize = isDragAndDropEnabled ? 0 : getToolbarSize(tableRef);
   var lineOffset = isDragAndDropEnabled ? DRAG_LINE_OFFSET : LINE_OFFSET;
-  return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + lineOffset;
+  return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + lineOffset + getNumberColumnWidth(tableRef, isDragAndDropEnabled);
 };
 var tooltipMessageByType = function tooltipMessageByType(type) {
   return type === 'row' ? _messages.tableMessages.insertRow : _messages.tableMessages.insertColumn;

package/dist/es2019/ui/FloatingDragMenu/DropdownMenu.js

@@ -5,6 +5,7 @@ import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenuItem }
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { MenuGroup, Section } from '@atlaskit/menu';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { dragMenuDropdownWidth } from '../consts';
 const DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
 export const DropdownMenu = ({
@@ -27,6 +28,10 @@ export const DropdownMenu = ({
   const handleRef = ref => {
     setTargetRefDiv(ref);
   };
+
+  // more offsets calculation as offsets depend on the direction and updated placement here
+  let offsetY = direction === 'row' ? popupPlacement[0] === 'bottom' ? -8 : -34 : 0;
+  let offsetX = direction === 'column' ? popupPlacement[1] === 'left' ? 0 : -7 : 0;
   const innerMenu = () => {
     return /*#__PURE__*/React.createElement(DropListWithOutsideListeners, {
       isOpen: true,
@@ -69,12 +74,31 @@ export const DropdownMenu = ({
     })))));
   };
   if (disableKeyboardHandling) {
-    return innerMenu();
+    if (getBooleanFF('platform.editor.table.background-color-flicker-in-drag-menu')) {
+      // This part need be refactor when clean up the ff, to reuse the wrapper
+      return /*#__PURE__*/React.createElement("div", {
+        className: "drag-dropdown-menu-wrapper"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "drag-dropdown-menu-popup-ref",
+        ref: handleRef
+      }), /*#__PURE__*/React.createElement(Popup, {
+        target: targetRefDiv,
+        mountTo: mountPoint,
+        boundariesElement: boundariesElement,
+        scrollableElement: scrollableElement,
+        onPlacementChanged: placement => {
+          setPopupPlacement(placement);
+        },
+        fitHeight: fitHeight,
+        fitWidth: fitWidth,
+        zIndex: akEditorFloatingPanelZIndex,
+        offset: [offsetX, offsetY],
+        allowOutOfBounds: true // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
+      }, innerMenu()));
+    } else {
+      return innerMenu();
+    }
   }
-
-  // more offsets calculation as offsets depend on the direction and updated placement here
-  let offsetY = direction === 'row' ? popupPlacement[0] === 'bottom' ? -8 : -34 : 0;
-  let offsetX = direction === 'column' ? popupPlacement[1] === 'left' ? 0 : -7 : 0;
   return /*#__PURE__*/React.createElement("div", {
     className: "drag-dropdown-menu-wrapper"
   }, /*#__PURE__*/React.createElement("div", {
@@ -96,6 +120,7 @@ export const DropdownMenu = ({
   }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
     closeOnTab: true,
     type: ArrowKeyNavigationType.MENU,
+    handleClose: () => handleClose('handle'),
     onSelection: index => {
       const results = items.flatMap(item => 'items' in item ? item.items : item);
 

package/dist/es2019/ui/FloatingInsertButton/InsertButton.js

@@ -26,6 +26,13 @@ const getToolbarSize = tableRef => {
   }
   return tableToolbarSize;
 };
+const getNumberColumnWidth = (tableRef, isDragAndDropEnabled) => {
+  const parent = closestElement(tableRef, `.${ClassName.TABLE_CONTAINER}`);
+  if (parent && isDragAndDropEnabled) {
+    return parent.querySelector(`.${ClassName.NUMBERED_COLUMN}`) ? akEditorTableNumberColumnWidth - 1 : 0;
+  }
+  return 0;
+};
 const getInsertLineWidth = (tableRef, isDragAndDropEnabled) => {
   // The line gets width 100% from the table,
   // but since we have an overflow on the left,
@@ -43,7 +50,7 @@ const getInsertLineWidth = (tableRef, isDragAndDropEnabled) => {
   const diff = offsetWidth - parentOffsetWidth;
   const toolbarSize = isDragAndDropEnabled ? 0 : getToolbarSize(tableRef);
   const lineOffset = isDragAndDropEnabled ? DRAG_LINE_OFFSET : LINE_OFFSET;
-  return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + lineOffset;
+  return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + lineOffset + getNumberColumnWidth(tableRef, isDragAndDropEnabled);
 };
 const tooltipMessageByType = type => {
   return type === 'row' ? messages.insertRow : messages.insertColumn;

package/dist/esm/ui/FloatingDragMenu/DropdownMenu.js

@@ -6,6 +6,7 @@ import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenuItem }
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { MenuGroup, Section } from '@atlaskit/menu';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { dragMenuDropdownWidth } from '../consts';
 var DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
 export var DropdownMenu = function DropdownMenu(_ref) {
@@ -13,7 +14,7 @@ export var DropdownMenu = function DropdownMenu(_ref) {
     section = _ref.section,
     disableKeyboardHandling = _ref.disableKeyboardHandling,
     onItemActivated = _ref.onItemActivated,
-    handleClose = _ref.handleClose,
+    _handleClose = _ref.handleClose,
     onMouseEnter = _ref.onMouseEnter,
     onMouseLeave = _ref.onMouseLeave,
     fitWidth = _ref.fitWidth,
@@ -33,17 +34,21 @@ export var DropdownMenu = function DropdownMenu(_ref) {
   var handleRef = function handleRef(ref) {
     setTargetRefDiv(ref);
   };
+
+  // more offsets calculation as offsets depend on the direction and updated placement here
+  var offsetY = direction === 'row' ? popupPlacement[0] === 'bottom' ? -8 : -34 : 0;
+  var offsetX = direction === 'column' ? popupPlacement[1] === 'left' ? 0 : -7 : 0;
   var innerMenu = function innerMenu() {
     return /*#__PURE__*/React.createElement(DropListWithOutsideListeners, {
       isOpen: true,
       shouldFitContainer: true,
       position: popupPlacement.join(' '),
       handleClickOutside: function handleClickOutside() {
-        return handleClose('editor');
+        return _handleClose('editor');
       },
       handleEscapeKeydown: function handleEscapeKeydown() {
         if (!disableKeyboardHandling) {
-          handleClose('handle');
+          _handleClose('handle');
         }
       },
       handleEnterKeydown: function handleEnterKeydown(e) {
@@ -79,12 +84,31 @@ export var DropdownMenu = function DropdownMenu(_ref) {
     })));
   };
   if (disableKeyboardHandling) {
-    return innerMenu();
+    if (getBooleanFF('platform.editor.table.background-color-flicker-in-drag-menu')) {
+      // This part need be refactor when clean up the ff, to reuse the wrapper
+      return /*#__PURE__*/React.createElement("div", {
+        className: "drag-dropdown-menu-wrapper"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "drag-dropdown-menu-popup-ref",
+        ref: handleRef
+      }), /*#__PURE__*/React.createElement(Popup, {
+        target: targetRefDiv,
+        mountTo: mountPoint,
+        boundariesElement: boundariesElement,
+        scrollableElement: scrollableElement,
+        onPlacementChanged: function onPlacementChanged(placement) {
+          setPopupPlacement(placement);
+        },
+        fitHeight: fitHeight,
+        fitWidth: fitWidth,
+        zIndex: akEditorFloatingPanelZIndex,
+        offset: [offsetX, offsetY],
+        allowOutOfBounds: true // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
+      }, innerMenu()));
+    } else {
+      return innerMenu();
+    }
   }
-
-  // more offsets calculation as offsets depend on the direction and updated placement here
-  var offsetY = direction === 'row' ? popupPlacement[0] === 'bottom' ? -8 : -34 : 0;
-  var offsetX = direction === 'column' ? popupPlacement[1] === 'left' ? 0 : -7 : 0;
   return /*#__PURE__*/React.createElement("div", {
     className: "drag-dropdown-menu-wrapper"
   }, /*#__PURE__*/React.createElement("div", {
@@ -106,6 +130,9 @@ export var DropdownMenu = function DropdownMenu(_ref) {
   }, /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
     closeOnTab: true,
     type: ArrowKeyNavigationType.MENU,
+    handleClose: function handleClose() {
+      return _handleClose('handle');
+    },
     onSelection: function onSelection(index) {
       var results = items.flatMap(function (item) {
         return 'items' in item ? item.items : item;

package/dist/esm/ui/FloatingInsertButton/InsertButton.js

@@ -27,6 +27,13 @@ var getToolbarSize = function getToolbarSize(tableRef) {
   }
   return tableToolbarSize;
 };
+var getNumberColumnWidth = function getNumberColumnWidth(tableRef, isDragAndDropEnabled) {
+  var parent = closestElement(tableRef, ".".concat(ClassName.TABLE_CONTAINER));
+  if (parent && isDragAndDropEnabled) {
+    return parent.querySelector(".".concat(ClassName.NUMBERED_COLUMN)) ? akEditorTableNumberColumnWidth - 1 : 0;
+  }
+  return 0;
+};
 var getInsertLineWidth = function getInsertLineWidth(tableRef, isDragAndDropEnabled) {
   // The line gets width 100% from the table,
   // but since we have an overflow on the left,
@@ -41,7 +48,7 @@ var getInsertLineWidth = function getInsertLineWidth(tableRef, isDragAndDropEnab
   var diff = offsetWidth - parentOffsetWidth;
   var toolbarSize = isDragAndDropEnabled ? 0 : getToolbarSize(tableRef);
   var lineOffset = isDragAndDropEnabled ? DRAG_LINE_OFFSET : LINE_OFFSET;
-  return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + lineOffset;
+  return Math.min(offsetWidth + toolbarSize, parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0)) + lineOffset + getNumberColumnWidth(tableRef, isDragAndDropEnabled);
 };
 var tooltipMessageByType = function tooltipMessageByType(type) {
   return type === 'row' ? messages.insertRow : messages.insertColumn;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.6.12",
+  "version": "7.6.14",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/adf-schema": "^35.8.0",
     "@atlaskit/custom-steps": "^0.0.17",
-    "@atlaskit/editor-common": "^78.24.0",
+    "@atlaskit/editor-common": "^78.25.0",
     "@atlaskit/editor-palette": "1.5.3",
     "@atlaskit/editor-plugin-accessibility-utils": "^1.0.0",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
@@ -52,7 +52,7 @@
     "@atlaskit/theme": "^12.7.0",
     "@atlaskit/toggle": "^13.0.0",
     "@atlaskit/tokens": "^1.43.0",
-    "@atlaskit/tooltip": "^18.1.0",
+    "@atlaskit/tooltip": "^18.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "classnames": "^2.2.5",
@@ -136,6 +136,9 @@
     "platform.editor.transform-slice-for-nested-expand": {
       "type": "boolean"
     },
+    "platform.editor.table.background-color-flicker-in-drag-menu": {
+      "type": "boolean"
+    },
     "platform.editor.table.cmd-a-select-table": {
       "type": "boolean"
     },

package/src/ui/FloatingDragMenu/DropdownMenu.tsx

@@ -11,6 +11,7 @@ import {
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { MenuGroup, Section } from '@atlaskit/menu';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { dragMenuDropdownWidth } from '../consts';
 
@@ -63,6 +64,13 @@ export const DropdownMenu = ({
   const handleRef = (ref: HTMLDivElement | null) => {
     setTargetRefDiv(ref);
   };
+
+  // more offsets calculation as offsets depend on the direction and updated placement here
+  let offsetY =
+    direction === 'row' ? (popupPlacement[0] === 'bottom' ? -8 : -34) : 0;
+  let offsetX =
+    direction === 'column' ? (popupPlacement[1] === 'left' ? 0 : -7) : 0;
+
   const innerMenu = () => {
     return (
       <DropListWithOutsideListeners
@@ -109,15 +117,38 @@ export const DropdownMenu = ({
   };
 
   if (disableKeyboardHandling) {
-    return innerMenu();
+    if (
+      getBooleanFF(
+        'platform.editor.table.background-color-flicker-in-drag-menu',
+      )
+    ) {
+      // This part need be refactor when clean up the ff, to reuse the wrapper
+      return (
+        <div className="drag-dropdown-menu-wrapper">
+          <div className="drag-dropdown-menu-popup-ref" ref={handleRef}></div>
+          <Popup
+            target={targetRefDiv as HTMLElement}
+            mountTo={mountPoint}
+            boundariesElement={boundariesElement}
+            scrollableElement={scrollableElement}
+            onPlacementChanged={(placement: [string, string]) => {
+              setPopupPlacement(placement);
+            }}
+            fitHeight={fitHeight}
+            fitWidth={fitWidth}
+            zIndex={akEditorFloatingPanelZIndex}
+            offset={[offsetX, offsetY]}
+            allowOutOfBounds // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
+          >
+            {innerMenu()}
+          </Popup>
+        </div>
+      );
+    } else {
+      return innerMenu();
+    }
   }
 
-  // more offsets calculation as offsets depend on the direction and updated placement here
-  let offsetY =
-    direction === 'row' ? (popupPlacement[0] === 'bottom' ? -8 : -34) : 0;
-  let offsetX =
-    direction === 'column' ? (popupPlacement[1] === 'left' ? 0 : -7) : 0;
-
   return (
     <div className="drag-dropdown-menu-wrapper">
       <div className="drag-dropdown-menu-popup-ref" ref={handleRef}></div>
@@ -138,6 +169,7 @@ export const DropdownMenu = ({
         <ArrowKeyNavigationProvider
           closeOnTab
           type={ArrowKeyNavigationType.MENU}
+          handleClose={() => handleClose('handle')}
           onSelection={(index) => {
             const results = items.flatMap((item) =>
               'items' in item ? item.items : item,

package/src/ui/FloatingInsertButton/InsertButton.tsx

@@ -58,6 +58,19 @@ const getToolbarSize = (tableRef: HTMLElement): number => {
   return tableToolbarSize;
 };
 
+const getNumberColumnWidth = (
+  tableRef: HTMLElement,
+  isDragAndDropEnabled?: boolean,
+): number => {
+  const parent = closestElement(tableRef, `.${ClassName.TABLE_CONTAINER}`);
+  if (parent && isDragAndDropEnabled) {
+    return parent.querySelector(`.${ClassName.NUMBERED_COLUMN}`)
+      ? akEditorTableNumberColumnWidth - 1
+      : 0;
+  }
+  return 0;
+};
+
 const getInsertLineWidth = (
   tableRef: HTMLElement,
   isDragAndDropEnabled?: boolean,
@@ -78,7 +91,9 @@ const getInsertLineWidth = (
     Math.min(
       offsetWidth + toolbarSize,
       parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0),
-    ) + lineOffset
+    ) +
+    lineOffset +
+    getNumberColumnWidth(tableRef, isDragAndDropEnabled)
   );
 };