@atlaskit/editor-plugin-table 7.16.9 → 7.16.10

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 7.16.10
+
+### Patch Changes
+
+-   [#103716](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103716)
+    [`d691deb86b01`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d691deb86b01) -
+    Exclude breakout guides for full width appearance for tables
+
 ## 7.16.9
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableResizer.js

@@ -130,20 +130,26 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     startMeasure = _useMeasureFramerate.startMeasure,
     endMeasure = _useMeasureFramerate.endMeasure,
     countFrames = _useMeasureFramerate.countFrames;
+  var excludeGuidelineConfig = (0, _react.useMemo)(function () {
+    return {
+      innerGuidelines: !!isTableAlignmentEnabled,
+      breakoutPoints: !!(isTableAlignmentEnabled && tableState !== null && tableState !== void 0 && tableState.isFullWidthModeEnabled)
+    };
+  }, [tableState, isTableAlignmentEnabled]);
   var updateActiveGuidelines = (0, _react.useCallback)(function (_ref3) {
     var gap = _ref3.gap,
       keys = _ref3.keys;
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, isTableAlignmentEnabled) : _guidelines.defaultGuidelines, containerWidth);
+      var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, containerWidth);
       displayGuideline((0, _guideline.getGuidelinesWithHighlights)(gap, _consts.TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
-  }, [isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline]);
+  }, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline]);
   var guidelineSnaps = (0, _react.useMemo)(function () {
     return snappingEnabled ? {
-      x: isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth, isTableAlignmentEnabled) : _snapping.defaultSnappingWidths
+      x: isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth, excludeGuidelineConfig) : _snapping.defaultSnappingWidths
     } : undefined;
-  }, [snappingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth]);
+  }, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth]);
   var switchToCenterAlignment = (0, _react.useCallback)(function (pos, node, newWidth, state, dispatch) {
     if (isTableAlignmentEnabled && node && node.attrs.layout === _alignment.ALIGN_START && newWidth > lineLength && lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH &&
     // We don't want to switch alignment in Full-width editor
@@ -193,12 +199,12 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       name: _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
     dispatch(tr);
-    var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, isTableAlignmentEnabled) : _guidelines.defaultGuidelines, containerWidth);
+    var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if (onResizeStart) {
       onResizeStart();
     }
-  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline, onResizeStart]);
+  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, onResizeStart]);
   var handleResize = (0, _react.useCallback)(function (originalState, delta) {
     var _node$attrs$localId, _node$attrs;
     countFrames();
@@ -218,14 +224,14 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       start: pos + 1,
       parentWidth: newWidth
     }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
-    var closestSnap = (0, _snapping.findClosestSnap)(newWidth, isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth, isTableAlignmentEnabled) : _snapping.defaultSnappingWidths, isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, isTableAlignmentEnabled) : _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP, _consts.TABLE_HIGHLIGHT_TOLERANCE);
+    var closestSnap = (0, _snapping.findClosestSnap)(newWidth, isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth, excludeGuidelineConfig) : _snapping.defaultSnappingWidths, isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP, _consts.TABLE_HIGHLIGHT_TOLERANCE);
     updateActiveGuidelines(closestSnap);
 
     // When snapping to the full width guideline, resize the table to be 1800px
     var state = editorView.state,
       dispatch = editorView.dispatch;
     var currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
-    var fullWidthGuideline = (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, isTableAlignmentEnabled).filter(function (guideline) {
+    var fullWidthGuideline = (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, excludeGuidelineConfig).filter(function (guideline) {
       return guideline.isFullWidth;
     })[0];
     var isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
@@ -235,7 +241,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     }, (0, _misc.updateWidthToWidest)((0, _defineProperty2.default)({}, currentTableNodeLocalId, shouldUpdateWidthToWidest)))(state, dispatch);
     updateWidth(shouldUpdateWidthToWidest ? _utils3.TABLE_MAX_WIDTH : newWidth);
     return newWidth;
-  }, [countFrames, isTableScalingEnabled, isTableAlignmentEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos, switchToCenterAlignment]);
+  }, [countFrames, isTableScalingEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos, switchToCenterAlignment]);
   var scheduleResize = (0, _react.useMemo)(function () {
     return (0, _rafSchd.default)(handleResize);
   }, [handleResize]);

package/dist/cjs/utils/guidelines.js

@@ -12,7 +12,10 @@ var _snapping = require("./snapping");
 // If we don't do this then the guidelines will not align correctly to the edge of the table
 var defaultGuidelines = exports.defaultGuidelines = (0, _guideline.createFixedGuidelinesFromLengths)([0].concat((0, _toConsumableArray2.default)((0, _snapping.calculateDefaultSnappings)(-1))));
 var defaultGuidelinesForPreserveTable = exports.defaultGuidelinesForPreserveTable = function defaultGuidelinesForPreserveTable(editorContainerWidth) {
-  var excludeInnerGuidelines = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var lengths = (0, _snapping.calculateDefaultTablePreserveSnappings)(-1, editorContainerWidth, excludeInnerGuidelines);
+  var exclude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    innerGuidelines: false,
+    breakoutPoints: false
+  };
+  var lengths = (0, _snapping.calculateDefaultTablePreserveSnappings)(-1, editorContainerWidth, exclude);
   return (0, _guideline.createFixedGuidelinesFromLengths)(lengths, undefined, true);
 };

package/dist/cjs/utils/snapping.js

@@ -19,24 +19,33 @@ var calculateDefaultSnappings = exports.calculateDefaultSnappings = function cal
   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]);
 };
-
 // FF TablePreserve for calculateDefaultSnappings
 var calculateDefaultTablePreserveSnappings = exports.calculateDefaultTablePreserveSnappings = function calculateDefaultTablePreserveSnappings() {
   var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   var editorContainerWith = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _editorSharedStyles.akEditorFullWidthLayoutWidth;
-  var excludeInnerGuidelines = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var exclude = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+    innerGuidelines: false,
+    breakoutPoints: false
+  };
   var dynamicFullWidthLine = editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 >= _editorSharedStyles.akEditorFullWidthLayoutWidth ? _editorSharedStyles.akEditorFullWidthLayoutWidth : editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 - _consts.tableResizerWidth;
-  if (excludeInnerGuidelines) {
-    return [_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset];
+  var guides = [dynamicFullWidthLine - lengthOffset];
+  if (!exclude.breakoutPoints) {
+    guides.unshift(_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset);
   }
-  return [0].concat((0, _toConsumableArray2.default)(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, _editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset)), [_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset]);
+  if (!exclude.innerGuidelines) {
+    guides.unshift.apply(guides, [0].concat((0, _toConsumableArray2.default)(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, _editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset))));
+  }
+  return guides;
 };
 var defaultSnappingWidths = exports.defaultSnappingWidths = calculateDefaultSnappings();
 
 // FF TablePreserve for defaultSnappingWidths
 var defaultTablePreserveSnappingWidths = exports.defaultTablePreserveSnappingWidths = function defaultTablePreserveSnappingWidths(editorContainerWidth) {
-  var excludeInnerGuidelines = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  return editorContainerWidth - _editorSharedStyles.akEditorGutterPadding * 2 > _editorSharedStyles.akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth, excludeInnerGuidelines);
+  var exclude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    innerGuidelines: false,
+    breakoutPoints: false
+  };
+  return editorContainerWidth - _editorSharedStyles.akEditorGutterPadding * 2 > _editorSharedStyles.akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth, exclude);
 };
 
 /**

package/dist/es2019/nodeviews/TableResizer.js

@@ -118,19 +118,23 @@ export const TableResizer = ({
     endMeasure,
     countFrames
   } = useMeasureFramerate();
+  const excludeGuidelineConfig = useMemo(() => ({
+    innerGuidelines: !!isTableAlignmentEnabled,
+    breakoutPoints: !!(isTableAlignmentEnabled && tableState !== null && tableState !== void 0 && tableState.isFullWidthModeEnabled)
+  }), [tableState, isTableAlignmentEnabled]);
   const updateActiveGuidelines = useCallback(({
     gap,
     keys
   }) => {
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, containerWidth);
+      const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth);
       displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
-  }, [isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline]);
+  }, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline]);
   const guidelineSnaps = useMemo(() => snappingEnabled ? {
-    x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, isTableAlignmentEnabled) : defaultSnappingWidths
-  } : undefined, [snappingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth]);
+    x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
+  } : undefined, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth]);
   const switchToCenterAlignment = useCallback((pos, node, newWidth, state, dispatch) => {
     if (isTableAlignmentEnabled && node && node.attrs.layout === ALIGN_START && newWidth > lineLength && lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH &&
     // We don't want to switch alignment in Full-width editor
@@ -188,12 +192,12 @@ export const TableResizer = ({
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
     dispatch(tr);
-    const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, containerWidth);
+    const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if (onResizeStart) {
       onResizeStart();
     }
-  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline, onResizeStart]);
+  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, onResizeStart]);
   const handleResize = useCallback((originalState, delta) => {
     var _node$attrs$localId, _node$attrs;
     countFrames();
@@ -213,7 +217,7 @@ export const TableResizer = ({
       start: pos + 1,
       parentWidth: newWidth
     }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
-    const closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, isTableAlignmentEnabled) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
+    const closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, excludeGuidelineConfig) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
     updateActiveGuidelines(closestSnap);
 
     // When snapping to the full width guideline, resize the table to be 1800px
@@ -222,7 +226,7 @@ export const TableResizer = ({
       dispatch
     } = editorView;
     const currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
-    const fullWidthGuideline = defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled).filter(guideline => guideline.isFullWidth)[0];
+    const fullWidthGuideline = defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig).filter(guideline => guideline.isFullWidth)[0];
     const isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
     const shouldUpdateWidthToWidest = !!isTableScalingEnabled && isFullWidthGuidelineActive;
     chainCommands((state, dispatch) => {
@@ -232,7 +236,7 @@ export const TableResizer = ({
     }))(state, dispatch);
     updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
     return newWidth;
-  }, [countFrames, isTableScalingEnabled, isTableAlignmentEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos, switchToCenterAlignment]);
+  }, [countFrames, isTableScalingEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos, switchToCenterAlignment]);
   const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
   const handleResizeStop = useCallback((originalState, delta) => {
     var _node$attrs$localId2, _node$attrs2;

package/dist/es2019/utils/guidelines.js

@@ -4,7 +4,10 @@ import { calculateDefaultSnappings, calculateDefaultTablePreserveSnappings } fro
 // 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)]);
-export const defaultGuidelinesForPreserveTable = (editorContainerWidth, excludeInnerGuidelines = false) => {
-  const lengths = calculateDefaultTablePreserveSnappings(-1, editorContainerWidth, excludeInnerGuidelines);
+export const defaultGuidelinesForPreserveTable = (editorContainerWidth, exclude = {
+  innerGuidelines: false,
+  breakoutPoints: false
+}) => {
+  const lengths = calculateDefaultTablePreserveSnappings(-1, editorContainerWidth, exclude);
   return createFixedGuidelinesFromLengths(lengths, undefined, true);
 };

package/dist/es2019/utils/snapping.js

@@ -4,20 +4,29 @@ import { tableResizerWidth } from '../ui/consts';
 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];
-
 // FF TablePreserve for calculateDefaultSnappings
-export const calculateDefaultTablePreserveSnappings = (lengthOffset = 0, editorContainerWith = akEditorFullWidthLayoutWidth, excludeInnerGuidelines = false) => {
+export const calculateDefaultTablePreserveSnappings = (lengthOffset = 0, editorContainerWith = akEditorFullWidthLayoutWidth, exclude = {
+  innerGuidelines: false,
+  breakoutPoints: false
+}) => {
   const dynamicFullWidthLine = editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPadding * 2 - tableResizerWidth;
-  if (excludeInnerGuidelines) {
-    return [akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset];
+  const guides = [dynamicFullWidthLine - lengthOffset];
+  if (!exclude.breakoutPoints) {
+    guides.unshift(akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset);
+  }
+  if (!exclude.innerGuidelines) {
+    guides.unshift(0, ...calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset));
   }
-  return [0, ...calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset), akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset];
+  return guides;
 };
 export const defaultSnappingWidths = calculateDefaultSnappings();
 
 // FF TablePreserve for defaultSnappingWidths
-export const defaultTablePreserveSnappingWidths = (editorContainerWidth, excludeInnerGuidelines = false) => {
-  return editorContainerWidth - akEditorGutterPadding * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth, excludeInnerGuidelines);
+export const defaultTablePreserveSnappingWidths = (editorContainerWidth, exclude = {
+  innerGuidelines: false,
+  breakoutPoints: false
+}) => {
+  return editorContainerWidth - akEditorGutterPadding * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth, exclude);
 };
 
 /**

package/dist/esm/nodeviews/TableResizer.js

@@ -120,20 +120,26 @@ export var TableResizer = function TableResizer(_ref) {
     startMeasure = _useMeasureFramerate.startMeasure,
     endMeasure = _useMeasureFramerate.endMeasure,
     countFrames = _useMeasureFramerate.countFrames;
+  var excludeGuidelineConfig = useMemo(function () {
+    return {
+      innerGuidelines: !!isTableAlignmentEnabled,
+      breakoutPoints: !!(isTableAlignmentEnabled && tableState !== null && tableState !== void 0 && tableState.isFullWidthModeEnabled)
+    };
+  }, [tableState, isTableAlignmentEnabled]);
   var updateActiveGuidelines = useCallback(function (_ref3) {
     var gap = _ref3.gap,
       keys = _ref3.keys;
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, containerWidth);
+      var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth);
       displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
-  }, [isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline]);
+  }, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline]);
   var guidelineSnaps = useMemo(function () {
     return snappingEnabled ? {
-      x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, isTableAlignmentEnabled) : defaultSnappingWidths
+      x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
     } : undefined;
-  }, [snappingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth]);
+  }, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth]);
   var switchToCenterAlignment = useCallback(function (pos, node, newWidth, state, dispatch) {
     if (isTableAlignmentEnabled && node && node.attrs.layout === ALIGN_START && newWidth > lineLength && lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH &&
     // We don't want to switch alignment in Full-width editor
@@ -183,12 +189,12 @@ export var TableResizer = function TableResizer(_ref) {
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
     dispatch(tr);
-    var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, containerWidth);
+    var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if (onResizeStart) {
       onResizeStart();
     }
-  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, isTableAlignmentEnabled, containerWidth, displayGuideline, onResizeStart]);
+  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, onResizeStart]);
   var handleResize = useCallback(function (originalState, delta) {
     var _node$attrs$localId, _node$attrs;
     countFrames();
@@ -208,14 +214,14 @@ export var TableResizer = function TableResizer(_ref) {
       start: pos + 1,
       parentWidth: newWidth
     }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
-    var closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, isTableAlignmentEnabled) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
+    var closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, excludeGuidelineConfig) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
     updateActiveGuidelines(closestSnap);
 
     // When snapping to the full width guideline, resize the table to be 1800px
     var state = editorView.state,
       dispatch = editorView.dispatch;
     var currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
-    var fullWidthGuideline = defaultGuidelinesForPreserveTable(containerWidth, isTableAlignmentEnabled).filter(function (guideline) {
+    var fullWidthGuideline = defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig).filter(function (guideline) {
       return guideline.isFullWidth;
     })[0];
     var isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
@@ -225,7 +231,7 @@ export var TableResizer = function TableResizer(_ref) {
     }, updateWidthToWidest(_defineProperty({}, currentTableNodeLocalId, shouldUpdateWidthToWidest)))(state, dispatch);
     updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
     return newWidth;
-  }, [countFrames, isTableScalingEnabled, isTableAlignmentEnabled, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos, switchToCenterAlignment]);
+  }, [countFrames, isTableScalingEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos, switchToCenterAlignment]);
   var scheduleResize = useMemo(function () {
     return rafSchd(handleResize);
   }, [handleResize]);

package/dist/esm/utils/guidelines.js

@@ -6,7 +6,10 @@ import { calculateDefaultSnappings, calculateDefaultTablePreserveSnappings } fro
 // 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))));
 export var defaultGuidelinesForPreserveTable = function defaultGuidelinesForPreserveTable(editorContainerWidth) {
-  var excludeInnerGuidelines = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var lengths = calculateDefaultTablePreserveSnappings(-1, editorContainerWidth, excludeInnerGuidelines);
+  var exclude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    innerGuidelines: false,
+    breakoutPoints: false
+  };
+  var lengths = calculateDefaultTablePreserveSnappings(-1, editorContainerWidth, exclude);
   return createFixedGuidelinesFromLengths(lengths, undefined, true);
 };

package/dist/esm/utils/snapping.js

@@ -12,24 +12,33 @@ 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]);
 };
-
 // FF TablePreserve for calculateDefaultSnappings
 export var calculateDefaultTablePreserveSnappings = function calculateDefaultTablePreserveSnappings() {
   var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   var editorContainerWith = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : akEditorFullWidthLayoutWidth;
-  var excludeInnerGuidelines = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var exclude = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
+    innerGuidelines: false,
+    breakoutPoints: false
+  };
   var dynamicFullWidthLine = editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPadding * 2 - tableResizerWidth;
-  if (excludeInnerGuidelines) {
-    return [akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset];
+  var guides = [dynamicFullWidthLine - lengthOffset];
+  if (!exclude.breakoutPoints) {
+    guides.unshift(akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset);
   }
-  return [0].concat(_toConsumableArray(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset)), [akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset]);
+  if (!exclude.innerGuidelines) {
+    guides.unshift.apply(guides, [0].concat(_toConsumableArray(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset))));
+  }
+  return guides;
 };
 export var defaultSnappingWidths = calculateDefaultSnappings();
 
 // FF TablePreserve for defaultSnappingWidths
 export var defaultTablePreserveSnappingWidths = function defaultTablePreserveSnappingWidths(editorContainerWidth) {
-  var excludeInnerGuidelines = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  return editorContainerWidth - akEditorGutterPadding * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth, excludeInnerGuidelines);
+  var exclude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+    innerGuidelines: false,
+    breakoutPoints: false
+  };
+  return editorContainerWidth - akEditorGutterPadding * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth, exclude);
 };
 
 /**

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

@@ -1,3 +1,4 @@
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
+import type { GuidelineExcludeConfig } from './snapping';
 export declare const defaultGuidelines: GuidelineConfig[];
-export declare const defaultGuidelinesForPreserveTable: (editorContainerWidth: number, excludeInnerGuidelines?: boolean) => GuidelineConfig[];
+export declare const defaultGuidelinesForPreserveTable: (editorContainerWidth: number, exclude?: GuidelineExcludeConfig) => GuidelineConfig[];

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

@@ -1,8 +1,12 @@
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 export declare const calculateDefaultSnappings: (lengthOffset?: number) => number[];
-export declare const calculateDefaultTablePreserveSnappings: (lengthOffset?: number, editorContainerWith?: number, excludeInnerGuidelines?: boolean) => number[];
+export type GuidelineExcludeConfig = {
+    innerGuidelines: boolean;
+    breakoutPoints: boolean;
+};
+export declare const calculateDefaultTablePreserveSnappings: (lengthOffset?: number, editorContainerWith?: number, exclude?: GuidelineExcludeConfig) => number[];
 export declare const defaultSnappingWidths: number[];
-export declare const defaultTablePreserveSnappingWidths: (editorContainerWidth: number, excludeInnerGuidelines?: boolean) => number[];
+export declare const defaultTablePreserveSnappingWidths: (editorContainerWidth: number, exclude?: GuidelineExcludeConfig) => number[];
 /**
  * Returns keys of guidelines that are closest to the table and withthin the snapGap
  */

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

@@ -1,3 +1,4 @@
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
+import type { GuidelineExcludeConfig } from './snapping';
 export declare const defaultGuidelines: GuidelineConfig[];
-export declare const defaultGuidelinesForPreserveTable: (editorContainerWidth: number, excludeInnerGuidelines?: boolean) => GuidelineConfig[];
+export declare const defaultGuidelinesForPreserveTable: (editorContainerWidth: number, exclude?: GuidelineExcludeConfig) => GuidelineConfig[];

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

@@ -1,8 +1,12 @@
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 export declare const calculateDefaultSnappings: (lengthOffset?: number) => number[];
-export declare const calculateDefaultTablePreserveSnappings: (lengthOffset?: number, editorContainerWith?: number, excludeInnerGuidelines?: boolean) => number[];
+export type GuidelineExcludeConfig = {
+    innerGuidelines: boolean;
+    breakoutPoints: boolean;
+};
+export declare const calculateDefaultTablePreserveSnappings: (lengthOffset?: number, editorContainerWith?: number, exclude?: GuidelineExcludeConfig) => number[];
 export declare const defaultSnappingWidths: number[];
-export declare const defaultTablePreserveSnappingWidths: (editorContainerWidth: number, excludeInnerGuidelines?: boolean) => number[];
+export declare const defaultTablePreserveSnappingWidths: (editorContainerWidth: number, exclude?: GuidelineExcludeConfig) => number[];
 /**
  * Returns keys of guidelines that are closest to the table and withthin the snapGap
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.16.9",
+  "version": "7.16.10",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/nodeviews/TableComponent.tsx

@@ -688,7 +688,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       isDragAndDropEnabled,
       getEditorFeatureFlags,
       isTableScalingEnabled, // here we can use options.isTableScalingEnabled
-      isTableAlignmentEnabled
+      isTableAlignmentEnabled,
     } = this.props;
 
     let {

package/src/nodeviews/TableResizer.tsx

@@ -209,6 +209,16 @@ export const TableResizer = ({
 
   const { startMeasure, endMeasure, countFrames } = useMeasureFramerate();
 
+  const excludeGuidelineConfig = useMemo(
+    () => ({
+      innerGuidelines: !!isTableAlignmentEnabled,
+      breakoutPoints: !!(
+        isTableAlignmentEnabled && tableState?.isFullWidthModeEnabled
+      ),
+    }),
+    [tableState, isTableAlignmentEnabled],
+  );
+
   const updateActiveGuidelines = useCallback(
     ({ gap, keys }: { gap: number; keys: string[] }) => {
       if (gap !== currentGap.current) {
@@ -217,7 +227,7 @@ export const TableResizer = ({
           isTableScalingEnabled
             ? defaultGuidelinesForPreserveTable(
                 containerWidth,
-                isTableAlignmentEnabled,
+                excludeGuidelineConfig,
               )
             : defaultGuidelines,
           containerWidth,
@@ -235,7 +245,7 @@ export const TableResizer = ({
     },
     [
       isTableScalingEnabled,
-      isTableAlignmentEnabled,
+      excludeGuidelineConfig,
       containerWidth,
       displayGuideline,
     ],
@@ -248,7 +258,7 @@ export const TableResizer = ({
             x: isTableScalingEnabled
               ? defaultTablePreserveSnappingWidths(
                   containerWidth,
-                  isTableAlignmentEnabled,
+                  excludeGuidelineConfig,
                 )
               : defaultSnappingWidths,
           }
@@ -256,7 +266,7 @@ export const TableResizer = ({
     [
       snappingEnabled,
       isTableScalingEnabled,
-      isTableAlignmentEnabled,
+      excludeGuidelineConfig,
       containerWidth,
     ],
   );
@@ -334,7 +344,7 @@ export const TableResizer = ({
       isTableScalingEnabled
         ? defaultGuidelinesForPreserveTable(
             containerWidth,
-            isTableAlignmentEnabled,
+            excludeGuidelineConfig,
           )
         : defaultGuidelines,
       containerWidth,
@@ -351,7 +361,7 @@ export const TableResizer = ({
     node.attrs.localId,
     tableRef,
     isTableScalingEnabled,
-    isTableAlignmentEnabled,
+    excludeGuidelineConfig,
     containerWidth,
     displayGuideline,
     onResizeStart,
@@ -388,13 +398,13 @@ export const TableResizer = ({
         isTableScalingEnabled
           ? defaultTablePreserveSnappingWidths(
               containerWidth,
-              isTableAlignmentEnabled,
+              excludeGuidelineConfig,
             )
           : defaultSnappingWidths,
         isTableScalingEnabled
           ? defaultGuidelinesForPreserveTable(
               containerWidth,
-              isTableAlignmentEnabled,
+              excludeGuidelineConfig,
             )
           : defaultGuidelines,
         TABLE_HIGHLIGHT_GAP,
@@ -409,7 +419,7 @@ export const TableResizer = ({
 
       const fullWidthGuideline = defaultGuidelinesForPreserveTable(
         containerWidth,
-        isTableAlignmentEnabled,
+        excludeGuidelineConfig,
       ).filter((guideline) => guideline.isFullWidth)[0];
 
       const isFullWidthGuidelineActive = closestSnap.keys.includes(
@@ -434,7 +444,7 @@ export const TableResizer = ({
     [
       countFrames,
       isTableScalingEnabled,
-      isTableAlignmentEnabled,
+      excludeGuidelineConfig,
       tableRef,
       node,
       editorView,

package/src/utils/guidelines.ts

@@ -1,6 +1,7 @@
 import { createFixedGuidelinesFromLengths } from '@atlaskit/editor-common/guideline';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 
+import type { GuidelineExcludeConfig } from './snapping';
 import {
   calculateDefaultSnappings,
   calculateDefaultTablePreserveSnappings,
@@ -15,12 +16,15 @@ export const defaultGuidelines = createFixedGuidelinesFromLengths([
 
 export const defaultGuidelinesForPreserveTable = (
   editorContainerWidth: number,
-  excludeInnerGuidelines = false,
+  exclude: GuidelineExcludeConfig = {
+    innerGuidelines: false,
+    breakoutPoints: false,
+  },
 ) => {
   const lengths = calculateDefaultTablePreserveSnappings(
     -1,
     editorContainerWidth,
-    excludeInnerGuidelines,
+    exclude,
   );
 
   return createFixedGuidelinesFromLengths(

package/src/utils/snapping.ts

@@ -26,11 +26,19 @@ export const calculateDefaultSnappings = (lengthOffset: number = 0) => [
   akEditorFullWidthLayoutWidth + lengthOffset,
 ];
 
+export type GuidelineExcludeConfig = {
+  innerGuidelines: boolean;
+  breakoutPoints: boolean;
+};
+
 // FF TablePreserve for calculateDefaultSnappings
 export const calculateDefaultTablePreserveSnappings = (
-  lengthOffset: number = 0,
-  editorContainerWith: number = akEditorFullWidthLayoutWidth,
-  excludeInnerGuidelines = false,
+  lengthOffset = 0,
+  editorContainerWith = akEditorFullWidthLayoutWidth,
+  exclude: GuidelineExcludeConfig = {
+    innerGuidelines: false,
+    breakoutPoints: false,
+  },
 ) => {
   const dynamicFullWidthLine =
     editorContainerWith - akEditorGutterPadding * 2 >=
@@ -38,24 +46,26 @@ export const calculateDefaultTablePreserveSnappings = (
       ? akEditorFullWidthLayoutWidth
       : editorContainerWith - akEditorGutterPadding * 2 - tableResizerWidth;
 
-  if (excludeInnerGuidelines) {
-    return [
+  const guides = [dynamicFullWidthLine - lengthOffset];
+
+  if (!exclude.breakoutPoints) {
+    guides.unshift(
       akEditorDefaultLayoutWidth + lengthOffset,
       akEditorCalculatedWideLayoutWidth + lengthOffset,
-      dynamicFullWidthLine - lengthOffset,
-    ];
+    );
   }
 
-  return [
-    0,
-    ...calculateSubSnappingWidths(
-      numberOfLanesInDefaultLayoutWidth,
-      akEditorDefaultLayoutWidth + lengthOffset,
-    ),
-    akEditorDefaultLayoutWidth + lengthOffset,
-    akEditorCalculatedWideLayoutWidth + lengthOffset,
-    dynamicFullWidthLine - lengthOffset,
-  ];
+  if (!exclude.innerGuidelines) {
+    guides.unshift(
+      0,
+      ...calculateSubSnappingWidths(
+        numberOfLanesInDefaultLayoutWidth,
+        akEditorDefaultLayoutWidth + lengthOffset,
+      ),
+    );
+  }
+
+  return guides;
 };
 
 export const defaultSnappingWidths = calculateDefaultSnappings();
@@ -63,7 +73,10 @@ export const defaultSnappingWidths = calculateDefaultSnappings();
 // FF TablePreserve for defaultSnappingWidths
 export const defaultTablePreserveSnappingWidths = (
   editorContainerWidth: number,
-  excludeInnerGuidelines = false,
+  exclude: GuidelineExcludeConfig = {
+    innerGuidelines: false,
+    breakoutPoints: false,
+  },
 ) => {
   return editorContainerWidth - akEditorGutterPadding * 2 >
     akEditorFullWidthLayoutWidth
@@ -71,7 +84,7 @@ export const defaultTablePreserveSnappingWidths = (
     : calculateDefaultTablePreserveSnappings(
         0,
         editorContainerWidth,
-        excludeInnerGuidelines,
+        exclude,
       );
 };