@atlaskit/editor-plugin-insert-block 22.0.3 → 23.0.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 +15 -0
- package/dist/cjs/ui/ToolbarInsertBlock/block-insert-element-browser.js +13 -2
- package/dist/cjs/ui/registered-insert-menu/RegisteredInsertButton.js +11 -2
- package/dist/cjs/ui/registered-insert-menu/RegisteredInsertMenu.compiled.css +5 -5
- package/dist/cjs/ui/registered-insert-menu/RegisteredInsertMenu.js +17 -5
- package/dist/cjs/ui/registered-insert-menu/RegisteredInsertMenuContent.js +2 -0
- package/dist/cjs/ui/registered-insert-menu/RegisteredInsertMenuList.js +9 -3
- package/dist/es2019/ui/ToolbarInsertBlock/block-insert-element-browser.js +13 -2
- package/dist/es2019/ui/registered-insert-menu/RegisteredInsertButton.js +11 -2
- package/dist/es2019/ui/registered-insert-menu/RegisteredInsertMenu.compiled.css +5 -5
- package/dist/es2019/ui/registered-insert-menu/RegisteredInsertMenu.js +16 -5
- package/dist/es2019/ui/registered-insert-menu/RegisteredInsertMenuContent.js +2 -0
- package/dist/es2019/ui/registered-insert-menu/RegisteredInsertMenuList.js +10 -3
- package/dist/esm/ui/ToolbarInsertBlock/block-insert-element-browser.js +13 -2
- package/dist/esm/ui/registered-insert-menu/RegisteredInsertButton.js +11 -2
- package/dist/esm/ui/registered-insert-menu/RegisteredInsertMenu.compiled.css +5 -5
- package/dist/esm/ui/registered-insert-menu/RegisteredInsertMenu.js +17 -5
- package/dist/esm/ui/registered-insert-menu/RegisteredInsertMenuContent.js +2 -0
- package/dist/esm/ui/registered-insert-menu/RegisteredInsertMenuList.js +9 -3
- package/dist/types/ui/registered-insert-menu/RegisteredInsertMenu.d.ts +2 -1
- package/dist/types/ui/registered-insert-menu/RegisteredInsertMenuContent.d.ts +2 -1
- package/package.json +32 -32
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-insert-block
|
|
2
2
|
|
|
3
|
+
## 23.0.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 22.0.4
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`7306003a7565b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7306003a7565b) -
|
|
14
|
+
Fix modal dismissal, category spacing, measured list height, and viewport-aware menu placement
|
|
15
|
+
under platform_editor_slash_command.
|
|
16
|
+
- Updated dependencies
|
|
17
|
+
|
|
3
18
|
## 22.0.3
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.BlockInsertElementBrowser = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _useMenuPopupSizing = require("@atlaskit/editor-common/quick-insert/use-menu-popup-sizing");
|
|
9
10
|
var _ui = require("@atlaskit/editor-common/ui");
|
|
10
11
|
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
|
|
11
12
|
var _InsertMenu = _interopRequireWildcard(require("../ElementBrowser/InsertMenu"));
|
|
@@ -19,6 +20,15 @@ var FIT_HEIGHT_BUFFER = 100;
|
|
|
19
20
|
var BlockInsertElementBrowser = exports.BlockInsertElementBrowser = function BlockInsertElementBrowser(props) {
|
|
20
21
|
var togglePlusMenuVisibility = props.togglePlusMenuVisibility,
|
|
21
22
|
plusButtonRef = props.plusButtonRef;
|
|
23
|
+
var isRegisteredMenu = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command');
|
|
24
|
+
var menuHeight = (0, _useMenuPopupSizing.useMenuPopupSizing)({
|
|
25
|
+
target: plusButtonRef,
|
|
26
|
+
boundariesElement: props.popupsBoundariesElement,
|
|
27
|
+
scrollableElement: props.popupsScrollableElement,
|
|
28
|
+
maxHeight: 520,
|
|
29
|
+
offset: 3,
|
|
30
|
+
isOpen: props.open && isRegisteredMenu
|
|
31
|
+
});
|
|
22
32
|
var closeRegisteredMenu = (0, _react.useCallback)(function () {
|
|
23
33
|
return togglePlusMenuVisibility();
|
|
24
34
|
}, [togglePlusMenuVisibility]);
|
|
@@ -28,7 +38,7 @@ var BlockInsertElementBrowser = exports.BlockInsertElementBrowser = function Blo
|
|
|
28
38
|
}, [togglePlusMenuVisibility, plusButtonRef]);
|
|
29
39
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.open && /*#__PURE__*/_react.default.createElement(_ui.Popup, {
|
|
30
40
|
target: props.plusButtonRef,
|
|
31
|
-
fitHeight: _InsertMenu.DEFAULT_HEIGHT + FIT_HEIGHT_BUFFER,
|
|
41
|
+
fitHeight: isRegisteredMenu ? menuHeight : _InsertMenu.DEFAULT_HEIGHT + FIT_HEIGHT_BUFFER,
|
|
32
42
|
fitWidth: 350
|
|
33
43
|
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
34
44
|
,
|
|
@@ -38,8 +48,9 @@ var BlockInsertElementBrowser = exports.BlockInsertElementBrowser = function Blo
|
|
|
38
48
|
scrollableElement: props.popupsScrollableElement,
|
|
39
49
|
preventOverflow: true,
|
|
40
50
|
alignX: "right"
|
|
41
|
-
},
|
|
51
|
+
}, isRegisteredMenu ? /*#__PURE__*/_react.default.createElement(_RegisteredInsertMenuContent.RegisteredInsertMenuContent, {
|
|
42
52
|
api: props.pluginInjectionApi,
|
|
53
|
+
maxHeight: menuHeight,
|
|
43
54
|
editorView: props.editorView,
|
|
44
55
|
isOffline: Boolean(props.isEditorOffline),
|
|
45
56
|
onClose: closeRegisteredMenuAndRestoreFocus,
|
|
@@ -12,6 +12,7 @@ var _reactIntl = require("react-intl");
|
|
|
12
12
|
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
13
13
|
var _keymaps = require("@atlaskit/editor-common/keymaps");
|
|
14
14
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
15
|
+
var _useMenuPopupSizing = require("@atlaskit/editor-common/quick-insert/use-menu-popup-sizing");
|
|
15
16
|
var _toolbar = require("@atlaskit/editor-common/toolbar");
|
|
16
17
|
var _ui = require("@atlaskit/editor-common/ui");
|
|
17
18
|
var _connectivityPluginType = require("@atlaskit/editor-plugin-connectivity/connectivityPluginType");
|
|
@@ -23,7 +24,6 @@ var _uiContext = require("@atlaskit/editor-toolbar/ui-context");
|
|
|
23
24
|
var _RegisteredInsertMenuContent = require("./RegisteredInsertMenuContent");
|
|
24
25
|
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); }
|
|
25
26
|
var DEFAULT_MENU_MAX_HEIGHT = 520;
|
|
26
|
-
var FIT_HEIGHT_BUFFER = 100;
|
|
27
27
|
var POPUP_OFFSET = [0, 3];
|
|
28
28
|
/**
|
|
29
29
|
* The toolbar owns its popup lifecycle, but renders the same registered items
|
|
@@ -45,6 +45,14 @@ var RegisteredInsertButton = exports.RegisteredInsertButton = function Registere
|
|
|
45
45
|
isOpen = _useState2[0],
|
|
46
46
|
setIsOpen = _useState2[1];
|
|
47
47
|
var buttonRef = (0, _react.useRef)(null);
|
|
48
|
+
var menuHeight = (0, _useMenuPopupSizing.useMenuPopupSizing)({
|
|
49
|
+
target: buttonRef.current,
|
|
50
|
+
boundariesElement: popupsBoundariesElement,
|
|
51
|
+
scrollableElement: popupsScrollableElement,
|
|
52
|
+
maxHeight: DEFAULT_MENU_MAX_HEIGHT,
|
|
53
|
+
offset: POPUP_OFFSET[1],
|
|
54
|
+
isOpen: isOpen
|
|
55
|
+
});
|
|
48
56
|
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['connectivity', 'typeAhead'], function (states) {
|
|
49
57
|
var _states$connectivityS, _states$typeAheadStat;
|
|
50
58
|
return {
|
|
@@ -101,7 +109,7 @@ var RegisteredInsertButton = exports.RegisteredInsertButton = function Registere
|
|
|
101
109
|
})), isOpen && buttonRef.current && /*#__PURE__*/_react.default.createElement(_ui.Popup, {
|
|
102
110
|
alignX: "right",
|
|
103
111
|
boundariesElement: popupsBoundariesElement,
|
|
104
|
-
fitHeight:
|
|
112
|
+
fitHeight: menuHeight,
|
|
105
113
|
fitWidth: 350,
|
|
106
114
|
mountTo: popupsMountPoint,
|
|
107
115
|
offset: POPUP_OFFSET,
|
|
@@ -112,6 +120,7 @@ var RegisteredInsertButton = exports.RegisteredInsertButton = function Registere
|
|
|
112
120
|
zIndex: _constants.akEditorMenuZIndex
|
|
113
121
|
}, /*#__PURE__*/_react.default.createElement(_RegisteredInsertMenuContent.RegisteredInsertMenuContent, {
|
|
114
122
|
api: api,
|
|
123
|
+
maxHeight: menuHeight,
|
|
115
124
|
editorView: editorView,
|
|
116
125
|
isOffline: (0, _connectivityPluginType.isOfflineMode)(connectivityMode),
|
|
117
126
|
onClose: closeAndRestoreFocus,
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
.
|
|
2
|
-
._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
|
|
3
|
-
._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
|
|
1
|
+
._2rko1mok{border-radius:var(--ds-radius-large,8px)}
|
|
2
|
+
._18zrutpp{padding-inline:var(--ds-space-150,9pt)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
|
|
4
3
|
._18m915vq{overflow-y:hidden}
|
|
5
4
|
._1bsb1edt{width:350px}
|
|
6
5
|
._1e0c1txw{display:flex}
|
|
7
6
|
._1o9zidpf{flex-shrink:0}
|
|
7
|
+
._1q51utpp{padding-block-start:var(--ds-space-150,9pt)}
|
|
8
8
|
._1reo15vq{overflow-x:hidden}
|
|
9
9
|
._2lx21bp4{flex-direction:column}
|
|
10
|
-
.
|
|
11
|
-
.
|
|
10
|
+
._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
|
|
11
|
+
._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
|
|
@@ -28,16 +28,21 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
28
28
|
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
29
29
|
var DEFAULT_MENU_MAX_HEIGHT = 520;
|
|
30
30
|
var styles = {
|
|
31
|
-
menu: "
|
|
32
|
-
search: "
|
|
31
|
+
menu: "_2rko1mok _1reo15vq _18m915vq _bfhk1bhr _16qs130s _1e0c1txw _2lx21bp4 _1bsb1edt",
|
|
32
|
+
search: "_18zrutpp _1o9zidpf _1q51utpp _85i5u2gc"
|
|
33
33
|
};
|
|
34
34
|
var RegisteredInsertMenu = exports.RegisteredInsertMenu = function RegisteredInsertMenu(_ref) {
|
|
35
35
|
var components = _ref.components,
|
|
36
36
|
emptyStateHandler = _ref.emptyStateHandler,
|
|
37
37
|
editorView = _ref.editorView,
|
|
38
38
|
isOffline = _ref.isOffline,
|
|
39
|
+
_ref$maxHeight = _ref.maxHeight,
|
|
40
|
+
maxHeight = _ref$maxHeight === void 0 ? DEFAULT_MENU_MAX_HEIGHT : _ref$maxHeight,
|
|
39
41
|
onClose = _ref.onClose,
|
|
40
42
|
onSelect = _ref.onSelect;
|
|
43
|
+
var menuStyle = {
|
|
44
|
+
maxHeight: maxHeight
|
|
45
|
+
};
|
|
41
46
|
var _useIntl = (0, _reactIntl.useIntl)(),
|
|
42
47
|
formatMessage = _useIntl.formatMessage;
|
|
43
48
|
var listId = (0, _react.useId)();
|
|
@@ -62,6 +67,13 @@ var RegisteredInsertMenu = exports.RegisteredInsertMenu = function RegisteredIns
|
|
|
62
67
|
renderedItems = _useState8[0],
|
|
63
68
|
setRenderedItems = _useState8[1];
|
|
64
69
|
var searchRef = (0, _react.useRef)(null);
|
|
70
|
+
(0, _react.useLayoutEffect)(function () {
|
|
71
|
+
var _searchRef$current;
|
|
72
|
+
// Popup positions on the next frame; focusing must not scroll to its initial location.
|
|
73
|
+
(_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 || _searchRef$current.focus({
|
|
74
|
+
preventScroll: true
|
|
75
|
+
});
|
|
76
|
+
}, []);
|
|
65
77
|
var surfaceContext = (0, _react.useMemo)(function () {
|
|
66
78
|
return (0, _createSurfaceContext.createSurfaceContext)(_typeAheadSurfaceContext.TYPE_AHEAD_SURFACE_CONTEXT, {
|
|
67
79
|
menuOpenId: menuOpenId
|
|
@@ -160,14 +172,14 @@ var RegisteredInsertMenu = exports.RegisteredInsertMenu = function RegisteredIns
|
|
|
160
172
|
"data-keyboard-navigation-independent": "",
|
|
161
173
|
testId: "registered-insert-menu",
|
|
162
174
|
onKeyDownCapture: onKeyDown,
|
|
163
|
-
xcss: styles.menu
|
|
175
|
+
xcss: styles.menu,
|
|
176
|
+
style: menuStyle
|
|
164
177
|
}, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
165
178
|
xcss: styles.search
|
|
166
179
|
}, /*#__PURE__*/_react.default.createElement(_textField.default, {
|
|
167
180
|
"aria-activedescendant": isActiveItemMounted ? activeItemId : undefined,
|
|
168
181
|
"aria-controls": listId,
|
|
169
182
|
"aria-expanded": "true",
|
|
170
|
-
autoFocus: true,
|
|
171
183
|
placeholder: "Search",
|
|
172
184
|
ref: searchRef,
|
|
173
185
|
role: "combobox",
|
|
@@ -179,7 +191,7 @@ var RegisteredInsertMenu = exports.RegisteredInsertMenu = function RegisteredIns
|
|
|
179
191
|
isOffline: isOffline,
|
|
180
192
|
listId: listId,
|
|
181
193
|
listLabel: formatMessage(_messages.toolbarInsertBlockMessages.insertMenu),
|
|
182
|
-
maxHeight:
|
|
194
|
+
maxHeight: maxHeight,
|
|
183
195
|
menuOpenId: menuOpenId,
|
|
184
196
|
model: model,
|
|
185
197
|
onClose: onSelect,
|
|
@@ -25,6 +25,7 @@ var RegisteredInsertMenuContent = exports.RegisteredInsertMenuContent = function
|
|
|
25
25
|
var api = _ref2.api,
|
|
26
26
|
editorView = _ref2.editorView,
|
|
27
27
|
isOffline = _ref2.isOffline,
|
|
28
|
+
maxHeight = _ref2.maxHeight,
|
|
28
29
|
onClose = _ref2.onClose,
|
|
29
30
|
onDismiss = _ref2.onDismiss,
|
|
30
31
|
onSelect = _ref2.onSelect,
|
|
@@ -49,6 +50,7 @@ var RegisteredInsertMenuContent = exports.RegisteredInsertMenuContent = function
|
|
|
49
50
|
editorView: editorView,
|
|
50
51
|
emptyStateHandler: api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || (_api$quickInsert = _api$quickInsert.sharedState.currentState()) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.emptyStateHandler,
|
|
51
52
|
isOffline: isOffline,
|
|
53
|
+
maxHeight: maxHeight,
|
|
52
54
|
onClose: onClose,
|
|
53
55
|
onSelect: onSelect
|
|
54
56
|
}));
|
|
@@ -15,6 +15,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
|
|
|
15
15
|
var _react = _interopRequireWildcard(require("react"));
|
|
16
16
|
var _CellMeasurer = require("react-virtualized/dist/commonjs/CellMeasurer");
|
|
17
17
|
var _List = require("react-virtualized/dist/commonjs/List");
|
|
18
|
+
var _useMenuListHeight2 = require("@atlaskit/editor-common/quick-insert/use-menu-list-height");
|
|
18
19
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
19
20
|
var _RegisteredInsertMenuItem = require("./RegisteredInsertMenuItem");
|
|
20
21
|
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); }
|
|
@@ -22,7 +23,8 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
|
|
|
22
23
|
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
23
24
|
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
24
25
|
var ESTIMATED_ROW_HEIGHT = 56;
|
|
25
|
-
|
|
26
|
+
// 40px item + 8px block padding + 1px separator.
|
|
27
|
+
var MENU_FOOTER_HEIGHT = 49;
|
|
26
28
|
var MENU_SEARCH_HEIGHT = 64;
|
|
27
29
|
var LIST_WIDTH = 350;
|
|
28
30
|
var listAriaProps = {
|
|
@@ -101,6 +103,9 @@ var RegisteredInsertMenuList = exports.RegisteredInsertMenuList = function Regis
|
|
|
101
103
|
return "".concat(type, ":").concat(key);
|
|
102
104
|
}).join('\0');
|
|
103
105
|
}, [rows]);
|
|
106
|
+
var _useMenuListHeight = (0, _useMenuListHeight2.useMenuListHeight)(cache, rows.length, rowKeySignature),
|
|
107
|
+
measuredHeight = _useMenuListHeight.height,
|
|
108
|
+
updateHeight = _useMenuListHeight.updateHeight;
|
|
104
109
|
(0, _react.useLayoutEffect)(function () {
|
|
105
110
|
var _listRef$current, _listRef$current2;
|
|
106
111
|
cache.clearAll();
|
|
@@ -111,6 +116,7 @@ var RegisteredInsertMenuList = exports.RegisteredInsertMenuList = function Regis
|
|
|
111
116
|
var _indexes$, _indexes;
|
|
112
117
|
var overscanStartIndex = _ref3.overscanStartIndex,
|
|
113
118
|
overscanStopIndex = _ref3.overscanStopIndex;
|
|
119
|
+
updateHeight();
|
|
114
120
|
var indexes = (0, _toConsumableArray2.default)(itemIndexByRowIndex).filter(function (_ref4) {
|
|
115
121
|
var _ref5 = (0, _slicedToArray2.default)(_ref4, 1),
|
|
116
122
|
rowIndex = _ref5[0];
|
|
@@ -124,7 +130,7 @@ var RegisteredInsertMenuList = exports.RegisteredInsertMenuList = function Regis
|
|
|
124
130
|
startIndex: (_indexes$ = indexes[0]) !== null && _indexes$ !== void 0 ? _indexes$ : -1,
|
|
125
131
|
stopIndex: (_indexes = indexes[indexes.length - 1]) !== null && _indexes !== void 0 ? _indexes : -1
|
|
126
132
|
});
|
|
127
|
-
}, [itemIndexByRowIndex, onRenderedItemsChange]);
|
|
133
|
+
}, [itemIndexByRowIndex, onRenderedItemsChange, updateHeight]);
|
|
128
134
|
var renderRow = (0, _react.useCallback)(function (_ref8) {
|
|
129
135
|
var _registration$compone;
|
|
130
136
|
var index = _ref8.index,
|
|
@@ -213,7 +219,7 @@ var RegisteredInsertMenuList = exports.RegisteredInsertMenuList = function Regis
|
|
|
213
219
|
, (0, _extends2.default)({}, listAriaProps, {
|
|
214
220
|
tabIndex: null,
|
|
215
221
|
containerRole: "presentation",
|
|
216
|
-
height: Math.min(
|
|
222
|
+
height: Math.min(measuredHeight, listMaxHeight),
|
|
217
223
|
overscanRowCount: 3,
|
|
218
224
|
onRowsRendered: onRowsRendered,
|
|
219
225
|
ref: setListRef,
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { useCallback } from 'react';
|
|
2
|
+
import { useMenuPopupSizing } from '@atlaskit/editor-common/quick-insert/use-menu-popup-sizing';
|
|
2
3
|
import { Popup } from '@atlaskit/editor-common/ui';
|
|
3
4
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
4
5
|
import InsertMenu, { DEFAULT_HEIGHT } from '../ElementBrowser/InsertMenu';
|
|
@@ -13,6 +14,15 @@ export const BlockInsertElementBrowser = props => {
|
|
|
13
14
|
togglePlusMenuVisibility,
|
|
14
15
|
plusButtonRef
|
|
15
16
|
} = props;
|
|
17
|
+
const isRegisteredMenu = isExperimentEnabled('platform_editor_slash_command');
|
|
18
|
+
const menuHeight = useMenuPopupSizing({
|
|
19
|
+
target: plusButtonRef,
|
|
20
|
+
boundariesElement: props.popupsBoundariesElement,
|
|
21
|
+
scrollableElement: props.popupsScrollableElement,
|
|
22
|
+
maxHeight: 520,
|
|
23
|
+
offset: 3,
|
|
24
|
+
isOpen: props.open && isRegisteredMenu
|
|
25
|
+
});
|
|
16
26
|
const closeRegisteredMenu = useCallback(() => togglePlusMenuVisibility(), [togglePlusMenuVisibility]);
|
|
17
27
|
const closeRegisteredMenuAndRestoreFocus = useCallback(() => {
|
|
18
28
|
togglePlusMenuVisibility();
|
|
@@ -20,7 +30,7 @@ export const BlockInsertElementBrowser = props => {
|
|
|
20
30
|
}, [togglePlusMenuVisibility, plusButtonRef]);
|
|
21
31
|
return /*#__PURE__*/React.createElement(React.Fragment, null, props.open && /*#__PURE__*/React.createElement(Popup, {
|
|
22
32
|
target: props.plusButtonRef,
|
|
23
|
-
fitHeight: DEFAULT_HEIGHT + FIT_HEIGHT_BUFFER,
|
|
33
|
+
fitHeight: isRegisteredMenu ? menuHeight : DEFAULT_HEIGHT + FIT_HEIGHT_BUFFER,
|
|
24
34
|
fitWidth: 350
|
|
25
35
|
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
26
36
|
,
|
|
@@ -30,8 +40,9 @@ export const BlockInsertElementBrowser = props => {
|
|
|
30
40
|
scrollableElement: props.popupsScrollableElement,
|
|
31
41
|
preventOverflow: true,
|
|
32
42
|
alignX: "right"
|
|
33
|
-
},
|
|
43
|
+
}, isRegisteredMenu ? /*#__PURE__*/React.createElement(RegisteredInsertMenuContent, {
|
|
34
44
|
api: props.pluginInjectionApi,
|
|
45
|
+
maxHeight: menuHeight,
|
|
35
46
|
editorView: props.editorView,
|
|
36
47
|
isOffline: Boolean(props.isEditorOffline),
|
|
37
48
|
onClose: closeRegisteredMenuAndRestoreFocus,
|
|
@@ -3,6 +3,7 @@ import { useIntl } from 'react-intl';
|
|
|
3
3
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
4
4
|
import { getAriaKeyshortcuts, insertElements, ToolTipContent } from '@atlaskit/editor-common/keymaps';
|
|
5
5
|
import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
|
|
6
|
+
import { useMenuPopupSizing } from '@atlaskit/editor-common/quick-insert/use-menu-popup-sizing';
|
|
6
7
|
import { TOOLBAR_BUTTON_TEST_ID, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
|
|
7
8
|
import { Popup } from '@atlaskit/editor-common/ui';
|
|
8
9
|
import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity/connectivityPluginType';
|
|
@@ -13,7 +14,6 @@ import { ToolbarTooltip } from '@atlaskit/editor-toolbar/toolbar-tooltip';
|
|
|
13
14
|
import { useToolbarUI } from '@atlaskit/editor-toolbar/ui-context';
|
|
14
15
|
import { RegisteredInsertMenuContent } from './RegisteredInsertMenuContent';
|
|
15
16
|
const DEFAULT_MENU_MAX_HEIGHT = 520;
|
|
16
|
-
const FIT_HEIGHT_BUFFER = 100;
|
|
17
17
|
const POPUP_OFFSET = [0, 3];
|
|
18
18
|
/**
|
|
19
19
|
* The toolbar owns its popup lifecycle, but renders the same registered items
|
|
@@ -36,6 +36,14 @@ export const RegisteredInsertButton = ({
|
|
|
36
36
|
} = useToolbarUI();
|
|
37
37
|
const [isOpen, setIsOpen] = useState(false);
|
|
38
38
|
const buttonRef = useRef(null);
|
|
39
|
+
const menuHeight = useMenuPopupSizing({
|
|
40
|
+
target: buttonRef.current,
|
|
41
|
+
boundariesElement: popupsBoundariesElement,
|
|
42
|
+
scrollableElement: popupsScrollableElement,
|
|
43
|
+
maxHeight: DEFAULT_MENU_MAX_HEIGHT,
|
|
44
|
+
offset: POPUP_OFFSET[1],
|
|
45
|
+
isOpen
|
|
46
|
+
});
|
|
39
47
|
const {
|
|
40
48
|
connectivityMode,
|
|
41
49
|
isAllowed
|
|
@@ -86,7 +94,7 @@ export const RegisteredInsertButton = ({
|
|
|
86
94
|
})), isOpen && buttonRef.current && /*#__PURE__*/React.createElement(Popup, {
|
|
87
95
|
alignX: "right",
|
|
88
96
|
boundariesElement: popupsBoundariesElement,
|
|
89
|
-
fitHeight:
|
|
97
|
+
fitHeight: menuHeight,
|
|
90
98
|
fitWidth: 350,
|
|
91
99
|
mountTo: popupsMountPoint,
|
|
92
100
|
offset: POPUP_OFFSET,
|
|
@@ -97,6 +105,7 @@ export const RegisteredInsertButton = ({
|
|
|
97
105
|
zIndex: akEditorMenuZIndex
|
|
98
106
|
}, /*#__PURE__*/React.createElement(RegisteredInsertMenuContent, {
|
|
99
107
|
api: api,
|
|
108
|
+
maxHeight: menuHeight,
|
|
100
109
|
editorView: editorView,
|
|
101
110
|
isOffline: isOfflineMode(connectivityMode),
|
|
102
111
|
onClose: closeAndRestoreFocus,
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
.
|
|
2
|
-
._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
|
|
3
|
-
._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
|
|
1
|
+
._2rko1mok{border-radius:var(--ds-radius-large,8px)}
|
|
2
|
+
._18zrutpp{padding-inline:var(--ds-space-150,9pt)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
|
|
4
3
|
._18m915vq{overflow-y:hidden}
|
|
5
4
|
._1bsb1edt{width:350px}
|
|
6
5
|
._1e0c1txw{display:flex}
|
|
7
6
|
._1o9zidpf{flex-shrink:0}
|
|
7
|
+
._1q51utpp{padding-block-start:var(--ds-space-150,9pt)}
|
|
8
8
|
._1reo15vq{overflow-x:hidden}
|
|
9
9
|
._2lx21bp4{flex-direction:column}
|
|
10
|
-
.
|
|
11
|
-
.
|
|
10
|
+
._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
|
|
11
|
+
._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
|
|
@@ -15,17 +15,21 @@ import Textfield from '@atlaskit/textfield/text-field';
|
|
|
15
15
|
import { RegisteredInsertMenuList } from './RegisteredInsertMenuList';
|
|
16
16
|
const DEFAULT_MENU_MAX_HEIGHT = 520;
|
|
17
17
|
const styles = {
|
|
18
|
-
menu: "
|
|
19
|
-
search: "
|
|
18
|
+
menu: "_2rko1mok _1reo15vq _18m915vq _bfhk1bhr _16qs130s _1e0c1txw _2lx21bp4 _1bsb1edt",
|
|
19
|
+
search: "_18zrutpp _1o9zidpf _1q51utpp _85i5u2gc"
|
|
20
20
|
};
|
|
21
21
|
export const RegisteredInsertMenu = ({
|
|
22
22
|
components,
|
|
23
23
|
emptyStateHandler,
|
|
24
24
|
editorView,
|
|
25
25
|
isOffline,
|
|
26
|
+
maxHeight = DEFAULT_MENU_MAX_HEIGHT,
|
|
26
27
|
onClose,
|
|
27
28
|
onSelect
|
|
28
29
|
}) => {
|
|
30
|
+
const menuStyle = {
|
|
31
|
+
maxHeight
|
|
32
|
+
};
|
|
29
33
|
const {
|
|
30
34
|
formatMessage
|
|
31
35
|
} = useIntl();
|
|
@@ -38,6 +42,13 @@ export const RegisteredInsertMenu = ({
|
|
|
38
42
|
stopIndex: -1
|
|
39
43
|
});
|
|
40
44
|
const searchRef = useRef(null);
|
|
45
|
+
useLayoutEffect(() => {
|
|
46
|
+
var _searchRef$current;
|
|
47
|
+
// Popup positions on the next frame; focusing must not scroll to its initial location.
|
|
48
|
+
(_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 ? void 0 : _searchRef$current.focus({
|
|
49
|
+
preventScroll: true
|
|
50
|
+
});
|
|
51
|
+
}, []);
|
|
41
52
|
const surfaceContext = useMemo(() => createSurfaceContext(TYPE_AHEAD_SURFACE_CONTEXT, {
|
|
42
53
|
menuOpenId
|
|
43
54
|
}), [menuOpenId]);
|
|
@@ -114,14 +125,14 @@ export const RegisteredInsertMenu = ({
|
|
|
114
125
|
"data-keyboard-navigation-independent": "",
|
|
115
126
|
testId: "registered-insert-menu",
|
|
116
127
|
onKeyDownCapture: onKeyDown,
|
|
117
|
-
xcss: styles.menu
|
|
128
|
+
xcss: styles.menu,
|
|
129
|
+
style: menuStyle
|
|
118
130
|
}, /*#__PURE__*/React.createElement(Box, {
|
|
119
131
|
xcss: styles.search
|
|
120
132
|
}, /*#__PURE__*/React.createElement(Textfield, {
|
|
121
133
|
"aria-activedescendant": isActiveItemMounted ? activeItemId : undefined,
|
|
122
134
|
"aria-controls": listId,
|
|
123
135
|
"aria-expanded": "true",
|
|
124
|
-
autoFocus: true,
|
|
125
136
|
placeholder: "Search",
|
|
126
137
|
ref: searchRef,
|
|
127
138
|
role: "combobox",
|
|
@@ -133,7 +144,7 @@ export const RegisteredInsertMenu = ({
|
|
|
133
144
|
isOffline: isOffline,
|
|
134
145
|
listId: listId,
|
|
135
146
|
listLabel: formatMessage(messages.insertMenu),
|
|
136
|
-
maxHeight:
|
|
147
|
+
maxHeight: maxHeight,
|
|
137
148
|
menuOpenId: menuOpenId,
|
|
138
149
|
model: model,
|
|
139
150
|
onClose: onSelect,
|
|
@@ -15,6 +15,7 @@ export const RegisteredInsertMenuContent = ({
|
|
|
15
15
|
api,
|
|
16
16
|
editorView,
|
|
17
17
|
isOffline,
|
|
18
|
+
maxHeight,
|
|
18
19
|
onClose,
|
|
19
20
|
onDismiss,
|
|
20
21
|
onSelect,
|
|
@@ -39,6 +40,7 @@ export const RegisteredInsertMenuContent = ({
|
|
|
39
40
|
editorView: editorView,
|
|
40
41
|
emptyStateHandler: api === null || api === void 0 ? void 0 : (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : (_api$quickInsert$shar = _api$quickInsert.sharedState.currentState()) === null || _api$quickInsert$shar === void 0 ? void 0 : _api$quickInsert$shar.emptyStateHandler,
|
|
41
42
|
isOffline: isOffline,
|
|
43
|
+
maxHeight: maxHeight,
|
|
42
44
|
onClose: onClose,
|
|
43
45
|
onSelect: onSelect
|
|
44
46
|
}));
|
|
@@ -5,10 +5,12 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
5
5
|
import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
|
|
6
6
|
import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
|
|
7
7
|
import { List } from 'react-virtualized/dist/commonjs/List';
|
|
8
|
+
import { useMenuListHeight } from '@atlaskit/editor-common/quick-insert/use-menu-list-height';
|
|
8
9
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
9
10
|
import { RegisteredInsertMenuItem } from './RegisteredInsertMenuItem';
|
|
10
11
|
const ESTIMATED_ROW_HEIGHT = 56;
|
|
11
|
-
|
|
12
|
+
// 40px item + 8px block padding + 1px separator.
|
|
13
|
+
const MENU_FOOTER_HEIGHT = 49;
|
|
12
14
|
const MENU_SEARCH_HEIGHT = 64;
|
|
13
15
|
const LIST_WIDTH = 350;
|
|
14
16
|
const listAriaProps = {
|
|
@@ -72,6 +74,10 @@ export const RegisteredInsertMenuList = ({
|
|
|
72
74
|
key,
|
|
73
75
|
type
|
|
74
76
|
}) => `${type}:${key}`).join('\0'), [rows]);
|
|
77
|
+
const {
|
|
78
|
+
height: measuredHeight,
|
|
79
|
+
updateHeight
|
|
80
|
+
} = useMenuListHeight(cache, rows.length, rowKeySignature);
|
|
75
81
|
useLayoutEffect(() => {
|
|
76
82
|
var _listRef$current, _listRef$current2;
|
|
77
83
|
cache.clearAll();
|
|
@@ -83,12 +89,13 @@ export const RegisteredInsertMenuList = ({
|
|
|
83
89
|
overscanStopIndex
|
|
84
90
|
}) => {
|
|
85
91
|
var _indexes$, _indexes;
|
|
92
|
+
updateHeight();
|
|
86
93
|
const indexes = [...itemIndexByRowIndex].filter(([rowIndex]) => rowIndex >= overscanStartIndex && rowIndex <= overscanStopIndex).map(([, itemIndex]) => itemIndex);
|
|
87
94
|
onRenderedItemsChange({
|
|
88
95
|
startIndex: (_indexes$ = indexes[0]) !== null && _indexes$ !== void 0 ? _indexes$ : -1,
|
|
89
96
|
stopIndex: (_indexes = indexes[indexes.length - 1]) !== null && _indexes !== void 0 ? _indexes : -1
|
|
90
97
|
});
|
|
91
|
-
}, [itemIndexByRowIndex, onRenderedItemsChange]);
|
|
98
|
+
}, [itemIndexByRowIndex, onRenderedItemsChange, updateHeight]);
|
|
92
99
|
const renderRow = useCallback(({
|
|
93
100
|
index,
|
|
94
101
|
key,
|
|
@@ -169,7 +176,7 @@ export const RegisteredInsertMenuList = ({
|
|
|
169
176
|
, _extends({}, listAriaProps, {
|
|
170
177
|
tabIndex: null,
|
|
171
178
|
containerRole: "presentation",
|
|
172
|
-
height: Math.min(
|
|
179
|
+
height: Math.min(measuredHeight, listMaxHeight),
|
|
173
180
|
overscanRowCount: 3,
|
|
174
181
|
onRowsRendered: onRowsRendered,
|
|
175
182
|
ref: setListRef,
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { useCallback } from 'react';
|
|
2
|
+
import { useMenuPopupSizing } from '@atlaskit/editor-common/quick-insert/use-menu-popup-sizing';
|
|
2
3
|
import { Popup } from '@atlaskit/editor-common/ui';
|
|
3
4
|
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
4
5
|
import InsertMenu, { DEFAULT_HEIGHT } from '../ElementBrowser/InsertMenu';
|
|
@@ -11,6 +12,15 @@ var FIT_HEIGHT_BUFFER = 100;
|
|
|
11
12
|
export var BlockInsertElementBrowser = function BlockInsertElementBrowser(props) {
|
|
12
13
|
var togglePlusMenuVisibility = props.togglePlusMenuVisibility,
|
|
13
14
|
plusButtonRef = props.plusButtonRef;
|
|
15
|
+
var isRegisteredMenu = isExperimentEnabled('platform_editor_slash_command');
|
|
16
|
+
var menuHeight = useMenuPopupSizing({
|
|
17
|
+
target: plusButtonRef,
|
|
18
|
+
boundariesElement: props.popupsBoundariesElement,
|
|
19
|
+
scrollableElement: props.popupsScrollableElement,
|
|
20
|
+
maxHeight: 520,
|
|
21
|
+
offset: 3,
|
|
22
|
+
isOpen: props.open && isRegisteredMenu
|
|
23
|
+
});
|
|
14
24
|
var closeRegisteredMenu = useCallback(function () {
|
|
15
25
|
return togglePlusMenuVisibility();
|
|
16
26
|
}, [togglePlusMenuVisibility]);
|
|
@@ -20,7 +30,7 @@ export var BlockInsertElementBrowser = function BlockInsertElementBrowser(props)
|
|
|
20
30
|
}, [togglePlusMenuVisibility, plusButtonRef]);
|
|
21
31
|
return /*#__PURE__*/React.createElement(React.Fragment, null, props.open && /*#__PURE__*/React.createElement(Popup, {
|
|
22
32
|
target: props.plusButtonRef,
|
|
23
|
-
fitHeight: DEFAULT_HEIGHT + FIT_HEIGHT_BUFFER,
|
|
33
|
+
fitHeight: isRegisteredMenu ? menuHeight : DEFAULT_HEIGHT + FIT_HEIGHT_BUFFER,
|
|
24
34
|
fitWidth: 350
|
|
25
35
|
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
26
36
|
,
|
|
@@ -30,8 +40,9 @@ export var BlockInsertElementBrowser = function BlockInsertElementBrowser(props)
|
|
|
30
40
|
scrollableElement: props.popupsScrollableElement,
|
|
31
41
|
preventOverflow: true,
|
|
32
42
|
alignX: "right"
|
|
33
|
-
},
|
|
43
|
+
}, isRegisteredMenu ? /*#__PURE__*/React.createElement(RegisteredInsertMenuContent, {
|
|
34
44
|
api: props.pluginInjectionApi,
|
|
45
|
+
maxHeight: menuHeight,
|
|
35
46
|
editorView: props.editorView,
|
|
36
47
|
isOffline: Boolean(props.isEditorOffline),
|
|
37
48
|
onClose: closeRegisteredMenuAndRestoreFocus,
|
|
@@ -4,6 +4,7 @@ import { useIntl } from 'react-intl';
|
|
|
4
4
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
5
5
|
import { getAriaKeyshortcuts, insertElements, ToolTipContent } from '@atlaskit/editor-common/keymaps';
|
|
6
6
|
import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
|
|
7
|
+
import { useMenuPopupSizing } from '@atlaskit/editor-common/quick-insert/use-menu-popup-sizing';
|
|
7
8
|
import { TOOLBAR_BUTTON_TEST_ID, useEditorToolbar } from '@atlaskit/editor-common/toolbar';
|
|
8
9
|
import { Popup } from '@atlaskit/editor-common/ui';
|
|
9
10
|
import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity/connectivityPluginType';
|
|
@@ -14,7 +15,6 @@ import { ToolbarTooltip } from '@atlaskit/editor-toolbar/toolbar-tooltip';
|
|
|
14
15
|
import { useToolbarUI } from '@atlaskit/editor-toolbar/ui-context';
|
|
15
16
|
import { RegisteredInsertMenuContent } from './RegisteredInsertMenuContent';
|
|
16
17
|
var DEFAULT_MENU_MAX_HEIGHT = 520;
|
|
17
|
-
var FIT_HEIGHT_BUFFER = 100;
|
|
18
18
|
var POPUP_OFFSET = [0, 3];
|
|
19
19
|
/**
|
|
20
20
|
* The toolbar owns its popup lifecycle, but renders the same registered items
|
|
@@ -36,6 +36,14 @@ export var RegisteredInsertButton = function RegisteredInsertButton(_ref) {
|
|
|
36
36
|
isOpen = _useState2[0],
|
|
37
37
|
setIsOpen = _useState2[1];
|
|
38
38
|
var buttonRef = useRef(null);
|
|
39
|
+
var menuHeight = useMenuPopupSizing({
|
|
40
|
+
target: buttonRef.current,
|
|
41
|
+
boundariesElement: popupsBoundariesElement,
|
|
42
|
+
scrollableElement: popupsScrollableElement,
|
|
43
|
+
maxHeight: DEFAULT_MENU_MAX_HEIGHT,
|
|
44
|
+
offset: POPUP_OFFSET[1],
|
|
45
|
+
isOpen: isOpen
|
|
46
|
+
});
|
|
39
47
|
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['connectivity', 'typeAhead'], function (states) {
|
|
40
48
|
var _states$connectivityS, _states$typeAheadStat;
|
|
41
49
|
return {
|
|
@@ -92,7 +100,7 @@ export var RegisteredInsertButton = function RegisteredInsertButton(_ref) {
|
|
|
92
100
|
})), isOpen && buttonRef.current && /*#__PURE__*/React.createElement(Popup, {
|
|
93
101
|
alignX: "right",
|
|
94
102
|
boundariesElement: popupsBoundariesElement,
|
|
95
|
-
fitHeight:
|
|
103
|
+
fitHeight: menuHeight,
|
|
96
104
|
fitWidth: 350,
|
|
97
105
|
mountTo: popupsMountPoint,
|
|
98
106
|
offset: POPUP_OFFSET,
|
|
@@ -103,6 +111,7 @@ export var RegisteredInsertButton = function RegisteredInsertButton(_ref) {
|
|
|
103
111
|
zIndex: akEditorMenuZIndex
|
|
104
112
|
}, /*#__PURE__*/React.createElement(RegisteredInsertMenuContent, {
|
|
105
113
|
api: api,
|
|
114
|
+
maxHeight: menuHeight,
|
|
106
115
|
editorView: editorView,
|
|
107
116
|
isOffline: isOfflineMode(connectivityMode),
|
|
108
117
|
onClose: closeAndRestoreFocus,
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
.
|
|
2
|
-
._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
|
|
3
|
-
._1rjcutpp{padding-block:var(--ds-space-150,9pt)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
|
|
1
|
+
._2rko1mok{border-radius:var(--ds-radius-large,8px)}
|
|
2
|
+
._18zrutpp{padding-inline:var(--ds-space-150,9pt)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
|
|
4
3
|
._18m915vq{overflow-y:hidden}
|
|
5
4
|
._1bsb1edt{width:350px}
|
|
6
5
|
._1e0c1txw{display:flex}
|
|
7
6
|
._1o9zidpf{flex-shrink:0}
|
|
7
|
+
._1q51utpp{padding-block-start:var(--ds-space-150,9pt)}
|
|
8
8
|
._1reo15vq{overflow-x:hidden}
|
|
9
9
|
._2lx21bp4{flex-direction:column}
|
|
10
|
-
.
|
|
11
|
-
.
|
|
10
|
+
._85i5u2gc{padding-block-end:var(--ds-space-100,8px)}
|
|
11
|
+
._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
|
|
@@ -19,16 +19,21 @@ import Textfield from '@atlaskit/textfield/text-field';
|
|
|
19
19
|
import { RegisteredInsertMenuList } from './RegisteredInsertMenuList';
|
|
20
20
|
var DEFAULT_MENU_MAX_HEIGHT = 520;
|
|
21
21
|
var styles = {
|
|
22
|
-
menu: "
|
|
23
|
-
search: "
|
|
22
|
+
menu: "_2rko1mok _1reo15vq _18m915vq _bfhk1bhr _16qs130s _1e0c1txw _2lx21bp4 _1bsb1edt",
|
|
23
|
+
search: "_18zrutpp _1o9zidpf _1q51utpp _85i5u2gc"
|
|
24
24
|
};
|
|
25
25
|
export var RegisteredInsertMenu = function RegisteredInsertMenu(_ref) {
|
|
26
26
|
var components = _ref.components,
|
|
27
27
|
emptyStateHandler = _ref.emptyStateHandler,
|
|
28
28
|
editorView = _ref.editorView,
|
|
29
29
|
isOffline = _ref.isOffline,
|
|
30
|
+
_ref$maxHeight = _ref.maxHeight,
|
|
31
|
+
maxHeight = _ref$maxHeight === void 0 ? DEFAULT_MENU_MAX_HEIGHT : _ref$maxHeight,
|
|
30
32
|
onClose = _ref.onClose,
|
|
31
33
|
onSelect = _ref.onSelect;
|
|
34
|
+
var menuStyle = {
|
|
35
|
+
maxHeight: maxHeight
|
|
36
|
+
};
|
|
32
37
|
var _useIntl = useIntl(),
|
|
33
38
|
formatMessage = _useIntl.formatMessage;
|
|
34
39
|
var listId = useId();
|
|
@@ -53,6 +58,13 @@ export var RegisteredInsertMenu = function RegisteredInsertMenu(_ref) {
|
|
|
53
58
|
renderedItems = _useState8[0],
|
|
54
59
|
setRenderedItems = _useState8[1];
|
|
55
60
|
var searchRef = useRef(null);
|
|
61
|
+
useLayoutEffect(function () {
|
|
62
|
+
var _searchRef$current;
|
|
63
|
+
// Popup positions on the next frame; focusing must not scroll to its initial location.
|
|
64
|
+
(_searchRef$current = searchRef.current) === null || _searchRef$current === void 0 || _searchRef$current.focus({
|
|
65
|
+
preventScroll: true
|
|
66
|
+
});
|
|
67
|
+
}, []);
|
|
56
68
|
var surfaceContext = useMemo(function () {
|
|
57
69
|
return createSurfaceContext(TYPE_AHEAD_SURFACE_CONTEXT, {
|
|
58
70
|
menuOpenId: menuOpenId
|
|
@@ -151,14 +163,14 @@ export var RegisteredInsertMenu = function RegisteredInsertMenu(_ref) {
|
|
|
151
163
|
"data-keyboard-navigation-independent": "",
|
|
152
164
|
testId: "registered-insert-menu",
|
|
153
165
|
onKeyDownCapture: onKeyDown,
|
|
154
|
-
xcss: styles.menu
|
|
166
|
+
xcss: styles.menu,
|
|
167
|
+
style: menuStyle
|
|
155
168
|
}, /*#__PURE__*/React.createElement(Box, {
|
|
156
169
|
xcss: styles.search
|
|
157
170
|
}, /*#__PURE__*/React.createElement(Textfield, {
|
|
158
171
|
"aria-activedescendant": isActiveItemMounted ? activeItemId : undefined,
|
|
159
172
|
"aria-controls": listId,
|
|
160
173
|
"aria-expanded": "true",
|
|
161
|
-
autoFocus: true,
|
|
162
174
|
placeholder: "Search",
|
|
163
175
|
ref: searchRef,
|
|
164
176
|
role: "combobox",
|
|
@@ -170,7 +182,7 @@ export var RegisteredInsertMenu = function RegisteredInsertMenu(_ref) {
|
|
|
170
182
|
isOffline: isOffline,
|
|
171
183
|
listId: listId,
|
|
172
184
|
listLabel: formatMessage(messages.insertMenu),
|
|
173
|
-
maxHeight:
|
|
185
|
+
maxHeight: maxHeight,
|
|
174
186
|
menuOpenId: menuOpenId,
|
|
175
187
|
model: model,
|
|
176
188
|
onClose: onSelect,
|
|
@@ -16,6 +16,7 @@ export var RegisteredInsertMenuContent = function RegisteredInsertMenuContent(_r
|
|
|
16
16
|
var api = _ref2.api,
|
|
17
17
|
editorView = _ref2.editorView,
|
|
18
18
|
isOffline = _ref2.isOffline,
|
|
19
|
+
maxHeight = _ref2.maxHeight,
|
|
19
20
|
onClose = _ref2.onClose,
|
|
20
21
|
onDismiss = _ref2.onDismiss,
|
|
21
22
|
onSelect = _ref2.onSelect,
|
|
@@ -40,6 +41,7 @@ export var RegisteredInsertMenuContent = function RegisteredInsertMenuContent(_r
|
|
|
40
41
|
editorView: editorView,
|
|
41
42
|
emptyStateHandler: api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || (_api$quickInsert = _api$quickInsert.sharedState.currentState()) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.emptyStateHandler,
|
|
42
43
|
isOffline: isOffline,
|
|
44
|
+
maxHeight: maxHeight,
|
|
43
45
|
onClose: onClose,
|
|
44
46
|
onSelect: onSelect
|
|
45
47
|
}));
|
|
@@ -10,10 +10,12 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
|
|
|
10
10
|
import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
|
|
11
11
|
import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
|
|
12
12
|
import { List } from 'react-virtualized/dist/commonjs/List';
|
|
13
|
+
import { useMenuListHeight } from '@atlaskit/editor-common/quick-insert/use-menu-list-height';
|
|
13
14
|
import { Box } from '@atlaskit/primitives/compiled';
|
|
14
15
|
import { RegisteredInsertMenuItem } from './RegisteredInsertMenuItem';
|
|
15
16
|
var ESTIMATED_ROW_HEIGHT = 56;
|
|
16
|
-
|
|
17
|
+
// 40px item + 8px block padding + 1px separator.
|
|
18
|
+
var MENU_FOOTER_HEIGHT = 49;
|
|
17
19
|
var MENU_SEARCH_HEIGHT = 64;
|
|
18
20
|
var LIST_WIDTH = 350;
|
|
19
21
|
var listAriaProps = {
|
|
@@ -92,6 +94,9 @@ export var RegisteredInsertMenuList = function RegisteredInsertMenuList(_ref) {
|
|
|
92
94
|
return "".concat(type, ":").concat(key);
|
|
93
95
|
}).join('\0');
|
|
94
96
|
}, [rows]);
|
|
97
|
+
var _useMenuListHeight = useMenuListHeight(cache, rows.length, rowKeySignature),
|
|
98
|
+
measuredHeight = _useMenuListHeight.height,
|
|
99
|
+
updateHeight = _useMenuListHeight.updateHeight;
|
|
95
100
|
useLayoutEffect(function () {
|
|
96
101
|
var _listRef$current, _listRef$current2;
|
|
97
102
|
cache.clearAll();
|
|
@@ -102,6 +107,7 @@ export var RegisteredInsertMenuList = function RegisteredInsertMenuList(_ref) {
|
|
|
102
107
|
var _indexes$, _indexes;
|
|
103
108
|
var overscanStartIndex = _ref3.overscanStartIndex,
|
|
104
109
|
overscanStopIndex = _ref3.overscanStopIndex;
|
|
110
|
+
updateHeight();
|
|
105
111
|
var indexes = _toConsumableArray(itemIndexByRowIndex).filter(function (_ref4) {
|
|
106
112
|
var _ref5 = _slicedToArray(_ref4, 1),
|
|
107
113
|
rowIndex = _ref5[0];
|
|
@@ -115,7 +121,7 @@ export var RegisteredInsertMenuList = function RegisteredInsertMenuList(_ref) {
|
|
|
115
121
|
startIndex: (_indexes$ = indexes[0]) !== null && _indexes$ !== void 0 ? _indexes$ : -1,
|
|
116
122
|
stopIndex: (_indexes = indexes[indexes.length - 1]) !== null && _indexes !== void 0 ? _indexes : -1
|
|
117
123
|
});
|
|
118
|
-
}, [itemIndexByRowIndex, onRenderedItemsChange]);
|
|
124
|
+
}, [itemIndexByRowIndex, onRenderedItemsChange, updateHeight]);
|
|
119
125
|
var renderRow = useCallback(function (_ref8) {
|
|
120
126
|
var _registration$compone;
|
|
121
127
|
var index = _ref8.index,
|
|
@@ -204,7 +210,7 @@ export var RegisteredInsertMenuList = function RegisteredInsertMenuList(_ref) {
|
|
|
204
210
|
, _extends({}, listAriaProps, {
|
|
205
211
|
tabIndex: null,
|
|
206
212
|
containerRole: "presentation",
|
|
207
|
-
height: Math.min(
|
|
213
|
+
height: Math.min(measuredHeight, listMaxHeight),
|
|
208
214
|
overscanRowCount: 3,
|
|
209
215
|
onRowsRendered: onRowsRendered,
|
|
210
216
|
ref: setListRef,
|
|
@@ -7,8 +7,9 @@ type Props = {
|
|
|
7
7
|
editorView: EditorView;
|
|
8
8
|
emptyStateHandler?: EmptyStateHandler;
|
|
9
9
|
isOffline: boolean;
|
|
10
|
+
maxHeight?: number;
|
|
10
11
|
onClose: () => void;
|
|
11
12
|
onSelect: () => void;
|
|
12
13
|
};
|
|
13
|
-
export declare const RegisteredInsertMenu: ({ components, emptyStateHandler, editorView, isOffline, onClose, onSelect, }: Props) => React.JSX.Element;
|
|
14
|
+
export declare const RegisteredInsertMenu: ({ components, emptyStateHandler, editorView, isOffline, maxHeight, onClose, onSelect, }: Props) => React.JSX.Element;
|
|
14
15
|
export {};
|
|
@@ -6,10 +6,11 @@ type Props = {
|
|
|
6
6
|
api?: ExtractInjectionAPI<InsertBlockPlugin>;
|
|
7
7
|
editorView: EditorView;
|
|
8
8
|
isOffline: boolean;
|
|
9
|
+
maxHeight?: number;
|
|
9
10
|
onClose: () => void;
|
|
10
11
|
onDismiss: () => void;
|
|
11
12
|
onSelect: () => void;
|
|
12
13
|
target?: HTMLElement | null;
|
|
13
14
|
};
|
|
14
|
-
export declare const RegisteredInsertMenuContent: ({ api, editorView, isOffline, onClose, onDismiss, onSelect, target, }: Props) => React.JSX.Element;
|
|
15
|
+
export declare const RegisteredInsertMenuContent: ({ api, editorView, isOffline, maxHeight, onClose, onDismiss, onSelect, target, }: Props) => React.JSX.Element;
|
|
15
16
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-insert-block",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "23.0.0",
|
|
4
4
|
"description": "Insert block plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -23,46 +23,46 @@
|
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@atlaskit/browser-apis": "^1.2.0",
|
|
25
25
|
"@atlaskit/css": "^1.1.0",
|
|
26
|
-
"@atlaskit/editor-plugin-analytics": "^
|
|
27
|
-
"@atlaskit/editor-plugin-block-type": "^
|
|
28
|
-
"@atlaskit/editor-plugin-code-block": "^
|
|
29
|
-
"@atlaskit/editor-plugin-connectivity": "^
|
|
30
|
-
"@atlaskit/editor-plugin-date": "^
|
|
31
|
-
"@atlaskit/editor-plugin-emoji": "^
|
|
32
|
-
"@atlaskit/editor-plugin-expand": "^
|
|
33
|
-
"@atlaskit/editor-plugin-extension": "^
|
|
34
|
-
"@atlaskit/editor-plugin-feature-flags": "^
|
|
35
|
-
"@atlaskit/editor-plugin-hyperlink": "^
|
|
36
|
-
"@atlaskit/editor-plugin-image-upload": "^
|
|
37
|
-
"@atlaskit/editor-plugin-layout": "^
|
|
38
|
-
"@atlaskit/editor-plugin-media": "^
|
|
39
|
-
"@atlaskit/editor-plugin-media-insert": "^
|
|
40
|
-
"@atlaskit/editor-plugin-mentions": "^
|
|
41
|
-
"@atlaskit/editor-plugin-metrics": "^
|
|
42
|
-
"@atlaskit/editor-plugin-panel": "^
|
|
43
|
-
"@atlaskit/editor-plugin-placeholder-text": "^
|
|
44
|
-
"@atlaskit/editor-plugin-primary-toolbar": "^
|
|
45
|
-
"@atlaskit/editor-plugin-quick-insert": "^
|
|
46
|
-
"@atlaskit/editor-plugin-rule": "^
|
|
47
|
-
"@atlaskit/editor-plugin-status": "^
|
|
48
|
-
"@atlaskit/editor-plugin-table": "^
|
|
49
|
-
"@atlaskit/editor-plugin-tasks-and-decisions": "^
|
|
50
|
-
"@atlaskit/editor-plugin-toolbar": "^
|
|
51
|
-
"@atlaskit/editor-plugin-type-ahead": "^
|
|
52
|
-
"@atlaskit/editor-plugin-ui-control-registry": "^
|
|
26
|
+
"@atlaskit/editor-plugin-analytics": "^22.0.0",
|
|
27
|
+
"@atlaskit/editor-plugin-block-type": "^26.0.0",
|
|
28
|
+
"@atlaskit/editor-plugin-code-block": "^24.0.0",
|
|
29
|
+
"@atlaskit/editor-plugin-connectivity": "^22.0.0",
|
|
30
|
+
"@atlaskit/editor-plugin-date": "^24.0.0",
|
|
31
|
+
"@atlaskit/editor-plugin-emoji": "^23.0.0",
|
|
32
|
+
"@atlaskit/editor-plugin-expand": "^23.0.0",
|
|
33
|
+
"@atlaskit/editor-plugin-extension": "^25.0.0",
|
|
34
|
+
"@atlaskit/editor-plugin-feature-flags": "^21.0.0",
|
|
35
|
+
"@atlaskit/editor-plugin-hyperlink": "^24.0.0",
|
|
36
|
+
"@atlaskit/editor-plugin-image-upload": "^22.0.0",
|
|
37
|
+
"@atlaskit/editor-plugin-layout": "^23.0.0",
|
|
38
|
+
"@atlaskit/editor-plugin-media": "^24.0.0",
|
|
39
|
+
"@atlaskit/editor-plugin-media-insert": "^40.0.0",
|
|
40
|
+
"@atlaskit/editor-plugin-mentions": "^24.0.0",
|
|
41
|
+
"@atlaskit/editor-plugin-metrics": "^23.0.0",
|
|
42
|
+
"@atlaskit/editor-plugin-panel": "^24.0.0",
|
|
43
|
+
"@atlaskit/editor-plugin-placeholder-text": "^23.0.0",
|
|
44
|
+
"@atlaskit/editor-plugin-primary-toolbar": "^23.0.0",
|
|
45
|
+
"@atlaskit/editor-plugin-quick-insert": "^22.0.0",
|
|
46
|
+
"@atlaskit/editor-plugin-rule": "^22.0.0",
|
|
47
|
+
"@atlaskit/editor-plugin-status": "^23.0.0",
|
|
48
|
+
"@atlaskit/editor-plugin-table": "^34.0.0",
|
|
49
|
+
"@atlaskit/editor-plugin-tasks-and-decisions": "^25.0.0",
|
|
50
|
+
"@atlaskit/editor-plugin-toolbar": "^19.0.0",
|
|
51
|
+
"@atlaskit/editor-plugin-type-ahead": "^23.0.0",
|
|
52
|
+
"@atlaskit/editor-plugin-ui-control-registry": "^16.0.0",
|
|
53
53
|
"@atlaskit/editor-prosemirror": "^9.0.0",
|
|
54
54
|
"@atlaskit/editor-shared-styles": "^4.3.0",
|
|
55
|
-
"@atlaskit/editor-toolbar": "^2.
|
|
55
|
+
"@atlaskit/editor-toolbar": "^2.8.0",
|
|
56
56
|
"@atlaskit/editor-toolbar-model": "^1.2.0",
|
|
57
57
|
"@atlaskit/editor-ui-control-model": "^2.10.0",
|
|
58
58
|
"@atlaskit/emoji": "^72.4.0",
|
|
59
59
|
"@atlaskit/icon": "^38.0.0",
|
|
60
|
-
"@atlaskit/icon-lab": "^7.
|
|
60
|
+
"@atlaskit/icon-lab": "^7.10.0",
|
|
61
61
|
"@atlaskit/platform-feature-experiments": "^0.3.0",
|
|
62
62
|
"@atlaskit/platform-feature-flags": "^2.2.0",
|
|
63
63
|
"@atlaskit/primitives": "^22.5.0",
|
|
64
64
|
"@atlaskit/textfield": "^10.2.0",
|
|
65
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
65
|
+
"@atlaskit/tmp-editor-statsig": "^209.0.0",
|
|
66
66
|
"@atlaskit/tokens": "^20.0.0",
|
|
67
67
|
"@babel/runtime": "^7.0.0",
|
|
68
68
|
"@emotion/react": "^11.7.1",
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
"react-virtualized": "^9.22.6"
|
|
73
73
|
},
|
|
74
74
|
"peerDependencies": {
|
|
75
|
-
"@atlaskit/editor-common": "^
|
|
75
|
+
"@atlaskit/editor-common": "^126.0.0",
|
|
76
76
|
"react": "^18.2.0 || ^19.2.0",
|
|
77
77
|
"react-dom": "^18.2.0 || ^19.2.0",
|
|
78
78
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|