@atlaskit/editor-plugin-table 2.8.2 → 2.8.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 2.8.4
+
+### Patch Changes
+
+- [`e73d62af335`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e73d62af335) - [ux] Adjusted the guidelines to be 1 pixel smaller then the snapping widths due to the fact that the tbody is 1 pixel smaller then the table. The table snaps to the snap widths and the guidelines align to the tbody cell borders
+
+## 2.8.3
+
+### Patch Changes
+
+- [`77b74847baa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/77b74847baa) - ED-19152 Cancels scheduled resize to avoid handleResize being called after handleResizeStop.
+
 ## 2.8.2
 
 ### Patch Changes

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

@@ -84,7 +84,7 @@ var TableResizer = function TableResizer(_ref) {
   }, [displayGuideline]);
   var guidelineSnaps = (0, _react.useMemo)(function () {
     return snappingEnabled ? {
-      x: _guidelines.defaultGuidelineWidths
+      x: _snapping.defaultSnappingWidths
     } : undefined;
   }, [snappingEnabled]);
   var handleResizeStart = (0, _react.useCallback)(function () {
@@ -96,6 +96,26 @@ var TableResizer = function TableResizer(_ref) {
     }));
     setSnappingEnabled(displayGuideline(_guidelines.defaultGuidelines));
   }, [displayGuideline, editorView, startMeasure]);
+  var handleResize = (0, _react.useCallback)(function (originalState, delta) {
+    countFrames();
+    var newWidth = originalState.width + delta.width;
+    var pos = getPos();
+    if (typeof pos !== 'number') {
+      return;
+    }
+    (0, _utils2.previewScaleTable)(tableRef, {
+      node: node,
+      prevNode: node,
+      start: pos + 1,
+      parentWidth: newWidth
+    }, editorView.domAtPos.bind(editorView));
+    updateActiveGuidelines((0, _snapping.findClosestSnap)(newWidth, _snapping.defaultSnappingWidths, _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP, _consts.TABLE_HIGHLIGHT_TOLERANCE));
+    updateWidth(newWidth);
+    return newWidth;
+  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames]);
+  var scheduleResize = (0, _react.useMemo)(function () {
+    return (0, _rafSchd.default)(handleResize);
+  }, [handleResize]);
   var handleResizeStop = (0, _react.useCallback)(function (originalState, delta) {
     var newWidth = originalState.width + delta.width;
     var state = editorView.state,
@@ -139,28 +159,9 @@ var TableResizer = function TableResizer(_ref) {
     // Hide guidelines when resizing stops
     displayGuideline([]);
     updateWidth(newWidth);
+    scheduleResize.cancel();
     return newWidth;
-  }, [updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, endMeasure]);
-  var handleResize = (0, _react.useCallback)(function (originalState, delta) {
-    countFrames();
-    var newWidth = originalState.width + delta.width;
-    var pos = getPos();
-    if (typeof pos !== 'number') {
-      return;
-    }
-    (0, _utils2.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, countFrames]);
-  var scheduleResize = (0, _react.useMemo)(function () {
-    return (0, _rafSchd.default)(handleResize);
-  }, [handleResize]);
+  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure]);
   var handleComponent = (0, _react.useMemo)(function () {
     return {
       left: /*#__PURE__*/_react.default.createElement("div", {

package/dist/cjs/plugins/table/ui/consts.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tablePadding = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidth = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_GAP = void 0;
+exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tablePadding = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidth = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_GAP = void 0;
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
@@ -146,4 +146,6 @@ exports.stickyHeaderBorderBottomWidth = stickyHeaderBorderBottomWidth;
 var TABLE_SNAP_GAP = 9;
 exports.TABLE_SNAP_GAP = TABLE_SNAP_GAP;
 var TABLE_HIGHLIGHT_GAP = 10;
-exports.TABLE_HIGHLIGHT_GAP = TABLE_HIGHLIGHT_GAP;
+exports.TABLE_HIGHLIGHT_GAP = TABLE_HIGHLIGHT_GAP;
+var TABLE_HIGHLIGHT_TOLERANCE = 2;
+exports.TABLE_HIGHLIGHT_TOLERANCE = TABLE_HIGHLIGHT_TOLERANCE;

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

@@ -4,19 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultGuidelines = exports.defaultGuidelineWidths = void 0;
+exports.defaultGuidelines = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _guideline = require("@atlaskit/editor-common/guideline");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var numberOfLanesInDefaultLayoutWidth = 12;
-var calculateGuidelineWidthsInDefaultLayoutWidth = function calculateGuidelineWidthsInDefaultLayoutWidth() {
-  var widths = [];
-  for (var i = 0; i <= numberOfLanesInDefaultLayoutWidth / 2; i++) {
-    widths.push(_editorSharedStyles.akEditorDefaultLayoutWidth / numberOfLanesInDefaultLayoutWidth * i * 2);
-  }
-  return widths;
-};
-var defaultGuidelineWidths = [].concat((0, _toConsumableArray2.default)(calculateGuidelineWidthsInDefaultLayoutWidth()), [_editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth]);
-exports.defaultGuidelineWidths = defaultGuidelineWidths;
-var defaultGuidelines = (0, _guideline.createFixedGuidelinesFromLengths)(defaultGuidelineWidths);
+var _snapping = require("./snapping");
+// NOTE: We have to take 1 pixel off every length due to the fact that the tbody is 1px smaller then the table container.
+// If we don't do this then the guidelines will not align correctly to the edge of the table
+var defaultGuidelines = (0, _guideline.createFixedGuidelinesFromLengths)([0].concat((0, _toConsumableArray2.default)((0, _snapping.calculateDefaultSnappings)(-1))));
 exports.defaultGuidelines = defaultGuidelines;

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

@@ -1,15 +1,33 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.findClosestSnap = void 0;
+exports.findClosestSnap = exports.defaultSnappingWidths = exports.calculateDefaultSnappings = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _guideline = require("@atlaskit/editor-common/guideline");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var numberOfLanesInDefaultLayoutWidth = 12;
+var calculateSubSnappingWidths = function calculateSubSnappingWidths(totalLanes, totalWidth) {
+  return new Array(Math.round(totalLanes / 2) - 1).fill(totalWidth / totalLanes).map(function (v, i) {
+    return v * (i + 1) * 2;
+  });
+};
+var calculateDefaultSnappings = function calculateDefaultSnappings() {
+  var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  return [].concat((0, _toConsumableArray2.default)(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, _editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset)), [_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset, _editorSharedStyles.akEditorFullWidthLayoutWidth + lengthOffset]);
+};
+exports.calculateDefaultSnappings = calculateDefaultSnappings;
+var defaultSnappingWidths = calculateDefaultSnappings();
+
 /**
  * Returns keys of guidelines that are closest to the table and withthin the snapGap
  */
+exports.defaultSnappingWidths = defaultSnappingWidths;
 var findClosestSnap = function findClosestSnap(currentWidth, snapWidths, guidelines) {
   var snapGap = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  var tolerance = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
   var closestGapIndex = snapWidths.reduce(function (prev, curr, index) {
     return Math.abs(curr - currentWidth) < Math.abs(snapWidths[prev] - currentWidth) ? index : prev;
   }, 0);
@@ -20,7 +38,8 @@ var findClosestSnap = function findClosestSnap(currentWidth, snapWidths, guideli
       // NOTE: The snap points are based on the guidelines, however their formatted as a length value whereas the guidelines
       // are point based. The point base x coords are calculated by halving the lengths. This means we can convert the
       // point base position to length by simply multiplying by 2.
-      if ((0, _guideline.isVerticalPosition)(guideline.position) && Math.round(Math.abs(guideline.position.x) * 2) === snappingWidth) {
+      var length = Math.round(Math.abs((0, _guideline.isVerticalPosition)(guideline.position) ? guideline.position.x : guideline.position.y) * 2);
+      if (snappingWidth >= length - tolerance && snappingWidth <= length + tolerance) {
         acc.push(guideline.key);
       }
       return acc;

package/dist/cjs/version.json

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

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

@@ -6,10 +6,10 @@ import { resizerHandleShadowClassName } from '@atlaskit/editor-common/styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
-import { TABLE_HIGHLIGHT_GAP, TABLE_SNAP_GAP } from '../ui/consts';
+import { TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
 import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
-import { defaultGuidelines, defaultGuidelineWidths } from '../utils/guidelines';
-import { findClosestSnap } from '../utils/snapping';
+import { defaultGuidelines } from '../utils/guidelines';
+import { defaultSnappingWidths, findClosestSnap } from '../utils/snapping';
 const handles = {
   right: true
 };
@@ -69,7 +69,7 @@ export const TableResizer = ({
     }
   }, [displayGuideline]);
   const guidelineSnaps = useMemo(() => snappingEnabled ? {
-    x: defaultGuidelineWidths
+    x: defaultSnappingWidths
   } : undefined, [snappingEnabled]);
   const handleResizeStart = useCallback(() => {
     startMeasure();
@@ -84,6 +84,24 @@ export const TableResizer = ({
     }));
     setSnappingEnabled(displayGuideline(defaultGuidelines));
   }, [displayGuideline, editorView, startMeasure]);
+  const handleResize = useCallback((originalState, delta) => {
+    countFrames();
+    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, defaultSnappingWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE));
+    updateWidth(newWidth);
+    return newWidth;
+  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames]);
+  const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
   const handleResizeStop = useCallback((originalState, delta) => {
     const newWidth = originalState.width + delta.width;
     const {
@@ -130,26 +148,9 @@ export const TableResizer = ({
     // Hide guidelines when resizing stops
     displayGuideline([]);
     updateWidth(newWidth);
+    scheduleResize.cancel();
     return newWidth;
-  }, [updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, endMeasure]);
-  const handleResize = useCallback((originalState, delta) => {
-    countFrames();
-    const newWidth = originalState.width + delta.width;
-    const pos = getPos();
-    if (typeof pos !== 'number') {
-      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, countFrames]);
-  const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
+  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure]);
   const handleComponent = useMemo(() => ({
     left: /*#__PURE__*/React.createElement("div", {
       className: resizerHandleShadowClassName,

package/dist/es2019/plugins/table/ui/consts.js

@@ -98,4 +98,5 @@ export const stickyRowZIndex = resizeHandlerZIndex + 2;
 export const stickyRowOffsetTop = 8;
 export const stickyHeaderBorderBottomWidth = 1;
 export const TABLE_SNAP_GAP = 9;
-export const TABLE_HIGHLIGHT_GAP = 10;
+export const TABLE_HIGHLIGHT_GAP = 10;
+export const TABLE_HIGHLIGHT_TOLERANCE = 2;

package/dist/es2019/plugins/table/utils/guidelines.js

@@ -1,12 +1,6 @@
 import { createFixedGuidelinesFromLengths } from '@atlaskit/editor-common/guideline';
-import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
-const numberOfLanesInDefaultLayoutWidth = 12;
-const calculateGuidelineWidthsInDefaultLayoutWidth = () => {
-  let widths = [];
-  for (let i = 0; i <= numberOfLanesInDefaultLayoutWidth / 2; i++) {
-    widths.push(akEditorDefaultLayoutWidth / numberOfLanesInDefaultLayoutWidth * i * 2);
-  }
-  return widths;
-};
-export const defaultGuidelineWidths = [...calculateGuidelineWidthsInDefaultLayoutWidth(), akEditorDefaultLayoutWidth, akEditorCalculatedWideLayoutWidth, akEditorFullWidthLayoutWidth];
-export const defaultGuidelines = createFixedGuidelinesFromLengths(defaultGuidelineWidths);
+import { calculateDefaultSnappings } from './snapping';
+
+// NOTE: We have to take 1 pixel off every length due to the fact that the tbody is 1px smaller then the table container.
+// If we don't do this then the guidelines will not align correctly to the edge of the table
+export const defaultGuidelines = createFixedGuidelinesFromLengths([0, ...calculateDefaultSnappings(-1)]);

package/dist/es2019/plugins/table/utils/snapping.js

@@ -1,9 +1,14 @@
 import { isVerticalPosition } from '@atlaskit/editor-common/guideline';
+import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+const numberOfLanesInDefaultLayoutWidth = 12;
+const calculateSubSnappingWidths = (totalLanes, totalWidth) => new Array(Math.round(totalLanes / 2) - 1).fill(totalWidth / totalLanes).map((v, i) => v * (i + 1) * 2);
+export const calculateDefaultSnappings = (lengthOffset = 0) => [...calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset), akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, akEditorFullWidthLayoutWidth + lengthOffset];
+export const defaultSnappingWidths = calculateDefaultSnappings();
 
 /**
  * Returns keys of guidelines that are closest to the table and withthin the snapGap
  */
-export const findClosestSnap = (currentWidth, snapWidths, guidelines, snapGap = 0) => {
+export const findClosestSnap = (currentWidth, snapWidths, guidelines, snapGap = 0, tolerance = 0) => {
   const closestGapIndex = snapWidths.reduce((prev, curr, index) => Math.abs(curr - currentWidth) < Math.abs(snapWidths[prev] - currentWidth) ? index : prev, 0);
   const gap = Math.abs(snapWidths[closestGapIndex] - currentWidth);
   if (gap < snapGap) {
@@ -12,7 +17,8 @@ export const findClosestSnap = (currentWidth, snapWidths, guidelines, snapGap =
       // NOTE: The snap points are based on the guidelines, however their formatted as a length value whereas the guidelines
       // are point based. The point base x coords are calculated by halving the lengths. This means we can convert the
       // point base position to length by simply multiplying by 2.
-      if (isVerticalPosition(guideline.position) && Math.round(Math.abs(guideline.position.x) * 2) === snappingWidth) {
+      const length = Math.round(Math.abs(isVerticalPosition(guideline.position) ? guideline.position.x : guideline.position.y) * 2);
+      if (snappingWidth >= length - tolerance && snappingWidth <= length + tolerance) {
         acc.push(guideline.key);
       }
       return acc;

package/dist/es2019/version.json

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

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

@@ -10,10 +10,10 @@ import { resizerHandleShadowClassName } from '@atlaskit/editor-common/styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
-import { TABLE_HIGHLIGHT_GAP, TABLE_SNAP_GAP } from '../ui/consts';
+import { TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
 import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
-import { defaultGuidelines, defaultGuidelineWidths } from '../utils/guidelines';
-import { findClosestSnap } from '../utils/snapping';
+import { defaultGuidelines } from '../utils/guidelines';
+import { defaultSnappingWidths, findClosestSnap } from '../utils/snapping';
 var handles = {
   right: true
 };
@@ -74,7 +74,7 @@ export var TableResizer = function TableResizer(_ref) {
   }, [displayGuideline]);
   var guidelineSnaps = useMemo(function () {
     return snappingEnabled ? {
-      x: defaultGuidelineWidths
+      x: defaultSnappingWidths
     } : undefined;
   }, [snappingEnabled]);
   var handleResizeStart = useCallback(function () {
@@ -86,6 +86,26 @@ export var TableResizer = function TableResizer(_ref) {
     }));
     setSnappingEnabled(displayGuideline(defaultGuidelines));
   }, [displayGuideline, editorView, startMeasure]);
+  var handleResize = useCallback(function (originalState, delta) {
+    countFrames();
+    var newWidth = originalState.width + delta.width;
+    var pos = getPos();
+    if (typeof pos !== 'number') {
+      return;
+    }
+    previewScaleTable(tableRef, {
+      node: node,
+      prevNode: node,
+      start: pos + 1,
+      parentWidth: newWidth
+    }, editorView.domAtPos.bind(editorView));
+    updateActiveGuidelines(findClosestSnap(newWidth, defaultSnappingWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE));
+    updateWidth(newWidth);
+    return newWidth;
+  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames]);
+  var scheduleResize = useMemo(function () {
+    return rafSchd(handleResize);
+  }, [handleResize]);
   var handleResizeStop = useCallback(function (originalState, delta) {
     var newWidth = originalState.width + delta.width;
     var state = editorView.state,
@@ -129,28 +149,9 @@ export var TableResizer = function TableResizer(_ref) {
     // Hide guidelines when resizing stops
     displayGuideline([]);
     updateWidth(newWidth);
+    scheduleResize.cancel();
     return newWidth;
-  }, [updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, endMeasure]);
-  var handleResize = useCallback(function (originalState, delta) {
-    countFrames();
-    var newWidth = originalState.width + delta.width;
-    var pos = getPos();
-    if (typeof pos !== 'number') {
-      return;
-    }
-    previewScaleTable(tableRef, {
-      node: 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, countFrames]);
-  var scheduleResize = useMemo(function () {
-    return rafSchd(handleResize);
-  }, [handleResize]);
+  }, [updateWidth, editorView, getPos, node, tableRef, scheduleResize, displayGuideline, attachAnalyticsEvent, endMeasure]);
   var handleComponent = useMemo(function () {
     return {
       left: /*#__PURE__*/React.createElement("div", {

package/dist/esm/plugins/table/ui/consts.js

@@ -98,4 +98,5 @@ export var stickyRowZIndex = resizeHandlerZIndex + 2;
 export var stickyRowOffsetTop = 8;
 export var stickyHeaderBorderBottomWidth = 1;
 export var TABLE_SNAP_GAP = 9;
-export var TABLE_HIGHLIGHT_GAP = 10;
+export var TABLE_HIGHLIGHT_GAP = 10;
+export var TABLE_HIGHLIGHT_TOLERANCE = 2;

package/dist/esm/plugins/table/utils/guidelines.js

@@ -1,13 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { createFixedGuidelinesFromLengths } from '@atlaskit/editor-common/guideline';
-import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
-var numberOfLanesInDefaultLayoutWidth = 12;
-var calculateGuidelineWidthsInDefaultLayoutWidth = function calculateGuidelineWidthsInDefaultLayoutWidth() {
-  var widths = [];
-  for (var i = 0; i <= numberOfLanesInDefaultLayoutWidth / 2; i++) {
-    widths.push(akEditorDefaultLayoutWidth / numberOfLanesInDefaultLayoutWidth * i * 2);
-  }
-  return widths;
-};
-export var defaultGuidelineWidths = [].concat(_toConsumableArray(calculateGuidelineWidthsInDefaultLayoutWidth()), [akEditorDefaultLayoutWidth, akEditorCalculatedWideLayoutWidth, akEditorFullWidthLayoutWidth]);
-export var defaultGuidelines = createFixedGuidelinesFromLengths(defaultGuidelineWidths);
+import { calculateDefaultSnappings } from './snapping';
+
+// NOTE: We have to take 1 pixel off every length due to the fact that the tbody is 1px smaller then the table container.
+// If we don't do this then the guidelines will not align correctly to the edge of the table
+export var defaultGuidelines = createFixedGuidelinesFromLengths([0].concat(_toConsumableArray(calculateDefaultSnappings(-1))));

package/dist/esm/plugins/table/utils/snapping.js

@@ -1,10 +1,24 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { isVerticalPosition } from '@atlaskit/editor-common/guideline';
+import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+var numberOfLanesInDefaultLayoutWidth = 12;
+var calculateSubSnappingWidths = function calculateSubSnappingWidths(totalLanes, totalWidth) {
+  return new Array(Math.round(totalLanes / 2) - 1).fill(totalWidth / totalLanes).map(function (v, i) {
+    return v * (i + 1) * 2;
+  });
+};
+export var calculateDefaultSnappings = function calculateDefaultSnappings() {
+  var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  return [].concat(_toConsumableArray(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset)), [akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, akEditorFullWidthLayoutWidth + lengthOffset]);
+};
+export var defaultSnappingWidths = calculateDefaultSnappings();
 
 /**
  * Returns keys of guidelines that are closest to the table and withthin the snapGap
  */
 export var findClosestSnap = function findClosestSnap(currentWidth, snapWidths, guidelines) {
   var snapGap = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  var tolerance = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
   var closestGapIndex = snapWidths.reduce(function (prev, curr, index) {
     return Math.abs(curr - currentWidth) < Math.abs(snapWidths[prev] - currentWidth) ? index : prev;
   }, 0);
@@ -15,7 +29,8 @@ export var findClosestSnap = function findClosestSnap(currentWidth, snapWidths,
       // NOTE: The snap points are based on the guidelines, however their formatted as a length value whereas the guidelines
       // are point based. The point base x coords are calculated by halving the lengths. This means we can convert the
       // point base position to length by simply multiplying by 2.
-      if (isVerticalPosition(guideline.position) && Math.round(Math.abs(guideline.position.x) * 2) === snappingWidth) {
+      var length = Math.round(Math.abs(isVerticalPosition(guideline.position) ? guideline.position.x : guideline.position.y) * 2);
+      if (snappingWidth >= length - tolerance && snappingWidth <= length + tolerance) {
         acc.push(guideline.key);
       }
       return acc;

package/dist/esm/version.json

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

package/dist/types/plugins/table/nodeviews/TableResizer.d.ts

@@ -1,9 +1,9 @@
-import { PropsWithChildren } from 'react';
-import { TableEventPayload } from '@atlaskit/editor-common/analytics';
+import type { PropsWithChildren } from 'react';
+import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 interface TableResizerProps {
     width: number;
     maxWidth: number;

package/dist/types/plugins/table/ui/consts.d.ts

@@ -44,3 +44,4 @@ export declare const stickyRowOffsetTop = 8;
 export declare const stickyHeaderBorderBottomWidth = 1;
 export declare const TABLE_SNAP_GAP = 9;
 export declare const TABLE_HIGHLIGHT_GAP = 10;
+export declare const TABLE_HIGHLIGHT_TOLERANCE = 2;

package/dist/types/plugins/table/utils/guidelines.d.ts

@@ -1,3 +1,2 @@
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
-export declare const defaultGuidelineWidths: number[];
 export declare const defaultGuidelines: GuidelineConfig[];

package/dist/types/plugins/table/utils/snapping.d.ts

@@ -1,8 +1,10 @@
 import { type GuidelineConfig } from '@atlaskit/editor-common/guideline';
+export declare const calculateDefaultSnappings: (lengthOffset?: number) => number[];
+export declare const defaultSnappingWidths: number[];
 /**
  * Returns keys of guidelines that are closest to the table and withthin the snapGap
  */
-export declare const findClosestSnap: (currentWidth: number, snapWidths: number[], guidelines: GuidelineConfig[], snapGap?: number) => {
+export declare const findClosestSnap: (currentWidth: number, snapWidths: number[], guidelines: GuidelineConfig[], snapGap?: number, tolerance?: number) => {
     gap: number;
     keys: string[];
 };

package/dist/types-ts4.5/plugins/table/nodeviews/TableResizer.d.ts

@@ -1,9 +1,9 @@
-import { PropsWithChildren } from 'react';
-import { TableEventPayload } from '@atlaskit/editor-common/analytics';
+import type { PropsWithChildren } from 'react';
+import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 interface TableResizerProps {
     width: number;
     maxWidth: number;

package/dist/types-ts4.5/plugins/table/ui/consts.d.ts

@@ -44,3 +44,4 @@ export declare const stickyRowOffsetTop = 8;
 export declare const stickyHeaderBorderBottomWidth = 1;
 export declare const TABLE_SNAP_GAP = 9;
 export declare const TABLE_HIGHLIGHT_GAP = 10;
+export declare const TABLE_HIGHLIGHT_TOLERANCE = 2;

package/dist/types-ts4.5/plugins/table/utils/guidelines.d.ts

@@ -1,3 +1,2 @@
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
-export declare const defaultGuidelineWidths: number[];
 export declare const defaultGuidelines: GuidelineConfig[];

package/dist/types-ts4.5/plugins/table/utils/snapping.d.ts

@@ -1,8 +1,10 @@
 import { type GuidelineConfig } from '@atlaskit/editor-common/guideline';
+export declare const calculateDefaultSnappings: (lengthOffset?: number) => number[];
+export declare const defaultSnappingWidths: number[];
 /**
  * Returns keys of guidelines that are closest to the table and withthin the snapGap
  */
-export declare const findClosestSnap: (currentWidth: number, snapWidths: number[], guidelines: GuidelineConfig[], snapGap?: number) => {
+export declare const findClosestSnap: (currentWidth: number, snapWidths: number[], guidelines: GuidelineConfig[], snapGap?: number, tolerance?: number) => {
     gap: number;
     keys: string[];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.8.2",
+  "version": "2.8.4",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^28.1.0",
-    "@atlaskit/editor-common": "^74.42.0",
+    "@atlaskit/editor-common": "^74.45.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.8",
@@ -61,7 +61,7 @@
     "@atlaskit/editor-plugin-guideline": "^0.3.4",
     "@atlaskit/editor-plugin-hyperlink": "^0.3.0",
     "@atlaskit/editor-plugin-width": "^0.1.0",
-    "@atlaskit/editor-test-helpers": "^18.10.0",
+    "@atlaskit/editor-test-helpers": "^18.11.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",

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

@@ -1,25 +1,20 @@
-import React, {
-  PropsWithChildren,
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import type { PropsWithChildren } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 
 import rafSchd from 'raf-schd';
 
-import { TableEventPayload } from '@atlaskit/editor-common/analytics';
+import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
-import {
+import type {
   HandleHeightSizeType,
   HandleResize,
-  ResizerNext,
 } from '@atlaskit/editor-common/resizer';
+import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { resizerHandleShadowClassName } from '@atlaskit/editor-common/styles';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { Transaction } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable } from '@atlaskit/editor-tables/utils';
 
 import {
@@ -29,14 +24,18 @@ import {
   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 {
+  TABLE_HIGHLIGHT_GAP,
+  TABLE_HIGHLIGHT_TOLERANCE,
+  TABLE_SNAP_GAP,
+} from '../ui/consts';
 import {
   generateResizedPayload,
   generateResizeFrameRatePayloads,
   useMeasureFramerate,
 } from '../utils/analytics';
-import { defaultGuidelines, defaultGuidelineWidths } from '../utils/guidelines';
-import { findClosestSnap } from '../utils/snapping';
+import { defaultGuidelines } from '../utils/guidelines';
+import { defaultSnappingWidths, findClosestSnap } from '../utils/snapping';
 
 interface TableResizerProps {
   width: number;
@@ -127,7 +126,7 @@ export const TableResizer = ({
     () =>
       snappingEnabled
         ? {
-            x: defaultGuidelineWidths,
+            x: defaultSnappingWidths,
           }
         : undefined,
     [snappingEnabled],
@@ -146,6 +145,53 @@ export const TableResizer = ({
     setSnappingEnabled(displayGuideline(defaultGuidelines));
   }, [displayGuideline, editorView, startMeasure]);
 
+  const handleResize = useCallback(
+    (originalState, delta) => {
+      countFrames();
+      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,
+          defaultSnappingWidths,
+          defaultGuidelines,
+          TABLE_HIGHLIGHT_GAP,
+          TABLE_HIGHLIGHT_TOLERANCE,
+        ),
+      );
+
+      updateWidth(newWidth);
+
+      return newWidth;
+    },
+    [
+      editorView,
+      getPos,
+      node,
+      tableRef,
+      updateWidth,
+      updateActiveGuidelines,
+      countFrames,
+    ],
+  );
+
+  const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
+
   const handleResizeStop = useCallback<HandleResize>(
     (originalState, delta) => {
       const newWidth = originalState.width + delta.width;
@@ -199,6 +245,7 @@ export const TableResizer = ({
       // Hide guidelines when resizing stops
       displayGuideline([]);
       updateWidth(newWidth);
+      scheduleResize.cancel();
 
       return newWidth;
     },
@@ -208,58 +255,13 @@ export const TableResizer = ({
       getPos,
       node,
       tableRef,
+      scheduleResize,
       displayGuideline,
       attachAnalyticsEvent,
       endMeasure,
     ],
   );
 
-  const handleResize = useCallback(
-    (originalState, delta) => {
-      countFrames();
-      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,
-      countFrames,
-    ],
-  );
-
-  const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
-
   const handleComponent = useMemo(
     () => ({
       left: (

package/src/plugins/table/ui/consts.ts

@@ -133,3 +133,4 @@ export const stickyHeaderBorderBottomWidth = 1;
 
 export const TABLE_SNAP_GAP = 9;
 export const TABLE_HIGHLIGHT_GAP = 10;
+export const TABLE_HIGHLIGHT_TOLERANCE = 2;

package/src/plugins/table/utils/guidelines.ts

@@ -1,30 +1,11 @@
 import { createFixedGuidelinesFromLengths } from '@atlaskit/editor-common/guideline';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
-import {
-  akEditorCalculatedWideLayoutWidth,
-  akEditorDefaultLayoutWidth,
-  akEditorFullWidthLayoutWidth,
-} from '@atlaskit/editor-shared-styles';
 
-const numberOfLanesInDefaultLayoutWidth = 12;
+import { calculateDefaultSnappings } from './snapping';
 
-const calculateGuidelineWidthsInDefaultLayoutWidth = () => {
-  let widths: number[] = [];
-  for (let i = 0; i <= numberOfLanesInDefaultLayoutWidth / 2; i++) {
-    widths.push(
-      (akEditorDefaultLayoutWidth / numberOfLanesInDefaultLayoutWidth) * i * 2,
-    );
-  }
-  return widths;
-};
-
-export const defaultGuidelineWidths = [
-  ...calculateGuidelineWidthsInDefaultLayoutWidth(),
-  akEditorDefaultLayoutWidth,
-  akEditorCalculatedWideLayoutWidth,
-  akEditorFullWidthLayoutWidth,
-];
-
-export const defaultGuidelines = createFixedGuidelinesFromLengths(
-  defaultGuidelineWidths,
-) as GuidelineConfig[];
+// NOTE: We have to take 1 pixel off every length due to the fact that the tbody is 1px smaller then the table container.
+// If we don't do this then the guidelines will not align correctly to the edge of the table
+export const defaultGuidelines = createFixedGuidelinesFromLengths([
+  0,
+  ...calculateDefaultSnappings(-1),
+]) as GuidelineConfig[];

package/src/plugins/table/utils/snapping.ts

@@ -2,6 +2,30 @@ import {
   type GuidelineConfig,
   isVerticalPosition,
 } from '@atlaskit/editor-common/guideline';
+import {
+  akEditorCalculatedWideLayoutWidth,
+  akEditorDefaultLayoutWidth,
+  akEditorFullWidthLayoutWidth,
+} from '@atlaskit/editor-shared-styles';
+
+const numberOfLanesInDefaultLayoutWidth = 12;
+
+const calculateSubSnappingWidths = (totalLanes: number, totalWidth: number) =>
+  new Array(Math.round(totalLanes / 2) - 1)
+    .fill(totalWidth / totalLanes)
+    .map((v, i) => v * (i + 1) * 2);
+
+export const calculateDefaultSnappings = (lengthOffset: number = 0) => [
+  ...calculateSubSnappingWidths(
+    numberOfLanesInDefaultLayoutWidth,
+    akEditorDefaultLayoutWidth + lengthOffset,
+  ),
+  akEditorDefaultLayoutWidth + lengthOffset,
+  akEditorCalculatedWideLayoutWidth + lengthOffset,
+  akEditorFullWidthLayoutWidth + lengthOffset,
+];
+
+export const defaultSnappingWidths = calculateDefaultSnappings();
 
 /**
  * Returns keys of guidelines that are closest to the table and withthin the snapGap
@@ -11,6 +35,7 @@ export const findClosestSnap = (
   snapWidths: number[],
   guidelines: GuidelineConfig[],
   snapGap: number = 0,
+  tolerance: number = 0,
 ) => {
   const closestGapIndex = snapWidths.reduce(
     (prev, curr, index) =>
@@ -26,9 +51,16 @@ export const findClosestSnap = (
       // NOTE: The snap points are based on the guidelines, however their formatted as a length value whereas the guidelines
       // are point based. The point base x coords are calculated by halving the lengths. This means we can convert the
       // point base position to length by simply multiplying by 2.
+      const length = Math.round(
+        Math.abs(
+          isVerticalPosition(guideline.position)
+            ? guideline.position.x
+            : guideline.position.y,
+        ) * 2,
+      );
       if (
-        isVerticalPosition(guideline.position) &&
-        Math.round(Math.abs(guideline.position.x) * 2) === snappingWidth
+        snappingWidth >= length - tolerance &&
+        snappingWidth <= length + tolerance
       ) {
         acc.push(guideline.key);
       }