@atlaskit/editor-plugin-table 7.31.2 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,97 @@
 # @atlaskit/editor-plugin-table
 
+## 8.0.0
+
+### Major Changes
+
+- [#162935](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162935)
+  [`48011dc10467a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/48011dc10467a) -
+  Removed `tablesPlugin` property and its child properties of `tableResizingEnabled` and
+  `isTableAlignmentEnabled` from `InitialPluginConfiguration`, and added these options as part of
+  tablePlugin.tableOptions configuration instead. The new options for each are allowTableResizing
+  and allowTableAlignment respectively and can be configured on the Editor component via
+  `allowTables` or via preset configurations.
+
+  **Warning**: Both these features require ADF storage to persist these changes.
+
+  ### WHY?
+
+  To make these table features available for consumers who have no adopted composable editor and
+  want to enable table resizing and table alignment features
+
+  ### WHAT changed?
+
+  **Removed** `InitialPluginConfiguration` type: Removed `tablePlugin` and child properties -
+  `isTableAlignmentEnabled`, `tableResizingEnabled`
+
+  **Added** `TableOptions` type: Added `allowTableResizing` and `allowTableAlignment`
+
+  ### HOW to resolve?
+
+  Move the options from `initialPluginConfiguration` to `tableOptions`
+
+  Example:
+
+  Before
+
+  ```ts
+  const universalPreset = useUniversalPreset([
+  	tablePlugin,
+  	{ tableResizingEnabled: true, isTableAlignmentEnabled: true, tableOptions: {} },
+  ]);
+  ```
+
+  After
+
+  ```ts
+  const universalPreset = useUniversalPreset([
+  	tablePlugin,
+  	{ tableOptions: { allowTableResizing: true, allowTableAlignment: true } },
+  ]);
+  ```
+
+  Before
+
+  ```ts
+  return (
+  	<Editor
+  	 	allowTables={{advanced: true}}
+  		initialPluginConfiguration={{
+  			tablesPlugin: {
+  				tableResizingEnabled: true, isTableAlignmentEnabled: true,
+  			}
+  		}}
+  	/>
+  )
+  ```
+
+  After
+
+  ```ts
+  return (
+  	<Editor
+  	 	allowTables={{advanced: true, allowTableResizing: enabled, allowTableAlignment: true}}
+
+  	/>
+  )
+  ```
+
+### Patch Changes
+
+- [#166172](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/166172)
+  [`00bf95ef0cc72`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/00bf95ef0cc72) -
+  [ux] [ED-25535] Fix for issue where resize handler decorations added/removed in view mode affected
+  selection range.
+
+## 7.31.3
+
+### Patch Changes
+
+- [#165001](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165001)
+  [`d77bdbfe892ed`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d77bdbfe892ed) -
+  tidy table duplicate cell color experiment
+- Updated dependencies
+
 ## 7.31.2
 
 ### Patch Changes

package/dist/cjs/commands/insert.js

@@ -30,10 +30,9 @@ function addColumnAtCustomStep(column) {
 }
 function addColumnAt(api) {
   var isTableScalingEnabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var isCellBackgroundDuplicated = arguments.length > 2 ? arguments[2] : undefined;
-  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 3 ? arguments[3] : undefined;
-  var shouldUseIncreasedScalingPercent = arguments.length > 4 ? arguments[4] : undefined;
-  var isCommentEditor = arguments.length > 5 ? arguments[5] : undefined;
+  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 2 ? arguments[2] : undefined;
+  var shouldUseIncreasedScalingPercent = arguments.length > 3 ? arguments[3] : undefined;
+  var isCommentEditor = arguments.length > 4 ? arguments[4] : undefined;
   return function (column) {
     var allowAddColumnCustomStep = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var view = arguments.length > 2 ? arguments[2] : undefined;
@@ -42,7 +41,7 @@ function addColumnAt(api) {
       if (allowAddColumnCustomStep) {
         updatedTr = addColumnAtCustomStep(column)(updatedTr);
       } else {
-        updatedTr = (0, _utils2.addColumnAt)(column, isCellBackgroundDuplicated)(updatedTr);
+        updatedTr = (0, _utils2.addColumnAt)(column)(updatedTr);
       }
       var table = (0, _utils2.findTable)(updatedTr.selection);
       if (table) {
@@ -66,10 +65,9 @@ function addColumnAt(api) {
 // Command to add a column before the column with the selection.
 var addColumnBefore = exports.addColumnBefore = function addColumnBefore(api) {
   var isTableScalingEnabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var isCellBackgroundDuplicated = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-  var shouldUseIncreasedScalingPercent = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  var isCommentEditor = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
+  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var shouldUseIncreasedScalingPercent = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var isCommentEditor = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
   return function (state, dispatch, view) {
     var table = (0, _utils2.findTable)(state.selection);
     if (!table) {
@@ -77,7 +75,7 @@ var addColumnBefore = exports.addColumnBefore = function addColumnBefore(api) {
     }
     if (dispatch) {
       var rect = (0, _utils2.selectedRect)(state);
-      dispatch(addColumnAt(api, isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(rect.left, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), view)(state.tr));
+      dispatch(addColumnAt(api, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(rect.left, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), view)(state.tr));
     }
     return true;
   };
@@ -85,7 +83,7 @@ var addColumnBefore = exports.addColumnBefore = function addColumnBefore(api) {
 
 // :: (EditorState, dispatch: ?(tr: Transaction)) → bool
 // Command to add a column after the column with the selection.
-var addColumnAfter = exports.addColumnAfter = function addColumnAfter(api, isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor) {
+var addColumnAfter = exports.addColumnAfter = function addColumnAfter(api, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor) {
   return function (state, dispatch, view) {
     var table = (0, _utils2.findTable)(state.selection);
     if (!table) {
@@ -93,20 +91,19 @@ var addColumnAfter = exports.addColumnAfter = function addColumnAfter(api, isTab
     }
     if (dispatch) {
       var rect = (0, _utils2.selectedRect)(state);
-      dispatch(addColumnAt(api, isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(rect.right, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), view)(state.tr));
+      dispatch(addColumnAt(api, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(rect.right, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), view)(state.tr));
     }
     return true;
   };
 };
 var insertColumn = exports.insertColumn = function insertColumn(api) {
   var isTableScalingEnabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var isCellBackgroundDuplicated = arguments.length > 2 ? arguments[2] : undefined;
-  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 3 ? arguments[3] : undefined;
-  var shouldUseIncreasedScalingPercent = arguments.length > 4 ? arguments[4] : undefined;
-  var isCommentEditor = arguments.length > 5 ? arguments[5] : undefined;
+  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 2 ? arguments[2] : undefined;
+  var shouldUseIncreasedScalingPercent = arguments.length > 3 ? arguments[3] : undefined;
+  var isCommentEditor = arguments.length > 4 ? arguments[4] : undefined;
   return function (column) {
     return function (state, dispatch, view) {
-      var tr = addColumnAt(api, isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(column, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), view)(state.tr);
+      var tr = addColumnAt(api, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(column, (0, _getAllowAddColumnCustomStep.getAllowAddColumnCustomStep)(state), view)(state.tr);
       var table = (0, _utils2.findTable)(tr.selection);
       if (!table) {
         return false;
@@ -120,7 +117,7 @@ var insertColumn = exports.insertColumn = function insertColumn(api) {
     };
   };
 };
-var insertRow = exports.insertRow = function insertRow(row, moveCursorToTheNewRow, isCellBackgroundDuplicated) {
+var insertRow = exports.insertRow = function insertRow(row, moveCursorToTheNewRow) {
   return function (state, dispatch) {
     // Don't clone the header row
     var headerRowEnabled = (0, _utils3.checkIfHeaderRowEnabled)(state.selection);
@@ -131,7 +128,7 @@ var insertRow = exports.insertRow = function insertRow(row, moveCursorToTheNewRo
     if (row === 0 && headerRowEnabled) {
       return false;
     }
-    var tr = clonePreviousRow ? (0, _utils3.copyPreviousRow)(state.schema)(row)(state.tr) : (0, _utils2.addRowAt)(row, undefined, isCellBackgroundDuplicated)(state.tr);
+    var tr = clonePreviousRow ? (0, _utils3.copyPreviousRow)(state.schema)(row)(state.tr) : (0, _utils2.addRowAt)(row, undefined)(state.tr);
     var table = (0, _utils2.findTable)(tr.selection);
     if (!table) {
       return false;

package/dist/cjs/commands-with-analytics.js

@@ -167,7 +167,6 @@ var addRowAroundSelection = exports.addRowAroundSelection = function addRowAroun
   };
 };
 var insertRowWithAnalytics = exports.insertRowWithAnalytics = function insertRowWithAnalytics(editorAnalyticsAPI) {
-  var isCellbackgroundDuplicated = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   return function (inputMethod, options) {
     return (0, _analytics2.withEditorAnalyticsAPI)(function (state) {
       var _getSelectedTableInfo = (0, _utils2.getSelectedTableInfo)(state.selection),
@@ -185,7 +184,7 @@ var insertRowWithAnalytics = exports.insertRowWithAnalytics = function insertRow
         },
         eventType: _analytics.EVENT_TYPE.TRACK
       };
-    })(editorAnalyticsAPI)((0, _insert.insertRow)(options.index, options.moveCursorToInsertedRow, isCellbackgroundDuplicated));
+    })(editorAnalyticsAPI)((0, _insert.insertRow)(options.index, options.moveCursorToInsertedRow));
   };
 };
 var changeColumnWidthByStepWithAnalytics = exports.changeColumnWidthByStepWithAnalytics = function changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI, api) {
@@ -225,10 +224,9 @@ var changeColumnWidthByStepWithAnalytics = exports.changeColumnWidthByStepWithAn
 };
 var insertColumnWithAnalytics = exports.insertColumnWithAnalytics = function insertColumnWithAnalytics(api, editorAnalyticsAPI) {
   var isTableScalingEnabled = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  var isCellbackgroundDuplicated = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
-  var shouldUseIncreasedScalingPercent = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
-  var isCommentEditor = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var shouldUseIncreasedScalingPercent = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  var isCommentEditor = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
   return function (inputMethod, position) {
     return (0, _analytics2.withEditorAnalyticsAPI)(function (state) {
       var _getSelectedTableInfo3 = (0, _utils2.getSelectedTableInfo)(state.selection),
@@ -246,7 +244,7 @@ var insertColumnWithAnalytics = exports.insertColumnWithAnalytics = function ins
         },
         eventType: _analytics.EVENT_TYPE.TRACK
       };
-    })(editorAnalyticsAPI)((0, _insert.insertColumn)(api, isTableScalingEnabled, isCellbackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(position));
+    })(editorAnalyticsAPI)((0, _insert.insertColumn)(api, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor)(position));
   };
 };
 var deleteRowsWithAnalytics = exports.deleteRowsWithAnalytics = function deleteRowsWithAnalytics(editorAnalyticsAPI) {

package/dist/cjs/event-handlers.js

@@ -407,11 +407,22 @@ var isTableInFocus = exports.isTableInFocus = function isTableInFocus(view) {
   var _getPluginState10, _getResizePluginState;
   return !!((_getPluginState10 = (0, _pluginFactory2.getPluginState)(view.state)) !== null && _getPluginState10 !== void 0 && _getPluginState10.tableNode) && !((_getResizePluginState = (0, _pluginFactory3.getPluginState)(view.state)) !== null && _getResizePluginState !== void 0 && _getResizePluginState.dragging);
 };
-var whenTableInFocus = exports.whenTableInFocus = function whenTableInFocus(eventHandler) {
+var whenTableInFocus = exports.whenTableInFocus = function whenTableInFocus(eventHandler, pluginInjectionApi) {
   return function (view, mouseEvent) {
+    var _pluginInjectionApi$e;
     if (!isTableInFocus(view)) {
       return false;
     }
+    var isViewMode = (pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$e = pluginInjectionApi.editorViewMode) === null || _pluginInjectionApi$e === void 0 || (_pluginInjectionApi$e = _pluginInjectionApi$e.sharedState.currentState()) === null || _pluginInjectionApi$e === void 0 ? void 0 : _pluginInjectionApi$e.mode) === 'view';
+    /**
+     * Table cannot be in focus if we are in view mode.
+     * This will prevent an infinite flow of adding and removing
+     * resize handle decorations in view mode that causes unpredictable
+     * selections.
+     */
+    if (isViewMode) {
+      return false;
+    }
     return eventHandler(view, mouseEvent);
   };
 };

package/dist/cjs/nodeviews/TableComponent.js

@@ -155,7 +155,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _this$props = _this.props,
         getNode = _this$props.getNode,
         containerWidth = _this$props.containerWidth,
-        options = _this$props.options;
+        options = _this$props.options,
+        allowTableResizing = _this$props.allowTableResizing;
       var prevNode = _this.node;
       var node = getNode();
       var prevAttrs = prevNode.attrs;
@@ -189,7 +190,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       // This last check is also to cater for dynamic text sizing changing the 'default' layout width
       // Usually happens on window resize.
       layoutSize !== _this.layoutSize || noOfColumnsChanged) {
-        var shouldScaleTable = (!(options !== null && options !== void 0 && options.isTableResizingEnabled) || (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) && isNested) && !hasNumberedColumnChanged && !noOfColumnsChanged;
+        var shouldScaleTable = (!allowTableResizing || allowTableResizing && isNested) && !hasNumberedColumnChanged && !noOfColumnsChanged;
 
         // If column has been inserted/deleted avoid multi dispatch
         if (shouldScaleTable) {
@@ -199,7 +200,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         }
 
         // only when table resizing is enabled and toggle numbered column to run scaleTable
-        if (options !== null && options !== void 0 && options.isTableResizingEnabled && hasNumberedColumnChanged) {
+        if (allowTableResizing && hasNumberedColumnChanged) {
           if (!(0, _colgroup.hasTableBeenResized)(prevNode)) {
             _this.scaleTable({
               parentWidth: node.attrs.width
@@ -251,7 +252,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _this$props3 = _this.props,
         dispatchAnalyticsEvent = _this$props3.dispatchAnalyticsEvent,
         containerWidth = _this$props3.containerWidth,
-        options = _this$props3.options;
+        allowTableResizing = _this$props3.allowTableResizing;
       var parentWidth = ((_this$state = _this.state) === null || _this$state === void 0 ? void 0 : _this$state.parentWidth) || 0;
       _this.initialOverflowCaptureTimerId = setTimeout(function () {
         dispatchAnalyticsEvent({
@@ -262,7 +263,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           attributes: {
             editorWidth: containerWidth.width || 0,
             isOverflowing: isOverflowing,
-            tableResizingEnabled: (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) || false,
+            tableResizingEnabled: allowTableResizing || false,
             width: _this.node.attrs.width || 0,
             parentWidth: parentWidth
           }
@@ -383,8 +384,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         _this2 = this;
       var _this$props7 = this.props,
         allowColumnResizing = _this$props7.allowColumnResizing,
+        allowTableResizing = _this$props7.allowTableResizing,
         eventDispatcher = _this$props7.eventDispatcher,
-        options = _this$props7.options,
         isDragAndDropEnabled = _this$props7.isDragAndDropEnabled,
         getNode = _this$props7.getNode,
         getEditorFeatureFlags = _this$props7.getEditorFeatureFlags,
@@ -437,7 +438,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
          * We no longer use `containerWidth` as a variable to determine an update for table resizing (avoids unnecessary updates).
          * Instead we use the resize event to only trigger updates when necessary.
          */
-        if (!(options !== null && options !== void 0 && options.isTableResizingEnabled)) {
+        if (!allowTableResizing) {
           window.addEventListener('resize', this.handleWindowResizeDebounced);
         }
         this.handleTableResizingDebounced();
@@ -458,8 +459,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var _this$resizeObserver, _this$wrapperReisizeO, _this$table4, _this$table5, _this$table6;
       var _this$props8 = this.props,
         allowColumnResizing = _this$props8.allowColumnResizing,
+        allowTableResizing = _this$props8.allowTableResizing,
         eventDispatcher = _this$props8.eventDispatcher,
-        options = _this$props8.options,
         isDragAndDropEnabled = _this$props8.isDragAndDropEnabled;
       if (this.wrapper && !isIE11) {
         this.wrapper.removeEventListener('scroll', this.handleScrollDebounced);
@@ -476,10 +477,10 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       this.scaleTableDebounced.cancel();
       this.handleTableResizingDebounced.cancel();
       this.handleAutoSizeDebounced.cancel();
-      if (!(options !== null && options !== void 0 && options.isTableResizingEnabled)) {
+      if (!allowTableResizing) {
         this.handleWindowResizeDebounced.cancel();
       }
-      if (!(options !== null && options !== void 0 && options.isTableResizingEnabled) && allowColumnResizing) {
+      if (!allowTableResizing && allowColumnResizing) {
         window.removeEventListener('resize', this.handleWindowResizeDebounced);
       }
       this === null || this === void 0 || (_this$table4 = this.table) === null || _this$table4 === void 0 || _this$table4.removeEventListener('mouseenter', this.handleMouseEnter);
@@ -626,6 +627,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getNode = _this$props11.getNode,
         isMediaFullscreen = _this$props11.isMediaFullscreen,
         allowColumnResizing = _this$props11.allowColumnResizing,
+        allowTableResizing = _this$props11.allowTableResizing,
         isResizing = _this$props11.isResizing,
         options = _this$props11.options,
         isTableScalingEnabled = _this$props11.isTableScalingEnabled,
@@ -658,7 +660,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       if (isInDanger && !table) {
         (0, _commands.clearHoverSelection)()(view.state, view.dispatch);
       }
-      if ((_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled && !(options !== null && options !== void 0 && options.isTableScalingEnabled)) {
+      if ((_this$props$options9 = this.props.options) !== null && _this$props$options9 !== void 0 && _this$props$options9.isCommentEditor && allowTableResizing && !(options !== null && options !== void 0 && options.isTableScalingEnabled)) {
         this.removeInlineTableWidth();
       }
       if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
@@ -698,7 +700,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         // re-draw colgroup.
         if ((0, _utils5.tablesHaveDifferentColumnWidths)(currentTable, previousTable) || isNoOfColumnsChanged) {
           var _view = this.props.view;
-          var shouldRecreateResizeCols = !(options !== null && options !== void 0 && options.isTableResizingEnabled) || !isResizing || isNoOfColumnsChanged && isResizing;
+          var shouldRecreateResizeCols = !allowTableResizing || !isResizing || isNoOfColumnsChanged && isResizing;
           if (shouldRecreateResizeCols) {
             var start = getPos() || 0;
             var depth = _view.state.doc.resolve(start).depth;
@@ -766,7 +768,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isDragAndDropEnabled = _this$props12.isDragAndDropEnabled,
         getEditorFeatureFlags = _this$props12.getEditorFeatureFlags,
         isTableScalingEnabled = _this$props12.isTableScalingEnabled,
-        isTableAlignmentEnabled = _this$props12.isTableAlignmentEnabled;
+        allowTableResizing = _this$props12.allowTableResizing,
+        allowTableAlignment = _this$props12.allowTableAlignment;
       var _this$props13 = this.props,
         isInDanger = _this$props13.isInDanger,
         hoveredRows = _this$props13.hoveredRows,
@@ -880,12 +883,12 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isNested: isNested,
         pluginInjectionApi: pluginInjectionApi,
         tableWrapperHeight: this.state.tableWrapperHeight,
-        isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
+        isTableResizingEnabled: allowTableResizing,
         isResizing: isResizing,
         isTableScalingEnabled: isTableScalingEnabled,
         isTableWithFixedColumnWidthsOptionEnabled: tableWithFixedColumnWidthsOption,
         isWholeTableInDanger: isWholeTableInDanger,
-        isTableAlignmentEnabled: isTableAlignmentEnabled,
+        isTableAlignmentEnabled: allowTableAlignment,
         shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
         isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
         isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor

package/dist/cjs/nodeviews/TableComponentWithSharedState.js

@@ -23,7 +23,9 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
     allowColumnResizing = _ref.allowColumnResizing,
     allowControls = _ref.allowControls,
     getPos = _ref.getPos,
-    forwardRef = _ref.forwardRef;
+    forwardRef = _ref.forwardRef,
+    allowTableAlignment = _ref.allowTableAlignment,
+    allowTableResizing = _ref.allowTableResizing;
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'table', 'media']),
     widthState = _useSharedPluginState.widthState,
     tableState = _useSharedPluginState.tableState,
@@ -69,7 +71,8 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
     isHeaderColumnEnabled: isHeaderColumnEnabled,
     isDragAndDropEnabled: options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled,
     isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
-    isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
+    allowTableAlignment: allowTableAlignment,
+    allowTableResizing: allowTableResizing,
     tableActive: tableActive,
     ordering: ordering,
     isResizing: isResizing,

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, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false)) {
     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, options.isCommentEditor, options.isChromelessEditor);
+      return (0, _table.createTableView)(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isCommentEditor, options.isChromelessEditor);
     };
   }
   var loader = function loader() {
@@ -33,10 +33,9 @@ var lazyTableView = exports.lazyTableView = function lazyTableView(options) {
           getEditorFeatureFlags = _getNodeViewOptions.getEditorFeatureFlags,
           dispatchAnalyticsEvent = _getNodeViewOptions.dispatchAnalyticsEvent,
           pluginInjectionApi = _getNodeViewOptions.pluginInjectionApi,
-          isTableAlignmentEnabled = _getNodeViewOptions.isTableAlignmentEnabled,
           isCommentEditor = _getNodeViewOptions.isCommentEditor,
           isChromelessEditor = _getNodeViewOptions.isChromelessEditor;
-        return createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled, isCommentEditor, isChromelessEditor);
+        return createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isCommentEditor, isChromelessEditor);
       };
     });
     return result;

package/dist/cjs/nodeviews/table.js

@@ -45,15 +45,15 @@ var tableAttributes = function tableAttributes(node) {
     '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) {
+var getInlineWidth = function getInlineWidth(node, options, state, pos, allowTableResizing) {
+  if (!node.attrs.width && options !== null && options !== void 0 && options.isCommentEditor && allowTableResizing) {
     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
-  var shouldHaveInlineWidth = (options === null || options === void 0 ? void 0 : options.isTableResizingEnabled) && !(0, _utils2.isTableNested)(state, pos);
+  var shouldHaveInlineWidth = allowTableResizing && !(0, _utils2.isTableNested)(state, pos);
   var widthValue = (0, _nodeWidth.getTableContainerWidth)(node);
   if (node.attrs.isNumberColumnEnabled) {
     widthValue -= _editorSharedStyles.akEditorTableNumberColumnWidth;
@@ -98,7 +98,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
         var _this$options, _this$options2, _this$getEditorFeatur;
         this.table = rendered.dom;
         if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.isTableScalingEnabled) || (_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.isTableScalingEnabled && (_this$getEditorFeatur = this.getEditorFeatureFlags) !== null && _this$getEditorFeatur !== void 0 && _this$getEditorFeatur.call(this).tableWithFixedColumnWidthsOption && this.node.attrs.displayMode === 'fixed') {
-          var tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos());
+          var tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos(), this.reactComponentProps.allowTableResizing);
           if (tableInlineWidth) {
             handleInlineTableWidth(this.table, tableInlineWidth);
           }
@@ -125,7 +125,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
       if (!((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.isTableScalingEnabled) || (_this$options4 = this.options) !== null && _this$options4 !== void 0 && _this$options4.isTableScalingEnabled && (_this$getEditorFeatur2 = this.getEditorFeatureFlags) !== null && _this$getEditorFeatur2 !== void 0 && _this$getEditorFeatur2.call(this).tableWithFixedColumnWidthsOption && node.attrs.displayMode === 'fixed') {
         var _tableWidthPluginKey$;
         // handle inline style when table been resized
-        var tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos());
+        var tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos(), this.reactComponentProps.allowTableResizing);
         var isTableResizing = (_tableWidthPluginKey$ = _tableWidth.pluginKey.getState(this.view.state)) === null || _tableWidthPluginKey$ === void 0 ? void 0 : _tableWidthPluginKey$.resizing;
         if (!isTableResizing && tableInlineWidth) {
           handleInlineTableWidth(this.table, tableInlineWidth);
@@ -145,6 +145,8 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
           eventDispatcher: props.eventDispatcher,
           api: props.pluginInjectionApi,
           allowColumnResizing: props.allowColumnResizing,
+          allowTableAlignment: props.allowTableAlignment,
+          allowTableResizing: props.allowTableResizing,
           allowControls: props.allowControls,
           getPos: props.getPos,
           getEditorFeatureFlags: props.getEditorFeatureFlags,
@@ -182,7 +184,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
         },
         editorView: props.view,
         render: function render(pluginStates) {
-          var _props$options, _props$options2;
+          var _props$options;
           var tableResizingPluginState = pluginStates.tableResizingPluginState,
             tableWidthPluginState = pluginStates.tableWidthPluginState,
             pluginState = pluginStates.pluginState,
@@ -216,7 +218,8 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
             isDragAndDropEnabled: pluginState.isDragAndDropEnabled,
             isTableScalingEnabled: (_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.isTableScalingEnabled // this.options?.isTableScalingEnabled same as TableOptions.isTableScalingEnabled same as pluginState.isTableScalingEnabled
             ,
-            isTableAlignmentEnabled: (_props$options2 = props.options) === null || _props$options2 === void 0 ? void 0 : _props$options2.isTableAlignmentEnabled,
+            allowTableAlignment: props.allowTableAlignment,
+            allowTableResizing: props.allowTableResizing,
             tableActive: tableActive,
             ordering: pluginState.ordering,
             isResizing: isResizing,
@@ -293,21 +296,24 @@ 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, isCommentEditor, isChromelessEditor) {
+var createTableView = exports.createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isCommentEditor, isChromelessEditor) {
   var _getPluginState2 = (0, _pluginFactory.getPluginState)(view.state),
     pluginConfig = _getPluginState2.pluginConfig,
     isFullWidthModeEnabled = _getPluginState2.isFullWidthModeEnabled,
     wasFullWidthModeEnabled = _getPluginState2.wasFullWidthModeEnabled,
-    isTableResizingEnabled = _getPluginState2.isTableResizingEnabled,
     isDragAndDropEnabled = _getPluginState2.isDragAndDropEnabled,
     isTableScalingEnabled = _getPluginState2.isTableScalingEnabled;
   var _getPluginConfig = (0, _createPluginConfig.pluginConfig)(pluginConfig),
     allowColumnResizing = _getPluginConfig.allowColumnResizing,
-    allowControls = _getPluginConfig.allowControls;
+    allowControls = _getPluginConfig.allowControls,
+    allowTableResizing = _getPluginConfig.allowTableResizing,
+    allowTableAlignment = _getPluginConfig.allowTableAlignment;
   return new TableView({
     node: node,
     view: view,
     allowColumnResizing: allowColumnResizing,
+    allowTableResizing: allowTableResizing,
+    allowTableAlignment: allowTableAlignment,
     allowControls: allowControls,
     portalProviderAPI: portalProviderAPI,
     eventDispatcher: eventDispatcher,
@@ -315,11 +321,9 @@ var createTableView = exports.createTableView = function createTableView(node, v
     options: {
       isFullWidthModeEnabled: isFullWidthModeEnabled,
       wasFullWidthModeEnabled: wasFullWidthModeEnabled,
-      isTableResizingEnabled: isTableResizingEnabled,
       isDragAndDropEnabled: isDragAndDropEnabled,
       isTableScalingEnabled: isTableScalingEnabled,
       // same as options.isTableScalingEnabled
-      isTableAlignmentEnabled: isTableAlignmentEnabled,
       isCommentEditor: isCommentEditor,
       isChromelessEditor: isChromelessEditor
     },