@atlaskit/editor-plugin-table 10.9.4 → 10.9.6

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

@@ -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/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({

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