@atlaskit/editor-plugin-table 7.16.0 → 7.16.2

package/src/commands/insert.ts

@@ -1,14 +1,12 @@
 // #region Imports
 import { AddColumnStep } from '@atlaskit/custom-steps';
-import type {
-  EditorAnalyticsAPI,
-  INPUT_METHOD,
-} from '@atlaskit/editor-common/analytics';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import {
   ACTION,
   ACTION_SUBJECT,
   ACTION_SUBJECT_ID,
   EVENT_TYPE,
+  INPUT_METHOD,
   TABLE_OVERFLOW_CHANGE_TRIGGER,
 } from '@atlaskit/editor-common/analytics';
 import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
@@ -203,22 +201,32 @@ export const insertRow =
     return true;
   };
 
-export const createTable =
-  (
-    isTableScalingEnabled?: boolean,
-    isFullWidthModeEnabled?: boolean,
-  ): Command =>
-  (state, dispatch) => {
-    const table = createTableWithWidth(
-      isTableScalingEnabled,
-      isFullWidthModeEnabled,
-    )(state.schema);
+export const createTable = (
+  isTableScalingEnabled?: boolean,
+  isFullWidthModeEnabled?: boolean,
+  editorAnalyticsAPI?: EditorAnalyticsAPI | undefined | null,
+): Command => (state, dispatch) => {
+  const table = createTableWithWidth(
+    isTableScalingEnabled,
+    isFullWidthModeEnabled,
+  )(state.schema);
 
-    if (dispatch) {
-      dispatch(safeInsert(table)(state.tr).scrollIntoView());
+  if (dispatch) {
+    const tr = safeInsert(table)(state.tr).scrollIntoView();
+    if (editorAnalyticsAPI) {
+      editorAnalyticsAPI?.attachAnalyticsEvent({
+          action: ACTION.INSERTED,
+          actionSubject: ACTION_SUBJECT.DOCUMENT,
+          actionSubjectId: ACTION_SUBJECT_ID.TABLE,
+          attributes: { inputMethod: INPUT_METHOD.SHORTCUT },
+          eventType: EVENT_TYPE.TRACK,
+      })(tr);
     }
-    return true;
-  };
+    dispatch(tr);
+  }
+  
+  return true;
+}
 
 export const insertTableWithSize =
   (

package/src/commands/misc.ts

@@ -1,7 +1,7 @@
 import isEqual from 'lodash/isEqual';
 
-import type { CellAttributes } from '@atlaskit/adf-schema';
-import type { Command } from '@atlaskit/editor-common/types';
+import type { CellAttributes, TableLayout } from '@atlaskit/adf-schema';
+import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
 import {
   closestElement,
   isParagraph,
@@ -270,8 +270,8 @@ export const getTableSelectionType = (selection: Selection) => {
     return selection.isRowSelection()
       ? 'row'
       : selection.isColSelection()
-      ? 'column'
-      : undefined;
+        ? 'column'
+        : undefined;
   }
 };
 
@@ -313,8 +313,8 @@ export const getTableElementMoveTypeBySlice = (
     return map.width === slicedMap.width
       ? 'row'
       : map.height === slicedMap.height
-      ? 'column'
-      : undefined;
+        ? 'column'
+        : undefined;
   } catch (e) {
     return undefined;
   }
@@ -809,3 +809,25 @@ export const updateWidthToWidest = (widthToWidest: WidthToWidest) =>
       },
     };
   });
+
+export const setTableAlignment =
+  (newAlignment: TableLayout): EditorCommand =>
+  ({ tr }) => {
+    const tableObject = findTable(tr.selection);
+
+    if (!tableObject) {
+      return null;
+    }
+
+    const nextTableAttrs = {
+      ...tableObject.node.attrs,
+      layout: newAlignment,
+    };
+
+    tr.setNodeMarkup(tableObject.pos, undefined, nextTableAttrs).setMeta(
+      'scrollIntoView',
+      false,
+    );
+
+    return tr;
+  };

package/src/commands-with-analytics.ts

@@ -1,5 +1,6 @@
 import type { IntlShape } from 'react-intl-next/src/types';
 
+import type { TableLayout } from '@atlaskit/adf-schema';
 import { tableBackgroundColorPalette } from '@atlaskit/adf-schema';
 import type { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import {
@@ -40,6 +41,7 @@ import {
   deleteTableIfSelected,
   getTableSelectionType,
   setMultipleCellAttrs,
+  setTableAlignment,
 } from './commands/misc';
 import { sortByColumn } from './commands/sort';
 import { splitCell } from './commands/split-cell';
@@ -55,6 +57,7 @@ import { distributeColumnsWidths } from './pm-plugins/table-resizing/commands';
 import type { ResizeStateWithAnalytics } from './pm-plugins/table-resizing/utils';
 import { deleteRows, mergeCells } from './transforms';
 import type {
+  AlignmentOptions,
   InsertRowMethods,
   InsertRowOptions,
   RowInsertPosition,
@@ -691,4 +694,38 @@ export const toggleTableLockWithAnalytics =
         eventType: EVENT_TYPE.TRACK,
       };
     })(editorAnalyticsAPI)(editorCommandToPMCommand(setTableDisplayMode));
-// #endregion
+
+export const setTableAlignmentWithAnalytics =
+  (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
+  (
+    newAlignment: AlignmentOptions,
+    // previous alignment could be a breakout value, if so use 'null' to indicate alignment was not previously set
+    previousAlignment: TableLayout,
+    inputMethod: INPUT_METHOD.FLOATING_TB,
+  ) =>
+    withEditorAnalyticsAPI((state) => {
+      const { table, totalRowCount, totalColumnCount } = getSelectedTableInfo(
+        state.selection,
+      );
+
+      return {
+        action: TABLE_ACTION.CHANGED_ALIGNMENT,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        actionSubjectId: null,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          tableWidth: table?.node.attrs.width,
+          newAlignment,
+          previousAlignment:
+            previousAlignment === 'center' ||
+            previousAlignment === 'align-start'
+              ? previousAlignment
+              : null,
+          totalRowCount,
+          totalColumnCount,
+          inputMethod,
+        },
+      };
+    })(editorAnalyticsAPI)(
+      editorCommandToPMCommand(setTableAlignment(newAlignment)),
+    );

package/src/nodeviews/TableComponent.tsx

@@ -104,6 +104,7 @@ export interface ComponentProps {
   isMediaFullscreen?: boolean;
   isDragAndDropEnabled?: boolean;
   isTableScalingEnabled?: boolean;
+  isTableAlignmentEnabled?: boolean;
   tableActive: boolean;
   ordering?: TableColumnOrdering;
   isResizing?: boolean;
@@ -687,6 +688,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
       isDragAndDropEnabled,
       getEditorFeatureFlags,
       isTableScalingEnabled, // here we can use options.isTableScalingEnabled
+      isTableAlignmentEnabled
     } = this.props;
 
     let {
@@ -820,6 +822,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         isResizing={isResizing}
         isTableScalingEnabled={isTableScalingEnabled}
         isWholeTableInDanger={isWholeTableInDanger}
+        isTableAlignmentEnabled={isTableAlignmentEnabled}
       >
         <div
           className={ClassName.TABLE_STICKY_SENTINEL_TOP}

package/src/nodeviews/TableComponentWithSharedState.tsx

@@ -106,6 +106,7 @@ export const TableComponentWithSharedState = ({
       isHeaderColumnEnabled={isHeaderColumnEnabled}
       isDragAndDropEnabled={options?.isDragAndDropEnabled}
       isTableScalingEnabled={options?.isTableScalingEnabled}
+      isTableAlignmentEnabled={options?.isTableAlignmentEnabled}
       tableActive={tableActive}
       ordering={ordering}
       isResizing={isResizing}

package/src/nodeviews/TableContainer.tsx

@@ -1,5 +1,11 @@
 import type { PropsWithChildren } from 'react';
-import React, { forwardRef, useCallback, useRef, useState } from 'react';
+import React, {
+  forwardRef,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import classNames from 'classnames';
 
@@ -50,6 +56,57 @@ export const InnerContainer = forwardRef<
   );
 });
 
+const centerAlignStyle = { display: 'flex', justifyContent: 'center' };
+
+const leftAlignStyle = { display: 'flex', justifyContent: 'flex-start' };
+
+type AlignmentTableContainerProps = {
+  node: PMNode;
+};
+
+const AlignmentTableContainer = ({
+  node,
+  children,
+}: PropsWithChildren<AlignmentTableContainerProps>) => {
+  const alignment = node.attrs.layout;
+
+  const style = useMemo(() => {
+    return alignment === 'align-start' ? leftAlignStyle : centerAlignStyle;
+  }, [alignment]);
+
+  return (
+    <div data-testid="table-alignment-container" style={style}>
+      {children}
+    </div>
+  );
+};
+
+const AlignmentTableContainerWrapper = ({
+  isTableAlignmentEnabled,
+  node,
+  children,
+}: PropsWithChildren<
+  AlignmentTableContainerProps & { isTableAlignmentEnabled?: boolean }
+>) => {
+  if (!isTableAlignmentEnabled) {
+    return (
+      <div
+        data-testid="table-alignment-container"
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+        }}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <AlignmentTableContainer node={node}>{children}</AlignmentTableContainer>
+  );
+};
+
 type ResizableTableContainerProps = {
   containerWidth: number;
   node: PMNode;
@@ -59,9 +116,11 @@ type ResizableTableContainerProps = {
   tableRef: HTMLTableElement;
   isResizing?: boolean;
   pluginInjectionApi?: PluginInjectionAPI;
-  isTableScalingEnabled?: boolean;
   tableWrapperHeight?: number;
   isWholeTableInDanger?: boolean;
+
+  isTableScalingEnabled?: boolean;
+  isTableAlignmentEnabled?: boolean;
 };
 
 export const ResizableTableContainer = React.memo(
@@ -75,9 +134,10 @@ export const ResizableTableContainer = React.memo(
     tableRef,
     isResizing,
     pluginInjectionApi,
-    isTableScalingEnabled,
     tableWrapperHeight,
     isWholeTableInDanger,
+    isTableScalingEnabled,
+    isTableAlignmentEnabled,
   }: PropsWithChildren<ResizableTableContainerProps>) => {
     const containerRef = useRef<HTMLDivElement | null>(null);
     const tableWidthRef = useRef<number>(akEditorDefaultLayoutWidth);
@@ -204,11 +264,9 @@ export const ResizableTableContainer = React.memo(
     const isLivePageViewMode = editorViewModeState?.mode === 'view';
 
     return (
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'center',
-        }}
+      <AlignmentTableContainerWrapper
+        isTableAlignmentEnabled={isTableAlignmentEnabled}
+        node={node}
       >
         <div
           style={{
@@ -237,7 +295,7 @@ export const ResizableTableContainer = React.memo(
             </TableResizer>
           )}
         </div>
-      </div>
+      </AlignmentTableContainerWrapper>
     );
   },
 );
@@ -246,16 +304,18 @@ type TableContainerProps = {
   node: PMNode;
   className: string;
   containerWidth: EditorContainerWidth;
-  isTableResizingEnabled: boolean | undefined;
   editorView: EditorView;
   getPos: () => number | undefined;
   tableRef: HTMLTableElement;
   isNested: boolean;
   isResizing?: boolean;
   pluginInjectionApi?: PluginInjectionAPI;
-  isTableScalingEnabled?: boolean;
   tableWrapperHeight?: number;
   isWholeTableInDanger?: boolean;
+
+  isTableResizingEnabled: boolean | undefined;
+  isTableScalingEnabled?: boolean;
+  isTableAlignmentEnabled?: boolean;
 };
 
 export const TableContainer = ({
@@ -263,7 +323,6 @@ export const TableContainer = ({
   node,
   className,
   containerWidth: { width: editorWidth },
-  isTableResizingEnabled,
   editorView,
   getPos,
   tableRef,
@@ -271,8 +330,10 @@ export const TableContainer = ({
   tableWrapperHeight,
   isResizing,
   pluginInjectionApi,
-  isTableScalingEnabled,
   isWholeTableInDanger,
+  isTableResizingEnabled,
+  isTableScalingEnabled,
+  isTableAlignmentEnabled,
 }: PropsWithChildren<TableContainerProps>) => {
   if (isTableResizingEnabled && !isNested) {
     return (
@@ -288,6 +349,7 @@ export const TableContainer = ({
         pluginInjectionApi={pluginInjectionApi}
         isTableScalingEnabled={isTableScalingEnabled}
         isWholeTableInDanger={isWholeTableInDanger}
+        isTableAlignmentEnabled={isTableAlignmentEnabled}
       >
         {children}
       </ResizableTableContainer>

package/src/nodeviews/table.tsx

@@ -292,7 +292,8 @@ export default class TableView extends ReactNodeView<Props> {
               isHeaderRowEnabled={pluginState!.isHeaderRowEnabled}
               isHeaderColumnEnabled={pluginState!.isHeaderColumnEnabled}
               isDragAndDropEnabled={pluginState!.isDragAndDropEnabled}
-              isTableScalingEnabled={props.options?.isTableScalingEnabled} // this.options?.isTableScalingEnabled sams as TableOptions.isTableScalingEnabled same as pluginState.isTableScalingEnabled
+              isTableScalingEnabled={props.options?.isTableScalingEnabled} // this.options?.isTableScalingEnabled same as TableOptions.isTableScalingEnabled same as pluginState.isTableScalingEnabled
+              isTableAlignmentEnabled={props.options?.isTableAlignmentEnabled}
               tableActive={tableActive}
               ordering={pluginState!.ordering as TableColumnOrdering}
               isResizing={isResizing}
@@ -391,6 +392,7 @@ export const createTableView = (
   getEditorFeatureFlags: GetEditorFeatureFlags,
   dispatchAnalyticsEvent: DispatchAnalyticsEvent,
   pluginInjectionApi?: PluginInjectionAPI,
+  isTableAlignmentEnabled?: boolean,
 ): NodeView => {
   const {
     pluginConfig,
@@ -417,6 +419,7 @@ export const createTableView = (
       isTableResizingEnabled,
       isDragAndDropEnabled,
       isTableScalingEnabled, // same as options.isTableScalingEnabled
+      isTableAlignmentEnabled
     },
     getEditorContainerWidth,
     getEditorFeatureFlags,

package/src/nodeviews/types.ts

@@ -17,6 +17,7 @@ export type TableOptions = {
   isTableResizingEnabled?: boolean;
   isDragAndDropEnabled?: boolean;
   isTableScalingEnabled?: boolean;
+  isTableAlignmentEnabled?: boolean;
 };
 
 export interface Props {

package/src/plugin.tsx

@@ -1,12 +1,6 @@
 import React from 'react';
 
-import {
-  table,
-  tableCell,
-  tableHeader,
-  tableRow,
-  tableStage0,
-} from '@atlaskit/adf-schema';
+import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
 import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
 import {
   ACTION,
@@ -218,7 +212,13 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
 
               options: {
                 selectNodeInserted: false,
-                analyticsPayload,
+                analyticsPayload: {
+                  ...analyticsPayload,
+                  attributes: {
+                    ...analyticsPayload.attributes,
+                    localId: node.attrs.localId,
+                  },
+                },
               },
             }) ?? false
           );
@@ -234,14 +234,8 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
     },
 
     nodes() {
-      const tableNode =
-        options?.isTableScalingEnabled &&
-        getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
-          ? tableStage0
-          : table;
-
       return [
-        { name: 'table', node: tableNode },
+        { name: 'table', node: table },
         { name: 'tableHeader', node: tableHeader },
         { name: 'tableRow', node: tableRow },
         { name: 'tableCell', node: tableCell },
@@ -650,17 +644,21 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
             // see comment on tablesPlugin.getSharedState on usage
             const tableState = api?.table?.sharedState.currentState();
 
-            const tr = insert(
-              createTableWithWidth(
-                options?.isTableScalingEnabled,
-                tableState?.isFullWidthModeEnabled,
-              )(state.schema),
-            );
+            const tableNode = createTableWithWidth(
+              options?.isTableScalingEnabled,
+              tableState?.isFullWidthModeEnabled,
+            )(state.schema);
+
+            const tr = insert(tableNode);
+
             editorAnalyticsAPI?.attachAnalyticsEvent({
               action: ACTION.INSERTED,
               actionSubject: ACTION_SUBJECT.DOCUMENT,
               actionSubjectId: ACTION_SUBJECT_ID.TABLE,
-              attributes: { inputMethod: INPUT_METHOD.QUICK_INSERT },
+              attributes: {
+                inputMethod: INPUT_METHOD.QUICK_INSERT,
+                localId: tableNode.attrs.localId,
+              },
               eventType: EVENT_TYPE.TRACK,
             })(tr);
             return tr;

package/src/pm-plugins/keymap.ts

@@ -1,13 +1,7 @@
 import type { IntlShape } from 'react-intl-next/src/types';
 
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import {
-  ACTION,
-  ACTION_SUBJECT,
-  ACTION_SUBJECT_ID,
-  EVENT_TYPE,
-  INPUT_METHOD,
-} from '@atlaskit/editor-common/analytics';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import {
   addColumnAfter,
   addColumnBefore,
@@ -37,7 +31,7 @@ import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
-import { createTable, goToNextCell, moveCursorBackward } from '../commands';
+import { goToNextCell, moveCursorBackward } from '../commands';
 import {
   addRowAroundSelection,
   changeColumnWidthByStepWithAnalytics,
@@ -53,25 +47,10 @@ import {
 import {
   addColumnAfter as addColumnAfterCommand,
   addColumnBefore as addColumnBeforeCommand,
+  createTable,
 } from '../commands/insert';
 import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/commands-with-analytics';
 import type { PluginInjectionAPIWithA11y } from '../types';
-import { withEditorAnalyticsAPI } from '../utils/analytics';
-
-const createTableWithAnalytics = (
-  isTableScalingEnabled: boolean,
-  isFullWidthModeEnabled: boolean,
-  editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
-) =>
-  withEditorAnalyticsAPI({
-    action: ACTION.INSERTED,
-    actionSubject: ACTION_SUBJECT.DOCUMENT,
-    actionSubjectId: ACTION_SUBJECT_ID.TABLE,
-    attributes: { inputMethod: INPUT_METHOD.SHORTCUT },
-    eventType: EVENT_TYPE.TRACK,
-  })(editorAnalyticsAPI)(
-    createTable(isTableScalingEnabled, isFullWidthModeEnabled),
-  );
 
 export function keymapPlugin(
   getEditorContainerWidth: GetEditorContainerWidth,
@@ -99,7 +78,7 @@ export function keymapPlugin(
   );
   bindKeymapWithCommand(
     toggleTable.common!,
-    createTableWithAnalytics(
+    createTable(
       isTableScalingEnabled,
       !!isFullWidthEnabled,
       editorAnalyticsAPI,

package/src/pm-plugins/main.ts

@@ -411,6 +411,7 @@ export const createPlugin = (
             getEditorFeatureFlags,
             dispatchAnalyticsEvent,
             pluginInjectionApi,
+            isTableAlignmentEnabled,
           ),
         tableRow: (node, view, getPos) =>
           new TableRow(node, view, getPos, eventDispatcher),

package/src/toolbar.tsx

@@ -1,7 +1,6 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 
-import type { TableLayout } from '@atlaskit/adf-schema';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -76,6 +75,7 @@ import {
   insertRowWithAnalytics,
   mergeCellsWithAnalytics,
   setColorWithAnalytics,
+  setTableAlignmentWithAnalytics,
   sortColumnWithAnalytics,
   splitCellWithAnalytics,
   toggleHeaderColumnWithAnalytics,
@@ -91,6 +91,7 @@ import { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizin
 import { pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { canMergeCells } from './transforms';
 import type {
+  AlignmentOptions,
   PluginConfig,
   ToolbarMenuConfig,
   ToolbarMenuContext,
@@ -105,6 +106,7 @@ import {
   getSelectedRowIndexes,
   isTableNested,
 } from './utils';
+import { normaliseAlignment } from './utils/alignment';
 
 export const getToolbarMenuConfig = (
   config: ToolbarMenuConfig,
@@ -485,7 +487,7 @@ export const getToolbarConfig =
 
       alignmentMenu =
         options?.isTableAlignmentEnabled && !isNested
-          ? getAlignmentOptionsConfig(state, intl)
+          ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI)
           : [];
 
       let cellItems: Array<FloatingToolbarItem<Command>>;
@@ -890,13 +892,14 @@ const highlightColumnsHandler = (
 
 type AlignmentIcon = {
   id?: string;
-  value: TableLayout;
+  value: AlignmentOptions;
   icon: React.ComponentClass<any>;
 };
 
 export const getAlignmentOptionsConfig = (
   editorState: EditorState,
   { formatMessage }: ToolbarMenuContext,
+  editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 ): Array<FloatingToolbarDropdown<Command>> => {
   const tableObject = findTable(editorState.selection);
 
@@ -918,7 +921,7 @@ export const getAlignmentOptionsConfig = (
   ];
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const layoutToMessages: Record<string, any> = {
+  const layoutToMessages: Record<AlignmentOptions, any> = {
     center: messages.alignTableCenter,
     'align-start': messages.alignTableLeft,
   };
@@ -926,13 +929,19 @@ export const getAlignmentOptionsConfig = (
   const alignmentButtons = alignmentIcons.map<FloatingToolbarItem<Command>>(
     (alignmentIcon) => {
       const { id, value, icon } = alignmentIcon;
+      const currentLayout = tableObject.node.attrs.layout;
+
       return {
         id: id,
         type: 'button',
         icon: icon,
         title: formatMessage(layoutToMessages[value]),
-        selected: tableObject.node.attrs.layout === value,
-        onClick: alignTable(value),
+        selected: normaliseAlignment(currentLayout) === value,
+        onClick: setTableAlignmentWithAnalytics(editorAnalyticsAPI)(
+          value,
+          currentLayout,
+          INPUT_METHOD.FLOATING_TB
+        ),
       };
     },
   );
@@ -969,34 +978,6 @@ export const getAlignmentOptionsConfig = (
   return alignmentToolbarItem;
 };
 
-const alignTable = (nextLayoutValue: TableLayout): Command => {
-  return (state, dispatch) => {
-    const tableObject = findTable(state.selection);
-
-    if (!tableObject || !dispatch) {
-      return false;
-    }
-
-    const nextTableAttrs = {
-      ...tableObject.node.attrs,
-      layout: nextLayoutValue,
-    };
-
-    const tr = state.tr.setNodeMarkup(
-      tableObject.pos,
-      undefined,
-      nextTableAttrs,
-    );
-
-    tr.setMeta('scrollIntoView', false);
-
-    // TODO - insert analytics here for layout selection
-
-    dispatch(tr);
-    return true;
-  };
-};
-
 export const getSelectedAlignmentIcon = (
   alignmentIcons: AlignmentIcon[],
   selectedNode: PMNode,
@@ -1004,8 +985,6 @@ export const getSelectedAlignmentIcon = (
   const selectedAlignment = selectedNode.attrs.layout;
 
   return alignmentIcons.find(
-    (icon) =>
-      icon.value ===
-      (selectedNode.attrs.layout === 'default' ? 'center' : selectedAlignment),
+    (icon) => icon.value === normaliseAlignment(selectedAlignment),
   );
 };