@atlaskit/editor-plugin-type-ahead 2.7.1 → 2.7.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/dist/cjs/ui/ContentComponent.js +58 -7
- package/dist/cjs/ui/ListRow.js +13 -0
- package/dist/cjs/ui/TypeAheadList.js +1 -0
- package/dist/cjs/ui/TypeAheadListItem.js +18 -5
- package/dist/cjs/ui/TypeAheadMenu.js +1 -1
- package/dist/cjs/ui/TypeAheadPopup.js +16 -3
- package/dist/es2019/ui/ContentComponent.js +60 -8
- package/dist/es2019/ui/ListRow.js +13 -0
- package/dist/es2019/ui/TypeAheadList.js +1 -0
- package/dist/es2019/ui/TypeAheadListItem.js +20 -6
- package/dist/es2019/ui/TypeAheadMenu.js +1 -1
- package/dist/es2019/ui/TypeAheadPopup.js +18 -4
- package/dist/esm/ui/ContentComponent.js +59 -8
- package/dist/esm/ui/ListRow.js +13 -0
- package/dist/esm/ui/TypeAheadList.js +1 -0
- package/dist/esm/ui/TypeAheadListItem.js +19 -6
- package/dist/esm/ui/TypeAheadMenu.js +1 -1
- package/dist/esm/ui/TypeAheadPopup.js +17 -4
- package/dist/types/pm-plugins/analytics.d.ts +3 -3
- package/dist/types/ui/ListRow.d.ts +15 -2
- package/dist/types/ui/TypeAheadList.d.ts +1 -1
- package/dist/types/ui/TypeAheadMenu.d.ts +3 -2
- package/dist/types/ui/modern/TypeAheadMenu.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/analytics.d.ts +3 -3
- package/dist/types-ts4.5/ui/ListRow.d.ts +15 -2
- package/dist/types-ts4.5/ui/TypeAheadList.d.ts +1 -1
- package/dist/types-ts4.5/ui/TypeAheadMenu.d.ts +3 -2
- package/dist/types-ts4.5/ui/modern/TypeAheadMenu.d.ts +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-type-ahead
|
|
2
2
|
|
|
3
|
+
## 2.7.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 2.7.2
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#154149](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/154149)
|
|
14
|
+
[`4b955e247c793`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4b955e247c793) -
|
|
15
|
+
[ED-27560] Migrate to useSharedPluginStateSelector for text color, toolbar lists indentation,
|
|
16
|
+
type-ahead, undo-redo plugins
|
|
17
|
+
|
|
3
18
|
## 2.7.1
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
|
@@ -8,33 +8,84 @@ exports.ContentComponent = ContentComponent;
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
10
10
|
var _typeAhead = require("@atlaskit/editor-common/type-ahead");
|
|
11
|
+
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
|
|
11
12
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
12
13
|
var _TypeAheadMenu = require("./modern/TypeAheadMenu");
|
|
13
14
|
var _TypeAheadMenu2 = require("./TypeAheadMenu");
|
|
15
|
+
var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
|
|
16
|
+
var triggerHandler = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.triggerHandler');
|
|
17
|
+
var items = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.items');
|
|
18
|
+
var errorInfo = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.errorInfo');
|
|
19
|
+
var decorationElement = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.decorationElement');
|
|
20
|
+
var decorationSet = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.decorationSet');
|
|
21
|
+
var query = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.query');
|
|
22
|
+
var selectedIndex = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.selectedIndex');
|
|
23
|
+
return {
|
|
24
|
+
triggerHandler: triggerHandler,
|
|
25
|
+
items: items,
|
|
26
|
+
errorInfo: errorInfo,
|
|
27
|
+
decorationElement: decorationElement,
|
|
28
|
+
decorationSet: decorationSet,
|
|
29
|
+
query: query,
|
|
30
|
+
selectedIndex: selectedIndex
|
|
31
|
+
};
|
|
32
|
+
}, function (api) {
|
|
33
|
+
var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['typeAhead']),
|
|
34
|
+
typeAheadState = _useSharedPluginState.typeAheadState;
|
|
35
|
+
return {
|
|
36
|
+
triggerHandler: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.triggerHandler,
|
|
37
|
+
items: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.items,
|
|
38
|
+
errorInfo: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.errorInfo,
|
|
39
|
+
decorationElement: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.decorationElement,
|
|
40
|
+
decorationSet: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.decorationSet,
|
|
41
|
+
query: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.query,
|
|
42
|
+
selectedIndex: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.selectedIndex
|
|
43
|
+
};
|
|
44
|
+
});
|
|
14
45
|
function ContentComponent(_ref) {
|
|
15
|
-
var _typeAheadState$trigg;
|
|
16
46
|
var api = _ref.api,
|
|
17
47
|
editorView = _ref.editorView,
|
|
18
48
|
popupMountRef = _ref.popupMountRef;
|
|
19
|
-
var
|
|
20
|
-
|
|
21
|
-
|
|
49
|
+
var _useSharedState = useSharedState(api),
|
|
50
|
+
triggerHandler = _useSharedState.triggerHandler,
|
|
51
|
+
items = _useSharedState.items,
|
|
52
|
+
errorInfo = _useSharedState.errorInfo,
|
|
53
|
+
decorationElement = _useSharedState.decorationElement,
|
|
54
|
+
decorationSet = _useSharedState.decorationSet,
|
|
55
|
+
query = _useSharedState.query,
|
|
56
|
+
selectedIndex = _useSharedState.selectedIndex;
|
|
57
|
+
if (items === undefined || decorationSet === undefined || errorInfo === undefined || decorationElement === undefined || query === undefined || selectedIndex === undefined) {
|
|
22
58
|
return null;
|
|
23
59
|
}
|
|
24
60
|
if (
|
|
25
61
|
// TODO: ED-26959 - Also requires a check for editor appearance (needs to be enabled for full-page/full-width editor only ?)
|
|
26
|
-
!(0, _experiments.editorExperiment)('platform_editor_insertion', 'control') && (
|
|
62
|
+
!(0, _experiments.editorExperiment)('platform_editor_insertion', 'control') && (triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id) === _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT) {
|
|
27
63
|
return /*#__PURE__*/_react.default.createElement(_TypeAheadMenu.TypeAheadMenu, {
|
|
28
64
|
editorView: editorView,
|
|
29
65
|
popupMountRef: popupMountRef,
|
|
30
|
-
typeAheadState:
|
|
66
|
+
typeAheadState: {
|
|
67
|
+
triggerHandler: triggerHandler,
|
|
68
|
+
items: items,
|
|
69
|
+
errorInfo: errorInfo,
|
|
70
|
+
decorationElement: decorationElement,
|
|
71
|
+
decorationSet: decorationSet,
|
|
72
|
+
query: query
|
|
73
|
+
},
|
|
31
74
|
api: api
|
|
32
75
|
});
|
|
33
76
|
} else {
|
|
34
77
|
return /*#__PURE__*/_react.default.createElement(_TypeAheadMenu2.TypeAheadMenu, {
|
|
35
78
|
editorView: editorView,
|
|
36
79
|
popupMountRef: popupMountRef,
|
|
37
|
-
typeAheadState:
|
|
80
|
+
typeAheadState: {
|
|
81
|
+
triggerHandler: triggerHandler,
|
|
82
|
+
items: items,
|
|
83
|
+
errorInfo: errorInfo,
|
|
84
|
+
decorationElement: decorationElement,
|
|
85
|
+
decorationSet: decorationSet,
|
|
86
|
+
query: query
|
|
87
|
+
},
|
|
88
|
+
selectedIndex: selectedIndex,
|
|
38
89
|
api: api
|
|
39
90
|
});
|
|
40
91
|
}
|
package/dist/cjs/ui/ListRow.js
CHANGED
|
@@ -8,6 +8,19 @@ exports.ListRow = ListRow;
|
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
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); }
|
|
10
10
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
11
|
+
/**
|
|
12
|
+
*
|
|
13
|
+
* @param root0
|
|
14
|
+
* @param root0.children
|
|
15
|
+
* @param root0.registerChild
|
|
16
|
+
* @param root0.measure
|
|
17
|
+
* @param root0.index
|
|
18
|
+
* @param root0.style
|
|
19
|
+
* @param root0.isVisible
|
|
20
|
+
* @param root0.isScrolling
|
|
21
|
+
* @param root0.onMouseMove
|
|
22
|
+
* @example
|
|
23
|
+
*/
|
|
11
24
|
function ListRow(_ref) {
|
|
12
25
|
var children = _ref.children,
|
|
13
26
|
registerChild = _ref.registerChild,
|
|
@@ -218,6 +218,7 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
|
|
|
218
218
|
/**
|
|
219
219
|
* To handle the key events on the list
|
|
220
220
|
* @param event
|
|
221
|
+
* @example
|
|
221
222
|
*/
|
|
222
223
|
var handleKeyDown = function handleKeyDown(event) {
|
|
223
224
|
if (isNavigationKey(event)) {
|
|
@@ -13,6 +13,7 @@ var _reactIntlNext = require("react-intl-next");
|
|
|
13
13
|
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
14
14
|
var _quickInsert = require("@atlaskit/editor-common/quick-insert");
|
|
15
15
|
var _typeAhead = require("@atlaskit/editor-common/type-ahead");
|
|
16
|
+
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
|
|
16
17
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
17
18
|
var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
|
|
18
19
|
var _menu = require("@atlaskit/menu");
|
|
@@ -158,6 +159,18 @@ var CustomItemComponentWrapper = /*#__PURE__*/_react.default.memo(function (prop
|
|
|
158
159
|
onHover: noop
|
|
159
160
|
})));
|
|
160
161
|
});
|
|
162
|
+
var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
|
|
163
|
+
var connectivityMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'connectivity.mode');
|
|
164
|
+
return {
|
|
165
|
+
connectivityMode: connectivityMode
|
|
166
|
+
};
|
|
167
|
+
}, function (api) {
|
|
168
|
+
var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['connectivity']),
|
|
169
|
+
connectivityState = _useSharedPluginState.connectivityState;
|
|
170
|
+
return {
|
|
171
|
+
connectivityMode: connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode
|
|
172
|
+
};
|
|
173
|
+
});
|
|
161
174
|
var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.memo(function (_ref2) {
|
|
162
175
|
var item = _ref2.item,
|
|
163
176
|
itemsLength = _ref2.itemsLength,
|
|
@@ -168,14 +181,14 @@ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.
|
|
|
168
181
|
moreElementsInQuickInsertViewEnabled = _ref2.moreElementsInQuickInsertViewEnabled,
|
|
169
182
|
api = _ref2.api,
|
|
170
183
|
firstOnlineSupportedIndex = _ref2.firstOnlineSupportedIndex;
|
|
171
|
-
var
|
|
172
|
-
|
|
184
|
+
var _useSharedState = useSharedState(api),
|
|
185
|
+
connectivityMode = _useSharedState.connectivityMode;
|
|
173
186
|
var isItemDisabled = function isItemDisabled(item) {
|
|
174
187
|
var _item$isDisabledOffli;
|
|
175
|
-
return
|
|
188
|
+
return connectivityMode === 'offline' && ((_item$isDisabledOffli = item === null || item === void 0 ? void 0 : item.isDisabledOffline) !== null && _item$isDisabledOffli !== void 0 ? _item$isDisabledOffli : false);
|
|
176
189
|
};
|
|
177
190
|
var itemIsDisabled = isItemDisabled(item);
|
|
178
|
-
var isFirstEnabledIndex =
|
|
191
|
+
var isFirstEnabledIndex = connectivityMode === 'offline' && itemIndex === firstOnlineSupportedIndex && selectedIndex === -1;
|
|
179
192
|
|
|
180
193
|
/**
|
|
181
194
|
* To select and highlight the first Item when no item is selected
|
|
@@ -183,7 +196,7 @@ var TypeAheadListItem = exports.TypeAheadListItem = /*#__PURE__*/_react.default.
|
|
|
183
196
|
*/
|
|
184
197
|
var isSelected = false;
|
|
185
198
|
// Feature gated - connectivity is only available on desktop and behind a feature gate on full page mode
|
|
186
|
-
if (
|
|
199
|
+
if (connectivityMode === undefined) {
|
|
187
200
|
isSelected = itemIndex === selectedIndex || selectedIndex === -1 && itemIndex === 0;
|
|
188
201
|
} else {
|
|
189
202
|
isSelected = itemIndex === selectedIndex || selectedIndex === -1 && (itemIndex === 0 || isFirstEnabledIndex) && !itemIsDisabled;
|
|
@@ -17,12 +17,12 @@ var TypeAheadMenu = exports.TypeAheadMenu = /*#__PURE__*/_react.default.memo(fun
|
|
|
17
17
|
var editorView = _ref.editorView,
|
|
18
18
|
popupMountRef = _ref.popupMountRef,
|
|
19
19
|
typeAheadState = _ref.typeAheadState,
|
|
20
|
+
selectedIndex = _ref.selectedIndex,
|
|
20
21
|
api = _ref.api;
|
|
21
22
|
var isOpen = typeAheadState.decorationSet.find().length > 0;
|
|
22
23
|
var triggerHandler = typeAheadState.triggerHandler,
|
|
23
24
|
items = typeAheadState.items,
|
|
24
25
|
errorInfo = typeAheadState.errorInfo,
|
|
25
|
-
selectedIndex = typeAheadState.selectedIndex,
|
|
26
26
|
decorationElement = typeAheadState.decorationElement,
|
|
27
27
|
decorationSet = typeAheadState.decorationSet,
|
|
28
28
|
query = typeAheadState.query;
|
|
@@ -14,6 +14,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
|
|
|
14
14
|
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
15
15
|
var _typeAhead = require("@atlaskit/editor-common/type-ahead");
|
|
16
16
|
var _ui = require("@atlaskit/editor-common/ui");
|
|
17
|
+
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
|
|
17
18
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
18
19
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
19
20
|
var _colors = require("@atlaskit/theme/colors");
|
|
@@ -64,6 +65,18 @@ var Highlight = function Highlight(_ref) {
|
|
|
64
65
|
return triggerHandler.getHighlight(state);
|
|
65
66
|
};
|
|
66
67
|
var OFFSET = [0, 8];
|
|
68
|
+
var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {
|
|
69
|
+
var moreElementsInQuickInsertView = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'featureFlags.moreElementsInQuickInsertView');
|
|
70
|
+
return {
|
|
71
|
+
moreElementsInQuickInsertView: moreElementsInQuickInsertView
|
|
72
|
+
};
|
|
73
|
+
}, function (api) {
|
|
74
|
+
var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['featureFlags']),
|
|
75
|
+
featureFlagsState = _useSharedPluginState.featureFlagsState;
|
|
76
|
+
return {
|
|
77
|
+
moreElementsInQuickInsertView: featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.moreElementsInQuickInsertView
|
|
78
|
+
};
|
|
79
|
+
});
|
|
67
80
|
var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(function (props) {
|
|
68
81
|
var _getPluginState;
|
|
69
82
|
var editorView = props.editorView,
|
|
@@ -81,9 +94,9 @@ var TypeAheadPopup = exports.TypeAheadPopup = /*#__PURE__*/_react.default.memo(f
|
|
|
81
94
|
api = props.api,
|
|
82
95
|
showViewMore = props.showViewMore;
|
|
83
96
|
var ref = (0, _react.useRef)(null);
|
|
84
|
-
var
|
|
85
|
-
|
|
86
|
-
var moreElementsInQuickInsertViewEnabled =
|
|
97
|
+
var _useSharedState = useSharedState(api),
|
|
98
|
+
moreElementsInQuickInsertView = _useSharedState.moreElementsInQuickInsertView;
|
|
99
|
+
var moreElementsInQuickInsertViewEnabled = moreElementsInQuickInsertView && triggerHandler.id === _typeAhead.TypeAheadAvailableNodes.QUICK_INSERT;
|
|
87
100
|
var isEditorControlsPatch2Enabled = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2');
|
|
88
101
|
var defaultMenuHeight = (0, _react.useMemo)(function () {
|
|
89
102
|
return moreElementsInQuickInsertViewEnabled ? DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW : DEFAULT_TYPEAHEAD_MENU_HEIGHT;
|
|
@@ -1,35 +1,87 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
2
|
+
import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
|
|
3
3
|
import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
|
|
4
|
+
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
4
5
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
5
6
|
import { TypeAheadMenu as TypeAheadMenuModern } from './modern/TypeAheadMenu';
|
|
6
7
|
import { TypeAheadMenu } from './TypeAheadMenu';
|
|
8
|
+
const useSharedState = sharedPluginStateHookMigratorFactory(api => {
|
|
9
|
+
const triggerHandler = useSharedPluginStateSelector(api, 'typeAhead.triggerHandler');
|
|
10
|
+
const items = useSharedPluginStateSelector(api, 'typeAhead.items');
|
|
11
|
+
const errorInfo = useSharedPluginStateSelector(api, 'typeAhead.errorInfo');
|
|
12
|
+
const decorationElement = useSharedPluginStateSelector(api, 'typeAhead.decorationElement');
|
|
13
|
+
const decorationSet = useSharedPluginStateSelector(api, 'typeAhead.decorationSet');
|
|
14
|
+
const query = useSharedPluginStateSelector(api, 'typeAhead.query');
|
|
15
|
+
const selectedIndex = useSharedPluginStateSelector(api, 'typeAhead.selectedIndex');
|
|
16
|
+
return {
|
|
17
|
+
triggerHandler,
|
|
18
|
+
items,
|
|
19
|
+
errorInfo,
|
|
20
|
+
decorationElement,
|
|
21
|
+
decorationSet,
|
|
22
|
+
query,
|
|
23
|
+
selectedIndex
|
|
24
|
+
};
|
|
25
|
+
}, api => {
|
|
26
|
+
const {
|
|
27
|
+
typeAheadState
|
|
28
|
+
} = useSharedPluginState(api, ['typeAhead']);
|
|
29
|
+
return {
|
|
30
|
+
triggerHandler: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.triggerHandler,
|
|
31
|
+
items: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.items,
|
|
32
|
+
errorInfo: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.errorInfo,
|
|
33
|
+
decorationElement: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.decorationElement,
|
|
34
|
+
decorationSet: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.decorationSet,
|
|
35
|
+
query: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.query,
|
|
36
|
+
selectedIndex: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.selectedIndex
|
|
37
|
+
};
|
|
38
|
+
});
|
|
7
39
|
export function ContentComponent({
|
|
8
40
|
api,
|
|
9
41
|
editorView,
|
|
10
42
|
popupMountRef
|
|
11
43
|
}) {
|
|
12
|
-
var _typeAheadState$trigg;
|
|
13
44
|
const {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
45
|
+
triggerHandler,
|
|
46
|
+
items,
|
|
47
|
+
errorInfo,
|
|
48
|
+
decorationElement,
|
|
49
|
+
decorationSet,
|
|
50
|
+
query,
|
|
51
|
+
selectedIndex
|
|
52
|
+
} = useSharedState(api);
|
|
53
|
+
if (items === undefined || decorationSet === undefined || errorInfo === undefined || decorationElement === undefined || query === undefined || selectedIndex === undefined) {
|
|
17
54
|
return null;
|
|
18
55
|
}
|
|
19
56
|
if (
|
|
20
57
|
// TODO: ED-26959 - Also requires a check for editor appearance (needs to be enabled for full-page/full-width editor only ?)
|
|
21
|
-
!editorExperiment('platform_editor_insertion', 'control') && (
|
|
58
|
+
!editorExperiment('platform_editor_insertion', 'control') && (triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id) === TypeAheadAvailableNodes.QUICK_INSERT) {
|
|
22
59
|
return /*#__PURE__*/React.createElement(TypeAheadMenuModern, {
|
|
23
60
|
editorView: editorView,
|
|
24
61
|
popupMountRef: popupMountRef,
|
|
25
|
-
typeAheadState:
|
|
62
|
+
typeAheadState: {
|
|
63
|
+
triggerHandler,
|
|
64
|
+
items,
|
|
65
|
+
errorInfo,
|
|
66
|
+
decorationElement,
|
|
67
|
+
decorationSet,
|
|
68
|
+
query
|
|
69
|
+
},
|
|
26
70
|
api: api
|
|
27
71
|
});
|
|
28
72
|
} else {
|
|
29
73
|
return /*#__PURE__*/React.createElement(TypeAheadMenu, {
|
|
30
74
|
editorView: editorView,
|
|
31
75
|
popupMountRef: popupMountRef,
|
|
32
|
-
typeAheadState:
|
|
76
|
+
typeAheadState: {
|
|
77
|
+
triggerHandler,
|
|
78
|
+
items,
|
|
79
|
+
errorInfo,
|
|
80
|
+
decorationElement,
|
|
81
|
+
decorationSet,
|
|
82
|
+
query
|
|
83
|
+
},
|
|
84
|
+
selectedIndex: selectedIndex,
|
|
33
85
|
api: api
|
|
34
86
|
});
|
|
35
87
|
}
|
|
@@ -1,4 +1,17 @@
|
|
|
1
1
|
import React, { useEffect, useRef } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
*
|
|
4
|
+
* @param root0
|
|
5
|
+
* @param root0.children
|
|
6
|
+
* @param root0.registerChild
|
|
7
|
+
* @param root0.measure
|
|
8
|
+
* @param root0.index
|
|
9
|
+
* @param root0.style
|
|
10
|
+
* @param root0.isVisible
|
|
11
|
+
* @param root0.isScrolling
|
|
12
|
+
* @param root0.onMouseMove
|
|
13
|
+
* @example
|
|
14
|
+
*/
|
|
2
15
|
export function ListRow({
|
|
3
16
|
children,
|
|
4
17
|
registerChild,
|
|
@@ -7,9 +7,10 @@ import React, { useCallback, useLayoutEffect, useMemo } from 'react';
|
|
|
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 { useIntl } from 'react-intl-next';
|
|
10
|
-
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
10
|
+
import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
|
|
11
11
|
import { IconFallback } from '@atlaskit/editor-common/quick-insert';
|
|
12
12
|
import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
|
|
13
|
+
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
13
14
|
import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
|
|
14
15
|
import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
|
|
15
16
|
import { ButtonItem } from '@atlaskit/menu';
|
|
@@ -167,6 +168,19 @@ const CustomItemComponentWrapper = /*#__PURE__*/React.memo(props => {
|
|
|
167
168
|
onHover: noop
|
|
168
169
|
})));
|
|
169
170
|
});
|
|
171
|
+
const useSharedState = sharedPluginStateHookMigratorFactory(api => {
|
|
172
|
+
const connectivityMode = useSharedPluginStateSelector(api, 'connectivity.mode');
|
|
173
|
+
return {
|
|
174
|
+
connectivityMode
|
|
175
|
+
};
|
|
176
|
+
}, api => {
|
|
177
|
+
const {
|
|
178
|
+
connectivityState
|
|
179
|
+
} = useSharedPluginState(api, ['connectivity']);
|
|
180
|
+
return {
|
|
181
|
+
connectivityMode: connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode
|
|
182
|
+
};
|
|
183
|
+
});
|
|
170
184
|
export const TypeAheadListItem = /*#__PURE__*/React.memo(({
|
|
171
185
|
item,
|
|
172
186
|
itemsLength,
|
|
@@ -179,14 +193,14 @@ export const TypeAheadListItem = /*#__PURE__*/React.memo(({
|
|
|
179
193
|
firstOnlineSupportedIndex
|
|
180
194
|
}) => {
|
|
181
195
|
const {
|
|
182
|
-
|
|
183
|
-
} =
|
|
196
|
+
connectivityMode
|
|
197
|
+
} = useSharedState(api);
|
|
184
198
|
const isItemDisabled = item => {
|
|
185
199
|
var _item$isDisabledOffli;
|
|
186
|
-
return
|
|
200
|
+
return connectivityMode === 'offline' && ((_item$isDisabledOffli = item === null || item === void 0 ? void 0 : item.isDisabledOffline) !== null && _item$isDisabledOffli !== void 0 ? _item$isDisabledOffli : false);
|
|
187
201
|
};
|
|
188
202
|
const itemIsDisabled = isItemDisabled(item);
|
|
189
|
-
const isFirstEnabledIndex =
|
|
203
|
+
const isFirstEnabledIndex = connectivityMode === 'offline' && itemIndex === firstOnlineSupportedIndex && selectedIndex === -1;
|
|
190
204
|
|
|
191
205
|
/**
|
|
192
206
|
* To select and highlight the first Item when no item is selected
|
|
@@ -194,7 +208,7 @@ export const TypeAheadListItem = /*#__PURE__*/React.memo(({
|
|
|
194
208
|
*/
|
|
195
209
|
let isSelected = false;
|
|
196
210
|
// Feature gated - connectivity is only available on desktop and behind a feature gate on full page mode
|
|
197
|
-
if (
|
|
211
|
+
if (connectivityMode === undefined) {
|
|
198
212
|
isSelected = itemIndex === selectedIndex || selectedIndex === -1 && itemIndex === 0;
|
|
199
213
|
} else {
|
|
200
214
|
isSelected = itemIndex === selectedIndex || selectedIndex === -1 && (itemIndex === 0 || isFirstEnabledIndex) && !itemIsDisabled;
|
|
@@ -8,6 +8,7 @@ export const TypeAheadMenu = /*#__PURE__*/React.memo(({
|
|
|
8
8
|
editorView,
|
|
9
9
|
popupMountRef,
|
|
10
10
|
typeAheadState,
|
|
11
|
+
selectedIndex,
|
|
11
12
|
api
|
|
12
13
|
}) => {
|
|
13
14
|
var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
|
|
@@ -16,7 +17,6 @@ export const TypeAheadMenu = /*#__PURE__*/React.memo(({
|
|
|
16
17
|
triggerHandler,
|
|
17
18
|
items,
|
|
18
19
|
errorInfo,
|
|
19
|
-
selectedIndex,
|
|
20
20
|
decorationElement,
|
|
21
21
|
decorationSet,
|
|
22
22
|
query
|
|
@@ -8,9 +8,10 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useSta
|
|
|
8
8
|
import { css, jsx } from '@emotion/react';
|
|
9
9
|
import rafSchedule from 'raf-schd';
|
|
10
10
|
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
11
|
-
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
11
|
+
import { useSharedPluginState, sharedPluginStateHookMigratorFactory } 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';
|
|
14
|
+
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
14
15
|
import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
|
|
15
16
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
16
17
|
import { N0, N50A, N60A } from '@atlaskit/theme/colors';
|
|
@@ -53,6 +54,19 @@ const Highlight = ({
|
|
|
53
54
|
return triggerHandler.getHighlight(state);
|
|
54
55
|
};
|
|
55
56
|
const OFFSET = [0, 8];
|
|
57
|
+
const useSharedState = sharedPluginStateHookMigratorFactory(api => {
|
|
58
|
+
const moreElementsInQuickInsertView = useSharedPluginStateSelector(api, 'featureFlags.moreElementsInQuickInsertView');
|
|
59
|
+
return {
|
|
60
|
+
moreElementsInQuickInsertView
|
|
61
|
+
};
|
|
62
|
+
}, api => {
|
|
63
|
+
const {
|
|
64
|
+
featureFlagsState
|
|
65
|
+
} = useSharedPluginState(api, ['featureFlags']);
|
|
66
|
+
return {
|
|
67
|
+
moreElementsInQuickInsertView: featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.moreElementsInQuickInsertView
|
|
68
|
+
};
|
|
69
|
+
});
|
|
56
70
|
export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
|
|
57
71
|
var _getPluginState;
|
|
58
72
|
const {
|
|
@@ -73,9 +87,9 @@ export const TypeAheadPopup = /*#__PURE__*/React.memo(props => {
|
|
|
73
87
|
} = props;
|
|
74
88
|
const ref = useRef(null);
|
|
75
89
|
const {
|
|
76
|
-
|
|
77
|
-
} =
|
|
78
|
-
const moreElementsInQuickInsertViewEnabled =
|
|
90
|
+
moreElementsInQuickInsertView
|
|
91
|
+
} = useSharedState(api);
|
|
92
|
+
const moreElementsInQuickInsertViewEnabled = moreElementsInQuickInsertView && triggerHandler.id === TypeAheadAvailableNodes.QUICK_INSERT;
|
|
79
93
|
const isEditorControlsPatch2Enabled = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2');
|
|
80
94
|
const defaultMenuHeight = useMemo(() => moreElementsInQuickInsertViewEnabled ? DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW : DEFAULT_TYPEAHEAD_MENU_HEIGHT, [moreElementsInQuickInsertViewEnabled]);
|
|
81
95
|
const activityStateRef = useRef({
|
|
@@ -1,33 +1,84 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
2
|
+
import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
|
|
3
3
|
import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
|
|
4
|
+
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
4
5
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
5
6
|
import { TypeAheadMenu as TypeAheadMenuModern } from './modern/TypeAheadMenu';
|
|
6
7
|
import { TypeAheadMenu } from './TypeAheadMenu';
|
|
8
|
+
var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
|
|
9
|
+
var triggerHandler = useSharedPluginStateSelector(api, 'typeAhead.triggerHandler');
|
|
10
|
+
var items = useSharedPluginStateSelector(api, 'typeAhead.items');
|
|
11
|
+
var errorInfo = useSharedPluginStateSelector(api, 'typeAhead.errorInfo');
|
|
12
|
+
var decorationElement = useSharedPluginStateSelector(api, 'typeAhead.decorationElement');
|
|
13
|
+
var decorationSet = useSharedPluginStateSelector(api, 'typeAhead.decorationSet');
|
|
14
|
+
var query = useSharedPluginStateSelector(api, 'typeAhead.query');
|
|
15
|
+
var selectedIndex = useSharedPluginStateSelector(api, 'typeAhead.selectedIndex');
|
|
16
|
+
return {
|
|
17
|
+
triggerHandler: triggerHandler,
|
|
18
|
+
items: items,
|
|
19
|
+
errorInfo: errorInfo,
|
|
20
|
+
decorationElement: decorationElement,
|
|
21
|
+
decorationSet: decorationSet,
|
|
22
|
+
query: query,
|
|
23
|
+
selectedIndex: selectedIndex
|
|
24
|
+
};
|
|
25
|
+
}, function (api) {
|
|
26
|
+
var _useSharedPluginState = useSharedPluginState(api, ['typeAhead']),
|
|
27
|
+
typeAheadState = _useSharedPluginState.typeAheadState;
|
|
28
|
+
return {
|
|
29
|
+
triggerHandler: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.triggerHandler,
|
|
30
|
+
items: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.items,
|
|
31
|
+
errorInfo: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.errorInfo,
|
|
32
|
+
decorationElement: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.decorationElement,
|
|
33
|
+
decorationSet: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.decorationSet,
|
|
34
|
+
query: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.query,
|
|
35
|
+
selectedIndex: typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.selectedIndex
|
|
36
|
+
};
|
|
37
|
+
});
|
|
7
38
|
export function ContentComponent(_ref) {
|
|
8
|
-
var _typeAheadState$trigg;
|
|
9
39
|
var api = _ref.api,
|
|
10
40
|
editorView = _ref.editorView,
|
|
11
41
|
popupMountRef = _ref.popupMountRef;
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
42
|
+
var _useSharedState = useSharedState(api),
|
|
43
|
+
triggerHandler = _useSharedState.triggerHandler,
|
|
44
|
+
items = _useSharedState.items,
|
|
45
|
+
errorInfo = _useSharedState.errorInfo,
|
|
46
|
+
decorationElement = _useSharedState.decorationElement,
|
|
47
|
+
decorationSet = _useSharedState.decorationSet,
|
|
48
|
+
query = _useSharedState.query,
|
|
49
|
+
selectedIndex = _useSharedState.selectedIndex;
|
|
50
|
+
if (items === undefined || decorationSet === undefined || errorInfo === undefined || decorationElement === undefined || query === undefined || selectedIndex === undefined) {
|
|
15
51
|
return null;
|
|
16
52
|
}
|
|
17
53
|
if (
|
|
18
54
|
// TODO: ED-26959 - Also requires a check for editor appearance (needs to be enabled for full-page/full-width editor only ?)
|
|
19
|
-
!editorExperiment('platform_editor_insertion', 'control') && (
|
|
55
|
+
!editorExperiment('platform_editor_insertion', 'control') && (triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.id) === TypeAheadAvailableNodes.QUICK_INSERT) {
|
|
20
56
|
return /*#__PURE__*/React.createElement(TypeAheadMenuModern, {
|
|
21
57
|
editorView: editorView,
|
|
22
58
|
popupMountRef: popupMountRef,
|
|
23
|
-
typeAheadState:
|
|
59
|
+
typeAheadState: {
|
|
60
|
+
triggerHandler: triggerHandler,
|
|
61
|
+
items: items,
|
|
62
|
+
errorInfo: errorInfo,
|
|
63
|
+
decorationElement: decorationElement,
|
|
64
|
+
decorationSet: decorationSet,
|
|
65
|
+
query: query
|
|
66
|
+
},
|
|
24
67
|
api: api
|
|
25
68
|
});
|
|
26
69
|
} else {
|
|
27
70
|
return /*#__PURE__*/React.createElement(TypeAheadMenu, {
|
|
28
71
|
editorView: editorView,
|
|
29
72
|
popupMountRef: popupMountRef,
|
|
30
|
-
typeAheadState:
|
|
73
|
+
typeAheadState: {
|
|
74
|
+
triggerHandler: triggerHandler,
|
|
75
|
+
items: items,
|
|
76
|
+
errorInfo: errorInfo,
|
|
77
|
+
decorationElement: decorationElement,
|
|
78
|
+
decorationSet: decorationSet,
|
|
79
|
+
query: query
|
|
80
|
+
},
|
|
81
|
+
selectedIndex: selectedIndex,
|
|
31
82
|
api: api
|
|
32
83
|
});
|
|
33
84
|
}
|
package/dist/esm/ui/ListRow.js
CHANGED
|
@@ -1,4 +1,17 @@
|
|
|
1
1
|
import React, { useEffect, useRef } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
*
|
|
4
|
+
* @param root0
|
|
5
|
+
* @param root0.children
|
|
6
|
+
* @param root0.registerChild
|
|
7
|
+
* @param root0.measure
|
|
8
|
+
* @param root0.index
|
|
9
|
+
* @param root0.style
|
|
10
|
+
* @param root0.isVisible
|
|
11
|
+
* @param root0.isScrolling
|
|
12
|
+
* @param root0.onMouseMove
|
|
13
|
+
* @example
|
|
14
|
+
*/
|
|
2
15
|
export function ListRow(_ref) {
|
|
3
16
|
var children = _ref.children,
|
|
4
17
|
registerChild = _ref.registerChild,
|
|
@@ -9,9 +9,10 @@ import React, { useCallback, useLayoutEffect, useMemo } from 'react';
|
|
|
9
9
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
10
10
|
import { css, jsx } from '@emotion/react';
|
|
11
11
|
import { useIntl } from 'react-intl-next';
|
|
12
|
-
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
12
|
+
import { useSharedPluginState, sharedPluginStateHookMigratorFactory } from '@atlaskit/editor-common/hooks';
|
|
13
13
|
import { IconFallback } from '@atlaskit/editor-common/quick-insert';
|
|
14
14
|
import { SelectItemMode, typeAheadListMessages } from '@atlaskit/editor-common/type-ahead';
|
|
15
|
+
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
15
16
|
import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
|
|
16
17
|
import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
|
|
17
18
|
import { ButtonItem } from '@atlaskit/menu';
|
|
@@ -149,6 +150,18 @@ var CustomItemComponentWrapper = /*#__PURE__*/React.memo(function (props) {
|
|
|
149
150
|
onHover: noop
|
|
150
151
|
})));
|
|
151
152
|
});
|
|
153
|
+
var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
|
|
154
|
+
var connectivityMode = useSharedPluginStateSelector(api, 'connectivity.mode');
|
|
155
|
+
return {
|
|
156
|
+
connectivityMode: connectivityMode
|
|
157
|
+
};
|
|
158
|
+
}, function (api) {
|
|
159
|
+
var _useSharedPluginState = useSharedPluginState(api, ['connectivity']),
|
|
160
|
+
connectivityState = _useSharedPluginState.connectivityState;
|
|
161
|
+
return {
|
|
162
|
+
connectivityMode: connectivityState === null || connectivityState === void 0 ? void 0 : connectivityState.mode
|
|
163
|
+
};
|
|
164
|
+
});
|
|
152
165
|
export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref2) {
|
|
153
166
|
var item = _ref2.item,
|
|
154
167
|
itemsLength = _ref2.itemsLength,
|
|
@@ -159,14 +172,14 @@ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref2) {
|
|
|
159
172
|
moreElementsInQuickInsertViewEnabled = _ref2.moreElementsInQuickInsertViewEnabled,
|
|
160
173
|
api = _ref2.api,
|
|
161
174
|
firstOnlineSupportedIndex = _ref2.firstOnlineSupportedIndex;
|
|
162
|
-
var
|
|
163
|
-
|
|
175
|
+
var _useSharedState = useSharedState(api),
|
|
176
|
+
connectivityMode = _useSharedState.connectivityMode;
|
|
164
177
|
var isItemDisabled = function isItemDisabled(item) {
|
|
165
178
|
var _item$isDisabledOffli;
|
|
166
|
-
return
|
|
179
|
+
return connectivityMode === 'offline' && ((_item$isDisabledOffli = item === null || item === void 0 ? void 0 : item.isDisabledOffline) !== null && _item$isDisabledOffli !== void 0 ? _item$isDisabledOffli : false);
|
|
167
180
|
};
|
|
168
181
|
var itemIsDisabled = isItemDisabled(item);
|
|
169
|
-
var isFirstEnabledIndex =
|
|
182
|
+
var isFirstEnabledIndex = connectivityMode === 'offline' && itemIndex === firstOnlineSupportedIndex && selectedIndex === -1;
|
|
170
183
|
|
|
171
184
|
/**
|
|
172
185
|
* To select and highlight the first Item when no item is selected
|
|
@@ -174,7 +187,7 @@ export var TypeAheadListItem = /*#__PURE__*/React.memo(function (_ref2) {
|
|
|
174
187
|
*/
|
|
175
188
|
var isSelected = false;
|
|
176
189
|
// Feature gated - connectivity is only available on desktop and behind a feature gate on full page mode
|
|
177
|
-
if (
|
|
190
|
+
if (connectivityMode === undefined) {
|
|
178
191
|
isSelected = itemIndex === selectedIndex || selectedIndex === -1 && itemIndex === 0;
|
|
179
192
|
} else {
|
|
180
193
|
isSelected = itemIndex === selectedIndex || selectedIndex === -1 && (itemIndex === 0 || isFirstEnabledIndex) && !itemIsDisabled;
|
|
@@ -10,12 +10,12 @@ export var TypeAheadMenu = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
10
10
|
var editorView = _ref.editorView,
|
|
11
11
|
popupMountRef = _ref.popupMountRef,
|
|
12
12
|
typeAheadState = _ref.typeAheadState,
|
|
13
|
+
selectedIndex = _ref.selectedIndex,
|
|
13
14
|
api = _ref.api;
|
|
14
15
|
var isOpen = typeAheadState.decorationSet.find().length > 0;
|
|
15
16
|
var triggerHandler = typeAheadState.triggerHandler,
|
|
16
17
|
items = typeAheadState.items,
|
|
17
18
|
errorInfo = typeAheadState.errorInfo,
|
|
18
|
-
selectedIndex = typeAheadState.selectedIndex,
|
|
19
19
|
decorationElement = typeAheadState.decorationElement,
|
|
20
20
|
decorationSet = typeAheadState.decorationSet,
|
|
21
21
|
query = typeAheadState.query;
|
|
@@ -9,9 +9,10 @@ import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useSta
|
|
|
9
9
|
import { css, jsx } from '@emotion/react';
|
|
10
10
|
import rafSchedule from 'raf-schd';
|
|
11
11
|
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
12
|
-
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
12
|
+
import { useSharedPluginState, sharedPluginStateHookMigratorFactory } 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';
|
|
15
|
+
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
15
16
|
import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
|
|
16
17
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
17
18
|
import { N0, N50A, N60A } from '@atlaskit/theme/colors';
|
|
@@ -53,6 +54,18 @@ var Highlight = function Highlight(_ref) {
|
|
|
53
54
|
return triggerHandler.getHighlight(state);
|
|
54
55
|
};
|
|
55
56
|
var OFFSET = [0, 8];
|
|
57
|
+
var useSharedState = sharedPluginStateHookMigratorFactory(function (api) {
|
|
58
|
+
var moreElementsInQuickInsertView = useSharedPluginStateSelector(api, 'featureFlags.moreElementsInQuickInsertView');
|
|
59
|
+
return {
|
|
60
|
+
moreElementsInQuickInsertView: moreElementsInQuickInsertView
|
|
61
|
+
};
|
|
62
|
+
}, function (api) {
|
|
63
|
+
var _useSharedPluginState = useSharedPluginState(api, ['featureFlags']),
|
|
64
|
+
featureFlagsState = _useSharedPluginState.featureFlagsState;
|
|
65
|
+
return {
|
|
66
|
+
moreElementsInQuickInsertView: featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.moreElementsInQuickInsertView
|
|
67
|
+
};
|
|
68
|
+
});
|
|
56
69
|
export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
|
|
57
70
|
var _getPluginState;
|
|
58
71
|
var editorView = props.editorView,
|
|
@@ -70,9 +83,9 @@ export var TypeAheadPopup = /*#__PURE__*/React.memo(function (props) {
|
|
|
70
83
|
api = props.api,
|
|
71
84
|
showViewMore = props.showViewMore;
|
|
72
85
|
var ref = useRef(null);
|
|
73
|
-
var
|
|
74
|
-
|
|
75
|
-
var moreElementsInQuickInsertViewEnabled =
|
|
86
|
+
var _useSharedState = useSharedState(api),
|
|
87
|
+
moreElementsInQuickInsertView = _useSharedState.moreElementsInQuickInsertView;
|
|
88
|
+
var moreElementsInQuickInsertViewEnabled = moreElementsInQuickInsertView && triggerHandler.id === TypeAheadAvailableNodes.QUICK_INSERT;
|
|
76
89
|
var isEditorControlsPatch2Enabled = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_2');
|
|
77
90
|
var defaultMenuHeight = useMemo(function () {
|
|
78
91
|
return moreElementsInQuickInsertViewEnabled ? DEFAULT_TYPEAHEAD_MENU_HEIGHT_NEW : DEFAULT_TYPEAHEAD_MENU_HEIGHT;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
2
|
-
import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
-
import { TypeAheadPlugin } from '../typeAheadPluginType';
|
|
4
|
-
import { TypeAheadInputMethod } from '../types';
|
|
2
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import type { TypeAheadPlugin } from '../typeAheadPluginType';
|
|
4
|
+
import type { TypeAheadInputMethod } from '../types';
|
|
5
5
|
export type CloseActionType = ACTION.INSERTED | ACTION.CANCELLED | ACTION.VIEW_MORE;
|
|
6
6
|
export type InputMethodType = INPUT_METHOD.KEYBOARD | INPUT_METHOD.MOUSE;
|
|
7
7
|
export declare const fireTypeAheadClosedAnalyticsEvent: (api: ExtractInjectionAPI<TypeAheadPlugin> | undefined, closeAction: CloseActionType | null, hasQuery: boolean, inputMethod: InputMethodType | null, invocationMethod?: TypeAheadInputMethod | null) => void;
|
|
@@ -1,10 +1,23 @@
|
|
|
1
|
-
import React, { type ReactNode, MouseEventHandler } from 'react';
|
|
2
|
-
import { ListRowProps } from 'react-virtualized';
|
|
1
|
+
import React, { type ReactNode, type MouseEventHandler } from 'react';
|
|
2
|
+
import { type ListRowProps } from 'react-virtualized';
|
|
3
3
|
type Props = {
|
|
4
4
|
measure: () => void;
|
|
5
5
|
registerChild?: (element?: Element) => void;
|
|
6
6
|
onMouseMove: MouseEventHandler<HTMLDivElement>;
|
|
7
7
|
children: ReactNode;
|
|
8
8
|
} & Pick<ListRowProps, 'index' | 'style' | 'isScrolling' | 'isVisible'>;
|
|
9
|
+
/**
|
|
10
|
+
*
|
|
11
|
+
* @param root0
|
|
12
|
+
* @param root0.children
|
|
13
|
+
* @param root0.registerChild
|
|
14
|
+
* @param root0.measure
|
|
15
|
+
* @param root0.index
|
|
16
|
+
* @param root0.style
|
|
17
|
+
* @param root0.isVisible
|
|
18
|
+
* @param root0.isScrolling
|
|
19
|
+
* @param root0.onMouseMove
|
|
20
|
+
* @example
|
|
21
|
+
*/
|
|
9
22
|
export declare function ListRow({ children, registerChild, measure, index, style, isVisible, isScrolling, onMouseMove, }: Props): React.JSX.Element;
|
|
10
23
|
export {};
|
|
@@ -7,7 +7,7 @@ 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
|
+
import { type InputMethodType } from '../pm-plugins/analytics';
|
|
11
11
|
import { type TypeAheadPlugin } from '../typeAheadPluginType';
|
|
12
12
|
import type { TypeAheadHandler } from '../types';
|
|
13
13
|
export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlProps<{
|
|
@@ -4,10 +4,11 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
|
4
4
|
import type { TypeAheadPlugin } from '../typeAheadPluginType';
|
|
5
5
|
import type { PopupMountPointReference, TypeAheadPluginSharedState } from '../types';
|
|
6
6
|
type TypeAheadMenuType = {
|
|
7
|
-
typeAheadState: TypeAheadPluginSharedState
|
|
7
|
+
typeAheadState: Omit<TypeAheadPluginSharedState, 'isOpen' | 'isAllowed' | 'selectedIndex'>;
|
|
8
8
|
editorView: EditorView;
|
|
9
9
|
popupMountRef: PopupMountPointReference;
|
|
10
10
|
api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
|
|
11
|
+
selectedIndex: number;
|
|
11
12
|
};
|
|
12
|
-
export declare const TypeAheadMenu: React.MemoExoticComponent<({ editorView, popupMountRef, typeAheadState, api }: TypeAheadMenuType) => React.JSX.Element | null>;
|
|
13
|
+
export declare const TypeAheadMenu: React.MemoExoticComponent<({ editorView, popupMountRef, typeAheadState, selectedIndex, api }: TypeAheadMenuType) => React.JSX.Element | null>;
|
|
13
14
|
export {};
|
|
@@ -4,7 +4,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
|
4
4
|
import type { TypeAheadPlugin } from '../../typeAheadPluginType';
|
|
5
5
|
import type { PopupMountPointReference, TypeAheadPluginSharedState } from '../../types';
|
|
6
6
|
type TypeAheadMenuType = {
|
|
7
|
-
typeAheadState: TypeAheadPluginSharedState
|
|
7
|
+
typeAheadState: Omit<TypeAheadPluginSharedState, 'isOpen' | 'isAllowed' | 'selectedIndex'>;
|
|
8
8
|
editorView: EditorView;
|
|
9
9
|
popupMountRef: PopupMountPointReference;
|
|
10
10
|
api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ACTION, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
2
|
-
import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
-
import { TypeAheadPlugin } from '../typeAheadPluginType';
|
|
4
|
-
import { TypeAheadInputMethod } from '../types';
|
|
2
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import type { TypeAheadPlugin } from '../typeAheadPluginType';
|
|
4
|
+
import type { TypeAheadInputMethod } from '../types';
|
|
5
5
|
export type CloseActionType = ACTION.INSERTED | ACTION.CANCELLED | ACTION.VIEW_MORE;
|
|
6
6
|
export type InputMethodType = INPUT_METHOD.KEYBOARD | INPUT_METHOD.MOUSE;
|
|
7
7
|
export declare const fireTypeAheadClosedAnalyticsEvent: (api: ExtractInjectionAPI<TypeAheadPlugin> | undefined, closeAction: CloseActionType | null, hasQuery: boolean, inputMethod: InputMethodType | null, invocationMethod?: TypeAheadInputMethod | null) => void;
|
|
@@ -1,10 +1,23 @@
|
|
|
1
|
-
import React, { type ReactNode, MouseEventHandler } from 'react';
|
|
2
|
-
import { ListRowProps } from 'react-virtualized';
|
|
1
|
+
import React, { type ReactNode, type MouseEventHandler } from 'react';
|
|
2
|
+
import { type ListRowProps } from 'react-virtualized';
|
|
3
3
|
type Props = {
|
|
4
4
|
measure: () => void;
|
|
5
5
|
registerChild?: (element?: Element) => void;
|
|
6
6
|
onMouseMove: MouseEventHandler<HTMLDivElement>;
|
|
7
7
|
children: ReactNode;
|
|
8
8
|
} & Pick<ListRowProps, 'index' | 'style' | 'isScrolling' | 'isVisible'>;
|
|
9
|
+
/**
|
|
10
|
+
*
|
|
11
|
+
* @param root0
|
|
12
|
+
* @param root0.children
|
|
13
|
+
* @param root0.registerChild
|
|
14
|
+
* @param root0.measure
|
|
15
|
+
* @param root0.index
|
|
16
|
+
* @param root0.style
|
|
17
|
+
* @param root0.isVisible
|
|
18
|
+
* @param root0.isScrolling
|
|
19
|
+
* @param root0.onMouseMove
|
|
20
|
+
* @example
|
|
21
|
+
*/
|
|
9
22
|
export declare function ListRow({ children, registerChild, measure, index, style, isVisible, isScrolling, onMouseMove, }: Props): React.JSX.Element;
|
|
10
23
|
export {};
|
|
@@ -7,7 +7,7 @@ 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
|
+
import { type InputMethodType } from '../pm-plugins/analytics';
|
|
11
11
|
import { type TypeAheadPlugin } from '../typeAheadPluginType';
|
|
12
12
|
import type { TypeAheadHandler } from '../types';
|
|
13
13
|
export declare const TypeAheadList: React.FC<import("react-intl-next").WithIntlProps<{
|
|
@@ -4,10 +4,11 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
|
4
4
|
import type { TypeAheadPlugin } from '../typeAheadPluginType';
|
|
5
5
|
import type { PopupMountPointReference, TypeAheadPluginSharedState } from '../types';
|
|
6
6
|
type TypeAheadMenuType = {
|
|
7
|
-
typeAheadState: TypeAheadPluginSharedState
|
|
7
|
+
typeAheadState: Omit<TypeAheadPluginSharedState, 'isOpen' | 'isAllowed' | 'selectedIndex'>;
|
|
8
8
|
editorView: EditorView;
|
|
9
9
|
popupMountRef: PopupMountPointReference;
|
|
10
10
|
api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
|
|
11
|
+
selectedIndex: number;
|
|
11
12
|
};
|
|
12
|
-
export declare const TypeAheadMenu: React.MemoExoticComponent<({ editorView, popupMountRef, typeAheadState, api }: TypeAheadMenuType) => React.JSX.Element | null>;
|
|
13
|
+
export declare const TypeAheadMenu: React.MemoExoticComponent<({ editorView, popupMountRef, typeAheadState, selectedIndex, api }: TypeAheadMenuType) => React.JSX.Element | null>;
|
|
13
14
|
export {};
|
|
@@ -4,7 +4,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
|
4
4
|
import type { TypeAheadPlugin } from '../../typeAheadPluginType';
|
|
5
5
|
import type { PopupMountPointReference, TypeAheadPluginSharedState } from '../../types';
|
|
6
6
|
type TypeAheadMenuType = {
|
|
7
|
-
typeAheadState: TypeAheadPluginSharedState
|
|
7
|
+
typeAheadState: Omit<TypeAheadPluginSharedState, 'isOpen' | 'isAllowed' | 'selectedIndex'>;
|
|
8
8
|
editorView: EditorView;
|
|
9
9
|
popupMountRef: PopupMountPointReference;
|
|
10
10
|
api: ExtractInjectionAPI<TypeAheadPlugin> | undefined;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-type-ahead",
|
|
3
|
-
"version": "2.7.
|
|
3
|
+
"version": "2.7.3",
|
|
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": "^105.
|
|
37
|
+
"@atlaskit/editor-common": "^105.5.0",
|
|
38
38
|
"@atlaskit/editor-element-browser": "^0.1.0",
|
|
39
39
|
"@atlaskit/editor-plugin-analytics": "^2.3.0",
|
|
40
40
|
"@atlaskit/editor-plugin-connectivity": "^2.0.0",
|
|
@@ -44,12 +44,12 @@
|
|
|
44
44
|
"@atlaskit/editor-shared-styles": "^3.4.0",
|
|
45
45
|
"@atlaskit/heading": "^5.2.0",
|
|
46
46
|
"@atlaskit/icon": "^26.0.0",
|
|
47
|
-
"@atlaskit/menu": "^
|
|
47
|
+
"@atlaskit/menu": "^6.0.0",
|
|
48
48
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
49
49
|
"@atlaskit/primitives": "^14.7.0",
|
|
50
50
|
"@atlaskit/prosemirror-input-rules": "^3.3.0",
|
|
51
51
|
"@atlaskit/theme": "^18.0.0",
|
|
52
|
-
"@atlaskit/tmp-editor-statsig": "^4.
|
|
52
|
+
"@atlaskit/tmp-editor-statsig": "^4.22.0",
|
|
53
53
|
"@atlaskit/tokens": "^4.8.0",
|
|
54
54
|
"@babel/runtime": "^7.0.0",
|
|
55
55
|
"@emotion/react": "^11.7.1",
|