@atlaskit/editor-plugin-table 7.15.0 → 7.16.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-table
 
+## 7.16.1
+
+### Patch Changes
+
+-   [#101355](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101355)
+    [`040f4ffe7af0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/040f4ffe7af0) -
+    Add analytic event to table alignment command
+-   [#101524](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101524)
+    [`4821570088e6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4821570088e6) -
+    ED-23362 Bump ADF schema to version 36.8.1 and add support for adf validation and transformation
+
+## 7.16.0
+
+### Minor Changes
+
+-   [#100692](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100692)
+    [`76587b8092dc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/76587b8092dc) -
+    [ux] ED-22924 Table - Created and hooked command to alignment toolbar buttons
+
+### Patch Changes
+
+-   Updated dependencies
+
 ## 7.15.0
 
 ### Minor Changes

package/dist/cjs/commands/misc.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateWidthToWidest = exports.updateResizeHandleDecorations = exports.triggerUnlessTableHeader = exports.transformSliceToRemoveColumnsWidths = exports.transformSliceToAddTableHeaders = exports.transformSliceRemoveCellBackgroundColor = exports.showInsertRowButton = exports.showInsertColumnButton = exports.setTableRef = exports.setMultipleCellAttrs = exports.setEditorFocus = exports.setCellAttr = exports.selectRows = exports.selectRow = exports.selectColumns = exports.selectColumn = exports.removeResizeHandleDecorations = exports.moveCursorBackward = exports.isInsideFirstCellOfRowOrColumn = exports.hideInsertColumnOrRowButton = exports.getTableSelectionType = exports.getTableElementMoveTypeBySlice = exports.deleteTableIfSelected = exports.deleteTable = exports.countCellsInSlice = exports.convertFirstRowToHeader = exports.autoSizeTable = exports.addResizeHandleDecorations = exports.addBoldInEmptyHeaderCells = void 0;
+exports.updateWidthToWidest = exports.updateResizeHandleDecorations = exports.triggerUnlessTableHeader = exports.transformSliceToRemoveColumnsWidths = exports.transformSliceToAddTableHeaders = exports.transformSliceRemoveCellBackgroundColor = exports.showInsertRowButton = exports.showInsertColumnButton = exports.setTableRef = exports.setTableAlignment = exports.setMultipleCellAttrs = exports.setEditorFocus = exports.setCellAttr = exports.selectRows = exports.selectRow = exports.selectColumns = exports.selectColumn = exports.removeResizeHandleDecorations = exports.moveCursorBackward = exports.isInsideFirstCellOfRowOrColumn = exports.hideInsertColumnOrRowButton = exports.getTableSelectionType = exports.getTableElementMoveTypeBySlice = exports.deleteTableIfSelected = exports.deleteTable = exports.countCellsInSlice = exports.convertFirstRowToHeader = exports.autoSizeTable = exports.addResizeHandleDecorations = exports.addBoldInEmptyHeaderCells = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
@@ -586,4 +586,18 @@ var updateWidthToWidest = exports.updateWidthToWidest = function updateWidthToWi
       }
     };
   });
+};
+var setTableAlignment = exports.setTableAlignment = function setTableAlignment(newAlignment) {
+  return function (_ref2) {
+    var tr = _ref2.tr;
+    var tableObject = (0, _utils2.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/cjs/commands-with-analytics.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapTableInExpandWithAnalytics = exports.toggleTableLockWithAnalytics = exports.toggleTableLayoutWithAnalytics = exports.toggleNumberColumnWithAnalytics = exports.toggleHeaderRowWithAnalytics = exports.toggleHeaderColumnWithAnalytics = exports.splitCellWithAnalytics = exports.sortColumnWithAnalytics = exports.setColorWithAnalytics = exports.mergeCellsWithAnalytics = exports.insertRowWithAnalytics = exports.insertColumnWithAnalytics = exports.emptyMultipleCellsWithAnalytics = exports.distributeColumnsWidthsWithAnalytics = exports.deleteTableWithAnalytics = exports.deleteTableIfSelectedWithAnalytics = exports.deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = exports.deleteRowsWithAnalytics = exports.deleteColumnsWithAnalytics = exports.changeColumnWidthByStepWithAnalytics = exports.addRowAroundSelection = void 0;
+exports.wrapTableInExpandWithAnalytics = exports.toggleTableLockWithAnalytics = exports.toggleTableLayoutWithAnalytics = exports.toggleNumberColumnWithAnalytics = exports.toggleHeaderRowWithAnalytics = exports.toggleHeaderColumnWithAnalytics = exports.splitCellWithAnalytics = exports.sortColumnWithAnalytics = exports.setTableAlignmentWithAnalytics = exports.setColorWithAnalytics = exports.mergeCellsWithAnalytics = exports.insertRowWithAnalytics = exports.insertColumnWithAnalytics = exports.emptyMultipleCellsWithAnalytics = exports.distributeColumnsWidthsWithAnalytics = exports.deleteTableWithAnalytics = exports.deleteTableIfSelectedWithAnalytics = exports.deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut = exports.deleteRowsWithAnalytics = exports.deleteColumnsWithAnalytics = exports.changeColumnWidthByStepWithAnalytics = exports.addRowAroundSelection = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -537,4 +537,27 @@ var toggleTableLockWithAnalytics = exports.toggleTableLockWithAnalytics = functi
     })(editorAnalyticsAPI)((0, _preset.editorCommandToPMCommand)(_displayMode.setTableDisplayMode));
   };
 };
-// #endregion
+var setTableAlignmentWithAnalytics = exports.setTableAlignmentWithAnalytics = function setTableAlignmentWithAnalytics(editorAnalyticsAPI) {
+  return function (newAlignment, previousAlignment, inputMethod) {
+    return (0, _analytics2.withEditorAnalyticsAPI)(function (state) {
+      var _getSelectedTableInfo14 = (0, _utils2.getSelectedTableInfo)(state.selection),
+        table = _getSelectedTableInfo14.table,
+        totalRowCount = _getSelectedTableInfo14.totalRowCount,
+        totalColumnCount = _getSelectedTableInfo14.totalColumnCount;
+      return {
+        action: _analytics.TABLE_ACTION.CHANGED_ALIGNMENT,
+        actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+        actionSubjectId: null,
+        eventType: _analytics.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)((0, _preset.editorCommandToPMCommand)((0, _misc.setTableAlignment)(newAlignment)));
+  };
+};

package/dist/cjs/plugin.js

@@ -120,10 +120,9 @@ var tablesPlugin = function tablesPlugin(_ref) {
       insertTableWithSize: (0, _insert.insertTableWithSize)(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
     },
     nodes: function nodes() {
-      var tableNode = options !== null && options !== void 0 && options.isTableScalingEnabled && (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.preserve-widths-with-lock-button') ? _adfSchema.tableStage0 : _adfSchema.table;
       return [{
         name: 'table',
-        node: tableNode
+        node: _adfSchema.table
       }, {
         name: 'tableHeader',
         node: _adfSchema.tableHeader

package/dist/cjs/toolbar.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = exports.getLockBtnConfig = exports.getDistributeConfig = exports.getClosestSelectionRect = exports.getClosestSelectionOrTableRect = exports.getAlignmentOptionsConfig = void 0;
+exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = exports.getSelectedAlignmentIcon = exports.getLockBtnConfig = exports.getDistributeConfig = exports.getClosestSelectionRect = exports.getClosestSelectionOrTableRect = exports.getAlignmentOptionsConfig = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("@emotion/react");
@@ -37,6 +37,7 @@ var _types = require("./types");
 var _FloatingAlignmentButtons = require("./ui/FloatingAlignmentButtons/FloatingAlignmentButtons");
 var _icons = require("./ui/icons");
 var _utils4 = require("./utils");
+var _alignment = require("./utils/alignment");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /** @jsx jsx */
@@ -329,7 +330,8 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
         var nodeType = state.schema.nodes.table;
         var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
         var alignmentMenu;
-        alignmentMenu = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.table.allow-table-alignment') ? getAlignmentOptionsConfig(pluginState, intl, editorAnalyticsAPI) : [];
+        var isNested = pluginState.tablePos && (0, _utils4.isTableNested)(state, pluginState.tablePos);
+        alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI) : [];
         var cellItems;
         cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled);
         var columnSettingsItems;
@@ -593,8 +595,12 @@ var highlightColumnsHandler = function highlightColumnsHandler(state, dispatch)
   }
   return false;
 };
-var getAlignmentOptionsConfig = exports.getAlignmentOptionsConfig = function getAlignmentOptionsConfig(state, _ref6, editorAnalyticsAPI) {
+var getAlignmentOptionsConfig = exports.getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState, _ref6, editorAnalyticsAPI) {
   var formatMessage = _ref6.formatMessage;
+  var tableObject = (0, _utils3.findTable)(editorState.selection);
+  if (!tableObject) {
+    return [];
+  }
   var alignmentIcons = [{
     id: 'editor.table.alignLeft',
     value: 'align-start',
@@ -614,17 +620,17 @@ var getAlignmentOptionsConfig = exports.getAlignmentOptionsConfig = function get
     var id = alignmentIcon.id,
       value = alignmentIcon.value,
       icon = alignmentIcon.icon;
+    var currentLayout = tableObject.node.attrs.layout;
     return {
       id: id,
       type: 'button',
       icon: icon,
       title: formatMessage(layoutToMessages[value]),
-      selected: false,
-      // TODO - get the correct selected state based on the selected layout attr
-      onClick: makeAlignment()
+      selected: (0, _alignment.normaliseAlignment)(currentLayout) === value,
+      onClick: (0, _commandsWithAnalytics.setTableAlignmentWithAnalytics)(editorAnalyticsAPI)(value, currentLayout, _analytics.INPUT_METHOD.FLOATING_TB)
     };
   });
-  var alignmentOptions = {
+  var alignmentItemOptions = {
     render: function render(props) {
       return (0, _react.jsx)(_FloatingAlignmentButtons.FloatingAlignmentButtons, (0, _extends2.default)({
         alignmentButtons: alignmentButtons
@@ -633,24 +639,20 @@ var getAlignmentOptionsConfig = exports.getAlignmentOptionsConfig = function get
     width: 60,
     height: 32
   };
+  var selectedAlignmentIcon = getSelectedAlignmentIcon(alignmentIcons, tableObject.node);
   var alignmentToolbarItem = [{
     id: 'table-layout',
     testId: 'table-layout-dropdown',
     type: 'dropdown',
-    options: alignmentOptions,
+    options: alignmentItemOptions,
     title: formatMessage(_messages.tableMessages.tableAlignmentOptions),
-    // TODO - get the correct title based on the selected layout attr
-    icon: _alignImageCenter.default // TODO - get the correct icon based on the selected layout attr
+    icon: selectedAlignmentIcon === null || selectedAlignmentIcon === void 0 ? void 0 : selectedAlignmentIcon.icon
   }];
   return alignmentToolbarItem;
 };
-var makeAlignment = function makeAlignment() {
-  return function (state, dispatch) {
-    var tableObject = (0, _utils3.findTable)(state.selection);
-    if (!tableObject || !dispatch) {
-      return false;
-    }
-    // TODO Add alignment logic here
-    return true;
-  };
+var getSelectedAlignmentIcon = exports.getSelectedAlignmentIcon = function getSelectedAlignmentIcon(alignmentIcons, selectedNode) {
+  var selectedAlignment = selectedNode.attrs.layout;
+  return alignmentIcons.find(function (icon) {
+    return icon.value === (0, _alignment.normaliseAlignment)(selectedAlignment);
+  });
 };

package/dist/cjs/utils/alignment.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.normaliseAlignment = void 0;
+/**
+ * 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')
+ */
+var normaliseAlignment = exports.normaliseAlignment = function normaliseAlignment(layout) {
+  return layout === 'center' || layout === 'align-start' ? layout : 'center';
+};

package/dist/es2019/commands/misc.js

@@ -549,4 +549,18 @@ export const updateWidthToWidest = widthToWidest => createCommand(state => {
       }
     }
   };
-});
+});
+export const setTableAlignment = newAlignment => ({
+  tr
+}) => {
+  const tableObject = findTable(tr.selection);
+  if (!tableObject) {
+    return null;
+  }
+  const nextTableAttrs = {
+    ...tableObject.node.attrs,
+    layout: newAlignment
+  };
+  tr.setNodeMarkup(tableObject.pos, undefined, nextTableAttrs).setMeta('scrollIntoView', false);
+  return tr;
+};

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

@@ -9,7 +9,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';
@@ -490,4 +490,24 @@ export const toggleTableLockWithAnalytics = editorAnalyticsAPI => (displayMode,
     eventType: EVENT_TYPE.TRACK
   };
 })(editorAnalyticsAPI)(editorCommandToPMCommand(setTableDisplayMode));
-// #endregion
+export const setTableAlignmentWithAnalytics = editorAnalyticsAPI => (newAlignment, previousAlignment, inputMethod) => withEditorAnalyticsAPI(state => {
+  const {
+    table,
+    totalRowCount,
+    totalColumnCount
+  } = getSelectedTableInfo(state.selection);
+  return {
+    action: TABLE_ACTION.CHANGED_ALIGNMENT,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    actionSubjectId: null,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      tableWidth: table === null || table === void 0 ? void 0 : table.node.attrs.width,
+      newAlignment,
+      previousAlignment: previousAlignment === 'center' || previousAlignment === 'align-start' ? previousAlignment : null,
+      totalRowCount,
+      totalColumnCount,
+      inputMethod
+    }
+  };
+})(editorAnalyticsAPI)(editorCommandToPMCommand(setTableAlignment(newAlignment)));

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';
@@ -110,10 +110,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

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) => {
@@ -315,7 +316,8 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
     const nodeType = state.schema.nodes.table;
     const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
     let alignmentMenu;
-    alignmentMenu = getBooleanFF('platform.editor.table.allow-table-alignment') ? getAlignmentOptionsConfig(pluginState, intl, editorAnalyticsAPI) : [];
+    const isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
+    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;
@@ -560,9 +562,13 @@ const highlightColumnsHandler = (state, dispatch) => {
   }
   return false;
 };
-export const getAlignmentOptionsConfig = (state, {
+export const getAlignmentOptionsConfig = (editorState, {
   formatMessage
 }, editorAnalyticsAPI) => {
+  const tableObject = findTable(editorState.selection);
+  if (!tableObject) {
+    return [];
+  }
   const alignmentIcons = [{
     id: 'editor.table.alignLeft',
     value: 'align-start',
@@ -584,17 +590,17 @@ export const getAlignmentOptionsConfig = (state, {
       value,
       icon
     } = alignmentIcon;
+    const currentLayout = tableObject.node.attrs.layout;
     return {
       id: id,
       type: 'button',
       icon: icon,
       title: formatMessage(layoutToMessages[value]),
-      selected: false,
-      // TODO - get the correct selected state based on the selected layout attr
-      onClick: makeAlignment()
+      selected: normaliseAlignment(currentLayout) === value,
+      onClick: setTableAlignmentWithAnalytics(editorAnalyticsAPI)(value, currentLayout, INPUT_METHOD.FLOATING_TB)
     };
   });
-  const alignmentOptions = {
+  const alignmentItemOptions = {
     render: props => {
       return jsx(FloatingAlignmentButtons, _extends({
         alignmentButtons: alignmentButtons
@@ -603,24 +609,18 @@ export const getAlignmentOptionsConfig = (state, {
     width: 60,
     height: 32
   };
+  const selectedAlignmentIcon = getSelectedAlignmentIcon(alignmentIcons, tableObject.node);
   const alignmentToolbarItem = [{
     id: 'table-layout',
     testId: 'table-layout-dropdown',
     type: 'dropdown',
-    options: alignmentOptions,
+    options: alignmentItemOptions,
     title: formatMessage(messages.tableAlignmentOptions),
-    // TODO - get the correct title based on the selected layout attr
-    icon: EditorAlignImageCenter // TODO - get the correct icon based on the selected layout attr
+    icon: selectedAlignmentIcon === null || selectedAlignmentIcon === void 0 ? void 0 : selectedAlignmentIcon.icon
   }];
   return alignmentToolbarItem;
 };
-const makeAlignment = () => {
-  return (state, dispatch) => {
-    const tableObject = findTable(state.selection);
-    if (!tableObject || !dispatch) {
-      return false;
-    }
-    // TODO Add alignment logic here
-    return true;
-  };
+export const getSelectedAlignmentIcon = (alignmentIcons, selectedNode) => {
+  const selectedAlignment = selectedNode.attrs.layout;
+  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/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/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';
@@ -113,10 +113,9 @@ var tablesPlugin = function tablesPlugin(_ref) {
       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 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
     },
     nodes: function nodes() {
-      var 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

package/dist/esm/toolbar.js

@@ -20,7 +20,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';
@@ -30,6 +30,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 var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
   var formatMessage = _ref.formatMessage;
   var optionItem = getBooleanFF('platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33') ? 'item-checkbox' : 'item';
@@ -318,7 +319,8 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
         var nodeType = state.schema.nodes.table;
         var menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI);
         var alignmentMenu;
-        alignmentMenu = getBooleanFF('platform.editor.table.allow-table-alignment') ? getAlignmentOptionsConfig(pluginState, intl, editorAnalyticsAPI) : [];
+        var isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
+        alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI) : [];
         var cellItems;
         cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled);
         var columnSettingsItems;
@@ -582,8 +584,12 @@ var highlightColumnsHandler = function highlightColumnsHandler(state, dispatch)
   }
   return false;
 };
-export var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(state, _ref6, editorAnalyticsAPI) {
+export var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState, _ref6, editorAnalyticsAPI) {
   var formatMessage = _ref6.formatMessage;
+  var tableObject = findTable(editorState.selection);
+  if (!tableObject) {
+    return [];
+  }
   var alignmentIcons = [{
     id: 'editor.table.alignLeft',
     value: 'align-start',
@@ -603,17 +609,17 @@ export var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(state,
     var id = alignmentIcon.id,
       value = alignmentIcon.value,
       icon = alignmentIcon.icon;
+    var currentLayout = tableObject.node.attrs.layout;
     return {
       id: id,
       type: 'button',
       icon: icon,
       title: formatMessage(layoutToMessages[value]),
-      selected: false,
-      // TODO - get the correct selected state based on the selected layout attr
-      onClick: makeAlignment()
+      selected: normaliseAlignment(currentLayout) === value,
+      onClick: setTableAlignmentWithAnalytics(editorAnalyticsAPI)(value, currentLayout, INPUT_METHOD.FLOATING_TB)
     };
   });
-  var alignmentOptions = {
+  var alignmentItemOptions = {
     render: function render(props) {
       return jsx(FloatingAlignmentButtons, _extends({
         alignmentButtons: alignmentButtons
@@ -622,24 +628,20 @@ export var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(state,
     width: 60,
     height: 32
   };
+  var selectedAlignmentIcon = getSelectedAlignmentIcon(alignmentIcons, tableObject.node);
   var alignmentToolbarItem = [{
     id: 'table-layout',
     testId: 'table-layout-dropdown',
     type: 'dropdown',
-    options: alignmentOptions,
+    options: alignmentItemOptions,
     title: formatMessage(messages.tableAlignmentOptions),
-    // TODO - get the correct title based on the selected layout attr
-    icon: EditorAlignImageCenter // TODO - get the correct icon based on the selected layout attr
+    icon: selectedAlignmentIcon === null || selectedAlignmentIcon === void 0 ? void 0 : selectedAlignmentIcon.icon
   }];
   return alignmentToolbarItem;
 };
-var makeAlignment = function makeAlignment() {
-  return function (state, dispatch) {
-    var tableObject = findTable(state.selection);
-    if (!tableObject || !dispatch) {
-      return false;
-    }
-    // TODO Add alignment logic here
-    return true;
-  };
+export var getSelectedAlignmentIcon = function getSelectedAlignmentIcon(alignmentIcons, selectedNode) {
+  var selectedAlignment = selectedNode.attrs.layout;
+  return alignmentIcons.find(function (icon) {
+    return icon.value === normaliseAlignment(selectedAlignment);
+  });
 };

package/dist/esm/utils/alignment.js

@@ -0,0 +1,7 @@
+/**
+ * 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';
+};

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

@@ -1,4 +1,5 @@
-import type { Command } from '@atlaskit/editor-common/types';
+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';
@@ -35,3 +36,4 @@ export declare const autoSizeTable: (view: EditorView, node: PMNode, table: HTML
 }) => boolean;
 export declare const addBoldInEmptyHeaderCells: (tableCellHeader: ContentNodeWithPos) => Command;
 export declare const updateWidthToWidest: (widthToWidest: WidthToWidest) => Command;
+export declare const setTableAlignment: (newAlignment: TableLayout) => EditorCommand;

package/dist/types/commands-with-analytics.d.ts

@@ -1,4 +1,5 @@
 import type { IntlShape } from 'react-intl-next/src/types';
+import type { TableLayout } from '@atlaskit/adf-schema';
 import type { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD, TABLE_DISPLAY_MODE } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
@@ -6,7 +7,7 @@ import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/t
 import type { EditorView } from '@atlaskit/editor-prosemirror/dist/types/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 import type { ResizeStateWithAnalytics } from './pm-plugins/table-resizing/utils';
-import type { InsertRowMethods, InsertRowOptions, RowInsertPosition } from './types';
+import type { AlignmentOptions, InsertRowMethods, InsertRowOptions, RowInsertPosition } from './types';
 export declare const emptyMultipleCellsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.KEYBOARD | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition?: number) => Command;
 export declare const mergeCellsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | null | undefined) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;
 export declare const splitCellWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;
@@ -28,3 +29,4 @@ export declare const sortColumnWithAnalytics: (editorAnalyticsAPI: EditorAnalyti
 export declare const distributeColumnsWidthsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, { resizeState, table, attributes }: ResizeStateWithAnalytics) => Command;
 export declare const wrapTableInExpandWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Command;
 export declare const toggleTableLockWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (displayMode: TABLE_DISPLAY_MODE | null, inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;
+export declare const setTableAlignmentWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (newAlignment: AlignmentOptions, previousAlignment: TableLayout, inputMethod: INPUT_METHOD.FLOATING_TB) => Command;

package/dist/types/toolbar.d.ts

@@ -1,10 +1,12 @@
+/// <reference types="react" />
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, FloatingToolbarDropdown, FloatingToolbarHandler, FloatingToolbarItem, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { Rect } from '@atlaskit/editor-tables/table-map';
 import type { TablePluginOptions } from './plugin';
-import type { PluginConfig, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState } from './types';
+import type { AlignmentOptions, PluginConfig, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState } from './types';
 export declare const getToolbarMenuConfig: (config: ToolbarMenuConfig, state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarItem<Command>;
 export declare const getToolbarCellOptionsConfig: (editorState: EditorState, editorView: EditorView | undefined | null, initialSelectionRect: Rect, { formatMessage }: ToolbarMenuContext, getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => FloatingToolbarDropdown<Command>;
 export declare const getClosestSelectionRect: (state: EditorState) => Rect | undefined;
@@ -12,4 +14,11 @@ export declare const getClosestSelectionOrTableRect: (state: EditorState) => Rec
 export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null, options?: TablePluginOptions) => (config: PluginConfig) => FloatingToolbarHandler;
 export declare const getLockBtnConfig: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Command;
 export declare const getDistributeConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => Command;
-export declare const getAlignmentOptionsConfig: (state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Array<FloatingToolbarDropdown<Command>>;
+type AlignmentIcon = {
+    id?: string;
+    value: AlignmentOptions;
+    icon: React.ComponentClass<any>;
+};
+export declare const getAlignmentOptionsConfig: (editorState: EditorState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Array<FloatingToolbarDropdown<Command>>;
+export declare const getSelectedAlignmentIcon: (alignmentIcons: AlignmentIcon[], selectedNode: PMNode) => AlignmentIcon | undefined;
+export {};

package/dist/types/types.d.ts

@@ -39,6 +39,7 @@ export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEn
     isWholeTableInDanger?: boolean;
 };
 export type TableSharedState = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled'>;
+export type AlignmentOptions = 'center' | 'align-start';
 export type InsertRowMethods = INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.SHORTCUT | INPUT_METHOD.KEYBOARD | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU;
 export interface PluginConfig {
     advanced?: boolean;

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

@@ -0,0 +1,7 @@
+import type { TableLayout } from '@atlaskit/adf-schema';
+import type { AlignmentOptions } from '../types';
+/**
+ * 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 declare const normaliseAlignment: (layout: TableLayout) => AlignmentOptions;

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

@@ -1,4 +1,5 @@
-import type { Command } from '@atlaskit/editor-common/types';
+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';
@@ -35,3 +36,4 @@ export declare const autoSizeTable: (view: EditorView, node: PMNode, table: HTML
 }) => boolean;
 export declare const addBoldInEmptyHeaderCells: (tableCellHeader: ContentNodeWithPos) => Command;
 export declare const updateWidthToWidest: (widthToWidest: WidthToWidest) => Command;
+export declare const setTableAlignment: (newAlignment: TableLayout) => EditorCommand;

package/dist/types-ts4.5/commands-with-analytics.d.ts

@@ -1,4 +1,5 @@
 import type { IntlShape } from 'react-intl-next/src/types';
+import type { TableLayout } from '@atlaskit/adf-schema';
 import type { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD, TABLE_DISPLAY_MODE } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
@@ -6,7 +7,7 @@ import type { Command, GetEditorContainerWidth } from '@atlaskit/editor-common/t
 import type { EditorView } from '@atlaskit/editor-prosemirror/dist/types/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 import type { ResizeStateWithAnalytics } from './pm-plugins/table-resizing/utils';
-import type { InsertRowMethods, InsertRowOptions, RowInsertPosition } from './types';
+import type { AlignmentOptions, InsertRowMethods, InsertRowOptions, RowInsertPosition } from './types';
 export declare const emptyMultipleCellsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.KEYBOARD | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition?: number) => Command;
 export declare const mergeCellsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | null | undefined) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;
 export declare const splitCellWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;
@@ -28,3 +29,4 @@ export declare const sortColumnWithAnalytics: (editorAnalyticsAPI: EditorAnalyti
 export declare const distributeColumnsWidthsWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU, { resizeState, table, attributes }: ResizeStateWithAnalytics) => Command;
 export declare const wrapTableInExpandWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Command;
 export declare const toggleTableLockWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (displayMode: TABLE_DISPLAY_MODE | null, inputMethod: INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.FLOATING_TB) => Command;
+export declare const setTableAlignmentWithAnalytics: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => (newAlignment: AlignmentOptions, previousAlignment: TableLayout, inputMethod: INPUT_METHOD.FLOATING_TB) => Command;

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

@@ -1,10 +1,12 @@
+/// <reference types="react" />
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command, FloatingToolbarDropdown, FloatingToolbarHandler, FloatingToolbarItem, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { Rect } from '@atlaskit/editor-tables/table-map';
 import type { TablePluginOptions } from './plugin';
-import type { PluginConfig, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState } from './types';
+import type { AlignmentOptions, PluginConfig, ToolbarMenuConfig, ToolbarMenuContext, ToolbarMenuState } from './types';
 export declare const getToolbarMenuConfig: (config: ToolbarMenuConfig, state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => FloatingToolbarItem<Command>;
 export declare const getToolbarCellOptionsConfig: (editorState: EditorState, editorView: EditorView | undefined | null, initialSelectionRect: Rect, { formatMessage }: ToolbarMenuContext, getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => FloatingToolbarDropdown<Command>;
 export declare const getClosestSelectionRect: (state: EditorState) => Rect | undefined;
@@ -12,4 +14,11 @@ export declare const getClosestSelectionOrTableRect: (state: EditorState) => Rec
 export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null, options?: TablePluginOptions) => (config: PluginConfig) => FloatingToolbarHandler;
 export declare const getLockBtnConfig: (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Command;
 export declare const getDistributeConfig: (getEditorContainerWidth: GetEditorContainerWidth, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean) => Command;
-export declare const getAlignmentOptionsConfig: (state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Array<FloatingToolbarDropdown<Command>>;
+type AlignmentIcon = {
+    id?: string;
+    value: AlignmentOptions;
+    icon: React.ComponentClass<any>;
+};
+export declare const getAlignmentOptionsConfig: (editorState: EditorState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) => Array<FloatingToolbarDropdown<Command>>;
+export declare const getSelectedAlignmentIcon: (alignmentIcons: AlignmentIcon[], selectedNode: PMNode) => AlignmentIcon | undefined;
+export {};

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

@@ -39,6 +39,7 @@ export type TableSharedStateInternal = Pick<TablePluginState, 'isFullWidthModeEn
     isWholeTableInDanger?: boolean;
 };
 export type TableSharedState = Pick<TablePluginState, 'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled'>;
+export type AlignmentOptions = 'center' | 'align-start';
 export type InsertRowMethods = INPUT_METHOD.CONTEXT_MENU | INPUT_METHOD.BUTTON | INPUT_METHOD.SHORTCUT | INPUT_METHOD.KEYBOARD | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.TABLE_CONTEXT_MENU;
 export interface PluginConfig {
     advanced?: boolean;

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

@@ -0,0 +1,7 @@
+import type { TableLayout } from '@atlaskit/adf-schema';
+import type { AlignmentOptions } from '../types';
+/**
+ * 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 declare const normaliseAlignment: (layout: TableLayout) => AlignmentOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.15.0",
+  "version": "7.16.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,10 +28,10 @@
     "runReact18": false
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^36.3.0",
+    "@atlaskit/adf-schema": "^36.8.0",
     "@atlaskit/button": "^17.14.0",
     "@atlaskit/custom-steps": "^0.2.0",
-    "@atlaskit/editor-common": "^80.1.0",
+    "@atlaskit/editor-common": "^80.4.0",
     "@atlaskit/editor-palette": "1.6.0",
     "@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
     "@atlaskit/editor-plugin-analytics": "^1.2.0",
@@ -44,12 +44,12 @@
     "@atlaskit/editor-shared-styles": "^2.11.0",
     "@atlaskit/editor-tables": "^2.7.0",
     "@atlaskit/icon": "^22.2.0",
-    "@atlaskit/menu": "^2.2.0",
+    "@atlaskit/menu": "^2.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/pragmatic-drag-and-drop": "^1.1.0",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.3.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
-    "@atlaskit/primitives": "^6.1.0",
+    "@atlaskit/primitives": "^6.2.0",
     "@atlaskit/theme": "^12.8.0",
     "@atlaskit/toggle": "^13.1.0",
     "@atlaskit/tokens": "^1.48.0",
@@ -139,9 +139,6 @@
     },
     "platform.editor.table.live-pages-sorting_4malx": {
       "type": "boolean"
-    },
-    "platform.editor.table.allow-table-alignment": {
-      "type": "boolean"
     }
   }
 }

package/src/commands/misc.ts

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

package/src/commands-with-analytics.ts

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

package/src/plugin.tsx

@@ -1,12 +1,6 @@
 import React from 'react';
 
-import {
-  table,
-  tableCell,
-  tableHeader,
-  tableRow,
-  tableStage0,
-} from '@atlaskit/adf-schema';
+import { table, tableCell, tableHeader, tableRow } from '@atlaskit/adf-schema';
 import type { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
 import {
   ACTION,
@@ -234,14 +228,8 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
     },
 
     nodes() {
-      const tableNode =
-        options?.isTableScalingEnabled &&
-        getBooleanFF('platform.editor.table.preserve-widths-with-lock-button')
-          ? tableStage0
-          : table;
-
       return [
-        { name: 'table', node: tableNode },
+        { name: 'table', node: table },
         { name: 'tableHeader', node: tableHeader },
         { name: 'tableRow', node: tableRow },
         { name: 'tableCell', node: tableCell },

package/src/toolbar.tsx

@@ -75,6 +75,7 @@ import {
   insertRowWithAnalytics,
   mergeCellsWithAnalytics,
   setColorWithAnalytics,
+  setTableAlignmentWithAnalytics,
   sortColumnWithAnalytics,
   splitCellWithAnalytics,
   toggleHeaderColumnWithAnalytics,
@@ -90,6 +91,7 @@ import { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizin
 import { pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { canMergeCells } from './transforms';
 import type {
+  AlignmentOptions,
   PluginConfig,
   ToolbarMenuConfig,
   ToolbarMenuContext,
@@ -104,6 +106,7 @@ import {
   getSelectedRowIndexes,
   isTableNested,
 } from './utils';
+import { normaliseAlignment } from './utils/alignment';
 
 export const getToolbarMenuConfig = (
   config: ToolbarMenuConfig,
@@ -479,12 +482,13 @@ export const getToolbarConfig =
       );
 
       let alignmentMenu: Array<FloatingToolbarItem<Command>>;
+      const isNested =
+        pluginState.tablePos && isTableNested(state, pluginState.tablePos);
 
-      alignmentMenu = getBooleanFF(
-        'platform.editor.table.allow-table-alignment',
-      )
-        ? getAlignmentOptionsConfig(pluginState, intl, editorAnalyticsAPI)
-        : [];
+      alignmentMenu =
+        options?.isTableAlignmentEnabled && !isNested
+          ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI)
+          : [];
 
       let cellItems: Array<FloatingToolbarItem<Command>>;
       cellItems = pluginState.isDragAndDropEnabled
@@ -886,16 +890,22 @@ const highlightColumnsHandler = (
   return false;
 };
 
+type AlignmentIcon = {
+  id?: string;
+  value: AlignmentOptions;
+  icon: React.ComponentClass<any>;
+};
+
 export const getAlignmentOptionsConfig = (
-  state: ToolbarMenuState,
+  editorState: EditorState,
   { formatMessage }: ToolbarMenuContext,
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
 ): Array<FloatingToolbarDropdown<Command>> => {
-  type AlignmentIcon = {
-    id?: string;
-    value: string;
-    icon: React.ComponentClass<any>;
-  };
+  const tableObject = findTable(editorState.selection);
+
+  if (!tableObject) {
+    return [];
+  }
 
   const alignmentIcons: AlignmentIcon[] = [
     {
@@ -911,7 +921,7 @@ export const getAlignmentOptionsConfig = (
   ];
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const layoutToMessages: Record<string, any> = {
+  const layoutToMessages: Record<AlignmentOptions, any> = {
     center: messages.alignTableCenter,
     'align-start': messages.alignTableLeft,
   };
@@ -919,18 +929,24 @@ export const getAlignmentOptionsConfig = (
   const alignmentButtons = alignmentIcons.map<FloatingToolbarItem<Command>>(
     (alignmentIcon) => {
       const { id, value, icon } = alignmentIcon;
+      const currentLayout = tableObject.node.attrs.layout;
+
       return {
         id: id,
         type: 'button',
         icon: icon,
         title: formatMessage(layoutToMessages[value]),
-        selected: false, // TODO - get the correct selected state based on the selected layout attr
-        onClick: makeAlignment(),
+        selected: normaliseAlignment(currentLayout) === value,
+        onClick: setTableAlignmentWithAnalytics(editorAnalyticsAPI)(
+          value,
+          currentLayout,
+          INPUT_METHOD.FLOATING_TB
+        ),
       };
     },
   );
 
-  const alignmentOptions: DropdownOptions<Command> = {
+  const alignmentItemOptions: DropdownOptions<Command> = {
     render: (props) => {
       return (
         <FloatingAlignmentButtons
@@ -943,28 +959,32 @@ export const getAlignmentOptionsConfig = (
     height: 32,
   };
 
+  const selectedAlignmentIcon = getSelectedAlignmentIcon(
+    alignmentIcons,
+    tableObject.node,
+  );
+
   const alignmentToolbarItem: Array<FloatingToolbarDropdown<Command>> = [
     {
       id: 'table-layout',
       testId: 'table-layout-dropdown',
       type: 'dropdown',
-      options: alignmentOptions,
-      title: formatMessage(messages.tableAlignmentOptions), // TODO - get the correct title based on the selected layout attr
-      icon: EditorAlignImageCenter, // TODO - get the correct icon based on the selected layout attr
+      options: alignmentItemOptions,
+      title: formatMessage(messages.tableAlignmentOptions),
+      icon: selectedAlignmentIcon?.icon,
     },
   ];
 
   return alignmentToolbarItem;
 };
 
-const makeAlignment = (): Command => {
-  return (state, dispatch) => {
-    const tableObject = findTable(state.selection);
+export const getSelectedAlignmentIcon = (
+  alignmentIcons: AlignmentIcon[],
+  selectedNode: PMNode,
+) => {
+  const selectedAlignment = selectedNode.attrs.layout;
 
-    if (!tableObject || !dispatch) {
-      return false;
-    }
-    // TODO Add alignment logic here
-    return true;
-  };
+  return alignmentIcons.find(
+    (icon) => icon.value === normaliseAlignment(selectedAlignment),
+  );
 };

package/src/types.ts

@@ -69,6 +69,8 @@ export type TableSharedState = Pick<
   'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled'
 >;
 
+export type AlignmentOptions = 'center' | 'align-start';
+
 export type InsertRowMethods =
   | INPUT_METHOD.CONTEXT_MENU
   | INPUT_METHOD.BUTTON

package/src/utils/alignment.ts

@@ -0,0 +1,10 @@
+import type { TableLayout } from '@atlaskit/adf-schema';
+
+import type { AlignmentOptions } from '../types';
+
+/**
+ * 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';