@atlaskit/editor-plugin-table 11.1.2 → 11.1.4

package/dist/es2019/pm-plugins/utils/snapping.js

@@ -1,14 +1,20 @@
 import { isVerticalPosition } from '@atlaskit/editor-common/guideline';
-import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 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];
+const getPadding = editorContainerWith => {
+  return editorContainerWith <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
+};
+
 // FF TablePreserve for calculateDefaultSnappings
 export const calculateDefaultTablePreserveSnappings = (lengthOffset = 0, editorContainerWith = akEditorFullWidthLayoutWidth, exclude = {
   innerGuidelines: false,
   breakoutPoints: false
 }) => {
-  const dynamicFullWidthLine = editorContainerWith - akEditorGutterPaddingDynamic() * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPaddingDynamic() * 2;
+  const padding = getPadding(editorContainerWith);
+  const dynamicFullWidthLine = editorContainerWith - padding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - padding * 2;
   const guides = [dynamicFullWidthLine - lengthOffset];
   if (!exclude.breakoutPoints) {
     guides.unshift(akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset);
@@ -25,7 +31,8 @@ export const defaultTablePreserveSnappingWidths = (lengthOffset, editorContainer
   innerGuidelines: false,
   breakoutPoints: false
 }) => {
-  return editorContainerWidth - akEditorGutterPaddingDynamic() * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(lengthOffset, editorContainerWidth, exclude); // lengthOffset was hardcoded 0 here, created PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
+  const padding = getPadding(editorContainerWidth);
+  return editorContainerWidth - padding * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(lengthOffset, editorContainerWidth, exclude); // lengthOffset was hardcoded 0 here, created PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
 };
 
 /**

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

@@ -1,4 +1,6 @@
 import React from 'react';
+
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import { DragInMotionIcon } from '../icons/DragInMotionIcon';
 const boxStyles = xcss({

package/dist/es2019/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.js

@@ -6,6 +6,7 @@
 import { jsx } from '@emotion/react';
 import { ButtonGroup } from '@atlaskit/button';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator } from '@atlaskit/editor-common/ui';
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 const containerStyles = xcss({
   marginLeft: 'space.100'

package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js

@@ -30,6 +30,7 @@ import TableRowAddBelowIcon from '@atlaskit/icon/core/table-row-add-below';
 import TableRowDeleteIcon from '@atlaskit/icon/core/table-row-delete';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, setFocusToCellMenu, toggleContextualMenu } from '../../pm-plugins/commands';

package/dist/es2019/ui/FloatingDragMenu/DragMenu.js

@@ -20,6 +20,7 @@ import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
 import PaintBucketIcon from '@atlaskit/icon/core/migration/paint-bucket--editor-background-color';
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import Toggle from '@atlaskit/toggle';
 import { clearHoverSelection, hoverColumns, hoverRows } from '../../pm-plugins/commands';

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, Inline, xcss } from '@atlaskit/primitives';
 const tableFullWidthLabelWrapperStyles = xcss({
   height: "var(--ds-space-400, 32px)",

package/dist/es2019/ui/toolbar.js

@@ -12,7 +12,7 @@ import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/edito
 import commonMessages, { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { isSelectionTableNestedInTable } from '@atlaskit/editor-common/nesting';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { cellBackgroundColorPalette, DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
+import { DEFAULT_BORDER_COLOR, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
 import { closestElement, getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/editor-common/utils';
 import { findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';

package/dist/esm/nodeviews/TableContainer.js

@@ -5,8 +5,9 @@ import classNames from 'classnames';
 import { CHANGE_ALIGNMENT_REASON, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
+import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -149,6 +150,9 @@ var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
     editorViewModeState: editorViewModeState
   };
 });
+var getPadding = function getPadding(containerWidth) {
+  return containerWidth <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
+};
 export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
   var children = _ref4.children,
     className = _ref4.className,
@@ -233,6 +237,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
   var tableWidth = getTableContainerWidth(node);
   var responsiveContainerWidth = 0;
   var resizeHandleSpacing = 12;
+  var padding = getPadding(containerWidth);
   // 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
@@ -242,7 +247,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     // 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 - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+    responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - padding * 2 - resizeHandleSpacing;
 
     // platform_editor_table_fw_numcol_overflow_fix:
     // lineLength is undefined on first paint → width: NaN → wrapper expands to page
@@ -256,7 +261,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     // 2) TODO: widen lineLength to `number|undefined` and remove this block.
     if (fg('platform_editor_table_fw_numcol_overflow_fix')) {
       if (isTableScalingEnabled && !Number.isFinite(responsiveContainerWidth)) {
-        responsiveContainerWidth = containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+        responsiveContainerWidth = containerWidth - padding * 2 - resizeHandleSpacing;
       }
     }
   } else if (isCommentEditor) {
@@ -266,7 +271,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
     // 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 - akEditorGutterPaddingDynamic() * 2 : containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - padding * 2 : containerWidth - padding * 2 - resizeHandleSpacing;
   }
   var width = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {

package/dist/esm/nodeviews/TableResizer.js

@@ -15,9 +15,10 @@ import { logException } from '@atlaskit/editor-common/monitoring';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
-import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
 import { updateWidthToWidest } from '../pm-plugins/commands/misc';
 import { META_KEYS } from '../pm-plugins/table-analytics';
@@ -67,6 +68,9 @@ var getResizerMinWidth = function getResizerMinWidth(node) {
   // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
   return minColumnWidth + 1;
 };
+var getPadding = function getPadding(containerWidth) {
+  return containerWidth <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
+};
 
 /**
  * When guidelines are outside the viewport, filter them out, do not show
@@ -87,8 +91,9 @@ var getVisibleGuidelines = function getVisibleGuidelines(guidelines, containerWi
     // 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;
+    var padding = getPadding(containerWidth);
     guidelineVisibleAdjustment = isFullWidthModeEnabled ? preserve_table_widths_adjustment // guidelineVisibleAdjustment = -2, if lineLength = 1180, 1181 < 1180 + 2 is true.
-    : -2 * akEditorGutterPaddingDynamic() + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
+    : -2 * padding + 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) {
@@ -200,7 +205,7 @@ export var TableResizer = function TableResizer(_ref) {
       keys = _ref2.keys;
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
+      var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
       displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
   }, [isTableScalingEnabled, excludeGuidelineConfig, containerWidth, displayGuideline, lineLength, isFullWidthModeEnabled]);
@@ -208,7 +213,7 @@ export var TableResizer = function TableResizer(_ref) {
     return snappingEnabled ? {
       x: isTableScalingEnabled ? defaultTablePreserveSnappingWidths(PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET,
       // was hardcoded to 0, using PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
-      isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
+      isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth, excludeGuidelineConfig) : defaultSnappingWidths
     } : undefined;
   }, [snappingEnabled, isTableScalingEnabled, excludeGuidelineConfig, containerWidth, lineLength, isFullWidthModeEnabled]);
   var switchToCenterAlignment = useCallback(function (pos, node, newWidth, state, dispatch) {
@@ -257,7 +262,7 @@ export var TableResizer = function TableResizer(_ref) {
       name: TABLE_OVERFLOW_CHANGE_TRIGGER.RESIZED
     });
     dispatch(tr);
-    var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
+    var visibleGuidelines = getVisibleGuidelines(isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth, excludeGuidelineConfig) : defaultGuidelines, containerWidth, lineLength, Boolean(isTableScalingEnabled), Boolean(isFullWidthModeEnabled));
     setSnappingEnabled(displayGuideline(visibleGuidelines));
     if (onResizeStart) {
       onResizeStart();
@@ -279,7 +284,7 @@ export var TableResizer = function TableResizer(_ref) {
     if (typeof pos !== 'number') {
       return;
     }
-    var editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth;
+    var editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth;
     var closestSnap = !isCommentEditor && 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);
     closestSnap && updateActiveGuidelines(closestSnap);
 

package/dist/esm/nodeviews/toDOM.js

@@ -7,6 +7,7 @@ import kebabCase from 'lodash/kebabCase';
 import { table, tableWithNestedTable } from '@atlaskit/adf-schema';
 import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { generateColgroup, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
 import { getAlignmentStyle } from './table-container-styles';
@@ -14,7 +15,13 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
   var tableNode = config.isNestingSupported ? tableWithNestedTable : table;
   return _objectSpread(_objectSpread({}, tableNode), {}, {
     toDOM: function toDOM(node) {
-      var gutterPadding = akEditorGutterPaddingDynamic() * 2;
+      var gutterPadding = function gutterPadding() {
+        if (expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
+          return 'calc(var(--ak-editor--large-gutter-padding) * 2)';
+        } else {
+          return "".concat(akEditorGutterPaddingDynamic() * 2, "px");
+        }
+      };
       var alignmentStyle = Object.entries(getAlignmentStyle(node.attrs.layout)).map(function (_ref) {
         var _ref2 = _slicedToArray(_ref, 2),
           k = _ref2[0],
@@ -71,14 +78,14 @@ export var tableNodeSpecWithFixedToDOM = function tableNodeSpecWithFixedToDOM(co
         style: alignmentStyle
       }, ['div', {
         class: 'pm-table-resizer-container',
-        style: "width: min(calc(100cqw - ".concat(gutterPadding, "px), ").concat(tableWidthAttribute, ");")
+        style: "width: min(calc(100cqw - ".concat(gutterPadding(), "), ").concat(tableWidthAttribute, ");")
       }, ['div', {
         class: 'resizer-item display-handle',
         style: convertToInlineCss({
           position: 'relative',
           userSelect: 'auto',
           boxSizing: 'border-box',
-          '--ak-editor-table-gutter-padding': "".concat(gutterPadding, "px"),
+          '--ak-editor-table-gutter-padding': "".concat(gutterPadding()),
           '--ak-editor-table-max-width': "".concat(TABLE_MAX_WIDTH, "px"),
           '--ak-editor-table-min-width': "".concat(tableMinWidth, "px"),
           minWidth: 'var(--ak-editor-table-min-width)',

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

@@ -1,7 +1,8 @@
 import { getParentNodeWidth, getTableContainerWidth, layoutToWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
-import { akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+import { akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorTableNumberColumnWidth, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { hasTableBeenResized, hasTableColumnBeenResized } from './colgroup';
 import { MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION } from './consts';
 
@@ -11,7 +12,11 @@ export function getLayoutSize(tableLayout) {
   var options = arguments.length > 2 ? arguments[2] : undefined;
   var isFullWidthModeEnabled = options.isFullWidthModeEnabled;
   if (isFullWidthModeEnabled) {
-    return containerWidth ? Math.min(containerWidth - akEditorGutterPaddingDynamic() * 2, akEditorFullWidthLayoutWidth) : akEditorFullWidthLayoutWidth;
+    var padding = akEditorGutterPaddingDynamic();
+    if (containerWidth <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
+      padding = akEditorGutterPaddingReduced;
+    }
+    return containerWidth ? Math.min(containerWidth - padding * 2, akEditorFullWidthLayoutWidth) : akEditorFullWidthLayoutWidth;
   }
   var calculatedTableWidth = calcTableWidth(tableLayout, containerWidth, true);
   if (calculatedTableWidth !== 'inherit') {

package/dist/esm/pm-plugins/utils/snapping.js

@@ -1,6 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { isVerticalPosition } from '@atlaskit/editor-common/guideline';
-import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 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,6 +12,10 @@ 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]);
 };
+var getPadding = function getPadding(editorContainerWith) {
+  return editorContainerWith <= akEditorFullPageNarrowBreakout && expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
+};
+
 // FF TablePreserve for calculateDefaultSnappings
 export var calculateDefaultTablePreserveSnappings = function calculateDefaultTablePreserveSnappings() {
   var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -19,7 +24,8 @@ export var calculateDefaultTablePreserveSnappings = function calculateDefaultTab
     innerGuidelines: false,
     breakoutPoints: false
   };
-  var dynamicFullWidthLine = editorContainerWith - akEditorGutterPaddingDynamic() * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPaddingDynamic() * 2;
+  var padding = getPadding(editorContainerWith);
+  var dynamicFullWidthLine = editorContainerWith - padding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - padding * 2;
   var guides = [dynamicFullWidthLine - lengthOffset];
   if (!exclude.breakoutPoints) {
     guides.unshift(akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset);
@@ -37,7 +43,8 @@ export var defaultTablePreserveSnappingWidths = function defaultTablePreserveSna
     innerGuidelines: false,
     breakoutPoints: false
   };
-  return editorContainerWidth - akEditorGutterPaddingDynamic() * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(lengthOffset, editorContainerWidth, exclude); // lengthOffset was hardcoded 0 here, created PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
+  var padding = getPadding(editorContainerWidth);
+  return editorContainerWidth - padding * 2 > akEditorFullWidthLayoutWidth ? calculateDefaultSnappings() : calculateDefaultTablePreserveSnappings(lengthOffset, editorContainerWidth, exclude); // lengthOffset was hardcoded 0 here, created PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
 };
 
 /**

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

@@ -1,4 +1,6 @@
 import React from 'react';
+
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import { DragInMotionIcon } from '../icons/DragInMotionIcon';
 var boxStyles = xcss({

package/dist/esm/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.js

@@ -6,6 +6,7 @@
 import { jsx } from '@emotion/react';
 import { ButtonGroup } from '@atlaskit/button';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator } from '@atlaskit/editor-common/ui';
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 var containerStyles = xcss({
   marginLeft: 'space.100'

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

@@ -40,6 +40,7 @@ import TableRowAddBelowIcon from '@atlaskit/icon/core/table-row-add-below';
 import TableRowDeleteIcon from '@atlaskit/icon/core/table-row-delete';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, setFocusToCellMenu, toggleContextualMenu } from '../../pm-plugins/commands';

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

@@ -22,6 +22,7 @@ import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
 import PaintBucketIcon from '@atlaskit/icon/core/migration/paint-bucket--editor-background-color';
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, xcss } from '@atlaskit/primitives';
 import Toggle from '@atlaskit/toggle';
 import { clearHoverSelection, hoverColumns, hoverRows } from '../../pm-plugins/commands';

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
 import { Box, Inline, xcss } from '@atlaskit/primitives';
 var tableFullWidthLabelWrapperStyles = xcss({
   height: "var(--ds-space-400, 32px)",

package/dist/esm/ui/toolbar.js

@@ -16,7 +16,7 @@ import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/edito
 import commonMessages, { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { isSelectionTableNestedInTable } from '@atlaskit/editor-common/nesting';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { cellBackgroundColorPalette, DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
+import { DEFAULT_BORDER_COLOR, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
 import { closestElement, getChildrenInfo as _getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/editor-common/utils';
 import { findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "11.1.2",
+	"version": "11.1.4",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,13 +37,13 @@
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^3.0.0",
 		"@atlaskit/editor-plugin-content-insertion": "^3.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^5.0.0",
-		"@atlaskit/editor-plugin-extension": "6.0.3",
+		"@atlaskit/editor-plugin-extension": "6.0.4",
 		"@atlaskit/editor-plugin-guideline": "^3.0.0",
 		"@atlaskit/editor-plugin-interaction": "^4.0.0",
 		"@atlaskit/editor-plugin-selection": "^3.0.0",
 		"@atlaskit/editor-plugin-width": "^4.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-shared-styles": "^3.4.0",
+		"@atlaskit/editor-shared-styles": "^3.5.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/icon": "^27.3.0",
 		"@atlaskit/menu": "^8.0.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/primitives": "^14.10.0",
 		"@atlaskit/react-ufo": "^4.0.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^9.6.0",
+		"@atlaskit/tmp-editor-statsig": "^9.8.0",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/tokens": "^5.5.0",
 		"@atlaskit/tooltip": "^20.3.0",

package/src/nodeviews/TableContainer.tsx

@@ -22,9 +22,12 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import {
 	akEditorDefaultLayoutWidth,
 	akEditorGutterPaddingDynamic,
+	akEditorGutterPaddingReduced,
+	akEditorFullPageNarrowBreakout,
 	akEditorMobileBreakoutPoint,
 } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
@@ -252,6 +255,13 @@ const useSharedState = sharedPluginStateHookMigratorFactory(
 	},
 );
 
+const getPadding = (containerWidth: number) => {
+	return containerWidth <= akEditorFullPageNarrowBreakout &&
+		expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)
+		? akEditorGutterPaddingReduced
+		: akEditorGutterPaddingDynamic();
+};
+
 export const ResizableTableContainer = React.memo(
 	({
 		children,
@@ -355,6 +365,7 @@ export const ResizableTableContainer = React.memo(
 
 		let responsiveContainerWidth = 0;
 		const resizeHandleSpacing = 12;
+		const padding = getPadding(containerWidth);
 		// 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
@@ -366,7 +377,7 @@ export const ResizableTableContainer = React.memo(
 			// scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
 			responsiveContainerWidth = isTableScalingEnabled
 				? lineLength
-				: containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+				: containerWidth - padding * 2 - resizeHandleSpacing;
 
 			// platform_editor_table_fw_numcol_overflow_fix:
 			// lineLength is undefined on first paint → width: NaN → wrapper expands to page
@@ -380,8 +391,7 @@ export const ResizableTableContainer = React.memo(
 			// 2) TODO: widen lineLength to `number|undefined` and remove this block.
 			if (fg('platform_editor_table_fw_numcol_overflow_fix')) {
 				if (isTableScalingEnabled && !Number.isFinite(responsiveContainerWidth)) {
-					responsiveContainerWidth =
-						containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+					responsiveContainerWidth = containerWidth - padding * 2 - resizeHandleSpacing;
 				}
 			}
 		} else if (isCommentEditor) {
@@ -392,8 +402,8 @@ export const ResizableTableContainer = React.memo(
 			// 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 - akEditorGutterPaddingDynamic() * 2
-				: containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+				? containerWidth - padding * 2
+				: containerWidth - padding * 2 - resizeHandleSpacing;
 		}
 		const width =
 			!node.attrs.width && isCommentEditor

package/src/nodeviews/TableResizer.tsx

@@ -28,9 +28,14 @@ import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import {
+	akEditorGutterPaddingDynamic,
+	akEditorGutterPaddingReduced,
+	akEditorFullPageNarrowBreakout,
+} from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { token } from '@atlaskit/tokens';
 
 import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
@@ -143,6 +148,13 @@ const getResizerMinWidth = (node: PMNode) => {
 	return minColumnWidth + 1;
 };
 
+const getPadding = (containerWidth: number) => {
+	return containerWidth <= akEditorFullPageNarrowBreakout &&
+		expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)
+		? akEditorGutterPaddingReduced
+		: akEditorGutterPaddingDynamic();
+};
+
 /**
  * When guidelines are outside the viewport, filter them out, do not show
  * So the guideline container won't make the fabric-editor-popup-scroll-parent overflow
@@ -168,10 +180,10 @@ const getVisibleGuidelines = (
 		// For PTW we need to ensure that dynamic guideline never gets excluded: 1181 should be > width + guidelineVisibleAdjustment
 		// guidelineVisibleAdjustment is set as a negative value, so we making it positive and adding + 1
 		const preserve_table_widths_adjustment = -1 * PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET + 1;
-
+		const padding = getPadding(containerWidth);
 		guidelineVisibleAdjustment = isFullWidthModeEnabled
 			? preserve_table_widths_adjustment // guidelineVisibleAdjustment = -2, if lineLength = 1180, 1181 < 1180 + 2 is true.
-			: -2 * akEditorGutterPaddingDynamic() + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
+			: -2 * padding + preserve_table_widths_adjustment; // guidelineVisibleAdjustment = -62, if containerWidth is 1244, 1181 < 1244 - 62 = 1182 is true.
 	}
 	const width = isTableScalingEnabled && isFullWidthModeEnabled ? lineLength : containerWidth;
 
@@ -296,12 +308,13 @@ export const TableResizer = ({
 		({ gap, keys }: { gap: number; keys: string[] }) => {
 			if (gap !== currentGap.current) {
 				currentGap.current = gap;
+
 				const visibleGuidelines = getVisibleGuidelines(
 					isTableScalingEnabled
 						? defaultGuidelinesForPreserveTable(
 								PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET,
 								isFullWidthModeEnabled
-									? lineLength + 2 * akEditorGutterPaddingDynamic()
+									? lineLength + 2 * getPadding(containerWidth)
 									: containerWidth,
 								excludeGuidelineConfig,
 							)
@@ -332,7 +345,7 @@ export const TableResizer = ({
 							? defaultTablePreserveSnappingWidths(
 									PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, // was hardcoded to 0, using PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET instead.
 									isFullWidthModeEnabled
-										? lineLength + 2 * akEditorGutterPaddingDynamic()
+										? lineLength + 2 * getPadding(containerWidth)
 										: containerWidth,
 									excludeGuidelineConfig,
 								)
@@ -428,9 +441,7 @@ export const TableResizer = ({
 			isTableScalingEnabled
 				? defaultGuidelinesForPreserveTable(
 						PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET,
-						isFullWidthModeEnabled
-							? lineLength + 2 * akEditorGutterPaddingDynamic()
-							: containerWidth,
+						isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth,
 						excludeGuidelineConfig,
 					)
 				: defaultGuidelines,
@@ -476,7 +487,7 @@ export const TableResizer = ({
 			}
 
 			const editorContainerWidth = isFullWidthModeEnabled
-				? lineLength + 2 * akEditorGutterPaddingDynamic()
+				? lineLength + 2 * getPadding(containerWidth)
 				: containerWidth;
 
 			const closestSnap =

package/src/nodeviews/toDOM.ts

@@ -5,6 +5,7 @@ import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { DOMOutputSpec, NodeSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 
 import { generateColgroup, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
@@ -25,7 +26,13 @@ export const tableNodeSpecWithFixedToDOM = (
 	return {
 		...tableNode,
 		toDOM: (node: PMNode): DOMOutputSpec => {
-			const gutterPadding = akEditorGutterPaddingDynamic() * 2;
+			const gutterPadding = () => {
+				if (expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
+					return 'calc(var(--ak-editor--large-gutter-padding) * 2)';
+				} else {
+					return `${akEditorGutterPaddingDynamic() * 2}px`;
+				}
+			};
 
 			const alignmentStyle = Object.entries(getAlignmentStyle(node.attrs.layout))
 				.map(([k, v]) => `${kebabCase(k)}: ${kebabCase(v)}`)
@@ -129,7 +136,7 @@ export const tableNodeSpecWithFixedToDOM = (
 					'div',
 					{
 						class: 'pm-table-resizer-container',
-						style: `width: min(calc(100cqw - ${gutterPadding}px), ${tableWidthAttribute});`,
+						style: `width: min(calc(100cqw - ${gutterPadding()}), ${tableWidthAttribute});`,
 					},
 					[
 						'div',
@@ -139,7 +146,7 @@ export const tableNodeSpecWithFixedToDOM = (
 								position: 'relative',
 								userSelect: 'auto',
 								boxSizing: 'border-box',
-								'--ak-editor-table-gutter-padding': `${gutterPadding}px`,
+								'--ak-editor-table-gutter-padding': `${gutterPadding()}`,
 								'--ak-editor-table-max-width': `${TABLE_MAX_WIDTH}px`,
 								'--ak-editor-table-min-width': `${tableMinWidth}px`,
 								minWidth: 'var(--ak-editor-table-min-width)',