@atlaskit/editor-plugin-table 7.31.3 → 8.0.0

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;