@atlaskit/editor-plugin-selection-toolbar 1.9.0 → 1.10.0

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 (17) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/selectionToolbarPlugin.js +49 -21
  3. package/dist/cjs/ui/PrimaryToolbarComponent.js +81 -0
  4. package/dist/cjs/ui/overflow-toolbar-config.js +44 -5
  5. package/dist/es2019/selectionToolbarPlugin.js +45 -17
  6. package/dist/es2019/ui/PrimaryToolbarComponent.js +66 -0
  7. package/dist/es2019/ui/overflow-toolbar-config.js +42 -4
  8. package/dist/esm/selectionToolbarPlugin.js +50 -22
  9. package/dist/esm/ui/PrimaryToolbarComponent.js +72 -0
  10. package/dist/esm/ui/overflow-toolbar-config.js +43 -4
  11. package/dist/types/selectionToolbarPluginType.d.ts +2 -1
  12. package/dist/types/ui/PrimaryToolbarComponent.d.ts +11 -0
  13. package/dist/types/ui/overflow-toolbar-config.d.ts +5 -5
  14. package/dist/types-ts4.5/selectionToolbarPluginType.d.ts +3 -1
  15. package/dist/types-ts4.5/ui/PrimaryToolbarComponent.d.ts +11 -0
  16. package/dist/types-ts4.5/ui/overflow-toolbar-config.d.ts +5 -5
  17. package/package.json +3 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-selection-toolbar
2
2
 
3
+ ## 1.10.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#117435](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117435)
8
+ [`2526289f60537`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2526289f60537) -
9
+ [ux] ED-26675 Docked primary toolbar overflow menu
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 1.9.0
4
16
 
5
17
  ### Minor Changes
package/dist/cjs/selectionToolbarPlugin.js CHANGED
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.selectionToolbarPlugin = void 0;
8
8
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
9
  var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
10
+ var _react = _interopRequireDefault(require("react"));
10
11
  var _bindEventListener = require("bind-event-listener");
11
12
  var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
12
13
  var _utils = require("@atlaskit/editor-common/utils");
@@ -15,30 +16,54 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
15
16
  var _commands = require("./pm-plugins/commands");
16
17
  var _pluginKey = require("./pm-plugins/plugin-key");
17
18
  var _overflowToolbarConfig = require("./ui/overflow-toolbar-config");
19
+ var _PrimaryToolbarComponent = require("./ui/PrimaryToolbarComponent");
18
20
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
19
21
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
20
- var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selectionToolbarPlugin(options) {
22
+ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
23
+ var api = _ref.api,
24
+ config = _ref.config;
21
25
  var __selectionToolbarHandlers = [];
26
+ var primaryToolbarComponent;
27
+ if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
28
+ exposure: true
29
+ })) {
30
+ var _api$primaryToolbar;
31
+ primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
32
+ var popupsBoundariesElement = _ref2.popupsBoundariesElement,
33
+ popupsMountPoint = _ref2.popupsMountPoint,
34
+ popupsScrollableElement = _ref2.popupsScrollableElement;
35
+ return /*#__PURE__*/_react.default.createElement(_PrimaryToolbarComponent.PrimaryToolbarComponent, {
36
+ api: api,
37
+ popupsBoundariesElement: popupsBoundariesElement,
38
+ popupsMountPoint: popupsMountPoint,
39
+ popupsScrollableElement: popupsScrollableElement
40
+ });
41
+ };
42
+ api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
43
+ name: 'overflowMenu',
44
+ component: primaryToolbarComponent
45
+ });
46
+ }
22
47
  return {
23
48
  name: 'selectionToolbar',
24
49
  actions: {
25
50
  suppressToolbar: function suppressToolbar() {
26
- var _options$api$core$act, _options$api;
27
- return (_options$api$core$act = (_options$api = options.api) === null || _options$api === void 0 ? void 0 : _options$api.core.actions.execute((0, _commands.toggleToolbar)({
51
+ var _api$core$actions$exe;
52
+ return (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute((0, _commands.toggleToolbar)({
28
53
  hide: true
29
- }))) !== null && _options$api$core$act !== void 0 ? _options$api$core$act : false;
54
+ }))) !== null && _api$core$actions$exe !== void 0 ? _api$core$actions$exe : false;
30
55
  },
31
56
  unsuppressToolbar: function unsuppressToolbar() {
32
- var _options$api$core$act2, _options$api2;
33
- return (_options$api$core$act2 = (_options$api2 = options.api) === null || _options$api2 === void 0 ? void 0 : _options$api2.core.actions.execute((0, _commands.toggleToolbar)({
57
+ var _api$core$actions$exe2;
58
+ return (_api$core$actions$exe2 = api === null || api === void 0 ? void 0 : api.core.actions.execute((0, _commands.toggleToolbar)({
34
59
  hide: false
35
- }))) !== null && _options$api$core$act2 !== void 0 ? _options$api$core$act2 : false;
60
+ }))) !== null && _api$core$actions$exe2 !== void 0 ? _api$core$actions$exe2 : false;
36
61
  },
37
62
  setToolbarDocking: function setToolbarDocking(toolbarDocking) {
38
- var _options$api$core$act3, _options$api3;
39
- return (_options$api$core$act3 = (_options$api3 = options.api) === null || _options$api3 === void 0 ? void 0 : _options$api3.core.actions.execute((0, _commands.setToolbarDocking)({
63
+ var _api$core$actions$exe3;
64
+ return (_api$core$actions$exe3 = api === null || api === void 0 ? void 0 : api.core.actions.execute((0, _commands.setToolbarDocking)({
40
65
  toolbarDocking: toolbarDocking
41
- }))) !== null && _options$api$core$act3 !== void 0 ? _options$api$core$act3 : false;
66
+ }))) !== null && _api$core$actions$exe3 !== void 0 ? _api$core$actions$exe3 : false;
42
67
  }
43
68
  },
44
69
  getSharedState: function getSharedState(editorState) {
@@ -76,12 +101,12 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
76
101
  var unbind = (0, _bindEventListener.bind)(_view.root, {
77
102
  type: 'mouseup',
78
103
  listener: function listener() {
79
- var _options$api4;
104
+ var _api$editorViewMode;
80
105
  // We only want to set selectionStable to true if the editor has focus
81
106
  // to prevent the toolbar from showing when the editor is blurred
82
107
  // due to a click outside the editor.
83
108
 
84
- var editorViewModePlugin = (_options$api4 = options.api) === null || _options$api4 === void 0 || (_options$api4 = _options$api4.editorViewMode) === null || _options$api4 === void 0 ? void 0 : _options$api4.sharedState.currentState();
109
+ var editorViewModePlugin = api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState();
85
110
  var isViewModeEnabled = (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view';
86
111
  _view.dispatch(_view.state.tr.setMeta(_pluginKey.selectionToolbarPluginKey, {
87
112
  selectionStable: !isViewModeEnabled ? _view.hasFocus() : true
@@ -142,11 +167,11 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
142
167
  // they add to the selection toolbar.
143
168
  // ie. if you want to have your plugin's group appear first, set rank to -10 if there is currently another
144
169
  // plugin you expect to be run at the same time as with an rank of -9
145
- resolved.sort(function (_ref, _ref2) {
146
- var _ref$rank = _ref.rank,
147
- rankA = _ref$rank === void 0 ? 0 : _ref$rank;
148
- var _ref2$rank = _ref2.rank,
149
- rankB = _ref2$rank === void 0 ? 0 : _ref2$rank;
170
+ resolved.sort(function (_ref3, _ref4) {
171
+ var _ref3$rank = _ref3.rank,
172
+ rankA = _ref3$rank === void 0 ? 0 : _ref3$rank;
173
+ var _ref4$rank = _ref4.rank,
174
+ rankB = _ref4$rank === void 0 ? 0 : _ref4$rank;
150
175
  if (rankA < rankB) {
151
176
  return 1;
152
177
  }
@@ -181,11 +206,11 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
181
206
  }
182
207
  }
183
208
  if (items.length > 0 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
184
- items.push.apply(items, (0, _toConsumableArray2.default)((0, _overflowToolbarConfig.getOverflowToolbarConfig)({
185
- api: options.api
209
+ items.push.apply(items, (0, _toConsumableArray2.default)((0, _overflowToolbarConfig.getOverflowFloatingToolbarConfig)({
210
+ api: api
186
211
  })));
187
212
  }
188
- var calcToolbarPosition = options.config.preferenceToolbarAboveSelection ? _utils.calculateToolbarPositionAboveSelection : _utils.calculateToolbarPositionTrackHead;
213
+ var calcToolbarPosition = config.preferenceToolbarAboveSelection ? _utils.calculateToolbarPositionAboveSelection : _utils.calculateToolbarPositionTrackHead;
189
214
  var toolbarTitle = 'Selection toolbar';
190
215
  var onPositionCalculated = calcToolbarPosition(toolbarTitle);
191
216
  var nodeType = getSelectionNodeTypes(state);
@@ -196,7 +221,10 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
196
221
  onPositionCalculated: onPositionCalculated
197
222
  };
198
223
  }
199
- }
224
+ },
225
+ primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
226
+ exposure: true
227
+ }) ? primaryToolbarComponent : undefined
200
228
  };
201
229
  };
202
230
  function getSelectionNodeTypes(state) {
package/dist/cjs/ui/PrimaryToolbarComponent.js ADDED
@@ -0,0 +1,81 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.PrimaryToolbarComponent = PrimaryToolbarComponent;
8
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
+ var _react = require("react");
10
+ var _react2 = require("@emotion/react");
11
+ var _keymaps = require("@atlaskit/editor-common/keymaps");
12
+ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
13
+ var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
14
+ var _overflowToolbarConfig = require("./overflow-toolbar-config");
15
+ /**
16
+ * @jsxRuntime classic
17
+ * @jsx jsx
18
+ * @jsxFrag
19
+ */
20
+
21
+ // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
22
+
23
+ var DROPDOWN_WIDTH = 240;
24
+ function PrimaryToolbarComponent(_ref) {
25
+ var api = _ref.api,
26
+ popupsBoundariesElement = _ref.popupsBoundariesElement,
27
+ popupsMountPoint = _ref.popupsMountPoint,
28
+ popupsScrollableElement = _ref.popupsScrollableElement;
29
+ var _useState = (0, _react.useState)(false),
30
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
31
+ isOpen = _useState2[0],
32
+ setIsOpen = _useState2[1];
33
+ var items = (0, _react.useMemo)(function () {
34
+ return (0, _overflowToolbarConfig.getOverflowPrimaryToolbarConfig)({
35
+ api: api
36
+ });
37
+ }, [api]);
38
+ var content = 'Show more items';
39
+ var onClick = (0, _react.useCallback)(function () {
40
+ setIsOpen(!isOpen);
41
+ }, [isOpen]);
42
+ var onMenuItemActivated = (0, _react.useCallback)(function (_ref2) {
43
+ var _item$onClick;
44
+ var item = _ref2.item;
45
+ item === null || item === void 0 || (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item);
46
+ }, []);
47
+ return (0, _react2.jsx)(_uiMenu.DropdownMenu, {
48
+ isOpen: isOpen,
49
+ onOpenChange: function onOpenChange(attrs) {
50
+ return setIsOpen(attrs.isOpen);
51
+ },
52
+ items: items,
53
+ arrowKeyNavigationProviderOptions: {
54
+ type: _uiMenu.ArrowKeyNavigationType.MENU
55
+ },
56
+ boundariesElement: popupsBoundariesElement,
57
+ mountTo: popupsMountPoint,
58
+ scrollableElement: popupsScrollableElement,
59
+ section: {
60
+ hasSeparator: true
61
+ },
62
+ onItemActivated: onMenuItemActivated,
63
+ fitWidth: DROPDOWN_WIDTH
64
+ }, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
65
+ onClick: onClick,
66
+ "aria-haspopup": "dialog",
67
+ "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(_keymaps.addLink),
68
+ "aria-label": content,
69
+ testId: content,
70
+ spacing: "default",
71
+ title: content
72
+ // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
73
+ ,
74
+ css: buttonStyles
75
+ }, (0, _react2.jsx)(_showMoreHorizontal.default, {
76
+ label: "Show more items"
77
+ })));
78
+ }
79
+ var buttonStyles = (0, _react2.css)({
80
+ padding: "var(--ds-space-075, 6px)"
81
+ });
package/dist/cjs/ui/overflow-toolbar-config.js CHANGED
@@ -3,19 +3,20 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.getOverflowToolbarConfig = void 0;
6
+ exports.getOverflowPrimaryToolbarConfig = exports.getOverflowFloatingToolbarConfig = void 0;
7
7
  var _react = require("@emotion/react");
8
+ var _menu = require("@atlaskit/menu");
8
9
  var _ContextualToolbarIcon = require("./icons/ContextualToolbarIcon");
9
10
  var _FixedToolbarIcon = require("./icons/FixedToolbarIcon");
10
11
  /**
11
12
  * @jsxRuntime classic
12
13
  * @jsx jsx
14
+ * @jsxFrag
13
15
  */
14
-
15
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
16
+ // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
16
17
 
17
18
  // New editor controls
18
- var getOverflowToolbarConfig = exports.getOverflowToolbarConfig = function getOverflowToolbarConfig(_ref) {
19
+ var getOverflowFloatingToolbarConfig = exports.getOverflowFloatingToolbarConfig = function getOverflowFloatingToolbarConfig(_ref) {
19
20
  var api = _ref.api;
20
21
  return [{
21
22
  type: 'separator'
@@ -46,4 +47,42 @@ var getOverflowToolbarConfig = exports.getOverflowToolbarConfig = function getOv
46
47
  })
47
48
  }]
48
49
  }];
49
- };
50
+ };
51
+ var getOverflowPrimaryToolbarConfig = exports.getOverflowPrimaryToolbarConfig = function getOverflowPrimaryToolbarConfig(_ref2) {
52
+ var api = _ref2.api;
53
+ return [{
54
+ items: [{
55
+ content:
56
+ // eslint-disable-next-line @atlaskit/design-system/use-primitives
57
+ (0, _react.jsx)("div", {
58
+ css: headingContainerStyles
59
+ }, (0, _react.jsx)(_menu.HeadingItem, null, "Toolbar position")),
60
+ value: {
61
+ name: ''
62
+ },
63
+ isDisabled: true
64
+ }, {
65
+ content: 'Contextual',
66
+ value: {
67
+ name: 'contextual'
68
+ },
69
+ onClick: function onClick() {
70
+ var _api$selectionToolbar7, _api$selectionToolbar8, _api$selectionToolbar9;
71
+ return (_api$selectionToolbar7 = api === null || api === void 0 || (_api$selectionToolbar8 = api.selectionToolbar.actions) === null || _api$selectionToolbar8 === void 0 || (_api$selectionToolbar9 = _api$selectionToolbar8.setToolbarDocking) === null || _api$selectionToolbar9 === void 0 ? void 0 : _api$selectionToolbar9.call(_api$selectionToolbar8, 'none')) !== null && _api$selectionToolbar7 !== void 0 ? _api$selectionToolbar7 : false;
72
+ }
73
+ }, {
74
+ content: 'Fixed at top',
75
+ value: {
76
+ name: 'fixed'
77
+ },
78
+ onClick: function onClick() {
79
+ var _api$selectionToolbar10, _api$selectionToolbar11, _api$selectionToolbar12;
80
+ return (_api$selectionToolbar10 = api === null || api === void 0 || (_api$selectionToolbar11 = api.selectionToolbar.actions) === null || _api$selectionToolbar11 === void 0 || (_api$selectionToolbar12 = _api$selectionToolbar11.setToolbarDocking) === null || _api$selectionToolbar12 === void 0 ? void 0 : _api$selectionToolbar12.call(_api$selectionToolbar11, 'top')) !== null && _api$selectionToolbar10 !== void 0 ? _api$selectionToolbar10 : false;
81
+ }
82
+ }]
83
+ }];
84
+ };
85
+ var headingContainerStyles = (0, _react.css)({
86
+ padding: "var(--ds-space-100, 8px)".concat(" 0"),
87
+ margin: "var(--ds-space-negative-100, -8px)".concat(" 0")
88
+ });
package/dist/es2019/selectionToolbarPlugin.js CHANGED
@@ -1,3 +1,4 @@
1
+ import React from 'react';
1
2
  import { bind } from 'bind-event-listener';
2
3
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
3
4
  import { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
@@ -5,29 +6,53 @@ import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
5
6
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
6
7
  import { setToolbarDocking, toggleToolbar } from './pm-plugins/commands';
7
8
  import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
8
- import { getOverflowToolbarConfig } from './ui/overflow-toolbar-config';
9
- export const selectionToolbarPlugin = options => {
9
+ import { getOverflowFloatingToolbarConfig } from './ui/overflow-toolbar-config';
10
+ import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
11
+ export const selectionToolbarPlugin = ({
12
+ api,
13
+ config
14
+ }) => {
10
15
  const __selectionToolbarHandlers = [];
16
+ let primaryToolbarComponent;
17
+ if (editorExperiment('platform_editor_controls', 'variant1', {
18
+ exposure: true
19
+ })) {
20
+ var _api$primaryToolbar;
21
+ primaryToolbarComponent = ({
22
+ popupsBoundariesElement,
23
+ popupsMountPoint,
24
+ popupsScrollableElement
25
+ }) => /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
26
+ api: api,
27
+ popupsBoundariesElement: popupsBoundariesElement,
28
+ popupsMountPoint: popupsMountPoint,
29
+ popupsScrollableElement: popupsScrollableElement
30
+ });
31
+ api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
32
+ name: 'overflowMenu',
33
+ component: primaryToolbarComponent
34
+ });
35
+ }
11
36
  return {
12
37
  name: 'selectionToolbar',
13
38
  actions: {
14
39
  suppressToolbar: () => {
15
- var _options$api$core$act, _options$api;
16
- return (_options$api$core$act = (_options$api = options.api) === null || _options$api === void 0 ? void 0 : _options$api.core.actions.execute(toggleToolbar({
40
+ var _api$core$actions$exe;
41
+ return (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute(toggleToolbar({
17
42
  hide: true
18
- }))) !== null && _options$api$core$act !== void 0 ? _options$api$core$act : false;
43
+ }))) !== null && _api$core$actions$exe !== void 0 ? _api$core$actions$exe : false;
19
44
  },
20
45
  unsuppressToolbar: () => {
21
- var _options$api$core$act2, _options$api2;
22
- return (_options$api$core$act2 = (_options$api2 = options.api) === null || _options$api2 === void 0 ? void 0 : _options$api2.core.actions.execute(toggleToolbar({
46
+ var _api$core$actions$exe2;
47
+ return (_api$core$actions$exe2 = api === null || api === void 0 ? void 0 : api.core.actions.execute(toggleToolbar({
23
48
  hide: false
24
- }))) !== null && _options$api$core$act2 !== void 0 ? _options$api$core$act2 : false;
49
+ }))) !== null && _api$core$actions$exe2 !== void 0 ? _api$core$actions$exe2 : false;
25
50
  },
26
51
  setToolbarDocking: toolbarDocking => {
27
- var _options$api$core$act3, _options$api3;
28
- return (_options$api$core$act3 = (_options$api3 = options.api) === null || _options$api3 === void 0 ? void 0 : _options$api3.core.actions.execute(setToolbarDocking({
52
+ var _api$core$actions$exe3;
53
+ return (_api$core$actions$exe3 = api === null || api === void 0 ? void 0 : api.core.actions.execute(setToolbarDocking({
29
54
  toolbarDocking
30
- }))) !== null && _options$api$core$act3 !== void 0 ? _options$api$core$act3 : false;
55
+ }))) !== null && _api$core$actions$exe3 !== void 0 ? _api$core$actions$exe3 : false;
31
56
  }
32
57
  },
33
58
  getSharedState(editorState) {
@@ -68,12 +93,12 @@ export const selectionToolbarPlugin = options => {
68
93
  const unbind = bind(view.root, {
69
94
  type: 'mouseup',
70
95
  listener: () => {
71
- var _options$api4, _options$api4$editorV;
96
+ var _api$editorViewMode;
72
97
  // We only want to set selectionStable to true if the editor has focus
73
98
  // to prevent the toolbar from showing when the editor is blurred
74
99
  // due to a click outside the editor.
75
100
 
76
- const editorViewModePlugin = (_options$api4 = options.api) === null || _options$api4 === void 0 ? void 0 : (_options$api4$editorV = _options$api4.editorViewMode) === null || _options$api4$editorV === void 0 ? void 0 : _options$api4$editorV.sharedState.currentState();
101
+ const editorViewModePlugin = api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState();
77
102
  const isViewModeEnabled = (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view';
78
103
  view.dispatch(view.state.tr.setMeta(selectionToolbarPluginKey, {
79
104
  selectionStable: !isViewModeEnabled ? view.hasFocus() : true
@@ -170,11 +195,11 @@ export const selectionToolbarPlugin = options => {
170
195
  }
171
196
  }
172
197
  if (items.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
173
- items.push(...getOverflowToolbarConfig({
174
- api: options.api
198
+ items.push(...getOverflowFloatingToolbarConfig({
199
+ api
175
200
  }));
176
201
  }
177
- const calcToolbarPosition = options.config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
202
+ const calcToolbarPosition = config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
178
203
  const toolbarTitle = 'Selection toolbar';
179
204
  const onPositionCalculated = calcToolbarPosition(toolbarTitle);
180
205
  const nodeType = getSelectionNodeTypes(state);
@@ -185,7 +210,10 @@ export const selectionToolbarPlugin = options => {
185
210
  onPositionCalculated
186
211
  };
187
212
  }
188
- }
213
+ },
214
+ primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && editorExperiment('platform_editor_controls', 'variant1', {
215
+ exposure: true
216
+ }) ? primaryToolbarComponent : undefined
189
217
  };
190
218
  };
191
219
  function getSelectionNodeTypes(state) {
package/dist/es2019/ui/PrimaryToolbarComponent.js ADDED
@@ -0,0 +1,66 @@
1
+ /**
2
+ * @jsxRuntime classic
3
+ * @jsx jsx
4
+ * @jsxFrag
5
+ */
6
+ import { useCallback, useMemo, useState } from 'react';
7
+ import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
8
+
9
+ import { addLink, getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
10
+ import { ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
11
+ import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
12
+ import { getOverflowPrimaryToolbarConfig } from './overflow-toolbar-config';
13
+ const DROPDOWN_WIDTH = 240;
14
+ export function PrimaryToolbarComponent({
15
+ api,
16
+ popupsBoundariesElement,
17
+ popupsMountPoint,
18
+ popupsScrollableElement
19
+ }) {
20
+ const [isOpen, setIsOpen] = useState(false);
21
+ const items = useMemo(() => getOverflowPrimaryToolbarConfig({
22
+ api
23
+ }), [api]);
24
+ const content = 'Show more items';
25
+ const onClick = useCallback(() => {
26
+ setIsOpen(!isOpen);
27
+ }, [isOpen]);
28
+ const onMenuItemActivated = useCallback(({
29
+ item
30
+ }) => {
31
+ var _item$onClick;
32
+ item === null || item === void 0 ? void 0 : (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item);
33
+ }, []);
34
+ return jsx(DropdownMenu, {
35
+ isOpen: isOpen,
36
+ onOpenChange: attrs => setIsOpen(attrs.isOpen),
37
+ items: items,
38
+ arrowKeyNavigationProviderOptions: {
39
+ type: ArrowKeyNavigationType.MENU
40
+ },
41
+ boundariesElement: popupsBoundariesElement,
42
+ mountTo: popupsMountPoint,
43
+ scrollableElement: popupsScrollableElement,
44
+ section: {
45
+ hasSeparator: true
46
+ },
47
+ onItemActivated: onMenuItemActivated,
48
+ fitWidth: DROPDOWN_WIDTH
49
+ }, jsx(ToolbarButton, {
50
+ onClick: onClick,
51
+ "aria-haspopup": "dialog",
52
+ "aria-keyshortcuts": getAriaKeyshortcuts(addLink),
53
+ "aria-label": content,
54
+ testId: content,
55
+ spacing: "default",
56
+ title: content
57
+ // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
58
+ ,
59
+ css: buttonStyles
60
+ }, jsx(ShowMoreHorizontalIcon, {
61
+ label: "Show more items"
62
+ })));
63
+ }
64
+ const buttonStyles = css({
65
+ padding: "var(--ds-space-075, 6px)"
66
+ });
package/dist/es2019/ui/overflow-toolbar-config.js CHANGED
@@ -1,14 +1,15 @@
1
1
  /**
2
2
  * @jsxRuntime classic
3
3
  * @jsx jsx
4
+ * @jsxFrag
4
5
  */
6
+ import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
5
7
 
6
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
- import { jsx } from '@emotion/react';
8
+ import { HeadingItem } from '@atlaskit/menu';
8
9
  import { ContextualToolbarIcon } from './icons/ContextualToolbarIcon';
9
10
  import { FixedToolbarIcon } from './icons/FixedToolbarIcon';
10
11
  // New editor controls
11
- export const getOverflowToolbarConfig = ({
12
+ export const getOverflowFloatingToolbarConfig = ({
12
13
  api
13
14
  }) => [{
14
15
  type: 'separator'
@@ -38,4 +39,41 @@ export const getOverflowToolbarConfig = ({
38
39
  label: "Fixed toolbar"
39
40
  })
40
41
  }]
41
- }];
42
+ }];
43
+ export const getOverflowPrimaryToolbarConfig = ({
44
+ api
45
+ }) => [{
46
+ items: [{
47
+ content:
48
+ // eslint-disable-next-line @atlaskit/design-system/use-primitives
49
+ jsx("div", {
50
+ css: headingContainerStyles
51
+ }, jsx(HeadingItem, null, "Toolbar position")),
52
+ value: {
53
+ name: ''
54
+ },
55
+ isDisabled: true
56
+ }, {
57
+ content: 'Contextual',
58
+ value: {
59
+ name: 'contextual'
60
+ },
61
+ onClick: () => {
62
+ var _api$selectionToolbar7, _api$selectionToolbar8, _api$selectionToolbar9;
63
+ return (_api$selectionToolbar7 = api === null || api === void 0 ? void 0 : (_api$selectionToolbar8 = api.selectionToolbar.actions) === null || _api$selectionToolbar8 === void 0 ? void 0 : (_api$selectionToolbar9 = _api$selectionToolbar8.setToolbarDocking) === null || _api$selectionToolbar9 === void 0 ? void 0 : _api$selectionToolbar9.call(_api$selectionToolbar8, 'none')) !== null && _api$selectionToolbar7 !== void 0 ? _api$selectionToolbar7 : false;
64
+ }
65
+ }, {
66
+ content: 'Fixed at top',
67
+ value: {
68
+ name: 'fixed'
69
+ },
70
+ onClick: () => {
71
+ var _api$selectionToolbar10, _api$selectionToolbar11, _api$selectionToolbar12;
72
+ return (_api$selectionToolbar10 = api === null || api === void 0 ? void 0 : (_api$selectionToolbar11 = api.selectionToolbar.actions) === null || _api$selectionToolbar11 === void 0 ? void 0 : (_api$selectionToolbar12 = _api$selectionToolbar11.setToolbarDocking) === null || _api$selectionToolbar12 === void 0 ? void 0 : _api$selectionToolbar12.call(_api$selectionToolbar11, 'top')) !== null && _api$selectionToolbar10 !== void 0 ? _api$selectionToolbar10 : false;
73
+ }
74
+ }]
75
+ }];
76
+ const headingContainerStyles = css({
77
+ padding: `${"var(--ds-space-100, 8px)"} 0`,
78
+ margin: `${"var(--ds-space-negative-100, -8px)"} 0`
79
+ });
package/dist/esm/selectionToolbarPlugin.js CHANGED
@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
3
3
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
4
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
+ import React from 'react';
5
6
  import { bind } from 'bind-event-listener';
6
7
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
7
8
  import { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
@@ -9,29 +10,53 @@ import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
9
10
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
10
11
  import { setToolbarDocking as _setToolbarDocking, toggleToolbar } from './pm-plugins/commands';
11
12
  import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
12
- import { getOverflowToolbarConfig } from './ui/overflow-toolbar-config';
13
- export var selectionToolbarPlugin = function selectionToolbarPlugin(options) {
13
+ import { getOverflowFloatingToolbarConfig } from './ui/overflow-toolbar-config';
14
+ import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
15
+ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
16
+ var api = _ref.api,
17
+ config = _ref.config;
14
18
  var __selectionToolbarHandlers = [];
19
+ var primaryToolbarComponent;
20
+ if (editorExperiment('platform_editor_controls', 'variant1', {
21
+ exposure: true
22
+ })) {
23
+ var _api$primaryToolbar;
24
+ primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
25
+ var popupsBoundariesElement = _ref2.popupsBoundariesElement,
26
+ popupsMountPoint = _ref2.popupsMountPoint,
27
+ popupsScrollableElement = _ref2.popupsScrollableElement;
28
+ return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
29
+ api: api,
30
+ popupsBoundariesElement: popupsBoundariesElement,
31
+ popupsMountPoint: popupsMountPoint,
32
+ popupsScrollableElement: popupsScrollableElement
33
+ });
34
+ };
35
+ api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
36
+ name: 'overflowMenu',
37
+ component: primaryToolbarComponent
38
+ });
39
+ }
15
40
  return {
16
41
  name: 'selectionToolbar',
17
42
  actions: {
18
43
  suppressToolbar: function suppressToolbar() {
19
- var _options$api$core$act, _options$api;
20
- return (_options$api$core$act = (_options$api = options.api) === null || _options$api === void 0 ? void 0 : _options$api.core.actions.execute(toggleToolbar({
44
+ var _api$core$actions$exe;
45
+ return (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute(toggleToolbar({
21
46
  hide: true
22
- }))) !== null && _options$api$core$act !== void 0 ? _options$api$core$act : false;
47
+ }))) !== null && _api$core$actions$exe !== void 0 ? _api$core$actions$exe : false;
23
48
  },
24
49
  unsuppressToolbar: function unsuppressToolbar() {
25
- var _options$api$core$act2, _options$api2;
26
- return (_options$api$core$act2 = (_options$api2 = options.api) === null || _options$api2 === void 0 ? void 0 : _options$api2.core.actions.execute(toggleToolbar({
50
+ var _api$core$actions$exe2;
51
+ return (_api$core$actions$exe2 = api === null || api === void 0 ? void 0 : api.core.actions.execute(toggleToolbar({
27
52
  hide: false
28
- }))) !== null && _options$api$core$act2 !== void 0 ? _options$api$core$act2 : false;
53
+ }))) !== null && _api$core$actions$exe2 !== void 0 ? _api$core$actions$exe2 : false;
29
54
  },
30
55
  setToolbarDocking: function setToolbarDocking(toolbarDocking) {
31
- var _options$api$core$act3, _options$api3;
32
- return (_options$api$core$act3 = (_options$api3 = options.api) === null || _options$api3 === void 0 ? void 0 : _options$api3.core.actions.execute(_setToolbarDocking({
56
+ var _api$core$actions$exe3;
57
+ return (_api$core$actions$exe3 = api === null || api === void 0 ? void 0 : api.core.actions.execute(_setToolbarDocking({
33
58
  toolbarDocking: toolbarDocking
34
- }))) !== null && _options$api$core$act3 !== void 0 ? _options$api$core$act3 : false;
59
+ }))) !== null && _api$core$actions$exe3 !== void 0 ? _api$core$actions$exe3 : false;
35
60
  }
36
61
  },
37
62
  getSharedState: function getSharedState(editorState) {
@@ -69,12 +94,12 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(options) {
69
94
  var unbind = bind(_view.root, {
70
95
  type: 'mouseup',
71
96
  listener: function listener() {
72
- var _options$api4;
97
+ var _api$editorViewMode;
73
98
  // We only want to set selectionStable to true if the editor has focus
74
99
  // to prevent the toolbar from showing when the editor is blurred
75
100
  // due to a click outside the editor.
76
101
 
77
- var editorViewModePlugin = (_options$api4 = options.api) === null || _options$api4 === void 0 || (_options$api4 = _options$api4.editorViewMode) === null || _options$api4 === void 0 ? void 0 : _options$api4.sharedState.currentState();
102
+ var editorViewModePlugin = api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState();
78
103
  var isViewModeEnabled = (editorViewModePlugin === null || editorViewModePlugin === void 0 ? void 0 : editorViewModePlugin.mode) === 'view';
79
104
  _view.dispatch(_view.state.tr.setMeta(selectionToolbarPluginKey, {
80
105
  selectionStable: !isViewModeEnabled ? _view.hasFocus() : true
@@ -135,11 +160,11 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(options) {
135
160
  // they add to the selection toolbar.
136
161
  // ie. if you want to have your plugin's group appear first, set rank to -10 if there is currently another
137
162
  // plugin you expect to be run at the same time as with an rank of -9
138
- resolved.sort(function (_ref, _ref2) {
139
- var _ref$rank = _ref.rank,
140
- rankA = _ref$rank === void 0 ? 0 : _ref$rank;
141
- var _ref2$rank = _ref2.rank,
142
- rankB = _ref2$rank === void 0 ? 0 : _ref2$rank;
163
+ resolved.sort(function (_ref3, _ref4) {
164
+ var _ref3$rank = _ref3.rank,
165
+ rankA = _ref3$rank === void 0 ? 0 : _ref3$rank;
166
+ var _ref4$rank = _ref4.rank,
167
+ rankB = _ref4$rank === void 0 ? 0 : _ref4$rank;
143
168
  if (rankA < rankB) {
144
169
  return 1;
145
170
  }
@@ -174,11 +199,11 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(options) {
174
199
  }
175
200
  }
176
201
  if (items.length > 0 && editorExperiment('platform_editor_controls', 'variant1')) {
177
- items.push.apply(items, _toConsumableArray(getOverflowToolbarConfig({
178
- api: options.api
202
+ items.push.apply(items, _toConsumableArray(getOverflowFloatingToolbarConfig({
203
+ api: api
179
204
  })));
180
205
  }
181
- var calcToolbarPosition = options.config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
206
+ var calcToolbarPosition = config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
182
207
  var toolbarTitle = 'Selection toolbar';
183
208
  var onPositionCalculated = calcToolbarPosition(toolbarTitle);
184
209
  var nodeType = getSelectionNodeTypes(state);
@@ -189,7 +214,10 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(options) {
189
214
  onPositionCalculated: onPositionCalculated
190
215
  };
191
216
  }
192
- }
217
+ },
218
+ primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && editorExperiment('platform_editor_controls', 'variant1', {
219
+ exposure: true
220
+ }) ? primaryToolbarComponent : undefined
193
221
  };
194
222
  };
195
223
  function getSelectionNodeTypes(state) {
package/dist/esm/ui/PrimaryToolbarComponent.js ADDED
@@ -0,0 +1,72 @@
1
+ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
+ /**
3
+ * @jsxRuntime classic
4
+ * @jsx jsx
5
+ * @jsxFrag
6
+ */
7
+ import { useCallback, useMemo, useState } from 'react';
8
+ import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
9
+
10
+ import { addLink, getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
11
+ import { ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
12
+ import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
13
+ import { getOverflowPrimaryToolbarConfig } from './overflow-toolbar-config';
14
+ var DROPDOWN_WIDTH = 240;
15
+ export function PrimaryToolbarComponent(_ref) {
16
+ var api = _ref.api,
17
+ popupsBoundariesElement = _ref.popupsBoundariesElement,
18
+ popupsMountPoint = _ref.popupsMountPoint,
19
+ popupsScrollableElement = _ref.popupsScrollableElement;
20
+ var _useState = useState(false),
21
+ _useState2 = _slicedToArray(_useState, 2),
22
+ isOpen = _useState2[0],
23
+ setIsOpen = _useState2[1];
24
+ var items = useMemo(function () {
25
+ return getOverflowPrimaryToolbarConfig({
26
+ api: api
27
+ });
28
+ }, [api]);
29
+ var content = 'Show more items';
30
+ var onClick = useCallback(function () {
31
+ setIsOpen(!isOpen);
32
+ }, [isOpen]);
33
+ var onMenuItemActivated = useCallback(function (_ref2) {
34
+ var _item$onClick;
35
+ var item = _ref2.item;
36
+ item === null || item === void 0 || (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item);
37
+ }, []);
38
+ return jsx(DropdownMenu, {
39
+ isOpen: isOpen,
40
+ onOpenChange: function onOpenChange(attrs) {
41
+ return setIsOpen(attrs.isOpen);
42
+ },
43
+ items: items,
44
+ arrowKeyNavigationProviderOptions: {
45
+ type: ArrowKeyNavigationType.MENU
46
+ },
47
+ boundariesElement: popupsBoundariesElement,
48
+ mountTo: popupsMountPoint,
49
+ scrollableElement: popupsScrollableElement,
50
+ section: {
51
+ hasSeparator: true
52
+ },
53
+ onItemActivated: onMenuItemActivated,
54
+ fitWidth: DROPDOWN_WIDTH
55
+ }, jsx(ToolbarButton, {
56
+ onClick: onClick,
57
+ "aria-haspopup": "dialog",
58
+ "aria-keyshortcuts": getAriaKeyshortcuts(addLink),
59
+ "aria-label": content,
60
+ testId: content,
61
+ spacing: "default",
62
+ title: content
63
+ // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
64
+ ,
65
+ css: buttonStyles
66
+ }, jsx(ShowMoreHorizontalIcon, {
67
+ label: "Show more items"
68
+ })));
69
+ }
70
+ var buttonStyles = css({
71
+ padding: "var(--ds-space-075, 6px)"
72
+ });
package/dist/esm/ui/overflow-toolbar-config.js CHANGED
@@ -1,14 +1,15 @@
1
1
  /**
2
2
  * @jsxRuntime classic
3
3
  * @jsx jsx
4
+ * @jsxFrag
4
5
  */
6
+ import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
5
7
 
6
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
- import { jsx } from '@emotion/react';
8
+ import { HeadingItem } from '@atlaskit/menu';
8
9
  import { ContextualToolbarIcon } from './icons/ContextualToolbarIcon';
9
10
  import { FixedToolbarIcon } from './icons/FixedToolbarIcon';
10
11
  // New editor controls
11
- export var getOverflowToolbarConfig = function getOverflowToolbarConfig(_ref) {
12
+ export var getOverflowFloatingToolbarConfig = function getOverflowFloatingToolbarConfig(_ref) {
12
13
  var api = _ref.api;
13
14
  return [{
14
15
  type: 'separator'
@@ -39,4 +40,42 @@ export var getOverflowToolbarConfig = function getOverflowToolbarConfig(_ref) {
39
40
  })
40
41
  }]
41
42
  }];
42
- };
43
+ };
44
+ export var getOverflowPrimaryToolbarConfig = function getOverflowPrimaryToolbarConfig(_ref2) {
45
+ var api = _ref2.api;
46
+ return [{
47
+ items: [{
48
+ content:
49
+ // eslint-disable-next-line @atlaskit/design-system/use-primitives
50
+ jsx("div", {
51
+ css: headingContainerStyles
52
+ }, jsx(HeadingItem, null, "Toolbar position")),
53
+ value: {
54
+ name: ''
55
+ },
56
+ isDisabled: true
57
+ }, {
58
+ content: 'Contextual',
59
+ value: {
60
+ name: 'contextual'
61
+ },
62
+ onClick: function onClick() {
63
+ var _api$selectionToolbar7, _api$selectionToolbar8, _api$selectionToolbar9;
64
+ return (_api$selectionToolbar7 = api === null || api === void 0 || (_api$selectionToolbar8 = api.selectionToolbar.actions) === null || _api$selectionToolbar8 === void 0 || (_api$selectionToolbar9 = _api$selectionToolbar8.setToolbarDocking) === null || _api$selectionToolbar9 === void 0 ? void 0 : _api$selectionToolbar9.call(_api$selectionToolbar8, 'none')) !== null && _api$selectionToolbar7 !== void 0 ? _api$selectionToolbar7 : false;
65
+ }
66
+ }, {
67
+ content: 'Fixed at top',
68
+ value: {
69
+ name: 'fixed'
70
+ },
71
+ onClick: function onClick() {
72
+ var _api$selectionToolbar10, _api$selectionToolbar11, _api$selectionToolbar12;
73
+ return (_api$selectionToolbar10 = api === null || api === void 0 || (_api$selectionToolbar11 = api.selectionToolbar.actions) === null || _api$selectionToolbar11 === void 0 || (_api$selectionToolbar12 = _api$selectionToolbar11.setToolbarDocking) === null || _api$selectionToolbar12 === void 0 ? void 0 : _api$selectionToolbar12.call(_api$selectionToolbar11, 'top')) !== null && _api$selectionToolbar10 !== void 0 ? _api$selectionToolbar10 : false;
74
+ }
75
+ }]
76
+ }];
77
+ };
78
+ var headingContainerStyles = css({
79
+ padding: "var(--ds-space-100, 8px)".concat(" 0"),
80
+ margin: "var(--ds-space-negative-100, -8px)".concat(" 0")
81
+ });
package/dist/types/selectionToolbarPluginType.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
2
2
  import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
3
+ import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
3
4
  import type { ToolbarDocking } from './types';
4
5
  export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
5
6
  sharedState: {
@@ -11,7 +12,7 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
11
12
  */
12
13
  preferenceToolbarAboveSelection?: boolean;
13
14
  };
14
- dependencies: [OptionalPlugin<EditorViewModePlugin>];
15
+ dependencies: [OptionalPlugin<EditorViewModePlugin>, OptionalPlugin<PrimaryToolbarPlugin>];
15
16
  actions?: {
16
17
  suppressToolbar?: () => boolean;
17
18
  unsuppressToolbar?: () => boolean;
package/dist/types/ui/PrimaryToolbarComponent.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { jsx } from '@emotion/react';
2
+ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
+ import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
4
+ type Props = {
5
+ api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
6
+ popupsBoundariesElement?: HTMLElement;
7
+ popupsMountPoint?: HTMLElement;
8
+ popupsScrollableElement?: HTMLElement;
9
+ };
10
+ export declare function PrimaryToolbarComponent({ api, popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, }: Props): jsx.JSX.Element;
11
+ export {};
package/dist/types/ui/overflow-toolbar-config.d.ts CHANGED
@@ -1,12 +1,12 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
1
  import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
6
2
  import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
+ import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
7
4
  import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
8
5
  type OverflowToobarConfigOptions = {
9
6
  api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
10
7
  };
11
- export declare const getOverflowToolbarConfig: ({ api, }: OverflowToobarConfigOptions) => FloatingToolbarItem<Command>[];
8
+ export declare const getOverflowFloatingToolbarConfig: ({ api, }: OverflowToobarConfigOptions) => FloatingToolbarItem<Command>[];
9
+ export declare const getOverflowPrimaryToolbarConfig: ({ api, }: OverflowToobarConfigOptions) => {
10
+ items: MenuItem[];
11
+ }[];
12
12
  export {};
package/dist/types-ts4.5/selectionToolbarPluginType.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
2
2
  import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
3
+ import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
3
4
  import type { ToolbarDocking } from './types';
4
5
  export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
5
6
  sharedState: {
@@ -12,7 +13,8 @@ export type SelectionToolbarPlugin = NextEditorPlugin<'selectionToolbar', {
12
13
  preferenceToolbarAboveSelection?: boolean;
13
14
  };
14
15
  dependencies: [
15
- OptionalPlugin<EditorViewModePlugin>
16
+ OptionalPlugin<EditorViewModePlugin>,
17
+ OptionalPlugin<PrimaryToolbarPlugin>
16
18
  ];
17
19
  actions?: {
18
20
  suppressToolbar?: () => boolean;
package/dist/types-ts4.5/ui/PrimaryToolbarComponent.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { jsx } from '@emotion/react';
2
+ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
+ import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
4
+ type Props = {
5
+ api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
6
+ popupsBoundariesElement?: HTMLElement;
7
+ popupsMountPoint?: HTMLElement;
8
+ popupsScrollableElement?: HTMLElement;
9
+ };
10
+ export declare function PrimaryToolbarComponent({ api, popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, }: Props): jsx.JSX.Element;
11
+ export {};
package/dist/types-ts4.5/ui/overflow-toolbar-config.d.ts CHANGED
@@ -1,12 +1,12 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
1
  import type { Command, FloatingToolbarItem } from '@atlaskit/editor-common/types';
6
2
  import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
+ import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
7
4
  import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
8
5
  type OverflowToobarConfigOptions = {
9
6
  api?: ExtractInjectionAPI<SelectionToolbarPlugin>;
10
7
  };
11
- export declare const getOverflowToolbarConfig: ({ api, }: OverflowToobarConfigOptions) => FloatingToolbarItem<Command>[];
8
+ export declare const getOverflowFloatingToolbarConfig: ({ api, }: OverflowToobarConfigOptions) => FloatingToolbarItem<Command>[];
9
+ export declare const getOverflowPrimaryToolbarConfig: ({ api, }: OverflowToobarConfigOptions) => {
10
+ items: MenuItem[];
11
+ }[];
12
12
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-selection-toolbar",
3
- "version": "1.9.0",
3
+ "version": "1.10.0",
4
4
  "description": "@atlaskit/editor-plugin-selection-toolbar for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -31,8 +31,9 @@
31
31
  ".": "./src/index.ts"
32
32
  },
33
33
  "dependencies": {
34
- "@atlaskit/editor-common": "^99.18.0",
34
+ "@atlaskit/editor-common": "^99.19.0",
35
35
  "@atlaskit/editor-plugin-editor-viewmode": "^2.2.0",
36
+ "@atlaskit/editor-plugin-primary-toolbar": "^2.4.0",
36
37
  "@atlaskit/editor-prosemirror": "7.0.0",
37
38
  "@atlaskit/platform-feature-flags": "^1.1.0",
38
39
  "@atlaskit/tmp-editor-statsig": "^2.47.0",