@atlaskit/editor-plugin-toolbar 0.4.4 → 0.4.6

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 (20) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/ui/OverflowSection.js +24 -0
  3. package/dist/cjs/ui/PrimaryToolbar.js +19 -0
  4. package/dist/cjs/ui/TextCollapsedMenu.js +29 -0
  5. package/dist/cjs/ui/toolbar-components.js +104 -12
  6. package/dist/es2019/ui/OverflowSection.js +19 -0
  7. package/dist/es2019/ui/PrimaryToolbar.js +14 -0
  8. package/dist/es2019/ui/TextCollapsedMenu.js +24 -0
  9. package/dist/es2019/ui/toolbar-components.js +100 -6
  10. package/dist/esm/ui/OverflowSection.js +17 -0
  11. package/dist/esm/ui/PrimaryToolbar.js +12 -0
  12. package/dist/esm/ui/TextCollapsedMenu.js +22 -0
  13. package/dist/esm/ui/toolbar-components.js +107 -15
  14. package/dist/types/ui/OverflowSection.d.ts +6 -0
  15. package/dist/types/ui/PrimaryToolbar.d.ts +6 -0
  16. package/dist/types/ui/TextCollapsedMenu.d.ts +10 -0
  17. package/dist/types-ts4.5/ui/OverflowSection.d.ts +6 -0
  18. package/dist/types-ts4.5/ui/PrimaryToolbar.d.ts +6 -0
  19. package/dist/types-ts4.5/ui/TextCollapsedMenu.d.ts +10 -0
  20. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-plugin-toolbar
2
2
 
3
+ ## 0.4.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [`51f3f2db61f6e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/51f3f2db61f6e) -
8
+ Update toolbar config across plugins
9
+ - Updated dependencies
10
+
11
+ ## 0.4.5
12
+
13
+ ### Patch Changes
14
+
15
+ - [`4ef462fecb522`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4ef462fecb522) -
16
+ [ux] [ED-29003] Register loom component as a dropdown menu item in overflow menu
17
+ - Updated dependencies
18
+
3
19
  ## 0.4.4
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/ui/OverflowSection.js ADDED
@@ -0,0 +1,24 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.OverflowSection = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _toolbar = require("@atlaskit/editor-common/toolbar");
10
+ var _editorToolbar = require("@atlaskit/editor-toolbar");
11
+ var OverflowSection = exports.OverflowSection = function OverflowSection(_ref) {
12
+ var children = _ref.children,
13
+ hasSeparator = _ref.hasSeparator,
14
+ testId = _ref.testId;
15
+ var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
16
+ editorAppearance = _useEditorToolbar.editorAppearance;
17
+ if (editorAppearance === 'full-page') {
18
+ return null;
19
+ }
20
+ return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarSection, {
21
+ hasSeparator: hasSeparator,
22
+ testId: testId
23
+ }, children);
24
+ };
package/dist/cjs/ui/PrimaryToolbar.js ADDED
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.PrimaryToolbar = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _toolbar = require("@atlaskit/editor-common/toolbar");
10
+ var _editorToolbar = require("@atlaskit/editor-toolbar");
11
+ var PrimaryToolbar = exports.PrimaryToolbar = function PrimaryToolbar(_ref) {
12
+ var children = _ref.children;
13
+ var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
14
+ editorAppearance = _useEditorToolbar.editorAppearance;
15
+ return /*#__PURE__*/_react.default.createElement(_editorToolbar.PrimaryToolbar, {
16
+ label: "Primary Toolbar",
17
+ reducedBreakpoints: editorAppearance !== 'full-page'
18
+ }, children);
19
+ };
package/dist/cjs/ui/TextCollapsedMenu.js ADDED
@@ -0,0 +1,29 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.TextCollapsedMenu = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _reactIntlNext = require("react-intl-next");
10
+ var _messages = require("@atlaskit/editor-common/messages");
11
+ var _editorToolbar = require("@atlaskit/editor-toolbar");
12
+ /**
13
+ * Basic version of existing 'Text Styles' Menu - which doesn't dynamically change icon
14
+ * and is also placeholder to render all other menus in the collapsed state.
15
+ */
16
+ var TextCollapsedMenu = exports.TextCollapsedMenu = function TextCollapsedMenu(_ref) {
17
+ var children = _ref.children;
18
+ var _useIntl = (0, _reactIntlNext.useIntl)(),
19
+ formatMessage = _useIntl.formatMessage;
20
+ return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
21
+ content: formatMessage(_messages.toolbarMessages.textStylesTooltip)
22
+ }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
23
+ iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.TextIcon, {
24
+ label: formatMessage(_messages.toolbarMessages.textStylesTooltip),
25
+ size: "small"
26
+ }),
27
+ enableMaxHeight: true
28
+ }, children));
29
+ };
package/dist/cjs/ui/toolbar-components.js CHANGED
@@ -5,14 +5,19 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.getToolbarComponents = void 0;
8
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
8
9
  var _react = _interopRequireDefault(require("react"));
9
10
  var _toolbar = require("@atlaskit/editor-common/toolbar");
10
11
  var _editorToolbar = require("@atlaskit/editor-toolbar");
12
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
11
13
  var _consts = require("./consts");
12
14
  var _OverflowMenu = require("./OverflowMenu");
15
+ var _OverflowSection = require("./OverflowSection");
16
+ var _PrimaryToolbar = require("./PrimaryToolbar");
13
17
  var _Section = require("./Section");
18
+ var _TextCollapsedMenu = require("./TextCollapsedMenu");
14
19
  var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(api, disableSelectionToolbar) {
15
- return [{
20
+ var components = [{
16
21
  type: 'toolbar',
17
22
  key: _toolbar.TOOLBARS.INLINE_TEXT_TOOLBAR,
18
23
  component: function component(_ref) {
@@ -24,10 +29,10 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
24
29
  }, {
25
30
  type: 'toolbar',
26
31
  key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
27
- component: function component(_ref2) {
32
+ component: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? _PrimaryToolbar.PrimaryToolbar : function (_ref2) {
28
33
  var children = _ref2.children;
29
34
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.PrimaryToolbar, {
30
- label: 'Primary Toolbar'
35
+ label: "Primary Toolbar"
31
36
  }, children);
32
37
  }
33
38
  }, {
@@ -45,6 +50,16 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
45
50
  component: function component(_ref3) {
46
51
  var children = _ref3.children,
47
52
  parents = _ref3.parents;
53
+ if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
54
+ return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
55
+ above: "md"
56
+ }, /*#__PURE__*/_react.default.createElement(_Section.Section, {
57
+ parents: parents,
58
+ api: api,
59
+ disableSelectionToolbar: disableSelectionToolbar,
60
+ testId: "text-section"
61
+ }, children));
62
+ }
48
63
  return /*#__PURE__*/_react.default.createElement(_Section.Section, {
49
64
  parents: parents,
50
65
  api: api,
@@ -52,7 +67,48 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
52
67
  testId: "text-section"
53
68
  }, children);
54
69
  }
70
+ }].concat((0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
71
+ type: _toolbar.TEXT_SECTION_COLLAPSED.type,
72
+ key: _toolbar.TEXT_SECTION_COLLAPSED.key,
73
+ parents: [{
74
+ type: 'toolbar',
75
+ key: _toolbar.TOOLBARS.INLINE_TEXT_TOOLBAR,
76
+ rank: _toolbar.TOOLBAR_RANK[_toolbar.TEXT_SECTION_COLLAPSED.key]
77
+ }, {
78
+ type: 'toolbar',
79
+ key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
80
+ rank: _toolbar.TOOLBAR_RANK[_toolbar.TEXT_SECTION_COLLAPSED.key]
81
+ }],
82
+ component: function component(_ref4) {
83
+ var children = _ref4.children,
84
+ parents = _ref4.parents;
85
+ return /*#__PURE__*/_react.default.createElement(_editorToolbar.Show, {
86
+ below: "md"
87
+ }, /*#__PURE__*/_react.default.createElement(_Section.Section, {
88
+ parents: parents,
89
+ api: api,
90
+ disableSelectionToolbar: disableSelectionToolbar,
91
+ testId: "text-section"
92
+ }, children));
93
+ }
55
94
  }, {
95
+ type: _toolbar.TEXT_COLLAPSED_GROUP.type,
96
+ key: _toolbar.TEXT_COLLAPSED_GROUP.key,
97
+ parents: [{
98
+ type: _toolbar.TEXT_SECTION_COLLAPSED.type,
99
+ key: _toolbar.TEXT_SECTION_COLLAPSED.key,
100
+ rank: 100
101
+ }]
102
+ }, {
103
+ type: _toolbar.TEXT_COLLAPSED_MENU.type,
104
+ key: _toolbar.TEXT_COLLAPSED_MENU.key,
105
+ parents: [{
106
+ type: _toolbar.TEXT_COLLAPSED_GROUP.type,
107
+ key: _toolbar.TEXT_COLLAPSED_GROUP.key,
108
+ rank: 100
109
+ }],
110
+ component: _TextCollapsedMenu.TextCollapsedMenu
111
+ }] : []), [{
56
112
  type: _toolbar.INSERT_BLOCK_SECTION.type,
57
113
  key: _toolbar.INSERT_BLOCK_SECTION.key,
58
114
  parents: [{
@@ -60,9 +116,9 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
60
116
  key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
61
117
  rank: _toolbar.TOOLBAR_RANK[_toolbar.INSERT_BLOCK_SECTION.key]
62
118
  }],
63
- component: function component(_ref4) {
64
- var children = _ref4.children,
65
- parents = _ref4.parents;
119
+ component: function component(_ref5) {
120
+ var children = _ref5.children,
121
+ parents = _ref5.parents;
66
122
  return /*#__PURE__*/_react.default.createElement(_Section.Section, {
67
123
  testId: "insert-block-section",
68
124
  parents: parents,
@@ -83,9 +139,9 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
83
139
  key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
84
140
  rank: _toolbar.TOOLBAR_RANK[_toolbar.LINKING_SECTION.key]
85
141
  }],
86
- component: function component(_ref5) {
87
- var children = _ref5.children,
88
- parents = _ref5.parents;
142
+ component: function component(_ref6) {
143
+ var children = _ref6.children,
144
+ parents = _ref6.parents;
89
145
  return /*#__PURE__*/_react.default.createElement(_Section.Section, {
90
146
  testId: "link-section",
91
147
  parents: parents,
@@ -117,8 +173,8 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
117
173
  key: _toolbar.OVERFLOW_GROUP.key,
118
174
  rank: _toolbar.OVERFLOW_GROUP_RANK[_toolbar.OVERFLOW_MENU.key]
119
175
  }],
120
- component: function component(_ref6) {
121
- var children = _ref6.children;
176
+ component: function component(_ref7) {
177
+ var children = _ref7.children;
122
178
  return /*#__PURE__*/_react.default.createElement(_OverflowMenu.OverflowMenu, null, children);
123
179
  }
124
180
  }, {
@@ -129,5 +185,41 @@ var getToolbarComponents = exports.getToolbarComponents = function getToolbarCom
129
185
  key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
130
186
  rank: _toolbar.TOOLBAR_RANK[_toolbar.PIN_SECTION.key]
131
187
  }]
132
- }];
188
+ }]);
189
+ if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_migrate_loom', 'isEnabled', true)) {
190
+ components.push({
191
+ type: _toolbar.OVERFLOW_SECTION_PRIMARY_TOOLBAR.type,
192
+ key: _toolbar.OVERFLOW_SECTION_PRIMARY_TOOLBAR.key,
193
+ parents: [{
194
+ type: 'toolbar',
195
+ key: _toolbar.TOOLBARS.PRIMARY_TOOLBAR,
196
+ rank: _toolbar.TOOLBAR_RANK[_toolbar.OVERFLOW_SECTION_PRIMARY_TOOLBAR.key]
197
+ }],
198
+ component: function component(_ref8) {
199
+ var children = _ref8.children;
200
+ return /*#__PURE__*/_react.default.createElement(_OverflowSection.OverflowSection, null, children);
201
+ }
202
+ }, {
203
+ type: _toolbar.OVERFLOW_GROUP_PRIMARY_TOOLBAR.type,
204
+ key: _toolbar.OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
205
+ parents: [{
206
+ type: _toolbar.OVERFLOW_SECTION_PRIMARY_TOOLBAR.type,
207
+ key: _toolbar.OVERFLOW_SECTION_PRIMARY_TOOLBAR.key,
208
+ rank: _toolbar.OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK[_toolbar.OVERFLOW_GROUP_PRIMARY_TOOLBAR.key]
209
+ }]
210
+ }, {
211
+ type: _toolbar.OVERFLOW_MENU_PRIMARY_TOOLBAR.type,
212
+ key: _toolbar.OVERFLOW_MENU_PRIMARY_TOOLBAR.key,
213
+ parents: [{
214
+ type: _toolbar.OVERFLOW_GROUP_PRIMARY_TOOLBAR.type,
215
+ key: _toolbar.OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
216
+ rank: _toolbar.OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK[_toolbar.OVERFLOW_MENU_PRIMARY_TOOLBAR.key]
217
+ }],
218
+ component: function component(_ref9) {
219
+ var children = _ref9.children;
220
+ return /*#__PURE__*/_react.default.createElement(_OverflowMenu.OverflowMenu, null, children);
221
+ }
222
+ });
223
+ }
224
+ return components;
133
225
  };
package/dist/es2019/ui/OverflowSection.js ADDED
@@ -0,0 +1,19 @@
1
+ import React from 'react';
2
+ import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
3
+ import { ToolbarSection } from '@atlaskit/editor-toolbar';
4
+ export const OverflowSection = ({
5
+ children,
6
+ hasSeparator,
7
+ testId
8
+ }) => {
9
+ const {
10
+ editorAppearance
11
+ } = useEditorToolbar();
12
+ if (editorAppearance === 'full-page') {
13
+ return null;
14
+ }
15
+ return /*#__PURE__*/React.createElement(ToolbarSection, {
16
+ hasSeparator: hasSeparator,
17
+ testId: testId
18
+ }, children);
19
+ };
package/dist/es2019/ui/PrimaryToolbar.js ADDED
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
3
+ import { PrimaryToolbar as PrimaryToolbarBase } from '@atlaskit/editor-toolbar';
4
+ export const PrimaryToolbar = ({
5
+ children
6
+ }) => {
7
+ const {
8
+ editorAppearance
9
+ } = useEditorToolbar();
10
+ return /*#__PURE__*/React.createElement(PrimaryToolbarBase, {
11
+ label: "Primary Toolbar",
12
+ reducedBreakpoints: editorAppearance !== 'full-page'
13
+ }, children);
14
+ };
package/dist/es2019/ui/TextCollapsedMenu.js ADDED
@@ -0,0 +1,24 @@
1
+ import React from 'react';
2
+ import { useIntl } from 'react-intl-next';
3
+ import { toolbarMessages } from '@atlaskit/editor-common/messages';
4
+ import { ToolbarDropdownMenu, ToolbarTooltip, TextIcon } from '@atlaskit/editor-toolbar';
5
+ /**
6
+ * Basic version of existing 'Text Styles' Menu - which doesn't dynamically change icon
7
+ * and is also placeholder to render all other menus in the collapsed state.
8
+ */
9
+ export const TextCollapsedMenu = ({
10
+ children
11
+ }) => {
12
+ const {
13
+ formatMessage
14
+ } = useIntl();
15
+ return /*#__PURE__*/React.createElement(ToolbarTooltip, {
16
+ content: formatMessage(toolbarMessages.textStylesTooltip)
17
+ }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
18
+ iconBefore: /*#__PURE__*/React.createElement(TextIcon, {
19
+ label: formatMessage(toolbarMessages.textStylesTooltip),
20
+ size: "small"
21
+ }),
22
+ enableMaxHeight: true
23
+ }, children));
24
+ };
package/dist/es2019/ui/toolbar-components.js CHANGED
@@ -1,11 +1,15 @@
1
1
  import React from 'react';
2
- import { INSERT_BLOCK_SECTION, LINKING_SECTION, OVERFLOW_GROUP, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_SECTION, OVERFLOW_SECTION_RANK, PIN_SECTION, TEXT_SECTION, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
3
- import { PrimaryToolbar, Toolbar } from '@atlaskit/editor-toolbar';
2
+ import { INSERT_BLOCK_SECTION, LINKING_SECTION, OVERFLOW_GROUP, OVERFLOW_GROUP_PRIMARY_TOOLBAR, OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_MENU_PRIMARY_TOOLBAR, OVERFLOW_SECTION, OVERFLOW_SECTION_PRIMARY_TOOLBAR, OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK, OVERFLOW_SECTION_RANK, PIN_SECTION, TEXT_COLLAPSED_GROUP, TEXT_SECTION, TEXT_SECTION_COLLAPSED, TEXT_COLLAPSED_MENU, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
3
+ import { PrimaryToolbar as PrimaryToolbarBase, Show, Toolbar } from '@atlaskit/editor-toolbar';
4
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
4
5
  import { SELECTION_TOOLBAR_LABEL } from './consts';
5
6
  import { OverflowMenu } from './OverflowMenu';
7
+ import { OverflowSection } from './OverflowSection';
8
+ import { PrimaryToolbar } from './PrimaryToolbar';
6
9
  import { Section } from './Section';
10
+ import { TextCollapsedMenu } from './TextCollapsedMenu';
7
11
  export const getToolbarComponents = (api, disableSelectionToolbar) => {
8
- return [{
12
+ const components = [{
9
13
  type: 'toolbar',
10
14
  key: TOOLBARS.INLINE_TEXT_TOOLBAR,
11
15
  component: ({
@@ -18,10 +22,10 @@ export const getToolbarComponents = (api, disableSelectionToolbar) => {
18
22
  }, {
19
23
  type: 'toolbar',
20
24
  key: TOOLBARS.PRIMARY_TOOLBAR,
21
- component: ({
25
+ component: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? PrimaryToolbar : ({
22
26
  children
23
- }) => /*#__PURE__*/React.createElement(PrimaryToolbar, {
24
- label: 'Primary Toolbar'
27
+ }) => /*#__PURE__*/React.createElement(PrimaryToolbarBase, {
28
+ label: "Primary Toolbar"
25
29
  }, children)
26
30
  }, {
27
31
  type: TEXT_SECTION.type,
@@ -39,6 +43,16 @@ export const getToolbarComponents = (api, disableSelectionToolbar) => {
39
43
  children,
40
44
  parents
41
45
  }) => {
46
+ if (expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
47
+ return /*#__PURE__*/React.createElement(Show, {
48
+ above: "md"
49
+ }, /*#__PURE__*/React.createElement(Section, {
50
+ parents: parents,
51
+ api: api,
52
+ disableSelectionToolbar: disableSelectionToolbar,
53
+ testId: "text-section"
54
+ }, children));
55
+ }
42
56
  return /*#__PURE__*/React.createElement(Section, {
43
57
  parents: parents,
44
58
  api: api,
@@ -46,7 +60,49 @@ export const getToolbarComponents = (api, disableSelectionToolbar) => {
46
60
  testId: "text-section"
47
61
  }, children);
48
62
  }
63
+ }, ...(expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
64
+ type: TEXT_SECTION_COLLAPSED.type,
65
+ key: TEXT_SECTION_COLLAPSED.key,
66
+ parents: [{
67
+ type: 'toolbar',
68
+ key: TOOLBARS.INLINE_TEXT_TOOLBAR,
69
+ rank: TOOLBAR_RANK[TEXT_SECTION_COLLAPSED.key]
70
+ }, {
71
+ type: 'toolbar',
72
+ key: TOOLBARS.PRIMARY_TOOLBAR,
73
+ rank: TOOLBAR_RANK[TEXT_SECTION_COLLAPSED.key]
74
+ }],
75
+ component: ({
76
+ children,
77
+ parents
78
+ }) => {
79
+ return /*#__PURE__*/React.createElement(Show, {
80
+ below: "md"
81
+ }, /*#__PURE__*/React.createElement(Section, {
82
+ parents: parents,
83
+ api: api,
84
+ disableSelectionToolbar: disableSelectionToolbar,
85
+ testId: "text-section"
86
+ }, children));
87
+ }
88
+ }, {
89
+ type: TEXT_COLLAPSED_GROUP.type,
90
+ key: TEXT_COLLAPSED_GROUP.key,
91
+ parents: [{
92
+ type: TEXT_SECTION_COLLAPSED.type,
93
+ key: TEXT_SECTION_COLLAPSED.key,
94
+ rank: 100
95
+ }]
49
96
  }, {
97
+ type: TEXT_COLLAPSED_MENU.type,
98
+ key: TEXT_COLLAPSED_MENU.key,
99
+ parents: [{
100
+ type: TEXT_COLLAPSED_GROUP.type,
101
+ key: TEXT_COLLAPSED_GROUP.key,
102
+ rank: 100
103
+ }],
104
+ component: TextCollapsedMenu
105
+ }] : []), {
50
106
  type: INSERT_BLOCK_SECTION.type,
51
107
  key: INSERT_BLOCK_SECTION.key,
52
108
  parents: [{
@@ -123,4 +179,42 @@ export const getToolbarComponents = (api, disableSelectionToolbar) => {
123
179
  rank: TOOLBAR_RANK[PIN_SECTION.key]
124
180
  }]
125
181
  }];
182
+ if (expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true)) {
183
+ components.push({
184
+ type: OVERFLOW_SECTION_PRIMARY_TOOLBAR.type,
185
+ key: OVERFLOW_SECTION_PRIMARY_TOOLBAR.key,
186
+ parents: [{
187
+ type: 'toolbar',
188
+ key: TOOLBARS.PRIMARY_TOOLBAR,
189
+ rank: TOOLBAR_RANK[OVERFLOW_SECTION_PRIMARY_TOOLBAR.key]
190
+ }],
191
+ component: ({
192
+ children
193
+ }) => {
194
+ return /*#__PURE__*/React.createElement(OverflowSection, null, children);
195
+ }
196
+ }, {
197
+ type: OVERFLOW_GROUP_PRIMARY_TOOLBAR.type,
198
+ key: OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
199
+ parents: [{
200
+ type: OVERFLOW_SECTION_PRIMARY_TOOLBAR.type,
201
+ key: OVERFLOW_SECTION_PRIMARY_TOOLBAR.key,
202
+ rank: OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK[OVERFLOW_GROUP_PRIMARY_TOOLBAR.key]
203
+ }]
204
+ }, {
205
+ type: OVERFLOW_MENU_PRIMARY_TOOLBAR.type,
206
+ key: OVERFLOW_MENU_PRIMARY_TOOLBAR.key,
207
+ parents: [{
208
+ type: OVERFLOW_GROUP_PRIMARY_TOOLBAR.type,
209
+ key: OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
210
+ rank: OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK[OVERFLOW_MENU_PRIMARY_TOOLBAR.key]
211
+ }],
212
+ component: ({
213
+ children
214
+ }) => {
215
+ return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
216
+ }
217
+ });
218
+ }
219
+ return components;
126
220
  };
package/dist/esm/ui/OverflowSection.js ADDED
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
3
+ import { ToolbarSection } from '@atlaskit/editor-toolbar';
4
+ export var OverflowSection = function OverflowSection(_ref) {
5
+ var children = _ref.children,
6
+ hasSeparator = _ref.hasSeparator,
7
+ testId = _ref.testId;
8
+ var _useEditorToolbar = useEditorToolbar(),
9
+ editorAppearance = _useEditorToolbar.editorAppearance;
10
+ if (editorAppearance === 'full-page') {
11
+ return null;
12
+ }
13
+ return /*#__PURE__*/React.createElement(ToolbarSection, {
14
+ hasSeparator: hasSeparator,
15
+ testId: testId
16
+ }, children);
17
+ };
package/dist/esm/ui/PrimaryToolbar.js ADDED
@@ -0,0 +1,12 @@
1
+ import React from 'react';
2
+ import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
3
+ import { PrimaryToolbar as PrimaryToolbarBase } from '@atlaskit/editor-toolbar';
4
+ export var PrimaryToolbar = function PrimaryToolbar(_ref) {
5
+ var children = _ref.children;
6
+ var _useEditorToolbar = useEditorToolbar(),
7
+ editorAppearance = _useEditorToolbar.editorAppearance;
8
+ return /*#__PURE__*/React.createElement(PrimaryToolbarBase, {
9
+ label: "Primary Toolbar",
10
+ reducedBreakpoints: editorAppearance !== 'full-page'
11
+ }, children);
12
+ };
package/dist/esm/ui/TextCollapsedMenu.js ADDED
@@ -0,0 +1,22 @@
1
+ import React from 'react';
2
+ import { useIntl } from 'react-intl-next';
3
+ import { toolbarMessages } from '@atlaskit/editor-common/messages';
4
+ import { ToolbarDropdownMenu, ToolbarTooltip, TextIcon } from '@atlaskit/editor-toolbar';
5
+ /**
6
+ * Basic version of existing 'Text Styles' Menu - which doesn't dynamically change icon
7
+ * and is also placeholder to render all other menus in the collapsed state.
8
+ */
9
+ export var TextCollapsedMenu = function TextCollapsedMenu(_ref) {
10
+ var children = _ref.children;
11
+ var _useIntl = useIntl(),
12
+ formatMessage = _useIntl.formatMessage;
13
+ return /*#__PURE__*/React.createElement(ToolbarTooltip, {
14
+ content: formatMessage(toolbarMessages.textStylesTooltip)
15
+ }, /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
16
+ iconBefore: /*#__PURE__*/React.createElement(TextIcon, {
17
+ label: formatMessage(toolbarMessages.textStylesTooltip),
18
+ size: "small"
19
+ }),
20
+ enableMaxHeight: true
21
+ }, children));
22
+ };
package/dist/esm/ui/toolbar-components.js CHANGED
@@ -1,11 +1,16 @@
1
+ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
1
2
  import React from 'react';
2
- import { INSERT_BLOCK_SECTION, LINKING_SECTION, OVERFLOW_GROUP, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_SECTION, OVERFLOW_SECTION_RANK, PIN_SECTION, TEXT_SECTION, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
3
- import { PrimaryToolbar, Toolbar } from '@atlaskit/editor-toolbar';
3
+ import { INSERT_BLOCK_SECTION, LINKING_SECTION, OVERFLOW_GROUP, OVERFLOW_GROUP_PRIMARY_TOOLBAR, OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK, OVERFLOW_GROUP_RANK, OVERFLOW_MENU, OVERFLOW_MENU_PRIMARY_TOOLBAR, OVERFLOW_SECTION, OVERFLOW_SECTION_PRIMARY_TOOLBAR, OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK, OVERFLOW_SECTION_RANK, PIN_SECTION, TEXT_COLLAPSED_GROUP, TEXT_SECTION, TEXT_SECTION_COLLAPSED, TEXT_COLLAPSED_MENU, TOOLBAR_RANK, TOOLBARS } from '@atlaskit/editor-common/toolbar';
4
+ import { PrimaryToolbar as PrimaryToolbarBase, Show, Toolbar } from '@atlaskit/editor-toolbar';
5
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
4
6
  import { SELECTION_TOOLBAR_LABEL } from './consts';
5
7
  import { OverflowMenu } from './OverflowMenu';
8
+ import { OverflowSection } from './OverflowSection';
9
+ import { PrimaryToolbar } from './PrimaryToolbar';
6
10
  import { Section } from './Section';
11
+ import { TextCollapsedMenu } from './TextCollapsedMenu';
7
12
  export var getToolbarComponents = function getToolbarComponents(api, disableSelectionToolbar) {
8
- return [{
13
+ var components = [{
9
14
  type: 'toolbar',
10
15
  key: TOOLBARS.INLINE_TEXT_TOOLBAR,
11
16
  component: function component(_ref) {
@@ -17,10 +22,10 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
17
22
  }, {
18
23
  type: 'toolbar',
19
24
  key: TOOLBARS.PRIMARY_TOOLBAR,
20
- component: function component(_ref2) {
25
+ component: expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? PrimaryToolbar : function (_ref2) {
21
26
  var children = _ref2.children;
22
- return /*#__PURE__*/React.createElement(PrimaryToolbar, {
23
- label: 'Primary Toolbar'
27
+ return /*#__PURE__*/React.createElement(PrimaryToolbarBase, {
28
+ label: "Primary Toolbar"
24
29
  }, children);
25
30
  }
26
31
  }, {
@@ -38,6 +43,16 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
38
43
  component: function component(_ref3) {
39
44
  var children = _ref3.children,
40
45
  parents = _ref3.parents;
46
+ if (expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true)) {
47
+ return /*#__PURE__*/React.createElement(Show, {
48
+ above: "md"
49
+ }, /*#__PURE__*/React.createElement(Section, {
50
+ parents: parents,
51
+ api: api,
52
+ disableSelectionToolbar: disableSelectionToolbar,
53
+ testId: "text-section"
54
+ }, children));
55
+ }
41
56
  return /*#__PURE__*/React.createElement(Section, {
42
57
  parents: parents,
43
58
  api: api,
@@ -45,7 +60,48 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
45
60
  testId: "text-section"
46
61
  }, children);
47
62
  }
63
+ }].concat(_toConsumableArray(expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) ? [{
64
+ type: TEXT_SECTION_COLLAPSED.type,
65
+ key: TEXT_SECTION_COLLAPSED.key,
66
+ parents: [{
67
+ type: 'toolbar',
68
+ key: TOOLBARS.INLINE_TEXT_TOOLBAR,
69
+ rank: TOOLBAR_RANK[TEXT_SECTION_COLLAPSED.key]
70
+ }, {
71
+ type: 'toolbar',
72
+ key: TOOLBARS.PRIMARY_TOOLBAR,
73
+ rank: TOOLBAR_RANK[TEXT_SECTION_COLLAPSED.key]
74
+ }],
75
+ component: function component(_ref4) {
76
+ var children = _ref4.children,
77
+ parents = _ref4.parents;
78
+ return /*#__PURE__*/React.createElement(Show, {
79
+ below: "md"
80
+ }, /*#__PURE__*/React.createElement(Section, {
81
+ parents: parents,
82
+ api: api,
83
+ disableSelectionToolbar: disableSelectionToolbar,
84
+ testId: "text-section"
85
+ }, children));
86
+ }
48
87
  }, {
88
+ type: TEXT_COLLAPSED_GROUP.type,
89
+ key: TEXT_COLLAPSED_GROUP.key,
90
+ parents: [{
91
+ type: TEXT_SECTION_COLLAPSED.type,
92
+ key: TEXT_SECTION_COLLAPSED.key,
93
+ rank: 100
94
+ }]
95
+ }, {
96
+ type: TEXT_COLLAPSED_MENU.type,
97
+ key: TEXT_COLLAPSED_MENU.key,
98
+ parents: [{
99
+ type: TEXT_COLLAPSED_GROUP.type,
100
+ key: TEXT_COLLAPSED_GROUP.key,
101
+ rank: 100
102
+ }],
103
+ component: TextCollapsedMenu
104
+ }] : []), [{
49
105
  type: INSERT_BLOCK_SECTION.type,
50
106
  key: INSERT_BLOCK_SECTION.key,
51
107
  parents: [{
@@ -53,9 +109,9 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
53
109
  key: TOOLBARS.PRIMARY_TOOLBAR,
54
110
  rank: TOOLBAR_RANK[INSERT_BLOCK_SECTION.key]
55
111
  }],
56
- component: function component(_ref4) {
57
- var children = _ref4.children,
58
- parents = _ref4.parents;
112
+ component: function component(_ref5) {
113
+ var children = _ref5.children,
114
+ parents = _ref5.parents;
59
115
  return /*#__PURE__*/React.createElement(Section, {
60
116
  testId: "insert-block-section",
61
117
  parents: parents,
@@ -76,9 +132,9 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
76
132
  key: TOOLBARS.PRIMARY_TOOLBAR,
77
133
  rank: TOOLBAR_RANK[LINKING_SECTION.key]
78
134
  }],
79
- component: function component(_ref5) {
80
- var children = _ref5.children,
81
- parents = _ref5.parents;
135
+ component: function component(_ref6) {
136
+ var children = _ref6.children,
137
+ parents = _ref6.parents;
82
138
  return /*#__PURE__*/React.createElement(Section, {
83
139
  testId: "link-section",
84
140
  parents: parents,
@@ -110,8 +166,8 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
110
166
  key: OVERFLOW_GROUP.key,
111
167
  rank: OVERFLOW_GROUP_RANK[OVERFLOW_MENU.key]
112
168
  }],
113
- component: function component(_ref6) {
114
- var children = _ref6.children;
169
+ component: function component(_ref7) {
170
+ var children = _ref7.children;
115
171
  return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
116
172
  }
117
173
  }, {
@@ -122,5 +178,41 @@ export var getToolbarComponents = function getToolbarComponents(api, disableSele
122
178
  key: TOOLBARS.PRIMARY_TOOLBAR,
123
179
  rank: TOOLBAR_RANK[PIN_SECTION.key]
124
180
  }]
125
- }];
181
+ }]);
182
+ if (expValEquals('platform_editor_toolbar_migrate_loom', 'isEnabled', true)) {
183
+ components.push({
184
+ type: OVERFLOW_SECTION_PRIMARY_TOOLBAR.type,
185
+ key: OVERFLOW_SECTION_PRIMARY_TOOLBAR.key,
186
+ parents: [{
187
+ type: 'toolbar',
188
+ key: TOOLBARS.PRIMARY_TOOLBAR,
189
+ rank: TOOLBAR_RANK[OVERFLOW_SECTION_PRIMARY_TOOLBAR.key]
190
+ }],
191
+ component: function component(_ref8) {
192
+ var children = _ref8.children;
193
+ return /*#__PURE__*/React.createElement(OverflowSection, null, children);
194
+ }
195
+ }, {
196
+ type: OVERFLOW_GROUP_PRIMARY_TOOLBAR.type,
197
+ key: OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
198
+ parents: [{
199
+ type: OVERFLOW_SECTION_PRIMARY_TOOLBAR.type,
200
+ key: OVERFLOW_SECTION_PRIMARY_TOOLBAR.key,
201
+ rank: OVERFLOW_SECTION_PRIMARY_TOOLBAR_RANK[OVERFLOW_GROUP_PRIMARY_TOOLBAR.key]
202
+ }]
203
+ }, {
204
+ type: OVERFLOW_MENU_PRIMARY_TOOLBAR.type,
205
+ key: OVERFLOW_MENU_PRIMARY_TOOLBAR.key,
206
+ parents: [{
207
+ type: OVERFLOW_GROUP_PRIMARY_TOOLBAR.type,
208
+ key: OVERFLOW_GROUP_PRIMARY_TOOLBAR.key,
209
+ rank: OVERFLOW_GROUP_PRIMARY_TOOLBAR_RANK[OVERFLOW_MENU_PRIMARY_TOOLBAR.key]
210
+ }],
211
+ component: function component(_ref9) {
212
+ var children = _ref9.children;
213
+ return /*#__PURE__*/React.createElement(OverflowMenu, null, children);
214
+ }
215
+ });
216
+ }
217
+ return components;
126
218
  };
package/dist/types/ui/OverflowSection.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ export declare const OverflowSection: ({ children, hasSeparator, testId, }: {
3
+ children: React.ReactNode;
4
+ hasSeparator?: boolean;
5
+ testId?: string;
6
+ }) => React.JSX.Element | null;
package/dist/types/ui/PrimaryToolbar.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ type PrimaryToolbarProps = {
3
+ children: React.ReactNode;
4
+ };
5
+ export declare const PrimaryToolbar: ({ children }: PrimaryToolbarProps) => React.JSX.Element;
6
+ export {};
package/dist/types/ui/TextCollapsedMenu.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ type TextStylesMenuButtonProps = {
3
+ children: React.ReactNode;
4
+ };
5
+ /**
6
+ * Basic version of existing 'Text Styles' Menu - which doesn't dynamically change icon
7
+ * and is also placeholder to render all other menus in the collapsed state.
8
+ */
9
+ export declare const TextCollapsedMenu: ({ children }: TextStylesMenuButtonProps) => React.JSX.Element;
10
+ export {};
package/dist/types-ts4.5/ui/OverflowSection.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ export declare const OverflowSection: ({ children, hasSeparator, testId, }: {
3
+ children: React.ReactNode;
4
+ hasSeparator?: boolean;
5
+ testId?: string;
6
+ }) => React.JSX.Element | null;
package/dist/types-ts4.5/ui/PrimaryToolbar.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import React from 'react';
2
+ type PrimaryToolbarProps = {
3
+ children: React.ReactNode;
4
+ };
5
+ export declare const PrimaryToolbar: ({ children }: PrimaryToolbarProps) => React.JSX.Element;
6
+ export {};
package/dist/types-ts4.5/ui/TextCollapsedMenu.d.ts ADDED
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ type TextStylesMenuButtonProps = {
3
+ children: React.ReactNode;
4
+ };
5
+ /**
6
+ * Basic version of existing 'Text Styles' Menu - which doesn't dynamically change icon
7
+ * and is also placeholder to render all other menus in the collapsed state.
8
+ */
9
+ export declare const TextCollapsedMenu: ({ children }: TextStylesMenuButtonProps) => React.JSX.Element;
10
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-toolbar",
3
- "version": "0.4.4",
3
+ "version": "0.4.6",
4
4
  "description": "Toolbar plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -34,15 +34,15 @@
34
34
  "@atlaskit/editor-plugin-user-intent": "^1.1.0",
35
35
  "@atlaskit/editor-plugin-user-preferences": "^1.2.0",
36
36
  "@atlaskit/editor-prosemirror": "7.0.0",
37
- "@atlaskit/editor-toolbar": "^0.4.0",
38
- "@atlaskit/editor-toolbar-model": "^0.1.0",
39
- "@atlaskit/tmp-editor-statsig": "^11.8.0",
37
+ "@atlaskit/editor-toolbar": "^0.6.0",
38
+ "@atlaskit/editor-toolbar-model": "^0.2.0",
39
+ "@atlaskit/tmp-editor-statsig": "^11.11.0",
40
40
  "@babel/runtime": "^7.0.0",
41
41
  "bind-event-listener": "^3.0.0",
42
42
  "react-intl-next": "npm:react-intl@^5.18.1"
43
43
  },
44
44
  "peerDependencies": {
45
- "@atlaskit/editor-common": "^107.32.0",
45
+ "@atlaskit/editor-common": "^107.34.0",
46
46
  "react": "^18.2.0"
47
47
  },
48
48
  "techstack": {