@atlaskit/editor-core 181.0.0 → 181.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 +7 -0
- package/dist/cjs/create-editor/create-plugins-list.js +7 -2
- package/dist/cjs/create-editor/feature-flags-from-props.js +31 -26
- package/dist/cjs/plugins/type-ahead/index.js +4 -1
- package/dist/cjs/plugins/type-ahead/pm-plugins/decorations.js +4 -2
- package/dist/cjs/plugins/type-ahead/pm-plugins/main.js +4 -2
- package/dist/cjs/plugins/type-ahead/ui/InputQuery.js +41 -4
- package/dist/cjs/plugins/type-ahead/ui/TypeAheadList.js +2 -0
- package/dist/cjs/plugins/type-ahead/ui/WrapperTypeAhead.js +9 -5
- package/dist/cjs/plugins/type-ahead/utils.js +22 -2
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/create-editor/create-plugins-list.js +7 -2
- package/dist/es2019/create-editor/feature-flags-from-props.js +31 -26
- package/dist/es2019/plugins/type-ahead/index.js +4 -1
- package/dist/es2019/plugins/type-ahead/pm-plugins/decorations.js +4 -2
- package/dist/es2019/plugins/type-ahead/pm-plugins/main.js +4 -2
- package/dist/es2019/plugins/type-ahead/ui/InputQuery.js +41 -4
- package/dist/es2019/plugins/type-ahead/ui/TypeAheadList.js +2 -0
- package/dist/es2019/plugins/type-ahead/ui/WrapperTypeAhead.js +9 -5
- package/dist/es2019/plugins/type-ahead/utils.js +22 -2
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/create-editor/create-plugins-list.js +7 -2
- package/dist/esm/create-editor/feature-flags-from-props.js +31 -26
- package/dist/esm/plugins/type-ahead/index.js +4 -1
- package/dist/esm/plugins/type-ahead/pm-plugins/decorations.js +4 -2
- package/dist/esm/plugins/type-ahead/pm-plugins/main.js +4 -2
- package/dist/esm/plugins/type-ahead/ui/InputQuery.js +41 -4
- package/dist/esm/plugins/type-ahead/ui/TypeAheadList.js +2 -0
- package/dist/esm/plugins/type-ahead/ui/WrapperTypeAhead.js +9 -5
- package/dist/esm/plugins/type-ahead/utils.js +22 -2
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types/plugins/type-ahead/index.d.ts +1 -0
- package/dist/types/plugins/type-ahead/pm-plugins/decorations.d.ts +2 -1
- package/dist/types/plugins/type-ahead/pm-plugins/main.d.ts +2 -1
- package/dist/types/plugins/type-ahead/ui/InputQuery.d.ts +1 -0
- package/dist/types/plugins/type-ahead/ui/WrapperTypeAhead.d.ts +1 -0
- package/dist/types/plugins/type-ahead/utils.d.ts +2 -1
- package/package.json +2 -2
|
@@ -23,7 +23,8 @@ export function createPlugin({
|
|
|
23
23
|
popupMountRef,
|
|
24
24
|
createAnalyticsEvent,
|
|
25
25
|
typeAheadHandlers,
|
|
26
|
-
getIntl
|
|
26
|
+
getIntl,
|
|
27
|
+
useBetterTypeaheadNavigation
|
|
27
28
|
}) {
|
|
28
29
|
const intl = getIntl();
|
|
29
30
|
const {
|
|
@@ -32,7 +33,8 @@ export function createPlugin({
|
|
|
32
33
|
} = factoryDecorations({
|
|
33
34
|
intl,
|
|
34
35
|
popupMountRef,
|
|
35
|
-
createAnalyticsEvent: createAnalyticsEvent
|
|
36
|
+
createAnalyticsEvent: createAnalyticsEvent,
|
|
37
|
+
useBetterTypeaheadNavigation
|
|
36
38
|
});
|
|
37
39
|
const reducer = createReducer({
|
|
38
40
|
createDecorations,
|
|
@@ -65,7 +65,8 @@ export const InputQuery = /*#__PURE__*/React.memo(({
|
|
|
65
65
|
onQueryFocus,
|
|
66
66
|
onUndoRedo,
|
|
67
67
|
editorView,
|
|
68
|
-
items
|
|
68
|
+
items,
|
|
69
|
+
useBetterTypeaheadNavigation
|
|
69
70
|
}) => {
|
|
70
71
|
const ref = useRef(document.createElement('span'));
|
|
71
72
|
const inputRef = useRef(null);
|
|
@@ -134,6 +135,19 @@ export const InputQuery = /*#__PURE__*/React.memo(({
|
|
|
134
135
|
// Some suggested the other workaround maybe listen on`keypress` instead of `keydown`
|
|
135
136
|
if (!event.isComposing || event.which !== 229 && event.keyCode !== 229) {
|
|
136
137
|
if (selectedIndex === -1) {
|
|
138
|
+
if (useBetterTypeaheadNavigation) {
|
|
139
|
+
/**
|
|
140
|
+
* TODO DTR-1401: (also see ED-17200) There are two options
|
|
141
|
+
* here, either
|
|
142
|
+
* - set the index directly to 1 in WrapperTypeAhead.tsx's
|
|
143
|
+
* `insertSelectedItem` at the cost of breaking some of the a11y
|
|
144
|
+
* focus changes,
|
|
145
|
+
* - or do this jank at the cost of some small analytics noise.
|
|
146
|
+
*
|
|
147
|
+
* The focus behaviour still needs cleanup
|
|
148
|
+
*/
|
|
149
|
+
selectPreviousItem();
|
|
150
|
+
}
|
|
137
151
|
selectNextItem();
|
|
138
152
|
}
|
|
139
153
|
onItemSelect(event.shiftKey ? SelectItemMode.SHIFT_ENTER : SelectItemMode.ENTER);
|
|
@@ -141,18 +155,41 @@ export const InputQuery = /*#__PURE__*/React.memo(({
|
|
|
141
155
|
break;
|
|
142
156
|
case 'Tab':
|
|
143
157
|
if (selectedIndex === -1) {
|
|
158
|
+
if (useBetterTypeaheadNavigation) {
|
|
159
|
+
/**
|
|
160
|
+
* TODO DTR-1401: (also see ED-17200) There are two options
|
|
161
|
+
* here, either
|
|
162
|
+
* - set the index directly to 1 in WrapperTypeAhead.tsx's
|
|
163
|
+
* `insertSelectedItem` at the cost of breaking some of the a11y
|
|
164
|
+
* focus changes,
|
|
165
|
+
* - or do this jank at the cost of some small analytics noise.
|
|
166
|
+
*
|
|
167
|
+
*/
|
|
168
|
+
selectPreviousItem();
|
|
169
|
+
}
|
|
144
170
|
selectNextItem();
|
|
145
171
|
}
|
|
172
|
+
// TODO DTR-1401: why is this calling select item when hitting tab? fix this in DTR-1401
|
|
146
173
|
onItemSelect(SelectItemMode.TAB);
|
|
147
174
|
break;
|
|
148
175
|
case 'ArrowDown':
|
|
149
|
-
if (
|
|
176
|
+
if (useBetterTypeaheadNavigation) {
|
|
150
177
|
selectNextItem();
|
|
178
|
+
} else {
|
|
179
|
+
// TODO DTR-1401: why were we preventing selection?
|
|
180
|
+
if (selectedIndex === -1) {
|
|
181
|
+
selectNextItem();
|
|
182
|
+
}
|
|
151
183
|
}
|
|
152
184
|
break;
|
|
153
185
|
case 'ArrowUp':
|
|
154
|
-
if (
|
|
186
|
+
if (useBetterTypeaheadNavigation) {
|
|
155
187
|
selectPreviousItem();
|
|
188
|
+
} else {
|
|
189
|
+
// TODO DTR-1401: why were we preventing selection?
|
|
190
|
+
if (selectedIndex === -1) {
|
|
191
|
+
selectPreviousItem();
|
|
192
|
+
}
|
|
156
193
|
}
|
|
157
194
|
break;
|
|
158
195
|
}
|
|
@@ -165,7 +202,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
|
|
|
165
202
|
event.preventDefault();
|
|
166
203
|
return false;
|
|
167
204
|
}
|
|
168
|
-
}, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state]);
|
|
205
|
+
}, [useBetterTypeaheadNavigation, onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state]);
|
|
169
206
|
const onClick = useCallback(event => {
|
|
170
207
|
var _inputRef$current;
|
|
171
208
|
event.stopPropagation();
|
|
@@ -166,6 +166,8 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
|
|
|
166
166
|
selectPreviousItem();
|
|
167
167
|
event.preventDefault();
|
|
168
168
|
break;
|
|
169
|
+
|
|
170
|
+
// TODO DTR-1401: why is this calling item click when hitting tab? fix this in DTR-1401
|
|
169
171
|
case 'Tab':
|
|
170
172
|
//Tab key quick inserts the selected item.
|
|
171
173
|
onItemClick(SelectItemMode.TAB, selectedIndex);
|
|
@@ -18,7 +18,8 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
|
|
|
18
18
|
inputMethod,
|
|
19
19
|
getDecorationPosition,
|
|
20
20
|
reopenQuery,
|
|
21
|
-
onUndoRedo
|
|
21
|
+
onUndoRedo,
|
|
22
|
+
useBetterTypeaheadNavigation
|
|
22
23
|
}) => {
|
|
23
24
|
const [closed, setClosed] = useState(false);
|
|
24
25
|
const [query, setQuery] = useState(reopenQuery || '');
|
|
@@ -31,12 +32,14 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
|
|
|
31
32
|
const [onItemInsert, onTextInsert] = useItemInsert(triggerHandler, editorView, items);
|
|
32
33
|
const selectNextItem = useMemo(() => moveSelectedIndex({
|
|
33
34
|
editorView,
|
|
34
|
-
direction: 'next'
|
|
35
|
-
|
|
35
|
+
direction: 'next',
|
|
36
|
+
useBetterTypeaheadNavigation
|
|
37
|
+
}), [editorView, useBetterTypeaheadNavigation]);
|
|
36
38
|
const selectPreviousItem = useMemo(() => moveSelectedIndex({
|
|
37
39
|
editorView,
|
|
38
|
-
direction: 'previous'
|
|
39
|
-
|
|
40
|
+
direction: 'previous',
|
|
41
|
+
useBetterTypeaheadNavigation
|
|
42
|
+
}), [editorView, useBetterTypeaheadNavigation]);
|
|
40
43
|
const cancel = useCallback(({
|
|
41
44
|
setSelectionAt,
|
|
42
45
|
addPrefixTrigger,
|
|
@@ -92,6 +95,7 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
|
|
|
92
95
|
return null;
|
|
93
96
|
}
|
|
94
97
|
return /*#__PURE__*/React.createElement(InputQuery, {
|
|
98
|
+
useBetterTypeaheadNavigation: useBetterTypeaheadNavigation,
|
|
95
99
|
triggerQueryPrefix: triggerHandler.trigger,
|
|
96
100
|
onQueryChange: setQuery,
|
|
97
101
|
onItemSelect: insertSelectedItem,
|
|
@@ -52,7 +52,8 @@ export const findHandlerByTrigger = ({
|
|
|
52
52
|
};
|
|
53
53
|
export const moveSelectedIndex = ({
|
|
54
54
|
editorView,
|
|
55
|
-
direction
|
|
55
|
+
direction,
|
|
56
|
+
useBetterTypeaheadNavigation
|
|
56
57
|
}) => () => {
|
|
57
58
|
const typeAheadState = getPluginState(editorView.state);
|
|
58
59
|
if (!typeAheadState) {
|
|
@@ -66,7 +67,26 @@ export const moveSelectedIndex = ({
|
|
|
66
67
|
let nextIndex;
|
|
67
68
|
if (direction === 'next') {
|
|
68
69
|
stats.increaseArrowDown();
|
|
69
|
-
|
|
70
|
+
if (useBetterTypeaheadNavigation) {
|
|
71
|
+
/**
|
|
72
|
+
* See: https://product-fabric.atlassian.net/browse/ED-17200
|
|
73
|
+
* `selectedIndex` is forced to -1 now to not immediately focus the typeahead
|
|
74
|
+
* and only do so when there is explicit logic to focus into the typeahead
|
|
75
|
+
* options.
|
|
76
|
+
*
|
|
77
|
+
* This check for "set index to 1 when -1"
|
|
78
|
+
* - is a temporary workaround to get back the previous behaviour without
|
|
79
|
+
* entirely reverting the a11y improvements
|
|
80
|
+
*
|
|
81
|
+
*/
|
|
82
|
+
if (selectedIndex === -1 && items.length > 1) {
|
|
83
|
+
nextIndex = 1;
|
|
84
|
+
} else {
|
|
85
|
+
nextIndex = selectedIndex >= items.length - 1 ? 0 : selectedIndex + 1;
|
|
86
|
+
}
|
|
87
|
+
} else {
|
|
88
|
+
nextIndex = selectedIndex >= items.length - 1 ? 0 : selectedIndex + 1;
|
|
89
|
+
}
|
|
70
90
|
} else {
|
|
71
91
|
stats.increaseArrowUp();
|
|
72
92
|
nextIndex = selectedIndex <= 0 ? items.length - 1 : selectedIndex - 1;
|
package/dist/es2019/version.json
CHANGED
|
@@ -34,16 +34,21 @@ export function getScrollGutterOptions(props) {
|
|
|
34
34
|
return undefined;
|
|
35
35
|
}
|
|
36
36
|
export function getDefaultPresetOptionsFromEditorProps(props, createAnalyticsEvent) {
|
|
37
|
-
var _props$performanceTra, _props$linking, _props$performanceTra2, _props$textFormatting, _props$linking2;
|
|
37
|
+
var _props$performanceTra, _props$linking, _ref, _props$featureFlags$u, _props$featureFlags, _props$featureFlags2, _props$performanceTra2, _props$textFormatting, _props$linking2;
|
|
38
38
|
var appearance = props.appearance;
|
|
39
39
|
var isMobile = appearance === 'mobile';
|
|
40
40
|
var inputTracking = (_props$performanceTra = props.performanceTracking) === null || _props$performanceTra === void 0 ? void 0 : _props$performanceTra.inputTracking;
|
|
41
41
|
var cardOptions = ((_props$linking = props.linking) === null || _props$linking === void 0 ? void 0 : _props$linking.smartLinks) || props.smartLinks || props.UNSAFE_cards;
|
|
42
|
+
|
|
43
|
+
// duplicated logic from `feature-flags-from-props.ts` due to presets not being finalised
|
|
44
|
+
var pseudoNormalisedUseBetterTypeaheadNavigation = (_ref = (_props$featureFlags$u = (_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags['use-better-typeahead-navigation']) !== null && _props$featureFlags$u !== void 0 ? _props$featureFlags$u : (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.useBetterTypeaheadNavigation) !== null && _ref !== void 0 ? _ref : null;
|
|
45
|
+
var useBetterTypeaheadNavigation = Boolean(typeof pseudoNormalisedUseBetterTypeaheadNavigation === 'boolean' ? !!pseudoNormalisedUseBetterTypeaheadNavigation : true);
|
|
42
46
|
return _objectSpread(_objectSpread({}, props), {}, {
|
|
43
47
|
createAnalyticsEvent: createAnalyticsEvent,
|
|
44
48
|
typeAhead: {
|
|
45
49
|
createAnalyticsEvent: createAnalyticsEvent,
|
|
46
|
-
isMobile: isMobile
|
|
50
|
+
isMobile: isMobile,
|
|
51
|
+
useBetterTypeaheadNavigation: useBetterTypeaheadNavigation
|
|
47
52
|
},
|
|
48
53
|
featureFlags: createFeatureFlagsFromProps(props),
|
|
49
54
|
paste: {
|
|
@@ -25,9 +25,12 @@ function getSpellCheck(featureFlags) {
|
|
|
25
25
|
* which is used by both current and archv3 editors.
|
|
26
26
|
*/
|
|
27
27
|
export function createFeatureFlagsFromProps(props) {
|
|
28
|
-
var _props$featureFlags, _props$
|
|
28
|
+
var _props$featureFlags, _ref, _props$featureFlags$u, _props$featureFlags2, _props$featureFlags3, _props$allowLayouts, _props$performanceTra, _props$performanceTra2, _props$featureFlags4, _props$featureFlags5, _props$allowTables, _props$featureFlags6, _props$featureFlags7, _props$allowTables2, _props$featureFlags8, _props$featureFlags9, _props$allowTables3, _props$featureFlags10, _props$featureFlags11, _props$allowTables4, _props$allowTables5, _props$featureFlags12, _props$featureFlags13, _props$allowTables6, _props$allowExtension, _props$featureFlags14, _props$featureFlags15, _props$featureFlags16, _props$featureFlags17, _props$featureFlags18, _props$featureFlags19, _props$featureFlags20, _props$featureFlags21, _props$featureFlags22, _props$featureFlags23, _props$featureFlags24, _props$featureFlags25, _props$featureFlags26, _props$featureFlags27, _props$featureFlags28, _props$featureFlags29, _props$featureFlags30, _props$featureFlags31, _props$collabEdit, _props$collabEdit2, _props$featureFlags32, _props$featureFlags33, _props$featureFlags34, _props$featureFlags35, _props$featureFlags36, _props$featureFlags37, _props$featureFlags38, _props$featureFlags39, _props$featureFlags40, _props$featureFlags41, _props$featureFlags42, _props$featureFlags43, _props$featureFlags44, _props$featureFlags45, _props$featureFlags46, _props$featureFlags47;
|
|
29
29
|
var normalizedFeatureFlags = normalizeFeatureFlags(props.featureFlags);
|
|
30
30
|
var tableCellOptionsInFloatingToolbar = normalizedFeatureFlags.tableCellOptionsInFloatingToolbar || ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableCellOptionsInFloatingToolbar) || undefined;
|
|
31
|
+
|
|
32
|
+
// duplicated logic from `feature-flags-from-props.ts` due to presets not being finalised
|
|
33
|
+
var pseudoNormalisedUseBetterTypeaheadNavigation = (_ref = (_props$featureFlags$u = (_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2['use-better-typeahead-navigation']) !== null && _props$featureFlags$u !== void 0 ? _props$featureFlags$u : (_props$featureFlags3 = props.featureFlags) === null || _props$featureFlags3 === void 0 ? void 0 : _props$featureFlags3.useBetterTypeaheadNavigation) !== null && _ref !== void 0 ? _ref : null;
|
|
31
34
|
return _objectSpread(_objectSpread({}, normalizedFeatureFlags), {}, {
|
|
32
35
|
newInsertionBehaviour: props.allowNewInsertionBehaviour,
|
|
33
36
|
interactiveExpand: typeof props.allowExpand === 'boolean' ? props.allowExpand : Boolean(props.allowExpand && props.allowExpand.allowInteractiveExpand !== false),
|
|
@@ -38,37 +41,39 @@ export function createFeatureFlagsFromProps(props) {
|
|
|
38
41
|
singleLayout: _typeof(props.allowLayouts) === 'object' && !!((_props$allowLayouts = props.allowLayouts) !== null && _props$allowLayouts !== void 0 && _props$allowLayouts.UNSAFE_allowSingleColumnLayout),
|
|
39
42
|
undoRedoButtons: props.allowUndoRedoButtons,
|
|
40
43
|
catchAllTracking: (_props$performanceTra = props.performanceTracking) === null || _props$performanceTra === void 0 ? void 0 : (_props$performanceTra2 = _props$performanceTra.catchAllTracking) === null || _props$performanceTra2 === void 0 ? void 0 : _props$performanceTra2.enabled,
|
|
41
|
-
stickyHeadersOptimization: typeof ((_props$
|
|
42
|
-
initialRenderOptimization: typeof ((_props$
|
|
43
|
-
mouseMoveOptimization: typeof ((_props$
|
|
44
|
-
tableRenderOptimization: typeof ((_props$
|
|
45
|
-
tableOverflowShadowsOptimization: typeof ((_props$
|
|
44
|
+
stickyHeadersOptimization: typeof ((_props$featureFlags4 = props.featureFlags) === null || _props$featureFlags4 === void 0 ? void 0 : _props$featureFlags4.stickyHeadersOptimization) === 'boolean' ? !!((_props$featureFlags5 = props.featureFlags) !== null && _props$featureFlags5 !== void 0 && _props$featureFlags5.stickyHeadersOptimization) : _typeof(props.allowTables) === 'object' && !!((_props$allowTables = props.allowTables) !== null && _props$allowTables !== void 0 && _props$allowTables.stickyHeadersOptimization),
|
|
45
|
+
initialRenderOptimization: typeof ((_props$featureFlags6 = props.featureFlags) === null || _props$featureFlags6 === void 0 ? void 0 : _props$featureFlags6.initialRenderOptimization) === 'boolean' ? !!((_props$featureFlags7 = props.featureFlags) !== null && _props$featureFlags7 !== void 0 && _props$featureFlags7.initialRenderOptimization) : _typeof(props.allowTables) === 'object' && !!((_props$allowTables2 = props.allowTables) !== null && _props$allowTables2 !== void 0 && _props$allowTables2.initialRenderOptimization),
|
|
46
|
+
mouseMoveOptimization: typeof ((_props$featureFlags8 = props.featureFlags) === null || _props$featureFlags8 === void 0 ? void 0 : _props$featureFlags8.mouseMoveOptimization) === 'boolean' ? !!((_props$featureFlags9 = props.featureFlags) !== null && _props$featureFlags9 !== void 0 && _props$featureFlags9.mouseMoveOptimization) : _typeof(props.allowTables) === 'object' && !!((_props$allowTables3 = props.allowTables) !== null && _props$allowTables3 !== void 0 && _props$allowTables3.mouseMoveOptimization),
|
|
47
|
+
tableRenderOptimization: typeof ((_props$featureFlags10 = props.featureFlags) === null || _props$featureFlags10 === void 0 ? void 0 : _props$featureFlags10.tableRenderOptimization) === 'boolean' ? !!((_props$featureFlags11 = props.featureFlags) !== null && _props$featureFlags11 !== void 0 && _props$featureFlags11.tableRenderOptimization) : _typeof(props.allowTables) === 'object' && typeof ((_props$allowTables4 = props.allowTables) === null || _props$allowTables4 === void 0 ? void 0 : _props$allowTables4.tableRenderOptimization) === 'boolean' ? (_props$allowTables5 = props.allowTables) === null || _props$allowTables5 === void 0 ? void 0 : _props$allowTables5.tableRenderOptimization : true,
|
|
48
|
+
tableOverflowShadowsOptimization: typeof ((_props$featureFlags12 = props.featureFlags) === null || _props$featureFlags12 === void 0 ? void 0 : _props$featureFlags12.tableOverflowShadowsOptimization) === 'boolean' ? !!((_props$featureFlags13 = props.featureFlags) !== null && _props$featureFlags13 !== void 0 && _props$featureFlags13.tableOverflowShadowsOptimization) : _typeof(props.allowTables) === 'object' && !!((_props$allowTables6 = props.allowTables) !== null && _props$allowTables6 !== void 0 && _props$allowTables6.tableOverflowShadowsOptimization),
|
|
46
49
|
extendFloatingToolbar: Boolean(_typeof(props.allowExtension) === 'object' && ((_props$allowExtension = props.allowExtension) === null || _props$allowExtension === void 0 ? void 0 : _props$allowExtension.allowExtendFloatingToolbars)),
|
|
47
|
-
showAvatarGroupAsPlugin: Boolean(typeof ((_props$
|
|
48
|
-
errorBoundaryDocStructure: Boolean(typeof ((_props$
|
|
49
|
-
synchronyErrorDocStructure: Boolean(typeof ((_props$
|
|
50
|
-
enableViewUpdateSubscription: Boolean(typeof ((_props$
|
|
51
|
-
collabAvatarScroll: Boolean(typeof ((_props$
|
|
52
|
-
ufo: Boolean(typeof ((_props$
|
|
53
|
-
twoLineEditorToolbar: Boolean(typeof ((_props$
|
|
54
|
-
saferDispatchedTransactions: Boolean(typeof normalizedFeatureFlags.saferDispatchedTransactions === 'boolean' && !!normalizedFeatureFlags.saferDispatchedTransactions || (typeof ((_props$
|
|
55
|
-
saferDispatchedTransactionsAnalyticsOnly: Boolean(typeof normalizedFeatureFlags.saferDispatchedTransactionsAnalyticsOnly === 'boolean' && !!normalizedFeatureFlags.saferDispatchedTransactionsAnalyticsOnly || (typeof ((_props$
|
|
50
|
+
showAvatarGroupAsPlugin: Boolean(typeof ((_props$featureFlags14 = props.featureFlags) === null || _props$featureFlags14 === void 0 ? void 0 : _props$featureFlags14.showAvatarGroupAsPlugin) === 'boolean' ? !!((_props$featureFlags15 = props.featureFlags) !== null && _props$featureFlags15 !== void 0 && _props$featureFlags15.showAvatarGroupAsPlugin) : false),
|
|
51
|
+
errorBoundaryDocStructure: Boolean(typeof ((_props$featureFlags16 = props.featureFlags) === null || _props$featureFlags16 === void 0 ? void 0 : _props$featureFlags16.useErrorBoundaryDocStructure) === 'boolean' ? !!((_props$featureFlags17 = props.featureFlags) !== null && _props$featureFlags17 !== void 0 && _props$featureFlags17.useErrorBoundaryDocStructure) : false),
|
|
52
|
+
synchronyErrorDocStructure: Boolean(typeof ((_props$featureFlags18 = props.featureFlags) === null || _props$featureFlags18 === void 0 ? void 0 : _props$featureFlags18.synchronyErrorDocStructure) === 'boolean' ? !!((_props$featureFlags19 = props.featureFlags) !== null && _props$featureFlags19 !== void 0 && _props$featureFlags19.synchronyErrorDocStructure) : false),
|
|
53
|
+
enableViewUpdateSubscription: Boolean(typeof ((_props$featureFlags20 = props.featureFlags) === null || _props$featureFlags20 === void 0 ? void 0 : _props$featureFlags20.enableViewUpdateSubscription) === 'boolean' ? !!((_props$featureFlags21 = props.featureFlags) !== null && _props$featureFlags21 !== void 0 && _props$featureFlags21.enableViewUpdateSubscription) : false),
|
|
54
|
+
collabAvatarScroll: Boolean(typeof ((_props$featureFlags22 = props.featureFlags) === null || _props$featureFlags22 === void 0 ? void 0 : _props$featureFlags22.collabAvatarScroll) === 'boolean' ? !!((_props$featureFlags23 = props.featureFlags) !== null && _props$featureFlags23 !== void 0 && _props$featureFlags23.collabAvatarScroll) : false),
|
|
55
|
+
ufo: Boolean(typeof ((_props$featureFlags24 = props.featureFlags) === null || _props$featureFlags24 === void 0 ? void 0 : _props$featureFlags24.ufo) === 'boolean' ? !!((_props$featureFlags25 = props.featureFlags) !== null && _props$featureFlags25 !== void 0 && _props$featureFlags25.ufo) : false),
|
|
56
|
+
twoLineEditorToolbar: Boolean(typeof ((_props$featureFlags26 = props.featureFlags) === null || _props$featureFlags26 === void 0 ? void 0 : _props$featureFlags26.twoLineEditorToolbar) === 'boolean' ? !!((_props$featureFlags27 = props.featureFlags) !== null && _props$featureFlags27 !== void 0 && _props$featureFlags27.twoLineEditorToolbar) : false),
|
|
57
|
+
saferDispatchedTransactions: Boolean(typeof normalizedFeatureFlags.saferDispatchedTransactions === 'boolean' && !!normalizedFeatureFlags.saferDispatchedTransactions || (typeof ((_props$featureFlags28 = props.featureFlags) === null || _props$featureFlags28 === void 0 ? void 0 : _props$featureFlags28.saferDispatchedTransactions) === 'boolean' ? !!((_props$featureFlags29 = props.featureFlags) !== null && _props$featureFlags29 !== void 0 && _props$featureFlags29.saferDispatchedTransactions) : false)),
|
|
58
|
+
saferDispatchedTransactionsAnalyticsOnly: Boolean(typeof normalizedFeatureFlags.saferDispatchedTransactionsAnalyticsOnly === 'boolean' && !!normalizedFeatureFlags.saferDispatchedTransactionsAnalyticsOnly || (typeof ((_props$featureFlags30 = props.featureFlags) === null || _props$featureFlags30 === void 0 ? void 0 : _props$featureFlags30.saferDispatchedTransactionsAnalyticsOnly) === 'boolean' ? !!((_props$featureFlags31 = props.featureFlags) !== null && _props$featureFlags31 !== void 0 && _props$featureFlags31.saferDispatchedTransactionsAnalyticsOnly) : false)),
|
|
56
59
|
useNativeCollabPlugin: Boolean(typeof ((_props$collabEdit = props.collabEdit) === null || _props$collabEdit === void 0 ? void 0 : _props$collabEdit.useNativePlugin) === 'boolean' ? !!((_props$collabEdit2 = props.collabEdit) !== null && _props$collabEdit2 !== void 0 && _props$collabEdit2.useNativePlugin) : false),
|
|
57
|
-
chromeCursorHandlerFixedVersion: typeof ((_props$
|
|
60
|
+
chromeCursorHandlerFixedVersion: typeof ((_props$featureFlags32 = props.featureFlags) === null || _props$featureFlags32 === void 0 ? void 0 : _props$featureFlags32.chromeCursorHandlerFixedVersion) === 'string' ? Number(props.featureFlags.chromeCursorHandlerFixedVersion) || undefined : undefined,
|
|
58
61
|
tableCellOptionsInFloatingToolbar: typeof tableCellOptionsInFloatingToolbar === 'boolean' ? tableCellOptionsInFloatingToolbar : false,
|
|
59
|
-
showHoverPreview: Boolean(typeof ((_props$
|
|
60
|
-
indentationButtonsInTheToolbar: Boolean(typeof normalizedFeatureFlags.indentationButtonsInTheToolbar === 'boolean' && !!normalizedFeatureFlags.indentationButtonsInTheToolbar || (typeof ((_props$
|
|
61
|
-
floatingToolbarCopyButton: Boolean(typeof normalizedFeatureFlags.floatingToolbarCopyButton === 'boolean' && !!normalizedFeatureFlags.floatingToolbarCopyButton || (typeof ((_props$
|
|
62
|
-
floatingToolbarLinkSettingsButton: typeof ((_props$
|
|
62
|
+
showHoverPreview: Boolean(typeof ((_props$featureFlags33 = props.featureFlags) === null || _props$featureFlags33 === void 0 ? void 0 : _props$featureFlags33.showHoverPreview) === 'boolean' ? !!((_props$featureFlags34 = props.featureFlags) !== null && _props$featureFlags34 !== void 0 && _props$featureFlags34.showHoverPreview) : false),
|
|
63
|
+
indentationButtonsInTheToolbar: Boolean(typeof normalizedFeatureFlags.indentationButtonsInTheToolbar === 'boolean' && !!normalizedFeatureFlags.indentationButtonsInTheToolbar || (typeof ((_props$featureFlags35 = props.featureFlags) === null || _props$featureFlags35 === void 0 ? void 0 : _props$featureFlags35.indentationButtonsInTheToolbar) === 'boolean' ? !!((_props$featureFlags36 = props.featureFlags) !== null && _props$featureFlags36 !== void 0 && _props$featureFlags36.indentationButtonsInTheToolbar) : false)),
|
|
64
|
+
floatingToolbarCopyButton: Boolean(typeof normalizedFeatureFlags.floatingToolbarCopyButton === 'boolean' && !!normalizedFeatureFlags.floatingToolbarCopyButton || (typeof ((_props$featureFlags37 = props.featureFlags) === null || _props$featureFlags37 === void 0 ? void 0 : _props$featureFlags37.floatingToolbarCopyButton) === 'boolean' ? !!((_props$featureFlags38 = props.featureFlags) !== null && _props$featureFlags38 !== void 0 && _props$featureFlags38.floatingToolbarCopyButton) : false)),
|
|
65
|
+
floatingToolbarLinkSettingsButton: typeof ((_props$featureFlags39 = props.featureFlags) === null || _props$featureFlags39 === void 0 ? void 0 : _props$featureFlags39['floating-toolbar-link-settings-button']) === 'string' ? props.featureFlags['floating-toolbar-link-settings-button'] || undefined : undefined,
|
|
63
66
|
disableSpellcheckByBrowser: getSpellCheck(props.featureFlags),
|
|
64
67
|
// Including fallback to props.featureFlags so that mobile feature flags
|
|
65
68
|
// are included (they are not kebab cased)
|
|
66
|
-
restartNumberedLists: normalizedFeatureFlags.restartNumberedLists === true || ((_props$
|
|
67
|
-
listNumberContinuity: normalizedFeatureFlags.listNumberContinuity === true || ((_props$
|
|
68
|
-
restartNumberedListsToolbar: normalizedFeatureFlags.restartNumberedListsToolbar === true || ((_props$
|
|
69
|
-
useSomewhatSemanticTextColorNames: Boolean(typeof normalizedFeatureFlags.useSomewhatSemanticTextColorNames === 'boolean' && !!normalizedFeatureFlags.useSomewhatSemanticTextColorNames || (typeof ((_props$
|
|
69
|
+
restartNumberedLists: normalizedFeatureFlags.restartNumberedLists === true || ((_props$featureFlags40 = props.featureFlags) === null || _props$featureFlags40 === void 0 ? void 0 : _props$featureFlags40.restartNumberedLists) === true,
|
|
70
|
+
listNumberContinuity: normalizedFeatureFlags.listNumberContinuity === true || ((_props$featureFlags41 = props.featureFlags) === null || _props$featureFlags41 === void 0 ? void 0 : _props$featureFlags41.listNumberContinuity) === true,
|
|
71
|
+
restartNumberedListsToolbar: normalizedFeatureFlags.restartNumberedListsToolbar === true || ((_props$featureFlags42 = props.featureFlags) === null || _props$featureFlags42 === void 0 ? void 0 : _props$featureFlags42.restartNumberedListsToolbar) === true,
|
|
72
|
+
useSomewhatSemanticTextColorNames: Boolean(typeof normalizedFeatureFlags.useSomewhatSemanticTextColorNames === 'boolean' && !!normalizedFeatureFlags.useSomewhatSemanticTextColorNames || (typeof ((_props$featureFlags43 = props.featureFlags) === null || _props$featureFlags43 === void 0 ? void 0 : _props$featureFlags43.useSomewhatSemanticTextColorNames) === 'boolean' ? !!((_props$featureFlags44 = props.featureFlags) !== null && _props$featureFlags44 !== void 0 && _props$featureFlags44.useSomewhatSemanticTextColorNames) : false)),
|
|
70
73
|
lpLinkPickerFocusTrap: Boolean(normalizedFeatureFlags.lpLinkPickerFocusTrap),
|
|
71
|
-
preventPopupOverflow: Boolean(typeof ((_props$
|
|
72
|
-
useEditorNext: normalizedFeatureFlags.useEditorNext === true || ((_props$
|
|
74
|
+
preventPopupOverflow: Boolean(typeof ((_props$featureFlags45 = props.featureFlags) === null || _props$featureFlags45 === void 0 ? void 0 : _props$featureFlags45['prevent-popup-overflow']) === 'boolean' ? !!((_props$featureFlags46 = props.featureFlags) !== null && _props$featureFlags46 !== void 0 && _props$featureFlags46['prevent-popup-overflow']) : false),
|
|
75
|
+
useEditorNext: normalizedFeatureFlags.useEditorNext === true || ((_props$featureFlags47 = props.featureFlags) === null || _props$featureFlags47 === void 0 ? void 0 : _props$featureFlags47.useEditorNext) === true,
|
|
76
|
+
// duplicated logic from `create-plugins-list.ts` due to presets not being finalised
|
|
77
|
+
useBetterTypeaheadNavigation: Boolean(typeof pseudoNormalisedUseBetterTypeaheadNavigation === 'boolean' ? !!pseudoNormalisedUseBetterTypeaheadNavigation : true)
|
|
73
78
|
});
|
|
74
79
|
}
|
|
@@ -113,6 +113,8 @@ var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
113
113
|
*
|
|
114
114
|
*/
|
|
115
115
|
var typeAheadPlugin = function typeAheadPlugin(options) {
|
|
116
|
+
var _options$useBetterTyp;
|
|
117
|
+
var useBetterTypeaheadNavigation = (_options$useBetterTyp = options === null || options === void 0 ? void 0 : options.useBetterTypeaheadNavigation) !== null && _options$useBetterTyp !== void 0 ? _options$useBetterTyp : true;
|
|
116
118
|
var fireAnalyticsCallback = fireAnalyticsEvent(options === null || options === void 0 ? void 0 : options.createAnalyticsEvent);
|
|
117
119
|
var popupMountRef = {
|
|
118
120
|
current: null
|
|
@@ -139,7 +141,8 @@ var typeAheadPlugin = function typeAheadPlugin(options) {
|
|
|
139
141
|
popupMountRef: popupMountRef,
|
|
140
142
|
reactDispatch: dispatch,
|
|
141
143
|
typeAheadHandlers: typeAhead,
|
|
142
|
-
createAnalyticsEvent: options === null || options === void 0 ? void 0 : options.createAnalyticsEvent
|
|
144
|
+
createAnalyticsEvent: options === null || options === void 0 ? void 0 : options.createAnalyticsEvent,
|
|
145
|
+
useBetterTypeaheadNavigation: useBetterTypeaheadNavigation
|
|
143
146
|
});
|
|
144
147
|
}
|
|
145
148
|
}, {
|
|
@@ -15,7 +15,8 @@ import { closeTypeAhead } from '../transforms/close-type-ahead';
|
|
|
15
15
|
export var factoryDecorations = function factoryDecorations(_ref) {
|
|
16
16
|
var intl = _ref.intl,
|
|
17
17
|
popupMountRef = _ref.popupMountRef,
|
|
18
|
-
createAnalyticsEvent = _ref.createAnalyticsEvent
|
|
18
|
+
createAnalyticsEvent = _ref.createAnalyticsEvent,
|
|
19
|
+
useBetterTypeaheadNavigation = _ref.useBetterTypeaheadNavigation;
|
|
19
20
|
var createDecorations = function createDecorations(tr, _ref2) {
|
|
20
21
|
var triggerHandler = _ref2.triggerHandler,
|
|
21
22
|
inputMethod = _ref2.inputMethod,
|
|
@@ -87,7 +88,8 @@ export var factoryDecorations = function factoryDecorations(_ref) {
|
|
|
87
88
|
popupsBoundariesElement: (_popupMountRef$curren2 = popupMountRef.current) === null || _popupMountRef$curren2 === void 0 ? void 0 : _popupMountRef$curren2.popupsBoundariesElement,
|
|
88
89
|
popupsScrollableElement: (_popupMountRef$curren3 = popupMountRef.current) === null || _popupMountRef$curren3 === void 0 ? void 0 : _popupMountRef$curren3.popupsScrollableElement,
|
|
89
90
|
onUndoRedo: onUndoRedo,
|
|
90
|
-
reopenQuery: reopenQuery
|
|
91
|
+
reopenQuery: reopenQuery,
|
|
92
|
+
useBetterTypeaheadNavigation: useBetterTypeaheadNavigation
|
|
91
93
|
})), typeaheadComponent);
|
|
92
94
|
shouldFocusCursorInsideQuery = false;
|
|
93
95
|
return typeaheadComponent;
|
|
@@ -25,12 +25,14 @@ export function createPlugin(_ref) {
|
|
|
25
25
|
popupMountRef = _ref.popupMountRef,
|
|
26
26
|
createAnalyticsEvent = _ref.createAnalyticsEvent,
|
|
27
27
|
typeAheadHandlers = _ref.typeAheadHandlers,
|
|
28
|
-
getIntl = _ref.getIntl
|
|
28
|
+
getIntl = _ref.getIntl,
|
|
29
|
+
useBetterTypeaheadNavigation = _ref.useBetterTypeaheadNavigation;
|
|
29
30
|
var intl = getIntl();
|
|
30
31
|
var _factoryDecorations = factoryDecorations({
|
|
31
32
|
intl: intl,
|
|
32
33
|
popupMountRef: popupMountRef,
|
|
33
|
-
createAnalyticsEvent: createAnalyticsEvent
|
|
34
|
+
createAnalyticsEvent: createAnalyticsEvent,
|
|
35
|
+
useBetterTypeaheadNavigation: useBetterTypeaheadNavigation
|
|
34
36
|
}),
|
|
35
37
|
createDecorations = _factoryDecorations.createDecorations,
|
|
36
38
|
removeDecorations = _factoryDecorations.removeDecorations;
|
|
@@ -66,7 +66,8 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
66
66
|
onQueryFocus = _ref.onQueryFocus,
|
|
67
67
|
onUndoRedo = _ref.onUndoRedo,
|
|
68
68
|
editorView = _ref.editorView,
|
|
69
|
-
items = _ref.items
|
|
69
|
+
items = _ref.items,
|
|
70
|
+
useBetterTypeaheadNavigation = _ref.useBetterTypeaheadNavigation;
|
|
70
71
|
var ref = useRef(document.createElement('span'));
|
|
71
72
|
var inputRef = useRef(null);
|
|
72
73
|
var _useState = useState(null),
|
|
@@ -139,6 +140,19 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
139
140
|
// Some suggested the other workaround maybe listen on`keypress` instead of `keydown`
|
|
140
141
|
if (!event.isComposing || event.which !== 229 && event.keyCode !== 229) {
|
|
141
142
|
if (selectedIndex === -1) {
|
|
143
|
+
if (useBetterTypeaheadNavigation) {
|
|
144
|
+
/**
|
|
145
|
+
* TODO DTR-1401: (also see ED-17200) There are two options
|
|
146
|
+
* here, either
|
|
147
|
+
* - set the index directly to 1 in WrapperTypeAhead.tsx's
|
|
148
|
+
* `insertSelectedItem` at the cost of breaking some of the a11y
|
|
149
|
+
* focus changes,
|
|
150
|
+
* - or do this jank at the cost of some small analytics noise.
|
|
151
|
+
*
|
|
152
|
+
* The focus behaviour still needs cleanup
|
|
153
|
+
*/
|
|
154
|
+
selectPreviousItem();
|
|
155
|
+
}
|
|
142
156
|
selectNextItem();
|
|
143
157
|
}
|
|
144
158
|
onItemSelect(event.shiftKey ? SelectItemMode.SHIFT_ENTER : SelectItemMode.ENTER);
|
|
@@ -146,18 +160,41 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
146
160
|
break;
|
|
147
161
|
case 'Tab':
|
|
148
162
|
if (selectedIndex === -1) {
|
|
163
|
+
if (useBetterTypeaheadNavigation) {
|
|
164
|
+
/**
|
|
165
|
+
* TODO DTR-1401: (also see ED-17200) There are two options
|
|
166
|
+
* here, either
|
|
167
|
+
* - set the index directly to 1 in WrapperTypeAhead.tsx's
|
|
168
|
+
* `insertSelectedItem` at the cost of breaking some of the a11y
|
|
169
|
+
* focus changes,
|
|
170
|
+
* - or do this jank at the cost of some small analytics noise.
|
|
171
|
+
*
|
|
172
|
+
*/
|
|
173
|
+
selectPreviousItem();
|
|
174
|
+
}
|
|
149
175
|
selectNextItem();
|
|
150
176
|
}
|
|
177
|
+
// TODO DTR-1401: why is this calling select item when hitting tab? fix this in DTR-1401
|
|
151
178
|
onItemSelect(SelectItemMode.TAB);
|
|
152
179
|
break;
|
|
153
180
|
case 'ArrowDown':
|
|
154
|
-
if (
|
|
181
|
+
if (useBetterTypeaheadNavigation) {
|
|
155
182
|
selectNextItem();
|
|
183
|
+
} else {
|
|
184
|
+
// TODO DTR-1401: why were we preventing selection?
|
|
185
|
+
if (selectedIndex === -1) {
|
|
186
|
+
selectNextItem();
|
|
187
|
+
}
|
|
156
188
|
}
|
|
157
189
|
break;
|
|
158
190
|
case 'ArrowUp':
|
|
159
|
-
if (
|
|
191
|
+
if (useBetterTypeaheadNavigation) {
|
|
160
192
|
selectPreviousItem();
|
|
193
|
+
} else {
|
|
194
|
+
// TODO DTR-1401: why were we preventing selection?
|
|
195
|
+
if (selectedIndex === -1) {
|
|
196
|
+
selectPreviousItem();
|
|
197
|
+
}
|
|
161
198
|
}
|
|
162
199
|
break;
|
|
163
200
|
}
|
|
@@ -170,7 +207,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
170
207
|
event.preventDefault();
|
|
171
208
|
return false;
|
|
172
209
|
}
|
|
173
|
-
}, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state]);
|
|
210
|
+
}, [useBetterTypeaheadNavigation, onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state]);
|
|
174
211
|
var onClick = useCallback(function (event) {
|
|
175
212
|
var _inputRef$current;
|
|
176
213
|
event.stopPropagation();
|
|
@@ -176,6 +176,8 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
|
|
|
176
176
|
selectPreviousItem();
|
|
177
177
|
event.preventDefault();
|
|
178
178
|
break;
|
|
179
|
+
|
|
180
|
+
// TODO DTR-1401: why is this calling item click when hitting tab? fix this in DTR-1401
|
|
179
181
|
case 'Tab':
|
|
180
182
|
//Tab key quick inserts the selected item.
|
|
181
183
|
onItemClick(SelectItemMode.TAB, selectedIndex);
|
|
@@ -19,7 +19,8 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
19
19
|
inputMethod = _ref.inputMethod,
|
|
20
20
|
getDecorationPosition = _ref.getDecorationPosition,
|
|
21
21
|
reopenQuery = _ref.reopenQuery,
|
|
22
|
-
onUndoRedo = _ref.onUndoRedo
|
|
22
|
+
onUndoRedo = _ref.onUndoRedo,
|
|
23
|
+
useBetterTypeaheadNavigation = _ref.useBetterTypeaheadNavigation;
|
|
23
24
|
var _useState = useState(false),
|
|
24
25
|
_useState2 = _slicedToArray(_useState, 2),
|
|
25
26
|
closed = _useState2[0],
|
|
@@ -41,15 +42,17 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
41
42
|
var selectNextItem = useMemo(function () {
|
|
42
43
|
return moveSelectedIndex({
|
|
43
44
|
editorView: editorView,
|
|
44
|
-
direction: 'next'
|
|
45
|
+
direction: 'next',
|
|
46
|
+
useBetterTypeaheadNavigation: useBetterTypeaheadNavigation
|
|
45
47
|
});
|
|
46
|
-
}, [editorView]);
|
|
48
|
+
}, [editorView, useBetterTypeaheadNavigation]);
|
|
47
49
|
var selectPreviousItem = useMemo(function () {
|
|
48
50
|
return moveSelectedIndex({
|
|
49
51
|
editorView: editorView,
|
|
50
|
-
direction: 'previous'
|
|
52
|
+
direction: 'previous',
|
|
53
|
+
useBetterTypeaheadNavigation: useBetterTypeaheadNavigation
|
|
51
54
|
});
|
|
52
|
-
}, [editorView]);
|
|
55
|
+
}, [editorView, useBetterTypeaheadNavigation]);
|
|
53
56
|
var cancel = useCallback(function (_ref2) {
|
|
54
57
|
var setSelectionAt = _ref2.setSelectionAt,
|
|
55
58
|
addPrefixTrigger = _ref2.addPrefixTrigger,
|
|
@@ -100,6 +103,7 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
100
103
|
return null;
|
|
101
104
|
}
|
|
102
105
|
return /*#__PURE__*/React.createElement(InputQuery, {
|
|
106
|
+
useBetterTypeaheadNavigation: useBetterTypeaheadNavigation,
|
|
103
107
|
triggerQueryPrefix: triggerHandler.trigger,
|
|
104
108
|
onQueryChange: setQuery,
|
|
105
109
|
onItemSelect: insertSelectedItem,
|
|
@@ -51,7 +51,8 @@ export var findHandlerByTrigger = function findHandlerByTrigger(_ref) {
|
|
|
51
51
|
};
|
|
52
52
|
export var moveSelectedIndex = function moveSelectedIndex(_ref2) {
|
|
53
53
|
var editorView = _ref2.editorView,
|
|
54
|
-
direction = _ref2.direction
|
|
54
|
+
direction = _ref2.direction,
|
|
55
|
+
useBetterTypeaheadNavigation = _ref2.useBetterTypeaheadNavigation;
|
|
55
56
|
return function () {
|
|
56
57
|
var typeAheadState = getPluginState(editorView.state);
|
|
57
58
|
if (!typeAheadState) {
|
|
@@ -63,7 +64,26 @@ export var moveSelectedIndex = function moveSelectedIndex(_ref2) {
|
|
|
63
64
|
var nextIndex;
|
|
64
65
|
if (direction === 'next') {
|
|
65
66
|
stats.increaseArrowDown();
|
|
66
|
-
|
|
67
|
+
if (useBetterTypeaheadNavigation) {
|
|
68
|
+
/**
|
|
69
|
+
* See: https://product-fabric.atlassian.net/browse/ED-17200
|
|
70
|
+
* `selectedIndex` is forced to -1 now to not immediately focus the typeahead
|
|
71
|
+
* and only do so when there is explicit logic to focus into the typeahead
|
|
72
|
+
* options.
|
|
73
|
+
*
|
|
74
|
+
* This check for "set index to 1 when -1"
|
|
75
|
+
* - is a temporary workaround to get back the previous behaviour without
|
|
76
|
+
* entirely reverting the a11y improvements
|
|
77
|
+
*
|
|
78
|
+
*/
|
|
79
|
+
if (selectedIndex === -1 && items.length > 1) {
|
|
80
|
+
nextIndex = 1;
|
|
81
|
+
} else {
|
|
82
|
+
nextIndex = selectedIndex >= items.length - 1 ? 0 : selectedIndex + 1;
|
|
83
|
+
}
|
|
84
|
+
} else {
|
|
85
|
+
nextIndex = selectedIndex >= items.length - 1 ? 0 : selectedIndex + 1;
|
|
86
|
+
}
|
|
67
87
|
} else {
|
|
68
88
|
stats.increaseArrowUp();
|
|
69
89
|
nextIndex = selectedIndex <= 0 ? items.length - 1 : selectedIndex - 1;
|
package/dist/esm/version.json
CHANGED
|
@@ -5,10 +5,11 @@ declare type FactoryProps = {
|
|
|
5
5
|
intl: IntlShape;
|
|
6
6
|
popupMountRef: PopupMountPointReference;
|
|
7
7
|
createAnalyticsEvent?: CreateUIAnalyticsEvent;
|
|
8
|
+
useBetterTypeaheadNavigation: boolean;
|
|
8
9
|
};
|
|
9
10
|
declare type FactoryReturn = {
|
|
10
11
|
createDecorations: CreateTypeAheadDecorations;
|
|
11
12
|
removeDecorations: RemoveTypeAheadDecorations;
|
|
12
13
|
};
|
|
13
|
-
export declare const factoryDecorations: ({ intl, popupMountRef, createAnalyticsEvent, }: FactoryProps) => FactoryReturn;
|
|
14
|
+
export declare const factoryDecorations: ({ intl, popupMountRef, createAnalyticsEvent, useBetterTypeaheadNavigation, }: FactoryProps) => FactoryReturn;
|
|
14
15
|
export {};
|
|
@@ -9,6 +9,7 @@ declare type Props = {
|
|
|
9
9
|
typeAheadHandlers: Array<TypeAheadHandler>;
|
|
10
10
|
createAnalyticsEvent?: CreateUIAnalyticsEvent;
|
|
11
11
|
getIntl: () => IntlShape;
|
|
12
|
+
useBetterTypeaheadNavigation: boolean;
|
|
12
13
|
};
|
|
13
|
-
export declare function createPlugin({ reactDispatch, popupMountRef, createAnalyticsEvent, typeAheadHandlers, getIntl, }: Props): SafePlugin;
|
|
14
|
+
export declare function createPlugin({ reactDispatch, popupMountRef, createAnalyticsEvent, typeAheadHandlers, getIntl, useBetterTypeaheadNavigation, }: Props): SafePlugin;
|
|
14
15
|
export {};
|