@atlaskit/editor-plugin-table 7.16.11 → 7.16.13

package/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  rules: {
-    '@typescript-eslint/no-duplicate-imports': 'error',
-  },
+	rules: {
+		'@typescript-eslint/no-duplicate-imports': 'error',
+	},
 };

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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
+
+- [#105716](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/105716)
+  [`f25ac7b36499`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f25ac7b36499) -
+  [ux] Table - Change alignment from left to center when page changes from full-width to fixed
+
 ## 7.16.11
 
 ### Patch Changes

package/dist/cjs/commands/misc.js

@@ -275,9 +275,9 @@ var moveCursorBackward = exports.moveCursorBackward = function moveCursorBackwar
   }
 
   /*
-    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/cjs/nodeviews/TableCell.js

@@ -17,8 +17,8 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var DEFAULT_COL_SPAN = 1;
 var DEFAULT_ROW_SPAN = 1;
-var TableCell = exports.default = /*#__PURE__*/function (_ref) {
-  (0, _inherits2.default)(TableCell, _ref);
+var TableCell = exports.default = /*#__PURE__*/function (_TableNodeView) {
+  (0, _inherits2.default)(TableCell, _TableNodeView);
   var _super = _createSuper(TableCell);
   function TableCell(node, view, getPos, eventDispatcher) {
     (0, _classCallCheck2.default)(this, TableCell);
@@ -53,20 +53,20 @@ var TableCell = exports.default = /*#__PURE__*/function (_ref) {
       }
 
       // added + changed attributes
-      var addedAttrs = Object.entries(nextAttrs).filter(function (_ref2) {
-        var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
-          key = _ref3[0],
-          value = _ref3[1];
+      var addedAttrs = Object.entries(nextAttrs).filter(function (_ref) {
+        var _ref2 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_ref4, 2),
-            key = _ref5[0],
-            value = _ref5[1];
+        addedAttrs.forEach(function (_ref3) {
+          var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+            key = _ref4[0],
+            value = _ref4[1];
           return _this.dom.setAttribute(key, value || '');
         });
         removedAttrs.forEach(function (key) {

package/dist/cjs/nodeviews/TableContainer.js

@@ -12,6 +12,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _nodeWidth = require("@atlaskit/editor-common/node-width");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _misc = require("../commands/misc");
 var _utils = require("../pm-plugins/table-resizing/utils");
 var _types = require("../types");
 var _TableResizer = require("./TableResizer");
@@ -45,8 +46,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 = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['table']),
+    tableState = _useSharedPluginState.tableState;
+  (0, _react.useEffect)(function () {
+    if (tableState && editorView && getPos) {
+      var wasFullWidthModeEnabled = tableState.wasFullWidthModeEnabled,
+        isFullWidthModeEnabled = tableState.isFullWidthModeEnabled;
+      if (wasFullWidthModeEnabled && !isFullWidthModeEnabled && node.attrs.width > _editorSharedStyles.akEditorDefaultLayoutWidth) {
+        var pos = getPos && getPos();
+        if (typeof pos !== 'number') {
+          return;
+        }
+        var tr = (0, _misc.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 = (0, _react.useMemo)(function () {
     return alignment === 'align-start' ? leftAlignStyle : centerAlignStyle;
   }, [alignment]);
@@ -62,7 +88,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.default.createElement("div", {
       "data-testid": "table-alignment-container",
@@ -75,7 +104,10 @@ var AlignmentTableContainerWrapper = function AlignmentTableContainerWrapper(_re
     }, children);
   }
   return /*#__PURE__*/_react.default.createElement(AlignmentTableContainer, {
-    node: node
+    node: node,
+    pluginInjectionApi: pluginInjectionApi,
+    getPos: getPos,
+    editorView: editorView
   }, children);
 };
 var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_react.default.memo(function (_ref4) {
@@ -99,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.
@@ -152,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 _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorViewMode']),
-    editorViewModeState = _useSharedPluginState.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;
@@ -176,6 +228,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     attachAnalyticsEvent: attachAnalyticsEvent,
     displayGapCursor: displayGapCursor,
     isTableAlignmentEnabled: isTableAlignmentEnabled,
+    isFullWidthModeEnabled: isFullWidthModeEnabled,
     isTableScalingEnabled: isTableScalingEnabled,
     isWholeTableInDanger: isWholeTableInDanger,
     pluginInjectionApi: pluginInjectionApi,
@@ -185,7 +238,10 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
   var isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   return /*#__PURE__*/_react.default.createElement(AlignmentTableContainerWrapper, {
     isTableAlignmentEnabled: isTableAlignmentEnabled,
-    node: node
+    node: node,
+    pluginInjectionApi: pluginInjectionApi,
+    getPos: getPos,
+    editorView: editorView
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       width: tableWidthRef.current,
@@ -211,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");
@@ -50,13 +51,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';
   }
@@ -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/nodeviews/TableRow.js

@@ -32,8 +32,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 = exports.default = /*#__PURE__*/function (_ref) {
-  (0, _inherits2.default)(TableRow, _ref);
+var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
+  (0, _inherits2.default)(TableRow, _TableNodeView);
   var _super = _createSuper(TableRow);
   function TableRow(node, view, getPos, eventDispatcher) {
     var _this;
@@ -330,27 +330,27 @@ var TableRow = exports.default = /*#__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/cjs/pm-plugins/table-resizing/plugin.js

@@ -46,9 +46,9 @@ function createPlugin(dispatch, _ref, getEditorContainerWidth, getEditorFeatureF
           var isColumnKeyboardResizeStarted = false;
           if ((0, _platformFeatureFlags.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 = (0, _pluginFactory.getPluginState)(state),
               isKeyboardResize = _getTablePluginState.isKeyboardResize;
             if (isKeyboardResize) {

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

@@ -96,10 +96,10 @@ var updateColgroup = exports.updateColgroup = function updateColgroup(state, tab
   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 = (0, _misc.getTableScalingPercent)(tableNode, tableRef);
     state.cols.filter(function (column) {

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

@@ -169,9 +169,9 @@ var scaleTable = exports.scaleTable = function scaleTable(tableRef, options, dom
         // 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/cjs/ui/FloatingContextualMenu/styles.js

@@ -29,5 +29,5 @@ var elementBeforeIconStyles = exports.elementBeforeIconStyles = (0, _react.css)(
 var tablePopupStyles = exports.tablePopupStyles = function tablePopupStyles(isDragAndDropEnabled
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 ) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), isDragAndDropEnabled ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.CONTEXTUAL_MENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"), _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.CONTEXTUAL_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), isDragAndDropEnabled ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.CONTEXTUAL_MENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"), _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
 };

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

@@ -25,7 +25,7 @@ var elementBeforeIconStyles = exports.elementBeforeIconStyles = (0, _react.css)(
 });
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-var dragMenuBackgroundColorStyles = exports.dragMenuBackgroundColorStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), _consts.dragMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.DRAG_SUBMENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
+var dragMenuBackgroundColorStyles = exports.dragMenuBackgroundColorStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), _types.TableCssClassName.DRAG_SUBMENU, "var(--ds-border-radius, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N60A, ", 0 0 1px ").concat(_colors.N60A), ")"), _consts.dragMenuDropdownWidth, "var(--ds-space-100, 8px)", _types.TableCssClassName.DRAG_SUBMENU_ICON, _adfSchema.tableBackgroundBorderColor, "var(--ds-border-radius, 3px)", "var(--ds-space-050, 4px)", "var(--ds-icon, ".concat(_colors.N90, ")"));
 var toggleStyles = exports.toggleStyles = (0, _react.css)({
   display: 'flex',
   "input[type='checkbox']": {