@atlaskit/editor-plugin-table 8.4.14 → 9.0.1

package/src/pm-plugins/utils/nodes.ts

@@ -60,8 +60,8 @@ export const tablesHaveDifferentColumnWidths = (
 	currentTable: PmNode,
 	previousTable: PmNode,
 ): boolean => {
-	let currentTableWidths = getTableWidths(currentTable);
-	let previousTableWidths = getTableWidths(previousTable);
+	const currentTableWidths = getTableWidths(currentTable);
+	const previousTableWidths = getTableWidths(previousTable);
 
 	if (currentTableWidths.length !== previousTableWidths.length) {
 		return true;
@@ -115,7 +115,7 @@ function getTableWidths(node: PmNode): number[] {
 		return [];
 	}
 
-	let tableWidths: Array<number> = [];
+	const tableWidths: Array<number> = [];
 	node.content.firstChild.content.forEach((cell) => {
 		if (Array.isArray(cell.attrs.colwidth)) {
 			const colspan = cell.attrs.colspan || 1;

package/src/pm-plugins/utils/row-controls.ts

@@ -148,8 +148,8 @@ export const copyPreviousRow =
 			offsetNextLineIndexPosition + map.width,
 		);
 
-		let cells = [] as PMNode[];
-		let fixRowspans: { pos: number; node: PMNode }[] = [];
+		const cells = [] as PMNode[];
+		const fixRowspans: { pos: number; node: PMNode }[] = [];
 		for (let i = 0; i < cellsPositionsInOriginalRow.length; ) {
 			const pos = cellsPositionsInOriginalRow[i];
 			const documentCellPos = pos + table.start;

package/src/pm-plugins/view-mode-sort/index.ts

@@ -53,8 +53,8 @@ export const createPlugin = (
 
 				const sortMeta = tr.getMeta('tableSortMeta');
 
-				let hoverTableMeta = tr.getMeta('mouseEnterTable');
-				let removeTableMeta = tr.getMeta('removeTable');
+				const hoverTableMeta = tr.getMeta('mouseEnterTable');
+				const removeTableMeta = tr.getMeta('removeTable');
 				let tableId = '';
 
 				// Remove the table from the state

package/src/pm-plugins/view-mode-sort/utils.ts

@@ -66,7 +66,7 @@ export const toggleSort = (view: EditorView, event: Event, pluginState: TableSor
 	if (widget?.classList.contains(IS_DISABLED_CLASS_NAME) || !widget) {
 		return;
 	}
-	let dataSortIndex = target
+	const dataSortIndex = target
 		?.closest('.ProseMirror-widget')
 		?.getAttribute(SORT_INDEX_DATA_ATTRIBUTE);
 	const tr = view.state.tr;
@@ -82,6 +82,8 @@ export const toggleSort = (view: EditorView, event: Event, pluginState: TableSor
 		return;
 	}
 
+	// Ignored via go/ees005
+	// eslint-disable-next-line prefer-const
 	let { index, direction, order: oldOrder } = pluginState?.[tableId] || {};
 
 	// Unsort if there was already a sort

package/src/tablePlugin.tsx

@@ -315,14 +315,9 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 				{
 					name: 'tablePMColResizing',
 					plugin: ({ dispatch, nodeViewPortalProviderAPI }) => {
-						const {
-							fullWidthEnabled,
-							tableOptions,
-							getEditorFeatureFlags,
-							isTableScalingEnabled,
-							isNewColumnResizingEnabled,
-						} = options || ({} as TablePluginOptions);
-						const { allowColumnResizing, allowTableAlignment } = pluginConfig(tableOptions);
+						const { fullWidthEnabled, tableOptions, getEditorFeatureFlags, isTableScalingEnabled } =
+							options || ({} as TablePluginOptions);
+						const { allowColumnResizing } = pluginConfig(tableOptions);
 						return allowColumnResizing
 							? createFlexiResizingPlugin(
 									dispatch,
@@ -335,8 +330,6 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 									nodeViewPortalProviderAPI,
 									editorAnalyticsAPI,
 									isTableScalingEnabled || false,
-									isNewColumnResizingEnabled,
-									allowTableAlignment,
 									!!options?.isCommentEditor,
 								)
 							: undefined;

package/src/tablePluginType.ts

@@ -29,7 +29,6 @@ export interface TablePluginOptions {
 	fullWidthEnabled?: boolean;
 	wasFullWidthEnabled?: boolean;
 	getEditorFeatureFlags?: GetEditorFeatureFlags;
-	isNewColumnResizingEnabled?: boolean;
 	isCommentEditor?: boolean;
 	isChromelessEditor?: boolean;
 }

package/src/ui/DragPreview/index.tsx

@@ -22,9 +22,9 @@ export const DragPreview = ({
 	width: number;
 	height: number;
 }) => {
-	let marginLeft = direction === 'row' ? -14 : width / 2 - 14;
-	let marginTop = direction === 'row' ? height / 2 - 14 : -10;
-	let transform = direction === 'row' ? 'rotate(90deg)' : 'none';
+	const marginLeft = direction === 'row' ? -14 : width / 2 - 14;
+	const marginTop = direction === 'row' ? height / 2 - 14 : -10;
+	const transform = direction === 'row' ? 'rotate(90deg)' : 'none';
 	return (
 		<Box
 			xcss={boxStyles}
@@ -41,6 +41,7 @@ export const DragPreview = ({
 					marginLeft: `${marginLeft}px`,
 					// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 					marginTop: `${marginTop}px`,
+					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
 					transform: transform,
 				}}
 			/>

package/src/ui/FloatingContextualButton/index.tsx

@@ -74,8 +74,7 @@ const FloatingContextualButtonInner = React.memo((props: Props & WrappedComponen
 	};
 
 	const domAtPos = editorView.domAtPos.bind(editorView);
-	let targetCellRef: Node | undefined;
-	targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
+	const targetCellRef: Node | undefined = findDomRefAtPos(targetCellPosition, domAtPos);
 
 	useEffect(() => {
 		if (isCellMenuOpenByKeyboard && !isContextualMenuOpen) {

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -230,8 +230,6 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 		if (allowBackgroundColor) {
 			const node = isOpen && targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
 			const background = hexToEditorBackgroundPaletteColor(node?.attrs?.background || '#ffffff');
-			let selectedRowIndex;
-			let selectedColumnIndex;
 
 			const selectedRowAndColumnFromPalette = getSelectedRowAndColumnFromPalette(
 				cellBackgroundColorPalette,
@@ -240,8 +238,8 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 				background!,
 				colorPalletteColumns,
 			);
-			selectedRowIndex = selectedRowAndColumnFromPalette.selectedRowIndex;
-			selectedColumnIndex = selectedRowAndColumnFromPalette.selectedColumnIndex;
+			const selectedRowIndex = selectedRowAndColumnFromPalette.selectedRowIndex;
+			const selectedColumnIndex = selectedRowAndColumnFromPalette.selectedColumnIndex;
 			return {
 				content: isDragAndDropEnabled
 					? formatMessage(messages.backgroundColor)
@@ -590,7 +588,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 	};
 
 	private createOriginalContextMenuItems = () => {
-		let items: MenuItem[] = [];
+		const items: MenuItem[] = [];
 		const sortColumnItems = this.createSortColumnItems();
 		const backgroundColorItem = this.createBackgroundColorItem();
 		const distributeColumnsItem = this.createDistributeColumnsItem();
@@ -626,7 +624,7 @@ export class ContextualMenu extends Component<Props & WrappedComponentProps, Sta
 		const deleteRowItem = this.createDeleteRowItem();
 
 		// Group items so when table.menu.group-items FF is enabled, a divider shows under split cell, above add column
-		let items: { items: MenuItem[] }[] = [
+		const items: { items: MenuItem[] }[] = [
 			{
 				items: [],
 			},

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -165,7 +165,7 @@ const MapDragMenuOptionIdToMessage: Record<DragMenuOptionIdType, MessageType> =
 };
 
 const getGroupedDragMenuConfig = () => {
-	let groupedDragMenuConfig: DragMenuOptionIdType[][] = [
+	const groupedDragMenuConfig: DragMenuOptionIdType[][] = [
 		[
 			'add_row_above',
 			'add_row_below',
@@ -195,8 +195,8 @@ const convertToDropdownItems = (
 	selectionRect?: Rect,
 ) => {
 	const groupedDragMenuConfig = getGroupedDragMenuConfig();
-	let menuItemsArr: MenuItem[][] = [...Array(groupedDragMenuConfig.length)].map(() => []);
-	let menuCallback: { [key: string]: Command } = {};
+	const menuItemsArr: MenuItem[][] = [...Array(groupedDragMenuConfig.length)].map(() => []);
+	const menuCallback: { [key: string]: Command } = {};
 	dragMenuConfig.forEach((item) => {
 		const menuGroupIndex = groupedDragMenuConfig.findIndex((group) => group.includes(item.id));
 
@@ -497,7 +497,7 @@ const DragMenu = React.memo(
 		 * @returns true when the menu should be closed, false otherwise
 		 */
 		const shouldCloseMenu = (state: EditorState) => {
-			let {
+			const {
 				isDragMenuOpen: previousOpenState,
 				dragMenuDirection: previousDragMenuDirection,
 				dragMenuIndex: previousDragMenuIndex,

package/src/ui/FloatingDragMenu/DropdownMenu.tsx

@@ -72,8 +72,8 @@ export const DropdownMenu = ({
 	};
 
 	// more offsets calculation as offsets depend on the direction and updated placement here
-	let offsetY = direction === 'row' ? (popupPlacement[0] === 'bottom' ? -8 : -34) : 0;
-	let offsetX = direction === 'column' ? (popupPlacement[1] === 'left' ? 0 : -7) : 0;
+	const offsetY = direction === 'row' ? (popupPlacement[0] === 'bottom' ? -8 : -34) : 0;
+	const offsetX = direction === 'column' ? (popupPlacement[1] === 'left' ? 0 : -7) : 0;
 
 	const innerMenu = () => {
 		return (

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

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

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -102,7 +102,7 @@ const TableFloatingColumnControls = ({
 
 	if (stickyTop) {
 		const columnControlTopOffsetFromParent = '-12px';
-		const headerRowHeight = hasHeaderRow && stickyTop !== undefined ? (rowHeights?.[0] ?? 0) : 0;
+		const headerRowHeight = hasHeaderRow && stickyTop !== undefined ? rowHeights?.[0] ?? 0 : 0;
 		containerRef?.current?.style.setProperty(
 			'top',
 			fg('platform_editor_breakout_use_css')

package/src/ui/TableFullWidthLabel/index.tsx

@@ -12,6 +12,7 @@ const tableFullWidthLabelWrapperStyles = xcss({
 	backgroundColor: 'elevation.surface.overlay',
 	borderRadius: 'border.radius',
 	boxShadow: 'elevation.shadow.overlay',
+	// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
 	lineHeight: 1,
 	boxSizing: 'border-box',
 	alignItems: 'center',

package/src/ui/event-handlers.ts

@@ -2,6 +2,7 @@ import rafSchedule from 'raf-schd';
 
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
+import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
 import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import {
 	browser,
@@ -13,6 +14,7 @@ import {
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
@@ -224,7 +226,23 @@ export const handleMouseOver = (view: EditorView, mouseEvent: Event): boolean =>
 		return hoverColumns([startIndex], false)(state, dispatch);
 	}
 
-	if (
+	const isNestedTable = getParentOfTypeCount(state.schema.nodes.table)(state.selection.$from) > 1;
+
+	if (isNestedTable) {
+		// if the table is nested inside a table, we only call hideInsertColumnOrRowButton if the table nearest to the mouse target is NOT the parent table
+		const nearestTable = closestElement(target, 'table');
+		const nestedTable = findParentNodeOfTypeClosestToPos(state.doc.resolve(state.selection.from), [
+			state.schema.nodes.table,
+		]);
+		
+		const parentTable = findParentNodeOfTypeClosestToPos(state.doc.resolve(nestedTable?.pos || 0), [
+			state.schema.nodes.table,
+		]);
+
+		if (nearestTable?.dataset.tableLocalId !== parentTable?.node.attrs.localId) {
+			return hideInsertColumnOrRowButton()(state, dispatch);
+		}
+	} else if (
 		(isCell(target) || isCornerButton(target)) &&
 		(typeof insertColumnButtonIndex === 'number' || typeof insertRowButtonIndex === 'number')
 	) {

package/src/ui/toolbar.tsx

@@ -501,17 +501,7 @@ export const getToolbarConfig =
 		// We don't want to show floating toolbar while resizing the table
 		const isWidthResizing = tableWidthState?.resizing;
 
-		// Hide floating toolbar when resizing column and internal column width is on
-		const shouldHideToolbarForInternalColumnWidth = Boolean(
-			options?.isNewColumnResizingEnabled && resizeState && resizeState.dragging,
-		);
-
-		if (
-			tableObject &&
-			pluginState.editorHasFocus &&
-			!isWidthResizing &&
-			!shouldHideToolbarForInternalColumnWidth
-		) {
+		if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
 			const nodeType = state.schema.nodes.table;
 			const isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
 			const isTableScalingWithFixedColumnWidthsOptionShown =

package/tsconfig.app.json

@@ -28,7 +28,6 @@
 		"./src/nodeviews/__mocks__/**/*"
 	],
 	"compilerOptions": {
-		"baseUrl": "./",
 		"composite": true,
 		"outDir": "../../../tsDist/@atlaskit__editor-plugin-table/app"
 	},

package/tsconfig.dev.json

@@ -28,7 +28,6 @@
 	],
 	"exclude": ["./dist/**/*", "./build/**/*", "./node_modules/**/*"],
 	"compilerOptions": {
-		"baseUrl": "./",
 		"composite": true,
 		"outDir": "../../../tsDist/@atlaskit__editor-plugin-table/dev"
 	},