@atlaskit/editor-plugin-table 7.16.7 → 7.16.9

package/dist/types/nodeviews/TableResizer.d.ts

@@ -9,6 +9,7 @@ interface TableResizerProps {
     width: number;
     maxWidth: number;
     containerWidth: number;
+    lineLength: number;
     updateWidth: (width: number) => void;
     editorView: EditorView;
     getPos: () => number | undefined;
@@ -26,5 +27,5 @@ export interface TableResizerImprovementProps extends TableResizerProps {
     onResizeStop?: () => void;
     onResizeStart?: () => void;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isTableAlignmentEnabled, isWholeTableInDanger, pluginInjectionApi, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, lineLength, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isTableAlignmentEnabled, isWholeTableInDanger, pluginInjectionApi, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
 export {};

package/dist/types/toolbar.d.ts

@@ -19,6 +19,7 @@ type AlignmentIcon = {
     value: AlignmentOptions;
     icon: React.ComponentClass<any>;
 };
-export declare const getAlignmentOptionsConfig: (editorState: EditorState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Array<FloatingToolbarDropdown<Command>>;
+export declare const getAlignmentOptionsConfig: (editorState: EditorState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorContainerWidth: GetEditorContainerWidth) => Array<FloatingToolbarDropdown<Command>>;
 export declare const getSelectedAlignmentIcon: (alignmentIcons: AlignmentIcon[], selectedNode: PMNode) => AlignmentIcon | undefined;
+export declare const isLayoutOptionDisabled: (selectedNode: PMNode, getEditorContainerWidth: GetEditorContainerWidth) => boolean;
 export {};

package/dist/types-ts4.5/commands/misc.d.ts

@@ -2,7 +2,7 @@ import type { TableLayout } from '@atlaskit/adf-schema';
 import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
 import type { Node as PMNode, Schema, Slice } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
-import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import type { ContentNodeWithPos, NodeWithPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { WidthToWidest } from '../types';
 export declare const setEditorFocus: (editorHasFocus: boolean) => Command;
@@ -37,3 +37,4 @@ export declare const autoSizeTable: (view: EditorView, node: PMNode, table: HTML
 export declare const addBoldInEmptyHeaderCells: (tableCellHeader: ContentNodeWithPos) => Command;
 export declare const updateWidthToWidest: (widthToWidest: WidthToWidest) => Command;
 export declare const setTableAlignment: (newAlignment: TableLayout) => EditorCommand;
+export declare const setTableAlignmentWithTableContentWithPos: (newAlignment: TableLayout, tableNodeWithPos: NodeWithPos) => EditorCommand;

package/dist/types-ts4.5/nodeviews/TableContainer.d.ts

@@ -17,6 +17,7 @@ export declare const InnerContainer: React.ForwardRefExoticComponent<InnerContai
 } & React.RefAttributes<HTMLDivElement>>;
 type ResizableTableContainerProps = {
     containerWidth: number;
+    lineLength: number;
     node: PMNode;
     className: string;
     editorView: EditorView;
@@ -29,7 +30,7 @@ type ResizableTableContainerProps = {
     isTableScalingEnabled?: boolean;
     isTableAlignmentEnabled?: boolean;
 };
-export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, editorView, getPos, tableRef, isResizing, pluginInjectionApi, tableWrapperHeight, isWholeTableInDanger, isTableScalingEnabled, isTableAlignmentEnabled, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
+export declare const ResizableTableContainer: React.MemoExoticComponent<({ children, className, node, containerWidth, lineLength, editorView, getPos, tableRef, isResizing, pluginInjectionApi, tableWrapperHeight, isWholeTableInDanger, isTableScalingEnabled, isTableAlignmentEnabled, }: PropsWithChildren<ResizableTableContainerProps>) => JSX.Element>;
 type TableContainerProps = {
     node: PMNode;
     className: string;
@@ -46,5 +47,5 @@ type TableContainerProps = {
     isTableScalingEnabled?: boolean;
     isTableAlignmentEnabled?: boolean;
 };
-export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
+export declare const TableContainer: ({ children, node, className, containerWidth: { width: editorWidth, lineLength }, editorView, getPos, tableRef, isNested, tableWrapperHeight, isResizing, pluginInjectionApi, isWholeTableInDanger, isTableResizingEnabled, isTableScalingEnabled, isTableAlignmentEnabled, }: PropsWithChildren<TableContainerProps>) => JSX.Element;
 export {};

package/dist/types-ts4.5/nodeviews/TableResizer.d.ts

@@ -9,6 +9,7 @@ interface TableResizerProps {
     width: number;
     maxWidth: number;
     containerWidth: number;
+    lineLength: number;
     updateWidth: (width: number) => void;
     editorView: EditorView;
     getPos: () => number | undefined;
@@ -26,5 +27,5 @@ export interface TableResizerImprovementProps extends TableResizerProps {
     onResizeStop?: () => void;
     onResizeStart?: () => void;
 }
-export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isTableAlignmentEnabled, isWholeTableInDanger, pluginInjectionApi, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, lineLength, updateWidth, onResizeStop, onResizeStart, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, displayGapCursor, isTableScalingEnabled, isTableAlignmentEnabled, isWholeTableInDanger, pluginInjectionApi, }: PropsWithChildren<TableResizerImprovementProps>) => JSX.Element;
 export {};

package/dist/types-ts4.5/toolbar.d.ts

@@ -19,6 +19,7 @@ type AlignmentIcon = {
     value: AlignmentOptions;
     icon: React.ComponentClass<any>;
 };
-export declare const getAlignmentOptionsConfig: (editorState: EditorState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Array<FloatingToolbarDropdown<Command>>;
+export declare const getAlignmentOptionsConfig: (editorState: EditorState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorContainerWidth: GetEditorContainerWidth) => Array<FloatingToolbarDropdown<Command>>;
 export declare const getSelectedAlignmentIcon: (alignmentIcons: AlignmentIcon[], selectedNode: PMNode) => AlignmentIcon | undefined;
+export declare const isLayoutOptionDisabled: (selectedNode: PMNode, getEditorContainerWidth: GetEditorContainerWidth) => boolean;
 export {};

package/docs/0-intro.tsx

@@ -13,6 +13,7 @@ ${createEditorUseOnlyNotice('Editor Plugin Table', [
 
 
   ${(
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     <div style={{ marginTop: token('space.100', '8px') }}>
       <AtlassianInternalWarning />
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.16.7",
+  "version": "7.16.9",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/adf-schema": "^36.10.7",
     "@atlaskit/button": "^17.17.0",
     "@atlaskit/custom-steps": "^0.2.0",
-    "@atlaskit/editor-common": "^81.0.0",
+    "@atlaskit/editor-common": "^81.1.0",
     "@atlaskit/editor-palette": "1.6.0",
     "@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
     "@atlaskit/editor-plugin-analytics": "^1.2.0",

package/src/commands/misc.ts

@@ -19,7 +19,10 @@ import type {
   Selection,
   Transaction,
 } from '@atlaskit/editor-prosemirror/state';
-import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+import type {
+  ContentNodeWithPos,
+  NodeWithPos,
+} 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';
@@ -831,3 +834,19 @@ export const setTableAlignment =
 
     return tr;
   };
+
+export const setTableAlignmentWithTableContentWithPos =
+  (newAlignment: TableLayout, tableNodeWithPos: NodeWithPos): EditorCommand =>
+  ({ tr }) => {
+    const nextTableAttrs = {
+      ...tableNodeWithPos.node.attrs,
+      layout: newAlignment,
+    };
+
+    tr.setNodeMarkup(tableNodeWithPos.pos, undefined, nextTableAttrs).setMeta(
+      'scrollIntoView',
+      false,
+    );
+
+    return tr;
+  };

package/src/nodeviews/ExternalDropTargets.tsx

@@ -54,10 +54,13 @@ export const ExternalDropTargets = ({
     <div
       style={{
         width: getTableWrapperWidth(),
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         overflow: 'hidden',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         position: 'absolute',
         // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
         top: `-${dropTargetExtendedWidth - tableMarginTop}px`,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         pointerEvents: 'auto',
         zIndex: `${dropTargetsZIndex}`,
       }}
@@ -65,6 +68,7 @@ export const ExternalDropTargets = ({
     >
       <div
         style={{
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           display: 'flex',
           // move drop targets based on table wrapper scroll
           // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview

package/src/nodeviews/TableComponent.tsx

@@ -804,6 +804,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 
     return (
       <TableContainer
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className={classnames(ClassName.TABLE_CONTAINER, {
           [ClassName.WITH_CONTROLS]: allowControls && tableActive,
           [ClassName.TABLE_STICKY]: this.state.stickyHeader && hasHeaderRow,
@@ -825,11 +826,13 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         isTableAlignmentEnabled={isTableAlignmentEnabled}
       >
         <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           className={ClassName.TABLE_STICKY_SENTINEL_TOP}
           data-testid="sticky-sentinel-top"
         />
         {stickyScrollbar && (
           <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             className={ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP}
             data-testid="sticky-scrollbar-sentinel-top"
           />
@@ -850,11 +853,14 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         )}
         <div
           contentEditable={false}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           style={shadowStyle(showBeforeShadow)}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           className={ClassName.TABLE_LEFT_SHADOW}
         />
         {this.state.stickyHeader && (
           <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             className={`${ClassName.TABLE_LEFT_SHADOW} ${ClassName.TABLE_STICKY_SHADOW}`}
             style={{
               visibility:
@@ -867,6 +873,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           />
         )}
         <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           className={classnames(ClassName.TABLE_NODE_WRAPPER)}
           ref={(elem) => {
             this.wrapper = elem;
@@ -885,9 +892,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         </div>
         {stickyScrollbar && (
           <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             className={ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER}
             style={{
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
               height: token('space.250', '20px'), // MAX_BROWSER_SCROLLBAR_HEIGHT
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
               display: 'none',
               // prevent unwanted scroll during table resize without removing scrollbar container from the dom
               width: isResizing ? token('space.0', '0px') : '100%',
@@ -896,6 +906,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
             <div
               style={{
                 width: tableRef?.clientWidth,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
                 height: '100%',
               }}
             ></div>
@@ -903,17 +914,22 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
         )}
         <div
           contentEditable={false}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           style={shadowStyle(showAfterShadow)}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           className={ClassName.TABLE_RIGHT_SHADOW}
         />
         {this.state.stickyHeader && (
           <div
             style={{
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
               position: 'absolute',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
               right: token('space.400', '32px'), // tableOverflowShadowWidthWide
             }}
           >
             <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
               className={`${ClassName.TABLE_RIGHT_SHADOW} ${ClassName.TABLE_STICKY_SHADOW}`}
               style={{
                 visibility:
@@ -927,11 +943,13 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           </div>
         )}
         <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           className={ClassName.TABLE_STICKY_SENTINEL_BOTTOM}
           data-testid="sticky-sentinel-bottom"
         />
         {stickyScrollbar && (
           <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
             className={ClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM}
             data-testid="sticky-scrollbar-sentinel-bottom"
           />

package/src/nodeviews/TableContainer.tsx

@@ -45,7 +45,9 @@ export const InnerContainer = forwardRef<
   return (
     <div
       ref={ref}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       style={style}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className={className}
       data-number-column={node.attrs.isNumberColumnEnabled}
       data-layout={node.attrs.layout}
@@ -75,6 +77,7 @@ const AlignmentTableContainer = ({
   }, [alignment]);
 
   return (
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     <div data-testid="table-alignment-container" style={style}>
       {children}
     </div>
@@ -93,7 +96,9 @@ const AlignmentTableContainerWrapper = ({
       <div
         data-testid="table-alignment-container"
         style={{
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           display: 'flex',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           justifyContent: 'center',
         }}
       >
@@ -109,6 +114,7 @@ const AlignmentTableContainerWrapper = ({
 
 type ResizableTableContainerProps = {
   containerWidth: number;
+  lineLength: number;
   node: PMNode;
   className: string;
   editorView: EditorView;
@@ -129,6 +135,7 @@ export const ResizableTableContainer = React.memo(
     className,
     node,
     containerWidth,
+    lineLength,
     editorView,
     getPos,
     tableRef,
@@ -246,6 +253,7 @@ export const ResizableTableContainer = React.memo(
       width,
       maxWidth: maxResizerWidth,
       containerWidth,
+      lineLength,
       updateWidth,
       editorView,
       getPos,
@@ -277,19 +285,23 @@ export const ResizableTableContainer = React.memo(
               : 'auto',
             position: isLivePageViewMode ? 'relative' : 'unset',
           }}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           className={ClassName.TABLE_RESIZER_CONTAINER}
           ref={containerRef}
         >
           {isLivePageViewMode ? (
             <InnerContainer
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
               className={className}
               node={node}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
               style={{ width: 'inherit' }}
             >
               {children}
             </InnerContainer>
           ) : (
             <TableResizer {...tableResizerProps}>
+{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 */}
               <InnerContainer className={className} node={node}>
                 {children}
               </InnerContainer>
@@ -323,7 +335,7 @@ export const TableContainer = ({
   children,
   node,
   className,
-  containerWidth: { width: editorWidth },
+  containerWidth: { width: editorWidth, lineLength },
   editorView,
   getPos,
   tableRef,
@@ -339,9 +351,11 @@ export const TableContainer = ({
   if (isTableResizingEnabled && !isNested) {
     return (
       <ResizableTableContainer
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className={className}
         node={node}
         containerWidth={editorWidth!}
+        lineLength={lineLength!}
         editorView={editorView}
         getPos={getPos}
         tableRef={tableRef}
@@ -360,10 +374,12 @@ export const TableContainer = ({
   return (
     <InnerContainer
       node={node}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className={classNames(className, {
         'less-padding': editorWidth < akEditorMobileBreakoutPoint && !isNested,
       })}
       style={{
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         width: 'inherit',
       }}
     >

package/src/nodeviews/TableResizer.tsx

@@ -24,6 +24,7 @@ import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import type { HandleResize, HandleSize } from '@atlaskit/editor-common/resizer';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { browser } from '@atlaskit/editor-common/utils';
+import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -31,7 +32,10 @@ import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { token } from '@atlaskit/tokens';
 
-import { updateWidthToWidest } from '../commands/misc';
+import {
+  setTableAlignmentWithTableContentWithPos,
+  updateWidthToWidest,
+} from '../commands/misc';
 import { META_KEYS } from '../pm-plugins/table-analytics';
 import {
   COLUMN_MIN_WIDTH,
@@ -48,7 +52,11 @@ import {
   TABLE_HIGHLIGHT_TOLERANCE,
   TABLE_SNAP_GAP,
 } from '../ui/consts';
-import { normaliseAlignment } from '../utils/alignment';
+import {
+  ALIGN_CENTER,
+  ALIGN_START,
+  normaliseAlignment,
+} from '../utils/alignment';
 import {
   generateResizedPayload,
   generateResizeFrameRatePayloads,
@@ -68,6 +76,7 @@ interface TableResizerProps {
   width: number;
   maxWidth: number;
   containerWidth: number;
+  lineLength: number;
   updateWidth: (width: number) => void;
   editorView: EditorView;
   getPos: () => number | undefined;
@@ -93,6 +102,8 @@ type ResizerNextHandler = React.ElementRef<typeof ResizerNext>;
 
 const RESIZE_STEP_VALUE = 10;
 
+const FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
+
 const handles = { right: true };
 const handleStyles = {
   right: {
@@ -160,6 +171,7 @@ export const TableResizer = ({
   width,
   maxWidth,
   containerWidth,
+  lineLength,
   updateWidth,
   onResizeStop,
   onResizeStart,
@@ -249,6 +261,34 @@ export const TableResizer = ({
     ],
   );
 
+  const switchToCenterAlignment = useCallback(
+    (pos, node, newWidth, state, dispatch) => {
+      if (
+        isTableAlignmentEnabled &&
+        node &&
+        node.attrs.layout === ALIGN_START &&
+        newWidth > lineLength &&
+        lineLength < FULL_WIDTH_EDITOR_CONTENT_WIDTH && // We don't want to switch alignment in Full-width editor
+        isResizing.current
+      ) {
+        const tableNodeWithPos = { pos, node };
+        const tr = setTableAlignmentWithTableContentWithPos(
+          ALIGN_CENTER,
+          tableNodeWithPos,
+        )(state);
+
+        if (tr) {
+          dispatch(tr);
+        }
+
+        return true;
+      }
+
+      return false;
+    },
+    [lineLength, isTableAlignmentEnabled, isResizing],
+  );
+
   useEffect(() => {
     return () => {
       // only bring back the cursor if this table was deleted - i.e. if a user was resizing, then another
@@ -378,9 +418,14 @@ export const TableResizer = ({
       const shouldUpdateWidthToWidest =
         !!isTableScalingEnabled && isFullWidthGuidelineActive;
 
-      updateWidthToWidest({
-        [currentTableNodeLocalId]: shouldUpdateWidthToWidest,
-      })(state, dispatch);
+      chainCommands(
+        (state, dispatch) => {
+          return switchToCenterAlignment(pos, node, newWidth, state, dispatch);
+        },
+        updateWidthToWidest({
+          [currentTableNodeLocalId]: shouldUpdateWidthToWidest,
+        }),
+      )(state, dispatch);
 
       updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
 
@@ -397,6 +442,7 @@ export const TableResizer = ({
       containerWidth,
       updateWidth,
       getPos,
+      switchToCenterAlignment,
     ],
   );
 
@@ -628,7 +674,7 @@ export const TableResizer = ({
   const resizeRatio =
     !isTableAlignmentEnabled ||
     (isTableAlignmentEnabled &&
-      normaliseAlignment(node.attrs.layout) === 'center')
+      normaliseAlignment(node.attrs.layout) === ALIGN_CENTER)
       ? 2
       : 1;
 

package/src/toolbar.tsx

@@ -487,7 +487,7 @@ export const getToolbarConfig =
 
       alignmentMenu =
         options?.isTableAlignmentEnabled && !isNested
-          ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI)
+          ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth)
           : [];
 
       let cellItems: Array<FloatingToolbarItem<Command>>;
@@ -900,6 +900,7 @@ export const getAlignmentOptionsConfig = (
   editorState: EditorState,
   { formatMessage }: ToolbarMenuContext,
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+  getEditorContainerWidth: GetEditorContainerWidth
 ): Array<FloatingToolbarDropdown<Command>> => {
   const tableObject = findTable(editorState.selection);
 
@@ -942,6 +943,7 @@ export const getAlignmentOptionsConfig = (
           currentLayout,
           INPUT_METHOD.FLOATING_TB
         ),
+        ...(isLayoutOptionDisabled(tableObject.node, getEditorContainerWidth) && { disabled: value !== 'center' }),
       };
     },
   );
@@ -988,3 +990,20 @@ export const getSelectedAlignmentIcon = (
     (icon) => icon.value === normaliseAlignment(selectedAlignment),
   );
 };
+
+export const isLayoutOptionDisabled = (
+  selectedNode: PMNode,
+  getEditorContainerWidth: GetEditorContainerWidth
+) => {
+  const lineLength = getEditorContainerWidth().lineLength;
+
+  if (
+    selectedNode &&
+    lineLength &&
+    selectedNode.attrs.width > lineLength
+  ) {
+    return true;
+  }
+
+  return false;
+};

package/src/ui/ColumnResizeWidget/index.tsx

@@ -27,6 +27,7 @@ export const ColumnResizeWidget = ({
   if (!includeTooltip) {
     return (
       <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className={TableCssClassName.RESIZE_HANDLE_DECORATION}
         data-start-index={startIndex}
         data-end-index={endIndex}
@@ -49,6 +50,7 @@ export const ColumnResizeWidget = ({
     >
       {(tooltipProps) => (
         <div
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           className={TableCssClassName.RESIZE_HANDLE_DECORATION}
           data-start-index={startIndex}
           data-end-index={endIndex}

package/src/ui/DragHandle/index.tsx

@@ -213,6 +213,7 @@ const DragHandleComponent = ({
     <>
       <button
         type="button"
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className={ClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE}
         data-testid="table-drag-handle-clickable-zone-button"
         style={{
@@ -241,6 +242,7 @@ const DragHandleComponent = ({
       <button
         type="button"
         id={isDragMenuTarget ? showDragMenuAnchorId : undefined}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className={classnames(
           ClassName.DRAG_HANDLE_BUTTON_CONTAINER,
           appearance,
@@ -279,6 +281,7 @@ const DragHandleComponent = ({
           browser.gecko ? (
             <HandleIconComponent {...handleIconProps} />
           ) : (
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
             <span style={{ pointerEvents: 'none' }}>
               <HandleIconComponent {...handleIconProps} />
             </span>

package/src/ui/DragPreview/index.tsx

@@ -35,6 +35,7 @@ export const DragPreview = ({
     >
       <DragInMotionIcon
         style={{
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           position: 'absolute',
           // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           marginLeft: `${marginLeft}px`,

package/src/ui/FloatingContextualButton/FixedButton.tsx

@@ -144,19 +144,26 @@ export const FixedButton = ({
     <div
       ref={observerTargetRef}
       style={{
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         position: 'absolute',
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         top: token('space.0', '0px'),
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         left: token('space.0', '0px'),
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         width: token('space.250', '20px'), // BUTTON_WIDTH
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         height: token('space.250', '20px'), // BUTTON_WIDTH
       }}
     >
       <div
         ref={fixedButtonRef}
         style={{
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           position: 'fixed',
           // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           top: stickyHeader.top + stickyHeader.padding + offset * 2,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           zIndex: akEditorTableCellOnStickyHeaderZIndex,
           // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           left: calcLeftPos({
@@ -165,9 +172,12 @@ export const FixedButton = ({
             cellRefWidth: targetCellRef.clientWidth,
             offset,
           }),
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           width: token('space.250', '20px'), // BUTTON_WIDTH
+// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           height: token('space.250', '20px'), // BUTTON_WIDTH
         }}
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
         className={ClassName.CONTEXTUAL_MENU_BUTTON_FIXED}
       >
         {children}

package/src/ui/FloatingContextualButton/index.tsx

@@ -86,6 +86,7 @@ const FloatingContextualButtonInner = React.memo(
         ]}
       >
         <ToolbarButton
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
           className={ClassName.CONTEXTUAL_MENU_BUTTON}
           selected={isContextualMenuOpen}
           title={labelCellOptions}