@atlaskit/editor-plugin-table 7.16.12 → 7.16.14

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

package/dist/esm/commands/misc.js

@@ -3,6 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import isEqual from 'lodash/isEqual';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { closestElement, isParagraph, isTextSelection, mapSlice } from '@atlaskit/editor-common/utils';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
@@ -590,6 +591,13 @@ export var setTableAlignment = function setTableAlignment(newAlignment) {
     var nextTableAttrs = _objectSpread(_objectSpread({}, tableObject.node.attrs), {}, {
       layout: newAlignment
     });
+
+    // table uses old breakout values in layout attribute to determine width
+    // but that information is lost when alignment changes, so we need to ensure we retain that info
+    if (!tableObject.node.attrs.width) {
+      var tableWidth = getTableContainerWidth(tableObject.node);
+      nextTableAttrs.width = tableWidth;
+    }
     tr.setNodeMarkup(tableObject.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
     return tr;
   };
@@ -597,9 +605,17 @@ export var setTableAlignment = function setTableAlignment(newAlignment) {
 export var setTableAlignmentWithTableContentWithPos = function setTableAlignmentWithTableContentWithPos(newAlignment, tableNodeWithPos) {
   return function (_ref3) {
     var tr = _ref3.tr;
-    var nextTableAttrs = _objectSpread(_objectSpread({}, tableNodeWithPos.node.attrs), {}, {
+    var table = tableNodeWithPos.node;
+    var nextTableAttrs = _objectSpread(_objectSpread({}, table.attrs), {}, {
       layout: newAlignment
     });
+
+    // table uses old breakout values in layout attribute to determine width
+    // but that information is lost when alignment changes, so we need to ensure we retain that info
+    if (!table.attrs.width) {
+      var tableWidth = getTableContainerWidth(table);
+      nextTableAttrs.width = tableWidth;
+    }
     tr.setNodeMarkup(tableNodeWithPos.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
     return tr;
   };

package/dist/esm/nodeviews/TableContainer.js

@@ -3,7 +3,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';
@@ -121,6 +121,10 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     _useState2 = _slicedToArray(_useState, 2),
     resizing = _useState2[0],
     setIsResizing = _useState2[1];
+  var _useSharedPluginState2 = useSharedPluginState(pluginInjectionApi, ['table']),
+    tableState = _useSharedPluginState2.tableState;
+  var _ref5 = tableState,
+    isFullWidthModeEnabled = _ref5.isFullWidthModeEnabled;
   var updateContainerHeight = useCallback(function (height) {
     var _containerRef$current;
     // current StickyHeader State is not stable to be fetch.
@@ -174,11 +178,27 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     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 = getTableContainerWidth(node);
-  var _useSharedPluginState2 = useSharedPluginState(pluginInjectionApi, ['editorViewMode']),
-    editorViewModeState = _useSharedPluginState2.editorViewModeState;
-
-  // 76 is currently an accepted padding value considering the spacing for resizer handle
-  var responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide / 2 : containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
+  var _useSharedPluginState3 = 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 - 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;
+  }
   var width = Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {
     tableWidthRef.current = width;
@@ -198,6 +218,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     attachAnalyticsEvent: attachAnalyticsEvent,
     displayGapCursor: displayGapCursor,
     isTableAlignmentEnabled: isTableAlignmentEnabled,
+    isFullWidthModeEnabled: isFullWidthModeEnabled,
     isTableScalingEnabled: isTableScalingEnabled,
     isWholeTableInDanger: isWholeTableInDanger,
     pluginInjectionApi: pluginInjectionApi,
@@ -236,24 +257,24 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     node: node
   }, children))));
 });
-export var 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;
+export var 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.createElement(ResizableTableContainer
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

package/dist/esm/nodeviews/TableResizer.js

@@ -13,6 +13,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';
@@ -22,8 +23,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';
 var RESIZE_STEP_VALUE = 10;
 var FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
 var handles = {
@@ -68,10 +69,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 = 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 * 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.
+  }
+  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 + 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 var TableResizer = function TableResizer(_ref) {
@@ -94,7 +111,8 @@ export var TableResizer = function TableResizer(_ref) {
     isTableScalingEnabled = _ref.isTableScalingEnabled,
     isTableAlignmentEnabled = _ref.isTableAlignmentEnabled,
     isWholeTableInDanger = _ref.isWholeTableInDanger,
-    pluginInjectionApi = _ref.pluginInjectionApi;
+    pluginInjectionApi = _ref.pluginInjectionApi,
+    isFullWidthModeEnabled = _ref.isFullWidthModeEnabled;
   var currentGap = useRef(0);
   // track resizing state - use ref over state to avoid re-render
   var isResizing = useRef(false);
@@ -131,15 +149,17 @@ export var TableResizer = function TableResizer(_ref) {
       keys = _ref3.keys;
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth);
+      var 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]);
   var guidelineSnaps = useMemo(function () {
     return snappingEnabled ? {
-      x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
+      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]);
+  }, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, lineLength, isFullWidthModeEnabled]);
   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
@@ -189,12 +209,12 @@ export var TableResizer = function TableResizer(_ref) {
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
     dispatch(tr);
-    var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth);
+    var 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]);
   var handleResize = useCallback(function (originalState, delta) {
     var _node$attrs$localId, _node$attrs;
     countFrames();
@@ -214,14 +234,15 @@ export var TableResizer = function TableResizer(_ref) {
       start: pos + 1,
       parentWidth: newWidth
     }, editorView.domAtPos.bind(editorView), isTableScalingEnabled);
-    var closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(containerWidth, excludeGuidelineConfig) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(containerWidth, excludeGuidelineConfig) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
+    var editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPadding : containerWidth;
+    var 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
     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, excludeGuidelineConfig).filter(function (guideline) {
+    var fullWidthGuideline = defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig).filter(function (guideline) {
       return guideline.isFullWidth;
     })[0];
     var isFullWidthGuidelineActive = closestSnap.keys.includes(fullWidthGuideline.key);
@@ -231,7 +252,7 @@ export var TableResizer = function TableResizer(_ref) {
     }, updateWidthToWidest(_defineProperty({}, currentTableNodeLocalId, shouldUpdateWidthToWidest)))(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]);
   var scheduleResize = useMemo(function () {
     return rafSchd(handleResize);
   }, [handleResize]);

package/dist/esm/toolbar.js

@@ -9,6 +9,7 @@ import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/editor-common/keymaps';
 import commonMessages, { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { cellBackgroundColorPalette, DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
 import { closestElement, getChildrenInfo as _getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/editor-common/utils';
 import { findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
@@ -652,7 +653,8 @@ export var getSelectedAlignmentIcon = function getSelectedAlignmentIcon(alignmen
 };
 export var isLayoutOptionDisabled = function isLayoutOptionDisabled(selectedNode, getEditorContainerWidth) {
   var lineLength = getEditorContainerWidth().lineLength;
-  if (selectedNode && lineLength && selectedNode.attrs.width > lineLength) {
+  var tableWidth = getTableContainerWidth(selectedNode);
+  if (selectedNode && lineLength && tableWidth > lineLength) {
     return true;
   }
   return false;

package/dist/esm/utils/guidelines.js

@@ -5,11 +5,14 @@ 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 var defaultGuidelines = createFixedGuidelinesFromLengths([0].concat(_toConsumableArray(calculateDefaultSnappings(-1))));
-export var defaultGuidelinesForPreserveTable = function defaultGuidelinesForPreserveTable(editorContainerWidth) {
-  var exclude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+export var PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET = -1;
+export var defaultGuidelinesForPreserveTable = function defaultGuidelinesForPreserveTable(lengthOffset, editorContainerWidth) {
+  var exclude = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
     innerGuidelines: false,
     breakoutPoints: false
   };
-  var lengths = calculateDefaultTablePreserveSnappings(-1, editorContainerWidth, exclude);
+  var lengths = calculateDefaultTablePreserveSnappings(lengthOffset,
+  // was hardcoded to -1 here, created PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET instead.
+  editorContainerWidth, exclude);
   return createFixedGuidelinesFromLengths(lengths, undefined, true);
 };

package/dist/esm/utils/snapping.js

@@ -1,7 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { isVerticalPosition } from '@atlaskit/editor-common/guideline';
 import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
-import { tableResizerWidth } from '../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) {
@@ -20,7 +19,7 @@ export var calculateDefaultTablePreserveSnappings = function calculateDefaultTab
     innerGuidelines: false,
     breakoutPoints: false
   };
-  var dynamicFullWidthLine = editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPadding * 2 - tableResizerWidth;
+  var dynamicFullWidthLine = editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPadding * 2;
   var guides = [dynamicFullWidthLine - lengthOffset];
   if (!exclude.breakoutPoints) {
     guides.unshift(akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset);
@@ -31,18 +30,18 @@ export var calculateDefaultTablePreserveSnappings = function calculateDefaultTab
   return guides;
 };
 export var defaultSnappingWidths = calculateDefaultSnappings();
-
+export var PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET = 0;
 // FF TablePreserve for defaultSnappingWidths
-export var defaultTablePreserveSnappingWidths = function defaultTablePreserveSnappingWidths(editorContainerWidth) {
-  var exclude = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+export var defaultTablePreserveSnappingWidths = function defaultTablePreserveSnappingWidths(lengthOffset, editorContainerWidth) {
+  var exclude = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
     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 var findClosestSnap = function findClosestSnap(currentWidth, snapWidths, guidelines) {
   var snapGap = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;

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

@@ -22,10 +22,11 @@ interface TableResizerProps {
     isTableScalingEnabled?: boolean;
     isTableAlignmentEnabled?: boolean;
     isWholeTableInDanger?: boolean;
+    isFullWidthModeEnabled?: boolean;
 }
 export interface TableResizerImprovementProps extends TableResizerProps {
     onResizeStop?: () => void;
     onResizeStart?: () => void;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, lineLength, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isTableAlignmentEnabled, isWholeTableInDanger, pluginInjectionApi, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, lineLength, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isTableAlignmentEnabled, isWholeTableInDanger, pluginInjectionApi, isFullWidthModeEnabled, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
 export {};

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

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

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

@@ -6,9 +6,10 @@ export type GuidelineExcludeConfig = {
 };
 export declare const calculateDefaultTablePreserveSnappings: (lengthOffset?: number, editorContainerWith?: number, exclude?: GuidelineExcludeConfig) => number[];
 export declare const defaultSnappingWidths: number[];
-export declare const defaultTablePreserveSnappingWidths: (editorContainerWidth: number, exclude?: GuidelineExcludeConfig) => number[];
+export declare const PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET = 0;
+export declare const defaultTablePreserveSnappingWidths: (lengthOffset: number, editorContainerWidth: number, exclude?: GuidelineExcludeConfig) => number[];
 /**
- * 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 declare const findClosestSnap: (currentWidth: number, snapWidths: number[], guidelines: GuidelineConfig[], snapGap?: number, tolerance?: number) => {
     gap: number;

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

@@ -22,10 +22,11 @@ interface TableResizerProps {
     isTableScalingEnabled?: boolean;
     isTableAlignmentEnabled?: boolean;
     isWholeTableInDanger?: boolean;
+    isFullWidthModeEnabled?: boolean;
 }
 export interface TableResizerImprovementProps extends TableResizerProps {
     onResizeStop?: () => void;
     onResizeStart?: () => void;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, lineLength, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isTableAlignmentEnabled, isWholeTableInDanger, pluginInjectionApi, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, lineLength, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isTableAlignmentEnabled, isWholeTableInDanger, pluginInjectionApi, isFullWidthModeEnabled, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
 export {};

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

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

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

@@ -6,9 +6,10 @@ export type GuidelineExcludeConfig = {
 };
 export declare const calculateDefaultTablePreserveSnappings: (lengthOffset?: number, editorContainerWith?: number, exclude?: GuidelineExcludeConfig) => number[];
 export declare const defaultSnappingWidths: number[];
-export declare const defaultTablePreserveSnappingWidths: (editorContainerWidth: number, exclude?: GuidelineExcludeConfig) => number[];
+export declare const PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET = 0;
+export declare const defaultTablePreserveSnappingWidths: (lengthOffset: number, editorContainerWidth: number, exclude?: GuidelineExcludeConfig) => number[];
 /**
- * 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 declare const findClosestSnap: (currentWidth: number, snapWidths: number[], guidelines: GuidelineConfig[], snapGap?: number, tolerance?: number) => {
     gap: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.16.12",
+  "version": "7.16.14",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/adf-schema": "^36.10.7",
     "@atlaskit/button": "^17.17.0",
     "@atlaskit/custom-steps": "^0.2.0",
-    "@atlaskit/editor-common": "^81.1.0",
+    "@atlaskit/editor-common": "^81.2.0",
     "@atlaskit/editor-palette": "1.6.0",
     "@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
     "@atlaskit/editor-plugin-analytics": "^1.2.0",

package/src/commands/misc.ts

@@ -1,6 +1,7 @@
 import isEqual from 'lodash/isEqual';
 
-import type { CellAttributes, TableLayout } from '@atlaskit/adf-schema';
+import type { CellAttributes, TableAttributes, TableLayout } from '@atlaskit/adf-schema';
+import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
 import {
 	closestElement,
@@ -735,7 +736,14 @@ export const setTableAlignment =
 		const nextTableAttrs = {
 			...tableObject.node.attrs,
 			layout: newAlignment,
-		};
+		} as TableAttributes;
+
+		// table uses old breakout values in layout attribute to determine width
+		// but that information is lost when alignment changes, so we need to ensure we retain that info
+		if (!tableObject.node.attrs.width) {
+			const tableWidth = getTableContainerWidth(tableObject.node);
+			nextTableAttrs.width = tableWidth;
+		}
 
 		tr.setNodeMarkup(tableObject.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
 
@@ -745,10 +753,18 @@ export const setTableAlignment =
 export const setTableAlignmentWithTableContentWithPos =
 	(newAlignment: TableLayout, tableNodeWithPos: NodeWithPos): EditorCommand =>
 	({ tr }) => {
+		const table = tableNodeWithPos.node;
 		const nextTableAttrs = {
-			...tableNodeWithPos.node.attrs,
+			...table.attrs,
 			layout: newAlignment,
-		};
+		} as TableAttributes;
+
+		// table uses old breakout values in layout attribute to determine width
+		// but that information is lost when alignment changes, so we need to ensure we retain that info
+		if (!table.attrs.width) {
+			const tableWidth = getTableContainerWidth(table);
+			nextTableAttrs.width = tableWidth;
+		}
 
 		tr.setNodeMarkup(tableNodeWithPos.pos, undefined, nextTableAttrs).setMeta(
 			'scrollIntoView',

package/src/nodeviews/TableContainer.tsx

@@ -13,13 +13,12 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import {
 	akEditorDefaultLayoutWidth,
 	akEditorGutterPadding,
-	akEditorMediaResizeHandlerPaddingWide,
 	akEditorMobileBreakoutPoint,
 } from '@atlaskit/editor-shared-styles';
 
 import { setTableAlignmentWithTableContentWithPos } from '../commands/misc';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
-import type { PluginInjectionAPI } from '../types';
+import type { PluginInjectionAPI, TableSharedState } from '../types';
 import { TableCssClassName as ClassName } from '../types';
 
 import { TableResizer } from './TableResizer';
@@ -185,6 +184,8 @@ export const ResizableTableContainer = React.memo(
 		const containerRef = useRef<HTMLDivElement | null>(null);
 		const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
 		const [resizing, setIsResizing] = useState(false);
+		const { tableState } = useSharedPluginState(pluginInjectionApi, ['table']);
+		const { isFullWidthModeEnabled } = tableState as TableSharedState;
 
 		const updateContainerHeight = useCallback((height: number | 'auto') => {
 			// current StickyHeader State is not stable to be fetch.
@@ -260,11 +261,29 @@ export const ResizableTableContainer = React.memo(
 		const tableWidth = getTableContainerWidth(node);
 		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) {
@@ -286,6 +305,7 @@ export const ResizableTableContainer = React.memo(
 			attachAnalyticsEvent,
 			displayGapCursor,
 			isTableAlignmentEnabled,
+			isFullWidthModeEnabled,
 			isTableScalingEnabled,
 			isWholeTableInDanger,
 			pluginInjectionApi,