@atlaskit/editor-plugin-type-ahead 2.3.0 → 2.3.2
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/open-typeahead-at-cursor.js +8 -4
- package/dist/cjs/pm-plugins/main.js +2 -1
- package/dist/cjs/pm-plugins/reducer.js +8 -4
- package/dist/cjs/typeAheadPlugin.js +4 -2
- package/dist/cjs/ui/InputQuery.js +12 -7
- package/dist/cjs/ui/TypeAheadPopup.js +11 -4
- package/dist/es2019/pm-plugins/commands/open-typeahead-at-cursor.js +8 -4
- package/dist/es2019/pm-plugins/main.js +2 -1
- package/dist/es2019/pm-plugins/reducer.js +8 -4
- package/dist/es2019/typeAheadPlugin.js +4 -2
- package/dist/es2019/ui/InputQuery.js +13 -7
- package/dist/es2019/ui/TypeAheadPopup.js +13 -4
- package/dist/esm/pm-plugins/commands/open-typeahead-at-cursor.js +8 -4
- package/dist/esm/pm-plugins/main.js +2 -1
- package/dist/esm/pm-plugins/reducer.js +8 -4
- package/dist/esm/typeAheadPlugin.js +4 -2
- package/dist/esm/ui/InputQuery.js +12 -7
- package/dist/esm/ui/TypeAheadPopup.js +11 -4
- package/dist/types/pm-plugins/commands/open-typeahead-at-cursor.d.ts +3 -9
- package/dist/types/typeAheadPluginType.d.ts +1 -6
- package/dist/types/types/index.d.ts +10 -0
- package/dist/types-ts4.5/pm-plugins/commands/open-typeahead-at-cursor.d.ts +3 -9
- package/dist/types-ts4.5/typeAheadPluginType.d.ts +1 -6
- package/dist/types-ts4.5/types/index.d.ts +10 -0
- package/package.json +6 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-type-ahead
|
|
2
2
|
|
|
3
|
+
## 2.3.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 2.3.1
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#135114](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135114)
|
|
14
|
+
[`10c7a0e5424f9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/10c7a0e5424f9) -
|
|
15
|
+
Remove the typeahead trigger when a users actions closes the panel, under
|
|
16
|
+
`platform_editor_controls` experiment and `platform_editor_controls_patch_1` feature gate
|
|
17
|
+
|
|
3
18
|
## 2.3.0
|
|
4
19
|
|
|
5
20
|
### Minor Changes
|
|
@@ -12,13 +12,15 @@ var openTypeAhead = exports.openTypeAhead = function openTypeAhead(props) {
|
|
|
12
12
|
return function (tr) {
|
|
13
13
|
var triggerHandler = props.triggerHandler,
|
|
14
14
|
inputMethod = props.inputMethod,
|
|
15
|
-
query = props.query
|
|
15
|
+
query = props.query,
|
|
16
|
+
removePrefixTriggerOnCancel = props.removePrefixTriggerOnCancel;
|
|
16
17
|
tr.setMeta(_key.pluginKey, {
|
|
17
18
|
action: _actions.ACTIONS.OPEN_TYPEAHEAD_AT_CURSOR,
|
|
18
19
|
params: {
|
|
19
20
|
triggerHandler: triggerHandler,
|
|
20
21
|
inputMethod: inputMethod,
|
|
21
|
-
query: query
|
|
22
|
+
query: query,
|
|
23
|
+
removePrefixTriggerOnCancel: removePrefixTriggerOnCancel
|
|
22
24
|
}
|
|
23
25
|
});
|
|
24
26
|
};
|
|
@@ -26,13 +28,15 @@ var openTypeAhead = exports.openTypeAhead = function openTypeAhead(props) {
|
|
|
26
28
|
var openTypeAheadAtCursor = exports.openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
|
|
27
29
|
var triggerHandler = _ref.triggerHandler,
|
|
28
30
|
inputMethod = _ref.inputMethod,
|
|
29
|
-
query = _ref.query
|
|
31
|
+
query = _ref.query,
|
|
32
|
+
removePrefixTriggerOnCancel = _ref.removePrefixTriggerOnCancel;
|
|
30
33
|
return function (_ref2) {
|
|
31
34
|
var tr = _ref2.tr;
|
|
32
35
|
openTypeAhead({
|
|
33
36
|
triggerHandler: triggerHandler,
|
|
34
37
|
inputMethod: inputMethod,
|
|
35
|
-
query: query
|
|
38
|
+
query: query,
|
|
39
|
+
removePrefixTriggerOnCancel: removePrefixTriggerOnCancel
|
|
36
40
|
})(tr);
|
|
37
41
|
var selection = tr.selection;
|
|
38
42
|
var isInline = selection instanceof _state.NodeSelection && selection.node.type.isInline;
|
|
@@ -61,7 +61,8 @@ function createPlugin(_ref) {
|
|
|
61
61
|
errorInfo: null,
|
|
62
62
|
selectedIndex: -1,
|
|
63
63
|
stats: null,
|
|
64
|
-
inputMethod: null
|
|
64
|
+
inputMethod: null,
|
|
65
|
+
removePrefixTriggerOnCancel: undefined
|
|
65
66
|
};
|
|
66
67
|
},
|
|
67
68
|
apply: function apply(tr, currentPluginState, oldEditorState, state) {
|
|
@@ -51,7 +51,8 @@ var createReducer = exports.createReducer = function createReducer(_ref) {
|
|
|
51
51
|
triggerHandler = _ref2.triggerHandler,
|
|
52
52
|
inputMethod = _ref2.inputMethod,
|
|
53
53
|
reopenQuery = _ref2.reopenQuery,
|
|
54
|
-
selectedIndex = _ref2.selectedIndex
|
|
54
|
+
selectedIndex = _ref2.selectedIndex,
|
|
55
|
+
removePrefixTriggerOnCancel = _ref2.removePrefixTriggerOnCancel;
|
|
55
56
|
removeDecorations(currentPluginState.decorationSet);
|
|
56
57
|
var _createDecorations = createDecorations(tr, {
|
|
57
58
|
triggerHandler: triggerHandler,
|
|
@@ -69,7 +70,8 @@ var createReducer = exports.createReducer = function createReducer(_ref) {
|
|
|
69
70
|
inputMethod: inputMethod,
|
|
70
71
|
selectedIndex: typeof selectedIndex === 'number' ? selectedIndex : -1,
|
|
71
72
|
items: [],
|
|
72
|
-
query: reopenQuery || ''
|
|
73
|
+
query: reopenQuery || '',
|
|
74
|
+
removePrefixTriggerOnCancel: removePrefixTriggerOnCancel
|
|
73
75
|
});
|
|
74
76
|
};
|
|
75
77
|
var closeMenu = function closeMenu(currentPluginState) {
|
|
@@ -81,7 +83,8 @@ var createReducer = exports.createReducer = function createReducer(_ref) {
|
|
|
81
83
|
decorationSet: _view.DecorationSet.empty,
|
|
82
84
|
stats: null,
|
|
83
85
|
triggerHandler: undefined,
|
|
84
|
-
items: []
|
|
86
|
+
items: [],
|
|
87
|
+
removePrefixTriggerOnCancel: undefined
|
|
85
88
|
});
|
|
86
89
|
};
|
|
87
90
|
return function (tr, currentPluginState, typeAheadStepOverride) {
|
|
@@ -116,7 +119,8 @@ var createReducer = exports.createReducer = function createReducer(_ref) {
|
|
|
116
119
|
tr: tr,
|
|
117
120
|
triggerHandler: params.triggerHandler,
|
|
118
121
|
inputMethod: params.inputMethod,
|
|
119
|
-
reopenQuery: params.query
|
|
122
|
+
reopenQuery: params.query,
|
|
123
|
+
removePrefixTriggerOnCancel: params.removePrefixTriggerOnCancel
|
|
120
124
|
});
|
|
121
125
|
} else if (shouldCloseMenu) {
|
|
122
126
|
return closeMenu(currentPluginState);
|
|
@@ -35,11 +35,13 @@ var createOpenAtTransaction = function createOpenAtTransaction(editorAnalyticsAP
|
|
|
35
35
|
return function (tr) {
|
|
36
36
|
var triggerHandler = props.triggerHandler,
|
|
37
37
|
inputMethod = props.inputMethod,
|
|
38
|
-
query = props.query
|
|
38
|
+
query = props.query,
|
|
39
|
+
removePrefixTriggerOnCancel = props.removePrefixTriggerOnCancel;
|
|
39
40
|
(0, _openTypeaheadAtCursor.openTypeAheadAtCursor)({
|
|
40
41
|
triggerHandler: triggerHandler,
|
|
41
42
|
inputMethod: inputMethod,
|
|
42
|
-
query: query
|
|
43
|
+
query: query,
|
|
44
|
+
removePrefixTriggerOnCancel: removePrefixTriggerOnCancel
|
|
43
45
|
})({
|
|
44
46
|
tr: tr
|
|
45
47
|
});
|
|
@@ -15,6 +15,7 @@ var _browser = require("@atlaskit/editor-common/browser");
|
|
|
15
15
|
var _typeAhead = require("@atlaskit/editor-common/type-ahead");
|
|
16
16
|
var _ui = require("@atlaskit/editor-common/ui");
|
|
17
17
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
18
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
18
19
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
19
20
|
var _constants = require("../pm-plugins/constants");
|
|
20
21
|
var _utils = require("../pm-plugins/utils");
|
|
@@ -109,6 +110,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
|
|
|
109
110
|
query = _useState2[0],
|
|
110
111
|
setQuery = _useState2[1];
|
|
111
112
|
var isEditorControlsEnabled = (0, _experiments.editorExperiment)('platform_editor_insertion', 'variant1');
|
|
113
|
+
var isEditorControlsPatch2Enabled = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2');
|
|
112
114
|
var _useState3 = (0, _react.useState)(isEditorControlsEnabled && triggerQueryPrefix === '/'),
|
|
113
115
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
114
116
|
showPlaceholder = _useState4[0],
|
|
@@ -139,7 +141,8 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
|
|
|
139
141
|
var text = cleanedInputContent();
|
|
140
142
|
var stopDefault = false;
|
|
141
143
|
var _ref2 = (0, _utils.getPluginState)(editorView.state) || {},
|
|
142
|
-
selectedIndex = _ref2.selectedIndex
|
|
144
|
+
selectedIndex = _ref2.selectedIndex,
|
|
145
|
+
removePrefixTriggerOnCancel = _ref2.removePrefixTriggerOnCancel;
|
|
143
146
|
setInFocus(true);
|
|
144
147
|
switch (key) {
|
|
145
148
|
case ' ':
|
|
@@ -148,7 +151,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
|
|
|
148
151
|
cancel({
|
|
149
152
|
forceFocusOnEditor: true,
|
|
150
153
|
text: ' ',
|
|
151
|
-
addPrefixTrigger: true,
|
|
154
|
+
addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
|
|
152
155
|
setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED
|
|
153
156
|
});
|
|
154
157
|
stopDefault = true;
|
|
@@ -161,7 +164,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
|
|
|
161
164
|
cancel({
|
|
162
165
|
text: text,
|
|
163
166
|
forceFocusOnEditor: true,
|
|
164
|
-
addPrefixTrigger: true,
|
|
167
|
+
addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
|
|
165
168
|
setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED
|
|
166
169
|
});
|
|
167
170
|
stopDefault = true;
|
|
@@ -233,7 +236,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
|
|
|
233
236
|
event.preventDefault();
|
|
234
237
|
return false;
|
|
235
238
|
}
|
|
236
|
-
}, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state]);
|
|
239
|
+
}, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state, isEditorControlsPatch2Enabled]);
|
|
237
240
|
var onClick = (0, _react.useCallback)(function (event) {
|
|
238
241
|
var _inputRef$current;
|
|
239
242
|
event.stopPropagation();
|
|
@@ -247,6 +250,8 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
|
|
|
247
250
|
return;
|
|
248
251
|
}
|
|
249
252
|
var element = ref.current;
|
|
253
|
+
var _ref3 = (0, _utils.getPluginState)(editorView.state) || {},
|
|
254
|
+
removePrefixTriggerOnCancel = _ref3.removePrefixTriggerOnCancel;
|
|
250
255
|
var onFocusIn = function onFocusIn(event) {
|
|
251
256
|
onQueryFocus();
|
|
252
257
|
};
|
|
@@ -263,7 +268,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
|
|
|
263
268
|
}
|
|
264
269
|
cancel({
|
|
265
270
|
forceFocusOnEditor: true,
|
|
266
|
-
addPrefixTrigger: true,
|
|
271
|
+
addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
|
|
267
272
|
text: cleanedInputContent(),
|
|
268
273
|
setSelectionAt: isMovingRight ? _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED : _constants.CloseSelectionOptions.BEFORE_TEXT_INSERTED
|
|
269
274
|
});
|
|
@@ -293,7 +298,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
|
|
|
293
298
|
return;
|
|
294
299
|
}
|
|
295
300
|
cancel({
|
|
296
|
-
addPrefixTrigger: true,
|
|
301
|
+
addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
|
|
297
302
|
text: cleanedInputContent(),
|
|
298
303
|
setSelectionAt: _constants.CloseSelectionOptions.BEFORE_TEXT_INSERTED,
|
|
299
304
|
forceFocusOnEditor: false
|
|
@@ -393,7 +398,7 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
|
|
|
393
398
|
element.removeEventListener('input', onInput);
|
|
394
399
|
}
|
|
395
400
|
};
|
|
396
|
-
}, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
|
|
401
|
+
}, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state, isEditorControlsPatch2Enabled]);
|
|
397
402
|
(0, _react.useLayoutEffect)(function () {
|
|
398
403
|
var hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
|
|
399
404
|
if (ref.current && forceFocus) {
|
|
@@ -17,8 +17,10 @@ var _ui = require("@atlaskit/editor-common/ui");
|
|
|
17
17
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
18
18
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
19
19
|
var _colors = require("@atlaskit/theme/colors");
|
|
20
|
+
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
20
21
|
var _closeTypeAhead = require("../pm-plugins/commands/close-type-ahead");
|
|
21
22
|
var _constants = require("../pm-plugins/constants");
|
|
23
|
+
var _utils = require("../pm-plugins/utils");
|
|
22
24
|
var _TypeAheadErrorFallback = require("./TypeAheadErrorFallback");
|
|
23
25
|
var _TypeAheadList = require("./TypeAheadList");
|
|
24
26
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
@@ -80,6 +82,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
|
|
|
80
82
|
var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['featureFlags']),
|
|
81
83
|
featureFlagsState = _useSharedPluginState.featureFlagsState;
|
|
82
84
|
var moreElementsInQuickInsertViewEnabled = (featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.moreElementsInQuickInsertView) && triggerHandler.id === _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT;
|
|
85
|
+
var isEditorControlsPatch2Enabled = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2');
|
|
83
86
|
var defaultMenuHeight = (0, _react.useMemo)(function () {
|
|
84
87
|
return moreElementsInQuickInsertViewEnabled ? DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW : DEFAULT_TYPEAHEAD_MENU_HEIGHT;
|
|
85
88
|
}, [moreElementsInQuickInsertViewEnabled]);
|
|
@@ -204,6 +207,8 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
|
|
|
204
207
|
};
|
|
205
208
|
}, [anchorElement, popupsScrollableElement, getFitHeightDebounced, getFitHeight]);
|
|
206
209
|
(0, _react.useLayoutEffect)(function () {
|
|
210
|
+
var _ref2 = (0, _utils.getPluginState)(editorView.state) || {},
|
|
211
|
+
removePrefixTriggerOnCancel = _ref2.removePrefixTriggerOnCancel;
|
|
207
212
|
var focusOut = function focusOut(event) {
|
|
208
213
|
var _window$getSelection;
|
|
209
214
|
var relatedTarget = event.relatedTarget;
|
|
@@ -253,7 +258,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
|
|
|
253
258
|
}
|
|
254
259
|
}
|
|
255
260
|
cancel({
|
|
256
|
-
addPrefixTrigger: true,
|
|
261
|
+
addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
|
|
257
262
|
setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED,
|
|
258
263
|
forceFocusOnEditor: false
|
|
259
264
|
});
|
|
@@ -267,15 +272,17 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
|
|
|
267
272
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
268
273
|
element === null || element === void 0 || element.removeEventListener('focusout', focusOut);
|
|
269
274
|
};
|
|
270
|
-
}, [ref, cancel]);
|
|
275
|
+
}, [ref, cancel, editorView.state, isEditorControlsPatch2Enabled]);
|
|
271
276
|
|
|
272
277
|
// TODO: ED-17443 - When you press escape on typeahead panel, it should remove focus and close the panel
|
|
273
278
|
// This is the expected keyboard behaviour advised by the Accessibility team
|
|
274
279
|
(0, _react.useLayoutEffect)(function () {
|
|
280
|
+
var _ref3 = (0, _utils.getPluginState)(editorView.state) || {},
|
|
281
|
+
removePrefixTriggerOnCancel = _ref3.removePrefixTriggerOnCancel;
|
|
275
282
|
var escape = function escape(event) {
|
|
276
283
|
if (event.key === 'Escape') {
|
|
277
284
|
cancel({
|
|
278
|
-
addPrefixTrigger: true,
|
|
285
|
+
addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
|
|
279
286
|
setSelectionAt: _constants.CloseSelectionOptions.AFTER_TEXT_INSERTED,
|
|
280
287
|
forceFocusOnEditor: true
|
|
281
288
|
});
|
|
@@ -290,7 +297,7 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
|
|
|
290
297
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
291
298
|
element === null || element === void 0 || element.removeEventListener('keydown', escape);
|
|
292
299
|
};
|
|
293
|
-
}, [ref, cancel]);
|
|
300
|
+
}, [ref, cancel, editorView.state, isEditorControlsPatch2Enabled]);
|
|
294
301
|
|
|
295
302
|
// @ts-ignore
|
|
296
303
|
var openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;
|
|
@@ -6,28 +6,32 @@ export const openTypeAhead = props => tr => {
|
|
|
6
6
|
const {
|
|
7
7
|
triggerHandler,
|
|
8
8
|
inputMethod,
|
|
9
|
-
query
|
|
9
|
+
query,
|
|
10
|
+
removePrefixTriggerOnCancel
|
|
10
11
|
} = props;
|
|
11
12
|
tr.setMeta(pluginKey, {
|
|
12
13
|
action: ACTIONS.OPEN_TYPEAHEAD_AT_CURSOR,
|
|
13
14
|
params: {
|
|
14
15
|
triggerHandler,
|
|
15
16
|
inputMethod,
|
|
16
|
-
query
|
|
17
|
+
query,
|
|
18
|
+
removePrefixTriggerOnCancel
|
|
17
19
|
}
|
|
18
20
|
});
|
|
19
21
|
};
|
|
20
22
|
export const openTypeAheadAtCursor = ({
|
|
21
23
|
triggerHandler,
|
|
22
24
|
inputMethod,
|
|
23
|
-
query
|
|
25
|
+
query,
|
|
26
|
+
removePrefixTriggerOnCancel
|
|
24
27
|
}) => ({
|
|
25
28
|
tr
|
|
26
29
|
}) => {
|
|
27
30
|
openTypeAhead({
|
|
28
31
|
triggerHandler,
|
|
29
32
|
inputMethod,
|
|
30
|
-
query
|
|
33
|
+
query,
|
|
34
|
+
removePrefixTriggerOnCancel
|
|
31
35
|
})(tr);
|
|
32
36
|
const {
|
|
33
37
|
selection
|
|
@@ -38,7 +38,8 @@ export const createReducer = ({
|
|
|
38
38
|
triggerHandler,
|
|
39
39
|
inputMethod,
|
|
40
40
|
reopenQuery,
|
|
41
|
-
selectedIndex
|
|
41
|
+
selectedIndex,
|
|
42
|
+
removePrefixTriggerOnCancel
|
|
42
43
|
}) => {
|
|
43
44
|
removeDecorations(currentPluginState.decorationSet);
|
|
44
45
|
const {
|
|
@@ -59,7 +60,8 @@ export const createReducer = ({
|
|
|
59
60
|
inputMethod,
|
|
60
61
|
selectedIndex: typeof selectedIndex === 'number' ? selectedIndex : -1,
|
|
61
62
|
items: [],
|
|
62
|
-
query: reopenQuery || ''
|
|
63
|
+
query: reopenQuery || '',
|
|
64
|
+
removePrefixTriggerOnCancel
|
|
63
65
|
};
|
|
64
66
|
};
|
|
65
67
|
const closeMenu = currentPluginState => {
|
|
@@ -72,7 +74,8 @@ export const createReducer = ({
|
|
|
72
74
|
decorationSet: DecorationSet.empty,
|
|
73
75
|
stats: null,
|
|
74
76
|
triggerHandler: undefined,
|
|
75
|
-
items: []
|
|
77
|
+
items: [],
|
|
78
|
+
removePrefixTriggerOnCancel: undefined
|
|
76
79
|
};
|
|
77
80
|
};
|
|
78
81
|
return (tr, currentPluginState, typeAheadStepOverride) => {
|
|
@@ -108,7 +111,8 @@ export const createReducer = ({
|
|
|
108
111
|
tr,
|
|
109
112
|
triggerHandler: params.triggerHandler,
|
|
110
113
|
inputMethod: params.inputMethod,
|
|
111
|
-
reopenQuery: params.query
|
|
114
|
+
reopenQuery: params.query,
|
|
115
|
+
removePrefixTriggerOnCancel: params.removePrefixTriggerOnCancel
|
|
112
116
|
});
|
|
113
117
|
} else if (shouldCloseMenu) {
|
|
114
118
|
return closeMenu(currentPluginState);
|
|
@@ -26,12 +26,14 @@ const createOpenAtTransaction = editorAnalyticsAPI => props => tr => {
|
|
|
26
26
|
const {
|
|
27
27
|
triggerHandler,
|
|
28
28
|
inputMethod,
|
|
29
|
-
query
|
|
29
|
+
query,
|
|
30
|
+
removePrefixTriggerOnCancel
|
|
30
31
|
} = props;
|
|
31
32
|
openTypeAheadAtCursor({
|
|
32
33
|
triggerHandler,
|
|
33
34
|
inputMethod,
|
|
34
|
-
query
|
|
35
|
+
query,
|
|
36
|
+
removePrefixTriggerOnCancel
|
|
35
37
|
})({
|
|
36
38
|
tr
|
|
37
39
|
});
|
|
@@ -12,6 +12,7 @@ import { browser } from '@atlaskit/editor-common/browser';
|
|
|
12
12
|
import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
|
|
13
13
|
import { AssistiveText } from '@atlaskit/editor-common/ui';
|
|
14
14
|
import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
|
|
15
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
15
16
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
16
17
|
import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_ELEMENT_ID, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
|
|
17
18
|
import { getPluginState } from '../pm-plugins/utils';
|
|
@@ -95,6 +96,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
|
|
|
95
96
|
const inputRef = useRef(null);
|
|
96
97
|
const [query, setQuery] = useState(null);
|
|
97
98
|
const isEditorControlsEnabled = editorExperiment('platform_editor_insertion', 'variant1');
|
|
99
|
+
const isEditorControlsPatch2Enabled = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2');
|
|
98
100
|
const [showPlaceholder, setShowPlaceholder] = useState(isEditorControlsEnabled && triggerQueryPrefix === '/');
|
|
99
101
|
const cleanedInputContent = useCallback(() => {
|
|
100
102
|
var _ref$current;
|
|
@@ -119,7 +121,8 @@ export const InputQuery = /*#__PURE__*/React.memo(({
|
|
|
119
121
|
const text = cleanedInputContent();
|
|
120
122
|
let stopDefault = false;
|
|
121
123
|
const {
|
|
122
|
-
selectedIndex
|
|
124
|
+
selectedIndex,
|
|
125
|
+
removePrefixTriggerOnCancel
|
|
123
126
|
} = getPluginState(editorView.state) || {};
|
|
124
127
|
setInFocus(true);
|
|
125
128
|
switch (key) {
|
|
@@ -129,7 +132,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
|
|
|
129
132
|
cancel({
|
|
130
133
|
forceFocusOnEditor: true,
|
|
131
134
|
text: ' ',
|
|
132
|
-
addPrefixTrigger: true,
|
|
135
|
+
addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
|
|
133
136
|
setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED
|
|
134
137
|
});
|
|
135
138
|
stopDefault = true;
|
|
@@ -142,7 +145,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
|
|
|
142
145
|
cancel({
|
|
143
146
|
text,
|
|
144
147
|
forceFocusOnEditor: true,
|
|
145
|
-
addPrefixTrigger: true,
|
|
148
|
+
addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
|
|
146
149
|
setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED
|
|
147
150
|
});
|
|
148
151
|
stopDefault = true;
|
|
@@ -214,7 +217,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
|
|
|
214
217
|
event.preventDefault();
|
|
215
218
|
return false;
|
|
216
219
|
}
|
|
217
|
-
}, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state]);
|
|
220
|
+
}, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state, isEditorControlsPatch2Enabled]);
|
|
218
221
|
const onClick = useCallback(event => {
|
|
219
222
|
var _inputRef$current;
|
|
220
223
|
event.stopPropagation();
|
|
@@ -230,6 +233,9 @@ export const InputQuery = /*#__PURE__*/React.memo(({
|
|
|
230
233
|
const {
|
|
231
234
|
current: element
|
|
232
235
|
} = ref;
|
|
236
|
+
const {
|
|
237
|
+
removePrefixTriggerOnCancel
|
|
238
|
+
} = getPluginState(editorView.state) || {};
|
|
233
239
|
const onFocusIn = event => {
|
|
234
240
|
onQueryFocus();
|
|
235
241
|
};
|
|
@@ -246,7 +252,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
|
|
|
246
252
|
}
|
|
247
253
|
cancel({
|
|
248
254
|
forceFocusOnEditor: true,
|
|
249
|
-
addPrefixTrigger: true,
|
|
255
|
+
addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
|
|
250
256
|
text: cleanedInputContent(),
|
|
251
257
|
setSelectionAt: isMovingRight ? CloseSelectionOptions.AFTER_TEXT_INSERTED : CloseSelectionOptions.BEFORE_TEXT_INSERTED
|
|
252
258
|
});
|
|
@@ -278,7 +284,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
|
|
|
278
284
|
return;
|
|
279
285
|
}
|
|
280
286
|
cancel({
|
|
281
|
-
addPrefixTrigger: true,
|
|
287
|
+
addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
|
|
282
288
|
text: cleanedInputContent(),
|
|
283
289
|
setSelectionAt: CloseSelectionOptions.BEFORE_TEXT_INSERTED,
|
|
284
290
|
forceFocusOnEditor: false
|
|
@@ -382,7 +388,7 @@ export const InputQuery = /*#__PURE__*/React.memo(({
|
|
|
382
388
|
element.removeEventListener('input', onInput);
|
|
383
389
|
}
|
|
384
390
|
};
|
|
385
|
-
}, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
|
|
391
|
+
}, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state, isEditorControlsPatch2Enabled]);
|
|
386
392
|
useLayoutEffect(() => {
|
|
387
393
|
const hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
|
|
388
394
|
if (ref.current && forceFocus) {
|
|
@@ -14,8 +14,10 @@ import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
|
|
|
14
14
|
import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
|
|
15
15
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
16
16
|
import { N0, N50A, N60A } from '@atlaskit/theme/colors';
|
|
17
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
17
18
|
import { closeTypeAhead } from '../pm-plugins/commands/close-type-ahead';
|
|
18
19
|
import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
|
|
20
|
+
import { getPluginState } from '../pm-plugins/utils';
|
|
19
21
|
import { TypeAheadErrorFallback } from './TypeAheadErrorFallback';
|
|
20
22
|
import { TypeAheadList } from './TypeAheadList';
|
|
21
23
|
const DEFAULT_TYPEAHEAD_MENU_HEIGHT = 380;
|
|
@@ -72,6 +74,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
|
|
|
72
74
|
featureFlagsState
|
|
73
75
|
} = useSharedPluginState(api, ['featureFlags']);
|
|
74
76
|
const moreElementsInQuickInsertViewEnabled = (featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.moreElementsInQuickInsertView) && triggerHandler.id === TypeAheadAvailableNodes.QUICK_INSERT;
|
|
77
|
+
const isEditorControlsPatch2Enabled = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2');
|
|
75
78
|
const defaultMenuHeight = useMemo(() => moreElementsInQuickInsertViewEnabled ? DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW : DEFAULT_TYPEAHEAD_MENU_HEIGHT, [moreElementsInQuickInsertViewEnabled]);
|
|
76
79
|
const startTime = useMemo(() => performance.now(),
|
|
77
80
|
// In case those props changes
|
|
@@ -191,6 +194,9 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
|
|
|
191
194
|
};
|
|
192
195
|
}, [anchorElement, popupsScrollableElement, getFitHeightDebounced, getFitHeight]);
|
|
193
196
|
useLayoutEffect(() => {
|
|
197
|
+
const {
|
|
198
|
+
removePrefixTriggerOnCancel
|
|
199
|
+
} = getPluginState(editorView.state) || {};
|
|
194
200
|
const focusOut = event => {
|
|
195
201
|
var _window$getSelection;
|
|
196
202
|
const {
|
|
@@ -242,7 +248,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
|
|
|
242
248
|
}
|
|
243
249
|
}
|
|
244
250
|
cancel({
|
|
245
|
-
addPrefixTrigger: true,
|
|
251
|
+
addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
|
|
246
252
|
setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
|
|
247
253
|
forceFocusOnEditor: false
|
|
248
254
|
});
|
|
@@ -258,15 +264,18 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
|
|
|
258
264
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
259
265
|
element === null || element === void 0 ? void 0 : element.removeEventListener('focusout', focusOut);
|
|
260
266
|
};
|
|
261
|
-
}, [ref, cancel]);
|
|
267
|
+
}, [ref, cancel, editorView.state, isEditorControlsPatch2Enabled]);
|
|
262
268
|
|
|
263
269
|
// TODO: ED-17443 - When you press escape on typeahead panel, it should remove focus and close the panel
|
|
264
270
|
// This is the expected keyboard behaviour advised by the Accessibility team
|
|
265
271
|
useLayoutEffect(() => {
|
|
272
|
+
const {
|
|
273
|
+
removePrefixTriggerOnCancel
|
|
274
|
+
} = getPluginState(editorView.state) || {};
|
|
266
275
|
const escape = event => {
|
|
267
276
|
if (event.key === 'Escape') {
|
|
268
277
|
cancel({
|
|
269
|
-
addPrefixTrigger: true,
|
|
278
|
+
addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
|
|
270
279
|
setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
|
|
271
280
|
forceFocusOnEditor: true
|
|
272
281
|
});
|
|
@@ -283,7 +292,7 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
|
|
|
283
292
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
284
293
|
element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', escape);
|
|
285
294
|
};
|
|
286
|
-
}, [ref, cancel]);
|
|
295
|
+
}, [ref, cancel, editorView.state, isEditorControlsPatch2Enabled]);
|
|
287
296
|
|
|
288
297
|
// @ts-ignore
|
|
289
298
|
const openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;
|
|
@@ -6,13 +6,15 @@ export var openTypeAhead = function openTypeAhead(props) {
|
|
|
6
6
|
return function (tr) {
|
|
7
7
|
var triggerHandler = props.triggerHandler,
|
|
8
8
|
inputMethod = props.inputMethod,
|
|
9
|
-
query = props.query
|
|
9
|
+
query = props.query,
|
|
10
|
+
removePrefixTriggerOnCancel = props.removePrefixTriggerOnCancel;
|
|
10
11
|
tr.setMeta(pluginKey, {
|
|
11
12
|
action: ACTIONS.OPEN_TYPEAHEAD_AT_CURSOR,
|
|
12
13
|
params: {
|
|
13
14
|
triggerHandler: triggerHandler,
|
|
14
15
|
inputMethod: inputMethod,
|
|
15
|
-
query: query
|
|
16
|
+
query: query,
|
|
17
|
+
removePrefixTriggerOnCancel: removePrefixTriggerOnCancel
|
|
16
18
|
}
|
|
17
19
|
});
|
|
18
20
|
};
|
|
@@ -20,13 +22,15 @@ export var openTypeAhead = function openTypeAhead(props) {
|
|
|
20
22
|
export var openTypeAheadAtCursor = function openTypeAheadAtCursor(_ref) {
|
|
21
23
|
var triggerHandler = _ref.triggerHandler,
|
|
22
24
|
inputMethod = _ref.inputMethod,
|
|
23
|
-
query = _ref.query
|
|
25
|
+
query = _ref.query,
|
|
26
|
+
removePrefixTriggerOnCancel = _ref.removePrefixTriggerOnCancel;
|
|
24
27
|
return function (_ref2) {
|
|
25
28
|
var tr = _ref2.tr;
|
|
26
29
|
openTypeAhead({
|
|
27
30
|
triggerHandler: triggerHandler,
|
|
28
31
|
inputMethod: inputMethod,
|
|
29
|
-
query: query
|
|
32
|
+
query: query,
|
|
33
|
+
removePrefixTriggerOnCancel: removePrefixTriggerOnCancel
|
|
30
34
|
})(tr);
|
|
31
35
|
var selection = tr.selection;
|
|
32
36
|
var isInline = selection instanceof NodeSelection && selection.node.type.isInline;
|
|
@@ -55,7 +55,8 @@ export function createPlugin(_ref) {
|
|
|
55
55
|
errorInfo: null,
|
|
56
56
|
selectedIndex: -1,
|
|
57
57
|
stats: null,
|
|
58
|
-
inputMethod: null
|
|
58
|
+
inputMethod: null,
|
|
59
|
+
removePrefixTriggerOnCancel: undefined
|
|
59
60
|
};
|
|
60
61
|
},
|
|
61
62
|
apply: function apply(tr, currentPluginState, oldEditorState, state) {
|
|
@@ -44,7 +44,8 @@ export var createReducer = function createReducer(_ref) {
|
|
|
44
44
|
triggerHandler = _ref2.triggerHandler,
|
|
45
45
|
inputMethod = _ref2.inputMethod,
|
|
46
46
|
reopenQuery = _ref2.reopenQuery,
|
|
47
|
-
selectedIndex = _ref2.selectedIndex
|
|
47
|
+
selectedIndex = _ref2.selectedIndex,
|
|
48
|
+
removePrefixTriggerOnCancel = _ref2.removePrefixTriggerOnCancel;
|
|
48
49
|
removeDecorations(currentPluginState.decorationSet);
|
|
49
50
|
var _createDecorations = createDecorations(tr, {
|
|
50
51
|
triggerHandler: triggerHandler,
|
|
@@ -62,7 +63,8 @@ export var createReducer = function createReducer(_ref) {
|
|
|
62
63
|
inputMethod: inputMethod,
|
|
63
64
|
selectedIndex: typeof selectedIndex === 'number' ? selectedIndex : -1,
|
|
64
65
|
items: [],
|
|
65
|
-
query: reopenQuery || ''
|
|
66
|
+
query: reopenQuery || '',
|
|
67
|
+
removePrefixTriggerOnCancel: removePrefixTriggerOnCancel
|
|
66
68
|
});
|
|
67
69
|
};
|
|
68
70
|
var closeMenu = function closeMenu(currentPluginState) {
|
|
@@ -74,7 +76,8 @@ export var createReducer = function createReducer(_ref) {
|
|
|
74
76
|
decorationSet: DecorationSet.empty,
|
|
75
77
|
stats: null,
|
|
76
78
|
triggerHandler: undefined,
|
|
77
|
-
items: []
|
|
79
|
+
items: [],
|
|
80
|
+
removePrefixTriggerOnCancel: undefined
|
|
78
81
|
});
|
|
79
82
|
};
|
|
80
83
|
return function (tr, currentPluginState, typeAheadStepOverride) {
|
|
@@ -109,7 +112,8 @@ export var createReducer = function createReducer(_ref) {
|
|
|
109
112
|
tr: tr,
|
|
110
113
|
triggerHandler: params.triggerHandler,
|
|
111
114
|
inputMethod: params.inputMethod,
|
|
112
|
-
reopenQuery: params.query
|
|
115
|
+
reopenQuery: params.query,
|
|
116
|
+
removePrefixTriggerOnCancel: params.removePrefixTriggerOnCancel
|
|
113
117
|
});
|
|
114
118
|
} else if (shouldCloseMenu) {
|
|
115
119
|
return closeMenu(currentPluginState);
|
|
@@ -27,11 +27,13 @@ var createOpenAtTransaction = function createOpenAtTransaction(editorAnalyticsAP
|
|
|
27
27
|
return function (tr) {
|
|
28
28
|
var triggerHandler = props.triggerHandler,
|
|
29
29
|
inputMethod = props.inputMethod,
|
|
30
|
-
query = props.query
|
|
30
|
+
query = props.query,
|
|
31
|
+
removePrefixTriggerOnCancel = props.removePrefixTriggerOnCancel;
|
|
31
32
|
openTypeAheadAtCursor({
|
|
32
33
|
triggerHandler: triggerHandler,
|
|
33
34
|
inputMethod: inputMethod,
|
|
34
|
-
query: query
|
|
35
|
+
query: query,
|
|
36
|
+
removePrefixTriggerOnCancel: removePrefixTriggerOnCancel
|
|
35
37
|
})({
|
|
36
38
|
tr: tr
|
|
37
39
|
});
|
|
@@ -13,6 +13,7 @@ import { browser } from '@atlaskit/editor-common/browser';
|
|
|
13
13
|
import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
|
|
14
14
|
import { AssistiveText } from '@atlaskit/editor-common/ui';
|
|
15
15
|
import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
|
|
16
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
16
17
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
17
18
|
import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_ELEMENT_ID, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
|
|
18
19
|
import { getPluginState } from '../pm-plugins/utils';
|
|
@@ -98,6 +99,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
98
99
|
query = _useState2[0],
|
|
99
100
|
setQuery = _useState2[1];
|
|
100
101
|
var isEditorControlsEnabled = editorExperiment('platform_editor_insertion', 'variant1');
|
|
102
|
+
var isEditorControlsPatch2Enabled = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2');
|
|
101
103
|
var _useState3 = useState(isEditorControlsEnabled && triggerQueryPrefix === '/'),
|
|
102
104
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
103
105
|
showPlaceholder = _useState4[0],
|
|
@@ -128,7 +130,8 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
128
130
|
var text = cleanedInputContent();
|
|
129
131
|
var stopDefault = false;
|
|
130
132
|
var _ref2 = getPluginState(editorView.state) || {},
|
|
131
|
-
selectedIndex = _ref2.selectedIndex
|
|
133
|
+
selectedIndex = _ref2.selectedIndex,
|
|
134
|
+
removePrefixTriggerOnCancel = _ref2.removePrefixTriggerOnCancel;
|
|
132
135
|
setInFocus(true);
|
|
133
136
|
switch (key) {
|
|
134
137
|
case ' ':
|
|
@@ -137,7 +140,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
137
140
|
cancel({
|
|
138
141
|
forceFocusOnEditor: true,
|
|
139
142
|
text: ' ',
|
|
140
|
-
addPrefixTrigger: true,
|
|
143
|
+
addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
|
|
141
144
|
setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED
|
|
142
145
|
});
|
|
143
146
|
stopDefault = true;
|
|
@@ -150,7 +153,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
150
153
|
cancel({
|
|
151
154
|
text: text,
|
|
152
155
|
forceFocusOnEditor: true,
|
|
153
|
-
addPrefixTrigger: true,
|
|
156
|
+
addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
|
|
154
157
|
setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED
|
|
155
158
|
});
|
|
156
159
|
stopDefault = true;
|
|
@@ -222,7 +225,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
222
225
|
event.preventDefault();
|
|
223
226
|
return false;
|
|
224
227
|
}
|
|
225
|
-
}, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state]);
|
|
228
|
+
}, [onUndoRedo, onItemSelect, selectNextItem, selectPreviousItem, cancel, cleanedInputContent, editorView.state, isEditorControlsPatch2Enabled]);
|
|
226
229
|
var onClick = useCallback(function (event) {
|
|
227
230
|
var _inputRef$current;
|
|
228
231
|
event.stopPropagation();
|
|
@@ -236,6 +239,8 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
236
239
|
return;
|
|
237
240
|
}
|
|
238
241
|
var element = ref.current;
|
|
242
|
+
var _ref3 = getPluginState(editorView.state) || {},
|
|
243
|
+
removePrefixTriggerOnCancel = _ref3.removePrefixTriggerOnCancel;
|
|
239
244
|
var onFocusIn = function onFocusIn(event) {
|
|
240
245
|
onQueryFocus();
|
|
241
246
|
};
|
|
@@ -252,7 +257,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
252
257
|
}
|
|
253
258
|
cancel({
|
|
254
259
|
forceFocusOnEditor: true,
|
|
255
|
-
addPrefixTrigger: true,
|
|
260
|
+
addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
|
|
256
261
|
text: cleanedInputContent(),
|
|
257
262
|
setSelectionAt: isMovingRight ? CloseSelectionOptions.AFTER_TEXT_INSERTED : CloseSelectionOptions.BEFORE_TEXT_INSERTED
|
|
258
263
|
});
|
|
@@ -282,7 +287,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
282
287
|
return;
|
|
283
288
|
}
|
|
284
289
|
cancel({
|
|
285
|
-
addPrefixTrigger: true,
|
|
290
|
+
addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
|
|
286
291
|
text: cleanedInputContent(),
|
|
287
292
|
setSelectionAt: CloseSelectionOptions.BEFORE_TEXT_INSERTED,
|
|
288
293
|
forceFocusOnEditor: false
|
|
@@ -382,7 +387,7 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
382
387
|
element.removeEventListener('input', onInput);
|
|
383
388
|
}
|
|
384
389
|
};
|
|
385
|
-
}, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state]);
|
|
390
|
+
}, [triggerQueryPrefix, cleanedInputContent, onQueryFocus, cancel, checkKeyEvent, editorView.state, isEditorControlsPatch2Enabled]);
|
|
386
391
|
useLayoutEffect(function () {
|
|
387
392
|
var hasReopenQuery = typeof reopenQuery === 'string' && reopenQuery.trim().length > 0;
|
|
388
393
|
if (ref.current && forceFocus) {
|
|
@@ -15,8 +15,10 @@ import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
|
|
|
15
15
|
import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
|
|
16
16
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
17
17
|
import { N0, N50A, N60A } from '@atlaskit/theme/colors';
|
|
18
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
18
19
|
import { closeTypeAhead } from '../pm-plugins/commands/close-type-ahead';
|
|
19
20
|
import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
|
|
21
|
+
import { getPluginState } from '../pm-plugins/utils';
|
|
20
22
|
import { TypeAheadErrorFallback } from './TypeAheadErrorFallback';
|
|
21
23
|
import { TypeAheadList } from './TypeAheadList';
|
|
22
24
|
var DEFAULT_TYPEAHEAD_MENU_HEIGHT = 380;
|
|
@@ -69,6 +71,7 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
|
|
|
69
71
|
var _useSharedPluginState = useSharedPluginState(api, ['featureFlags']),
|
|
70
72
|
featureFlagsState = _useSharedPluginState.featureFlagsState;
|
|
71
73
|
var moreElementsInQuickInsertViewEnabled = (featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.moreElementsInQuickInsertView) && triggerHandler.id === TypeAheadAvailableNodes.QUICK_INSERT;
|
|
74
|
+
var isEditorControlsPatch2Enabled = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2');
|
|
72
75
|
var defaultMenuHeight = useMemo(function () {
|
|
73
76
|
return moreElementsInQuickInsertViewEnabled ? DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW : DEFAULT_TYPEAHEAD_MENU_HEIGHT;
|
|
74
77
|
}, [moreElementsInQuickInsertViewEnabled]);
|
|
@@ -193,6 +196,8 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
|
|
|
193
196
|
};
|
|
194
197
|
}, [anchorElement, popupsScrollableElement, getFitHeightDebounced, getFitHeight]);
|
|
195
198
|
useLayoutEffect(function () {
|
|
199
|
+
var _ref2 = getPluginState(editorView.state) || {},
|
|
200
|
+
removePrefixTriggerOnCancel = _ref2.removePrefixTriggerOnCancel;
|
|
196
201
|
var focusOut = function focusOut(event) {
|
|
197
202
|
var _window$getSelection;
|
|
198
203
|
var relatedTarget = event.relatedTarget;
|
|
@@ -242,7 +247,7 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
|
|
|
242
247
|
}
|
|
243
248
|
}
|
|
244
249
|
cancel({
|
|
245
|
-
addPrefixTrigger: true,
|
|
250
|
+
addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
|
|
246
251
|
setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
|
|
247
252
|
forceFocusOnEditor: false
|
|
248
253
|
});
|
|
@@ -256,15 +261,17 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
|
|
|
256
261
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
257
262
|
element === null || element === void 0 || element.removeEventListener('focusout', focusOut);
|
|
258
263
|
};
|
|
259
|
-
}, [ref, cancel]);
|
|
264
|
+
}, [ref, cancel, editorView.state, isEditorControlsPatch2Enabled]);
|
|
260
265
|
|
|
261
266
|
// TODO: ED-17443 - When you press escape on typeahead panel, it should remove focus and close the panel
|
|
262
267
|
// This is the expected keyboard behaviour advised by the Accessibility team
|
|
263
268
|
useLayoutEffect(function () {
|
|
269
|
+
var _ref3 = getPluginState(editorView.state) || {},
|
|
270
|
+
removePrefixTriggerOnCancel = _ref3.removePrefixTriggerOnCancel;
|
|
264
271
|
var escape = function escape(event) {
|
|
265
272
|
if (event.key === 'Escape') {
|
|
266
273
|
cancel({
|
|
267
|
-
addPrefixTrigger: true,
|
|
274
|
+
addPrefixTrigger: isEditorControlsPatch2Enabled ? !removePrefixTriggerOnCancel : true,
|
|
268
275
|
setSelectionAt: CloseSelectionOptions.AFTER_TEXT_INSERTED,
|
|
269
276
|
forceFocusOnEditor: true
|
|
270
277
|
});
|
|
@@ -279,7 +286,7 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
|
|
|
279
286
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
280
287
|
element === null || element === void 0 || element.removeEventListener('keydown', escape);
|
|
281
288
|
};
|
|
282
|
-
}, [ref, cancel]);
|
|
289
|
+
}, [ref, cancel, editorView.state, isEditorControlsPatch2Enabled]);
|
|
283
290
|
|
|
284
291
|
// @ts-ignore
|
|
285
292
|
var openElementBrowserModal = triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.openElementBrowserModal;
|
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
import type { EditorCommand } from '@atlaskit/editor-common/types';
|
|
2
2
|
import type { Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
-
import type {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
inputMethod: TypeAheadInputMethod;
|
|
7
|
-
query?: string;
|
|
8
|
-
};
|
|
9
|
-
export declare const openTypeAhead: (props: Props) => (tr: Transaction) => void;
|
|
10
|
-
export declare const openTypeAheadAtCursor: ({ triggerHandler, inputMethod, query }: Props) => EditorCommand;
|
|
11
|
-
export {};
|
|
3
|
+
import type { OpenTypeAheadProps } from '../../types';
|
|
4
|
+
export declare const openTypeAhead: (props: OpenTypeAheadProps) => (tr: Transaction) => void;
|
|
5
|
+
export declare const openTypeAheadAtCursor: ({ triggerHandler, inputMethod, query, removePrefixTriggerOnCancel, }: OpenTypeAheadProps) => EditorCommand;
|
|
@@ -5,7 +5,7 @@ import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
|
|
|
5
5
|
import type { ContextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
|
|
6
6
|
import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
|
|
7
7
|
import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
8
|
-
import { type
|
|
8
|
+
import { type TypeAheadPluginOptions, type TypeAheadPluginSharedState, type OpenTypeAheadProps } from './types';
|
|
9
9
|
type InsertTypeAheadItemProps = {
|
|
10
10
|
triggerHandler: TypeAheadHandler;
|
|
11
11
|
contentItem: TypeAheadItem;
|
|
@@ -13,11 +13,6 @@ type InsertTypeAheadItemProps = {
|
|
|
13
13
|
sourceListItem: TypeAheadItem[];
|
|
14
14
|
mode?: SelectItemMode;
|
|
15
15
|
};
|
|
16
|
-
type OpenTypeAheadProps = {
|
|
17
|
-
triggerHandler: TypeAheadHandler;
|
|
18
|
-
inputMethod: TypeAheadInputMethod;
|
|
19
|
-
query?: string;
|
|
20
|
-
};
|
|
21
16
|
type CloseTypeAheadProps = {
|
|
22
17
|
insertCurrentQueryAsRawText: boolean;
|
|
23
18
|
attachCommand?: Command;
|
|
@@ -35,6 +35,10 @@ export type TypeAheadPluginState = {
|
|
|
35
35
|
selectedIndex: number;
|
|
36
36
|
stats: TypeAheadStatsSerializable | null;
|
|
37
37
|
inputMethod: TypeAheadInputMethod | null;
|
|
38
|
+
/**
|
|
39
|
+
* If true, removes the trigger character from query when typeahead is closed
|
|
40
|
+
*/
|
|
41
|
+
removePrefixTriggerOnCancel?: boolean;
|
|
38
42
|
};
|
|
39
43
|
export type OnInsertSelectedItemProps = {
|
|
40
44
|
mode: SelectItemMode;
|
|
@@ -87,3 +91,9 @@ export interface TypeAheadPluginSharedState {
|
|
|
87
91
|
errorInfo: TypeAheadErrorInfo;
|
|
88
92
|
selectedIndex: number;
|
|
89
93
|
}
|
|
94
|
+
export type OpenTypeAheadProps = {
|
|
95
|
+
triggerHandler: TypeAheadHandler;
|
|
96
|
+
inputMethod: TypeAheadInputMethod;
|
|
97
|
+
query?: string;
|
|
98
|
+
removePrefixTriggerOnCancel?: boolean;
|
|
99
|
+
};
|
|
@@ -1,11 +1,5 @@
|
|
|
1
1
|
import type { EditorCommand } from '@atlaskit/editor-common/types';
|
|
2
2
|
import type { Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
-
import type {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
inputMethod: TypeAheadInputMethod;
|
|
7
|
-
query?: string;
|
|
8
|
-
};
|
|
9
|
-
export declare const openTypeAhead: (props: Props) => (tr: Transaction) => void;
|
|
10
|
-
export declare const openTypeAheadAtCursor: ({ triggerHandler, inputMethod, query }: Props) => EditorCommand;
|
|
11
|
-
export {};
|
|
3
|
+
import type { OpenTypeAheadProps } from '../../types';
|
|
4
|
+
export declare const openTypeAhead: (props: OpenTypeAheadProps) => (tr: Transaction) => void;
|
|
5
|
+
export declare const openTypeAheadAtCursor: ({ triggerHandler, inputMethod, query, removePrefixTriggerOnCancel, }: OpenTypeAheadProps) => EditorCommand;
|
|
@@ -5,7 +5,7 @@ import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
|
|
|
5
5
|
import type { ContextPanelPlugin } from '@atlaskit/editor-plugin-context-panel';
|
|
6
6
|
import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
|
|
7
7
|
import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
8
|
-
import { type
|
|
8
|
+
import { type TypeAheadPluginOptions, type TypeAheadPluginSharedState, type OpenTypeAheadProps } from './types';
|
|
9
9
|
type InsertTypeAheadItemProps = {
|
|
10
10
|
triggerHandler: TypeAheadHandler;
|
|
11
11
|
contentItem: TypeAheadItem;
|
|
@@ -13,11 +13,6 @@ type InsertTypeAheadItemProps = {
|
|
|
13
13
|
sourceListItem: TypeAheadItem[];
|
|
14
14
|
mode?: SelectItemMode;
|
|
15
15
|
};
|
|
16
|
-
type OpenTypeAheadProps = {
|
|
17
|
-
triggerHandler: TypeAheadHandler;
|
|
18
|
-
inputMethod: TypeAheadInputMethod;
|
|
19
|
-
query?: string;
|
|
20
|
-
};
|
|
21
16
|
type CloseTypeAheadProps = {
|
|
22
17
|
insertCurrentQueryAsRawText: boolean;
|
|
23
18
|
attachCommand?: Command;
|
|
@@ -35,6 +35,10 @@ export type TypeAheadPluginState = {
|
|
|
35
35
|
selectedIndex: number;
|
|
36
36
|
stats: TypeAheadStatsSerializable | null;
|
|
37
37
|
inputMethod: TypeAheadInputMethod | null;
|
|
38
|
+
/**
|
|
39
|
+
* If true, removes the trigger character from query when typeahead is closed
|
|
40
|
+
*/
|
|
41
|
+
removePrefixTriggerOnCancel?: boolean;
|
|
38
42
|
};
|
|
39
43
|
export type OnInsertSelectedItemProps = {
|
|
40
44
|
mode: SelectItemMode;
|
|
@@ -87,3 +91,9 @@ export interface TypeAheadPluginSharedState {
|
|
|
87
91
|
errorInfo: TypeAheadErrorInfo;
|
|
88
92
|
selectedIndex: number;
|
|
89
93
|
}
|
|
94
|
+
export type OpenTypeAheadProps = {
|
|
95
|
+
triggerHandler: TypeAheadHandler;
|
|
96
|
+
inputMethod: TypeAheadInputMethod;
|
|
97
|
+
query?: string;
|
|
98
|
+
removePrefixTriggerOnCancel?: boolean;
|
|
99
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-type-ahead",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.2",
|
|
4
4
|
"description": "Type-ahead plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@atlaskit/adf-schema": "^47.6.0",
|
|
37
|
-
"@atlaskit/editor-common": "^
|
|
37
|
+
"@atlaskit/editor-common": "^103.0.0",
|
|
38
38
|
"@atlaskit/editor-element-browser": "^0.1.0",
|
|
39
39
|
"@atlaskit/editor-plugin-analytics": "^2.2.0",
|
|
40
40
|
"@atlaskit/editor-plugin-connectivity": "^2.0.0",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"@atlaskit/prosemirror-input-rules": "^3.3.0",
|
|
50
50
|
"@atlaskit/theme": "^18.0.0",
|
|
51
51
|
"@atlaskit/tmp-editor-statsig": "^4.6.0",
|
|
52
|
-
"@atlaskit/tokens": "^4.
|
|
52
|
+
"@atlaskit/tokens": "^4.7.0",
|
|
53
53
|
"@babel/runtime": "^7.0.0",
|
|
54
54
|
"@emotion/react": "^11.7.1",
|
|
55
55
|
"lodash": "^4.17.21",
|
|
@@ -109,6 +109,9 @@
|
|
|
109
109
|
},
|
|
110
110
|
"platform_editor_controls_patch_1": {
|
|
111
111
|
"type": "boolean"
|
|
112
|
+
},
|
|
113
|
+
"platform_editor_controls_patch_2": {
|
|
114
|
+
"type": "boolean"
|
|
112
115
|
}
|
|
113
116
|
}
|
|
114
117
|
}
|