@atlaskit/editor-plugin-alignment 3.1.10 → 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.
Files changed (13) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/cjs/ui/FloatingToolbarComponent.js +15 -7
  3. package/dist/cjs/ui/PrimaryToolbarComponent.js +16 -7
  4. package/dist/cjs/ui/ToolbarAlignment/index.js +6 -7
  5. package/dist/es2019/ui/FloatingToolbarComponent.js +15 -7
  6. package/dist/es2019/ui/PrimaryToolbarComponent.js +16 -7
  7. package/dist/es2019/ui/ToolbarAlignment/index.js +5 -6
  8. package/dist/esm/ui/FloatingToolbarComponent.js +15 -7
  9. package/dist/esm/ui/PrimaryToolbarComponent.js +16 -7
  10. package/dist/esm/ui/ToolbarAlignment/index.js +6 -7
  11. package/dist/types/ui/ToolbarAlignment/index.d.ts +2 -2
  12. package/dist/types-ts4.5/ui/ToolbarAlignment/index.d.ts +2 -2
  13. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
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
+
3
13
  ## 3.1.10
4
14
 
5
15
  ### Patch Changes
package/dist/cjs/ui/FloatingToolbarComponent.js CHANGED
@@ -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
- pluginState: alignmentState,
42
+ align: align,
32
43
  isReducedSpacing: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? false : FloatingToolbarSettings.isToolbarReducedSpacing,
33
- changeAlignment: changeAlignmentCallback
34
- // Ignored via go/ees005
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
  });
package/dist/cjs/ui/PrimaryToolbarComponent.js CHANGED
@@ -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
- pluginState: alignmentState,
46
+ align: align,
35
47
  isReducedSpacing: isToolbarReducedSpacing,
36
- changeAlignment: changeAlignmentCallback
37
- // Ignored via go/ees005
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,
package/dist/cjs/ui/ToolbarAlignment/index.js CHANGED
@@ -91,21 +91,20 @@ var AlignmentToolbar = exports.AlignmentToolbar = /*#__PURE__*/function (_React$
91
91
  return (0, _createClass2.default)(AlignmentToolbar, [{
92
92
  key: "render",
93
93
  value: function render() {
94
- var _pluginState$align,
95
- _this2 = this;
94
+ var _this2 = this;
96
95
  var isOpen = this.state.isOpen;
97
96
  var _this$props = this.props,
98
97
  popupsMountPoint = _this$props.popupsMountPoint,
99
98
  popupsBoundariesElement = _this$props.popupsBoundariesElement,
100
99
  popupsScrollableElement = _this$props.popupsScrollableElement,
101
100
  isReducedSpacing = _this$props.isReducedSpacing,
102
- pluginState = _this$props.pluginState,
101
+ align = _this$props.align,
103
102
  disabled = _this$props.disabled,
104
103
  intl = _this$props.intl,
105
104
  api = _this$props.api,
106
105
  toolbarType = _this$props.toolbarType,
107
106
  toolbarSize = _this$props.toolbarSize;
108
- var alignment = (_pluginState$align = pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) !== null && _pluginState$align !== void 0 ? _pluginState$align : 'start';
107
+ var alignment = align !== null && align !== void 0 ? align : 'start';
109
108
  var title = intl.formatMessage(_messages.alignmentMessages.alignment);
110
109
  var reducedSpacing = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
111
110
  exposure: true
@@ -126,7 +125,7 @@ var AlignmentToolbar = exports.AlignmentToolbar = /*#__PURE__*/function (_React$
126
125
  value: {
127
126
  name: 'start'
128
127
  },
129
- isActive: (pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) === 'start',
128
+ isActive: align === 'start',
130
129
  elemAfter: /*#__PURE__*/_react.default.createElement(_ui.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.alignLeft)),
131
130
  elemBefore: /*#__PURE__*/_react.default.createElement(_alignTextLeft.default, {
132
131
  label: ""
@@ -137,7 +136,7 @@ var AlignmentToolbar = exports.AlignmentToolbar = /*#__PURE__*/function (_React$
137
136
  value: {
138
137
  name: 'center'
139
138
  },
140
- isActive: (pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) === 'center',
139
+ isActive: align === 'center',
141
140
  elemAfter: /*#__PURE__*/_react.default.createElement(_ui.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.alignCenter)),
142
141
  elemBefore: /*#__PURE__*/_react.default.createElement(_alignTextCenter.default, {
143
142
  label: ""
@@ -148,7 +147,7 @@ var AlignmentToolbar = exports.AlignmentToolbar = /*#__PURE__*/function (_React$
148
147
  value: {
149
148
  name: 'end'
150
149
  },
151
- isActive: (pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) === 'end',
150
+ isActive: align === 'end',
152
151
  elemAfter: /*#__PURE__*/_react.default.createElement(_ui.Shortcut, null, (0, _keymaps.tooltip)(_keymaps.alignRight)),
153
152
  elemBefore: /*#__PURE__*/_react.default.createElement(_alignTextRight.default, {
154
153
  label: ""
package/dist/es2019/ui/FloatingToolbarComponent.js CHANGED
@@ -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
- pluginState: alignmentState,
34
+ align: align,
24
35
  isReducedSpacing: editorExperiment('platform_editor_controls', 'variant1') ? false : FloatingToolbarSettings.isToolbarReducedSpacing,
25
- changeAlignment: changeAlignmentCallback
26
- // Ignored via go/ees005
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
  });
package/dist/es2019/ui/PrimaryToolbarComponent.js CHANGED
@@ -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
- pluginState: alignmentState,
35
+ align: align,
24
36
  isReducedSpacing: isToolbarReducedSpacing,
25
- changeAlignment: changeAlignmentCallback
26
- // Ignored via go/ees005
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,
package/dist/es2019/ui/ToolbarAlignment/index.js CHANGED
@@ -66,7 +66,6 @@ export class AlignmentToolbar extends React.Component {
66
66
  });
67
67
  }
68
68
  render() {
69
- var _pluginState$align;
70
69
  const {
71
70
  isOpen
72
71
  } = this.state;
@@ -75,14 +74,14 @@ export class AlignmentToolbar extends React.Component {
75
74
  popupsBoundariesElement,
76
75
  popupsScrollableElement,
77
76
  isReducedSpacing,
78
- pluginState,
77
+ align,
79
78
  disabled,
80
79
  intl,
81
80
  api,
82
81
  toolbarType,
83
82
  toolbarSize
84
83
  } = this.props;
85
- const alignment = (_pluginState$align = pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) !== null && _pluginState$align !== void 0 ? _pluginState$align : 'start';
84
+ const alignment = align !== null && align !== void 0 ? align : 'start';
86
85
  const title = intl.formatMessage(messages.alignment);
87
86
  const reducedSpacing = editorExperiment('platform_editor_controls', 'variant1', {
88
87
  exposure: true
@@ -101,7 +100,7 @@ export class AlignmentToolbar extends React.Component {
101
100
  value: {
102
101
  name: 'start'
103
102
  },
104
- isActive: (pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) === 'start',
103
+ isActive: align === 'start',
105
104
  elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(alignLeft)),
106
105
  elemBefore: /*#__PURE__*/React.createElement(AlignTextLeftIcon, {
107
106
  label: ""
@@ -112,7 +111,7 @@ export class AlignmentToolbar extends React.Component {
112
111
  value: {
113
112
  name: 'center'
114
113
  },
115
- isActive: (pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) === 'center',
114
+ isActive: align === 'center',
116
115
  elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(alignCenter)),
117
116
  elemBefore: /*#__PURE__*/React.createElement(AlignTextCenterIcon, {
118
117
  label: ""
@@ -123,7 +122,7 @@ export class AlignmentToolbar extends React.Component {
123
122
  value: {
124
123
  name: 'end'
125
124
  },
126
- isActive: (pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) === 'end',
125
+ isActive: align === 'end',
127
126
  elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(alignRight)),
128
127
  elemBefore: /*#__PURE__*/React.createElement(AlignTextRightIcon, {
129
128
  label: ""
package/dist/esm/ui/FloatingToolbarComponent.js CHANGED
@@ -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
- pluginState: alignmentState,
32
+ align: align,
22
33
  isReducedSpacing: editorExperiment('platform_editor_controls', 'variant1') ? false : FloatingToolbarSettings.isToolbarReducedSpacing,
23
- changeAlignment: changeAlignmentCallback
24
- // Ignored via go/ees005
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
  });
package/dist/esm/ui/PrimaryToolbarComponent.js CHANGED
@@ -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
- pluginState: alignmentState,
36
+ align: align,
25
37
  isReducedSpacing: isToolbarReducedSpacing,
26
- changeAlignment: changeAlignmentCallback
27
- // Ignored via go/ees005
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,
package/dist/esm/ui/ToolbarAlignment/index.js CHANGED
@@ -84,21 +84,20 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
84
84
  return _createClass(AlignmentToolbar, [{
85
85
  key: "render",
86
86
  value: function render() {
87
- var _pluginState$align,
88
- _this2 = this;
87
+ var _this2 = this;
89
88
  var isOpen = this.state.isOpen;
90
89
  var _this$props = this.props,
91
90
  popupsMountPoint = _this$props.popupsMountPoint,
92
91
  popupsBoundariesElement = _this$props.popupsBoundariesElement,
93
92
  popupsScrollableElement = _this$props.popupsScrollableElement,
94
93
  isReducedSpacing = _this$props.isReducedSpacing,
95
- pluginState = _this$props.pluginState,
94
+ align = _this$props.align,
96
95
  disabled = _this$props.disabled,
97
96
  intl = _this$props.intl,
98
97
  api = _this$props.api,
99
98
  toolbarType = _this$props.toolbarType,
100
99
  toolbarSize = _this$props.toolbarSize;
101
- var alignment = (_pluginState$align = pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) !== null && _pluginState$align !== void 0 ? _pluginState$align : 'start';
100
+ var alignment = align !== null && align !== void 0 ? align : 'start';
102
101
  var title = intl.formatMessage(messages.alignment);
103
102
  var reducedSpacing = editorExperiment('platform_editor_controls', 'variant1', {
104
103
  exposure: true
@@ -119,7 +118,7 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
119
118
  value: {
120
119
  name: 'start'
121
120
  },
122
- isActive: (pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) === 'start',
121
+ isActive: align === 'start',
123
122
  elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(alignLeft)),
124
123
  elemBefore: /*#__PURE__*/React.createElement(AlignTextLeftIcon, {
125
124
  label: ""
@@ -130,7 +129,7 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
130
129
  value: {
131
130
  name: 'center'
132
131
  },
133
- isActive: (pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) === 'center',
132
+ isActive: align === 'center',
134
133
  elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(alignCenter)),
135
134
  elemBefore: /*#__PURE__*/React.createElement(AlignTextCenterIcon, {
136
135
  label: ""
@@ -141,7 +140,7 @@ export var AlignmentToolbar = /*#__PURE__*/function (_React$Component) {
141
140
  value: {
142
141
  name: 'end'
143
142
  },
144
- isActive: (pluginState === null || pluginState === void 0 ? void 0 : pluginState.align) === 'end',
143
+ isActive: align === 'end',
145
144
  elemAfter: /*#__PURE__*/React.createElement(Shortcut, null, tooltip(alignRight)),
146
145
  elemBefore: /*#__PURE__*/React.createElement(AlignTextRightIcon, {
147
146
  label: ""
package/dist/types/ui/ToolbarAlignment/index.d.ts CHANGED
@@ -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 AlignmentPluginState, type AlignmentState } from '../../pm-plugins/types';
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
- pluginState: AlignmentPluginState | undefined;
14
+ align: AlignmentState | undefined;
15
15
  changeAlignment: (align: AlignmentState) => void;
16
16
  popupsMountPoint?: HTMLElement;
17
17
  popupsBoundariesElement?: HTMLElement;
package/dist/types-ts4.5/ui/ToolbarAlignment/index.d.ts CHANGED
@@ -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 AlignmentPluginState, type AlignmentState } from '../../pm-plugins/types';
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
- pluginState: AlignmentPluginState | undefined;
14
+ align: AlignmentState | undefined;
15
15
  changeAlignment: (align: AlignmentState) => void;
16
16
  popupsMountPoint?: HTMLElement;
17
17
  popupsBoundariesElement?: HTMLElement;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-alignment",
3
- "version": "3.1.10",
3
+ "version": "3.1.11",
4
4
  "description": "Alignment plugin for @atlaskit/editor-core",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -35,7 +35,7 @@
35
35
  "dependencies": {
36
36
  "@atlaskit/adf-schema": "^47.6.0",
37
37
  "@atlaskit/css": "^0.10.0",
38
- "@atlaskit/editor-common": "^103.9.0",
38
+ "@atlaskit/editor-common": "^103.18.0",
39
39
  "@atlaskit/editor-plugin-analytics": "^2.2.0",
40
40
  "@atlaskit/editor-plugin-primary-toolbar": "^3.2.0",
41
41
  "@atlaskit/editor-plugin-selection-toolbar": "^3.5.0",
@@ -43,7 +43,7 @@
43
43
  "@atlaskit/editor-tables": "^2.9.0",
44
44
  "@atlaskit/icon": "^25.6.0",
45
45
  "@atlaskit/platform-feature-flags": "^1.1.0",
46
- "@atlaskit/tmp-editor-statsig": "^4.12.0",
46
+ "@atlaskit/tmp-editor-statsig": "^4.14.0",
47
47
  "@atlaskit/tokens": "^4.8.0",
48
48
  "@babel/runtime": "^7.0.0",
49
49
  "@compiled/react": "^0.18.3"
@@ -54,11 +54,11 @@
54
54
  "react-intl-next": "npm:react-intl@^5.18.1"
55
55
  },
56
56
  "devDependencies": {
57
- "@af/integration-testing": "^0.5.0",
58
- "@af/visual-regression": "^1.3.0",
57
+ "@af/integration-testing": "workspace:^",
58
+ "@af/visual-regression": "workspace:^",
59
59
  "@atlaskit/editor-plugin-list": "^4.2.0",
60
- "@atlaskit/ssr": "^0.4.0",
61
- "@atlaskit/visual-regression": "^0.10.0",
60
+ "@atlaskit/ssr": "workspace:^",
61
+ "@atlaskit/visual-regression": "workspace:^",
62
62
  "@testing-library/react": "^13.4.0",
63
63
  "@testing-library/user-event": "^14.4.3",
64
64
  "typescript": "~5.4.2",