@atlaskit/editor-plugin-table 7.13.4 → 7.14.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 7.14.0
+
+### Minor Changes
+
+-   [#99771](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99771)
+    [`3cd9b2d8ae80`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3cd9b2d8ae80) -
+    [ux] ED-22923 Tables - Added alignment toolbat button
+
+### Patch Changes
+
+-   Updated dependencies
+
 ## 7.13.4
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -18,6 +18,9 @@
         "../src/**/test.*"
     ],
     "references": [
+        {
+            "path": "../../../design-system/button/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../custom-steps/afm-cc/tsconfig.json"
         },

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 = void 0;
+exports.getToolbarMenuConfig = exports.getToolbarConfig = exports.getToolbarCellOptionsConfig = 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");
 var _customSteps = require("@atlaskit/custom-steps");
@@ -19,6 +20,8 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils3 = require("@atlaskit/editor-tables/utils");
+var _alignImageCenter = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-image-center"));
+var _alignImageLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-image-left"));
 var _layoutThreeEqual = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/layout-three-equal"));
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
 var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferences"));
@@ -31,6 +34,7 @@ var _resizeState = require("./pm-plugins/table-resizing/utils/resize-state");
 var _tableWidth = require("./pm-plugins/table-width");
 var _transforms = require("./transforms");
 var _types = require("./types");
+var _FloatingAlignmentButtons = require("./ui/FloatingAlignmentButtons/FloatingAlignmentButtons");
 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); }
@@ -324,6 +328,8 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
       if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
         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 cellItems;
         cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled);
         var columnSettingsItems;
@@ -380,7 +386,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
           },
           zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex + 1,
           // Place the context menu slightly above the others
-          items: [menu, separator(menu.hidden)].concat((0, _toConsumableArray2.default)(cellItems), (0, _toConsumableArray2.default)(columnSettingsItems), colorPicker, [{
+          items: [menu, separator(menu.hidden)].concat((0, _toConsumableArray2.default)(alignmentMenu), [separator(alignmentMenu.length === 0)], (0, _toConsumableArray2.default)(cellItems), (0, _toConsumableArray2.default)(columnSettingsItems), colorPicker, [{
             type: 'extensions-placeholder',
             separator: 'end'
           }, {
@@ -586,4 +592,65 @@ var highlightColumnsHandler = function highlightColumnsHandler(state, dispatch)
     return true;
   }
   return false;
+};
+var getAlignmentOptionsConfig = exports.getAlignmentOptionsConfig = function getAlignmentOptionsConfig(state, _ref6, editorAnalyticsAPI) {
+  var formatMessage = _ref6.formatMessage;
+  var alignmentIcons = [{
+    id: 'editor.table.alignLeft',
+    value: 'align-start',
+    icon: _alignImageLeft.default
+  }, {
+    id: 'editor.table.alignCenter',
+    value: 'center',
+    icon: _alignImageCenter.default
+  }];
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  var layoutToMessages = {
+    center: _messages.tableMessages.alignTableCenter,
+    'align-start': _messages.tableMessages.alignTableLeft
+  };
+  var alignmentButtons = alignmentIcons.map(function (alignmentIcon) {
+    var id = alignmentIcon.id,
+      value = alignmentIcon.value,
+      icon = alignmentIcon.icon;
+    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()
+    };
+  });
+  var alignmentOptions = {
+    render: function render(props) {
+      return (0, _react.jsx)(_FloatingAlignmentButtons.FloatingAlignmentButtons, (0, _extends2.default)({
+        alignmentButtons: alignmentButtons
+      }, props));
+    },
+    width: 60,
+    height: 32
+  };
+  var alignmentToolbarItem = [{
+    id: 'table-layout',
+    testId: 'table-layout-dropdown',
+    type: 'dropdown',
+    options: alignmentOptions,
+    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
+  }];
+  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;
+  };
 };

package/dist/cjs/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingAlignmentButtons = void 0;
+var _react = require("@emotion/react");
+var _button = require("@atlaskit/button");
+var _ui = require("@atlaskit/editor-common/ui");
+var _primitives = require("@atlaskit/primitives");
+/** @jsx jsx */
+
+var containerStyles = (0, _primitives.xcss)({
+  marginLeft: 'space.100'
+});
+var FloatingAlignmentButtons = exports.FloatingAlignmentButtons = function FloatingAlignmentButtons(_ref) {
+  var alignmentButtons = _ref.alignmentButtons,
+    dispatchCommand = _ref.dispatchCommand;
+  return (0, _react.jsx)(_primitives.Box, {
+    xcss: containerStyles
+  }, (0, _react.jsx)(_button.ButtonGroup, null, alignmentButtons.map(function (item, idx) {
+    switch (item.type) {
+      case 'separator':
+        return (0, _react.jsx)(_ui.FloatingToolbarSeparator, {
+          key: idx
+        });
+      case 'button':
+        var ButtonIcon = item.icon;
+        return (0, _react.jsx)(_ui.FloatingToolbarButton, {
+          key: idx,
+          icon: item.icon ? (0, _react.jsx)(ButtonIcon, {
+            label: item.title
+          }) : undefined,
+          title: item.title,
+          selected: item.selected,
+          disabled: item.disabled,
+          onClick: function onClick() {
+            dispatchCommand(item.onClick);
+          }
+        });
+    }
+  })));
+};

package/dist/es2019/toolbar.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
@@ -11,6 +12,8 @@ import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType, splitCell } from '@atlaskit/editor-tables/utils';
+import EditorAlignImageCenter from '@atlaskit/icon/glyph/editor/align-image-center';
+import EditorAlignImageLeft from '@atlaskit/icon/glyph/editor/align-image-left';
 import DistributeColumnIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import TableOptionsIcon from '@atlaskit/icon/glyph/preferences';
@@ -23,6 +26,7 @@ import { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizin
 import { pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { canMergeCells } from './transforms';
 import { TableCssClassName } from './types';
+import { FloatingAlignmentButtons } from './ui/FloatingAlignmentButtons/FloatingAlignmentButtons';
 import { DisplayModeIcon } from './ui/icons';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes, isTableNested } from './utils';
 export const getToolbarMenuConfig = (config, state, {
@@ -310,6 +314,8 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
   if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
     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) : [];
     let cellItems;
     cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled);
     let columnSettingsItems;
@@ -360,7 +366,7 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
       },
       zIndex: akEditorFloatingPanelZIndex + 1,
       // Place the context menu slightly above the others
-      items: [menu, separator(menu.hidden), ...cellItems, ...columnSettingsItems, ...colorPicker, {
+      items: [menu, separator(menu.hidden), ...alignmentMenu, separator(alignmentMenu.length === 0), ...cellItems, ...columnSettingsItems, ...colorPicker, {
         type: 'extensions-placeholder',
         separator: 'end'
       }, {
@@ -553,4 +559,68 @@ const highlightColumnsHandler = (state, dispatch) => {
     return true;
   }
   return false;
+};
+export const getAlignmentOptionsConfig = (state, {
+  formatMessage
+}, editorAnalyticsAPI) => {
+  const alignmentIcons = [{
+    id: 'editor.table.alignLeft',
+    value: 'align-start',
+    icon: EditorAlignImageLeft
+  }, {
+    id: 'editor.table.alignCenter',
+    value: 'center',
+    icon: EditorAlignImageCenter
+  }];
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const layoutToMessages = {
+    center: messages.alignTableCenter,
+    'align-start': messages.alignTableLeft
+  };
+  const alignmentButtons = alignmentIcons.map(alignmentIcon => {
+    const {
+      id,
+      value,
+      icon
+    } = alignmentIcon;
+    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()
+    };
+  });
+  const alignmentOptions = {
+    render: props => {
+      return jsx(FloatingAlignmentButtons, _extends({
+        alignmentButtons: alignmentButtons
+      }, props));
+    },
+    width: 60,
+    height: 32
+  };
+  const alignmentToolbarItem = [{
+    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
+  }];
+  return alignmentToolbarItem;
+};
+const makeAlignment = () => {
+  return (state, dispatch) => {
+    const tableObject = findTable(state.selection);
+    if (!tableObject || !dispatch) {
+      return false;
+    }
+    // TODO Add alignment logic here
+    return true;
+  };
 };

package/dist/es2019/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.js

@@ -0,0 +1,37 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { ButtonGroup } from '@atlaskit/button';
+import { FloatingToolbarButton as Button, FloatingToolbarSeparator } from '@atlaskit/editor-common/ui';
+import { Box, xcss } from '@atlaskit/primitives';
+const containerStyles = xcss({
+  marginLeft: 'space.100'
+});
+export const FloatingAlignmentButtons = ({
+  alignmentButtons,
+  dispatchCommand
+}) => {
+  return jsx(Box, {
+    xcss: containerStyles
+  }, jsx(ButtonGroup, null, alignmentButtons.map((item, idx) => {
+    switch (item.type) {
+      case 'separator':
+        return jsx(FloatingToolbarSeparator, {
+          key: idx
+        });
+      case 'button':
+        const ButtonIcon = item.icon;
+        return jsx(Button, {
+          key: idx,
+          icon: item.icon ? jsx(ButtonIcon, {
+            label: item.title
+          }) : undefined,
+          title: item.title,
+          selected: item.selected,
+          disabled: item.disabled,
+          onClick: () => {
+            dispatchCommand(item.onClick);
+          }
+        });
+    }
+  })));
+};

package/dist/esm/toolbar.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
@@ -12,6 +13,8 @@ import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos, findTable, getSelectionRect, isSelectionType, splitCell } from '@atlaskit/editor-tables/utils';
+import EditorAlignImageCenter from '@atlaskit/icon/glyph/editor/align-image-center';
+import EditorAlignImageLeft from '@atlaskit/icon/glyph/editor/align-image-left';
 import DistributeColumnIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import TableOptionsIcon from '@atlaskit/icon/glyph/preferences';
@@ -24,6 +27,7 @@ import { getNewResizeStateFromSelectedColumns } from './pm-plugins/table-resizin
 import { pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { canMergeCells } from './transforms';
 import { TableCssClassName } from './types';
+import { FloatingAlignmentButtons } from './ui/FloatingAlignmentButtons/FloatingAlignmentButtons';
 import { DisplayModeIcon } from './ui/icons';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes, isTableNested } from './utils';
 export var getToolbarMenuConfig = function getToolbarMenuConfig(config, state, _ref, editorAnalyticsAPI) {
@@ -313,6 +317,8 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
       if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
         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 cellItems;
         cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, getEditorView(), intl, getEditorContainerWidth, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled);
         var columnSettingsItems;
@@ -369,7 +375,7 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
           },
           zIndex: akEditorFloatingPanelZIndex + 1,
           // Place the context menu slightly above the others
-          items: [menu, separator(menu.hidden)].concat(_toConsumableArray(cellItems), _toConsumableArray(columnSettingsItems), colorPicker, [{
+          items: [menu, separator(menu.hidden)].concat(_toConsumableArray(alignmentMenu), [separator(alignmentMenu.length === 0)], _toConsumableArray(cellItems), _toConsumableArray(columnSettingsItems), colorPicker, [{
             type: 'extensions-placeholder',
             separator: 'end'
           }, {
@@ -575,4 +581,65 @@ var highlightColumnsHandler = function highlightColumnsHandler(state, dispatch)
     return true;
   }
   return false;
+};
+export var getAlignmentOptionsConfig = function getAlignmentOptionsConfig(state, _ref6, editorAnalyticsAPI) {
+  var formatMessage = _ref6.formatMessage;
+  var alignmentIcons = [{
+    id: 'editor.table.alignLeft',
+    value: 'align-start',
+    icon: EditorAlignImageLeft
+  }, {
+    id: 'editor.table.alignCenter',
+    value: 'center',
+    icon: EditorAlignImageCenter
+  }];
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  var layoutToMessages = {
+    center: messages.alignTableCenter,
+    'align-start': messages.alignTableLeft
+  };
+  var alignmentButtons = alignmentIcons.map(function (alignmentIcon) {
+    var id = alignmentIcon.id,
+      value = alignmentIcon.value,
+      icon = alignmentIcon.icon;
+    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()
+    };
+  });
+  var alignmentOptions = {
+    render: function render(props) {
+      return jsx(FloatingAlignmentButtons, _extends({
+        alignmentButtons: alignmentButtons
+      }, props));
+    },
+    width: 60,
+    height: 32
+  };
+  var alignmentToolbarItem = [{
+    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
+  }];
+  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;
+  };
 };

package/dist/esm/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.js

@@ -0,0 +1,36 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { ButtonGroup } from '@atlaskit/button';
+import { FloatingToolbarButton as Button, FloatingToolbarSeparator } from '@atlaskit/editor-common/ui';
+import { Box, xcss } from '@atlaskit/primitives';
+var containerStyles = xcss({
+  marginLeft: 'space.100'
+});
+export var FloatingAlignmentButtons = function FloatingAlignmentButtons(_ref) {
+  var alignmentButtons = _ref.alignmentButtons,
+    dispatchCommand = _ref.dispatchCommand;
+  return jsx(Box, {
+    xcss: containerStyles
+  }, jsx(ButtonGroup, null, alignmentButtons.map(function (item, idx) {
+    switch (item.type) {
+      case 'separator':
+        return jsx(FloatingToolbarSeparator, {
+          key: idx
+        });
+      case 'button':
+        var ButtonIcon = item.icon;
+        return jsx(Button, {
+          key: idx,
+          icon: item.icon ? jsx(ButtonIcon, {
+            label: item.title
+          }) : undefined,
+          title: item.title,
+          selected: item.selected,
+          disabled: item.disabled,
+          onClick: function onClick() {
+            dispatchCommand(item.onClick);
+          }
+        });
+    }
+  })));
+};

package/dist/types/toolbar.d.ts

@@ -12,3 +12,4 @@ 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>>;

package/dist/types/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.d.ts

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
+type Props = {
+    alignmentButtons: FloatingToolbarItem<Command>[];
+    dispatchCommand: (command: Command) => void;
+};
+export declare const FloatingAlignmentButtons: ({ alignmentButtons, dispatchCommand, }: Props) => jsx.JSX.Element;
+export {};

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

@@ -12,3 +12,4 @@ 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>>;

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

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
+type Props = {
+    alignmentButtons: FloatingToolbarItem<Command>[];
+    dispatchCommand: (command: Command) => void;
+};
+export declare const FloatingAlignmentButtons: ({ alignmentButtons, dispatchCommand, }: Props) => jsx.JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.13.4",
+  "version": "7.14.0",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,8 +29,9 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^36.1.0",
+    "@atlaskit/button": "^17.14.0",
     "@atlaskit/custom-steps": "^0.1.0",
-    "@atlaskit/editor-common": "^79.4.0",
+    "@atlaskit/editor-common": "^79.5.0",
     "@atlaskit/editor-palette": "1.6.0",
     "@atlaskit/editor-plugin-accessibility-utils": "^1.1.0",
     "@atlaskit/editor-plugin-analytics": "^1.1.0",
@@ -138,6 +139,9 @@
     },
     "platform.editor.table.live-pages-sorting_4malx": {
       "type": "boolean"
+    },
+    "platform.editor.table.allow-table-alignment": {
+      "type": "boolean"
     }
   }
 }

package/src/toolbar.tsx

@@ -18,6 +18,7 @@ import type {
   Command,
   CommandDispatch,
   ConfirmDialogOptions,
+  DropdownOptions,
   DropdownOptionT,
   FloatingToolbarDropdown,
   FloatingToolbarHandler,
@@ -49,6 +50,8 @@ import {
   isSelectionType,
   splitCell,
 } from '@atlaskit/editor-tables/utils';
+import EditorAlignImageCenter from '@atlaskit/icon/glyph/editor/align-image-center';
+import EditorAlignImageLeft from '@atlaskit/icon/glyph/editor/align-image-left';
 import DistributeColumnIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import TableOptionsIcon from '@atlaskit/icon/glyph/preferences';
@@ -93,6 +96,7 @@ import type {
   ToolbarMenuState,
 } from './types';
 import { TableCssClassName } from './types';
+import { FloatingAlignmentButtons } from './ui/FloatingAlignmentButtons/FloatingAlignmentButtons';
 import { DisplayModeIcon } from './ui/icons';
 import {
   getMergedCellsPositions,
@@ -474,6 +478,14 @@ export const getToolbarConfig =
         editorAnalyticsAPI,
       );
 
+      let alignmentMenu: Array<FloatingToolbarItem<Command>>;
+
+      alignmentMenu = getBooleanFF(
+        'platform.editor.table.allow-table-alignment',
+      )
+        ? getAlignmentOptionsConfig(pluginState, intl, editorAnalyticsAPI)
+        : [];
+
       let cellItems: Array<FloatingToolbarItem<Command>>;
       cellItems = pluginState.isDragAndDropEnabled
         ? []
@@ -568,6 +580,8 @@ export const getToolbarConfig =
         items: [
           menu,
           separator(menu.hidden),
+          ...alignmentMenu,
+          separator(alignmentMenu.length === 0),
           ...cellItems,
           ...columnSettingsItems,
           ...colorPicker,
@@ -871,3 +885,86 @@ const highlightColumnsHandler = (
   }
   return false;
 };
+
+export const getAlignmentOptionsConfig = (
+  state: ToolbarMenuState,
+  { formatMessage }: ToolbarMenuContext,
+  editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+): Array<FloatingToolbarDropdown<Command>> => {
+  type AlignmentIcon = {
+    id?: string;
+    value: string;
+    icon: React.ComponentClass<any>;
+  };
+
+  const alignmentIcons: AlignmentIcon[] = [
+    {
+      id: 'editor.table.alignLeft',
+      value: 'align-start',
+      icon: EditorAlignImageLeft,
+    },
+    {
+      id: 'editor.table.alignCenter',
+      value: 'center',
+      icon: EditorAlignImageCenter,
+    },
+  ];
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const layoutToMessages: Record<string, any> = {
+    center: messages.alignTableCenter,
+    'align-start': messages.alignTableLeft,
+  };
+
+  const alignmentButtons = alignmentIcons.map<FloatingToolbarItem<Command>>(
+    (alignmentIcon) => {
+      const { id, value, icon } = alignmentIcon;
+      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(),
+      };
+    },
+  );
+
+  const alignmentOptions: DropdownOptions<Command> = {
+    render: (props) => {
+      return (
+        <FloatingAlignmentButtons
+          alignmentButtons={alignmentButtons}
+          {...props}
+        />
+      );
+    },
+    width: 60,
+    height: 32,
+  };
+
+  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
+    },
+  ];
+
+  return alignmentToolbarItem;
+};
+
+const makeAlignment = (): Command => {
+  return (state, dispatch) => {
+    const tableObject = findTable(state.selection);
+
+    if (!tableObject || !dispatch) {
+      return false;
+    }
+    // TODO Add alignment logic here
+    return true;
+  };
+};

package/src/ui/FloatingAlignmentButtons/FloatingAlignmentButtons.tsx

@@ -0,0 +1,56 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+
+import { ButtonGroup } from '@atlaskit/button';
+import type {
+  Command,
+  FloatingToolbarItem,
+} from '@atlaskit/editor-common/types';
+import {
+  FloatingToolbarButton as Button,
+  FloatingToolbarSeparator,
+} from '@atlaskit/editor-common/ui';
+import { Box, xcss } from '@atlaskit/primitives';
+
+const containerStyles = xcss({
+  marginLeft: 'space.100',
+});
+
+type Props = {
+  alignmentButtons: FloatingToolbarItem<Command>[];
+  dispatchCommand: (command: Command) => void;
+};
+
+export const FloatingAlignmentButtons = ({
+  alignmentButtons,
+  dispatchCommand,
+}: Props) => {
+  return (
+    <Box xcss={containerStyles}>
+      <ButtonGroup>
+        {alignmentButtons.map((item, idx) => {
+          switch (item.type) {
+            case 'separator':
+              return <FloatingToolbarSeparator key={idx} />;
+            case 'button':
+              const ButtonIcon = item.icon as React.ComponentClass<any>;
+              return (
+                <Button
+                  key={idx}
+                  icon={
+                    item.icon ? <ButtonIcon label={item.title} /> : undefined
+                  }
+                  title={item.title}
+                  selected={item.selected}
+                  disabled={item.disabled}
+                  onClick={() => {
+                    dispatchCommand(item.onClick);
+                  }}
+                />
+              );
+          }
+        })}
+      </ButtonGroup>
+    </Box>
+  );
+};

package/tsconfig.app.json

@@ -33,6 +33,9 @@
     "outDir": "../../../tsDist/@atlaskit__editor-plugin-table/app"
   },
   "references": [
+    {
+      "path": "../../design-system/button/tsconfig.app.json"
+    },
     {
       "path": "../custom-steps/tsconfig.app.json"
     },