@atlaskit/editor-plugin-table 2.8.3 → 2.8.5

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 2.8.5
+
+### Patch Changes
+
+- [`58fa188ef48`](https://bitbucket.org/atlassian/atlassian-frontend/commits/58fa188ef48) - [ux] [ED-19461] Reduce draggable zone of adjacent resize handle.
+
+## 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

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

@@ -28,6 +28,7 @@ var handles = {
   right: true
 };
 var tableHandleMarginTop = 12;
+var tableHandlePosition = 14;
 var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
   var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
   var handleHeightSize = 'small';
@@ -84,7 +85,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 () {
@@ -109,7 +110,7 @@ var TableResizer = function TableResizer(_ref) {
       start: pos + 1,
       parentWidth: newWidth
     }, editorView.domAtPos.bind(editorView));
-    updateActiveGuidelines((0, _snapping.findClosestSnap)(newWidth, _guidelines.defaultGuidelineWidths, _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP));
+    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]);
@@ -193,6 +194,7 @@ var TableResizer = function TableResizer(_ref) {
     snapGap: _consts.TABLE_SNAP_GAP,
     snap: guidelineSnaps,
     handlePositioning: "adjacent",
+    innerPadding: tableHandlePosition,
     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(),
     handleComponent: handleComponent
   }, children);

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.3",
+	"version": "2.8.5",
 	"sideEffects": false
 }

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

@@ -6,14 +6,15 @@ 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
 };
 const tableHandleMarginTop = 12;
+const tableHandlePosition = 14;
 const getResizerHandleHeight = tableRef => {
   const tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
   let handleHeightSize = 'small';
@@ -69,7 +70,7 @@ export const TableResizer = ({
     }
   }, [displayGuideline]);
   const guidelineSnaps = useMemo(() => snappingEnabled ? {
-    x: defaultGuidelineWidths
+    x: defaultSnappingWidths
   } : undefined, [snappingEnabled]);
   const handleResizeStart = useCallback(() => {
     startMeasure();
@@ -97,7 +98,7 @@ export const TableResizer = ({
       start: pos + 1,
       parentWidth: newWidth
     }, editorView.domAtPos.bind(editorView));
-    updateActiveGuidelines(findClosestSnap(newWidth, defaultGuidelineWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP));
+    updateActiveGuidelines(findClosestSnap(newWidth, defaultSnappingWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE));
     updateWidth(newWidth);
     return newWidth;
   }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames]);
@@ -180,6 +181,7 @@ export const TableResizer = ({
     snapGap: TABLE_SNAP_GAP,
     snap: guidelineSnaps,
     handlePositioning: "adjacent",
+    innerPadding: tableHandlePosition,
     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(),
     handleComponent: handleComponent
   }, children);

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.3",
+	"version": "2.8.5",
 	"sideEffects": false
 }

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

@@ -10,14 +10,15 @@ 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
 };
 var tableHandleMarginTop = 12;
+var tableHandlePosition = 14;
 var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
   var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
   var handleHeightSize = 'small';
@@ -74,7 +75,7 @@ export var TableResizer = function TableResizer(_ref) {
   }, [displayGuideline]);
   var guidelineSnaps = useMemo(function () {
     return snappingEnabled ? {
-      x: defaultGuidelineWidths
+      x: defaultSnappingWidths
     } : undefined;
   }, [snappingEnabled]);
   var handleResizeStart = useCallback(function () {
@@ -99,7 +100,7 @@ export var TableResizer = function TableResizer(_ref) {
       start: pos + 1,
       parentWidth: newWidth
     }, editorView.domAtPos.bind(editorView));
-    updateActiveGuidelines(findClosestSnap(newWidth, defaultGuidelineWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP));
+    updateActiveGuidelines(findClosestSnap(newWidth, defaultSnappingWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE));
     updateWidth(newWidth);
     return newWidth;
   }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames]);
@@ -183,6 +184,7 @@ export var TableResizer = function TableResizer(_ref) {
     snapGap: TABLE_SNAP_GAP,
     snap: guidelineSnaps,
     handlePositioning: "adjacent",
+    innerPadding: tableHandlePosition,
     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(),
     handleComponent: handleComponent
   }, children);

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.3",
+	"version": "2.8.5",
 	"sideEffects": false
 }

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/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.3",
+  "version": "2.8.5",
   "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.44.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

@@ -24,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;
@@ -49,6 +53,7 @@ interface TableResizerProps {
 
 const handles = { right: true };
 const tableHandleMarginTop = 12;
+const tableHandlePosition = 14;
 
 const getResizerHandleHeight = (tableRef: HTMLTableElement) => {
   const tableHeight = tableRef?.clientHeight;
@@ -122,7 +127,7 @@ export const TableResizer = ({
     () =>
       snappingEnabled
         ? {
-            x: defaultGuidelineWidths,
+            x: defaultSnappingWidths,
           }
         : undefined,
     [snappingEnabled],
@@ -164,9 +169,10 @@ export const TableResizer = ({
       updateActiveGuidelines(
         findClosestSnap(
           newWidth,
-          defaultGuidelineWidths,
+          defaultSnappingWidths,
           defaultGuidelines,
           TABLE_HIGHLIGHT_GAP,
+          TABLE_HIGHLIGHT_TOLERANCE,
         ),
       );
 
@@ -291,6 +297,7 @@ export const TableResizer = ({
       snapGap={TABLE_SNAP_GAP}
       snap={guidelineSnaps}
       handlePositioning="adjacent"
+      innerPadding={tableHandlePosition}
       isHandleVisible={findTable(editorView.state?.selection)?.pos === getPos()}
       handleComponent={handleComponent}
     >

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);
       }