@atlaskit/editor-plugin-table 7.31.3 → 8.1.0

package/CHANGELOG.md

@@ -1,5 +1,101 @@
 # @atlaskit/editor-plugin-table
 
+## 8.1.0
+
+### Minor Changes
+
+- [#166753](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/166753)
+  [`41dc866b96d84`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/41dc866b96d84) -
+  Use drag and drop classname for column resizing line when enabled, this avoids passing in feature
+  flag props to styles
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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

package/dist/cjs/commands/column-resize.js

@@ -30,7 +30,8 @@ var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosi
     var customTr = state.tr;
     var _getPluginState = (0, _pluginFactory.getPluginState)(state),
       allowColumnResizing = _getPluginState.pluginConfig.allowColumnResizing,
-      getIntl = _getPluginState.getIntl;
+      getIntl = _getPluginState.getIntl,
+      isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
     var fakeDispatch = function fakeDispatch(tr) {
       customTr = tr;
     };
@@ -43,7 +44,7 @@ var updateResizeHandleAndStatePosition = function updateResizeHandleAndStatePosi
     });
     var decorationsWithWidgetAndHandle = (0, _utils4.updateDecorations)(customTr.doc, decorationsWithWidget, (0, _utils4.createColumnLineResize)(state.selection, {
       right: columnIndex
-    }), _types.TableDecorations.COLUMN_RESIZING_HANDLE_LINE);
+    }, isDragAndDropEnabled), _types.TableDecorations.COLUMN_RESIZING_HANDLE_LINE);
     getTablePluginCommand({
       type: 'START_KEYBOARD_COLUMN_RESIZE',
       data: {

package/dist/cjs/commands/hover.js

@@ -128,10 +128,12 @@ var clearHoverSelection = exports.clearHoverSelection = function clearHoverSelec
 };
 var showResizeHandleLine = exports.showResizeHandleLine = function showResizeHandleLine(cellColumnPositioning) {
   return (0, _pluginFactory.createCommand)(function (state) {
+    var _getPluginState4 = (0, _pluginFactory.getPluginState)(state),
+      isDragAndDropEnabled = _getPluginState4.isDragAndDropEnabled;
     return {
       type: 'SHOW_RESIZE_HANDLE_LINE',
       data: {
-        decorationSet: (0, _utils2.updatePluginStateDecorations)(state, (0, _utils2.createColumnLineResize)(state.selection, cellColumnPositioning), _types.TableDecorations.COLUMN_RESIZING_HANDLE_LINE)
+        decorationSet: (0, _utils2.updatePluginStateDecorations)(state, (0, _utils2.createColumnLineResize)(state.selection, cellColumnPositioning, isDragAndDropEnabled), _types.TableDecorations.COLUMN_RESIZING_HANDLE_LINE)
       }
     };
   });
@@ -160,8 +162,8 @@ var setTableHovered = exports.setTableHovered = function setTableHovered(hovered
 };
 var hoverCell = exports.hoverCell = function hoverCell(rowIndex, colIndex) {
   return (0, _pluginFactory.createCommand)(function (state) {
-    var _getPluginState4 = (0, _pluginFactory.getPluginState)(state),
-      prevHoveredCell = _getPluginState4.hoveredCell;
+    var _getPluginState5 = (0, _pluginFactory.getPluginState)(state),
+      prevHoveredCell = _getPluginState5.hoveredCell;
 
     // If no arguments have been passed then the intention it to reset the hover cell data
     var clear = rowIndex === undefined && colIndex === undefined;

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
     },

package/dist/cjs/plugin.js

@@ -119,11 +119,11 @@ var tablesPlugin = function tablesPlugin(_ref) {
           var _api$contentInsertion, _api$contentInsertion2;
           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,
+            isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableAlignment,
             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
+            isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing
           })(state.schema);
 
           // If the cursor is inside a table
@@ -158,7 +158,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
     },
     commands: {
-      insertTableWithSize: (0, _insert.insertTableWithSize)(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, options === null || options === void 0 ? void 0 : options.isCommentEditor)
+      insertTableWithSize: (0, _insert.insertTableWithSize)(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, options === null || options === void 0 ? void 0 : options.tableOptions.allowTableAlignment, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, options === null || options === void 0 ? void 0 : options.isCommentEditor)
     },
     nodes: function nodes() {
       var _pluginConfig = (0, _createPluginConfig.pluginConfig)(options === null || options === void 0 ? void 0 : options.tableOptions),
@@ -168,7 +168,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
         name: 'table',
         node: (0, _toDOM.tableNodeSpecWithFixedToDOM)({
           allowColumnResizing: Boolean(allowColumnResizing),
-          tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableResizingEnabled),
+          tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing),
           getEditorContainerWidth: defaultGetEditorContainerWidth,
           isNestingSupported: isNestingSupported
         })
@@ -185,7 +185,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
         name: 'table',
         node: (0, _toDOM.tableNodeSpecWithFixedToDOM)({
           allowColumnResizing: Boolean(allowColumnResizing),
-          tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableResizingEnabled),
+          tableResizingEnabled: Boolean(options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing),
           getEditorContainerWidth: defaultGetEditorContainerWidth,
           isNestingSupported: isNestingSupported
         })
@@ -213,15 +213,13 @@ var tablesPlugin = function tablesPlugin(_ref) {
           var _ref3 = options || {},
             fullWidthEnabled = _ref3.fullWidthEnabled,
             wasFullWidthEnabled = _ref3.wasFullWidthEnabled,
-            tableResizingEnabled = _ref3.tableResizingEnabled,
             tableOptions = _ref3.tableOptions,
             getEditorFeatureFlags = _ref3.getEditorFeatureFlags,
             dragAndDropEnabled = _ref3.dragAndDropEnabled,
             isTableScalingEnabled = _ref3.isTableScalingEnabled,
-            isTableAlignmentEnabled = _ref3.isTableAlignmentEnabled,
             isCommentEditor = _ref3.isCommentEditor,
             isChromelessEditor = _ref3.isChromelessEditor;
-          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, tableResizingEnabled, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, isTableAlignmentEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor);
+          return (0, _main.createPlugin)(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, (0, _createPluginConfig.pluginConfig)(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor);
         }
       }, {
         name: 'tablePMColResizing',
@@ -233,13 +231,13 @@ var tablesPlugin = function tablesPlugin(_ref) {
             tableOptions = _ref5.tableOptions,
             getEditorFeatureFlags = _ref5.getEditorFeatureFlags,
             isTableScalingEnabled = _ref5.isTableScalingEnabled,
-            isNewColumnResizingEnabled = _ref5.isNewColumnResizingEnabled,
-            isTableAlignmentEnabled = _ref5.isTableAlignmentEnabled;
+            isNewColumnResizingEnabled = _ref5.isNewColumnResizingEnabled;
           var _pluginConfig2 = (0, _createPluginConfig.pluginConfig)(tableOptions),
-            allowColumnResizing = _pluginConfig2.allowColumnResizing;
+            allowColumnResizing = _pluginConfig2.allowColumnResizing,
+            allowTableAlignment = _pluginConfig2.allowTableAlignment;
           return allowColumnResizing ? (0, _tableResizing.createPlugin)(dispatch, {
             lastColumnResizable: !fullWidthEnabled
-          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled, isTableAlignmentEnabled, !!(options !== null && options !== void 0 && options.isCommentEditor)) : undefined;
+          }, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled, allowTableAlignment, !!(options !== null && options !== void 0 && options.isCommentEditor)) : undefined;
         }
       }, {
         name: 'tableEditing',
@@ -258,17 +256,14 @@ var tablesPlugin = function tablesPlugin(_ref) {
             dragAndDropEnabled = _ref7.dragAndDropEnabled,
             _ref7$isTableScalingE = _ref7.isTableScalingEnabled,
             isTableScalingEnabled = _ref7$isTableScalingE === void 0 ? false : _ref7$isTableScalingE,
-            _ref7$isTableAlignmen = _ref7.isTableAlignmentEnabled,
-            isTableAlignmentEnabled = _ref7$isTableAlignmen === void 0 ? false : _ref7$isTableAlignmen,
             _ref7$fullWidthEnable = _ref7.fullWidthEnabled,
             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, nodeViewPortalProviderAPI, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, isTableAlignmentEnabled, fullWidthEnabled, api, getIntl, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, tableResizingEnabled);
+            tableOptions = _ref7.tableOptions;
+          return (0, _keymap.keymapPlugin)(defaultGetEditorContainerWidth, api, nodeViewPortalProviderAPI, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled, tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.allowTableAlignment, fullWidthEnabled, api, getIntl, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.allowTableResizing);
         }
       }, {
         name: 'tableSelectionKeymap',
@@ -328,27 +323,27 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }, {
         name: 'tableWidth',
         plugin: function plugin(_ref15) {
-          var _options$fullWidthEna, _options$isTableScali, _options$isTableAlign, _options$isCommentEdi;
+          var _options$fullWidthEna, _options$isTableScali, _options$tableOptions, _options$isCommentEdi;
           var dispatchAnalyticsEvent = _ref15.dispatchAnalyticsEvent,
             dispatch = _ref15.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, (_options$isCommentEdi = options === null || options === void 0 ? void 0 : options.isCommentEditor) !== null && _options$isCommentEdi !== void 0 ? _options$isCommentEdi : false) : undefined;
+          return options !== null && options !== void 0 && options.tableOptions.allowTableResizing ? (0, _tableWidth.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, (_options$isTableScali = options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false, (_options$tableOptions = options.tableOptions.allowTableResizing) !== null && _options$tableOptions !== void 0 ? _options$tableOptions : false, (_options$isCommentEdi = options.isCommentEditor) !== null && _options$isCommentEdi !== void 0 ? _options$isCommentEdi : false) : undefined;
         }
       }, {
         name: 'tableWidthInCommentFix',
         plugin: function plugin(_ref16) {
-          var _options$isTableAlign2;
+          var _options$tableOptions2;
           var dispatch = _ref16.dispatch;
-          return options !== null && options !== void 0 && options.tableResizingEnabled && options !== null && options !== void 0 && options.isCommentEditor ? (0, _tableWidthInCommentFix.createPlugin)(dispatch, (_options$isTableAlign2 = options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled) !== null && _options$isTableAlign2 !== void 0 ? _options$isTableAlign2 : false) : undefined;
+          return options !== null && options !== void 0 && options.tableOptions.allowTableResizing && options !== null && options !== void 0 && options.isCommentEditor ? (0, _tableWidthInCommentFix.createPlugin)(dispatch, (_options$tableOptions2 = options.tableOptions.allowTableAlignment) !== null && _options$tableOptions2 !== void 0 ? _options$tableOptions2 : false) : undefined;
         }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
       {
         name: 'tableOverflowAnalyticsPlugin',
         plugin: function plugin(_ref17) {
-          var _options$tableResizin;
+          var _options$tableOptions3;
           var dispatch = _ref17.dispatch,
             dispatchAnalyticsEvent = _ref17.dispatchAnalyticsEvent;
-          return (0, _tableAnalytics.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$tableResizin = options === null || options === void 0 ? void 0 : options.tableResizingEnabled) !== null && _options$tableResizin !== void 0 ? _options$tableResizin : false);
+          return (0, _tableAnalytics.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$tableOptions3 = options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing) !== null && _options$tableOptions3 !== void 0 ? _options$tableOptions3 : false);
         }
       }, {
         name: 'tableAnalyticsPlugin',
@@ -511,7 +506,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
             editorAnalyticsAPI: editorAnalyticsAPI,
             api: api
-          }), ((options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || (options === null || options === void 0 ? void 0 : options.tableResizingEnabled) && options.isCommentEditor) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/_react.default.createElement(_FloatingToolbarLabel.FloatingToolbarLabel, {
+          }), ((options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || (options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing) && options.isCommentEditor) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/_react.default.createElement(_FloatingToolbarLabel.FloatingToolbarLabel, {
             target: resizingTableRef,
             content: /*#__PURE__*/_react.default.createElement(_TableFullWidthLabel.FullWidthDisplay, null),
             alignX: 'center',
@@ -543,11 +538,11 @@ var tablesPlugin = function tablesPlugin(_ref) {
             var tableState = api === null || api === void 0 || (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
             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,
+              isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableAlignment,
               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
+              isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing
             })(state.schema);
             var tr = state.tr;
             // If the cursor is inside a table