@atlaskit/editor-plugin-alignment 4.1.3 → 4.1.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-alignment
 
+## 4.1.4
+
+### Patch Changes
+
+- [`f22ce89845e1e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f22ce89845e1e) -
+  [ED-28686] Register alignment toolbar component
+- Updated dependencies
+
 ## 4.1.3
 
 ### Patch Changes

package/dist/cjs/alignmentPlugin.js

@@ -8,17 +8,19 @@ exports.defaultConfig = exports.alignmentPlugin = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _keymap = require("./pm-plugins/keymap");
 var _main = require("./pm-plugins/main");
 var _FloatingToolbarComponent = require("./ui/FloatingToolbarComponent");
 var _PrimaryToolbarComponent = require("./ui/PrimaryToolbarComponent");
+var _toolbarComponents = require("./ui/toolbar-components");
 var defaultConfig = exports.defaultConfig = {
   align: 'start'
 };
 var alignmentPlugin = exports.alignmentPlugin = function alignmentPlugin(_ref) {
-  var _api$primaryToolbar;
   var api = _ref.api;
+  var isToolbarAIFCEnabled = (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true);
   var primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
     var editorView = _ref2.editorView,
       popupsMountPoint = _ref2.popupsMountPoint,
@@ -36,10 +38,16 @@ var alignmentPlugin = exports.alignmentPlugin = function alignmentPlugin(_ref) {
       isToolbarReducedSpacing: isToolbarReducedSpacing
     });
   };
-  api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
-    name: 'alignment',
-    component: primaryToolbarComponent
-  });
+  if (isToolbarAIFCEnabled) {
+    var _api$toolbar;
+    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents((0, _toolbarComponents.getToolbarComponents)(api));
+  } else {
+    var _api$primaryToolbar;
+    api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
+      name: 'alignment',
+      component: primaryToolbarComponent
+    });
+  }
   return {
     name: 'alignment',
     marks: function marks() {
@@ -73,7 +81,7 @@ var alignmentPlugin = exports.alignmentPlugin = function alignmentPlugin(_ref) {
       }];
     },
     pluginsOptions: {
-      selectionToolbar: function selectionToolbar() {
+      selectionToolbar: isToolbarAIFCEnabled ? undefined : function () {
         var _api$userPreferences, _api$selectionToolbar;
         var toolbarDocking = (0, _platformFeatureFlags.fg)('platform_editor_use_preferences_plugin') ? api === null || api === void 0 || (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.preferences) === null || _api$userPreferences === void 0 ? void 0 : _api$userPreferences.toolbarDockingPosition : api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking;
         if (toolbarDocking === 'none' && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
@@ -103,6 +111,6 @@ var alignmentPlugin = exports.alignmentPlugin = function alignmentPlugin(_ref) {
         }
       }
     },
-    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
+    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && !isToolbarAIFCEnabled ? primaryToolbarComponent : undefined
   };
 };

package/dist/cjs/editor-commands/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isAlignable = exports.changeAlignment = void 0;
+exports.isAlignable = exports.changeAlignmentTr = exports.changeAlignment = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _commands = require("@atlaskit/editor-common/commands");
 var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
@@ -71,6 +71,35 @@ var changeBlockAlignmentWithAnalytics = function changeBlockAlignmentWithAnalyti
     }, [paragraph, heading]))(state, dispatch);
   };
 };
+var changeBlockAlignmentWithAnalyticsTr = function changeBlockAlignmentWithAnalyticsTr(api, align, inputMethod) {
+  return function (_ref) {
+    var tr = _ref.tr;
+    var _tr$doc$type$schema = tr.doc.type.schema,
+      _tr$doc$type$schema$n = _tr$doc$type$schema.nodes,
+      paragraph = _tr$doc$type$schema$n.paragraph,
+      heading = _tr$doc$type$schema$n.heading,
+      alignment = _tr$doc$type$schema.marks.alignment;
+    var alignmentApplied = (0, _commands.toggleBlockMarkNext)(alignment, function () {
+      return !align ? undefined : align === 'start' ? false : {
+        align: align
+      };
+    }, [paragraph, heading])(tr);
+    if (alignmentApplied) {
+      var _api$analytics;
+      api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        actionSubject: _analytics.ACTION_SUBJECT.ALIGNMENT,
+        action: _analytics.ACTION.UPDATED,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.TEXT,
+        attributes: {
+          alignmentType: align,
+          inputMethod: inputMethod
+        }
+      })(tr);
+    }
+    return tr;
+  };
+};
 var changeImageAlignmentWithAnalytics = function changeImageAlignmentWithAnalytics(editorAnalyticsApi, align, inputMethod) {
   return function (state, dispatch) {
     return (0, _editorAnalytics.withAnalytics)(editorAnalyticsApi, {
@@ -85,9 +114,48 @@ var changeImageAlignmentWithAnalytics = function changeImageAlignmentWithAnalyti
     })((0, _commands.changeImageAlignment)(align))(state, dispatch);
   };
 };
+var changeImageAlignmentWithAnalyticsTr = function changeImageAlignmentWithAnalyticsTr(api, align, inputMethod) {
+  return function (_ref2) {
+    var tr = _ref2.tr;
+    var alignmentApplied = (0, _commands.changeImageAlignmentNext)(align)(tr);
+    if (alignmentApplied) {
+      var _api$analytics2;
+      api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 || _api$analytics2.actions.attachAnalyticsEvent({
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        actionSubject: _analytics.ACTION_SUBJECT.ALIGNMENT,
+        action: _analytics.ACTION.UPDATED,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.MEDIA_SINGLE,
+        attributes: {
+          alignmentType: align,
+          inputMethod: inputMethod
+        }
+      })(tr);
+    }
+    return tr;
+  };
+};
+
+// Remove this when cleaning up platform_editor_toolbar_aifc
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required
+/**
+ *
+ * @deprecated use changeAlignmentTr instead
+ */
 var changeAlignment = exports.changeAlignment = function changeAlignment(align, api, inputMethod) {
   return function (state, dispatch) {
-    var _api$analytics, _api$analytics2;
-    return cascadeCommands([changeImageAlignmentWithAnalytics(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, align, inputMethod), changeBlockAlignmentWithAnalytics(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, align, inputMethod)])(state, dispatch);
+    var _api$analytics3, _api$analytics4;
+    return cascadeCommands([changeImageAlignmentWithAnalytics(api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, align, inputMethod), changeBlockAlignmentWithAnalytics(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, align, inputMethod)])(state, dispatch);
+  };
+};
+var changeAlignmentTr = exports.changeAlignmentTr = function changeAlignmentTr(api, align, inputMethod) {
+  return function (_ref3) {
+    var tr = _ref3.tr;
+    changeBlockAlignmentWithAnalyticsTr(api, align, inputMethod)({
+      tr: tr
+    });
+    changeImageAlignmentWithAnalyticsTr(api, align, inputMethod)({
+      tr: tr
+    });
+    return tr;
   };
 };

package/dist/cjs/ui/Toolbar/AlignmentMenu.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AlignmentMenu = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _options = require("./options");
+var AlignmentMenu = exports.AlignmentMenu = function AlignmentMenu(_ref) {
+  var children = _ref.children,
+    api = _ref.api;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['alignment'], function (states) {
+      var _states$alignmentStat, _states$alignmentStat2;
+      return {
+        align: (_states$alignmentStat = states.alignmentState) === null || _states$alignmentStat === void 0 ? void 0 : _states$alignmentStat.align,
+        isEnabled: (_states$alignmentStat2 = states.alignmentState) === null || _states$alignmentStat2 === void 0 ? void 0 : _states$alignmentStat2.isEnabled
+      };
+    }),
+    _useSharedPluginState2 = _useSharedPluginState.align,
+    align = _useSharedPluginState2 === void 0 ? 'start' : _useSharedPluginState2,
+    isEnabled = _useSharedPluginState.isEnabled;
+  var Icon = (0, _options.alignmentOptions)()[align].icon;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var title = formatMessage(_messages.alignmentMessages.alignment);
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+    content: title
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(Icon, {
+      label: ""
+    }),
+    isDisabled: !isEnabled,
+    testId: "text-alignment-menu",
+    label: title
+  }, children));
+};

package/dist/cjs/ui/Toolbar/AlignmentMenuItem.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AlignmentMenuItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _editorCommands = require("../../editor-commands");
+var AlignmentMenuItem = exports.AlignmentMenuItem = function AlignmentMenuItem(_ref) {
+  var _ref$option = _ref.option,
+    label = _ref$option.label,
+    Icon = _ref$option.icon,
+    keymap = _ref$option.keymap,
+    api = _ref.api,
+    alignment = _ref.alignment,
+    parents = _ref.parents;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['alignment'], function (states) {
+      var _states$alignmentStat;
+      return {
+        align: (_states$alignmentStat = states.alignmentState) === null || _states$alignmentStat === void 0 ? void 0 : _states$alignmentStat.align
+      };
+    }),
+    align = _useSharedPluginState.align;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var shortcut = (0, _keymaps.tooltip)(keymap);
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    isSelected: align === alignment,
+    elemBefore: /*#__PURE__*/_react.default.createElement(Icon, {
+      label: ""
+    }),
+    elemAfter: shortcut && /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: shortcut
+    }),
+    ariaKeyshortcuts: (0, _keymaps.getAriaKeyshortcuts)(keymap),
+    onClick: function onClick() {
+      api === null || api === void 0 || api.core.actions.execute((0, _editorCommands.changeAlignmentTr)(api, alignment, (0, _toolbar.getInputMethodFromParentKeys)(parents)));
+    }
+  }, formatMessage(label));
+};

package/dist/cjs/ui/Toolbar/options.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.alignmentOptions = void 0;
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var alignmentOptions = exports.alignmentOptions = function alignmentOptions() {
+  return {
+    start: {
+      key: _toolbar.ALIGN_LEFT_MENU_ITEM.key,
+      type: _toolbar.ALIGN_LEFT_MENU_ITEM.type,
+      rank: _toolbar.ALIGNMENT_MENU_SECTION_RANK[_toolbar.ALIGN_LEFT_MENU_ITEM.key],
+      label: _messages.alignmentMessages.alignLeft,
+      icon: _editorToolbar.AlignTextLeftIcon,
+      keymap: _keymaps.alignLeft
+    },
+    center: {
+      key: _toolbar.ALIGN_CENTER_MENU_ITEM.key,
+      type: _toolbar.ALIGN_CENTER_MENU_ITEM.type,
+      rank: _toolbar.ALIGNMENT_MENU_SECTION_RANK[_toolbar.ALIGN_CENTER_MENU_ITEM.key],
+      label: _messages.alignmentMessages.alignCenter,
+      icon: _editorToolbar.AlignTextCenterIcon,
+      keymap: _keymaps.alignCenter
+    },
+    end: {
+      key: _toolbar.ALIGN_RIGHT_MENU_ITEM.key,
+      type: _toolbar.ALIGN_RIGHT_MENU_ITEM.type,
+      rank: _toolbar.ALIGNMENT_MENU_SECTION_RANK[_toolbar.ALIGN_RIGHT_MENU_ITEM.key],
+      label: _messages.alignmentMessages.alignRight,
+      icon: _editorToolbar.AlignTextRightIcon,
+      keymap: _keymaps.alignRight
+    }
+  };
+};

package/dist/cjs/ui/Toolbar/types.js

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

package/dist/cjs/ui/toolbar-components.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getToolbarComponents = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _AlignmentMenu = require("./Toolbar/AlignmentMenu");
+var _AlignmentMenuItem = require("./Toolbar/AlignmentMenuItem");
+var _options = require("./Toolbar/options");
+var getAlignmentMenuItems = function getAlignmentMenuItems(api) {
+  return Object.entries((0, _options.alignmentOptions)()).map(function (_ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+      alignment = _ref2[0],
+      item = _ref2[1];
+    var key = item.key,
+      type = item.type,
+      rank = item.rank;
+    return {
+      type: type,
+      key: key,
+      parents: [{
+        type: _toolbar.ALIGNMENT_MENU_SECTION.type,
+        key: _toolbar.ALIGNMENT_MENU_SECTION.key,
+        rank: rank
+      }],
+      component: function component(_ref3) {
+        var parents = _ref3.parents;
+        return /*#__PURE__*/_react.default.createElement(_AlignmentMenuItem.AlignmentMenuItem, {
+          api: api,
+          option: item,
+          alignment: alignment,
+          parents: parents
+        });
+      }
+    };
+  });
+};
+var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(api) {
+  return [{
+    type: _toolbar.ALIGNMENT_GROUP.type,
+    key: _toolbar.ALIGNMENT_GROUP.key,
+    parents: [{
+      type: _toolbar.TEXT_SECTION.type,
+      key: _toolbar.TEXT_SECTION.key,
+      rank: _toolbar.TEXT_SECTION_RANK[_toolbar.ALIGNMENT_GROUP.key]
+    }]
+  }, {
+    type: _toolbar.ALIGNMENT_MENU.type,
+    key: _toolbar.ALIGNMENT_MENU.key,
+    parents: [{
+      type: _toolbar.ALIGNMENT_GROUP.type,
+      key: _toolbar.ALIGNMENT_GROUP.key,
+      rank: _toolbar.ALIGNMENT_GROUP_RANK[_toolbar.ALIGNMENT_MENU.key]
+    }],
+    component: function component(_ref4) {
+      var children = _ref4.children;
+      return /*#__PURE__*/_react.default.createElement(_AlignmentMenu.AlignmentMenu, {
+        api: api
+      }, children);
+    }
+  }, {
+    type: _toolbar.ALIGNMENT_MENU_SECTION.type,
+    key: _toolbar.ALIGNMENT_MENU_SECTION.key,
+    parents: [{
+      type: _toolbar.ALIGNMENT_MENU.type,
+      key: _toolbar.ALIGNMENT_MENU.key,
+      rank: _toolbar.ALIGNMENT_MENU_RANK[_toolbar.ALIGNMENT_MENU_SECTION.key]
+    }]
+  }].concat((0, _toConsumableArray2.default)(getAlignmentMenuItems(api)));
+};

package/dist/es2019/alignmentPlugin.js

@@ -1,18 +1,20 @@
 import React from 'react';
 import { alignment } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { keymapPlugin } from './pm-plugins/keymap';
 import { createPlugin, pluginKey } from './pm-plugins/main';
 import { FloatingToolbarComponent } from './ui/FloatingToolbarComponent';
 import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
+import { getToolbarComponents } from './ui/toolbar-components';
 export const defaultConfig = {
   align: 'start'
 };
 export const alignmentPlugin = ({
   api
 }) => {
-  var _api$primaryToolbar;
+  const isToolbarAIFCEnabled = expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true);
   const primaryToolbarComponent = ({
     editorView,
     popupsMountPoint,
@@ -31,10 +33,16 @@ export const alignmentPlugin = ({
       isToolbarReducedSpacing: isToolbarReducedSpacing
     });
   };
-  api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
-    name: 'alignment',
-    component: primaryToolbarComponent
-  });
+  if (isToolbarAIFCEnabled) {
+    var _api$toolbar;
+    api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.registerComponents(getToolbarComponents(api));
+  } else {
+    var _api$primaryToolbar;
+    api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
+      name: 'alignment',
+      component: primaryToolbarComponent
+    });
+  }
   return {
     name: 'alignment',
     marks() {
@@ -65,7 +73,7 @@ export const alignmentPlugin = ({
       }];
     },
     pluginsOptions: {
-      selectionToolbar: () => {
+      selectionToolbar: isToolbarAIFCEnabled ? undefined : () => {
         var _api$userPreferences, _api$userPreferences$, _api$userPreferences$2, _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
         const toolbarDocking = fg('platform_editor_use_preferences_plugin') ? api === null || api === void 0 ? void 0 : (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 ? void 0 : (_api$userPreferences$ = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences$ === void 0 ? void 0 : (_api$userPreferences$2 = _api$userPreferences$.preferences) === null || _api$userPreferences$2 === void 0 ? void 0 : _api$userPreferences$2.toolbarDockingPosition : api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 ? void 0 : (_api$selectionToolbar2 = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.currentState()) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.toolbarDocking;
         if (toolbarDocking === 'none' && editorExperiment('platform_editor_controls', 'variant1', {
@@ -95,6 +103,6 @@ export const alignmentPlugin = ({
         }
       }
     },
-    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
+    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && !isToolbarAIFCEnabled ? primaryToolbarComponent : undefined
   };
 };

package/dist/es2019/editor-commands/index.js

@@ -1,5 +1,5 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { changeImageAlignment, toggleBlockMark } from '@atlaskit/editor-common/commands';
+import { changeImageAlignment, changeImageAlignmentNext, toggleBlockMark, toggleBlockMarkNext } from '@atlaskit/editor-common/commands';
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 /**
@@ -65,6 +65,36 @@ const changeBlockAlignmentWithAnalytics = (editorAnalyticsApi, align, inputMetho
     align
   }, [paragraph, heading]))(state, dispatch);
 };
+const changeBlockAlignmentWithAnalyticsTr = (api, align, inputMethod) => ({
+  tr
+}) => {
+  const {
+    nodes: {
+      paragraph,
+      heading
+    },
+    marks: {
+      alignment
+    }
+  } = tr.doc.type.schema;
+  const alignmentApplied = toggleBlockMarkNext(alignment, () => !align ? undefined : align === 'start' ? false : {
+    align
+  }, [paragraph, heading])(tr);
+  if (alignmentApplied) {
+    var _api$analytics;
+    api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
+      eventType: EVENT_TYPE.TRACK,
+      actionSubject: ACTION_SUBJECT.ALIGNMENT,
+      action: ACTION.UPDATED,
+      actionSubjectId: ACTION_SUBJECT_ID.TEXT,
+      attributes: {
+        alignmentType: align,
+        inputMethod
+      }
+    })(tr);
+  }
+  return tr;
+};
 const changeImageAlignmentWithAnalytics = (editorAnalyticsApi, align, inputMethod) => (state, dispatch) => {
   return withAnalytics(editorAnalyticsApi, {
     eventType: EVENT_TYPE.TRACK,
@@ -77,7 +107,44 @@ const changeImageAlignmentWithAnalytics = (editorAnalyticsApi, align, inputMetho
     }
   })(changeImageAlignment(align))(state, dispatch);
 };
+const changeImageAlignmentWithAnalyticsTr = (api, align, inputMethod) => ({
+  tr
+}) => {
+  const alignmentApplied = changeImageAlignmentNext(align)(tr);
+  if (alignmentApplied) {
+    var _api$analytics2;
+    api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions.attachAnalyticsEvent({
+      eventType: EVENT_TYPE.TRACK,
+      actionSubject: ACTION_SUBJECT.ALIGNMENT,
+      action: ACTION.UPDATED,
+      actionSubjectId: ACTION_SUBJECT_ID.MEDIA_SINGLE,
+      attributes: {
+        alignmentType: align,
+        inputMethod
+      }
+    })(tr);
+  }
+  return tr;
+};
+
+// Remove this when cleaning up platform_editor_toolbar_aifc
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required
+/**
+ *
+ * @deprecated use changeAlignmentTr instead
+ */
 export const changeAlignment = (align, api, inputMethod) => (state, dispatch) => {
-  var _api$analytics, _api$analytics2;
-  return cascadeCommands([changeImageAlignmentWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, align, inputMethod), changeBlockAlignmentWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, align, inputMethod)])(state, dispatch);
+  var _api$analytics3, _api$analytics4;
+  return cascadeCommands([changeImageAlignmentWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions, align, inputMethod), changeBlockAlignmentWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, align, inputMethod)])(state, dispatch);
+};
+export const changeAlignmentTr = (api, align, inputMethod) => ({
+  tr
+}) => {
+  changeBlockAlignmentWithAnalyticsTr(api, align, inputMethod)({
+    tr
+  });
+  changeImageAlignmentWithAnalyticsTr(api, align, inputMethod)({
+    tr
+  });
+  return tr;
 };

package/dist/es2019/ui/Toolbar/AlignmentMenu.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { alignmentMessages as messages } from '@atlaskit/editor-common/messages';
+import { ToolbarDropdownMenu, ToolbarTooltip } from '@atlaskit/editor-toolbar';
+import { alignmentOptions } from './options';
+export const AlignmentMenu = ({
+  children,
+  api
+}) => {
+  const {
+    align = 'start',
+    isEnabled
+  } = useSharedPluginStateWithSelector(api, ['alignment'], states => {
+    var _states$alignmentStat, _states$alignmentStat2;
+    return {
+      align: (_states$alignmentStat = states.alignmentState) === null || _states$alignmentStat === void 0 ? void 0 : _states$alignmentStat.align,
+      isEnabled: (_states$alignmentStat2 = states.alignmentState) === null || _states$alignmentStat2 === void 0 ? void 0 : _states$alignmentStat2.isEnabled
+    };
+  });
+  const {
+    icon: Icon
+  } = alignmentOptions()[align];
+  const {
+    formatMessage
+  } = useIntl();
+  const title = formatMessage(messages.alignment);
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: title
+  }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
+    iconBefore: /*#__PURE__*/React.createElement(Icon, {
+      label: ""
+    }),
+    isDisabled: !isEnabled,
+    testId: "text-alignment-menu",
+    label: title
+  }, children));
+};

package/dist/es2019/ui/Toolbar/AlignmentMenuItem.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { getAriaKeyshortcuts, tooltip } from '@atlaskit/editor-common/keymaps';
+import { getInputMethodFromParentKeys } from '@atlaskit/editor-common/toolbar';
+import { ToolbarDropdownItem, ToolbarKeyboardShortcutHint } from '@atlaskit/editor-toolbar';
+import { changeAlignmentTr } from '../../editor-commands';
+export const AlignmentMenuItem = ({
+  option: {
+    label,
+    icon: Icon,
+    keymap
+  },
+  api,
+  alignment,
+  parents
+}) => {
+  const {
+    align
+  } = useSharedPluginStateWithSelector(api, ['alignment'], states => {
+    var _states$alignmentStat;
+    return {
+      align: (_states$alignmentStat = states.alignmentState) === null || _states$alignmentStat === void 0 ? void 0 : _states$alignmentStat.align
+    };
+  });
+  const {
+    formatMessage
+  } = useIntl();
+  const shortcut = tooltip(keymap);
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    isSelected: align === alignment,
+    elemBefore: /*#__PURE__*/React.createElement(Icon, {
+      label: ""
+    }),
+    elemAfter: shortcut && /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: shortcut
+    }),
+    ariaKeyshortcuts: getAriaKeyshortcuts(keymap),
+    onClick: () => {
+      api === null || api === void 0 ? void 0 : api.core.actions.execute(changeAlignmentTr(api, alignment, getInputMethodFromParentKeys(parents)));
+    }
+  }, formatMessage(label));
+};

package/dist/es2019/ui/Toolbar/options.js

@@ -0,0 +1,30 @@
+import { alignCenter, alignLeft, alignRight } from '@atlaskit/editor-common/keymaps';
+import { alignmentMessages as messages } from '@atlaskit/editor-common/messages';
+import { ALIGN_LEFT_MENU_ITEM, ALIGN_CENTER_MENU_ITEM, ALIGN_RIGHT_MENU_ITEM, ALIGNMENT_MENU_SECTION_RANK } from '@atlaskit/editor-common/toolbar';
+import { AlignTextLeftIcon, AlignTextCenterIcon, AlignTextRightIcon } from '@atlaskit/editor-toolbar';
+export const alignmentOptions = () => ({
+  start: {
+    key: ALIGN_LEFT_MENU_ITEM.key,
+    type: ALIGN_LEFT_MENU_ITEM.type,
+    rank: ALIGNMENT_MENU_SECTION_RANK[ALIGN_LEFT_MENU_ITEM.key],
+    label: messages.alignLeft,
+    icon: AlignTextLeftIcon,
+    keymap: alignLeft
+  },
+  center: {
+    key: ALIGN_CENTER_MENU_ITEM.key,
+    type: ALIGN_CENTER_MENU_ITEM.type,
+    rank: ALIGNMENT_MENU_SECTION_RANK[ALIGN_CENTER_MENU_ITEM.key],
+    label: messages.alignCenter,
+    icon: AlignTextCenterIcon,
+    keymap: alignCenter
+  },
+  end: {
+    key: ALIGN_RIGHT_MENU_ITEM.key,
+    type: ALIGN_RIGHT_MENU_ITEM.type,
+    rank: ALIGNMENT_MENU_SECTION_RANK[ALIGN_RIGHT_MENU_ITEM.key],
+    label: messages.alignRight,
+    icon: AlignTextRightIcon,
+    keymap: alignRight
+  }
+});

package/dist/es2019/ui/Toolbar/types.js

@@ -0,0 +1 @@
+export {};