@atlaskit/editor-plugin-emoji 3.6.1 → 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 (7) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/nodeviews/EmojiNodeView.js +43 -52
  3. package/dist/es2019/nodeviews/EmojiNodeView.js +43 -53
  4. package/dist/esm/nodeviews/EmojiNodeView.js +43 -52
  5. package/dist/types/nodeviews/EmojiNodeView.d.ts +2 -1
  6. package/dist/types-ts4.5/nodeviews/EmojiNodeView.d.ts +2 -1
  7. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
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
+
3
11
  ## 3.6.1
4
12
 
5
13
  ### Patch 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/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/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/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.1",
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,13 +23,13 @@
23
23
  },
24
24
  "dependencies": {
25
25
  "@atlaskit/adf-schema": "^47.6.0",
26
- "@atlaskit/editor-common": "^103.19.0",
26
+ "@atlaskit/editor-common": "^103.22.0",
27
27
  "@atlaskit/editor-plugin-analytics": "^2.2.0",
28
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
35
  "@atlaskit/emoji": "^69.1.0",