@atlaskit/editor-plugin-table 7.16.3 → 7.16.5

package/dist/esm/pm-plugins/keymap.js

@@ -11,14 +11,15 @@ import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/
 export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAndDropEnabled) {
   var _pluginInjectionApi$a;
   var isTableScalingEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-  var isFullWidthEnabled = arguments.length > 4 ? arguments[4] : undefined;
-  var pluginInjectionApi = arguments.length > 5 ? arguments[5] : undefined;
-  var getIntl = arguments.length > 6 ? arguments[6] : undefined;
+  var isTableAlignmentEnabled = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  var isFullWidthEnabled = arguments.length > 5 ? arguments[5] : undefined;
+  var pluginInjectionApi = arguments.length > 6 ? arguments[6] : undefined;
+  var getIntl = arguments.length > 7 ? arguments[7] : undefined;
   var list = {};
   var ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.accessibilityUtils) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions.ariaNotify;
   bindKeymapWithCommand(nextCell.common, goToNextCell(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(1), list);
   bindKeymapWithCommand(previousCell.common, goToNextCell(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(-1), list);
-  bindKeymapWithCommand(toggleTable.common, createTable(isTableScalingEnabled, !!isFullWidthEnabled, editorAnalyticsAPI), list);
+  bindKeymapWithCommand(toggleTable.common, createTable(isTableScalingEnabled, isTableAlignmentEnabled, !!isFullWidthEnabled, editorAnalyticsAPI), list);
   bindKeymapWithCommand(backspace.common, chainCommands(deleteTableIfSelectedWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD), emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.KEYBOARD)), list);
   bindKeymapWithCommand(backspace.common, moveCursorBackward, list);
 

package/dist/esm/pm-plugins/table-width.js

@@ -16,9 +16,10 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
+import { ALIGN_START } from '../utils/alignment';
 import { TABLE_MAX_WIDTH } from './table-resizing/utils';
 export var pluginKey = new PluginKey('tableWidthPlugin');
-var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTableScalingEnabled) {
+var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled) {
   return new SafePlugin({
     key: pluginKey,
     state: {
@@ -91,8 +92,9 @@ var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullW
       var referentialityTr = transactions.find(function (tr) {
         return tr.getMeta('referentialityTableInserted');
       });
-      var shouldPatchTable = fullWidthEnabled && isTableScalingEnabled;
-      if (!isReplaceDocumentOperation && (!shouldPatchTable || !referentialityTr)) {
+      var shouldPatchTableWidth = fullWidthEnabled && isTableScalingEnabled;
+      var shouldPatchTableAlignment = fullWidthEnabled && isTableAlignmentEnabled;
+      if (!isReplaceDocumentOperation && (!shouldPatchTableWidth && !shouldPatchTableAlignment || !referentialityTr)) {
         return null;
       }
       var table = newState.schema.nodes.table;
@@ -152,10 +154,15 @@ var createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullW
       }
       if (referentialityTr) {
         referentialityTr.steps.forEach(function (step) {
-          step.getMap().forEach(function (oldStart, oldEnd, newStart, newEnd) {
+          step.getMap().forEach(function (_, __, newStart, newEnd) {
             newState.doc.nodesBetween(newStart, newEnd, function (node, pos) {
-              if (node.type === table && node.attrs.width !== TABLE_MAX_WIDTH) {
-                tr.setNodeAttribute(pos, 'width', TABLE_MAX_WIDTH);
+              if (node.type === table) {
+                if (shouldPatchTableWidth && node.attrs.width !== TABLE_MAX_WIDTH) {
+                  tr.setNodeAttribute(pos, 'width', TABLE_MAX_WIDTH);
+                }
+                if (shouldPatchTableAlignment) {
+                  tr.setNodeAttribute(pos, 'layout', ALIGN_START);
+                }
               }
             });
           });

package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -117,6 +117,7 @@ export var ColumnControls = function ColumnControls(_ref) {
   var generateHandleByType = function generateHandleByType(type, appearance, gridColumn, indexes) {
     var _rowHeights$reduce, _colWidths$reduce;
     var isHover = type === 'hover';
+    var isPlaceholder = appearance === 'placeholder';
     var previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce(function (sum, cur) {
       return sum + cur;
     }, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
@@ -138,7 +139,7 @@ export var ColumnControls = function ColumnControls(_ref) {
         width: '100%',
         position: 'relative'
       },
-      "data-testid": "table-floating-column-".concat(isHover ? colIndex : selectedColIndexes[0], "-drag-handle")
+      "data-testid": "table-floating-column-".concat(isHover ? colIndex : isPlaceholder ? appearance : selectedColIndexes[0], "-drag-handle")
     }, /*#__PURE__*/React.createElement(DragHandle, {
       isDragMenuTarget: !isHover,
       direction: "column",
@@ -163,10 +164,13 @@ export var ColumnControls = function ColumnControls(_ref) {
     if (!tableActive) {
       return null;
     }
+    var selectedAppearance = isColumnSelected && isEntireTableSelected ? isInDanger ? 'danger' : 'selected' : 'placeholder';
 
     // placeholder / selected need to always render at least one handle
     // so it can be focused via keyboard shortcuts
-    handles.push(generateHandleByType('selected', isColumnSelected && isEntireTableSelected ? isInDanger ? 'danger' : 'selected' : 'placeholder', "".concat(selectedColIndexes[0] + 1, " / span ").concat(selectedColIndexes.length), selectedColIndexes));
+    handles.push(generateHandleByType('selected', selectedAppearance,
+    // always position placeholder in first column to avoid overflow issues
+    selectedAppearance === 'placeholder' ? '1 / span 1' : "".concat(selectedColIndexes[0] + 1, " / span ").concat(selectedColIndexes.length), selectedColIndexes));
     if (hoveredCell && isTableHovered && colIndex !== undefined && !selectedColIndexes.includes(colIndex)) {
       handles.push(generateHandleByType('hover', 'default', "".concat(colIndex + 1, " / span 1"), colIndexes));
     }

package/dist/esm/utils/alignment.js

@@ -1,7 +1,10 @@
+export var ALIGN_START = 'align-start';
+export var ALIGN_CENTER = 'center';
+
 /**
  * Normalise table layout attribute an alignment value ('center' or 'align-start'), returns
  * center if layout equals a breakout value (e.g. 'default', 'wide', 'full-width')
  */
 export var normaliseAlignment = function normaliseAlignment(layout) {
-  return layout === 'center' || layout === 'align-start' ? layout : 'center';
+  return layout === ALIGN_CENTER || layout === ALIGN_START ? layout : ALIGN_CENTER;
 };

package/dist/esm/utils/create.js

@@ -3,16 +3,21 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { createTable } from '@atlaskit/editor-tables/utils';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
-export var createTableWithWidth = function createTableWithWidth(isTableScalingEnabled, isFullWidthModeEnabled, createTableProps) {
+export var createTableWithWidth = function createTableWithWidth(_ref) {
+  var isTableScalingEnabled = _ref.isTableScalingEnabled,
+    isTableAlignmentEnabled = _ref.isTableAlignmentEnabled,
+    isFullWidthModeEnabled = _ref.isFullWidthModeEnabled,
+    createTableProps = _ref.createTableProps;
   return function (schema) {
+    var attrsOverrides = {};
     if (isTableScalingEnabled && isFullWidthModeEnabled) {
-      return createTable(_objectSpread({
-        schema: schema,
-        tableWidth: TABLE_MAX_WIDTH
-      }, createTableProps));
+      attrsOverrides.tableWidth = TABLE_MAX_WIDTH;
     }
-    return createTable(_objectSpread({
+    if (isTableAlignmentEnabled && isFullWidthModeEnabled) {
+      attrsOverrides.layout = 'align-start';
+    }
+    return createTable(_objectSpread(_objectSpread({
       schema: schema
-    }, createTableProps));
+    }, createTableProps), attrsOverrides));
   };
 };

package/dist/types/commands/insert.d.ts

@@ -8,5 +8,5 @@ export declare const addColumnBefore: (isTableScalingEnabled?: boolean) => Comma
 export declare const addColumnAfter: (isTableScalingEnabled?: boolean) => Command;
 export declare const insertColumn: (isTableScalingEnabled?: boolean, isCellBackgroundDuplicated?: boolean) => (column: number) => Command;
 export declare const insertRow: (row: number, moveCursorToTheNewRow: boolean, isCellBackgroundDuplicated?: boolean) => Command;
-export declare const createTable: (isTableScalingEnabled?: boolean, isFullWidthModeEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined | null) => Command;
-export declare const insertTableWithSize: (isFullWidthModeEnabled?: boolean, isTableScalingEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;
+export declare const createTable: (isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthModeEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined | null) => Command;
+export declare const insertTableWithSize: (isFullWidthModeEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;

package/dist/types/pm-plugins/keymap.d.ts

@@ -3,5 +3,5 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { PluginInjectionAPIWithA11y } from '../types';
-export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape): SafePlugin;
+export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape): SafePlugin;
 export default keymapPlugin;

package/dist/types/pm-plugins/table-width.d.ts

@@ -13,7 +13,7 @@ type TableWidthPluginState = {
     tableRef: HTMLTableElement | null;
 };
 export declare const pluginKey: PluginKey<TableWidthPluginState>;
-declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean, isTableScalingEnabled: boolean) => SafePlugin<{
+declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean, isTableScalingEnabled: boolean, isTableAlignmentEnabled: boolean) => SafePlugin<{
     resizing: boolean;
     tableLocalId: string;
     tableRef: null;

package/dist/types/utils/alignment.d.ts

@@ -1,5 +1,7 @@
 import type { TableLayout } from '@atlaskit/adf-schema';
 import type { AlignmentOptions } from '../types';
+export declare const ALIGN_START = "align-start";
+export declare const ALIGN_CENTER = "center";
 /**
  * Normalise table layout attribute an alignment value ('center' or 'align-start'), returns
  * center if layout equals a breakout value (e.g. 'default', 'wide', 'full-width')

package/dist/types/utils/create.d.ts

@@ -1,5 +1,10 @@
 import type { Schema } from '@atlaskit/editor-prosemirror/model';
-export declare const createTableWithWidth: (isTableScalingEnabled?: boolean, isFullWidthModeEnabled?: boolean, createTableProps?: {
-    rowsCount?: number;
-    colsCount?: number;
+export declare const createTableWithWidth: ({ isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, createTableProps, }: {
+    isTableScalingEnabled?: boolean | undefined;
+    isTableAlignmentEnabled?: boolean | undefined;
+    isFullWidthModeEnabled?: boolean | undefined;
+    createTableProps?: {
+        rowsCount?: number | undefined;
+        colsCount?: number | undefined;
+    } | undefined;
 }) => (schema: Schema) => import("prosemirror-model").Node;

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

@@ -8,5 +8,5 @@ export declare const addColumnBefore: (isTableScalingEnabled?: boolean) => Comma
 export declare const addColumnAfter: (isTableScalingEnabled?: boolean) => Command;
 export declare const insertColumn: (isTableScalingEnabled?: boolean, isCellBackgroundDuplicated?: boolean) => (column: number) => Command;
 export declare const insertRow: (row: number, moveCursorToTheNewRow: boolean, isCellBackgroundDuplicated?: boolean) => Command;
-export declare const createTable: (isTableScalingEnabled?: boolean, isFullWidthModeEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined | null) => Command;
-export declare const insertTableWithSize: (isFullWidthModeEnabled?: boolean, isTableScalingEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;
+export declare const createTable: (isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthModeEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined | null) => Command;
+export declare const insertTableWithSize: (isFullWidthModeEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;

package/dist/types-ts4.5/pm-plugins/keymap.d.ts

@@ -3,5 +3,5 @@ import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { PluginInjectionAPIWithA11y } from '../types';
-export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape): SafePlugin;
+export declare function keymapPlugin(getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, dragAndDropEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthEnabled?: boolean, pluginInjectionApi?: PluginInjectionAPIWithA11y, getIntl?: () => IntlShape): SafePlugin;
 export default keymapPlugin;

package/dist/types-ts4.5/pm-plugins/table-width.d.ts

@@ -13,7 +13,7 @@ type TableWidthPluginState = {
     tableRef: HTMLTableElement | null;
 };
 export declare const pluginKey: PluginKey<TableWidthPluginState>;
-declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean, isTableScalingEnabled: boolean) => SafePlugin<{
+declare const createPlugin: (dispatch: Dispatch, dispatchAnalyticsEvent: DispatchAnalyticsEvent, fullWidthEnabled: boolean, isTableScalingEnabled: boolean, isTableAlignmentEnabled: boolean) => SafePlugin<{
     resizing: boolean;
     tableLocalId: string;
     tableRef: null;

package/dist/types-ts4.5/utils/alignment.d.ts

@@ -1,5 +1,7 @@
 import type { TableLayout } from '@atlaskit/adf-schema';
 import type { AlignmentOptions } from '../types';
+export declare const ALIGN_START = "align-start";
+export declare const ALIGN_CENTER = "center";
 /**
  * Normalise table layout attribute an alignment value ('center' or 'align-start'), returns
  * center if layout equals a breakout value (e.g. 'default', 'wide', 'full-width')

package/dist/types-ts4.5/utils/create.d.ts

@@ -1,5 +1,10 @@
 import type { Schema } from '@atlaskit/editor-prosemirror/model';
-export declare const createTableWithWidth: (isTableScalingEnabled?: boolean, isFullWidthModeEnabled?: boolean, createTableProps?: {
-    rowsCount?: number;
-    colsCount?: number;
+export declare const createTableWithWidth: ({ isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, createTableProps, }: {
+    isTableScalingEnabled?: boolean | undefined;
+    isTableAlignmentEnabled?: boolean | undefined;
+    isFullWidthModeEnabled?: boolean | undefined;
+    createTableProps?: {
+        rowsCount?: number | undefined;
+        colsCount?: number | undefined;
+    } | undefined;
 }) => (schema: Schema) => import("prosemirror-model").Node;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.16.3",
+  "version": "7.16.5",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/commands/insert.ts

@@ -201,37 +201,42 @@ export const insertRow =
     return true;
   };
 
-export const createTable = (
-  isTableScalingEnabled?: boolean,
-  isFullWidthModeEnabled?: boolean,
-  editorAnalyticsAPI?: EditorAnalyticsAPI | undefined | null,
-): Command => (state, dispatch) => {
-  const table = createTableWithWidth(
-    isTableScalingEnabled,
-    isFullWidthModeEnabled,
-  )(state.schema);
+export const createTable =
+  (
+    isTableScalingEnabled?: boolean,
+    isTableAlignmentEnabled?: boolean,
+    isFullWidthModeEnabled?: boolean,
+    editorAnalyticsAPI?: EditorAnalyticsAPI | undefined | null,
+  ): Command =>
+  (state, dispatch) => {
+    const table = createTableWithWidth({
+      isTableScalingEnabled,
+      isTableAlignmentEnabled,
+      isFullWidthModeEnabled,
+    })(state.schema);
 
-  if (dispatch) {
-    const tr = safeInsert(table)(state.tr).scrollIntoView();
-    if (editorAnalyticsAPI) {
-      editorAnalyticsAPI?.attachAnalyticsEvent({
+    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);
+        })(tr);
+      }
+      dispatch(tr);
     }
-    dispatch(tr);
-  }
-  
-  return true;
-}
+
+    return true;
+  };
 
 export const insertTableWithSize =
   (
     isFullWidthModeEnabled?: boolean,
     isTableScalingEnabled?: boolean,
+    isTableAlignmentEnabled?: boolean,
     editorAnalyticsAPI?: EditorAnalyticsAPI,
   ) =>
   (
@@ -240,14 +245,15 @@ export const insertTableWithSize =
     inputMethod?: INPUT_METHOD.PICKER,
   ): EditorCommand => {
     return ({ tr }) => {
-      const tableNode = createTableWithWidth(
+      const tableNode = createTableWithWidth({
         isTableScalingEnabled,
         isFullWidthModeEnabled,
-        {
+        isTableAlignmentEnabled,
+        createTableProps: {
           rowsCount: rowsCount,
           colsCount: colsCount,
         },
-      )(tr.doc.type.schema);
+      })(tr.doc.type.schema);
 
       const newTr = safeInsert(tableNode)(tr).scrollIntoView();
       if (inputMethod) {

package/src/plugin.tsx

@@ -199,10 +199,11 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
       insertTable:
         (analyticsPayload): Command =>
         (state, dispatch) => {
-          const node = createTableWithWidth(
-            options?.isTableScalingEnabled,
-            options?.fullWidthEnabled,
-          )(state.schema);
+          const node = createTableWithWidth({
+            isTableScalingEnabled: options?.isTableScalingEnabled,
+            isTableAlignmentEnabled: options?.isTableAlignmentEnabled,
+            isFullWidthModeEnabled: options?.fullWidthEnabled,
+          })(state.schema);
 
           return (
             api?.contentInsertion?.actions?.insert({
@@ -229,6 +230,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
       insertTableWithSize: insertTableWithSize(
         options?.fullWidthEnabled,
         options?.isTableScalingEnabled,
+        options?.isTableAlignmentEnabled,
         api?.analytics?.actions,
       ),
     },
@@ -318,6 +320,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
             const {
               dragAndDropEnabled,
               isTableScalingEnabled = false,
+              isTableAlignmentEnabled = false,
               fullWidthEnabled = false,
             } = options || ({} as TablePluginOptions);
             return keymapPlugin(
@@ -325,6 +328,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
               editorAnalyticsAPI,
               dragAndDropEnabled,
               isTableScalingEnabled,
+              isTableAlignmentEnabled,
               fullWidthEnabled,
               api,
               getIntl,
@@ -401,6 +405,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
                   dispatchAnalyticsEvent,
                   options?.fullWidthEnabled ?? false,
                   options?.isTableScalingEnabled ?? false,
+                  options?.isTableAlignmentEnabled ?? false,
                 )
               : undefined,
         },
@@ -644,10 +649,11 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
             // see comment on tablesPlugin.getSharedState on usage
             const tableState = api?.table?.sharedState.currentState();
 
-            const tableNode = createTableWithWidth(
-              options?.isTableScalingEnabled,
-              tableState?.isFullWidthModeEnabled,
-            )(state.schema);
+            const tableNode = createTableWithWidth({
+              isTableScalingEnabled: options?.isTableScalingEnabled,
+              isTableAlignmentEnabled: options?.isTableAlignmentEnabled,
+              isFullWidthModeEnabled: tableState?.isFullWidthModeEnabled,
+            })(state.schema);
 
             const tr = insert(tableNode);
 

package/src/pm-plugins/keymap.ts

@@ -57,6 +57,7 @@ export function keymapPlugin(
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
   dragAndDropEnabled?: boolean,
   isTableScalingEnabled = false,
+  isTableAlignmentEnabled = false,
   isFullWidthEnabled?: boolean,
   pluginInjectionApi?: PluginInjectionAPIWithA11y,
   getIntl?: () => IntlShape,
@@ -80,6 +81,7 @@ export function keymapPlugin(
     toggleTable.common!,
     createTable(
       isTableScalingEnabled,
+      isTableAlignmentEnabled,
       !!isFullWidthEnabled,
       editorAnalyticsAPI,
     ),

package/src/pm-plugins/table-width.ts

@@ -23,6 +23,8 @@ import {
 } from '@atlaskit/editor-shared-styles';
 import { findTable } from '@atlaskit/editor-tables/utils';
 
+import { ALIGN_START } from '../utils/alignment';
+
 import { TABLE_MAX_WIDTH } from './table-resizing/utils';
 
 type __ReplaceStep = ReplaceStep & {
@@ -46,6 +48,7 @@ const createPlugin = (
   dispatchAnalyticsEvent: DispatchAnalyticsEvent,
   fullWidthEnabled: boolean,
   isTableScalingEnabled: boolean,
+  isTableAlignmentEnabled: boolean,
 ) => {
   return new SafePlugin({
     key: pluginKey,
@@ -133,11 +136,14 @@ const createPlugin = (
         tr.getMeta('referentialityTableInserted'),
       );
 
-      const shouldPatchTable = fullWidthEnabled && isTableScalingEnabled;
+      const shouldPatchTableWidth = fullWidthEnabled && isTableScalingEnabled;
+      const shouldPatchTableAlignment =
+        fullWidthEnabled && isTableAlignmentEnabled;
 
       if (
         !isReplaceDocumentOperation &&
-        (!shouldPatchTable || !referentialityTr)
+        ((!shouldPatchTableWidth && !shouldPatchTableAlignment) ||
+          !referentialityTr)
       ) {
         return null;
       }
@@ -206,10 +212,18 @@ const createPlugin = (
 
       if (referentialityTr) {
         referentialityTr.steps.forEach((step) => {
-          step.getMap().forEach((oldStart, oldEnd, newStart, newEnd) => {
+          step.getMap().forEach((_, __, newStart, newEnd) => {
             newState.doc.nodesBetween(newStart, newEnd, (node, pos) => {
-              if (node.type === table && node.attrs.width !== TABLE_MAX_WIDTH) {
-                tr.setNodeAttribute(pos, 'width', TABLE_MAX_WIDTH);
+              if (node.type === table) {
+                if (
+                  shouldPatchTableWidth &&
+                  node.attrs.width !== TABLE_MAX_WIDTH
+                ) {
+                  tr.setNodeAttribute(pos, 'width', TABLE_MAX_WIDTH);
+                }
+                if (shouldPatchTableAlignment) {
+                  tr.setNodeAttribute(pos, 'layout', ALIGN_START);
+                }
               }
             });
           });

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

@@ -195,6 +195,7 @@ export const ColumnControls = ({
     indexes: number[],
   ) => {
     const isHover = type === 'hover';
+    const isPlaceholder = appearance === 'placeholder';
     const previewHeight = rowHeights?.reduce((sum, cur) => sum + cur, 0) ?? 0;
 
     const previewWidth =
@@ -221,7 +222,11 @@ export const ColumnControls = ({
           position: 'relative',
         }}
         data-testid={`table-floating-column-${
-          isHover ? colIndex : selectedColIndexes[0]
+          isHover
+            ? colIndex
+            : isPlaceholder
+              ? appearance
+              : selectedColIndexes[0]
         }-drag-handle`}
       >
         <DragHandle
@@ -254,17 +259,23 @@ export const ColumnControls = ({
       return null;
     }
 
+    const selectedAppearance =
+      isColumnSelected && isEntireTableSelected
+        ? isInDanger
+          ? 'danger'
+          : 'selected'
+        : 'placeholder';
+
     // placeholder / selected need to always render at least one handle
     // so it can be focused via keyboard shortcuts
     handles.push(
       generateHandleByType(
         'selected',
-        isColumnSelected && isEntireTableSelected
-          ? isInDanger
-            ? 'danger'
-            : 'selected'
-          : 'placeholder',
-        `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}`,
+        selectedAppearance,
+        // always position placeholder in first column to avoid overflow issues
+        selectedAppearance === 'placeholder'
+          ? '1 / span 1'
+          : `${selectedColIndexes[0] + 1} / span ${selectedColIndexes.length}`,
         selectedColIndexes,
       ),
     );

package/src/utils/alignment.ts

@@ -2,9 +2,12 @@ import type { TableLayout } from '@atlaskit/adf-schema';
 
 import type { AlignmentOptions } from '../types';
 
+export const ALIGN_START = 'align-start';
+export const ALIGN_CENTER = 'center';
+
 /**
  * Normalise table layout attribute an alignment value ('center' or 'align-start'), returns
  * center if layout equals a breakout value (e.g. 'default', 'wide', 'full-width')
  */
 export const normaliseAlignment = (layout: TableLayout): AlignmentOptions =>
-  layout === 'center' || layout === 'align-start' ? layout : 'center';
+  layout === ALIGN_CENTER || layout === ALIGN_START ? layout : ALIGN_CENTER;

package/src/utils/create.ts

@@ -1,27 +1,41 @@
+import type { TableAttributes } from '@atlaskit/adf-schema';
 import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import { createTable } from '@atlaskit/editor-tables/utils';
 
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 
+type CreateTableOverrides = {
+  tableWidth?: TableAttributes['width'];
+  layout?: TableAttributes['layout'];
+};
+
 export const createTableWithWidth =
-  (
-    isTableScalingEnabled?: boolean,
-    isFullWidthModeEnabled?: boolean,
+  ({
+    isTableScalingEnabled,
+    isTableAlignmentEnabled,
+    isFullWidthModeEnabled,
+    createTableProps,
+  }: {
+    isTableScalingEnabled?: boolean;
+    isTableAlignmentEnabled?: boolean;
+    isFullWidthModeEnabled?: boolean;
     createTableProps?: {
       rowsCount?: number;
       colsCount?: number;
-    },
-  ) =>
+    };
+  }) =>
   (schema: Schema) => {
+    const attrsOverrides: CreateTableOverrides = {};
     if (isTableScalingEnabled && isFullWidthModeEnabled) {
-      return createTable({
-        schema,
-        tableWidth: TABLE_MAX_WIDTH,
-        ...createTableProps,
-      });
+      attrsOverrides.tableWidth = TABLE_MAX_WIDTH;
+    }
+    if (isTableAlignmentEnabled && isFullWidthModeEnabled) {
+      attrsOverrides.layout = 'align-start';
     }
+
     return createTable({
       schema,
       ...createTableProps,
+      ...attrsOverrides,
     });
   };