@atlaskit/editor-plugin-table 7.31.3 → 8.1.0

package/src/commands/hover.ts

@@ -171,16 +171,20 @@ export const clearHoverSelection = () =>
 	}));
 
 export const showResizeHandleLine = (cellColumnPositioning: CellColumnPositioning) =>
-	createCommand((state) => ({
-		type: 'SHOW_RESIZE_HANDLE_LINE',
-		data: {
-			decorationSet: updatePluginStateDecorations(
-				state,
-				createColumnLineResize(state.selection, cellColumnPositioning),
-				TableDecorations.COLUMN_RESIZING_HANDLE_LINE,
-			),
-		},
-	}));
+	createCommand((state) => {
+		const { isDragAndDropEnabled } = getPluginState(state);
+
+		return {
+			type: 'SHOW_RESIZE_HANDLE_LINE',
+			data: {
+				decorationSet: updatePluginStateDecorations(
+					state,
+					createColumnLineResize(state.selection, cellColumnPositioning, isDragAndDropEnabled),
+					TableDecorations.COLUMN_RESIZING_HANDLE_LINE,
+				),
+			},
+		};
+	});
 
 export const hideResizeHandleLine = () =>
 	createCommand((state) => ({

package/src/event-handlers.ts

@@ -537,12 +537,27 @@ export const isTableInFocus = (view: EditorView) => {
 };
 
 export const whenTableInFocus =
-	(eventHandler: (view: EditorView, mouseEvent: Event) => boolean) =>
+	(
+		eventHandler: (view: EditorView, mouseEvent: Event) => boolean,
+		pluginInjectionApi?: PluginInjectionAPI,
+	) =>
 	(view: EditorView, mouseEvent: Event): boolean => {
 		if (!isTableInFocus(view)) {
 			return false;
 		}
 
+		const isViewMode =
+			pluginInjectionApi?.editorViewMode?.sharedState.currentState()?.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/src/nodeviews/TableComponent.tsx

@@ -109,12 +109,15 @@ interface ComponentProps {
 	contentDOM: (node: HTMLElement | null) => void;
 	containerWidth: EditorContainerWidth;
 	allowControls: boolean;
+
+	allowTableResizing?: boolean;
+	allowTableAlignment?: boolean;
+
 	isHeaderRowEnabled: boolean;
 	isHeaderColumnEnabled: boolean;
 	isMediaFullscreen?: boolean;
 	isDragAndDropEnabled?: boolean;
 	isTableScalingEnabled?: boolean;
-	isTableAlignmentEnabled?: boolean;
 	tableActive: boolean;
 	ordering?: TableColumnOrdering;
 	isResizing?: boolean;
@@ -228,8 +231,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 	componentDidMount() {
 		const {
 			allowColumnResizing,
+			allowTableResizing,
 			eventDispatcher,
-			options,
 			isDragAndDropEnabled,
 			getNode,
 			getEditorFeatureFlags,
@@ -290,7 +293,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			 * 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?.isTableResizingEnabled) {
+			if (!allowTableResizing) {
 				window.addEventListener('resize', this.handleWindowResizeDebounced);
 			}
 			this.handleTableResizingDebounced();
@@ -313,7 +316,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 	}
 
 	componentWillUnmount() {
-		const { allowColumnResizing, eventDispatcher, options, isDragAndDropEnabled } = this.props;
+		const { allowColumnResizing, allowTableResizing, eventDispatcher, isDragAndDropEnabled } =
+			this.props;
 		if (this.wrapper && !isIE11) {
 			this.wrapper.removeEventListener('scroll', this.handleScrollDebounced);
 		}
@@ -333,11 +337,11 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 		this.scaleTableDebounced.cancel();
 		this.handleTableResizingDebounced.cancel();
 		this.handleAutoSizeDebounced.cancel();
-		if (!options?.isTableResizingEnabled) {
+		if (!allowTableResizing) {
 			this.handleWindowResizeDebounced.cancel();
 		}
 
-		if (!options?.isTableResizingEnabled && allowColumnResizing) {
+		if (!allowTableResizing && allowColumnResizing) {
 			window.removeEventListener('resize', this.handleWindowResizeDebounced);
 		}
 
@@ -530,6 +534,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			getNode,
 			isMediaFullscreen,
 			allowColumnResizing,
+			allowTableResizing,
 			isResizing,
 			options,
 			isTableScalingEnabled, // we could use options.isTableScalingEnabled here
@@ -578,7 +583,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
 		if (
 			this.props.options?.isCommentEditor &&
-			options?.isTableResizingEnabled &&
+			allowTableResizing &&
 			!options?.isTableScalingEnabled
 		) {
 			this.removeInlineTableWidth();
@@ -632,7 +637,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			if (tablesHaveDifferentColumnWidths(currentTable, previousTable) || isNoOfColumnsChanged) {
 				const { view } = this.props;
 				const shouldRecreateResizeCols =
-					!options?.isTableResizingEnabled || !isResizing || (isNoOfColumnsChanged && isResizing);
+					!allowTableResizing || !isResizing || (isNoOfColumnsChanged && isResizing);
 
 				if (shouldRecreateResizeCols) {
 					const start = getPos() || 0;
@@ -745,7 +750,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			isDragAndDropEnabled,
 			getEditorFeatureFlags,
 			isTableScalingEnabled, // here we can use options.isTableScalingEnabled
-			isTableAlignmentEnabled,
+			allowTableResizing,
+			allowTableAlignment,
 		} = this.props;
 
 		let { isInDanger, hoveredRows, hoveredCell, isTableHovered, isWholeTableInDanger } = this.props;
@@ -873,12 +879,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				isNested={isNested}
 				pluginInjectionApi={pluginInjectionApi}
 				tableWrapperHeight={this.state.tableWrapperHeight}
-				isTableResizingEnabled={options?.isTableResizingEnabled}
+				isTableResizingEnabled={allowTableResizing}
 				isResizing={isResizing}
 				isTableScalingEnabled={isTableScalingEnabled}
 				isTableWithFixedColumnWidthsOptionEnabled={tableWithFixedColumnWidthsOption}
 				isWholeTableInDanger={isWholeTableInDanger}
-				isTableAlignmentEnabled={isTableAlignmentEnabled}
+				isTableAlignmentEnabled={allowTableAlignment}
 				shouldUseIncreasedScalingPercent={shouldUseIncreasedScalingPercent}
 				isCommentEditor={options?.isCommentEditor}
 				isChromelessEditor={options?.isChromelessEditor}
@@ -1037,7 +1043,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 	};
 
 	private handleTableResizing = () => {
-		const { getNode, containerWidth, options } = this.props;
+		const { getNode, containerWidth, options, allowTableResizing } = this.props;
 		const prevNode = this.node!;
 		const node = getNode();
 		const prevAttrs = prevNode.attrs;
@@ -1096,7 +1102,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			noOfColumnsChanged
 		) {
 			const shouldScaleTable =
-				(!options?.isTableResizingEnabled || (options?.isTableResizingEnabled && isNested)) &&
+				(!allowTableResizing || (allowTableResizing && isNested)) &&
 				!hasNumberedColumnChanged &&
 				!noOfColumnsChanged;
 
@@ -1111,7 +1117,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			}
 
 			// only when table resizing is enabled and toggle numbered column to run scaleTable
-			if (options?.isTableResizingEnabled && hasNumberedColumnChanged) {
+			if (allowTableResizing && hasNumberedColumnChanged) {
 				if (!hasTableBeenResized(prevNode)) {
 					this.scaleTable(
 						{
@@ -1170,7 +1176,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 	};
 
 	private setTimerToSendInitialOverflowCaptured = (isOverflowing: boolean) => {
-		const { dispatchAnalyticsEvent, containerWidth, options } = this.props;
+		const { dispatchAnalyticsEvent, containerWidth, allowTableResizing } = this.props;
 		const parentWidth = this.state?.parentWidth || 0;
 
 		this.initialOverflowCaptureTimerId = setTimeout(() => {
@@ -1182,7 +1188,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				attributes: {
 					editorWidth: containerWidth.width || 0,
 					isOverflowing,
-					tableResizingEnabled: options?.isTableResizingEnabled || false,
+					tableResizingEnabled: allowTableResizing || false,
 					width: this.node.attrs.width || 0,
 					parentWidth,
 				},

package/src/nodeviews/TableComponentWithSharedState.tsx

@@ -27,6 +27,8 @@ type TableComponentWithSharedStateProps = {
 	getPos: getPosHandlerNode;
 	allowColumnResizing?: boolean;
 	allowControls?: boolean;
+	allowTableAlignment?: boolean;
+	allowTableResizing?: boolean;
 };
 
 /**
@@ -44,6 +46,8 @@ export const TableComponentWithSharedState = ({
 	allowControls,
 	getPos,
 	forwardRef,
+	allowTableAlignment,
+	allowTableResizing,
 }: TableComponentWithSharedStateProps) => {
 	const { widthState, tableState, mediaState } = useSharedPluginState(api, [
 		'width',
@@ -103,7 +107,8 @@ export const TableComponentWithSharedState = ({
 			isHeaderColumnEnabled={isHeaderColumnEnabled}
 			isDragAndDropEnabled={options?.isDragAndDropEnabled}
 			isTableScalingEnabled={options?.isTableScalingEnabled}
-			isTableAlignmentEnabled={options?.isTableAlignmentEnabled}
+			allowTableAlignment={allowTableAlignment}
+			allowTableResizing={allowTableResizing}
 			tableActive={tableActive}
 			ordering={ordering}
 			isResizing={isResizing}

package/src/nodeviews/lazy-node-views.ts

@@ -21,7 +21,6 @@ type TableViewOptions = {
 	getEditorFeatureFlags: GetEditorFeatureFlags;
 	dispatchAnalyticsEvent: DispatchAnalyticsEvent;
 	pluginInjectionApi?: PluginInjectionAPI;
-	isTableAlignmentEnabled?: boolean;
 	isCommentEditor?: boolean;
 	isChromelessEditor?: boolean;
 };
@@ -39,7 +38,6 @@ export const lazyTableView = (options: TableViewOptions) => {
 				options.getEditorFeatureFlags,
 				options.dispatchAnalyticsEvent,
 				options.pluginInjectionApi,
-				options.isTableAlignmentEnabled,
 				options.isCommentEditor,
 				options.isChromelessEditor,
 			);
@@ -65,7 +63,6 @@ export const lazyTableView = (options: TableViewOptions) => {
 					getEditorFeatureFlags,
 					dispatchAnalyticsEvent,
 					pluginInjectionApi,
-					isTableAlignmentEnabled,
 					isCommentEditor,
 					isChromelessEditor,
 				} = getNodeViewOptions();
@@ -80,7 +77,6 @@ export const lazyTableView = (options: TableViewOptions) => {
 					getEditorFeatureFlags,
 					dispatchAnalyticsEvent,
 					pluginInjectionApi,
-					isTableAlignmentEnabled,
 					isCommentEditor,
 					isChromelessEditor,
 				);

package/src/nodeviews/table.tsx

@@ -53,15 +53,16 @@ const getInlineWidth = (
 	options: Props['options'],
 	state: EditorState,
 	pos: number | undefined,
+	allowTableResizing?: boolean,
 ): number | undefined => {
-	if (!node.attrs.width && options?.isCommentEditor && options?.isTableResizingEnabled) {
+	if (!node.attrs.width && 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
-	const shouldHaveInlineWidth = options?.isTableResizingEnabled && !isTableNested(state, pos);
+	const shouldHaveInlineWidth = allowTableResizing && !isTableNested(state, pos);
 
 	let widthValue = getTableContainerWidth(node);
 
@@ -135,6 +136,7 @@ export default class TableView extends ReactNodeView<Props> {
 					this.reactComponentProps.options,
 					this.reactComponentProps.view.state,
 					this.reactComponentProps.getPos(),
+					this.reactComponentProps.allowTableResizing,
 				);
 				if (tableInlineWidth) {
 					handleInlineTableWidth(this.table, tableInlineWidth);
@@ -167,6 +169,7 @@ export default class TableView extends ReactNodeView<Props> {
 				(this.reactComponentProps as Props).options,
 				this.view.state,
 				this.getPos(),
+				this.reactComponentProps.allowTableResizing,
 			);
 
 			const isTableResizing = tableWidthPluginKey.getState(this.view.state)?.resizing;
@@ -192,6 +195,8 @@ export default class TableView extends ReactNodeView<Props> {
 					eventDispatcher={props.eventDispatcher}
 					api={props.pluginInjectionApi}
 					allowColumnResizing={props.allowColumnResizing}
+					allowTableAlignment={props.allowTableAlignment}
+					allowTableResizing={props.allowTableResizing}
 					allowControls={props.allowControls}
 					getPos={props.getPos}
 					getEditorFeatureFlags={props.getEditorFeatureFlags}
@@ -266,7 +271,8 @@ export default class TableView extends ReactNodeView<Props> {
 							isHeaderColumnEnabled={pluginState!.isHeaderColumnEnabled}
 							isDragAndDropEnabled={pluginState!.isDragAndDropEnabled}
 							isTableScalingEnabled={props.options?.isTableScalingEnabled} // this.options?.isTableScalingEnabled same as TableOptions.isTableScalingEnabled same as pluginState.isTableScalingEnabled
-							isTableAlignmentEnabled={props.options?.isTableAlignmentEnabled}
+							allowTableAlignment={props.allowTableAlignment}
+							allowTableResizing={props.allowTableResizing}
 							tableActive={tableActive}
 							ordering={pluginState!.ordering as TableColumnOrdering}
 							isResizing={isResizing}
@@ -366,7 +372,6 @@ export const createTableView = (
 	getEditorFeatureFlags: GetEditorFeatureFlags,
 	dispatchAnalyticsEvent: DispatchAnalyticsEvent,
 	pluginInjectionApi?: PluginInjectionAPI,
-	isTableAlignmentEnabled?: boolean,
 	isCommentEditor?: boolean,
 	isChromelessEditor?: boolean,
 ): NodeView => {
@@ -374,16 +379,18 @@ export const createTableView = (
 		pluginConfig,
 		isFullWidthModeEnabled,
 		wasFullWidthModeEnabled,
-		isTableResizingEnabled,
 		isDragAndDropEnabled,
 		isTableScalingEnabled, // same as options.isTableScalingEnabled
 	} = getPluginState(view.state);
-	const { allowColumnResizing, allowControls } = getPluginConfig(pluginConfig);
+	const { allowColumnResizing, allowControls, allowTableResizing, allowTableAlignment } =
+		getPluginConfig(pluginConfig);
 
 	return new TableView({
 		node,
 		view,
 		allowColumnResizing,
+		allowTableResizing,
+		allowTableAlignment,
 		allowControls,
 		portalProviderAPI,
 		eventDispatcher,
@@ -391,10 +398,8 @@ export const createTableView = (
 		options: {
 			isFullWidthModeEnabled,
 			wasFullWidthModeEnabled,
-			isTableResizingEnabled,
 			isDragAndDropEnabled,
 			isTableScalingEnabled, // same as options.isTableScalingEnabled
-			isTableAlignmentEnabled,
 			isCommentEditor,
 			isChromelessEditor,
 		},

package/src/nodeviews/types.ts

@@ -10,10 +10,8 @@ import type { PluginInjectionAPI } from '../types';
 export type TableOptions = {
 	isFullWidthModeEnabled?: boolean;
 	wasFullWidthModeEnabled?: boolean;
-	isTableResizingEnabled?: boolean;
 	isDragAndDropEnabled?: boolean;
 	isTableScalingEnabled?: boolean;
-	isTableAlignmentEnabled?: boolean;
 	isCommentEditor?: boolean;
 	isChromelessEditor?: boolean;
 };
@@ -22,6 +20,8 @@ export interface Props {
 	node: PmNode;
 	view: EditorView;
 	allowColumnResizing?: boolean;
+	allowTableResizing?: boolean;
+	allowTableAlignment?: boolean;
 	allowControls?: boolean;
 	cellMinWidth?: number;
 	portalProviderAPI: PortalProviderAPI;

package/src/plugin.tsx

@@ -103,15 +103,15 @@ import { createTableWithWidth } from './utils';
 
 export interface TablePluginOptions {
 	tableOptions: PluginConfig;
-	tableResizingEnabled?: boolean;
+	// this option will eventually be removed, and enabled by default
 	dragAndDropEnabled?: boolean;
+	// this option will eventually be removed, and enabled by default
+	isTableScalingEnabled?: boolean;
 	allowContextualMenu?: boolean;
 	// TODO these two need to be rethought
 	fullWidthEnabled?: boolean;
 	wasFullWidthEnabled?: boolean;
 	getEditorFeatureFlags?: GetEditorFeatureFlags;
-	isTableScalingEnabled?: boolean;
-	isTableAlignmentEnabled?: boolean;
 	isNewColumnResizingEnabled?: boolean;
 	isCommentEditor?: boolean;
 	isChromelessEditor?: boolean;
@@ -230,11 +230,11 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				(state, dispatch) => {
 					const node = createTableWithWidth({
 						isTableScalingEnabled: options?.isTableScalingEnabled,
-						isTableAlignmentEnabled: options?.isTableAlignmentEnabled,
+						isTableAlignmentEnabled: options?.tableOptions.allowTableAlignment,
 						isFullWidthModeEnabled: options?.fullWidthEnabled,
 						isCommentEditor: options?.isCommentEditor,
 						isChromelessEditor: options?.isChromelessEditor,
-						isTableResizingEnabled: options?.tableResizingEnabled,
+						isTableResizingEnabled: options?.tableOptions.allowTableResizing,
 					})(state.schema);
 
 					// If the cursor is inside a table
@@ -283,7 +283,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 			insertTableWithSize: insertTableWithSize(
 				options?.fullWidthEnabled,
 				options?.isTableScalingEnabled,
-				options?.isTableAlignmentEnabled,
+				options?.tableOptions.allowTableAlignment,
 				api?.analytics?.actions,
 				options?.isCommentEditor,
 			),
@@ -299,7 +299,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							name: 'table',
 							node: tableNodeSpecWithFixedToDOM({
 								allowColumnResizing: Boolean(allowColumnResizing),
-								tableResizingEnabled: Boolean(options?.tableResizingEnabled),
+								tableResizingEnabled: Boolean(options?.tableOptions.allowTableResizing),
 								getEditorContainerWidth: defaultGetEditorContainerWidth,
 								isNestingSupported,
 							}),
@@ -313,7 +313,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							name: 'table',
 							node: tableNodeSpecWithFixedToDOM({
 								allowColumnResizing: Boolean(allowColumnResizing),
-								tableResizingEnabled: Boolean(options?.tableResizingEnabled),
+								tableResizingEnabled: Boolean(options?.tableOptions.allowTableResizing),
 								getEditorContainerWidth: defaultGetEditorContainerWidth,
 								isNestingSupported,
 							}),
@@ -339,13 +339,10 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 						const {
 							fullWidthEnabled,
 							wasFullWidthEnabled,
-							tableResizingEnabled,
-
 							tableOptions,
 							getEditorFeatureFlags,
 							dragAndDropEnabled,
 							isTableScalingEnabled,
-							isTableAlignmentEnabled,
 							isCommentEditor,
 							isChromelessEditor,
 						} = options || ({} as TablePluginOptions);
@@ -360,14 +357,12 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							defaultGetEditorContainerWidth,
 							getEditorFeatureFlags || defaultGetEditorFeatureFlags,
 							getIntl,
-							tableResizingEnabled,
 							fullWidthEnabled,
 							wasFullWidthEnabled,
 							dragAndDropEnabled,
 							editorAnalyticsAPI,
 							api,
 							isTableScalingEnabled,
-							isTableAlignmentEnabled,
 							shouldUseIncreasedScalingPercent,
 							isCommentEditor,
 							isChromelessEditor,
@@ -383,9 +378,8 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							getEditorFeatureFlags,
 							isTableScalingEnabled,
 							isNewColumnResizingEnabled,
-							isTableAlignmentEnabled,
 						} = options || ({} as TablePluginOptions);
-						const { allowColumnResizing } = pluginConfig(tableOptions);
+						const { allowColumnResizing, allowTableAlignment } = pluginConfig(tableOptions);
 						return allowColumnResizing
 							? createFlexiResizingPlugin(
 									dispatch,
@@ -399,7 +393,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 									editorAnalyticsAPI,
 									isTableScalingEnabled || false,
 									isNewColumnResizingEnabled,
-									isTableAlignmentEnabled,
+									allowTableAlignment,
 									!!options?.isCommentEditor,
 								)
 							: undefined;
@@ -414,11 +408,10 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 						const {
 							dragAndDropEnabled,
 							isTableScalingEnabled = false,
-							isTableAlignmentEnabled = false,
 							fullWidthEnabled = false,
 							isCommentEditor = false,
 							isChromelessEditor = false,
-							tableResizingEnabled = false,
+							tableOptions,
 						} = options || ({} as TablePluginOptions);
 
 						return keymapPlugin(
@@ -428,7 +421,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							editorAnalyticsAPI,
 							dragAndDropEnabled,
 							isTableScalingEnabled,
-							isTableAlignmentEnabled,
+							tableOptions?.allowTableAlignment,
 							fullWidthEnabled,
 							api,
 							getIntl,
@@ -436,7 +429,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 							shouldUseIncreasedScalingPercent,
 							isCommentEditor,
 							isChromelessEditor,
-							tableResizingEnabled,
+							tableOptions?.allowTableResizing,
 						);
 					},
 				},
@@ -501,24 +494,24 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				{
 					name: 'tableWidth',
 					plugin: ({ dispatchAnalyticsEvent, dispatch }) =>
-						options?.tableResizingEnabled
+						options?.tableOptions.allowTableResizing
 							? createTableWidthPlugin(
 									dispatch,
 									dispatchAnalyticsEvent,
-									options?.fullWidthEnabled ?? false,
-									options?.isTableScalingEnabled ?? false,
-									options?.isTableAlignmentEnabled ?? false,
-									options?.isCommentEditor ?? false,
+									options.fullWidthEnabled ?? false,
+									options.isTableScalingEnabled ?? false,
+									options.tableOptions.allowTableResizing ?? false,
+									options.isCommentEditor ?? false,
 								)
 							: undefined,
 				},
 				{
 					name: 'tableWidthInCommentFix',
 					plugin: ({ dispatch }) =>
-						options?.tableResizingEnabled && options?.isCommentEditor
+						options?.tableOptions.allowTableResizing && options?.isCommentEditor
 							? createTableWidthInCommentFixPlugin(
 									dispatch,
-									options?.isTableAlignmentEnabled ?? false,
+									options.tableOptions.allowTableAlignment ?? false,
 								)
 							: undefined,
 				},
@@ -529,7 +522,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 						createTableOverflowAnalyticsPlugin(
 							dispatch,
 							dispatchAnalyticsEvent,
-							options?.tableResizingEnabled ?? false,
+							options?.tableOptions.allowTableResizing ?? false,
 						),
 				},
 				{
@@ -731,7 +724,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 										/>
 									)}
 									{(options?.isTableScalingEnabled ||
-										(options?.tableResizingEnabled && options.isCommentEditor)) &&
+										(options?.tableOptions.allowTableResizing && options.isCommentEditor)) &&
 										isTableResizing &&
 										widthToWidest &&
 										resizingTableLocalId &&
@@ -772,11 +765,11 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 
 						const tableNode = createTableWithWidth({
 							isTableScalingEnabled: options?.isTableScalingEnabled,
-							isTableAlignmentEnabled: options?.isTableAlignmentEnabled,
+							isTableAlignmentEnabled: options?.tableOptions.allowTableAlignment,
 							isFullWidthModeEnabled: tableState?.isFullWidthModeEnabled,
 							isCommentEditor: options?.isCommentEditor,
 							isChromelessEditor: options?.isChromelessEditor,
-							isTableResizingEnabled: options?.tableResizingEnabled,
+							isTableResizingEnabled: options?.tableOptions.allowTableResizing,
 						})(state.schema);
 
 						let { tr } = state;

package/src/pm-plugins/main.ts

@@ -85,14 +85,12 @@ export const createPlugin = (
 	getEditorContainerWidth: GetEditorContainerWidth,
 	getEditorFeatureFlags: GetEditorFeatureFlags,
 	getIntl: () => IntlShape,
-	tableResizingEnabled?: boolean,
 	fullWidthModeEnabled?: boolean,
 	previousFullWidthModeEnabled?: boolean,
 	dragAndDropEnabled?: boolean,
 	editorAnalyticsAPI?: EditorAnalyticsAPI,
 	pluginInjectionApi?: PluginInjectionAPI,
 	isTableScalingEnabled?: boolean,
-	isTableAlignmentEnabled?: boolean,
 	shouldUseIncreasedScalingPercent?: boolean,
 	isCommentEditor?: boolean,
 	isChromelessEditor?: boolean,
@@ -104,7 +102,6 @@ export const createPlugin = (
 		insertRowButtonIndex: undefined,
 		isFullWidthModeEnabled: fullWidthModeEnabled,
 		wasFullWidthModeEnabled: previousFullWidthModeEnabled,
-		isTableResizingEnabled: tableResizingEnabled,
 		isHeaderRowEnabled: !!pluginConfig.allowHeaderRow,
 		isHeaderColumnEnabled: false,
 		isDragAndDropEnabled: dragAndDropEnabled,
@@ -268,7 +265,7 @@ export const createPlugin = (
 				if (
 					!insideTable(editorState) &&
 					isCommentEditor &&
-					isTableAlignmentEnabled &&
+					pluginConfig.allowTableAlignment &&
 					isTableScalingEnabled
 				) {
 					slice = transformSliceTableLayoutDefaultToCenter(slice, schema);
@@ -369,7 +366,6 @@ export const createPlugin = (
 					getEditorFeatureFlags,
 					dispatchAnalyticsEvent,
 					pluginInjectionApi,
-					isTableAlignmentEnabled,
 					isCommentEditor,
 					isChromelessEditor,
 				}),
@@ -382,7 +378,7 @@ export const createPlugin = (
 				blur: handleBlur,
 				mousedown: withCellTracking(handleMouseDown),
 				mouseleave: handleMouseLeave,
-				mousemove: whenTableInFocus(handleMouseMove(nodeViewPortalProviderAPI)),
+				mousemove: whenTableInFocus(handleMouseMove(nodeViewPortalProviderAPI), pluginInjectionApi),
 				mouseenter: handleMouseEnter,
 				mouseup: whenTableInFocus(handleMouseUp),
 				click: withCellTracking(whenTableInFocus(handleClick)),

package/src/toolbar.tsx

@@ -537,7 +537,7 @@ export const getToolbarConfig =
 			);
 
 			const alignmentMenu =
-				options?.isTableAlignmentEnabled && !isNested
+				config.allowTableAlignment && !isNested
 					? getAlignmentOptionsConfig(
 							state,
 							intl,

package/src/types.ts

@@ -79,6 +79,8 @@ export interface PluginConfig {
 	advanced?: boolean;
 	allowBackgroundColor?: boolean;
 	allowColumnResizing?: boolean;
+	allowTableResizing?: boolean;
+	allowTableAlignment?: boolean;
 	allowHeaderColumn?: boolean;
 	allowHeaderRow?: boolean;
 	allowMergeCells?: boolean;
@@ -169,7 +171,6 @@ export interface TablePluginState {
 	getIntl: () => IntlShape;
 
 	wasFullWidthModeEnabled?: boolean;
-	isTableResizingEnabled?: boolean;
 	isDragAndDropEnabled?: boolean;
 	isTableHovered?: boolean;
 
@@ -469,6 +470,9 @@ export const TableCssClassName = {
 	WITH_RESIZE_LINE: `${tablePrefixSelector}-column-resize-line`,
 	WITH_RESIZE_LINE_LAST_COLUMN: `${tablePrefixSelector}-column-resize-line-last-column`,
 
+	WITH_DRAG_RESIZE_LINE: `${tablePrefixSelector}-drag-column--resize-line`,
+	WITH_DRAG_RESIZE_LINE_LAST_COLUMN: `${tablePrefixSelector}-drag-column-resize-line-last-column`,
+
 	WITH_ROW_INSERT_LINE: `${tablePrefixSelector}-row-insert-line`,
 	WITH_ROW_INSERT_LINE_INACTIVE: `${tablePrefixSelector}-row-insert-line__inactive`,
 	WITH_LAST_ROW_INSERT_LINE: `${tablePrefixSelector}-last-row-insert-line`,

package/src/ui/common-styles.ts

@@ -272,7 +272,7 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 	${hoveredCell()};
 	${hoveredWarningCell};
 	${insertLine()};
-	${resizeHandle(props.featureFlags?.tableDragAndDrop)};
+	${resizeHandle()};
 	${rangeSelectionStyles};
 	${viewModeSortStyles()};