@atlaskit/editor-plugin-table 7.5.3 → 7.5.4

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-table
 
+## 7.5.4
+
+### Patch Changes
+
+- [#80391](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80391) [`bf741c7ef44c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bf741c7ef44c) - Make @atlaskit/editor-plugin-table, @atlaskit/date, @atlaskit/editor-plugin-date React 18 compatible.
+- [#79483](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/79483) [`b2a75ed4502b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b2a75ed4502b) - add dynamic widest guideline for table resize
+
 ## 7.5.3
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableContainer.js

@@ -118,7 +118,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
   }, [pluginInjectionApi]);
   var tableWidth = (0, _nodeWidth.getTableContainerWidth)(node);
   // 76 is currently an accepted padding value considering the spacing for resizer handle
-  var responsiveContainerWidth = containerWidth - 76;
+  var responsiveContainerWidth = tablePreserveWidth ? containerWidth - _editorSharedStyles.akEditorGutterPadding * 2 - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide / 2 : containerWidth - _editorSharedStyles.akEditorGutterPadding * 2 - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide;
   var width = Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {
     tableWidthRef.current = width;

package/dist/cjs/nodeviews/TableResizer.js

@@ -145,15 +145,15 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       keys = _ref2.keys;
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      var visibleGuidelines = getVisibleGuidelines(_guidelines.defaultGuidelines, containerWidth);
+      var visibleGuidelines = getVisibleGuidelines(tablePreserveWidth ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth) : _guidelines.defaultGuidelines, containerWidth);
       displayGuideline((0, _guideline.getGuidelinesWithHighlights)(gap, _consts.TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
-  }, [displayGuideline, containerWidth]);
+  }, [tablePreserveWidth, containerWidth, displayGuideline]);
   var guidelineSnaps = (0, _react.useMemo)(function () {
     return snappingEnabled ? {
-      x: _snapping.defaultSnappingWidths
+      x: tablePreserveWidth ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth) : _snapping.defaultSnappingWidths
     } : undefined;
-  }, [snappingEnabled]);
+  }, [snappingEnabled, tablePreserveWidth, containerWidth]);
   (0, _react.useEffect)(function () {
     return function () {
       // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
@@ -183,12 +183,12 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       name: _analytics.TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
     dispatch(tr);
-    var visibleGuidelines = getVisibleGuidelines(_guidelines.defaultGuidelines, containerWidth);
+    var visibleGuidelines = getVisibleGuidelines(tablePreserveWidth ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth) : _guidelines.defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.resizing-table-height-improvement') && onResizeStart) {
       onResizeStart();
     }
-  }, [displayGapCursor, displayGuideline, editorView, startMeasure, onResizeStart, containerWidth]);
+  }, [startMeasure, editorView, displayGapCursor, tablePreserveWidth, containerWidth, displayGuideline, onResizeStart]);
   var handleResize = (0, _react.useCallback)(function (originalState, delta) {
     countFrames();
     var newWidth = originalState.width + delta.width;
@@ -207,10 +207,10 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       start: pos + 1,
       parentWidth: newWidth
     }, editorView.domAtPos.bind(editorView), tablePreserveWidth);
-    updateActiveGuidelines((0, _snapping.findClosestSnap)(newWidth, _snapping.defaultSnappingWidths, _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP, _consts.TABLE_HIGHLIGHT_TOLERANCE));
+    updateActiveGuidelines((0, _snapping.findClosestSnap)(newWidth, tablePreserveWidth ? (0, _snapping.defaultTablePreserveSnappingWidths)(containerWidth) : _snapping.defaultSnappingWidths, tablePreserveWidth ? (0, _guidelines.defaultGuidelinesForPreserveTable)(containerWidth) : _guidelines.defaultGuidelines, _consts.TABLE_HIGHLIGHT_GAP, _consts.TABLE_HIGHLIGHT_TOLERANCE));
     updateWidth(newWidth);
     return newWidth;
-  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames, tablePreserveWidth]);
+  }, [countFrames, tablePreserveWidth, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos]);
   var scheduleResize = (0, _react.useMemo)(function () {
     return (0, _rafSchd.default)(handleResize);
   }, [handleResize]);

package/dist/cjs/ui/ColumnResizeWidget/index.js

@@ -6,8 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ColumnResizeWidget = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
+var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -21,20 +20,20 @@ var ColumnResizeWidget = exports.ColumnResizeWidget = function ColumnResizeWidge
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   if (!includeTooltip) {
-    return (0, _react2.jsx)("div", {
+    return (0, _react.jsx)("div", {
       className: _types.TableCssClassName.RESIZE_HANDLE_DECORATION,
       "data-start-index": startIndex,
       "data-end-index": endIndex
     });
   }
-  return (0, _react2.jsx)(_tooltip.default, {
+  return (0, _react.jsx)(_tooltip.default, {
     content: formatMessage(_messages.tableMessages.adjustColumns),
     hideTooltipOnClick: true,
     hideTooltipOnMouseDown: true,
     position: "mouse",
     mousePosition: "auto-start"
   }, function (tooltipProps) {
-    return (0, _react2.jsx)("div", (0, _extends2.default)({
+    return (0, _react.jsx)("div", (0, _extends2.default)({
       className: _types.TableCssClassName.RESIZE_HANDLE_DECORATION,
       "data-start-index": startIndex,
       "data-end-index": endIndex

package/dist/cjs/utils/guidelines.js

@@ -4,10 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.defaultGuidelines = void 0;
+exports.defaultGuidelinesForPreserveTable = exports.defaultGuidelines = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _guideline = require("@atlaskit/editor-common/guideline");
 var _snapping = require("./snapping");
 // NOTE: We have to take 1 pixel off every length due to the fact that the tbody is 1px smaller then the table container.
 // If we don't do this then the guidelines will not align correctly to the edge of the table
-var defaultGuidelines = exports.defaultGuidelines = (0, _guideline.createFixedGuidelinesFromLengths)([0].concat((0, _toConsumableArray2.default)((0, _snapping.calculateDefaultSnappings)(-1))));
+var defaultGuidelines = exports.defaultGuidelines = (0, _guideline.createFixedGuidelinesFromLengths)([0].concat((0, _toConsumableArray2.default)((0, _snapping.calculateDefaultSnappings)(-1))));
+var defaultGuidelinesForPreserveTable = exports.defaultGuidelinesForPreserveTable = function defaultGuidelinesForPreserveTable(editorContainerWidth) {
+  return (0, _guideline.createFixedGuidelinesFromLengths)([0].concat((0, _toConsumableArray2.default)((0, _snapping.calculateDefaultTablePreserveSnappings)(-1, editorContainerWidth))));
+};

package/dist/cjs/utils/snapping.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.findClosestSnap = exports.defaultSnappingWidths = exports.calculateDefaultSnappings = void 0;
+exports.findClosestSnap = exports.defaultTablePreserveSnappingWidths = exports.defaultSnappingWidths = exports.calculateDefaultTablePreserveSnappings = exports.calculateDefaultSnappings = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _guideline = require("@atlaskit/editor-common/guideline");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -18,8 +18,21 @@ var calculateDefaultSnappings = exports.calculateDefaultSnappings = function cal
   var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   return [].concat((0, _toConsumableArray2.default)(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, _editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset)), [_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset, _editorSharedStyles.akEditorFullWidthLayoutWidth + lengthOffset]);
 };
+
+// FF TablePreserve for calculateDefaultSnappings
+var calculateDefaultTablePreserveSnappings = exports.calculateDefaultTablePreserveSnappings = function calculateDefaultTablePreserveSnappings() {
+  var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var editorContainerWith = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _editorSharedStyles.akEditorFullWidthLayoutWidth;
+  var dynamicFullWidthLine = editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 >= _editorSharedStyles.akEditorFullWidthLayoutWidth ? _editorSharedStyles.akEditorFullWidthLayoutWidth : editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide;
+  return [].concat((0, _toConsumableArray2.default)(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, _editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset)), [_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset]);
+};
 var defaultSnappingWidths = exports.defaultSnappingWidths = calculateDefaultSnappings();
 
+// FF TablePreserve for defaultSnappingWidths
+var defaultTablePreserveSnappingWidths = exports.defaultTablePreserveSnappingWidths = function defaultTablePreserveSnappingWidths(editorContainerWidth) {
+  return editorContainerWidth - _editorSharedStyles.akEditorGutterPadding * 2 > _editorSharedStyles.akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth);
+};
+
 /**
  * Returns keys of guidelines that are closest to the table and withthin the snapGap
  */

package/dist/es2019/nodeviews/TableContainer.js

@@ -2,7 +2,7 @@ import React, { forwardRef, useCallback, useRef } from 'react';
 import classNames from 'classnames';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
-import { akEditorDefaultLayoutWidth, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { TableCssClassName as ClassName } from '../types';
@@ -107,7 +107,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   }, [pluginInjectionApi]);
   const tableWidth = getTableContainerWidth(node);
   // 76 is currently an accepted padding value considering the spacing for resizer handle
-  const responsiveContainerWidth = containerWidth - 76;
+  const responsiveContainerWidth = tablePreserveWidth ? containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide / 2 : containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
   const width = Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {
     tableWidthRef.current = width;

package/dist/es2019/nodeviews/TableResizer.js

@@ -16,8 +16,8 @@ import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTa
 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 { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
-import { defaultGuidelines } from '../utils/guidelines';
-import { defaultSnappingWidths, findClosestSnap } from '../utils/snapping';
+import { defaultGuidelines, defaultGuidelinesForPreserveTable } from '../utils/guidelines';
+import { defaultSnappingWidths, defaultTablePreserveSnappingWidths, findClosestSnap } from '../utils/snapping';
 const DEBOUNCE_TIME_FOR_SCREEN_READER_ANNOUNCER = 1000;
 const RESIZE_STEP_VALUE = 10;
 const handles = {
@@ -130,13 +130,13 @@ export const TableResizer = ({
   }) => {
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      const visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
+      const visibleGuidelines = getVisibleGuidelines(tablePreserveWidth ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, containerWidth);
       displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
-  }, [displayGuideline, containerWidth]);
+  }, [tablePreserveWidth, containerWidth, displayGuideline]);
   const guidelineSnaps = useMemo(() => snappingEnabled ? {
-    x: defaultSnappingWidths
-  } : undefined, [snappingEnabled]);
+    x: tablePreserveWidth ? defaultTablePreserveSnappingWidths(containerWidth) : defaultSnappingWidths
+  } : undefined, [snappingEnabled, tablePreserveWidth, containerWidth]);
   useEffect(() => {
     return () => {
       // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
@@ -174,12 +174,12 @@ export const TableResizer = ({
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
     dispatch(tr);
-    const visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
+    const visibleGuidelines = getVisibleGuidelines(tablePreserveWidth ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if (getBooleanFF('platform.editor.resizing-table-height-improvement') && onResizeStart) {
       onResizeStart();
     }
-  }, [displayGapCursor, displayGuideline, editorView, startMeasure, onResizeStart, containerWidth]);
+  }, [startMeasure, editorView, displayGapCursor, tablePreserveWidth, containerWidth, displayGuideline, onResizeStart]);
   const handleResize = useCallback((originalState, delta) => {
     countFrames();
     const newWidth = originalState.width + delta.width;
@@ -198,10 +198,10 @@ export const TableResizer = ({
       start: pos + 1,
       parentWidth: newWidth
     }, editorView.domAtPos.bind(editorView), tablePreserveWidth);
-    updateActiveGuidelines(findClosestSnap(newWidth, defaultSnappingWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE));
+    updateActiveGuidelines(findClosestSnap(newWidth, tablePreserveWidth ? defaultTablePreserveSnappingWidths(containerWidth) : defaultSnappingWidths, tablePreserveWidth ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE));
     updateWidth(newWidth);
     return newWidth;
-  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames, tablePreserveWidth]);
+  }, [countFrames, tablePreserveWidth, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos]);
   const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
   const handleResizeStop = useCallback((originalState, delta) => {
     isResizing.current = false;

package/dist/es2019/ui/ColumnResizeWidget/index.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import React from 'react';
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';

package/dist/es2019/utils/guidelines.js

@@ -1,6 +1,7 @@
 import { createFixedGuidelinesFromLengths } from '@atlaskit/editor-common/guideline';
-import { calculateDefaultSnappings } from './snapping';
+import { calculateDefaultSnappings, calculateDefaultTablePreserveSnappings } from './snapping';
 
 // NOTE: We have to take 1 pixel off every length due to the fact that the tbody is 1px smaller then the table container.
 // If we don't do this then the guidelines will not align correctly to the edge of the table
-export const defaultGuidelines = createFixedGuidelinesFromLengths([0, ...calculateDefaultSnappings(-1)]);
+export const defaultGuidelines = createFixedGuidelinesFromLengths([0, ...calculateDefaultSnappings(-1)]);
+export const defaultGuidelinesForPreserveTable = editorContainerWidth => createFixedGuidelinesFromLengths([0, ...calculateDefaultTablePreserveSnappings(-1, editorContainerWidth)]);

package/dist/es2019/utils/snapping.js

@@ -1,10 +1,21 @@
 import { isVerticalPosition } from '@atlaskit/editor-common/guideline';
-import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide } from '@atlaskit/editor-shared-styles';
 const numberOfLanesInDefaultLayoutWidth = 12;
 const calculateSubSnappingWidths = (totalLanes, totalWidth) => new Array(Math.round(totalLanes / 2) - 1).fill(totalWidth / totalLanes).map((v, i) => v * (i + 1) * 2);
 export const calculateDefaultSnappings = (lengthOffset = 0) => [...calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset), akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, akEditorFullWidthLayoutWidth + lengthOffset];
+
+// FF TablePreserve for calculateDefaultSnappings
+export const calculateDefaultTablePreserveSnappings = (lengthOffset = 0, editorContainerWith = akEditorFullWidthLayoutWidth) => {
+  const dynamicFullWidthLine = editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
+  return [...calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset), akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset];
+};
 export const defaultSnappingWidths = calculateDefaultSnappings();
 
+// FF TablePreserve for defaultSnappingWidths
+export const defaultTablePreserveSnappingWidths = editorContainerWidth => {
+  return editorContainerWidth - akEditorGutterPadding * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth);
+};
+
 /**
  * Returns keys of guidelines that are closest to the table and withthin the snapGap
  */

package/dist/esm/nodeviews/TableContainer.js

@@ -5,7 +5,7 @@ import React, { forwardRef, useCallback, useRef } from 'react';
 import classNames from 'classnames';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
-import { akEditorDefaultLayoutWidth, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { TableCssClassName as ClassName } from '../types';
@@ -108,7 +108,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
   }, [pluginInjectionApi]);
   var tableWidth = getTableContainerWidth(node);
   // 76 is currently an accepted padding value considering the spacing for resizer handle
-  var responsiveContainerWidth = containerWidth - 76;
+  var responsiveContainerWidth = tablePreserveWidth ? containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide / 2 : containerWidth - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
   var width = Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {
     tableWidthRef.current = width;

package/dist/esm/nodeviews/TableResizer.js

@@ -20,8 +20,8 @@ import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTa
 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 { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
-import { defaultGuidelines } from '../utils/guidelines';
-import { defaultSnappingWidths, findClosestSnap } from '../utils/snapping';
+import { defaultGuidelines, defaultGuidelinesForPreserveTable } from '../utils/guidelines';
+import { defaultSnappingWidths, defaultTablePreserveSnappingWidths, findClosestSnap } from '../utils/snapping';
 var DEBOUNCE_TIME_FOR_SCREEN_READER_ANNOUNCER = 1000;
 var RESIZE_STEP_VALUE = 10;
 var handles = {
@@ -135,15 +135,15 @@ export var TableResizer = function TableResizer(_ref) {
       keys = _ref2.keys;
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      var visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
+      var visibleGuidelines = getVisibleGuidelines(tablePreserveWidth ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, containerWidth);
       displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
-  }, [displayGuideline, containerWidth]);
+  }, [tablePreserveWidth, containerWidth, displayGuideline]);
   var guidelineSnaps = useMemo(function () {
     return snappingEnabled ? {
-      x: defaultSnappingWidths
+      x: tablePreserveWidth ? defaultTablePreserveSnappingWidths(containerWidth) : defaultSnappingWidths
     } : undefined;
-  }, [snappingEnabled]);
+  }, [snappingEnabled, tablePreserveWidth, containerWidth]);
   useEffect(function () {
     return function () {
       // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
@@ -173,12 +173,12 @@ export var TableResizer = function TableResizer(_ref) {
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
     dispatch(tr);
-    var visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
+    var visibleGuidelines = getVisibleGuidelines(tablePreserveWidth ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, containerWidth);
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if (getBooleanFF('platform.editor.resizing-table-height-improvement') && onResizeStart) {
       onResizeStart();
     }
-  }, [displayGapCursor, displayGuideline, editorView, startMeasure, onResizeStart, containerWidth]);
+  }, [startMeasure, editorView, displayGapCursor, tablePreserveWidth, containerWidth, displayGuideline, onResizeStart]);
   var handleResize = useCallback(function (originalState, delta) {
     countFrames();
     var newWidth = originalState.width + delta.width;
@@ -197,10 +197,10 @@ export var TableResizer = function TableResizer(_ref) {
       start: pos + 1,
       parentWidth: newWidth
     }, editorView.domAtPos.bind(editorView), tablePreserveWidth);
-    updateActiveGuidelines(findClosestSnap(newWidth, defaultSnappingWidths, defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE));
+    updateActiveGuidelines(findClosestSnap(newWidth, tablePreserveWidth ? defaultTablePreserveSnappingWidths(containerWidth) : defaultSnappingWidths, tablePreserveWidth ? defaultGuidelinesForPreserveTable(containerWidth) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE));
     updateWidth(newWidth);
     return newWidth;
-  }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines, countFrames, tablePreserveWidth]);
+  }, [countFrames, tablePreserveWidth, tableRef, node, editorView, updateActiveGuidelines, containerWidth, updateWidth, getPos]);
   var scheduleResize = useMemo(function () {
     return rafSchd(handleResize);
   }, [handleResize]);

package/dist/esm/ui/ColumnResizeWidget/index.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import React from 'react';
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';

package/dist/esm/utils/guidelines.js

@@ -1,7 +1,10 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { createFixedGuidelinesFromLengths } from '@atlaskit/editor-common/guideline';
-import { calculateDefaultSnappings } from './snapping';
+import { calculateDefaultSnappings, calculateDefaultTablePreserveSnappings } from './snapping';
 
 // NOTE: We have to take 1 pixel off every length due to the fact that the tbody is 1px smaller then the table container.
 // If we don't do this then the guidelines will not align correctly to the edge of the table
-export var defaultGuidelines = createFixedGuidelinesFromLengths([0].concat(_toConsumableArray(calculateDefaultSnappings(-1))));
+export var defaultGuidelines = createFixedGuidelinesFromLengths([0].concat(_toConsumableArray(calculateDefaultSnappings(-1))));
+export var defaultGuidelinesForPreserveTable = function defaultGuidelinesForPreserveTable(editorContainerWidth) {
+  return createFixedGuidelinesFromLengths([0].concat(_toConsumableArray(calculateDefaultTablePreserveSnappings(-1, editorContainerWidth))));
+};

package/dist/esm/utils/snapping.js

@@ -1,6 +1,6 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { isVerticalPosition } from '@atlaskit/editor-common/guideline';
-import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide } from '@atlaskit/editor-shared-styles';
 var numberOfLanesInDefaultLayoutWidth = 12;
 var calculateSubSnappingWidths = function calculateSubSnappingWidths(totalLanes, totalWidth) {
   return new Array(Math.round(totalLanes / 2) - 1).fill(totalWidth / totalLanes).map(function (v, i) {
@@ -11,8 +11,21 @@ export var calculateDefaultSnappings = function calculateDefaultSnappings() {
   var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   return [].concat(_toConsumableArray(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset)), [akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, akEditorFullWidthLayoutWidth + lengthOffset]);
 };
+
+// FF TablePreserve for calculateDefaultSnappings
+export var calculateDefaultTablePreserveSnappings = function calculateDefaultTablePreserveSnappings() {
+  var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var editorContainerWith = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : akEditorFullWidthLayoutWidth;
+  var dynamicFullWidthLine = editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
+  return [].concat(_toConsumableArray(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset)), [akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset]);
+};
 export var defaultSnappingWidths = calculateDefaultSnappings();
 
+// FF TablePreserve for defaultSnappingWidths
+export var defaultTablePreserveSnappingWidths = function defaultTablePreserveSnappingWidths(editorContainerWidth) {
+  return editorContainerWidth - akEditorGutterPadding * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(0, editorContainerWidth);
+};
+
 /**
  * Returns keys of guidelines that are closest to the table and withthin the snapGap
  */

package/dist/types/ui/ColumnResizeWidget/index.d.ts

@@ -1,9 +1,9 @@
 /** @jsx jsx */
-import React from 'react';
+import { jsx } from '@emotion/react';
 type Props = {
     startIndex: number;
     endIndex: number;
     includeTooltip?: boolean;
 };
-export declare const ColumnResizeWidget: React.FC<Props>;
+export declare const ColumnResizeWidget: ({ startIndex, endIndex, includeTooltip, }: Props) => jsx.JSX.Element;
 export {};

package/dist/types/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 export interface Props {
     index: number;
     localId?: string;
@@ -6,4 +6,4 @@ export interface Props {
     height?: number;
     marginTop?: number;
 }
-export declare const ColumnDropTarget: React.FC<Props>;
+export declare const ColumnDropTarget: ({ index, localId, width, height, marginTop, }: Props) => JSX.Element;

package/dist/types/ui/TableFloatingColumnControls/ColumnDropTargets/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 export interface Props {
     tableRef: HTMLTableElement;
     tableHeight?: number;
@@ -7,4 +7,4 @@ export interface Props {
     isHeaderSticky?: boolean;
     getScrollOffset?: () => number;
 }
-export declare const ColumnDropTargets: React.FC<Props>;
+export declare const ColumnDropTargets: ({ tableRef, tableHeight, localId, colWidths, isHeaderSticky, getScrollOffset, }: Props) => JSX.Element | null;

package/dist/types/ui/TableFloatingColumnControls/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -26,5 +26,5 @@ export interface Props {
     isNumberColumnEnabled?: boolean;
     getScrollOffset?: () => number;
 }
-export declare const TableFloatingColumnControls: React.FC<Props>;
+export declare const TableFloatingColumnControls: ({ editorView, tableRef, getNode, tableActive, hasHeaderRow, hoveredCell, isResizing, stickyHeader, selection, isInDanger, isTableHovered, tableContainerWidth, isNumberColumnEnabled, getScrollOffset, }: Props) => JSX.Element | null;
 export default TableFloatingColumnControls;

package/dist/types/utils/drag-menu.d.ts

@@ -10,7 +10,7 @@ export declare const canMove: (sourceType: DraggableType, direction: DraggableDa
 export type DragMenuOptionIdType = 'add_row_above' | 'add_row_below' | 'add_column_left' | 'add_column_right' | 'distribute_columns' | 'clear_cells' | 'delete_row' | 'delete_column' | 'move_column_left' | 'move_column_right' | 'move_row_up' | 'move_row_down' | 'sort_column_asc' | 'sort_column_desc';
 export interface DragMenuConfig extends DropdownOptionT<Command> {
     id: DragMenuOptionIdType;
-    icon?: React.ComponentType<IconProps>;
+    icon?: React.ComponentType<React.PropsWithChildren<IconProps>>;
     keymap?: string;
 }
 export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, tablePreserveWidth?: boolean) => DragMenuConfig[];

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

@@ -1,2 +1,3 @@
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 export declare const defaultGuidelines: GuidelineConfig[];
+export declare const defaultGuidelinesForPreserveTable: (editorContainerWidth: number) => GuidelineConfig[];

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

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

package/dist/types-ts4.5/ui/ColumnResizeWidget/index.d.ts

@@ -1,9 +1,9 @@
 /** @jsx jsx */
-import React from 'react';
+import { jsx } from '@emotion/react';
 type Props = {
     startIndex: number;
     endIndex: number;
     includeTooltip?: boolean;
 };
-export declare const ColumnResizeWidget: React.FC<Props>;
+export declare const ColumnResizeWidget: ({ startIndex, endIndex, includeTooltip, }: Props) => jsx.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 export interface Props {
     index: number;
     localId?: string;
@@ -6,4 +6,4 @@ export interface Props {
     height?: number;
     marginTop?: number;
 }
-export declare const ColumnDropTarget: React.FC<Props>;
+export declare const ColumnDropTarget: ({ index, localId, width, height, marginTop, }: Props) => JSX.Element;

package/dist/types-ts4.5/ui/TableFloatingColumnControls/ColumnDropTargets/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 export interface Props {
     tableRef: HTMLTableElement;
     tableHeight?: number;
@@ -7,4 +7,4 @@ export interface Props {
     isHeaderSticky?: boolean;
     getScrollOffset?: () => number;
 }
-export declare const ColumnDropTargets: React.FC<Props>;
+export declare const ColumnDropTargets: ({ tableRef, tableHeight, localId, colWidths, isHeaderSticky, getScrollOffset, }: Props) => JSX.Element | null;

package/dist/types-ts4.5/ui/TableFloatingColumnControls/index.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import type { TableColumnOrdering } from '@atlaskit/custom-steps';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
@@ -26,5 +26,5 @@ export interface Props {
     isNumberColumnEnabled?: boolean;
     getScrollOffset?: () => number;
 }
-export declare const TableFloatingColumnControls: React.FC<Props>;
+export declare const TableFloatingColumnControls: ({ editorView, tableRef, getNode, tableActive, hasHeaderRow, hoveredCell, isResizing, stickyHeader, selection, isInDanger, isTableHovered, tableContainerWidth, isNumberColumnEnabled, getScrollOffset, }: Props) => JSX.Element | null;
 export default TableFloatingColumnControls;

package/dist/types-ts4.5/utils/drag-menu.d.ts

@@ -10,7 +10,7 @@ export declare const canMove: (sourceType: DraggableType, direction: DraggableDa
 export type DragMenuOptionIdType = 'add_row_above' | 'add_row_below' | 'add_column_left' | 'add_column_right' | 'distribute_columns' | 'clear_cells' | 'delete_row' | 'delete_column' | 'move_column_left' | 'move_column_right' | 'move_row_up' | 'move_row_down' | 'sort_column_asc' | 'sort_column_desc';
 export interface DragMenuConfig extends DropdownOptionT<Command> {
     id: DragMenuOptionIdType;
-    icon?: React.ComponentType<IconProps>;
+    icon?: React.ComponentType<React.PropsWithChildren<IconProps>>;
     keymap?: string;
 }
 export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, canDrag: boolean, hasMergedCellsInTable: boolean, editorView: EditorView, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, tablePreserveWidth?: boolean) => DragMenuConfig[];

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

@@ -1,2 +1,3 @@
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 export declare const defaultGuidelines: GuidelineConfig[];
+export declare const defaultGuidelinesForPreserveTable: (editorContainerWidth: number) => GuidelineConfig[];

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

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

package/package.json

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

package/src/nodeviews/TableContainer.tsx

@@ -12,6 +12,8 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import {
   akEditorDefaultLayoutWidth,
+  akEditorGutterPadding,
+  akEditorMediaResizeHandlerPaddingWide,
   akEditorMobileBreakoutPoint,
 } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
@@ -189,7 +191,14 @@ export const ResizableTableContainer = React.memo(
 
     const tableWidth = getTableContainerWidth(node);
     // 76 is currently an accepted padding value considering the spacing for resizer handle
-    const responsiveContainerWidth = containerWidth - 76;
+    const responsiveContainerWidth = tablePreserveWidth
+      ? containerWidth -
+        akEditorGutterPadding * 2 -
+        akEditorMediaResizeHandlerPaddingWide / 2
+      : containerWidth -
+        akEditorGutterPadding * 2 -
+        akEditorMediaResizeHandlerPaddingWide;
+
     const width = Math.min(tableWidth, responsiveContainerWidth);
 
     if (!isResizing) {

package/src/nodeviews/TableResizer.tsx

@@ -51,8 +51,15 @@ import {
   generateResizeFrameRatePayloads,
   useMeasureFramerate,
 } from '../utils/analytics';
-import { defaultGuidelines } from '../utils/guidelines';
-import { defaultSnappingWidths, findClosestSnap } from '../utils/snapping';
+import {
+  defaultGuidelines,
+  defaultGuidelinesForPreserveTable,
+} from '../utils/guidelines';
+import {
+  defaultSnappingWidths,
+  defaultTablePreserveSnappingWidths,
+  findClosestSnap,
+} from '../utils/snapping';
 
 interface TableResizerProps {
   width: number;
@@ -211,9 +218,12 @@ export const TableResizer = ({
       if (gap !== currentGap.current) {
         currentGap.current = gap;
         const visibleGuidelines = getVisibleGuidelines(
-          defaultGuidelines,
+          tablePreserveWidth
+            ? defaultGuidelinesForPreserveTable(containerWidth)
+            : defaultGuidelines,
           containerWidth,
         );
+
         displayGuideline(
           getGuidelinesWithHighlights(
             gap,
@@ -224,17 +234,19 @@ export const TableResizer = ({
         );
       }
     },
-    [displayGuideline, containerWidth],
+    [tablePreserveWidth, containerWidth, displayGuideline],
   );
 
   const guidelineSnaps = useMemo(
     () =>
       snappingEnabled
         ? {
-            x: defaultSnappingWidths,
+            x: tablePreserveWidth
+              ? defaultTablePreserveSnappingWidths(containerWidth)
+              : defaultSnappingWidths,
           }
         : undefined,
-    [snappingEnabled],
+    [snappingEnabled, tablePreserveWidth, containerWidth],
   );
 
   useEffect(() => {
@@ -270,9 +282,12 @@ export const TableResizer = ({
     dispatch(tr);
 
     const visibleGuidelines = getVisibleGuidelines(
-      defaultGuidelines,
+      tablePreserveWidth
+        ? defaultGuidelinesForPreserveTable(containerWidth)
+        : defaultGuidelines,
       containerWidth,
     );
+
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if (
       getBooleanFF('platform.editor.resizing-table-height-improvement') &&
@@ -281,12 +296,13 @@ export const TableResizer = ({
       onResizeStart();
     }
   }, [
+    startMeasure,
+    editorView,
     displayGapCursor,
+    tablePreserveWidth,
+    containerWidth,
     displayGuideline,
-    editorView,
-    startMeasure,
     onResizeStart,
-    containerWidth,
   ]);
 
   const handleResize = useCallback(
@@ -318,26 +334,30 @@ export const TableResizer = ({
       updateActiveGuidelines(
         findClosestSnap(
           newWidth,
-          defaultSnappingWidths,
-          defaultGuidelines,
+          tablePreserveWidth
+            ? defaultTablePreserveSnappingWidths(containerWidth)
+            : defaultSnappingWidths,
+          tablePreserveWidth
+            ? defaultGuidelinesForPreserveTable(containerWidth)
+            : defaultGuidelines,
           TABLE_HIGHLIGHT_GAP,
           TABLE_HIGHLIGHT_TOLERANCE,
         ),
       );
-
       updateWidth(newWidth);
 
       return newWidth;
     },
     [
-      editorView,
-      getPos,
-      node,
-      tableRef,
-      updateWidth,
-      updateActiveGuidelines,
       countFrames,
       tablePreserveWidth,
+      tableRef,
+      node,
+      editorView,
+      updateActiveGuidelines,
+      containerWidth,
+      updateWidth,
+      getPos,
     ],
   );
 

package/src/ui/ColumnResizeWidget/index.tsx

@@ -1,6 +1,4 @@
 /** @jsx jsx */
-import React from 'react';
-
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 
@@ -15,11 +13,11 @@ type Props = {
   includeTooltip?: boolean;
 };
 
-export const ColumnResizeWidget: React.FC<Props> = ({
+export const ColumnResizeWidget = ({
   startIndex,
   endIndex,
   includeTooltip,
-}) => {
+}: Props) => {
   const { formatMessage } = useIntl();
 
   if (!includeTooltip) {

package/src/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.tsx

@@ -13,13 +13,13 @@ export interface Props {
   marginTop?: number;
 }
 
-export const ColumnDropTarget: React.FC<Props> = ({
+export const ColumnDropTarget = ({
   index,
   localId,
   width,
   height,
   marginTop,
-}) => {
+}: Props) => {
   const dropTargetRef = useRef<HTMLDivElement | null>(null);
 
   useEffect(() => {

package/src/ui/TableFloatingColumnControls/ColumnDropTargets/index.tsx

@@ -13,14 +13,14 @@ export interface Props {
   getScrollOffset?: () => number;
 }
 
-export const ColumnDropTargets: React.FC<Props> = ({
+export const ColumnDropTargets = ({
   tableRef,
   tableHeight,
   localId,
   colWidths,
   isHeaderSticky,
   getScrollOffset,
-}) => {
+}: Props) => {
   const dropTargetRef = useRef<HTMLDivElement>(null);
 
   if (!tableRef) {

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -40,7 +40,7 @@ export interface Props {
   getScrollOffset?: () => number;
 }
 
-export const TableFloatingColumnControls: React.FC<Props> = ({
+export const TableFloatingColumnControls = ({
   editorView,
   tableRef,
   getNode,
@@ -55,7 +55,7 @@ export const TableFloatingColumnControls: React.FC<Props> = ({
   tableContainerWidth,
   isNumberColumnEnabled,
   getScrollOffset,
-}) => {
+}: Props) => {
   const [tableRect, setTableRect] = useState<{ width: number; height: number }>(
     { width: 0, height: 0 },
   );

package/src/utils/drag-menu.ts

@@ -141,7 +141,7 @@ export type DragMenuOptionIdType =
 
 export interface DragMenuConfig extends DropdownOptionT<Command> {
   id: DragMenuOptionIdType;
-  icon?: React.ComponentType<IconProps>;
+  icon?: React.ComponentType<React.PropsWithChildren<IconProps>>;
   keymap?: string;
 }
 

package/src/utils/guidelines.ts

@@ -1,7 +1,10 @@
 import { createFixedGuidelinesFromLengths } from '@atlaskit/editor-common/guideline';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 
-import { calculateDefaultSnappings } from './snapping';
+import {
+  calculateDefaultSnappings,
+  calculateDefaultTablePreserveSnappings,
+} from './snapping';
 
 // NOTE: We have to take 1 pixel off every length due to the fact that the tbody is 1px smaller then the table container.
 // If we don't do this then the guidelines will not align correctly to the edge of the table
@@ -9,3 +12,11 @@ export const defaultGuidelines = createFixedGuidelinesFromLengths([
   0,
   ...calculateDefaultSnappings(-1),
 ]) as GuidelineConfig[];
+
+export const defaultGuidelinesForPreserveTable = (
+  editorContainerWidth: number,
+) =>
+  createFixedGuidelinesFromLengths([
+    0,
+    ...calculateDefaultTablePreserveSnappings(-1, editorContainerWidth),
+  ]) as GuidelineConfig[];

package/src/utils/snapping.ts

@@ -4,6 +4,8 @@ import {
   akEditorCalculatedWideLayoutWidth,
   akEditorDefaultLayoutWidth,
   akEditorFullWidthLayoutWidth,
+  akEditorGutterPadding,
+  akEditorMediaResizeHandlerPaddingWide,
 } from '@atlaskit/editor-shared-styles';
 
 const numberOfLanesInDefaultLayoutWidth = 12;
@@ -23,8 +25,42 @@ export const calculateDefaultSnappings = (lengthOffset: number = 0) => [
   akEditorFullWidthLayoutWidth + lengthOffset,
 ];
 
+// FF TablePreserve for calculateDefaultSnappings
+export const calculateDefaultTablePreserveSnappings = (
+  lengthOffset: number = 0,
+  editorContainerWith: number = akEditorFullWidthLayoutWidth,
+) => {
+  const dynamicFullWidthLine =
+    editorContainerWith - akEditorGutterPadding * 2 >=
+    akEditorFullWidthLayoutWidth
+      ? akEditorFullWidthLayoutWidth
+      : editorContainerWith -
+        akEditorGutterPadding * 2 -
+        akEditorMediaResizeHandlerPaddingWide;
+
+  return [
+    ...calculateSubSnappingWidths(
+      numberOfLanesInDefaultLayoutWidth,
+      akEditorDefaultLayoutWidth + lengthOffset,
+    ),
+    akEditorDefaultLayoutWidth + lengthOffset,
+    akEditorCalculatedWideLayoutWidth + lengthOffset,
+    dynamicFullWidthLine - lengthOffset,
+  ];
+};
+
 export const defaultSnappingWidths = calculateDefaultSnappings();
 
+// FF TablePreserve for defaultSnappingWidths
+export const defaultTablePreserveSnappingWidths = (
+  editorContainerWidth: number,
+) => {
+  return editorContainerWidth - akEditorGutterPadding * 2 >
+    akEditorFullWidthLayoutWidth
+    ? calculateDefaultSnappings()
+    : calculateDefaultTablePreserveSnappings(0, editorContainerWidth);
+};
+
 /**
  * Returns keys of guidelines that are closest to the table and withthin the snapGap
  */