@atlaskit/editor-plugin-selection-extension 13.1.16 → 13.3.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.
- package/CHANGELOG.md +31 -0
- package/dist/cjs/entry-points/selection-extension-plugin-type.js +1 -0
- package/dist/cjs/entry-points/selection-extension-plugin.js +12 -0
- package/dist/cjs/entry-points/types.js +1 -0
- package/dist/cjs/ui/LegacyToolbarComponent.js +4 -3
- package/dist/cjs/ui/menu/SelectionExtensionDropdownItem.js +25 -0
- package/dist/cjs/ui/menu/SelectionExtensionNestedDropdownMenu.compiled.css +1 -0
- package/dist/cjs/ui/menu/SelectionExtensionNestedDropdownMenu.js +18 -0
- package/dist/cjs/ui/toolbar-components/MenuItem.js +2 -2
- package/dist/cjs/ui/utils/registerBlockMenuItems.js +75 -46
- package/dist/es2019/entry-points/selection-extension-plugin-type.js +0 -0
- package/dist/es2019/entry-points/selection-extension-plugin.js +2 -0
- package/dist/es2019/entry-points/types.js +0 -0
- package/dist/es2019/ui/LegacyToolbarComponent.js +4 -3
- package/dist/es2019/ui/menu/SelectionExtensionDropdownItem.js +25 -0
- package/dist/es2019/ui/menu/SelectionExtensionNestedDropdownMenu.compiled.css +1 -0
- package/dist/es2019/ui/menu/SelectionExtensionNestedDropdownMenu.js +18 -0
- package/dist/es2019/ui/toolbar-components/MenuItem.js +2 -2
- package/dist/es2019/ui/utils/registerBlockMenuItems.js +75 -47
- package/dist/esm/entry-points/selection-extension-plugin-type.js +0 -0
- package/dist/esm/entry-points/selection-extension-plugin.js +2 -0
- package/dist/esm/entry-points/types.js +0 -0
- package/dist/esm/ui/LegacyToolbarComponent.js +4 -3
- package/dist/esm/ui/menu/SelectionExtensionDropdownItem.js +25 -0
- package/dist/esm/ui/menu/SelectionExtensionNestedDropdownMenu.compiled.css +1 -0
- package/dist/esm/ui/menu/SelectionExtensionNestedDropdownMenu.js +18 -0
- package/dist/esm/ui/toolbar-components/MenuItem.js +2 -2
- package/dist/esm/ui/utils/registerBlockMenuItems.js +76 -47
- package/dist/types/entry-points/selection-extension-plugin-type.d.ts +1 -0
- package/dist/types/entry-points/selection-extension-plugin.d.ts +1 -0
- package/dist/types/entry-points/types.d.ts +1 -0
- package/dist/types/types/index.d.ts +24 -11
- package/dist/types/ui/utils/registerBlockMenuItems.d.ts +3 -0
- package/dist/types-ts4.5/entry-points/selection-extension-plugin-type.d.ts +1 -0
- package/dist/types-ts4.5/entry-points/selection-extension-plugin.d.ts +1 -0
- package/dist/types-ts4.5/entry-points/types.d.ts +1 -0
- package/dist/types-ts4.5/types/index.d.ts +24 -11
- package/dist/types-ts4.5/ui/utils/registerBlockMenuItems.d.ts +3 -0
- package/package.json +16 -13
- package/selection-extension-plugin/package.json +17 -0
- package/selection-extension-plugin-type/package.json +17 -0
- package/types/package.json +17 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,36 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-selection-extension
|
|
2
2
|
|
|
3
|
+
## 13.3.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`434b508cc2368`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/434b508cc2368) -
|
|
8
|
+
EDITOR-7104: Add `featured-section` placement to block menu selection extension API
|
|
9
|
+
- Add `featured-section` to `BlockMenuPlacement` type which registers a top-level section with a
|
|
10
|
+
separator
|
|
11
|
+
- Add `BLOCK_ACTIONS_TEMPLATE_SECTION` and `BLOCK_ACTIONS_FEATURED_EXTENSION_SECTION_KEYS`
|
|
12
|
+
constants to `editor-common`
|
|
13
|
+
- Render lozenge inline next to label text (not pushed to far right) for dropdown and nested
|
|
14
|
+
dropdown items
|
|
15
|
+
- Move "New" lozenge next to label for synced block dropdown items
|
|
16
|
+
- Block template/menu behaviour gated behind `platform_editor_block_menu_v2_patch_2`; synced-block
|
|
17
|
+
lozenge placement behaviour gated behind `platform_synced_block_patch_12`
|
|
18
|
+
|
|
19
|
+
### Patch Changes
|
|
20
|
+
|
|
21
|
+
- Updated dependencies
|
|
22
|
+
|
|
23
|
+
## 13.2.0
|
|
24
|
+
|
|
25
|
+
### Minor Changes
|
|
26
|
+
|
|
27
|
+
- [`ebab8f80bfc40`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ebab8f80bfc40) -
|
|
28
|
+
Autofix: add explicit package exports (barrel removal)
|
|
29
|
+
|
|
30
|
+
### Patch Changes
|
|
31
|
+
|
|
32
|
+
- Updated dependencies
|
|
33
|
+
|
|
3
34
|
## 13.1.16
|
|
4
35
|
|
|
5
36
|
### Patch Changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "selectionExtensionPlugin", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function get() {
|
|
9
|
+
return _selectionExtensionPlugin.selectionExtensionPlugin;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
var _selectionExtensionPlugin = require("../selectionExtensionPlugin");
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";
|
|
@@ -76,13 +76,14 @@ var LegacyExtensionToolbarItem = exports.LegacyExtensionToolbarItem = function L
|
|
|
76
76
|
// eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
|
|
77
77
|
getMenuItems().map(function (menuItem, i) {
|
|
78
78
|
// Only process ExtensionMenuItemConfiguration, skip ExtensionMenuSectionConfiguration
|
|
79
|
-
if ('label' in menuItem
|
|
79
|
+
if ('label' in menuItem) {
|
|
80
|
+
var _Icon = menuItem.icon;
|
|
80
81
|
return {
|
|
81
82
|
key: "menu-item-".concat(i),
|
|
82
83
|
content: menuItem.label,
|
|
83
|
-
elemBefore: /*#__PURE__*/_react.default.createElement(
|
|
84
|
+
elemBefore: _Icon ? /*#__PURE__*/_react.default.createElement(_Icon, {
|
|
84
85
|
label: menuItem.label
|
|
85
|
-
}),
|
|
86
|
+
}) : undefined,
|
|
86
87
|
onClick: function onClick() {
|
|
87
88
|
var _menuItem$onClick;
|
|
88
89
|
(_menuItem$onClick = menuItem.onClick) === null || _menuItem$onClick === void 0 || _menuItem$onClick.call(menuItem);
|
|
@@ -30,6 +30,7 @@ var styles = {
|
|
|
30
30
|
lozenge: "_18u01b66 _1o9zidpf"
|
|
31
31
|
};
|
|
32
32
|
var SelectionExtensionDropdownItem = exports.SelectionExtensionDropdownItem = function SelectionExtensionDropdownItem(_ref) {
|
|
33
|
+
var _dropdownItem$lozenge;
|
|
33
34
|
var dropdownItem = _ref.dropdownItem;
|
|
34
35
|
var IconComponent = dropdownItem.icon;
|
|
35
36
|
var _useSelectionExtensio = (0, _SelectionExtensionComponentContext.useSelectionExtensionComponentContext)(),
|
|
@@ -100,9 +101,33 @@ var SelectionExtensionDropdownItem = exports.SelectionExtensionDropdownItem = fu
|
|
|
100
101
|
size: iconSize,
|
|
101
102
|
label: ""
|
|
102
103
|
}) : undefined;
|
|
104
|
+
var lozengeLabel = (_dropdownItem$lozenge = dropdownItem.lozenge) === null || _dropdownItem$lozenge === void 0 ? void 0 : _dropdownItem$lozenge.label;
|
|
105
|
+
var elemAfterText = lozengeLabel ? /*#__PURE__*/_react.default.createElement(_lozenge.default, {
|
|
106
|
+
appearance: (0, _platformFeatureFlags.fg)('confluence_fronend_labels_categorization_migration') ? 'discovery' : 'new'
|
|
107
|
+
}, lozengeLabel) : undefined;
|
|
103
108
|
var elemBeforeIcon = iconElement && extensionLocation === 'block-menu' ? /*#__PURE__*/_react.default.createElement("span", {
|
|
104
109
|
className: (0, _runtime.ax)([styles.svgOverflow])
|
|
105
110
|
}, iconElement) : iconElement;
|
|
111
|
+
if ((0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_2')) {
|
|
112
|
+
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
|
|
113
|
+
content: isTruncated ? dropdownItem.label : null,
|
|
114
|
+
position: "top"
|
|
115
|
+
}, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
|
|
116
|
+
elemBefore: elemBeforeIcon,
|
|
117
|
+
elemAfterText: elemAfterText,
|
|
118
|
+
onClick: handleClick,
|
|
119
|
+
isDisabled: dropdownItem.isDisabled,
|
|
120
|
+
testId: _blockMenu.EXTENSION_MENU_ITEM_TEST_ID
|
|
121
|
+
}, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
122
|
+
as: "span",
|
|
123
|
+
xcss: !elemAfterText && (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_5') ? styles.contentWrapperWithJustifyContent : styles.contentWrapper,
|
|
124
|
+
onMouseOver: handleMouseEnter
|
|
125
|
+
}, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
126
|
+
as: "span",
|
|
127
|
+
xcss: styles.label,
|
|
128
|
+
ref: labelRef
|
|
129
|
+
}, dropdownItem.label))));
|
|
130
|
+
}
|
|
106
131
|
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
|
|
107
132
|
content: isTruncated ? dropdownItem.label : null,
|
|
108
133
|
position: "top"
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._18u012x7{margin-left:var(--ds-space-075,6px)}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* SelectionExtensionNestedDropdownMenu.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
1
2
|
"use strict";
|
|
2
3
|
|
|
3
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
@@ -5,13 +6,21 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports.SelectionExtensionNestedDropdownMenu = void 0;
|
|
9
|
+
require("./SelectionExtensionNestedDropdownMenu.compiled.css");
|
|
10
|
+
var _runtime = require("@compiled/react/runtime");
|
|
8
11
|
var _react = _interopRequireDefault(require("react"));
|
|
9
12
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
10
13
|
var _blockMenu = require("@atlaskit/editor-common/block-menu");
|
|
11
14
|
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
12
15
|
var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
|
|
16
|
+
var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
|
|
17
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
18
|
+
var _compiled = require("@atlaskit/primitives/compiled");
|
|
13
19
|
var _SelectionExtensionComponentContext = require("../SelectionExtensionComponentContext");
|
|
14
20
|
var _SelectionExtensionDropdownItem = require("./SelectionExtensionDropdownItem");
|
|
21
|
+
var styles = {
|
|
22
|
+
lozenge: "_18u012x7"
|
|
23
|
+
};
|
|
15
24
|
var ChildItems = function ChildItems(_ref) {
|
|
16
25
|
var nestedDropdownMenu = _ref.nestedDropdownMenu;
|
|
17
26
|
var childItems = nestedDropdownMenu.getMenuItems();
|
|
@@ -23,6 +32,7 @@ var ChildItems = function ChildItems(_ref) {
|
|
|
23
32
|
}));
|
|
24
33
|
};
|
|
25
34
|
var SelectionExtensionNestedDropdownMenu = exports.SelectionExtensionNestedDropdownMenu = function SelectionExtensionNestedDropdownMenu(_ref2) {
|
|
35
|
+
var _nestedDropdownMenu$l;
|
|
26
36
|
var nestedDropdownMenu = _ref2.nestedDropdownMenu;
|
|
27
37
|
var IconComponent = nestedDropdownMenu.icon;
|
|
28
38
|
var _useSelectionExtensio = (0, _SelectionExtensionComponentContext.useSelectionExtensionComponentContext)(),
|
|
@@ -46,9 +56,17 @@ var SelectionExtensionNestedDropdownMenu = exports.SelectionExtensionNestedDropd
|
|
|
46
56
|
}
|
|
47
57
|
});
|
|
48
58
|
};
|
|
59
|
+
var lozengeLabel = (_nestedDropdownMenu$l = nestedDropdownMenu.lozenge) === null || _nestedDropdownMenu$l === void 0 ? void 0 : _nestedDropdownMenu$l.label;
|
|
60
|
+
var elemAfterText = lozengeLabel && (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_2') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
61
|
+
as: "span",
|
|
62
|
+
xcss: styles.lozenge
|
|
63
|
+
}, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
|
|
64
|
+
appearance: (0, _platformFeatureFlags.fg)('confluence_fronend_labels_categorization_migration') ? 'discovery' : 'new'
|
|
65
|
+
}, lozengeLabel)) : undefined;
|
|
49
66
|
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarNestedDropdownMenu, {
|
|
50
67
|
testId: _blockMenu.EXTENSION_MENU_ITEM_TEST_ID,
|
|
51
68
|
text: nestedDropdownMenu.label,
|
|
69
|
+
elemAfterText: elemAfterText,
|
|
52
70
|
elemBefore: IconComponent ? /*#__PURE__*/_react.default.createElement(IconComponent, {
|
|
53
71
|
label: "",
|
|
54
72
|
size: "small"
|
|
@@ -49,10 +49,10 @@ var MenuItem = exports.MenuItem = function MenuItem(_ref) {
|
|
|
49
49
|
var Icon = extension.icon;
|
|
50
50
|
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
|
|
51
51
|
key: extension.label,
|
|
52
|
-
elemBefore: /*#__PURE__*/_react.default.createElement(Icon, {
|
|
52
|
+
elemBefore: Icon ? /*#__PURE__*/_react.default.createElement(Icon, {
|
|
53
53
|
size: "small",
|
|
54
54
|
label: ""
|
|
55
|
-
}),
|
|
55
|
+
}) : undefined,
|
|
56
56
|
onClick: onClickHandle(extension),
|
|
57
57
|
isDisabled: extension.isDisabled
|
|
58
58
|
}, extension.label, extension.lozenge && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
@@ -7,12 +7,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.registerBlockMenuItems = registerBlockMenuItems;
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _blockMenu = require("@atlaskit/editor-common/block-menu");
|
|
10
|
+
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
11
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
10
12
|
var _SelectionExtensionMenuItems = require("../menu/SelectionExtensionMenuItems");
|
|
11
13
|
var _SelectionExtensionComponentContext = require("../SelectionExtensionComponentContext");
|
|
14
|
+
/**
|
|
15
|
+
* Registers first-party selection extension menu items with the block menu plugin.
|
|
16
|
+
*/
|
|
12
17
|
function registerBlockMenuItems(_ref) {
|
|
13
18
|
var extensionList = _ref.extensionList,
|
|
14
19
|
api = _ref.api,
|
|
15
20
|
editorViewRef = _ref.editorViewRef;
|
|
21
|
+
var componentsToRegister = [];
|
|
22
|
+
var registeredFeaturedSectionKeys = new Set();
|
|
16
23
|
extensionList.forEach(function (_ref2) {
|
|
17
24
|
var source = _ref2.source,
|
|
18
25
|
key = _ref2.key,
|
|
@@ -23,12 +30,68 @@ function registerBlockMenuItems(_ref) {
|
|
|
23
30
|
if (!(api !== null && api !== void 0 && api.blockMenu)) {
|
|
24
31
|
return;
|
|
25
32
|
}
|
|
26
|
-
var componentsToRegister = [];
|
|
27
33
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
34
|
+
/**
|
|
35
|
+
* Renders the registered selection-extension menu items with the correct block-menu context.
|
|
36
|
+
*/
|
|
37
|
+
var makeItemComponent = function makeItemComponent() {
|
|
38
|
+
var editorView = editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current;
|
|
39
|
+
if (!editorView) {
|
|
40
|
+
return null;
|
|
41
|
+
}
|
|
42
|
+
return /*#__PURE__*/_react.default.createElement(_SelectionExtensionComponentContext.SelectionExtensionComponentContextProvider
|
|
43
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
44
|
+
, {
|
|
45
|
+
value: {
|
|
46
|
+
api: api,
|
|
47
|
+
editorView: editorView,
|
|
48
|
+
extensionKey: key,
|
|
49
|
+
extensionSource: source,
|
|
50
|
+
extensionLocation: 'block-menu'
|
|
51
|
+
}
|
|
52
|
+
}, /*#__PURE__*/_react.default.createElement(_SelectionExtensionMenuItems.SelectionExtensionMenuItems, {
|
|
53
|
+
getMenuItems: blockMenu.getMenuItems
|
|
54
|
+
}));
|
|
55
|
+
};
|
|
56
|
+
if (blockMenu.placement === 'featured-section' && (0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_2')) {
|
|
57
|
+
// Block menu sections do not support isHidden. Check menu items before registering
|
|
58
|
+
// the section to avoid rendering an orphan separator when there are no items.
|
|
59
|
+
if (blockMenu.getMenuItems().length === 0 || !blockMenu.sectionKey) {
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
var sectionRank = _blockMenu.MAIN_BLOCK_MENU_SECTION_RANK[blockMenu.sectionKey];
|
|
63
|
+
if (sectionRank === undefined) {
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// Register as its own top-level section with a separator
|
|
68
|
+
if (!registeredFeaturedSectionKeys.has(blockMenu.sectionKey)) {
|
|
69
|
+
componentsToRegister.push({
|
|
70
|
+
type: 'block-menu-section',
|
|
71
|
+
key: blockMenu.sectionKey,
|
|
72
|
+
rank: sectionRank,
|
|
73
|
+
component: function component(_ref3) {
|
|
74
|
+
var children = _ref3.children;
|
|
75
|
+
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
|
|
76
|
+
hasSeparator: true
|
|
77
|
+
}, children);
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
registeredFeaturedSectionKeys.add(blockMenu.sectionKey);
|
|
81
|
+
}
|
|
82
|
+
componentsToRegister.push({
|
|
83
|
+
type: 'block-menu-item',
|
|
84
|
+
key: "selection-extension-".concat(key),
|
|
85
|
+
parent: {
|
|
86
|
+
type: 'block-menu-section',
|
|
87
|
+
key: blockMenu.sectionKey,
|
|
88
|
+
rank: _blockMenu.BLOCK_ACTIONS_FEATURED_EXTENSION_ITEM_RANK[_blockMenu.BLOCK_ACTIONS_FEATURED_EXTENSION_SLOT_MENU_ITEM.key]
|
|
89
|
+
},
|
|
90
|
+
component: makeItemComponent
|
|
91
|
+
});
|
|
92
|
+
} else if (blockMenu.placement === 'featured' || blockMenu.placement === 'featured-section' && !(0, _platformFeatureFlags.fg)('platform_editor_block_menu_v2_patch_2')) {
|
|
93
|
+
// Register as an item directly under TRANSFORM_MENU_SECTION
|
|
94
|
+
// (also used as fallback for featured-section when gate is off)
|
|
32
95
|
componentsToRegister.push({
|
|
33
96
|
type: 'block-menu-item',
|
|
34
97
|
key: "selection-extension-".concat(key),
|
|
@@ -37,27 +100,10 @@ function registerBlockMenuItems(_ref) {
|
|
|
37
100
|
key: _blockMenu.TRANSFORM_MENU_SECTION.key,
|
|
38
101
|
rank: _blockMenu.TRANSFORM_MENU_SECTION_RANK[_blockMenu.BLOCK_ACTIONS_FEATURED_EXTENSION_SLOT_MENU_ITEM.key]
|
|
39
102
|
},
|
|
40
|
-
component:
|
|
41
|
-
var editorView = editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current;
|
|
42
|
-
if (!editorView) {
|
|
43
|
-
return null;
|
|
44
|
-
}
|
|
45
|
-
return /*#__PURE__*/_react.default.createElement(_SelectionExtensionComponentContext.SelectionExtensionComponentContextProvider
|
|
46
|
-
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
47
|
-
, {
|
|
48
|
-
value: {
|
|
49
|
-
api: api,
|
|
50
|
-
editorView: editorView,
|
|
51
|
-
extensionKey: key,
|
|
52
|
-
extensionSource: source,
|
|
53
|
-
extensionLocation: 'block-menu'
|
|
54
|
-
}
|
|
55
|
-
}, /*#__PURE__*/_react.default.createElement(_SelectionExtensionMenuItems.SelectionExtensionMenuItems, {
|
|
56
|
-
getMenuItems: blockMenu.getMenuItems
|
|
57
|
-
}));
|
|
58
|
-
}
|
|
103
|
+
component: makeItemComponent
|
|
59
104
|
});
|
|
60
105
|
} else {
|
|
106
|
+
// Default: register under TRANSFORM_CREATE_MENU_SECTION
|
|
61
107
|
componentsToRegister.push({
|
|
62
108
|
type: 'block-menu-item',
|
|
63
109
|
key: "selection-extension-".concat(key),
|
|
@@ -69,29 +115,12 @@ function registerBlockMenuItems(_ref) {
|
|
|
69
115
|
key: _blockMenu.TRANSFORM_CREATE_MENU_SECTION.key,
|
|
70
116
|
rank: _blockMenu.TRANSFORM_CREATE_MENU_SECTION_RANK[_blockMenu.TRANSFORM_DEFAULT_EXTENSION_SLOT_MENU_ITEM.key]
|
|
71
117
|
},
|
|
72
|
-
component:
|
|
73
|
-
var editorView = editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current;
|
|
74
|
-
if (!editorView) {
|
|
75
|
-
return null;
|
|
76
|
-
}
|
|
77
|
-
return /*#__PURE__*/_react.default.createElement(_SelectionExtensionComponentContext.SelectionExtensionComponentContextProvider
|
|
78
|
-
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
79
|
-
, {
|
|
80
|
-
value: {
|
|
81
|
-
api: api,
|
|
82
|
-
editorView: editorView,
|
|
83
|
-
extensionKey: key,
|
|
84
|
-
extensionSource: source,
|
|
85
|
-
extensionLocation: 'block-menu'
|
|
86
|
-
}
|
|
87
|
-
}, /*#__PURE__*/_react.default.createElement(_SelectionExtensionMenuItems.SelectionExtensionMenuItems, {
|
|
88
|
-
getMenuItems: blockMenu.getMenuItems
|
|
89
|
-
}));
|
|
90
|
-
}
|
|
118
|
+
component: makeItemComponent
|
|
91
119
|
});
|
|
92
120
|
}
|
|
93
|
-
if (componentsToRegister.length > 0) {
|
|
94
|
-
api.blockMenu.actions.registerBlockMenuComponents(componentsToRegister);
|
|
95
|
-
}
|
|
96
121
|
});
|
|
122
|
+
if (componentsToRegister.length > 0) {
|
|
123
|
+
var _api$blockMenu;
|
|
124
|
+
api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents(componentsToRegister);
|
|
125
|
+
}
|
|
97
126
|
}
|
|
File without changes
|
|
File without changes
|
|
@@ -65,13 +65,14 @@ export const LegacyExtensionToolbarItem = ({
|
|
|
65
65
|
// eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
|
|
66
66
|
getMenuItems().map((menuItem, i) => {
|
|
67
67
|
// Only process ExtensionMenuItemConfiguration, skip ExtensionMenuSectionConfiguration
|
|
68
|
-
if ('label' in menuItem
|
|
68
|
+
if ('label' in menuItem) {
|
|
69
|
+
const Icon = menuItem.icon;
|
|
69
70
|
return {
|
|
70
71
|
key: `menu-item-${i}`,
|
|
71
72
|
content: menuItem.label,
|
|
72
|
-
elemBefore: /*#__PURE__*/React.createElement(
|
|
73
|
+
elemBefore: Icon ? /*#__PURE__*/React.createElement(Icon, {
|
|
73
74
|
label: menuItem.label
|
|
74
|
-
}),
|
|
75
|
+
}) : undefined,
|
|
75
76
|
onClick: () => {
|
|
76
77
|
var _menuItem$onClick;
|
|
77
78
|
(_menuItem$onClick = menuItem.onClick) === null || _menuItem$onClick === void 0 ? void 0 : _menuItem$onClick.call(menuItem);
|
|
@@ -22,6 +22,7 @@ const styles = {
|
|
|
22
22
|
export const SelectionExtensionDropdownItem = ({
|
|
23
23
|
dropdownItem
|
|
24
24
|
}) => {
|
|
25
|
+
var _dropdownItem$lozenge;
|
|
25
26
|
const IconComponent = dropdownItem.icon;
|
|
26
27
|
const {
|
|
27
28
|
api,
|
|
@@ -91,9 +92,33 @@ export const SelectionExtensionDropdownItem = ({
|
|
|
91
92
|
size: iconSize,
|
|
92
93
|
label: ""
|
|
93
94
|
}) : undefined;
|
|
95
|
+
const lozengeLabel = (_dropdownItem$lozenge = dropdownItem.lozenge) === null || _dropdownItem$lozenge === void 0 ? void 0 : _dropdownItem$lozenge.label;
|
|
96
|
+
const elemAfterText = lozengeLabel ? /*#__PURE__*/React.createElement(Lozenge, {
|
|
97
|
+
appearance: fg('confluence_fronend_labels_categorization_migration') ? 'discovery' : 'new'
|
|
98
|
+
}, lozengeLabel) : undefined;
|
|
94
99
|
const elemBeforeIcon = iconElement && extensionLocation === 'block-menu' ? /*#__PURE__*/React.createElement("span", {
|
|
95
100
|
className: ax([styles.svgOverflow])
|
|
96
101
|
}, iconElement) : iconElement;
|
|
102
|
+
if (fg('platform_editor_block_menu_v2_patch_2')) {
|
|
103
|
+
return /*#__PURE__*/React.createElement(ToolbarTooltip, {
|
|
104
|
+
content: isTruncated ? dropdownItem.label : null,
|
|
105
|
+
position: "top"
|
|
106
|
+
}, /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
107
|
+
elemBefore: elemBeforeIcon,
|
|
108
|
+
elemAfterText: elemAfterText,
|
|
109
|
+
onClick: handleClick,
|
|
110
|
+
isDisabled: dropdownItem.isDisabled,
|
|
111
|
+
testId: EXTENSION_MENU_ITEM_TEST_ID
|
|
112
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
113
|
+
as: "span",
|
|
114
|
+
xcss: !elemAfterText && fg('platform_editor_block_menu_v2_patch_5') ? styles.contentWrapperWithJustifyContent : styles.contentWrapper,
|
|
115
|
+
onMouseOver: handleMouseEnter
|
|
116
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
117
|
+
as: "span",
|
|
118
|
+
xcss: styles.label,
|
|
119
|
+
ref: labelRef
|
|
120
|
+
}, dropdownItem.label))));
|
|
121
|
+
}
|
|
97
122
|
return /*#__PURE__*/React.createElement(ToolbarTooltip, {
|
|
98
123
|
content: isTruncated ? dropdownItem.label : null,
|
|
99
124
|
position: "top"
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._18u012x7{margin-left:var(--ds-space-075,6px)}
|
|
@@ -1,10 +1,19 @@
|
|
|
1
|
+
/* SelectionExtensionNestedDropdownMenu.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
+
import "./SelectionExtensionNestedDropdownMenu.compiled.css";
|
|
3
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
1
4
|
import React from 'react';
|
|
2
5
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
3
6
|
import { EXTENSION_MENU_ITEM_TEST_ID } from '@atlaskit/editor-common/block-menu';
|
|
4
7
|
import { ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
|
|
5
8
|
import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
|
|
9
|
+
import Lozenge from '@atlaskit/lozenge';
|
|
10
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
11
|
+
import { Box } from '@atlaskit/primitives/compiled';
|
|
6
12
|
import { useSelectionExtensionComponentContext } from '../SelectionExtensionComponentContext';
|
|
7
13
|
import { SelectionExtensionDropdownItem } from './SelectionExtensionDropdownItem';
|
|
14
|
+
const styles = {
|
|
15
|
+
lozenge: "_18u012x7"
|
|
16
|
+
};
|
|
8
17
|
const ChildItems = ({
|
|
9
18
|
nestedDropdownMenu
|
|
10
19
|
}) => {
|
|
@@ -17,6 +26,7 @@ const ChildItems = ({
|
|
|
17
26
|
export const SelectionExtensionNestedDropdownMenu = ({
|
|
18
27
|
nestedDropdownMenu
|
|
19
28
|
}) => {
|
|
29
|
+
var _nestedDropdownMenu$l;
|
|
20
30
|
const IconComponent = nestedDropdownMenu.icon;
|
|
21
31
|
const {
|
|
22
32
|
api,
|
|
@@ -40,9 +50,17 @@ export const SelectionExtensionNestedDropdownMenu = ({
|
|
|
40
50
|
}
|
|
41
51
|
});
|
|
42
52
|
};
|
|
53
|
+
const lozengeLabel = (_nestedDropdownMenu$l = nestedDropdownMenu.lozenge) === null || _nestedDropdownMenu$l === void 0 ? void 0 : _nestedDropdownMenu$l.label;
|
|
54
|
+
const elemAfterText = lozengeLabel && fg('platform_editor_block_menu_v2_patch_2') ? /*#__PURE__*/React.createElement(Box, {
|
|
55
|
+
as: "span",
|
|
56
|
+
xcss: styles.lozenge
|
|
57
|
+
}, /*#__PURE__*/React.createElement(Lozenge, {
|
|
58
|
+
appearance: fg('confluence_fronend_labels_categorization_migration') ? 'discovery' : 'new'
|
|
59
|
+
}, lozengeLabel)) : undefined;
|
|
43
60
|
return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
|
|
44
61
|
testId: EXTENSION_MENU_ITEM_TEST_ID,
|
|
45
62
|
text: nestedDropdownMenu.label,
|
|
63
|
+
elemAfterText: elemAfterText,
|
|
46
64
|
elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
|
|
47
65
|
label: "",
|
|
48
66
|
size: "small"
|
|
@@ -44,10 +44,10 @@ export const MenuItem = ({
|
|
|
44
44
|
const Icon = extension.icon;
|
|
45
45
|
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
46
46
|
key: extension.label,
|
|
47
|
-
elemBefore: /*#__PURE__*/React.createElement(Icon, {
|
|
47
|
+
elemBefore: Icon ? /*#__PURE__*/React.createElement(Icon, {
|
|
48
48
|
size: "small",
|
|
49
49
|
label: ""
|
|
50
|
-
}),
|
|
50
|
+
}) : undefined,
|
|
51
51
|
onClick: onClickHandle(extension),
|
|
52
52
|
isDisabled: extension.isDisabled
|
|
53
53
|
}, extension.label, extension.lozenge && /*#__PURE__*/React.createElement(Box, {
|
|
@@ -1,12 +1,19 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { TRANSFORM_MENU_SECTION, BLOCK_ACTIONS_FEATURED_EXTENSION_SLOT_MENU_ITEM,
|
|
2
|
+
import { TRANSFORM_MENU_SECTION, TRANSFORM_MENU_SECTION_RANK, BLOCK_ACTIONS_FEATURED_EXTENSION_SLOT_MENU_ITEM, BLOCK_ACTIONS_FEATURED_EXTENSION_ITEM_RANK, MAIN_BLOCK_MENU_SECTION_RANK, TRANSFORM_CREATE_MENU_SECTION, TRANSFORM_CREATE_MENU_SECTION_RANK, TRANSFORM_DEFAULT_EXTENSION_SLOT_MENU_ITEM } from '@atlaskit/editor-common/block-menu';
|
|
3
|
+
import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
|
|
4
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
5
|
import { SelectionExtensionMenuItems } from '../menu/SelectionExtensionMenuItems';
|
|
4
6
|
import { SelectionExtensionComponentContextProvider } from '../SelectionExtensionComponentContext';
|
|
7
|
+
/**
|
|
8
|
+
* Registers first-party selection extension menu items with the block menu plugin.
|
|
9
|
+
*/
|
|
5
10
|
export function registerBlockMenuItems({
|
|
6
11
|
extensionList,
|
|
7
12
|
api,
|
|
8
13
|
editorViewRef
|
|
9
14
|
}) {
|
|
15
|
+
const componentsToRegister = [];
|
|
16
|
+
const registeredFeaturedSectionKeys = new Set();
|
|
10
17
|
extensionList.forEach(({
|
|
11
18
|
source,
|
|
12
19
|
key,
|
|
@@ -18,12 +25,67 @@ export function registerBlockMenuItems({
|
|
|
18
25
|
if (!(api !== null && api !== void 0 && api.blockMenu)) {
|
|
19
26
|
return;
|
|
20
27
|
}
|
|
21
|
-
const componentsToRegister = [];
|
|
22
28
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
29
|
+
/**
|
|
30
|
+
* Renders the registered selection-extension menu items with the correct block-menu context.
|
|
31
|
+
*/
|
|
32
|
+
const makeItemComponent = () => {
|
|
33
|
+
const editorView = editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current;
|
|
34
|
+
if (!editorView) {
|
|
35
|
+
return null;
|
|
36
|
+
}
|
|
37
|
+
return /*#__PURE__*/React.createElement(SelectionExtensionComponentContextProvider
|
|
38
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
39
|
+
, {
|
|
40
|
+
value: {
|
|
41
|
+
api,
|
|
42
|
+
editorView,
|
|
43
|
+
extensionKey: key,
|
|
44
|
+
extensionSource: source,
|
|
45
|
+
extensionLocation: 'block-menu'
|
|
46
|
+
}
|
|
47
|
+
}, /*#__PURE__*/React.createElement(SelectionExtensionMenuItems, {
|
|
48
|
+
getMenuItems: blockMenu.getMenuItems
|
|
49
|
+
}));
|
|
50
|
+
};
|
|
51
|
+
if (blockMenu.placement === 'featured-section' && fg('platform_editor_block_menu_v2_patch_2')) {
|
|
52
|
+
// Block menu sections do not support isHidden. Check menu items before registering
|
|
53
|
+
// the section to avoid rendering an orphan separator when there are no items.
|
|
54
|
+
if (blockMenu.getMenuItems().length === 0 || !blockMenu.sectionKey) {
|
|
55
|
+
return;
|
|
56
|
+
}
|
|
57
|
+
const sectionRank = MAIN_BLOCK_MENU_SECTION_RANK[blockMenu.sectionKey];
|
|
58
|
+
if (sectionRank === undefined) {
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
// Register as its own top-level section with a separator
|
|
63
|
+
if (!registeredFeaturedSectionKeys.has(blockMenu.sectionKey)) {
|
|
64
|
+
componentsToRegister.push({
|
|
65
|
+
type: 'block-menu-section',
|
|
66
|
+
key: blockMenu.sectionKey,
|
|
67
|
+
rank: sectionRank,
|
|
68
|
+
component: ({
|
|
69
|
+
children
|
|
70
|
+
}) => /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
|
|
71
|
+
hasSeparator: true
|
|
72
|
+
}, children)
|
|
73
|
+
});
|
|
74
|
+
registeredFeaturedSectionKeys.add(blockMenu.sectionKey);
|
|
75
|
+
}
|
|
76
|
+
componentsToRegister.push({
|
|
77
|
+
type: 'block-menu-item',
|
|
78
|
+
key: `selection-extension-${key}`,
|
|
79
|
+
parent: {
|
|
80
|
+
type: 'block-menu-section',
|
|
81
|
+
key: blockMenu.sectionKey,
|
|
82
|
+
rank: BLOCK_ACTIONS_FEATURED_EXTENSION_ITEM_RANK[BLOCK_ACTIONS_FEATURED_EXTENSION_SLOT_MENU_ITEM.key]
|
|
83
|
+
},
|
|
84
|
+
component: makeItemComponent
|
|
85
|
+
});
|
|
86
|
+
} else if (blockMenu.placement === 'featured' || blockMenu.placement === 'featured-section' && !fg('platform_editor_block_menu_v2_patch_2')) {
|
|
87
|
+
// Register as an item directly under TRANSFORM_MENU_SECTION
|
|
88
|
+
// (also used as fallback for featured-section when gate is off)
|
|
27
89
|
componentsToRegister.push({
|
|
28
90
|
type: 'block-menu-item',
|
|
29
91
|
key: `selection-extension-${key}`,
|
|
@@ -32,27 +94,10 @@ export function registerBlockMenuItems({
|
|
|
32
94
|
key: TRANSFORM_MENU_SECTION.key,
|
|
33
95
|
rank: TRANSFORM_MENU_SECTION_RANK[BLOCK_ACTIONS_FEATURED_EXTENSION_SLOT_MENU_ITEM.key]
|
|
34
96
|
},
|
|
35
|
-
component:
|
|
36
|
-
const editorView = editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current;
|
|
37
|
-
if (!editorView) {
|
|
38
|
-
return null;
|
|
39
|
-
}
|
|
40
|
-
return /*#__PURE__*/React.createElement(SelectionExtensionComponentContextProvider
|
|
41
|
-
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
42
|
-
, {
|
|
43
|
-
value: {
|
|
44
|
-
api,
|
|
45
|
-
editorView,
|
|
46
|
-
extensionKey: key,
|
|
47
|
-
extensionSource: source,
|
|
48
|
-
extensionLocation: 'block-menu'
|
|
49
|
-
}
|
|
50
|
-
}, /*#__PURE__*/React.createElement(SelectionExtensionMenuItems, {
|
|
51
|
-
getMenuItems: blockMenu.getMenuItems
|
|
52
|
-
}));
|
|
53
|
-
}
|
|
97
|
+
component: makeItemComponent
|
|
54
98
|
});
|
|
55
99
|
} else {
|
|
100
|
+
// Default: register under TRANSFORM_CREATE_MENU_SECTION
|
|
56
101
|
componentsToRegister.push({
|
|
57
102
|
type: 'block-menu-item',
|
|
58
103
|
key: `selection-extension-${key}`,
|
|
@@ -62,29 +107,12 @@ export function registerBlockMenuItems({
|
|
|
62
107
|
key: TRANSFORM_CREATE_MENU_SECTION.key,
|
|
63
108
|
rank: TRANSFORM_CREATE_MENU_SECTION_RANK[TRANSFORM_DEFAULT_EXTENSION_SLOT_MENU_ITEM.key]
|
|
64
109
|
},
|
|
65
|
-
component:
|
|
66
|
-
const editorView = editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current;
|
|
67
|
-
if (!editorView) {
|
|
68
|
-
return null;
|
|
69
|
-
}
|
|
70
|
-
return /*#__PURE__*/React.createElement(SelectionExtensionComponentContextProvider
|
|
71
|
-
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
72
|
-
, {
|
|
73
|
-
value: {
|
|
74
|
-
api,
|
|
75
|
-
editorView,
|
|
76
|
-
extensionKey: key,
|
|
77
|
-
extensionSource: source,
|
|
78
|
-
extensionLocation: 'block-menu'
|
|
79
|
-
}
|
|
80
|
-
}, /*#__PURE__*/React.createElement(SelectionExtensionMenuItems, {
|
|
81
|
-
getMenuItems: blockMenu.getMenuItems
|
|
82
|
-
}));
|
|
83
|
-
}
|
|
110
|
+
component: makeItemComponent
|
|
84
111
|
});
|
|
85
112
|
}
|
|
86
|
-
if (componentsToRegister.length > 0) {
|
|
87
|
-
api.blockMenu.actions.registerBlockMenuComponents(componentsToRegister);
|
|
88
|
-
}
|
|
89
113
|
});
|
|
114
|
+
if (componentsToRegister.length > 0) {
|
|
115
|
+
var _api$blockMenu;
|
|
116
|
+
api === null || api === void 0 ? void 0 : (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 ? void 0 : _api$blockMenu.actions.registerBlockMenuComponents(componentsToRegister);
|
|
117
|
+
}
|
|
90
118
|
}
|
|
File without changes
|
|
File without changes
|
|
@@ -67,13 +67,14 @@ export var LegacyExtensionToolbarItem = function LegacyExtensionToolbarItem(_ref
|
|
|
67
67
|
// eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- Ignored via go/ees017 (to be fixed)
|
|
68
68
|
getMenuItems().map(function (menuItem, i) {
|
|
69
69
|
// Only process ExtensionMenuItemConfiguration, skip ExtensionMenuSectionConfiguration
|
|
70
|
-
if ('label' in menuItem
|
|
70
|
+
if ('label' in menuItem) {
|
|
71
|
+
var _Icon = menuItem.icon;
|
|
71
72
|
return {
|
|
72
73
|
key: "menu-item-".concat(i),
|
|
73
74
|
content: menuItem.label,
|
|
74
|
-
elemBefore: /*#__PURE__*/React.createElement(
|
|
75
|
+
elemBefore: _Icon ? /*#__PURE__*/React.createElement(_Icon, {
|
|
75
76
|
label: menuItem.label
|
|
76
|
-
}),
|
|
77
|
+
}) : undefined,
|
|
77
78
|
onClick: function onClick() {
|
|
78
79
|
var _menuItem$onClick;
|
|
79
80
|
(_menuItem$onClick = menuItem.onClick) === null || _menuItem$onClick === void 0 || _menuItem$onClick.call(menuItem);
|
|
@@ -21,6 +21,7 @@ var styles = {
|
|
|
21
21
|
lozenge: "_18u01b66 _1o9zidpf"
|
|
22
22
|
};
|
|
23
23
|
export var SelectionExtensionDropdownItem = function SelectionExtensionDropdownItem(_ref) {
|
|
24
|
+
var _dropdownItem$lozenge;
|
|
24
25
|
var dropdownItem = _ref.dropdownItem;
|
|
25
26
|
var IconComponent = dropdownItem.icon;
|
|
26
27
|
var _useSelectionExtensio = useSelectionExtensionComponentContext(),
|
|
@@ -91,9 +92,33 @@ export var SelectionExtensionDropdownItem = function SelectionExtensionDropdownI
|
|
|
91
92
|
size: iconSize,
|
|
92
93
|
label: ""
|
|
93
94
|
}) : undefined;
|
|
95
|
+
var lozengeLabel = (_dropdownItem$lozenge = dropdownItem.lozenge) === null || _dropdownItem$lozenge === void 0 ? void 0 : _dropdownItem$lozenge.label;
|
|
96
|
+
var elemAfterText = lozengeLabel ? /*#__PURE__*/React.createElement(Lozenge, {
|
|
97
|
+
appearance: fg('confluence_fronend_labels_categorization_migration') ? 'discovery' : 'new'
|
|
98
|
+
}, lozengeLabel) : undefined;
|
|
94
99
|
var elemBeforeIcon = iconElement && extensionLocation === 'block-menu' ? /*#__PURE__*/React.createElement("span", {
|
|
95
100
|
className: ax([styles.svgOverflow])
|
|
96
101
|
}, iconElement) : iconElement;
|
|
102
|
+
if (fg('platform_editor_block_menu_v2_patch_2')) {
|
|
103
|
+
return /*#__PURE__*/React.createElement(ToolbarTooltip, {
|
|
104
|
+
content: isTruncated ? dropdownItem.label : null,
|
|
105
|
+
position: "top"
|
|
106
|
+
}, /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
107
|
+
elemBefore: elemBeforeIcon,
|
|
108
|
+
elemAfterText: elemAfterText,
|
|
109
|
+
onClick: handleClick,
|
|
110
|
+
isDisabled: dropdownItem.isDisabled,
|
|
111
|
+
testId: EXTENSION_MENU_ITEM_TEST_ID
|
|
112
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
113
|
+
as: "span",
|
|
114
|
+
xcss: !elemAfterText && fg('platform_editor_block_menu_v2_patch_5') ? styles.contentWrapperWithJustifyContent : styles.contentWrapper,
|
|
115
|
+
onMouseOver: handleMouseEnter
|
|
116
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
117
|
+
as: "span",
|
|
118
|
+
xcss: styles.label,
|
|
119
|
+
ref: labelRef
|
|
120
|
+
}, dropdownItem.label))));
|
|
121
|
+
}
|
|
97
122
|
return /*#__PURE__*/React.createElement(ToolbarTooltip, {
|
|
98
123
|
content: isTruncated ? dropdownItem.label : null,
|
|
99
124
|
position: "top"
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._18u012x7{margin-left:var(--ds-space-075,6px)}
|
|
@@ -1,10 +1,19 @@
|
|
|
1
|
+
/* SelectionExtensionNestedDropdownMenu.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
+
import "./SelectionExtensionNestedDropdownMenu.compiled.css";
|
|
3
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
1
4
|
import React from 'react';
|
|
2
5
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
3
6
|
import { EXTENSION_MENU_ITEM_TEST_ID } from '@atlaskit/editor-common/block-menu';
|
|
4
7
|
import { ToolbarDropdownItemSection, ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
|
|
5
8
|
import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
|
|
9
|
+
import Lozenge from '@atlaskit/lozenge';
|
|
10
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
11
|
+
import { Box } from '@atlaskit/primitives/compiled';
|
|
6
12
|
import { useSelectionExtensionComponentContext } from '../SelectionExtensionComponentContext';
|
|
7
13
|
import { SelectionExtensionDropdownItem } from './SelectionExtensionDropdownItem';
|
|
14
|
+
var styles = {
|
|
15
|
+
lozenge: "_18u012x7"
|
|
16
|
+
};
|
|
8
17
|
var ChildItems = function ChildItems(_ref) {
|
|
9
18
|
var nestedDropdownMenu = _ref.nestedDropdownMenu;
|
|
10
19
|
var childItems = nestedDropdownMenu.getMenuItems();
|
|
@@ -16,6 +25,7 @@ var ChildItems = function ChildItems(_ref) {
|
|
|
16
25
|
}));
|
|
17
26
|
};
|
|
18
27
|
export var SelectionExtensionNestedDropdownMenu = function SelectionExtensionNestedDropdownMenu(_ref2) {
|
|
28
|
+
var _nestedDropdownMenu$l;
|
|
19
29
|
var nestedDropdownMenu = _ref2.nestedDropdownMenu;
|
|
20
30
|
var IconComponent = nestedDropdownMenu.icon;
|
|
21
31
|
var _useSelectionExtensio = useSelectionExtensionComponentContext(),
|
|
@@ -39,9 +49,17 @@ export var SelectionExtensionNestedDropdownMenu = function SelectionExtensionNes
|
|
|
39
49
|
}
|
|
40
50
|
});
|
|
41
51
|
};
|
|
52
|
+
var lozengeLabel = (_nestedDropdownMenu$l = nestedDropdownMenu.lozenge) === null || _nestedDropdownMenu$l === void 0 ? void 0 : _nestedDropdownMenu$l.label;
|
|
53
|
+
var elemAfterText = lozengeLabel && fg('platform_editor_block_menu_v2_patch_2') ? /*#__PURE__*/React.createElement(Box, {
|
|
54
|
+
as: "span",
|
|
55
|
+
xcss: styles.lozenge
|
|
56
|
+
}, /*#__PURE__*/React.createElement(Lozenge, {
|
|
57
|
+
appearance: fg('confluence_fronend_labels_categorization_migration') ? 'discovery' : 'new'
|
|
58
|
+
}, lozengeLabel)) : undefined;
|
|
42
59
|
return /*#__PURE__*/React.createElement(ToolbarNestedDropdownMenu, {
|
|
43
60
|
testId: EXTENSION_MENU_ITEM_TEST_ID,
|
|
44
61
|
text: nestedDropdownMenu.label,
|
|
62
|
+
elemAfterText: elemAfterText,
|
|
45
63
|
elemBefore: IconComponent ? /*#__PURE__*/React.createElement(IconComponent, {
|
|
46
64
|
label: "",
|
|
47
65
|
size: "small"
|
|
@@ -42,10 +42,10 @@ export var MenuItem = function MenuItem(_ref) {
|
|
|
42
42
|
var Icon = extension.icon;
|
|
43
43
|
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
44
44
|
key: extension.label,
|
|
45
|
-
elemBefore: /*#__PURE__*/React.createElement(Icon, {
|
|
45
|
+
elemBefore: Icon ? /*#__PURE__*/React.createElement(Icon, {
|
|
46
46
|
size: "small",
|
|
47
47
|
label: ""
|
|
48
|
-
}),
|
|
48
|
+
}) : undefined,
|
|
49
49
|
onClick: onClickHandle(extension),
|
|
50
50
|
isDisabled: extension.isDisabled
|
|
51
51
|
}, extension.label, extension.lozenge && /*#__PURE__*/React.createElement(Box, {
|
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { TRANSFORM_MENU_SECTION, BLOCK_ACTIONS_FEATURED_EXTENSION_SLOT_MENU_ITEM,
|
|
2
|
+
import { TRANSFORM_MENU_SECTION, TRANSFORM_MENU_SECTION_RANK, BLOCK_ACTIONS_FEATURED_EXTENSION_SLOT_MENU_ITEM, BLOCK_ACTIONS_FEATURED_EXTENSION_ITEM_RANK, MAIN_BLOCK_MENU_SECTION_RANK, TRANSFORM_CREATE_MENU_SECTION, TRANSFORM_CREATE_MENU_SECTION_RANK, TRANSFORM_DEFAULT_EXTENSION_SLOT_MENU_ITEM } from '@atlaskit/editor-common/block-menu';
|
|
3
|
+
import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
|
|
4
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
5
|
import { SelectionExtensionMenuItems } from '../menu/SelectionExtensionMenuItems';
|
|
4
6
|
import { SelectionExtensionComponentContextProvider } from '../SelectionExtensionComponentContext';
|
|
7
|
+
/**
|
|
8
|
+
* Registers first-party selection extension menu items with the block menu plugin.
|
|
9
|
+
*/
|
|
5
10
|
export function registerBlockMenuItems(_ref) {
|
|
6
11
|
var extensionList = _ref.extensionList,
|
|
7
12
|
api = _ref.api,
|
|
8
13
|
editorViewRef = _ref.editorViewRef;
|
|
14
|
+
var componentsToRegister = [];
|
|
15
|
+
var registeredFeaturedSectionKeys = new Set();
|
|
9
16
|
extensionList.forEach(function (_ref2) {
|
|
10
17
|
var source = _ref2.source,
|
|
11
18
|
key = _ref2.key,
|
|
@@ -16,12 +23,68 @@ export function registerBlockMenuItems(_ref) {
|
|
|
16
23
|
if (!(api !== null && api !== void 0 && api.blockMenu)) {
|
|
17
24
|
return;
|
|
18
25
|
}
|
|
19
|
-
var componentsToRegister = [];
|
|
20
26
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
27
|
+
/**
|
|
28
|
+
* Renders the registered selection-extension menu items with the correct block-menu context.
|
|
29
|
+
*/
|
|
30
|
+
var makeItemComponent = function makeItemComponent() {
|
|
31
|
+
var editorView = editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current;
|
|
32
|
+
if (!editorView) {
|
|
33
|
+
return null;
|
|
34
|
+
}
|
|
35
|
+
return /*#__PURE__*/React.createElement(SelectionExtensionComponentContextProvider
|
|
36
|
+
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
37
|
+
, {
|
|
38
|
+
value: {
|
|
39
|
+
api: api,
|
|
40
|
+
editorView: editorView,
|
|
41
|
+
extensionKey: key,
|
|
42
|
+
extensionSource: source,
|
|
43
|
+
extensionLocation: 'block-menu'
|
|
44
|
+
}
|
|
45
|
+
}, /*#__PURE__*/React.createElement(SelectionExtensionMenuItems, {
|
|
46
|
+
getMenuItems: blockMenu.getMenuItems
|
|
47
|
+
}));
|
|
48
|
+
};
|
|
49
|
+
if (blockMenu.placement === 'featured-section' && fg('platform_editor_block_menu_v2_patch_2')) {
|
|
50
|
+
// Block menu sections do not support isHidden. Check menu items before registering
|
|
51
|
+
// the section to avoid rendering an orphan separator when there are no items.
|
|
52
|
+
if (blockMenu.getMenuItems().length === 0 || !blockMenu.sectionKey) {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
var sectionRank = MAIN_BLOCK_MENU_SECTION_RANK[blockMenu.sectionKey];
|
|
56
|
+
if (sectionRank === undefined) {
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
// Register as its own top-level section with a separator
|
|
61
|
+
if (!registeredFeaturedSectionKeys.has(blockMenu.sectionKey)) {
|
|
62
|
+
componentsToRegister.push({
|
|
63
|
+
type: 'block-menu-section',
|
|
64
|
+
key: blockMenu.sectionKey,
|
|
65
|
+
rank: sectionRank,
|
|
66
|
+
component: function component(_ref3) {
|
|
67
|
+
var children = _ref3.children;
|
|
68
|
+
return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
|
|
69
|
+
hasSeparator: true
|
|
70
|
+
}, children);
|
|
71
|
+
}
|
|
72
|
+
});
|
|
73
|
+
registeredFeaturedSectionKeys.add(blockMenu.sectionKey);
|
|
74
|
+
}
|
|
75
|
+
componentsToRegister.push({
|
|
76
|
+
type: 'block-menu-item',
|
|
77
|
+
key: "selection-extension-".concat(key),
|
|
78
|
+
parent: {
|
|
79
|
+
type: 'block-menu-section',
|
|
80
|
+
key: blockMenu.sectionKey,
|
|
81
|
+
rank: BLOCK_ACTIONS_FEATURED_EXTENSION_ITEM_RANK[BLOCK_ACTIONS_FEATURED_EXTENSION_SLOT_MENU_ITEM.key]
|
|
82
|
+
},
|
|
83
|
+
component: makeItemComponent
|
|
84
|
+
});
|
|
85
|
+
} else if (blockMenu.placement === 'featured' || blockMenu.placement === 'featured-section' && !fg('platform_editor_block_menu_v2_patch_2')) {
|
|
86
|
+
// Register as an item directly under TRANSFORM_MENU_SECTION
|
|
87
|
+
// (also used as fallback for featured-section when gate is off)
|
|
25
88
|
componentsToRegister.push({
|
|
26
89
|
type: 'block-menu-item',
|
|
27
90
|
key: "selection-extension-".concat(key),
|
|
@@ -30,27 +93,10 @@ export function registerBlockMenuItems(_ref) {
|
|
|
30
93
|
key: TRANSFORM_MENU_SECTION.key,
|
|
31
94
|
rank: TRANSFORM_MENU_SECTION_RANK[BLOCK_ACTIONS_FEATURED_EXTENSION_SLOT_MENU_ITEM.key]
|
|
32
95
|
},
|
|
33
|
-
component:
|
|
34
|
-
var editorView = editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current;
|
|
35
|
-
if (!editorView) {
|
|
36
|
-
return null;
|
|
37
|
-
}
|
|
38
|
-
return /*#__PURE__*/React.createElement(SelectionExtensionComponentContextProvider
|
|
39
|
-
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
40
|
-
, {
|
|
41
|
-
value: {
|
|
42
|
-
api: api,
|
|
43
|
-
editorView: editorView,
|
|
44
|
-
extensionKey: key,
|
|
45
|
-
extensionSource: source,
|
|
46
|
-
extensionLocation: 'block-menu'
|
|
47
|
-
}
|
|
48
|
-
}, /*#__PURE__*/React.createElement(SelectionExtensionMenuItems, {
|
|
49
|
-
getMenuItems: blockMenu.getMenuItems
|
|
50
|
-
}));
|
|
51
|
-
}
|
|
96
|
+
component: makeItemComponent
|
|
52
97
|
});
|
|
53
98
|
} else {
|
|
99
|
+
// Default: register under TRANSFORM_CREATE_MENU_SECTION
|
|
54
100
|
componentsToRegister.push({
|
|
55
101
|
type: 'block-menu-item',
|
|
56
102
|
key: "selection-extension-".concat(key),
|
|
@@ -62,29 +108,12 @@ export function registerBlockMenuItems(_ref) {
|
|
|
62
108
|
key: TRANSFORM_CREATE_MENU_SECTION.key,
|
|
63
109
|
rank: TRANSFORM_CREATE_MENU_SECTION_RANK[TRANSFORM_DEFAULT_EXTENSION_SLOT_MENU_ITEM.key]
|
|
64
110
|
},
|
|
65
|
-
component:
|
|
66
|
-
var editorView = editorViewRef === null || editorViewRef === void 0 ? void 0 : editorViewRef.current;
|
|
67
|
-
if (!editorView) {
|
|
68
|
-
return null;
|
|
69
|
-
}
|
|
70
|
-
return /*#__PURE__*/React.createElement(SelectionExtensionComponentContextProvider
|
|
71
|
-
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
72
|
-
, {
|
|
73
|
-
value: {
|
|
74
|
-
api: api,
|
|
75
|
-
editorView: editorView,
|
|
76
|
-
extensionKey: key,
|
|
77
|
-
extensionSource: source,
|
|
78
|
-
extensionLocation: 'block-menu'
|
|
79
|
-
}
|
|
80
|
-
}, /*#__PURE__*/React.createElement(SelectionExtensionMenuItems, {
|
|
81
|
-
getMenuItems: blockMenu.getMenuItems
|
|
82
|
-
}));
|
|
83
|
-
}
|
|
111
|
+
component: makeItemComponent
|
|
84
112
|
});
|
|
85
113
|
}
|
|
86
|
-
if (componentsToRegister.length > 0) {
|
|
87
|
-
api.blockMenu.actions.registerBlockMenuComponents(componentsToRegister);
|
|
88
|
-
}
|
|
89
114
|
});
|
|
115
|
+
if (componentsToRegister.length > 0) {
|
|
116
|
+
var _api$blockMenu;
|
|
117
|
+
api === null || api === void 0 || (_api$blockMenu = api.blockMenu) === null || _api$blockMenu === void 0 || _api$blockMenu.actions.registerBlockMenuComponents(componentsToRegister);
|
|
118
|
+
}
|
|
90
119
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type { SelectionExtensionPlugin } from '../selectionExtensionPluginType';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { selectionExtensionPlugin } from '../selectionExtensionPlugin';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type { BlockMenuExtensionConfiguration, ExtensionConfiguration, ExtensionMenuItemConfiguration, ExtensionToolbarItemConfiguration, InsertAdfAtEndOfDocResult, LinkInsertionOption, ReplaceWithAdfResult, SelectionExtension, SelectionExtensionComponentProps, SelectionExtensionPluginOptions, SelectionExtensionPluginState, SelectionExtensionSelectionInfo, ToolbarExtensionConfiguration, SelectionAdfResult, SelectionExtensionCallbackOptions, SelectionRange, } from '../types/index';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ComponentType, PropsWithChildren } from 'react';
|
|
2
2
|
import type { ADFEntity } from '@atlaskit/adf-utils/types';
|
|
3
|
-
import type { BlockMenuPlacement } from '@atlaskit/editor-common/block-menu';
|
|
3
|
+
import type { BLOCK_ACTIONS_FEATURED_EXTENSION_SECTION_KEYS, BlockMenuPlacement } from '@atlaskit/editor-common/block-menu';
|
|
4
4
|
import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
|
|
5
5
|
import type { ViewMode } from '@atlaskit/editor-plugin-editor-viewmode';
|
|
6
6
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
@@ -133,15 +133,28 @@ export type ToolbarExtensionConfiguration = {
|
|
|
133
133
|
getMenuItems?: GetMenuItemsFn;
|
|
134
134
|
getToolbarItem?: GetToolbarItemFn;
|
|
135
135
|
};
|
|
136
|
-
|
|
136
|
+
type BlockMenuFeaturedSectionKey = (typeof BLOCK_ACTIONS_FEATURED_EXTENSION_SECTION_KEYS)[number];
|
|
137
|
+
type BlockMenuExtensionConfigurationBase = {
|
|
137
138
|
getMenuItems: GetMenuItemsFn;
|
|
139
|
+
};
|
|
140
|
+
export type BlockMenuExtensionConfiguration = (BlockMenuExtensionConfigurationBase & {
|
|
141
|
+
/**
|
|
142
|
+
* Items are registered as their own top-level section with a separator above.
|
|
143
|
+
*/
|
|
144
|
+
placement: 'featured-section';
|
|
145
|
+
/**
|
|
146
|
+
* Must be included in BLOCK_ACTIONS_FEATURED_EXTENSION_SECTION_KEYS and ranked in MAIN_BLOCK_MENU_SECTION_RANK.
|
|
147
|
+
*/
|
|
148
|
+
sectionKey: BlockMenuFeaturedSectionKey;
|
|
149
|
+
}) | (BlockMenuExtensionConfigurationBase & {
|
|
138
150
|
/**
|
|
139
151
|
* Optional placement hint to control where the menu items appear in the block menu
|
|
140
152
|
* - 'default' (or undefined): Items appear in their normal nested location under create section
|
|
141
153
|
* - 'featured': Items are promoted to top-level alongside the "Turn into" menu
|
|
142
154
|
*/
|
|
143
|
-
placement?: BlockMenuPlacement
|
|
144
|
-
|
|
155
|
+
placement?: Exclude<BlockMenuPlacement, 'featured-section'>;
|
|
156
|
+
sectionKey?: never;
|
|
157
|
+
});
|
|
145
158
|
export type ExtensionToolbarItemConfiguration = {
|
|
146
159
|
icon: ComponentType<PropsWithChildren<{
|
|
147
160
|
label: string;
|
|
@@ -159,7 +172,7 @@ export type ExtensionToolbarItemConfiguration = {
|
|
|
159
172
|
* Common fields applicable to all extension menu items
|
|
160
173
|
*/
|
|
161
174
|
type ExtensionMenuItemBaseConfiguration = {
|
|
162
|
-
icon
|
|
175
|
+
icon?: ComponentType<PropsWithChildren<{
|
|
163
176
|
label: string;
|
|
164
177
|
size?: 'small' | 'medium';
|
|
165
178
|
}>>;
|
|
@@ -169,6 +182,12 @@ type ExtensionMenuItemBaseConfiguration = {
|
|
|
169
182
|
*/
|
|
170
183
|
key?: string;
|
|
171
184
|
label: string;
|
|
185
|
+
/**
|
|
186
|
+
* Optional lozenge to display next to the label in the menu
|
|
187
|
+
*/
|
|
188
|
+
lozenge?: {
|
|
189
|
+
label: string;
|
|
190
|
+
};
|
|
172
191
|
};
|
|
173
192
|
/**
|
|
174
193
|
* Fields for a dropdown item (i.e., an item that does not have further nested menu items)
|
|
@@ -180,12 +199,6 @@ type ExtensionDropdownItemFields = {
|
|
|
180
199
|
* Used for forge app extensions that need to render custom UI when selected from the block menu.
|
|
181
200
|
*/
|
|
182
201
|
contentComponent?: ComponentType<SelectionExtensionComponentProps>;
|
|
183
|
-
/**
|
|
184
|
-
* Optional lozenge to display next to the label in the menu
|
|
185
|
-
*/
|
|
186
|
-
lozenge?: {
|
|
187
|
-
label: string;
|
|
188
|
-
};
|
|
189
202
|
onClick?: () => void;
|
|
190
203
|
};
|
|
191
204
|
/**
|
|
@@ -9,5 +9,8 @@ type RegisterBlockMenuItemsOptions = {
|
|
|
9
9
|
};
|
|
10
10
|
extensionList: ExtensionConfiguration[];
|
|
11
11
|
};
|
|
12
|
+
/**
|
|
13
|
+
* Registers first-party selection extension menu items with the block menu plugin.
|
|
14
|
+
*/
|
|
12
15
|
export declare function registerBlockMenuItems({ extensionList, api, editorViewRef, }: RegisterBlockMenuItemsOptions): void;
|
|
13
16
|
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type { SelectionExtensionPlugin } from '../selectionExtensionPluginType';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { selectionExtensionPlugin } from '../selectionExtensionPlugin';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export type { BlockMenuExtensionConfiguration, ExtensionConfiguration, ExtensionMenuItemConfiguration, ExtensionToolbarItemConfiguration, InsertAdfAtEndOfDocResult, LinkInsertionOption, ReplaceWithAdfResult, SelectionExtension, SelectionExtensionComponentProps, SelectionExtensionPluginOptions, SelectionExtensionPluginState, SelectionExtensionSelectionInfo, ToolbarExtensionConfiguration, SelectionAdfResult, SelectionExtensionCallbackOptions, SelectionRange, } from '../types/index';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { ComponentType, PropsWithChildren } from 'react';
|
|
2
2
|
import type { ADFEntity } from '@atlaskit/adf-utils/types';
|
|
3
|
-
import type { BlockMenuPlacement } from '@atlaskit/editor-common/block-menu';
|
|
3
|
+
import type { BLOCK_ACTIONS_FEATURED_EXTENSION_SECTION_KEYS, BlockMenuPlacement } from '@atlaskit/editor-common/block-menu';
|
|
4
4
|
import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
|
|
5
5
|
import type { ViewMode } from '@atlaskit/editor-plugin-editor-viewmode';
|
|
6
6
|
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
@@ -133,15 +133,28 @@ export type ToolbarExtensionConfiguration = {
|
|
|
133
133
|
getMenuItems?: GetMenuItemsFn;
|
|
134
134
|
getToolbarItem?: GetToolbarItemFn;
|
|
135
135
|
};
|
|
136
|
-
|
|
136
|
+
type BlockMenuFeaturedSectionKey = (typeof BLOCK_ACTIONS_FEATURED_EXTENSION_SECTION_KEYS)[number];
|
|
137
|
+
type BlockMenuExtensionConfigurationBase = {
|
|
137
138
|
getMenuItems: GetMenuItemsFn;
|
|
139
|
+
};
|
|
140
|
+
export type BlockMenuExtensionConfiguration = (BlockMenuExtensionConfigurationBase & {
|
|
141
|
+
/**
|
|
142
|
+
* Items are registered as their own top-level section with a separator above.
|
|
143
|
+
*/
|
|
144
|
+
placement: 'featured-section';
|
|
145
|
+
/**
|
|
146
|
+
* Must be included in BLOCK_ACTIONS_FEATURED_EXTENSION_SECTION_KEYS and ranked in MAIN_BLOCK_MENU_SECTION_RANK.
|
|
147
|
+
*/
|
|
148
|
+
sectionKey: BlockMenuFeaturedSectionKey;
|
|
149
|
+
}) | (BlockMenuExtensionConfigurationBase & {
|
|
138
150
|
/**
|
|
139
151
|
* Optional placement hint to control where the menu items appear in the block menu
|
|
140
152
|
* - 'default' (or undefined): Items appear in their normal nested location under create section
|
|
141
153
|
* - 'featured': Items are promoted to top-level alongside the "Turn into" menu
|
|
142
154
|
*/
|
|
143
|
-
placement?: BlockMenuPlacement
|
|
144
|
-
|
|
155
|
+
placement?: Exclude<BlockMenuPlacement, 'featured-section'>;
|
|
156
|
+
sectionKey?: never;
|
|
157
|
+
});
|
|
145
158
|
export type ExtensionToolbarItemConfiguration = {
|
|
146
159
|
icon: ComponentType<PropsWithChildren<{
|
|
147
160
|
label: string;
|
|
@@ -159,7 +172,7 @@ export type ExtensionToolbarItemConfiguration = {
|
|
|
159
172
|
* Common fields applicable to all extension menu items
|
|
160
173
|
*/
|
|
161
174
|
type ExtensionMenuItemBaseConfiguration = {
|
|
162
|
-
icon
|
|
175
|
+
icon?: ComponentType<PropsWithChildren<{
|
|
163
176
|
label: string;
|
|
164
177
|
size?: 'small' | 'medium';
|
|
165
178
|
}>>;
|
|
@@ -169,6 +182,12 @@ type ExtensionMenuItemBaseConfiguration = {
|
|
|
169
182
|
*/
|
|
170
183
|
key?: string;
|
|
171
184
|
label: string;
|
|
185
|
+
/**
|
|
186
|
+
* Optional lozenge to display next to the label in the menu
|
|
187
|
+
*/
|
|
188
|
+
lozenge?: {
|
|
189
|
+
label: string;
|
|
190
|
+
};
|
|
172
191
|
};
|
|
173
192
|
/**
|
|
174
193
|
* Fields for a dropdown item (i.e., an item that does not have further nested menu items)
|
|
@@ -180,12 +199,6 @@ type ExtensionDropdownItemFields = {
|
|
|
180
199
|
* Used for forge app extensions that need to render custom UI when selected from the block menu.
|
|
181
200
|
*/
|
|
182
201
|
contentComponent?: ComponentType<SelectionExtensionComponentProps>;
|
|
183
|
-
/**
|
|
184
|
-
* Optional lozenge to display next to the label in the menu
|
|
185
|
-
*/
|
|
186
|
-
lozenge?: {
|
|
187
|
-
label: string;
|
|
188
|
-
};
|
|
189
202
|
onClick?: () => void;
|
|
190
203
|
};
|
|
191
204
|
/**
|
|
@@ -9,5 +9,8 @@ type RegisterBlockMenuItemsOptions = {
|
|
|
9
9
|
};
|
|
10
10
|
extensionList: ExtensionConfiguration[];
|
|
11
11
|
};
|
|
12
|
+
/**
|
|
13
|
+
* Registers first-party selection extension menu items with the block menu plugin.
|
|
14
|
+
*/
|
|
12
15
|
export declare function registerBlockMenuItems({ extensionList, api, editorViewRef, }: RegisterBlockMenuItemsOptions): void;
|
|
13
16
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-selection-extension",
|
|
3
|
-
"version": "13.
|
|
3
|
+
"version": "13.3.0",
|
|
4
4
|
"description": "editor-plugin-selection-extension plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -36,23 +36,23 @@
|
|
|
36
36
|
"@atlaskit/css": "^0.19.0",
|
|
37
37
|
"@atlaskit/editor-json-transformer": "^8.31.0",
|
|
38
38
|
"@atlaskit/editor-plugin-analytics": "^10.0.0",
|
|
39
|
-
"@atlaskit/editor-plugin-block-controls": "^11.
|
|
40
|
-
"@atlaskit/editor-plugin-block-menu": "^9.
|
|
41
|
-
"@atlaskit/editor-plugin-editor-viewmode": "^12.
|
|
42
|
-
"@atlaskit/editor-plugin-editor-viewmode-effects": "^10.
|
|
43
|
-
"@atlaskit/editor-plugin-primary-toolbar": "^11.
|
|
44
|
-
"@atlaskit/editor-plugin-selection-toolbar": "^11.
|
|
45
|
-
"@atlaskit/editor-plugin-toolbar": "^7.
|
|
46
|
-
"@atlaskit/editor-plugin-user-preferences": "^8.
|
|
39
|
+
"@atlaskit/editor-plugin-block-controls": "^11.4.0",
|
|
40
|
+
"@atlaskit/editor-plugin-block-menu": "^9.2.0",
|
|
41
|
+
"@atlaskit/editor-plugin-editor-viewmode": "^12.1.0",
|
|
42
|
+
"@atlaskit/editor-plugin-editor-viewmode-effects": "^10.1.0",
|
|
43
|
+
"@atlaskit/editor-plugin-primary-toolbar": "^11.1.0",
|
|
44
|
+
"@atlaskit/editor-plugin-selection-toolbar": "^11.3.0",
|
|
45
|
+
"@atlaskit/editor-plugin-toolbar": "^7.3.0",
|
|
46
|
+
"@atlaskit/editor-plugin-user-preferences": "^8.2.0",
|
|
47
47
|
"@atlaskit/editor-prosemirror": "^7.3.0",
|
|
48
|
-
"@atlaskit/editor-shared-styles": "^3.
|
|
49
|
-
"@atlaskit/editor-tables": "^2.
|
|
50
|
-
"@atlaskit/editor-toolbar": "^1.
|
|
48
|
+
"@atlaskit/editor-shared-styles": "^3.11.0",
|
|
49
|
+
"@atlaskit/editor-tables": "^2.10.0",
|
|
50
|
+
"@atlaskit/editor-toolbar": "^1.4.0",
|
|
51
51
|
"@atlaskit/icon": "^34.5.0",
|
|
52
52
|
"@atlaskit/lozenge": "^13.8.0",
|
|
53
53
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
54
54
|
"@atlaskit/primitives": "^19.0.0",
|
|
55
|
-
"@atlaskit/tmp-editor-statsig": "^80.
|
|
55
|
+
"@atlaskit/tmp-editor-statsig": "^80.3.0",
|
|
56
56
|
"@atlaskit/tokens": "^13.0.0",
|
|
57
57
|
"@babel/runtime": "^7.0.0",
|
|
58
58
|
"lodash": "^4.17.21",
|
|
@@ -117,6 +117,9 @@
|
|
|
117
117
|
"platform_editor_block_menu_v2_patch_5": {
|
|
118
118
|
"type": "boolean"
|
|
119
119
|
},
|
|
120
|
+
"platform_editor_block_menu_v2_patch_2": {
|
|
121
|
+
"type": "boolean"
|
|
122
|
+
},
|
|
120
123
|
"confluence_fronend_labels_categorization_migration": {
|
|
121
124
|
"type": "boolean"
|
|
122
125
|
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@atlaskit/editor-plugin-selection-extension/selection-extension-plugin",
|
|
3
|
+
"main": "../dist/cjs/entry-points/selection-extension-plugin.js",
|
|
4
|
+
"module": "../dist/esm/entry-points/selection-extension-plugin.js",
|
|
5
|
+
"module:es2019": "../dist/es2019/entry-points/selection-extension-plugin.js",
|
|
6
|
+
"sideEffects": [
|
|
7
|
+
"*.compiled.css"
|
|
8
|
+
],
|
|
9
|
+
"types": "../dist/types/entry-points/selection-extension-plugin.d.ts",
|
|
10
|
+
"typesVersions": {
|
|
11
|
+
">=4.5 <5.9": {
|
|
12
|
+
"*": [
|
|
13
|
+
"../dist/types-ts4.5/entry-points/selection-extension-plugin.d.ts"
|
|
14
|
+
]
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@atlaskit/editor-plugin-selection-extension/selection-extension-plugin-type",
|
|
3
|
+
"main": "../dist/cjs/entry-points/selection-extension-plugin-type.js",
|
|
4
|
+
"module": "../dist/esm/entry-points/selection-extension-plugin-type.js",
|
|
5
|
+
"module:es2019": "../dist/es2019/entry-points/selection-extension-plugin-type.js",
|
|
6
|
+
"sideEffects": [
|
|
7
|
+
"*.compiled.css"
|
|
8
|
+
],
|
|
9
|
+
"types": "../dist/types/entry-points/selection-extension-plugin-type.d.ts",
|
|
10
|
+
"typesVersions": {
|
|
11
|
+
">=4.5 <5.9": {
|
|
12
|
+
"*": [
|
|
13
|
+
"../dist/types-ts4.5/entry-points/selection-extension-plugin-type.d.ts"
|
|
14
|
+
]
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@atlaskit/editor-plugin-selection-extension/types",
|
|
3
|
+
"main": "../dist/cjs/entry-points/types.js",
|
|
4
|
+
"module": "../dist/esm/entry-points/types.js",
|
|
5
|
+
"module:es2019": "../dist/es2019/entry-points/types.js",
|
|
6
|
+
"sideEffects": [
|
|
7
|
+
"*.compiled.css"
|
|
8
|
+
],
|
|
9
|
+
"types": "../dist/types/entry-points/types.d.ts",
|
|
10
|
+
"typesVersions": {
|
|
11
|
+
">=4.5 <5.9": {
|
|
12
|
+
"*": [
|
|
13
|
+
"../dist/types-ts4.5/entry-points/types.d.ts"
|
|
14
|
+
]
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|