@atlaskit/editor-plugin-table 10.9.3 → 10.9.5

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

@@ -5,12 +5,14 @@ import React, { useCallback, useMemo, useRef } from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import {
 	clearHoverSelection,
@@ -76,7 +78,17 @@ export const ColumnControls = ({
 	api,
 }: ColumnControlsProps & { api?: ExtractInjectionAPI<TablePlugin> }) => {
 	const columnControlsRef = useRef<HTMLDivElement>(null);
-	const { selectionState } = useSharedPluginState(api, ['selection']);
+
+	// selection
+	const { selectionState } = useSharedPluginState(api, ['selection'], {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
+	});
+	const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? selectionsSelector
+		: selectionState?.selection;
 
 	const widths =
 		colWidths
@@ -89,15 +101,13 @@ export const ColumnControls = ({
 	// TODO: ED-26961 - reusing getRowsParams here because it's generic enough to work for columns -> rename
 	const columnParams = getRowsParams(colWidths ?? []);
 	const colIndex = hoveredCell?.colIndex;
-	const selectedColIndexes = getSelectedColumns(
-		selectionState?.selection || editorView.state.selection,
-	);
+	const selectedColIndexes = getSelectedColumns(selection || editorView.state.selection);
 
 	const firstRow = tableRef.querySelector('tr');
 	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/CornerControls/DragCornerControls.tsx

@@ -7,7 +7,9 @@ import { injectIntl } from 'react-intl-next';
 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 { findTable, isTableSelected, selectTable } from '@atlaskit/editor-tables/utils';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import type { TablePlugin } from '../../../tablePluginType';
@@ -71,7 +73,16 @@ const DragCornerControlsComponentWithSelection = ({
 	intl: { formatMessage },
 	api,
 }: CornerControlProps & WrappedComponentProps & { api?: ExtractInjectionAPI<TablePlugin> }) => {
-	const { selectionState } = useSharedPluginState(api, ['selection']);
+	// selection
+	const { selectionState } = useSharedPluginState(api, ['selection'], {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
+	});
+	const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? selectionsSelector
+		: selectionState?.selection;
 
 	const handleOnClick = () => {
 		const { state, dispatch } = editorView;
@@ -83,15 +94,15 @@ const DragCornerControlsComponentWithSelection = ({
 		clearHoverSelection()(state, dispatch);
 	};
 	const isActive = useMemo(() => {
-		if (!selectionState?.selection) {
+		if (!selection) {
 			return;
 		}
-		const table = findTable(selectionState.selection);
+		const table = findTable(selection);
 		if (!table) {
 			return false;
 		}
-		return isTableSelected(selectionState.selection);
-	}, [selectionState]);
+		return isTableSelected(selection);
+	}, [selection]);
 
 	if (isResizing) {
 		return null;

package/src/ui/TableFloatingControls/FloatingControlsWithSelection.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import type { TablePlugin } from '../../tablePluginType';
 
@@ -38,7 +40,16 @@ export const FloatingControlsWithSelection = ({
 	tableActive,
 	api,
 }: FloatingControlsWithSelectionProps) => {
-	const { selectionState } = useSharedPluginState(api, ['selection']);
+	// selection
+	const { selectionState } = useSharedPluginState(api, ['selection'], {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
+	});
+	const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? selectionsSelector
+		: selectionState?.selection;
 
 	return (
 		<>
@@ -53,7 +64,7 @@ export const FloatingControlsWithSelection = ({
 				stickyTop={tableActive ? stickyTop : undefined}
 			/>
 			<RowControls
-				selection={selectionState?.selection}
+				selection={selection}
 				editorView={editorView}
 				tableRef={tableRef}
 				hoverRows={hoverRows}

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

@@ -66,7 +66,7 @@ export default class NumberColumn extends Component<Props, any> {
 							{hasHeaderRow ? (index > 0 ? index : null) : index + 1}
 						</div>
 					) : (
-						// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+						// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions, @atlassian/a11y/interactive-element-not-keyboard-focusable
 						<div
 							// Ignored via go/ees005
 							// eslint-disable-next-line react/no-array-index-key
@@ -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/TableFloatingControls/RowControls/DragControls.tsx

@@ -4,6 +4,7 @@ import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'reac
 
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import type { ExtractInjectionAPI } 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 { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -11,6 +12,7 @@ import { CellSelection } from '@atlaskit/editor-tables';
 import { getSelectionRect } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { token } from '@atlaskit/tokens';
 
 import { clearHoverSelection } from '../../../pm-plugins/commands';
@@ -385,7 +387,16 @@ export const DragControlsWithSelection = ({
 	updateCellHoverLocation,
 	api,
 }: Exclude<DragControlsProps, 'selection'>) => {
-	const { selectionState } = useSharedPluginState(api, ['selection']);
+	// selection
+	const { selectionState } = useSharedPluginState(api, ['selection'], {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
+	});
+	const selectionsSelector = useSharedPluginStateSelector(api, 'selection.selection', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const selection = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? selectionsSelector
+		: selectionState?.selection;
 
 	return (
 		<DragControls
@@ -403,7 +414,7 @@ export const DragControlsWithSelection = ({
 			selectRows={selectRows}
 			updateCellHoverLocation={updateCellHoverLocation}
 			api={api}
-			selection={selectionState?.selection}
+			selection={selection}
 		/>
 	);
 };

package/src/ui/icons/SortingIconWrapper.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { SortingIcon } from '@atlaskit/editor-common/table';
 import type { ExtractInjectionAPI } 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 { TablePlugin } from '../../tablePluginType';
 
@@ -12,8 +14,19 @@ type SortingIconWrapperProps = SortingIconProps & {
 };
 
 export const SortingIconWrapper = (props: SortingIconWrapperProps) => {
-	const { editorViewModeState } = useSharedPluginState(props.api, ['editorViewMode']);
-	if (editorViewModeState?.mode === 'edit') {
+	const { editorViewModeState } = useSharedPluginState(props.api, ['editorViewMode'], {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true),
+	});
+
+	// mode
+	const modeSelector = useSharedPluginStateSelector(props.api, 'editorViewMode.mode', {
+		disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false),
+	});
+	const mode = editorExperiment('platform_editor_usesharedpluginstateselector', true)
+		? modeSelector
+		: editorViewModeState?.mode;
+
+	if (mode === 'edit') {
 		return null;
 	}
 	// Ignored via go/ees005