@atlaskit/editor-plugin-table 7.25.13 → 7.25.15

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 7.25.15
+
+### Patch Changes
+
+- [`be687d5675114`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/be687d5675114) -
+  [ux] Fixes a bug where scaled table viewed on a narrow screen loses scaling.
+- Updated dependencies
+
+## 7.25.14
+
+### Patch Changes
+
+- [#134066](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/134066)
+  [`43a1d7aed352b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/43a1d7aed352b) -
+  ED-24576: UNSTABLE_allowTableResizing in renderer added
+
 ## 7.25.13
 
 ### Patch Changes

package/dist/cjs/commands/insert.js

@@ -153,13 +153,14 @@ var insertRow = exports.insertRow = function insertRow(row, moveCursorToTheNewRo
     return true;
   };
 };
-var createTable = exports.createTable = function createTable(isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, editorAnalyticsAPI, isCommentEditor, isTableResizingEnabled) {
+var createTable = exports.createTable = function createTable(isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, editorAnalyticsAPI, isCommentEditor, isChromelessEditor, isTableResizingEnabled) {
   return function (state, dispatch) {
     var table = (0, _utils3.createTableWithWidth)({
       isTableScalingEnabled: isTableScalingEnabled,
       isTableAlignmentEnabled: isTableAlignmentEnabled,
       isFullWidthModeEnabled: isFullWidthModeEnabled,
       isCommentEditor: isCommentEditor,
+      isChromelessEditor: isChromelessEditor,
       isTableResizingEnabled: isTableResizingEnabled
     })(state.schema);
     if (dispatch) {
@@ -180,7 +181,7 @@ var createTable = exports.createTable = function createTable(isTableScalingEnabl
     return true;
   };
 };
-var insertTableWithSize = exports.insertTableWithSize = function insertTableWithSize(isFullWidthModeEnabled, isTableScalingEnabled, isTableAlignmentEnabled, editorAnalyticsAPI, isCommentEditor) {
+var insertTableWithSize = exports.insertTableWithSize = function insertTableWithSize(isFullWidthModeEnabled, isTableScalingEnabled, isTableAlignmentEnabled, editorAnalyticsAPI, isCommentEditor, isChromelessEditor) {
   return function (rowsCount, colsCount, inputMethod) {
     return function (_ref) {
       var tr = _ref.tr;
@@ -189,6 +190,7 @@ var insertTableWithSize = exports.insertTableWithSize = function insertTableWith
         isFullWidthModeEnabled: isFullWidthModeEnabled,
         isTableAlignmentEnabled: isTableAlignmentEnabled,
         isCommentEditor: isCommentEditor,
+        isChromelessEditor: isChromelessEditor,
         createTableProps: {
           rowsCount: rowsCount,
           colsCount: colsCount

package/dist/cjs/nodeviews/TableComponent.js

@@ -548,7 +548,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
         !!((_this$props$options2 = this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isTableScalingEnabled) && !!((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isCommentEditor);
         if (force || !isResizing && shouldUpdateColgroup) {
-          var _this$props$options4, _this$props$options5, _this$props$options6, _this$props$options7, _this$props$options8, _this$props$options9;
+          var _this$props$options4, _this$props$options5, _this$props$options6, _this$props$options7;
           var resizeState = (0, _utils4.getResizeState)({
             minWidth: _utils4.COLUMN_MIN_WIDTH,
             maxSize: tableRenderWidth,
@@ -571,14 +571,18 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             shouldScaleOnColgroupUpdate = true;
           }
           var scalePercent = 1;
-          if (!((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isCommentEditor) || (_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && tableNode.attrs.width) {
-            scalePercent = (0, _misc.getTableScalingPercent)(tableNode, this.table, shouldUseIncreasedScalingPercent);
-          } else {
-            scalePercent = (0, _misc.getScalingPercentForTableWithoutWidth)(tableNode, this.table);
-          }
-
-          // Request animation frame required for Firefox
           requestAnimationFrame(function () {
+            var _this2$props$options, _this2$props$options2;
+            // Scaling percent has to be calculated inside requestAnimationFrame, otherwise
+            // renderWidth calculated as `tableRef?.parentElement?.clientWidth`
+            // inside of getTableScalingPercent returns 0.
+            if (!((_this2$props$options = _this2.props.options) !== null && _this2$props$options !== void 0 && _this2$props$options.isCommentEditor) || (_this2$props$options2 = _this2.props.options) !== null && _this2$props$options2 !== void 0 && _this2$props$options2.isCommentEditor && tableNode.attrs.width) {
+              scalePercent = (0, _misc.getTableScalingPercent)(tableNode, _this2.table, shouldUseIncreasedScalingPercent);
+            } else {
+              scalePercent = (0, _misc.getScalingPercentForTableWithoutWidth)(tableNode, _this2.table);
+            }
+
+            // Request animation frame required for Firefox
             (0, _utils4.updateColgroup)(resizeState, _this2.table, tableNode, shouldScaleOnColgroupUpdate, scalePercent);
           });
         }
@@ -590,8 +594,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(_, prevState) {
-      var _this$props$options10,
-        _this$props$options11,
+      var _this$props$options8,
+        _this$props$options9,
         _this$wrapper,
         _this3 = this;
       var _this$props11 = this.props,
@@ -620,7 +624,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         shouldHandleColgroupUpdates = true;
       }
       var isTableScalingWithFixedColumnWidthsOptionEnabled = !!isTableScalingEnabled && tableWithFixedColumnWidthsOption;
-      var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && (0, _platformFeatureFlags.fg)('platform.editor.table.use-increased-scaling-percent') || !!isTableScalingEnabled && !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor);
+      var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && (0, _platformFeatureFlags.fg)('platform.editor.table.use-increased-scaling-percent') || !!isTableScalingEnabled && !!((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isCommentEditor);
       if (isTableScalingWithFixedColumnWidthsOptionEnabled && getNode().attrs.displayMode !== 'fixed') {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
@@ -631,7 +635,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isInDanger && !table) {
         (0, _commands.clearHoverSelection)()(view.state, view.dispatch);
       }
-      if ((_this$props$options11 = this.props.options) !== null && _this$props$options11 !== void 0 && _this$props$options11.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled) {
+      if ((_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled) {
         this.removeInlineTableWidth();
       }
       if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
@@ -718,7 +722,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this4 = this,
-        _this$props$options12,
+        _this$props$options10,
         _classnames;
       var _this$props12 = this.props,
         view = _this$props12.view,
@@ -837,7 +841,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         stickyScrollbar = _getEditorFeatureFlag8.stickyScrollbar,
         _getEditorFeatureFlag9 = _getEditorFeatureFlag8.tableWithFixedColumnWidthsOption,
         tableWithFixedColumnWidthsOption = _getEditorFeatureFlag9 === void 0 ? false : _getEditorFeatureFlag9;
-      var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption && (0, _platformFeatureFlags.fg)('platform.editor.table.use-increased-scaling-percent') || !!((_this$props$options12 = this.props.options) !== null && _this$props$options12 !== void 0 && _this$props$options12.isCommentEditor));
+      var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption && (0, _platformFeatureFlags.fg)('platform.editor.table.use-increased-scaling-percent') || !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor));
       return /*#__PURE__*/_react.default.createElement(_TableContainer.TableContainer
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       , {

package/dist/cjs/plugin.js

@@ -117,6 +117,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
             isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.fullWidthEnabled,
             isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
+            isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
             isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableResizingEnabled
           })(state.schema);
           return (_api$contentInsertion = api === null || api === void 0 || (_api$contentInsertion2 = api.contentInsertion) === null || _api$contentInsertion2 === void 0 || (_api$contentInsertion2 = _api$contentInsertion2.actions) === null || _api$contentInsertion2 === void 0 ? void 0 : _api$contentInsertion2.insert({
@@ -220,9 +221,11 @@ var tablesPlugin = function tablesPlugin(_ref) {
             fullWidthEnabled = _ref7$fullWidthEnable === void 0 ? false : _ref7$fullWidthEnable,
             _ref7$isCommentEditor = _ref7.isCommentEditor,
             isCommentEditor = _ref7$isCommentEditor === void 0 ? false : _ref7$isCommentEditor,
+            _ref7$isChromelessEdi = _ref7.isChromelessEditor,
+            isChromelessEditor = _ref7$isChromelessEdi === void 0 ? false : _ref7$isChromelessEdi,
             _ref7$tableResizingEn = _ref7.tableResizingEnabled,
             tableResizingEnabled = _ref7$tableResizingEn === void 0 ? false : _ref7$tableResizingEn;
-          return (0, _keymap.keymapPlugin)(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, tableResizingEnabled);
+          return (0, _keymap.keymapPlugin)(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, tableResizingEnabled);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -489,6 +492,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
               isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
               isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
               isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
+              isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
               isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableResizingEnabled
             })(state.schema);
             var tr = insert(tableNode);

package/dist/cjs/pm-plugins/keymap.js

@@ -26,12 +26,13 @@ function keymapPlugin(getEditorContainerWidth, api, editorAnalyticsAPI, dragAndD
   var isTableFixedColumnWidthsOptionEnabled = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : false;
   var shouldUseIncreasedScalingPercent = arguments.length > 11 ? arguments[11] : undefined;
   var isCommentEditor = arguments.length > 12 ? arguments[12] : undefined;
-  var isTableResizingEnabled = arguments.length > 13 ? arguments[13] : undefined;
+  var isChromelessEditor = arguments.length > 13 ? arguments[13] : undefined;
+  var isTableResizingEnabled = arguments.length > 14 ? arguments[14] : undefined;
   var list = {};
   var ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.ariaNotify;
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.nextCell.common, (0, _commands2.goToNextCell)(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(1), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.previousCell.common, (0, _commands2.goToNextCell)(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(-1), list);
-  (0, _keymaps.bindKeymapWithCommand)(_keymaps.toggleTable.common, (0, _insert.createTable)(isTableScalingEnabled, isTableAlignmentEnabled, !!isFullWidthEnabled, editorAnalyticsAPI, isCommentEditor, isTableResizingEnabled), list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.toggleTable.common, (0, _insert.createTable)(isTableScalingEnabled, isTableAlignmentEnabled, !!isFullWidthEnabled, editorAnalyticsAPI, isCommentEditor, isChromelessEditor, isTableResizingEnabled), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.backspace.common, (0, _commands.chainCommands)((0, _commandsWithAnalytics.deleteTableIfSelectedWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.KEYBOARD), (0, _commandsWithAnalytics.emptyMultipleCellsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.KEYBOARD)), list);
   (0, _keymaps.bindKeymapWithCommand)(_keymaps.backspace.common, _commands2.moveCursorBackward, list);
 

package/dist/cjs/utils/create.js

@@ -15,6 +15,7 @@ var createTableWithWidth = exports.createTableWithWidth = function createTableWi
     isTableAlignmentEnabled = _ref.isTableAlignmentEnabled,
     isFullWidthModeEnabled = _ref.isFullWidthModeEnabled,
     isCommentEditor = _ref.isCommentEditor,
+    isChromelessEditor = _ref.isChromelessEditor,
     isTableResizingEnabled = _ref.isTableResizingEnabled,
     createTableProps = _ref.createTableProps;
   return function (schema) {
@@ -25,7 +26,7 @@ var createTableWithWidth = exports.createTableWithWidth = function createTableWi
     if (isTableAlignmentEnabled && (isFullWidthModeEnabled || isCommentEditor)) {
       attrsOverrides.layout = 'align-start';
     }
-    if (isCommentEditor && isTableResizingEnabled) {
+    if (isCommentEditor && isTableResizingEnabled || isChromelessEditor) {
       attrsOverrides.tableWidth = 'inherit';
     }
     return (0, _utils.createTable)(_objectSpread(_objectSpread({

package/dist/es2019/commands/insert.js

@@ -119,12 +119,13 @@ export const insertRow = (row, moveCursorToTheNewRow, isCellBackgroundDuplicated
   }
   return true;
 };
-export const createTable = (isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, editorAnalyticsAPI, isCommentEditor, isTableResizingEnabled) => (state, dispatch) => {
+export const createTable = (isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, editorAnalyticsAPI, isCommentEditor, isChromelessEditor, isTableResizingEnabled) => (state, dispatch) => {
   const table = createTableWithWidth({
     isTableScalingEnabled,
     isTableAlignmentEnabled,
     isFullWidthModeEnabled,
     isCommentEditor,
+    isChromelessEditor,
     isTableResizingEnabled
   })(state.schema);
   if (dispatch) {
@@ -144,7 +145,7 @@ export const createTable = (isTableScalingEnabled, isTableAlignmentEnabled, isFu
   }
   return true;
 };
-export const insertTableWithSize = (isFullWidthModeEnabled, isTableScalingEnabled, isTableAlignmentEnabled, editorAnalyticsAPI, isCommentEditor) => (rowsCount, colsCount, inputMethod) => {
+export const insertTableWithSize = (isFullWidthModeEnabled, isTableScalingEnabled, isTableAlignmentEnabled, editorAnalyticsAPI, isCommentEditor, isChromelessEditor) => (rowsCount, colsCount, inputMethod) => {
   return ({
     tr
   }) => {
@@ -153,6 +154,7 @@ export const insertTableWithSize = (isFullWidthModeEnabled, isTableScalingEnable
       isFullWidthModeEnabled,
       isTableAlignmentEnabled,
       isCommentEditor,
+      isChromelessEditor,
       createTableProps: {
         rowsCount: rowsCount,
         colsCount: colsCount

package/dist/es2019/nodeviews/TableComponent.js

@@ -529,7 +529,7 @@ class TableComponent extends React.Component {
       // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
       !!((_this$props$options2 = this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isTableScalingEnabled) && !!((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isCommentEditor);
       if (force || !isResizing && shouldUpdateColgroup) {
-        var _this$props$options4, _this$props$options5, _this$props$options6, _this$props$options7, _this$props$options8, _this$props$options9;
+        var _this$props$options4, _this$props$options5, _this$props$options6, _this$props$options7;
         const resizeState = getResizeState({
           minWidth: COLUMN_MIN_WIDTH,
           maxSize: tableRenderWidth,
@@ -552,14 +552,18 @@ class TableComponent extends React.Component {
           shouldScaleOnColgroupUpdate = true;
         }
         let scalePercent = 1;
-        if (!((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isCommentEditor) || (_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && tableNode.attrs.width) {
-          scalePercent = getTableScalingPercent(tableNode, this.table, shouldUseIncreasedScalingPercent);
-        } else {
-          scalePercent = getScalingPercentForTableWithoutWidth(tableNode, this.table);
-        }
-
-        // Request animation frame required for Firefox
         requestAnimationFrame(() => {
+          var _this$props$options8, _this$props$options9;
+          // Scaling percent has to be calculated inside requestAnimationFrame, otherwise
+          // renderWidth calculated as `tableRef?.parentElement?.clientWidth`
+          // inside of getTableScalingPercent returns 0.
+          if (!((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isCommentEditor) || (_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && tableNode.attrs.width) {
+            scalePercent = getTableScalingPercent(tableNode, this.table, shouldUseIncreasedScalingPercent);
+          } else {
+            scalePercent = getScalingPercentForTableWithoutWidth(tableNode, this.table);
+          }
+
+          // Request animation frame required for Firefox
           updateColgroup(resizeState, this.table, tableNode, shouldScaleOnColgroupUpdate, scalePercent);
         });
       }

package/dist/es2019/plugin.js

@@ -105,6 +105,7 @@ const tablesPlugin = ({
           isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
           isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.fullWidthEnabled,
           isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
+          isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
           isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableResizingEnabled
         })(state.schema);
         return (_api$contentInsertion = api === null || api === void 0 ? void 0 : (_api$contentInsertion2 = api.contentInsertion) === null || _api$contentInsertion2 === void 0 ? void 0 : (_api$contentInsertion3 = _api$contentInsertion2.actions) === null || _api$contentInsertion3 === void 0 ? void 0 : _api$contentInsertion3.insert({
@@ -210,9 +211,10 @@ const tablesPlugin = ({
             isTableAlignmentEnabled = false,
             fullWidthEnabled = false,
             isCommentEditor = false,
+            isChromelessEditor = false,
             tableResizingEnabled = false
           } = options || {};
-          return keymapPlugin(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, tableResizingEnabled);
+          return keymapPlugin(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, tableResizingEnabled);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -481,6 +483,7 @@ const tablesPlugin = ({
             isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
             isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
             isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
+            isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
             isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableResizingEnabled
           })(state.schema);
           const tr = insert(tableNode);

package/dist/es2019/pm-plugins/keymap.js

@@ -8,13 +8,13 @@ import { addRowAroundSelection, changeColumnWidthByStepWithAnalytics, deleteSele
 import { activateNextResizeArea, initiateKeyboardColumnResizing, stopKeyboardColumnResizing } from '../commands/column-resize';
 import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand, createTable } from '../commands/insert';
 import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/commands-with-analytics';
-export function keymapPlugin(getEditorContainerWidth, api, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isTableAlignmentEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl, isCellBackgroundDuplicated = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent, isCommentEditor, isTableResizingEnabled) {
+export function keymapPlugin(getEditorContainerWidth, api, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isTableAlignmentEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl, isCellBackgroundDuplicated = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, isTableResizingEnabled) {
   var _pluginInjectionApi$a;
   const list = {};
   const ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.ariaNotify;
   bindKeymapWithCommand(nextCell.common, goToNextCell(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(1), list);
   bindKeymapWithCommand(previousCell.common, goToNextCell(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(-1), list);
-  bindKeymapWithCommand(toggleTable.common, createTable(isTableScalingEnabled, isTableAlignmentEnabled, !!isFullWidthEnabled, editorAnalyticsAPI, isCommentEditor, isTableResizingEnabled), list);
+  bindKeymapWithCommand(toggleTable.common, createTable(isTableScalingEnabled, isTableAlignmentEnabled, !!isFullWidthEnabled, editorAnalyticsAPI, isCommentEditor, isChromelessEditor, isTableResizingEnabled), list);
   bindKeymapWithCommand(backspace.common, chainCommands(deleteTableIfSelectedWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD), emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD)), list);
   bindKeymapWithCommand(backspace.common, moveCursorBackward, list);
 

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

@@ -82,7 +82,7 @@ export const getTableScalingPercent = (table, tableRef, shouldUseIncreasedScalin
   var _tableRef$parentEleme;
   const maxScalingPercent = shouldUseIncreasedScalingPercent ? MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION : MAX_SCALING_PERCENT;
   const tableWidth = getTableContainerElementWidth(table);
-  let renderWidth = (tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || tableWidth;
+  const renderWidth = (tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$parentEleme = tableRef.parentElement) === null || _tableRef$parentEleme === void 0 ? void 0 : _tableRef$parentEleme.clientWidth) || tableWidth;
   // minus 1 here to avoid any 1px scroll in Firefox
   let scalePercent = (renderWidth - 1) / tableWidth;
   scalePercent = Math.max(scalePercent, 1 - maxScalingPercent);

package/dist/es2019/utils/create.js

@@ -5,6 +5,7 @@ export const createTableWithWidth = ({
   isTableAlignmentEnabled,
   isFullWidthModeEnabled,
   isCommentEditor,
+  isChromelessEditor,
   isTableResizingEnabled,
   createTableProps
 }) => schema => {
@@ -15,7 +16,7 @@ export const createTableWithWidth = ({
   if (isTableAlignmentEnabled && (isFullWidthModeEnabled || isCommentEditor)) {
     attrsOverrides.layout = 'align-start';
   }
-  if (isCommentEditor && isTableResizingEnabled) {
+  if (isCommentEditor && isTableResizingEnabled || isChromelessEditor) {
     attrsOverrides.tableWidth = 'inherit';
   }
   return createTable({

package/dist/esm/commands/insert.js

@@ -144,13 +144,14 @@ export var insertRow = function insertRow(row, moveCursorToTheNewRow, isCellBack
     return true;
   };
 };
-export var createTable = function createTable(isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, editorAnalyticsAPI, isCommentEditor, isTableResizingEnabled) {
+export var createTable = function createTable(isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, editorAnalyticsAPI, isCommentEditor, isChromelessEditor, isTableResizingEnabled) {
   return function (state, dispatch) {
     var table = createTableWithWidth({
       isTableScalingEnabled: isTableScalingEnabled,
       isTableAlignmentEnabled: isTableAlignmentEnabled,
       isFullWidthModeEnabled: isFullWidthModeEnabled,
       isCommentEditor: isCommentEditor,
+      isChromelessEditor: isChromelessEditor,
       isTableResizingEnabled: isTableResizingEnabled
     })(state.schema);
     if (dispatch) {
@@ -171,7 +172,7 @@ export var createTable = function createTable(isTableScalingEnabled, isTableAlig
     return true;
   };
 };
-export var insertTableWithSize = function insertTableWithSize(isFullWidthModeEnabled, isTableScalingEnabled, isTableAlignmentEnabled, editorAnalyticsAPI, isCommentEditor) {
+export var insertTableWithSize = function insertTableWithSize(isFullWidthModeEnabled, isTableScalingEnabled, isTableAlignmentEnabled, editorAnalyticsAPI, isCommentEditor, isChromelessEditor) {
   return function (rowsCount, colsCount, inputMethod) {
     return function (_ref) {
       var tr = _ref.tr;
@@ -180,6 +181,7 @@ export var insertTableWithSize = function insertTableWithSize(isFullWidthModeEna
         isFullWidthModeEnabled: isFullWidthModeEnabled,
         isTableAlignmentEnabled: isTableAlignmentEnabled,
         isCommentEditor: isCommentEditor,
+        isChromelessEditor: isChromelessEditor,
         createTableProps: {
           rowsCount: rowsCount,
           colsCount: colsCount

package/dist/esm/nodeviews/TableComponent.js

@@ -541,7 +541,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
         !!((_this$props$options2 = this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isTableScalingEnabled) && !!((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isCommentEditor);
         if (force || !isResizing && shouldUpdateColgroup) {
-          var _this$props$options4, _this$props$options5, _this$props$options6, _this$props$options7, _this$props$options8, _this$props$options9;
+          var _this$props$options4, _this$props$options5, _this$props$options6, _this$props$options7;
           var resizeState = getResizeState({
             minWidth: COLUMN_MIN_WIDTH,
             maxSize: tableRenderWidth,
@@ -564,14 +564,18 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
             shouldScaleOnColgroupUpdate = true;
           }
           var scalePercent = 1;
-          if (!((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isCommentEditor) || (_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && tableNode.attrs.width) {
-            scalePercent = getTableScalingPercent(tableNode, this.table, shouldUseIncreasedScalingPercent);
-          } else {
-            scalePercent = getScalingPercentForTableWithoutWidth(tableNode, this.table);
-          }
-
-          // Request animation frame required for Firefox
           requestAnimationFrame(function () {
+            var _this2$props$options, _this2$props$options2;
+            // Scaling percent has to be calculated inside requestAnimationFrame, otherwise
+            // renderWidth calculated as `tableRef?.parentElement?.clientWidth`
+            // inside of getTableScalingPercent returns 0.
+            if (!((_this2$props$options = _this2.props.options) !== null && _this2$props$options !== void 0 && _this2$props$options.isCommentEditor) || (_this2$props$options2 = _this2.props.options) !== null && _this2$props$options2 !== void 0 && _this2$props$options2.isCommentEditor && tableNode.attrs.width) {
+              scalePercent = getTableScalingPercent(tableNode, _this2.table, shouldUseIncreasedScalingPercent);
+            } else {
+              scalePercent = getScalingPercentForTableWithoutWidth(tableNode, _this2.table);
+            }
+
+            // Request animation frame required for Firefox
             updateColgroup(resizeState, _this2.table, tableNode, shouldScaleOnColgroupUpdate, scalePercent);
           });
         }
@@ -583,8 +587,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(_, prevState) {
-      var _this$props$options10,
-        _this$props$options11,
+      var _this$props$options8,
+        _this$props$options9,
         _this$wrapper,
         _this3 = this;
       var _this$props11 = this.props,
@@ -613,7 +617,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         shouldHandleColgroupUpdates = true;
       }
       var isTableScalingWithFixedColumnWidthsOptionEnabled = !!isTableScalingEnabled && tableWithFixedColumnWidthsOption;
-      var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent') || !!isTableScalingEnabled && !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor);
+      var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent') || !!isTableScalingEnabled && !!((_this$props$options8 = this.props.options) !== null && _this$props$options8 !== void 0 && _this$props$options8.isCommentEditor);
       if (isTableScalingWithFixedColumnWidthsOptionEnabled && getNode().attrs.displayMode !== 'fixed') {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
@@ -624,7 +628,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isInDanger && !table) {
         clearHoverSelection()(view.state, view.dispatch);
       }
-      if ((_this$props$options11 = this.props.options) !== null && _this$props$options11 !== void 0 && _this$props$options11.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled) {
+      if ((_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled) {
         this.removeInlineTableWidth();
       }
       if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
@@ -711,7 +715,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this4 = this,
-        _this$props$options12,
+        _this$props$options10,
         _classnames;
       var _this$props12 = this.props,
         view = _this$props12.view,
@@ -830,7 +834,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         stickyScrollbar = _getEditorFeatureFlag8.stickyScrollbar,
         _getEditorFeatureFlag9 = _getEditorFeatureFlag8.tableWithFixedColumnWidthsOption,
         tableWithFixedColumnWidthsOption = _getEditorFeatureFlag9 === void 0 ? false : _getEditorFeatureFlag9;
-      var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption && fg('platform.editor.table.use-increased-scaling-percent') || !!((_this$props$options12 = this.props.options) !== null && _this$props$options12 !== void 0 && _this$props$options12.isCommentEditor));
+      var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption && fg('platform.editor.table.use-increased-scaling-percent') || !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor));
       return /*#__PURE__*/React.createElement(TableContainer
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       , {

package/dist/esm/plugin.js

@@ -110,6 +110,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
             isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.fullWidthEnabled,
             isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
+            isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
             isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableResizingEnabled
           })(state.schema);
           return (_api$contentInsertion = api === null || api === void 0 || (_api$contentInsertion2 = api.contentInsertion) === null || _api$contentInsertion2 === void 0 || (_api$contentInsertion2 = _api$contentInsertion2.actions) === null || _api$contentInsertion2 === void 0 ? void 0 : _api$contentInsertion2.insert({
@@ -213,9 +214,11 @@ var tablesPlugin = function tablesPlugin(_ref) {
             fullWidthEnabled = _ref7$fullWidthEnable === void 0 ? false : _ref7$fullWidthEnable,
             _ref7$isCommentEditor = _ref7.isCommentEditor,
             isCommentEditor = _ref7$isCommentEditor === void 0 ? false : _ref7$isCommentEditor,
+            _ref7$isChromelessEdi = _ref7.isChromelessEditor,
+            isChromelessEditor = _ref7$isChromelessEdi === void 0 ? false : _ref7$isChromelessEdi,
             _ref7$tableResizingEn = _ref7.tableResizingEnabled,
             tableResizingEnabled = _ref7$tableResizingEn === void 0 ? false : _ref7$tableResizingEn;
-          return keymapPlugin(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, tableResizingEnabled);
+          return keymapPlugin(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, tableResizingEnabled);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -482,6 +485,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
               isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
               isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
               isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
+              isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
               isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableResizingEnabled
             })(state.schema);
             var tr = insert(tableNode);

package/dist/esm/pm-plugins/keymap.js

@@ -19,12 +19,13 @@ export function keymapPlugin(getEditorContainerWidth, api, editorAnalyticsAPI, d
   var isTableFixedColumnWidthsOptionEnabled = arguments.length > 10 && arguments[10] !== undefined ? arguments[10] : false;
   var shouldUseIncreasedScalingPercent = arguments.length > 11 ? arguments[11] : undefined;
   var isCommentEditor = arguments.length > 12 ? arguments[12] : undefined;
-  var isTableResizingEnabled = arguments.length > 13 ? arguments[13] : undefined;
+  var isChromelessEditor = arguments.length > 13 ? arguments[13] : undefined;
+  var isTableResizingEnabled = arguments.length > 14 ? arguments[14] : undefined;
   var list = {};
   var ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.ariaNotify;
   bindKeymapWithCommand(nextCell.common, goToNextCell(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(1), list);
   bindKeymapWithCommand(previousCell.common, goToNextCell(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(-1), list);
-  bindKeymapWithCommand(toggleTable.common, createTable(isTableScalingEnabled, isTableAlignmentEnabled, !!isFullWidthEnabled, editorAnalyticsAPI, isCommentEditor, isTableResizingEnabled), list);
+  bindKeymapWithCommand(toggleTable.common, createTable(isTableScalingEnabled, isTableAlignmentEnabled, !!isFullWidthEnabled, editorAnalyticsAPI, isCommentEditor, isChromelessEditor, isTableResizingEnabled), list);
   bindKeymapWithCommand(backspace.common, chainCommands(deleteTableIfSelectedWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD), emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD)), list);
   bindKeymapWithCommand(backspace.common, moveCursorBackward, list);
 

package/dist/esm/utils/create.js

@@ -8,6 +8,7 @@ export var createTableWithWidth = function createTableWithWidth(_ref) {
     isTableAlignmentEnabled = _ref.isTableAlignmentEnabled,
     isFullWidthModeEnabled = _ref.isFullWidthModeEnabled,
     isCommentEditor = _ref.isCommentEditor,
+    isChromelessEditor = _ref.isChromelessEditor,
     isTableResizingEnabled = _ref.isTableResizingEnabled,
     createTableProps = _ref.createTableProps;
   return function (schema) {
@@ -18,7 +19,7 @@ export var createTableWithWidth = function createTableWithWidth(_ref) {
     if (isTableAlignmentEnabled && (isFullWidthModeEnabled || isCommentEditor)) {
       attrsOverrides.layout = 'align-start';
     }
-    if (isCommentEditor && isTableResizingEnabled) {
+    if (isCommentEditor && isTableResizingEnabled || isChromelessEditor) {
       attrsOverrides.tableWidth = 'inherit';
     }
     return createTable(_objectSpread(_objectSpread({

package/dist/types/commands/insert.d.ts

@@ -9,5 +9,5 @@ export declare const addColumnBefore: (api: PluginInjectionAPI | undefined | nul
 export declare const addColumnAfter: (api: PluginInjectionAPI | undefined | null, isTableScalingEnabled?: boolean, isCellBackgroundDuplicated?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean) => Command;
 export declare const insertColumn: (api: PluginInjectionAPI | undefined | null, isTableScalingEnabled?: boolean, isCellBackgroundDuplicated?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean) => (column: number) => Command;
 export declare const insertRow: (row: number, moveCursorToTheNewRow: boolean, isCellBackgroundDuplicated?: boolean) => Command;
-export declare const createTable: (isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthModeEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined | null, isCommentEditor?: boolean, isTableResizingEnabled?: boolean) => Command;
-export declare const insertTableWithSize: (isFullWidthModeEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, isCommentEditor?: boolean) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;
+export declare const createTable: (isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthModeEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined | null, isCommentEditor?: boolean, isChromelessEditor?: boolean, isTableResizingEnabled?: boolean) => Command;
+export declare const insertTableWithSize: (isFullWidthModeEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, isCommentEditor?: boolean, isChromelessEditor?: boolean) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;

package/dist/types/pm-plugins/keymap.d.ts

@@ -3,5 +3,5 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { PluginInjectionAPI, PluginInjectionAPIWithA11y } from '../types';
-export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape, isCellBackgroundDuplicated?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean, isTableResizingEnabled?: boolean): SafePlugin;
+export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape, isCellBackgroundDuplicated?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean, isChromelessEditor?: boolean, isTableResizingEnabled?: boolean): SafePlugin;
 export default keymapPlugin;

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

@@ -1,9 +1,10 @@
 import type { Schema } from '@atlaskit/editor-prosemirror/model';
-export declare const createTableWithWidth: ({ isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, isCommentEditor, isTableResizingEnabled, createTableProps, }: {
+export declare const createTableWithWidth: ({ isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, isCommentEditor, isChromelessEditor, isTableResizingEnabled, createTableProps, }: {
     isTableScalingEnabled?: boolean | undefined;
     isTableAlignmentEnabled?: boolean | undefined;
     isFullWidthModeEnabled?: boolean | undefined;
     isCommentEditor?: boolean | undefined;
+    isChromelessEditor?: boolean | undefined;
     isTableResizingEnabled?: boolean | undefined;
     createTableProps?: {
         rowsCount?: number | undefined;

package/dist/types-ts4.5/commands/insert.d.ts

@@ -9,5 +9,5 @@ export declare const addColumnBefore: (api: PluginInjectionAPI | undefined | nul
 export declare const addColumnAfter: (api: PluginInjectionAPI | undefined | null, isTableScalingEnabled?: boolean, isCellBackgroundDuplicated?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean) => Command;
 export declare const insertColumn: (api: PluginInjectionAPI | undefined | null, isTableScalingEnabled?: boolean, isCellBackgroundDuplicated?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean) => (column: number) => Command;
 export declare const insertRow: (row: number, moveCursorToTheNewRow: boolean, isCellBackgroundDuplicated?: boolean) => Command;
-export declare const createTable: (isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthModeEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined | null, isCommentEditor?: boolean, isTableResizingEnabled?: boolean) => Command;
-export declare const insertTableWithSize: (isFullWidthModeEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, isCommentEditor?: boolean) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;
+export declare const createTable: (isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthModeEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined | null, isCommentEditor?: boolean, isChromelessEditor?: boolean, isTableResizingEnabled?: boolean) => Command;
+export declare const insertTableWithSize: (isFullWidthModeEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, isCommentEditor?: boolean, isChromelessEditor?: boolean) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;

package/dist/types-ts4.5/pm-plugins/keymap.d.ts

@@ -3,5 +3,5 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { PluginInjectionAPI, PluginInjectionAPIWithA11y } from '../types';
-export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape, isCellBackgroundDuplicated?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean, isTableResizingEnabled?: boolean): SafePlugin;
+export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape, isCellBackgroundDuplicated?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean, isChromelessEditor?: boolean, isTableResizingEnabled?: boolean): SafePlugin;
 export default keymapPlugin;

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

@@ -1,9 +1,10 @@
 import type { Schema } from '@atlaskit/editor-prosemirror/model';
-export declare const createTableWithWidth: ({ isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, isCommentEditor, isTableResizingEnabled, createTableProps, }: {
+export declare const createTableWithWidth: ({ isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, isCommentEditor, isChromelessEditor, isTableResizingEnabled, createTableProps, }: {
     isTableScalingEnabled?: boolean | undefined;
     isTableAlignmentEnabled?: boolean | undefined;
     isFullWidthModeEnabled?: boolean | undefined;
     isCommentEditor?: boolean | undefined;
+    isChromelessEditor?: boolean | undefined;
     isTableResizingEnabled?: boolean | undefined;
     createTableProps?: {
         rowsCount?: number | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.25.13",
+	"version": "7.25.15",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 		"@atlaskit/adf-schema": "^40.9.0",
 		"@atlaskit/button": "^20.1.0",
 		"@atlaskit/custom-steps": "^0.7.0",
-		"@atlaskit/editor-common": "^88.2.0",
+		"@atlaskit/editor-common": "^88.4.0",
 		"@atlaskit/editor-palette": "1.6.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",

package/src/commands/insert.ts

@@ -249,6 +249,7 @@ export const createTable =
 		isFullWidthModeEnabled?: boolean,
 		editorAnalyticsAPI?: EditorAnalyticsAPI | undefined | null,
 		isCommentEditor?: boolean,
+		isChromelessEditor?: boolean,
 		isTableResizingEnabled?: boolean,
 	): Command =>
 	(state, dispatch) => {
@@ -257,6 +258,7 @@ export const createTable =
 			isTableAlignmentEnabled,
 			isFullWidthModeEnabled,
 			isCommentEditor,
+			isChromelessEditor,
 			isTableResizingEnabled,
 		})(state.schema);
 
@@ -284,6 +286,7 @@ export const insertTableWithSize =
 		isTableAlignmentEnabled?: boolean,
 		editorAnalyticsAPI?: EditorAnalyticsAPI,
 		isCommentEditor?: boolean,
+		isChromelessEditor?: boolean,
 	) =>
 	(rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER): EditorCommand => {
 		return ({ tr }) => {
@@ -292,6 +295,7 @@ export const insertTableWithSize =
 				isFullWidthModeEnabled,
 				isTableAlignmentEnabled,
 				isCommentEditor,
+				isChromelessEditor,
 				createTableProps: {
 					rowsCount: rowsCount,
 					colsCount: colsCount,

package/src/nodeviews/TableComponent.tsx

@@ -483,21 +483,24 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				}
 
 				let scalePercent = 1;
-				if (
-					!this.props.options?.isCommentEditor ||
-					(this.props.options?.isCommentEditor && tableNode.attrs.width)
-				) {
-					scalePercent = getTableScalingPercent(
-						tableNode,
-						this.table!,
-						shouldUseIncreasedScalingPercent,
-					);
-				} else {
-					scalePercent = getScalingPercentForTableWithoutWidth(tableNode, this.table!);
-				}
-
-				// Request animation frame required for Firefox
 				requestAnimationFrame(() => {
+					// Scaling percent has to be calculated inside requestAnimationFrame, otherwise
+					// renderWidth calculated as `tableRef?.parentElement?.clientWidth`
+					// inside of getTableScalingPercent returns 0.
+					if (
+						!this.props.options?.isCommentEditor ||
+						(this.props.options?.isCommentEditor && tableNode.attrs.width)
+					) {
+						scalePercent = getTableScalingPercent(
+							tableNode,
+							this.table!,
+							shouldUseIncreasedScalingPercent,
+						);
+					} else {
+						scalePercent = getScalingPercentForTableWithoutWidth(tableNode, this.table!);
+					}
+
+					// Request animation frame required for Firefox
 					updateColgroup(
 						resizeState,
 						this.table!,

package/src/plugin.tsx

@@ -218,6 +218,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 						isTableAlignmentEnabled: options?.isTableAlignmentEnabled,
 						isFullWidthModeEnabled: options?.fullWidthEnabled,
 						isCommentEditor: options?.isCommentEditor,
+						isChromelessEditor: options?.isChromelessEditor,
 						isTableResizingEnabled: options?.tableResizingEnabled,
 					})(state.schema);
 
@@ -360,6 +361,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							isTableAlignmentEnabled = false,
 							fullWidthEnabled = false,
 							isCommentEditor = false,
+							isChromelessEditor = false,
 							tableResizingEnabled = false,
 						} = options || ({} as TablePluginOptions);
 
@@ -377,6 +379,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							isTableFixedColumnWidthsOptionEnabled,
 							shouldUseIncreasedScalingPercent,
 							isCommentEditor,
+							isChromelessEditor,
 							tableResizingEnabled,
 						);
 					},
@@ -705,6 +708,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							isTableAlignmentEnabled: options?.isTableAlignmentEnabled,
 							isFullWidthModeEnabled: tableState?.isFullWidthModeEnabled,
 							isCommentEditor: options?.isCommentEditor,
+							isChromelessEditor: options?.isChromelessEditor,
 							isTableResizingEnabled: options?.tableResizingEnabled,
 						})(state.schema);
 

package/src/pm-plugins/keymap.ts

@@ -71,6 +71,7 @@ export function keymapPlugin(
 	isTableFixedColumnWidthsOptionEnabled = false,
 	shouldUseIncreasedScalingPercent?: boolean,
 	isCommentEditor?: boolean,
+	isChromelessEditor?: boolean,
 	isTableResizingEnabled?: boolean,
 ): SafePlugin {
 	const list = {};
@@ -95,6 +96,7 @@ export function keymapPlugin(
 			!!isFullWidthEnabled,
 			editorAnalyticsAPI,
 			isCommentEditor,
+			isChromelessEditor,
 			isTableResizingEnabled,
 		),
 		list,

package/src/pm-plugins/table-resizing/utils/misc.ts

@@ -135,7 +135,7 @@ export const getTableScalingPercent = (
 		: MAX_SCALING_PERCENT;
 
 	const tableWidth = getTableContainerElementWidth(table);
-	let renderWidth = tableRef?.parentElement?.clientWidth || tableWidth;
+	const renderWidth = tableRef?.parentElement?.clientWidth || tableWidth;
 	// minus 1 here to avoid any 1px scroll in Firefox
 	let scalePercent = (renderWidth - 1) / tableWidth;
 	scalePercent = Math.max(scalePercent, 1 - maxScalingPercent);

package/src/utils/create.ts

@@ -15,6 +15,7 @@ export const createTableWithWidth =
 		isTableAlignmentEnabled,
 		isFullWidthModeEnabled,
 		isCommentEditor,
+		isChromelessEditor,
 		isTableResizingEnabled,
 		createTableProps,
 	}: {
@@ -22,6 +23,7 @@ export const createTableWithWidth =
 		isTableAlignmentEnabled?: boolean;
 		isFullWidthModeEnabled?: boolean;
 		isCommentEditor?: boolean;
+		isChromelessEditor?: boolean;
 		isTableResizingEnabled?: boolean;
 		createTableProps?: {
 			rowsCount?: number;
@@ -36,7 +38,7 @@ export const createTableWithWidth =
 		if (isTableAlignmentEnabled && (isFullWidthModeEnabled || isCommentEditor)) {
 			attrsOverrides.layout = 'align-start';
 		}
-		if (isCommentEditor && isTableResizingEnabled) {
+		if ((isCommentEditor && isTableResizingEnabled) || isChromelessEditor) {
 			attrsOverrides.tableWidth = 'inherit';
 		}