@atlaskit/editor-plugin-table 7.16.12 → 7.16.13

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 7.16.13
+
+### Patch Changes
+
+- [#104756](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/104756)
+  [`bf2f24fa1ffa`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bf2f24fa1ffa) -
+  [ux] Fix table container position on resize in full-width editor on smaller screens.
+
 ## 7.16.12
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableContainer.js

@@ -131,6 +131,10 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     resizing = _useState2[0],
     setIsResizing = _useState2[1];
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['table']),
+    tableState = _useSharedPluginState2.tableState;
+  var _ref5 = tableState,
+    isFullWidthModeEnabled = _ref5.isFullWidthModeEnabled;
   var updateContainerHeight = (0, _react.useCallback)(function (height) {
     var _containerRef$current;
     // current StickyHeader State is not stable to be fetch.
@@ -184,11 +188,27 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
   }, [pluginInjectionApi]);
   var tableWidth = (0, _nodeWidth.getTableContainerWidth)(node);
-  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorViewMode']),
-    editorViewModeState = _useSharedPluginState2.editorViewModeState;
-
-  // 76 is currently an accepted padding value considering the spacing for resizer handle
-  var responsiveContainerWidth = isTableScalingEnabled ? containerWidth - _editorSharedStyles.akEditorGutterPadding * 2 - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide / 2 : containerWidth - _editorSharedStyles.akEditorGutterPadding * 2 - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide;
+  var _useSharedPluginState3 = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState3.editorViewModeState;
+  var responsiveContainerWidth = 0;
+  var resizeHandleSpacing = 12;
+  // When Full width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
+  // updating Settings -> Appearance -> Show scroll bars from "When scrolling" to "Always". It causes
+  // issues when viwport width is less than full width Editor's width. To detect avoid them
+  // we need to use lineLength to defined responsiveWidth instead of containerWidth
+  // (which does not get updated when Mac setting changes) in Full-width editor.
+  if (isFullWidthModeEnabled) {
+    // When: Show scroll bars -> containerWidth = akEditorGutterPadding * 2 + lineLength;
+    // When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
+    // scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
+    responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - _editorSharedStyles.akEditorGutterPadding * 2 - resizeHandleSpacing;
+  } else {
+    // 76 is currently an accepted padding value considering the spacing for resizer handle
+    // containerWidth = width of a DIV with test id="ak-editor-fp-content-area". It is a parent of
+    // a DIV with className="ak-editor-content-area". This DIV has padding left and padding right.
+    // padding left = padding right = akEditorGutterPadding = 32
+    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - _editorSharedStyles.akEditorGutterPadding * 2 : containerWidth - _editorSharedStyles.akEditorGutterPadding * 2 - resizeHandleSpacing;
+  }
   var width = Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {
     tableWidthRef.current = width;
@@ -208,6 +228,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     attachAnalyticsEvent: attachAnalyticsEvent,
     displayGapCursor: displayGapCursor,
     isTableAlignmentEnabled: isTableAlignmentEnabled,
+    isFullWidthModeEnabled: isFullWidthModeEnabled,
     isTableScalingEnabled: isTableScalingEnabled,
     isWholeTableInDanger: isWholeTableInDanger,
     pluginInjectionApi: pluginInjectionApi,
@@ -246,24 +267,24 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     node: node
   }, children))));
 });
-var TableContainer = exports.TableContainer = function TableContainer(_ref5) {
-  var children = _ref5.children,
-    node = _ref5.node,
-    className = _ref5.className,
-    _ref5$containerWidth = _ref5.containerWidth,
-    editorWidth = _ref5$containerWidth.width,
-    lineLength = _ref5$containerWidth.lineLength,
-    editorView = _ref5.editorView,
-    getPos = _ref5.getPos,
-    tableRef = _ref5.tableRef,
-    isNested = _ref5.isNested,
-    tableWrapperHeight = _ref5.tableWrapperHeight,
-    isResizing = _ref5.isResizing,
-    pluginInjectionApi = _ref5.pluginInjectionApi,
-    isWholeTableInDanger = _ref5.isWholeTableInDanger,
-    isTableResizingEnabled = _ref5.isTableResizingEnabled,
-    isTableScalingEnabled = _ref5.isTableScalingEnabled,
-    isTableAlignmentEnabled = _ref5.isTableAlignmentEnabled;
+var TableContainer = exports.TableContainer = function TableContainer(_ref6) {
+  var children = _ref6.children,
+    node = _ref6.node,
+    className = _ref6.className,
+    _ref6$containerWidth = _ref6.containerWidth,
+    editorWidth = _ref6$containerWidth.width,
+    lineLength = _ref6$containerWidth.lineLength,
+    editorView = _ref6.editorView,
+    getPos = _ref6.getPos,
+    tableRef = _ref6.tableRef,
+    isNested = _ref6.isNested,
+    tableWrapperHeight = _ref6.tableWrapperHeight,
+    isResizing = _ref6.isResizing,
+    pluginInjectionApi = _ref6.pluginInjectionApi,
+    isWholeTableInDanger = _ref6.isWholeTableInDanger,
+    isTableResizingEnabled = _ref6.isTableResizingEnabled,
+    isTableScalingEnabled = _ref6.isTableScalingEnabled,
+    isTableAlignmentEnabled = _ref6.isTableAlignmentEnabled;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/_react.default.createElement(ResizableTableContainer
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/cjs/nodeviews/TableResizer.js

@@ -19,6 +19,7 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _resizer = require("@atlaskit/editor-common/resizer");
 var _utils = require("@atlaskit/editor-common/utils");
 var _commands = require("@atlaskit/editor-prosemirror/commands");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _misc = require("../commands/misc");
@@ -78,10 +79,26 @@ var getResizerMinWidth = function getResizerMinWidth(node) {
  * So the guideline container won't make the fabric-editor-popup-scroll-parent overflow
  * @param guidelines
  * @param containerWidth editorWidth
+ * @param lineLength
+ * @param isTableScalingEnabled
+ * @param isFullWidthModeEnabled
  */
-var getVisibleGuidelines = function getVisibleGuidelines(guidelines, containerWidth) {
+var getVisibleGuidelines = function getVisibleGuidelines(guidelines, containerWidth, lineLength, isTableScalingEnabled, isFullWidthModeEnabled) {
+  var guidelineVisibleAdjustment = _consts.TABLE_GUIDELINE_VISIBLE_ADJUSTMENT;
+  if (isTableScalingEnabled) {
+    // Notes:
+    // Example: containerWidth = 1244, lineLength = 1180 (used for when editor full width mode is enabled)
+    // Full width/dynamic x coordinate can be float number.
+    // Ex: guideline.position.x can be 590.5. So 590.5 * 2 = 1181 (not 1180).
+    // For PTW we need to ensure that dynamic guideline never gets excluded: 1181 should be > width + guidelineVisibleAdjustment
+    // guidelineVisibleAdjustment is set as a negative value, so we making it positive and adding + 1
+    var preserve_table_widths_adjustment = -1 * _guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET + 1;
+    guidelineVisibleAdjustment = isFullWidthModeEnabled ? preserve_table_widths_adjustment // guidelineVisibleAdjustment = -2, if lineLength = 1180, 1181 < 1180 + 2 is true.
+    : -2 * _editorSharedStyles.akEditorGutterPadding + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
+  }
+  var width = isTableScalingEnabled && isFullWidthModeEnabled ? lineLength : containerWidth;
   return guidelines.filter(function (guideline) {
-    return guideline.position && guideline.position.x !== undefined && typeof guideline.position.x === 'number' && Math.abs(guideline.position.x * 2) < containerWidth + _consts.TABLE_GUIDELINE_VISIBLE_ADJUSTMENT;
+    return guideline.position && guideline.position.x !== undefined && typeof guideline.position.x === 'number' && Math.abs(guideline.position.x * 2) < width + guidelineVisibleAdjustment;
   });
 };
 var TableResizer = exports.TableResizer = function TableResizer(_ref) {
@@ -104,7 +121,8 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     isTableScalingEnabled = _ref.isTableScalingEnabled,
     isTableAlignmentEnabled = _ref.isTableAlignmentEnabled,
     isWholeTableInDanger = _ref.isWholeTableInDanger,
-    pluginInjectionApi = _ref.pluginInjectionApi;
+    pluginInjectionApi = _ref.pluginInjectionApi,
+    isFullWidthModeEnabled = _ref.isFullWidthModeEnabled;
   var currentGap = (0, _react.useRef)(0);
   // track resizing state - use ref over state to avoid re-render
   var isResizing = (0, _react.useRef)(false);
@@ -141,15 +159,17 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       keys = _ref3.keys;
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, containerWidth);
+      var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * _editorSharedStyles.akEditorGutterPadding : containerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
       displayGuideline((0, _guideline.getGuidelinesWithHighlights)(gap, _consts.TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
-  }, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline]);
+  }, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, lineLength, isFullWidthModeEnabled]);
   var guidelineSnaps = (0, _react.useMemo)(function () {
     return snappingEnabled ? {
-      x: isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth, excludeGuidelineConfig) : _snapping.defaultSnappingWidths
+      x: isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(_snapping.PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET,
+      // was hardcoded to 0, using PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
+      isFullWidthModeEnabled ? lineLength + 2 * _editorSharedStyles.akEditorGutterPadding : containerWidth, excludeGuidelineConfig) : _snapping.defaultSnappingWidths
     } : undefined;
-  }, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth]);
+  }, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, lineLength, isFullWidthModeEnabled]);
   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
@@ -199,12 +219,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, excludeGuidelineConfig) : _guidelines.defaultGuidelines, containerWidth);
+    var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * _editorSharedStyles.akEditorGutterPadding : containerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if (onResizeStart) {
       onResizeStart();
     }
-  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, onResizeStart]);
+  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, lineLength, displayGuideline, onResizeStart, isFullWidthModeEnabled]);
   var handleResize = (0, _react.useCallback)(function (originalState, delta) {
     var _node$attrs$localId, _node$attrs;
     countFrames();
@@ -224,14 +244,15 @@ 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, excludeGuidelineConfig) : _snapping.defaultSnappingWidths, isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth, excludeGuidelineConfig) : _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP, _consts.TABLE_HIGHLIGHT_TOLERANCE);
+    var editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * _editorSharedStyles.akEditorGutterPadding : containerWidth;
+    var closestSnap = (0, _snapping.findClosestSnap)(newWidth, isTableScalingEnabled ? (0, _snapping.defaultTablePreserveSnappingWidths)(_snapping.PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : _snapping.defaultSnappingWidths, isTableScalingEnabled ? (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, 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, excludeGuidelineConfig).filter(function (guideline) {
+    var fullWidthGuideline = (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig).filter(function (guideline) {
       return guideline.isFullWidth;
     })[0];
     var isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
@@ -241,7 +262,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, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos, switchToCenterAlignment]);
+  }, [countFrames, isTableScalingEnabled, isFullWidthModeEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, lineLength, updateWidth, getPos, switchToCenterAlignment]);
   var scheduleResize = (0, _react.useMemo)(function () {
     return (0, _rafSchd.default)(handleResize);
   }, [handleResize]);

package/dist/cjs/utils/guidelines.js

@@ -4,18 +4,21 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultGuidelinesForPreserveTable = exports.defaultGuidelines = void 0;
+exports.defaultGuidelinesForPreserveTable = exports.defaultGuidelines = exports.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _guideline = require("@atlaskit/editor-common/guideline");
 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 = exports.defaultGuidelines = (0, _guideline.createFixedGuidelinesFromLengths)([0].concat((0, _toConsumableArray2.default)((0, _snapping.calculateDefaultSnappings)(-1))));
-var defaultGuidelinesForPreserveTable = exports.defaultGuidelinesForPreserveTable = function defaultGuidelinesForPreserveTable(editorContainerWidth) {
-  var exclude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+var PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET = exports.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET = -1;
+var defaultGuidelinesForPreserveTable = exports.defaultGuidelinesForPreserveTable = function defaultGuidelinesForPreserveTable(lengthOffset, editorContainerWidth) {
+  var exclude = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
     innerGuidelines: false,
     breakoutPoints: false
   };
-  var lengths = (0, _snapping.calculateDefaultTablePreserveSnappings)(-1, editorContainerWidth, exclude);
+  var lengths = (0, _snapping.calculateDefaultTablePreserveSnappings)(lengthOffset,
+  // was hardcoded to -1 here, created PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET instead.
+  editorContainerWidth, exclude);
   return (0, _guideline.createFixedGuidelinesFromLengths)(lengths, undefined, true);
 };

package/dist/cjs/utils/snapping.js

@@ -4,11 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.findClosestSnap = exports.defaultTablePreserveSnappingWidths = exports.defaultSnappingWidths = exports.calculateDefaultTablePreserveSnappings = exports.calculateDefaultSnappings = void 0;
+exports.findClosestSnap = exports.defaultTablePreserveSnappingWidths = exports.defaultSnappingWidths = exports.calculateDefaultTablePreserveSnappings = exports.calculateDefaultSnappings = exports.PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET = 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 _consts = require("../ui/consts");
 var numberOfLanesInDefaultLayoutWidth = 12;
 var calculateSubSnappingWidths = function calculateSubSnappingWidths(totalLanes, totalWidth) {
   return new Array(Math.round(totalLanes / 2) - 1).fill(totalWidth / totalLanes).map(function (v, i) {
@@ -27,7 +26,7 @@ var calculateDefaultTablePreserveSnappings = exports.calculateDefaultTablePreser
     innerGuidelines: false,
     breakoutPoints: false
   };
-  var dynamicFullWidthLine = editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 >= _editorSharedStyles.akEditorFullWidthLayoutWidth ? _editorSharedStyles.akEditorFullWidthLayoutWidth : editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 - _consts.tableResizerWidth;
+  var dynamicFullWidthLine = editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 >= _editorSharedStyles.akEditorFullWidthLayoutWidth ? _editorSharedStyles.akEditorFullWidthLayoutWidth : editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2;
   var guides = [dynamicFullWidthLine - lengthOffset];
   if (!exclude.breakoutPoints) {
     guides.unshift(_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset);
@@ -38,18 +37,18 @@ var calculateDefaultTablePreserveSnappings = exports.calculateDefaultTablePreser
   return guides;
 };
 var defaultSnappingWidths = exports.defaultSnappingWidths = calculateDefaultSnappings();
-
+var PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET = exports.PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET = 0;
 // FF TablePreserve for defaultSnappingWidths
-var defaultTablePreserveSnappingWidths = exports.defaultTablePreserveSnappingWidths = function defaultTablePreserveSnappingWidths(editorContainerWidth) {
-  var exclude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+var defaultTablePreserveSnappingWidths = exports.defaultTablePreserveSnappingWidths = function defaultTablePreserveSnappingWidths(lengthOffset, editorContainerWidth) {
+  var exclude = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
     innerGuidelines: false,
     breakoutPoints: false
   };
-  return editorContainerWidth - _editorSharedStyles.akEditorGutterPadding * 2 > _editorSharedStyles.akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth, exclude);
+  return editorContainerWidth - _editorSharedStyles.akEditorGutterPadding * 2 > _editorSharedStyles.akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(lengthOffset, editorContainerWidth, exclude); // lengthOffset was hardcoded 0 here, created PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
 };
 
 /**
- * Returns keys of guidelines that are closest to the table and withthin the snapGap
+ * Returns keys of guidelines that are closest to the table and within the snapGap
  */
 var findClosestSnap = exports.findClosestSnap = function findClosestSnap(currentWidth, snapWidths, guidelines) {
   var snapGap = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;

package/dist/es2019/nodeviews/TableContainer.js

@@ -2,7 +2,7 @@ import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState }
 import classNames from 'classnames';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { akEditorDefaultLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorGutterPadding, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { setTableAlignmentWithTableContentWithPos } from '../commands/misc';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { TableCssClassName as ClassName } from '../types';
@@ -124,6 +124,12 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   const containerRef = useRef(null);
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   const [resizing, setIsResizing] = useState(false);
+  const {
+    tableState
+  } = useSharedPluginState(pluginInjectionApi, ['table']);
+  const {
+    isFullWidthModeEnabled
+  } = tableState;
   const updateContainerHeight = useCallback(height => {
     var _containerRef$current;
     // current StickyHeader State is not stable to be fetch.
@@ -180,9 +186,25 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   const {
     editorViewModeState
   } = useSharedPluginState(pluginInjectionApi, ['editorViewMode']);
-
-  // 76 is currently an accepted padding value considering the spacing for resizer handle
-  const responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide / 2 : containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
+  let responsiveContainerWidth = 0;
+  const resizeHandleSpacing = 12;
+  // When Full width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
+  // updating Settings -> Appearance -> Show scroll bars from "When scrolling" to "Always". It causes
+  // issues when viwport width is less than full width Editor's width. To detect avoid them
+  // we need to use lineLength to defined responsiveWidth instead of containerWidth
+  // (which does not get updated when Mac setting changes) in Full-width editor.
+  if (isFullWidthModeEnabled) {
+    // When: Show scroll bars -> containerWidth = akEditorGutterPadding * 2 + lineLength;
+    // When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
+    // scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
+    responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - akEditorGutterPadding * 2 - resizeHandleSpacing;
+  } else {
+    // 76 is currently an accepted padding value considering the spacing for resizer handle
+    // containerWidth = width of a DIV with test id="ak-editor-fp-content-area". It is a parent of
+    // a DIV with className="ak-editor-content-area". This DIV has padding left and padding right.
+    // padding left = padding right = akEditorGutterPadding = 32
+    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPadding * 2 : containerWidth - akEditorGutterPadding * 2 - resizeHandleSpacing;
+  }
   let width = Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {
     tableWidthRef.current = width;
@@ -202,6 +224,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     attachAnalyticsEvent,
     displayGapCursor,
     isTableAlignmentEnabled,
+    isFullWidthModeEnabled,
     isTableScalingEnabled,
     isWholeTableInDanger,
     pluginInjectionApi,

package/dist/es2019/nodeviews/TableResizer.js

@@ -9,6 +9,7 @@ import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { browser } from '@atlaskit/editor-common/utils';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
+import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { setTableAlignmentWithTableContentWithPos, updateWidthToWidest } from '../commands/misc';
@@ -18,8 +19,8 @@ import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { TABLE_GUIDELINE_VISIBLE_ADJUSTMENT, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
 import { ALIGN_CENTER, ALIGN_START, normaliseAlignment } from '../utils/alignment';
 import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
-import { defaultGuidelines, defaultGuidelinesForPreserveTable } from '../utils/guidelines';
-import { defaultSnappingWidths, defaultTablePreserveSnappingWidths, findClosestSnap } from '../utils/snapping';
+import { defaultGuidelines, defaultGuidelinesForPreserveTable, PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET } from '../utils/guidelines';
+import { defaultSnappingWidths, defaultTablePreserveSnappingWidths, findClosestSnap, PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET } from '../utils/snapping';
 const RESIZE_STEP_VALUE = 10;
 const FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
 const handles = {
@@ -64,10 +65,26 @@ const getResizerMinWidth = node => {
  * So the guideline container won't make the fabric-editor-popup-scroll-parent overflow
  * @param guidelines
  * @param containerWidth editorWidth
+ * @param lineLength
+ * @param isTableScalingEnabled
+ * @param isFullWidthModeEnabled
  */
-const getVisibleGuidelines = (guidelines, containerWidth) => {
+const getVisibleGuidelines = (guidelines, containerWidth, lineLength, isTableScalingEnabled, isFullWidthModeEnabled) => {
+  let guidelineVisibleAdjustment = TABLE_GUIDELINE_VISIBLE_ADJUSTMENT;
+  if (isTableScalingEnabled) {
+    // Notes:
+    // Example: containerWidth = 1244, lineLength = 1180 (used for when editor full width mode is enabled)
+    // Full width/dynamic x coordinate can be float number.
+    // Ex: guideline.position.x can be 590.5. So 590.5 * 2 = 1181 (not 1180).
+    // For PTW we need to ensure that dynamic guideline never gets excluded: 1181 should be > width + guidelineVisibleAdjustment
+    // guidelineVisibleAdjustment is set as a negative value, so we making it positive and adding + 1
+    const preserve_table_widths_adjustment = -1 * PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET + 1;
+    guidelineVisibleAdjustment = isFullWidthModeEnabled ? preserve_table_widths_adjustment // guidelineVisibleAdjustment = -2, if lineLength = 1180, 1181 < 1180 + 2 is true.
+    : -2 * akEditorGutterPadding + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
+  }
+  const width = isTableScalingEnabled && isFullWidthModeEnabled ? lineLength : containerWidth;
   return guidelines.filter(guideline => {
-    return guideline.position && guideline.position.x !== undefined && typeof guideline.position.x === 'number' && Math.abs(guideline.position.x * 2) < containerWidth + TABLE_GUIDELINE_VISIBLE_ADJUSTMENT;
+    return guideline.position && guideline.position.x !== undefined && typeof guideline.position.x === 'number' && Math.abs(guideline.position.x * 2) < width + guidelineVisibleAdjustment;
   });
 };
 export const TableResizer = ({
@@ -89,7 +106,8 @@ export const TableResizer = ({
   isTableScalingEnabled,
   isTableAlignmentEnabled,
   isWholeTableInDanger,
-  pluginInjectionApi
+  pluginInjectionApi,
+  isFullWidthModeEnabled
 }) => {
   var _findTable, _editorView$state;
   const currentGap = useRef(0);
@@ -128,13 +146,15 @@ export const TableResizer = ({
   }) => {
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth);
+      const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
       displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
-  }, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline]);
+  }, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, lineLength, isFullWidthModeEnabled]);
   const guidelineSnaps = useMemo(() => snappingEnabled ? {
-    x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
-  } : undefined, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth]);
+    x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET,
+    // was hardcoded to 0, using PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
+    isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
+  } : undefined, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, lineLength, isFullWidthModeEnabled]);
   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
@@ -192,12 +212,12 @@ export const TableResizer = ({
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
     dispatch(tr);
-    const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth);
+    const visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if (onResizeStart) {
       onResizeStart();
     }
-  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, onResizeStart]);
+  }, [startMeasure, editorView, displayGapCursor, node.attrs.localId, tableRef, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, lineLength, displayGuideline, onResizeStart, isFullWidthModeEnabled]);
   const handleResize = useCallback((originalState, delta) => {
     var _node$attrs$localId, _node$attrs;
     countFrames();
@@ -217,7 +237,8 @@ export const TableResizer = ({
       start: pos + 1,
       parentWidth: newWidth
     }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
-    const closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, excludeGuidelineConfig) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
+    const editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth;
+    const closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
     updateActiveGuidelines(closestSnap);
 
     // When snapping to the full width guideline, resize the table to be 1800px
@@ -226,7 +247,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, excludeGuidelineConfig).filter(guideline => guideline.isFullWidth)[0];
+    const fullWidthGuideline = defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig).filter(guideline => guideline.isFullWidth)[0];
     const isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
     const shouldUpdateWidthToWidest = !!isTableScalingEnabled && isFullWidthGuidelineActive;
     chainCommands((state, dispatch) => {
@@ -236,7 +257,7 @@ export const TableResizer = ({
     }))(state, dispatch);
     updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
     return newWidth;
-  }, [countFrames, isTableScalingEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos, switchToCenterAlignment]);
+  }, [countFrames, isTableScalingEnabled, isFullWidthModeEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, lineLength, 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,10 +4,13 @@ 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, exclude = {
+export const PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET = -1;
+export const defaultGuidelinesForPreserveTable = (lengthOffset, editorContainerWidth, exclude = {
   innerGuidelines: false,
   breakoutPoints: false
 }) => {
-  const lengths = calculateDefaultTablePreserveSnappings(-1, editorContainerWidth, exclude);
+  const lengths = calculateDefaultTablePreserveSnappings(lengthOffset,
+  // was hardcoded to -1 here, created PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET instead.
+  editorContainerWidth, exclude);
   return createFixedGuidelinesFromLengths(lengths, undefined, true);
 };

package/dist/es2019/utils/snapping.js

@@ -1,6 +1,5 @@
 import { isVerticalPosition } from '@atlaskit/editor-common/guideline';
 import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
-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];
@@ -9,7 +8,7 @@ export const calculateDefaultTablePreserveSnappings = (lengthOffset = 0, editorC
   innerGuidelines: false,
   breakoutPoints: false
 }) => {
-  const dynamicFullWidthLine = editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPadding * 2 - tableResizerWidth;
+  const dynamicFullWidthLine = editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPadding * 2;
   const guides = [dynamicFullWidthLine - lengthOffset];
   if (!exclude.breakoutPoints) {
     guides.unshift(akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset);
@@ -20,17 +19,17 @@ export const calculateDefaultTablePreserveSnappings = (lengthOffset = 0, editorC
   return guides;
 };
 export const defaultSnappingWidths = calculateDefaultSnappings();
-
+export const PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET = 0;
 // FF TablePreserve for defaultSnappingWidths
-export const defaultTablePreserveSnappingWidths = (editorContainerWidth, exclude = {
+export const defaultTablePreserveSnappingWidths = (lengthOffset, editorContainerWidth, exclude = {
   innerGuidelines: false,
   breakoutPoints: false
 }) => {
-  return editorContainerWidth - akEditorGutterPadding * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth, exclude);
+  return editorContainerWidth - akEditorGutterPadding * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(lengthOffset, editorContainerWidth, exclude); // lengthOffset was hardcoded 0 here, created PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
 };
 
 /**
- * Returns keys of guidelines that are closest to the table and withthin the snapGap
+ * Returns keys of guidelines that are closest to the table and within the snapGap
  */
 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);