@atlaskit/editor-plugin-alignment 3.1.9 → 3.1.11
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.
- package/CHANGELOG.md +19 -0
- package/dist/cjs/ui/FloatingToolbarComponent.js +15 -7
- package/dist/cjs/ui/PrimaryToolbarComponent.js +16 -7
- package/dist/cjs/ui/ToolbarAlignment/index.js +81 -6
- package/dist/es2019/ui/FloatingToolbarComponent.js +15 -7
- package/dist/es2019/ui/PrimaryToolbarComponent.js +16 -7
- package/dist/es2019/ui/ToolbarAlignment/index.js +78 -7
- package/dist/esm/ui/FloatingToolbarComponent.js +15 -7
- package/dist/esm/ui/PrimaryToolbarComponent.js +16 -7
- package/dist/esm/ui/ToolbarAlignment/index.js +83 -8
- package/dist/types/ui/ToolbarAlignment/index.d.ts +3 -2
- package/dist/types-ts4.5/ui/ToolbarAlignment/index.d.ts +3 -2
- package/package.json +14 -11
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-alignment
|
|
2
2
|
|
|
3
|
+
## 3.1.11
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#145138](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/145138)
|
|
8
|
+
[`0ba0ff24c0e33`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0ba0ff24c0e33) -
|
|
9
|
+
Enable useSharedPluginStateSelector in accessibility, alignment, annotation and avatar-group
|
|
10
|
+
plugins
|
|
11
|
+
- Updated dependencies
|
|
12
|
+
|
|
13
|
+
## 3.1.10
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- [#142312](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142312)
|
|
18
|
+
[`21eed5379866d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/21eed5379866d) -
|
|
19
|
+
[ux] Update the look of alignment options dropdown.
|
|
20
|
+
- Updated dependencies
|
|
21
|
+
|
|
3
22
|
## 3.1.9
|
|
4
23
|
|
|
5
24
|
### Patch Changes
|
|
@@ -9,6 +9,7 @@ exports.FloatingToolbarComponent = FloatingToolbarComponent;
|
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
11
11
|
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
12
|
+
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
|
|
12
13
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
13
14
|
var _editorCommands = require("../editor-commands");
|
|
14
15
|
var _types = require("../pm-plugins/types");
|
|
@@ -22,19 +23,26 @@ var FloatingToolbarSettings = {
|
|
|
22
23
|
function FloatingToolbarComponent(_ref) {
|
|
23
24
|
var api = _ref.api,
|
|
24
25
|
editorView = _ref.editorView;
|
|
25
|
-
var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['alignment']
|
|
26
|
+
var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['alignment'], {
|
|
27
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
|
|
28
|
+
}),
|
|
26
29
|
alignmentState = _useSharedPluginState.alignmentState;
|
|
30
|
+
var alignSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'alignment.align', {
|
|
31
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
32
|
+
});
|
|
33
|
+
var align = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? alignSelector : alignmentState === null || alignmentState === void 0 ? void 0 : alignmentState.align;
|
|
34
|
+
var isEnabledSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'alignment.isEnabled', {
|
|
35
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
36
|
+
});
|
|
37
|
+
var isEnabled = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isEnabledSelector : alignmentState === null || alignmentState === void 0 ? void 0 : alignmentState.isEnabled;
|
|
27
38
|
var changeAlignmentCallback = (0, _react.useCallback)(function (align) {
|
|
28
39
|
return (0, _editorCommands.changeAlignment)(align, api, _analytics.INPUT_METHOD.FLOATING_TB)(editorView.state, editorView.dispatch);
|
|
29
40
|
}, [editorView, api]);
|
|
30
41
|
return /*#__PURE__*/_react.default.createElement(_ToolbarAlignment.default, {
|
|
31
|
-
|
|
42
|
+
align: align,
|
|
32
43
|
isReducedSpacing: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? false : FloatingToolbarSettings.isToolbarReducedSpacing,
|
|
33
|
-
changeAlignment: changeAlignmentCallback
|
|
34
|
-
|
|
35
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
36
|
-
,
|
|
37
|
-
disabled: FloatingToolbarSettings.disabled || !alignmentState.isEnabled,
|
|
44
|
+
changeAlignment: changeAlignmentCallback,
|
|
45
|
+
disabled: FloatingToolbarSettings.disabled || !isEnabled,
|
|
38
46
|
toolbarType: _types.ToolbarType.FLOATING,
|
|
39
47
|
api: api
|
|
40
48
|
});
|
|
@@ -10,6 +10,8 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
10
10
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
11
11
|
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
12
12
|
var _types = require("@atlaskit/editor-common/types");
|
|
13
|
+
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
|
|
14
|
+
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
13
15
|
var _editorCommands = require("../editor-commands");
|
|
14
16
|
var _types2 = require("../pm-plugins/types");
|
|
15
17
|
var _ToolbarAlignment = _interopRequireDefault(require("./ToolbarAlignment"));
|
|
@@ -25,19 +27,26 @@ function PrimaryToolbarComponent(_ref) {
|
|
|
25
27
|
isToolbarReducedSpacing = _ref.isToolbarReducedSpacing,
|
|
26
28
|
_ref$toolbarSize = _ref.toolbarSize,
|
|
27
29
|
toolbarSize = _ref$toolbarSize === void 0 ? _types.ToolbarSize.XXL : _ref$toolbarSize;
|
|
28
|
-
var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['alignment']
|
|
30
|
+
var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['alignment'], {
|
|
31
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)
|
|
32
|
+
}),
|
|
29
33
|
alignmentState = _useSharedPluginState.alignmentState;
|
|
34
|
+
var alignSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'alignment.align', {
|
|
35
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
36
|
+
});
|
|
37
|
+
var align = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? alignSelector : alignmentState === null || alignmentState === void 0 ? void 0 : alignmentState.align;
|
|
38
|
+
var isEnabledSelector = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'alignment.isEnabled', {
|
|
39
|
+
disabled: (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', false)
|
|
40
|
+
});
|
|
41
|
+
var isEnabled = (0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true) ? isEnabledSelector : alignmentState === null || alignmentState === void 0 ? void 0 : alignmentState.isEnabled;
|
|
30
42
|
var changeAlignmentCallback = (0, _react.useCallback)(function (align) {
|
|
31
43
|
return (0, _editorCommands.changeAlignment)(align, api, _analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
|
|
32
44
|
}, [editorView, api]);
|
|
33
45
|
return /*#__PURE__*/_react.default.createElement(_ToolbarAlignment.default, {
|
|
34
|
-
|
|
46
|
+
align: align,
|
|
35
47
|
isReducedSpacing: isToolbarReducedSpacing,
|
|
36
|
-
changeAlignment: changeAlignmentCallback
|
|
37
|
-
|
|
38
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
39
|
-
,
|
|
40
|
-
disabled: disabled || !alignmentState.isEnabled,
|
|
48
|
+
changeAlignment: changeAlignmentCallback,
|
|
49
|
+
disabled: disabled || !isEnabled,
|
|
41
50
|
popupsMountPoint: popupsMountPoint,
|
|
42
51
|
popupsBoundariesElement: popupsBoundariesElement,
|
|
43
52
|
popupsScrollableElement: popupsScrollableElement,
|
|
@@ -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({
|
|
@@ -80,28 +91,27 @@ var AlignmentToolbar = exports.AlignmentToolbar = /*#__PURE__*/function (_React$
|
|
|
80
91
|
return (0, _createClass2.default)(AlignmentToolbar, [{
|
|
81
92
|
key: "render",
|
|
82
93
|
value: function render() {
|
|
83
|
-
var
|
|
84
|
-
_this2 = this;
|
|
94
|
+
var _this2 = this;
|
|
85
95
|
var isOpen = this.state.isOpen;
|
|
86
96
|
var _this$props = this.props,
|
|
87
97
|
popupsMountPoint = _this$props.popupsMountPoint,
|
|
88
98
|
popupsBoundariesElement = _this$props.popupsBoundariesElement,
|
|
89
99
|
popupsScrollableElement = _this$props.popupsScrollableElement,
|
|
90
100
|
isReducedSpacing = _this$props.isReducedSpacing,
|
|
91
|
-
|
|
101
|
+
align = _this$props.align,
|
|
92
102
|
disabled = _this$props.disabled,
|
|
93
103
|
intl = _this$props.intl,
|
|
94
104
|
api = _this$props.api,
|
|
95
105
|
toolbarType = _this$props.toolbarType,
|
|
96
106
|
toolbarSize = _this$props.toolbarSize;
|
|
97
|
-
var alignment =
|
|
107
|
+
var alignment = align !== null && align !== void 0 ? align : 'start';
|
|
98
108
|
var title = intl.formatMessage(_messages.alignmentMessages.alignment);
|
|
99
109
|
var reducedSpacing = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
|
|
100
110
|
exposure: true
|
|
101
111
|
}) ? 'compact' : 'none';
|
|
102
112
|
if (toolbarType === _types2.ToolbarType.PRIMARY && toolbarSize && toolbarSize > _types.ToolbarSize.XL && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
|
|
103
113
|
exposure: true
|
|
104
|
-
})) {
|
|
114
|
+
}) && !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6')) {
|
|
105
115
|
return /*#__PURE__*/_react.default.createElement(_Alignment.default, {
|
|
106
116
|
onClick: function onClick(align) {
|
|
107
117
|
return _this2.changeAlignment(align, false);
|
|
@@ -109,7 +119,72 @@ var AlignmentToolbar = exports.AlignmentToolbar = /*#__PURE__*/function (_React$
|
|
|
109
119
|
className: (0, _runtime.ax)(["_ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t"])
|
|
110
120
|
});
|
|
111
121
|
}
|
|
112
|
-
|
|
122
|
+
var items = [{
|
|
123
|
+
key: 'alignmentLeft',
|
|
124
|
+
content: intl.formatMessage(_messages.alignmentMessages.alignLeft),
|
|
125
|
+
value: {
|
|
126
|
+
name: 'start'
|
|
127
|
+
},
|
|
128
|
+
isActive: align === 'start',
|
|
129
|
+
elemAfter: /*#__PURE__*/_react.default.createElement(_ui.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.alignLeft)),
|
|
130
|
+
elemBefore: /*#__PURE__*/_react.default.createElement(_alignTextLeft.default, {
|
|
131
|
+
label: ""
|
|
132
|
+
})
|
|
133
|
+
}, {
|
|
134
|
+
key: 'alignmentCenter',
|
|
135
|
+
content: intl.formatMessage(_messages.alignmentMessages.alignCenter),
|
|
136
|
+
value: {
|
|
137
|
+
name: 'center'
|
|
138
|
+
},
|
|
139
|
+
isActive: align === 'center',
|
|
140
|
+
elemAfter: /*#__PURE__*/_react.default.createElement(_ui.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.alignCenter)),
|
|
141
|
+
elemBefore: /*#__PURE__*/_react.default.createElement(_alignTextCenter.default, {
|
|
142
|
+
label: ""
|
|
143
|
+
})
|
|
144
|
+
}, {
|
|
145
|
+
key: 'alignmentRight',
|
|
146
|
+
content: intl.formatMessage(_messages.alignmentMessages.alignRight),
|
|
147
|
+
value: {
|
|
148
|
+
name: 'end'
|
|
149
|
+
},
|
|
150
|
+
isActive: align === 'end',
|
|
151
|
+
elemAfter: /*#__PURE__*/_react.default.createElement(_ui.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.alignRight)),
|
|
152
|
+
elemBefore: /*#__PURE__*/_react.default.createElement(_alignTextRight.default, {
|
|
153
|
+
label: ""
|
|
154
|
+
})
|
|
155
|
+
}];
|
|
156
|
+
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, {
|
|
157
|
+
arrowKeyNavigationProviderOptions: {
|
|
158
|
+
type: _uiMenu.ArrowKeyNavigationType.MENU
|
|
159
|
+
},
|
|
160
|
+
items: [{
|
|
161
|
+
items: items
|
|
162
|
+
}],
|
|
163
|
+
isOpen: isOpen,
|
|
164
|
+
onItemActivated: this.handleOnItemActivated,
|
|
165
|
+
onOpenChange: function onOpenChange(attrs) {
|
|
166
|
+
return _this2.setState({
|
|
167
|
+
isOpen: attrs === null || attrs === void 0 ? void 0 : attrs.isOpen
|
|
168
|
+
});
|
|
169
|
+
},
|
|
170
|
+
mountTo: popupsMountPoint,
|
|
171
|
+
boundariesElement: popupsBoundariesElement,
|
|
172
|
+
scrollableElement: popupsScrollableElement,
|
|
173
|
+
fitWidth: 200
|
|
174
|
+
}, /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
|
|
175
|
+
spacing: isReducedSpacing ? reducedSpacing : 'default',
|
|
176
|
+
disabled: disabled,
|
|
177
|
+
selected: isOpen,
|
|
178
|
+
title: title,
|
|
179
|
+
"aria-label": title,
|
|
180
|
+
"aria-expanded": isOpen,
|
|
181
|
+
"aria-haspopup": true,
|
|
182
|
+
onClick: this.toggleOpen,
|
|
183
|
+
onKeyDown: this.toggleOpenByKeyboard,
|
|
184
|
+
iconBefore: /*#__PURE__*/_react.default.createElement(_ui.ToolbarDropdownTriggerWrapper, null, /*#__PURE__*/_react.default.createElement(_iconMap.IconMap, {
|
|
185
|
+
alignment: alignment
|
|
186
|
+
}), /*#__PURE__*/_react.default.createElement(_ui.ToolbarExpandIcon, null))
|
|
187
|
+
})) : /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownContainer, {
|
|
113
188
|
mountTo: popupsMountPoint,
|
|
114
189
|
boundariesElement: popupsBoundariesElement,
|
|
115
190
|
scrollableElement: popupsScrollableElement,
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { useCallback } from 'react';
|
|
2
2
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
3
|
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
4
|
+
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
4
5
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
5
6
|
import { changeAlignment } from '../editor-commands';
|
|
6
7
|
import { ToolbarType } from '../pm-plugins/types';
|
|
@@ -15,18 +16,25 @@ export function FloatingToolbarComponent({
|
|
|
15
16
|
}) {
|
|
16
17
|
const {
|
|
17
18
|
alignmentState
|
|
18
|
-
} = useSharedPluginState(api, ['alignment']
|
|
19
|
+
} = useSharedPluginState(api, ['alignment'], {
|
|
20
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
|
|
21
|
+
});
|
|
22
|
+
const alignSelector = useSharedPluginStateSelector(api, 'alignment.align', {
|
|
23
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
24
|
+
});
|
|
25
|
+
const align = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? alignSelector : alignmentState === null || alignmentState === void 0 ? void 0 : alignmentState.align;
|
|
26
|
+
const isEnabledSelector = useSharedPluginStateSelector(api, 'alignment.isEnabled', {
|
|
27
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
28
|
+
});
|
|
29
|
+
const isEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isEnabledSelector : alignmentState === null || alignmentState === void 0 ? void 0 : alignmentState.isEnabled;
|
|
19
30
|
const changeAlignmentCallback = useCallback(align => {
|
|
20
31
|
return changeAlignment(align, api, INPUT_METHOD.FLOATING_TB)(editorView.state, editorView.dispatch);
|
|
21
32
|
}, [editorView, api]);
|
|
22
33
|
return /*#__PURE__*/React.createElement(ToolbarAlignment, {
|
|
23
|
-
|
|
34
|
+
align: align,
|
|
24
35
|
isReducedSpacing: editorExperiment('platform_editor_controls', 'variant1') ? false : FloatingToolbarSettings.isToolbarReducedSpacing,
|
|
25
|
-
changeAlignment: changeAlignmentCallback
|
|
26
|
-
|
|
27
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
28
|
-
,
|
|
29
|
-
disabled: FloatingToolbarSettings.disabled || !alignmentState.isEnabled,
|
|
36
|
+
changeAlignment: changeAlignmentCallback,
|
|
37
|
+
disabled: FloatingToolbarSettings.disabled || !isEnabled,
|
|
30
38
|
toolbarType: ToolbarType.FLOATING,
|
|
31
39
|
api: api
|
|
32
40
|
});
|
|
@@ -2,6 +2,8 @@ import React, { useCallback } from 'react';
|
|
|
2
2
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
3
|
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
4
4
|
import { ToolbarSize } from '@atlaskit/editor-common/types';
|
|
5
|
+
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
6
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
5
7
|
import { changeAlignment } from '../editor-commands';
|
|
6
8
|
import { ToolbarType } from '../pm-plugins/types';
|
|
7
9
|
import ToolbarAlignment from './ToolbarAlignment';
|
|
@@ -17,16 +19,23 @@ export function PrimaryToolbarComponent({
|
|
|
17
19
|
}) {
|
|
18
20
|
const {
|
|
19
21
|
alignmentState
|
|
20
|
-
} = useSharedPluginState(api, ['alignment']
|
|
22
|
+
} = useSharedPluginState(api, ['alignment'], {
|
|
23
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
|
|
24
|
+
});
|
|
25
|
+
const alignSelector = useSharedPluginStateSelector(api, 'alignment.align', {
|
|
26
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
27
|
+
});
|
|
28
|
+
const align = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? alignSelector : alignmentState === null || alignmentState === void 0 ? void 0 : alignmentState.align;
|
|
29
|
+
const isEnabledSelector = useSharedPluginStateSelector(api, 'alignment.isEnabled', {
|
|
30
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
31
|
+
});
|
|
32
|
+
const isEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isEnabledSelector : alignmentState === null || alignmentState === void 0 ? void 0 : alignmentState.isEnabled;
|
|
21
33
|
const changeAlignmentCallback = useCallback(align => changeAlignment(align, api, INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch), [editorView, api]);
|
|
22
34
|
return /*#__PURE__*/React.createElement(ToolbarAlignment, {
|
|
23
|
-
|
|
35
|
+
align: align,
|
|
24
36
|
isReducedSpacing: isToolbarReducedSpacing,
|
|
25
|
-
changeAlignment: changeAlignmentCallback
|
|
26
|
-
|
|
27
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
28
|
-
,
|
|
29
|
-
disabled: disabled || !alignmentState.isEnabled,
|
|
37
|
+
changeAlignment: changeAlignmentCallback,
|
|
38
|
+
disabled: disabled || !isEnabled,
|
|
30
39
|
popupsMountPoint: popupsMountPoint,
|
|
31
40
|
popupsBoundariesElement: popupsBoundariesElement,
|
|
32
41
|
popupsScrollableElement: popupsScrollableElement,
|
|
@@ -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({
|
|
@@ -57,7 +66,6 @@ export class AlignmentToolbar extends React.Component {
|
|
|
57
66
|
});
|
|
58
67
|
}
|
|
59
68
|
render() {
|
|
60
|
-
var _pluginState$align;
|
|
61
69
|
const {
|
|
62
70
|
isOpen
|
|
63
71
|
} = this.state;
|
|
@@ -66,27 +74,90 @@ export class AlignmentToolbar extends React.Component {
|
|
|
66
74
|
popupsBoundariesElement,
|
|
67
75
|
popupsScrollableElement,
|
|
68
76
|
isReducedSpacing,
|
|
69
|
-
|
|
77
|
+
align,
|
|
70
78
|
disabled,
|
|
71
79
|
intl,
|
|
72
80
|
api,
|
|
73
81
|
toolbarType,
|
|
74
82
|
toolbarSize
|
|
75
83
|
} = this.props;
|
|
76
|
-
const alignment =
|
|
84
|
+
const alignment = align !== null && align !== void 0 ? align : 'start';
|
|
77
85
|
const title = intl.formatMessage(messages.alignment);
|
|
78
86
|
const reducedSpacing = editorExperiment('platform_editor_controls', 'variant1', {
|
|
79
87
|
exposure: true
|
|
80
88
|
}) ? 'compact' : 'none';
|
|
81
89
|
if (toolbarType === ToolbarType.PRIMARY && toolbarSize && toolbarSize > ToolbarSize.XL && editorExperiment('platform_editor_controls', 'variant1', {
|
|
82
90
|
exposure: true
|
|
83
|
-
})) {
|
|
91
|
+
}) && !fg('platform_editor_controls_patch_6')) {
|
|
84
92
|
return /*#__PURE__*/React.createElement(Alignment, {
|
|
85
93
|
onClick: align => this.changeAlignment(align, false),
|
|
86
94
|
className: ax(["_ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t"])
|
|
87
95
|
});
|
|
88
96
|
}
|
|
89
|
-
|
|
97
|
+
const items = [{
|
|
98
|
+
key: 'alignmentLeft',
|
|
99
|
+
content: intl.formatMessage(messages.alignLeft),
|
|
100
|
+
value: {
|
|
101
|
+
name: 'start'
|
|
102
|
+
},
|
|
103
|
+
isActive: align === 'start',
|
|
104
|
+
elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(alignLeft)),
|
|
105
|
+
elemBefore: /*#__PURE__*/React.createElement(AlignTextLeftIcon, {
|
|
106
|
+
label: ""
|
|
107
|
+
})
|
|
108
|
+
}, {
|
|
109
|
+
key: 'alignmentCenter',
|
|
110
|
+
content: intl.formatMessage(messages.alignCenter),
|
|
111
|
+
value: {
|
|
112
|
+
name: 'center'
|
|
113
|
+
},
|
|
114
|
+
isActive: align === 'center',
|
|
115
|
+
elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(alignCenter)),
|
|
116
|
+
elemBefore: /*#__PURE__*/React.createElement(AlignTextCenterIcon, {
|
|
117
|
+
label: ""
|
|
118
|
+
})
|
|
119
|
+
}, {
|
|
120
|
+
key: 'alignmentRight',
|
|
121
|
+
content: intl.formatMessage(messages.alignRight),
|
|
122
|
+
value: {
|
|
123
|
+
name: 'end'
|
|
124
|
+
},
|
|
125
|
+
isActive: align === 'end',
|
|
126
|
+
elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(alignRight)),
|
|
127
|
+
elemBefore: /*#__PURE__*/React.createElement(AlignTextRightIcon, {
|
|
128
|
+
label: ""
|
|
129
|
+
})
|
|
130
|
+
}];
|
|
131
|
+
return /*#__PURE__*/React.createElement(ToolbarDropdownWrapper, null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6') ? /*#__PURE__*/React.createElement(DropdownMenu, {
|
|
132
|
+
arrowKeyNavigationProviderOptions: {
|
|
133
|
+
type: ArrowKeyNavigationType.MENU
|
|
134
|
+
},
|
|
135
|
+
items: [{
|
|
136
|
+
items
|
|
137
|
+
}],
|
|
138
|
+
isOpen: isOpen,
|
|
139
|
+
onItemActivated: this.handleOnItemActivated,
|
|
140
|
+
onOpenChange: attrs => this.setState({
|
|
141
|
+
isOpen: attrs === null || attrs === void 0 ? void 0 : attrs.isOpen
|
|
142
|
+
}),
|
|
143
|
+
mountTo: popupsMountPoint,
|
|
144
|
+
boundariesElement: popupsBoundariesElement,
|
|
145
|
+
scrollableElement: popupsScrollableElement,
|
|
146
|
+
fitWidth: 200
|
|
147
|
+
}, /*#__PURE__*/React.createElement(ToolbarButton, {
|
|
148
|
+
spacing: isReducedSpacing ? reducedSpacing : 'default',
|
|
149
|
+
disabled: disabled,
|
|
150
|
+
selected: isOpen,
|
|
151
|
+
title: title,
|
|
152
|
+
"aria-label": title,
|
|
153
|
+
"aria-expanded": isOpen,
|
|
154
|
+
"aria-haspopup": true,
|
|
155
|
+
onClick: this.toggleOpen,
|
|
156
|
+
onKeyDown: this.toggleOpenByKeyboard,
|
|
157
|
+
iconBefore: /*#__PURE__*/React.createElement(ToolbarDropdownTriggerWrapper, null, /*#__PURE__*/React.createElement(IconMap, {
|
|
158
|
+
alignment: alignment
|
|
159
|
+
}), /*#__PURE__*/React.createElement(ToolbarExpandIcon, null))
|
|
160
|
+
})) : /*#__PURE__*/React.createElement(Dropdown, {
|
|
90
161
|
mountTo: popupsMountPoint,
|
|
91
162
|
boundariesElement: popupsBoundariesElement,
|
|
92
163
|
scrollableElement: popupsScrollableElement,
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { useCallback } from 'react';
|
|
2
2
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
3
|
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
4
|
+
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
4
5
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
5
6
|
import { changeAlignment } from '../editor-commands';
|
|
6
7
|
import { ToolbarType } from '../pm-plugins/types';
|
|
@@ -12,19 +13,26 @@ var FloatingToolbarSettings = {
|
|
|
12
13
|
export function FloatingToolbarComponent(_ref) {
|
|
13
14
|
var api = _ref.api,
|
|
14
15
|
editorView = _ref.editorView;
|
|
15
|
-
var _useSharedPluginState = useSharedPluginState(api, ['alignment']
|
|
16
|
+
var _useSharedPluginState = useSharedPluginState(api, ['alignment'], {
|
|
17
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
|
|
18
|
+
}),
|
|
16
19
|
alignmentState = _useSharedPluginState.alignmentState;
|
|
20
|
+
var alignSelector = useSharedPluginStateSelector(api, 'alignment.align', {
|
|
21
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
22
|
+
});
|
|
23
|
+
var align = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? alignSelector : alignmentState === null || alignmentState === void 0 ? void 0 : alignmentState.align;
|
|
24
|
+
var isEnabledSelector = useSharedPluginStateSelector(api, 'alignment.isEnabled', {
|
|
25
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
26
|
+
});
|
|
27
|
+
var isEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isEnabledSelector : alignmentState === null || alignmentState === void 0 ? void 0 : alignmentState.isEnabled;
|
|
17
28
|
var changeAlignmentCallback = useCallback(function (align) {
|
|
18
29
|
return changeAlignment(align, api, INPUT_METHOD.FLOATING_TB)(editorView.state, editorView.dispatch);
|
|
19
30
|
}, [editorView, api]);
|
|
20
31
|
return /*#__PURE__*/React.createElement(ToolbarAlignment, {
|
|
21
|
-
|
|
32
|
+
align: align,
|
|
22
33
|
isReducedSpacing: editorExperiment('platform_editor_controls', 'variant1') ? false : FloatingToolbarSettings.isToolbarReducedSpacing,
|
|
23
|
-
changeAlignment: changeAlignmentCallback
|
|
24
|
-
|
|
25
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
26
|
-
,
|
|
27
|
-
disabled: FloatingToolbarSettings.disabled || !alignmentState.isEnabled,
|
|
34
|
+
changeAlignment: changeAlignmentCallback,
|
|
35
|
+
disabled: FloatingToolbarSettings.disabled || !isEnabled,
|
|
28
36
|
toolbarType: ToolbarType.FLOATING,
|
|
29
37
|
api: api
|
|
30
38
|
});
|
|
@@ -2,6 +2,8 @@ import React, { useCallback } from 'react';
|
|
|
2
2
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
3
|
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
4
4
|
import { ToolbarSize } from '@atlaskit/editor-common/types';
|
|
5
|
+
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
6
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
5
7
|
import { changeAlignment } from '../editor-commands';
|
|
6
8
|
import { ToolbarType } from '../pm-plugins/types';
|
|
7
9
|
import ToolbarAlignment from './ToolbarAlignment';
|
|
@@ -15,19 +17,26 @@ export function PrimaryToolbarComponent(_ref) {
|
|
|
15
17
|
isToolbarReducedSpacing = _ref.isToolbarReducedSpacing,
|
|
16
18
|
_ref$toolbarSize = _ref.toolbarSize,
|
|
17
19
|
toolbarSize = _ref$toolbarSize === void 0 ? ToolbarSize.XXL : _ref$toolbarSize;
|
|
18
|
-
var _useSharedPluginState = useSharedPluginState(api, ['alignment']
|
|
20
|
+
var _useSharedPluginState = useSharedPluginState(api, ['alignment'], {
|
|
21
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', true)
|
|
22
|
+
}),
|
|
19
23
|
alignmentState = _useSharedPluginState.alignmentState;
|
|
24
|
+
var alignSelector = useSharedPluginStateSelector(api, 'alignment.align', {
|
|
25
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
26
|
+
});
|
|
27
|
+
var align = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? alignSelector : alignmentState === null || alignmentState === void 0 ? void 0 : alignmentState.align;
|
|
28
|
+
var isEnabledSelector = useSharedPluginStateSelector(api, 'alignment.isEnabled', {
|
|
29
|
+
disabled: editorExperiment('platform_editor_usesharedpluginstateselector', false)
|
|
30
|
+
});
|
|
31
|
+
var isEnabled = editorExperiment('platform_editor_usesharedpluginstateselector', true) ? isEnabledSelector : alignmentState === null || alignmentState === void 0 ? void 0 : alignmentState.isEnabled;
|
|
20
32
|
var changeAlignmentCallback = useCallback(function (align) {
|
|
21
33
|
return changeAlignment(align, api, INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
|
|
22
34
|
}, [editorView, api]);
|
|
23
35
|
return /*#__PURE__*/React.createElement(ToolbarAlignment, {
|
|
24
|
-
|
|
36
|
+
align: align,
|
|
25
37
|
isReducedSpacing: isToolbarReducedSpacing,
|
|
26
|
-
changeAlignment: changeAlignmentCallback
|
|
27
|
-
|
|
28
|
-
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
29
|
-
,
|
|
30
|
-
disabled: disabled || !alignmentState.isEnabled,
|
|
38
|
+
changeAlignment: changeAlignmentCallback,
|
|
39
|
+
disabled: disabled || !isEnabled,
|
|
31
40
|
popupsMountPoint: popupsMountPoint,
|
|
32
41
|
popupsBoundariesElement: popupsBoundariesElement,
|
|
33
42
|
popupsScrollableElement: popupsScrollableElement,
|
|
@@ -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({
|
|
@@ -73,28 +84,27 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
|
|
|
73
84
|
return _createClass(AlignmentToolbar, [{
|
|
74
85
|
key: "render",
|
|
75
86
|
value: function render() {
|
|
76
|
-
var
|
|
77
|
-
_this2 = this;
|
|
87
|
+
var _this2 = this;
|
|
78
88
|
var isOpen = this.state.isOpen;
|
|
79
89
|
var _this$props = this.props,
|
|
80
90
|
popupsMountPoint = _this$props.popupsMountPoint,
|
|
81
91
|
popupsBoundariesElement = _this$props.popupsBoundariesElement,
|
|
82
92
|
popupsScrollableElement = _this$props.popupsScrollableElement,
|
|
83
93
|
isReducedSpacing = _this$props.isReducedSpacing,
|
|
84
|
-
|
|
94
|
+
align = _this$props.align,
|
|
85
95
|
disabled = _this$props.disabled,
|
|
86
96
|
intl = _this$props.intl,
|
|
87
97
|
api = _this$props.api,
|
|
88
98
|
toolbarType = _this$props.toolbarType,
|
|
89
99
|
toolbarSize = _this$props.toolbarSize;
|
|
90
|
-
var alignment =
|
|
100
|
+
var alignment = align !== null && align !== void 0 ? align : 'start';
|
|
91
101
|
var title = intl.formatMessage(messages.alignment);
|
|
92
102
|
var reducedSpacing = editorExperiment('platform_editor_controls', 'variant1', {
|
|
93
103
|
exposure: true
|
|
94
104
|
}) ? 'compact' : 'none';
|
|
95
105
|
if (toolbarType === ToolbarType.PRIMARY && toolbarSize && toolbarSize > ToolbarSize.XL && editorExperiment('platform_editor_controls', 'variant1', {
|
|
96
106
|
exposure: true
|
|
97
|
-
})) {
|
|
107
|
+
}) && !fg('platform_editor_controls_patch_6')) {
|
|
98
108
|
return /*#__PURE__*/React.createElement(Alignment, {
|
|
99
109
|
onClick: function onClick(align) {
|
|
100
110
|
return _this2.changeAlignment(align, false);
|
|
@@ -102,7 +112,72 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
|
|
|
102
112
|
className: ax(["_ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t"])
|
|
103
113
|
});
|
|
104
114
|
}
|
|
105
|
-
|
|
115
|
+
var items = [{
|
|
116
|
+
key: 'alignmentLeft',
|
|
117
|
+
content: intl.formatMessage(messages.alignLeft),
|
|
118
|
+
value: {
|
|
119
|
+
name: 'start'
|
|
120
|
+
},
|
|
121
|
+
isActive: align === 'start',
|
|
122
|
+
elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(alignLeft)),
|
|
123
|
+
elemBefore: /*#__PURE__*/React.createElement(AlignTextLeftIcon, {
|
|
124
|
+
label: ""
|
|
125
|
+
})
|
|
126
|
+
}, {
|
|
127
|
+
key: 'alignmentCenter',
|
|
128
|
+
content: intl.formatMessage(messages.alignCenter),
|
|
129
|
+
value: {
|
|
130
|
+
name: 'center'
|
|
131
|
+
},
|
|
132
|
+
isActive: align === 'center',
|
|
133
|
+
elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(alignCenter)),
|
|
134
|
+
elemBefore: /*#__PURE__*/React.createElement(AlignTextCenterIcon, {
|
|
135
|
+
label: ""
|
|
136
|
+
})
|
|
137
|
+
}, {
|
|
138
|
+
key: 'alignmentRight',
|
|
139
|
+
content: intl.formatMessage(messages.alignRight),
|
|
140
|
+
value: {
|
|
141
|
+
name: 'end'
|
|
142
|
+
},
|
|
143
|
+
isActive: align === 'end',
|
|
144
|
+
elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(alignRight)),
|
|
145
|
+
elemBefore: /*#__PURE__*/React.createElement(AlignTextRightIcon, {
|
|
146
|
+
label: ""
|
|
147
|
+
})
|
|
148
|
+
}];
|
|
149
|
+
return /*#__PURE__*/React.createElement(ToolbarDropdownWrapper, null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6') ? /*#__PURE__*/React.createElement(DropdownMenu, {
|
|
150
|
+
arrowKeyNavigationProviderOptions: {
|
|
151
|
+
type: ArrowKeyNavigationType.MENU
|
|
152
|
+
},
|
|
153
|
+
items: [{
|
|
154
|
+
items: items
|
|
155
|
+
}],
|
|
156
|
+
isOpen: isOpen,
|
|
157
|
+
onItemActivated: this.handleOnItemActivated,
|
|
158
|
+
onOpenChange: function onOpenChange(attrs) {
|
|
159
|
+
return _this2.setState({
|
|
160
|
+
isOpen: attrs === null || attrs === void 0 ? void 0 : attrs.isOpen
|
|
161
|
+
});
|
|
162
|
+
},
|
|
163
|
+
mountTo: popupsMountPoint,
|
|
164
|
+
boundariesElement: popupsBoundariesElement,
|
|
165
|
+
scrollableElement: popupsScrollableElement,
|
|
166
|
+
fitWidth: 200
|
|
167
|
+
}, /*#__PURE__*/React.createElement(ToolbarButton, {
|
|
168
|
+
spacing: isReducedSpacing ? reducedSpacing : 'default',
|
|
169
|
+
disabled: disabled,
|
|
170
|
+
selected: isOpen,
|
|
171
|
+
title: title,
|
|
172
|
+
"aria-label": title,
|
|
173
|
+
"aria-expanded": isOpen,
|
|
174
|
+
"aria-haspopup": true,
|
|
175
|
+
onClick: this.toggleOpen,
|
|
176
|
+
onKeyDown: this.toggleOpenByKeyboard,
|
|
177
|
+
iconBefore: /*#__PURE__*/React.createElement(ToolbarDropdownTriggerWrapper, null, /*#__PURE__*/React.createElement(IconMap, {
|
|
178
|
+
alignment: alignment
|
|
179
|
+
}), /*#__PURE__*/React.createElement(ToolbarExpandIcon, null))
|
|
180
|
+
})) : /*#__PURE__*/React.createElement(Dropdown, {
|
|
106
181
|
mountTo: popupsMountPoint,
|
|
107
182
|
boundariesElement: popupsBoundariesElement,
|
|
108
183
|
scrollableElement: popupsScrollableElement,
|
|
@@ -6,12 +6,12 @@ import React from 'react';
|
|
|
6
6
|
import type { WrappedComponentProps } from 'react-intl-next';
|
|
7
7
|
import { ToolbarSize, type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
8
8
|
import type { AlignmentPlugin } from '../../alignmentPluginType';
|
|
9
|
-
import { ToolbarType, type
|
|
9
|
+
import { ToolbarType, type AlignmentState } from '../../pm-plugins/types';
|
|
10
10
|
export interface State {
|
|
11
11
|
isOpen: boolean;
|
|
12
12
|
}
|
|
13
13
|
export interface Props {
|
|
14
|
-
|
|
14
|
+
align: AlignmentState | undefined;
|
|
15
15
|
changeAlignment: (align: AlignmentState) => void;
|
|
16
16
|
popupsMountPoint?: HTMLElement;
|
|
17
17
|
popupsBoundariesElement?: HTMLElement;
|
|
@@ -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
|
}
|
|
@@ -6,12 +6,12 @@ import React from 'react';
|
|
|
6
6
|
import type { WrappedComponentProps } from 'react-intl-next';
|
|
7
7
|
import { ToolbarSize, type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
8
8
|
import type { AlignmentPlugin } from '../../alignmentPluginType';
|
|
9
|
-
import { ToolbarType, type
|
|
9
|
+
import { ToolbarType, type AlignmentState } from '../../pm-plugins/types';
|
|
10
10
|
export interface State {
|
|
11
11
|
isOpen: boolean;
|
|
12
12
|
}
|
|
13
13
|
export interface Props {
|
|
14
|
-
|
|
14
|
+
align: AlignmentState | undefined;
|
|
15
15
|
changeAlignment: (align: AlignmentState) => void;
|
|
16
16
|
popupsMountPoint?: HTMLElement;
|
|
17
17
|
popupsBoundariesElement?: HTMLElement;
|
|
@@ -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.
|
|
3
|
+
"version": "3.1.11",
|
|
4
4
|
"description": "Alignment plugin for @atlaskit/editor-core",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -27,21 +27,24 @@
|
|
|
27
27
|
},
|
|
28
28
|
"platform_editor_add_alignment_tracking": {
|
|
29
29
|
"type": "boolean"
|
|
30
|
+
},
|
|
31
|
+
"platform_editor_controls_patch_6": {
|
|
32
|
+
"type": "boolean"
|
|
30
33
|
}
|
|
31
34
|
},
|
|
32
35
|
"dependencies": {
|
|
33
36
|
"@atlaskit/adf-schema": "^47.6.0",
|
|
34
37
|
"@atlaskit/css": "^0.10.0",
|
|
35
|
-
"@atlaskit/editor-common": "^103.
|
|
38
|
+
"@atlaskit/editor-common": "^103.18.0",
|
|
36
39
|
"@atlaskit/editor-plugin-analytics": "^2.2.0",
|
|
37
|
-
"@atlaskit/editor-plugin-primary-toolbar": "^3.
|
|
38
|
-
"@atlaskit/editor-plugin-selection-toolbar": "^3.
|
|
40
|
+
"@atlaskit/editor-plugin-primary-toolbar": "^3.2.0",
|
|
41
|
+
"@atlaskit/editor-plugin-selection-toolbar": "^3.5.0",
|
|
39
42
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
40
43
|
"@atlaskit/editor-tables": "^2.9.0",
|
|
41
|
-
"@atlaskit/icon": "^25.
|
|
44
|
+
"@atlaskit/icon": "^25.6.0",
|
|
42
45
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
43
|
-
"@atlaskit/tmp-editor-statsig": "^4.
|
|
44
|
-
"@atlaskit/tokens": "^4.
|
|
46
|
+
"@atlaskit/tmp-editor-statsig": "^4.14.0",
|
|
47
|
+
"@atlaskit/tokens": "^4.8.0",
|
|
45
48
|
"@babel/runtime": "^7.0.0",
|
|
46
49
|
"@compiled/react": "^0.18.3"
|
|
47
50
|
},
|
|
@@ -51,11 +54,11 @@
|
|
|
51
54
|
"react-intl-next": "npm:react-intl@^5.18.1"
|
|
52
55
|
},
|
|
53
56
|
"devDependencies": {
|
|
54
|
-
"@af/integration-testing": "
|
|
55
|
-
"@af/visual-regression": "
|
|
57
|
+
"@af/integration-testing": "workspace:^",
|
|
58
|
+
"@af/visual-regression": "workspace:^",
|
|
56
59
|
"@atlaskit/editor-plugin-list": "^4.2.0",
|
|
57
|
-
"@atlaskit/ssr": "
|
|
58
|
-
"@atlaskit/visual-regression": "
|
|
60
|
+
"@atlaskit/ssr": "workspace:^",
|
|
61
|
+
"@atlaskit/visual-regression": "workspace:^",
|
|
59
62
|
"@testing-library/react": "^13.4.0",
|
|
60
63
|
"@testing-library/user-event": "^14.4.3",
|
|
61
64
|
"typescript": "~5.4.2",
|