@atlaskit/editor-plugin-selection-toolbar 2.3.1 → 3.0.1

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 (16) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/selectionToolbarPlugin.js +11 -6
  3. package/dist/cjs/ui/PrimaryToolbarComponent.compiled.css +4 -0
  4. package/dist/cjs/ui/PrimaryToolbarComponent.js +14 -18
  5. package/dist/cjs/ui/overflow-toolbar-config.js +10 -12
  6. package/dist/es2019/selectionToolbarPlugin.js +8 -3
  7. package/dist/es2019/ui/PrimaryToolbarComponent.compiled.css +4 -0
  8. package/dist/es2019/ui/PrimaryToolbarComponent.js +10 -15
  9. package/dist/es2019/ui/overflow-toolbar-config.js +7 -11
  10. package/dist/esm/selectionToolbarPlugin.js +11 -6
  11. package/dist/esm/ui/PrimaryToolbarComponent.compiled.css +4 -0
  12. package/dist/esm/ui/PrimaryToolbarComponent.js +10 -15
  13. package/dist/esm/ui/overflow-toolbar-config.js +7 -11
  14. package/dist/types/ui/PrimaryToolbarComponent.d.ts +2 -2
  15. package/dist/types-ts4.5/ui/PrimaryToolbarComponent.d.ts +2 -2
  16. package/package.json +12 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-plugin-selection-toolbar
2
2
 
3
+ ## 3.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#134885](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/134885)
8
+ [`0d61709802162`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0d61709802162) -
9
+ [ux] [ED-27312] Implement new scroll left/right buttons for scrollable floating toolbars
10
+
11
+ ## 3.0.0
12
+
13
+ ### Major Changes
14
+
15
+ - [#132776](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/132776)
16
+ [`555c2073facfe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/555c2073facfe) -
17
+ Upgrade to used compile css and remove dependency on emotion
18
+
3
19
  ## 2.3.1
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/selectionToolbarPlugin.js CHANGED
@@ -12,6 +12,7 @@ var _bindEventListener = require("bind-event-listener");
12
12
  var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
13
13
  var _utils = require("@atlaskit/editor-common/utils");
14
14
  var _state = require("@atlaskit/editor-prosemirror/state");
15
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
15
16
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
16
17
  var _commands = require("./pm-plugins/commands");
17
18
  var _pluginKey = require("./pm-plugins/plugin-key");
@@ -176,10 +177,11 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
176
177
  hide = _ref3.hide,
177
178
  toolbarDocking = _ref3.toolbarDocking;
178
179
  var isCellSelection = ('$anchorCell' in state.selection);
180
+ var isEditorControlsEnabled = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
179
181
  if (state.selection.empty || !selectionStable || hide || state.selection instanceof _state.NodeSelection ||
180
182
  // $anchorCell is only available in CellSelection, this check is to
181
183
  // avoid importing CellSelection from @atlaskit/editor-tables
182
- isCellSelection && (0, _experiments.editorExperiment)('platform_editor_controls', 'control') // for Editor Controls we want to show the toolbar on CellSelection
184
+ isCellSelection && !isEditorControlsEnabled // for Editor Controls we want to show the toolbar on CellSelection
183
185
  ) {
184
186
  // If there is no active selection, or the selection is not stable, or the selection is a node selection,
185
187
  // do not show the toolbar.
@@ -242,7 +244,7 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
242
244
  }
243
245
  }
244
246
  }
245
- if (items.length > 0 && contextualFormattingEnabled && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
247
+ if (items.length > 0 && contextualFormattingEnabled && isEditorControlsEnabled) {
246
248
  items.push.apply(items, (0, _toConsumableArray2.default)((0, _overflowToolbarConfig.getOverflowFloatingToolbarConfig)({
247
249
  api: api,
248
250
  toolbarDocking: toolbarDocking
@@ -250,19 +252,22 @@ var selectionToolbarPlugin = exports.selectionToolbarPlugin = function selection
250
252
  }
251
253
  var onPositionCalculated;
252
254
  var toolbarTitle = 'Selection toolbar';
253
- if (isCellSelection && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
255
+ if (isCellSelection && isEditorControlsEnabled) {
254
256
  onPositionCalculated = (0, _utils.calculateToolbarPositionOnCellSelection)(toolbarTitle);
255
257
  } else {
256
258
  var calcToolbarPosition = config.preferenceToolbarAboveSelection ? _utils.calculateToolbarPositionAboveSelection : _utils.calculateToolbarPositionTrackHead;
257
259
  onPositionCalculated = calcToolbarPosition(toolbarTitle);
258
260
  }
259
261
  var nodeType = getSelectionNodeTypes(state);
260
- return {
262
+ return _objectSpread(_objectSpread({
261
263
  title: 'Selection toolbar',
262
264
  nodeType: nodeType,
263
- items: items,
265
+ items: items
266
+ }, isEditorControlsEnabled && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2') && {
267
+ scrollable: true
268
+ }), {}, {
264
269
  onPositionCalculated: onPositionCalculated
265
- };
270
+ });
266
271
  }
267
272
  },
268
273
  primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
package/dist/cjs/ui/PrimaryToolbarComponent.compiled.css ADDED
@@ -0,0 +1,4 @@
1
+ ._19bv12x7{padding-left:var(--ds-space-075,6px)}
2
+ ._ca0q12x7{padding-top:var(--ds-space-075,6px)}
3
+ ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
4
+ ._u5f312x7{padding-right:var(--ds-space-075,6px)}
package/dist/cjs/ui/PrimaryToolbarComponent.js CHANGED
@@ -1,26 +1,25 @@
1
+ /* PrimaryToolbarComponent.tsx generated by @compiled/babel-plugin v0.36.1 */
1
2
  "use strict";
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
6
  Object.defineProperty(exports, "__esModule", {
5
7
  value: true
6
8
  });
7
9
  exports.PrimaryToolbarComponent = PrimaryToolbarComponent;
10
+ require("./PrimaryToolbarComponent.compiled.css");
11
+ var _react = _interopRequireWildcard(require("react"));
12
+ var React = _react;
13
+ var _runtime = require("@compiled/react/runtime");
8
14
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
- var _react = require("react");
10
- var _react2 = require("@emotion/react");
11
15
  var _keymaps = require("@atlaskit/editor-common/keymaps");
12
16
  var _uiMenu = require("@atlaskit/editor-common/ui-menu");
13
17
  var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
14
18
  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
-
19
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
20
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
23
21
  var DROPDOWN_WIDTH = 240;
22
+ var buttonStyles = null;
24
23
  function PrimaryToolbarComponent(_ref) {
25
24
  var api = _ref.api,
26
25
  popupsBoundariesElement = _ref.popupsBoundariesElement,
@@ -44,7 +43,7 @@ function PrimaryToolbarComponent(_ref) {
44
43
  var item = _ref2.item;
45
44
  item === null || item === void 0 || (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item);
46
45
  }, []);
47
- return (0, _react2.jsx)(_uiMenu.DropdownMenu, {
46
+ return /*#__PURE__*/React.createElement(_uiMenu.DropdownMenu, {
48
47
  isOpen: isOpen,
49
48
  onOpenChange: function onOpenChange(attrs) {
50
49
  return setIsOpen(attrs.isOpen);
@@ -61,7 +60,7 @@ function PrimaryToolbarComponent(_ref) {
61
60
  },
62
61
  onItemActivated: onMenuItemActivated,
63
62
  fitWidth: DROPDOWN_WIDTH
64
- }, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
63
+ }, /*#__PURE__*/React.createElement(_uiMenu.ToolbarButton, {
65
64
  onClick: onClick,
66
65
  "aria-haspopup": "dialog",
67
66
  "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(_keymaps.addLink),
@@ -69,11 +68,8 @@ function PrimaryToolbarComponent(_ref) {
69
68
  title: content
70
69
  // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
71
70
  ,
72
- css: buttonStyles
73
- }, (0, _react2.jsx)(_showMoreHorizontal.default, {
71
+ className: (0, _runtime.ax)(["_ca0q12x7 _n3td12x7 _19bv12x7 _u5f312x7"])
72
+ }, /*#__PURE__*/React.createElement(_showMoreHorizontal.default, {
74
73
  label: content
75
74
  })));
76
- }
77
- var buttonStyles = (0, _react2.css)({
78
- padding: "var(--ds-space-075, 6px)"
79
- });
75
+ }
package/dist/cjs/ui/overflow-toolbar-config.js CHANGED
@@ -1,22 +1,20 @@
1
+ /* overflow-toolbar-config.tsx generated by @compiled/babel-plugin v0.36.1 */
1
2
  "use strict";
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
6
  Object.defineProperty(exports, "__esModule", {
5
7
  value: true
6
8
  });
7
9
  exports.getOverflowPrimaryToolbarConfig = exports.getOverflowFloatingToolbarConfig = void 0;
8
- var _react = require("@emotion/react");
10
+ var React = _interopRequireWildcard(require("react"));
11
+ var _runtime = require("@compiled/react/runtime");
9
12
  var _dockToolbarTop = _interopRequireDefault(require("@atlaskit/icon-lab/core/dock-toolbar-top"));
10
13
  var _minus = _interopRequireDefault(require("@atlaskit/icon/core/minus"));
11
14
  var _checkMark = _interopRequireDefault(require("@atlaskit/icon/utility/check-mark"));
12
15
  var _menu = require("@atlaskit/menu");
13
- /**
14
- * @jsxRuntime classic
15
- * @jsx jsx
16
- * @jsxFrag
17
- */
18
- // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
19
-
16
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
17
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
20
18
  // New editor controls
21
19
  var getOverflowFloatingToolbarConfig = exports.getOverflowFloatingToolbarConfig = function getOverflowFloatingToolbarConfig(_ref) {
22
20
  var api = _ref.api,
@@ -35,7 +33,7 @@ var getOverflowFloatingToolbarConfig = exports.getOverflowFloatingToolbarConfig
35
33
  label: 'Contextual toolbar'
36
34
  }),
37
35
  selected: !isDockedToTop,
38
- elemAfter: !isDockedToTop ? (0, _react.jsx)(_checkMark.default, {
36
+ elemAfter: !isDockedToTop ? /*#__PURE__*/React.createElement(_checkMark.default, {
39
37
  label: ""
40
38
  }) : undefined
41
39
  }, {
@@ -48,7 +46,7 @@ var getOverflowFloatingToolbarConfig = exports.getOverflowFloatingToolbarConfig
48
46
  label: 'Fixed toolbar'
49
47
  }),
50
48
  selected: isDockedToTop,
51
- elemAfter: isDockedToTop ? (0, _react.jsx)(_checkMark.default, {
49
+ elemAfter: isDockedToTop ? /*#__PURE__*/React.createElement(_checkMark.default, {
52
50
  label: ""
53
51
  }) : undefined
54
52
  }];
@@ -65,7 +63,7 @@ var getOverflowPrimaryToolbarConfig = exports.getOverflowPrimaryToolbarConfig =
65
63
  var api = _ref2.api;
66
64
  return [{
67
65
  items: [{
68
- content: (0, _react.jsx)(_menu.HeadingItem, null, "Toolbar appears"),
66
+ content: /*#__PURE__*/React.createElement(_menu.HeadingItem, null, "Toolbar appears"),
69
67
  value: {
70
68
  name: ''
71
69
  },
@@ -95,7 +93,7 @@ var getOverflowPrimaryToolbarConfig = exports.getOverflowPrimaryToolbarConfig =
95
93
  elemBefore: (0, _dockToolbarTop.default)({
96
94
  label: 'Fixed toolbar'
97
95
  }),
98
- elemAfter: (0, _react.jsx)(_checkMark.default, {
96
+ elemAfter: /*#__PURE__*/React.createElement(_checkMark.default, {
99
97
  label: ""
100
98
  })
101
99
  }]
package/dist/es2019/selectionToolbarPlugin.js CHANGED
@@ -3,6 +3,7 @@ import { bind } from 'bind-event-listener';
3
3
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
4
4
  import { calculateToolbarPositionAboveSelection, calculateToolbarPositionOnCellSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
5
5
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
6
+ import { fg } from '@atlaskit/platform-feature-flags';
6
7
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
7
8
  import { setToolbarDocking, toggleToolbar } from './pm-plugins/commands';
8
9
  import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
@@ -172,10 +173,11 @@ export const selectionToolbarPlugin = ({
172
173
  toolbarDocking
173
174
  } = selectionToolbarPluginKey.getState(state);
174
175
  const isCellSelection = ('$anchorCell' in state.selection);
176
+ const isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
175
177
  if (state.selection.empty || !selectionStable || hide || state.selection instanceof NodeSelection ||
176
178
  // $anchorCell is only available in CellSelection, this check is to
177
179
  // avoid importing CellSelection from @atlaskit/editor-tables
178
- isCellSelection && editorExperiment('platform_editor_controls', 'control') // for Editor Controls we want to show the toolbar on CellSelection
180
+ isCellSelection && !isEditorControlsEnabled // for Editor Controls we want to show the toolbar on CellSelection
179
181
  ) {
180
182
  // If there is no active selection, or the selection is not stable, or the selection is a node selection,
181
183
  // do not show the toolbar.
@@ -234,7 +236,7 @@ export const selectionToolbarPlugin = ({
234
236
  }
235
237
  }
236
238
  }
237
- if (items.length > 0 && contextualFormattingEnabled && editorExperiment('platform_editor_controls', 'variant1')) {
239
+ if (items.length > 0 && contextualFormattingEnabled && isEditorControlsEnabled) {
238
240
  items.push(...getOverflowFloatingToolbarConfig({
239
241
  api,
240
242
  toolbarDocking
@@ -242,7 +244,7 @@ export const selectionToolbarPlugin = ({
242
244
  }
243
245
  let onPositionCalculated;
244
246
  const toolbarTitle = 'Selection toolbar';
245
- if (isCellSelection && editorExperiment('platform_editor_controls', 'variant1')) {
247
+ if (isCellSelection && isEditorControlsEnabled) {
246
248
  onPositionCalculated = calculateToolbarPositionOnCellSelection(toolbarTitle);
247
249
  } else {
248
250
  const calcToolbarPosition = config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
@@ -253,6 +255,9 @@ export const selectionToolbarPlugin = ({
253
255
  title: 'Selection toolbar',
254
256
  nodeType: nodeType,
255
257
  items: items,
258
+ ...(isEditorControlsEnabled && fg('platform_editor_controls_patch_2') && {
259
+ scrollable: true
260
+ }),
256
261
  onPositionCalculated
257
262
  };
258
263
  }
package/dist/es2019/ui/PrimaryToolbarComponent.compiled.css ADDED
@@ -0,0 +1,4 @@
1
+ ._19bv12x7{padding-left:var(--ds-space-075,6px)}
2
+ ._ca0q12x7{padding-top:var(--ds-space-075,6px)}
3
+ ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
4
+ ._u5f312x7{padding-right:var(--ds-space-075,6px)}
package/dist/es2019/ui/PrimaryToolbarComponent.js CHANGED
@@ -1,16 +1,14 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- * @jsxFrag
5
- */
1
+ /* PrimaryToolbarComponent.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ import "./PrimaryToolbarComponent.compiled.css";
3
+ import * as React from 'react';
4
+ import { ax, ix } from "@compiled/react/runtime";
6
5
  import { useCallback, useMemo, useState } from 'react';
7
- import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
8
-
9
6
  import { addLink, getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
10
7
  import { ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
11
8
  import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
12
9
  import { getOverflowPrimaryToolbarConfig } from './overflow-toolbar-config';
13
10
  const DROPDOWN_WIDTH = 240;
11
+ const buttonStyles = null;
14
12
  export function PrimaryToolbarComponent({
15
13
  api,
16
14
  popupsBoundariesElement,
@@ -31,7 +29,7 @@ export function PrimaryToolbarComponent({
31
29
  var _item$onClick;
32
30
  item === null || item === void 0 ? void 0 : (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item);
33
31
  }, []);
34
- return jsx(DropdownMenu, {
32
+ return /*#__PURE__*/React.createElement(DropdownMenu, {
35
33
  isOpen: isOpen,
36
34
  onOpenChange: attrs => setIsOpen(attrs.isOpen),
37
35
  items: items,
@@ -46,7 +44,7 @@ export function PrimaryToolbarComponent({
46
44
  },
47
45
  onItemActivated: onMenuItemActivated,
48
46
  fitWidth: DROPDOWN_WIDTH
49
- }, jsx(ToolbarButton, {
47
+ }, /*#__PURE__*/React.createElement(ToolbarButton, {
50
48
  onClick: onClick,
51
49
  "aria-haspopup": "dialog",
52
50
  "aria-keyshortcuts": getAriaKeyshortcuts(addLink),
@@ -54,11 +52,8 @@ export function PrimaryToolbarComponent({
54
52
  title: content
55
53
  // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
56
54
  ,
57
- css: buttonStyles
58
- }, jsx(ShowMoreHorizontalIcon, {
55
+ className: ax(["_ca0q12x7 _n3td12x7 _19bv12x7 _u5f312x7"])
56
+ }, /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, {
59
57
  label: content
60
58
  })));
61
- }
62
- const buttonStyles = css({
63
- padding: "var(--ds-space-075, 6px)"
64
- });
59
+ }
package/dist/es2019/ui/overflow-toolbar-config.js CHANGED
@@ -1,10 +1,6 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- * @jsxFrag
5
- */
6
- import { jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
7
-
1
+ /* overflow-toolbar-config.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ import * as React from 'react';
3
+ import { ax, ix } from "@compiled/react/runtime";
8
4
  import DockToolbarTopIcon from '@atlaskit/icon-lab/core/dock-toolbar-top';
9
5
  import MinusIcon from '@atlaskit/icon/core/minus';
10
6
  import CheckMarkIcon from '@atlaskit/icon/utility/check-mark';
@@ -28,7 +24,7 @@ export const getOverflowFloatingToolbarConfig = ({
28
24
  label: 'Contextual toolbar'
29
25
  }),
30
26
  selected: !isDockedToTop,
31
- elemAfter: !isDockedToTop ? jsx(CheckMarkIcon, {
27
+ elemAfter: !isDockedToTop ? /*#__PURE__*/React.createElement(CheckMarkIcon, {
32
28
  label: ""
33
29
  }) : undefined
34
30
  }, {
@@ -41,7 +37,7 @@ export const getOverflowFloatingToolbarConfig = ({
41
37
  label: 'Fixed toolbar'
42
38
  }),
43
39
  selected: isDockedToTop,
44
- elemAfter: isDockedToTop ? jsx(CheckMarkIcon, {
40
+ elemAfter: isDockedToTop ? /*#__PURE__*/React.createElement(CheckMarkIcon, {
45
41
  label: ""
46
42
  }) : undefined
47
43
  }];
@@ -58,7 +54,7 @@ export const getOverflowPrimaryToolbarConfig = ({
58
54
  api
59
55
  }) => [{
60
56
  items: [{
61
- content: jsx(HeadingItem, null, "Toolbar appears"),
57
+ content: /*#__PURE__*/React.createElement(HeadingItem, null, "Toolbar appears"),
62
58
  value: {
63
59
  name: ''
64
60
  },
@@ -88,7 +84,7 @@ export const getOverflowPrimaryToolbarConfig = ({
88
84
  elemBefore: DockToolbarTopIcon({
89
85
  label: 'Fixed toolbar'
90
86
  }),
91
- elemAfter: jsx(CheckMarkIcon, {
87
+ elemAfter: /*#__PURE__*/React.createElement(CheckMarkIcon, {
92
88
  label: ""
93
89
  })
94
90
  }]
package/dist/esm/selectionToolbarPlugin.js CHANGED
@@ -7,6 +7,7 @@ import { bind } from 'bind-event-listener';
7
7
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
8
8
  import { calculateToolbarPositionAboveSelection, calculateToolbarPositionOnCellSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
9
9
  import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
10
+ import { fg } from '@atlaskit/platform-feature-flags';
10
11
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
11
12
  import { setToolbarDocking as _setToolbarDocking, toggleToolbar } from './pm-plugins/commands';
12
13
  import { selectionToolbarPluginKey } from './pm-plugins/plugin-key';
@@ -169,10 +170,11 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
169
170
  hide = _ref3.hide,
170
171
  toolbarDocking = _ref3.toolbarDocking;
171
172
  var isCellSelection = ('$anchorCell' in state.selection);
173
+ var isEditorControlsEnabled = editorExperiment('platform_editor_controls', 'variant1');
172
174
  if (state.selection.empty || !selectionStable || hide || state.selection instanceof NodeSelection ||
173
175
  // $anchorCell is only available in CellSelection, this check is to
174
176
  // avoid importing CellSelection from @atlaskit/editor-tables
175
- isCellSelection && editorExperiment('platform_editor_controls', 'control') // for Editor Controls we want to show the toolbar on CellSelection
177
+ isCellSelection && !isEditorControlsEnabled // for Editor Controls we want to show the toolbar on CellSelection
176
178
  ) {
177
179
  // If there is no active selection, or the selection is not stable, or the selection is a node selection,
178
180
  // do not show the toolbar.
@@ -235,7 +237,7 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
235
237
  }
236
238
  }
237
239
  }
238
- if (items.length > 0 && contextualFormattingEnabled && editorExperiment('platform_editor_controls', 'variant1')) {
240
+ if (items.length > 0 && contextualFormattingEnabled && isEditorControlsEnabled) {
239
241
  items.push.apply(items, _toConsumableArray(getOverflowFloatingToolbarConfig({
240
242
  api: api,
241
243
  toolbarDocking: toolbarDocking
@@ -243,19 +245,22 @@ export var selectionToolbarPlugin = function selectionToolbarPlugin(_ref) {
243
245
  }
244
246
  var onPositionCalculated;
245
247
  var toolbarTitle = 'Selection toolbar';
246
- if (isCellSelection && editorExperiment('platform_editor_controls', 'variant1')) {
248
+ if (isCellSelection && isEditorControlsEnabled) {
247
249
  onPositionCalculated = calculateToolbarPositionOnCellSelection(toolbarTitle);
248
250
  } else {
249
251
  var calcToolbarPosition = config.preferenceToolbarAboveSelection ? calculateToolbarPositionAboveSelection : calculateToolbarPositionTrackHead;
250
252
  onPositionCalculated = calcToolbarPosition(toolbarTitle);
251
253
  }
252
254
  var nodeType = getSelectionNodeTypes(state);
253
- return {
255
+ return _objectSpread(_objectSpread({
254
256
  title: 'Selection toolbar',
255
257
  nodeType: nodeType,
256
- items: items,
258
+ items: items
259
+ }, isEditorControlsEnabled && fg('platform_editor_controls_patch_2') && {
260
+ scrollable: true
261
+ }), {}, {
257
262
  onPositionCalculated: onPositionCalculated
258
- };
263
+ });
259
264
  }
260
265
  },
261
266
  primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && editorExperiment('platform_editor_controls', 'variant1', {
package/dist/esm/ui/PrimaryToolbarComponent.compiled.css ADDED
@@ -0,0 +1,4 @@
1
+ ._19bv12x7{padding-left:var(--ds-space-075,6px)}
2
+ ._ca0q12x7{padding-top:var(--ds-space-075,6px)}
3
+ ._n3td12x7{padding-bottom:var(--ds-space-075,6px)}
4
+ ._u5f312x7{padding-right:var(--ds-space-075,6px)}
package/dist/esm/ui/PrimaryToolbarComponent.js CHANGED
@@ -1,17 +1,15 @@
1
+ /* PrimaryToolbarComponent.tsx generated by @compiled/babel-plugin v0.36.1 */
1
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
- /**
3
- * @jsxRuntime classic
4
- * @jsx jsx
5
- * @jsxFrag
6
- */
3
+ import "./PrimaryToolbarComponent.compiled.css";
4
+ import * as React from 'react';
5
+ import { ax, ix } from "@compiled/react/runtime";
7
6
  import { useCallback, useMemo, useState } from 'react';
8
- import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
9
-
10
7
  import { addLink, getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
11
8
  import { ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
12
9
  import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
13
10
  import { getOverflowPrimaryToolbarConfig } from './overflow-toolbar-config';
14
11
  var DROPDOWN_WIDTH = 240;
12
+ var buttonStyles = null;
15
13
  export function PrimaryToolbarComponent(_ref) {
16
14
  var api = _ref.api,
17
15
  popupsBoundariesElement = _ref.popupsBoundariesElement,
@@ -35,7 +33,7 @@ export function PrimaryToolbarComponent(_ref) {
35
33
  var item = _ref2.item;
36
34
  item === null || item === void 0 || (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item);
37
35
  }, []);
38
- return jsx(DropdownMenu, {
36
+ return /*#__PURE__*/React.createElement(DropdownMenu, {
39
37
  isOpen: isOpen,
40
38
  onOpenChange: function onOpenChange(attrs) {
41
39
  return setIsOpen(attrs.isOpen);
@@ -52,7 +50,7 @@ export function PrimaryToolbarComponent(_ref) {
52
50
  },
53
51
  onItemActivated: onMenuItemActivated,
54
52
  fitWidth: DROPDOWN_WIDTH
55
- }, jsx(ToolbarButton, {
53
+ }, /*#__PURE__*/React.createElement(ToolbarButton, {
56
54
  onClick: onClick,
57
55
  "aria-haspopup": "dialog",
58
56
  "aria-keyshortcuts": getAriaKeyshortcuts(addLink),
@@ -60,11 +58,8 @@ export function PrimaryToolbarComponent(_ref) {
60
58
  title: content
61
59
  // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides -- Ignored via go/DSP-18766
62
60
  ,
63
- css: buttonStyles
64
- }, jsx(ShowMoreHorizontalIcon, {
61
+ className: ax(["_ca0q12x7 _n3td12x7 _19bv12x7 _u5f312x7"])
62
+ }, /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, {
65
63
  label: content
66
64
  })));
67
- }
68
- var buttonStyles = css({
69
- padding: "var(--ds-space-075, 6px)"
70
- });
65
+ }
package/dist/esm/ui/overflow-toolbar-config.js CHANGED
@@ -1,10 +1,6 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- * @jsxFrag
5
- */
6
- import { jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
7
-
1
+ /* overflow-toolbar-config.tsx generated by @compiled/babel-plugin v0.36.1 */
2
+ import * as React from 'react';
3
+ import { ax, ix } from "@compiled/react/runtime";
8
4
  import DockToolbarTopIcon from '@atlaskit/icon-lab/core/dock-toolbar-top';
9
5
  import MinusIcon from '@atlaskit/icon/core/minus';
10
6
  import CheckMarkIcon from '@atlaskit/icon/utility/check-mark';
@@ -27,7 +23,7 @@ export var getOverflowFloatingToolbarConfig = function getOverflowFloatingToolba
27
23
  label: 'Contextual toolbar'
28
24
  }),
29
25
  selected: !isDockedToTop,
30
- elemAfter: !isDockedToTop ? jsx(CheckMarkIcon, {
26
+ elemAfter: !isDockedToTop ? /*#__PURE__*/React.createElement(CheckMarkIcon, {
31
27
  label: ""
32
28
  }) : undefined
33
29
  }, {
@@ -40,7 +36,7 @@ export var getOverflowFloatingToolbarConfig = function getOverflowFloatingToolba
40
36
  label: 'Fixed toolbar'
41
37
  }),
42
38
  selected: isDockedToTop,
43
- elemAfter: isDockedToTop ? jsx(CheckMarkIcon, {
39
+ elemAfter: isDockedToTop ? /*#__PURE__*/React.createElement(CheckMarkIcon, {
44
40
  label: ""
45
41
  }) : undefined
46
42
  }];
@@ -57,7 +53,7 @@ export var getOverflowPrimaryToolbarConfig = function getOverflowPrimaryToolbarC
57
53
  var api = _ref2.api;
58
54
  return [{
59
55
  items: [{
60
- content: jsx(HeadingItem, null, "Toolbar appears"),
56
+ content: /*#__PURE__*/React.createElement(HeadingItem, null, "Toolbar appears"),
61
57
  value: {
62
58
  name: ''
63
59
  },
@@ -87,7 +83,7 @@ export var getOverflowPrimaryToolbarConfig = function getOverflowPrimaryToolbarC
87
83
  elemBefore: DockToolbarTopIcon({
88
84
  label: 'Fixed toolbar'
89
85
  }),
90
- elemAfter: jsx(CheckMarkIcon, {
86
+ elemAfter: /*#__PURE__*/React.createElement(CheckMarkIcon, {
91
87
  label: ""
92
88
  })
93
89
  }]
package/dist/types/ui/PrimaryToolbarComponent.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { jsx } from '@emotion/react';
1
+ /// <reference types="react" />
2
2
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
3
  import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
4
4
  type Props = {
@@ -7,5 +7,5 @@ type Props = {
7
7
  popupsMountPoint?: HTMLElement;
8
8
  popupsScrollableElement?: HTMLElement;
9
9
  };
10
- export declare function PrimaryToolbarComponent({ api, popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, }: Props): jsx.JSX.Element;
10
+ export declare function PrimaryToolbarComponent({ api, popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, }: Props): JSX.Element;
11
11
  export {};
package/dist/types-ts4.5/ui/PrimaryToolbarComponent.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { jsx } from '@emotion/react';
1
+ /// <reference types="react" />
2
2
  import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
3
3
  import type { SelectionToolbarPlugin } from '../selectionToolbarPluginType';
4
4
  type Props = {
@@ -7,5 +7,5 @@ type Props = {
7
7
  popupsMountPoint?: HTMLElement;
8
8
  popupsScrollableElement?: HTMLElement;
9
9
  };
10
- export declare function PrimaryToolbarComponent({ api, popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, }: Props): jsx.JSX.Element;
10
+ export declare function PrimaryToolbarComponent({ api, popupsBoundariesElement, popupsMountPoint, popupsScrollableElement, }: Props): JSX.Element;
11
11
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-selection-toolbar",
3
- "version": "2.3.1",
3
+ "version": "3.0.1",
4
4
  "description": "@atlaskit/editor-plugin-selection-toolbar for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -33,18 +33,18 @@
33
33
  ".": "./src/index.ts"
34
34
  },
35
35
  "dependencies": {
36
- "@atlaskit/editor-common": "^102.13.0",
36
+ "@atlaskit/css": "^0.10.0",
37
+ "@atlaskit/editor-common": "^102.16.0",
37
38
  "@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
38
39
  "@atlaskit/editor-plugin-primary-toolbar": "^3.1.0",
39
40
  "@atlaskit/editor-prosemirror": "7.0.0",
40
- "@atlaskit/icon": "^25.0.0",
41
- "@atlaskit/icon-lab": "^4.3.0",
42
- "@atlaskit/menu": "^3.1.0",
41
+ "@atlaskit/icon": "^25.4.0",
42
+ "@atlaskit/icon-lab": "^4.5.0",
43
+ "@atlaskit/menu": "^3.2.0",
43
44
  "@atlaskit/platform-feature-flags": "^1.1.0",
44
- "@atlaskit/tmp-editor-statsig": "^4.4.0",
45
+ "@atlaskit/tmp-editor-statsig": "^4.6.0",
45
46
  "@atlaskit/tokens": "^4.5.0",
46
47
  "@babel/runtime": "^7.0.0",
47
- "@emotion/react": "^11.7.1",
48
48
  "bind-event-listener": "^3.0.0"
49
49
  },
50
50
  "peerDependencies": {
@@ -90,5 +90,10 @@
90
90
  "compiled"
91
91
  ]
92
92
  }
93
+ },
94
+ "platform-feature-flags": {
95
+ "platform_editor_controls_patch_2": {
96
+ "type": "boolean"
97
+ }
93
98
  }
94
99
  }