@atlaskit/editor-plugin-table 7.21.2 → 7.21.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-table
 
+## 7.21.3
+
+### Patch Changes
+
+- [`3b20c735bc9ee`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3b20c735bc9ee) -
+  [ux] Insert full-width table in comment editor when table resizing is enabled.
+
 ## 7.21.2
 
 ### Patch Changes

package/dist/cjs/commands/insert.js

@@ -150,12 +150,14 @@ var insertRow = exports.insertRow = function insertRow(row, moveCursorToTheNewRo
     return true;
   };
 };
-var createTable = exports.createTable = function createTable(isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, editorAnalyticsAPI) {
+var createTable = exports.createTable = function createTable(isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, editorAnalyticsAPI, isCommentEditor, isTableResizingEnabled) {
   return function (state, dispatch) {
     var table = (0, _utils3.createTableWithWidth)({
       isTableScalingEnabled: isTableScalingEnabled,
       isTableAlignmentEnabled: isTableAlignmentEnabled,
-      isFullWidthModeEnabled: isFullWidthModeEnabled
+      isFullWidthModeEnabled: isFullWidthModeEnabled,
+      isCommentEditor: isCommentEditor,
+      isTableResizingEnabled: isTableResizingEnabled
     })(state.schema);
     if (dispatch) {
       var tr = (0, _utils.safeInsert)(table)(state.tr).scrollIntoView();
@@ -175,7 +177,7 @@ var createTable = exports.createTable = function createTable(isTableScalingEnabl
     return true;
   };
 };
-var insertTableWithSize = exports.insertTableWithSize = function insertTableWithSize(isFullWidthModeEnabled, isTableScalingEnabled, isTableAlignmentEnabled, editorAnalyticsAPI) {
+var insertTableWithSize = exports.insertTableWithSize = function insertTableWithSize(isFullWidthModeEnabled, isTableScalingEnabled, isTableAlignmentEnabled, editorAnalyticsAPI, isCommentEditor) {
   return function (rowsCount, colsCount, inputMethod) {
     return function (_ref) {
       var tr = _ref.tr;
@@ -183,6 +185,7 @@ var insertTableWithSize = exports.insertTableWithSize = function insertTableWith
         isTableScalingEnabled: isTableScalingEnabled,
         isFullWidthModeEnabled: isFullWidthModeEnabled,
         isTableAlignmentEnabled: isTableAlignmentEnabled,
+        isCommentEditor: isCommentEditor,
         createTableProps: {
           rowsCount: rowsCount,
           colsCount: colsCount

package/dist/cjs/nodeviews/TableComponent.js

@@ -355,7 +355,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getNode = _this$props7.getNode,
         getEditorFeatureFlags = _this$props7.getEditorFeatureFlags,
         isTableScalingEnabled = _this$props7.isTableScalingEnabled;
-      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.live-pages-sorting_4malx')) {
+      if ((0, _platformFeatureFlags.fg)('platform.editor.table.live-pages-sorting_4malx')) {
         var _this$props$pluginInj;
         var _ref = ((_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 || (_this$props$pluginInj = _this$props$pluginInj.editorViewMode) === null || _this$props$pluginInj === void 0 ? void 0 : _this$props$pluginInj.sharedState.currentState()) || {},
           mode = _ref.mode;
@@ -444,7 +444,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (!(options !== null && options !== void 0 && options.isTableResizingEnabled) && allowColumnResizing) {
         window.removeEventListener('resize', this.handleWindowResizeDebounced);
       }
-      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.live-pages-sorting_4malx')) {
+      if ((0, _platformFeatureFlags.fg)('platform.editor.table.live-pages-sorting_4malx')) {
         var _this$table2;
         this === null || this === void 0 || (_this$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.removeEventListener('mouseenter', this.handleMouseEnter);
       }
@@ -502,7 +502,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           _getEditorFeatureFlag5 = _getEditorFeatureFlag4.tableWithFixedColumnWidthsOption,
           tableWithFixedColumnWidthsOption = _getEditorFeatureFlag5 === void 0 ? false : _getEditorFeatureFlag5;
         var isTableScalingWithFixedColumnWidthsOptionEnabled = ((_this$props$options = this.props.options) === null || _this$props$options === void 0 ? void 0 : _this$props$options.isTableScalingEnabled) && tableWithFixedColumnWidthsOption;
-        var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-increased-scaling-percent') || false;
+        var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && (0, _platformFeatureFlags.fg)('platform.editor.table.use-increased-scaling-percent') || false;
         if (force || !isResizing && shouldUpdateColgroup) {
           var _this$props$options2;
           var resizeState = (0, _utils4.getResizeState)({
@@ -550,7 +550,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getEditorFeatureFlags = _this$props10.getEditorFeatureFlags;
       var isInDanger = this.props.isInDanger;
       var table = (0, _utils2.findTable)(view.state.selection);
-      if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-shared-state-hook')) {
+      if (!(0, _platformFeatureFlags.fg)('platform.editor.table.use-shared-state-hook')) {
         var pluginState = (0, _pluginFactory.getPluginState)(view.state);
         isInDanger = pluginState.isInDanger;
       }
@@ -564,7 +564,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         shouldHandleColgroupUpdates = true;
       }
       var isTableScalingWithFixedColumnWidthsOptionEnabled = isTableScalingEnabled && tableWithFixedColumnWidthsOption;
-      var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-increased-scaling-percent');
+      var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && (0, _platformFeatureFlags.fg)('platform.editor.table.use-increased-scaling-percent');
       if (isTableScalingWithFixedColumnWidthsOptionEnabled && getNode().attrs.displayMode !== 'fixed') {
         shouldScale = true;
         shouldHandleColgroupUpdates = true;
@@ -688,7 +688,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         showBeforeShadow = _this$state3.showBeforeShadow,
         showAfterShadow = _this$state3.showAfterShadow;
       var node = getNode();
-      if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.use-shared-state-hook')) {
+      if (!(0, _platformFeatureFlags.fg)('platform.editor.table.use-shared-state-hook')) {
         var pluginState = (0, _pluginFactory.getPluginState)(view.state);
         isInDanger = pluginState.isInDanger;
         hoveredRows = pluginState.hoveredRows;
@@ -775,7 +775,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.getBooleanFF)('platform.editor.table.use-increased-scaling-percent');
+      var shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && (0, _platformFeatureFlags.fg)('platform.editor.table.use-increased-scaling-percent');
       return /*#__PURE__*/_react.default.createElement(_TableContainer.TableContainer
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       , {
@@ -794,7 +794,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isTableWithFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
         isWholeTableInDanger: isWholeTableInDanger,
         isTableAlignmentEnabled: isTableAlignmentEnabled,
-        shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent
+        shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
+        isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
       }, /*#__PURE__*/_react.default.createElement("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className: _types.TableCssClassName.TABLE_STICKY_SENTINEL_TOP,

package/dist/cjs/nodeviews/TableContainer.js

@@ -128,7 +128,8 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     isTableScalingEnabled = _ref4.isTableScalingEnabled,
     isTableWithFixedColumnWidthsOptionEnabled = _ref4.isTableWithFixedColumnWidthsOptionEnabled,
     isTableAlignmentEnabled = _ref4.isTableAlignmentEnabled,
-    shouldUseIncreasedScalingPercent = _ref4.shouldUseIncreasedScalingPercent;
+    shouldUseIncreasedScalingPercent = _ref4.shouldUseIncreasedScalingPercent,
+    isCommentEditor = _ref4.isCommentEditor;
   var containerRef = (0, _react.useRef)(null);
   var tableWidthRef = (0, _react.useRef)(_editorSharedStyles.akEditorDefaultLayoutWidth);
   var _useState = (0, _react.useState)(false),
@@ -211,13 +212,13 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
     // 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 - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 : containerWidth - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 - resizeHandleSpacing;
+    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 : containerWidth - (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2 - (isCommentEditor ? 0 : resizeHandleSpacing);
   }
-  var width = Math.min(tableWidth, responsiveContainerWidth);
+  var width = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {
     tableWidthRef.current = width;
   }
-  var maxResizerWidth = Math.min(responsiveContainerWidth, _utils.TABLE_MAX_WIDTH);
+  var maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, _utils.TABLE_MAX_WIDTH);
   var tableResizerProps = {
     width: width,
     maxWidth: maxResizerWidth,
@@ -292,7 +293,8 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref6) {
     isTableScalingEnabled = _ref6.isTableScalingEnabled,
     isTableWithFixedColumnWidthsOptionEnabled = _ref6.isTableWithFixedColumnWidthsOptionEnabled,
     isTableAlignmentEnabled = _ref6.isTableAlignmentEnabled,
-    shouldUseIncreasedScalingPercent = _ref6.shouldUseIncreasedScalingPercent;
+    shouldUseIncreasedScalingPercent = _ref6.shouldUseIncreasedScalingPercent,
+    isCommentEditor = _ref6.isCommentEditor;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/_react.default.createElement(ResizableTableContainer
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -311,7 +313,8 @@ var TableContainer = exports.TableContainer = function TableContainer(_ref6) {
       isTableWithFixedColumnWidthsOptionEnabled: isTableWithFixedColumnWidthsOptionEnabled,
       isWholeTableInDanger: isWholeTableInDanger,
       isTableAlignmentEnabled: isTableAlignmentEnabled,
-      shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent
+      shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
+      isCommentEditor: isCommentEditor
     }, children);
   }
   return /*#__PURE__*/_react.default.createElement(InnerContainer, {

package/dist/cjs/nodeviews/lazy-node-views.js

@@ -16,7 +16,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var lazyTableView = exports.lazyTableView = function lazyTableView(options) {
   if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
     return function (node, view, getPos) {
-      return (0, _table.createTableView)(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isTableAlignmentEnabled);
+      return (0, _table.createTableView)(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isTableAlignmentEnabled, options.isCommentEditor);
     };
   }
   var loader = function loader() {
@@ -33,8 +33,9 @@ var lazyTableView = exports.lazyTableView = function lazyTableView(options) {
           getEditorFeatureFlags = _getNodeViewOptions.getEditorFeatureFlags,
           dispatchAnalyticsEvent = _getNodeViewOptions.dispatchAnalyticsEvent,
           pluginInjectionApi = _getNodeViewOptions.pluginInjectionApi,
-          isTableAlignmentEnabled = _getNodeViewOptions.isTableAlignmentEnabled;
-        return createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled);
+          isTableAlignmentEnabled = _getNodeViewOptions.isTableAlignmentEnabled,
+          isCommentEditor = _getNodeViewOptions.isCommentEditor;
+        return createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled, isCommentEditor);
       };
     });
     return result;

package/dist/cjs/nodeviews/table.js

@@ -41,11 +41,15 @@ var tableAttributes = function tableAttributes(node) {
     'data-layout': node.attrs.layout,
     'data-autosize': node.attrs.__autoSize,
     'data-table-local-id': node.attrs.localId || '',
-    'data-table-width': node.attrs.width,
+    'data-table-width': node.attrs.width || 'inherit',
     'data-table-display-mode': node.attrs.displayMode
   };
 };
 var getInlineWidth = function getInlineWidth(node, options, state, pos) {
+  if (!node.attrs.width && options !== null && options !== void 0 && options.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled) {
+    return;
+  }
+
   // provide a width for tables when custom table width is supported
   // this is to ensure 'responsive' tables (colgroup widths are undefined) become fixed to
   // support screen size adjustments
@@ -286,7 +290,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
   }]);
   return TableView;
 }(_reactNodeView.default);
-var createTableView = exports.createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled) {
+var createTableView = exports.createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled, isCommentEditor) {
   var _getPluginState2 = (0, _pluginFactory.getPluginState)(view.state),
     pluginConfig = _getPluginState2.pluginConfig,
     isFullWidthModeEnabled = _getPluginState2.isFullWidthModeEnabled,
@@ -312,7 +316,8 @@ var createTableView = exports.createTableView = function createTableView(node, v
       isDragAndDropEnabled: isDragAndDropEnabled,
       isTableScalingEnabled: isTableScalingEnabled,
       // same as options.isTableScalingEnabled
-      isTableAlignmentEnabled: isTableAlignmentEnabled
+      isTableAlignmentEnabled: isTableAlignmentEnabled,
+      isCommentEditor: isCommentEditor
     },
     getEditorContainerWidth: getEditorContainerWidth,
     getEditorFeatureFlags: getEditorFeatureFlags,

package/dist/cjs/plugin.js

@@ -148,7 +148,9 @@ var tablesPlugin = function tablesPlugin(_ref) {
           var node = (0, _utils2.createTableWithWidth)({
             isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
             isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
-            isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.fullWidthEnabled
+            isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.fullWidthEnabled,
+            isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
+            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({
             state: state,
@@ -201,8 +203,9 @@ var tablesPlugin = function tablesPlugin(_ref) {
             getEditorFeatureFlags = _ref3.getEditorFeatureFlags,
             dragAndDropEnabled = _ref3.dragAndDropEnabled,
             isTableScalingEnabled = _ref3.isTableScalingEnabled,
-            isTableAlignmentEnabled = _ref3.isTableAlignmentEnabled;
-          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent);
+            isTableAlignmentEnabled = _ref3.isTableAlignmentEnabled,
+            isCommentEditor = _ref3.isCommentEditor;
+          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor);
         }
       }, {
         name: 'tablePMColResizing',
@@ -240,8 +243,12 @@ var tablesPlugin = function tablesPlugin(_ref) {
             _ref7$isTableAlignmen = _ref7.isTableAlignmentEnabled,
             isTableAlignmentEnabled = _ref7$isTableAlignmen === void 0 ? false : _ref7$isTableAlignmen,
             _ref7$fullWidthEnable = _ref7.fullWidthEnabled,
-            fullWidthEnabled = _ref7$fullWidthEnable === void 0 ? false : _ref7$fullWidthEnable;
-          return (0, _keymap.keymapPlugin)(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent);
+            fullWidthEnabled = _ref7$fullWidthEnable === void 0 ? false : _ref7$fullWidthEnable,
+            _ref7$isCommentEditor = _ref7.isCommentEditor,
+            isCommentEditor = _ref7$isCommentEditor === void 0 ? false : _ref7$isCommentEditor,
+            _ref7$tableResizingEn = _ref7.tableResizingEnabled,
+            tableResizingEnabled = _ref7$tableResizingEn === void 0 ? false : _ref7$tableResizingEn;
+          return (0, _keymap.keymapPlugin)(defaultGetEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, tableResizingEnabled);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -303,7 +310,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
           var _options$fullWidthEna, _options$isTableScali, _options$isTableAlign;
           var dispatchAnalyticsEvent = _ref14.dispatchAnalyticsEvent,
             dispatch = _ref14.dispatch;
-          return options !== null && options !== void 0 && options.tableResizingEnabled ? (0, _tableWidth.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, (_options$isTableScali = options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false, (_options$isTableAlign = options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled) !== null && _options$isTableAlign !== void 0 ? _options$isTableAlign : false) : undefined;
+          return options !== null && options !== void 0 && options.tableResizingEnabled && !(options !== null && options !== void 0 && options.isCommentEditor) ? (0, _tableWidth.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, (_options$isTableScali = options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false, (_options$isTableAlign = options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled) !== null && _options$isTableAlign !== void 0 ? _options$isTableAlign : false) : undefined;
         }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
@@ -498,7 +505,9 @@ var tablesPlugin = function tablesPlugin(_ref) {
             var tableNode = (0, _utils2.createTableWithWidth)({
               isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
               isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
-              isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled
+              isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
+              isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
+              isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableResizingEnabled
             })(state.schema);
             var tr = insert(tableNode);
             editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({

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

@@ -25,11 +25,13 @@ function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEn
   var isCellBackgroundDuplicated = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
   var isTableFixedColumnWidthsOptionEnabled = arguments.length > 9 && arguments[9] !== undefined ? arguments[9] : false;
   var shouldUseIncreasedScalingPercent = arguments.length > 10 ? arguments[10] : undefined;
+  var isCommentEditor = arguments.length > 11 ? arguments[11] : undefined;
+  var isTableResizingEnabled = arguments.length > 12 ? arguments[12] : 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), list);
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.toggleTable.common, (0, _insert.createTable)(isTableScalingEnabled, isTableAlignmentEnabled, !!isFullWidthEnabled, editorAnalyticsAPI, isCommentEditor, 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/pm-plugins/main.js

@@ -30,7 +30,7 @@ var _pluginFactory = require("./plugin-factory");
 var _pluginKey = require("./plugin-key");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent) {
+var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor) {
   var _accessibilityUtils;
   var state = (0, _pluginFactory.createPluginState)(dispatch, _objectSpread(_objectSpread(_objectSpread({
     pluginConfig: pluginConfig,
@@ -263,7 +263,8 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
           getEditorFeatureFlags: getEditorFeatureFlags,
           dispatchAnalyticsEvent: dispatchAnalyticsEvent,
           pluginInjectionApi: pluginInjectionApi,
-          isTableAlignmentEnabled: isTableAlignmentEnabled
+          isTableAlignmentEnabled: isTableAlignmentEnabled,
+          isCommentEditor: isCommentEditor
         }),
         tableRow: (0, _lazyNodeViews.lazyTableRowView)({
           eventDispatcher: eventDispatcher

package/dist/cjs/utils/create.js

@@ -14,15 +14,20 @@ var createTableWithWidth = exports.createTableWithWidth = function createTableWi
   var isTableScalingEnabled = _ref.isTableScalingEnabled,
     isTableAlignmentEnabled = _ref.isTableAlignmentEnabled,
     isFullWidthModeEnabled = _ref.isFullWidthModeEnabled,
+    isCommentEditor = _ref.isCommentEditor,
+    isTableResizingEnabled = _ref.isTableResizingEnabled,
     createTableProps = _ref.createTableProps;
   return function (schema) {
     var attrsOverrides = {};
-    if (isTableScalingEnabled && isFullWidthModeEnabled) {
+    if (isTableScalingEnabled && isFullWidthModeEnabled && !isCommentEditor) {
       attrsOverrides.tableWidth = _utils2.TABLE_MAX_WIDTH;
     }
     if (isTableAlignmentEnabled && isFullWidthModeEnabled) {
       attrsOverrides.layout = 'align-start';
     }
+    if (isCommentEditor && isTableResizingEnabled) {
+      attrsOverrides.tableWidth = 'inherit';
+    }
     return (0, _utils.createTable)(_objectSpread(_objectSpread({
       schema: schema
     }, createTableProps), attrsOverrides));

package/dist/es2019/commands/insert.js

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

package/dist/es2019/nodeviews/TableComponent.js

@@ -11,7 +11,7 @@ import { tableMarginSides } from '@atlaskit/editor-common/styles';
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { autoSizeTable, clearHoverSelection } from '../commands';
 import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils';
@@ -338,7 +338,7 @@ class TableComponent extends React.Component {
       getEditorFeatureFlags,
       isTableScalingEnabled
     } = this.props;
-    if (getBooleanFF('platform.editor.table.live-pages-sorting_4malx')) {
+    if (fg('platform.editor.table.live-pages-sorting_4malx')) {
       var _this$props$pluginInj, _this$props$pluginInj2;
       const {
         mode
@@ -428,7 +428,7 @@ class TableComponent extends React.Component {
     if (!(options !== null && options !== void 0 && options.isTableResizingEnabled) && allowColumnResizing) {
       window.removeEventListener('resize', this.handleWindowResizeDebounced);
     }
-    if (getBooleanFF('platform.editor.table.live-pages-sorting_4malx')) {
+    if (fg('platform.editor.table.live-pages-sorting_4malx')) {
       var _this$table2;
       this === null || this === void 0 ? void 0 : (_this$table2 = this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.removeEventListener('mouseenter', this.handleMouseEnter);
     }
@@ -485,7 +485,7 @@ class TableComponent extends React.Component {
         tableWithFixedColumnWidthsOption = false
       } = getEditorFeatureFlags();
       const isTableScalingWithFixedColumnWidthsOptionEnabled = ((_this$props$options = this.props.options) === null || _this$props$options === void 0 ? void 0 : _this$props$options.isTableScalingEnabled) && tableWithFixedColumnWidthsOption;
-      const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent') || false;
+      const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent') || false;
       if (force || !isResizing && shouldUpdateColgroup) {
         var _this$props$options2;
         const resizeState = getResizeState({
@@ -534,7 +534,7 @@ class TableComponent extends React.Component {
       isInDanger
     } = this.props;
     const table = findTable(view.state.selection);
-    if (!getBooleanFF('platform.editor.table.use-shared-state-hook')) {
+    if (!fg('platform.editor.table.use-shared-state-hook')) {
       const pluginState = getPluginState(view.state);
       isInDanger = pluginState.isInDanger;
     }
@@ -548,7 +548,7 @@ class TableComponent extends React.Component {
       shouldHandleColgroupUpdates = true;
     }
     const isTableScalingWithFixedColumnWidthsOptionEnabled = isTableScalingEnabled && tableWithFixedColumnWidthsOption;
-    const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+    const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent');
     if (isTableScalingWithFixedColumnWidthsOptionEnabled && getNode().attrs.displayMode !== 'fixed') {
       shouldScale = true;
       shouldHandleColgroupUpdates = true;
@@ -674,7 +674,7 @@ class TableComponent extends React.Component {
       showAfterShadow
     } = this.state;
     const node = getNode();
-    if (!getBooleanFF('platform.editor.table.use-shared-state-hook')) {
+    if (!fg('platform.editor.table.use-shared-state-hook')) {
       const pluginState = getPluginState(view.state);
       isInDanger = pluginState.isInDanger;
       hoveredRows = pluginState.hoveredRows;
@@ -759,7 +759,7 @@ class TableComponent extends React.Component {
       stickyScrollbar,
       tableWithFixedColumnWidthsOption = false
     } = getEditorFeatureFlags();
-    const shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+    const shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && fg('platform.editor.table.use-increased-scaling-percent');
     return /*#__PURE__*/React.createElement(TableContainer
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     , {
@@ -783,7 +783,8 @@ class TableComponent extends React.Component {
       isTableWithFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
       isWholeTableInDanger: isWholeTableInDanger,
       isTableAlignmentEnabled: isTableAlignmentEnabled,
-      shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent
+      shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
+      isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
     }, /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: ClassName.TABLE_STICKY_SENTINEL_TOP,

package/dist/es2019/nodeviews/TableContainer.js

@@ -125,7 +125,8 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   isTableScalingEnabled,
   isTableWithFixedColumnWidthsOptionEnabled,
   isTableAlignmentEnabled,
-  shouldUseIncreasedScalingPercent
+  shouldUseIncreasedScalingPercent,
+  isCommentEditor
 }) => {
   const containerRef = useRef(null);
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
@@ -209,13 +210,13 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     // containerWidth = width of a DIV with test id="ak-editor-fp-content-area". It is a parent of
     // a DIV with className="ak-editor-content-area". This DIV has padding left and padding right.
     // padding left = padding right = akEditorGutterPadding = 32
-    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPaddingDynamic() * 2 : containerWidth - akEditorGutterPaddingDynamic() * 2 - resizeHandleSpacing;
+    responsiveContainerWidth = isTableScalingEnabled ? containerWidth - akEditorGutterPaddingDynamic() * 2 : containerWidth - akEditorGutterPaddingDynamic() * 2 - (isCommentEditor ? 0 : resizeHandleSpacing);
   }
-  let width = Math.min(tableWidth, responsiveContainerWidth);
+  let width = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
   if (!isResizing) {
     tableWidthRef.current = width;
   }
-  const maxResizerWidth = Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
+  const maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
   const tableResizerProps = {
     width,
     maxWidth: maxResizerWidth,
@@ -291,7 +292,8 @@ export const TableContainer = ({
   isTableScalingEnabled,
   isTableWithFixedColumnWidthsOptionEnabled,
   isTableAlignmentEnabled,
-  shouldUseIncreasedScalingPercent
+  shouldUseIncreasedScalingPercent,
+  isCommentEditor
 }) => {
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/React.createElement(ResizableTableContainer
@@ -311,7 +313,8 @@ export const TableContainer = ({
       isTableWithFixedColumnWidthsOptionEnabled: isTableWithFixedColumnWidthsOptionEnabled,
       isWholeTableInDanger: isWholeTableInDanger,
       isTableAlignmentEnabled: isTableAlignmentEnabled,
-      shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent
+      shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
+      isCommentEditor: isCommentEditor
     }, children);
   }
   return /*#__PURE__*/React.createElement(InnerContainer, {

package/dist/es2019/nodeviews/lazy-node-views.js

@@ -7,7 +7,7 @@ import TableRow from './TableRow';
 export const lazyTableView = options => {
   if (!fg('platform_editor_lazy-node-views')) {
     return (node, view, getPos) => {
-      return createTableView(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isTableAlignmentEnabled);
+      return createTableView(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isTableAlignmentEnabled, options.isCommentEditor);
     };
   }
   const loader = () => {
@@ -23,9 +23,10 @@ export const lazyTableView = options => {
           getEditorFeatureFlags,
           dispatchAnalyticsEvent,
           pluginInjectionApi,
-          isTableAlignmentEnabled
+          isTableAlignmentEnabled,
+          isCommentEditor
         } = getNodeViewOptions();
-        return createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled);
+        return createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled, isCommentEditor);
       };
     });
     return result;

package/dist/es2019/nodeviews/table.js

@@ -23,11 +23,15 @@ const tableAttributes = node => {
     'data-layout': node.attrs.layout,
     'data-autosize': node.attrs.__autoSize,
     'data-table-local-id': node.attrs.localId || '',
-    'data-table-width': node.attrs.width,
+    'data-table-width': node.attrs.width || 'inherit',
     'data-table-display-mode': node.attrs.displayMode
   };
 };
 const getInlineWidth = (node, options, state, pos) => {
+  if (!node.attrs.width && options !== null && options !== void 0 && options.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled) {
+    return;
+  }
+
   // provide a width for tables when custom table width is supported
   // this is to ensure 'responsive' tables (colgroup widths are undefined) become fixed to
   // support screen size adjustments
@@ -251,7 +255,7 @@ export default class TableView extends ReactNodeView {
     super.destroy();
   }
 }
-export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled) => {
+export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled, isCommentEditor) => {
   const {
     pluginConfig,
     isFullWidthModeEnabled,
@@ -279,7 +283,8 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
       isDragAndDropEnabled,
       isTableScalingEnabled,
       // same as options.isTableScalingEnabled
-      isTableAlignmentEnabled
+      isTableAlignmentEnabled,
+      isCommentEditor
     },
     getEditorContainerWidth,
     getEditorFeatureFlags,