@atlaskit/editor-plugin-emoji 3.5.0 → 3.5.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 +16 -0
  2. package/dist/cjs/nodeviews/EmojiNodeView.js +31 -22
  3. package/dist/es2019/nodeviews/EmojiNodeView.js +16 -9
  4. package/dist/esm/nodeviews/EmojiNodeView.js +31 -22
  5. package/dist/types/nodeviews/EmojiNodeView.d.ts +1 -0
  6. package/dist/types-ts4.5/nodeviews/EmojiNodeView.d.ts +1 -0
  7. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-plugin-emoji
2
2
 
3
+ ## 3.5.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 3.5.1
10
+
11
+ ### Patch Changes
12
+
13
+ - [#136443](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/136443)
14
+ [`884806f5c2215`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/884806f5c2215) -
15
+ [https://product-fabric.atlassian.net/browse/ED-27433](ED-27433) - fix vanilla JS emoji
16
+ implementation loading state issue
17
+ - Updated dependencies
18
+
3
19
  ## 3.5.0
4
20
 
5
21
  ### Minor Changes
package/dist/cjs/nodeviews/EmojiNodeView.js CHANGED
@@ -73,64 +73,72 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
73
73
  return _regenerator.default.wrap(function _callee$(_context) {
74
74
  while (1) switch (_context.prev = _context.next) {
75
75
  case 0:
76
- // Clean up the DOM before rendering the new emoji
77
- this.dom.innerHTML = '';
78
- this.dom.style.cssText = '';
79
- this.dom.classList.remove(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER);
80
- this.dom.removeAttribute('aria-label'); // The label is set in the renderEmoji method
81
- this.dom.removeAttribute('aria-busy');
82
-
83
- // Each vanilla JS node implementation should have this data attribute
84
- this.dom.setAttribute('data-prosemirror-node-view-type', 'vanilla');
85
- _context.prev = 6;
76
+ _context.prev = 0;
86
77
  _this$node$attrs = this.node.attrs, shortName = _this$node$attrs.shortName, id = _this$node$attrs.id, fallback = _this$node$attrs.text;
87
- _context.next = 10;
78
+ _context.next = 4;
88
79
  return emojiProvider === null || emojiProvider === void 0 ? void 0 : emojiProvider.fetchByEmojiId({
89
80
  id: id,
90
81
  shortName: shortName,
91
82
  fallback: fallback
92
83
  }, true);
93
- case 10:
84
+ case 4:
94
85
  emojiDescription = _context.sent;
95
86
  if (emojiDescription) {
96
- _context.next = 15;
87
+ _context.next = 9;
97
88
  break;
98
89
  }
99
90
  EmojiNodeView.logError(new Error('Emoji description is not loaded'));
100
91
  this.renderFallback();
101
92
  return _context.abrupt("return");
102
- case 15:
93
+ case 9:
103
94
  emojiRepresentation = emojiDescription === null || emojiDescription === void 0 ? void 0 : emojiDescription.representation;
104
95
  if (EmojiNodeView.isEmojiRepresentationSupported(emojiRepresentation)) {
105
- _context.next = 20;
96
+ _context.next = 14;
106
97
  break;
107
98
  }
108
99
  EmojiNodeView.logError(new Error('Emoji representation is not supported'));
109
100
  this.renderFallback();
110
101
  return _context.abrupt("return");
111
- case 20:
102
+ case 14:
112
103
  this.renderEmoji(emojiDescription, emojiRepresentation);
113
- _context.next = 27;
104
+ _context.next = 21;
114
105
  break;
115
- case 23:
116
- _context.prev = 23;
117
- _context.t0 = _context["catch"](6);
106
+ case 17:
107
+ _context.prev = 17;
108
+ _context.t0 = _context["catch"](0);
118
109
  EmojiNodeView.logError(_context.t0 instanceof Error ? _context.t0 : new Error('Unknown error on EmojiNodeView updateDom'));
119
110
  this.renderFallback();
120
- case 27:
111
+ case 21:
121
112
  case "end":
122
113
  return _context.stop();
123
114
  }
124
- }, _callee, this, [[6, 23]]);
115
+ }, _callee, this, [[0, 17]]);
125
116
  }));
126
117
  function updateDom(_x) {
127
118
  return _updateDom.apply(this, arguments);
128
119
  }
129
120
  return updateDom;
130
121
  }()
122
+ }, {
123
+ key: "cleanUpAndRenderCommonAttributes",
124
+ value:
125
+ // Pay attention, this method should be called only when the emoji provider returns
126
+ // emoji data to prevent rendering empty emoji during loading.
127
+ function cleanUpAndRenderCommonAttributes() {
128
+ // Clean up the DOM before rendering the new emoji
129
+ this.dom.innerHTML = '';
130
+ this.dom.style.cssText = '';
131
+ this.dom.classList.remove(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER);
132
+ this.dom.removeAttribute('aria-label'); // The label is set in the renderEmoji method
133
+ this.dom.removeAttribute('aria-busy');
134
+
135
+ // Each vanilla JS node implementation should have this data attribute
136
+ this.dom.setAttribute('data-prosemirror-node-view-type', 'vanilla');
137
+ }
131
138
  }, {
132
139
  key: "renderFallback",
133
140
  value: function renderFallback() {
141
+ this.cleanUpAndRenderCommonAttributes();
134
142
  var fallbackElement = document.createElement('span');
135
143
  fallbackElement.innerText = this.node.attrs.text || this.node.attrs.shortName;
136
144
  fallbackElement.setAttribute('data-testid', "fallback-emoji-".concat(this.node.attrs.shortName));
@@ -140,6 +148,7 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
140
148
  }, {
141
149
  key: "renderEmoji",
142
150
  value: function renderEmoji(description, representation) {
151
+ this.cleanUpAndRenderCommonAttributes();
143
152
  var emojiType = 'sprite' in representation ? 'sprite' : 'image';
144
153
 
145
154
  // Add wrapper for the emoji
package/dist/es2019/nodeviews/EmojiNodeView.js CHANGED
@@ -61,15 +61,6 @@ export class EmojiNodeView {
61
61
  }
62
62
  }
63
63
  async updateDom(emojiProvider) {
64
- // Clean up the DOM before rendering the new emoji
65
- this.dom.innerHTML = '';
66
- this.dom.style.cssText = '';
67
- this.dom.classList.remove(EmojiSharedCssClassName.EMOJI_PLACEHOLDER);
68
- this.dom.removeAttribute('aria-label'); // The label is set in the renderEmoji method
69
- this.dom.removeAttribute('aria-busy');
70
-
71
- // Each vanilla JS node implementation should have this data attribute
72
- this.dom.setAttribute('data-prosemirror-node-view-type', 'vanilla');
73
64
  try {
74
65
  const {
75
66
  shortName,
@@ -101,7 +92,22 @@ export class EmojiNodeView {
101
92
  static isEmojiRepresentationSupported(representation) {
102
93
  return !!representation && ('sprite' in representation || 'imagePath' in representation || 'mediaPath' in representation);
103
94
  }
95
+
96
+ // Pay attention, this method should be called only when the emoji provider returns
97
+ // emoji data to prevent rendering empty emoji during loading.
98
+ cleanUpAndRenderCommonAttributes() {
99
+ // Clean up the DOM before rendering the new emoji
100
+ this.dom.innerHTML = '';
101
+ this.dom.style.cssText = '';
102
+ this.dom.classList.remove(EmojiSharedCssClassName.EMOJI_PLACEHOLDER);
103
+ this.dom.removeAttribute('aria-label'); // The label is set in the renderEmoji method
104
+ this.dom.removeAttribute('aria-busy');
105
+
106
+ // Each vanilla JS node implementation should have this data attribute
107
+ this.dom.setAttribute('data-prosemirror-node-view-type', 'vanilla');
108
+ }
104
109
  renderFallback() {
110
+ this.cleanUpAndRenderCommonAttributes();
105
111
  const fallbackElement = document.createElement('span');
106
112
  fallbackElement.innerText = this.node.attrs.text || this.node.attrs.shortName;
107
113
  fallbackElement.setAttribute('data-testid', `fallback-emoji-${this.node.attrs.shortName}`);
@@ -109,6 +115,7 @@ export class EmojiNodeView {
109
115
  this.dom.appendChild(fallbackElement);
110
116
  }
111
117
  renderEmoji(description, representation) {
118
+ this.cleanUpAndRenderCommonAttributes();
112
119
  const emojiType = 'sprite' in representation ? 'sprite' : 'image';
113
120
 
114
121
  // Add wrapper for the emoji
package/dist/esm/nodeviews/EmojiNodeView.js CHANGED
@@ -66,64 +66,72 @@ export var EmojiNodeView = /*#__PURE__*/function () {
66
66
  return _regeneratorRuntime.wrap(function _callee$(_context) {
67
67
  while (1) switch (_context.prev = _context.next) {
68
68
  case 0:
69
- // Clean up the DOM before rendering the new emoji
70
- this.dom.innerHTML = '';
71
- this.dom.style.cssText = '';
72
- this.dom.classList.remove(EmojiSharedCssClassName.EMOJI_PLACEHOLDER);
73
- this.dom.removeAttribute('aria-label'); // The label is set in the renderEmoji method
74
- this.dom.removeAttribute('aria-busy');
75
-
76
- // Each vanilla JS node implementation should have this data attribute
77
- this.dom.setAttribute('data-prosemirror-node-view-type', 'vanilla');
78
- _context.prev = 6;
69
+ _context.prev = 0;
79
70
  _this$node$attrs = this.node.attrs, shortName = _this$node$attrs.shortName, id = _this$node$attrs.id, fallback = _this$node$attrs.text;
80
- _context.next = 10;
71
+ _context.next = 4;
81
72
  return emojiProvider === null || emojiProvider === void 0 ? void 0 : emojiProvider.fetchByEmojiId({
82
73
  id: id,
83
74
  shortName: shortName,
84
75
  fallback: fallback
85
76
  }, true);
86
- case 10:
77
+ case 4:
87
78
  emojiDescription = _context.sent;
88
79
  if (emojiDescription) {
89
- _context.next = 15;
80
+ _context.next = 9;
90
81
  break;
91
82
  }
92
83
  EmojiNodeView.logError(new Error('Emoji description is not loaded'));
93
84
  this.renderFallback();
94
85
  return _context.abrupt("return");
95
- case 15:
86
+ case 9:
96
87
  emojiRepresentation = emojiDescription === null || emojiDescription === void 0 ? void 0 : emojiDescription.representation;
97
88
  if (EmojiNodeView.isEmojiRepresentationSupported(emojiRepresentation)) {
98
- _context.next = 20;
89
+ _context.next = 14;
99
90
  break;
100
91
  }
101
92
  EmojiNodeView.logError(new Error('Emoji representation is not supported'));
102
93
  this.renderFallback();
103
94
  return _context.abrupt("return");
104
- case 20:
95
+ case 14:
105
96
  this.renderEmoji(emojiDescription, emojiRepresentation);
106
- _context.next = 27;
97
+ _context.next = 21;
107
98
  break;
108
- case 23:
109
- _context.prev = 23;
110
- _context.t0 = _context["catch"](6);
99
+ case 17:
100
+ _context.prev = 17;
101
+ _context.t0 = _context["catch"](0);
111
102
  EmojiNodeView.logError(_context.t0 instanceof Error ? _context.t0 : new Error('Unknown error on EmojiNodeView updateDom'));
112
103
  this.renderFallback();
113
- case 27:
104
+ case 21:
114
105
  case "end":
115
106
  return _context.stop();
116
107
  }
117
- }, _callee, this, [[6, 23]]);
108
+ }, _callee, this, [[0, 17]]);
118
109
  }));
119
110
  function updateDom(_x) {
120
111
  return _updateDom.apply(this, arguments);
121
112
  }
122
113
  return updateDom;
123
114
  }()
115
+ }, {
116
+ key: "cleanUpAndRenderCommonAttributes",
117
+ value:
118
+ // Pay attention, this method should be called only when the emoji provider returns
119
+ // emoji data to prevent rendering empty emoji during loading.
120
+ function cleanUpAndRenderCommonAttributes() {
121
+ // Clean up the DOM before rendering the new emoji
122
+ this.dom.innerHTML = '';
123
+ this.dom.style.cssText = '';
124
+ this.dom.classList.remove(EmojiSharedCssClassName.EMOJI_PLACEHOLDER);
125
+ this.dom.removeAttribute('aria-label'); // The label is set in the renderEmoji method
126
+ this.dom.removeAttribute('aria-busy');
127
+
128
+ // Each vanilla JS node implementation should have this data attribute
129
+ this.dom.setAttribute('data-prosemirror-node-view-type', 'vanilla');
130
+ }
124
131
  }, {
125
132
  key: "renderFallback",
126
133
  value: function renderFallback() {
134
+ this.cleanUpAndRenderCommonAttributes();
127
135
  var fallbackElement = document.createElement('span');
128
136
  fallbackElement.innerText = this.node.attrs.text || this.node.attrs.shortName;
129
137
  fallbackElement.setAttribute('data-testid', "fallback-emoji-".concat(this.node.attrs.shortName));
@@ -133,6 +141,7 @@ export var EmojiNodeView = /*#__PURE__*/function () {
133
141
  }, {
134
142
  key: "renderEmoji",
135
143
  value: function renderEmoji(description, representation) {
144
+ this.cleanUpAndRenderCommonAttributes();
136
145
  var emojiType = 'sprite' in representation ? 'sprite' : 'image';
137
146
 
138
147
  // Add wrapper for the emoji
package/dist/types/nodeviews/EmojiNodeView.d.ts CHANGED
@@ -16,6 +16,7 @@ export declare class EmojiNodeView implements NodeView {
16
16
  constructor(node: PMNode, { intl, api }: Params);
17
17
  private updateDom;
18
18
  private static isEmojiRepresentationSupported;
19
+ private cleanUpAndRenderCommonAttributes;
19
20
  private renderFallback;
20
21
  private renderEmoji;
21
22
  private createSpriteEmojiElement;
package/dist/types-ts4.5/nodeviews/EmojiNodeView.d.ts CHANGED
@@ -16,6 +16,7 @@ export declare class EmojiNodeView implements NodeView {
16
16
  constructor(node: PMNode, { intl, api }: Params);
17
17
  private updateDom;
18
18
  private static isEmojiRepresentationSupported;
19
+ private cleanUpAndRenderCommonAttributes;
19
20
  private renderFallback;
20
21
  private renderEmoji;
21
22
  private createSpriteEmojiElement;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-emoji",
3
- "version": "3.5.0",
3
+ "version": "3.5.2",
4
4
  "description": "Emoji plugin for @atlaskit/editor-core",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
23
23
  },
24
24
  "dependencies": {
25
25
  "@atlaskit/adf-schema": "^47.6.0",
26
- "@atlaskit/editor-common": "^102.18.0",
26
+ "@atlaskit/editor-common": "^103.0.0",
27
27
  "@atlaskit/editor-plugin-analytics": "^2.2.0",
28
28
  "@atlaskit/editor-plugin-annotation": "^2.2.0",
29
29
  "@atlaskit/editor-plugin-base": "^2.3.0",
@@ -38,7 +38,7 @@
38
38
  "@atlaskit/prosemirror-input-rules": "^3.3.0",
39
39
  "@atlaskit/theme": "^18.0.0",
40
40
  "@atlaskit/tmp-editor-statsig": "^4.6.0",
41
- "@atlaskit/tokens": "^4.6.0",
41
+ "@atlaskit/tokens": "^4.7.0",
42
42
  "@babel/runtime": "^7.0.0",
43
43
  "@emotion/react": "^11.7.1",
44
44
  "react-intl-next": "npm:react-intl@^5.18.1",