@atlaskit/editor-plugin-alignment 3.1.8 → 3.1.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/alignmentPlugin.js +1 -1
  3. package/dist/cjs/editor-commands/index.js +43 -2
  4. package/dist/cjs/pm-plugins/keymap.js +8 -4
  5. package/dist/cjs/ui/FloatingToolbarComponent.js +3 -2
  6. package/dist/cjs/ui/PrimaryToolbarComponent.js +3 -2
  7. package/dist/cjs/ui/ToolbarAlignment/index.js +78 -2
  8. package/dist/es2019/alignmentPlugin.js +1 -1
  9. package/dist/es2019/editor-commands/index.js +41 -2
  10. package/dist/es2019/pm-plugins/keymap.js +8 -4
  11. package/dist/es2019/ui/FloatingToolbarComponent.js +3 -2
  12. package/dist/es2019/ui/PrimaryToolbarComponent.js +2 -1
  13. package/dist/es2019/ui/ToolbarAlignment/index.js +76 -4
  14. package/dist/esm/alignmentPlugin.js +1 -1
  15. package/dist/esm/editor-commands/index.js +43 -2
  16. package/dist/esm/pm-plugins/keymap.js +8 -4
  17. package/dist/esm/ui/FloatingToolbarComponent.js +3 -2
  18. package/dist/esm/ui/PrimaryToolbarComponent.js +3 -2
  19. package/dist/esm/ui/ToolbarAlignment/index.js +80 -4
  20. package/dist/types/alignmentPluginType.d.ts +5 -1
  21. package/dist/types/editor-commands/index.d.ts +3 -2
  22. package/dist/types/pm-plugins/keymap.d.ts +3 -1
  23. package/dist/types/ui/ToolbarAlignment/index.d.ts +1 -0
  24. package/dist/types-ts4.5/alignmentPluginType.d.ts +5 -1
  25. package/dist/types-ts4.5/editor-commands/index.d.ts +3 -2
  26. package/dist/types-ts4.5/pm-plugins/keymap.d.ts +3 -1
  27. package/dist/types-ts4.5/ui/ToolbarAlignment/index.d.ts +1 -0
  28. package/package.json +14 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/editor-plugin-alignment
2
2
 
3
+ ## 3.1.10
4
+
5
+ ### Patch Changes
6
+
7
+ - [#142312](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142312)
8
+ [`21eed5379866d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/21eed5379866d) -
9
+ [ux] Update the look of alignment options dropdown.
10
+ - Updated dependencies
11
+
12
+ ## 3.1.9
13
+
14
+ ### Patch Changes
15
+
16
+ - [#139038](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139038)
17
+ [`50d48758aba38`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/50d48758aba38) -
18
+ [ED-27448] Implement alignment updated event
19
+ - Updated dependencies
20
+
3
21
  ## 3.1.8
4
22
 
5
23
  ### Patch Changes
package/dist/cjs/alignmentPlugin.js CHANGED
@@ -69,7 +69,7 @@ var alignmentPlugin = exports.alignmentPlugin = function alignmentPlugin(_ref) {
69
69
  }, {
70
70
  name: 'annotationKeymap',
71
71
  plugin: function plugin() {
72
- return (0, _keymap.keymapPlugin)();
72
+ return (0, _keymap.keymapPlugin)(api);
73
73
  }
74
74
  }];
75
75
  },
package/dist/cjs/editor-commands/index.js CHANGED
@@ -4,8 +4,11 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.isAlignable = exports.changeAlignment = void 0;
7
+ var _analytics = require("@atlaskit/editor-common/analytics");
7
8
  var _commands = require("@atlaskit/editor-common/commands");
9
+ var _editorAnalytics = require("@atlaskit/editor-common/editor-analytics");
8
10
  var _state = require("@atlaskit/editor-prosemirror/state");
11
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
9
12
  /**
10
13
  * Iterates over the commands one after the other,
11
14
  * passes the tr through and dispatches the cumulated transaction
@@ -46,14 +49,52 @@ var isAlignable = exports.isAlignable = function isAlignable(align) {
46
49
  }, [paragraph, heading])(state, dispatch);
47
50
  };
48
51
  };
49
- var changeAlignment = exports.changeAlignment = function changeAlignment(align) {
52
+ var changeBlockAlignmentWithAnalytics = function changeBlockAlignmentWithAnalytics(editorAnalyticsApi, align, inputMethod) {
50
53
  return function (state, dispatch) {
51
54
  var _state$schema2 = state.schema,
52
55
  _state$schema2$nodes = _state$schema2.nodes,
53
56
  paragraph = _state$schema2$nodes.paragraph,
54
57
  heading = _state$schema2$nodes.heading,
55
58
  alignment = _state$schema2.marks.alignment;
56
- return cascadeCommands([(0, _commands.changeImageAlignment)(align), (0, _commands.toggleBlockMark)(alignment, function () {
59
+ return (0, _editorAnalytics.withAnalytics)(editorAnalyticsApi, {
60
+ eventType: _analytics.EVENT_TYPE.TRACK,
61
+ actionSubject: _analytics.ACTION_SUBJECT.ALIGNMENT,
62
+ action: _analytics.ACTION.UPDATED,
63
+ actionSubjectId: _analytics.ACTION_SUBJECT_ID.TEXT,
64
+ attributes: {
65
+ alignmentType: align,
66
+ inputMethod: inputMethod
67
+ }
68
+ })((0, _commands.toggleBlockMark)(alignment, function () {
69
+ return !align ? undefined : align === 'start' ? false : {
70
+ align: align
71
+ };
72
+ }, [paragraph, heading]))(state, dispatch);
73
+ };
74
+ };
75
+ var changeImageAlignmentWithAnalytics = function changeImageAlignmentWithAnalytics(editorAnalyticsApi, align, inputMethod) {
76
+ return function (state, dispatch) {
77
+ return (0, _editorAnalytics.withAnalytics)(editorAnalyticsApi, {
78
+ eventType: _analytics.EVENT_TYPE.TRACK,
79
+ actionSubject: _analytics.ACTION_SUBJECT.ALIGNMENT,
80
+ action: _analytics.ACTION.UPDATED,
81
+ actionSubjectId: _analytics.ACTION_SUBJECT_ID.MEDIA_SINGLE,
82
+ attributes: {
83
+ alignmentType: align,
84
+ inputMethod: inputMethod
85
+ }
86
+ })((0, _commands.changeImageAlignment)(align))(state, dispatch);
87
+ };
88
+ };
89
+ var changeAlignment = exports.changeAlignment = function changeAlignment(align, api, inputMethod) {
90
+ return function (state, dispatch) {
91
+ var _api$analytics, _api$analytics2;
92
+ var _state$schema3 = state.schema,
93
+ _state$schema3$nodes = _state$schema3.nodes,
94
+ paragraph = _state$schema3$nodes.paragraph,
95
+ heading = _state$schema3$nodes.heading,
96
+ alignment = _state$schema3.marks.alignment;
97
+ return cascadeCommands((0, _platformFeatureFlags.fg)('platform_editor_add_alignment_tracking') ? [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)] : [(0, _commands.changeImageAlignment)(align), (0, _commands.toggleBlockMark)(alignment, function () {
57
98
  return !align ? undefined : align === 'start' ? false : {
58
99
  align: align
59
100
  };
package/dist/cjs/pm-plugins/keymap.js CHANGED
@@ -4,19 +4,23 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.keymapPlugin = keymapPlugin;
7
+ var _analytics = require("@atlaskit/editor-common/analytics");
7
8
  var _keymaps = require("@atlaskit/editor-common/keymaps");
8
9
  var _editorCommands = require("../editor-commands");
9
- function keymapPlugin() {
10
+ function keymapPlugin(api) {
10
11
  var list = {};
11
12
 
12
13
  // Ignored via go/ees005
14
+ (0, _keymaps.bindKeymapWithCommand)(
13
15
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
14
- (0, _keymaps.bindKeymapWithCommand)(_keymaps.alignLeft.common, (0, _editorCommands.changeAlignment)('start'), list);
16
+ _keymaps.alignLeft.common, (0, _editorCommands.changeAlignment)('start', api, _analytics.INPUT_METHOD.SHORTCUT), list);
15
17
  // Ignored via go/ees005
18
+ (0, _keymaps.bindKeymapWithCommand)(
16
19
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
17
- (0, _keymaps.bindKeymapWithCommand)(_keymaps.alignCenter.common, (0, _editorCommands.changeAlignment)('center'), list);
20
+ _keymaps.alignCenter.common, (0, _editorCommands.changeAlignment)('center', api, _analytics.INPUT_METHOD.SHORTCUT), list);
18
21
  // Ignored via go/ees005
22
+ (0, _keymaps.bindKeymapWithCommand)(
19
23
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
20
- (0, _keymaps.bindKeymapWithCommand)(_keymaps.alignRight.common, (0, _editorCommands.changeAlignment)('end'), list);
24
+ _keymaps.alignRight.common, (0, _editorCommands.changeAlignment)('end', api, _analytics.INPUT_METHOD.SHORTCUT), list);
21
25
  return (0, _keymaps.keymap)(list);
22
26
  }
package/dist/cjs/ui/FloatingToolbarComponent.js CHANGED
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.FloatingToolbarComponent = FloatingToolbarComponent;
9
9
  var _react = _interopRequireWildcard(require("react"));
10
+ var _analytics = require("@atlaskit/editor-common/analytics");
10
11
  var _hooks = require("@atlaskit/editor-common/hooks");
11
12
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
12
13
  var _editorCommands = require("../editor-commands");
@@ -24,8 +25,8 @@ function FloatingToolbarComponent(_ref) {
24
25
  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['alignment']),
25
26
  alignmentState = _useSharedPluginState.alignmentState;
26
27
  var changeAlignmentCallback = (0, _react.useCallback)(function (align) {
27
- return (0, _editorCommands.changeAlignment)(align)(editorView.state, editorView.dispatch);
28
- }, [editorView]);
28
+ return (0, _editorCommands.changeAlignment)(align, api, _analytics.INPUT_METHOD.FLOATING_TB)(editorView.state, editorView.dispatch);
29
+ }, [editorView, api]);
29
30
  return /*#__PURE__*/_react.default.createElement(_ToolbarAlignment.default, {
30
31
  pluginState: alignmentState,
31
32
  isReducedSpacing: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? false : FloatingToolbarSettings.isToolbarReducedSpacing,
package/dist/cjs/ui/PrimaryToolbarComponent.js CHANGED
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.PrimaryToolbarComponent = PrimaryToolbarComponent;
9
9
  var _react = _interopRequireWildcard(require("react"));
10
+ var _analytics = require("@atlaskit/editor-common/analytics");
10
11
  var _hooks = require("@atlaskit/editor-common/hooks");
11
12
  var _types = require("@atlaskit/editor-common/types");
12
13
  var _editorCommands = require("../editor-commands");
@@ -27,8 +28,8 @@ function PrimaryToolbarComponent(_ref) {
27
28
  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['alignment']),
28
29
  alignmentState = _useSharedPluginState.alignmentState;
29
30
  var changeAlignmentCallback = (0, _react.useCallback)(function (align) {
30
- return (0, _editorCommands.changeAlignment)(align)(editorView.state, editorView.dispatch);
31
- }, [editorView]);
31
+ return (0, _editorCommands.changeAlignment)(align, api, _analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
32
+ }, [editorView, api]);
32
33
  return /*#__PURE__*/_react.default.createElement(_ToolbarAlignment.default, {
33
34
  pluginState: alignmentState,
34
35
  isReducedSpacing: isToolbarReducedSpacing,
package/dist/cjs/ui/ToolbarAlignment/index.js CHANGED
@@ -16,10 +16,15 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
16
16
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
17
17
  var _react = _interopRequireDefault(require("react"));
18
18
  var _reactIntlNext = require("react-intl-next");
19
+ var _keymaps = require("@atlaskit/editor-common/keymaps");
19
20
  var _messages = require("@atlaskit/editor-common/messages");
20
21
  var _types = require("@atlaskit/editor-common/types");
21
22
  var _ui = require("@atlaskit/editor-common/ui");
22
23
  var _uiMenu = require("@atlaskit/editor-common/ui-menu");
24
+ var _alignTextCenter = _interopRequireDefault(require("@atlaskit/icon/core/align-text-center"));
25
+ var _alignTextLeft = _interopRequireDefault(require("@atlaskit/icon/core/align-text-left"));
26
+ var _alignTextRight = _interopRequireDefault(require("@atlaskit/icon/core/align-text-right"));
27
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
23
28
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
24
29
  var _types2 = require("../../pm-plugins/types");
25
30
  var _Alignment = _interopRequireDefault(require("../Alignment"));
@@ -58,6 +63,12 @@ var AlignmentToolbar = exports.AlignmentToolbar = /*#__PURE__*/function (_React$
58
63
  });
59
64
  }
60
65
  });
66
+ (0, _defineProperty2.default)(_this, "handleOnItemActivated", function (_ref) {
67
+ var item = _ref.item,
68
+ _ref$shouldCloseMenu = _ref.shouldCloseMenu,
69
+ shouldCloseMenu = _ref$shouldCloseMenu === void 0 ? true : _ref$shouldCloseMenu;
70
+ return _this.changeAlignment(item.value.name, shouldCloseMenu);
71
+ });
61
72
  (0, _defineProperty2.default)(_this, "hide", function (attrs) {
62
73
  if (_this.state.isOpen) {
63
74
  _this.setState({
@@ -101,7 +112,7 @@ var AlignmentToolbar = exports.AlignmentToolbar = /*#__PURE__*/function (_React$
101
112
  }) ? 'compact' : 'none';
102
113
  if (toolbarType === _types2.ToolbarType.PRIMARY && toolbarSize && toolbarSize > _types.ToolbarSize.XL && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
103
114
  exposure: true
104
- })) {
115
+ }) && !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6')) {
105
116
  return /*#__PURE__*/_react.default.createElement(_Alignment.default, {
106
117
  onClick: function onClick(align) {
107
118
  return _this2.changeAlignment(align, false);
@@ -109,7 +120,72 @@ var AlignmentToolbar = exports.AlignmentToolbar = /*#__PURE__*/function (_React$
109
120
  className: (0, _runtime.ax)(["_ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t"])
110
121
  });
111
122
  }
112
- return /*#__PURE__*/_react.default.createElement(_ui.ToolbarDropdownWrapper, null, /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownContainer, {
123
+ var items = [{
124
+ key: 'alignmentLeft',
125
+ content: intl.formatMessage(_messages.alignmentMessages.alignLeft),
126
+ value: {
127
+ name: 'start'
128
+ },
129
+ isActive: (pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) === 'start',
130
+ elemAfter: /*#__PURE__*/_react.default.createElement(_ui.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.alignLeft)),
131
+ elemBefore: /*#__PURE__*/_react.default.createElement(_alignTextLeft.default, {
132
+ label: ""
133
+ })
134
+ }, {
135
+ key: 'alignmentCenter',
136
+ content: intl.formatMessage(_messages.alignmentMessages.alignCenter),
137
+ value: {
138
+ name: 'center'
139
+ },
140
+ isActive: (pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) === 'center',
141
+ elemAfter: /*#__PURE__*/_react.default.createElement(_ui.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.alignCenter)),
142
+ elemBefore: /*#__PURE__*/_react.default.createElement(_alignTextCenter.default, {
143
+ label: ""
144
+ })
145
+ }, {
146
+ key: 'alignmentRight',
147
+ content: intl.formatMessage(_messages.alignmentMessages.alignRight),
148
+ value: {
149
+ name: 'end'
150
+ },
151
+ isActive: (pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) === 'end',
152
+ elemAfter: /*#__PURE__*/_react.default.createElement(_ui.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.alignRight)),
153
+ elemBefore: /*#__PURE__*/_react.default.createElement(_alignTextRight.default, {
154
+ label: ""
155
+ })
156
+ }];
157
+ return /*#__PURE__*/_react.default.createElement(_ui.ToolbarDropdownWrapper, null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6') ? /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownMenuWithKeyboardNavigation, {
158
+ arrowKeyNavigationProviderOptions: {
159
+ type: _uiMenu.ArrowKeyNavigationType.MENU
160
+ },
161
+ items: [{
162
+ items: items
163
+ }],
164
+ isOpen: isOpen,
165
+ onItemActivated: this.handleOnItemActivated,
166
+ onOpenChange: function onOpenChange(attrs) {
167
+ return _this2.setState({
168
+ isOpen: attrs === null || attrs === void 0 ? void 0 : attrs.isOpen
169
+ });
170
+ },
171
+ mountTo: popupsMountPoint,
172
+ boundariesElement: popupsBoundariesElement,
173
+ scrollableElement: popupsScrollableElement,
174
+ fitWidth: 200
175
+ }, /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
176
+ spacing: isReducedSpacing ? reducedSpacing : 'default',
177
+ disabled: disabled,
178
+ selected: isOpen,
179
+ title: title,
180
+ "aria-label": title,
181
+ "aria-expanded": isOpen,
182
+ "aria-haspopup": true,
183
+ onClick: this.toggleOpen,
184
+ onKeyDown: this.toggleOpenByKeyboard,
185
+ iconBefore: /*#__PURE__*/_react.default.createElement(_ui.ToolbarDropdownTriggerWrapper, null, /*#__PURE__*/_react.default.createElement(_iconMap.IconMap, {
186
+ alignment: alignment
187
+ }), /*#__PURE__*/_react.default.createElement(_ui.ToolbarExpandIcon, null))
188
+ })) : /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownContainer, {
113
189
  mountTo: popupsMountPoint,
114
190
  boundariesElement: popupsBoundariesElement,
115
191
  scrollableElement: popupsScrollableElement,
package/dist/es2019/alignmentPlugin.js CHANGED
@@ -62,7 +62,7 @@ export const alignmentPlugin = ({
62
62
  }) => createPlugin(dispatch, defaultConfig)
63
63
  }, {
64
64
  name: 'annotationKeymap',
65
- plugin: () => keymapPlugin()
65
+ plugin: () => keymapPlugin(api)
66
66
  }];
67
67
  },
68
68
  pluginsOptions: {
package/dist/es2019/editor-commands/index.js CHANGED
@@ -1,5 +1,8 @@
1
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
1
2
  import { changeImageAlignment, toggleBlockMark } from '@atlaskit/editor-common/commands';
3
+ import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
2
4
  import { Selection } from '@atlaskit/editor-prosemirror/state';
5
+ import { fg } from '@atlaskit/platform-feature-flags';
3
6
  /**
4
7
  * Iterates over the commands one after the other,
5
8
  * passes the tr through and dispatches the cumulated transaction
@@ -40,7 +43,7 @@ export const isAlignable = align => (state, dispatch) => {
40
43
  align
41
44
  }, [paragraph, heading])(state, dispatch);
42
45
  };
43
- export const changeAlignment = align => (state, dispatch) => {
46
+ const changeBlockAlignmentWithAnalytics = (editorAnalyticsApi, align, inputMethod) => (state, dispatch) => {
44
47
  const {
45
48
  nodes: {
46
49
  paragraph,
@@ -50,7 +53,43 @@ export const changeAlignment = align => (state, dispatch) => {
50
53
  alignment
51
54
  }
52
55
  } = state.schema;
53
- return cascadeCommands([changeImageAlignment(align), toggleBlockMark(alignment, () => !align ? undefined : align === 'start' ? false : {
56
+ return withAnalytics(editorAnalyticsApi, {
57
+ eventType: EVENT_TYPE.TRACK,
58
+ actionSubject: ACTION_SUBJECT.ALIGNMENT,
59
+ action: ACTION.UPDATED,
60
+ actionSubjectId: ACTION_SUBJECT_ID.TEXT,
61
+ attributes: {
62
+ alignmentType: align,
63
+ inputMethod
64
+ }
65
+ })(toggleBlockMark(alignment, () => !align ? undefined : align === 'start' ? false : {
66
+ align
67
+ }, [paragraph, heading]))(state, dispatch);
68
+ };
69
+ const changeImageAlignmentWithAnalytics = (editorAnalyticsApi, align, inputMethod) => (state, dispatch) => {
70
+ return withAnalytics(editorAnalyticsApi, {
71
+ eventType: EVENT_TYPE.TRACK,
72
+ actionSubject: ACTION_SUBJECT.ALIGNMENT,
73
+ action: ACTION.UPDATED,
74
+ actionSubjectId: ACTION_SUBJECT_ID.MEDIA_SINGLE,
75
+ attributes: {
76
+ alignmentType: align,
77
+ inputMethod
78
+ }
79
+ })(changeImageAlignment(align))(state, dispatch);
80
+ };
81
+ export const changeAlignment = (align, api, inputMethod) => (state, dispatch) => {
82
+ var _api$analytics, _api$analytics2;
83
+ const {
84
+ nodes: {
85
+ paragraph,
86
+ heading
87
+ },
88
+ marks: {
89
+ alignment
90
+ }
91
+ } = state.schema;
92
+ return cascadeCommands(fg('platform_editor_add_alignment_tracking') ? [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)] : [changeImageAlignment(align), toggleBlockMark(alignment, () => !align ? undefined : align === 'start' ? false : {
54
93
  align
55
94
  }, [paragraph, heading])])(state, dispatch);
56
95
  };
package/dist/es2019/pm-plugins/keymap.js CHANGED
@@ -1,16 +1,20 @@
1
+ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
1
2
  import { alignCenter, alignLeft, alignRight, bindKeymapWithCommand, keymap } from '@atlaskit/editor-common/keymaps';
2
3
  import { changeAlignment } from '../editor-commands';
3
- export function keymapPlugin() {
4
+ export function keymapPlugin(api) {
4
5
  const list = {};
5
6
 
6
7
  // Ignored via go/ees005
8
+ bindKeymapWithCommand(
7
9
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
8
- bindKeymapWithCommand(alignLeft.common, changeAlignment('start'), list);
10
+ alignLeft.common, changeAlignment('start', api, INPUT_METHOD.SHORTCUT), list);
9
11
  // Ignored via go/ees005
12
+ bindKeymapWithCommand(
10
13
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
11
- bindKeymapWithCommand(alignCenter.common, changeAlignment('center'), list);
14
+ alignCenter.common, changeAlignment('center', api, INPUT_METHOD.SHORTCUT), list);
12
15
  // Ignored via go/ees005
16
+ bindKeymapWithCommand(
13
17
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
14
- bindKeymapWithCommand(alignRight.common, changeAlignment('end'), list);
18
+ alignRight.common, changeAlignment('end', api, INPUT_METHOD.SHORTCUT), list);
15
19
  return keymap(list);
16
20
  }
package/dist/es2019/ui/FloatingToolbarComponent.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { useCallback } from 'react';
2
+ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
2
3
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
3
4
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
4
5
  import { changeAlignment } from '../editor-commands';
@@ -16,8 +17,8 @@ export function FloatingToolbarComponent({
16
17
  alignmentState
17
18
  } = useSharedPluginState(api, ['alignment']);
18
19
  const changeAlignmentCallback = useCallback(align => {
19
- return changeAlignment(align)(editorView.state, editorView.dispatch);
20
- }, [editorView]);
20
+ return changeAlignment(align, api, INPUT_METHOD.FLOATING_TB)(editorView.state, editorView.dispatch);
21
+ }, [editorView, api]);
21
22
  return /*#__PURE__*/React.createElement(ToolbarAlignment, {
22
23
  pluginState: alignmentState,
23
24
  isReducedSpacing: editorExperiment('platform_editor_controls', 'variant1') ? false : FloatingToolbarSettings.isToolbarReducedSpacing,
package/dist/es2019/ui/PrimaryToolbarComponent.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { useCallback } from 'react';
2
+ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
2
3
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
3
4
  import { ToolbarSize } from '@atlaskit/editor-common/types';
4
5
  import { changeAlignment } from '../editor-commands';
@@ -17,7 +18,7 @@ export function PrimaryToolbarComponent({
17
18
  const {
18
19
  alignmentState
19
20
  } = useSharedPluginState(api, ['alignment']);
20
- const changeAlignmentCallback = useCallback(align => changeAlignment(align)(editorView.state, editorView.dispatch), [editorView]);
21
+ const changeAlignmentCallback = useCallback(align => changeAlignment(align, api, INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch), [editorView, api]);
21
22
  return /*#__PURE__*/React.createElement(ToolbarAlignment, {
22
23
  pluginState: alignmentState,
23
24
  isReducedSpacing: isToolbarReducedSpacing,
package/dist/es2019/ui/ToolbarAlignment/index.js CHANGED
@@ -4,10 +4,15 @@ import "./index.compiled.css";
4
4
  import { ax, ix } from "@compiled/react/runtime";
5
5
  import React from 'react';
6
6
  import { injectIntl } from 'react-intl-next';
7
+ import { alignCenter, alignLeft, alignRight, tooltip } from '@atlaskit/editor-common/keymaps';
7
8
  import { alignmentMessages as messages } from '@atlaskit/editor-common/messages';
8
9
  import { ToolbarSize } from '@atlaskit/editor-common/types';
9
- import { ToolbarDropdownTriggerWrapper, ToolbarDropdownWrapper, ToolbarExpandIcon, ToolbarSeparator } from '@atlaskit/editor-common/ui';
10
- import { ArrowKeyNavigationType, DropdownContainer as Dropdown, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
10
+ import { Shortcut, ToolbarDropdownTriggerWrapper, ToolbarDropdownWrapper, ToolbarExpandIcon, ToolbarSeparator } from '@atlaskit/editor-common/ui';
11
+ import { ArrowKeyNavigationType, DropdownContainer as Dropdown, DropdownMenuWithKeyboardNavigation as DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
12
+ import AlignTextCenterIcon from '@atlaskit/icon/core/align-text-center';
13
+ import AlignTextLeftIcon from '@atlaskit/icon/core/align-text-left';
14
+ import AlignTextRightIcon from '@atlaskit/icon/core/align-text-right';
15
+ import { fg } from '@atlaskit/platform-feature-flags';
11
16
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
12
17
  import { ToolbarType } from '../../pm-plugins/types';
13
18
  import Alignment from '../Alignment';
@@ -39,6 +44,10 @@ export class AlignmentToolbar extends React.Component {
39
44
  });
40
45
  }
41
46
  });
47
+ _defineProperty(this, "handleOnItemActivated", ({
48
+ item,
49
+ shouldCloseMenu = true
50
+ }) => this.changeAlignment(item.value.name, shouldCloseMenu));
42
51
  _defineProperty(this, "hide", attrs => {
43
52
  if (this.state.isOpen) {
44
53
  this.setState({
@@ -80,13 +89,76 @@ export class AlignmentToolbar extends React.Component {
80
89
  }) ? 'compact' : 'none';
81
90
  if (toolbarType === ToolbarType.PRIMARY && toolbarSize && toolbarSize > ToolbarSize.XL && editorExperiment('platform_editor_controls', 'variant1', {
82
91
  exposure: true
83
- })) {
92
+ }) && !fg('platform_editor_controls_patch_6')) {
84
93
  return /*#__PURE__*/React.createElement(Alignment, {
85
94
  onClick: align => this.changeAlignment(align, false),
86
95
  className: ax(["_ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t"])
87
96
  });
88
97
  }
89
- return /*#__PURE__*/React.createElement(ToolbarDropdownWrapper, null, /*#__PURE__*/React.createElement(Dropdown, {
98
+ const items = [{
99
+ key: 'alignmentLeft',
100
+ content: intl.formatMessage(messages.alignLeft),
101
+ value: {
102
+ name: 'start'
103
+ },
104
+ isActive: (pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) === 'start',
105
+ elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(alignLeft)),
106
+ elemBefore: /*#__PURE__*/React.createElement(AlignTextLeftIcon, {
107
+ label: ""
108
+ })
109
+ }, {
110
+ key: 'alignmentCenter',
111
+ content: intl.formatMessage(messages.alignCenter),
112
+ value: {
113
+ name: 'center'
114
+ },
115
+ isActive: (pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) === 'center',
116
+ elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(alignCenter)),
117
+ elemBefore: /*#__PURE__*/React.createElement(AlignTextCenterIcon, {
118
+ label: ""
119
+ })
120
+ }, {
121
+ key: 'alignmentRight',
122
+ content: intl.formatMessage(messages.alignRight),
123
+ value: {
124
+ name: 'end'
125
+ },
126
+ isActive: (pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) === 'end',
127
+ elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(alignRight)),
128
+ elemBefore: /*#__PURE__*/React.createElement(AlignTextRightIcon, {
129
+ label: ""
130
+ })
131
+ }];
132
+ return /*#__PURE__*/React.createElement(ToolbarDropdownWrapper, null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6') ? /*#__PURE__*/React.createElement(DropdownMenu, {
133
+ arrowKeyNavigationProviderOptions: {
134
+ type: ArrowKeyNavigationType.MENU
135
+ },
136
+ items: [{
137
+ items
138
+ }],
139
+ isOpen: isOpen,
140
+ onItemActivated: this.handleOnItemActivated,
141
+ onOpenChange: attrs => this.setState({
142
+ isOpen: attrs === null || attrs === void 0 ? void 0 : attrs.isOpen
143
+ }),
144
+ mountTo: popupsMountPoint,
145
+ boundariesElement: popupsBoundariesElement,
146
+ scrollableElement: popupsScrollableElement,
147
+ fitWidth: 200
148
+ }, /*#__PURE__*/React.createElement(ToolbarButton, {
149
+ spacing: isReducedSpacing ? reducedSpacing : 'default',
150
+ disabled: disabled,
151
+ selected: isOpen,
152
+ title: title,
153
+ "aria-label": title,
154
+ "aria-expanded": isOpen,
155
+ "aria-haspopup": true,
156
+ onClick: this.toggleOpen,
157
+ onKeyDown: this.toggleOpenByKeyboard,
158
+ iconBefore: /*#__PURE__*/React.createElement(ToolbarDropdownTriggerWrapper, null, /*#__PURE__*/React.createElement(IconMap, {
159
+ alignment: alignment
160
+ }), /*#__PURE__*/React.createElement(ToolbarExpandIcon, null))
161
+ })) : /*#__PURE__*/React.createElement(Dropdown, {
90
162
  mountTo: popupsMountPoint,
91
163
  boundariesElement: popupsBoundariesElement,
92
164
  scrollableElement: popupsScrollableElement,
package/dist/esm/alignmentPlugin.js CHANGED
@@ -62,7 +62,7 @@ export var alignmentPlugin = function alignmentPlugin(_ref) {
62
62
  }, {
63
63
  name: 'annotationKeymap',
64
64
  plugin: function plugin() {
65
- return keymapPlugin();
65
+ return keymapPlugin(api);
66
66
  }
67
67
  }];
68
68
  },
package/dist/esm/editor-commands/index.js CHANGED
@@ -1,5 +1,8 @@
1
+ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
1
2
  import { changeImageAlignment, toggleBlockMark } from '@atlaskit/editor-common/commands';
3
+ import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
2
4
  import { Selection } from '@atlaskit/editor-prosemirror/state';
5
+ import { fg } from '@atlaskit/platform-feature-flags';
3
6
  /**
4
7
  * Iterates over the commands one after the other,
5
8
  * passes the tr through and dispatches the cumulated transaction
@@ -40,14 +43,52 @@ export var isAlignable = function isAlignable(align) {
40
43
  }, [paragraph, heading])(state, dispatch);
41
44
  };
42
45
  };
43
- export var changeAlignment = function changeAlignment(align) {
46
+ var changeBlockAlignmentWithAnalytics = function changeBlockAlignmentWithAnalytics(editorAnalyticsApi, align, inputMethod) {
44
47
  return function (state, dispatch) {
45
48
  var _state$schema2 = state.schema,
46
49
  _state$schema2$nodes = _state$schema2.nodes,
47
50
  paragraph = _state$schema2$nodes.paragraph,
48
51
  heading = _state$schema2$nodes.heading,
49
52
  alignment = _state$schema2.marks.alignment;
50
- return cascadeCommands([changeImageAlignment(align), toggleBlockMark(alignment, function () {
53
+ return withAnalytics(editorAnalyticsApi, {
54
+ eventType: EVENT_TYPE.TRACK,
55
+ actionSubject: ACTION_SUBJECT.ALIGNMENT,
56
+ action: ACTION.UPDATED,
57
+ actionSubjectId: ACTION_SUBJECT_ID.TEXT,
58
+ attributes: {
59
+ alignmentType: align,
60
+ inputMethod: inputMethod
61
+ }
62
+ })(toggleBlockMark(alignment, function () {
63
+ return !align ? undefined : align === 'start' ? false : {
64
+ align: align
65
+ };
66
+ }, [paragraph, heading]))(state, dispatch);
67
+ };
68
+ };
69
+ var changeImageAlignmentWithAnalytics = function changeImageAlignmentWithAnalytics(editorAnalyticsApi, align, inputMethod) {
70
+ return function (state, dispatch) {
71
+ return withAnalytics(editorAnalyticsApi, {
72
+ eventType: EVENT_TYPE.TRACK,
73
+ actionSubject: ACTION_SUBJECT.ALIGNMENT,
74
+ action: ACTION.UPDATED,
75
+ actionSubjectId: ACTION_SUBJECT_ID.MEDIA_SINGLE,
76
+ attributes: {
77
+ alignmentType: align,
78
+ inputMethod: inputMethod
79
+ }
80
+ })(changeImageAlignment(align))(state, dispatch);
81
+ };
82
+ };
83
+ export var changeAlignment = function changeAlignment(align, api, inputMethod) {
84
+ return function (state, dispatch) {
85
+ var _api$analytics, _api$analytics2;
86
+ var _state$schema3 = state.schema,
87
+ _state$schema3$nodes = _state$schema3.nodes,
88
+ paragraph = _state$schema3$nodes.paragraph,
89
+ heading = _state$schema3$nodes.heading,
90
+ alignment = _state$schema3.marks.alignment;
91
+ return cascadeCommands(fg('platform_editor_add_alignment_tracking') ? [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)] : [changeImageAlignment(align), toggleBlockMark(alignment, function () {
51
92
  return !align ? undefined : align === 'start' ? false : {
52
93
  align: align
53
94
  };
package/dist/esm/pm-plugins/keymap.js CHANGED
@@ -1,16 +1,20 @@
1
+ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
1
2
  import { alignCenter, alignLeft, alignRight, bindKeymapWithCommand, keymap } from '@atlaskit/editor-common/keymaps';
2
3
  import { changeAlignment } from '../editor-commands';
3
- export function keymapPlugin() {
4
+ export function keymapPlugin(api) {
4
5
  var list = {};
5
6
 
6
7
  // Ignored via go/ees005
8
+ bindKeymapWithCommand(
7
9
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
8
- bindKeymapWithCommand(alignLeft.common, changeAlignment('start'), list);
10
+ alignLeft.common, changeAlignment('start', api, INPUT_METHOD.SHORTCUT), list);
9
11
  // Ignored via go/ees005
12
+ bindKeymapWithCommand(
10
13
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
11
- bindKeymapWithCommand(alignCenter.common, changeAlignment('center'), list);
14
+ alignCenter.common, changeAlignment('center', api, INPUT_METHOD.SHORTCUT), list);
12
15
  // Ignored via go/ees005
16
+ bindKeymapWithCommand(
13
17
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
14
- bindKeymapWithCommand(alignRight.common, changeAlignment('end'), list);
18
+ alignRight.common, changeAlignment('end', api, INPUT_METHOD.SHORTCUT), list);
15
19
  return keymap(list);
16
20
  }
package/dist/esm/ui/FloatingToolbarComponent.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { useCallback } from 'react';
2
+ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
2
3
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
3
4
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
4
5
  import { changeAlignment } from '../editor-commands';
@@ -14,8 +15,8 @@ export function FloatingToolbarComponent(_ref) {
14
15
  var _useSharedPluginState = useSharedPluginState(api, ['alignment']),
15
16
  alignmentState = _useSharedPluginState.alignmentState;
16
17
  var changeAlignmentCallback = useCallback(function (align) {
17
- return changeAlignment(align)(editorView.state, editorView.dispatch);
18
- }, [editorView]);
18
+ return changeAlignment(align, api, INPUT_METHOD.FLOATING_TB)(editorView.state, editorView.dispatch);
19
+ }, [editorView, api]);
19
20
  return /*#__PURE__*/React.createElement(ToolbarAlignment, {
20
21
  pluginState: alignmentState,
21
22
  isReducedSpacing: editorExperiment('platform_editor_controls', 'variant1') ? false : FloatingToolbarSettings.isToolbarReducedSpacing,
package/dist/esm/ui/PrimaryToolbarComponent.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { useCallback } from 'react';
2
+ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
2
3
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
3
4
  import { ToolbarSize } from '@atlaskit/editor-common/types';
4
5
  import { changeAlignment } from '../editor-commands';
@@ -17,8 +18,8 @@ export function PrimaryToolbarComponent(_ref) {
17
18
  var _useSharedPluginState = useSharedPluginState(api, ['alignment']),
18
19
  alignmentState = _useSharedPluginState.alignmentState;
19
20
  var changeAlignmentCallback = useCallback(function (align) {
20
- return changeAlignment(align)(editorView.state, editorView.dispatch);
21
- }, [editorView]);
21
+ return changeAlignment(align, api, INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
22
+ }, [editorView, api]);
22
23
  return /*#__PURE__*/React.createElement(ToolbarAlignment, {
23
24
  pluginState: alignmentState,
24
25
  isReducedSpacing: isToolbarReducedSpacing,
package/dist/esm/ui/ToolbarAlignment/index.js CHANGED
@@ -11,10 +11,15 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
11
11
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
12
12
  import React from 'react';
13
13
  import { injectIntl } from 'react-intl-next';
14
+ import { alignCenter, alignLeft, alignRight, tooltip } from '@atlaskit/editor-common/keymaps';
14
15
  import { alignmentMessages as messages } from '@atlaskit/editor-common/messages';
15
16
  import { ToolbarSize } from '@atlaskit/editor-common/types';
16
- import { ToolbarDropdownTriggerWrapper, ToolbarDropdownWrapper, ToolbarExpandIcon, ToolbarSeparator } from '@atlaskit/editor-common/ui';
17
- import { ArrowKeyNavigationType, DropdownContainer as Dropdown, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
17
+ import { Shortcut, ToolbarDropdownTriggerWrapper, ToolbarDropdownWrapper, ToolbarExpandIcon, ToolbarSeparator } from '@atlaskit/editor-common/ui';
18
+ import { ArrowKeyNavigationType, DropdownContainer as Dropdown, DropdownMenuWithKeyboardNavigation as DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
19
+ import AlignTextCenterIcon from '@atlaskit/icon/core/align-text-center';
20
+ import AlignTextLeftIcon from '@atlaskit/icon/core/align-text-left';
21
+ import AlignTextRightIcon from '@atlaskit/icon/core/align-text-right';
22
+ import { fg } from '@atlaskit/platform-feature-flags';
18
23
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
19
24
  import { ToolbarType } from '../../pm-plugins/types';
20
25
  import Alignment from '../Alignment';
@@ -51,6 +56,12 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
51
56
  });
52
57
  }
53
58
  });
59
+ _defineProperty(_this, "handleOnItemActivated", function (_ref) {
60
+ var item = _ref.item,
61
+ _ref$shouldCloseMenu = _ref.shouldCloseMenu,
62
+ shouldCloseMenu = _ref$shouldCloseMenu === void 0 ? true : _ref$shouldCloseMenu;
63
+ return _this.changeAlignment(item.value.name, shouldCloseMenu);
64
+ });
54
65
  _defineProperty(_this, "hide", function (attrs) {
55
66
  if (_this.state.isOpen) {
56
67
  _this.setState({
@@ -94,7 +105,7 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
94
105
  }) ? 'compact' : 'none';
95
106
  if (toolbarType === ToolbarType.PRIMARY && toolbarSize && toolbarSize > ToolbarSize.XL && editorExperiment('platform_editor_controls', 'variant1', {
96
107
  exposure: true
97
- })) {
108
+ }) && !fg('platform_editor_controls_patch_6')) {
98
109
  return /*#__PURE__*/React.createElement(Alignment, {
99
110
  onClick: function onClick(align) {
100
111
  return _this2.changeAlignment(align, false);
@@ -102,7 +113,72 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
102
113
  className: ax(["_ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t"])
103
114
  });
104
115
  }
105
- return /*#__PURE__*/React.createElement(ToolbarDropdownWrapper, null, /*#__PURE__*/React.createElement(Dropdown, {
116
+ var items = [{
117
+ key: 'alignmentLeft',
118
+ content: intl.formatMessage(messages.alignLeft),
119
+ value: {
120
+ name: 'start'
121
+ },
122
+ isActive: (pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) === 'start',
123
+ elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(alignLeft)),
124
+ elemBefore: /*#__PURE__*/React.createElement(AlignTextLeftIcon, {
125
+ label: ""
126
+ })
127
+ }, {
128
+ key: 'alignmentCenter',
129
+ content: intl.formatMessage(messages.alignCenter),
130
+ value: {
131
+ name: 'center'
132
+ },
133
+ isActive: (pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) === 'center',
134
+ elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(alignCenter)),
135
+ elemBefore: /*#__PURE__*/React.createElement(AlignTextCenterIcon, {
136
+ label: ""
137
+ })
138
+ }, {
139
+ key: 'alignmentRight',
140
+ content: intl.formatMessage(messages.alignRight),
141
+ value: {
142
+ name: 'end'
143
+ },
144
+ isActive: (pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) === 'end',
145
+ elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(alignRight)),
146
+ elemBefore: /*#__PURE__*/React.createElement(AlignTextRightIcon, {
147
+ label: ""
148
+ })
149
+ }];
150
+ return /*#__PURE__*/React.createElement(ToolbarDropdownWrapper, null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6') ? /*#__PURE__*/React.createElement(DropdownMenu, {
151
+ arrowKeyNavigationProviderOptions: {
152
+ type: ArrowKeyNavigationType.MENU
153
+ },
154
+ items: [{
155
+ items: items
156
+ }],
157
+ isOpen: isOpen,
158
+ onItemActivated: this.handleOnItemActivated,
159
+ onOpenChange: function onOpenChange(attrs) {
160
+ return _this2.setState({
161
+ isOpen: attrs === null || attrs === void 0 ? void 0 : attrs.isOpen
162
+ });
163
+ },
164
+ mountTo: popupsMountPoint,
165
+ boundariesElement: popupsBoundariesElement,
166
+ scrollableElement: popupsScrollableElement,
167
+ fitWidth: 200
168
+ }, /*#__PURE__*/React.createElement(ToolbarButton, {
169
+ spacing: isReducedSpacing ? reducedSpacing : 'default',
170
+ disabled: disabled,
171
+ selected: isOpen,
172
+ title: title,
173
+ "aria-label": title,
174
+ "aria-expanded": isOpen,
175
+ "aria-haspopup": true,
176
+ onClick: this.toggleOpen,
177
+ onKeyDown: this.toggleOpenByKeyboard,
178
+ iconBefore: /*#__PURE__*/React.createElement(ToolbarDropdownTriggerWrapper, null, /*#__PURE__*/React.createElement(IconMap, {
179
+ alignment: alignment
180
+ }), /*#__PURE__*/React.createElement(ToolbarExpandIcon, null))
181
+ })) : /*#__PURE__*/React.createElement(Dropdown, {
106
182
  mountTo: popupsMountPoint,
107
183
  boundariesElement: popupsBoundariesElement,
108
184
  scrollableElement: popupsScrollableElement,
package/dist/types/alignmentPluginType.d.ts CHANGED
@@ -1,12 +1,16 @@
1
+ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
1
2
  import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
3
+ import { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
2
4
  import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
3
5
  import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
4
6
  import type { AlignmentPluginState } from './pm-plugins/types';
5
7
  export type AlignmentPluginDependencies = [
6
8
  OptionalPlugin<PrimaryToolbarPlugin>,
7
- OptionalPlugin<SelectionToolbarPlugin>
9
+ OptionalPlugin<SelectionToolbarPlugin>,
10
+ OptionalPlugin<AnalyticsPlugin>
8
11
  ];
9
12
  export type AlignmentPlugin = NextEditorPlugin<'alignment', {
10
13
  sharedState: AlignmentPluginState | undefined;
11
14
  dependencies: AlignmentPluginDependencies;
12
15
  }>;
16
+ export type InputMethod = INPUT_METHOD.TOOLBAR | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.SHORTCUT;
package/dist/types/editor-commands/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import type { Command } from '@atlaskit/editor-common/types';
1
+ import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
2
+ import type { AlignmentPlugin, InputMethod } from '../alignmentPluginType';
2
3
  import type { AlignmentState } from '../pm-plugins/types';
3
4
  export declare const isAlignable: (align?: AlignmentState) => Command;
4
- export declare const changeAlignment: (align?: AlignmentState) => Command;
5
+ export declare const changeAlignment: (align?: AlignmentState, api?: ExtractInjectionAPI<AlignmentPlugin>, inputMethod?: InputMethod) => Command;
package/dist/types/pm-plugins/keymap.d.ts CHANGED
@@ -1,2 +1,4 @@
1
1
  import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
2
- export declare function keymapPlugin(): SafePlugin;
2
+ import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
+ import { AlignmentPlugin } from '../alignmentPluginType';
4
+ export declare function keymapPlugin(api?: ExtractInjectionAPI<AlignmentPlugin>): SafePlugin;
package/dist/types/ui/ToolbarAlignment/index.d.ts CHANGED
@@ -31,6 +31,7 @@ export declare class AlignmentToolbar extends React.Component<Props & WrappedCom
31
31
  private changeAlignment;
32
32
  private toggleOpen;
33
33
  private toggleOpenByKeyboard;
34
+ private handleOnItemActivated;
34
35
  private hide;
35
36
  private hideOnEscape;
36
37
  }
package/dist/types-ts4.5/alignmentPluginType.d.ts CHANGED
@@ -1,12 +1,16 @@
1
+ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
1
2
  import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
3
+ import { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
2
4
  import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
3
5
  import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
4
6
  import type { AlignmentPluginState } from './pm-plugins/types';
5
7
  export type AlignmentPluginDependencies = [
6
8
  OptionalPlugin<PrimaryToolbarPlugin>,
7
- OptionalPlugin<SelectionToolbarPlugin>
9
+ OptionalPlugin<SelectionToolbarPlugin>,
10
+ OptionalPlugin<AnalyticsPlugin>
8
11
  ];
9
12
  export type AlignmentPlugin = NextEditorPlugin<'alignment', {
10
13
  sharedState: AlignmentPluginState | undefined;
11
14
  dependencies: AlignmentPluginDependencies;
12
15
  }>;
16
+ export type InputMethod = INPUT_METHOD.TOOLBAR | INPUT_METHOD.FLOATING_TB | INPUT_METHOD.SHORTCUT;
package/dist/types-ts4.5/editor-commands/index.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import type { Command } from '@atlaskit/editor-common/types';
1
+ import type { Command, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
2
+ import type { AlignmentPlugin, InputMethod } from '../alignmentPluginType';
2
3
  import type { AlignmentState } from '../pm-plugins/types';
3
4
  export declare const isAlignable: (align?: AlignmentState) => Command;
4
- export declare const changeAlignment: (align?: AlignmentState) => Command;
5
+ export declare const changeAlignment: (align?: AlignmentState, api?: ExtractInjectionAPI<AlignmentPlugin>, inputMethod?: InputMethod) => Command;
package/dist/types-ts4.5/pm-plugins/keymap.d.ts CHANGED
@@ -1,2 +1,4 @@
1
1
  import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
2
- export declare function keymapPlugin(): SafePlugin;
2
+ import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
+ import { AlignmentPlugin } from '../alignmentPluginType';
4
+ export declare function keymapPlugin(api?: ExtractInjectionAPI<AlignmentPlugin>): SafePlugin;
package/dist/types-ts4.5/ui/ToolbarAlignment/index.d.ts CHANGED
@@ -31,6 +31,7 @@ export declare class AlignmentToolbar extends React.Component<Props & WrappedCom
31
31
  private changeAlignment;
32
32
  private toggleOpen;
33
33
  private toggleOpenByKeyboard;
34
+ private handleOnItemActivated;
34
35
  private hide;
35
36
  private hideOnEscape;
36
37
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-alignment",
3
- "version": "3.1.8",
3
+ "version": "3.1.10",
4
4
  "description": "Alignment plugin for @atlaskit/editor-core",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -24,20 +24,27 @@
24
24
  "platform-feature-flags": {
25
25
  "platform-visual-refresh-icons": {
26
26
  "type": "boolean"
27
+ },
28
+ "platform_editor_add_alignment_tracking": {
29
+ "type": "boolean"
30
+ },
31
+ "platform_editor_controls_patch_6": {
32
+ "type": "boolean"
27
33
  }
28
34
  },
29
35
  "dependencies": {
30
36
  "@atlaskit/adf-schema": "^47.6.0",
31
37
  "@atlaskit/css": "^0.10.0",
32
- "@atlaskit/editor-common": "^103.0.0",
33
- "@atlaskit/editor-plugin-primary-toolbar": "^3.1.0",
34
- "@atlaskit/editor-plugin-selection-toolbar": "^3.1.0",
38
+ "@atlaskit/editor-common": "^103.9.0",
39
+ "@atlaskit/editor-plugin-analytics": "^2.2.0",
40
+ "@atlaskit/editor-plugin-primary-toolbar": "^3.2.0",
41
+ "@atlaskit/editor-plugin-selection-toolbar": "^3.5.0",
35
42
  "@atlaskit/editor-prosemirror": "7.0.0",
36
43
  "@atlaskit/editor-tables": "^2.9.0",
37
- "@atlaskit/icon": "^25.5.0",
44
+ "@atlaskit/icon": "^25.6.0",
38
45
  "@atlaskit/platform-feature-flags": "^1.1.0",
39
- "@atlaskit/tmp-editor-statsig": "^4.6.0",
40
- "@atlaskit/tokens": "^4.7.0",
46
+ "@atlaskit/tmp-editor-statsig": "^4.12.0",
47
+ "@atlaskit/tokens": "^4.8.0",
41
48
  "@babel/runtime": "^7.0.0",
42
49
  "@compiled/react": "^0.18.3"
43
50
  },