@atlaskit/editor-plugin-selection-extension 10.3.4 → 10.3.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 (8) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/ui/menu/SelectionExtensionDropdownItem.js +19 -9
  3. package/dist/cjs/ui/toolbar-components/register-inline-toolbar.js +32 -4
  4. package/dist/es2019/ui/menu/SelectionExtensionDropdownItem.js +19 -9
  5. package/dist/es2019/ui/toolbar-components/register-inline-toolbar.js +33 -3
  6. package/dist/esm/ui/menu/SelectionExtensionDropdownItem.js +19 -9
  7. package/dist/esm/ui/toolbar-components/register-inline-toolbar.js +33 -5
  8. package/package.json +5 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-plugin-selection-extension
2
2
 
3
+ ## 10.3.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [`e779ee38a7d18`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e779ee38a7d18) -
8
+ Update toolbar rendering logic to use SelectionExtensionMenuItems component
9
+ - Updated dependencies
10
+
11
+ ## 10.3.5
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
3
17
  ## 10.3.4
4
18
 
5
19
  ### Patch Changes
package/dist/cjs/ui/menu/SelectionExtensionDropdownItem.js CHANGED
@@ -12,6 +12,7 @@ var _react = _interopRequireDefault(require("react"));
12
12
  var _analytics = require("@atlaskit/editor-common/analytics");
13
13
  var _editorToolbar = require("@atlaskit/editor-toolbar");
14
14
  var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
15
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
15
16
  var _compiled = require("@atlaskit/primitives/compiled");
16
17
  var _main = require("../../pm-plugins/main");
17
18
  var _utils = require("../../pm-plugins/utils");
@@ -41,7 +42,6 @@ var SelectionExtensionDropdownItem = exports.SelectionExtensionDropdownItem = fu
41
42
  }));
42
43
  }
43
44
  api.core.actions.execute(function (_ref2) {
44
- var _api$blockControls2;
45
45
  var tr = _ref2.tr;
46
46
  var _getSelectionAdfInfoN = (0, _utils.getSelectionAdfInfoNew)(selection),
47
47
  selectedNode = _getSelectionAdfInfoN.selectedNode,
@@ -51,14 +51,23 @@ var SelectionExtensionDropdownItem = exports.SelectionExtensionDropdownItem = fu
51
51
  selectedNode: selectedNode,
52
52
  nodePos: nodePos
53
53
  });
54
-
55
- // Close the block menu for featured items since they're at top level
56
- // and don't have a parent menu context to auto-close
57
- api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || _api$blockControls2.commands.toggleBlockMenu({
58
- closeMenu: true
59
- })({
60
- tr: tr
61
- });
54
+ if ((0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_1')) {
55
+ if (extensionLocation === 'block-menu') {
56
+ var _api$blockControls2;
57
+ api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || _api$blockControls2.commands.toggleBlockMenu({
58
+ closeMenu: true
59
+ })({
60
+ tr: tr
61
+ });
62
+ }
63
+ } else {
64
+ var _api$blockControls3;
65
+ api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 || _api$blockControls3.commands.toggleBlockMenu({
66
+ closeMenu: true
67
+ })({
68
+ tr: tr
69
+ });
70
+ }
62
71
  return tr;
63
72
  });
64
73
  (_dropdownItem$onClick = dropdownItem.onClick) === null || _dropdownItem$onClick === void 0 || _dropdownItem$onClick.call(dropdownItem);
@@ -78,6 +87,7 @@ var SelectionExtensionDropdownItem = exports.SelectionExtensionDropdownItem = fu
78
87
  };
79
88
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
80
89
  elemBefore: IconComponent ? /*#__PURE__*/_react.default.createElement(IconComponent, {
90
+ size: extensionLocation === 'inline-toolbar' && (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_1') ? 'small' : undefined,
81
91
  label: ""
82
92
  }) : undefined,
83
93
  onClick: handleClick,
package/dist/cjs/ui/toolbar-components/register-inline-toolbar.js CHANGED
@@ -7,14 +7,38 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.registerInlineToolbar = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _toolbar = require("@atlaskit/editor-common/toolbar");
10
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
11
+ var _SelectionExtensionMenuItems = require("../menu/SelectionExtensionMenuItems");
12
+ var _SelectionExtensionComponentContext = require("../SelectionExtensionComponentContext");
10
13
  var _MenuItem = require("./MenuItem");
11
14
  var _ToolbarButton = require("./ToolbarButton");
12
15
  var _ToolbarMenu = require("./ToolbarMenu");
13
16
  var EXTENSION_RANK_MULTIPLIER = 100;
14
- var registerInlineToolbar = exports.registerInlineToolbar = function registerInlineToolbar(_ref) {
17
+ var InlineToolbarMenuItemComponent = function InlineToolbarMenuItemComponent(_ref) {
15
18
  var api = _ref.api,
16
19
  extension = _ref.extension,
17
- index = _ref.index;
20
+ getMenuItems = _ref.getMenuItems;
21
+ var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
22
+ editorView = _useEditorToolbar.editorView;
23
+ if (!editorView || !api) {
24
+ return null;
25
+ }
26
+ return /*#__PURE__*/_react.default.createElement(_SelectionExtensionComponentContext.SelectionExtensionComponentContextProvider, {
27
+ value: {
28
+ api: api,
29
+ editorView: editorView,
30
+ extensionKey: extension.key,
31
+ extensionSource: extension.source,
32
+ extensionLocation: 'inline-toolbar'
33
+ }
34
+ }, /*#__PURE__*/_react.default.createElement(_SelectionExtensionMenuItems.SelectionExtensionMenuItems, {
35
+ getMenuItems: getMenuItems
36
+ }));
37
+ };
38
+ var registerInlineToolbar = exports.registerInlineToolbar = function registerInlineToolbar(_ref2) {
39
+ var api = _ref2.api,
40
+ extension = _ref2.extension,
41
+ index = _ref2.index;
18
42
  var key = extension.key,
19
43
  inlineToolbar = extension.inlineToolbar;
20
44
  var baseKey = "selection-extension-".concat(key);
@@ -90,7 +114,7 @@ var registerInlineToolbar = exports.registerInlineToolbar = function registerInl
90
114
  }
91
115
 
92
116
  // Remove ExtensionMenuSectionConfiguration - only care about items
93
- var menuItems = getMenuItems().filter(function (item) {
117
+ var menuItems = (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_1') ? [] : getMenuItems().filter(function (item) {
94
118
  return 'label' in item && 'icon' in item;
95
119
  });
96
120
  components.push({
@@ -103,7 +127,11 @@ var registerInlineToolbar = exports.registerInlineToolbar = function registerInl
103
127
  rank: (index + 1) * EXTENSION_RANK_MULTIPLIER
104
128
  }],
105
129
  component: function component() {
106
- return /*#__PURE__*/_react.default.createElement(_MenuItem.MenuItem, {
130
+ return (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_1') ? /*#__PURE__*/_react.default.createElement(InlineToolbarMenuItemComponent, {
131
+ api: api,
132
+ extension: extension,
133
+ getMenuItems: getMenuItems
134
+ }) : /*#__PURE__*/_react.default.createElement(_MenuItem.MenuItem, {
107
135
  api: api,
108
136
  extensionMenuItems: menuItems
109
137
  });
package/dist/es2019/ui/menu/SelectionExtensionDropdownItem.js CHANGED
@@ -5,6 +5,7 @@ import React from 'react';
5
5
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
6
6
  import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
7
7
  import Lozenge from '@atlaskit/lozenge';
8
+ import { fg } from '@atlaskit/platform-feature-flags';
8
9
  import { Box } from '@atlaskit/primitives/compiled';
9
10
  import { selectionExtensionPluginKey } from '../../pm-plugins/main';
10
11
  import { getSelectionAdfInfoNew, getSelectionTextInfoNew } from '../../pm-plugins/utils';
@@ -38,7 +39,6 @@ export const SelectionExtensionDropdownItem = ({
38
39
  api.core.actions.execute(({
39
40
  tr
40
41
  }) => {
41
- var _api$blockControls2;
42
42
  const {
43
43
  selectedNode,
44
44
  nodePos
@@ -48,14 +48,23 @@ export const SelectionExtensionDropdownItem = ({
48
48
  selectedNode,
49
49
  nodePos
50
50
  });
51
-
52
- // Close the block menu for featured items since they're at top level
53
- // and don't have a parent menu context to auto-close
54
- api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.toggleBlockMenu({
55
- closeMenu: true
56
- })({
57
- tr
58
- });
51
+ if (fg('platform_editor_block_menu_v2_patch_1')) {
52
+ if (extensionLocation === 'block-menu') {
53
+ var _api$blockControls2;
54
+ api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : _api$blockControls2.commands.toggleBlockMenu({
55
+ closeMenu: true
56
+ })({
57
+ tr
58
+ });
59
+ }
60
+ } else {
61
+ var _api$blockControls3;
62
+ api === null || api === void 0 ? void 0 : (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 ? void 0 : _api$blockControls3.commands.toggleBlockMenu({
63
+ closeMenu: true
64
+ })({
65
+ tr
66
+ });
67
+ }
59
68
  return tr;
60
69
  });
61
70
  (_dropdownItem$onClick = dropdownItem.onClick) === null || _dropdownItem$onClick === void 0 ? void 0 : _dropdownItem$onClick.call(dropdownItem);
@@ -75,6 +84,7 @@ export const SelectionExtensionDropdownItem = ({
75
84
  };
76
85
  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
77
86
  elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
87
+ size: extensionLocation === 'inline-toolbar' && fg('platform_editor_block_menu_v2_patch_1') ? 'small' : undefined,
78
88
  label: ""
79
89
  }) : undefined,
80
90
  onClick: handleClick,
package/dist/es2019/ui/toolbar-components/register-inline-toolbar.js CHANGED
@@ -1,9 +1,35 @@
1
1
  import React from 'react';
2
- import { APPS_SECTION, OVERFLOW_EXTENSIONS_MENU_SECTION } from '@atlaskit/editor-common/toolbar';
2
+ import { APPS_SECTION, OVERFLOW_EXTENSIONS_MENU_SECTION, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
3
+ import { fg } from '@atlaskit/platform-feature-flags';
4
+ import { SelectionExtensionMenuItems } from '../menu/SelectionExtensionMenuItems';
5
+ import { SelectionExtensionComponentContextProvider } from '../SelectionExtensionComponentContext';
3
6
  import { MenuItem } from './MenuItem';
4
7
  import { ToolbarButton } from './ToolbarButton';
5
8
  import { ToolbarMenu } from './ToolbarMenu';
6
9
  const EXTENSION_RANK_MULTIPLIER = 100;
10
+ const InlineToolbarMenuItemComponent = ({
11
+ api,
12
+ extension,
13
+ getMenuItems
14
+ }) => {
15
+ const {
16
+ editorView
17
+ } = useEditorToolbar();
18
+ if (!editorView || !api) {
19
+ return null;
20
+ }
21
+ return /*#__PURE__*/React.createElement(SelectionExtensionComponentContextProvider, {
22
+ value: {
23
+ api,
24
+ editorView,
25
+ extensionKey: extension.key,
26
+ extensionSource: extension.source,
27
+ extensionLocation: 'inline-toolbar'
28
+ }
29
+ }, /*#__PURE__*/React.createElement(SelectionExtensionMenuItems, {
30
+ getMenuItems: getMenuItems
31
+ }));
32
+ };
7
33
  export const registerInlineToolbar = ({
8
34
  api,
9
35
  extension,
@@ -88,7 +114,7 @@ export const registerInlineToolbar = ({
88
114
  }
89
115
 
90
116
  // Remove ExtensionMenuSectionConfiguration - only care about items
91
- const menuItems = getMenuItems().filter(item => 'label' in item && 'icon' in item);
117
+ const menuItems = fg('platform_editor_block_menu_v2_patch_1') ? [] : getMenuItems().filter(item => 'label' in item && 'icon' in item);
92
118
  components.push({
93
119
  type: 'menu-item',
94
120
  key,
@@ -99,7 +125,11 @@ export const registerInlineToolbar = ({
99
125
  rank: (index + 1) * EXTENSION_RANK_MULTIPLIER
100
126
  }],
101
127
  component: () => {
102
- return /*#__PURE__*/React.createElement(MenuItem, {
128
+ return fg('platform_editor_block_menu_v2_patch_1') ? /*#__PURE__*/React.createElement(InlineToolbarMenuItemComponent, {
129
+ api: api,
130
+ extension: extension,
131
+ getMenuItems: getMenuItems
132
+ }) : /*#__PURE__*/React.createElement(MenuItem, {
103
133
  api: api,
104
134
  extensionMenuItems: menuItems
105
135
  });
package/dist/esm/ui/menu/SelectionExtensionDropdownItem.js CHANGED
@@ -5,6 +5,7 @@ import React from 'react';
5
5
  import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
6
6
  import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
7
7
  import Lozenge from '@atlaskit/lozenge';
8
+ import { fg } from '@atlaskit/platform-feature-flags';
8
9
  import { Box } from '@atlaskit/primitives/compiled';
9
10
  import { selectionExtensionPluginKey } from '../../pm-plugins/main';
10
11
  import { getSelectionAdfInfoNew, getSelectionTextInfoNew } from '../../pm-plugins/utils';
@@ -34,7 +35,6 @@ export var SelectionExtensionDropdownItem = function SelectionExtensionDropdownI
34
35
  }));
35
36
  }
36
37
  api.core.actions.execute(function (_ref2) {
37
- var _api$blockControls2;
38
38
  var tr = _ref2.tr;
39
39
  var _getSelectionAdfInfoN = getSelectionAdfInfoNew(selection),
40
40
  selectedNode = _getSelectionAdfInfoN.selectedNode,
@@ -44,14 +44,23 @@ export var SelectionExtensionDropdownItem = function SelectionExtensionDropdownI
44
44
  selectedNode: selectedNode,
45
45
  nodePos: nodePos
46
46
  });
47
-
48
- // Close the block menu for featured items since they're at top level
49
- // and don't have a parent menu context to auto-close
50
- api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || _api$blockControls2.commands.toggleBlockMenu({
51
- closeMenu: true
52
- })({
53
- tr: tr
54
- });
47
+ if (fg('platform_editor_block_menu_v2_patch_1')) {
48
+ if (extensionLocation === 'block-menu') {
49
+ var _api$blockControls2;
50
+ api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || _api$blockControls2.commands.toggleBlockMenu({
51
+ closeMenu: true
52
+ })({
53
+ tr: tr
54
+ });
55
+ }
56
+ } else {
57
+ var _api$blockControls3;
58
+ api === null || api === void 0 || (_api$blockControls3 = api.blockControls) === null || _api$blockControls3 === void 0 || _api$blockControls3.commands.toggleBlockMenu({
59
+ closeMenu: true
60
+ })({
61
+ tr: tr
62
+ });
63
+ }
55
64
  return tr;
56
65
  });
57
66
  (_dropdownItem$onClick = dropdownItem.onClick) === null || _dropdownItem$onClick === void 0 || _dropdownItem$onClick.call(dropdownItem);
@@ -71,6 +80,7 @@ export var SelectionExtensionDropdownItem = function SelectionExtensionDropdownI
71
80
  };
72
81
  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
73
82
  elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
83
+ size: extensionLocation === 'inline-toolbar' && fg('platform_editor_block_menu_v2_patch_1') ? 'small' : undefined,
74
84
  label: ""
75
85
  }) : undefined,
76
86
  onClick: handleClick,
package/dist/esm/ui/toolbar-components/register-inline-toolbar.js CHANGED
@@ -1,13 +1,37 @@
1
1
  import React from 'react';
2
- import { APPS_SECTION, OVERFLOW_EXTENSIONS_MENU_SECTION } from '@atlaskit/editor-common/toolbar';
2
+ import { APPS_SECTION, OVERFLOW_EXTENSIONS_MENU_SECTION, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
3
+ import { fg } from '@atlaskit/platform-feature-flags';
4
+ import { SelectionExtensionMenuItems } from '../menu/SelectionExtensionMenuItems';
5
+ import { SelectionExtensionComponentContextProvider } from '../SelectionExtensionComponentContext';
3
6
  import { MenuItem } from './MenuItem';
4
7
  import { ToolbarButton } from './ToolbarButton';
5
8
  import { ToolbarMenu } from './ToolbarMenu';
6
9
  var EXTENSION_RANK_MULTIPLIER = 100;
7
- export var registerInlineToolbar = function registerInlineToolbar(_ref) {
10
+ var InlineToolbarMenuItemComponent = function InlineToolbarMenuItemComponent(_ref) {
8
11
  var api = _ref.api,
9
12
  extension = _ref.extension,
10
- index = _ref.index;
13
+ getMenuItems = _ref.getMenuItems;
14
+ var _useEditorToolbar = useEditorToolbar(),
15
+ editorView = _useEditorToolbar.editorView;
16
+ if (!editorView || !api) {
17
+ return null;
18
+ }
19
+ return /*#__PURE__*/React.createElement(SelectionExtensionComponentContextProvider, {
20
+ value: {
21
+ api: api,
22
+ editorView: editorView,
23
+ extensionKey: extension.key,
24
+ extensionSource: extension.source,
25
+ extensionLocation: 'inline-toolbar'
26
+ }
27
+ }, /*#__PURE__*/React.createElement(SelectionExtensionMenuItems, {
28
+ getMenuItems: getMenuItems
29
+ }));
30
+ };
31
+ export var registerInlineToolbar = function registerInlineToolbar(_ref2) {
32
+ var api = _ref2.api,
33
+ extension = _ref2.extension,
34
+ index = _ref2.index;
11
35
  var key = extension.key,
12
36
  inlineToolbar = extension.inlineToolbar;
13
37
  var baseKey = "selection-extension-".concat(key);
@@ -83,7 +107,7 @@ export var registerInlineToolbar = function registerInlineToolbar(_ref) {
83
107
  }
84
108
 
85
109
  // Remove ExtensionMenuSectionConfiguration - only care about items
86
- var menuItems = getMenuItems().filter(function (item) {
110
+ var menuItems = fg('platform_editor_block_menu_v2_patch_1') ? [] : getMenuItems().filter(function (item) {
87
111
  return 'label' in item && 'icon' in item;
88
112
  });
89
113
  components.push({
@@ -96,7 +120,11 @@ export var registerInlineToolbar = function registerInlineToolbar(_ref) {
96
120
  rank: (index + 1) * EXTENSION_RANK_MULTIPLIER
97
121
  }],
98
122
  component: function component() {
99
- return /*#__PURE__*/React.createElement(MenuItem, {
123
+ return fg('platform_editor_block_menu_v2_patch_1') ? /*#__PURE__*/React.createElement(InlineToolbarMenuItemComponent, {
124
+ api: api,
125
+ extension: extension,
126
+ getMenuItems: getMenuItems
127
+ }) : /*#__PURE__*/React.createElement(MenuItem, {
100
128
  api: api,
101
129
  extensionMenuItems: menuItems
102
130
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-selection-extension",
3
- "version": "10.3.4",
3
+ "version": "10.3.6",
4
4
  "description": "editor-plugin-selection-extension plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -52,7 +52,7 @@
52
52
  "@atlaskit/lozenge": "^13.4.0",
53
53
  "@atlaskit/platform-feature-flags": "^1.1.0",
54
54
  "@atlaskit/primitives": "^18.0.0",
55
- "@atlaskit/tmp-editor-statsig": "^18.0.0",
55
+ "@atlaskit/tmp-editor-statsig": "^20.0.0",
56
56
  "@atlaskit/tokens": "^11.0.0",
57
57
  "@babel/runtime": "^7.0.0",
58
58
  "lodash": "^4.17.21",
@@ -115,6 +115,9 @@
115
115
  },
116
116
  "platform_editor_selection_extension_improvement": {
117
117
  "type": "boolean"
118
+ },
119
+ "platform_editor_block_menu_v2_patch_1": {
120
+ "type": "boolean"
118
121
  }
119
122
  }
120
123
  }