@atlaskit/editor-plugin-emoji 3.7.0 → 3.7.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/emojiPlugin.js +13 -4
  3. package/dist/cjs/ui/InlineEmojiPopup.js +98 -12
  4. package/dist/es2019/emojiPlugin.js +12 -5
  5. package/dist/es2019/ui/InlineEmojiPopup.js +96 -12
  6. package/dist/esm/emojiPlugin.js +14 -5
  7. package/dist/esm/ui/InlineEmojiPopup.js +98 -12
  8. package/dist/types/ui/InlineEmojiPopup.d.ts +3 -2
  9. package/dist/types-ts4.5/ui/InlineEmojiPopup.d.ts +3 -2
  10. package/package.json +8 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/editor-plugin-emoji
2
2
 
3
+ ## 3.7.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#160398](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/160398)
8
+ [`4e5ae0ab20a60`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4e5ae0ab20a60) -
9
+ ED-28049 optimise inline emoji popup
10
+ - Updated dependencies
11
+
12
+ ## 3.7.1
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies
17
+
3
18
  ## 3.7.0
4
19
 
5
20
  ### Minor Changes
package/dist/cjs/emojiPlugin.js CHANGED
@@ -324,15 +324,24 @@ var emojiPlugin = exports.emojiPlugin = function emojiPlugin(_ref2) {
324
324
  if (!api || (0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
325
325
  return null;
326
326
  }
327
+ if (!(0, _platformFeatureFlags.fg)('platform_editor_controls_perf_tbt_fix')) {
328
+ return /*#__PURE__*/_react.default.createElement(_InlineEmojiPopup.InlineEmojiPopupOld, {
329
+ api: api,
330
+ editorView: editorView,
331
+ popupsBoundariesElement: popupsBoundariesElement,
332
+ popupsMountPoint: popupsMountPoint,
333
+ popupsScrollableElement: popupsScrollableElement,
334
+ onClose: function onClose() {
335
+ return editorView.dispatch((0, _actions.setInlineEmojiPopupOpen)(false)(editorView.state.tr));
336
+ }
337
+ });
338
+ }
327
339
  return /*#__PURE__*/_react.default.createElement(_InlineEmojiPopup.InlineEmojiPopup, {
328
340
  api: api,
329
341
  editorView: editorView,
330
342
  popupsBoundariesElement: popupsBoundariesElement,
331
343
  popupsMountPoint: popupsMountPoint,
332
- popupsScrollableElement: popupsScrollableElement,
333
- onClose: function onClose() {
334
- editorView.dispatch((0, _actions.setInlineEmojiPopupOpen)(false)(editorView.state.tr));
335
- }
344
+ popupsScrollableElement: popupsScrollableElement
336
345
  });
337
346
  },
338
347
  pluginsOptions: {
package/dist/cjs/ui/InlineEmojiPopup.js CHANGED
@@ -4,7 +4,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.InlineEmojiPopup = void 0;
7
+ exports.InlineEmojiPopupOld = exports.InlineEmojiPopup = void 0;
8
8
  var _react = _interopRequireWildcard(require("react"));
9
9
  var _reactIntlNext = require("react-intl-next");
10
10
  var _analytics = require("@atlaskit/editor-common/analytics");
@@ -12,9 +12,11 @@ var _getDomRefFromSelection = require("@atlaskit/editor-common/get-dom-ref-from-
12
12
  var _hooks = require("@atlaskit/editor-common/hooks");
13
13
  var _ui = require("@atlaskit/editor-common/ui");
14
14
  var _uiReact = require("@atlaskit/editor-common/ui-react");
15
+ var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
15
16
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
16
17
  var _emoji = require("@atlaskit/emoji");
17
18
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
19
+ var _actions = require("../pm-plugins/actions");
18
20
  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); }
19
21
  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; }
20
22
  var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
@@ -25,7 +27,7 @@ var emojiPopupMessages = {
25
27
  description: 'Accessible label for the emoji picker popup'
26
28
  }
27
29
  };
28
- var InlineEmojiPopup = exports.InlineEmojiPopup = function InlineEmojiPopup(_ref) {
30
+ var InlineEmojiPopupOld = exports.InlineEmojiPopupOld = function InlineEmojiPopupOld(_ref) {
29
31
  var _useSharedPluginState, _useSharedPluginState2, _api$analytics;
30
32
  var api = _ref.api,
31
33
  popupsMountPoint = _ref.popupsMountPoint,
@@ -37,22 +39,22 @@ var InlineEmojiPopup = exports.InlineEmojiPopup = function InlineEmojiPopup(_ref
37
39
  emojiProvider = _ref2.emojiProvider,
38
40
  isOpen = _ref2.inlineEmojiPopupOpen;
39
41
  var intl = (0, _reactIntlNext.useIntl)();
40
- var handleOnClose = (0, _react.useCallback)(function () {
41
- if ((0, _platformFeatureFlags.fg)('platform_editor_ease_of_use_metrics')) {
42
- var _api$metrics;
43
- api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics = api.metrics) === null || _api$metrics === void 0 ? void 0 : _api$metrics.commands.startActiveSessionTimer());
44
- }
45
- onClose();
46
- }, [onClose, api]);
47
42
  (0, _react.useEffect)(function () {
48
43
  if (isOpen && (0, _platformFeatureFlags.fg)('platform_editor_ease_of_use_metrics')) {
49
- var _api$metrics2;
50
- api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics2 = api.metrics) === null || _api$metrics2 === void 0 ? void 0 : _api$metrics2.commands.handleIntentToStartEdit({
44
+ var _api$metrics;
45
+ api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics = api.metrics) === null || _api$metrics === void 0 ? void 0 : _api$metrics.commands.handleIntentToStartEdit({
51
46
  shouldStartTimer: false,
52
47
  shouldPersistActiveSession: true
53
48
  }));
54
49
  }
55
50
  }, [isOpen, api]);
51
+ var handleOnClose = (0, _react.useCallback)(function () {
52
+ if ((0, _platformFeatureFlags.fg)('platform_editor_ease_of_use_metrics')) {
53
+ var _api$metrics2;
54
+ api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics2 = api.metrics) === null || _api$metrics2 === void 0 ? void 0 : _api$metrics2.commands.startActiveSessionTimer());
55
+ }
56
+ onClose === null || onClose === void 0 || onClose();
57
+ }, [onClose, api]);
56
58
  var focusEditor = (0, _react.useCallback)(function () {
57
59
  // use requestAnimationFrame to run this async after the call
58
60
  requestAnimationFrame(function () {
@@ -90,4 +92,88 @@ var InlineEmojiPopup = exports.InlineEmojiPopup = function InlineEmojiPopup(_ref
90
92
  onSelection: handleSelection
91
93
  });
92
94
  }));
93
- };
95
+ };
96
+ var InlineEmojiPopupContent = function InlineEmojiPopupContent(_ref3) {
97
+ var _api$metrics4, _api$metrics6, _api$analytics3;
98
+ var api = _ref3.api,
99
+ popupsMountPoint = _ref3.popupsMountPoint,
100
+ popupsBoundariesElement = _ref3.popupsBoundariesElement,
101
+ popupsScrollableElement = _ref3.popupsScrollableElement,
102
+ editorView = _ref3.editorView;
103
+ var emojiProvider = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'emoji.emojiProvider');
104
+ var intl = (0, _reactIntlNext.useIntl)();
105
+ (0, _react.useEffect)(function () {
106
+ if ((0, _platformFeatureFlags.fg)('platform_editor_ease_of_use_metrics')) {
107
+ var _api$metrics3;
108
+ api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics3 = api.metrics) === null || _api$metrics3 === void 0 ? void 0 : _api$metrics3.commands.handleIntentToStartEdit({
109
+ shouldStartTimer: false,
110
+ shouldPersistActiveSession: true
111
+ }));
112
+ }
113
+ }, [api === null || api === void 0 ? void 0 : api.core.actions, api === null || api === void 0 || (_api$metrics4 = api.metrics) === null || _api$metrics4 === void 0 ? void 0 : _api$metrics4.commands]);
114
+ var handleOnClose = (0, _react.useCallback)(function () {
115
+ editorView.dispatch((0, _actions.setInlineEmojiPopupOpen)(false)(editorView.state.tr));
116
+ if ((0, _platformFeatureFlags.fg)('platform_editor_ease_of_use_metrics')) {
117
+ var _api$metrics5;
118
+ api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics5 = api.metrics) === null || _api$metrics5 === void 0 ? void 0 : _api$metrics5.commands.startActiveSessionTimer());
119
+ }
120
+ }, [editorView, api.core.actions, (_api$metrics6 = api.metrics) === null || _api$metrics6 === void 0 ? void 0 : _api$metrics6.commands]);
121
+ var focusEditor = (0, _react.useCallback)(function () {
122
+ // use requestAnimationFrame to run this async after the call
123
+ requestAnimationFrame(function () {
124
+ return editorView.focus();
125
+ });
126
+ }, [editorView]);
127
+ var handleSelection = (0, _react.useCallback)(function (emojiId) {
128
+ api.core.actions.execute(api.emoji.commands.insertEmoji(emojiId, _analytics.INPUT_METHOD.PICKER));
129
+ handleOnClose();
130
+ }, [api.core.actions, api.emoji.commands, handleOnClose]);
131
+ var domRef = (0, _react.useMemo)(function () {
132
+ var _api$analytics2;
133
+ return (0, _getDomRefFromSelection.getDomRefFromSelection)(editorView, _analytics.ACTION_SUBJECT_ID.PICKER_EMOJI, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
134
+ }, [editorView, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions]);
135
+ if (!emojiProvider) {
136
+ return null;
137
+ }
138
+ return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
139
+ ariaLabel: intl.formatMessage(emojiPopupMessages.emojiPickerAriaLabel),
140
+ offset: [0, 12],
141
+ mountTo: popupsMountPoint,
142
+ boundariesElement: popupsBoundariesElement,
143
+ scrollableElement: popupsScrollableElement,
144
+ zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
145
+ fitHeight: 350,
146
+ fitWidth: 350,
147
+ target: domRef,
148
+ onUnmount: focusEditor,
149
+ focusTrap: true,
150
+ preventOverflow: true,
151
+ handleClickOutside: handleOnClose,
152
+ handleEscapeKeydown: handleOnClose,
153
+ captureClick: true
154
+ }, /*#__PURE__*/_react.default.createElement(_uiReact.OutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
155
+ return /*#__PURE__*/_react.default.createElement(_emoji.EmojiPicker, {
156
+ emojiProvider: Promise.resolve(emojiProvider),
157
+ onPickerRef: setOutsideClickTargetRef,
158
+ onSelection: handleSelection
159
+ });
160
+ }));
161
+ };
162
+ var InlineEmojiPopup = exports.InlineEmojiPopup = /*#__PURE__*/_react.default.memo(function (_ref4) {
163
+ var api = _ref4.api,
164
+ popupsMountPoint = _ref4.popupsMountPoint,
165
+ popupsBoundariesElement = _ref4.popupsBoundariesElement,
166
+ popupsScrollableElement = _ref4.popupsScrollableElement,
167
+ editorView = _ref4.editorView;
168
+ var isOpen = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'emoji.inlineEmojiPopupOpen');
169
+ if (!isOpen) {
170
+ return null;
171
+ }
172
+ return /*#__PURE__*/_react.default.createElement(InlineEmojiPopupContent, {
173
+ api: api,
174
+ editorView: editorView,
175
+ popupsBoundariesElement: popupsBoundariesElement,
176
+ popupsMountPoint: popupsMountPoint,
177
+ popupsScrollableElement: popupsScrollableElement
178
+ });
179
+ });
package/dist/es2019/emojiPlugin.js CHANGED
@@ -19,7 +19,7 @@ import { emojiNodeSpec } from './nodeviews/emojiNodeSpec';
19
19
  import { EmojiNodeView } from './nodeviews/EmojiNodeView';
20
20
  import { ACTIONS, openTypeAhead as openTypeAheadAction, setAsciiMap as setAsciiMapAction, setInlineEmojiPopupOpen, setProvider as setProviderAction } from './pm-plugins/actions';
21
21
  import { inputRulePlugin as asciiInputRulePlugin } from './pm-plugins/ascii-input-rules';
22
- import { InlineEmojiPopup } from './ui/InlineEmojiPopup';
22
+ import { InlineEmojiPopup, InlineEmojiPopupOld } from './ui/InlineEmojiPopup';
23
23
  export const emojiToTypeaheadItem = (emoji, emojiProvider) => ({
24
24
  title: emoji.shortName || '',
25
25
  key: emoji.id || emoji.shortName,
@@ -287,15 +287,22 @@ export const emojiPlugin = ({
287
287
  if (!api || editorExperiment('platform_editor_controls', 'control')) {
288
288
  return null;
289
289
  }
290
+ if (!fg('platform_editor_controls_perf_tbt_fix')) {
291
+ return /*#__PURE__*/React.createElement(InlineEmojiPopupOld, {
292
+ api: api,
293
+ editorView: editorView,
294
+ popupsBoundariesElement: popupsBoundariesElement,
295
+ popupsMountPoint: popupsMountPoint,
296
+ popupsScrollableElement: popupsScrollableElement,
297
+ onClose: () => editorView.dispatch(setInlineEmojiPopupOpen(false)(editorView.state.tr))
298
+ });
299
+ }
290
300
  return /*#__PURE__*/React.createElement(InlineEmojiPopup, {
291
301
  api: api,
292
302
  editorView: editorView,
293
303
  popupsBoundariesElement: popupsBoundariesElement,
294
304
  popupsMountPoint: popupsMountPoint,
295
- popupsScrollableElement: popupsScrollableElement,
296
- onClose: () => {
297
- editorView.dispatch(setInlineEmojiPopupOpen(false)(editorView.state.tr));
298
- }
305
+ popupsScrollableElement: popupsScrollableElement
299
306
  });
300
307
  },
301
308
  pluginsOptions: {
package/dist/es2019/ui/InlineEmojiPopup.js CHANGED
@@ -1,13 +1,15 @@
1
- import React, { useCallback, useEffect } from 'react';
1
+ import React, { useCallback, useEffect, useMemo } from 'react';
2
2
  import { useIntl } from 'react-intl-next';
3
3
  import { ACTION_SUBJECT_ID, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
4
4
  import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
5
5
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
6
6
  import { Popup } from '@atlaskit/editor-common/ui';
7
7
  import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
8
+ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
8
9
  import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
9
10
  import { EmojiPicker } from '@atlaskit/emoji';
10
11
  import { fg } from '@atlaskit/platform-feature-flags';
12
+ import { setInlineEmojiPopupOpen } from '../pm-plugins/actions';
11
13
  const PopupWithListeners = withOuterListeners(Popup);
12
14
  const emojiPopupMessages = {
13
15
  emojiPickerAriaLabel: {
@@ -16,7 +18,7 @@ const emojiPopupMessages = {
16
18
  description: 'Accessible label for the emoji picker popup'
17
19
  }
18
20
  };
19
- export const InlineEmojiPopup = ({
21
+ export const InlineEmojiPopupOld = ({
20
22
  api,
21
23
  popupsMountPoint,
22
24
  popupsBoundariesElement,
@@ -30,22 +32,22 @@ export const InlineEmojiPopup = ({
30
32
  inlineEmojiPopupOpen: isOpen
31
33
  } = (_useSharedPluginState = (_useSharedPluginState2 = useSharedPluginState(api, ['emoji'])) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.emojiState) !== null && _useSharedPluginState !== void 0 ? _useSharedPluginState : {};
32
34
  const intl = useIntl();
33
- const handleOnClose = useCallback(() => {
34
- if (fg('platform_editor_ease_of_use_metrics')) {
35
- var _api$metrics;
36
- api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$metrics = api.metrics) === null || _api$metrics === void 0 ? void 0 : _api$metrics.commands.startActiveSessionTimer());
37
- }
38
- onClose();
39
- }, [onClose, api]);
40
35
  useEffect(() => {
41
36
  if (isOpen && fg('platform_editor_ease_of_use_metrics')) {
42
- var _api$metrics2;
43
- api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$metrics2 = api.metrics) === null || _api$metrics2 === void 0 ? void 0 : _api$metrics2.commands.handleIntentToStartEdit({
37
+ var _api$metrics;
38
+ api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$metrics = api.metrics) === null || _api$metrics === void 0 ? void 0 : _api$metrics.commands.handleIntentToStartEdit({
44
39
  shouldStartTimer: false,
45
40
  shouldPersistActiveSession: true
46
41
  }));
47
42
  }
48
43
  }, [isOpen, api]);
44
+ const handleOnClose = useCallback(() => {
45
+ if (fg('platform_editor_ease_of_use_metrics')) {
46
+ var _api$metrics2;
47
+ api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$metrics2 = api.metrics) === null || _api$metrics2 === void 0 ? void 0 : _api$metrics2.commands.startActiveSessionTimer());
48
+ }
49
+ onClose === null || onClose === void 0 ? void 0 : onClose();
50
+ }, [onClose, api]);
49
51
  const focusEditor = useCallback(() => {
50
52
  // use requestAnimationFrame to run this async after the call
51
53
  requestAnimationFrame(() => editorView.focus());
@@ -79,4 +81,86 @@ export const InlineEmojiPopup = ({
79
81
  onPickerRef: setOutsideClickTargetRef,
80
82
  onSelection: handleSelection
81
83
  })));
82
- };
84
+ };
85
+ const InlineEmojiPopupContent = ({
86
+ api,
87
+ popupsMountPoint,
88
+ popupsBoundariesElement,
89
+ popupsScrollableElement,
90
+ editorView
91
+ }) => {
92
+ var _api$metrics4, _api$metrics6, _api$analytics3;
93
+ const emojiProvider = useSharedPluginStateSelector(api, 'emoji.emojiProvider');
94
+ const intl = useIntl();
95
+ useEffect(() => {
96
+ if (fg('platform_editor_ease_of_use_metrics')) {
97
+ var _api$metrics3;
98
+ api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$metrics3 = api.metrics) === null || _api$metrics3 === void 0 ? void 0 : _api$metrics3.commands.handleIntentToStartEdit({
99
+ shouldStartTimer: false,
100
+ shouldPersistActiveSession: true
101
+ }));
102
+ }
103
+ }, [api === null || api === void 0 ? void 0 : api.core.actions, api === null || api === void 0 ? void 0 : (_api$metrics4 = api.metrics) === null || _api$metrics4 === void 0 ? void 0 : _api$metrics4.commands]);
104
+ const handleOnClose = useCallback(() => {
105
+ editorView.dispatch(setInlineEmojiPopupOpen(false)(editorView.state.tr));
106
+ if (fg('platform_editor_ease_of_use_metrics')) {
107
+ var _api$metrics5;
108
+ api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$metrics5 = api.metrics) === null || _api$metrics5 === void 0 ? void 0 : _api$metrics5.commands.startActiveSessionTimer());
109
+ }
110
+ }, [editorView, api.core.actions, (_api$metrics6 = api.metrics) === null || _api$metrics6 === void 0 ? void 0 : _api$metrics6.commands]);
111
+ const focusEditor = useCallback(() => {
112
+ // use requestAnimationFrame to run this async after the call
113
+ requestAnimationFrame(() => editorView.focus());
114
+ }, [editorView]);
115
+ const handleSelection = useCallback(emojiId => {
116
+ api.core.actions.execute(api.emoji.commands.insertEmoji(emojiId, INPUT_METHOD.PICKER));
117
+ handleOnClose();
118
+ }, [api.core.actions, api.emoji.commands, handleOnClose]);
119
+ const domRef = useMemo(() => {
120
+ var _api$analytics2;
121
+ return getDomRefFromSelection(editorView, ACTION_SUBJECT_ID.PICKER_EMOJI, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
122
+ }, [editorView, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions]);
123
+ if (!emojiProvider) {
124
+ return null;
125
+ }
126
+ return /*#__PURE__*/React.createElement(PopupWithListeners, {
127
+ ariaLabel: intl.formatMessage(emojiPopupMessages.emojiPickerAriaLabel),
128
+ offset: [0, 12],
129
+ mountTo: popupsMountPoint,
130
+ boundariesElement: popupsBoundariesElement,
131
+ scrollableElement: popupsScrollableElement,
132
+ zIndex: akEditorFloatingDialogZIndex,
133
+ fitHeight: 350,
134
+ fitWidth: 350,
135
+ target: domRef,
136
+ onUnmount: focusEditor,
137
+ focusTrap: true,
138
+ preventOverflow: true,
139
+ handleClickOutside: handleOnClose,
140
+ handleEscapeKeydown: handleOnClose,
141
+ captureClick: true
142
+ }, /*#__PURE__*/React.createElement(OutsideClickTargetRefContext.Consumer, null, setOutsideClickTargetRef => /*#__PURE__*/React.createElement(EmojiPicker, {
143
+ emojiProvider: Promise.resolve(emojiProvider),
144
+ onPickerRef: setOutsideClickTargetRef,
145
+ onSelection: handleSelection
146
+ })));
147
+ };
148
+ export const InlineEmojiPopup = /*#__PURE__*/React.memo(({
149
+ api,
150
+ popupsMountPoint,
151
+ popupsBoundariesElement,
152
+ popupsScrollableElement,
153
+ editorView
154
+ }) => {
155
+ const isOpen = useSharedPluginStateSelector(api, 'emoji.inlineEmojiPopupOpen');
156
+ if (!isOpen) {
157
+ return null;
158
+ }
159
+ return /*#__PURE__*/React.createElement(InlineEmojiPopupContent, {
160
+ api: api,
161
+ editorView: editorView,
162
+ popupsBoundariesElement: popupsBoundariesElement,
163
+ popupsMountPoint: popupsMountPoint,
164
+ popupsScrollableElement: popupsScrollableElement
165
+ });
166
+ });
package/dist/esm/emojiPlugin.js CHANGED
@@ -24,7 +24,7 @@ import { emojiNodeSpec } from './nodeviews/emojiNodeSpec';
24
24
  import { EmojiNodeView } from './nodeviews/EmojiNodeView';
25
25
  import { ACTIONS, openTypeAhead as openTypeAheadAction, setAsciiMap as setAsciiMapAction, setInlineEmojiPopupOpen, setProvider as setProviderAction } from './pm-plugins/actions';
26
26
  import { inputRulePlugin as asciiInputRulePlugin } from './pm-plugins/ascii-input-rules';
27
- import { InlineEmojiPopup } from './ui/InlineEmojiPopup';
27
+ import { InlineEmojiPopup, InlineEmojiPopupOld } from './ui/InlineEmojiPopup';
28
28
  export var emojiToTypeaheadItem = function emojiToTypeaheadItem(emoji, emojiProvider) {
29
29
  return {
30
30
  title: emoji.shortName || '',
@@ -309,15 +309,24 @@ export var emojiPlugin = function emojiPlugin(_ref2) {
309
309
  if (!api || editorExperiment('platform_editor_controls', 'control')) {
310
310
  return null;
311
311
  }
312
+ if (!fg('platform_editor_controls_perf_tbt_fix')) {
313
+ return /*#__PURE__*/React.createElement(InlineEmojiPopupOld, {
314
+ api: api,
315
+ editorView: editorView,
316
+ popupsBoundariesElement: popupsBoundariesElement,
317
+ popupsMountPoint: popupsMountPoint,
318
+ popupsScrollableElement: popupsScrollableElement,
319
+ onClose: function onClose() {
320
+ return editorView.dispatch(setInlineEmojiPopupOpen(false)(editorView.state.tr));
321
+ }
322
+ });
323
+ }
312
324
  return /*#__PURE__*/React.createElement(InlineEmojiPopup, {
313
325
  api: api,
314
326
  editorView: editorView,
315
327
  popupsBoundariesElement: popupsBoundariesElement,
316
328
  popupsMountPoint: popupsMountPoint,
317
- popupsScrollableElement: popupsScrollableElement,
318
- onClose: function onClose() {
319
- editorView.dispatch(setInlineEmojiPopupOpen(false)(editorView.state.tr));
320
- }
329
+ popupsScrollableElement: popupsScrollableElement
321
330
  });
322
331
  },
323
332
  pluginsOptions: {
package/dist/esm/ui/InlineEmojiPopup.js CHANGED
@@ -1,13 +1,15 @@
1
- import React, { useCallback, useEffect } from 'react';
1
+ import React, { useCallback, useEffect, useMemo } from 'react';
2
2
  import { useIntl } from 'react-intl-next';
3
3
  import { ACTION_SUBJECT_ID, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
4
4
  import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
5
5
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
6
6
  import { Popup } from '@atlaskit/editor-common/ui';
7
7
  import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
8
+ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
8
9
  import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
9
10
  import { EmojiPicker } from '@atlaskit/emoji';
10
11
  import { fg } from '@atlaskit/platform-feature-flags';
12
+ import { setInlineEmojiPopupOpen } from '../pm-plugins/actions';
11
13
  var PopupWithListeners = withOuterListeners(Popup);
12
14
  var emojiPopupMessages = {
13
15
  emojiPickerAriaLabel: {
@@ -16,7 +18,7 @@ var emojiPopupMessages = {
16
18
  description: 'Accessible label for the emoji picker popup'
17
19
  }
18
20
  };
19
- export var InlineEmojiPopup = function InlineEmojiPopup(_ref) {
21
+ export var InlineEmojiPopupOld = function InlineEmojiPopupOld(_ref) {
20
22
  var _useSharedPluginState, _useSharedPluginState2, _api$analytics;
21
23
  var api = _ref.api,
22
24
  popupsMountPoint = _ref.popupsMountPoint,
@@ -28,22 +30,22 @@ export var InlineEmojiPopup = function InlineEmojiPopup(_ref) {
28
30
  emojiProvider = _ref2.emojiProvider,
29
31
  isOpen = _ref2.inlineEmojiPopupOpen;
30
32
  var intl = useIntl();
31
- var handleOnClose = useCallback(function () {
32
- if (fg('platform_editor_ease_of_use_metrics')) {
33
- var _api$metrics;
34
- api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics = api.metrics) === null || _api$metrics === void 0 ? void 0 : _api$metrics.commands.startActiveSessionTimer());
35
- }
36
- onClose();
37
- }, [onClose, api]);
38
33
  useEffect(function () {
39
34
  if (isOpen && fg('platform_editor_ease_of_use_metrics')) {
40
- var _api$metrics2;
41
- api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics2 = api.metrics) === null || _api$metrics2 === void 0 ? void 0 : _api$metrics2.commands.handleIntentToStartEdit({
35
+ var _api$metrics;
36
+ api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics = api.metrics) === null || _api$metrics === void 0 ? void 0 : _api$metrics.commands.handleIntentToStartEdit({
42
37
  shouldStartTimer: false,
43
38
  shouldPersistActiveSession: true
44
39
  }));
45
40
  }
46
41
  }, [isOpen, api]);
42
+ var handleOnClose = useCallback(function () {
43
+ if (fg('platform_editor_ease_of_use_metrics')) {
44
+ var _api$metrics2;
45
+ api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics2 = api.metrics) === null || _api$metrics2 === void 0 ? void 0 : _api$metrics2.commands.startActiveSessionTimer());
46
+ }
47
+ onClose === null || onClose === void 0 || onClose();
48
+ }, [onClose, api]);
47
49
  var focusEditor = useCallback(function () {
48
50
  // use requestAnimationFrame to run this async after the call
49
51
  requestAnimationFrame(function () {
@@ -81,4 +83,88 @@ export var InlineEmojiPopup = function InlineEmojiPopup(_ref) {
81
83
  onSelection: handleSelection
82
84
  });
83
85
  }));
84
- };
86
+ };
87
+ var InlineEmojiPopupContent = function InlineEmojiPopupContent(_ref3) {
88
+ var _api$metrics4, _api$metrics6, _api$analytics3;
89
+ var api = _ref3.api,
90
+ popupsMountPoint = _ref3.popupsMountPoint,
91
+ popupsBoundariesElement = _ref3.popupsBoundariesElement,
92
+ popupsScrollableElement = _ref3.popupsScrollableElement,
93
+ editorView = _ref3.editorView;
94
+ var emojiProvider = useSharedPluginStateSelector(api, 'emoji.emojiProvider');
95
+ var intl = useIntl();
96
+ useEffect(function () {
97
+ if (fg('platform_editor_ease_of_use_metrics')) {
98
+ var _api$metrics3;
99
+ api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics3 = api.metrics) === null || _api$metrics3 === void 0 ? void 0 : _api$metrics3.commands.handleIntentToStartEdit({
100
+ shouldStartTimer: false,
101
+ shouldPersistActiveSession: true
102
+ }));
103
+ }
104
+ }, [api === null || api === void 0 ? void 0 : api.core.actions, api === null || api === void 0 || (_api$metrics4 = api.metrics) === null || _api$metrics4 === void 0 ? void 0 : _api$metrics4.commands]);
105
+ var handleOnClose = useCallback(function () {
106
+ editorView.dispatch(setInlineEmojiPopupOpen(false)(editorView.state.tr));
107
+ if (fg('platform_editor_ease_of_use_metrics')) {
108
+ var _api$metrics5;
109
+ api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics5 = api.metrics) === null || _api$metrics5 === void 0 ? void 0 : _api$metrics5.commands.startActiveSessionTimer());
110
+ }
111
+ }, [editorView, api.core.actions, (_api$metrics6 = api.metrics) === null || _api$metrics6 === void 0 ? void 0 : _api$metrics6.commands]);
112
+ var focusEditor = useCallback(function () {
113
+ // use requestAnimationFrame to run this async after the call
114
+ requestAnimationFrame(function () {
115
+ return editorView.focus();
116
+ });
117
+ }, [editorView]);
118
+ var handleSelection = useCallback(function (emojiId) {
119
+ api.core.actions.execute(api.emoji.commands.insertEmoji(emojiId, INPUT_METHOD.PICKER));
120
+ handleOnClose();
121
+ }, [api.core.actions, api.emoji.commands, handleOnClose]);
122
+ var domRef = useMemo(function () {
123
+ var _api$analytics2;
124
+ return getDomRefFromSelection(editorView, ACTION_SUBJECT_ID.PICKER_EMOJI, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
125
+ }, [editorView, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions]);
126
+ if (!emojiProvider) {
127
+ return null;
128
+ }
129
+ return /*#__PURE__*/React.createElement(PopupWithListeners, {
130
+ ariaLabel: intl.formatMessage(emojiPopupMessages.emojiPickerAriaLabel),
131
+ offset: [0, 12],
132
+ mountTo: popupsMountPoint,
133
+ boundariesElement: popupsBoundariesElement,
134
+ scrollableElement: popupsScrollableElement,
135
+ zIndex: akEditorFloatingDialogZIndex,
136
+ fitHeight: 350,
137
+ fitWidth: 350,
138
+ target: domRef,
139
+ onUnmount: focusEditor,
140
+ focusTrap: true,
141
+ preventOverflow: true,
142
+ handleClickOutside: handleOnClose,
143
+ handleEscapeKeydown: handleOnClose,
144
+ captureClick: true
145
+ }, /*#__PURE__*/React.createElement(OutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
146
+ return /*#__PURE__*/React.createElement(EmojiPicker, {
147
+ emojiProvider: Promise.resolve(emojiProvider),
148
+ onPickerRef: setOutsideClickTargetRef,
149
+ onSelection: handleSelection
150
+ });
151
+ }));
152
+ };
153
+ export var InlineEmojiPopup = /*#__PURE__*/React.memo(function (_ref4) {
154
+ var api = _ref4.api,
155
+ popupsMountPoint = _ref4.popupsMountPoint,
156
+ popupsBoundariesElement = _ref4.popupsBoundariesElement,
157
+ popupsScrollableElement = _ref4.popupsScrollableElement,
158
+ editorView = _ref4.editorView;
159
+ var isOpen = useSharedPluginStateSelector(api, 'emoji.inlineEmojiPopupOpen');
160
+ if (!isOpen) {
161
+ return null;
162
+ }
163
+ return /*#__PURE__*/React.createElement(InlineEmojiPopupContent, {
164
+ api: api,
165
+ editorView: editorView,
166
+ popupsBoundariesElement: popupsBoundariesElement,
167
+ popupsMountPoint: popupsMountPoint,
168
+ popupsScrollableElement: popupsScrollableElement
169
+ });
170
+ });
package/dist/types/ui/InlineEmojiPopup.d.ts CHANGED
@@ -5,7 +5,8 @@ import { type EmojiPlugin } from '../emojiPluginType';
5
5
  type InlineEmojiPopupProps = Pick<UiComponentFactoryParams, 'popupsBoundariesElement' | 'popupsMountPoint' | 'popupsScrollableElement'> & {
6
6
  api: ExtractInjectionAPI<EmojiPlugin>;
7
7
  editorView: EditorView;
8
- onClose: () => void;
8
+ onClose?: () => void;
9
9
  };
10
- export declare const InlineEmojiPopup: ({ api, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, editorView, onClose, }: InlineEmojiPopupProps) => React.JSX.Element | null;
10
+ export declare const InlineEmojiPopupOld: ({ api, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, editorView, onClose, }: InlineEmojiPopupProps) => React.JSX.Element | null;
11
+ export declare const InlineEmojiPopup: React.MemoExoticComponent<({ api, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, editorView, }: InlineEmojiPopupProps) => React.JSX.Element | null>;
11
12
  export {};
package/dist/types-ts4.5/ui/InlineEmojiPopup.d.ts CHANGED
@@ -5,7 +5,8 @@ import { type EmojiPlugin } from '../emojiPluginType';
5
5
  type InlineEmojiPopupProps = Pick<UiComponentFactoryParams, 'popupsBoundariesElement' | 'popupsMountPoint' | 'popupsScrollableElement'> & {
6
6
  api: ExtractInjectionAPI<EmojiPlugin>;
7
7
  editorView: EditorView;
8
- onClose: () => void;
8
+ onClose?: () => void;
9
9
  };
10
- export declare const InlineEmojiPopup: ({ api, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, editorView, onClose, }: InlineEmojiPopupProps) => React.JSX.Element | null;
10
+ export declare const InlineEmojiPopupOld: ({ api, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, editorView, onClose, }: InlineEmojiPopupProps) => React.JSX.Element | null;
11
+ export declare const InlineEmojiPopup: React.MemoExoticComponent<({ api, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, editorView, }: InlineEmojiPopupProps) => React.JSX.Element | null>;
11
12
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-emoji",
3
- "version": "3.7.0",
3
+ "version": "3.7.2",
4
4
  "description": "Emoji plugin for @atlaskit/editor-core",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -23,9 +23,9 @@
23
23
  },
24
24
  "dependencies": {
25
25
  "@atlaskit/adf-schema": "^47.6.0",
26
- "@atlaskit/editor-common": "^105.10.0",
26
+ "@atlaskit/editor-common": "^106.0.0",
27
27
  "@atlaskit/editor-plugin-analytics": "^2.3.0",
28
- "@atlaskit/editor-plugin-annotation": "^2.8.0",
28
+ "@atlaskit/editor-plugin-annotation": "^2.9.0",
29
29
  "@atlaskit/editor-plugin-base": "^3.0.0",
30
30
  "@atlaskit/editor-plugin-editor-viewmode": "^4.0.0",
31
31
  "@atlaskit/editor-plugin-metrics": "^3.4.0",
@@ -33,12 +33,12 @@
33
33
  "@atlaskit/editor-prosemirror": "7.0.0",
34
34
  "@atlaskit/editor-shared-styles": "^3.4.0",
35
35
  "@atlaskit/emoji": "^69.2.0",
36
- "@atlaskit/icon": "^26.3.0",
36
+ "@atlaskit/icon": "^26.4.0",
37
37
  "@atlaskit/node-data-provider": "^4.1.0",
38
38
  "@atlaskit/platform-feature-flags": "^1.1.0",
39
39
  "@atlaskit/prosemirror-input-rules": "^3.3.0",
40
40
  "@atlaskit/theme": "^18.0.0",
41
- "@atlaskit/tmp-editor-statsig": "^5.0.0",
41
+ "@atlaskit/tmp-editor-statsig": "^5.4.0",
42
42
  "@atlaskit/tokens": "^4.9.0",
43
43
  "@babel/runtime": "^7.0.0",
44
44
  "@emotion/react": "^11.7.1",
@@ -113,6 +113,9 @@
113
113
  },
114
114
  "platform_editor_ease_of_use_metrics": {
115
115
  "type": "boolean"
116
+ },
117
+ "platform_editor_controls_perf_tbt_fix": {
118
+ "type": "boolean"
116
119
  }
117
120
  }
118
121
  }