@atlaskit/editor-plugin-table 7.15.0 → 7.16.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 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/toolbar.js

@@ -5,7 +5,8 @@ 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("@emotion/react");
@@ -39,8 +40,8 @@ var _icons = require("./ui/icons");
 var _utils4 = require("./utils");
 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 */
-
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var getToolbarMenuConfig = exports.getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
   var formatMessage = _ref.formatMessage;
   var optionItem = (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33') ? 'item-checkbox' : 'item';
@@ -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) : [];
         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) {
   var formatMessage = _ref6.formatMessage;
+  var tableObject = (0, _utils3.findTable)(editorState.selection);
+  if (!tableObject) {
+    return [];
+  }
   var alignmentIcons = [{
     id: 'editor.table.alignLeft',
     value: 'align-start',
@@ -619,12 +625,11 @@ var getAlignmentOptionsConfig = exports.getAlignmentOptionsConfig = function get
       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: tableObject.node.attrs.layout === value,
+      onClick: alignTable(value)
     };
   });
-  var alignmentOptions = {
+  var alignmentItemOptions = {
     render: function render(props) {
       return (0, _react.jsx)(_FloatingAlignmentButtons.FloatingAlignmentButtons, (0, _extends2.default)({
         alignmentButtons: alignmentButtons
@@ -633,24 +638,38 @@ 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() {
+var alignTable = function alignTable(nextLayoutValue) {
   return function (state, dispatch) {
     var tableObject = (0, _utils3.findTable)(state.selection);
     if (!tableObject || !dispatch) {
       return false;
     }
-    // TODO Add alignment logic here
+    var nextTableAttrs = _objectSpread(_objectSpread({}, tableObject.node.attrs), {}, {
+      layout: nextLayoutValue
+    });
+    var tr = state.tr.setNodeMarkup(tableObject.pos, undefined, nextTableAttrs);
+    tr.setMeta('scrollIntoView', false);
+
+    // TODO - insert analytics here for layout selection
+
+    dispatch(tr);
     return true;
   };
+};
+var getSelectedAlignmentIcon = exports.getSelectedAlignmentIcon = function getSelectedAlignmentIcon(alignmentIcons, selectedNode) {
+  var selectedAlignment = selectedNode.attrs.layout;
+  return alignmentIcons.find(function (icon) {
+    return icon.value === (selectedNode.attrs.layout === 'default' ? 'center' : selectedAlignment);
+  });
 };

package/dist/es2019/toolbar.js

@@ -315,7 +315,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) : [];
     let cellItems;
     cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled);
     let columnSettingsItems;
@@ -560,9 +561,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',
@@ -589,12 +594,11 @@ export const getAlignmentOptionsConfig = (state, {
       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: tableObject.node.attrs.layout === value,
+      onClick: alignTable(value)
     };
   });
-  const alignmentOptions = {
+  const alignmentItemOptions = {
     render: props => {
       return jsx(FloatingAlignmentButtons, _extends({
         alignmentButtons: alignmentButtons
@@ -603,24 +607,37 @@ 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 = () => {
+const alignTable = nextLayoutValue => {
   return (state, dispatch) => {
     const tableObject = findTable(state.selection);
     if (!tableObject || !dispatch) {
       return false;
     }
-    // TODO Add alignment logic here
+    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));
 };

package/dist/esm/toolbar.js

@@ -1,5 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
@@ -318,7 +321,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) : [];
         var cellItems;
         cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled);
         var columnSettingsItems;
@@ -582,8 +586,12 @@ var highlightColumnsHandler = function highlightColumnsHandler(state, dispatch)
   }
   return false;
 };
-export var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(state, _ref6, editorAnalyticsAPI) {
+export var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(editorState, _ref6) {
   var formatMessage = _ref6.formatMessage;
+  var tableObject = findTable(editorState.selection);
+  if (!tableObject) {
+    return [];
+  }
   var alignmentIcons = [{
     id: 'editor.table.alignLeft',
     value: 'align-start',
@@ -608,12 +616,11 @@ export var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(state,
       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: tableObject.node.attrs.layout === value,
+      onClick: alignTable(value)
     };
   });
-  var alignmentOptions = {
+  var alignmentItemOptions = {
     render: function render(props) {
       return jsx(FloatingAlignmentButtons, _extends({
         alignmentButtons: alignmentButtons
@@ -622,24 +629,38 @@ 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() {
+var alignTable = function alignTable(nextLayoutValue) {
   return function (state, dispatch) {
     var tableObject = findTable(state.selection);
     if (!tableObject || !dispatch) {
       return false;
     }
-    // TODO Add alignment logic here
+    var nextTableAttrs = _objectSpread(_objectSpread({}, tableObject.node.attrs), {}, {
+      layout: nextLayoutValue
+    });
+    var tr = state.tr.setNodeMarkup(tableObject.pos, undefined, nextTableAttrs);
+    tr.setMeta('scrollIntoView', false);
+
+    // TODO - insert analytics here for layout selection
+
+    dispatch(tr);
     return true;
   };
+};
+export var getSelectedAlignmentIcon = function getSelectedAlignmentIcon(alignmentIcons, selectedNode) {
+  var selectedAlignment = selectedNode.attrs.layout;
+  return alignmentIcons.find(function (icon) {
+    return icon.value === (selectedNode.attrs.layout === 'default' ? 'center' : selectedAlignment);
+  });
 };

package/dist/types/toolbar.d.ts

@@ -1,5 +1,8 @@
+/// <reference types="react" />
+import type { TableLayout } from '@atlaskit/adf-schema';
 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';
@@ -12,4 +15,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: TableLayout;
+    icon: React.ComponentClass<any>;
+};
+export declare const getAlignmentOptionsConfig: (editorState: EditorState, { formatMessage }: ToolbarMenuContext) => Array<FloatingToolbarDropdown<Command>>;
+export declare const getSelectedAlignmentIcon: (alignmentIcons: AlignmentIcon[], selectedNode: PMNode) => AlignmentIcon | undefined;
+export {};

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

@@ -1,5 +1,8 @@
+/// <reference types="react" />
+import type { TableLayout } from '@atlaskit/adf-schema';
 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';
@@ -12,4 +15,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: TableLayout;
+    icon: React.ComponentClass<any>;
+};
+export declare const getAlignmentOptionsConfig: (editorState: EditorState, { formatMessage }: ToolbarMenuContext) => Array<FloatingToolbarDropdown<Command>>;
+export declare const getSelectedAlignmentIcon: (alignmentIcons: AlignmentIcon[], selectedNode: PMNode) => AlignmentIcon | undefined;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.15.0",
+  "version": "7.16.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
     "@atlaskit/adf-schema": "^36.3.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/toolbar.tsx

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 
+import type { TableLayout } from '@atlaskit/adf-schema';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -479,12 +480,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)
+          : [];
 
       let cellItems: Array<FloatingToolbarItem<Command>>;
       cellItems = pluginState.isDragAndDropEnabled
@@ -886,16 +888,21 @@ const highlightColumnsHandler = (
   return false;
 };
 
+type AlignmentIcon = {
+  id?: string;
+  value: TableLayout;
+  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[] = [
     {
@@ -924,13 +931,13 @@ export const getAlignmentOptionsConfig = (
         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: tableObject.node.attrs.layout === value,
+        onClick: alignTable(value),
       };
     },
   );
 
-  const alignmentOptions: DropdownOptions<Command> = {
+  const alignmentItemOptions: DropdownOptions<Command> = {
     render: (props) => {
       return (
         <FloatingAlignmentButtons
@@ -943,28 +950,62 @@ 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 => {
+const alignTable = (nextLayoutValue: TableLayout): Command => {
   return (state, dispatch) => {
     const tableObject = findTable(state.selection);
 
     if (!tableObject || !dispatch) {
       return false;
     }
-    // TODO Add alignment logic here
+
+    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: AlignmentIcon[],
+  selectedNode: PMNode,
+) => {
+  const selectedAlignment = selectedNode.attrs.layout;
+
+  return alignmentIcons.find(
+    (icon) =>
+      icon.value ===
+      (selectedNode.attrs.layout === 'default' ? 'center' : selectedAlignment),
+  );
+};