@atlaskit/editor-plugin-type-ahead 30.0.5 → 31.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/dist/cjs/pm-plugins/commands/insert-type-ahead-item.js +4 -8
- package/dist/cjs/ui/ContentComponent.js +1 -2
- package/dist/cjs/ui/InputQuery.js +49 -21
- package/dist/cjs/ui/WrapperTypeAhead.js +4 -5
- package/dist/cjs/ui/registered-menu/RegisteredTypeAheadMenu.js +128 -227
- package/dist/es2019/pm-plugins/commands/insert-type-ahead-item.js +3 -7
- package/dist/es2019/ui/ContentComponent.js +1 -2
- package/dist/es2019/ui/InputQuery.js +44 -16
- package/dist/es2019/ui/WrapperTypeAhead.js +4 -5
- package/dist/es2019/ui/registered-menu/RegisteredTypeAheadMenu.js +112 -200
- package/dist/esm/pm-plugins/commands/insert-type-ahead-item.js +4 -8
- package/dist/esm/ui/ContentComponent.js +1 -2
- package/dist/esm/ui/InputQuery.js +49 -21
- package/dist/esm/ui/WrapperTypeAhead.js +4 -5
- package/dist/esm/ui/registered-menu/RegisteredTypeAheadMenu.js +129 -228
- package/dist/types/pm-plugins/commands/insert-type-ahead-item.d.ts +4 -4
- package/dist/types/ui/InputQuery.d.ts +4 -1
- package/dist/types/ui/registered-menu/RegisteredTypeAheadMenu.d.ts +2 -3
- package/package.json +11 -11
- package/dist/cjs/ui/registered-menu/PassThrough.js +0 -10
- package/dist/cjs/ui/registered-menu/TypeAheadContext.js +0 -8
- package/dist/cjs/ui/registered-menu/TypeAheadItemRow.js +0 -48
- package/dist/cjs/ui/registered-menu/TypeAheadMenuFooter.compiled.css +0 -3
- package/dist/cjs/ui/registered-menu/TypeAheadMenuFooter.js +0 -33
- package/dist/cjs/ui/registered-menu/TypeAheadMenuRenderer.js +0 -167
- package/dist/cjs/ui/registered-menu/TypeAheadProvider.js +0 -8
- package/dist/cjs/ui/registered-menu/TypeAheadSectionRow.js +0 -15
- package/dist/cjs/ui/registered-menu/buildTypeAheadMenuModel.js +0 -5
- package/dist/cjs/ui/registered-menu/createTypeAheadRowRenderer.js +0 -76
- package/dist/cjs/ui/registered-menu/getTypeAheadGlobalViewMoreId.js +0 -9
- package/dist/cjs/ui/registered-menu/getTypeAheadItemId.js +0 -9
- package/dist/cjs/ui/registered-menu/quick-insert/TypeAheadQuickInsertItem.js +0 -40
- package/dist/cjs/ui/registered-menu/quick-insert/TypeAheadQuickInsertProvider.js +0 -66
- package/dist/cjs/ui/registered-menu/typeAheadMenuTypes.js +0 -5
- package/dist/cjs/ui/registered-menu/typeAheadSurfaces.js +0 -27
- package/dist/cjs/ui/registered-menu/useTypeAheadContext.js +0 -15
- package/dist/es2019/ui/registered-menu/PassThrough.js +0 -3
- package/dist/es2019/ui/registered-menu/TypeAheadContext.js +0 -2
- package/dist/es2019/ui/registered-menu/TypeAheadItemRow.js +0 -35
- package/dist/es2019/ui/registered-menu/TypeAheadMenuFooter.compiled.css +0 -3
- package/dist/es2019/ui/registered-menu/TypeAheadMenuFooter.js +0 -24
- package/dist/es2019/ui/registered-menu/TypeAheadMenuRenderer.js +0 -134
- package/dist/es2019/ui/registered-menu/TypeAheadProvider.js +0 -2
- package/dist/es2019/ui/registered-menu/TypeAheadSectionRow.js +0 -9
- package/dist/es2019/ui/registered-menu/buildTypeAheadMenuModel.js +0 -1
- package/dist/es2019/ui/registered-menu/createTypeAheadRowRenderer.js +0 -67
- package/dist/es2019/ui/registered-menu/getTypeAheadGlobalViewMoreId.js +0 -1
- package/dist/es2019/ui/registered-menu/getTypeAheadItemId.js +0 -1
- package/dist/es2019/ui/registered-menu/quick-insert/TypeAheadQuickInsertItem.js +0 -31
- package/dist/es2019/ui/registered-menu/quick-insert/TypeAheadQuickInsertProvider.js +0 -58
- package/dist/es2019/ui/registered-menu/typeAheadMenuTypes.js +0 -1
- package/dist/es2019/ui/registered-menu/typeAheadSurfaces.js +0 -21
- package/dist/es2019/ui/registered-menu/useTypeAheadContext.js +0 -9
- package/dist/esm/ui/registered-menu/PassThrough.js +0 -4
- package/dist/esm/ui/registered-menu/TypeAheadContext.js +0 -2
- package/dist/esm/ui/registered-menu/TypeAheadItemRow.js +0 -40
- package/dist/esm/ui/registered-menu/TypeAheadMenuFooter.compiled.css +0 -3
- package/dist/esm/ui/registered-menu/TypeAheadMenuFooter.js +0 -26
- package/dist/esm/ui/registered-menu/TypeAheadMenuRenderer.js +0 -158
- package/dist/esm/ui/registered-menu/TypeAheadProvider.js +0 -2
- package/dist/esm/ui/registered-menu/TypeAheadSectionRow.js +0 -8
- package/dist/esm/ui/registered-menu/buildTypeAheadMenuModel.js +0 -1
- package/dist/esm/ui/registered-menu/createTypeAheadRowRenderer.js +0 -69
- package/dist/esm/ui/registered-menu/getTypeAheadGlobalViewMoreId.js +0 -3
- package/dist/esm/ui/registered-menu/getTypeAheadItemId.js +0 -3
- package/dist/esm/ui/registered-menu/quick-insert/TypeAheadQuickInsertItem.js +0 -32
- package/dist/esm/ui/registered-menu/quick-insert/TypeAheadQuickInsertProvider.js +0 -58
- package/dist/esm/ui/registered-menu/typeAheadMenuTypes.js +0 -1
- package/dist/esm/ui/registered-menu/typeAheadSurfaces.js +0 -21
- package/dist/esm/ui/registered-menu/useTypeAheadContext.js +0 -9
- package/dist/types/ui/registered-menu/PassThrough.d.ts +0 -2
- package/dist/types/ui/registered-menu/TypeAheadContext.d.ts +0 -20
- package/dist/types/ui/registered-menu/TypeAheadItemRow.d.ts +0 -15
- package/dist/types/ui/registered-menu/TypeAheadMenuFooter.d.ts +0 -11
- package/dist/types/ui/registered-menu/TypeAheadMenuRenderer.d.ts +0 -19
- package/dist/types/ui/registered-menu/TypeAheadProvider.d.ts +0 -3
- package/dist/types/ui/registered-menu/TypeAheadSectionRow.d.ts +0 -5
- package/dist/types/ui/registered-menu/buildTypeAheadMenuModel.d.ts +0 -3
- package/dist/types/ui/registered-menu/createTypeAheadRowRenderer.d.ts +0 -17
- package/dist/types/ui/registered-menu/getTypeAheadGlobalViewMoreId.d.ts +0 -1
- package/dist/types/ui/registered-menu/getTypeAheadItemId.d.ts +0 -1
- package/dist/types/ui/registered-menu/quick-insert/TypeAheadQuickInsertItem.d.ts +0 -3
- package/dist/types/ui/registered-menu/quick-insert/TypeAheadQuickInsertProvider.d.ts +0 -2
- package/dist/types/ui/registered-menu/typeAheadMenuTypes.d.ts +0 -8
- package/dist/types/ui/registered-menu/typeAheadSurfaces.d.ts +0 -17
- package/dist/types/ui/registered-menu/useTypeAheadContext.d.ts +0 -2
|
@@ -1,134 +0,0 @@
|
|
|
1
|
-
import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
|
|
2
|
-
import { useIntl } from 'react-intl';
|
|
3
|
-
import { CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
|
|
4
|
-
import { List } from 'react-virtualized/dist/commonjs/List';
|
|
5
|
-
import { QuickInsertEmptyState } from '@atlaskit/editor-common/quick-insert/empty-state';
|
|
6
|
-
import { getQuickInsertMenuRows } from '@atlaskit/editor-common/quick-insert/registered-menu-model';
|
|
7
|
-
import { useMenuListHeight } from '@atlaskit/editor-common/quick-insert/use-menu-list-height';
|
|
8
|
-
import { typeAheadListMessages } from '@atlaskit/editor-common/type-ahead/messages';
|
|
9
|
-
import { Box } from '@atlaskit/primitives/compiled/box';
|
|
10
|
-
import { Text } from '@atlaskit/primitives/compiled/text';
|
|
11
|
-
import { createTypeAheadRowRenderer } from './createTypeAheadRowRenderer';
|
|
12
|
-
import { getTypeAheadGlobalViewMoreId } from './getTypeAheadGlobalViewMoreId';
|
|
13
|
-
import { PassThrough } from './PassThrough';
|
|
14
|
-
import { TypeAheadMenuFooter } from './TypeAheadMenuFooter';
|
|
15
|
-
const LIST_WIDTH = 320;
|
|
16
|
-
const ESTIMATED_ROW_HEIGHT = 44;
|
|
17
|
-
// 44px item + 1px separator.
|
|
18
|
-
const MENU_FOOTER_HEIGHT = 45;
|
|
19
|
-
const MENU_FOOTER_HEIGHT_WITH_SCROLL_PADDING = 51;
|
|
20
|
-
export const TypeAheadMenuRenderer = ({
|
|
21
|
-
Item,
|
|
22
|
-
listLabel,
|
|
23
|
-
listId,
|
|
24
|
-
maxHeight,
|
|
25
|
-
model,
|
|
26
|
-
query = '',
|
|
27
|
-
hasScrollPadding = false,
|
|
28
|
-
onItemHover,
|
|
29
|
-
onItemLeave,
|
|
30
|
-
onItemVisibilityChange,
|
|
31
|
-
selectedItemIndex
|
|
32
|
-
}) => {
|
|
33
|
-
var _model$root$component, _model$fallbackItems;
|
|
34
|
-
const intl = useIntl();
|
|
35
|
-
const listRef = useRef(null);
|
|
36
|
-
const rows = useMemo(() => getQuickInsertMenuRows(model), [model]);
|
|
37
|
-
const cache = useMemo(() => new CellMeasurerCache({
|
|
38
|
-
defaultHeight: ESTIMATED_ROW_HEIGHT,
|
|
39
|
-
fixedWidth: true
|
|
40
|
-
}), []);
|
|
41
|
-
const itemIndexByRowIndex = useMemo(() => {
|
|
42
|
-
const indexes = new Map();
|
|
43
|
-
let itemIndex = 0;
|
|
44
|
-
rows.forEach((registration, rowIndex) => {
|
|
45
|
-
if (registration.type === 'menu-item') {
|
|
46
|
-
indexes.set(rowIndex, itemIndex++);
|
|
47
|
-
}
|
|
48
|
-
});
|
|
49
|
-
return indexes;
|
|
50
|
-
}, [rows]);
|
|
51
|
-
const selectedRowIndex = useMemo(() => {
|
|
52
|
-
for (const [rowIndex, itemIndex] of itemIndexByRowIndex) {
|
|
53
|
-
if (itemIndex === selectedItemIndex) {
|
|
54
|
-
return rowIndex;
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
return -1;
|
|
58
|
-
}, [itemIndexByRowIndex, selectedItemIndex]);
|
|
59
|
-
const rowKeySignature = useMemo(() => rows.map(({
|
|
60
|
-
key,
|
|
61
|
-
type
|
|
62
|
-
}) => `${type}:${key}`).join('\0'), [rows]);
|
|
63
|
-
const {
|
|
64
|
-
height: measuredHeight,
|
|
65
|
-
updateHeight
|
|
66
|
-
} = useMenuListHeight(cache, rows.length, rowKeySignature);
|
|
67
|
-
useLayoutEffect(() => {
|
|
68
|
-
var _listRef$current, _listRef$current2;
|
|
69
|
-
cache.clearAll();
|
|
70
|
-
(_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.recomputeRowHeights();
|
|
71
|
-
(_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 ? void 0 : _listRef$current2.scrollToPosition(0);
|
|
72
|
-
}, [cache, rowKeySignature]);
|
|
73
|
-
useLayoutEffect(() => {
|
|
74
|
-
if (selectedRowIndex >= 0) {
|
|
75
|
-
var _listRef$current3;
|
|
76
|
-
(_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 ? void 0 : _listRef$current3.scrollToRow(selectedRowIndex);
|
|
77
|
-
}
|
|
78
|
-
}, [selectedRowIndex]);
|
|
79
|
-
const renderRow = createTypeAheadRowRenderer({
|
|
80
|
-
cache,
|
|
81
|
-
onMeasured: updateHeight,
|
|
82
|
-
itemIndexByRowIndex,
|
|
83
|
-
Item,
|
|
84
|
-
listId,
|
|
85
|
-
onItemHover,
|
|
86
|
-
onItemLeave,
|
|
87
|
-
onItemVisibilityChange,
|
|
88
|
-
rows,
|
|
89
|
-
hasScrollPadding,
|
|
90
|
-
selectedItemIndex
|
|
91
|
-
});
|
|
92
|
-
const footerItemIndex = itemIndexByRowIndex.size;
|
|
93
|
-
const onFooterItemHover = useCallback(() => onItemHover(footerItemIndex), [footerItemIndex, onItemHover]);
|
|
94
|
-
if (!model.root) {
|
|
95
|
-
return null;
|
|
96
|
-
}
|
|
97
|
-
const RootComponent = (_model$root$component = model.root.component) !== null && _model$root$component !== void 0 ? _model$root$component : PassThrough;
|
|
98
|
-
const listMaxHeight = Math.max(0, maxHeight - (model.footer ? hasScrollPadding ? MENU_FOOTER_HEIGHT_WITH_SCROLL_PADDING : MENU_FOOTER_HEIGHT : 0));
|
|
99
|
-
const hasListboxContent = rows.length > 0 || model.footer !== undefined;
|
|
100
|
-
return /*#__PURE__*/React.createElement(RootComponent, null, /*#__PURE__*/React.createElement(Box, {
|
|
101
|
-
"aria-label": hasListboxContent ? intl.formatMessage(listLabel) : undefined,
|
|
102
|
-
id: listId,
|
|
103
|
-
role: hasListboxContent ? 'listbox' : undefined
|
|
104
|
-
}, rows.length > 0 ? /*#__PURE__*/React.createElement(List, {
|
|
105
|
-
containerRole: "presentation",
|
|
106
|
-
height: Math.min(measuredHeight, listMaxHeight),
|
|
107
|
-
onRowsRendered: updateHeight,
|
|
108
|
-
overscanRowCount: 3,
|
|
109
|
-
ref: listRef,
|
|
110
|
-
role: "presentation",
|
|
111
|
-
rowCount: rows.length,
|
|
112
|
-
rowHeight: cache.rowHeight,
|
|
113
|
-
rowRenderer: renderRow,
|
|
114
|
-
scrollToAlignment: "auto",
|
|
115
|
-
width: LIST_WIDTH
|
|
116
|
-
}) : query !== '' && ((_model$fallbackItems = model.fallbackItems) === null || _model$fallbackItems === void 0 ? void 0 : _model$fallbackItems.length) === 0 ? /*#__PURE__*/React.createElement(QuickInsertEmptyState, {
|
|
117
|
-
mode: "inline",
|
|
118
|
-
spacing: "spacious"
|
|
119
|
-
}) : model.fallbackItems === undefined ? /*#__PURE__*/React.createElement(Box, {
|
|
120
|
-
paddingBlock: "space.150",
|
|
121
|
-
paddingInline: "space.250",
|
|
122
|
-
role: "group"
|
|
123
|
-
}, /*#__PURE__*/React.createElement(Text, {
|
|
124
|
-
align: "center",
|
|
125
|
-
as: "p"
|
|
126
|
-
}, intl.formatMessage(typeAheadListMessages.emptySearchResults))) : null, model.footer && /*#__PURE__*/React.createElement(TypeAheadMenuFooter, {
|
|
127
|
-
id: getTypeAheadGlobalViewMoreId(listId),
|
|
128
|
-
isSelected: selectedItemIndex === footerItemIndex,
|
|
129
|
-
Item: Item,
|
|
130
|
-
onMouseMove: onFooterItemHover,
|
|
131
|
-
registration: model.footer,
|
|
132
|
-
hasScrollPadding: hasScrollPadding
|
|
133
|
-
})));
|
|
134
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { PassThrough } from './PassThrough';
|
|
3
|
-
export const TypeAheadSectionRow = ({
|
|
4
|
-
registration
|
|
5
|
-
}) => {
|
|
6
|
-
var _registration$compone;
|
|
7
|
-
const Component = (_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : PassThrough;
|
|
8
|
-
return /*#__PURE__*/React.createElement(Component, null, null);
|
|
9
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { CellMeasurer } from 'react-virtualized/dist/commonjs/CellMeasurer';
|
|
3
|
-
import { Box } from '@atlaskit/primitives/compiled/box';
|
|
4
|
-
import { ListRow } from '../ListRow';
|
|
5
|
-
import { TypeAheadItemRow } from './TypeAheadItemRow';
|
|
6
|
-
import { TypeAheadSectionRow } from './TypeAheadSectionRow';
|
|
7
|
-
const noOp = () => {};
|
|
8
|
-
export const createTypeAheadRowRenderer = ({
|
|
9
|
-
cache,
|
|
10
|
-
hasScrollPadding = false,
|
|
11
|
-
onMeasured,
|
|
12
|
-
itemIndexByRowIndex,
|
|
13
|
-
Item,
|
|
14
|
-
listId,
|
|
15
|
-
onItemHover,
|
|
16
|
-
onItemLeave,
|
|
17
|
-
onItemVisibilityChange,
|
|
18
|
-
rows,
|
|
19
|
-
selectedItemIndex
|
|
20
|
-
}) => ({
|
|
21
|
-
index,
|
|
22
|
-
key,
|
|
23
|
-
parent,
|
|
24
|
-
style,
|
|
25
|
-
isScrolling,
|
|
26
|
-
isVisible
|
|
27
|
-
}) => {
|
|
28
|
-
const registration = rows[index];
|
|
29
|
-
if (!registration) {
|
|
30
|
-
return null;
|
|
31
|
-
}
|
|
32
|
-
const itemIndex = itemIndexByRowIndex.get(index);
|
|
33
|
-
const rowContent = registration.type === 'menu-section' ? /*#__PURE__*/React.createElement(TypeAheadSectionRow, {
|
|
34
|
-
registration: registration
|
|
35
|
-
}) : /*#__PURE__*/React.createElement(TypeAheadItemRow, {
|
|
36
|
-
Item: Item,
|
|
37
|
-
isSelected: itemIndex === selectedItemIndex,
|
|
38
|
-
itemIndex: itemIndex !== null && itemIndex !== void 0 ? itemIndex : 0,
|
|
39
|
-
listId: listId,
|
|
40
|
-
onItemHover: onItemHover,
|
|
41
|
-
onItemLeave: onItemLeave,
|
|
42
|
-
onItemVisibilityChange: onItemVisibilityChange,
|
|
43
|
-
isVisible: isVisible,
|
|
44
|
-
registration: registration,
|
|
45
|
-
rowIndex: index
|
|
46
|
-
});
|
|
47
|
-
return /*#__PURE__*/React.createElement(CellMeasurer, {
|
|
48
|
-
key: key,
|
|
49
|
-
cache: cache,
|
|
50
|
-
parent: parent,
|
|
51
|
-
columnIndex: 0,
|
|
52
|
-
rowIndex: index
|
|
53
|
-
}, ({
|
|
54
|
-
measure
|
|
55
|
-
}) => /*#__PURE__*/React.createElement(ListRow, {
|
|
56
|
-
index: index,
|
|
57
|
-
isScrolling: isScrolling,
|
|
58
|
-
isVisible: isVisible,
|
|
59
|
-
measure: measure,
|
|
60
|
-
onMeasured: onMeasured,
|
|
61
|
-
onMouseMove: noOp,
|
|
62
|
-
style: style
|
|
63
|
-
}, hasScrollPadding ? /*#__PURE__*/React.createElement(Box, {
|
|
64
|
-
paddingBlockStart: index === 0 ? 'space.100' : undefined,
|
|
65
|
-
paddingBlockEnd: index === rows.length - 1 ? 'space.100' : undefined
|
|
66
|
-
}, rowContent) : rowContent));
|
|
67
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export const getTypeAheadGlobalViewMoreId = listId => `${listId}-view-all`;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export const getTypeAheadItemId = (listId, itemIndex) => `${listId}--${itemIndex}`;
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import React, { useMemo } from 'react';
|
|
2
|
-
import { QuickInsertProvider } from '@atlaskit/editor-common/quick-insert/provider';
|
|
3
|
-
import { useQuickInsertContext } from '@atlaskit/editor-common/quick-insert/use-quick-insert-context';
|
|
4
|
-
import { PassThrough } from '../PassThrough';
|
|
5
|
-
export const TypeAheadQuickInsertItem = ({
|
|
6
|
-
id,
|
|
7
|
-
isSelected,
|
|
8
|
-
registration
|
|
9
|
-
}) => {
|
|
10
|
-
var _registration$compone;
|
|
11
|
-
const quickInsertContext = useQuickInsertContext();
|
|
12
|
-
const Component = (_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : PassThrough;
|
|
13
|
-
const contextValue = useMemo(() => ({
|
|
14
|
-
activePreviewItemKey: quickInsertContext.activePreviewItemKey,
|
|
15
|
-
editorView: quickInsertContext.editorView,
|
|
16
|
-
isOffline: quickInsertContext.isOffline,
|
|
17
|
-
menuOpenId: quickInsertContext.menuOpenId,
|
|
18
|
-
popupsMountPoint: quickInsertContext.popupsMountPoint,
|
|
19
|
-
surfaceContext: quickInsertContext.surfaceContext,
|
|
20
|
-
surface: 'typeahead',
|
|
21
|
-
item: {
|
|
22
|
-
id,
|
|
23
|
-
isPreviewActive: quickInsertContext.activePreviewItemKey === registration.key,
|
|
24
|
-
isSelected
|
|
25
|
-
},
|
|
26
|
-
select: quickInsertContext.select
|
|
27
|
-
}), [id, isSelected, quickInsertContext, registration.key]);
|
|
28
|
-
return /*#__PURE__*/React.createElement(QuickInsertProvider, {
|
|
29
|
-
value: contextValue
|
|
30
|
-
}, /*#__PURE__*/React.createElement(Component, null, null));
|
|
31
|
-
};
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import React, { useCallback, useMemo } from 'react';
|
|
2
|
-
import { isOfflineMode } from '@atlaskit/editor-common/connectivity/isOfflineMode';
|
|
3
|
-
import { QuickInsertProvider } from '@atlaskit/editor-common/quick-insert/provider';
|
|
4
|
-
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/useSharedPluginStateWithSelector';
|
|
5
|
-
import { performTypeAheadSelection } from '../../../pm-plugins/commands/insert-type-ahead-item';
|
|
6
|
-
import { useTypeAheadContext } from '../useTypeAheadContext';
|
|
7
|
-
export const TypeAheadQuickInsertProvider = ({
|
|
8
|
-
children
|
|
9
|
-
}) => {
|
|
10
|
-
const {
|
|
11
|
-
activePreviewItemKey,
|
|
12
|
-
api,
|
|
13
|
-
editorView,
|
|
14
|
-
inputMethod,
|
|
15
|
-
menuOpenId,
|
|
16
|
-
onClose,
|
|
17
|
-
popupsMountPoint,
|
|
18
|
-
query,
|
|
19
|
-
surfaceContext,
|
|
20
|
-
triggerHandler
|
|
21
|
-
} = useTypeAheadContext();
|
|
22
|
-
const {
|
|
23
|
-
isOffline
|
|
24
|
-
} = useSharedPluginStateWithSelector(api, ['connectivity'], ({
|
|
25
|
-
connectivityState
|
|
26
|
-
}) => ({
|
|
27
|
-
isOffline: isOfflineMode(connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode)
|
|
28
|
-
}));
|
|
29
|
-
const select = useCallback(selectionHandler => {
|
|
30
|
-
onClose();
|
|
31
|
-
queueMicrotask(() => {
|
|
32
|
-
performTypeAheadSelection(editorView)({
|
|
33
|
-
handler: triggerHandler,
|
|
34
|
-
inputMethod,
|
|
35
|
-
query,
|
|
36
|
-
selectionHandler
|
|
37
|
-
});
|
|
38
|
-
});
|
|
39
|
-
}, [editorView, inputMethod, onClose, query, triggerHandler]);
|
|
40
|
-
const contextValue = useMemo(() => ({
|
|
41
|
-
activePreviewItemKey,
|
|
42
|
-
editorView,
|
|
43
|
-
isOffline,
|
|
44
|
-
menuOpenId,
|
|
45
|
-
popupsMountPoint,
|
|
46
|
-
item: {
|
|
47
|
-
id: 'typeahead-quick-insert',
|
|
48
|
-
isPreviewActive: false,
|
|
49
|
-
isSelected: false
|
|
50
|
-
},
|
|
51
|
-
surface: 'typeahead',
|
|
52
|
-
select,
|
|
53
|
-
surfaceContext
|
|
54
|
-
}), [activePreviewItemKey, editorView, isOffline, menuOpenId, popupsMountPoint, select, surfaceContext]);
|
|
55
|
-
return /*#__PURE__*/React.createElement(QuickInsertProvider, {
|
|
56
|
-
value: contextValue
|
|
57
|
-
}, children);
|
|
58
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics/types/enums';
|
|
2
|
-
import { MENU } from '@atlaskit/editor-common/quick-insert/keys';
|
|
3
|
-
import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
|
|
4
|
-
import { typeAheadListMessages } from '@atlaskit/editor-common/type-ahead/messages';
|
|
5
|
-
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
6
|
-
import { TypeAheadQuickInsertItem } from './quick-insert/TypeAheadQuickInsertItem';
|
|
7
|
-
import { TypeAheadQuickInsertProvider } from './quick-insert/TypeAheadQuickInsertProvider';
|
|
8
|
-
const quickInsertSurface = {
|
|
9
|
-
inputMethod: INPUT_METHOD.QUICK_INSERT,
|
|
10
|
-
Item: TypeAheadQuickInsertItem,
|
|
11
|
-
listIdPrefix: 'quick-insert-menu',
|
|
12
|
-
listLabel: typeAheadListMessages.quickInsertInputLabel,
|
|
13
|
-
Provider: TypeAheadQuickInsertProvider,
|
|
14
|
-
root: MENU
|
|
15
|
-
};
|
|
16
|
-
export const getTypeAheadSurface = id => {
|
|
17
|
-
if (id === TypeAheadAvailableNodes.QUICK_INSERT && isExperimentEnabled('platform_editor_slash_command')) {
|
|
18
|
-
return quickInsertSurface;
|
|
19
|
-
}
|
|
20
|
-
return undefined;
|
|
21
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
import { useContext } from 'react';
|
|
2
|
-
import { TypeAheadContext } from './TypeAheadContext';
|
|
3
|
-
export const useTypeAheadContext = () => {
|
|
4
|
-
const value = useContext(TypeAheadContext);
|
|
5
|
-
if (!value) {
|
|
6
|
-
throw new Error('useTypeAheadContext must be used within TypeAheadProvider');
|
|
7
|
-
}
|
|
8
|
-
return value;
|
|
9
|
-
};
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
import React, { useCallback, useLayoutEffect } from 'react';
|
|
2
|
-
import { getTypeAheadItemId } from './getTypeAheadItemId';
|
|
3
|
-
export var TypeAheadItemRow = function TypeAheadItemRow(_ref) {
|
|
4
|
-
var isSelected = _ref.isSelected,
|
|
5
|
-
itemIndex = _ref.itemIndex,
|
|
6
|
-
Item = _ref.Item,
|
|
7
|
-
listId = _ref.listId,
|
|
8
|
-
onItemHover = _ref.onItemHover,
|
|
9
|
-
onItemLeave = _ref.onItemLeave,
|
|
10
|
-
onItemVisibilityChange = _ref.onItemVisibilityChange,
|
|
11
|
-
registration = _ref.registration,
|
|
12
|
-
rowIndex = _ref.rowIndex,
|
|
13
|
-
isVisible = _ref.isVisible;
|
|
14
|
-
var onMouseMove = useCallback(function () {
|
|
15
|
-
return onItemHover(itemIndex, registration.key);
|
|
16
|
-
}, [itemIndex, onItemHover, registration.key]);
|
|
17
|
-
var onMouseLeave = useCallback(function () {
|
|
18
|
-
return onItemLeave(registration.key);
|
|
19
|
-
}, [onItemLeave, registration.key]);
|
|
20
|
-
var onBlur = useCallback(function (event) {
|
|
21
|
-
if (!event.currentTarget.contains(event.relatedTarget)) {
|
|
22
|
-
onItemLeave(registration.key);
|
|
23
|
-
}
|
|
24
|
-
}, [onItemLeave, registration.key]);
|
|
25
|
-
useLayoutEffect(function () {
|
|
26
|
-
onItemVisibilityChange(registration.key, isVisible);
|
|
27
|
-
return function () {
|
|
28
|
-
return onItemVisibilityChange(registration.key, false);
|
|
29
|
-
};
|
|
30
|
-
}, [isVisible, onItemVisibilityChange, registration.key]);
|
|
31
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
32
|
-
onBlur: onBlur,
|
|
33
|
-
onMouseLeave: onMouseLeave,
|
|
34
|
-
onMouseMove: onMouseMove
|
|
35
|
-
}, /*#__PURE__*/React.createElement(Item, {
|
|
36
|
-
id: getTypeAheadItemId(listId, rowIndex),
|
|
37
|
-
isSelected: isSelected,
|
|
38
|
-
registration: registration
|
|
39
|
-
}));
|
|
40
|
-
};
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
/* TypeAheadMenuFooter.tsx generated by @compiled/babel-plugin v3.0.2 */
|
|
2
|
-
import "./TypeAheadMenuFooter.compiled.css";
|
|
3
|
-
import { ax, ix } from "@compiled/react/runtime";
|
|
4
|
-
import React from 'react';
|
|
5
|
-
import { Box } from '@atlaskit/primitives/compiled/box';
|
|
6
|
-
var styles = {
|
|
7
|
-
footer: "_1i531l7x _15a5nqa1 _uwhke4h9"
|
|
8
|
-
};
|
|
9
|
-
export var TypeAheadMenuFooter = function TypeAheadMenuFooter(_ref) {
|
|
10
|
-
var id = _ref.id,
|
|
11
|
-
isSelected = _ref.isSelected,
|
|
12
|
-
Item = _ref.Item,
|
|
13
|
-
onMouseMove = _ref.onMouseMove,
|
|
14
|
-
registration = _ref.registration,
|
|
15
|
-
_ref$hasScrollPadding = _ref.hasScrollPadding,
|
|
16
|
-
hasScrollPadding = _ref$hasScrollPadding === void 0 ? false : _ref$hasScrollPadding;
|
|
17
|
-
return /*#__PURE__*/React.createElement(Box, {
|
|
18
|
-
onMouseMove: onMouseMove,
|
|
19
|
-
paddingBlockEnd: hasScrollPadding ? 'space.075' : undefined,
|
|
20
|
-
xcss: styles.footer
|
|
21
|
-
}, /*#__PURE__*/React.createElement(Item, {
|
|
22
|
-
id: id,
|
|
23
|
-
isSelected: isSelected,
|
|
24
|
-
registration: registration
|
|
25
|
-
}));
|
|
26
|
-
};
|
|
@@ -1,158 +0,0 @@
|
|
|
1
|
-
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
-
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
|
|
3
|
-
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; } }
|
|
4
|
-
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; }
|
|
5
|
-
import React, { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
|
|
6
|
-
import { useIntl } from 'react-intl';
|
|
7
|
-
import { CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
|
|
8
|
-
import { List } from 'react-virtualized/dist/commonjs/List';
|
|
9
|
-
import { QuickInsertEmptyState } from '@atlaskit/editor-common/quick-insert/empty-state';
|
|
10
|
-
import { getQuickInsertMenuRows } from '@atlaskit/editor-common/quick-insert/registered-menu-model';
|
|
11
|
-
import { useMenuListHeight } from '@atlaskit/editor-common/quick-insert/use-menu-list-height';
|
|
12
|
-
import { typeAheadListMessages } from '@atlaskit/editor-common/type-ahead/messages';
|
|
13
|
-
import { Box } from '@atlaskit/primitives/compiled/box';
|
|
14
|
-
import { Text } from '@atlaskit/primitives/compiled/text';
|
|
15
|
-
import { createTypeAheadRowRenderer } from './createTypeAheadRowRenderer';
|
|
16
|
-
import { getTypeAheadGlobalViewMoreId } from './getTypeAheadGlobalViewMoreId';
|
|
17
|
-
import { PassThrough } from './PassThrough';
|
|
18
|
-
import { TypeAheadMenuFooter } from './TypeAheadMenuFooter';
|
|
19
|
-
var LIST_WIDTH = 320;
|
|
20
|
-
var ESTIMATED_ROW_HEIGHT = 44;
|
|
21
|
-
// 44px item + 1px separator.
|
|
22
|
-
var MENU_FOOTER_HEIGHT = 45;
|
|
23
|
-
var MENU_FOOTER_HEIGHT_WITH_SCROLL_PADDING = 51;
|
|
24
|
-
export var TypeAheadMenuRenderer = function TypeAheadMenuRenderer(_ref) {
|
|
25
|
-
var _model$root$component, _model$fallbackItems;
|
|
26
|
-
var Item = _ref.Item,
|
|
27
|
-
listLabel = _ref.listLabel,
|
|
28
|
-
listId = _ref.listId,
|
|
29
|
-
maxHeight = _ref.maxHeight,
|
|
30
|
-
model = _ref.model,
|
|
31
|
-
_ref$query = _ref.query,
|
|
32
|
-
query = _ref$query === void 0 ? '' : _ref$query,
|
|
33
|
-
_ref$hasScrollPadding = _ref.hasScrollPadding,
|
|
34
|
-
hasScrollPadding = _ref$hasScrollPadding === void 0 ? false : _ref$hasScrollPadding,
|
|
35
|
-
onItemHover = _ref.onItemHover,
|
|
36
|
-
onItemLeave = _ref.onItemLeave,
|
|
37
|
-
onItemVisibilityChange = _ref.onItemVisibilityChange,
|
|
38
|
-
selectedItemIndex = _ref.selectedItemIndex;
|
|
39
|
-
var intl = useIntl();
|
|
40
|
-
var listRef = useRef(null);
|
|
41
|
-
var rows = useMemo(function () {
|
|
42
|
-
return getQuickInsertMenuRows(model);
|
|
43
|
-
}, [model]);
|
|
44
|
-
var cache = useMemo(function () {
|
|
45
|
-
return new CellMeasurerCache({
|
|
46
|
-
defaultHeight: ESTIMATED_ROW_HEIGHT,
|
|
47
|
-
fixedWidth: true
|
|
48
|
-
});
|
|
49
|
-
}, []);
|
|
50
|
-
var itemIndexByRowIndex = useMemo(function () {
|
|
51
|
-
var indexes = new Map();
|
|
52
|
-
var itemIndex = 0;
|
|
53
|
-
rows.forEach(function (registration, rowIndex) {
|
|
54
|
-
if (registration.type === 'menu-item') {
|
|
55
|
-
indexes.set(rowIndex, itemIndex++);
|
|
56
|
-
}
|
|
57
|
-
});
|
|
58
|
-
return indexes;
|
|
59
|
-
}, [rows]);
|
|
60
|
-
var selectedRowIndex = useMemo(function () {
|
|
61
|
-
var _iterator = _createForOfIteratorHelper(itemIndexByRowIndex),
|
|
62
|
-
_step;
|
|
63
|
-
try {
|
|
64
|
-
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
65
|
-
var _step$value = _slicedToArray(_step.value, 2),
|
|
66
|
-
rowIndex = _step$value[0],
|
|
67
|
-
itemIndex = _step$value[1];
|
|
68
|
-
if (itemIndex === selectedItemIndex) {
|
|
69
|
-
return rowIndex;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
} catch (err) {
|
|
73
|
-
_iterator.e(err);
|
|
74
|
-
} finally {
|
|
75
|
-
_iterator.f();
|
|
76
|
-
}
|
|
77
|
-
return -1;
|
|
78
|
-
}, [itemIndexByRowIndex, selectedItemIndex]);
|
|
79
|
-
var rowKeySignature = useMemo(function () {
|
|
80
|
-
return rows.map(function (_ref2) {
|
|
81
|
-
var key = _ref2.key,
|
|
82
|
-
type = _ref2.type;
|
|
83
|
-
return "".concat(type, ":").concat(key);
|
|
84
|
-
}).join('\0');
|
|
85
|
-
}, [rows]);
|
|
86
|
-
var _useMenuListHeight = useMenuListHeight(cache, rows.length, rowKeySignature),
|
|
87
|
-
measuredHeight = _useMenuListHeight.height,
|
|
88
|
-
updateHeight = _useMenuListHeight.updateHeight;
|
|
89
|
-
useLayoutEffect(function () {
|
|
90
|
-
var _listRef$current, _listRef$current2;
|
|
91
|
-
cache.clearAll();
|
|
92
|
-
(_listRef$current = listRef.current) === null || _listRef$current === void 0 || _listRef$current.recomputeRowHeights();
|
|
93
|
-
(_listRef$current2 = listRef.current) === null || _listRef$current2 === void 0 || _listRef$current2.scrollToPosition(0);
|
|
94
|
-
}, [cache, rowKeySignature]);
|
|
95
|
-
useLayoutEffect(function () {
|
|
96
|
-
if (selectedRowIndex >= 0) {
|
|
97
|
-
var _listRef$current3;
|
|
98
|
-
(_listRef$current3 = listRef.current) === null || _listRef$current3 === void 0 || _listRef$current3.scrollToRow(selectedRowIndex);
|
|
99
|
-
}
|
|
100
|
-
}, [selectedRowIndex]);
|
|
101
|
-
var renderRow = createTypeAheadRowRenderer({
|
|
102
|
-
cache: cache,
|
|
103
|
-
onMeasured: updateHeight,
|
|
104
|
-
itemIndexByRowIndex: itemIndexByRowIndex,
|
|
105
|
-
Item: Item,
|
|
106
|
-
listId: listId,
|
|
107
|
-
onItemHover: onItemHover,
|
|
108
|
-
onItemLeave: onItemLeave,
|
|
109
|
-
onItemVisibilityChange: onItemVisibilityChange,
|
|
110
|
-
rows: rows,
|
|
111
|
-
hasScrollPadding: hasScrollPadding,
|
|
112
|
-
selectedItemIndex: selectedItemIndex
|
|
113
|
-
});
|
|
114
|
-
var footerItemIndex = itemIndexByRowIndex.size;
|
|
115
|
-
var onFooterItemHover = useCallback(function () {
|
|
116
|
-
return onItemHover(footerItemIndex);
|
|
117
|
-
}, [footerItemIndex, onItemHover]);
|
|
118
|
-
if (!model.root) {
|
|
119
|
-
return null;
|
|
120
|
-
}
|
|
121
|
-
var RootComponent = (_model$root$component = model.root.component) !== null && _model$root$component !== void 0 ? _model$root$component : PassThrough;
|
|
122
|
-
var listMaxHeight = Math.max(0, maxHeight - (model.footer ? hasScrollPadding ? MENU_FOOTER_HEIGHT_WITH_SCROLL_PADDING : MENU_FOOTER_HEIGHT : 0));
|
|
123
|
-
var hasListboxContent = rows.length > 0 || model.footer !== undefined;
|
|
124
|
-
return /*#__PURE__*/React.createElement(RootComponent, null, /*#__PURE__*/React.createElement(Box, {
|
|
125
|
-
"aria-label": hasListboxContent ? intl.formatMessage(listLabel) : undefined,
|
|
126
|
-
id: listId,
|
|
127
|
-
role: hasListboxContent ? 'listbox' : undefined
|
|
128
|
-
}, rows.length > 0 ? /*#__PURE__*/React.createElement(List, {
|
|
129
|
-
containerRole: "presentation",
|
|
130
|
-
height: Math.min(measuredHeight, listMaxHeight),
|
|
131
|
-
onRowsRendered: updateHeight,
|
|
132
|
-
overscanRowCount: 3,
|
|
133
|
-
ref: listRef,
|
|
134
|
-
role: "presentation",
|
|
135
|
-
rowCount: rows.length,
|
|
136
|
-
rowHeight: cache.rowHeight,
|
|
137
|
-
rowRenderer: renderRow,
|
|
138
|
-
scrollToAlignment: "auto",
|
|
139
|
-
width: LIST_WIDTH
|
|
140
|
-
}) : query !== '' && ((_model$fallbackItems = model.fallbackItems) === null || _model$fallbackItems === void 0 ? void 0 : _model$fallbackItems.length) === 0 ? /*#__PURE__*/React.createElement(QuickInsertEmptyState, {
|
|
141
|
-
mode: "inline",
|
|
142
|
-
spacing: "spacious"
|
|
143
|
-
}) : model.fallbackItems === undefined ? /*#__PURE__*/React.createElement(Box, {
|
|
144
|
-
paddingBlock: "space.150",
|
|
145
|
-
paddingInline: "space.250",
|
|
146
|
-
role: "group"
|
|
147
|
-
}, /*#__PURE__*/React.createElement(Text, {
|
|
148
|
-
align: "center",
|
|
149
|
-
as: "p"
|
|
150
|
-
}, intl.formatMessage(typeAheadListMessages.emptySearchResults))) : null, model.footer && /*#__PURE__*/React.createElement(TypeAheadMenuFooter, {
|
|
151
|
-
id: getTypeAheadGlobalViewMoreId(listId),
|
|
152
|
-
isSelected: selectedItemIndex === footerItemIndex,
|
|
153
|
-
Item: Item,
|
|
154
|
-
onMouseMove: onFooterItemHover,
|
|
155
|
-
registration: model.footer,
|
|
156
|
-
hasScrollPadding: hasScrollPadding
|
|
157
|
-
})));
|
|
158
|
-
};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { PassThrough } from './PassThrough';
|
|
3
|
-
export var TypeAheadSectionRow = function TypeAheadSectionRow(_ref) {
|
|
4
|
-
var _registration$compone;
|
|
5
|
-
var registration = _ref.registration;
|
|
6
|
-
var Component = (_registration$compone = registration.component) !== null && _registration$compone !== void 0 ? _registration$compone : PassThrough;
|
|
7
|
-
return /*#__PURE__*/React.createElement(Component, null, null);
|
|
8
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|