@atlaskit/editor-plugin-table 7.6.3 → 7.6.5

package/src/nodeviews/TableComponent.tsx

@@ -25,14 +25,12 @@ import type {
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import {
-  MAX_BROWSER_SCROLLBAR_HEIGHT,
-  akEditorTableToolbarSize as tableToolbarSize,
-} from '@atlaskit/editor-shared-styles';
+import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import type { CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
+import { token } from '@atlaskit/tokens';
 
 import { autoSizeTable, clearHoverSelection } from '../commands';
 import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils';
@@ -59,10 +57,6 @@ import { TABLE_EDITOR_MARGIN } from '../pm-plugins/table-resizing/utils/consts';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import type { CellHoverMeta, PluginInjectionAPI } from '../types';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
-import {
-  tableOverflowShadowWidth,
-  tableOverflowShadowWidthWide,
-} from '../ui/consts';
 import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';
 import TableFloatingControls from '../ui/TableFloatingControls';
 import {
@@ -751,7 +745,9 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
               visibility:
                 showBeforeShadow && hasHeaderRow ? 'visible' : 'hidden',
               top: `${topStickyShadowPosition}px`,
-              paddingBottom: `${isDragAndDropEnabled ? '1px' : ''}`,
+              paddingBottom: `${
+                isDragAndDropEnabled && token('space.025', '2px')
+              }`,
             }}
           />
         )}
@@ -776,10 +772,10 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           <div
             className={ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER}
             style={{
-              height: MAX_BROWSER_SCROLLBAR_HEIGHT,
+              height: token('space.250', '20px'), // MAX_BROWSER_SCROLLBAR_HEIGHT
               display: 'none',
               // prevent unwanted scroll during table resize without removing scrollbar container from the dom
-              width: isResizing ? '0px' : '100%',
+              width: isResizing ? token('space.0', '0px') : '100%',
             }}
           >
             <div
@@ -804,10 +800,10 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
                     getBooleanFF(
                       'platform.editor.table.increase-shadow-visibility_lh89r',
                     )
-                      ? tableOverflowShadowWidthWide
-                      : tableOverflowShadowWidth
-                  }px`
-                : '-2px',
+                      ? token('space.400', '32px') // tableOverflowShadowWidthWide
+                      : token('space.100', '8px') // tableOverflowShadowWidth
+                  }`
+                : token('space.negative.025', '-2px'),
             }}
           >
             <div
@@ -816,7 +812,9 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
                 visibility:
                   showAfterShadow && hasHeaderRow ? 'visible' : 'hidden',
                 top: `${topStickyShadowPosition}px`,
-                paddingBottom: `${isDragAndDropEnabled ? '1px' : ''}`,
+                paddingBottom: `${
+                  isDragAndDropEnabled && token('space.025', '2px')
+                }`,
               }}
             />
           </div>

package/src/nodeviews/TableContainer.tsx

@@ -5,6 +5,7 @@ import classNames from 'classnames';
 
 import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
@@ -19,7 +20,7 @@ import {
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
-import type { PluginInjectionAPI } from '../types';
+import type { PluginInjectionAPI, TableSharedStateInternal } from '../types';
 import { TableCssClassName as ClassName } from '../types';
 
 import { TableResizer } from './TableResizer';
@@ -61,7 +62,7 @@ export const InnerContainer = forwardRef<
       className={className}
       data-number-column={node.attrs.isNumberColumnEnabled}
       data-layout={node.attrs.layout}
-      data-test-id="table-container"
+      data-testid="table-container"
     >
       {children}
     </div>
@@ -180,6 +181,10 @@ export const ResizableTableContainer = React.memo(
     );
 
     const tableWidth = getTableContainerWidth(node);
+    const { tableState } = useSharedPluginState(pluginInjectionApi, ['table']);
+    const { widthToWidest } = tableState as TableSharedStateInternal;
+    const currentTableNodeLocalId = node?.attrs?.localId ?? '';
+
     // 76 is currently an accepted padding value considering the spacing for resizer handle
     const responsiveContainerWidth = isTableScalingEnabled
       ? containerWidth -
@@ -189,7 +194,16 @@ export const ResizableTableContainer = React.memo(
         akEditorGutterPadding * 2 -
         akEditorMediaResizeHandlerPaddingWide;
 
-    const width = Math.min(tableWidth, responsiveContainerWidth);
+    let width = Math.min(tableWidth, responsiveContainerWidth);
+
+    if (
+      isTableScalingEnabled &&
+      currentTableNodeLocalId &&
+      widthToWidest &&
+      widthToWidest[currentTableNodeLocalId]
+    ) {
+      width = TABLE_MAX_WIDTH;
+    }
 
     if (!isResizing) {
       tableWidthRef.current = width;
@@ -210,6 +224,7 @@ export const ResizableTableContainer = React.memo(
       displayGapCursor,
       isTableScalingEnabled,
       isWholeTableInDanger,
+      pluginInjectionApi,
     };
 
     if (getBooleanFF('platform.editor.resizing-table-height-improvement')) {

package/src/nodeviews/TableResizer.tsx

@@ -16,6 +16,7 @@ import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import {
   focusTableResizer,
   ToolTipContent,
@@ -27,21 +28,21 @@ import { browser } from '@atlaskit/editor-common/utils';
 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';
-import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 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 { getPluginState } from '../pm-plugins/plugin-factory';
 import { META_KEYS } from '../pm-plugins/table-analytics';
 import {
   COLUMN_MIN_WIDTH,
   getColgroupChildrenLength,
   previewScaleTable,
   scaleTable,
+  TABLE_MAX_WIDTH,
 } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
+import type { PluginInjectionAPI, TableSharedStateInternal } from '../types';
 import {
   TABLE_GUIDELINE_VISIBLE_ADJUSTMENT,
   TABLE_HIGHLIGHT_GAP,
@@ -77,6 +78,7 @@ interface TableResizerProps {
     payload: TableEventPayload,
   ) => ((tr: Transaction) => boolean) | undefined;
   displayGapCursor: (toggle: boolean) => boolean;
+  pluginInjectionApi?: PluginInjectionAPI;
   isTableScalingEnabled?: boolean;
   isWholeTableInDanger?: boolean;
 }
@@ -96,7 +98,7 @@ const RESIZE_STEP_VALUE = 10;
 const handles = { right: true };
 const handleStyles = {
   right: {
-    // eslint-disable-next-line
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     right: '-14px',
     marginTop: token('space.150', '12px'),
   },
@@ -172,13 +174,16 @@ export const TableResizer = ({
   displayGapCursor,
   isTableScalingEnabled,
   isWholeTableInDanger,
+  pluginInjectionApi,
 }: PropsWithChildren<TableResizerImprovementProps>) => {
   const currentGap = useRef(0);
   // track resizing state - use ref over state to avoid re-render
   const isResizing = useRef(false);
   const areResizeMetaKeysPressed = useRef(false);
-
+  const [localTableWidth, setLocalTableWidth] = useState(width);
   const resizerRef = useRef<ResizerNextHandler>(null);
+  const { tableState } = useSharedPluginState(pluginInjectionApi, ['table']);
+  const { widthToWidest } = tableState as TableSharedStateInternal;
 
   // used to reposition tooltip when table is resizing via keyboard
   const updateTooltip = React.useRef<() => void>();
@@ -349,25 +354,28 @@ export const TableResizer = ({
       // and a table is resized to fit the widest guideline when view port width is between 1011 and 1800
       // set the width of the table to 1800 pixels.
       const { state, dispatch } = editorView;
-      const widestGuideLineWidthString = defaultGuidelinesForPreserveTable(
+      const currentTableNodeLocalId = node?.attrs?.localId ?? '';
+
+      const widestGuideline = defaultGuidelinesForPreserveTable(
         containerWidth,
-      )[16]
-        .key?.match(/[\d]*[.]{0,1}[\d]+/g)
-        ?.join('');
-      const widestGuideLineWidth = parseInt(
-        widestGuideLineWidthString || '',
-        10,
-      );
+      ).filter((guideline) => guideline.isFullWidth)[0];
+      const widestGuideLineWidth = widestGuideline
+        ? ((widestGuideline.position?.x || 0) as number) * 2
+        : null;
       const shouldUpdateWidthToWidest = !!(
         isTableScalingEnabled &&
-        defaultGuidelinesForPreserveTable(containerWidth).length === 17 &&
-        widestGuideLineWidth - newWidth <= 1
+        widestGuideLineWidth &&
+        Math.abs(widestGuideLineWidth - newWidth) <= 1
       );
-      updateWidthToWidest(shouldUpdateWidthToWidest)(state, dispatch);
+      shouldUpdateWidthToWidest
+        ? setLocalTableWidth(TABLE_MAX_WIDTH)
+        : setLocalTableWidth(newWidth);
 
-      updateWidth(
-        shouldUpdateWidthToWidest ? akEditorFullWidthLayoutWidth : newWidth,
-      );
+      updateWidthToWidest({
+        [currentTableNodeLocalId]: shouldUpdateWidthToWidest,
+      })(state, dispatch);
+
+      updateWidth(shouldUpdateWidthToWidest ? TABLE_MAX_WIDTH : newWidth);
 
       return newWidth;
     },
@@ -392,8 +400,13 @@ export const TableResizer = ({
       let newWidth = originalState.width + delta.width;
       const { state, dispatch } = editorView;
       const pos = getPos();
-      const { widthToWidest } = getPluginState(editorView.state);
-      newWidth = widthToWidest ? akEditorFullWidthLayoutWidth : newWidth;
+      const currentTableNodeLocalId = node?.attrs?.localId ?? '';
+      newWidth =
+        widthToWidest &&
+        currentTableNodeLocalId &&
+        widthToWidest[currentTableNodeLocalId]
+          ? TABLE_MAX_WIDTH
+          : newWidth;
 
       let tr = state.tr.setMeta(tableWidthPluginKey, { resizing: false });
       const frameRateSamples = endMeasure();
@@ -467,6 +480,7 @@ export const TableResizer = ({
       endMeasure,
       onResizeStop,
       isTableScalingEnabled,
+      widthToWidest,
     ],
   );
 
@@ -617,7 +631,7 @@ export const TableResizer = ({
       <ResizerNext
         ref={resizerRef}
         enable={handles}
-        width={width}
+        width={localTableWidth}
         handleAlignmentMethod="sticky"
         handleSize={handleSize}
         handleStyles={handleStyles}

package/src/plugin.tsx

@@ -192,6 +192,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
         // IMPORTANT: Need to continue to pass tableNode to control re-renders
         // TableComponent listens for node attribute changes to update colgroups
         tableNode: tablePluginState.tableNode,
+        widthToWidest: tablePluginState.widthToWidest,
       };
     },
 
@@ -305,7 +306,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
         // plugin as it is currently swallowing backspace events inside tables
         {
           name: 'tableKeymap',
-          plugin: () => {
+          plugin: ({ getIntl }) => {
             const {
               dragAndDropEnabled,
               isTableScalingEnabled = false,
@@ -317,6 +318,8 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
               dragAndDropEnabled,
               isTableScalingEnabled,
               fullWidthEnabled,
+              api,
+              getIntl,
             );
           },
         },

package/src/pm-plugins/keymap.ts

@@ -1,3 +1,5 @@
+import type { IntlShape } from 'react-intl-next/src/types';
+
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import {
   ACTION,
@@ -53,6 +55,7 @@ import {
   addColumnBefore as addColumnBeforeCommand,
 } 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 = (
@@ -76,17 +79,22 @@ export function keymapPlugin(
   dragAndDropEnabled?: boolean,
   isTableScalingEnabled = false,
   isFullWidthEnabled?: boolean,
+  pluginInjectionApi?: PluginInjectionAPIWithA11y,
+  getIntl?: () => IntlShape,
 ): SafePlugin {
   const list = {};
 
+  const ariaNotifyPlugin =
+    pluginInjectionApi?.accessibilityUtils?.actions.ariaNotify;
+
   bindKeymapWithCommand(
     nextCell.common!,
-    goToNextCell(editorAnalyticsAPI)(1),
+    goToNextCell(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(1),
     list,
   );
   bindKeymapWithCommand(
     previousCell.common!,
-    goToNextCell(editorAnalyticsAPI)(-1),
+    goToNextCell(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(-1),
     list,
   );
   bindKeymapWithCommand(
@@ -190,13 +198,32 @@ export function keymapPlugin(
   if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
     bindKeymapWithCommand(
       startColumnResizing.common!,
-      initiateKeyboardColumnResizing,
+      initiateKeyboardColumnResizing({
+        ariaNotify: ariaNotifyPlugin,
+        getIntl: getIntl,
+      }),
       list,
     );
 
-    bindKeymapWithCommand(moveRight.common!, activateNextResizeArea(1), list);
+    bindKeymapWithCommand(
+      moveRight.common!,
+      activateNextResizeArea({
+        direction: 1,
+        ariaNotify: ariaNotifyPlugin,
+        getIntl: getIntl,
+      }),
+      list,
+    );
 
-    bindKeymapWithCommand(moveLeft.common!, activateNextResizeArea(-1), list);
+    bindKeymapWithCommand(
+      moveLeft.common!,
+      activateNextResizeArea({
+        direction: -1,
+        ariaNotify: ariaNotifyPlugin,
+        getIntl: getIntl,
+      }),
+      list,
+    );
 
     bindKeymapWithCommand(
       decreaseMediaSize.common!,
@@ -205,6 +232,8 @@ export function keymapPlugin(
         getEditorContainerWidth,
         isTableScalingEnabled,
         INPUT_METHOD.SHORTCUT,
+        ariaNotifyPlugin,
+        getIntl,
       ),
       list,
     );
@@ -216,10 +245,19 @@ export function keymapPlugin(
         getEditorContainerWidth,
         isTableScalingEnabled,
         INPUT_METHOD.SHORTCUT,
+        ariaNotifyPlugin,
+        getIntl,
       ),
       list,
     );
-    bindKeymapWithCommand(escape.common!, stopKeyboardColumnResizing(), list);
+    bindKeymapWithCommand(
+      escape.common!,
+      stopKeyboardColumnResizing({
+        ariaNotify: ariaNotifyPlugin,
+        getIntl: getIntl,
+      }),
+      list,
+    );
   }
 
   return keymap(list) as SafePlugin;

package/src/pm-plugins/main.ts

@@ -80,6 +80,7 @@ import type {
   InvalidNodeAttr,
   PluginConfig,
   PluginInjectionAPI,
+  PluginInjectionAPIWithA11y,
 } from '../types';
 import { TableCssClassName as ClassName } from '../types';
 import {
@@ -136,6 +137,10 @@ export const createPlugin = (
   // Used to prevent invalid table cell spans being reported more than once per editor/document
   const invalidTableIds: string[] = [];
   let editorViewRef: EditorView | null = null;
+
+  const ariaNotifyPlugin = (pluginInjectionApi as PluginInjectionAPIWithA11y)
+    ?.accessibilityUtils?.actions.ariaNotify;
+
   const getCurrentEditorState = (): EditorState | null => {
     const editorView = editorViewRef;
     if (!editorView) {
@@ -215,7 +220,7 @@ export const createPlugin = (
             }
             const tableNode = findTable(state.selection);
             if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-              // when cursor leaves the table we need to stop column resizing
+              // when keyboard cursor leaves the table we need to stop column resizing
               const pluginPrevState = getPluginState(prevState);
               const isStopKeyboardColumResizing =
                 pluginPrevState.isResizeHandleWidgetAdded &&
@@ -238,11 +243,17 @@ export const createPlugin = (
                       pluginPrevState.tableNode.attrs.localId
                   ) {
                     // Jump to another table
-                    stopKeyboardColumnResizing()(state, dispatch);
+                    stopKeyboardColumnResizing({
+                      ariaNotify: ariaNotifyPlugin,
+                      getIntl: getIntl,
+                    })(state, dispatch);
                   }
                 } else if (!tableNode) {
                   // selection outside of table
-                  stopKeyboardColumnResizing()(state, dispatch);
+                  stopKeyboardColumnResizing({
+                    ariaNotify: ariaNotifyPlugin,
+                    getIntl: getIntl,
+                  })(state, dispatch);
                 }
               }
             }
@@ -366,7 +377,10 @@ export const createPlugin = (
         if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
           const { isKeyboardResize } = getPluginState(state);
           if (isKeyboardResize) {
-            stopKeyboardColumnResizing()(state, dispatch);
+            stopKeyboardColumnResizing({
+              ariaNotify: ariaNotifyPlugin,
+              getIntl: getIntl,
+            })(state, dispatch);
             return false;
           }
         }

package/src/pm-plugins/table-resizing/event-handlers.ts

@@ -179,7 +179,7 @@ export const handleMouseDown = (
           /** if column resize had started via keyboard but continued by mouse
            *  or mouse pointer leaves the table but mouse button still pressed
            */
-          return stopKeyboardColumnResizing()(state, dispatch, view);
+          return stopKeyboardColumnResizing({})(state, dispatch, view);
         } else {
           return stopResizing()(state, dispatch);
         }
@@ -261,7 +261,11 @@ export const handleMouseDown = (
           /** if column resize had started via keyboard but continued by mouse
            *  or mouse pointer leaves the table but mouse button still pressed
            */
-          return stopKeyboardColumnResizing(tr)(state, dispatch, view);
+          return stopKeyboardColumnResizing({ originalTr: tr })(
+            state,
+            dispatch,
+            view,
+          );
         } else {
           return stopResizing(tr)(state, dispatch);
         }

package/src/toolbar.tsx

@@ -51,7 +51,6 @@ import {
 import DistributeColumnIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import TableOptionsIcon from '@atlaskit/icon/glyph/preferences';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import {
   clearHoverSelection,
@@ -135,10 +134,7 @@ export const getToolbarMenuConfig = (
     },
   ];
 
-  if (
-    state.isDragAndDropEnabled &&
-    getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
-  ) {
+  if (state.isDragAndDropEnabled) {
     return {
       id: 'editor.table.tableOptions',
       type: 'dropdown',
@@ -454,8 +450,15 @@ export const getToolbarConfig =
     const isWidthResizing = tableWidthState?.resizing;
 
     const { isTableScalingEnabled, widthToWidest } = pluginState;
-
-    if (isTableScalingEnabled && isWidthResizing && widthToWidest) {
+    const currentTableNodeLocalId = tableObject?.node?.attrs?.localId ?? '';
+
+    if (
+      isTableScalingEnabled &&
+      isWidthResizing &&
+      widthToWidest &&
+      currentTableNodeLocalId &&
+      widthToWidest[currentTableNodeLocalId]
+    ) {
       const { stickyScrollbar } = getEditorFeatureFlags();
 
       const nodeType = state.schema.nodes.table;
@@ -526,18 +529,16 @@ export const getToolbarConfig =
           );
 
       let columnSettingsItems;
-      columnSettingsItems =
-        pluginState.isDragAndDropEnabled &&
-        getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
-          ? getColumnSettingItems(
-              state,
-              getEditorView(),
-              intl,
-              getEditorContainerWidth,
-              editorAnalyticsAPI,
-              isTableScalingEnabled,
-            )
-          : [];
+      columnSettingsItems = pluginState.isDragAndDropEnabled
+        ? getColumnSettingItems(
+            state,
+            getEditorView(),
+            intl,
+            getEditorContainerWidth,
+            editorAnalyticsAPI,
+            isTableScalingEnabled,
+          )
+        : [];
       const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
       // Check if we need to show confirm dialog for delete button

package/src/types.ts

@@ -35,6 +35,14 @@ export interface InsertRowOptions {
 
 export type PluginInjectionAPI = ExtractInjectionAPI<TablePlugin>;
 
+export type PluginInjectionAPIWithA11y = ExtractInjectionAPI<TablePlugin> & {
+  accessibilityUtils?: {
+    actions: {
+      ariaNotify: (message: string) => void | undefined;
+    };
+  };
+};
+
 // override getPluginState but do not expose publicly as this type is experimental and will change
 // in the future
 export type TableSharedStateInternal = Pick<
@@ -49,6 +57,7 @@ export type TableSharedStateInternal = Pick<
   | 'hoveredCell'
   | 'isTableHovered'
   | 'tableNode'
+  | 'widthToWidest'
 > & {
   isResizing: boolean;
   isTableResizing?: boolean;
@@ -121,6 +130,9 @@ export interface CellHoverMeta {
   colIndex?: number;
   rowIndex?: number;
 }
+export interface WidthToWidest {
+  [tableLocalId: string]: boolean;
+}
 
 export interface TablePluginState {
   editorHasFocus?: boolean;
@@ -155,7 +167,7 @@ export interface TablePluginState {
   // for table wrap/collapse
   isTableCollapsed?: boolean; // is the current table already in an expand?
   canCollapseTable?: boolean; // enabled/disabled state of collapse option
-  widthToWidest?: boolean; // is the current table set to the widest width regarding view port
+  widthToWidest?: WidthToWidest; // is the current table set to the widest width regarding view port
 
   getIntl: () => IntlShape;
 
@@ -246,7 +258,7 @@ export type TablePluginAction =
   | {
       type: 'UPDATE_TABLE_WIDTH_TO_WIDEST';
       data: {
-        widthToWidest: boolean | undefined;
+        widthToWidest: WidthToWidest | undefined;
       };
     }
   | {

package/src/ui/DragHandle/index.tsx

@@ -222,8 +222,8 @@ const DragHandleComponent = ({
           width: isRow
             ? `${token('space.200', '16px')}` // 16px here because it's the size of drag handle button's large side
             : `calc(100% - ${dragTableInsertColumnButtonSize}px)`,
-          left: isRow ? '3px' : undefined,
-          bottom: isColumn ? '0' : undefined,
+          left: isRow ? `${token('space.050', '4px')}` : undefined,
+          bottom: isColumn ? `${token('space.0', '0px')}` : undefined,
           alignSelf: isColumn ? 'none' : 'center',
           zIndex: isColumn ? '-1' : 'auto',
         }}

package/src/ui/DragPreview/index.tsx

@@ -36,7 +36,9 @@ export const DragPreview = ({
       <DragInMotionIcon
         style={{
           position: 'absolute',
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           marginLeft: `${marginLeft}px`,
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           marginTop: `${marginTop}px`,
           transform: transform,
         }}

package/src/ui/FloatingContextualButton/FixedButton.tsx

@@ -4,6 +4,7 @@ import rafSchedule from 'raf-schd';
 import { createPortal } from 'react-dom';
 
 import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
+import { token } from '@atlaskit/tokens';
 
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import { TableCssClassName as ClassName } from '../../types';
@@ -144,26 +145,28 @@ export const FixedButton = ({
       ref={observerTargetRef}
       style={{
         position: 'absolute',
-        top: '0px',
-        left: '0px',
-        width: `${BUTTON_WIDTH}px`,
-        height: `${BUTTON_WIDTH}px`,
+        top: token('space.0', '0px'),
+        left: token('space.0', '0px'),
+        width: token('space.250', '20px'), // BUTTON_WIDTH
+        height: token('space.250', '20px'), // BUTTON_WIDTH
       }}
     >
       <div
         ref={fixedButtonRef}
         style={{
           position: 'fixed',
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           top: stickyHeader.top + stickyHeader.padding + offset * 2,
           zIndex: akEditorTableCellOnStickyHeaderZIndex,
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           left: calcLeftPos({
             buttonWidth: BUTTON_WIDTH,
             cellRectLeft: targetCellRect.left,
             cellRefWidth: targetCellRef.clientWidth,
             offset,
           }),
-          width: `${BUTTON_WIDTH}px`,
-          height: `${BUTTON_WIDTH}px`,
+          width: token('space.250', '20px'), // BUTTON_WIDTH
+          height: token('space.250', '20px'), // BUTTON_WIDTH
         }}
         className={ClassName.CONTEXTUAL_MENU_BUTTON_FIXED}
       >