@atlaskit/editor-plugin-type-ahead 1.10.5 → 1.10.7

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.
Files changed (21) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/pm-plugins/decorations.js +49 -20
  3. package/dist/cjs/pm-plugins/main.js +3 -1
  4. package/dist/cjs/typeAheadPlugin.js +4 -2
  5. package/dist/cjs/ui/AssistiveText.js +1 -1
  6. package/dist/cjs/ui/InputQuery.js +3 -2
  7. package/dist/es2019/pm-plugins/decorations.js +49 -20
  8. package/dist/es2019/pm-plugins/main.js +3 -1
  9. package/dist/es2019/typeAheadPlugin.js +4 -2
  10. package/dist/es2019/ui/AssistiveText.js +1 -1
  11. package/dist/es2019/ui/InputQuery.js +3 -2
  12. package/dist/esm/pm-plugins/decorations.js +49 -20
  13. package/dist/esm/pm-plugins/main.js +3 -1
  14. package/dist/esm/typeAheadPlugin.js +4 -2
  15. package/dist/esm/ui/AssistiveText.js +1 -1
  16. package/dist/esm/ui/InputQuery.js +3 -2
  17. package/dist/types/pm-plugins/decorations.d.ts +3 -1
  18. package/dist/types/pm-plugins/main.d.ts +3 -1
  19. package/dist/types-ts4.5/pm-plugins/decorations.d.ts +3 -1
  20. package/dist/types-ts4.5/pm-plugins/main.d.ts +3 -1
  21. package/package.json +7 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/editor-plugin-type-ahead
2
2
 
3
+ ## 1.10.7
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 1.10.6
10
+
11
+ ### Patch Changes
12
+
13
+ - [#164952](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/164952)
14
+ [`0faf43580a9d8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0faf43580a9d8) -
15
+ ED-25612: moves typeahead from reactdom render to portalprovider
16
+ - Updated dependencies
17
+
3
18
  ## 1.10.5
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/pm-plugins/decorations.js CHANGED
@@ -13,6 +13,7 @@ var _w3cKeyname = require("w3c-keyname");
13
13
  var _history = require("@atlaskit/editor-prosemirror/history");
14
14
  var _state = require("@atlaskit/editor-prosemirror/state");
15
15
  var _view = require("@atlaskit/editor-prosemirror/view");
16
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
16
17
  var _colors = require("@atlaskit/theme/colors");
17
18
  var _WrapperTypeAhead = require("../ui/WrapperTypeAhead");
18
19
  var _closeTypeAhead = require("./commands/close-type-ahead");
@@ -21,7 +22,8 @@ var _statsModifier = require("./stats-modifier");
21
22
  var _utils = require("./utils");
22
23
  var factoryDecorations = exports.factoryDecorations = function factoryDecorations(_ref) {
23
24
  var intl = _ref.intl,
24
- popupMountRef = _ref.popupMountRef;
25
+ popupMountRef = _ref.popupMountRef,
26
+ nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI;
25
27
  var createDecorations = function createDecorations(tr, _ref2) {
26
28
  var triggerHandler = _ref2.triggerHandler,
27
29
  inputMethod = _ref2.inputMethod,
@@ -40,7 +42,6 @@ var factoryDecorations = exports.factoryDecorations = function factoryDecoration
40
42
  var stats = new _statsModifier.StatsModifier();
41
43
  var shouldFocusCursorInsideQuery = true;
42
44
  var deco = _view.Decoration.widget($cursor.pos, function (editorView, getDecorationPosition) {
43
- var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
44
45
  typeaheadComponent.setAttribute('id', decorationId);
45
46
  typeaheadComponent.setAttribute('role', 'search');
46
47
  typeaheadComponent.dataset.typeAheadQuery = 'true';
@@ -77,23 +78,47 @@ var factoryDecorations = exports.factoryDecorations = function factoryDecoration
77
78
  }
78
79
  return false;
79
80
  };
80
- _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
81
- locale: intl.locale || 'en',
82
- messages: intl.messages,
83
- formats: intl.formats
84
- }, /*#__PURE__*/_react.default.createElement(_WrapperTypeAhead.WrapperTypeAhead, {
85
- triggerHandler: triggerHandler,
86
- editorView: editorView,
87
- anchorElement: typeaheadComponent,
88
- inputMethod: inputMethod,
89
- getDecorationPosition: getDecorationPosition,
90
- shouldFocusCursorInsideQuery: shouldFocusCursorInsideQuery,
91
- popupsMountPoint: (_popupMountRef$curren = popupMountRef.current) === null || _popupMountRef$curren === void 0 ? void 0 : _popupMountRef$curren.popupsMountPoint,
92
- popupsBoundariesElement: (_popupMountRef$curren2 = popupMountRef.current) === null || _popupMountRef$curren2 === void 0 ? void 0 : _popupMountRef$curren2.popupsBoundariesElement,
93
- popupsScrollableElement: (_popupMountRef$curren3 = popupMountRef.current) === null || _popupMountRef$curren3 === void 0 ? void 0 : _popupMountRef$curren3.popupsScrollableElement,
94
- onUndoRedo: onUndoRedo,
95
- reopenQuery: reopenQuery
96
- })), typeaheadComponent);
81
+ if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
82
+ nodeViewPortalProviderAPI.render(function () {
83
+ var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
84
+ return /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
85
+ locale: intl.locale || 'en',
86
+ messages: intl.messages,
87
+ formats: intl.formats
88
+ }, /*#__PURE__*/_react.default.createElement(_WrapperTypeAhead.WrapperTypeAhead, {
89
+ triggerHandler: triggerHandler,
90
+ editorView: editorView,
91
+ anchorElement: typeaheadComponent,
92
+ inputMethod: inputMethod,
93
+ getDecorationPosition: getDecorationPosition,
94
+ shouldFocusCursorInsideQuery: shouldFocusCursorInsideQuery,
95
+ popupsMountPoint: (_popupMountRef$curren = popupMountRef.current) === null || _popupMountRef$curren === void 0 ? void 0 : _popupMountRef$curren.popupsMountPoint,
96
+ popupsBoundariesElement: (_popupMountRef$curren2 = popupMountRef.current) === null || _popupMountRef$curren2 === void 0 ? void 0 : _popupMountRef$curren2.popupsBoundariesElement,
97
+ popupsScrollableElement: (_popupMountRef$curren3 = popupMountRef.current) === null || _popupMountRef$curren3 === void 0 ? void 0 : _popupMountRef$curren3.popupsScrollableElement,
98
+ onUndoRedo: onUndoRedo,
99
+ reopenQuery: reopenQuery
100
+ }));
101
+ }, typeaheadComponent, decorationId);
102
+ } else {
103
+ var _popupMountRef$curren4, _popupMountRef$curren5, _popupMountRef$curren6;
104
+ _reactDom.default.render( /*#__PURE__*/_react.default.createElement(_reactIntlNext.IntlProvider, {
105
+ locale: intl.locale || 'en',
106
+ messages: intl.messages,
107
+ formats: intl.formats
108
+ }, /*#__PURE__*/_react.default.createElement(_WrapperTypeAhead.WrapperTypeAhead, {
109
+ triggerHandler: triggerHandler,
110
+ editorView: editorView,
111
+ anchorElement: typeaheadComponent,
112
+ inputMethod: inputMethod,
113
+ getDecorationPosition: getDecorationPosition,
114
+ shouldFocusCursorInsideQuery: shouldFocusCursorInsideQuery,
115
+ popupsMountPoint: (_popupMountRef$curren4 = popupMountRef.current) === null || _popupMountRef$curren4 === void 0 ? void 0 : _popupMountRef$curren4.popupsMountPoint,
116
+ popupsBoundariesElement: (_popupMountRef$curren5 = popupMountRef.current) === null || _popupMountRef$curren5 === void 0 ? void 0 : _popupMountRef$curren5.popupsBoundariesElement,
117
+ popupsScrollableElement: (_popupMountRef$curren6 = popupMountRef.current) === null || _popupMountRef$curren6 === void 0 ? void 0 : _popupMountRef$curren6.popupsScrollableElement,
118
+ onUndoRedo: onUndoRedo,
119
+ reopenQuery: reopenQuery
120
+ })), typeaheadComponent);
121
+ }
97
122
  shouldFocusCursorInsideQuery = false;
98
123
  return typeaheadComponent;
99
124
  }, {
@@ -135,7 +160,11 @@ var factoryDecorations = exports.factoryDecorations = function factoryDecoration
135
160
  if (!decoElement) {
136
161
  return;
137
162
  }
138
- _reactDom.default.unmountComponentAtNode(decoElement);
163
+ if ((0, _platformFeatureFlags.fg)('platform_editor_react18_plugin_portalprovider')) {
164
+ nodeViewPortalProviderAPI.remove(spec.key);
165
+ } else {
166
+ _reactDom.default.unmountComponentAtNode(decoElement);
167
+ }
139
168
  });
140
169
  return true;
141
170
  };
package/dist/cjs/pm-plugins/main.js CHANGED
@@ -30,10 +30,12 @@ function createPlugin(_ref) {
30
30
  var reactDispatch = _ref.reactDispatch,
31
31
  popupMountRef = _ref.popupMountRef,
32
32
  typeAheadHandlers = _ref.typeAheadHandlers,
33
- getIntl = _ref.getIntl;
33
+ getIntl = _ref.getIntl,
34
+ nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI;
34
35
  var intl = getIntl();
35
36
  var _factoryDecorations = (0, _decorations.factoryDecorations)({
36
37
  intl: intl,
38
+ nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
37
39
  popupMountRef: popupMountRef
38
40
  }),
39
41
  createDecorations = _factoryDecorations.createDecorations,
package/dist/cjs/typeAheadPlugin.js CHANGED
@@ -163,12 +163,14 @@ var typeAheadPlugin = exports.typeAheadPlugin = function typeAheadPlugin(_ref) {
163
163
  name: 'typeAhead',
164
164
  plugin: function plugin(_ref2) {
165
165
  var dispatch = _ref2.dispatch,
166
- getIntl = _ref2.getIntl;
166
+ getIntl = _ref2.getIntl,
167
+ nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
167
168
  return (0, _main.createPlugin)({
168
169
  getIntl: getIntl,
169
170
  popupMountRef: popupMountRef,
170
171
  reactDispatch: dispatch,
171
- typeAheadHandlers: typeAhead
172
+ typeAheadHandlers: typeAhead,
173
+ nodeViewPortalProviderAPI: nodeViewPortalProviderAPI
172
174
  });
173
175
  }
174
176
  }, {
package/dist/cjs/ui/AssistiveText.js CHANGED
@@ -192,7 +192,7 @@ var AssistiveTextNew = exports.AssistiveTextNew = function AssistiveTextNew(_ref
192
192
  }, !silenced && debounced && !bump ? assistiveText : ''));
193
193
  };
194
194
  var AssistiveText = exports.AssistiveText = function AssistiveText(props) {
195
- if ((0, _platformFeatureFlags.fg)('platform_editor_react18_phase2')) {
195
+ if ((0, _platformFeatureFlags.fg)('platform_editor_react18_phase2_v2')) {
196
196
  return (0, _react2.jsx)(AssistiveTextNew, props);
197
197
  } else {
198
198
  return (0, _react2.jsx)(AssistveTextOld, props);
package/dist/cjs/ui/InputQuery.js CHANGED
@@ -393,13 +393,14 @@ var InputQuery = exports.InputQuery = /*#__PURE__*/_react.default.memo(function
393
393
  "data-query-prefix": triggerQueryPrefix
394
394
  }, query === null ? (0, _react2.jsx)("input", {
395
395
  ref: inputRef,
396
- type: "text"
396
+ type: "text",
397
+ "aria-label": intl.formatMessage(getAriaLabel(triggerQueryPrefix, intl))
397
398
  }) : query), (0, _react2.jsx)("span", {
398
399
  id: assistiveHintID,
399
400
  style: {
400
401
  display: 'none'
401
402
  }
402
- }, intl.formatMessage(getAriaLabel(triggerQueryPrefix, intl)), ",", intl.formatMessage(_typeAhead.typeAheadListMessages.inputQueryAssistiveLabel)), (0, _react2.jsx)(_AssistiveText.AssistiveText, {
403
+ }, intl.formatMessage(_typeAhead.typeAheadListMessages.inputQueryAssistiveLabel)), (0, _react2.jsx)(_AssistiveText.AssistiveText, {
403
404
  assistiveText: items.length === 0 ? intl.formatMessage(_typeAhead.typeAheadListMessages.noSearchResultsLabel, {
404
405
  itemsLength: items.length
405
406
  }) : '',
package/dist/es2019/pm-plugins/decorations.js CHANGED
@@ -6,6 +6,7 @@ import { keyName as keyNameNormalized } from 'w3c-keyname';
6
6
  import { redo, undo } from '@atlaskit/editor-prosemirror/history';
7
7
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
8
8
  import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
9
+ import { fg } from '@atlaskit/platform-feature-flags';
9
10
  import { B400 } from '@atlaskit/theme/colors';
10
11
  import { WrapperTypeAhead } from '../ui/WrapperTypeAhead';
11
12
  import { closeTypeAhead } from './commands/close-type-ahead';
@@ -14,7 +15,8 @@ import { StatsModifier } from './stats-modifier';
14
15
  import { getTypeAheadQuery } from './utils';
15
16
  export const factoryDecorations = ({
16
17
  intl,
17
- popupMountRef
18
+ popupMountRef,
19
+ nodeViewPortalProviderAPI
18
20
  }) => {
19
21
  const createDecorations = (tr, {
20
22
  triggerHandler,
@@ -39,7 +41,6 @@ export const factoryDecorations = ({
39
41
  const stats = new StatsModifier();
40
42
  let shouldFocusCursorInsideQuery = true;
41
43
  const deco = Decoration.widget($cursor.pos, (editorView, getDecorationPosition) => {
42
- var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
43
44
  typeaheadComponent.setAttribute('id', decorationId);
44
45
  typeaheadComponent.setAttribute('role', 'search');
45
46
  typeaheadComponent.dataset.typeAheadQuery = 'true';
@@ -76,23 +77,47 @@ export const factoryDecorations = ({
76
77
  }
77
78
  return false;
78
79
  };
79
- ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
80
- locale: intl.locale || 'en',
81
- messages: intl.messages,
82
- formats: intl.formats
83
- }, /*#__PURE__*/React.createElement(WrapperTypeAhead, {
84
- triggerHandler: triggerHandler,
85
- editorView: editorView,
86
- anchorElement: typeaheadComponent,
87
- inputMethod: inputMethod,
88
- getDecorationPosition: getDecorationPosition,
89
- shouldFocusCursorInsideQuery: shouldFocusCursorInsideQuery,
90
- popupsMountPoint: (_popupMountRef$curren = popupMountRef.current) === null || _popupMountRef$curren === void 0 ? void 0 : _popupMountRef$curren.popupsMountPoint,
91
- popupsBoundariesElement: (_popupMountRef$curren2 = popupMountRef.current) === null || _popupMountRef$curren2 === void 0 ? void 0 : _popupMountRef$curren2.popupsBoundariesElement,
92
- popupsScrollableElement: (_popupMountRef$curren3 = popupMountRef.current) === null || _popupMountRef$curren3 === void 0 ? void 0 : _popupMountRef$curren3.popupsScrollableElement,
93
- onUndoRedo: onUndoRedo,
94
- reopenQuery: reopenQuery
95
- })), typeaheadComponent);
80
+ if (fg('platform_editor_react18_plugin_portalprovider')) {
81
+ nodeViewPortalProviderAPI.render(() => {
82
+ var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
83
+ return /*#__PURE__*/React.createElement(IntlProvider, {
84
+ locale: intl.locale || 'en',
85
+ messages: intl.messages,
86
+ formats: intl.formats
87
+ }, /*#__PURE__*/React.createElement(WrapperTypeAhead, {
88
+ triggerHandler: triggerHandler,
89
+ editorView: editorView,
90
+ anchorElement: typeaheadComponent,
91
+ inputMethod: inputMethod,
92
+ getDecorationPosition: getDecorationPosition,
93
+ shouldFocusCursorInsideQuery: shouldFocusCursorInsideQuery,
94
+ popupsMountPoint: (_popupMountRef$curren = popupMountRef.current) === null || _popupMountRef$curren === void 0 ? void 0 : _popupMountRef$curren.popupsMountPoint,
95
+ popupsBoundariesElement: (_popupMountRef$curren2 = popupMountRef.current) === null || _popupMountRef$curren2 === void 0 ? void 0 : _popupMountRef$curren2.popupsBoundariesElement,
96
+ popupsScrollableElement: (_popupMountRef$curren3 = popupMountRef.current) === null || _popupMountRef$curren3 === void 0 ? void 0 : _popupMountRef$curren3.popupsScrollableElement,
97
+ onUndoRedo: onUndoRedo,
98
+ reopenQuery: reopenQuery
99
+ }));
100
+ }, typeaheadComponent, decorationId);
101
+ } else {
102
+ var _popupMountRef$curren4, _popupMountRef$curren5, _popupMountRef$curren6;
103
+ ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
104
+ locale: intl.locale || 'en',
105
+ messages: intl.messages,
106
+ formats: intl.formats
107
+ }, /*#__PURE__*/React.createElement(WrapperTypeAhead, {
108
+ triggerHandler: triggerHandler,
109
+ editorView: editorView,
110
+ anchorElement: typeaheadComponent,
111
+ inputMethod: inputMethod,
112
+ getDecorationPosition: getDecorationPosition,
113
+ shouldFocusCursorInsideQuery: shouldFocusCursorInsideQuery,
114
+ popupsMountPoint: (_popupMountRef$curren4 = popupMountRef.current) === null || _popupMountRef$curren4 === void 0 ? void 0 : _popupMountRef$curren4.popupsMountPoint,
115
+ popupsBoundariesElement: (_popupMountRef$curren5 = popupMountRef.current) === null || _popupMountRef$curren5 === void 0 ? void 0 : _popupMountRef$curren5.popupsBoundariesElement,
116
+ popupsScrollableElement: (_popupMountRef$curren6 = popupMountRef.current) === null || _popupMountRef$curren6 === void 0 ? void 0 : _popupMountRef$curren6.popupsScrollableElement,
117
+ onUndoRedo: onUndoRedo,
118
+ reopenQuery: reopenQuery
119
+ })), typeaheadComponent);
120
+ }
96
121
  shouldFocusCursorInsideQuery = false;
97
122
  return typeaheadComponent;
98
123
  }, {
@@ -135,7 +160,11 @@ export const factoryDecorations = ({
135
160
  if (!decoElement) {
136
161
  return;
137
162
  }
138
- ReactDOM.unmountComponentAtNode(decoElement);
163
+ if (fg('platform_editor_react18_plugin_portalprovider')) {
164
+ nodeViewPortalProviderAPI.remove(spec.key);
165
+ } else {
166
+ ReactDOM.unmountComponentAtNode(decoElement);
167
+ }
139
168
  });
140
169
  return true;
141
170
  };
package/dist/es2019/pm-plugins/main.js CHANGED
@@ -22,7 +22,8 @@ export function createPlugin({
22
22
  reactDispatch,
23
23
  popupMountRef,
24
24
  typeAheadHandlers,
25
- getIntl
25
+ getIntl,
26
+ nodeViewPortalProviderAPI
26
27
  }) {
27
28
  const intl = getIntl();
28
29
  const {
@@ -30,6 +31,7 @@ export function createPlugin({
30
31
  removeDecorations
31
32
  } = factoryDecorations({
32
33
  intl,
34
+ nodeViewPortalProviderAPI,
33
35
  popupMountRef
34
36
  });
35
37
  const reducer = createReducer({
package/dist/es2019/typeAheadPlugin.js CHANGED
@@ -159,12 +159,14 @@ export const typeAheadPlugin = ({
159
159
  name: 'typeAhead',
160
160
  plugin: ({
161
161
  dispatch,
162
- getIntl
162
+ getIntl,
163
+ nodeViewPortalProviderAPI
163
164
  }) => createPlugin({
164
165
  getIntl,
165
166
  popupMountRef,
166
167
  reactDispatch: dispatch,
167
- typeAheadHandlers: typeAhead
168
+ typeAheadHandlers: typeAhead,
169
+ nodeViewPortalProviderAPI
168
170
  })
169
171
  }, {
170
172
  name: 'typeAheadEditorViewRef',
package/dist/es2019/ui/AssistiveText.js CHANGED
@@ -140,7 +140,7 @@ export const AssistiveTextNew = ({
140
140
  }, !silenced && debounced && !bump ? assistiveText : ''));
141
141
  };
142
142
  export const AssistiveText = props => {
143
- if (fg('platform_editor_react18_phase2')) {
143
+ if (fg('platform_editor_react18_phase2_v2')) {
144
144
  return jsx(AssistiveTextNew, props);
145
145
  } else {
146
146
  return jsx(AssistveTextOld, props);
package/dist/es2019/ui/InputQuery.js CHANGED
@@ -385,13 +385,14 @@ export const InputQuery = /*#__PURE__*/React.memo(({
385
385
  "data-query-prefix": triggerQueryPrefix
386
386
  }, query === null ? jsx("input", {
387
387
  ref: inputRef,
388
- type: "text"
388
+ type: "text",
389
+ "aria-label": intl.formatMessage(getAriaLabel(triggerQueryPrefix, intl))
389
390
  }) : query), jsx("span", {
390
391
  id: assistiveHintID,
391
392
  style: {
392
393
  display: 'none'
393
394
  }
394
- }, intl.formatMessage(getAriaLabel(triggerQueryPrefix, intl)), ",", intl.formatMessage(typeAheadListMessages.inputQueryAssistiveLabel)), jsx(AssistiveText, {
395
+ }, intl.formatMessage(typeAheadListMessages.inputQueryAssistiveLabel)), jsx(AssistiveText, {
395
396
  assistiveText: items.length === 0 ? intl.formatMessage(typeAheadListMessages.noSearchResultsLabel, {
396
397
  itemsLength: items.length
397
398
  }) : '',
package/dist/esm/pm-plugins/decorations.js CHANGED
@@ -6,6 +6,7 @@ import { keyName as keyNameNormalized } from 'w3c-keyname';
6
6
  import { redo, undo } from '@atlaskit/editor-prosemirror/history';
7
7
  import { TextSelection } from '@atlaskit/editor-prosemirror/state';
8
8
  import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
9
+ import { fg } from '@atlaskit/platform-feature-flags';
9
10
  import { B400 } from '@atlaskit/theme/colors';
10
11
  import { WrapperTypeAhead } from '../ui/WrapperTypeAhead';
11
12
  import { closeTypeAhead } from './commands/close-type-ahead';
@@ -14,7 +15,8 @@ import { StatsModifier } from './stats-modifier';
14
15
  import { getTypeAheadQuery } from './utils';
15
16
  export var factoryDecorations = function factoryDecorations(_ref) {
16
17
  var intl = _ref.intl,
17
- popupMountRef = _ref.popupMountRef;
18
+ popupMountRef = _ref.popupMountRef,
19
+ nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI;
18
20
  var createDecorations = function createDecorations(tr, _ref2) {
19
21
  var triggerHandler = _ref2.triggerHandler,
20
22
  inputMethod = _ref2.inputMethod,
@@ -33,7 +35,6 @@ export var factoryDecorations = function factoryDecorations(_ref) {
33
35
  var stats = new StatsModifier();
34
36
  var shouldFocusCursorInsideQuery = true;
35
37
  var deco = Decoration.widget($cursor.pos, function (editorView, getDecorationPosition) {
36
- var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
37
38
  typeaheadComponent.setAttribute('id', decorationId);
38
39
  typeaheadComponent.setAttribute('role', 'search');
39
40
  typeaheadComponent.dataset.typeAheadQuery = 'true';
@@ -70,23 +71,47 @@ export var factoryDecorations = function factoryDecorations(_ref) {
70
71
  }
71
72
  return false;
72
73
  };
73
- ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
74
- locale: intl.locale || 'en',
75
- messages: intl.messages,
76
- formats: intl.formats
77
- }, /*#__PURE__*/React.createElement(WrapperTypeAhead, {
78
- triggerHandler: triggerHandler,
79
- editorView: editorView,
80
- anchorElement: typeaheadComponent,
81
- inputMethod: inputMethod,
82
- getDecorationPosition: getDecorationPosition,
83
- shouldFocusCursorInsideQuery: shouldFocusCursorInsideQuery,
84
- popupsMountPoint: (_popupMountRef$curren = popupMountRef.current) === null || _popupMountRef$curren === void 0 ? void 0 : _popupMountRef$curren.popupsMountPoint,
85
- popupsBoundariesElement: (_popupMountRef$curren2 = popupMountRef.current) === null || _popupMountRef$curren2 === void 0 ? void 0 : _popupMountRef$curren2.popupsBoundariesElement,
86
- popupsScrollableElement: (_popupMountRef$curren3 = popupMountRef.current) === null || _popupMountRef$curren3 === void 0 ? void 0 : _popupMountRef$curren3.popupsScrollableElement,
87
- onUndoRedo: onUndoRedo,
88
- reopenQuery: reopenQuery
89
- })), typeaheadComponent);
74
+ if (fg('platform_editor_react18_plugin_portalprovider')) {
75
+ nodeViewPortalProviderAPI.render(function () {
76
+ var _popupMountRef$curren, _popupMountRef$curren2, _popupMountRef$curren3;
77
+ return /*#__PURE__*/React.createElement(IntlProvider, {
78
+ locale: intl.locale || 'en',
79
+ messages: intl.messages,
80
+ formats: intl.formats
81
+ }, /*#__PURE__*/React.createElement(WrapperTypeAhead, {
82
+ triggerHandler: triggerHandler,
83
+ editorView: editorView,
84
+ anchorElement: typeaheadComponent,
85
+ inputMethod: inputMethod,
86
+ getDecorationPosition: getDecorationPosition,
87
+ shouldFocusCursorInsideQuery: shouldFocusCursorInsideQuery,
88
+ popupsMountPoint: (_popupMountRef$curren = popupMountRef.current) === null || _popupMountRef$curren === void 0 ? void 0 : _popupMountRef$curren.popupsMountPoint,
89
+ popupsBoundariesElement: (_popupMountRef$curren2 = popupMountRef.current) === null || _popupMountRef$curren2 === void 0 ? void 0 : _popupMountRef$curren2.popupsBoundariesElement,
90
+ popupsScrollableElement: (_popupMountRef$curren3 = popupMountRef.current) === null || _popupMountRef$curren3 === void 0 ? void 0 : _popupMountRef$curren3.popupsScrollableElement,
91
+ onUndoRedo: onUndoRedo,
92
+ reopenQuery: reopenQuery
93
+ }));
94
+ }, typeaheadComponent, decorationId);
95
+ } else {
96
+ var _popupMountRef$curren4, _popupMountRef$curren5, _popupMountRef$curren6;
97
+ ReactDOM.render( /*#__PURE__*/React.createElement(IntlProvider, {
98
+ locale: intl.locale || 'en',
99
+ messages: intl.messages,
100
+ formats: intl.formats
101
+ }, /*#__PURE__*/React.createElement(WrapperTypeAhead, {
102
+ triggerHandler: triggerHandler,
103
+ editorView: editorView,
104
+ anchorElement: typeaheadComponent,
105
+ inputMethod: inputMethod,
106
+ getDecorationPosition: getDecorationPosition,
107
+ shouldFocusCursorInsideQuery: shouldFocusCursorInsideQuery,
108
+ popupsMountPoint: (_popupMountRef$curren4 = popupMountRef.current) === null || _popupMountRef$curren4 === void 0 ? void 0 : _popupMountRef$curren4.popupsMountPoint,
109
+ popupsBoundariesElement: (_popupMountRef$curren5 = popupMountRef.current) === null || _popupMountRef$curren5 === void 0 ? void 0 : _popupMountRef$curren5.popupsBoundariesElement,
110
+ popupsScrollableElement: (_popupMountRef$curren6 = popupMountRef.current) === null || _popupMountRef$curren6 === void 0 ? void 0 : _popupMountRef$curren6.popupsScrollableElement,
111
+ onUndoRedo: onUndoRedo,
112
+ reopenQuery: reopenQuery
113
+ })), typeaheadComponent);
114
+ }
90
115
  shouldFocusCursorInsideQuery = false;
91
116
  return typeaheadComponent;
92
117
  }, {
@@ -128,7 +153,11 @@ export var factoryDecorations = function factoryDecorations(_ref) {
128
153
  if (!decoElement) {
129
154
  return;
130
155
  }
131
- ReactDOM.unmountComponentAtNode(decoElement);
156
+ if (fg('platform_editor_react18_plugin_portalprovider')) {
157
+ nodeViewPortalProviderAPI.remove(spec.key);
158
+ } else {
159
+ ReactDOM.unmountComponentAtNode(decoElement);
160
+ }
132
161
  });
133
162
  return true;
134
163
  };
package/dist/esm/pm-plugins/main.js CHANGED
@@ -24,10 +24,12 @@ export function createPlugin(_ref) {
24
24
  var reactDispatch = _ref.reactDispatch,
25
25
  popupMountRef = _ref.popupMountRef,
26
26
  typeAheadHandlers = _ref.typeAheadHandlers,
27
- getIntl = _ref.getIntl;
27
+ getIntl = _ref.getIntl,
28
+ nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI;
28
29
  var intl = getIntl();
29
30
  var _factoryDecorations = factoryDecorations({
30
31
  intl: intl,
32
+ nodeViewPortalProviderAPI: nodeViewPortalProviderAPI,
31
33
  popupMountRef: popupMountRef
32
34
  }),
33
35
  createDecorations = _factoryDecorations.createDecorations,
package/dist/esm/typeAheadPlugin.js CHANGED
@@ -155,12 +155,14 @@ export var typeAheadPlugin = function typeAheadPlugin(_ref) {
155
155
  name: 'typeAhead',
156
156
  plugin: function plugin(_ref2) {
157
157
  var dispatch = _ref2.dispatch,
158
- getIntl = _ref2.getIntl;
158
+ getIntl = _ref2.getIntl,
159
+ nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
159
160
  return createPlugin({
160
161
  getIntl: getIntl,
161
162
  popupMountRef: popupMountRef,
162
163
  reactDispatch: dispatch,
163
- typeAheadHandlers: typeAhead
164
+ typeAheadHandlers: typeAhead,
165
+ nodeViewPortalProviderAPI: nodeViewPortalProviderAPI
164
166
  });
165
167
  }
166
168
  }, {
package/dist/esm/ui/AssistiveText.js CHANGED
@@ -186,7 +186,7 @@ export var AssistiveTextNew = function AssistiveTextNew(_ref3) {
186
186
  }, !silenced && debounced && !bump ? assistiveText : ''));
187
187
  };
188
188
  export var AssistiveText = function AssistiveText(props) {
189
- if (fg('platform_editor_react18_phase2')) {
189
+ if (fg('platform_editor_react18_phase2_v2')) {
190
190
  return jsx(AssistiveTextNew, props);
191
191
  } else {
192
192
  return jsx(AssistveTextOld, props);
package/dist/esm/ui/InputQuery.js CHANGED
@@ -382,13 +382,14 @@ export var InputQuery = /*#__PURE__*/React.memo(function (_ref) {
382
382
  "data-query-prefix": triggerQueryPrefix
383
383
  }, query === null ? jsx("input", {
384
384
  ref: inputRef,
385
- type: "text"
385
+ type: "text",
386
+ "aria-label": intl.formatMessage(getAriaLabel(triggerQueryPrefix, intl))
386
387
  }) : query), jsx("span", {
387
388
  id: assistiveHintID,
388
389
  style: {
389
390
  display: 'none'
390
391
  }
391
- }, intl.formatMessage(getAriaLabel(triggerQueryPrefix, intl)), ",", intl.formatMessage(typeAheadListMessages.inputQueryAssistiveLabel)), jsx(AssistiveText, {
392
+ }, intl.formatMessage(typeAheadListMessages.inputQueryAssistiveLabel)), jsx(AssistiveText, {
392
393
  assistiveText: items.length === 0 ? intl.formatMessage(typeAheadListMessages.noSearchResultsLabel, {
393
394
  itemsLength: items.length
394
395
  }) : '',
package/dist/types/pm-plugins/decorations.d.ts CHANGED
@@ -1,12 +1,14 @@
1
1
  import type { IntlShape } from 'react-intl-next';
2
+ import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
2
3
  import type { CreateTypeAheadDecorations, PopupMountPointReference, RemoveTypeAheadDecorations } from '../types';
3
4
  type FactoryProps = {
4
5
  intl: IntlShape;
5
6
  popupMountRef: PopupMountPointReference;
7
+ nodeViewPortalProviderAPI: PortalProviderAPI;
6
8
  };
7
9
  type FactoryReturn = {
8
10
  createDecorations: CreateTypeAheadDecorations;
9
11
  removeDecorations: RemoveTypeAheadDecorations;
10
12
  };
11
- export declare const factoryDecorations: ({ intl, popupMountRef }: FactoryProps) => FactoryReturn;
13
+ export declare const factoryDecorations: ({ intl, popupMountRef, nodeViewPortalProviderAPI, }: FactoryProps) => FactoryReturn;
12
14
  export {};
package/dist/types/pm-plugins/main.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { IntlShape } from 'react-intl-next';
2
2
  import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
3
+ import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
3
4
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
4
5
  import type { PopupMountPointReference, TypeAheadHandler } from '../types';
5
6
  type Props = {
@@ -7,6 +8,7 @@ type Props = {
7
8
  popupMountRef: PopupMountPointReference;
8
9
  typeAheadHandlers: Array<TypeAheadHandler>;
9
10
  getIntl: () => IntlShape;
11
+ nodeViewPortalProviderAPI: PortalProviderAPI;
10
12
  };
11
- export declare function createPlugin({ reactDispatch, popupMountRef, typeAheadHandlers, getIntl, }: Props): SafePlugin;
13
+ export declare function createPlugin({ reactDispatch, popupMountRef, typeAheadHandlers, getIntl, nodeViewPortalProviderAPI, }: Props): SafePlugin;
12
14
  export {};
package/dist/types-ts4.5/pm-plugins/decorations.d.ts CHANGED
@@ -1,12 +1,14 @@
1
1
  import type { IntlShape } from 'react-intl-next';
2
+ import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
2
3
  import type { CreateTypeAheadDecorations, PopupMountPointReference, RemoveTypeAheadDecorations } from '../types';
3
4
  type FactoryProps = {
4
5
  intl: IntlShape;
5
6
  popupMountRef: PopupMountPointReference;
7
+ nodeViewPortalProviderAPI: PortalProviderAPI;
6
8
  };
7
9
  type FactoryReturn = {
8
10
  createDecorations: CreateTypeAheadDecorations;
9
11
  removeDecorations: RemoveTypeAheadDecorations;
10
12
  };
11
- export declare const factoryDecorations: ({ intl, popupMountRef }: FactoryProps) => FactoryReturn;
13
+ export declare const factoryDecorations: ({ intl, popupMountRef, nodeViewPortalProviderAPI, }: FactoryProps) => FactoryReturn;
12
14
  export {};
package/dist/types-ts4.5/pm-plugins/main.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import type { IntlShape } from 'react-intl-next';
2
2
  import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
3
+ import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
3
4
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
4
5
  import type { PopupMountPointReference, TypeAheadHandler } from '../types';
5
6
  type Props = {
@@ -7,6 +8,7 @@ type Props = {
7
8
  popupMountRef: PopupMountPointReference;
8
9
  typeAheadHandlers: Array<TypeAheadHandler>;
9
10
  getIntl: () => IntlShape;
11
+ nodeViewPortalProviderAPI: PortalProviderAPI;
10
12
  };
11
- export declare function createPlugin({ reactDispatch, popupMountRef, typeAheadHandlers, getIntl, }: Props): SafePlugin;
13
+ export declare function createPlugin({ reactDispatch, popupMountRef, typeAheadHandlers, getIntl, nodeViewPortalProviderAPI, }: Props): SafePlugin;
12
14
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-type-ahead",
3
- "version": "1.10.5",
3
+ "version": "1.10.7",
4
4
  "description": "Type-ahead plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -32,7 +32,7 @@
32
32
  },
33
33
  "dependencies": {
34
34
  "@atlaskit/adf-schema": "^44.2.0",
35
- "@atlaskit/editor-common": "^94.12.0",
35
+ "@atlaskit/editor-common": "^95.0.0",
36
36
  "@atlaskit/editor-plugin-analytics": "^1.10.0",
37
37
  "@atlaskit/editor-prosemirror": "6.0.0",
38
38
  "@atlaskit/editor-shared-styles": "^3.2.0",
@@ -40,7 +40,7 @@
40
40
  "@atlaskit/platform-feature-flags": "^0.3.0",
41
41
  "@atlaskit/prosemirror-input-rules": "^3.2.0",
42
42
  "@atlaskit/theme": "^14.0.0",
43
- "@atlaskit/tokens": "^2.1.0",
43
+ "@atlaskit/tokens": "^2.3.0",
44
44
  "@babel/runtime": "^7.0.0",
45
45
  "@emotion/react": "^11.7.1",
46
46
  "lodash": "^4.17.21",
@@ -86,7 +86,10 @@
86
86
  }
87
87
  },
88
88
  "platform-feature-flags": {
89
- "platform_editor_react18_phase2": {
89
+ "platform_editor_react18_phase2_v2": {
90
+ "type": "boolean"
91
+ },
92
+ "platform_editor_react18_plugin_portalprovider": {
90
93
  "type": "boolean"
91
94
  }
92
95
  }