@atlaskit/editor-plugin-alignment 0.1.0

package/.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  rules: {
+    '@typescript-eslint/no-duplicate-imports': 'error',
+    '@typescript-eslint/no-explicit-any': 'error',
+    '@typescript-eslint/ban-types': [
+      'error',
+      {
+        types: {
+          'React.FC':
+            'Please use types directly on props instead, and explicitly define children if required',
+          'React.FunctionalComponent':
+            'Please use types directly on props instead, and explicitly define children if required',
+        },
+        extendDefaults: false,
+      },
+    ],
+  },
+};

package/CHANGELOG.md

@@ -0,0 +1 @@
+# @atlaskit/editor-plugin-alignment

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2023 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,30 @@
+# Editor plugin alignment
+
+Alignment plugin for @atlaskit/editor-core
+
+**Note:** This component is designed for internal Atlassian development.
+External contributors will be able to use this component but will not be able to submit issues.
+
+## Install
+---
+- **Install** - *yarn add @atlaskit/editor-plugin-alignment*
+- **npm** - [@atlaskit/editor-plugin-alignment](https://www.npmjs.com/package/@atlaskit/editor-plugin-alignment)
+- **Source** - [Bitbucket](https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/editor/editor-plugin-alignment)
+- **Bundle** - [unpkg.com](https://unpkg.com/@atlaskit/editor-plugin-alignment/dist/)
+
+## Usage
+---
+**Internal use only**
+
+@atlaskit/editor-plugin-alignment is intended for internal use by the @atlaskit/editor-core and as a plugin dependency of the Editor within your product.
+
+Direct use of this component is not supported.
+
+Please see [Atlaskit - Editor plugin alignment](https://atlaskit.atlassian.com/packages/editor/editor-plugin-alignment) for documentation and examples for this package.
+
+## Support
+---
+For internal Atlassian, visit the slack channel [#help-editor](https://atlassian.slack.com/archives/CFG3PSQ9E) for support or visit [go/editor-help](https://go/editor-help) to submit a bug.
+## License
+---
+ Please see [Atlassian Frontend - License](https://hello.atlassian.net/wiki/spaces/AF/pages/2589099144/Documentation#License) for more licensing information.

package/dist/cjs/commands/index.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isAlignable = exports.changeAlignment = void 0;
+var _commands = require("@atlaskit/editor-common/commands");
+var _state = require("@atlaskit/editor-prosemirror/state");
+/**
+ * Iterates over the commands one after the other,
+ * passes the tr through and dispatches the cumulated transaction
+ */
+function cascadeCommands(cmds) {
+  return function (state, dispatch) {
+    var baseTr = state.tr;
+    var shouldDispatch = false;
+    var onDispatchAction = function onDispatchAction(tr) {
+      var selectionJSON = tr.selection.toJSON();
+      baseTr.setSelection(_state.Selection.fromJSON(baseTr.doc, selectionJSON));
+      tr.steps.forEach(function (st) {
+        baseTr.step(st);
+      });
+      shouldDispatch = true;
+    };
+    cmds.forEach(function (cmd) {
+      return cmd(state, onDispatchAction);
+    });
+    if (dispatch && shouldDispatch) {
+      dispatch(baseTr);
+      return true;
+    }
+    return false;
+  };
+}
+var isAlignable = exports.isAlignable = function isAlignable(align) {
+  return function (state, dispatch) {
+    var _state$schema = state.schema,
+      _state$schema$nodes = _state$schema.nodes,
+      paragraph = _state$schema$nodes.paragraph,
+      heading = _state$schema$nodes.heading,
+      alignment = _state$schema.marks.alignment;
+    return (0, _commands.toggleBlockMark)(alignment, function () {
+      return !align ? undefined : align === 'start' ? false : {
+        align: align
+      };
+    }, [paragraph, heading])(state, dispatch);
+  };
+};
+var changeAlignment = exports.changeAlignment = function changeAlignment(align) {
+  return function (state, dispatch) {
+    var _state$schema2 = state.schema,
+      _state$schema2$nodes = _state$schema2.nodes,
+      paragraph = _state$schema2$nodes.paragraph,
+      heading = _state$schema2$nodes.heading,
+      alignment = _state$schema2.marks.alignment;
+    return cascadeCommands([(0, _commands.changeImageAlignment)(align), (0, _commands.toggleBlockMark)(alignment, function () {
+      return !align ? undefined : align === 'start' ? false : {
+        align: align
+      };
+    }, [paragraph, heading])])(state, dispatch);
+  };
+};

package/dist/cjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "alignmentPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.alignmentPlugin;
+  }
+});
+var _plugin = require("./plugin");

package/dist/cjs/plugin.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultConfig = exports.alignmentPlugin = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
+var _commands = require("./commands");
+var _keymap = require("./pm-plugins/keymap");
+var _main = require("./pm-plugins/main");
+var _ToolbarAlignment = _interopRequireDefault(require("./ui/ToolbarAlignment"));
+var defaultConfig = exports.defaultConfig = {
+  align: 'start'
+};
+var alignmentPlugin = exports.alignmentPlugin = function alignmentPlugin() {
+  return {
+    name: 'alignment',
+    marks: function marks() {
+      return [{
+        name: 'alignment',
+        mark: _adfSchema.alignment
+      }];
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'alignmentPlugin',
+        plugin: function plugin(_ref) {
+          var dispatch = _ref.dispatch;
+          return (0, _main.createPlugin)(dispatch, defaultConfig);
+        }
+      }, {
+        name: 'annotationKeymap',
+        plugin: function plugin() {
+          return (0, _keymap.keymapPlugin)();
+        }
+      }];
+    },
+    primaryToolbarComponent: function primaryToolbarComponent(_ref2) {
+      var editorView = _ref2.editorView,
+        popupsMountPoint = _ref2.popupsMountPoint,
+        popupsBoundariesElement = _ref2.popupsBoundariesElement,
+        popupsScrollableElement = _ref2.popupsScrollableElement,
+        disabled = _ref2.disabled,
+        isToolbarReducedSpacing = _ref2.isToolbarReducedSpacing;
+      return /*#__PURE__*/_react.default.createElement(_withPluginState.WithPluginState, {
+        plugins: {
+          align: _main.pluginKey
+        },
+        render: function render(_ref3) {
+          var align = _ref3.align;
+          return /*#__PURE__*/_react.default.createElement(_ToolbarAlignment.default, {
+            pluginState: align,
+            isReducedSpacing: isToolbarReducedSpacing,
+            changeAlignment: function changeAlignment(align) {
+              return (0, _commands.changeAlignment)(align)(editorView.state, editorView.dispatch);
+            },
+            disabled: disabled || !align.isEnabled,
+            popupsMountPoint: popupsMountPoint,
+            popupsBoundariesElement: popupsBoundariesElement,
+            popupsScrollableElement: popupsScrollableElement
+          });
+        }
+      });
+    }
+  };
+};

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.keymapPlugin = keymapPlugin;
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _keymap = require("@atlaskit/editor-prosemirror/keymap");
+var _commands = require("../commands");
+function keymapPlugin() {
+  var list = {};
+  (0, _keymaps.bindKeymapWithCommand)(_keymaps.alignLeft.common, (0, _commands.changeAlignment)('start'), list);
+  return (0, _keymap.keymap)(list);
+}

package/dist/cjs/pm-plugins/main.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createInitialPluginState = createInitialPluginState;
+exports.createPlugin = createPlugin;
+exports.pluginKey = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _commands = require("../commands");
+var _utils = require("../utils");
+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; }
+function createInitialPluginState(editorState, pluginConfig) {
+  return {
+    align: (0, _utils.getActiveAlignment)(editorState) || pluginConfig.align,
+    isEnabled: true
+  };
+}
+var pluginKey = exports.pluginKey = new _state.PluginKey('alignmentPlugin');
+function createPlugin(dispatch, pluginConfig) {
+  return new _safePlugin.SafePlugin({
+    key: pluginKey,
+    state: {
+      init: function init(_, editorState) {
+        return createInitialPluginState(editorState, pluginConfig);
+      },
+      apply: function apply(_tr, state, _prevState, nextState) {
+        var nextPluginState = (0, _utils.getActiveAlignment)(nextState);
+        var isEnabled = (0, _commands.isAlignable)(nextPluginState)(nextState);
+        var newState = _objectSpread(_objectSpread({}, state), {}, {
+          align: nextPluginState,
+          isEnabled: isEnabled
+        });
+        if (nextPluginState !== state.align || isEnabled !== state.isEnabled) {
+          dispatch(pluginKey, newState);
+        }
+        return newState;
+      }
+    }
+  });
+}

package/dist/cjs/pm-plugins/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/ui/Alignment/AlignmentButton/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+function AlignmentButton(_ref) {
+  var label = _ref.label,
+    isSelected = _ref.isSelected,
+    content = _ref.content,
+    shortcut = _ref.shortcut,
+    onClick = _ref.onClick,
+    value = _ref.value;
+  var onClickCallback = function onClickCallback(e) {
+    // detect if the click event comes from keyboard where screenX and screenY are 0
+    var isMouseEvent = e instanceof MouseEvent;
+    e.preventDefault();
+    onClick(value, isMouseEvent);
+  };
+  return /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
+    disabled: false,
+    selected: isSelected,
+    title: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+      description: label,
+      keymap: shortcut
+    }),
+    "aria-label": shortcut ? (0, _keymaps.tooltip)(shortcut, label) : label,
+    "aria-pressed": isSelected,
+    "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(shortcut),
+    onClick: onClickCallback,
+    iconBefore: content
+  });
+}
+var _default = exports.default = AlignmentButton;

package/dist/cjs/ui/Alignment/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _iconMap = require("../ToolbarAlignment/icon-map");
+var _AlignmentButton = _interopRequireDefault(require("./AlignmentButton"));
+var _styles = require("./styles");
+/** @jsx jsx */
+
+var alignmentOptions = [{
+  title: _messages.alignmentMessages.alignLeft,
+  shortcut: _keymaps.alignLeft,
+  value: 'start'
+}, {
+  title: _messages.alignmentMessages.alignCenter,
+  value: 'center'
+}, {
+  title: _messages.alignmentMessages.alignRight,
+  value: 'end'
+}];
+function Alignment(_ref) {
+  var onClick = _ref.onClick,
+    selectedAlignment = _ref.selectedAlignment,
+    className = _ref.className,
+    intl = _ref.intl;
+  return (0, _react.jsx)("div", {
+    "data-testid": "alignment-buttons"
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    ,
+    css: _styles.alignmentWrapper,
+    className: className
+  }, alignmentOptions.map(function (alignment) {
+    var value = alignment.value,
+      title = alignment.title,
+      shortcut = alignment.shortcut;
+    var message = intl.formatMessage(title);
+    return (0, _react.jsx)(_AlignmentButton.default, {
+      content: (0, _react.jsx)(_iconMap.IconMap, {
+        alignment: value
+      }),
+      key: value,
+      value: value,
+      label: message,
+      shortcut: shortcut,
+      onClick: onClick,
+      isSelected: value === selectedAlignment
+    });
+  }));
+}
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(Alignment);

package/dist/cjs/ui/Alignment/styles.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.alignmentWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _templateObject;
+var alignmentWrapper = exports.alignmentWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 ", ";\n  display: flex;\n  flex-wrap: wrap;\n  max-width: ", "px;\n"])), "var(--ds-space-100, 8px)", 3 * 32);

package/dist/cjs/ui/ToolbarAlignment/icon-map.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconMap = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _alignCenter = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-center"));
+var _alignLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-left"));
+var _alignRight = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-right"));
+var _messages = require("./messages");
+var iconAndMessageMap = {
+  start: {
+    Component: _alignLeft.default,
+    label: _messages.messages.alignLeft
+  },
+  end: {
+    Component: _alignRight.default,
+    label: _messages.messages.alignRight
+  },
+  center: {
+    Component: _alignCenter.default,
+    label: _messages.messages.alignCenter
+  }
+};
+var IconMap = exports.IconMap = function IconMap(props) {
+  var _iconAndMessageMap$pr = iconAndMessageMap[props.alignment],
+    Component = _iconAndMessageMap$pr.Component,
+    label = _iconAndMessageMap$pr.label;
+  var intl = (0, _reactIntlNext.useIntl)();
+  return /*#__PURE__*/_react.default.createElement(Component, {
+    label: intl.formatMessage(label)
+  });
+};

package/dist/cjs/ui/ToolbarAlignment/index.js

@@ -0,0 +1,174 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AlignmentToolbar = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _styles = require("@atlaskit/editor-common/styles");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _Alignment = _interopRequireDefault(require("../Alignment"));
+var _iconMap = require("./icon-map");
+var _messages = require("./messages");
+var _styles2 = require("./styles");
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var AlignmentToolbar = exports.AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(AlignmentToolbar, _React$Component);
+  var _super = _createSuper(AlignmentToolbar);
+  function AlignmentToolbar() {
+    var _this;
+    (0, _classCallCheck2.default)(this, AlignmentToolbar);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toolbarItemRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      isOpen: false
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "changeAlignment", function (align, togglePopup) {
+      if (togglePopup) {
+        _this.toggleOpen();
+      }
+      return _this.props.changeAlignment(align);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleOpen", function () {
+      _this.setState({
+        isOpen: !_this.state.isOpen
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleOpenByKeyboard", function (event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        _this.setState({
+          isOpen: !_this.state.isOpen
+        });
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hide", function (attrs) {
+      if (_this.state.isOpen) {
+        _this.setState({
+          isOpen: false
+        });
+        if ((attrs === null || attrs === void 0 ? void 0 : attrs.event) instanceof KeyboardEvent && attrs.event.key === 'Escape') {
+          var _this$toolbarItemRef;
+          (_this$toolbarItemRef = _this.toolbarItemRef) === null || _this$toolbarItemRef === void 0 || (_this$toolbarItemRef = _this$toolbarItemRef.current) === null || _this$toolbarItemRef === void 0 || _this$toolbarItemRef.focus();
+        }
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hideOnEscape", function () {
+      var _this$toolbarItemRef2;
+      _this.hide();
+      (_this$toolbarItemRef2 = _this.toolbarItemRef) === null || _this$toolbarItemRef2 === void 0 || (_this$toolbarItemRef2 = _this$toolbarItemRef2.current) === null || _this$toolbarItemRef2 === void 0 || _this$toolbarItemRef2.focus();
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(AlignmentToolbar, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var isOpen = this.state.isOpen;
+      var _this$props = this.props,
+        popupsMountPoint = _this$props.popupsMountPoint,
+        popupsBoundariesElement = _this$props.popupsBoundariesElement,
+        popupsScrollableElement = _this$props.popupsScrollableElement,
+        isReducedSpacing = _this$props.isReducedSpacing,
+        pluginState = _this$props.pluginState,
+        disabled = _this$props.disabled,
+        intl = _this$props.intl;
+      var title = intl.formatMessage(_messages.messages.alignment);
+      return (
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+        (0, _react2.jsx)("span", {
+          css: _styles2.wrapper
+        }, (0, _react2.jsx)(_uiMenu.DropdownContainer, {
+          mountTo: popupsMountPoint,
+          boundariesElement: popupsBoundariesElement,
+          scrollableElement: popupsScrollableElement,
+          isOpen: isOpen,
+          handleClickOutside: function handleClickOutside(event) {
+            if (event instanceof MouseEvent) {
+              _this2.hide({
+                isOpen: false,
+                event: event
+              });
+            }
+          },
+          handleEscapeKeydown: this.hideOnEscape,
+          arrowKeyNavigationProviderOptions: {
+            type: _uiMenu.ArrowKeyNavigationType.MENU
+          },
+          fitWidth: 112,
+          fitHeight: 80,
+          closeOnTab: true,
+          trigger: (0, _react2.jsx)(_uiMenu.ToolbarButton, {
+            spacing: isReducedSpacing ? 'none' : 'default',
+            disabled: disabled,
+            selected: isOpen,
+            title: title,
+            className: "align-btn",
+            "aria-label": title,
+            "aria-expanded": isOpen,
+            "aria-haspopup": true,
+            onClick: this.toggleOpen,
+            onKeyDown: this.toggleOpenByKeyboard,
+            iconBefore:
+            // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+            (0, _react2.jsx)("div", {
+              css: _styles2.triggerWrapper
+            }, (0, _react2.jsx)(_iconMap.IconMap, {
+              alignment: pluginState.align
+            }), (0, _react2.jsx)("span", {
+              css: _styles2.expandIconWrapper
+            }, (0, _react2.jsx)(_chevronDown.default, {
+              label: ""
+            }))),
+            ref: this.toolbarItemRef
+          })
+        }, (0, _react2.jsx)(_Alignment.default, {
+          onClick: function onClick(align) {
+            return _this2.changeAlignment(align, false);
+          },
+          selectedAlignment: pluginState.align
+        })), (0, _react2.jsx)("span", {
+          css: _styles.separatorStyles
+        }))
+      );
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this3 = this;
+      if (this.state.isOpen) {
+        // by triggering the keyboard event with a setTimeout, we ensure that the tooltip
+        // associated with the alignment button doesn't render until the next render cycle
+        // where the popup will be correctly positioned and the relative position of the tooltip
+        // will not overlap with the button.
+        setTimeout(function () {
+          var _this3$toolbarItemRef;
+          var keyboardEvent = new KeyboardEvent('keydown', {
+            bubbles: true,
+            key: 'ArrowDown'
+          });
+          (_this3$toolbarItemRef = _this3.toolbarItemRef.current) === null || _this3$toolbarItemRef === void 0 || _this3$toolbarItemRef.dispatchEvent(keyboardEvent);
+        }, 0);
+      }
+    }
+  }]);
+  return AlignmentToolbar;
+}(_react.default.Component);
+(0, _defineProperty2.default)(AlignmentToolbar, "displayName", 'AlignmentToolbar');
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(AlignmentToolbar);

package/dist/cjs/ui/ToolbarAlignment/messages.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
+  alignment: {
+    id: 'fabric.editor.alignment',
+    defaultMessage: 'Text alignment',
+    description: 'Opens drop down menu of options to configure text alignment'
+  },
+  alignLeft: {
+    id: 'fabric.editor.alignLeft',
+    defaultMessage: 'Align left',
+    description: 'label stating that text is aligned left'
+  },
+  alignRight: {
+    id: 'fabric.editor.alignRight',
+    defaultMessage: 'Align Right',
+    description: 'label stating that text is aligned right'
+  },
+  alignCenter: {
+    id: 'fabric.editor.alignCenter',
+    defaultMessage: 'Align Center',
+    description: 'label stating that text is aligned center'
+  }
+});

package/dist/cjs/ui/ToolbarAlignment/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.wrapper = exports.triggerWrapper = exports.expandIconWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var _templateObject, _templateObject2, _templateObject3;
+var triggerWrapper = exports.triggerWrapper = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n"])));
+var wrapper = exports.wrapper = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  div {\n    display: flex;\n  }\n"])));
+var expandIconWrapper = exports.expandIconWrapper = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", ";\n"])), "var(--ds-space-negative-100, -8px)");