@atlaskit/editor-plugin-type-ahead 2.3.4 → 2.4.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 +21 -0
- package/dist/cjs/pm-plugins/analytics.js +21 -0
- package/dist/cjs/pm-plugins/utils.js +3 -3
- package/dist/cjs/ui/TypeAheadList.js +9 -4
- package/dist/cjs/ui/TypeAheadPopup.js +34 -2
- package/dist/cjs/ui/WrapperTypeAhead.js +10 -1
- package/dist/cjs/ui/hooks/use-load-items.js +2 -2
- package/dist/es2019/pm-plugins/analytics.js +15 -0
- package/dist/es2019/pm-plugins/utils.js +3 -3
- package/dist/es2019/ui/TypeAheadList.js +9 -4
- package/dist/es2019/ui/TypeAheadPopup.js +35 -3
- package/dist/es2019/ui/WrapperTypeAhead.js +10 -1
- package/dist/es2019/ui/hooks/use-load-items.js +2 -2
- package/dist/esm/pm-plugins/analytics.js +15 -0
- package/dist/esm/pm-plugins/utils.js +3 -3
- package/dist/esm/ui/TypeAheadList.js +9 -4
- package/dist/esm/ui/TypeAheadPopup.js +35 -3
- package/dist/esm/ui/WrapperTypeAhead.js +10 -1
- package/dist/esm/ui/hooks/use-load-items.js +2 -2
- package/dist/types/pm-plugins/analytics.d.ts +6 -0
- package/dist/types/ui/TypeAheadList.d.ts +3 -2
- package/dist/types/ui/TypeAheadPopup.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/analytics.d.ts +6 -0
- package/dist/types-ts4.5/ui/TypeAheadList.d.ts +3 -2
- package/dist/types-ts4.5/ui/TypeAheadPopup.d.ts +1 -1
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-type-ahead
|
|
2
2
|
|
|
3
|
+
## 2.4.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#140813](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/140813)
|
|
8
|
+
[`c4756a5c1a4ae`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c4756a5c1a4ae) -
|
|
9
|
+
Migrating offline editing feature gates to a new experiment "platform_editor_offline_editing_web"
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 2.4.0
|
|
13
|
+
|
|
14
|
+
### Minor Changes
|
|
15
|
+
|
|
16
|
+
- [#139256](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139256)
|
|
17
|
+
[`0fea9bc4da71a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0fea9bc4da71a) -
|
|
18
|
+
ED-27447 add typeahead close analytics event
|
|
19
|
+
|
|
20
|
+
### Patch Changes
|
|
21
|
+
|
|
22
|
+
- Updated dependencies
|
|
23
|
+
|
|
3
24
|
## 2.3.4
|
|
4
25
|
|
|
5
26
|
### Patch Changes
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.fireTypeAheadClosedAnalyticsEvent = void 0;
|
|
7
|
+
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
8
|
+
var fireTypeAheadClosedAnalyticsEvent = exports.fireTypeAheadClosedAnalyticsEvent = function fireTypeAheadClosedAnalyticsEvent(api, closeAction, hasQuery, inputMethod) {
|
|
9
|
+
var _api$analytics;
|
|
10
|
+
api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
|
|
11
|
+
action: _analytics.ACTION.CLOSED,
|
|
12
|
+
actionSubject: _analytics.ACTION_SUBJECT.TYPEAHEAD,
|
|
13
|
+
actionSubjectId: _analytics.ACTION_SUBJECT_ID.TYPEAHEAD_QUICK_INSERT,
|
|
14
|
+
attributes: {
|
|
15
|
+
inputMethod: inputMethod,
|
|
16
|
+
closeAction: closeAction,
|
|
17
|
+
hasQuery: hasQuery
|
|
18
|
+
},
|
|
19
|
+
eventType: _analytics.EVENT_TYPE.TRACK
|
|
20
|
+
});
|
|
21
|
+
};
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.skipForwardToSafeItem = exports.skipBackwardToSafeItem = exports.moveSelectedIndex = exports.isTypeAheadOpen = exports.isTypeAheadHandler = exports.isTypeAheadAllowed = exports.getTypeAheadQuery = exports.getTypeAheadListAriaLabels = exports.getTypeAheadHandler = exports.getPluginState = exports.findHandlerByTrigger = exports.findHandler = void 0;
|
|
7
7
|
var _typeAhead = require("@atlaskit/editor-common/type-ahead");
|
|
8
|
-
var
|
|
8
|
+
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
9
9
|
var _updateSelectedIndex = require("./commands/update-selected-index");
|
|
10
10
|
var _itemIsDisabled = require("./item-is-disabled");
|
|
11
11
|
var _key = require("./key");
|
|
@@ -59,7 +59,7 @@ var skipForwardToSafeItem = exports.skipForwardToSafeItem = function skipForward
|
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
// We got to the end of the list ^, now try from the start
|
|
62
|
-
if ((0,
|
|
62
|
+
if ((0, _experiments.editorExperiment)('platform_editor_offline_editing_web', true)) {
|
|
63
63
|
for (var _idx = 0; _idx < nextIndex; _idx++) {
|
|
64
64
|
if (!itemIsDisabled(_idx)) {
|
|
65
65
|
return _idx;
|
|
@@ -83,7 +83,7 @@ var skipBackwardToSafeItem = exports.skipBackwardToSafeItem = function skipBackw
|
|
|
83
83
|
}
|
|
84
84
|
|
|
85
85
|
// We got to the start of the list ^, now try from the end
|
|
86
|
-
if ((0,
|
|
86
|
+
if ((0, _experiments.editorExperiment)('platform_editor_offline_editing_web', true)) {
|
|
87
87
|
for (var _idx2 = listSize; _idx2 > nextIndex; _idx2--) {
|
|
88
88
|
if (!itemIsDisabled(_idx2)) {
|
|
89
89
|
return _idx2;
|
|
@@ -12,6 +12,7 @@ var _react2 = require("@emotion/react");
|
|
|
12
12
|
var _reactIntlNext = require("react-intl-next");
|
|
13
13
|
var _CellMeasurer = require("react-virtualized/dist/commonjs/CellMeasurer");
|
|
14
14
|
var _List = require("react-virtualized/dist/commonjs/List");
|
|
15
|
+
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
15
16
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
16
17
|
var _typeAhead = require("@atlaskit/editor-common/type-ahead");
|
|
17
18
|
var _ui = require("@atlaskit/editor-common/ui");
|
|
@@ -235,13 +236,13 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
|
|
|
235
236
|
// TODO: DTR-1401 - why is this calling item click when hitting tab? fix this in DTR-1401
|
|
236
237
|
case 'Tab':
|
|
237
238
|
//Tab key quick inserts the selected item.
|
|
238
|
-
onItemClick(_typeAhead.SelectItemMode.TAB, selectedIndex);
|
|
239
|
+
onItemClick(_typeAhead.SelectItemMode.TAB, selectedIndex, _analytics.INPUT_METHOD.KEYBOARD);
|
|
239
240
|
event.preventDefault();
|
|
240
241
|
break;
|
|
241
242
|
case 'Enter':
|
|
242
243
|
//Enter key quick inserts the selected item.
|
|
243
244
|
if (!event.isComposing || event.which !== 229 && event.keyCode !== 229) {
|
|
244
|
-
onItemClick(event.shiftKey ? _typeAhead.SelectItemMode.SHIFT_ENTER : _typeAhead.SelectItemMode.ENTER, selectedIndex);
|
|
245
|
+
onItemClick(event.shiftKey ? _typeAhead.SelectItemMode.SHIFT_ENTER : _typeAhead.SelectItemMode.ENTER, selectedIndex, _analytics.INPUT_METHOD.KEYBOARD);
|
|
245
246
|
event.preventDefault();
|
|
246
247
|
}
|
|
247
248
|
break;
|
|
@@ -303,7 +304,9 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
|
|
|
303
304
|
itemsLength: itemsLength,
|
|
304
305
|
itemIndex: index,
|
|
305
306
|
selectedIndex: selectedIndex,
|
|
306
|
-
onItemClick:
|
|
307
|
+
onItemClick: function onItemClick(mode, index) {
|
|
308
|
+
actions.onItemClick(mode, index, _analytics.INPUT_METHOD.MOUSE);
|
|
309
|
+
},
|
|
307
310
|
ariaLabel: (0, _utils.getTypeAheadListAriaLabels)(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
|
|
308
311
|
moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
|
|
309
312
|
api: api
|
|
@@ -324,7 +327,9 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
|
|
|
324
327
|
itemsLength: itemsLength,
|
|
325
328
|
itemIndex: index,
|
|
326
329
|
selectedIndex: selectedIndex,
|
|
327
|
-
onItemClick:
|
|
330
|
+
onItemClick: function onItemClick(mode, index) {
|
|
331
|
+
actions.onItemClick(mode, index, _analytics.INPUT_METHOD.MOUSE);
|
|
332
|
+
},
|
|
328
333
|
ariaLabel: (0, _utils.getTypeAheadListAriaLabels)(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
|
|
329
334
|
moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
|
|
330
335
|
api: api
|
|
@@ -18,6 +18,7 @@ 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
20
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
21
|
+
var _analytics2 = require("../pm-plugins/analytics");
|
|
21
22
|
var _closeTypeAhead = require("../pm-plugins/commands/close-type-ahead");
|
|
22
23
|
var _constants = require("../pm-plugins/constants");
|
|
23
24
|
var _utils = require("../pm-plugins/utils");
|
|
@@ -86,6 +87,10 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
|
|
|
86
87
|
var defaultMenuHeight = (0, _react.useMemo)(function () {
|
|
87
88
|
return moreElementsInQuickInsertViewEnabled ? DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW : DEFAULT_TYPEAHEAD_MENU_HEIGHT;
|
|
88
89
|
}, [moreElementsInQuickInsertViewEnabled]);
|
|
90
|
+
var activityStateRef = (0, _react.useRef)({
|
|
91
|
+
inputMethod: null,
|
|
92
|
+
closeAction: null
|
|
93
|
+
});
|
|
89
94
|
var startTime = (0, _react.useMemo)(function () {
|
|
90
95
|
return performance.now();
|
|
91
96
|
},
|
|
@@ -308,6 +313,12 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
|
|
|
308
313
|
};
|
|
309
314
|
var onViewMoreClick = (0, _react.useCallback)(function () {
|
|
310
315
|
close(editorView);
|
|
316
|
+
if (openElementBrowserModal && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4')) {
|
|
317
|
+
activityStateRef.current = {
|
|
318
|
+
inputMethod: _analytics.INPUT_METHOD.MOUSE,
|
|
319
|
+
closeAction: _analytics.ACTION.VIEW_MORE
|
|
320
|
+
};
|
|
321
|
+
}
|
|
311
322
|
|
|
312
323
|
// TODO: ED-26959 - when clean up, remove config in quick insert plugin
|
|
313
324
|
// platform/packages/editor/editor-plugin-quick-insert/src/quickInsertPlugin.tsx (typeAhead.openElementBrowserModal)
|
|
@@ -323,7 +334,20 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
|
|
|
323
334
|
fitWidth: 340,
|
|
324
335
|
offset: OFFSET,
|
|
325
336
|
ariaLabel: null,
|
|
326
|
-
preventOverflow: true
|
|
337
|
+
preventOverflow: true,
|
|
338
|
+
onUnmount: function onUnmount() {
|
|
339
|
+
if (selectedIndex > -1 && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4')) {
|
|
340
|
+
// if selectedIndex is -1, it means that the user has not selected any item
|
|
341
|
+
// will be handled by WrapperTypeAhead
|
|
342
|
+
(0, _analytics2.fireTypeAheadClosedAnalyticsEvent)(api, activityStateRef.current.closeAction, !isEmptyQuery, activityStateRef.current.inputMethod);
|
|
343
|
+
|
|
344
|
+
// reset activity state
|
|
345
|
+
activityStateRef.current = {
|
|
346
|
+
inputMethod: null,
|
|
347
|
+
closeAction: null
|
|
348
|
+
};
|
|
349
|
+
}
|
|
350
|
+
}
|
|
327
351
|
}, (0, _react2.jsx)("div", {
|
|
328
352
|
css: [typeAheadContent, moreElementsInQuickInsertViewEnabled && typeAheadContentOverride, showViewMore && typeAheadWrapperWithViewMoreOverride]
|
|
329
353
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
@@ -339,7 +363,15 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
|
|
|
339
363
|
}), (0, _react2.jsx)(_TypeAheadList.TypeAheadList, {
|
|
340
364
|
items: items,
|
|
341
365
|
selectedIndex: selectedIndex,
|
|
342
|
-
onItemClick:
|
|
366
|
+
onItemClick: function onItemClick(mode, index, inputMethod) {
|
|
367
|
+
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4')) {
|
|
368
|
+
activityStateRef.current = {
|
|
369
|
+
inputMethod: inputMethod || null,
|
|
370
|
+
closeAction: _analytics.ACTION.INSERTED
|
|
371
|
+
};
|
|
372
|
+
}
|
|
373
|
+
onItemInsert(mode, index);
|
|
374
|
+
},
|
|
343
375
|
fitHeight: fitHeightWithViewMore,
|
|
344
376
|
editorView: editorView,
|
|
345
377
|
decorationElement: anchorElement,
|
|
@@ -8,8 +8,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
exports.WrapperTypeAhead = void 0;
|
|
9
9
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
10
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
11
12
|
var _typeAhead = require("@atlaskit/editor-common/type-ahead");
|
|
13
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
12
14
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
15
|
+
var _analytics2 = require("../pm-plugins/analytics");
|
|
13
16
|
var _updateQuery = require("../pm-plugins/commands/update-query");
|
|
14
17
|
var _itemIsDisabled2 = require("../pm-plugins/item-is-disabled");
|
|
15
18
|
var _utils = require("../pm-plugins/utils");
|
|
@@ -72,6 +75,9 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
|
|
|
72
75
|
addPrefixTrigger = _ref2.addPrefixTrigger,
|
|
73
76
|
text = _ref2.text,
|
|
74
77
|
forceFocusOnEditor = _ref2.forceFocusOnEditor;
|
|
78
|
+
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4')) {
|
|
79
|
+
(0, _analytics2.fireTypeAheadClosedAnalyticsEvent)(api, _analytics.ACTION.CANCELLED, !!queryRef.current, _analytics.INPUT_METHOD.KEYBOARD);
|
|
80
|
+
}
|
|
75
81
|
setClosed(true);
|
|
76
82
|
var fullquery = addPrefixTrigger ? "".concat(triggerHandler.trigger).concat(text) : text;
|
|
77
83
|
onTextInsert({
|
|
@@ -79,7 +85,7 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
|
|
|
79
85
|
setSelectionAt: setSelectionAt,
|
|
80
86
|
text: fullquery
|
|
81
87
|
});
|
|
82
|
-
}, [triggerHandler, onTextInsert]);
|
|
88
|
+
}, [api, triggerHandler.trigger, onTextInsert]);
|
|
83
89
|
var insertSelectedItem = (0, _react.useCallback)(function () {
|
|
84
90
|
var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _typeAhead.SelectItemMode.SELECTED;
|
|
85
91
|
var view = editorViewRef.current;
|
|
@@ -100,6 +106,9 @@ var WrapperTypeAhead = exports.WrapperTypeAhead = /*#__PURE__*/_react.default.me
|
|
|
100
106
|
if (safeSelectedIndex === -1) {
|
|
101
107
|
return;
|
|
102
108
|
}
|
|
109
|
+
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4')) {
|
|
110
|
+
(0, _analytics2.fireTypeAheadClosedAnalyticsEvent)(api, _analytics.ACTION.INSERTED, !!queryRef.current, _analytics.INPUT_METHOD.KEYBOARD);
|
|
111
|
+
}
|
|
103
112
|
setClosed(true);
|
|
104
113
|
queueMicrotask(function () {
|
|
105
114
|
onItemInsert({
|
|
@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.useLoadItems = void 0;
|
|
8
8
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
9
9
|
var _react = require("react");
|
|
10
|
-
var
|
|
10
|
+
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
11
11
|
var _updateListError = require("../../pm-plugins/commands/update-list-error");
|
|
12
12
|
var _updateListItems = require("../../pm-plugins/commands/update-list-items");
|
|
13
13
|
var EMPTY_LIST_ITEM = [];
|
|
@@ -41,7 +41,7 @@ var useLoadItems = exports.useLoadItems = function useLoadItems(triggerHandler,
|
|
|
41
41
|
(0, _updateListItems.updateListItem)(showViewMore ? list.concat(viewMoreItem) : list)(view.state, view.dispatch);
|
|
42
42
|
});
|
|
43
43
|
}).catch(function (e) {
|
|
44
|
-
if ((0,
|
|
44
|
+
if ((0, _experiments.editorExperiment)('platform_editor_offline_editing_web', true)) {
|
|
45
45
|
if (e) {
|
|
46
46
|
if (componentIsMounted.current) {
|
|
47
47
|
setItems(EMPTY_LIST_ITEM);
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
2
|
+
export const fireTypeAheadClosedAnalyticsEvent = (api, closeAction, hasQuery, inputMethod) => {
|
|
3
|
+
var _api$analytics;
|
|
4
|
+
api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.fireAnalyticsEvent({
|
|
5
|
+
action: ACTION.CLOSED,
|
|
6
|
+
actionSubject: ACTION_SUBJECT.TYPEAHEAD,
|
|
7
|
+
actionSubjectId: ACTION_SUBJECT_ID.TYPEAHEAD_QUICK_INSERT,
|
|
8
|
+
attributes: {
|
|
9
|
+
inputMethod,
|
|
10
|
+
closeAction,
|
|
11
|
+
hasQuery
|
|
12
|
+
},
|
|
13
|
+
eventType: EVENT_TYPE.TRACK
|
|
14
|
+
});
|
|
15
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { TypeAheadAvailableNodes, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
|
|
2
|
-
import {
|
|
2
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
3
3
|
import { updateSelectedIndex } from './commands/update-selected-index';
|
|
4
4
|
import { itemIsDisabled } from './item-is-disabled';
|
|
5
5
|
import { pluginKey as typeAheadPluginKey } from './key';
|
|
@@ -54,7 +54,7 @@ export const skipForwardToSafeItem = ({
|
|
|
54
54
|
}
|
|
55
55
|
|
|
56
56
|
// We got to the end of the list ^, now try from the start
|
|
57
|
-
if (
|
|
57
|
+
if (editorExperiment('platform_editor_offline_editing_web', true)) {
|
|
58
58
|
for (let idx = 0; idx < nextIndex; idx++) {
|
|
59
59
|
if (!itemIsDisabled(idx)) {
|
|
60
60
|
return idx;
|
|
@@ -79,7 +79,7 @@ export const skipBackwardToSafeItem = ({
|
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
// We got to the start of the list ^, now try from the end
|
|
82
|
-
if (
|
|
82
|
+
if (editorExperiment('platform_editor_offline_editing_web', true)) {
|
|
83
83
|
for (let idx = listSize; idx > nextIndex; idx--) {
|
|
84
84
|
if (!itemIsDisabled(idx)) {
|
|
85
85
|
return idx;
|
|
@@ -10,6 +10,7 @@ import { css, jsx } from '@emotion/react';
|
|
|
10
10
|
import { injectIntl, useIntl } from 'react-intl-next';
|
|
11
11
|
import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
|
|
12
12
|
import { List } from 'react-virtualized/dist/commonjs/List';
|
|
13
|
+
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
13
14
|
import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
|
|
14
15
|
import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
|
|
15
16
|
import { AssistiveText } from '@atlaskit/editor-common/ui';
|
|
@@ -217,13 +218,13 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
|
|
|
217
218
|
// TODO: DTR-1401 - why is this calling item click when hitting tab? fix this in DTR-1401
|
|
218
219
|
case 'Tab':
|
|
219
220
|
//Tab key quick inserts the selected item.
|
|
220
|
-
onItemClick(SelectItemMode.TAB, selectedIndex);
|
|
221
|
+
onItemClick(SelectItemMode.TAB, selectedIndex, INPUT_METHOD.KEYBOARD);
|
|
221
222
|
event.preventDefault();
|
|
222
223
|
break;
|
|
223
224
|
case 'Enter':
|
|
224
225
|
//Enter key quick inserts the selected item.
|
|
225
226
|
if (!event.isComposing || event.which !== 229 && event.keyCode !== 229) {
|
|
226
|
-
onItemClick(event.shiftKey ? SelectItemMode.SHIFT_ENTER : SelectItemMode.ENTER, selectedIndex);
|
|
227
|
+
onItemClick(event.shiftKey ? SelectItemMode.SHIFT_ENTER : SelectItemMode.ENTER, selectedIndex, INPUT_METHOD.KEYBOARD);
|
|
227
228
|
event.preventDefault();
|
|
228
229
|
}
|
|
229
230
|
break;
|
|
@@ -282,7 +283,9 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
|
|
|
282
283
|
itemsLength: itemsLength,
|
|
283
284
|
itemIndex: index,
|
|
284
285
|
selectedIndex: selectedIndex,
|
|
285
|
-
onItemClick:
|
|
286
|
+
onItemClick: (mode, index) => {
|
|
287
|
+
actions.onItemClick(mode, index, INPUT_METHOD.MOUSE);
|
|
288
|
+
},
|
|
286
289
|
ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
|
|
287
290
|
moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
|
|
288
291
|
api: api
|
|
@@ -300,7 +303,9 @@ const TypeAheadListComponent = /*#__PURE__*/React.memo(({
|
|
|
300
303
|
itemsLength: itemsLength,
|
|
301
304
|
itemIndex: index,
|
|
302
305
|
selectedIndex: selectedIndex,
|
|
303
|
-
onItemClick:
|
|
306
|
+
onItemClick: (mode, index) => {
|
|
307
|
+
actions.onItemClick(mode, index, INPUT_METHOD.MOUSE);
|
|
308
|
+
},
|
|
304
309
|
ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
|
|
305
310
|
moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
|
|
306
311
|
api: api
|
|
@@ -7,7 +7,7 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useSta
|
|
|
7
7
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
8
|
import { css, jsx } from '@emotion/react';
|
|
9
9
|
import rafSchedule from 'raf-schd';
|
|
10
|
-
import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
10
|
+
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
11
11
|
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
12
12
|
import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
|
|
13
13
|
import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
|
|
@@ -15,6 +15,7 @@ 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
17
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
18
|
+
import { fireTypeAheadClosedAnalyticsEvent } from '../pm-plugins/analytics';
|
|
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';
|
|
20
21
|
import { getPluginState } from '../pm-plugins/utils';
|
|
@@ -76,6 +77,10 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
|
|
|
76
77
|
const moreElementsInQuickInsertViewEnabled = (featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.moreElementsInQuickInsertView) && triggerHandler.id === TypeAheadAvailableNodes.QUICK_INSERT;
|
|
77
78
|
const isEditorControlsPatch2Enabled = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2');
|
|
78
79
|
const defaultMenuHeight = useMemo(() => moreElementsInQuickInsertViewEnabled ? DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW : DEFAULT_TYPEAHEAD_MENU_HEIGHT, [moreElementsInQuickInsertViewEnabled]);
|
|
80
|
+
const activityStateRef = useRef({
|
|
81
|
+
inputMethod: null,
|
|
82
|
+
closeAction: null
|
|
83
|
+
});
|
|
79
84
|
const startTime = useMemo(() => performance.now(),
|
|
80
85
|
// In case those props changes
|
|
81
86
|
// we need to recreate the startTime
|
|
@@ -307,6 +312,12 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
|
|
|
307
312
|
};
|
|
308
313
|
const onViewMoreClick = useCallback(() => {
|
|
309
314
|
close(editorView);
|
|
315
|
+
if (openElementBrowserModal && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
|
|
316
|
+
activityStateRef.current = {
|
|
317
|
+
inputMethod: INPUT_METHOD.MOUSE,
|
|
318
|
+
closeAction: ACTION.VIEW_MORE
|
|
319
|
+
};
|
|
320
|
+
}
|
|
310
321
|
|
|
311
322
|
// TODO: ED-26959 - when clean up, remove config in quick insert plugin
|
|
312
323
|
// platform/packages/editor/editor-plugin-quick-insert/src/quickInsertPlugin.tsx (typeAhead.openElementBrowserModal)
|
|
@@ -322,7 +333,20 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
|
|
|
322
333
|
fitWidth: 340,
|
|
323
334
|
offset: OFFSET,
|
|
324
335
|
ariaLabel: null,
|
|
325
|
-
preventOverflow: true
|
|
336
|
+
preventOverflow: true,
|
|
337
|
+
onUnmount: () => {
|
|
338
|
+
if (selectedIndex > -1 && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
|
|
339
|
+
// if selectedIndex is -1, it means that the user has not selected any item
|
|
340
|
+
// will be handled by WrapperTypeAhead
|
|
341
|
+
fireTypeAheadClosedAnalyticsEvent(api, activityStateRef.current.closeAction, !isEmptyQuery, activityStateRef.current.inputMethod);
|
|
342
|
+
|
|
343
|
+
// reset activity state
|
|
344
|
+
activityStateRef.current = {
|
|
345
|
+
inputMethod: null,
|
|
346
|
+
closeAction: null
|
|
347
|
+
};
|
|
348
|
+
}
|
|
349
|
+
}
|
|
326
350
|
}, jsx("div", {
|
|
327
351
|
css: [typeAheadContent, moreElementsInQuickInsertViewEnabled && typeAheadContentOverride, showViewMore && typeAheadWrapperWithViewMoreOverride]
|
|
328
352
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
@@ -338,7 +362,15 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
|
|
|
338
362
|
}), jsx(TypeAheadList, {
|
|
339
363
|
items: items,
|
|
340
364
|
selectedIndex: selectedIndex,
|
|
341
|
-
onItemClick:
|
|
365
|
+
onItemClick: (mode, index, inputMethod) => {
|
|
366
|
+
if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
|
|
367
|
+
activityStateRef.current = {
|
|
368
|
+
inputMethod: inputMethod || null,
|
|
369
|
+
closeAction: ACTION.INSERTED
|
|
370
|
+
};
|
|
371
|
+
}
|
|
372
|
+
onItemInsert(mode, index);
|
|
373
|
+
},
|
|
342
374
|
fitHeight: fitHeightWithViewMore,
|
|
343
375
|
editorView: editorView,
|
|
344
376
|
decorationElement: anchorElement,
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
2
|
+
import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
2
3
|
import { SelectItemMode, TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
|
|
4
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
5
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
6
|
+
import { fireTypeAheadClosedAnalyticsEvent } from '../pm-plugins/analytics';
|
|
4
7
|
import { updateQuery } from '../pm-plugins/commands/update-query';
|
|
5
8
|
import { itemIsDisabled } from '../pm-plugins/item-is-disabled';
|
|
6
9
|
import { getPluginState, moveSelectedIndex, skipForwardToSafeItem } from '../pm-plugins/utils';
|
|
@@ -50,6 +53,9 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
|
|
|
50
53
|
text,
|
|
51
54
|
forceFocusOnEditor
|
|
52
55
|
}) => {
|
|
56
|
+
if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
|
|
57
|
+
fireTypeAheadClosedAnalyticsEvent(api, ACTION.CANCELLED, !!queryRef.current, INPUT_METHOD.KEYBOARD);
|
|
58
|
+
}
|
|
53
59
|
setClosed(true);
|
|
54
60
|
const fullquery = addPrefixTrigger ? `${triggerHandler.trigger}${text}` : text;
|
|
55
61
|
onTextInsert({
|
|
@@ -57,7 +63,7 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
|
|
|
57
63
|
setSelectionAt,
|
|
58
64
|
text: fullquery
|
|
59
65
|
});
|
|
60
|
-
}, [triggerHandler, onTextInsert]);
|
|
66
|
+
}, [api, triggerHandler.trigger, onTextInsert]);
|
|
61
67
|
const insertSelectedItem = useCallback((mode = SelectItemMode.SELECTED) => {
|
|
62
68
|
const {
|
|
63
69
|
current: view
|
|
@@ -78,6 +84,9 @@ export const WrapperTypeAhead = /*#__PURE__*/React.memo(({
|
|
|
78
84
|
if (safeSelectedIndex === -1) {
|
|
79
85
|
return;
|
|
80
86
|
}
|
|
87
|
+
if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
|
|
88
|
+
fireTypeAheadClosedAnalyticsEvent(api, ACTION.INSERTED, !!queryRef.current, INPUT_METHOD.KEYBOARD);
|
|
89
|
+
}
|
|
81
90
|
setClosed(true);
|
|
82
91
|
queueMicrotask(() => {
|
|
83
92
|
onItemInsert({
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useEffect, useRef, useState } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
3
3
|
import { updateListError } from '../../pm-plugins/commands/update-list-error';
|
|
4
4
|
import { updateListItem } from '../../pm-plugins/commands/update-list-items';
|
|
5
5
|
const EMPTY_LIST_ITEM = [];
|
|
@@ -32,7 +32,7 @@ export const useLoadItems = (triggerHandler, editorView, query, showViewMore) =>
|
|
|
32
32
|
updateListItem(showViewMore ? list.concat(viewMoreItem) : list)(view.state, view.dispatch);
|
|
33
33
|
});
|
|
34
34
|
}).catch(e => {
|
|
35
|
-
if (
|
|
35
|
+
if (editorExperiment('platform_editor_offline_editing_web', true)) {
|
|
36
36
|
if (e) {
|
|
37
37
|
if (componentIsMounted.current) {
|
|
38
38
|
setItems(EMPTY_LIST_ITEM);
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
2
|
+
export var fireTypeAheadClosedAnalyticsEvent = function fireTypeAheadClosedAnalyticsEvent(api, closeAction, hasQuery, inputMethod) {
|
|
3
|
+
var _api$analytics;
|
|
4
|
+
api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.fireAnalyticsEvent({
|
|
5
|
+
action: ACTION.CLOSED,
|
|
6
|
+
actionSubject: ACTION_SUBJECT.TYPEAHEAD,
|
|
7
|
+
actionSubjectId: ACTION_SUBJECT_ID.TYPEAHEAD_QUICK_INSERT,
|
|
8
|
+
attributes: {
|
|
9
|
+
inputMethod: inputMethod,
|
|
10
|
+
closeAction: closeAction,
|
|
11
|
+
hasQuery: hasQuery
|
|
12
|
+
},
|
|
13
|
+
eventType: EVENT_TYPE.TRACK
|
|
14
|
+
});
|
|
15
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { TypeAheadAvailableNodes, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
|
|
2
|
-
import {
|
|
2
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
3
3
|
import { updateSelectedIndex } from './commands/update-selected-index';
|
|
4
4
|
import { itemIsDisabled } from './item-is-disabled';
|
|
5
5
|
import { pluginKey as typeAheadPluginKey } from './key';
|
|
@@ -53,7 +53,7 @@ export var skipForwardToSafeItem = function skipForwardToSafeItem(_ref) {
|
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
// We got to the end of the list ^, now try from the start
|
|
56
|
-
if (
|
|
56
|
+
if (editorExperiment('platform_editor_offline_editing_web', true)) {
|
|
57
57
|
for (var _idx = 0; _idx < nextIndex; _idx++) {
|
|
58
58
|
if (!itemIsDisabled(_idx)) {
|
|
59
59
|
return _idx;
|
|
@@ -77,7 +77,7 @@ export var skipBackwardToSafeItem = function skipBackwardToSafeItem(_ref2) {
|
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
// We got to the start of the list ^, now try from the end
|
|
80
|
-
if (
|
|
80
|
+
if (editorExperiment('platform_editor_offline_editing_web', true)) {
|
|
81
81
|
for (var _idx2 = listSize; _idx2 > nextIndex; _idx2--) {
|
|
82
82
|
if (!itemIsDisabled(_idx2)) {
|
|
83
83
|
return _idx2;
|
|
@@ -11,6 +11,7 @@ import { css, jsx } from '@emotion/react';
|
|
|
11
11
|
import { injectIntl, useIntl } from 'react-intl-next';
|
|
12
12
|
import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/commonjs/CellMeasurer';
|
|
13
13
|
import { List } from 'react-virtualized/dist/commonjs/List';
|
|
14
|
+
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
14
15
|
import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
|
|
15
16
|
import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
|
|
16
17
|
import { AssistiveText } from '@atlaskit/editor-common/ui';
|
|
@@ -225,13 +226,13 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
|
|
|
225
226
|
// TODO: DTR-1401 - why is this calling item click when hitting tab? fix this in DTR-1401
|
|
226
227
|
case 'Tab':
|
|
227
228
|
//Tab key quick inserts the selected item.
|
|
228
|
-
onItemClick(SelectItemMode.TAB, selectedIndex);
|
|
229
|
+
onItemClick(SelectItemMode.TAB, selectedIndex, INPUT_METHOD.KEYBOARD);
|
|
229
230
|
event.preventDefault();
|
|
230
231
|
break;
|
|
231
232
|
case 'Enter':
|
|
232
233
|
//Enter key quick inserts the selected item.
|
|
233
234
|
if (!event.isComposing || event.which !== 229 && event.keyCode !== 229) {
|
|
234
|
-
onItemClick(event.shiftKey ? SelectItemMode.SHIFT_ENTER : SelectItemMode.ENTER, selectedIndex);
|
|
235
|
+
onItemClick(event.shiftKey ? SelectItemMode.SHIFT_ENTER : SelectItemMode.ENTER, selectedIndex, INPUT_METHOD.KEYBOARD);
|
|
235
236
|
event.preventDefault();
|
|
236
237
|
}
|
|
237
238
|
break;
|
|
@@ -293,7 +294,9 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
|
|
|
293
294
|
itemsLength: itemsLength,
|
|
294
295
|
itemIndex: index,
|
|
295
296
|
selectedIndex: selectedIndex,
|
|
296
|
-
onItemClick:
|
|
297
|
+
onItemClick: function onItemClick(mode, index) {
|
|
298
|
+
actions.onItemClick(mode, index, INPUT_METHOD.MOUSE);
|
|
299
|
+
},
|
|
297
300
|
ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
|
|
298
301
|
moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
|
|
299
302
|
api: api
|
|
@@ -314,7 +317,9 @@ var TypeAheadListComponent = /*#__PURE__*/React.memo(function (_ref2) {
|
|
|
314
317
|
itemsLength: itemsLength,
|
|
315
318
|
itemIndex: index,
|
|
316
319
|
selectedIndex: selectedIndex,
|
|
317
|
-
onItemClick:
|
|
320
|
+
onItemClick: function onItemClick(mode, index) {
|
|
321
|
+
actions.onItemClick(mode, index, INPUT_METHOD.MOUSE);
|
|
322
|
+
},
|
|
318
323
|
ariaLabel: getTypeAheadListAriaLabels(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel,
|
|
319
324
|
moreElementsInQuickInsertViewEnabled: moreElementsInQuickInsertViewEnabled,
|
|
320
325
|
api: api
|
|
@@ -8,7 +8,7 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useSta
|
|
|
8
8
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
9
9
|
import { css, jsx } from '@emotion/react';
|
|
10
10
|
import rafSchedule from 'raf-schd';
|
|
11
|
-
import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
11
|
+
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
12
12
|
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
13
13
|
import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
|
|
14
14
|
import { findOverflowScrollParent, Popup } from '@atlaskit/editor-common/ui';
|
|
@@ -16,6 +16,7 @@ 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
18
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
19
|
+
import { fireTypeAheadClosedAnalyticsEvent } from '../pm-plugins/analytics';
|
|
19
20
|
import { closeTypeAhead } from '../pm-plugins/commands/close-type-ahead';
|
|
20
21
|
import { CloseSelectionOptions, TYPE_AHEAD_DECORATION_DATA_ATTRIBUTE, TYPE_AHEAD_POPUP_CONTENT_CLASS } from '../pm-plugins/constants';
|
|
21
22
|
import { getPluginState } from '../pm-plugins/utils';
|
|
@@ -75,6 +76,10 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
|
|
|
75
76
|
var defaultMenuHeight = useMemo(function () {
|
|
76
77
|
return moreElementsInQuickInsertViewEnabled ? DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW : DEFAULT_TYPEAHEAD_MENU_HEIGHT;
|
|
77
78
|
}, [moreElementsInQuickInsertViewEnabled]);
|
|
79
|
+
var activityStateRef = useRef({
|
|
80
|
+
inputMethod: null,
|
|
81
|
+
closeAction: null
|
|
82
|
+
});
|
|
78
83
|
var startTime = useMemo(function () {
|
|
79
84
|
return performance.now();
|
|
80
85
|
},
|
|
@@ -297,6 +302,12 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
|
|
|
297
302
|
};
|
|
298
303
|
var onViewMoreClick = useCallback(function () {
|
|
299
304
|
close(editorView);
|
|
305
|
+
if (openElementBrowserModal && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
|
|
306
|
+
activityStateRef.current = {
|
|
307
|
+
inputMethod: INPUT_METHOD.MOUSE,
|
|
308
|
+
closeAction: ACTION.VIEW_MORE
|
|
309
|
+
};
|
|
310
|
+
}
|
|
300
311
|
|
|
301
312
|
// TODO: ED-26959 - when clean up, remove config in quick insert plugin
|
|
302
313
|
// platform/packages/editor/editor-plugin-quick-insert/src/quickInsertPlugin.tsx (typeAhead.openElementBrowserModal)
|
|
@@ -312,7 +323,20 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
|
|
|
312
323
|
fitWidth: 340,
|
|
313
324
|
offset: OFFSET,
|
|
314
325
|
ariaLabel: null,
|
|
315
|
-
preventOverflow: true
|
|
326
|
+
preventOverflow: true,
|
|
327
|
+
onUnmount: function onUnmount() {
|
|
328
|
+
if (selectedIndex > -1 && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
|
|
329
|
+
// if selectedIndex is -1, it means that the user has not selected any item
|
|
330
|
+
// will be handled by WrapperTypeAhead
|
|
331
|
+
fireTypeAheadClosedAnalyticsEvent(api, activityStateRef.current.closeAction, !isEmptyQuery, activityStateRef.current.inputMethod);
|
|
332
|
+
|
|
333
|
+
// reset activity state
|
|
334
|
+
activityStateRef.current = {
|
|
335
|
+
inputMethod: null,
|
|
336
|
+
closeAction: null
|
|
337
|
+
};
|
|
338
|
+
}
|
|
339
|
+
}
|
|
316
340
|
}, jsx("div", {
|
|
317
341
|
css: [typeAheadContent, moreElementsInQuickInsertViewEnabled && typeAheadContentOverride, showViewMore && typeAheadWrapperWithViewMoreOverride]
|
|
318
342
|
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
@@ -328,7 +352,15 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
|
|
|
328
352
|
}), jsx(TypeAheadList, {
|
|
329
353
|
items: items,
|
|
330
354
|
selectedIndex: selectedIndex,
|
|
331
|
-
onItemClick:
|
|
355
|
+
onItemClick: function onItemClick(mode, index, inputMethod) {
|
|
356
|
+
if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
|
|
357
|
+
activityStateRef.current = {
|
|
358
|
+
inputMethod: inputMethod || null,
|
|
359
|
+
closeAction: ACTION.INSERTED
|
|
360
|
+
};
|
|
361
|
+
}
|
|
362
|
+
onItemInsert(mode, index);
|
|
363
|
+
},
|
|
332
364
|
fitHeight: fitHeightWithViewMore,
|
|
333
365
|
editorView: editorView,
|
|
334
366
|
decorationElement: anchorElement,
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
3
|
+
import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
4
|
import { SelectItemMode, TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
|
|
5
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
4
6
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
7
|
+
import { fireTypeAheadClosedAnalyticsEvent } from '../pm-plugins/analytics';
|
|
5
8
|
import { updateQuery } from '../pm-plugins/commands/update-query';
|
|
6
9
|
import { itemIsDisabled as _itemIsDisabled } from '../pm-plugins/item-is-disabled';
|
|
7
10
|
import { getPluginState, moveSelectedIndex, skipForwardToSafeItem } from '../pm-plugins/utils';
|
|
@@ -62,6 +65,9 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
62
65
|
addPrefixTrigger = _ref2.addPrefixTrigger,
|
|
63
66
|
text = _ref2.text,
|
|
64
67
|
forceFocusOnEditor = _ref2.forceFocusOnEditor;
|
|
68
|
+
if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
|
|
69
|
+
fireTypeAheadClosedAnalyticsEvent(api, ACTION.CANCELLED, !!queryRef.current, INPUT_METHOD.KEYBOARD);
|
|
70
|
+
}
|
|
65
71
|
setClosed(true);
|
|
66
72
|
var fullquery = addPrefixTrigger ? "".concat(triggerHandler.trigger).concat(text) : text;
|
|
67
73
|
onTextInsert({
|
|
@@ -69,7 +75,7 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
69
75
|
setSelectionAt: setSelectionAt,
|
|
70
76
|
text: fullquery
|
|
71
77
|
});
|
|
72
|
-
}, [triggerHandler, onTextInsert]);
|
|
78
|
+
}, [api, triggerHandler.trigger, onTextInsert]);
|
|
73
79
|
var insertSelectedItem = useCallback(function () {
|
|
74
80
|
var mode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : SelectItemMode.SELECTED;
|
|
75
81
|
var view = editorViewRef.current;
|
|
@@ -90,6 +96,9 @@ export var WrapperTypeAhead = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
90
96
|
if (safeSelectedIndex === -1) {
|
|
91
97
|
return;
|
|
92
98
|
}
|
|
99
|
+
if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4')) {
|
|
100
|
+
fireTypeAheadClosedAnalyticsEvent(api, ACTION.INSERTED, !!queryRef.current, INPUT_METHOD.KEYBOARD);
|
|
101
|
+
}
|
|
93
102
|
setClosed(true);
|
|
94
103
|
queueMicrotask(function () {
|
|
95
104
|
onItemInsert({
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
2
|
import { useEffect, useRef, useState } from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
4
4
|
import { updateListError } from '../../pm-plugins/commands/update-list-error';
|
|
5
5
|
import { updateListItem } from '../../pm-plugins/commands/update-list-items';
|
|
6
6
|
var EMPTY_LIST_ITEM = [];
|
|
@@ -34,7 +34,7 @@ export var useLoadItems = function useLoadItems(triggerHandler, editorView, quer
|
|
|
34
34
|
updateListItem(showViewMore ? list.concat(viewMoreItem) : list)(view.state, view.dispatch);
|
|
35
35
|
});
|
|
36
36
|
}).catch(function (e) {
|
|
37
|
-
if (
|
|
37
|
+
if (editorExperiment('platform_editor_offline_editing_web', true)) {
|
|
38
38
|
if (e) {
|
|
39
39
|
if (componentIsMounted.current) {
|
|
40
40
|
setItems(EMPTY_LIST_ITEM);
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
2
|
+
import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import { TypeAheadPlugin } from '../typeAheadPluginType';
|
|
4
|
+
export type CloseActionType = ACTION.INSERTED | ACTION.CANCELLED | ACTION.VIEW_MORE;
|
|
5
|
+
export type InputMethodType = INPUT_METHOD.KEYBOARD | INPUT_METHOD.MOUSE;
|
|
6
|
+
export declare const fireTypeAheadClosedAnalyticsEvent: (api: ExtractInjectionAPI<TypeAheadPlugin> | undefined, closeAction: CloseActionType | null, hasQuery: boolean, inputMethod: InputMethodType | null) => void;
|
|
@@ -7,13 +7,14 @@ import type { WrappedComponentProps } from 'react-intl-next';
|
|
|
7
7
|
import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
|
|
8
8
|
import { type ExtractInjectionAPI, type TypeAheadItem } from '@atlaskit/editor-common/types';
|
|
9
9
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
10
|
+
import { InputMethodType } from '../pm-plugins/analytics';
|
|
10
11
|
import { type TypeAheadPlugin } from '../typeAheadPluginType';
|
|
11
12
|
import type { TypeAheadHandler } from '../types';
|
|
12
13
|
export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlProps<{
|
|
13
14
|
items: Array<TypeAheadItem>;
|
|
14
15
|
selectedIndex: number;
|
|
15
16
|
editorView: EditorView;
|
|
16
|
-
onItemClick: (mode: SelectItemMode, index: number) => void;
|
|
17
|
+
onItemClick: (mode: SelectItemMode, index: number, inputMethod?: InputMethodType) => void;
|
|
17
18
|
fitHeight: number;
|
|
18
19
|
decorationElement: HTMLElement;
|
|
19
20
|
triggerHandler?: TypeAheadHandler | undefined;
|
|
@@ -26,7 +27,7 @@ export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlP
|
|
|
26
27
|
items: Array<TypeAheadItem>;
|
|
27
28
|
selectedIndex: number;
|
|
28
29
|
editorView: EditorView;
|
|
29
|
-
onItemClick: (mode: SelectItemMode, index: number) => void;
|
|
30
|
+
onItemClick: (mode: SelectItemMode, index: number, inputMethod?: InputMethodType) => void;
|
|
30
31
|
fitHeight: number;
|
|
31
32
|
decorationElement: HTMLElement;
|
|
32
33
|
triggerHandler?: TypeAheadHandler | undefined;
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { jsx } from '@emotion/react';
|
|
7
7
|
import type { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
|
|
8
|
-
import type { ExtractInjectionAPI,
|
|
8
|
+
import type { ExtractInjectionAPI, TypeAheadHandler, TypeAheadItem } from '@atlaskit/editor-common/types';
|
|
9
9
|
import type { DecorationSet, EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
10
10
|
import { CloseSelectionOptions } from '../pm-plugins/constants';
|
|
11
11
|
import type { TypeAheadPlugin } from '../typeAheadPluginType';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
2
|
+
import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import { TypeAheadPlugin } from '../typeAheadPluginType';
|
|
4
|
+
export type CloseActionType = ACTION.INSERTED | ACTION.CANCELLED | ACTION.VIEW_MORE;
|
|
5
|
+
export type InputMethodType = INPUT_METHOD.KEYBOARD | INPUT_METHOD.MOUSE;
|
|
6
|
+
export declare const fireTypeAheadClosedAnalyticsEvent: (api: ExtractInjectionAPI<TypeAheadPlugin> | undefined, closeAction: CloseActionType | null, hasQuery: boolean, inputMethod: InputMethodType | null) => void;
|
|
@@ -7,13 +7,14 @@ import type { WrappedComponentProps } from 'react-intl-next';
|
|
|
7
7
|
import { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
|
|
8
8
|
import { type ExtractInjectionAPI, type TypeAheadItem } from '@atlaskit/editor-common/types';
|
|
9
9
|
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
10
|
+
import { InputMethodType } from '../pm-plugins/analytics';
|
|
10
11
|
import { type TypeAheadPlugin } from '../typeAheadPluginType';
|
|
11
12
|
import type { TypeAheadHandler } from '../types';
|
|
12
13
|
export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlProps<{
|
|
13
14
|
items: Array<TypeAheadItem>;
|
|
14
15
|
selectedIndex: number;
|
|
15
16
|
editorView: EditorView;
|
|
16
|
-
onItemClick: (mode: SelectItemMode, index: number) => void;
|
|
17
|
+
onItemClick: (mode: SelectItemMode, index: number, inputMethod?: InputMethodType) => void;
|
|
17
18
|
fitHeight: number;
|
|
18
19
|
decorationElement: HTMLElement;
|
|
19
20
|
triggerHandler?: TypeAheadHandler | undefined;
|
|
@@ -26,7 +27,7 @@ export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlP
|
|
|
26
27
|
items: Array<TypeAheadItem>;
|
|
27
28
|
selectedIndex: number;
|
|
28
29
|
editorView: EditorView;
|
|
29
|
-
onItemClick: (mode: SelectItemMode, index: number) => void;
|
|
30
|
+
onItemClick: (mode: SelectItemMode, index: number, inputMethod?: InputMethodType) => void;
|
|
30
31
|
fitHeight: number;
|
|
31
32
|
decorationElement: HTMLElement;
|
|
32
33
|
triggerHandler?: TypeAheadHandler | undefined;
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { jsx } from '@emotion/react';
|
|
7
7
|
import type { SelectItemMode } from '@atlaskit/editor-common/type-ahead';
|
|
8
|
-
import type { ExtractInjectionAPI,
|
|
8
|
+
import type { ExtractInjectionAPI, TypeAheadHandler, TypeAheadItem } from '@atlaskit/editor-common/types';
|
|
9
9
|
import type { DecorationSet, EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
10
10
|
import { CloseSelectionOptions } from '../pm-plugins/constants';
|
|
11
11
|
import type { TypeAheadPlugin } from '../typeAheadPluginType';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-type-ahead",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.4.1",
|
|
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": "^103.
|
|
37
|
+
"@atlaskit/editor-common": "^103.6.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",
|
|
@@ -42,13 +42,13 @@
|
|
|
42
42
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
43
43
|
"@atlaskit/editor-shared-styles": "^3.4.0",
|
|
44
44
|
"@atlaskit/heading": "^5.2.0",
|
|
45
|
-
"@atlaskit/icon": "^25.
|
|
45
|
+
"@atlaskit/icon": "^25.6.0",
|
|
46
46
|
"@atlaskit/menu": "^3.2.0",
|
|
47
47
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
48
48
|
"@atlaskit/primitives": "^14.4.0",
|
|
49
49
|
"@atlaskit/prosemirror-input-rules": "^3.3.0",
|
|
50
50
|
"@atlaskit/theme": "^18.0.0",
|
|
51
|
-
"@atlaskit/tmp-editor-statsig": "^4.
|
|
51
|
+
"@atlaskit/tmp-editor-statsig": "^4.8.0",
|
|
52
52
|
"@atlaskit/tokens": "^4.7.0",
|
|
53
53
|
"@babel/runtime": "^7.0.0",
|
|
54
54
|
"@emotion/react": "^11.7.1",
|
|
@@ -98,9 +98,6 @@
|
|
|
98
98
|
"platform_editor_update_type_ahead_locale": {
|
|
99
99
|
"type": "boolean"
|
|
100
100
|
},
|
|
101
|
-
"platform_editor_offline_editing_ga": {
|
|
102
|
-
"type": "boolean"
|
|
103
|
-
},
|
|
104
101
|
"platform_editor_legacy_content_macro_typeahead_fix": {
|
|
105
102
|
"type": "boolean"
|
|
106
103
|
},
|
|
@@ -112,6 +109,9 @@
|
|
|
112
109
|
},
|
|
113
110
|
"platform_editor_controls_patch_3": {
|
|
114
111
|
"type": "boolean"
|
|
112
|
+
},
|
|
113
|
+
"platform_editor_controls_patch_4": {
|
|
114
|
+
"type": "boolean"
|
|
115
115
|
}
|
|
116
116
|
}
|
|
117
117
|
}
|