@atlaskit/editor-plugin-table 7.16.11 → 7.16.13

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/merged-cells.js

@@ -213,9 +213,9 @@ export const checkEdgeHasMergedCells = (indexes, tableMap, direction) => {
   let isBottomSideHaveMergedCells = false;
 
   /**
-   * this is to check if the cell position from last focused table is overflow. since if you selection from a cell in 6th row and 7th column cell in a 7x8 table to 3x3 table, the cell position will be overflow because new table dont have this cell at all.
-   TODO: ED-22335 this should better called only when hover over the drag handle.
-  */
+    * this is to check if the cell position from last focused table is overflow. since if you selection from a cell in 6th row and 7th column cell in a 7x8 table to 3x3 table, the cell position will be overflow because new table dont have this cell at all.
+    TODO: ED-22335 this should better called only when hover over the drag handle.
+   */
   let isOldMinIndex = !map[minIndex - 1] || !map[minIndex];
   let isOldMaxIndex = !map[maxIndex + 1] || !map[maxIndex];
   if (minIndex > 0 && !isOldMinIndex) {

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

@@ -268,9 +268,9 @@ export var moveCursorBackward = function moveCursorBackward(state, dispatch) {
   }
 
   /*
-    ensure we're just at a top level paragraph
-    otherwise, perform regular backspace behaviour
-   */
+     ensure we're just at a top level paragraph
+     otherwise, perform regular backspace behaviour
+    */
   var grandparent = $cursor.node($cursor.depth - 1);
   if ($cursor.parent.type !== state.schema.nodes.paragraph || grandparent && grandparent.type !== state.schema.nodes.doc) {
     return false;

package/dist/esm/nodeviews/TableCell.js

@@ -10,8 +10,8 @@ import { getCellAttrs, getCellDomAttrs } from '@atlaskit/adf-schema';
 import TableNodeView from './TableNodeViewBase';
 var DEFAULT_COL_SPAN = 1;
 var DEFAULT_ROW_SPAN = 1;
-var TableCell = /*#__PURE__*/function (_ref) {
-  _inherits(TableCell, _ref);
+var TableCell = /*#__PURE__*/function (_TableNodeView) {
+  _inherits(TableCell, _TableNodeView);
   var _super = _createSuper(TableCell);
   function TableCell(node, view, getPos, eventDispatcher) {
     _classCallCheck(this, TableCell);
@@ -46,20 +46,20 @@ var TableCell = /*#__PURE__*/function (_ref) {
       }
 
       // added + changed attributes
-      var addedAttrs = Object.entries(nextAttrs).filter(function (_ref2) {
-        var _ref3 = _slicedToArray(_ref2, 2),
-          key = _ref3[0],
-          value = _ref3[1];
+      var addedAttrs = Object.entries(nextAttrs).filter(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+          key = _ref2[0],
+          value = _ref2[1];
         return attrs[key] !== value;
       });
       var removedAttrs = Object.keys(attrs).filter(function (key) {
         return !nextAttrs.hasOwnProperty(key);
       });
       if (addedAttrs.length || removedAttrs.length) {
-        addedAttrs.forEach(function (_ref4) {
-          var _ref5 = _slicedToArray(_ref4, 2),
-            key = _ref5[0],
-            value = _ref5[1];
+        addedAttrs.forEach(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 2),
+            key = _ref4[0],
+            value = _ref4[1];
           return _this.dom.setAttribute(key, value || '');
         });
         removedAttrs.forEach(function (key) {

package/dist/esm/nodeviews/TableContainer.js

@@ -1,9 +1,10 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 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';
 import { TableResizer } from './TableResizer';
@@ -35,8 +36,33 @@ var leftAlignStyle = {
 };
 var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
   var node = _ref2.node,
-    children = _ref2.children;
+    children = _ref2.children,
+    pluginInjectionApi = _ref2.pluginInjectionApi,
+    getPos = _ref2.getPos,
+    editorView = _ref2.editorView;
   var alignment = node.attrs.layout;
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['table']),
+    tableState = _useSharedPluginState.tableState;
+  useEffect(function () {
+    if (tableState && editorView && getPos) {
+      var wasFullWidthModeEnabled = tableState.wasFullWidthModeEnabled,
+        isFullWidthModeEnabled = tableState.isFullWidthModeEnabled;
+      if (wasFullWidthModeEnabled && !isFullWidthModeEnabled && node.attrs.width > akEditorDefaultLayoutWidth) {
+        var pos = getPos && getPos();
+        if (typeof pos !== 'number') {
+          return;
+        }
+        var tr = setTableAlignmentWithTableContentWithPos('center', {
+          pos: pos,
+          node: node
+        })(editorView.state);
+        if (tr) {
+          editorView.dispatch(tr);
+        }
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editorView, tableState, node]);
   var style = useMemo(function () {
     return alignment === 'align-start' ? leftAlignStyle : centerAlignStyle;
   }, [alignment]);
@@ -52,7 +78,10 @@ var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
 var AlignmentTableContainerWrapper = function AlignmentTableContainerWrapper(_ref3) {
   var isTableAlignmentEnabled = _ref3.isTableAlignmentEnabled,
     node = _ref3.node,
-    children = _ref3.children;
+    children = _ref3.children,
+    pluginInjectionApi = _ref3.pluginInjectionApi,
+    getPos = _ref3.getPos,
+    editorView = _ref3.editorView;
   if (!isTableAlignmentEnabled) {
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "table-alignment-container",
@@ -65,7 +94,10 @@ var AlignmentTableContainerWrapper = function AlignmentTableContainerWrapper(_re
     }, children);
   }
   return /*#__PURE__*/React.createElement(AlignmentTableContainer, {
-    node: node
+    node: node,
+    pluginInjectionApi: pluginInjectionApi,
+    getPos: getPos,
+    editorView: editorView
   }, children);
 };
 export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
@@ -89,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.
@@ -142,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 _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['editorViewMode']),
-    editorViewModeState = _useSharedPluginState.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;
@@ -166,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,
@@ -175,7 +228,10 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
   var isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   return /*#__PURE__*/React.createElement(AlignmentTableContainerWrapper, {
     isTableAlignmentEnabled: isTableAlignmentEnabled,
-    node: node
+    node: node,
+    pluginInjectionApi: pluginInjectionApi,
+    getPos: getPos,
+    editorView: editorView
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       width: tableWidthRef.current,
@@ -201,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 = {
@@ -40,13 +41,13 @@ var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
   var _tableRef$clientHeigh;
   var tableHeight = (_tableRef$clientHeigh = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight) !== null && _tableRef$clientHeigh !== void 0 ? _tableRef$clientHeigh : 0;
   /*
-    - One row table height (minimum possible table height) ~ 45px
-    - Two row table height ~ 90px
-    - Three row table height ~ 134px
-     In the if below we need to use:
-    - > 46 because the height of the table can be a float number like 45.44.
-    - < 96 is the height of large resize handle.
-  */
+     - One row table height (minimum possible table height) ~ 45px
+     - Two row table height ~ 90px
+     - Three row table height ~ 134px
+      In the if below we need to use:
+     - > 46 because the height of the table can be a float number like 45.44.
+     - < 96 is the height of large resize handle.
+   */
   if (tableHeight >= 96) {
     return 'large';
   }
@@ -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/nodeviews/TableRow.js

@@ -25,8 +25,8 @@ var HEADER_ROW_SCROLL_THROTTLE_TIMEOUT = 200;
 // timeout for resetting the scroll class - if it’s too long then users won’t be able to click on the header cells,
 // if too short it would trigger too many dom updates.
 var HEADER_ROW_SCROLL_RESET_DEBOUNCE_TIMEOUT = 400;
-var TableRow = /*#__PURE__*/function (_ref) {
-  _inherits(TableRow, _ref);
+var TableRow = /*#__PURE__*/function (_TableNodeView) {
+  _inherits(TableRow, _TableNodeView);
   var _super = _createSuper(TableRow);
   function TableRow(node, view, getPos, eventDispatcher) {
     var _this;
@@ -323,27 +323,27 @@ var TableRow = /*#__PURE__*/function (_ref) {
     value: function isHeaderSticky() {
       var _sentinelTop$rootBoun;
       /*
-      # Overview
-        I'm going to list all the view states associated with the sentinels and when they should trigger sticky headers.
-        The format of the states are;    {top|bottom}:{in|above|below}
-        ie sentinel:view-position -- both "above" and "below" are equal to out of the viewport
-         For example; "top:in" means top sentinel is within the viewport. "bottom:above" means the bottom sentinel is
-        above and out of the viewport
-         This will hopefully simplify things and make it easier to determine when sticky should/shouldn't be triggered.
-       # States
-        top:in / bottom:in - NOT sticky
-        top:in / bottom:above - NOT sticky - NOTE: This is an inversion clause
-        top:in / bottom:below - NOT sticky
-        top:above / bottom:in - STICKY
-        top:above / bottom:above - NOT sticky
-        top:above / bottom:below - STICKY
-        top:below / bottom:in - NOT sticky - NOTE: This is an inversion clause
-        top:below / bottom:above - NOT sticky - NOTE: This is an inversion clause
-        top:below / bottom:below - NOT sticky
-       # Summary
-        The only time the header should be sticky is when the top sentinel is above the view and the bottom sentinel
-        is in or below it.
-      */
+        # Overview
+          I'm going to list all the view states associated with the sentinels and when they should trigger sticky headers.
+          The format of the states are;    {top|bottom}:{in|above|below}
+          ie sentinel:view-position -- both "above" and "below" are equal to out of the viewport
+           For example; "top:in" means top sentinel is within the viewport. "bottom:above" means the bottom sentinel is
+          above and out of the viewport
+           This will hopefully simplify things and make it easier to determine when sticky should/shouldn't be triggered.
+         # States
+          top:in / bottom:in - NOT sticky
+          top:in / bottom:above - NOT sticky - NOTE: This is an inversion clause
+          top:in / bottom:below - NOT sticky
+          top:above / bottom:in - STICKY
+          top:above / bottom:above - NOT sticky
+          top:above / bottom:below - STICKY
+          top:below / bottom:in - NOT sticky - NOTE: This is an inversion clause
+          top:below / bottom:above - NOT sticky - NOTE: This is an inversion clause
+          top:below / bottom:below - NOT sticky
+         # Summary
+          The only time the header should be sticky is when the top sentinel is above the view and the bottom sentinel
+          is in or below it.
+        */
 
       var _this$sentinelData = this.sentinelData,
         sentinelTop = _this$sentinelData.top,

package/dist/esm/pm-plugins/table-resizing/plugin.js

@@ -39,9 +39,9 @@ export function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorF
           var isColumnKeyboardResizeStarted = false;
           if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
             /*
-              We need to start listening mouse events if column resize started from keyboard.
-              This will allow continue resizing via mouse
-            */
+                    We need to start listening mouse events if column resize started from keyboard.
+                    This will allow continue resizing via mouse
+                  */
             var _getTablePluginState = getTablePluginState(state),
               isKeyboardResize = _getTablePluginState.isKeyboardResize;
             if (isKeyboardResize) {

package/dist/esm/pm-plugins/table-resizing/utils/resize-state.js

@@ -89,10 +89,10 @@ export var updateColgroup = function updateColgroup(state, tableRef, tableNode,
   var cols = tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelectorAll('col');
   var columnsCount = cols === null || cols === void 0 ? void 0 : cols.length;
   /**
-     updateColgroup will update whole table scale when click the column resize handle, this behavior will affect when table overflowed, when now resize handle been dragged and extend to make table overflowed, table will show overflow. This need to be confirmed because it conflict with how isTableScalingEnabled work.
-     We don't want to scale the table when resizing columns, only when viewpoint shrinks the table.
-     We need to remove !isColumnResizing if we handled auto scale table when mouseUp event.
-     * */
+      updateColgroup will update whole table scale when click the column resize handle, this behavior will affect when table overflowed, when now resize handle been dragged and extend to make table overflowed, table will show overflow. This need to be confirmed because it conflict with how isTableScalingEnabled work.
+      We don't want to scale the table when resizing columns, only when viewpoint shrinks the table.
+      We need to remove !isColumnResizing if we handled auto scale table when mouseUp event.
+      * */
   if (isTableScalingEnabled && tableNode) {
     var scalePercent = getTableScalingPercent(tableNode, tableRef);
     state.cols.filter(function (column) {

package/dist/esm/pm-plugins/table-resizing/utils/scale-table.js

@@ -160,9 +160,9 @@ export var scaleTable = function scaleTable(tableRef, options, domAtPos) {
         // We need to do this check to reduce the number of race conditions when working with tables.
         // This metadata is been used in the sendTransaction function in the Collab plugin
         /* Added !layoutChanged check here to solve unnecessary scroll bar after publish when click on breakout button multiple times and publish
-           scaleTable is only called once every time a breakout button is clicked, so it is safe not to add the meta 'scaleTable' to the tr.
-           Leaving the tr.setMeta('scaleTable', true) here for race conditions that we aren't aware of.
-         */
+               scaleTable is only called once every time a breakout button is clicked, so it is safe not to add the meta 'scaleTable' to the tr.
+               Leaving the tr.setMeta('scaleTable', true) here for race conditions that we aren't aware of.
+             */
         !layoutChanged && tr.setMeta('scaleTable', true);
         return tr;
       }

package/dist/esm/ui/FloatingContextualMenu/styles.js

@@ -22,5 +22,5 @@ export var elementBeforeIconStyles = css({
 export var tablePopupStyles = function tablePopupStyles(isDragAndDropEnabled
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 ) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 20px;\n      height: 20px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 20px;\n      color: ", ";\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"), ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 20px;\n\t\t\theight: 20px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 20px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), ClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.CONTEXTUAL_MENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"), ClassName.CONTEXTUAL_MENU_ICON_SMALL, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
 };

package/dist/esm/ui/FloatingDragMenu/styles.js

@@ -18,7 +18,7 @@ export var elementBeforeIconStyles = css({
 });
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-export var dragMenuBackgroundColorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    border-radius: ", ";\n    background: ", ";\n    box-shadow: ", ";\n    display: block;\n    position: absolute;\n    top: 0;\n    left: ", "px;\n    padding: ", ";\n\n    > div {\n      padding: 0;\n    }\n  }\n\n  .", " {\n    display: flex;\n\n    &::before {\n      content: '';\n      display: block;\n      border: 1px solid ", ";\n      border-radius: ", ";\n      width: 14px;\n      height: 14px;\n    }\n\n    &::after {\n      content: '\u203A';\n      margin-left: ", ";\n      line-height: 14px;\n      color: ", ";\n    }\n  }\n"])), ClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
+export var dragMenuBackgroundColorStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t.", " {\n\t\tborder-radius: ", ";\n\t\tbackground: ", ";\n\t\tbox-shadow: ", ";\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: ", "px;\n\t\tpadding: ", ";\n\n\t\t> div {\n\t\t\tpadding: 0;\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\n\t\t&::before {\n\t\t\tcontent: '';\n\t\t\tdisplay: block;\n\t\t\tborder: 1px solid ", ";\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 14px;\n\t\t\theight: 14px;\n\t\t}\n\n\t\t&::after {\n\t\t\tcontent: '\u203A';\n\t\t\tmargin-left: ", ";\n\t\t\tline-height: 14px;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), ClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N60A, ", 0 0 1px ").concat(N60A), ")"), dragMenuDropdownWidth, "var(--ds-space-100, 8px)", ClassName.DRAG_SUBMENU_ICON, tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(N90, ")"));
 export var toggleStyles = css({
   display: 'flex',
   "input[type='checkbox']": {