@atlaskit/editor-plugin-table 7.19.11 → 7.19.12

package/src/toolbar.tsx

@@ -521,6 +521,7 @@ export const getToolbarConfig =
 							getDomRef,
 							editorView,
 							shouldUseIncreasedScalingPercent,
+							options?.fullWidthEnabled,
 						)
 					: [];
 
@@ -852,6 +853,7 @@ export const getAlignmentOptionsConfig = (
 	getDomRef: (editorView: EditorView) => HTMLElement | undefined,
 	editorView: EditorView | null,
 	shouldUseIncreasedScalingPercent: boolean,
+	isFullWidthEditor?: boolean,
 ): Array<FloatingToolbarDropdown<Command>> => {
 	const tableObject = findTable(editorState.selection);
 
@@ -900,6 +902,7 @@ export const getAlignmentOptionsConfig = (
 				getDomRef,
 				editorView,
 				shouldUseIncreasedScalingPercent,
+				isFullWidthEditor,
 			) && {
 				disabled: value !== 'center',
 			}),
@@ -942,6 +945,7 @@ export const isLayoutOptionDisabled = (
 	getDomRef: (editorView: EditorView) => HTMLElement | undefined,
 	editorView: EditorView | null,
 	shouldUseIncreasedScalingPercent: boolean,
+	isFullWidthEditor: boolean | undefined,
 ) => {
 	const { lineLength } = getEditorContainerWidth();
 	let tableContainerWidth = getTableContainerWidth(selectedNode);
@@ -958,7 +962,9 @@ export const isLayoutOptionDisabled = (
 		tableContainerWidth = tableContainerWidth * scalePercent;
 	}
 
-	if (selectedNode && lineLength && tableContainerWidth > lineLength) {
+	// If fixed-width editor, we disable 'left-alignment' when table width is 760px.
+	// tableContainerWidth +1 here because tableContainerWidth is 759 in fixed-width editor
+	if (selectedNode && !isFullWidthEditor && lineLength && tableContainerWidth + 1 >= lineLength) {
 		return true;
 	}
 

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -27,6 +27,7 @@ import {
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
+import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -93,6 +94,10 @@ type DragMenuProps = {
 	shouldUseIncreasedScalingPercent?: boolean;
 	isTableFixedColumnWidthsOptionEnabled?: boolean;
 	tableSortColumnReorder?: boolean;
+	ariaNotifyPlugin?: (
+		message: string,
+		ariaLiveElementAttributes?: AriaLiveElementAttributes,
+	) => void;
 };
 
 type PluralOptionType = 'noOfCols' | 'noOfRows' | 'noOfCells' | null;
@@ -275,6 +280,7 @@ export const DragMenu = React.memo(
 		shouldUseIncreasedScalingPercent,
 		isTableFixedColumnWidthsOptionEnabled,
 		tableSortColumnReorder,
+		ariaNotifyPlugin,
 	}: DragMenuProps & WrappedComponentProps) => {
 		const { state, dispatch } = editorView;
 		const { selection } = state;
@@ -305,6 +311,7 @@ export const DragMenu = React.memo(
 			isTableFixedColumnWidthsOptionEnabled,
 			shouldUseIncreasedScalingPercent,
 			tableSortColumnReorder,
+			ariaNotifyPlugin,
 		);
 
 		const { menuItems, menuCallback } = convertToDropdownItems(

package/src/ui/FloatingDragMenu/index.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import { Popup } from '@atlaskit/editor-common/ui';
+import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import {
@@ -10,7 +11,7 @@ import {
 	akEditorFloatingOverlapPanelZIndex,
 } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import type { PluginConfig, TableDirection } from '../../types';
@@ -35,6 +36,10 @@ export interface Props {
 	pluginConfig?: PluginConfig;
 	isTableScalingEnabled?: boolean;
 	getEditorFeatureFlags?: GetEditorFeatureFlags;
+	ariaNotifyPlugin?: (
+		message: string,
+		ariaLiveElementAttributes?: AriaLiveElementAttributes,
+	) => void;
 }
 
 const FloatingDragMenu = ({
@@ -53,6 +58,7 @@ const FloatingDragMenu = ({
 	pluginConfig,
 	isTableScalingEnabled,
 	getEditorFeatureFlags,
+	ariaNotifyPlugin,
 }: Props) => {
 	if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
 		return null;
@@ -79,7 +85,7 @@ const FloatingDragMenu = ({
 	const shouldUseIncreasedScalingPercent =
 		isTableScalingEnabled &&
 		tableWithFixedColumnWidthsOption &&
-		getBooleanFF('platform.editor.table.use-increased-scaling-percent');
+		fg('platform.editor.table.use-increased-scaling-percent');
 
 	return (
 		<Popup
@@ -120,6 +126,7 @@ const FloatingDragMenu = ({
 				shouldUseIncreasedScalingPercent={shouldUseIncreasedScalingPercent}
 				isTableFixedColumnWidthsOptionEnabled={tableWithFixedColumnWidthsOption}
 				tableSortColumnReorder={tableSortColumnReorder}
+				ariaNotifyPlugin={ariaNotifyPlugin}
 			/>
 		</Popup>
 	);

package/src/ui/TableFloatingControls/index.tsx

@@ -7,13 +7,15 @@ import { browser } from '@atlaskit/editor-common/utils';
 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';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { findTable } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import { hoverCell, hoverRows, selectRow, selectRows } from '../../commands';
 import type { TablePlugin } from '../../plugin';
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import { TableCssClassName as ClassName } from '../../types';
 import type { CellHoverMeta } from '../../types';
+import { isTableNested } from '../../utils/nodes';
 
 import {
 	CornerControls,
@@ -127,6 +129,12 @@ export const TableFloatingControls = ({
 		? ClassName.DRAG_ROW_CONTROLS_WRAPPER
 		: ClassName.ROW_CONTROLS_WRAPPER;
 
+	const tablePos = findTable(editorView.state.selection)?.pos;
+	const isNested = tablePos !== undefined && isTableNested(editorView.state, tablePos!);
+	const shouldShowCornerControls = fg('platform_editor_element_drag_and_drop_ed_24041')
+		? !featureFlagsState?.elementDragAndDrop || isNested
+		: !featureFlagsState?.elementDragAndDrop;
+
 	return (
 		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
 		<div className={wrapperClassName}>
@@ -152,8 +160,8 @@ export const TableFloatingControls = ({
 					<>
 						{isDragAndDropEnabled ? (
 							<>
-								{!featureFlagsState?.elementDragAndDrop &&
-									(getBooleanFF('platform.editor.table.use-shared-state-hook') ? (
+								{shouldShowCornerControls &&
+									(fg('platform.editor.table.use-shared-state-hook') ? (
 										<DragCornerControlsWithSelection
 											editorView={editorView}
 											tableRef={tableRef}
@@ -185,7 +193,7 @@ export const TableFloatingControls = ({
 									updateCellHoverLocation={updateCellHoverLocation}
 								/>
 							</>
-						) : getBooleanFF('platform.editor.table.use-shared-state-hook') ? (
+						) : fg('platform.editor.table.use-shared-state-hook') ? (
 							<FloatingControlsWithSelection
 								editorView={editorView}
 								tableRef={tableRef}

package/src/utils/drag-menu.ts

@@ -22,6 +22,7 @@ import type {
 	GetEditorContainerWidth,
 	IconProps,
 } from '@atlaskit/editor-common/types';
+import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
@@ -45,6 +46,7 @@ import {
 	sortColumnWithAnalytics,
 } from '../commands-with-analytics';
 import { moveSourceWithAnalytics } from '../pm-plugins/drag-and-drop/commands-with-analytics';
+import { getPluginState as getTablePluginState } from '../pm-plugins/plugin-factory';
 import { getNewResizeStateFromSelectedColumns } from '../pm-plugins/table-resizing/utils/resize-state';
 import { getClosestSelectionRect } from '../toolbar';
 import type { DraggableData, DraggableType, TableDirection } from '../types';
@@ -148,8 +150,13 @@ export const getDragMenuConfig = (
 	isTableFixedColumnWidthsOptionEnabled = false,
 	shouldUseIncreasedScalingPercent = false,
 	tableSortColumnReorder = false,
+	ariaNotifyPlugin?: (
+		message: string,
+		ariaLiveElementAttributes?: AriaLiveElementAttributes,
+	) => void,
 ): DragMenuConfig[] => {
 	const { selection } = editorView.state;
+	const { getIntl } = getTablePluginState(editorView.state);
 	const addOptions =
 		direction === 'row'
 			? [
@@ -358,7 +365,7 @@ export const getDragMenuConfig = (
 			onClick: (state: EditorState, dispatch?: CommandDispatch) => {
 				if (canMove) {
 					requestAnimationFrame(() => {
-						moveSourceWithAnalytics(editorAnalyticsAPI)(
+						moveSourceWithAnalytics(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(
 							INPUT_METHOD.TABLE_CONTEXT_MENU,
 							`table-${direction}`,
 							getOriginIndexes(selectionRect!),