@atlaskit/editor-plugin-block-menu 5.0.20 → 5.0.22
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 +18 -0
- package/dist/cjs/ui/block-menu-renderer.js +3 -4
- package/dist/cjs/ui/block-menu.js +8 -7
- package/dist/cjs/ui/copy-block.js +2 -2
- package/dist/cjs/ui/copy-section.js +2 -2
- package/dist/cjs/ui/delete-button.js +4 -30
- package/dist/cjs/ui/format-menu-nested.js +1 -2
- package/dist/es2019/ui/block-menu-renderer.js +3 -4
- package/dist/es2019/ui/block-menu.js +8 -7
- package/dist/es2019/ui/copy-block.js +2 -2
- package/dist/es2019/ui/copy-section.js +2 -2
- package/dist/es2019/ui/delete-button.js +4 -30
- package/dist/es2019/ui/format-menu-nested.js +1 -2
- package/dist/esm/ui/block-menu-renderer.js +3 -4
- package/dist/esm/ui/block-menu.js +8 -7
- package/dist/esm/ui/copy-block.js +2 -2
- package/dist/esm/ui/copy-section.js +2 -2
- package/dist/esm/ui/delete-button.js +4 -30
- package/dist/esm/ui/format-menu-nested.js +1 -2
- package/package.json +2 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-menu
|
|
2
2
|
|
|
3
|
+
## 5.0.22
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`41a91a916c125`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/41a91a916c125) -
|
|
8
|
+
EDITOR-2846 Change platform_synced_block to use editorExperiment and add Jira experiment
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 5.0.21
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`7583860e8637f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7583860e8637f) -
|
|
16
|
+
EDITOR-3621 Clean up platform_editor_block_menu_keyboard_navigation feature gate
|
|
17
|
+
- [`e3fe76664f63b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e3fe76664f63b) -
|
|
18
|
+
Clean up platform_editor_block_menu_shouldfitcontainer
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
|
|
3
21
|
## 5.0.20
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
|
@@ -9,9 +9,8 @@ exports.BlockMenuRenderer = void 0;
|
|
|
9
9
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
|
|
12
|
-
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
13
12
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
14
|
-
var NoOp = function NoOp(
|
|
13
|
+
var NoOp = function NoOp() {
|
|
15
14
|
return null;
|
|
16
15
|
};
|
|
17
16
|
var isNonNestedMenuSection = function isNonNestedMenuSection(component) {
|
|
@@ -99,7 +98,7 @@ var BlockMenuRenderer = exports.BlockMenuRenderer = function BlockMenuRenderer(_
|
|
|
99
98
|
}, children);
|
|
100
99
|
}));
|
|
101
100
|
};
|
|
102
|
-
return
|
|
101
|
+
return /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
|
|
103
102
|
type: _uiMenu.ArrowKeyNavigationType.MENU
|
|
104
|
-
}, renderMenu())
|
|
103
|
+
}, renderMenu());
|
|
105
104
|
};
|
|
@@ -24,6 +24,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
|
24
24
|
var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
|
|
25
25
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
26
26
|
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
27
|
+
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
27
28
|
var _blockMenuProvider = require("./block-menu-provider");
|
|
28
29
|
var _blockMenuRenderer = require("./block-menu-renderer");
|
|
29
30
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
@@ -118,7 +119,7 @@ var BlockMenuContent = function BlockMenuContent(_ref3) {
|
|
|
118
119
|
return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
119
120
|
testId: "editor-block-menu",
|
|
120
121
|
ref: ref,
|
|
121
|
-
xcss: (0, _css.cx)(styles.base, (0,
|
|
122
|
+
xcss: (0, _css.cx)(styles.base, (0, _experiments.editorExperiment)('platform_synced_block', true) && styles.emptyMenuSectionStyles)
|
|
122
123
|
}, /*#__PURE__*/_react.default.createElement(_blockMenuRenderer.BlockMenuRenderer, {
|
|
123
124
|
components: blockMenuComponents || [],
|
|
124
125
|
fallbacks: {
|
|
@@ -139,7 +140,7 @@ var BlockMenuContent = function BlockMenuContent(_ref3) {
|
|
|
139
140
|
}));
|
|
140
141
|
};
|
|
141
142
|
var BlockMenu = function BlockMenu(_ref4) {
|
|
142
|
-
var _editorView$dom, _ref5
|
|
143
|
+
var _editorView$dom, _ref5;
|
|
143
144
|
var editorView = _ref4.editorView,
|
|
144
145
|
api = _ref4.api,
|
|
145
146
|
mountTo = _ref4.mountTo,
|
|
@@ -165,12 +166,12 @@ var BlockMenu = function BlockMenu(_ref4) {
|
|
|
165
166
|
var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(_styles.DRAG_HANDLE_SELECTOR);
|
|
166
167
|
var prevIsMenuOpenRef = (0, _react.useRef)(false);
|
|
167
168
|
var popupRef = (0, _react.useRef)(undefined);
|
|
168
|
-
var hasFocus = (
|
|
169
|
+
var hasFocus = (_ref5 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || document.activeElement === targetHandleRef || popupRef.current && (popupRef.current.contains(document.activeElement) || popupRef.current === document.activeElement)) !== null && _ref5 !== void 0 ? _ref5 : false;
|
|
169
170
|
var hasSelection = !!editorView && !editorView.state.selection.empty;
|
|
170
171
|
// hasSelection true, always show block menu
|
|
171
172
|
// hasSelection false, only show block menu when empty line experiment is enabled
|
|
172
173
|
var shouldShowBlockMenuForEmptyLine = hasSelection || !hasSelection && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_empty_line', 'isEnabled', true);
|
|
173
|
-
var selectedByShortcutOrDragHandle = !!isSelectedViaDragHandle || !!openedViaKeyboard
|
|
174
|
+
var selectedByShortcutOrDragHandle = !!isSelectedViaDragHandle || !!openedViaKeyboard;
|
|
174
175
|
|
|
175
176
|
// Use conditional hook based on feature flag
|
|
176
177
|
useConditionalBlockMenuEffect({
|
|
@@ -237,7 +238,7 @@ var BlockMenu = function BlockMenu(_ref4) {
|
|
|
237
238
|
,
|
|
238
239
|
handleClickOutside: closeMenu,
|
|
239
240
|
handleEscapeKeydown: closeMenu,
|
|
240
|
-
handleBackspaceDeleteKeydown:
|
|
241
|
+
handleBackspaceDeleteKeydown: handleBackspaceDeleteKeydown,
|
|
241
242
|
mountTo: mountTo,
|
|
242
243
|
boundariesElement: boundariesElement,
|
|
243
244
|
scrollableElement: scrollableElement,
|
|
@@ -248,7 +249,7 @@ var BlockMenu = function BlockMenu(_ref4) {
|
|
|
248
249
|
preventOverflow: true // disables forced horizontal placement when forcePlacement is on, so fitWidth controls flipping
|
|
249
250
|
,
|
|
250
251
|
stick: true,
|
|
251
|
-
focusTrap:
|
|
252
|
+
focusTrap: openedViaKeyboard ?
|
|
252
253
|
// Only enable focus trap when opened via keyboard to make sure the focus is on the first focusable menu item
|
|
253
254
|
{
|
|
254
255
|
initialFocus: undefined
|
|
@@ -256,7 +257,7 @@ var BlockMenu = function BlockMenu(_ref4) {
|
|
|
256
257
|
offset: [_styles.DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
|
|
257
258
|
}, /*#__PURE__*/_react.default.createElement(BlockMenuContent, {
|
|
258
259
|
api: api,
|
|
259
|
-
setRef:
|
|
260
|
+
setRef: setRef
|
|
260
261
|
})));
|
|
261
262
|
} else {
|
|
262
263
|
return null;
|
|
@@ -17,7 +17,7 @@ var _state = require("@atlaskit/editor-prosemirror/state");
|
|
|
17
17
|
var _utils = require("@atlaskit/editor-tables/utils");
|
|
18
18
|
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
19
19
|
var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
|
|
20
|
-
var
|
|
20
|
+
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
21
21
|
var _blockMenuProvider = require("./block-menu-provider");
|
|
22
22
|
var _consts = require("./consts");
|
|
23
23
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
@@ -112,7 +112,7 @@ var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
|
|
|
112
112
|
}
|
|
113
113
|
// source sync block (bodiedSyncBlock) is also a special case
|
|
114
114
|
// where we need to copy the content of the bodiedSyncBlock node
|
|
115
|
-
else if (selection.node.type.name === 'bodiedSyncBlock' && (0,
|
|
115
|
+
else if (selection.node.type.name === 'bodiedSyncBlock' && (0, _experiments.editorExperiment)('platform_synced_block', true)) {
|
|
116
116
|
var bodiedSyncBlockNode = selection.node;
|
|
117
117
|
var _domNode3 = toDOMFromFragment(bodiedSyncBlockNode.content, schema);
|
|
118
118
|
(0, _copyButton.copyDomNode)(_domNode3, bodiedSyncBlockNode.type, selection);
|
|
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.CopySection = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
10
|
-
var
|
|
10
|
+
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
11
11
|
var _checkIsFormatMenuHidden = require("./utils/checkIsFormatMenuHidden");
|
|
12
12
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
13
13
|
var CopySection = exports.CopySection = function CopySection(_ref) {
|
|
@@ -17,6 +17,6 @@ var CopySection = exports.CopySection = function CopySection(_ref) {
|
|
|
17
17
|
return (0, _checkIsFormatMenuHidden.checkIsFormatMenuHidden)(api);
|
|
18
18
|
}, [api]);
|
|
19
19
|
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItemSection, {
|
|
20
|
-
hasSeparator: (0,
|
|
20
|
+
hasSeparator: (0, _experiments.editorExperiment)('platform_synced_block', true) ? true : !isFormatMenuHidden()
|
|
21
21
|
}, children);
|
|
22
22
|
};
|
|
@@ -11,13 +11,10 @@ var _reactIntlNext = require("react-intl-next");
|
|
|
11
11
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
12
12
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
13
13
|
var _selection = require("@atlaskit/editor-common/selection");
|
|
14
|
-
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
15
|
-
var _utils = require("@atlaskit/editor-tables/utils");
|
|
16
14
|
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
17
15
|
var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
|
|
18
16
|
var _box = require("@atlaskit/primitives/box");
|
|
19
17
|
var _text = _interopRequireDefault(require("@atlaskit/primitives/text"));
|
|
20
|
-
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
21
18
|
var _consts = require("./consts");
|
|
22
19
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
23
20
|
var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
|
|
@@ -26,7 +23,7 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
|
|
|
26
23
|
var _useIntl = (0, _reactIntlNext.useIntl)(),
|
|
27
24
|
formatMessage = _useIntl.formatMessage;
|
|
28
25
|
var nodeTypes = Object.values((api === null || api === void 0 || (_api$core$sharedState = api.core.sharedState.currentState()) === null || _api$core$sharedState === void 0 || (_api$core$sharedState = _api$core$sharedState.schema) === null || _api$core$sharedState === void 0 ? void 0 : _api$core$sharedState.nodes) || {});
|
|
29
|
-
var onClick = function onClick(
|
|
26
|
+
var onClick = function onClick() {
|
|
30
27
|
api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
|
|
31
28
|
var _api$analytics, _api$blockControls;
|
|
32
29
|
var tr = _ref2.tr;
|
|
@@ -39,24 +36,7 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
|
|
|
39
36
|
eventType: _analytics.EVENT_TYPE.UI
|
|
40
37
|
};
|
|
41
38
|
api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent(payload)(tr);
|
|
42
|
-
|
|
43
|
-
(0, _selection.deleteSelectedRange)(tr);
|
|
44
|
-
} else {
|
|
45
|
-
var selection = tr.selection;
|
|
46
|
-
var from = selection.$from.pos;
|
|
47
|
-
var to = selection.$to.pos;
|
|
48
|
-
if (selection instanceof _state.TextSelection) {
|
|
49
|
-
from = from - 1;
|
|
50
|
-
to = to + 1;
|
|
51
|
-
} else if ((0, _utils.isTableSelected)(selection)) {
|
|
52
|
-
var table = (0, _utils.findTable)(selection);
|
|
53
|
-
if (table) {
|
|
54
|
-
from = table.pos;
|
|
55
|
-
to = table.pos + table.node.nodeSize;
|
|
56
|
-
}
|
|
57
|
-
}
|
|
58
|
-
tr.deleteRange(from, to);
|
|
59
|
-
}
|
|
39
|
+
(0, _selection.deleteSelectedRange)(tr);
|
|
60
40
|
api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.commands) === null || _api$blockControls === void 0 || _api$blockControls.toggleBlockMenu({
|
|
61
41
|
closeMenu: true
|
|
62
42
|
})({
|
|
@@ -90,13 +70,7 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
|
|
|
90
70
|
});
|
|
91
71
|
}, [api]);
|
|
92
72
|
(0, _react.useEffect)(function () {
|
|
93
|
-
if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true)) {
|
|
94
|
-
return;
|
|
95
|
-
}
|
|
96
73
|
return function () {
|
|
97
|
-
if (!(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true)) {
|
|
98
|
-
return;
|
|
99
|
-
}
|
|
100
74
|
// clean up hover decoration when unmounting
|
|
101
75
|
onRemoveHoverDecoration();
|
|
102
76
|
};
|
|
@@ -104,8 +78,8 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
|
|
|
104
78
|
return /*#__PURE__*/_react.default.createElement(_box.Box, {
|
|
105
79
|
onMouseEnter: onShowHoverDecoration,
|
|
106
80
|
onMouseLeave: onRemoveHoverDecoration,
|
|
107
|
-
onFocus:
|
|
108
|
-
onBlur:
|
|
81
|
+
onFocus: onShowHoverDecoration,
|
|
82
|
+
onBlur: onRemoveHoverDecoration
|
|
109
83
|
}, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
|
|
110
84
|
elemBefore: /*#__PURE__*/_react.default.createElement(_delete.default, {
|
|
111
85
|
color: "var(--ds-icon-danger, #C9372C)",
|
|
@@ -13,7 +13,6 @@ var _messages = require("@atlaskit/editor-common/messages");
|
|
|
13
13
|
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
14
14
|
var _changes = _interopRequireDefault(require("@atlaskit/icon/core/changes"));
|
|
15
15
|
var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
|
|
16
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
17
16
|
var _consts = require("./consts");
|
|
18
17
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
19
18
|
var FormatMenuComponent = exports.FormatMenuComponent = function FormatMenuComponent(_ref) {
|
|
@@ -48,6 +47,6 @@ var FormatMenuComponent = exports.FormatMenuComponent = function FormatMenuCompo
|
|
|
48
47
|
enableMaxHeight: true,
|
|
49
48
|
onClick: handleClick,
|
|
50
49
|
dropdownTestId: "editor-nested-turn-into-menu",
|
|
51
|
-
shouldFitContainer:
|
|
50
|
+
shouldFitContainer: true
|
|
52
51
|
}, children);
|
|
53
52
|
};
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { Fragment } from 'react';
|
|
2
2
|
import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
|
|
3
|
-
|
|
4
|
-
const NoOp = props => null;
|
|
3
|
+
const NoOp = () => null;
|
|
5
4
|
const isNonNestedMenuSection = component => {
|
|
6
5
|
return component.type === 'block-menu-section' && !('parent' in component);
|
|
7
6
|
};
|
|
@@ -78,7 +77,7 @@ export const BlockMenuRenderer = ({
|
|
|
78
77
|
}, children);
|
|
79
78
|
}));
|
|
80
79
|
};
|
|
81
|
-
return
|
|
80
|
+
return /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
|
|
82
81
|
type: ArrowKeyNavigationType.MENU
|
|
83
|
-
}, renderMenu())
|
|
82
|
+
}, renderMenu());
|
|
84
83
|
};
|
|
@@ -17,6 +17,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
17
17
|
import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
|
|
18
18
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
19
19
|
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
20
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
20
21
|
import { useBlockMenu } from './block-menu-provider';
|
|
21
22
|
import { BlockMenuRenderer } from './block-menu-renderer';
|
|
22
23
|
const styles = {
|
|
@@ -111,7 +112,7 @@ const BlockMenuContent = ({
|
|
|
111
112
|
return /*#__PURE__*/React.createElement(Box, {
|
|
112
113
|
testId: "editor-block-menu",
|
|
113
114
|
ref: ref,
|
|
114
|
-
xcss: cx(styles.base,
|
|
115
|
+
xcss: cx(styles.base, editorExperiment('platform_synced_block', true) && styles.emptyMenuSectionStyles)
|
|
115
116
|
}, /*#__PURE__*/React.createElement(BlockMenuRenderer, {
|
|
116
117
|
components: blockMenuComponents || [],
|
|
117
118
|
fallbacks: {
|
|
@@ -132,7 +133,7 @@ const BlockMenu = ({
|
|
|
132
133
|
boundariesElement,
|
|
133
134
|
scrollableElement
|
|
134
135
|
}) => {
|
|
135
|
-
var _editorView$dom, _ref
|
|
136
|
+
var _editorView$dom, _ref;
|
|
136
137
|
const {
|
|
137
138
|
menuTriggerBy,
|
|
138
139
|
isSelectedViaDragHandle,
|
|
@@ -155,12 +156,12 @@ const BlockMenu = ({
|
|
|
155
156
|
const targetHandleRef = editorView === null || editorView === void 0 ? void 0 : (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
|
|
156
157
|
const prevIsMenuOpenRef = useRef(false);
|
|
157
158
|
const popupRef = useRef(undefined);
|
|
158
|
-
const hasFocus =
|
|
159
|
+
const hasFocus = (_ref = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || document.activeElement === targetHandleRef || popupRef.current && (popupRef.current.contains(document.activeElement) || popupRef.current === document.activeElement)) !== null && _ref !== void 0 ? _ref : false;
|
|
159
160
|
const hasSelection = !!editorView && !editorView.state.selection.empty;
|
|
160
161
|
// hasSelection true, always show block menu
|
|
161
162
|
// hasSelection false, only show block menu when empty line experiment is enabled
|
|
162
163
|
const shouldShowBlockMenuForEmptyLine = hasSelection || !hasSelection && expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true);
|
|
163
|
-
const selectedByShortcutOrDragHandle = !!isSelectedViaDragHandle || !!openedViaKeyboard
|
|
164
|
+
const selectedByShortcutOrDragHandle = !!isSelectedViaDragHandle || !!openedViaKeyboard;
|
|
164
165
|
|
|
165
166
|
// Use conditional hook based on feature flag
|
|
166
167
|
useConditionalBlockMenuEffect({
|
|
@@ -229,7 +230,7 @@ const BlockMenu = ({
|
|
|
229
230
|
,
|
|
230
231
|
handleClickOutside: closeMenu,
|
|
231
232
|
handleEscapeKeydown: closeMenu,
|
|
232
|
-
handleBackspaceDeleteKeydown:
|
|
233
|
+
handleBackspaceDeleteKeydown: handleBackspaceDeleteKeydown,
|
|
233
234
|
mountTo: mountTo,
|
|
234
235
|
boundariesElement: boundariesElement,
|
|
235
236
|
scrollableElement: scrollableElement,
|
|
@@ -240,7 +241,7 @@ const BlockMenu = ({
|
|
|
240
241
|
preventOverflow: true // disables forced horizontal placement when forcePlacement is on, so fitWidth controls flipping
|
|
241
242
|
,
|
|
242
243
|
stick: true,
|
|
243
|
-
focusTrap:
|
|
244
|
+
focusTrap: openedViaKeyboard ?
|
|
244
245
|
// Only enable focus trap when opened via keyboard to make sure the focus is on the first focusable menu item
|
|
245
246
|
{
|
|
246
247
|
initialFocus: undefined
|
|
@@ -248,7 +249,7 @@ const BlockMenu = ({
|
|
|
248
249
|
offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
|
|
249
250
|
}, /*#__PURE__*/React.createElement(BlockMenuContent, {
|
|
250
251
|
api: api,
|
|
251
|
-
setRef:
|
|
252
|
+
setRef: setRef
|
|
252
253
|
})));
|
|
253
254
|
} else {
|
|
254
255
|
return null;
|
|
@@ -9,7 +9,7 @@ import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state
|
|
|
9
9
|
import { isTableSelected } from '@atlaskit/editor-tables/utils';
|
|
10
10
|
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
11
11
|
import CopyIcon from '@atlaskit/icon/core/copy';
|
|
12
|
-
import {
|
|
12
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
13
13
|
import { useBlockMenu } from './block-menu-provider';
|
|
14
14
|
import { BLOCK_MENU_ITEM_NAME } from './consts';
|
|
15
15
|
const toDOMFromFragment = (fragment, schema) => {
|
|
@@ -107,7 +107,7 @@ const CopyBlockMenuItem = ({
|
|
|
107
107
|
}
|
|
108
108
|
// source sync block (bodiedSyncBlock) is also a special case
|
|
109
109
|
// where we need to copy the content of the bodiedSyncBlock node
|
|
110
|
-
else if (selection.node.type.name === 'bodiedSyncBlock' &&
|
|
110
|
+
else if (selection.node.type.name === 'bodiedSyncBlock' && editorExperiment('platform_synced_block', true)) {
|
|
111
111
|
const bodiedSyncBlockNode = selection.node;
|
|
112
112
|
const domNode = toDOMFromFragment(bodiedSyncBlockNode.content, schema);
|
|
113
113
|
copyDomNode(domNode, bodiedSyncBlockNode.type, selection);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useCallback } from 'react';
|
|
2
2
|
import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
|
|
3
|
-
import {
|
|
3
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
4
4
|
import { checkIsFormatMenuHidden } from './utils/checkIsFormatMenuHidden';
|
|
5
5
|
export const CopySection = ({
|
|
6
6
|
api,
|
|
@@ -10,6 +10,6 @@ export const CopySection = ({
|
|
|
10
10
|
return checkIsFormatMenuHidden(api);
|
|
11
11
|
}, [api]);
|
|
12
12
|
return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
|
|
13
|
-
hasSeparator:
|
|
13
|
+
hasSeparator: editorExperiment('platform_synced_block', true) ? true : !isFormatMenuHidden()
|
|
14
14
|
}, children);
|
|
15
15
|
};
|
|
@@ -3,13 +3,10 @@ import { useIntl, injectIntl } from 'react-intl-next';
|
|
|
3
3
|
import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
4
4
|
import { blockMenuMessages } from '@atlaskit/editor-common/messages';
|
|
5
5
|
import { deleteSelectedRange } from '@atlaskit/editor-common/selection';
|
|
6
|
-
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
7
|
-
import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
|
|
8
6
|
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
9
7
|
import DeleteIcon from '@atlaskit/icon/core/delete';
|
|
10
8
|
import { Box } from '@atlaskit/primitives/box';
|
|
11
9
|
import Text from '@atlaskit/primitives/text';
|
|
12
|
-
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
13
10
|
import { BLOCK_MENU_ITEM_NAME } from './consts';
|
|
14
11
|
const DeleteDropdownItemContent = ({
|
|
15
12
|
api
|
|
@@ -19,7 +16,7 @@ const DeleteDropdownItemContent = ({
|
|
|
19
16
|
formatMessage
|
|
20
17
|
} = useIntl();
|
|
21
18
|
const nodeTypes = Object.values((api === null || api === void 0 ? void 0 : (_api$core$sharedState = api.core.sharedState.currentState()) === null || _api$core$sharedState === void 0 ? void 0 : (_api$core$sharedState2 = _api$core$sharedState.schema) === null || _api$core$sharedState2 === void 0 ? void 0 : _api$core$sharedState2.nodes) || {});
|
|
22
|
-
const onClick =
|
|
19
|
+
const onClick = () => {
|
|
23
20
|
api === null || api === void 0 ? void 0 : api.core.actions.execute(({
|
|
24
21
|
tr
|
|
25
22
|
}) => {
|
|
@@ -33,24 +30,7 @@ const DeleteDropdownItemContent = ({
|
|
|
33
30
|
eventType: EVENT_TYPE.UI
|
|
34
31
|
};
|
|
35
32
|
api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.attachAnalyticsEvent(payload)(tr);
|
|
36
|
-
|
|
37
|
-
deleteSelectedRange(tr);
|
|
38
|
-
} else {
|
|
39
|
-
const selection = tr.selection;
|
|
40
|
-
let from = selection.$from.pos;
|
|
41
|
-
let to = selection.$to.pos;
|
|
42
|
-
if (selection instanceof TextSelection) {
|
|
43
|
-
from = from - 1;
|
|
44
|
-
to = to + 1;
|
|
45
|
-
} else if (isTableSelected(selection)) {
|
|
46
|
-
const table = findTable(selection);
|
|
47
|
-
if (table) {
|
|
48
|
-
from = table.pos;
|
|
49
|
-
to = table.pos + table.node.nodeSize;
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
tr.deleteRange(from, to);
|
|
53
|
-
}
|
|
33
|
+
deleteSelectedRange(tr);
|
|
54
34
|
api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$co = _api$blockControls.commands) === null || _api$blockControls$co === void 0 ? void 0 : _api$blockControls$co.toggleBlockMenu({
|
|
55
35
|
closeMenu: true
|
|
56
36
|
})({
|
|
@@ -86,13 +66,7 @@ const DeleteDropdownItemContent = ({
|
|
|
86
66
|
});
|
|
87
67
|
}, [api]);
|
|
88
68
|
useEffect(() => {
|
|
89
|
-
if (!expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true)) {
|
|
90
|
-
return;
|
|
91
|
-
}
|
|
92
69
|
return () => {
|
|
93
|
-
if (!expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true)) {
|
|
94
|
-
return;
|
|
95
|
-
}
|
|
96
70
|
// clean up hover decoration when unmounting
|
|
97
71
|
onRemoveHoverDecoration();
|
|
98
72
|
};
|
|
@@ -100,8 +74,8 @@ const DeleteDropdownItemContent = ({
|
|
|
100
74
|
return /*#__PURE__*/React.createElement(Box, {
|
|
101
75
|
onMouseEnter: onShowHoverDecoration,
|
|
102
76
|
onMouseLeave: onRemoveHoverDecoration,
|
|
103
|
-
onFocus:
|
|
104
|
-
onBlur:
|
|
77
|
+
onFocus: onShowHoverDecoration,
|
|
78
|
+
onBlur: onRemoveHoverDecoration
|
|
105
79
|
}, /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
106
80
|
elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
|
|
107
81
|
color: "var(--ds-icon-danger, #C9372C)",
|
|
@@ -5,7 +5,6 @@ import { blockMenuMessages } from '@atlaskit/editor-common/messages';
|
|
|
5
5
|
import { ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
|
|
6
6
|
import ChangesIcon from '@atlaskit/icon/core/changes';
|
|
7
7
|
import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
|
|
8
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
8
|
import { BLOCK_MENU_ITEM_NAME } from './consts';
|
|
10
9
|
export const FormatMenuComponent = ({
|
|
11
10
|
api,
|
|
@@ -42,6 +41,6 @@ export const FormatMenuComponent = ({
|
|
|
42
41
|
enableMaxHeight: true,
|
|
43
42
|
onClick: handleClick,
|
|
44
43
|
dropdownTestId: "editor-nested-turn-into-menu",
|
|
45
|
-
shouldFitContainer:
|
|
44
|
+
shouldFitContainer: true
|
|
46
45
|
}, children);
|
|
47
46
|
};
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
2
|
import React, { Fragment } from 'react';
|
|
3
3
|
import { ArrowKeyNavigationProvider, ArrowKeyNavigationType } from '@atlaskit/editor-common/ui-menu';
|
|
4
|
-
|
|
5
|
-
var NoOp = function NoOp(props) {
|
|
4
|
+
var NoOp = function NoOp() {
|
|
6
5
|
return null;
|
|
7
6
|
};
|
|
8
7
|
var isNonNestedMenuSection = function isNonNestedMenuSection(component) {
|
|
@@ -90,7 +89,7 @@ export var BlockMenuRenderer = function BlockMenuRenderer(_ref) {
|
|
|
90
89
|
}, children);
|
|
91
90
|
}));
|
|
92
91
|
};
|
|
93
|
-
return
|
|
92
|
+
return /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
|
|
94
93
|
type: ArrowKeyNavigationType.MENU
|
|
95
|
-
}, renderMenu())
|
|
94
|
+
}, renderMenu());
|
|
96
95
|
};
|
|
@@ -17,6 +17,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
17
17
|
import { conditionalHooksFactory } from '@atlaskit/platform-feature-flags-react';
|
|
18
18
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
19
19
|
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
20
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
20
21
|
import { useBlockMenu } from './block-menu-provider';
|
|
21
22
|
import { BlockMenuRenderer } from './block-menu-renderer';
|
|
22
23
|
var styles = {
|
|
@@ -110,7 +111,7 @@ var BlockMenuContent = function BlockMenuContent(_ref3) {
|
|
|
110
111
|
return /*#__PURE__*/React.createElement(Box, {
|
|
111
112
|
testId: "editor-block-menu",
|
|
112
113
|
ref: ref,
|
|
113
|
-
xcss: cx(styles.base,
|
|
114
|
+
xcss: cx(styles.base, editorExperiment('platform_synced_block', true) && styles.emptyMenuSectionStyles)
|
|
114
115
|
}, /*#__PURE__*/React.createElement(BlockMenuRenderer, {
|
|
115
116
|
components: blockMenuComponents || [],
|
|
116
117
|
fallbacks: {
|
|
@@ -131,7 +132,7 @@ var BlockMenuContent = function BlockMenuContent(_ref3) {
|
|
|
131
132
|
}));
|
|
132
133
|
};
|
|
133
134
|
var BlockMenu = function BlockMenu(_ref4) {
|
|
134
|
-
var _editorView$dom, _ref5
|
|
135
|
+
var _editorView$dom, _ref5;
|
|
135
136
|
var editorView = _ref4.editorView,
|
|
136
137
|
api = _ref4.api,
|
|
137
138
|
mountTo = _ref4.mountTo,
|
|
@@ -157,12 +158,12 @@ var BlockMenu = function BlockMenu(_ref4) {
|
|
|
157
158
|
var targetHandleRef = editorView === null || editorView === void 0 || (_editorView$dom = editorView.dom) === null || _editorView$dom === void 0 ? void 0 : _editorView$dom.querySelector(DRAG_HANDLE_SELECTOR);
|
|
158
159
|
var prevIsMenuOpenRef = useRef(false);
|
|
159
160
|
var popupRef = useRef(undefined);
|
|
160
|
-
var hasFocus =
|
|
161
|
+
var hasFocus = (_ref5 = (editorView === null || editorView === void 0 ? void 0 : editorView.hasFocus()) || document.activeElement === targetHandleRef || popupRef.current && (popupRef.current.contains(document.activeElement) || popupRef.current === document.activeElement)) !== null && _ref5 !== void 0 ? _ref5 : false;
|
|
161
162
|
var hasSelection = !!editorView && !editorView.state.selection.empty;
|
|
162
163
|
// hasSelection true, always show block menu
|
|
163
164
|
// hasSelection false, only show block menu when empty line experiment is enabled
|
|
164
165
|
var shouldShowBlockMenuForEmptyLine = hasSelection || !hasSelection && expValEqualsNoExposure('platform_editor_block_menu_empty_line', 'isEnabled', true);
|
|
165
|
-
var selectedByShortcutOrDragHandle = !!isSelectedViaDragHandle || !!openedViaKeyboard
|
|
166
|
+
var selectedByShortcutOrDragHandle = !!isSelectedViaDragHandle || !!openedViaKeyboard;
|
|
166
167
|
|
|
167
168
|
// Use conditional hook based on feature flag
|
|
168
169
|
useConditionalBlockMenuEffect({
|
|
@@ -229,7 +230,7 @@ var BlockMenu = function BlockMenu(_ref4) {
|
|
|
229
230
|
,
|
|
230
231
|
handleClickOutside: closeMenu,
|
|
231
232
|
handleEscapeKeydown: closeMenu,
|
|
232
|
-
handleBackspaceDeleteKeydown:
|
|
233
|
+
handleBackspaceDeleteKeydown: handleBackspaceDeleteKeydown,
|
|
233
234
|
mountTo: mountTo,
|
|
234
235
|
boundariesElement: boundariesElement,
|
|
235
236
|
scrollableElement: scrollableElement,
|
|
@@ -240,7 +241,7 @@ var BlockMenu = function BlockMenu(_ref4) {
|
|
|
240
241
|
preventOverflow: true // disables forced horizontal placement when forcePlacement is on, so fitWidth controls flipping
|
|
241
242
|
,
|
|
242
243
|
stick: true,
|
|
243
|
-
focusTrap:
|
|
244
|
+
focusTrap: openedViaKeyboard ?
|
|
244
245
|
// Only enable focus trap when opened via keyboard to make sure the focus is on the first focusable menu item
|
|
245
246
|
{
|
|
246
247
|
initialFocus: undefined
|
|
@@ -248,7 +249,7 @@ var BlockMenu = function BlockMenu(_ref4) {
|
|
|
248
249
|
offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, 0]
|
|
249
250
|
}, /*#__PURE__*/React.createElement(BlockMenuContent, {
|
|
250
251
|
api: api,
|
|
251
|
-
setRef:
|
|
252
|
+
setRef: setRef
|
|
252
253
|
})));
|
|
253
254
|
} else {
|
|
254
255
|
return null;
|
|
@@ -12,7 +12,7 @@ import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state
|
|
|
12
12
|
import { isTableSelected } from '@atlaskit/editor-tables/utils';
|
|
13
13
|
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
14
14
|
import CopyIcon from '@atlaskit/icon/core/copy';
|
|
15
|
-
import {
|
|
15
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
16
16
|
import { useBlockMenu } from './block-menu-provider';
|
|
17
17
|
import { BLOCK_MENU_ITEM_NAME } from './consts';
|
|
18
18
|
var toDOMFromFragment = function toDOMFromFragment(fragment, schema) {
|
|
@@ -105,7 +105,7 @@ var CopyBlockMenuItem = function CopyBlockMenuItem(_ref) {
|
|
|
105
105
|
}
|
|
106
106
|
// source sync block (bodiedSyncBlock) is also a special case
|
|
107
107
|
// where we need to copy the content of the bodiedSyncBlock node
|
|
108
|
-
else if (selection.node.type.name === 'bodiedSyncBlock' &&
|
|
108
|
+
else if (selection.node.type.name === 'bodiedSyncBlock' && editorExperiment('platform_synced_block', true)) {
|
|
109
109
|
var bodiedSyncBlockNode = selection.node;
|
|
110
110
|
var _domNode3 = toDOMFromFragment(bodiedSyncBlockNode.content, schema);
|
|
111
111
|
copyDomNode(_domNode3, bodiedSyncBlockNode.type, selection);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useCallback } from 'react';
|
|
2
2
|
import { ToolbarDropdownItemSection } from '@atlaskit/editor-toolbar';
|
|
3
|
-
import {
|
|
3
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
4
4
|
import { checkIsFormatMenuHidden } from './utils/checkIsFormatMenuHidden';
|
|
5
5
|
export var CopySection = function CopySection(_ref) {
|
|
6
6
|
var api = _ref.api,
|
|
@@ -9,6 +9,6 @@ export var CopySection = function CopySection(_ref) {
|
|
|
9
9
|
return checkIsFormatMenuHidden(api);
|
|
10
10
|
}, [api]);
|
|
11
11
|
return /*#__PURE__*/React.createElement(ToolbarDropdownItemSection, {
|
|
12
|
-
hasSeparator:
|
|
12
|
+
hasSeparator: editorExperiment('platform_synced_block', true) ? true : !isFormatMenuHidden()
|
|
13
13
|
}, children);
|
|
14
14
|
};
|
|
@@ -3,13 +3,10 @@ import { useIntl, injectIntl } from 'react-intl-next';
|
|
|
3
3
|
import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
4
4
|
import { blockMenuMessages } from '@atlaskit/editor-common/messages';
|
|
5
5
|
import { deleteSelectedRange } from '@atlaskit/editor-common/selection';
|
|
6
|
-
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
7
|
-
import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
|
|
8
6
|
import { ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
9
7
|
import DeleteIcon from '@atlaskit/icon/core/delete';
|
|
10
8
|
import { Box } from '@atlaskit/primitives/box';
|
|
11
9
|
import Text from '@atlaskit/primitives/text';
|
|
12
|
-
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
13
10
|
import { BLOCK_MENU_ITEM_NAME } from './consts';
|
|
14
11
|
var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
|
|
15
12
|
var _api$core$sharedState;
|
|
@@ -17,7 +14,7 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
|
|
|
17
14
|
var _useIntl = useIntl(),
|
|
18
15
|
formatMessage = _useIntl.formatMessage;
|
|
19
16
|
var nodeTypes = Object.values((api === null || api === void 0 || (_api$core$sharedState = api.core.sharedState.currentState()) === null || _api$core$sharedState === void 0 || (_api$core$sharedState = _api$core$sharedState.schema) === null || _api$core$sharedState === void 0 ? void 0 : _api$core$sharedState.nodes) || {});
|
|
20
|
-
var onClick = function onClick(
|
|
17
|
+
var onClick = function onClick() {
|
|
21
18
|
api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
|
|
22
19
|
var _api$analytics, _api$blockControls;
|
|
23
20
|
var tr = _ref2.tr;
|
|
@@ -30,24 +27,7 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
|
|
|
30
27
|
eventType: EVENT_TYPE.UI
|
|
31
28
|
};
|
|
32
29
|
api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || (_api$analytics = _api$analytics.actions) === null || _api$analytics === void 0 || _api$analytics.attachAnalyticsEvent(payload)(tr);
|
|
33
|
-
|
|
34
|
-
deleteSelectedRange(tr);
|
|
35
|
-
} else {
|
|
36
|
-
var selection = tr.selection;
|
|
37
|
-
var from = selection.$from.pos;
|
|
38
|
-
var to = selection.$to.pos;
|
|
39
|
-
if (selection instanceof TextSelection) {
|
|
40
|
-
from = from - 1;
|
|
41
|
-
to = to + 1;
|
|
42
|
-
} else if (isTableSelected(selection)) {
|
|
43
|
-
var table = findTable(selection);
|
|
44
|
-
if (table) {
|
|
45
|
-
from = table.pos;
|
|
46
|
-
to = table.pos + table.node.nodeSize;
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
tr.deleteRange(from, to);
|
|
50
|
-
}
|
|
30
|
+
deleteSelectedRange(tr);
|
|
51
31
|
api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.commands) === null || _api$blockControls === void 0 || _api$blockControls.toggleBlockMenu({
|
|
52
32
|
closeMenu: true
|
|
53
33
|
})({
|
|
@@ -81,13 +61,7 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
|
|
|
81
61
|
});
|
|
82
62
|
}, [api]);
|
|
83
63
|
useEffect(function () {
|
|
84
|
-
if (!expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true)) {
|
|
85
|
-
return;
|
|
86
|
-
}
|
|
87
64
|
return function () {
|
|
88
|
-
if (!expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true)) {
|
|
89
|
-
return;
|
|
90
|
-
}
|
|
91
65
|
// clean up hover decoration when unmounting
|
|
92
66
|
onRemoveHoverDecoration();
|
|
93
67
|
};
|
|
@@ -95,8 +69,8 @@ var DeleteDropdownItemContent = function DeleteDropdownItemContent(_ref) {
|
|
|
95
69
|
return /*#__PURE__*/React.createElement(Box, {
|
|
96
70
|
onMouseEnter: onShowHoverDecoration,
|
|
97
71
|
onMouseLeave: onRemoveHoverDecoration,
|
|
98
|
-
onFocus:
|
|
99
|
-
onBlur:
|
|
72
|
+
onFocus: onShowHoverDecoration,
|
|
73
|
+
onBlur: onRemoveHoverDecoration
|
|
100
74
|
}, /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
101
75
|
elemBefore: /*#__PURE__*/React.createElement(DeleteIcon, {
|
|
102
76
|
color: "var(--ds-icon-danger, #C9372C)",
|
|
@@ -5,7 +5,6 @@ import { blockMenuMessages } from '@atlaskit/editor-common/messages';
|
|
|
5
5
|
import { ToolbarNestedDropdownMenu } from '@atlaskit/editor-toolbar';
|
|
6
6
|
import ChangesIcon from '@atlaskit/icon/core/changes';
|
|
7
7
|
import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
|
|
8
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
8
|
import { BLOCK_MENU_ITEM_NAME } from './consts';
|
|
10
9
|
export var FormatMenuComponent = function FormatMenuComponent(_ref) {
|
|
11
10
|
var api = _ref.api,
|
|
@@ -39,6 +38,6 @@ export var FormatMenuComponent = function FormatMenuComponent(_ref) {
|
|
|
39
38
|
enableMaxHeight: true,
|
|
40
39
|
onClick: handleClick,
|
|
41
40
|
dropdownTestId: "editor-nested-turn-into-menu",
|
|
42
|
-
shouldFitContainer:
|
|
41
|
+
shouldFitContainer: true
|
|
43
42
|
}, children);
|
|
44
43
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-menu",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.22",
|
|
4
4
|
"description": "BlockMenu plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
44
44
|
"@atlaskit/platform-feature-flags-react": "^0.4.0",
|
|
45
45
|
"@atlaskit/primitives": "^16.4.0",
|
|
46
|
-
"@atlaskit/tmp-editor-statsig": "^14.
|
|
46
|
+
"@atlaskit/tmp-editor-statsig": "^14.1.0",
|
|
47
47
|
"@atlaskit/tokens": "^8.4.0",
|
|
48
48
|
"@babel/runtime": "^7.0.0"
|
|
49
49
|
},
|
|
@@ -95,9 +95,6 @@
|
|
|
95
95
|
"platform_editor_block_menu_transform_nested_node": {
|
|
96
96
|
"type": "boolean"
|
|
97
97
|
},
|
|
98
|
-
"platform_editor_block_menu_shouldfitcontainer": {
|
|
99
|
-
"type": "boolean"
|
|
100
|
-
},
|
|
101
98
|
"platform_editor_toolbar_aifc_user_intent_fix": {
|
|
102
99
|
"type": "boolean"
|
|
103
100
|
}
|