@atlaskit/editor-plugin-emoji 3.6.0 → 3.6.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 +17 -0
  2. package/dist/cjs/nodeviews/EmojiNodeView.js +43 -52
  3. package/dist/cjs/ui/InlineEmojiPopup.js +3 -16
  4. package/dist/es2019/nodeviews/EmojiNodeView.js +43 -53
  5. package/dist/es2019/ui/InlineEmojiPopup.js +4 -17
  6. package/dist/esm/nodeviews/EmojiNodeView.js +43 -52
  7. package/dist/esm/ui/InlineEmojiPopup.js +4 -17
  8. package/dist/types/nodeviews/EmojiNodeView.d.ts +2 -1
  9. package/dist/types-ts4.5/nodeviews/EmojiNodeView.d.ts +2 -1
  10. package/package.json +9 -9
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/editor-plugin-emoji
2
2
 
3
+ ## 3.6.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#148210](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/148210)
8
+ [`10eb0681e9681`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/10eb0681e9681) -
9
+ fix SSR issues
10
+
11
+ ## 3.6.1
12
+
13
+ ### Patch Changes
14
+
15
+ - [#144658](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/144658)
16
+ [`e59e7f0ae0803`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e59e7f0ae0803) -
17
+ Change to use getDomRefFromSelection utility from editor-common
18
+ - Updated dependencies
19
+
3
20
  ## 3.6.0
4
21
 
5
22
  ### Minor Changes
package/dist/cjs/nodeviews/EmojiNodeView.js CHANGED
@@ -17,60 +17,49 @@ var _model = require("@atlaskit/editor-prosemirror/model");
17
17
  var _emojiNodeSpec = require("./emojiNodeSpec");
18
18
  var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
19
19
  function EmojiNodeView(node, _ref) {
20
- var _this = this;
20
+ var _api$emoji,
21
+ _sharedState$currentS,
22
+ _this = this;
21
23
  var intl = _ref.intl,
22
24
  api = _ref.api;
23
25
  (0, _classCallCheck2.default)(this, EmojiNodeView);
24
26
  (0, _defineProperty2.default)(this, "destroy", function () {});
25
- // The pure `span` element will be used as a worse fallback only
26
- // if DOMSerializer.renderSpec() in constructor fails.
27
- (0, _defineProperty2.default)(this, "dom", document.createElement('span'));
28
27
  this.node = node;
29
28
  this.intl = intl;
30
- try {
31
- var _api$emoji, _sharedState$currentS;
32
- var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, (0, _emojiNodeSpec.emojiToDom)(this.node)),
33
- dom = _DOMSerializer$render.dom;
34
- if (!(dom instanceof HTMLElement)) {
35
- // It's safe to throw error here because, the code is wrapped in try-catch.
36
- // However, it should never happen because `DOMSerializer.renderSpec()` should always return HTMLElement.
37
- throw new Error('DOMSerializer.renderSpec() did not return HTMLElement');
38
- }
39
- this.dom = dom;
40
- if ((0, _coreUtils.isSSR)()) {
41
- // The provider doesn't work in SSR, and we don't want to render fallback in SSR,
42
- // that's why we don't need to continue node rendering.
43
- // In SSR we want to show a placeholder, that `emojiToDom()` returns.
44
- return;
45
- }
29
+ var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, (0, _emojiNodeSpec.emojiToDom)(this.node)),
30
+ dom = _DOMSerializer$render.dom;
31
+ this.dom = dom;
32
+ this.domElement = dom instanceof HTMLElement ? dom : undefined;
33
+ if ((0, _coreUtils.isSSR)()) {
34
+ // The provider doesn't work in SSR, and we don't want to render fallback in SSR,
35
+ // that's why we don't need to continue node rendering.
36
+ // In SSR we want to show a placeholder, that `emojiToDom()` returns.
37
+ return;
38
+ }
46
39
 
47
- // We use the `emojiProvider` from the shared state
48
- // because it supports the `emojiProvider` prop in the `ComposableEditor` options
49
- // as well as the `emojiProvider` in the `EmojiPlugin` options.
50
- var sharedState = api === null || api === void 0 || (_api$emoji = api.emoji) === null || _api$emoji === void 0 ? void 0 : _api$emoji.sharedState;
51
- if (!sharedState) {
40
+ // We use the `emojiProvider` from the shared state
41
+ // because it supports the `emojiProvider` prop in the `ComposableEditor` options
42
+ // as well as the `emojiProvider` in the `EmojiPlugin` options.
43
+ var sharedState = api === null || api === void 0 || (_api$emoji = api.emoji) === null || _api$emoji === void 0 ? void 0 : _api$emoji.sharedState;
44
+ if (!sharedState) {
45
+ return;
46
+ }
47
+ var emojiProvider = (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.emojiProvider;
48
+ if (emojiProvider) {
49
+ void this.updateDom(emojiProvider);
50
+ }
51
+ var unsubscribe = sharedState.onChange(function (_ref2) {
52
+ var nextSharedState = _ref2.nextSharedState;
53
+ if (emojiProvider === (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider)) {
54
+ // Do not update if the provider is the same
52
55
  return;
53
56
  }
54
- var emojiProvider = (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.emojiProvider;
55
- if (emojiProvider) {
56
- void this.updateDom(emojiProvider);
57
- }
58
- var unsubscribe = sharedState.onChange(function (_ref2) {
59
- var nextSharedState = _ref2.nextSharedState;
60
- if (emojiProvider === (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider)) {
61
- // Do not update if the provider is the same
62
- return;
63
- }
64
- emojiProvider = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider;
65
- void _this.updateDom(emojiProvider);
66
- });
67
- this.destroy = function () {
68
- unsubscribe();
69
- };
70
- } catch (error) {
71
- EmojiNodeView.logError(error instanceof Error ? error : new Error('Unknown error on EmojiNodeView constructor'));
72
- this.renderFallback();
73
- }
57
+ emojiProvider = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider;
58
+ void _this.updateDom(emojiProvider);
59
+ });
60
+ this.destroy = function () {
61
+ unsubscribe();
62
+ };
74
63
  }
75
64
  return (0, _createClass2.default)(EmojiNodeView, [{
76
65
  key: "updateDom",
@@ -133,14 +122,16 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
133
122
  // emoji data to prevent rendering empty emoji during loading.
134
123
  function cleanUpAndRenderCommonAttributes() {
135
124
  // Clean up the DOM before rendering the new emoji
136
- this.dom.innerHTML = '';
137
- this.dom.style.cssText = '';
138
- this.dom.classList.remove(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER);
139
- this.dom.removeAttribute('aria-label'); // The label is set in the renderEmoji method
140
- this.dom.removeAttribute('aria-busy');
125
+ if (this.domElement) {
126
+ this.domElement.innerHTML = '';
127
+ this.domElement.style.cssText = '';
128
+ this.domElement.classList.remove(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER);
129
+ this.domElement.removeAttribute('aria-label'); // The label is set in the renderEmoji method
130
+ this.domElement.removeAttribute('aria-busy');
141
131
 
142
- // Each vanilla JS node implementation should have this data attribute
143
- this.dom.setAttribute('data-prosemirror-node-view-type', 'vanilla');
132
+ // Each vanilla JS node implementation should have this data attribute
133
+ this.domElement.setAttribute('data-prosemirror-node-view-type', 'vanilla');
134
+ }
144
135
  }
145
136
  }, {
146
137
  key: "renderFallback",
package/dist/cjs/ui/InlineEmojiPopup.js CHANGED
@@ -8,29 +8,16 @@ 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");
11
+ var _getDomRefFromSelection = require("@atlaskit/editor-common/get-dom-ref-from-selection");
11
12
  var _hooks = require("@atlaskit/editor-common/hooks");
12
13
  var _ui = require("@atlaskit/editor-common/ui");
13
14
  var _uiReact = require("@atlaskit/editor-common/ui-react");
14
- var _utils = require("@atlaskit/editor-prosemirror/utils");
15
15
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
16
16
  var _emoji = require("@atlaskit/emoji");
17
17
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
18
  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
19
  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
20
  var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
21
- var getDomRefFromSelection = function getDomRefFromSelection(view) {
22
- var domRef = (0, _utils.findDomRefAtPos)(view.state.selection.from, view.domAtPos.bind(view));
23
- if (domRef instanceof HTMLElement) {
24
- if (domRef.nodeName !== 'P') {
25
- var paragraphRef = domRef.closest('p');
26
- if (paragraphRef) {
27
- return paragraphRef;
28
- }
29
- }
30
- return domRef;
31
- }
32
- throw new Error('Invalid DOM reference');
33
- };
34
21
  var emojiPopupMessages = {
35
22
  emojiPickerAriaLabel: {
36
23
  id: 'fabric.emoji.picker.aria.label',
@@ -39,7 +26,7 @@ var emojiPopupMessages = {
39
26
  }
40
27
  };
41
28
  var InlineEmojiPopup = exports.InlineEmojiPopup = function InlineEmojiPopup(_ref) {
42
- var _useSharedPluginState, _useSharedPluginState2;
29
+ var _useSharedPluginState, _useSharedPluginState2, _api$analytics;
43
30
  var api = _ref.api,
44
31
  popupsMountPoint = _ref.popupsMountPoint,
45
32
  popupsBoundariesElement = _ref.popupsBoundariesElement,
@@ -79,7 +66,7 @@ var InlineEmojiPopup = exports.InlineEmojiPopup = function InlineEmojiPopup(_ref
79
66
  if (!isOpen || !emojiProvider) {
80
67
  return null;
81
68
  }
82
- var domRef = getDomRefFromSelection(editorView);
69
+ var domRef = (0, _getDomRefFromSelection.getDomRefFromSelection)(editorView, _analytics.ACTION_SUBJECT_ID.PICKER_EMOJI, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
83
70
  return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
84
71
  ariaLabel: intl.formatMessage(emojiPopupMessages.emojiPickerAriaLabel),
85
72
  offset: [0, 12],
package/dist/es2019/nodeviews/EmojiNodeView.js CHANGED
@@ -14,58 +14,46 @@ export class EmojiNodeView {
14
14
  intl,
15
15
  api
16
16
  }) {
17
+ var _api$emoji, _sharedState$currentS;
17
18
  _defineProperty(this, "destroy", () => {});
18
- // The pure `span` element will be used as a worse fallback only
19
- // if DOMSerializer.renderSpec() in constructor fails.
20
- _defineProperty(this, "dom", document.createElement('span'));
21
19
  this.node = node;
22
20
  this.intl = intl;
23
- try {
24
- var _api$emoji, _sharedState$currentS;
25
- const {
26
- dom
27
- } = DOMSerializer.renderSpec(document, emojiToDom(this.node));
28
- if (!(dom instanceof HTMLElement)) {
29
- // It's safe to throw error here because, the code is wrapped in try-catch.
30
- // However, it should never happen because `DOMSerializer.renderSpec()` should always return HTMLElement.
31
- throw new Error('DOMSerializer.renderSpec() did not return HTMLElement');
32
- }
33
- this.dom = dom;
34
- if (isSSR()) {
35
- // The provider doesn't work in SSR, and we don't want to render fallback in SSR,
36
- // that's why we don't need to continue node rendering.
37
- // In SSR we want to show a placeholder, that `emojiToDom()` returns.
38
- return;
39
- }
21
+ const {
22
+ dom
23
+ } = DOMSerializer.renderSpec(document, emojiToDom(this.node));
24
+ this.dom = dom;
25
+ this.domElement = dom instanceof HTMLElement ? dom : undefined;
26
+ if (isSSR()) {
27
+ // The provider doesn't work in SSR, and we don't want to render fallback in SSR,
28
+ // that's why we don't need to continue node rendering.
29
+ // In SSR we want to show a placeholder, that `emojiToDom()` returns.
30
+ return;
31
+ }
40
32
 
41
- // We use the `emojiProvider` from the shared state
42
- // because it supports the `emojiProvider` prop in the `ComposableEditor` options
43
- // as well as the `emojiProvider` in the `EmojiPlugin` options.
44
- const sharedState = api === null || api === void 0 ? void 0 : (_api$emoji = api.emoji) === null || _api$emoji === void 0 ? void 0 : _api$emoji.sharedState;
45
- if (!sharedState) {
33
+ // We use the `emojiProvider` from the shared state
34
+ // because it supports the `emojiProvider` prop in the `ComposableEditor` options
35
+ // as well as the `emojiProvider` in the `EmojiPlugin` options.
36
+ const sharedState = api === null || api === void 0 ? void 0 : (_api$emoji = api.emoji) === null || _api$emoji === void 0 ? void 0 : _api$emoji.sharedState;
37
+ if (!sharedState) {
38
+ return;
39
+ }
40
+ let emojiProvider = (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.emojiProvider;
41
+ if (emojiProvider) {
42
+ void this.updateDom(emojiProvider);
43
+ }
44
+ const unsubscribe = sharedState.onChange(({
45
+ nextSharedState
46
+ }) => {
47
+ if (emojiProvider === (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider)) {
48
+ // Do not update if the provider is the same
46
49
  return;
47
50
  }
48
- let emojiProvider = (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.emojiProvider;
49
- if (emojiProvider) {
50
- void this.updateDom(emojiProvider);
51
- }
52
- const unsubscribe = sharedState.onChange(({
53
- nextSharedState
54
- }) => {
55
- if (emojiProvider === (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider)) {
56
- // Do not update if the provider is the same
57
- return;
58
- }
59
- emojiProvider = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider;
60
- void this.updateDom(emojiProvider);
61
- });
62
- this.destroy = () => {
63
- unsubscribe();
64
- };
65
- } catch (error) {
66
- EmojiNodeView.logError(error instanceof Error ? error : new Error('Unknown error on EmojiNodeView constructor'));
67
- this.renderFallback();
68
- }
51
+ emojiProvider = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider;
52
+ void this.updateDom(emojiProvider);
53
+ });
54
+ this.destroy = () => {
55
+ unsubscribe();
56
+ };
69
57
  }
70
58
  async updateDom(emojiProvider) {
71
59
  try {
@@ -104,14 +92,16 @@ export class EmojiNodeView {
104
92
  // emoji data to prevent rendering empty emoji during loading.
105
93
  cleanUpAndRenderCommonAttributes() {
106
94
  // Clean up the DOM before rendering the new emoji
107
- this.dom.innerHTML = '';
108
- this.dom.style.cssText = '';
109
- this.dom.classList.remove(EmojiSharedCssClassName.EMOJI_PLACEHOLDER);
110
- this.dom.removeAttribute('aria-label'); // The label is set in the renderEmoji method
111
- this.dom.removeAttribute('aria-busy');
95
+ if (this.domElement) {
96
+ this.domElement.innerHTML = '';
97
+ this.domElement.style.cssText = '';
98
+ this.domElement.classList.remove(EmojiSharedCssClassName.EMOJI_PLACEHOLDER);
99
+ this.domElement.removeAttribute('aria-label'); // The label is set in the renderEmoji method
100
+ this.domElement.removeAttribute('aria-busy');
112
101
 
113
- // Each vanilla JS node implementation should have this data attribute
114
- this.dom.setAttribute('data-prosemirror-node-view-type', 'vanilla');
102
+ // Each vanilla JS node implementation should have this data attribute
103
+ this.domElement.setAttribute('data-prosemirror-node-view-type', 'vanilla');
104
+ }
115
105
  }
116
106
  renderFallback() {
117
107
  this.cleanUpAndRenderCommonAttributes();
package/dist/es2019/ui/InlineEmojiPopup.js CHANGED
@@ -1,27 +1,14 @@
1
1
  import React, { useCallback, useEffect } from 'react';
2
2
  import { useIntl } from 'react-intl-next';
3
- import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
+ import { ACTION_SUBJECT_ID, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
4
+ import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
4
5
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
5
6
  import { Popup } from '@atlaskit/editor-common/ui';
6
7
  import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
7
- import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
8
8
  import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
9
9
  import { EmojiPicker } from '@atlaskit/emoji';
10
10
  import { fg } from '@atlaskit/platform-feature-flags';
11
11
  const PopupWithListeners = withOuterListeners(Popup);
12
- const getDomRefFromSelection = view => {
13
- const domRef = findDomRefAtPos(view.state.selection.from, view.domAtPos.bind(view));
14
- if (domRef instanceof HTMLElement) {
15
- if (domRef.nodeName !== 'P') {
16
- const paragraphRef = domRef.closest('p');
17
- if (paragraphRef) {
18
- return paragraphRef;
19
- }
20
- }
21
- return domRef;
22
- }
23
- throw new Error('Invalid DOM reference');
24
- };
25
12
  const emojiPopupMessages = {
26
13
  emojiPickerAriaLabel: {
27
14
  id: 'fabric.emoji.picker.aria.label',
@@ -37,7 +24,7 @@ export const InlineEmojiPopup = ({
37
24
  editorView,
38
25
  onClose
39
26
  }) => {
40
- var _useSharedPluginState, _useSharedPluginState2;
27
+ var _useSharedPluginState, _useSharedPluginState2, _api$analytics;
41
28
  const {
42
29
  emojiProvider,
43
30
  inlineEmojiPopupOpen: isOpen
@@ -70,7 +57,7 @@ export const InlineEmojiPopup = ({
70
57
  if (!isOpen || !emojiProvider) {
71
58
  return null;
72
59
  }
73
- const domRef = getDomRefFromSelection(editorView);
60
+ const domRef = getDomRefFromSelection(editorView, ACTION_SUBJECT_ID.PICKER_EMOJI, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
74
61
  return /*#__PURE__*/React.createElement(PopupWithListeners, {
75
62
  ariaLabel: intl.formatMessage(emojiPopupMessages.emojiPickerAriaLabel),
76
63
  offset: [0, 12],
package/dist/esm/nodeviews/EmojiNodeView.js CHANGED
@@ -10,60 +10,49 @@ import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
10
10
  import { emojiToDom } from './emojiNodeSpec';
11
11
  export var EmojiNodeView = /*#__PURE__*/function () {
12
12
  function EmojiNodeView(node, _ref) {
13
- var _this = this;
13
+ var _api$emoji,
14
+ _sharedState$currentS,
15
+ _this = this;
14
16
  var intl = _ref.intl,
15
17
  api = _ref.api;
16
18
  _classCallCheck(this, EmojiNodeView);
17
19
  _defineProperty(this, "destroy", function () {});
18
- // The pure `span` element will be used as a worse fallback only
19
- // if DOMSerializer.renderSpec() in constructor fails.
20
- _defineProperty(this, "dom", document.createElement('span'));
21
20
  this.node = node;
22
21
  this.intl = intl;
23
- try {
24
- var _api$emoji, _sharedState$currentS;
25
- var _DOMSerializer$render = DOMSerializer.renderSpec(document, emojiToDom(this.node)),
26
- dom = _DOMSerializer$render.dom;
27
- if (!(dom instanceof HTMLElement)) {
28
- // It's safe to throw error here because, the code is wrapped in try-catch.
29
- // However, it should never happen because `DOMSerializer.renderSpec()` should always return HTMLElement.
30
- throw new Error('DOMSerializer.renderSpec() did not return HTMLElement');
31
- }
32
- this.dom = dom;
33
- if (isSSR()) {
34
- // The provider doesn't work in SSR, and we don't want to render fallback in SSR,
35
- // that's why we don't need to continue node rendering.
36
- // In SSR we want to show a placeholder, that `emojiToDom()` returns.
37
- return;
38
- }
22
+ var _DOMSerializer$render = DOMSerializer.renderSpec(document, emojiToDom(this.node)),
23
+ dom = _DOMSerializer$render.dom;
24
+ this.dom = dom;
25
+ this.domElement = dom instanceof HTMLElement ? dom : undefined;
26
+ if (isSSR()) {
27
+ // The provider doesn't work in SSR, and we don't want to render fallback in SSR,
28
+ // that's why we don't need to continue node rendering.
29
+ // In SSR we want to show a placeholder, that `emojiToDom()` returns.
30
+ return;
31
+ }
39
32
 
40
- // We use the `emojiProvider` from the shared state
41
- // because it supports the `emojiProvider` prop in the `ComposableEditor` options
42
- // as well as the `emojiProvider` in the `EmojiPlugin` options.
43
- var sharedState = api === null || api === void 0 || (_api$emoji = api.emoji) === null || _api$emoji === void 0 ? void 0 : _api$emoji.sharedState;
44
- if (!sharedState) {
33
+ // We use the `emojiProvider` from the shared state
34
+ // because it supports the `emojiProvider` prop in the `ComposableEditor` options
35
+ // as well as the `emojiProvider` in the `EmojiPlugin` options.
36
+ var sharedState = api === null || api === void 0 || (_api$emoji = api.emoji) === null || _api$emoji === void 0 ? void 0 : _api$emoji.sharedState;
37
+ if (!sharedState) {
38
+ return;
39
+ }
40
+ var emojiProvider = (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.emojiProvider;
41
+ if (emojiProvider) {
42
+ void this.updateDom(emojiProvider);
43
+ }
44
+ var unsubscribe = sharedState.onChange(function (_ref2) {
45
+ var nextSharedState = _ref2.nextSharedState;
46
+ if (emojiProvider === (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider)) {
47
+ // Do not update if the provider is the same
45
48
  return;
46
49
  }
47
- var emojiProvider = (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.emojiProvider;
48
- if (emojiProvider) {
49
- void this.updateDom(emojiProvider);
50
- }
51
- var unsubscribe = sharedState.onChange(function (_ref2) {
52
- var nextSharedState = _ref2.nextSharedState;
53
- if (emojiProvider === (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider)) {
54
- // Do not update if the provider is the same
55
- return;
56
- }
57
- emojiProvider = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider;
58
- void _this.updateDom(emojiProvider);
59
- });
60
- this.destroy = function () {
61
- unsubscribe();
62
- };
63
- } catch (error) {
64
- EmojiNodeView.logError(error instanceof Error ? error : new Error('Unknown error on EmojiNodeView constructor'));
65
- this.renderFallback();
66
- }
50
+ emojiProvider = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider;
51
+ void _this.updateDom(emojiProvider);
52
+ });
53
+ this.destroy = function () {
54
+ unsubscribe();
55
+ };
67
56
  }
68
57
  return _createClass(EmojiNodeView, [{
69
58
  key: "updateDom",
@@ -126,14 +115,16 @@ export var EmojiNodeView = /*#__PURE__*/function () {
126
115
  // emoji data to prevent rendering empty emoji during loading.
127
116
  function cleanUpAndRenderCommonAttributes() {
128
117
  // Clean up the DOM before rendering the new emoji
129
- this.dom.innerHTML = '';
130
- this.dom.style.cssText = '';
131
- this.dom.classList.remove(EmojiSharedCssClassName.EMOJI_PLACEHOLDER);
132
- this.dom.removeAttribute('aria-label'); // The label is set in the renderEmoji method
133
- this.dom.removeAttribute('aria-busy');
118
+ if (this.domElement) {
119
+ this.domElement.innerHTML = '';
120
+ this.domElement.style.cssText = '';
121
+ this.domElement.classList.remove(EmojiSharedCssClassName.EMOJI_PLACEHOLDER);
122
+ this.domElement.removeAttribute('aria-label'); // The label is set in the renderEmoji method
123
+ this.domElement.removeAttribute('aria-busy');
134
124
 
135
- // Each vanilla JS node implementation should have this data attribute
136
- this.dom.setAttribute('data-prosemirror-node-view-type', 'vanilla');
125
+ // Each vanilla JS node implementation should have this data attribute
126
+ this.domElement.setAttribute('data-prosemirror-node-view-type', 'vanilla');
127
+ }
137
128
  }
138
129
  }, {
139
130
  key: "renderFallback",
package/dist/esm/ui/InlineEmojiPopup.js CHANGED
@@ -1,27 +1,14 @@
1
1
  import React, { useCallback, useEffect } from 'react';
2
2
  import { useIntl } from 'react-intl-next';
3
- import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
+ import { ACTION_SUBJECT_ID, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
4
+ import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
4
5
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
5
6
  import { Popup } from '@atlaskit/editor-common/ui';
6
7
  import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
7
- import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
8
8
  import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
9
9
  import { EmojiPicker } from '@atlaskit/emoji';
10
10
  import { fg } from '@atlaskit/platform-feature-flags';
11
11
  var PopupWithListeners = withOuterListeners(Popup);
12
- var getDomRefFromSelection = function getDomRefFromSelection(view) {
13
- var domRef = findDomRefAtPos(view.state.selection.from, view.domAtPos.bind(view));
14
- if (domRef instanceof HTMLElement) {
15
- if (domRef.nodeName !== 'P') {
16
- var paragraphRef = domRef.closest('p');
17
- if (paragraphRef) {
18
- return paragraphRef;
19
- }
20
- }
21
- return domRef;
22
- }
23
- throw new Error('Invalid DOM reference');
24
- };
25
12
  var emojiPopupMessages = {
26
13
  emojiPickerAriaLabel: {
27
14
  id: 'fabric.emoji.picker.aria.label',
@@ -30,7 +17,7 @@ var emojiPopupMessages = {
30
17
  }
31
18
  };
32
19
  export var InlineEmojiPopup = function InlineEmojiPopup(_ref) {
33
- var _useSharedPluginState, _useSharedPluginState2;
20
+ var _useSharedPluginState, _useSharedPluginState2, _api$analytics;
34
21
  var api = _ref.api,
35
22
  popupsMountPoint = _ref.popupsMountPoint,
36
23
  popupsBoundariesElement = _ref.popupsBoundariesElement,
@@ -70,7 +57,7 @@ export var InlineEmojiPopup = function InlineEmojiPopup(_ref) {
70
57
  if (!isOpen || !emojiProvider) {
71
58
  return null;
72
59
  }
73
- var domRef = getDomRefFromSelection(editorView);
60
+ var domRef = getDomRefFromSelection(editorView, ACTION_SUBJECT_ID.PICKER_EMOJI, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
74
61
  return /*#__PURE__*/React.createElement(PopupWithListeners, {
75
62
  ariaLabel: intl.formatMessage(emojiPopupMessages.emojiPickerAriaLabel),
76
63
  offset: [0, 12],
package/dist/types/nodeviews/EmojiNodeView.d.ts CHANGED
@@ -8,10 +8,11 @@ interface Params {
8
8
  api: ExtractInjectionAPI<EmojiPlugin> | undefined;
9
9
  }
10
10
  export declare class EmojiNodeView implements NodeView {
11
+ dom: Node;
12
+ domElement: HTMLElement | undefined;
11
13
  private readonly node;
12
14
  private readonly intl;
13
15
  readonly destroy: () => void;
14
- readonly dom: HTMLElement;
15
16
  private static logError;
16
17
  constructor(node: PMNode, { intl, api }: Params);
17
18
  private updateDom;
package/dist/types-ts4.5/nodeviews/EmojiNodeView.d.ts CHANGED
@@ -8,10 +8,11 @@ interface Params {
8
8
  api: ExtractInjectionAPI<EmojiPlugin> | undefined;
9
9
  }
10
10
  export declare class EmojiNodeView implements NodeView {
11
+ dom: Node;
12
+ domElement: HTMLElement | undefined;
11
13
  private readonly node;
12
14
  private readonly intl;
13
15
  readonly destroy: () => void;
14
- readonly dom: HTMLElement;
15
16
  private static logError;
16
17
  constructor(node: PMNode, { intl, api }: Params);
17
18
  private updateDom;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-emoji",
3
- "version": "3.6.0",
3
+ "version": "3.6.2",
4
4
  "description": "Emoji plugin for @atlaskit/editor-core",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -23,22 +23,22 @@
23
23
  },
24
24
  "dependencies": {
25
25
  "@atlaskit/adf-schema": "^47.6.0",
26
- "@atlaskit/editor-common": "^103.9.0",
26
+ "@atlaskit/editor-common": "^103.22.0",
27
27
  "@atlaskit/editor-plugin-analytics": "^2.2.0",
28
- "@atlaskit/editor-plugin-annotation": "^2.6.0",
28
+ "@atlaskit/editor-plugin-annotation": "^2.7.0",
29
29
  "@atlaskit/editor-plugin-base": "^2.3.0",
30
30
  "@atlaskit/editor-plugin-editor-viewmode": "^3.1.0",
31
31
  "@atlaskit/editor-plugin-metrics": "^3.4.0",
32
- "@atlaskit/editor-plugin-type-ahead": "^2.5.0",
32
+ "@atlaskit/editor-plugin-type-ahead": "^2.6.0",
33
33
  "@atlaskit/editor-prosemirror": "7.0.0",
34
34
  "@atlaskit/editor-shared-styles": "^3.4.0",
35
- "@atlaskit/emoji": "^69.0.0",
35
+ "@atlaskit/emoji": "^69.1.0",
36
36
  "@atlaskit/icon": "^25.6.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": "^4.11.0",
41
+ "@atlaskit/tmp-editor-statsig": "^4.15.0",
42
42
  "@atlaskit/tokens": "^4.8.0",
43
43
  "@babel/runtime": "^7.0.0",
44
44
  "@emotion/react": "^11.7.1",
@@ -50,12 +50,12 @@
50
50
  "react-dom": "^18.2.0"
51
51
  },
52
52
  "devDependencies": {
53
- "@af/visual-regression": "^1.3.0",
53
+ "@af/visual-regression": "workspace:^",
54
54
  "@atlaskit/editor-plugin-composition": "^1.3.0",
55
55
  "@atlaskit/editor-plugin-decorations": "^2.0.0",
56
- "@atlaskit/ssr": "^0.4.0",
56
+ "@atlaskit/ssr": "workspace:^",
57
57
  "@atlaskit/util-data-test": "^18.0.0",
58
- "@atlaskit/visual-regression": "^0.10.0",
58
+ "@atlaskit/visual-regression": "workspace:^",
59
59
  "@testing-library/react": "^13.4.0",
60
60
  "typescript": "~5.4.2",
61
61
  "wait-for-expect": "^1.2.0"