@atlaskit/editor-plugin-table 10.9.6 → 10.9.8

package/src/nodeviews/TableComponentWithSharedState.tsx

@@ -3,19 +3,15 @@ import React from 'react';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import type {
-	ExtractInjectionAPI,
-	GetEditorFeatureFlags,
-	getPosHandlerNode,
-} from '@atlaskit/editor-common/types';
+import type { GetEditorFeatureFlags, getPosHandlerNode } from '@atlaskit/editor-common/types';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable } from '@atlaskit/editor-tables';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
-import { TablePlugin } from '../tablePluginType';
 import type { PluginInjectionAPI, TableSharedStateInternal } from '../types';
+import { useInternalTablePluginStateSelector } from '../ui/hooks/useInternalTablePluginStateSelector';
 
 import TableComponent from './TableComponent';
 import type { TableOptions } from './types';
@@ -40,16 +36,6 @@ type TableComponentWithSharedStateProps = {
 	allowTableResizing?: boolean;
 };
 
-const useSharedTablePluginStateSelector = <K extends keyof TableSharedStateInternal>(
-	api: ExtractInjectionAPI<TablePlugin> | undefined,
-	key: K,
-) => {
-	const value = useSharedPluginStateSelector(api, `table.${key}` as never, {
-		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	}) as TableSharedStateInternal[K];
-	return value;
-};
-
 /**
  * Use useSharedPluginState to control re-renders from plugin dependencies
  */
@@ -73,21 +59,47 @@ export const TableComponentWithSharedState = ({
 			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
 		});
 
-	const isTableResizingSelector = useSharedTablePluginStateSelector(api, 'isTableResizing');
-	const isHeaderColumnEnabledSelector = useSharedTablePluginStateSelector(
+	const isTableResizingSelector = useInternalTablePluginStateSelector(api, 'isTableResizing', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const isHeaderColumnEnabledSelector = useInternalTablePluginStateSelector(
 		api,
 		'isHeaderColumnEnabled',
+		{
+			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+		},
 	);
-	const isHeaderRowEnabledSelector = useSharedTablePluginStateSelector(api, 'isHeaderRowEnabled');
-	const orderingSelector = useSharedTablePluginStateSelector(api, 'ordering');
-	const isResizingSelector = useSharedTablePluginStateSelector(api, 'isResizing');
-	const isInDangerSelector = useSharedTablePluginStateSelector(api, 'isInDanger');
-	const hoveredCellSelector = useSharedTablePluginStateSelector(api, 'hoveredCell');
-	const hoveredRowsSelector = useSharedTablePluginStateSelector(api, 'hoveredRows');
-	const isTableHoveredSelector = useSharedTablePluginStateSelector(api, 'isTableHovered');
-	const isWholeTableInDangerSelector = useSharedTablePluginStateSelector(
+	const isHeaderRowEnabledSelector = useInternalTablePluginStateSelector(
+		api,
+		'isHeaderRowEnabled',
+		{
+			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+		},
+	);
+	const orderingSelector = useInternalTablePluginStateSelector(api, 'ordering', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const isResizingSelector = useInternalTablePluginStateSelector(api, 'isResizing', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const isInDangerSelector = useInternalTablePluginStateSelector(api, 'isInDanger', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const hoveredCellSelector = useInternalTablePluginStateSelector(api, 'hoveredCell', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const hoveredRowsSelector = useInternalTablePluginStateSelector(api, 'hoveredRows', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const isTableHoveredSelector = useInternalTablePluginStateSelector(api, 'isTableHovered', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const isWholeTableInDangerSelector = useInternalTablePluginStateSelector(
 		api,
 		'isWholeTableInDanger',
+		{
+			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+		},
 	);
 
 	// mediaState
@@ -203,8 +215,8 @@ export const TableComponentWithSharedState = ({
 			isMediaFullscreen={isFullscreen}
 			options={options}
 			allowControls={allowControls}
-			isHeaderRowEnabled={isHeaderRowEnabled}
-			isHeaderColumnEnabled={isHeaderColumnEnabled}
+			isHeaderRowEnabled={isHeaderRowEnabled ?? false}
+			isHeaderColumnEnabled={isHeaderColumnEnabled ?? false}
 			isDragAndDropEnabled={options?.isDragAndDropEnabled && !isLivePageViewMode}
 			isTableScalingEnabled={options?.isTableScalingEnabled}
 			allowTableAlignment={allowTableAlignment}

package/src/nodeviews/TableContainer.tsx

@@ -114,7 +114,7 @@ const AlignmentTableContainer = ({
 		: tableState?.wasFullWidthModeEnabled;
 
 	useEffect(() => {
-		if (editorExperiment('platform_editor_usesharedpluginstateselector', false) && !tableState) {
+		if (!tableState && editorExperiment('platform_editor_usesharedpluginstateselector', false)) {
 			return;
 		}
 

package/src/nodeviews/TableResizer.tsx

@@ -19,7 +19,6 @@ import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { logException } from '@atlaskit/editor-common/monitoring';
 import type { HandleResize, HandleSize } from '@atlaskit/editor-common/resizer';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
@@ -70,6 +69,7 @@ import {
 	TABLE_HIGHLIGHT_TOLERANCE,
 	TABLE_SNAP_GAP,
 } from '../ui/consts';
+import { useInternalTablePluginStateSelector } from '../ui/hooks/useInternalTablePluginStateSelector';
 
 interface TableResizerProps {
 	width: number;
@@ -218,13 +218,13 @@ export const TableResizer = ({
 	});
 
 	// widthToWidest
-	const widthToWidestSelector = useSharedPluginStateSelector(
+	const widthToWidestSelector = useInternalTablePluginStateSelector(
 		pluginInjectionApi,
-		'table.widthToWidest' as never,
+		'widthToWidest',
 		{
 			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
 		},
-	) as TableSharedStateInternal['widthToWidest'];
+	);
 	const widthToWidest = editorExperiment('platform_editor_usesharedpluginstateselector', true)
 		? widthToWidestSelector
 		: (tableState as TableSharedStateInternal).widthToWidest;

package/src/pm-plugins/table-resizing/utils/scale-table.ts

@@ -4,6 +4,7 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { DomAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import type { PluginInjectionAPI } from '../../../types';
 import { updateColumnWidths } from '../../transforms/column-width';
@@ -267,9 +268,10 @@ export const scaleTable =
 
 		if (resizeState) {
 			tr = updateColumnWidths(resizeState, node, start, api)(tr);
-			// Avoid adding this transaction separately to the history as these are automatic updates
-			// as a consequence of another action
-			tr.setMeta('addToHistory', false);
+
+			if (!fg('platform_editor_fix_table_resizing_undo')) {
+				tr.setMeta('addToHistory', false);
+			}
 
 			if (tr.docChanged) {
 				tr.setMeta('scrollIntoView', false);

package/src/ui/ContentComponent.tsx

@@ -7,12 +7,11 @@ import {
 	GetEditorContainerWidth,
 	GetEditorFeatureFlags,
 } from '@atlaskit/editor-common/types';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import { TablePlugin, TablePluginOptions } from '../tablePluginType';
-import { TableSharedStateInternal } from '../types';
 
 import FloatingContextualButton from './FloatingContextualButton';
 import FloatingContextualMenu from './FloatingContextualMenu';
@@ -23,19 +22,9 @@ import FloatingDragMenu from './FloatingDragMenu';
 import FloatingInsertButton from './FloatingInsertButton';
 import { FloatingToolbarLabel } from './FloatingToolbarLabel/FloatingToolbarLabel';
 import { GlobalStylesWrapper } from './global-styles';
+import { useInternalTablePluginStateSelector } from './hooks/useInternalTablePluginStateSelector';
 import { FullWidthDisplay } from './TableFullWidthLabel';
 
-const useSharedTablePluginStateSelector = <K extends keyof TableSharedStateInternal>(
-	api: ExtractInjectionAPI<TablePlugin> | undefined,
-	key: K,
-) => {
-	const value = useSharedPluginStateSelector(
-		api,
-		`table.${key}` as never,
-	) as TableSharedStateInternal[K];
-	return value;
-};
-
 export type ContentComponentProps = {
 	api: ExtractInjectionAPI<TablePlugin> | undefined;
 	editorView: EditorView;
@@ -62,35 +51,82 @@ const ContentComponentInternal = ({
 	const editorAnalyticsAPI = api?.analytics?.actions;
 	const ariaNotifyPlugin = api?.accessibilityUtils?.actions.ariaNotify;
 
-	const resizingTableLocalId = useSharedTablePluginStateSelector(api, 'resizingTableLocalId');
-	const resizingTableRef = useSharedTablePluginStateSelector(api, 'resizingTableRef');
-	const isTableResizing = useSharedTablePluginStateSelector(api, 'isTableResizing');
-	const isResizing = useSharedTablePluginStateSelector(api, 'isResizing');
-	const widthToWidest = useSharedTablePluginStateSelector(api, 'widthToWidest');
+	const resizingTableLocalId = useInternalTablePluginStateSelector(api, 'resizingTableLocalId', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const resizingTableRef = useInternalTablePluginStateSelector(api, 'resizingTableRef', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const isTableResizing = useInternalTablePluginStateSelector(api, 'isTableResizing', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const isResizing = useInternalTablePluginStateSelector(api, 'isResizing', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const widthToWidest = useInternalTablePluginStateSelector(api, 'widthToWidest', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
 
-	const tableNode = useSharedTablePluginStateSelector(api, 'tableNode');
-	const targetCellPosition = useSharedTablePluginStateSelector(api, 'targetCellPosition');
-	const isContextualMenuOpen = useSharedTablePluginStateSelector(api, 'isContextualMenuOpen');
-	const tableRef = useSharedTablePluginStateSelector(api, 'tableRef');
-	const pluginConfig = useSharedTablePluginStateSelector(api, 'pluginConfig');
-	const insertColumnButtonIndex = useSharedTablePluginStateSelector(api, 'insertColumnButtonIndex');
-	const insertRowButtonIndex = useSharedTablePluginStateSelector(api, 'insertRowButtonIndex');
-	const isHeaderColumnEnabled = useSharedTablePluginStateSelector(api, 'isHeaderColumnEnabled');
-	const isHeaderRowEnabled = useSharedTablePluginStateSelector(api, 'isHeaderRowEnabled');
-	const isDragAndDropEnabled = useSharedTablePluginStateSelector(api, 'isDragAndDropEnabled');
-	const tableWrapperTarget = useSharedTablePluginStateSelector(api, 'tableWrapperTarget');
-	const isCellMenuOpenByKeyboard = useSharedTablePluginStateSelector(
+	const tableNode = useInternalTablePluginStateSelector(api, 'tableNode', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const targetCellPosition = useInternalTablePluginStateSelector(api, 'targetCellPosition', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const isContextualMenuOpen = useInternalTablePluginStateSelector(api, 'isContextualMenuOpen', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const tableRef = useInternalTablePluginStateSelector(api, 'tableRef', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const pluginConfig = useInternalTablePluginStateSelector(api, 'pluginConfig', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const insertColumnButtonIndex = useInternalTablePluginStateSelector(
+		api,
+		'insertColumnButtonIndex',
+		{
+			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+		},
+	);
+	const insertRowButtonIndex = useInternalTablePluginStateSelector(api, 'insertRowButtonIndex', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const isHeaderColumnEnabled = useInternalTablePluginStateSelector(api, 'isHeaderColumnEnabled', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const isHeaderRowEnabled = useInternalTablePluginStateSelector(api, 'isHeaderRowEnabled', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const isDragAndDropEnabled = useInternalTablePluginStateSelector(api, 'isDragAndDropEnabled', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const tableWrapperTarget = useInternalTablePluginStateSelector(api, 'tableWrapperTarget', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const isCellMenuOpenByKeyboard = useInternalTablePluginStateSelector(
 		api,
 		'isCellMenuOpenByKeyboard',
+		{
+			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+		},
 	);
 
-	const { allowControls } = pluginConfig;
+	const { allowControls } = pluginConfig ?? {};
 
-	const stickyHeader = useSharedTablePluginStateSelector(api, 'stickyHeader');
+	const stickyHeader = useInternalTablePluginStateSelector(api, 'stickyHeader', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
 
-	const dragMenuDirection = useSharedTablePluginStateSelector(api, 'dragMenuDirection');
-	const dragMenuIndex = useSharedTablePluginStateSelector(api, 'dragMenuIndex');
-	const isDragMenuOpen = useSharedTablePluginStateSelector(api, 'isDragMenuOpen');
+	const dragMenuDirection = useInternalTablePluginStateSelector(api, 'dragMenuDirection', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const dragMenuIndex = useInternalTablePluginStateSelector(api, 'dragMenuIndex', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const isDragMenuOpen = useInternalTablePluginStateSelector(api, 'isDragMenuOpen', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
 
 	return (
 		<>

package/src/ui/DragHandle/index.tsx

@@ -11,7 +11,6 @@ import { browser } from '@atlaskit/editor-common/browser';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable, TableMap } from '@atlaskit/editor-tables';
@@ -32,6 +31,7 @@ import { TableCssClassName as ClassName } from '../../types';
 import type { CellHoverMeta, TableDirection, TableSharedStateInternal } from '../../types';
 import { dragTableInsertColumnButtonSize } from '../consts';
 import { DragPreview } from '../DragPreview';
+import { useInternalTablePluginStateSelector } from '../hooks/useInternalTablePluginStateSelector';
 
 import { HandleIconComponent } from './HandleIconComponent';
 
@@ -336,21 +336,17 @@ const DragHandleComponentWithSharedState = ({
 	};
 
 	// hoveredColumns
-	const hoveredColumnsSelector = useSharedPluginStateSelector(
-		api,
-		'table.hoveredColumns' as never,
-		{
-			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-		},
-	) as TableSharedStateInternal['hoveredColumns'];
+	const hoveredColumnsSelector = useInternalTablePluginStateSelector(api, 'hoveredColumns', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
 	const hoveredColumns = editorExperiment('platform_editor_usesharedpluginstateselector', true)
 		? hoveredColumnsSelector
 		: tableState?.hoveredColumns;
 
 	// hoveredRows
-	const hoveredRowsSelector = useSharedPluginStateSelector(api, 'table.hoveredRows' as never, {
+	const hoveredRowsSelector = useInternalTablePluginStateSelector(api, 'hoveredRows', {
 		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
-	}) as TableSharedStateInternal['hoveredRows'];
+	});
 	const hoveredRows = editorExperiment('platform_editor_usesharedpluginstateselector', true)
 		? hoveredRowsSelector
 		: tableState?.hoveredRows;

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -107,7 +107,7 @@ export const ColumnControls = ({
 	const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
 
 	const rowControlStickyTop = 45;
-	const marginTop = hasHeaderRow && stickyTop !== undefined ? (rowControlStickyTop ?? 0) : 0;
+	const marginTop = hasHeaderRow && stickyTop !== undefined ? rowControlStickyTop ?? 0 : 0;
 
 	const handleClick = useCallback(
 		(event: MouseEvent) => {

package/src/ui/TableFloatingControls/NumberColumn/index.tsx

@@ -103,10 +103,10 @@ export default class NumberColumn extends Component<Props, any> {
 			const newPos =
 				selection.head > pos
 					? // Selection is after table
-					// nodeSize - 3 will move the position inside last table cell
-					Selection.near(doc.resolve(pos + ($pos.parent.nodeSize - 3)), -1)
+						// nodeSize - 3 will move the position inside last table cell
+						Selection.near(doc.resolve(pos + ($pos.parent.nodeSize - 3)), -1)
 					: // Selection is before table
-					Selection.near($pos);
+						Selection.near($pos);
 			editorView.dispatch(tr.setSelection(newPos));
 		}
 		selectRow(index, event.shiftKey);

package/src/ui/hooks/useInternalTablePluginStateSelector.ts

@@ -0,0 +1,36 @@
+import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+
+import { TablePlugin } from '../../tablePluginType';
+import { TableSharedStateInternal } from '../../types';
+
+type Options = {
+	disabled?: boolean;
+};
+
+/**
+ * **This hook is only for internal use and should not be used outside of the table plugin.**
+ *
+ * Hook to select a value from the internal table plugin state.
+ * This is a wrapper around `useSharedPluginStateSelector` to provide access to the entire
+ * `TableSharedStateInternal` type. Since tables plugin has a lot of internal state that is not
+ * exposed via the `TableSharedState` type, we need to use this hook to access it in a type safe way.
+ *
+ * @param api The editor API
+ * @param key Key of TableSharedStateInternal to select
+ * @returns
+ */
+export const useInternalTablePluginStateSelector = <K extends keyof TableSharedStateInternal>(
+	api: ExtractInjectionAPI<TablePlugin> | undefined,
+	key: K,
+	options?: Options,
+): TableSharedStateInternal[K] | undefined => {
+	// Need to disable the eslint rule here because the key is for the TableSharedStateInternal type
+	// and we are using it as a string to access the value in the useSharedPluginStateSelector
+	// which is typed only for the public TableSharedState type.
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const value = useSharedPluginStateSelector(api, `table.${key}` as any, options) as
+		| TableSharedStateInternal[K]
+		| undefined;
+	return value;
+};