@atlaskit/editor-plugin-table 7.16.0 → 7.16.2

package/dist/es2019/nodeviews/TableComponent.js

@@ -636,7 +636,9 @@ class TableComponent extends React.Component {
       pluginInjectionApi,
       isDragAndDropEnabled,
       getEditorFeatureFlags,
-      isTableScalingEnabled // here we can use options.isTableScalingEnabled
+      isTableScalingEnabled,
+      // here we can use options.isTableScalingEnabled
+      isTableAlignmentEnabled
     } = this.props;
     let {
       isInDanger,
@@ -752,7 +754,8 @@ class TableComponent extends React.Component {
       isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
       isResizing: isResizing,
       isTableScalingEnabled: isTableScalingEnabled,
-      isWholeTableInDanger: isWholeTableInDanger
+      isWholeTableInDanger: isWholeTableInDanger,
+      isTableAlignmentEnabled: isTableAlignmentEnabled
     }, /*#__PURE__*/React.createElement("div", {
       className: ClassName.TABLE_STICKY_SENTINEL_TOP,
       "data-testid": "sticky-sentinel-top"

package/dist/es2019/nodeviews/TableComponentWithSharedState.js

@@ -65,6 +65,7 @@ export const TableComponentWithSharedState = ({
     isHeaderColumnEnabled: isHeaderColumnEnabled,
     isDragAndDropEnabled: options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled,
     isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
+    isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
     tableActive: tableActive,
     ordering: ordering,
     isResizing: isResizing,

package/dist/es2019/nodeviews/TableContainer.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
@@ -21,6 +21,45 @@ export const InnerContainer = /*#__PURE__*/forwardRef(({
     "data-testid": "table-container"
   }, children);
 });
+const centerAlignStyle = {
+  display: 'flex',
+  justifyContent: 'center'
+};
+const leftAlignStyle = {
+  display: 'flex',
+  justifyContent: 'flex-start'
+};
+const AlignmentTableContainer = ({
+  node,
+  children
+}) => {
+  const alignment = node.attrs.layout;
+  const style = useMemo(() => {
+    return alignment === 'align-start' ? leftAlignStyle : centerAlignStyle;
+  }, [alignment]);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "table-alignment-container",
+    style: style
+  }, children);
+};
+const AlignmentTableContainerWrapper = ({
+  isTableAlignmentEnabled,
+  node,
+  children
+}) => {
+  if (!isTableAlignmentEnabled) {
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "table-alignment-container",
+      style: {
+        display: 'flex',
+        justifyContent: 'center'
+      }
+    }, children);
+  }
+  return /*#__PURE__*/React.createElement(AlignmentTableContainer, {
+    node: node
+  }, children);
+};
 export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   children,
   className,
@@ -31,9 +70,10 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
   tableRef,
   isResizing,
   pluginInjectionApi,
-  isTableScalingEnabled,
   tableWrapperHeight,
-  isWholeTableInDanger
+  isWholeTableInDanger,
+  isTableScalingEnabled,
+  isTableAlignmentEnabled
 }) => {
   const containerRef = useRef(null);
   const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
@@ -121,11 +161,9 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
     onResizeStop
   };
   const isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      justifyContent: 'center'
-    }
+  return /*#__PURE__*/React.createElement(AlignmentTableContainerWrapper, {
+    isTableAlignmentEnabled: isTableAlignmentEnabled,
+    node: node
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       width: tableWidthRef.current,
@@ -152,7 +190,6 @@ export const TableContainer = ({
   containerWidth: {
     width: editorWidth
   },
-  isTableResizingEnabled,
   editorView,
   getPos,
   tableRef,
@@ -160,8 +197,10 @@ export const TableContainer = ({
   tableWrapperHeight,
   isResizing,
   pluginInjectionApi,
+  isWholeTableInDanger,
+  isTableResizingEnabled,
   isTableScalingEnabled,
-  isWholeTableInDanger
+  isTableAlignmentEnabled
 }) => {
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/React.createElement(ResizableTableContainer, {
@@ -175,7 +214,8 @@ export const TableContainer = ({
       isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi,
       isTableScalingEnabled: isTableScalingEnabled,
-      isWholeTableInDanger: isWholeTableInDanger
+      isWholeTableInDanger: isWholeTableInDanger,
+      isTableAlignmentEnabled: isTableAlignmentEnabled
     }, children);
   }
   return /*#__PURE__*/React.createElement(InnerContainer, {

package/dist/es2019/nodeviews/table.js

@@ -144,7 +144,7 @@ export default class TableView extends ReactNodeView {
       },
       editorView: props.view,
       render: pluginStates => {
-        var _props$options;
+        var _props$options, _props$options2;
         const {
           tableResizingPluginState,
           tableWidthPluginState,
@@ -178,8 +178,9 @@ export default class TableView extends ReactNodeView {
           isHeaderRowEnabled: pluginState.isHeaderRowEnabled,
           isHeaderColumnEnabled: pluginState.isHeaderColumnEnabled,
           isDragAndDropEnabled: pluginState.isDragAndDropEnabled,
-          isTableScalingEnabled: (_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.isTableScalingEnabled // this.options?.isTableScalingEnabled sams as TableOptions.isTableScalingEnabled same as pluginState.isTableScalingEnabled
+          isTableScalingEnabled: (_props$options = props.options) === null || _props$options === void 0 ? void 0 : _props$options.isTableScalingEnabled // this.options?.isTableScalingEnabled same as TableOptions.isTableScalingEnabled same as pluginState.isTableScalingEnabled
           ,
+          isTableAlignmentEnabled: (_props$options2 = props.options) === null || _props$options2 === void 0 ? void 0 : _props$options2.isTableAlignmentEnabled,
           tableActive: tableActive,
           ordering: pluginState.ordering,
           isResizing: isResizing,
@@ -249,7 +250,7 @@ export default class TableView extends ReactNodeView {
     super.destroy();
   }
 }
-export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi) => {
+export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled) => {
   const {
     pluginConfig,
     isFullWidthModeEnabled,
@@ -276,7 +277,9 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
       wasFullWidthModeEnabled,
       isTableResizingEnabled,
       isDragAndDropEnabled,
-      isTableScalingEnabled // same as options.isTableScalingEnabled
+      isTableScalingEnabled,
+      // same as options.isTableScalingEnabled
+      isTableAlignmentEnabled
     },
     getEditorContainerWidth,
     getEditorFeatureFlags,

package/dist/es2019/plugin.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { table, tableCell, tableHeader, tableRow, tableStage0 } from '@atlaskit/adf-schema';
+import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
 import { IconTable } from '@atlaskit/editor-common/icons';
@@ -101,7 +101,13 @@ const tablesPlugin = ({
           node,
           options: {
             selectNodeInserted: false,
-            analyticsPayload
+            analyticsPayload: {
+              ...analyticsPayload,
+              attributes: {
+                ...analyticsPayload.attributes,
+                localId: node.attrs.localId
+              }
+            }
           }
         })) !== null && _api$contentInsertion !== void 0 ? _api$contentInsertion : false;
       }
@@ -110,10 +116,9 @@ const tablesPlugin = ({
       insertTableWithSize: insertTableWithSize(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
     },
     nodes() {
-      const tableNode = options !== null && options !== void 0 && options.isTableScalingEnabled && getBooleanFF('platform.editor.table.preserve-widths-with-lock-button') ? tableStage0 : table;
       return [{
         name: 'table',
-        node: tableNode
+        node: table
       }, {
         name: 'tableHeader',
         node: tableHeader
@@ -430,13 +435,15 @@ const tablesPlugin = ({
           var _api$table;
           // see comment on tablesPlugin.getSharedState on usage
           const tableState = api === null || api === void 0 ? void 0 : (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
-          const tr = insert(createTableWithWidth(options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled)(state.schema));
+          const tableNode = createTableWithWidth(options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled)(state.schema);
+          const tr = insert(tableNode);
           editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
             action: ACTION.INSERTED,
             actionSubject: ACTION_SUBJECT.DOCUMENT,
             actionSubjectId: ACTION_SUBJECT_ID.TABLE,
             attributes: {
-              inputMethod: INPUT_METHOD.QUICK_INSERT
+              inputMethod: INPUT_METHOD.QUICK_INSERT,
+              localId: tableNode.attrs.localId
             },
             eventType: EVENT_TYPE.TRACK
           })(tr);

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

@@ -1,30 +1,20 @@
-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, addRowAfter, addRowBefore, backspace, bindKeymapWithCommand, decreaseMediaSize, deleteColumn, deleteRow, escape, increaseMediaSize, moveColumnLeft, moveColumnRight, moveLeft, moveRight, moveRowDown, moveRowUp, nextCell, previousCell, startColumnResizing, toggleTable } from '@atlaskit/editor-common/keymaps';
 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, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut, deleteTableIfSelectedWithAnalytics, emptyMultipleCellsWithAnalytics } from '../commands-with-analytics';
 import { activateNextResizeArea, initiateKeyboardColumnResizing, stopKeyboardColumnResizing } from '../commands/column-resize';
-import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand } from '../commands/insert';
+import { addColumnAfter as addColumnAfterCommand, addColumnBefore as addColumnBeforeCommand, createTable } from '../commands/insert';
 import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/commands-with-analytics';
-import { withEditorAnalyticsAPI } from '../utils/analytics';
-const createTableWithAnalytics = (isTableScalingEnabled, isFullWidthModeEnabled, editorAnalyticsAPI) => 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, editorAnalyticsAPI, dragAndDropEnabled, isTableScalingEnabled = false, isFullWidthEnabled, pluginInjectionApi, getIntl) {
   var _pluginInjectionApi$a;
   const list = {};
   const ariaNotifyPlugin = pluginInjectionApi === null || pluginInjectionApi === void 0 ? 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, createTableWithAnalytics(isTableScalingEnabled, !!isFullWidthEnabled, editorAnalyticsAPI), list);
+  bindKeymapWithCommand(toggleTable.common, createTable(isTableScalingEnabled, !!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/es2019/pm-plugins/main.js

@@ -257,7 +257,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
         return false;
       },
       nodeViews: {
-        table: (node, view, getPos) => createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi),
+        table: (node, view, getPos) => createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isTableAlignmentEnabled),
         tableRow: (node, view, getPos) => new TableRow(node, view, getPos, eventDispatcher),
         tableCell: (node, view, getPos) => new TableCell(node, view, getPos, eventDispatcher),
         tableHeader: (node, view, getPos) => new TableCell(node, view, getPos, eventDispatcher)

package/dist/es2019/toolbar.js

@@ -19,7 +19,7 @@ import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import TableOptionsIcon from '@atlaskit/icon/glyph/preferences';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from './commands';
-import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, toggleTableLockWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
+import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, setTableAlignmentWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, toggleTableLockWithAnalytics, wrapTableInExpandWithAnalytics } from './commands-with-analytics';
 import { getPluginState } from './pm-plugins/plugin-factory';
 import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing';
 import { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizing/utils/resize-state';
@@ -29,6 +29,7 @@ import { TableCssClassName } from './types';
 import { FloatingAlignmentButtons } from './ui/FloatingAlignmentButtons/FloatingAlignmentButtons';
 import { DisplayModeIcon } from './ui/icons';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes, isTableNested } from './utils';
+import { normaliseAlignment } from './utils/alignment';
 export const getToolbarMenuConfig = (config, state, {
   formatMessage
 }, editorAnalyticsAPI) => {
@@ -316,7 +317,7 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
     const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
     let alignmentMenu;
     const isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
-    alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl) : [];
+    alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI) : [];
     let cellItems;
     cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled);
     let columnSettingsItems;
@@ -563,7 +564,7 @@ const highlightColumnsHandler = (state, dispatch) => {
 };
 export const getAlignmentOptionsConfig = (editorState, {
   formatMessage
-}) => {
+}, editorAnalyticsAPI) => {
   const tableObject = findTable(editorState.selection);
   if (!tableObject) {
     return [];
@@ -589,13 +590,14 @@ export const getAlignmentOptionsConfig = (editorState, {
       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)
     };
   });
   const alignmentItemOptions = {
@@ -618,26 +620,7 @@ export const getAlignmentOptionsConfig = (editorState, {
   }];
   return alignmentToolbarItem;
 };
-const alignTable = nextLayoutValue => {
-  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, selectedNode) => {
   const selectedAlignment = selectedNode.attrs.layout;
-  return alignmentIcons.find(icon => icon.value === (selectedNode.attrs.layout === 'default' ? 'center' : selectedAlignment));
+  return alignmentIcons.find(icon => icon.value === normaliseAlignment(selectedAlignment));
 };

package/dist/es2019/utils/alignment.js

@@ -0,0 +1,5 @@
+/**
+ * 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 => layout === 'center' || layout === 'align-start' ? layout : 'center';

package/dist/esm/commands/insert.js

@@ -1,6 +1,6 @@
 // #region Imports
 import { AddColumnStep } from '@atlaskit/custom-steps';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, TABLE_OVERFLOW_CHANGE_TRIGGER } 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 { Selection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
@@ -134,11 +134,23 @@ export var insertRow = function insertRow(row, moveCursorToTheNewRow, isCellBack
     return true;
   };
 };
-export var createTable = function createTable(isTableScalingEnabled, isFullWidthModeEnabled) {
+export var createTable = function createTable(isTableScalingEnabled, isFullWidthModeEnabled, editorAnalyticsAPI) {
   return function (state, dispatch) {
     var table = createTableWithWidth(isTableScalingEnabled, isFullWidthModeEnabled)(state.schema);
     if (dispatch) {
-      dispatch(safeInsert(table)(state.tr).scrollIntoView());
+      var tr = safeInsert(table)(state.tr).scrollIntoView();
+      if (editorAnalyticsAPI) {
+        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+          action: ACTION.INSERTED,
+          actionSubject: ACTION_SUBJECT.DOCUMENT,
+          actionSubjectId: ACTION_SUBJECT_ID.TABLE,
+          attributes: {
+            inputMethod: INPUT_METHOD.SHORTCUT
+          },
+          eventType: EVENT_TYPE.TRACK
+        })(tr);
+      }
+      dispatch(tr);
     }
     return true;
   };

package/dist/esm/commands/misc.js

@@ -579,4 +579,18 @@ export var updateWidthToWidest = function updateWidthToWidest(widthToWidest) {
       }
     };
   });
+};
+export var setTableAlignment = function setTableAlignment(newAlignment) {
+  return function (_ref2) {
+    var tr = _ref2.tr;
+    var tableObject = findTable(tr.selection);
+    if (!tableObject) {
+      return null;
+    }
+    var nextTableAttrs = _objectSpread(_objectSpread({}, tableObject.node.attrs), {}, {
+      layout: newAlignment
+    });
+    tr.setNodeMarkup(tableObject.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
+    return tr;
+  };
 };

package/dist/esm/commands-with-analytics.js

@@ -12,7 +12,7 @@ import { changeColumnWidthByStep } from './commands/column-resize';
 import { deleteColumnsCommand } from './commands/delete';
 import { setTableDisplayMode } from './commands/display-mode';
 import { insertColumn, insertRow } from './commands/insert';
-import { deleteTable, deleteTableIfSelected, getTableSelectionType, setMultipleCellAttrs } from './commands/misc';
+import { deleteTable, deleteTableIfSelected, getTableSelectionType, setMultipleCellAttrs, setTableAlignment } from './commands/misc';
 import { sortByColumn } from './commands/sort';
 import { splitCell } from './commands/split-cell';
 import { getNextLayout, toggleHeaderColumn, toggleHeaderRow, toggleNumberColumn, toggleTableLayout } from './commands/toggle';
@@ -530,4 +530,27 @@ export var toggleTableLockWithAnalytics = function toggleTableLockWithAnalytics(
     })(editorAnalyticsAPI)(editorCommandToPMCommand(setTableDisplayMode));
   };
 };
-// #endregion
+export var setTableAlignmentWithAnalytics = function setTableAlignmentWithAnalytics(editorAnalyticsAPI) {
+  return function (newAlignment, previousAlignment, inputMethod) {
+    return withEditorAnalyticsAPI(function (state) {
+      var _getSelectedTableInfo14 = getSelectedTableInfo(state.selection),
+        table = _getSelectedTableInfo14.table,
+        totalRowCount = _getSelectedTableInfo14.totalRowCount,
+        totalColumnCount = _getSelectedTableInfo14.totalColumnCount;
+      return {
+        action: TABLE_ACTION.CHANGED_ALIGNMENT,
+        actionSubject: ACTION_SUBJECT.TABLE,
+        actionSubjectId: null,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          tableWidth: table === null || table === void 0 ? void 0 : table.node.attrs.width,
+          newAlignment: newAlignment,
+          previousAlignment: previousAlignment === 'center' || previousAlignment === 'align-start' ? previousAlignment : null,
+          totalRowCount: totalRowCount,
+          totalColumnCount: totalColumnCount,
+          inputMethod: inputMethod
+        }
+      };
+    })(editorAnalyticsAPI)(editorCommandToPMCommand(setTableAlignment(newAlignment)));
+  };
+};

package/dist/esm/nodeviews/TableComponent.js

@@ -645,7 +645,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         pluginInjectionApi = _this$props11.pluginInjectionApi,
         isDragAndDropEnabled = _this$props11.isDragAndDropEnabled,
         getEditorFeatureFlags = _this$props11.getEditorFeatureFlags,
-        isTableScalingEnabled = _this$props11.isTableScalingEnabled;
+        isTableScalingEnabled = _this$props11.isTableScalingEnabled,
+        isTableAlignmentEnabled = _this$props11.isTableAlignmentEnabled;
       var _this$props12 = this.props,
         isInDanger = _this$props12.isInDanger,
         hoveredRows = _this$props12.hoveredRows,
@@ -754,7 +755,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.isTableResizingEnabled,
         isResizing: isResizing,
         isTableScalingEnabled: isTableScalingEnabled,
-        isWholeTableInDanger: isWholeTableInDanger
+        isWholeTableInDanger: isWholeTableInDanger,
+        isTableAlignmentEnabled: isTableAlignmentEnabled
       }, /*#__PURE__*/React.createElement("div", {
         className: ClassName.TABLE_STICKY_SENTINEL_TOP,
         "data-testid": "sticky-sentinel-top"

package/dist/esm/nodeviews/TableComponentWithSharedState.js

@@ -62,6 +62,7 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     isHeaderColumnEnabled: isHeaderColumnEnabled,
     isDragAndDropEnabled: options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled,
     isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
+    isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.isTableAlignmentEnabled,
     tableActive: tableActive,
     ordering: ordering,
     isResizing: isResizing,

package/dist/esm/nodeviews/TableContainer.js

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { forwardRef, useCallback, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
@@ -21,19 +21,57 @@ export var InnerContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "data-testid": "table-container"
   }, children);
 });
-export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
-  var children = _ref2.children,
-    className = _ref2.className,
-    node = _ref2.node,
-    containerWidth = _ref2.containerWidth,
-    editorView = _ref2.editorView,
-    getPos = _ref2.getPos,
-    tableRef = _ref2.tableRef,
-    isResizing = _ref2.isResizing,
-    pluginInjectionApi = _ref2.pluginInjectionApi,
-    isTableScalingEnabled = _ref2.isTableScalingEnabled,
-    tableWrapperHeight = _ref2.tableWrapperHeight,
-    isWholeTableInDanger = _ref2.isWholeTableInDanger;
+var centerAlignStyle = {
+  display: 'flex',
+  justifyContent: 'center'
+};
+var leftAlignStyle = {
+  display: 'flex',
+  justifyContent: 'flex-start'
+};
+var AlignmentTableContainer = function AlignmentTableContainer(_ref2) {
+  var node = _ref2.node,
+    children = _ref2.children;
+  var alignment = node.attrs.layout;
+  var style = useMemo(function () {
+    return alignment === 'align-start' ? leftAlignStyle : centerAlignStyle;
+  }, [alignment]);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "table-alignment-container",
+    style: style
+  }, children);
+};
+var AlignmentTableContainerWrapper = function AlignmentTableContainerWrapper(_ref3) {
+  var isTableAlignmentEnabled = _ref3.isTableAlignmentEnabled,
+    node = _ref3.node,
+    children = _ref3.children;
+  if (!isTableAlignmentEnabled) {
+    return /*#__PURE__*/React.createElement("div", {
+      "data-testid": "table-alignment-container",
+      style: {
+        display: 'flex',
+        justifyContent: 'center'
+      }
+    }, children);
+  }
+  return /*#__PURE__*/React.createElement(AlignmentTableContainer, {
+    node: node
+  }, children);
+};
+export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
+  var children = _ref4.children,
+    className = _ref4.className,
+    node = _ref4.node,
+    containerWidth = _ref4.containerWidth,
+    editorView = _ref4.editorView,
+    getPos = _ref4.getPos,
+    tableRef = _ref4.tableRef,
+    isResizing = _ref4.isResizing,
+    pluginInjectionApi = _ref4.pluginInjectionApi,
+    tableWrapperHeight = _ref4.tableWrapperHeight,
+    isWholeTableInDanger = _ref4.isWholeTableInDanger,
+    isTableScalingEnabled = _ref4.isTableScalingEnabled,
+    isTableAlignmentEnabled = _ref4.isTableAlignmentEnabled;
   var containerRef = useRef(null);
   var tableWidthRef = useRef(akEditorDefaultLayoutWidth);
   var _useState = useState(false),
@@ -122,11 +160,9 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     onResizeStop: onResizeStop
   };
   var isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: 'flex',
-      justifyContent: 'center'
-    }
+  return /*#__PURE__*/React.createElement(AlignmentTableContainerWrapper, {
+    isTableAlignmentEnabled: isTableAlignmentEnabled,
+    node: node
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       width: tableWidthRef.current,
@@ -146,21 +182,22 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref2) {
     node: node
   }, children))));
 });
-export var TableContainer = function TableContainer(_ref3) {
-  var children = _ref3.children,
-    node = _ref3.node,
-    className = _ref3.className,
-    editorWidth = _ref3.containerWidth.width,
-    isTableResizingEnabled = _ref3.isTableResizingEnabled,
-    editorView = _ref3.editorView,
-    getPos = _ref3.getPos,
-    tableRef = _ref3.tableRef,
-    isNested = _ref3.isNested,
-    tableWrapperHeight = _ref3.tableWrapperHeight,
-    isResizing = _ref3.isResizing,
-    pluginInjectionApi = _ref3.pluginInjectionApi,
-    isTableScalingEnabled = _ref3.isTableScalingEnabled,
-    isWholeTableInDanger = _ref3.isWholeTableInDanger;
+export var TableContainer = function TableContainer(_ref5) {
+  var children = _ref5.children,
+    node = _ref5.node,
+    className = _ref5.className,
+    editorWidth = _ref5.containerWidth.width,
+    editorView = _ref5.editorView,
+    getPos = _ref5.getPos,
+    tableRef = _ref5.tableRef,
+    isNested = _ref5.isNested,
+    tableWrapperHeight = _ref5.tableWrapperHeight,
+    isResizing = _ref5.isResizing,
+    pluginInjectionApi = _ref5.pluginInjectionApi,
+    isWholeTableInDanger = _ref5.isWholeTableInDanger,
+    isTableResizingEnabled = _ref5.isTableResizingEnabled,
+    isTableScalingEnabled = _ref5.isTableScalingEnabled,
+    isTableAlignmentEnabled = _ref5.isTableAlignmentEnabled;
   if (isTableResizingEnabled && !isNested) {
     return /*#__PURE__*/React.createElement(ResizableTableContainer, {
       className: className,
@@ -173,7 +210,8 @@ export var TableContainer = function TableContainer(_ref3) {
       isResizing: isResizing,
       pluginInjectionApi: pluginInjectionApi,
       isTableScalingEnabled: isTableScalingEnabled,
-      isWholeTableInDanger: isWholeTableInDanger
+      isWholeTableInDanger: isWholeTableInDanger,
+      isTableAlignmentEnabled: isTableAlignmentEnabled
     }, children);
   }
   return /*#__PURE__*/React.createElement(InnerContainer, {