@atlaskit/editor-plugin-table 10.9.5 → 10.9.7

package/src/tablePlugin.tsx

@@ -31,6 +31,7 @@ import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
 import { ResizerBreakoutModeLabel } from '@atlaskit/editor-common/resizer';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { Command, EditorPlugin, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import { hasParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
@@ -873,8 +874,17 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 			)(pluginConfig(options?.tableOptions)),
 		},
 		usePluginHook({ editorView }) {
-			const { editorViewModeState } = useSharedPluginState(api, ['editorViewMode']);
-			const mode = editorViewModeState?.mode;
+			const { editorViewModeState } = useSharedPluginState(api, ['editorViewMode'], {
+				disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
+			});
+
+			// mode
+			const modeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
+				disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+			});
+			const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+				? modeSelector
+				: editorViewModeState?.mode;
 
 			useEffect(() => {
 				const { state, dispatch } = editorView;

package/src/ui/DragHandle/index.tsx

@@ -11,11 +11,13 @@ 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';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { token } from '@atlaskit/tokens';
 
 import { getPluginState as getDnDPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
@@ -327,10 +329,32 @@ const DragHandleComponentWithSharedState = ({
 	intl,
 	api,
 }: DragHandleWithSharedStateProps & WrappedComponentProps) => {
-	const { tableState } = useSharedPluginState(api, ['table']) as {
+	const { tableState } = useSharedPluginState(api, ['table'], {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
+	}) as {
 		tableState?: TableSharedStateInternal;
 	};
 
+	// hoveredColumns
+	const hoveredColumnsSelector = useSharedPluginStateSelector(
+		api,
+		'table.hoveredColumns' as never,
+		{
+			disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+		},
+	) as TableSharedStateInternal['hoveredColumns'];
+	const hoveredColumns = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? hoveredColumnsSelector
+		: tableState?.hoveredColumns;
+
+	// hoveredRows
+	const hoveredRowsSelector = useSharedPluginStateSelector(api, 'table.hoveredRows' as never, {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	}) as TableSharedStateInternal['hoveredRows'];
+	const hoveredRows = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? hoveredRowsSelector
+		: tableState?.hoveredRows;
+
 	return (
 		<DragHandleComponent
 			isDragMenuTarget={isDragMenuTarget}
@@ -348,8 +372,8 @@ const DragHandleComponentWithSharedState = ({
 			onClick={onClick}
 			editorView={editorView}
 			intl={intl}
-			hoveredColumns={tableState?.hoveredColumns}
-			hoveredRows={tableState?.hoveredRows}
+			hoveredColumns={hoveredColumns}
+			hoveredRows={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/global-styles.tsx

@@ -7,6 +7,8 @@ import { Global, jsx } from '@emotion/react';
 
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import type { PluginInjectionAPI } from '../types';
 
@@ -21,8 +23,18 @@ export const GlobalStylesWrapper = ({
 	isDragAndDropEnabledOption?: boolean;
 	api?: PluginInjectionAPI;
 }) => {
-	const { editorViewModeState } = useSharedPluginState(api, ['editorViewMode']);
-	const isLivePageViewMode = editorViewModeState?.mode === 'view';
+	// mode
+	const { editorViewModeState } = useSharedPluginState(api, ['editorViewMode'], {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
+	});
+	const modeSelector = useSharedPluginStateSelector(api, 'editorViewMode.mode', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? modeSelector
+		: editorViewModeState?.mode;
+
+	const isLivePageViewMode = mode === 'view';
 	return (
 		<Global
 			styles={tableStyles({