@atlaskit/editor-plugin-emoji 13.0.8 → 13.0.10

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 (6) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/nodeviews/EmojiNodeView.js +72 -1
  3. package/dist/es2019/nodeviews/EmojiNodeView.js +68 -1
  4. package/dist/esm/nodeviews/EmojiNodeView.js +72 -1
  5. package/dist/types/nodeviews/EmojiNodeView.d.ts +10 -3
  6. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/editor-plugin-emoji
2
2
 
3
+ ## 13.0.10
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 13.0.9
10
+
11
+ ### Patch Changes
12
+
13
+ - [`e108322f4ea71`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e108322f4ea71) -
14
+ Add emoji tooltip on hover using VanillaTooltip behind platform_editor_emoji_hover_show_tooltip
15
+ experiment
16
+ - Updated dependencies
17
+
3
18
  ## 13.0.8
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/nodeviews/EmojiNodeView.js CHANGED
@@ -12,10 +12,12 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
12
12
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
13
13
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
14
14
  var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
15
+ var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
15
16
  var _browserApis = require("@atlaskit/browser-apis");
16
17
  var _coreUtils = require("@atlaskit/editor-common/core-utils");
17
18
  var _emoji = require("@atlaskit/editor-common/emoji");
18
19
  var _monitoring = require("@atlaskit/editor-common/monitoring");
20
+ var _vanillaTooltip = require("@atlaskit/editor-common/vanilla-tooltip");
19
21
  var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
20
22
  var _model = require("@atlaskit/editor-prosemirror/model");
21
23
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -41,6 +43,7 @@ function isSingleEmoji(fallbackText) {
41
43
  /**
42
44
  * Emoji node view for renderering emoji nodes
43
45
  */
46
+ var EMOJI_TOOLTIP_CLASS = 'emoji-tooltip-editor';
44
47
  var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
45
48
  /**
46
49
  * Prosemirror node view for rendering emoji nodes. This class is responsible for
@@ -62,7 +65,11 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
62
65
  emojiNodeDataProvider = _ref.emojiNodeDataProvider;
63
66
  (0, _classCallCheck2.default)(this, EmojiNodeView);
64
67
  (0, _defineProperty2.default)(this, "renderingFallback", false);
65
- (0, _defineProperty2.default)(this, "destroy", function () {});
68
+ (0, _defineProperty2.default)(this, "destroy", function () {
69
+ if ((_this.tooltipInstance || _this.tooltipTarget) && (0, _expValEquals.expValEquals)('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true)) {
70
+ _this.destroyTooltip();
71
+ }
72
+ });
66
73
  this.node = node;
67
74
  this.intl = intl;
68
75
  var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, (0, _emojiNodeSpec.emojiToDom)(this.node)),
@@ -136,12 +143,23 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
136
143
  this.destroy = function () {
137
144
  unsubscribe();
138
145
  subscribeToConnection === null || subscribeToConnection === void 0 || subscribeToConnection();
146
+ _this.destroyTooltip();
139
147
  };
140
148
  }
141
149
  }
142
150
 
143
151
  /** Type guard to check if a Node is an HTMLElement in a safe way. */
144
152
  return (0, _createClass2.default)(EmojiNodeView, [{
153
+ key: "destroyTooltip",
154
+ value: function destroyTooltip() {
155
+ var _this$tooltipInstance, _this$tooltipTarget, _this$tooltipTarget2;
156
+ (_this$tooltipInstance = this.tooltipInstance) === null || _this$tooltipInstance === void 0 || _this$tooltipInstance.destroy();
157
+ (_this$tooltipTarget = this.tooltipTarget) === null || _this$tooltipTarget === void 0 || _this$tooltipTarget.removeAttribute('popovertarget');
158
+ (_this$tooltipTarget2 = this.tooltipTarget) === null || _this$tooltipTarget2 === void 0 || _this$tooltipTarget2.removeAttribute('aria-describedby');
159
+ this.tooltipInstance = undefined;
160
+ this.tooltipTarget = undefined;
161
+ }
162
+ }, {
145
163
  key: "isHTMLElement",
146
164
  value: function isHTMLElement(element) {
147
165
  if (element === null) {
@@ -211,6 +229,8 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
211
229
  // Pay attention, this method should be called only when the emoji provider returns
212
230
  // emoji data to prevent rendering empty emoji during loading.
213
231
  function cleanUpAndRenderCommonAttributes() {
232
+ this.destroyTooltip();
233
+
214
234
  // Clean up the DOM before rendering the new emoji
215
235
  if (this.domElement) {
216
236
  this.domElement.innerHTML = '';
@@ -220,6 +240,55 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
220
240
  this.domElement.removeAttribute('aria-busy');
221
241
  }
222
242
  }
243
+
244
+ /**
245
+ * Creates a VanillaTooltip on the given element showing the emoji shortName.
246
+ * Gated behind the platform_editor_emoji_hover_show_tooltip experiment.
247
+ * When the tooltip is active, the native `title` attribute is removed to avoid
248
+ * showing both the browser tooltip and the custom tooltip.
249
+ */
250
+ }, {
251
+ key: "createTooltip",
252
+ value: function createTooltip(element, shortName) {
253
+ if (!(0, _expValEquals.expValEquals)('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true)) {
254
+ return;
255
+ }
256
+ var tooltipId = typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? "emoji-tooltip-".concat(crypto.randomUUID()) : (0, _uniqueId.default)('emoji-tooltip-');
257
+ try {
258
+ var tooltipInstance = new _vanillaTooltip.VanillaTooltip(
259
+ // VanillaTooltip types expect HTMLButtonElement but works with any HTMLElement
260
+ element, shortName, tooltipId, EMOJI_TOOLTIP_CLASS,
261
+ // default timeout
262
+ 300,
263
+ // Inline styles are required because the Popover API promotes the tooltip
264
+ // to the browser's top layer, where ancestor CSS selectors cannot reach it.
265
+ {
266
+ boxSizing: 'border-box',
267
+ maxWidth: '240px',
268
+ backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
269
+ border: 'none',
270
+ borderRadius: "var(--ds-radius-small, 3px)",
271
+ color: "var(--ds-text-inverse, #FFFFFF)",
272
+ font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
273
+ fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
274
+ insetBlockStart: "var(--ds-space-0, 0px)",
275
+ insetInlineStart: "var(--ds-space-0, 0px)",
276
+ overflowWrap: 'break-word',
277
+ paddingBlockStart: "var(--ds-space-050, 4px)",
278
+ paddingBlockEnd: "var(--ds-space-050, 4px)",
279
+ paddingInlineEnd: "var(--ds-space-075, 6px)",
280
+ paddingInlineStart: "var(--ds-space-075, 6px)",
281
+ whiteSpace: 'normal'
282
+ });
283
+ this.tooltipInstance = tooltipInstance;
284
+ this.tooltipTarget = element;
285
+ element.removeAttribute('title');
286
+ } catch (error) {
287
+ element.removeAttribute('popovertarget');
288
+ element.removeAttribute('aria-describedby');
289
+ EmojiNodeView.logError(error instanceof Error ? error : new Error(String(error)));
290
+ }
291
+ }
223
292
  }, {
224
293
  key: "renderFallback",
225
294
  value: function renderFallback() {
@@ -249,6 +318,7 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
249
318
  fallbackElement.setAttribute('data-testid', "fallback-emoji-".concat(shortName));
250
319
  fallbackElement.setAttribute('data-emoji-type', 'fallback');
251
320
  this.dom.appendChild(fallbackElement);
321
+ this.createTooltip(fallbackElement, shortName);
252
322
  }
253
323
  }, {
254
324
  key: "renderEmoji",
@@ -276,6 +346,7 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
276
346
  if (EmojiNodeView.shouldRecordUnicodeEmojiExposure(description, representation)) {
277
347
  (0, _expValEquals.expValEquals)('platform_use_unicode_emojis', 'isEnabled', true);
278
348
  }
349
+ this.createTooltip(containerElement, description.shortName);
279
350
  }
280
351
  }, {
281
352
  key: "createUnicodeEmojiElement",
package/dist/es2019/nodeviews/EmojiNodeView.js CHANGED
@@ -1,9 +1,11 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import isEqual from 'lodash/isEqual';
3
+ import uniqueId from 'lodash/uniqueId';
3
4
  import { getDocument } from '@atlaskit/browser-apis';
4
5
  import { isSSR } from '@atlaskit/editor-common/core-utils';
5
6
  import { messages, EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
6
7
  import { logException } from '@atlaskit/editor-common/monitoring';
8
+ import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
7
9
  import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
8
10
  import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
9
11
  import { fg } from '@atlaskit/platform-feature-flags';
@@ -29,7 +31,16 @@ export function isSingleEmoji(fallbackText) {
29
31
  /**
30
32
  * Emoji node view for renderering emoji nodes
31
33
  */
34
+ const EMOJI_TOOLTIP_CLASS = 'emoji-tooltip-editor';
32
35
  export class EmojiNodeView {
36
+ destroyTooltip() {
37
+ var _this$tooltipInstance, _this$tooltipTarget, _this$tooltipTarget2;
38
+ (_this$tooltipInstance = this.tooltipInstance) === null || _this$tooltipInstance === void 0 ? void 0 : _this$tooltipInstance.destroy();
39
+ (_this$tooltipTarget = this.tooltipTarget) === null || _this$tooltipTarget === void 0 ? void 0 : _this$tooltipTarget.removeAttribute('popovertarget');
40
+ (_this$tooltipTarget2 = this.tooltipTarget) === null || _this$tooltipTarget2 === void 0 ? void 0 : _this$tooltipTarget2.removeAttribute('aria-describedby');
41
+ this.tooltipInstance = undefined;
42
+ this.tooltipTarget = undefined;
43
+ }
33
44
  static logError(error) {
34
45
  void logException(error, {
35
46
  location: 'editor-plugin-emoji/EmojiNodeView'
@@ -55,7 +66,11 @@ export class EmojiNodeView {
55
66
  emojiNodeDataProvider
56
67
  }) {
57
68
  _defineProperty(this, "renderingFallback", false);
58
- _defineProperty(this, "destroy", () => {});
69
+ _defineProperty(this, "destroy", () => {
70
+ if ((this.tooltipInstance || this.tooltipTarget) && expValEquals('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true)) {
71
+ this.destroyTooltip();
72
+ }
73
+ });
59
74
  this.node = node;
60
75
  this.intl = intl;
61
76
  const {
@@ -132,6 +147,7 @@ export class EmojiNodeView {
132
147
  this.destroy = () => {
133
148
  unsubscribe();
134
149
  subscribeToConnection === null || subscribeToConnection === void 0 ? void 0 : subscribeToConnection();
150
+ this.destroyTooltip();
135
151
  };
136
152
  }
137
153
  }
@@ -184,6 +200,8 @@ export class EmojiNodeView {
184
200
  // Pay attention, this method should be called only when the emoji provider returns
185
201
  // emoji data to prevent rendering empty emoji during loading.
186
202
  cleanUpAndRenderCommonAttributes() {
203
+ this.destroyTooltip();
204
+
187
205
  // Clean up the DOM before rendering the new emoji
188
206
  if (this.domElement) {
189
207
  this.domElement.innerHTML = '';
@@ -193,6 +211,53 @@ export class EmojiNodeView {
193
211
  this.domElement.removeAttribute('aria-busy');
194
212
  }
195
213
  }
214
+
215
+ /**
216
+ * Creates a VanillaTooltip on the given element showing the emoji shortName.
217
+ * Gated behind the platform_editor_emoji_hover_show_tooltip experiment.
218
+ * When the tooltip is active, the native `title` attribute is removed to avoid
219
+ * showing both the browser tooltip and the custom tooltip.
220
+ */
221
+ createTooltip(element, shortName) {
222
+ if (!expValEquals('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true)) {
223
+ return;
224
+ }
225
+ const tooltipId = typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? `emoji-tooltip-${crypto.randomUUID()}` : uniqueId('emoji-tooltip-');
226
+ try {
227
+ const tooltipInstance = new VanillaTooltip(
228
+ // VanillaTooltip types expect HTMLButtonElement but works with any HTMLElement
229
+ element, shortName, tooltipId, EMOJI_TOOLTIP_CLASS,
230
+ // default timeout
231
+ 300,
232
+ // Inline styles are required because the Popover API promotes the tooltip
233
+ // to the browser's top layer, where ancestor CSS selectors cannot reach it.
234
+ {
235
+ boxSizing: 'border-box',
236
+ maxWidth: '240px',
237
+ backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
238
+ border: 'none',
239
+ borderRadius: "var(--ds-radius-small, 3px)",
240
+ color: "var(--ds-text-inverse, #FFFFFF)",
241
+ font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
242
+ fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
243
+ insetBlockStart: "var(--ds-space-0, 0px)",
244
+ insetInlineStart: "var(--ds-space-0, 0px)",
245
+ overflowWrap: 'break-word',
246
+ paddingBlockStart: "var(--ds-space-050, 4px)",
247
+ paddingBlockEnd: "var(--ds-space-050, 4px)",
248
+ paddingInlineEnd: "var(--ds-space-075, 6px)",
249
+ paddingInlineStart: "var(--ds-space-075, 6px)",
250
+ whiteSpace: 'normal'
251
+ });
252
+ this.tooltipInstance = tooltipInstance;
253
+ this.tooltipTarget = element;
254
+ element.removeAttribute('title');
255
+ } catch (error) {
256
+ element.removeAttribute('popovertarget');
257
+ element.removeAttribute('aria-describedby');
258
+ EmojiNodeView.logError(error instanceof Error ? error : new Error(String(error)));
259
+ }
260
+ }
196
261
  renderFallback() {
197
262
  this.renderingFallback = true;
198
263
  this.cleanUpAndRenderCommonAttributes();
@@ -221,6 +286,7 @@ export class EmojiNodeView {
221
286
  fallbackElement.setAttribute('data-testid', `fallback-emoji-${shortName}`);
222
287
  fallbackElement.setAttribute('data-emoji-type', 'fallback');
223
288
  this.dom.appendChild(fallbackElement);
289
+ this.createTooltip(fallbackElement, shortName);
224
290
  }
225
291
  renderEmoji(description, representation) {
226
292
  this.renderingFallback = false;
@@ -246,6 +312,7 @@ export class EmojiNodeView {
246
312
  if (EmojiNodeView.shouldRecordUnicodeEmojiExposure(description, representation)) {
247
313
  expValEquals('platform_use_unicode_emojis', 'isEnabled', true);
248
314
  }
315
+ this.createTooltip(containerElement, description.shortName);
249
316
  }
250
317
  createUnicodeEmojiElement(emoji) {
251
318
  let doc = getDocument();
package/dist/esm/nodeviews/EmojiNodeView.js CHANGED
@@ -4,10 +4,12 @@ import _createClass from "@babel/runtime/helpers/createClass";
4
4
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
5
5
  import _regeneratorRuntime from "@babel/runtime/regenerator";
6
6
  import isEqual from 'lodash/isEqual';
7
+ import uniqueId from 'lodash/uniqueId';
7
8
  import { getDocument } from '@atlaskit/browser-apis';
8
9
  import { isSSR } from '@atlaskit/editor-common/core-utils';
9
10
  import { messages, EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
10
11
  import { logException } from '@atlaskit/editor-common/monitoring';
12
+ import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
11
13
  import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
12
14
  import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
13
15
  import { fg } from '@atlaskit/platform-feature-flags';
@@ -33,6 +35,7 @@ export function isSingleEmoji(fallbackText) {
33
35
  /**
34
36
  * Emoji node view for renderering emoji nodes
35
37
  */
38
+ var EMOJI_TOOLTIP_CLASS = 'emoji-tooltip-editor';
36
39
  export var EmojiNodeView = /*#__PURE__*/function () {
37
40
  /**
38
41
  * Prosemirror node view for rendering emoji nodes. This class is responsible for
@@ -54,7 +57,11 @@ export var EmojiNodeView = /*#__PURE__*/function () {
54
57
  emojiNodeDataProvider = _ref.emojiNodeDataProvider;
55
58
  _classCallCheck(this, EmojiNodeView);
56
59
  _defineProperty(this, "renderingFallback", false);
57
- _defineProperty(this, "destroy", function () {});
60
+ _defineProperty(this, "destroy", function () {
61
+ if ((_this.tooltipInstance || _this.tooltipTarget) && expValEquals('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true)) {
62
+ _this.destroyTooltip();
63
+ }
64
+ });
58
65
  this.node = node;
59
66
  this.intl = intl;
60
67
  var _DOMSerializer$render = DOMSerializer.renderSpec(document, emojiToDom(this.node)),
@@ -128,12 +135,23 @@ export var EmojiNodeView = /*#__PURE__*/function () {
128
135
  this.destroy = function () {
129
136
  unsubscribe();
130
137
  subscribeToConnection === null || subscribeToConnection === void 0 || subscribeToConnection();
138
+ _this.destroyTooltip();
131
139
  };
132
140
  }
133
141
  }
134
142
 
135
143
  /** Type guard to check if a Node is an HTMLElement in a safe way. */
136
144
  return _createClass(EmojiNodeView, [{
145
+ key: "destroyTooltip",
146
+ value: function destroyTooltip() {
147
+ var _this$tooltipInstance, _this$tooltipTarget, _this$tooltipTarget2;
148
+ (_this$tooltipInstance = this.tooltipInstance) === null || _this$tooltipInstance === void 0 || _this$tooltipInstance.destroy();
149
+ (_this$tooltipTarget = this.tooltipTarget) === null || _this$tooltipTarget === void 0 || _this$tooltipTarget.removeAttribute('popovertarget');
150
+ (_this$tooltipTarget2 = this.tooltipTarget) === null || _this$tooltipTarget2 === void 0 || _this$tooltipTarget2.removeAttribute('aria-describedby');
151
+ this.tooltipInstance = undefined;
152
+ this.tooltipTarget = undefined;
153
+ }
154
+ }, {
137
155
  key: "isHTMLElement",
138
156
  value: function isHTMLElement(element) {
139
157
  if (element === null) {
@@ -203,6 +221,8 @@ export var EmojiNodeView = /*#__PURE__*/function () {
203
221
  // Pay attention, this method should be called only when the emoji provider returns
204
222
  // emoji data to prevent rendering empty emoji during loading.
205
223
  function cleanUpAndRenderCommonAttributes() {
224
+ this.destroyTooltip();
225
+
206
226
  // Clean up the DOM before rendering the new emoji
207
227
  if (this.domElement) {
208
228
  this.domElement.innerHTML = '';
@@ -212,6 +232,55 @@ export var EmojiNodeView = /*#__PURE__*/function () {
212
232
  this.domElement.removeAttribute('aria-busy');
213
233
  }
214
234
  }
235
+
236
+ /**
237
+ * Creates a VanillaTooltip on the given element showing the emoji shortName.
238
+ * Gated behind the platform_editor_emoji_hover_show_tooltip experiment.
239
+ * When the tooltip is active, the native `title` attribute is removed to avoid
240
+ * showing both the browser tooltip and the custom tooltip.
241
+ */
242
+ }, {
243
+ key: "createTooltip",
244
+ value: function createTooltip(element, shortName) {
245
+ if (!expValEquals('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true)) {
246
+ return;
247
+ }
248
+ var tooltipId = typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? "emoji-tooltip-".concat(crypto.randomUUID()) : uniqueId('emoji-tooltip-');
249
+ try {
250
+ var tooltipInstance = new VanillaTooltip(
251
+ // VanillaTooltip types expect HTMLButtonElement but works with any HTMLElement
252
+ element, shortName, tooltipId, EMOJI_TOOLTIP_CLASS,
253
+ // default timeout
254
+ 300,
255
+ // Inline styles are required because the Popover API promotes the tooltip
256
+ // to the browser's top layer, where ancestor CSS selectors cannot reach it.
257
+ {
258
+ boxSizing: 'border-box',
259
+ maxWidth: '240px',
260
+ backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
261
+ border: 'none',
262
+ borderRadius: "var(--ds-radius-small, 3px)",
263
+ color: "var(--ds-text-inverse, #FFFFFF)",
264
+ font: "var(--ds-font-body-small, normal 400 12px/16px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
265
+ fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
266
+ insetBlockStart: "var(--ds-space-0, 0px)",
267
+ insetInlineStart: "var(--ds-space-0, 0px)",
268
+ overflowWrap: 'break-word',
269
+ paddingBlockStart: "var(--ds-space-050, 4px)",
270
+ paddingBlockEnd: "var(--ds-space-050, 4px)",
271
+ paddingInlineEnd: "var(--ds-space-075, 6px)",
272
+ paddingInlineStart: "var(--ds-space-075, 6px)",
273
+ whiteSpace: 'normal'
274
+ });
275
+ this.tooltipInstance = tooltipInstance;
276
+ this.tooltipTarget = element;
277
+ element.removeAttribute('title');
278
+ } catch (error) {
279
+ element.removeAttribute('popovertarget');
280
+ element.removeAttribute('aria-describedby');
281
+ EmojiNodeView.logError(error instanceof Error ? error : new Error(String(error)));
282
+ }
283
+ }
215
284
  }, {
216
285
  key: "renderFallback",
217
286
  value: function renderFallback() {
@@ -241,6 +310,7 @@ export var EmojiNodeView = /*#__PURE__*/function () {
241
310
  fallbackElement.setAttribute('data-testid', "fallback-emoji-".concat(shortName));
242
311
  fallbackElement.setAttribute('data-emoji-type', 'fallback');
243
312
  this.dom.appendChild(fallbackElement);
313
+ this.createTooltip(fallbackElement, shortName);
244
314
  }
245
315
  }, {
246
316
  key: "renderEmoji",
@@ -268,6 +338,7 @@ export var EmojiNodeView = /*#__PURE__*/function () {
268
338
  if (EmojiNodeView.shouldRecordUnicodeEmojiExposure(description, representation)) {
269
339
  expValEquals('platform_use_unicode_emojis', 'isEnabled', true);
270
340
  }
341
+ this.createTooltip(containerElement, description.shortName);
271
342
  }
272
343
  }, {
273
344
  key: "createUnicodeEmojiElement",
package/dist/types/nodeviews/EmojiNodeView.d.ts CHANGED
@@ -18,16 +18,16 @@ interface Params {
18
18
  * isSingleEmoji('😀') // true
19
19
  */
20
20
  export declare function isSingleEmoji(fallbackText: string): boolean;
21
- /**
22
- * Emoji node view for renderering emoji nodes
23
- */
24
21
  export declare class EmojiNodeView implements NodeView {
25
22
  dom: Node;
26
23
  domElement: HTMLElement | undefined;
27
24
  private readonly node;
28
25
  private readonly intl;
29
26
  private renderingFallback;
27
+ private tooltipInstance;
28
+ private tooltipTarget;
30
29
  readonly destroy: () => void;
30
+ private destroyTooltip;
31
31
  private static logError;
32
32
  /**
33
33
  * Prosemirror node view for rendering emoji nodes. This class is responsible for
@@ -49,6 +49,13 @@ export declare class EmojiNodeView implements NodeView {
49
49
  private static isEmojiRepresentationSupported;
50
50
  private static shouldRecordUnicodeEmojiExposure;
51
51
  private cleanUpAndRenderCommonAttributes;
52
+ /**
53
+ * Creates a VanillaTooltip on the given element showing the emoji shortName.
54
+ * Gated behind the platform_editor_emoji_hover_show_tooltip experiment.
55
+ * When the tooltip is active, the native `title` attribute is removed to avoid
56
+ * showing both the browser tooltip and the custom tooltip.
57
+ */
58
+ private createTooltip;
52
59
  private renderFallback;
53
60
  private renderEmoji;
54
61
  private createUnicodeEmojiElement;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-emoji",
3
- "version": "13.0.8",
3
+ "version": "13.0.10",
4
4
  "description": "Emoji plugin for @atlaskit/editor-core",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
29
29
  "@atlaskit/editor-plugin-connectivity": "^12.0.0",
30
30
  "@atlaskit/editor-plugin-editor-viewmode": "^14.0.0",
31
31
  "@atlaskit/editor-plugin-metrics": "^13.0.0",
32
- "@atlaskit/editor-plugin-type-ahead": "^12.0.0",
32
+ "@atlaskit/editor-plugin-type-ahead": "^12.1.0",
33
33
  "@atlaskit/editor-prosemirror": "^8.0.0",
34
34
  "@atlaskit/editor-shared-styles": "^4.0.0",
35
35
  "@atlaskit/emoji": "^71.4.0",
@@ -37,15 +37,15 @@
37
37
  "@atlaskit/node-data-provider": "^13.0.0",
38
38
  "@atlaskit/platform-feature-flags": "^2.0.0",
39
39
  "@atlaskit/prosemirror-input-rules": "^4.0.0",
40
- "@atlaskit/tmp-editor-statsig": "^109.2.0",
41
- "@atlaskit/tokens": "^14.0.0",
40
+ "@atlaskit/tmp-editor-statsig": "^110.0.0",
41
+ "@atlaskit/tokens": "^15.0.0",
42
42
  "@babel/runtime": "^7.0.0",
43
43
  "@emotion/react": "^11.7.1",
44
44
  "lodash": "^4.17.21",
45
45
  "react-loadable": "^5.1.0"
46
46
  },
47
47
  "peerDependencies": {
48
- "@atlaskit/editor-common": "^116.9.0",
48
+ "@atlaskit/editor-common": "^116.11.0",
49
49
  "react": "^18.2.0",
50
50
  "react-dom": "^18.2.0",
51
51
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"