@atlaskit/editor-plugin-emoji 17.2.4 → 17.2.6

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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,30 @@
1
1
  # @atlaskit/editor-plugin-emoji
2
2
 
3
+ ## 17.2.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [`27143ffe51a5a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/27143ffe51a5a) -
8
+ `@atlaskit/editor-common/vanilla-tooltip` now exports `VANILLA_TOOLTIP_DEFAULT_CLASS`. Compose
9
+ tooltip class names from it rather than repeating the `ak-editor-vanilla-tooltip-default` literal.
10
+
11
+ Behind the `platform_editor_use_vanilla_components` experiment, `VanillaTooltip`:
12
+ - no longer throws `InvalidStateError` when shown again before its open delay has elapsed
13
+ - is `pointer-events: none`, so it cannot swallow pointer events meant for the content beneath —
14
+ pass `pointerEvents` in `styles` to opt out
15
+ - closes its popover before `destroy()` removes it from the document
16
+
17
+ Remaining changes are internal: tooltip consumers adopt the new constant, and the emoji tooltip
18
+ uses the shared class in place of an equivalent inline style object.
19
+
20
+ - Updated dependencies
21
+
22
+ ## 17.2.5
23
+
24
+ ### Patch Changes
25
+
26
+ - Updated dependencies
27
+
3
28
  ## 17.2.4
4
29
 
5
30
  ### Patch Changes
@@ -47,6 +47,19 @@ function isSingleEmoji(fallbackText) {
47
47
  * Emoji node view for renderering emoji nodes
48
48
  */
49
49
  var EMOJI_TOOLTIP_CLASS = 'emoji-tooltip-editor';
50
+
51
+ /**
52
+ * Shared default look plus our own hook, replacing the inline styles the control arm passes.
53
+ */
54
+ var EMOJI_TOOLTIP_CLASS_NAMES = "".concat(_vanillaTooltip.VANILLA_TOOLTIP_DEFAULT_CLASS, " ").concat(EMOJI_TOOLTIP_CLASS);
55
+
56
+ /**
57
+ * Control arm only — `VanillaTooltip` generates its own id when none is supplied.
58
+ * `crypto.randomUUID()` is undefined outside a secure context, hence the `uniqueId` fallback.
59
+ */
60
+ var nextFallbackTooltipId = function nextFallbackTooltipId() {
61
+ return typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? "emoji-tooltip-".concat(crypto.randomUUID()) : (0, _uniqueId.default)('emoji-tooltip-');
62
+ };
50
63
  var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
51
64
  /**
52
65
  * Prosemirror node view for rendering emoji nodes. This class is responsible for
@@ -274,33 +287,36 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
274
287
  var _this2$destroyLazyToo;
275
288
  (_this2$destroyLazyToo = _this2.destroyLazyTooltipListeners) === null || _this2$destroyLazyToo === void 0 || _this2$destroyLazyToo.call(_this2);
276
289
  _this2.destroyLazyTooltipListeners = undefined;
277
- var tooltipId = typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? "emoji-tooltip-".concat(crypto.randomUUID()) : (0, _uniqueId.default)('emoji-tooltip-');
290
+
291
+ // `undefined` lets `VanillaTooltip` generate the id.
292
+ var tooltipId = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_use_vanilla_components') ? undefined : nextFallbackTooltipId();
293
+
294
+ // Control arm only — the experiment arm gets the same declarations from
295
+ // `VANILLA_TOOLTIP_DEFAULT_CLASS`.
296
+ var tooltipStyles = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_use_vanilla_components') ? undefined : {
297
+ boxSizing: 'border-box',
298
+ maxWidth: '240px',
299
+ backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
300
+ border: 'none',
301
+ borderRadius: "var(--ds-radius-small, 3px)",
302
+ color: "var(--ds-text-inverse, #FFFFFF)",
303
+ 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)",
304
+ fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
305
+ insetBlockStart: "var(--ds-space-0, 0px)",
306
+ insetInlineStart: "var(--ds-space-0, 0px)",
307
+ overflowWrap: 'break-word',
308
+ paddingBlockStart: "var(--ds-space-050, 4px)",
309
+ paddingBlockEnd: "var(--ds-space-050, 4px)",
310
+ paddingInlineEnd: "var(--ds-space-075, 6px)",
311
+ paddingInlineStart: "var(--ds-space-075, 6px)",
312
+ whiteSpace: 'normal'
313
+ };
278
314
  try {
279
315
  // Flag-on (platform-dst-top-layer), positioning is async via a React root;
280
316
  // safe here as VanillaTooltip stays hidden until positioned.
281
- var tooltipInstance = new _vanillaTooltip.VanillaTooltip(element, shortName, tooltipId, EMOJI_TOOLTIP_CLASS,
317
+ var tooltipInstance = new _vanillaTooltip.VanillaTooltip(element, shortName, tooltipId, (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_use_vanilla_components') ? EMOJI_TOOLTIP_CLASS_NAMES : EMOJI_TOOLTIP_CLASS,
282
318
  // default timeout
283
- 300,
284
- // Inline styles are required because the Popover API promotes the tooltip
285
- // to the browser's top layer, where ancestor CSS selectors cannot reach it.
286
- {
287
- boxSizing: 'border-box',
288
- maxWidth: '240px',
289
- backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
290
- border: 'none',
291
- borderRadius: "var(--ds-radius-small, 3px)",
292
- color: "var(--ds-text-inverse, #FFFFFF)",
293
- 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)",
294
- fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
295
- insetBlockStart: "var(--ds-space-0, 0px)",
296
- insetInlineStart: "var(--ds-space-0, 0px)",
297
- overflowWrap: 'break-word',
298
- paddingBlockStart: "var(--ds-space-050, 4px)",
299
- paddingBlockEnd: "var(--ds-space-050, 4px)",
300
- paddingInlineEnd: "var(--ds-space-075, 6px)",
301
- paddingInlineStart: "var(--ds-space-075, 6px)",
302
- whiteSpace: 'normal'
303
- });
319
+ 300, tooltipStyles);
304
320
  _this2.tooltipInstance = tooltipInstance;
305
321
  _this2.tooltipTarget = element;
306
322
  element.removeAttribute('title');
@@ -6,7 +6,7 @@ import { getDocument } from '@atlaskit/browser-apis';
6
6
  import { isSSR } from '@atlaskit/editor-common/core-utils';
7
7
  import { messages, EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
8
8
  import { logException } from '@atlaskit/editor-common/monitoring';
9
- import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
9
+ import { VANILLA_TOOLTIP_DEFAULT_CLASS, VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
10
10
  import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
11
11
  import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
12
12
  import { emojiIdToEmoji } from '@atlaskit/emoji/emoji-id-to-emoji';
@@ -35,6 +35,17 @@ export function isSingleEmoji(fallbackText) {
35
35
  * Emoji node view for renderering emoji nodes
36
36
  */
37
37
  const EMOJI_TOOLTIP_CLASS = 'emoji-tooltip-editor';
38
+
39
+ /**
40
+ * Shared default look plus our own hook, replacing the inline styles the control arm passes.
41
+ */
42
+ const EMOJI_TOOLTIP_CLASS_NAMES = `${VANILLA_TOOLTIP_DEFAULT_CLASS} ${EMOJI_TOOLTIP_CLASS}`;
43
+
44
+ /**
45
+ * Control arm only — `VanillaTooltip` generates its own id when none is supplied.
46
+ * `crypto.randomUUID()` is undefined outside a secure context, hence the `uniqueId` fallback.
47
+ */
48
+ const nextFallbackTooltipId = () => typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? `emoji-tooltip-${crypto.randomUUID()}` : uniqueId('emoji-tooltip-');
38
49
  export class EmojiNodeView {
39
50
  destroyTooltip() {
40
51
  var _this$destroyLazyTool, _this$tooltipInstance;
@@ -242,33 +253,36 @@ export class EmojiNodeView {
242
253
  var _this$destroyLazyTool2;
243
254
  (_this$destroyLazyTool2 = this.destroyLazyTooltipListeners) === null || _this$destroyLazyTool2 === void 0 ? void 0 : _this$destroyLazyTool2.call(this);
244
255
  this.destroyLazyTooltipListeners = undefined;
245
- const tooltipId = typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? `emoji-tooltip-${crypto.randomUUID()}` : uniqueId('emoji-tooltip-');
256
+
257
+ // `undefined` lets `VanillaTooltip` generate the id.
258
+ const tooltipId = isExperimentEnabled('platform_editor_use_vanilla_components') ? undefined : nextFallbackTooltipId();
259
+
260
+ // Control arm only — the experiment arm gets the same declarations from
261
+ // `VANILLA_TOOLTIP_DEFAULT_CLASS`.
262
+ const tooltipStyles = isExperimentEnabled('platform_editor_use_vanilla_components') ? undefined : {
263
+ boxSizing: 'border-box',
264
+ maxWidth: '240px',
265
+ backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
266
+ border: 'none',
267
+ borderRadius: "var(--ds-radius-small, 3px)",
268
+ color: "var(--ds-text-inverse, #FFFFFF)",
269
+ 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)",
270
+ fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
271
+ insetBlockStart: "var(--ds-space-0, 0px)",
272
+ insetInlineStart: "var(--ds-space-0, 0px)",
273
+ overflowWrap: 'break-word',
274
+ paddingBlockStart: "var(--ds-space-050, 4px)",
275
+ paddingBlockEnd: "var(--ds-space-050, 4px)",
276
+ paddingInlineEnd: "var(--ds-space-075, 6px)",
277
+ paddingInlineStart: "var(--ds-space-075, 6px)",
278
+ whiteSpace: 'normal'
279
+ };
246
280
  try {
247
281
  // Flag-on (platform-dst-top-layer), positioning is async via a React root;
248
282
  // safe here as VanillaTooltip stays hidden until positioned.
249
- const tooltipInstance = new VanillaTooltip(element, shortName, tooltipId, EMOJI_TOOLTIP_CLASS,
283
+ const tooltipInstance = new VanillaTooltip(element, shortName, tooltipId, isExperimentEnabled('platform_editor_use_vanilla_components') ? EMOJI_TOOLTIP_CLASS_NAMES : EMOJI_TOOLTIP_CLASS,
250
284
  // default timeout
251
- 300,
252
- // Inline styles are required because the Popover API promotes the tooltip
253
- // to the browser's top layer, where ancestor CSS selectors cannot reach it.
254
- {
255
- boxSizing: 'border-box',
256
- maxWidth: '240px',
257
- backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
258
- border: 'none',
259
- borderRadius: "var(--ds-radius-small, 3px)",
260
- color: "var(--ds-text-inverse, #FFFFFF)",
261
- 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)",
262
- fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
263
- insetBlockStart: "var(--ds-space-0, 0px)",
264
- insetInlineStart: "var(--ds-space-0, 0px)",
265
- overflowWrap: 'break-word',
266
- paddingBlockStart: "var(--ds-space-050, 4px)",
267
- paddingBlockEnd: "var(--ds-space-050, 4px)",
268
- paddingInlineEnd: "var(--ds-space-075, 6px)",
269
- paddingInlineStart: "var(--ds-space-075, 6px)",
270
- whiteSpace: 'normal'
271
- });
285
+ 300, tooltipStyles);
272
286
  this.tooltipInstance = tooltipInstance;
273
287
  this.tooltipTarget = element;
274
288
  element.removeAttribute('title');
@@ -10,7 +10,7 @@ import { getDocument } from '@atlaskit/browser-apis';
10
10
  import { isSSR } from '@atlaskit/editor-common/core-utils';
11
11
  import { messages, EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
12
12
  import { logException } from '@atlaskit/editor-common/monitoring';
13
- import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
13
+ import { VANILLA_TOOLTIP_DEFAULT_CLASS, VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
14
14
  import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
15
15
  import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
16
16
  import { emojiIdToEmoji } from '@atlaskit/emoji/emoji-id-to-emoji';
@@ -39,6 +39,19 @@ export function isSingleEmoji(fallbackText) {
39
39
  * Emoji node view for renderering emoji nodes
40
40
  */
41
41
  var EMOJI_TOOLTIP_CLASS = 'emoji-tooltip-editor';
42
+
43
+ /**
44
+ * Shared default look plus our own hook, replacing the inline styles the control arm passes.
45
+ */
46
+ var EMOJI_TOOLTIP_CLASS_NAMES = "".concat(VANILLA_TOOLTIP_DEFAULT_CLASS, " ").concat(EMOJI_TOOLTIP_CLASS);
47
+
48
+ /**
49
+ * Control arm only — `VanillaTooltip` generates its own id when none is supplied.
50
+ * `crypto.randomUUID()` is undefined outside a secure context, hence the `uniqueId` fallback.
51
+ */
52
+ var nextFallbackTooltipId = function nextFallbackTooltipId() {
53
+ return typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? "emoji-tooltip-".concat(crypto.randomUUID()) : uniqueId('emoji-tooltip-');
54
+ };
42
55
  export var EmojiNodeView = /*#__PURE__*/function () {
43
56
  /**
44
57
  * Prosemirror node view for rendering emoji nodes. This class is responsible for
@@ -266,33 +279,36 @@ export var EmojiNodeView = /*#__PURE__*/function () {
266
279
  var _this2$destroyLazyToo;
267
280
  (_this2$destroyLazyToo = _this2.destroyLazyTooltipListeners) === null || _this2$destroyLazyToo === void 0 || _this2$destroyLazyToo.call(_this2);
268
281
  _this2.destroyLazyTooltipListeners = undefined;
269
- var tooltipId = typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? "emoji-tooltip-".concat(crypto.randomUUID()) : uniqueId('emoji-tooltip-');
282
+
283
+ // `undefined` lets `VanillaTooltip` generate the id.
284
+ var tooltipId = isExperimentEnabled('platform_editor_use_vanilla_components') ? undefined : nextFallbackTooltipId();
285
+
286
+ // Control arm only — the experiment arm gets the same declarations from
287
+ // `VANILLA_TOOLTIP_DEFAULT_CLASS`.
288
+ var tooltipStyles = isExperimentEnabled('platform_editor_use_vanilla_components') ? undefined : {
289
+ boxSizing: 'border-box',
290
+ maxWidth: '240px',
291
+ backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
292
+ border: 'none',
293
+ borderRadius: "var(--ds-radius-small, 3px)",
294
+ color: "var(--ds-text-inverse, #FFFFFF)",
295
+ 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)",
296
+ fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
297
+ insetBlockStart: "var(--ds-space-0, 0px)",
298
+ insetInlineStart: "var(--ds-space-0, 0px)",
299
+ overflowWrap: 'break-word',
300
+ paddingBlockStart: "var(--ds-space-050, 4px)",
301
+ paddingBlockEnd: "var(--ds-space-050, 4px)",
302
+ paddingInlineEnd: "var(--ds-space-075, 6px)",
303
+ paddingInlineStart: "var(--ds-space-075, 6px)",
304
+ whiteSpace: 'normal'
305
+ };
270
306
  try {
271
307
  // Flag-on (platform-dst-top-layer), positioning is async via a React root;
272
308
  // safe here as VanillaTooltip stays hidden until positioned.
273
- var tooltipInstance = new VanillaTooltip(element, shortName, tooltipId, EMOJI_TOOLTIP_CLASS,
309
+ var tooltipInstance = new VanillaTooltip(element, shortName, tooltipId, isExperimentEnabled('platform_editor_use_vanilla_components') ? EMOJI_TOOLTIP_CLASS_NAMES : EMOJI_TOOLTIP_CLASS,
274
310
  // default timeout
275
- 300,
276
- // Inline styles are required because the Popover API promotes the tooltip
277
- // to the browser's top layer, where ancestor CSS selectors cannot reach it.
278
- {
279
- boxSizing: 'border-box',
280
- maxWidth: '240px',
281
- backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
282
- border: 'none',
283
- borderRadius: "var(--ds-radius-small, 3px)",
284
- color: "var(--ds-text-inverse, #FFFFFF)",
285
- 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)",
286
- fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
287
- insetBlockStart: "var(--ds-space-0, 0px)",
288
- insetInlineStart: "var(--ds-space-0, 0px)",
289
- overflowWrap: 'break-word',
290
- paddingBlockStart: "var(--ds-space-050, 4px)",
291
- paddingBlockEnd: "var(--ds-space-050, 4px)",
292
- paddingInlineEnd: "var(--ds-space-075, 6px)",
293
- paddingInlineStart: "var(--ds-space-075, 6px)",
294
- whiteSpace: 'normal'
295
- });
311
+ 300, tooltipStyles);
296
312
  _this2.tooltipInstance = tooltipInstance;
297
313
  _this2.tooltipTarget = element;
298
314
  element.removeAttribute('title');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-emoji",
3
- "version": "17.2.4",
3
+ "version": "17.2.6",
4
4
  "description": "Emoji plugin for @atlaskit/editor-core",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -21,7 +21,7 @@
21
21
  "singleton": true
22
22
  },
23
23
  "dependencies": {
24
- "@atlaskit/adf-schema": "^57.2.0",
24
+ "@atlaskit/adf-schema": "^57.3.0",
25
25
  "@atlaskit/browser-apis": "^1.2.0",
26
26
  "@atlaskit/editor-json-transformer": "^9.8.0",
27
27
  "@atlaskit/editor-plugin-analytics": "^16.1.0",
@@ -41,7 +41,7 @@
41
41
  "@atlaskit/platform-feature-experiments": "^0.3.0",
42
42
  "@atlaskit/platform-feature-flags": "^2.2.0",
43
43
  "@atlaskit/prosemirror-input-rules": "^4.1.0",
44
- "@atlaskit/tmp-editor-statsig": "^173.0.0",
44
+ "@atlaskit/tmp-editor-statsig": "^174.0.0",
45
45
  "@atlaskit/tokens": "^16.11.0",
46
46
  "@babel/runtime": "^7.0.0",
47
47
  "@emotion/react": "^11.7.1",
@@ -50,7 +50,7 @@
50
50
  "react-loadable": "^5.1.0"
51
51
  },
52
52
  "peerDependencies": {
53
- "@atlaskit/editor-common": "^120.11.0",
53
+ "@atlaskit/editor-common": "^120.15.0",
54
54
  "react": "^18.2.0 || ^19.2.0",
55
55
  "react-dom": "^18.2.0 || ^19.2.0",
56
56
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"