@atlaskit/editor-plugin-alignment 4.1.3 → 4.1.4

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

@@ -0,0 +1,67 @@
+import React from 'react';
+import { ALIGNMENT_GROUP, ALIGNMENT_GROUP_RANK, ALIGNMENT_MENU, ALIGNMENT_MENU_SECTION, TEXT_SECTION, TEXT_SECTION_RANK, ALIGNMENT_MENU_RANK } from '@atlaskit/editor-common/toolbar';
+import { AlignmentMenu } from './Toolbar/AlignmentMenu';
+import { AlignmentMenuItem } from './Toolbar/AlignmentMenuItem';
+import { alignmentOptions } from './Toolbar/options';
+const getAlignmentMenuItems = api => {
+  return Object.entries(alignmentOptions()).map(([alignment, item]) => {
+    const {
+      key,
+      type,
+      rank
+    } = item;
+    return {
+      type,
+      key,
+      parents: [{
+        type: ALIGNMENT_MENU_SECTION.type,
+        key: ALIGNMENT_MENU_SECTION.key,
+        rank
+      }],
+      component: ({
+        parents
+      }) => {
+        return /*#__PURE__*/React.createElement(AlignmentMenuItem, {
+          api: api,
+          option: item,
+          alignment: alignment,
+          parents: parents
+        });
+      }
+    };
+  });
+};
+export const getToolbarComponents = api => {
+  return [{
+    type: ALIGNMENT_GROUP.type,
+    key: ALIGNMENT_GROUP.key,
+    parents: [{
+      type: TEXT_SECTION.type,
+      key: TEXT_SECTION.key,
+      rank: TEXT_SECTION_RANK[ALIGNMENT_GROUP.key]
+    }]
+  }, {
+    type: ALIGNMENT_MENU.type,
+    key: ALIGNMENT_MENU.key,
+    parents: [{
+      type: ALIGNMENT_GROUP.type,
+      key: ALIGNMENT_GROUP.key,
+      rank: ALIGNMENT_GROUP_RANK[ALIGNMENT_MENU.key]
+    }],
+    component: ({
+      children
+    }) => {
+      return /*#__PURE__*/React.createElement(AlignmentMenu, {
+        api: api
+      }, children);
+    }
+  }, {
+    type: ALIGNMENT_MENU_SECTION.type,
+    key: ALIGNMENT_MENU_SECTION.key,
+    parents: [{
+      type: ALIGNMENT_MENU.type,
+      key: ALIGNMENT_MENU.key,
+      rank: ALIGNMENT_MENU_RANK[ALIGNMENT_MENU_SECTION.key]
+    }]
+  }, ...getAlignmentMenuItems(api)];
+};

package/dist/esm/alignmentPlugin.js

@@ -1,17 +1,19 @@
 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 var defaultConfig = {
   align: 'start'
 };
 export var alignmentPlugin = function alignmentPlugin(_ref) {
-  var _api$primaryToolbar;
   var api = _ref.api;
+  var isToolbarAIFCEnabled = expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true);
   var primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
     var editorView = _ref2.editorView,
       popupsMountPoint = _ref2.popupsMountPoint,
@@ -29,10 +31,16 @@ export var 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(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() {
@@ -66,7 +74,7 @@ export var alignmentPlugin = function alignmentPlugin(_ref) {
       }];
     },
     pluginsOptions: {
-      selectionToolbar: function selectionToolbar() {
+      selectionToolbar: isToolbarAIFCEnabled ? undefined : function () {
         var _api$userPreferences, _api$selectionToolbar;
         var toolbarDocking = 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' && editorExperiment('platform_editor_controls', 'variant1', {
@@ -96,6 +104,6 @@ export var 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/esm/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,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 = 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: EVENT_TYPE.TRACK,
+        actionSubject: ACTION_SUBJECT.ALIGNMENT,
+        action: ACTION.UPDATED,
+        actionSubjectId: ACTION_SUBJECT_ID.TEXT,
+        attributes: {
+          alignmentType: align,
+          inputMethod: inputMethod
+        }
+      })(tr);
+    }
+    return tr;
+  };
+};
 var changeImageAlignmentWithAnalytics = function changeImageAlignmentWithAnalytics(editorAnalyticsApi, align, inputMethod) {
   return function (state, dispatch) {
     return withAnalytics(editorAnalyticsApi, {
@@ -79,9 +108,48 @@ var changeImageAlignmentWithAnalytics = function changeImageAlignmentWithAnalyti
     })(changeImageAlignment(align))(state, dispatch);
   };
 };
+var changeImageAlignmentWithAnalyticsTr = function changeImageAlignmentWithAnalyticsTr(api, align, inputMethod) {
+  return function (_ref2) {
+    var tr = _ref2.tr;
+    var alignmentApplied = 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: EVENT_TYPE.TRACK,
+        actionSubject: ACTION_SUBJECT.ALIGNMENT,
+        action: ACTION.UPDATED,
+        actionSubjectId: 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
+ */
 export var 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);
+  };
+};
+export var 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/esm/ui/Toolbar/AlignmentMenu.js

@@ -0,0 +1,34 @@
+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 var AlignmentMenu = function AlignmentMenu(_ref) {
+  var children = _ref.children,
+    api = _ref.api;
+  var _useSharedPluginState = 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 = alignmentOptions()[align].icon;
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var 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/esm/ui/Toolbar/AlignmentMenuItem.js

@@ -0,0 +1,39 @@
+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 var 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 = 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 = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var 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: function onClick() {
+      api === null || api === void 0 || api.core.actions.execute(changeAlignmentTr(api, alignment, getInputMethodFromParentKeys(parents)));
+    }
+  }, formatMessage(label));
+};

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

@@ -0,0 +1,32 @@
+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 var alignmentOptions = function alignmentOptions() {
+  return {
+    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/esm/ui/Toolbar/types.js

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

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

@@ -0,0 +1,68 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React from 'react';
+import { ALIGNMENT_GROUP, ALIGNMENT_GROUP_RANK, ALIGNMENT_MENU, ALIGNMENT_MENU_SECTION, TEXT_SECTION, TEXT_SECTION_RANK, ALIGNMENT_MENU_RANK } from '@atlaskit/editor-common/toolbar';
+import { AlignmentMenu } from './Toolbar/AlignmentMenu';
+import { AlignmentMenuItem } from './Toolbar/AlignmentMenuItem';
+import { alignmentOptions } from './Toolbar/options';
+var getAlignmentMenuItems = function getAlignmentMenuItems(api) {
+  return Object.entries(alignmentOptions()).map(function (_ref) {
+    var _ref2 = _slicedToArray(_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: ALIGNMENT_MENU_SECTION.type,
+        key: ALIGNMENT_MENU_SECTION.key,
+        rank: rank
+      }],
+      component: function component(_ref3) {
+        var parents = _ref3.parents;
+        return /*#__PURE__*/React.createElement(AlignmentMenuItem, {
+          api: api,
+          option: item,
+          alignment: alignment,
+          parents: parents
+        });
+      }
+    };
+  });
+};
+export var getToolbarComponents = function getToolbarComponents(api) {
+  return [{
+    type: ALIGNMENT_GROUP.type,
+    key: ALIGNMENT_GROUP.key,
+    parents: [{
+      type: TEXT_SECTION.type,
+      key: TEXT_SECTION.key,
+      rank: TEXT_SECTION_RANK[ALIGNMENT_GROUP.key]
+    }]
+  }, {
+    type: ALIGNMENT_MENU.type,
+    key: ALIGNMENT_MENU.key,
+    parents: [{
+      type: ALIGNMENT_GROUP.type,
+      key: ALIGNMENT_GROUP.key,
+      rank: ALIGNMENT_GROUP_RANK[ALIGNMENT_MENU.key]
+    }],
+    component: function component(_ref4) {
+      var children = _ref4.children;
+      return /*#__PURE__*/React.createElement(AlignmentMenu, {
+        api: api
+      }, children);
+    }
+  }, {
+    type: ALIGNMENT_MENU_SECTION.type,
+    key: ALIGNMENT_MENU_SECTION.key,
+    parents: [{
+      type: ALIGNMENT_MENU.type,
+      key: ALIGNMENT_MENU.key,
+      rank: ALIGNMENT_MENU_RANK[ALIGNMENT_MENU_SECTION.key]
+    }]
+  }].concat(_toConsumableArray(getAlignmentMenuItems(api)));
+};

package/dist/types/alignmentPluginType.d.ts

@@ -3,13 +3,15 @@ import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/t
 import { type AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
+import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
 import type { AlignmentPluginState } from './pm-plugins/types';
 export type AlignmentPluginDependencies = [
     OptionalPlugin<PrimaryToolbarPlugin>,
     OptionalPlugin<SelectionToolbarPlugin>,
     OptionalPlugin<AnalyticsPlugin>,
-    OptionalPlugin<UserPreferencesPlugin>
+    OptionalPlugin<UserPreferencesPlugin>,
+    OptionalPlugin<ToolbarPlugin>
 ];
 export type AlignmentPlugin = NextEditorPlugin<'alignment', {
     sharedState: AlignmentPluginState | undefined;

package/dist/types/editor-commands/index.d.ts

@@ -1,5 +1,10 @@
-import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { Command, EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { AlignmentPlugin, InputMethod } from '../alignmentPluginType';
 import type { AlignmentState } from '../pm-plugins/types';
 export declare const isAlignable: (align?: AlignmentState) => Command;
+/**
+ *
+ * @deprecated use changeAlignmentTr instead
+ */
 export declare const changeAlignment: (align?: AlignmentState, api?: ExtractInjectionAPI<AlignmentPlugin>, inputMethod?: InputMethod) => Command;
+export declare const changeAlignmentTr: (api: ExtractInjectionAPI<AlignmentPlugin> | undefined, align?: AlignmentState, inputMethod?: InputMethod) => EditorCommand;

package/dist/types/ui/Alignment/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { AlignmentState } from '../../pm-plugins/types';
 export interface Props {

package/dist/types/ui/Toolbar/AlignmentMenu.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type AlignmentPlugin } from '../../alignmentPluginType';
+export declare const AlignmentMenu: ({ children, api, }: {
+    children?: React.ReactNode;
+    api: ExtractInjectionAPI<AlignmentPlugin> | undefined;
+}) => React.JSX.Element;

package/dist/types/ui/Toolbar/AlignmentMenuItem.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ToolbarComponentTypes } from '@atlaskit/editor-toolbar-model';
+import type { AlignmentPlugin } from '../../alignmentPluginType';
+import type { AlignmentState } from '../../pm-plugins/types';
+import type { OptionInfo } from './types';
+export declare const AlignmentMenuItem: ({ option: { label, icon: Icon, keymap }, api, alignment, parents, }: {
+    option: OptionInfo;
+    api: ExtractInjectionAPI<AlignmentPlugin> | undefined;
+    alignment: AlignmentState;
+    parents: ToolbarComponentTypes;
+}) => React.JSX.Element;

package/dist/types/ui/Toolbar/options.d.ts

@@ -0,0 +1,3 @@
+import type { AlignmentState } from '../../pm-plugins/types';
+import type { OptionInfo } from './types';
+export declare const alignmentOptions: () => Record<AlignmentState, OptionInfo>;

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

@@ -0,0 +1,11 @@
+import type { MessageDescriptor } from 'react-intl-next';
+import type { Keymap } from '@atlaskit/editor-common/keymaps';
+import type { IconComponent } from '@atlaskit/editor-toolbar';
+export type OptionInfo = {
+    key: string;
+    type: 'menu-item';
+    label: MessageDescriptor;
+    icon: IconComponent;
+    keymap: Keymap;
+    rank: number;
+};

package/dist/types/ui/toolbar-components.d.ts

@@ -0,0 +1,4 @@
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
+import { type AlignmentPlugin } from '../alignmentPluginType';
+export declare const getToolbarComponents: (api: ExtractInjectionAPI<AlignmentPlugin> | undefined) => RegisterComponent[];

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

@@ -3,13 +3,15 @@ import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/t
 import { type AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
+import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
 import type { AlignmentPluginState } from './pm-plugins/types';
 export type AlignmentPluginDependencies = [
     OptionalPlugin<PrimaryToolbarPlugin>,
     OptionalPlugin<SelectionToolbarPlugin>,
     OptionalPlugin<AnalyticsPlugin>,
-    OptionalPlugin<UserPreferencesPlugin>
+    OptionalPlugin<UserPreferencesPlugin>,
+    OptionalPlugin<ToolbarPlugin>
 ];
 export type AlignmentPlugin = NextEditorPlugin<'alignment', {
     sharedState: AlignmentPluginState | undefined;

package/dist/types-ts4.5/editor-commands/index.d.ts

@@ -1,5 +1,10 @@
-import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { Command, EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { AlignmentPlugin, InputMethod } from '../alignmentPluginType';
 import type { AlignmentState } from '../pm-plugins/types';
 export declare const isAlignable: (align?: AlignmentState) => Command;
+/**
+ *
+ * @deprecated use changeAlignmentTr instead
+ */
 export declare const changeAlignment: (align?: AlignmentState, api?: ExtractInjectionAPI<AlignmentPlugin>, inputMethod?: InputMethod) => Command;
+export declare const changeAlignmentTr: (api: ExtractInjectionAPI<AlignmentPlugin> | undefined, align?: AlignmentState, inputMethod?: InputMethod) => EditorCommand;

package/dist/types-ts4.5/ui/Alignment/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { AlignmentState } from '../../pm-plugins/types';
 export interface Props {

package/dist/types-ts4.5/ui/Toolbar/AlignmentMenu.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type AlignmentPlugin } from '../../alignmentPluginType';
+export declare const AlignmentMenu: ({ children, api, }: {
+    children?: React.ReactNode;
+    api: ExtractInjectionAPI<AlignmentPlugin> | undefined;
+}) => React.JSX.Element;

package/dist/types-ts4.5/ui/Toolbar/AlignmentMenuItem.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { ToolbarComponentTypes } from '@atlaskit/editor-toolbar-model';
+import type { AlignmentPlugin } from '../../alignmentPluginType';
+import type { AlignmentState } from '../../pm-plugins/types';
+import type { OptionInfo } from './types';
+export declare const AlignmentMenuItem: ({ option: { label, icon: Icon, keymap }, api, alignment, parents, }: {
+    option: OptionInfo;
+    api: ExtractInjectionAPI<AlignmentPlugin> | undefined;
+    alignment: AlignmentState;
+    parents: ToolbarComponentTypes;
+}) => React.JSX.Element;

package/dist/types-ts4.5/ui/Toolbar/options.d.ts

@@ -0,0 +1,3 @@
+import type { AlignmentState } from '../../pm-plugins/types';
+import type { OptionInfo } from './types';
+export declare const alignmentOptions: () => Record<AlignmentState, OptionInfo>;

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

@@ -0,0 +1,11 @@
+import type { MessageDescriptor } from 'react-intl-next';
+import type { Keymap } from '@atlaskit/editor-common/keymaps';
+import type { IconComponent } from '@atlaskit/editor-toolbar';
+export type OptionInfo = {
+    key: string;
+    type: 'menu-item';
+    label: MessageDescriptor;
+    icon: IconComponent;
+    keymap: Keymap;
+    rank: number;
+};

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

@@ -0,0 +1,4 @@
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { RegisterComponent } from '@atlaskit/editor-toolbar-model';
+import { type AlignmentPlugin } from '../alignmentPluginType';
+export declare const getToolbarComponents: (api: ExtractInjectionAPI<AlignmentPlugin> | undefined) => RegisterComponent[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-alignment",
-	"version": "4.1.3",
+	"version": "4.1.4",
 	"description": "Alignment plugin for @atlaskit/editor-core",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -34,18 +34,20 @@
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/editor-plugin-analytics": "^3.0.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^4.1.0",
-		"@atlaskit/editor-plugin-selection-toolbar": "^4.2.0",
+		"@atlaskit/editor-plugin-selection-toolbar": "^4.3.0",
+		"@atlaskit/editor-plugin-toolbar": "^0.2.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/icon": "^27.9.0",
+		"@atlaskit/editor-toolbar": "^0.2.0",
+		"@atlaskit/icon": "^27.11.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^9.22.0",
+		"@atlaskit/tmp-editor-statsig": "^9.27.0",
 		"@atlaskit/tokens": "^6.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.16.0",
+		"@atlaskit/editor-common": "^107.21.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -58,7 +60,6 @@
 		"@atlaskit/visual-regression": "workspace:^",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/user-event": "^14.4.3",
-		"typescript": "~5.4.2",
 		"wait-for-expect": "^1.2.0"
 	},
 	"techstack": {