@atlaskit/editor-plugin-table 22.2.5 → 22.2.7

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-table
 
+## 22.2.7
+
+### Patch Changes
+
+- [`aaa61a61efb94`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/aaa61a61efb94) -
+  Add support for table resize in chromeless editor, behind platform_editor_table_resize_chromeless
+  experiment
+- Updated dependencies
+
+## 22.2.6
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 22.2.5
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableContainer.js

@@ -217,7 +217,6 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
   var isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
   var _useMemo = (0, _react.useMemo)(function () {
       var responsiveContainerWidth = 0;
-      var resizeHandleSpacing = 12;
       var padding = getPadding(containerWidth);
       // When Full width or Max 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
@@ -235,30 +234,39 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
         if (isTableScalingEnabled && Number.isFinite(lineLength) && lineLength !== undefined) {
           responsiveContainerWidth = lineLength;
         } else {
-          responsiveContainerWidth = containerWidth - padding * 2 - resizeHandleSpacing;
+          responsiveContainerWidth = containerWidth - padding * 2 - _consts.RESIZE_HANDLE_SPACING;
         }
       } else if (isCommentEditor) {
         responsiveContainerWidth = containerWidth - _consts.TABLE_OFFSET_IN_COMMENT_EDITOR;
+      } else if (isChromelessEditor && (0, _expValEquals.expValEquals)('platform_editor_table_resize_chromeless', 'isEnabled', true)) {
+        // there's no padding included in chromeless appearance, so we need to reduce table
+        // width to ensure all controls are visible.
+        // use lineLength as the value is updated by scrollbar visibility changes
+        responsiveContainerWidth = Number.isFinite(lineLength) && lineLength !== undefined ? lineLength : containerWidth - _consts.RESIZE_HANDLE_SPACING;
       } 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 - padding * 2 : containerWidth - padding * 2 - resizeHandleSpacing;
+        responsiveContainerWidth = isTableScalingEnabled ? containerWidth - padding * 2 : containerWidth - padding * 2 - _consts.RESIZE_HANDLE_SPACING;
       }
 
       // Fix for HOT-119925: Ensure table width is properly constrained and responsive
       // For wide tables, ensure they don't exceed container width and can be scrolled
-      var calculatedWidth = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
+      var calculatedWidth =
+      // remove isCommentEditor check if platform_editor_table_resize_chromeless is cleaned up
+      !node.attrs.width && ((0, _expValEquals.expValEquals)('platform_editor_table_resize_chromeless', 'isEnabled', true) && !isFullPageAppearance || isCommentEditor) ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
 
       // Ensure minimum width for usability while respecting container constraints
       var width = Math.max(calculatedWidth, Math.min(responsiveContainerWidth * 0.5, 300));
-      var maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH);
+
+      // remove isCommentEditor check if platform_editor_table_resize_chromeless is cleaned up
+      var maxResizerWidth = (0, _expValEquals.expValEquals)('platform_editor_table_resize_chromeless', 'isEnabled', true) && !isFullPageAppearance || isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH);
       return {
         width: width,
         maxResizerWidth: maxResizerWidth
       };
-    }, [containerWidth, isCommentEditor, isFullWidthModeEnabled, isMaxWidthModeEnabled, isTableScalingEnabled, lineLength, node.attrs.width, tableWidth]),
+    }, [containerWidth, isCommentEditor, isChromelessEditor, isFullWidthModeEnabled, isMaxWidthModeEnabled, isFullPageAppearance, isTableScalingEnabled, lineLength, node.attrs.width, tableWidth]),
     width = _useMemo.width,
     maxResizerWidth = _useMemo.maxResizerWidth;
   (0, _react.useEffect)(function () {
@@ -308,7 +316,8 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     pluginInjectionApi: pluginInjectionApi,
     onResizeStart: onResizeStart,
     onResizeStop: onResizeStop,
-    isCommentEditor: isCommentEditor
+    isCommentEditor: isCommentEditor,
+    isChromelessEditor: isChromelessEditor
   };
   var isLivePageViewMode = mode === 'view';
   return /*#__PURE__*/_react.default.createElement(AlignmentTableContainerWrapper, {

package/dist/cjs/nodeviews/TableResizer.js

@@ -56,12 +56,12 @@ 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';
@@ -83,6 +83,15 @@ var getPadding = function getPadding(containerWidth) {
     exposure: true
   }) ? _editorSharedStyles.akEditorGutterPaddingReduced : (0, _editorSharedStyles.akEditorGutterPaddingDynamic)();
 };
+var getTableMaxWidth = function getTableMaxWidth(containerWidth, lineLength, isCommentEditor, isChromelessEditor) {
+  if (isCommentEditor) {
+    return Math.floor(containerWidth - _consts.TABLE_OFFSET_IN_COMMENT_EDITOR);
+  } else if (isChromelessEditor) {
+    return Number.isFinite(lineLength) && lineLength !== undefined ? lineLength : Math.floor(containerWidth - _consts.RESIZE_HANDLE_SPACING);
+  } else {
+    return (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH;
+  }
+};
 
 /**
  * When guidelines are outside the viewport, filter them out, do not show
@@ -143,6 +152,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     pluginInjectionApi = _ref.pluginInjectionApi,
     isFullWidthModeEnabled = _ref.isFullWidthModeEnabled,
     isCommentEditor = _ref.isCommentEditor,
+    isChromelessEditor = _ref.isChromelessEditor,
     disabled = _ref.disabled;
   var currentGap = (0, _react.useRef)(0);
   // track resizing state - use ref over state to avoid re-render
@@ -161,6 +171,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
     setSnappingEnabled = _useState2[1];
   var _useIntl = (0, _reactIntl.useIntl)(),
     formatMessage = _useIntl.formatMessage;
+  var isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
   var currentSelection = (_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection;
   var tableFromSelection = (0, _react.useMemo)(function () {
     return (0, _utils.findTable)(currentSelection);
@@ -292,7 +303,9 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       return;
     }
     var editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth;
-    var closestSnap = !isCommentEditor && (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, _consts2.TABLE_HIGHLIGHT_GAP, _consts2.TABLE_HIGHLIGHT_TOLERANCE);
+    var closestSnap =
+    // remove isCommentEditor check if platform_editor_table_resize_chromeless is cleaned up
+    ((0, _expValEquals.expValEquals)('platform_editor_table_resize_chromeless', 'isEnabled', true) && isFullPageAppearance || !isCommentEditor) && (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, _consts2.TABLE_HIGHLIGHT_GAP, _consts2.TABLE_HIGHLIGHT_TOLERANCE);
     closestSnap && updateActiveGuidelines(closestSnap);
 
     // When snapping to the full width guideline, resize the table to be 1800px
@@ -303,21 +316,21 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       return guideline.isFullWidth;
     })[0];
     var isFullWidthGuidelineActive = (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true) ? closestSnap && fullWidthGuideline && closestSnap.keys.includes(fullWidthGuideline.key) : closestSnap && closestSnap.keys.includes(fullWidthGuideline.key);
-    var tableMaxWidth = isCommentEditor ? Math.floor(containerWidth - _consts.TABLE_OFFSET_IN_COMMENT_EDITOR) : (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH;
-    var shouldUpdateWidthToWidest = isCommentEditor ? tableMaxWidth <= newWidth : !!isTableScalingEnabled && isFullWidthGuidelineActive;
-    var previewParentWidth = isCommentEditor && shouldUpdateWidthToWidest ? tableMaxWidth : newWidth;
+    var tableMaxWidth = (0, _expValEquals.expValEquals)('platform_editor_table_resize_chromeless', 'isEnabled', true) ? getTableMaxWidth(containerWidth, lineLength, isCommentEditor, isChromelessEditor) : isCommentEditor ? Math.floor(containerWidth - _consts.TABLE_OFFSET_IN_COMMENT_EDITOR) : (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH;
+    var shouldUpdateWidthToWidest = (0, _expValEquals.expValEquals)('platform_editor_table_resize_chromeless', 'isEnabled', true) && !isFullPageAppearance || isCommentEditor ? tableMaxWidth <= newWidth : !!isTableScalingEnabled && isFullWidthGuidelineActive;
+    var previewParentWidth = ((0, _expValEquals.expValEquals)('platform_editor_table_resize_chromeless', 'isEnabled', true) && !isFullPageAppearance || isCommentEditor) && shouldUpdateWidthToWidest ? tableMaxWidth : newWidth;
     (0, _scaleTable.previewScaleTable)(tableRef, {
       node: node,
       prevNode: node,
       start: pos + 1,
       parentWidth: previewParentWidth
-    }, editorView.domAtPos.bind(editorView), isTableScalingEnabled, allowFixedColumnWidthOption, isCommentEditor);
+    }, editorView.domAtPos.bind(editorView), isTableScalingEnabled, allowFixedColumnWidthOption, (0, _expValEquals.expValEquals)('platform_editor_table_resize_chromeless', 'isEnabled', true) ? !isFullPageAppearance : isCommentEditor);
     (0, _commands.chainCommands)(function (state, dispatch) {
       return switchToCenterAlignment(pos, node, newWidth, state, dispatch);
     }, (0, _misc.updateWidthToWidest)((0, _defineProperty2.default)({}, currentTableNodeLocalId, shouldUpdateWidthToWidest)))(state, dispatch);
     updateWidth(shouldUpdateWidthToWidest ? tableMaxWidth : newWidth);
     return newWidth;
-  }, [countFrames, isCommentEditor, isTableScalingEnabled, allowFixedColumnWidthOption, isFullWidthModeEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, lineLength, updateWidth, getPos, switchToCenterAlignment]);
+  }, [countFrames, isCommentEditor, isChromelessEditor, isFullPageAppearance, isTableScalingEnabled, allowFixedColumnWidthOption, isFullWidthModeEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, lineLength, updateWidth, getPos, switchToCenterAlignment]);
   var scheduleResize = (0, _react.useMemo)(function () {
     return (0, _rafSchd.default)(handleResize);
   }, [handleResize]);
@@ -330,7 +343,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       dispatch = editorView.dispatch;
     var pos = getPos();
     var currentTableNodeLocalId = (_node$attrs$localId2 = node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.localId) !== null && _node$attrs$localId2 !== void 0 ? _node$attrs$localId2 : '';
-    var tableMaxWidth = isCommentEditor ? undefined // Table's full-width in comment appearance inherit the width of the Editor/Renderer
+    var tableMaxWidth = (0, _expValEquals.expValEquals)('platform_editor_table_resize_chromeless', 'isEnabled', true) && !isFullPageAppearance || isCommentEditor ? undefined // Table's full-width in comment appearance inherit the width of the Editor/Renderer
     : (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) || (0, _expValEquals.expValEquals)('confluence_max_width_content_appearance', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH;
     newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? tableMaxWidth : newWidth;
     var tr = state.tr.setMeta(_tableWidth.pluginKey, {
@@ -371,8 +384,9 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
         // We use originalNewWidth in comment editor, because in comment editor
         // newWidth can be underined when table is resized to 'full-width'
         // scaleTable function needs number value to work correctly.
-        parentWidth: isCommentEditor ? originalNewWidth : newWidth
-      }, editorView.domAtPos.bind(editorView), pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent || false, isCommentEditor)(tr);
+        // remove isCommentEditor check when platform_editor_table_resize_chromeless is removed
+        parentWidth: (0, _expValEquals.expValEquals)('platform_editor_table_resize_chromeless', 'isEnabled', true) && !isFullPageAppearance || isCommentEditor ? originalNewWidth : newWidth
+      }, editorView.domAtPos.bind(editorView), pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent || false, (0, _expValEquals.expValEquals)('platform_editor_table_resize_chromeless', 'isEnabled', true) ? !isFullPageAppearance : isCommentEditor)(tr);
 
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -408,7 +422,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
       (_insm$session2 = _insm.insm.session) === null || _insm$session2 === void 0 || _insm$session2.endFeature('tableResize');
     }
     return newWidth;
-  }, [editorView, getPos, node, isCommentEditor, widthToWidest, endMeasure, displayGapCursor, displayGuideline, updateWidth, scheduleResize, onResizeStop, pluginInjectionApi, attachAnalyticsEvent, tableRef, isTableScalingEnabled, shouldUseIncreasedScalingPercent, formatMessage]);
+  }, [editorView, getPos, node, isCommentEditor, widthToWidest, endMeasure, displayGapCursor, displayGuideline, updateWidth, scheduleResize, onResizeStop, pluginInjectionApi, attachAnalyticsEvent, tableRef, isTableScalingEnabled, shouldUseIncreasedScalingPercent, formatMessage, isFullPageAppearance]);
   var handleTableSizeChangeOnKeypress = (0, _react.useCallback)(function (step) {
     var newWidth = width + step;
     if (newWidth < resizerMinWidth) {

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

@@ -101,7 +101,7 @@ var generateColgroupFromNode = exports.generateColgroupFromNode = function gener
   });
   return cols;
 };
-var generateColgroup = exports.generateColgroup = function generateColgroup(table, tableRef, shouldUseIncreasedScalingPercent, isCommentEditor) {
+var generateColgroup = exports.generateColgroup = function generateColgroup(table, tableRef, shouldUseIncreasedScalingPercent, isCommentOrChromelessEditor) {
   var cols = [];
   var map = _tableMap.TableMap.get(table);
 
@@ -116,7 +116,7 @@ var generateColgroup = exports.generateColgroup = function generateColgroup(tabl
         var _table$attrs;
         // if we have tableRef here, isTableScalingEnabled is true
         var scalePercent = 1;
-        if (isCommentEditor && !((_table$attrs = table.attrs) !== null && _table$attrs !== void 0 && _table$attrs.width)) {
+        if (isCommentOrChromelessEditor && !((_table$attrs = table.attrs) !== null && _table$attrs !== void 0 && _table$attrs.width)) {
           scalePercent = (0, _misc.getScalingPercentForTableWithoutWidth)(table, tableRef);
         } else {
           scalePercent = (0, _misc.getTableScalingPercent)(table, tableRef, shouldUseIncreasedScalingPercent);
@@ -156,14 +156,14 @@ var insertColgroupFromNode = exports.insertColgroupFromNode = function insertCol
   var isTableScalingEnabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var shouldRemove = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
   var shouldUseIncreasedScalingPercent = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  var isCommentEditor = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var isCommentOrChromelessEditor = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
   var colgroup = tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelector('colgroup');
   if (colgroup && shouldRemove) {
     tableRef === null || tableRef === void 0 || tableRef.removeChild(colgroup);
   }
-  colgroup = renderColgroupFromNode(table, isTableScalingEnabled ? tableRef !== null && tableRef !== void 0 ? tableRef : undefined : undefined, shouldUseIncreasedScalingPercent, isCommentEditor);
+  colgroup = renderColgroupFromNode(table, isTableScalingEnabled ? tableRef !== null && tableRef !== void 0 ? tableRef : undefined : undefined, shouldUseIncreasedScalingPercent, isCommentOrChromelessEditor);
   if (shouldRemove) {
     tableRef === null || tableRef === void 0 || tableRef.insertBefore(colgroup, tableRef === null || tableRef === void 0 ? void 0 : tableRef.firstChild);
   }
@@ -193,8 +193,8 @@ var isMinCellWidthTable = exports.isMinCellWidthTable = function isMinCellWidthT
   });
   return isTableMinCellWidth;
 };
-function renderColgroupFromNode(table, maybeTableRef, shouldUseIncreasedScalingPercent, isCommentEditor) {
-  var rendered = _model.DOMSerializer.renderSpec(document, ['colgroup', {}].concat((0, _toConsumableArray2.default)(generateColgroup(table, maybeTableRef, shouldUseIncreasedScalingPercent, isCommentEditor))));
+function renderColgroupFromNode(table, maybeTableRef, shouldUseIncreasedScalingPercent, isCommentOrChromelessEditor) {
+  var rendered = _model.DOMSerializer.renderSpec(document, ['colgroup', {}].concat((0, _toConsumableArray2.default)(generateColgroup(table, maybeTableRef, shouldUseIncreasedScalingPercent, isCommentOrChromelessEditor))));
 
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TABLE_OFFSET_IN_COMMENT_EDITOR = exports.TABLE_MAX_WIDTH = exports.TABLE_FULL_WIDTH = exports.TABLE_EDITOR_MARGIN = exports.MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = exports.MAX_SCALING_PERCENT = exports.FULL_WIDTH_EDITOR_CONTENT_WIDTH = exports.COLUMN_MIN_WIDTH = void 0;
+exports.TABLE_OFFSET_IN_COMMENT_EDITOR = exports.TABLE_MAX_WIDTH = exports.TABLE_FULL_WIDTH = exports.TABLE_EDITOR_MARGIN = exports.RESIZE_HANDLE_SPACING = exports.MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = exports.MAX_SCALING_PERCENT = exports.FULL_WIDTH_EDITOR_CONTENT_WIDTH = exports.COLUMN_MIN_WIDTH = void 0;
 var COLUMN_MIN_WIDTH = exports.COLUMN_MIN_WIDTH = 48;
 var TABLE_FULL_WIDTH = exports.TABLE_FULL_WIDTH = 1800;
 var TABLE_MAX_WIDTH = exports.TABLE_MAX_WIDTH = 4000;
@@ -14,4 +14,5 @@ var MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = exports.MAX_SCA
 var TABLE_EDITOR_MARGIN = exports.TABLE_EDITOR_MARGIN = 76;
 var COMMENT_AK_EDITOR_CONTENT_AREA_PADDING = 20;
 var COMMENT_PM_TABLE_RESIZING_PLUGIN_MARGIN = 12;
-var TABLE_OFFSET_IN_COMMENT_EDITOR = exports.TABLE_OFFSET_IN_COMMENT_EDITOR = 2 * (COMMENT_AK_EDITOR_CONTENT_AREA_PADDING + COMMENT_PM_TABLE_RESIZING_PLUGIN_MARGIN);
+var TABLE_OFFSET_IN_COMMENT_EDITOR = exports.TABLE_OFFSET_IN_COMMENT_EDITOR = 2 * (COMMENT_AK_EDITOR_CONTENT_AREA_PADDING + COMMENT_PM_TABLE_RESIZING_PLUGIN_MARGIN);
+var RESIZE_HANDLE_SPACING = exports.RESIZE_HANDLE_SPACING = 12;

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

@@ -115,7 +115,7 @@ function scaleTableTo(state, maxSize) {
 var previewScaleTable = exports.previewScaleTable = function previewScaleTable(tableRef, options, domAtPos) {
   var isTableScalingEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var allowFixedColumnWidthOption = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  var isCommentEditor = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var isCommentOrChromelessEditor = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   var node = options.node,
     start = options.start,
     parentWidth = options.parentWidth;
@@ -138,7 +138,7 @@ var previewScaleTable = exports.previewScaleTable = function previewScaleTable(t
     (0, _dom.syncStickyRowToTable)(tableRef);
     return;
   }
-  var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || isTableScalingEnabled && isCommentEditor;
+  var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || isTableScalingEnabled && isCommentOrChromelessEditor;
   var resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, false,
   // Here isTableScalingEnabled = false
   shouldUseIncreasedScalingPercent) : scale(tableRef, options, domAtPos, false, shouldUseIncreasedScalingPercent);
@@ -151,7 +151,7 @@ var previewScaleTable = exports.previewScaleTable = function previewScaleTable(t
 var scaleTable = exports.scaleTable = function scaleTable(tableRef, options, domAtPos, api) {
   var isTableScalingEnabledOnCurrentTable = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   var shouldUseIncreasedScalingPercent = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
-  var isCommentEditor = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var isCommentOrChromelessEditor = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
   return function (tr) {
     if (!tableRef) {
       return tr;
@@ -166,7 +166,7 @@ var scaleTable = exports.scaleTable = function scaleTable(tableRef, options, dom
       // To force reflow of columns upon delete.
       if (!isTableScalingEnabledOnCurrentTable) {
         var isTableScalingEnabled = false;
-        (0, _colgroup.insertColgroupFromNode)(tableRef, node, isTableScalingEnabled, undefined, shouldUseIncreasedScalingPercent, isCommentEditor);
+        (0, _colgroup.insertColgroupFromNode)(tableRef, node, isTableScalingEnabled, undefined, shouldUseIncreasedScalingPercent, isCommentOrChromelessEditor);
       }
       tr.setMeta('scrollIntoView', false);
       return tr;

package/dist/es2019/nodeviews/TableContainer.js

@@ -10,7 +10,7 @@ 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';
-import { TABLE_MAX_WIDTH, TABLE_FULL_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils/consts';
+import { TABLE_MAX_WIDTH, TABLE_FULL_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR, RESIZE_HANDLE_SPACING } from '../pm-plugins/table-resizing/utils/consts';
 import { getTableResizerContainerMaxWidthInCSS, getTableResizerContainerForFullPageWidthInCSS } from '../pm-plugins/table-resizing/utils/misc';
 import { ALIGN_CENTER, ALIGN_START } from '../pm-plugins/utils/alignment';
 import { TableCssClassName as ClassName } from '../types';
@@ -213,7 +213,6 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     maxResizerWidth
   } = useMemo(() => {
     let responsiveContainerWidth = 0;
-    const resizeHandleSpacing = 12;
     const padding = getPadding(containerWidth);
     // When Full width or Max 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
@@ -231,30 +230,39 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
       if (isTableScalingEnabled && Number.isFinite(lineLength) && lineLength !== undefined) {
         responsiveContainerWidth = lineLength;
       } else {
-        responsiveContainerWidth = containerWidth - padding * 2 - resizeHandleSpacing;
+        responsiveContainerWidth = containerWidth - padding * 2 - RESIZE_HANDLE_SPACING;
       }
     } else if (isCommentEditor) {
       responsiveContainerWidth = containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR;
+    } else if (isChromelessEditor && expValEquals('platform_editor_table_resize_chromeless', 'isEnabled', true)) {
+      // there's no padding included in chromeless appearance, so we need to reduce table
+      // width to ensure all controls are visible.
+      // use lineLength as the value is updated by scrollbar visibility changes
+      responsiveContainerWidth = Number.isFinite(lineLength) && lineLength !== undefined ? lineLength : containerWidth - RESIZE_HANDLE_SPACING;
     } 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 - padding * 2 : containerWidth - padding * 2 - resizeHandleSpacing;
+      responsiveContainerWidth = isTableScalingEnabled ? containerWidth - padding * 2 : containerWidth - padding * 2 - RESIZE_HANDLE_SPACING;
     }
 
     // Fix for HOT-119925: Ensure table width is properly constrained and responsive
     // For wide tables, ensure they don't exceed container width and can be scrolled
-    const calculatedWidth = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
+    const calculatedWidth =
+    // remove isCommentEditor check if platform_editor_table_resize_chromeless is cleaned up
+    !node.attrs.width && (expValEquals('platform_editor_table_resize_chromeless', 'isEnabled', true) && !isFullPageAppearance || isCommentEditor) ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
 
     // Ensure minimum width for usability while respecting container constraints
     const width = Math.max(calculatedWidth, Math.min(responsiveContainerWidth * 0.5, 300));
-    const maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true) ? TABLE_MAX_WIDTH : TABLE_FULL_WIDTH);
+
+    // remove isCommentEditor check if platform_editor_table_resize_chromeless is cleaned up
+    const maxResizerWidth = expValEquals('platform_editor_table_resize_chromeless', 'isEnabled', true) && !isFullPageAppearance || isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true) ? TABLE_MAX_WIDTH : TABLE_FULL_WIDTH);
     return {
       width,
       maxResizerWidth
     };
-  }, [containerWidth, isCommentEditor, isFullWidthModeEnabled, isMaxWidthModeEnabled, isTableScalingEnabled, lineLength, node.attrs.width, tableWidth]);
+  }, [containerWidth, isCommentEditor, isChromelessEditor, isFullWidthModeEnabled, isMaxWidthModeEnabled, isFullPageAppearance, isTableScalingEnabled, lineLength, node.attrs.width, tableWidth]);
   useEffect(() => {
     if (!isResizing) {
       tableWidthRef.current = width;
@@ -302,7 +310,8 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     pluginInjectionApi,
     onResizeStart,
     onResizeStop,
-    isCommentEditor
+    isCommentEditor,
+    isChromelessEditor
   };
   const isLivePageViewMode = mode === 'view';
   return /*#__PURE__*/React.createElement(AlignmentTableContainerWrapper, {

package/dist/es2019/nodeviews/TableResizer.js

@@ -20,7 +20,7 @@ import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plu
 import { updateWidthToWidest } from '../pm-plugins/commands/misc';
 import { META_KEYS } from '../pm-plugins/table-analytics';
 import { getColgroupChildrenLength } from '../pm-plugins/table-resizing/utils/colgroup';
-import { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_FULL_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils/consts';
+import { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_FULL_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR, RESIZE_HANDLE_SPACING } from '../pm-plugins/table-resizing/utils/consts';
 import { previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils/scale-table';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import { ALIGN_CENTER, ALIGN_START, normaliseAlignment, shouldChangeAlignmentToCenterResized } from '../pm-plugins/utils/alignment';
@@ -43,12 +43,12 @@ const getResizerHandleHeight = tableRef => {
   var _tableRef$clientHeigh;
   const 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';
@@ -70,6 +70,15 @@ const getPadding = containerWidth => {
     exposure: true
   }) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
 };
+const getTableMaxWidth = (containerWidth, lineLength, isCommentEditor, isChromelessEditor) => {
+  if (isCommentEditor) {
+    return Math.floor(containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR);
+  } else if (isChromelessEditor) {
+    return Number.isFinite(lineLength) && lineLength !== undefined ? lineLength : Math.floor(containerWidth - RESIZE_HANDLE_SPACING);
+  } else {
+    return expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true) ? TABLE_MAX_WIDTH : TABLE_FULL_WIDTH;
+  }
+};
 
 /**
  * When guidelines are outside the viewport, filter them out, do not show
@@ -129,6 +138,7 @@ export const TableResizer = ({
   pluginInjectionApi,
   isFullWidthModeEnabled,
   isCommentEditor,
+  isChromelessEditor,
   disabled
 }) => {
   var _editorView$state, _pluginInjectionApi$a2, _pluginInjectionApi$u2;
@@ -148,6 +158,7 @@ export const TableResizer = ({
   const {
     formatMessage
   } = useIntl();
+  const isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
   const currentSelection = (_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection;
   const tableFromSelection = useMemo(() => {
     return findTable(currentSelection);
@@ -285,7 +296,9 @@ export const TableResizer = ({
       return;
     }
     const editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * getPadding(containerWidth) : containerWidth;
-    const 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);
+    const closestSnap =
+    // remove isCommentEditor check if platform_editor_table_resize_chromeless is cleaned up
+    (expValEquals('platform_editor_table_resize_chromeless', 'isEnabled', true) && isFullPageAppearance || !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);
 
     // When snapping to the full width guideline, resize the table to be 1800px
@@ -296,15 +309,15 @@ export const TableResizer = ({
     const currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 ? 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 : '';
     const fullWidthGuideline = defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig).filter(guideline => guideline.isFullWidth)[0];
     const isFullWidthGuidelineActive = expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true) ? closestSnap && fullWidthGuideline && closestSnap.keys.includes(fullWidthGuideline.key) : closestSnap && closestSnap.keys.includes(fullWidthGuideline.key);
-    const tableMaxWidth = isCommentEditor ? Math.floor(containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR) : expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true) ? TABLE_MAX_WIDTH : TABLE_FULL_WIDTH;
-    const shouldUpdateWidthToWidest = isCommentEditor ? tableMaxWidth <= newWidth : !!isTableScalingEnabled && isFullWidthGuidelineActive;
-    const previewParentWidth = isCommentEditor && shouldUpdateWidthToWidest ? tableMaxWidth : newWidth;
+    const tableMaxWidth = expValEquals('platform_editor_table_resize_chromeless', 'isEnabled', true) ? getTableMaxWidth(containerWidth, lineLength, isCommentEditor, isChromelessEditor) : isCommentEditor ? Math.floor(containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR) : expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true) ? TABLE_MAX_WIDTH : TABLE_FULL_WIDTH;
+    const shouldUpdateWidthToWidest = expValEquals('platform_editor_table_resize_chromeless', 'isEnabled', true) && !isFullPageAppearance || isCommentEditor ? tableMaxWidth <= newWidth : !!isTableScalingEnabled && isFullWidthGuidelineActive;
+    const previewParentWidth = (expValEquals('platform_editor_table_resize_chromeless', 'isEnabled', true) && !isFullPageAppearance || isCommentEditor) && shouldUpdateWidthToWidest ? tableMaxWidth : newWidth;
     previewScaleTable(tableRef, {
       node,
       prevNode: node,
       start: pos + 1,
       parentWidth: previewParentWidth
-    }, editorView.domAtPos.bind(editorView), isTableScalingEnabled, allowFixedColumnWidthOption, isCommentEditor);
+    }, editorView.domAtPos.bind(editorView), isTableScalingEnabled, allowFixedColumnWidthOption, expValEquals('platform_editor_table_resize_chromeless', 'isEnabled', true) ? !isFullPageAppearance : isCommentEditor);
     chainCommands((state, dispatch) => {
       return switchToCenterAlignment(pos, node, newWidth, state, dispatch);
     }, updateWidthToWidest({
@@ -312,7 +325,7 @@ export const TableResizer = ({
     }))(state, dispatch);
     updateWidth(shouldUpdateWidthToWidest ? tableMaxWidth : newWidth);
     return newWidth;
-  }, [countFrames, isCommentEditor, isTableScalingEnabled, allowFixedColumnWidthOption, isFullWidthModeEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, lineLength, updateWidth, getPos, switchToCenterAlignment]);
+  }, [countFrames, isCommentEditor, isChromelessEditor, isFullPageAppearance, isTableScalingEnabled, allowFixedColumnWidthOption, isFullWidthModeEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, lineLength, updateWidth, getPos, switchToCenterAlignment]);
   const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
   const handleResizeStop = useCallback((originalState, delta) => {
     var _node$attrs$localId2, _node$attrs2, _pluginInjectionApi$u3;
@@ -325,7 +338,7 @@ export const TableResizer = ({
     } = editorView;
     const pos = getPos();
     const currentTableNodeLocalId = (_node$attrs$localId2 = node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.localId) !== null && _node$attrs$localId2 !== void 0 ? _node$attrs$localId2 : '';
-    const tableMaxWidth = isCommentEditor ? undefined // Table's full-width in comment appearance inherit the width of the Editor/Renderer
+    const tableMaxWidth = expValEquals('platform_editor_table_resize_chromeless', 'isEnabled', true) && !isFullPageAppearance || isCommentEditor ? undefined // Table's full-width in comment appearance inherit the width of the Editor/Renderer
     : expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true) ? TABLE_MAX_WIDTH : TABLE_FULL_WIDTH;
     newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? tableMaxWidth : newWidth;
     let tr = state.tr.setMeta(tableWidthPluginKey, {
@@ -367,8 +380,9 @@ export const TableResizer = ({
         // We use originalNewWidth in comment editor, because in comment editor
         // newWidth can be underined when table is resized to 'full-width'
         // scaleTable function needs number value to work correctly.
-        parentWidth: isCommentEditor ? originalNewWidth : newWidth
-      }, editorView.domAtPos.bind(editorView), pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent || false, isCommentEditor)(tr);
+        // remove isCommentEditor check when platform_editor_table_resize_chromeless is removed
+        parentWidth: expValEquals('platform_editor_table_resize_chromeless', 'isEnabled', true) && !isFullPageAppearance || isCommentEditor ? originalNewWidth : newWidth
+      }, editorView.domAtPos.bind(editorView), pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent || false, expValEquals('platform_editor_table_resize_chromeless', 'isEnabled', true) ? !isFullPageAppearance : isCommentEditor)(tr);
 
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
@@ -404,7 +418,7 @@ export const TableResizer = ({
       (_insm$session2 = insm.session) === null || _insm$session2 === void 0 ? void 0 : _insm$session2.endFeature('tableResize');
     }
     return newWidth;
-  }, [editorView, getPos, node, isCommentEditor, widthToWidest, endMeasure, displayGapCursor, displayGuideline, updateWidth, scheduleResize, onResizeStop, pluginInjectionApi, attachAnalyticsEvent, tableRef, isTableScalingEnabled, shouldUseIncreasedScalingPercent, formatMessage]);
+  }, [editorView, getPos, node, isCommentEditor, widthToWidest, endMeasure, displayGapCursor, displayGuideline, updateWidth, scheduleResize, onResizeStop, pluginInjectionApi, attachAnalyticsEvent, tableRef, isTableScalingEnabled, shouldUseIncreasedScalingPercent, formatMessage, isFullPageAppearance]);
   const handleTableSizeChangeOnKeypress = useCallback(step => {
     const newWidth = width + step;
     if (newWidth < resizerMinWidth) {

package/dist/es2019/pm-plugins/table-resizing/utils/colgroup.js

@@ -87,7 +87,7 @@ export const generateColgroupFromNode = (table, isCommentEditor, isChromelessEdi
   });
   return cols;
 };
-export const generateColgroup = (table, tableRef, shouldUseIncreasedScalingPercent, isCommentEditor) => {
+export const generateColgroup = (table, tableRef, shouldUseIncreasedScalingPercent, isCommentOrChromelessEditor) => {
   const cols = [];
   const map = TableMap.get(table);
 
@@ -102,7 +102,7 @@ export const generateColgroup = (table, tableRef, shouldUseIncreasedScalingPerce
         var _table$attrs;
         // if we have tableRef here, isTableScalingEnabled is true
         let scalePercent = 1;
-        if (isCommentEditor && !((_table$attrs = table.attrs) !== null && _table$attrs !== void 0 && _table$attrs.width)) {
+        if (isCommentOrChromelessEditor && !((_table$attrs = table.attrs) !== null && _table$attrs !== void 0 && _table$attrs.width)) {
           scalePercent = getScalingPercentForTableWithoutWidth(table, tableRef);
         } else {
           scalePercent = getTableScalingPercent(table, tableRef, shouldUseIncreasedScalingPercent);
@@ -136,14 +136,14 @@ export const generateColgroup = (table, tableRef, shouldUseIncreasedScalingPerce
   });
   return cols;
 };
-export const insertColgroupFromNode = (tableRef, table, isTableScalingEnabled = false, shouldRemove = true, shouldUseIncreasedScalingPercent = false, isCommentEditor = false) => {
+export const insertColgroupFromNode = (tableRef, table, isTableScalingEnabled = false, shouldRemove = true, shouldUseIncreasedScalingPercent = false, isCommentOrChromelessEditor = false) => {
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
   let colgroup = tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelector('colgroup');
   if (colgroup && shouldRemove) {
     tableRef === null || tableRef === void 0 ? void 0 : tableRef.removeChild(colgroup);
   }
-  colgroup = renderColgroupFromNode(table, isTableScalingEnabled ? tableRef !== null && tableRef !== void 0 ? tableRef : undefined : undefined, shouldUseIncreasedScalingPercent, isCommentEditor);
+  colgroup = renderColgroupFromNode(table, isTableScalingEnabled ? tableRef !== null && tableRef !== void 0 ? tableRef : undefined : undefined, shouldUseIncreasedScalingPercent, isCommentOrChromelessEditor);
   if (shouldRemove) {
     tableRef === null || tableRef === void 0 ? void 0 : tableRef.insertBefore(colgroup, tableRef === null || tableRef === void 0 ? void 0 : tableRef.firstChild);
   }
@@ -171,8 +171,8 @@ export const isMinCellWidthTable = table => {
   });
   return isTableMinCellWidth;
 };
-function renderColgroupFromNode(table, maybeTableRef, shouldUseIncreasedScalingPercent, isCommentEditor) {
-  const rendered = DOMSerializer.renderSpec(document, ['colgroup', {}, ...generateColgroup(table, maybeTableRef, shouldUseIncreasedScalingPercent, isCommentEditor)]);
+function renderColgroupFromNode(table, maybeTableRef, shouldUseIncreasedScalingPercent, isCommentOrChromelessEditor) {
+  const rendered = DOMSerializer.renderSpec(document, ['colgroup', {}, ...generateColgroup(table, maybeTableRef, shouldUseIncreasedScalingPercent, isCommentOrChromelessEditor)]);
 
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting

package/dist/es2019/pm-plugins/table-resizing/utils/consts.js

@@ -8,4 +8,5 @@ export const MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
 export const TABLE_EDITOR_MARGIN = 76;
 const COMMENT_AK_EDITOR_CONTENT_AREA_PADDING = 20;
 const COMMENT_PM_TABLE_RESIZING_PLUGIN_MARGIN = 12;
-export const TABLE_OFFSET_IN_COMMENT_EDITOR = 2 * (COMMENT_AK_EDITOR_CONTENT_AREA_PADDING + COMMENT_PM_TABLE_RESIZING_PLUGIN_MARGIN);
+export const TABLE_OFFSET_IN_COMMENT_EDITOR = 2 * (COMMENT_AK_EDITOR_CONTENT_AREA_PADDING + COMMENT_PM_TABLE_RESIZING_PLUGIN_MARGIN);
+export const RESIZE_HANDLE_SPACING = 12;

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

@@ -101,7 +101,7 @@ export function scaleTableTo(state, maxSize) {
   }
   return adjustColumnsWidths(newState, maxSize);
 }
-export const previewScaleTable = (tableRef, options, domAtPos, isTableScalingEnabled = false, allowFixedColumnWidthOption = false, isCommentEditor = false) => {
+export const previewScaleTable = (tableRef, options, domAtPos, isTableScalingEnabled = false, allowFixedColumnWidthOption = false, isCommentOrChromelessEditor = false) => {
   const {
     node,
     start,
@@ -126,7 +126,7 @@ export const previewScaleTable = (tableRef, options, domAtPos, isTableScalingEna
     syncStickyRowToTable(tableRef);
     return;
   }
-  const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || isTableScalingEnabled && isCommentEditor;
+  const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || isTableScalingEnabled && isCommentOrChromelessEditor;
   const resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, false,
   // Here isTableScalingEnabled = false
   shouldUseIncreasedScalingPercent) : scale(tableRef, options, domAtPos, false, shouldUseIncreasedScalingPercent);
@@ -136,7 +136,7 @@ export const previewScaleTable = (tableRef, options, domAtPos, isTableScalingEna
 };
 
 // Scale the table to meet new requirements (col, layout change etc)
-export const scaleTable = (tableRef, options, domAtPos, api, isTableScalingEnabledOnCurrentTable = false, shouldUseIncreasedScalingPercent = false, isCommentEditor = false) => tr => {
+export const scaleTable = (tableRef, options, domAtPos, api, isTableScalingEnabledOnCurrentTable = false, shouldUseIncreasedScalingPercent = false, isCommentOrChromelessEditor = false) => tr => {
   if (!tableRef) {
     return tr;
   }
@@ -152,7 +152,7 @@ export const scaleTable = (tableRef, options, domAtPos, api, isTableScalingEnabl
     // To force reflow of columns upon delete.
     if (!isTableScalingEnabledOnCurrentTable) {
       const isTableScalingEnabled = false;
-      insertColgroupFromNode(tableRef, node, isTableScalingEnabled, undefined, shouldUseIncreasedScalingPercent, isCommentEditor);
+      insertColgroupFromNode(tableRef, node, isTableScalingEnabled, undefined, shouldUseIncreasedScalingPercent, isCommentOrChromelessEditor);
     }
     tr.setMeta('scrollIntoView', false);
     return tr;