@atlaskit/editor-plugin-table 10.3.3 → 10.4.1

package/src/tablePlugin.tsx

@@ -456,7 +456,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 								)
 							: undefined,
 				},
-				// TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
+				// TODO: ED-26961 - should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
 				{
 					name: 'tableOverflowAnalyticsPlugin',
 					plugin: ({ dispatch, dispatchAnalyticsEvent }) =>

package/src/tablePluginType.ts

@@ -25,7 +25,7 @@ export interface TablePluginOptions {
 	// this option will eventually be removed, and enabled by default
 	isTableScalingEnabled?: boolean;
 	allowContextualMenu?: boolean;
-	// TODO these two need to be rethought
+	// TODO: ED-26961 - these two need to be rethought
 	fullWidthEnabled?: boolean;
 	wasFullWidthEnabled?: boolean;
 	getEditorFeatureFlags?: GetEditorFeatureFlags;
@@ -35,7 +35,7 @@ export interface TablePluginOptions {
 
 type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
 
-// TODO: duplicating type instead of importing media plugin causing a circular dependency
+// TODO: ED-26961 - duplicating type instead of importing media plugin causing a circular dependency
 type MediaPlugin = NextEditorPlugin<
 	'media',
 	{

package/src/ui/FloatingInsertButton/index.tsx

@@ -87,7 +87,7 @@ export class FloatingInsertButton extends React.Component<Props & WrappedCompone
 			isChromelessEditor,
 		} = this.props;
 
-		// TODO: temporarily disable insert button for first column and row https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50
+		// TODO: ED-26961 - temporarily disable insert button for first column and row https://atlassian.slack.com/archives/C05U8HRQM50/p1698363744682219?thread_ts=1698209039.104909&cid=C05U8HRQM50
 		if (isDragAndDropEnabled && (insertColumnButtonIndex === 0 || insertRowButtonIndex === 0)) {
 			return null;
 		}
@@ -182,7 +182,7 @@ export class FloatingInsertButton extends React.Component<Props & WrappedCompone
 
 		const hasNumberedColumns = checkIfNumberColumnEnabled(editorView.state.selection);
 
-		// ED-19336: Fixed the 'add column button' not visible issue when sticky header is enabled
+		// Fixed the 'add column button' not visible issue when sticky header is enabled
 		// By setting the Popup z-index higher than the sticky header z-index ( common-styles.ts tr.sticky)
 		// Only when inserting a column, otherwise set to undefined
 		// Need to set z-index in the Popup, set z-index in the <InsertButton /> will not work

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

@@ -86,7 +86,7 @@ export const ColumnControls = ({
 				width ? (stickyTop ? `${width - 2}px` : `${width - 1}px`) : '0px',
 			)
 			.join(' ') ?? '0px';
-	// TODO: reusing getRowsParams here because it's generic enough to work for columns -> rename
+	// 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(

package/src/ui/TableFloatingControls/RowControls/ClassicControls.tsx

@@ -6,6 +6,7 @@ import { injectIntl } from 'react-intl-next';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import { clearHoverSelection } from '../../../pm-plugins/commands';
 import type { RowParams } from '../../../pm-plugins/utils/row-controls';
@@ -86,7 +87,15 @@ class RowControlsComponent extends Component<Props & WrappedComponentProps> {
 									// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 									top: thisRowSticky ? `3px` : undefined,
 									// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-									paddingTop: thisRowSticky ? `${tableControlsSpacing}px` : undefined,
+									paddingTop: thisRowSticky
+										? `${
+												fg('platform_editor_number_column_sticky_header_bug')
+													? // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+														tableControlsSpacing - 2
+													: // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+														tableControlsSpacing
+											}px`
+										: undefined,
 								}}
 							>
 								<button

package/src/ui/TableFloatingControls/index.tsx

@@ -75,7 +75,6 @@ export const TableFloatingControls = ({
 	const _selectRow = useCallback(
 		(row: number, expand: boolean) => {
 			const { state, dispatch } = editorView;
-			// fix for issue ED-4665
 			if (browser.ie_version === 11) {
 				// Ignored via go/ees005
 				// eslint-disable-next-line @atlaskit/editor/no-as-casting
@@ -89,7 +88,6 @@ export const TableFloatingControls = ({
 	const _selectRows = useCallback(
 		(rowIndexes: number[]) => {
 			const { state, dispatch } = editorView;
-			// fix for issue ED-4665
 			if (browser.ie_version === 11) {
 				// Ignored via go/ees005
 				// eslint-disable-next-line @atlaskit/editor/no-as-casting

package/src/ui/common-styles.ts

@@ -329,8 +329,6 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 		td.${ClassName.TABLE_CELL} {
 			background-color: ${tableCellBackgroundColor};
 
-			// ED-15246: Trello card is visible through a border of a table border
-			// This fixes a border issue caused by relative positioned table cells
 			&::after {
 				height: 100%;
 				content: '';
@@ -367,7 +365,11 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 	${fg('platform_editor_nested_tables_sticky_header_bug')
 		? `
 		.${ClassName.TABLE_STICKY} > .${ClassName.DRAG_ROW_CONTROLS_WRAPPER} .${ClassName.NUMBERED_COLUMN} .${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
-			margin-top: ${stickyRowOffsetTop + 2}px;
+			margin-top: ${
+				fg('platform_editor_number_column_sticky_header_bug')
+					? stickyRowOffsetTop
+					: stickyRowOffsetTop + 2
+			}px;
 			width: ${akEditorTableNumberColumnWidth}px;
 
 			position: fixed !important;
@@ -378,8 +380,12 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 		}
 		`
 		: `
-    .${ClassName.TABLE_STICKY} .${ClassName.NUMBERED_COLUMN} .${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
-			margin-top: ${stickyRowOffsetTop + 2}px;
+    	.${ClassName.TABLE_STICKY} .${ClassName.NUMBERED_COLUMN} .${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
+			margin-top: ${
+				fg('platform_editor_number_column_sticky_header_bug')
+					? stickyRowOffsetTop
+					: stickyRowOffsetTop + 2
+			}px;
 			width: ${akEditorTableNumberColumnWidth}px;
 
 			position: fixed !important;
@@ -531,20 +537,30 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 		.${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY} > .${ClassName.DRAG_ROW_CONTROLS_WRAPPER}
 			.${ClassName.NUMBERED_COLUMN}
 			.${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
-			margin-top: ${tableControlsSpacing + 2}px;
+			margin-top: ${
+				fg('platform_editor_number_column_sticky_header_bug')
+					? tableControlsSpacing
+					: tableControlsSpacing + 2
+			}px;
 		}
 		`
 		: `
 		.${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY}
 			.${ClassName.NUMBERED_COLUMN}
 			.${ClassName.NUMBERED_COLUMN_BUTTON}:first-of-type {
-			margin-top: ${tableControlsSpacing + 2}px;
+			margin-top: ${
+				fg('platform_editor_number_column_sticky_header_bug')
+					? tableControlsSpacing
+					: tableControlsSpacing + 2
+			}px;
 		}
 		`}
 
 	.${ClassName.CORNER_CONTROLS}.sticky {
-		border-top: ${tableControlsSpacing - tableToolbarSize + 2}px solid
-			${token('elevation.surface', 'white')};
+		border-top: ${fg('platform_editor_number_column_sticky_header_bug')
+				? tableControlsSpacing - tableToolbarSize
+				: tableControlsSpacing - tableToolbarSize + 2}px
+			solid ${token('elevation.surface', 'white')};
 	}
 
 	${sentinelStyles}
@@ -1088,10 +1104,6 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 			background: ${tableCellDeleteColor};
 			z-index: ${akEditorUnitZIndex * 100};
 		}
-		// ED-15246: Trello card is visible through a border of a table border
-		/* ED-19064: To fix when enable header column in the table,
-       and selection the header column, the right border is not tableBorderSelectedColor
-       when deleting the header column, the right border is not tableToolbarDeleteColor */
 		td.${ClassName.HOVERED_CELL},
 			td.${ClassName.SELECTED_CELL},
 			th.${ClassName.TABLE_HEADER_CELL}.${ClassName.SELECTED_CELL},
@@ -1175,7 +1187,7 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 	}
 `;
 
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4139
+// TODO: DSP-4139 - Remove this when we have a better solution for the table toolbar
 export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 	.ProseMirror {
 		${baseTableStyles(props)}

package/src/ui/consts.ts

@@ -22,7 +22,7 @@ import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
  * Basic colors added to prevent content overflow in table cells.
  */
 
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4135
+// TODO: DSP-4135 - Remove these tokens once the new elevation tokens are available
 export const tableCellBackgroundColor = token('elevation.surface', N0);
 
 export const tableHeaderCellBackgroundColor = token(
@@ -35,7 +35,7 @@ export const tableTextColor = token('color.text.subtlest', N200);
 export const tableBorderColor = token('color.background.accent.gray.subtler', akEditorTableBorder);
 export const tableFloatingControlsColor = token('color.background.neutral', N20);
 
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4461
+// TODO: DSP-4461 - Remove these tokens once the new elevation tokens are available
 export const tableCellSelectedColor = token(
 	'color.blanket.selected',
 	akEditorTableCellBlanketSelected,

package/src/ui/toolbar.tsx

@@ -647,7 +647,7 @@ export const getToolbarConfig =
 					...cellItems,
 					...columnSettingsItems,
 					...colorPicker,
-					// TODO: editor controls to move to overflow menu
+					// TODO: ED-26961 - editor controls to move to overflow menu
 					{
 						type: 'extensions-placeholder',
 						separator: 'end',