@atlaskit/editor-plugin-emoji 13.0.29 → 13.1.1
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,22 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-emoji
|
|
2
2
|
|
|
3
|
+
## 13.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 13.1.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [`607477c5d6aae`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/607477c5d6aae) -
|
|
14
|
+
EDITOR-7032 Remove the implementation of using VanillaTooltip for emoji tooltips
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- Updated dependencies
|
|
19
|
+
|
|
3
20
|
## 13.0.29
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -12,12 +12,10 @@ 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"));
|
|
16
15
|
var _browserApis = require("@atlaskit/browser-apis");
|
|
17
16
|
var _coreUtils = require("@atlaskit/editor-common/core-utils");
|
|
18
17
|
var _emoji = require("@atlaskit/editor-common/emoji");
|
|
19
18
|
var _monitoring = require("@atlaskit/editor-common/monitoring");
|
|
20
|
-
var _vanillaTooltip = require("@atlaskit/editor-common/vanilla-tooltip");
|
|
21
19
|
var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
|
|
22
20
|
var _model = require("@atlaskit/editor-prosemirror/model");
|
|
23
21
|
var _emojiIdToEmoji = require("@atlaskit/emoji/emoji-id-to-emoji");
|
|
@@ -45,7 +43,6 @@ function isSingleEmoji(fallbackText) {
|
|
|
45
43
|
/**
|
|
46
44
|
* Emoji node view for renderering emoji nodes
|
|
47
45
|
*/
|
|
48
|
-
var EMOJI_TOOLTIP_CLASS = 'emoji-tooltip-editor';
|
|
49
46
|
var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
|
|
50
47
|
/**
|
|
51
48
|
* Prosemirror node view for rendering emoji nodes. This class is responsible for
|
|
@@ -67,11 +64,7 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
|
|
|
67
64
|
emojiNodeDataProvider = _ref.emojiNodeDataProvider;
|
|
68
65
|
(0, _classCallCheck2.default)(this, EmojiNodeView);
|
|
69
66
|
(0, _defineProperty2.default)(this, "renderingFallback", false);
|
|
70
|
-
(0, _defineProperty2.default)(this, "destroy", function () {
|
|
71
|
-
if ((_this.tooltipInstance || _this.tooltipTarget) && (0, _expValEquals.expValEquals)('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true)) {
|
|
72
|
-
_this.destroyTooltip();
|
|
73
|
-
}
|
|
74
|
-
});
|
|
67
|
+
(0, _defineProperty2.default)(this, "destroy", function () {});
|
|
75
68
|
this.node = node;
|
|
76
69
|
this.intl = intl;
|
|
77
70
|
var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, (0, _emojiNodeSpec.emojiToDom)(this.node)),
|
|
@@ -145,23 +138,12 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
|
|
|
145
138
|
this.destroy = function () {
|
|
146
139
|
unsubscribe();
|
|
147
140
|
subscribeToConnection === null || subscribeToConnection === void 0 || subscribeToConnection();
|
|
148
|
-
_this.destroyTooltip();
|
|
149
141
|
};
|
|
150
142
|
}
|
|
151
143
|
}
|
|
152
144
|
|
|
153
145
|
/** Type guard to check if a Node is an HTMLElement in a safe way. */
|
|
154
146
|
return (0, _createClass2.default)(EmojiNodeView, [{
|
|
155
|
-
key: "destroyTooltip",
|
|
156
|
-
value: function destroyTooltip() {
|
|
157
|
-
var _this$tooltipInstance, _this$tooltipTarget, _this$tooltipTarget2;
|
|
158
|
-
(_this$tooltipInstance = this.tooltipInstance) === null || _this$tooltipInstance === void 0 || _this$tooltipInstance.destroy();
|
|
159
|
-
(_this$tooltipTarget = this.tooltipTarget) === null || _this$tooltipTarget === void 0 || _this$tooltipTarget.removeAttribute('popovertarget');
|
|
160
|
-
(_this$tooltipTarget2 = this.tooltipTarget) === null || _this$tooltipTarget2 === void 0 || _this$tooltipTarget2.removeAttribute('aria-describedby');
|
|
161
|
-
this.tooltipInstance = undefined;
|
|
162
|
-
this.tooltipTarget = undefined;
|
|
163
|
-
}
|
|
164
|
-
}, {
|
|
165
147
|
key: "isHTMLElement",
|
|
166
148
|
value: function isHTMLElement(element) {
|
|
167
149
|
if (element === null) {
|
|
@@ -234,8 +216,6 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
|
|
|
234
216
|
// Pay attention, this method should be called only when the emoji provider returns
|
|
235
217
|
// emoji data to prevent rendering empty emoji during loading.
|
|
236
218
|
function cleanUpAndRenderCommonAttributes() {
|
|
237
|
-
this.destroyTooltip();
|
|
238
|
-
|
|
239
219
|
// Clean up the DOM before rendering the new emoji
|
|
240
220
|
if (this.domElement) {
|
|
241
221
|
this.domElement.innerHTML = '';
|
|
@@ -245,58 +225,6 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
|
|
|
245
225
|
this.domElement.removeAttribute('aria-busy');
|
|
246
226
|
}
|
|
247
227
|
}
|
|
248
|
-
|
|
249
|
-
/**
|
|
250
|
-
* Creates a VanillaTooltip on the given element showing the emoji shortName.
|
|
251
|
-
* Gated behind the platform_editor_emoji_hover_show_tooltip experiment.
|
|
252
|
-
* When the tooltip is active, the native `title` attribute is removed to avoid
|
|
253
|
-
* showing both the browser tooltip and the custom tooltip.
|
|
254
|
-
*/
|
|
255
|
-
}, {
|
|
256
|
-
key: "createTooltip",
|
|
257
|
-
value: function createTooltip(element, shortName) {
|
|
258
|
-
if (!(0, _expValEquals.expValEquals)('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true)) {
|
|
259
|
-
return;
|
|
260
|
-
}
|
|
261
|
-
if ((0, _coreUtils.isSSR)()) {
|
|
262
|
-
return;
|
|
263
|
-
}
|
|
264
|
-
var tooltipId = typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? "emoji-tooltip-".concat(crypto.randomUUID()) : (0, _uniqueId.default)('emoji-tooltip-');
|
|
265
|
-
try {
|
|
266
|
-
var tooltipInstance = new _vanillaTooltip.VanillaTooltip(
|
|
267
|
-
// VanillaTooltip types expect HTMLButtonElement but works with any HTMLElement
|
|
268
|
-
element, shortName, tooltipId, EMOJI_TOOLTIP_CLASS,
|
|
269
|
-
// default timeout
|
|
270
|
-
300,
|
|
271
|
-
// Inline styles are required because the Popover API promotes the tooltip
|
|
272
|
-
// to the browser's top layer, where ancestor CSS selectors cannot reach it.
|
|
273
|
-
{
|
|
274
|
-
boxSizing: 'border-box',
|
|
275
|
-
maxWidth: '240px',
|
|
276
|
-
backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
|
|
277
|
-
border: 'none',
|
|
278
|
-
borderRadius: "var(--ds-radius-small, 3px)",
|
|
279
|
-
color: "var(--ds-text-inverse, #FFFFFF)",
|
|
280
|
-
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)",
|
|
281
|
-
fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
282
|
-
insetBlockStart: "var(--ds-space-0, 0px)",
|
|
283
|
-
insetInlineStart: "var(--ds-space-0, 0px)",
|
|
284
|
-
overflowWrap: 'break-word',
|
|
285
|
-
paddingBlockStart: "var(--ds-space-050, 4px)",
|
|
286
|
-
paddingBlockEnd: "var(--ds-space-050, 4px)",
|
|
287
|
-
paddingInlineEnd: "var(--ds-space-075, 6px)",
|
|
288
|
-
paddingInlineStart: "var(--ds-space-075, 6px)",
|
|
289
|
-
whiteSpace: 'normal'
|
|
290
|
-
});
|
|
291
|
-
this.tooltipInstance = tooltipInstance;
|
|
292
|
-
this.tooltipTarget = element;
|
|
293
|
-
element.removeAttribute('title');
|
|
294
|
-
} catch (error) {
|
|
295
|
-
element.removeAttribute('popovertarget');
|
|
296
|
-
element.removeAttribute('aria-describedby');
|
|
297
|
-
EmojiNodeView.logError(error instanceof Error ? error : new Error(String(error)));
|
|
298
|
-
}
|
|
299
|
-
}
|
|
300
228
|
}, {
|
|
301
229
|
key: "renderFallback",
|
|
302
230
|
value: function renderFallback() {
|
|
@@ -326,7 +254,6 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
|
|
|
326
254
|
fallbackElement.setAttribute('data-testid', "fallback-emoji-".concat(shortName));
|
|
327
255
|
fallbackElement.setAttribute('data-emoji-type', 'fallback');
|
|
328
256
|
this.dom.appendChild(fallbackElement);
|
|
329
|
-
this.createTooltip(fallbackElement, shortName);
|
|
330
257
|
}
|
|
331
258
|
}, {
|
|
332
259
|
key: "renderEmoji",
|
|
@@ -354,7 +281,6 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
|
|
|
354
281
|
if (EmojiNodeView.shouldRecordUnicodeEmojiExposure(description, representation)) {
|
|
355
282
|
(0, _expValEquals.expValEquals)('platform_use_unicode_emojis', 'isEnabled', true);
|
|
356
283
|
}
|
|
357
|
-
this.createTooltip(containerElement, description.shortName);
|
|
358
284
|
}
|
|
359
285
|
}, {
|
|
360
286
|
key: "createUnicodeEmojiElement",
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
import isEqual from 'lodash/isEqual';
|
|
3
|
-
import uniqueId from 'lodash/uniqueId';
|
|
4
3
|
import { getDocument } from '@atlaskit/browser-apis';
|
|
5
4
|
import { isSSR } from '@atlaskit/editor-common/core-utils';
|
|
6
5
|
import { messages, EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
|
|
7
6
|
import { logException } from '@atlaskit/editor-common/monitoring';
|
|
8
|
-
import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
|
|
9
7
|
import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
|
|
10
8
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
11
9
|
import { emojiIdToEmoji } from '@atlaskit/emoji/emoji-id-to-emoji';
|
|
@@ -33,16 +31,7 @@ export function isSingleEmoji(fallbackText) {
|
|
|
33
31
|
/**
|
|
34
32
|
* Emoji node view for renderering emoji nodes
|
|
35
33
|
*/
|
|
36
|
-
const EMOJI_TOOLTIP_CLASS = 'emoji-tooltip-editor';
|
|
37
34
|
export class EmojiNodeView {
|
|
38
|
-
destroyTooltip() {
|
|
39
|
-
var _this$tooltipInstance, _this$tooltipTarget, _this$tooltipTarget2;
|
|
40
|
-
(_this$tooltipInstance = this.tooltipInstance) === null || _this$tooltipInstance === void 0 ? void 0 : _this$tooltipInstance.destroy();
|
|
41
|
-
(_this$tooltipTarget = this.tooltipTarget) === null || _this$tooltipTarget === void 0 ? void 0 : _this$tooltipTarget.removeAttribute('popovertarget');
|
|
42
|
-
(_this$tooltipTarget2 = this.tooltipTarget) === null || _this$tooltipTarget2 === void 0 ? void 0 : _this$tooltipTarget2.removeAttribute('aria-describedby');
|
|
43
|
-
this.tooltipInstance = undefined;
|
|
44
|
-
this.tooltipTarget = undefined;
|
|
45
|
-
}
|
|
46
35
|
static logError(error) {
|
|
47
36
|
void logException(error, {
|
|
48
37
|
location: 'editor-plugin-emoji/EmojiNodeView'
|
|
@@ -68,11 +57,7 @@ export class EmojiNodeView {
|
|
|
68
57
|
emojiNodeDataProvider
|
|
69
58
|
}) {
|
|
70
59
|
_defineProperty(this, "renderingFallback", false);
|
|
71
|
-
_defineProperty(this, "destroy", () => {
|
|
72
|
-
if ((this.tooltipInstance || this.tooltipTarget) && expValEquals('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true)) {
|
|
73
|
-
this.destroyTooltip();
|
|
74
|
-
}
|
|
75
|
-
});
|
|
60
|
+
_defineProperty(this, "destroy", () => {});
|
|
76
61
|
this.node = node;
|
|
77
62
|
this.intl = intl;
|
|
78
63
|
const {
|
|
@@ -149,7 +134,6 @@ export class EmojiNodeView {
|
|
|
149
134
|
this.destroy = () => {
|
|
150
135
|
unsubscribe();
|
|
151
136
|
subscribeToConnection === null || subscribeToConnection === void 0 ? void 0 : subscribeToConnection();
|
|
152
|
-
this.destroyTooltip();
|
|
153
137
|
};
|
|
154
138
|
}
|
|
155
139
|
}
|
|
@@ -205,8 +189,6 @@ export class EmojiNodeView {
|
|
|
205
189
|
// Pay attention, this method should be called only when the emoji provider returns
|
|
206
190
|
// emoji data to prevent rendering empty emoji during loading.
|
|
207
191
|
cleanUpAndRenderCommonAttributes() {
|
|
208
|
-
this.destroyTooltip();
|
|
209
|
-
|
|
210
192
|
// Clean up the DOM before rendering the new emoji
|
|
211
193
|
if (this.domElement) {
|
|
212
194
|
this.domElement.innerHTML = '';
|
|
@@ -216,56 +198,6 @@ export class EmojiNodeView {
|
|
|
216
198
|
this.domElement.removeAttribute('aria-busy');
|
|
217
199
|
}
|
|
218
200
|
}
|
|
219
|
-
|
|
220
|
-
/**
|
|
221
|
-
* Creates a VanillaTooltip on the given element showing the emoji shortName.
|
|
222
|
-
* Gated behind the platform_editor_emoji_hover_show_tooltip experiment.
|
|
223
|
-
* When the tooltip is active, the native `title` attribute is removed to avoid
|
|
224
|
-
* showing both the browser tooltip and the custom tooltip.
|
|
225
|
-
*/
|
|
226
|
-
createTooltip(element, shortName) {
|
|
227
|
-
if (!expValEquals('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true)) {
|
|
228
|
-
return;
|
|
229
|
-
}
|
|
230
|
-
if (isSSR()) {
|
|
231
|
-
return;
|
|
232
|
-
}
|
|
233
|
-
const tooltipId = typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? `emoji-tooltip-${crypto.randomUUID()}` : uniqueId('emoji-tooltip-');
|
|
234
|
-
try {
|
|
235
|
-
const tooltipInstance = new VanillaTooltip(
|
|
236
|
-
// VanillaTooltip types expect HTMLButtonElement but works with any HTMLElement
|
|
237
|
-
element, shortName, tooltipId, EMOJI_TOOLTIP_CLASS,
|
|
238
|
-
// default timeout
|
|
239
|
-
300,
|
|
240
|
-
// Inline styles are required because the Popover API promotes the tooltip
|
|
241
|
-
// to the browser's top layer, where ancestor CSS selectors cannot reach it.
|
|
242
|
-
{
|
|
243
|
-
boxSizing: 'border-box',
|
|
244
|
-
maxWidth: '240px',
|
|
245
|
-
backgroundColor: "var(--ds-background-neutral-bold, #292A2E)",
|
|
246
|
-
border: 'none',
|
|
247
|
-
borderRadius: "var(--ds-radius-small, 3px)",
|
|
248
|
-
color: "var(--ds-text-inverse, #FFFFFF)",
|
|
249
|
-
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)",
|
|
250
|
-
fontFamily: "var(--ds-font-family-body, \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
|
|
251
|
-
insetBlockStart: "var(--ds-space-0, 0px)",
|
|
252
|
-
insetInlineStart: "var(--ds-space-0, 0px)",
|
|
253
|
-
overflowWrap: 'break-word',
|
|
254
|
-
paddingBlockStart: "var(--ds-space-050, 4px)",
|
|
255
|
-
paddingBlockEnd: "var(--ds-space-050, 4px)",
|
|
256
|
-
paddingInlineEnd: "var(--ds-space-075, 6px)",
|
|
257
|
-
paddingInlineStart: "var(--ds-space-075, 6px)",
|
|
258
|
-
whiteSpace: 'normal'
|
|
259
|
-
});
|
|
260
|
-
this.tooltipInstance = tooltipInstance;
|
|
261
|
-
this.tooltipTarget = element;
|
|
262
|
-
element.removeAttribute('title');
|
|
263
|
-
} catch (error) {
|
|
264
|
-
element.removeAttribute('popovertarget');
|
|
265
|
-
element.removeAttribute('aria-describedby');
|
|
266
|
-
EmojiNodeView.logError(error instanceof Error ? error : new Error(String(error)));
|
|
267
|
-
}
|
|
268
|
-
}
|
|
269
201
|
renderFallback() {
|
|
270
202
|
this.renderingFallback = true;
|
|
271
203
|
this.cleanUpAndRenderCommonAttributes();
|
|
@@ -294,7 +226,6 @@ export class EmojiNodeView {
|
|
|
294
226
|
fallbackElement.setAttribute('data-testid', `fallback-emoji-${shortName}`);
|
|
295
227
|
fallbackElement.setAttribute('data-emoji-type', 'fallback');
|
|
296
228
|
this.dom.appendChild(fallbackElement);
|
|
297
|
-
this.createTooltip(fallbackElement, shortName);
|
|
298
229
|
}
|
|
299
230
|
renderEmoji(description, representation) {
|
|
300
231
|
this.renderingFallback = false;
|
|
@@ -320,7 +251,6 @@ export class EmojiNodeView {
|
|
|
320
251
|
if (EmojiNodeView.shouldRecordUnicodeEmojiExposure(description, representation)) {
|
|
321
252
|
expValEquals('platform_use_unicode_emojis', 'isEnabled', true);
|
|
322
253
|
}
|
|
323
|
-
this.createTooltip(containerElement, description.shortName);
|
|
324
254
|
}
|
|
325
255
|
createUnicodeEmojiElement(emoji) {
|
|
326
256
|
let doc = getDocument();
|
|
@@ -4,12 +4,10 @@ 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';
|
|
8
7
|
import { getDocument } from '@atlaskit/browser-apis';
|
|
9
8
|
import { isSSR } from '@atlaskit/editor-common/core-utils';
|
|
10
9
|
import { messages, EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
|
|
11
10
|
import { logException } from '@atlaskit/editor-common/monitoring';
|
|
12
|
-
import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
|
|
13
11
|
import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
|
|
14
12
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
15
13
|
import { emojiIdToEmoji } from '@atlaskit/emoji/emoji-id-to-emoji';
|
|
@@ -37,7 +35,6 @@ export function isSingleEmoji(fallbackText) {
|
|
|
37
35
|
/**
|
|
38
36
|
* Emoji node view for renderering emoji nodes
|
|
39
37
|
*/
|
|
40
|
-
var EMOJI_TOOLTIP_CLASS = 'emoji-tooltip-editor';
|
|
41
38
|
export var EmojiNodeView = /*#__PURE__*/function () {
|
|
42
39
|
/**
|
|
43
40
|
* Prosemirror node view for rendering emoji nodes. This class is responsible for
|
|
@@ -59,11 +56,7 @@ export var EmojiNodeView = /*#__PURE__*/function () {
|
|
|
59
56
|
emojiNodeDataProvider = _ref.emojiNodeDataProvider;
|
|
60
57
|
_classCallCheck(this, EmojiNodeView);
|
|
61
58
|
_defineProperty(this, "renderingFallback", false);
|
|
62
|
-
_defineProperty(this, "destroy", function () {
|
|
63
|
-
if ((_this.tooltipInstance || _this.tooltipTarget) && expValEquals('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true)) {
|
|
64
|
-
_this.destroyTooltip();
|
|
65
|
-
}
|
|
66
|
-
});
|
|
59
|
+
_defineProperty(this, "destroy", function () {});
|
|
67
60
|
this.node = node;
|
|
68
61
|
this.intl = intl;
|
|
69
62
|
var _DOMSerializer$render = DOMSerializer.renderSpec(document, emojiToDom(this.node)),
|
|
@@ -137,23 +130,12 @@ export var EmojiNodeView = /*#__PURE__*/function () {
|
|
|
137
130
|
this.destroy = function () {
|
|
138
131
|
unsubscribe();
|
|
139
132
|
subscribeToConnection === null || subscribeToConnection === void 0 || subscribeToConnection();
|
|
140
|
-
_this.destroyTooltip();
|
|
141
133
|
};
|
|
142
134
|
}
|
|
143
135
|
}
|
|
144
136
|
|
|
145
137
|
/** Type guard to check if a Node is an HTMLElement in a safe way. */
|
|
146
138
|
return _createClass(EmojiNodeView, [{
|
|
147
|
-
key: "destroyTooltip",
|
|
148
|
-
value: function destroyTooltip() {
|
|
149
|
-
var _this$tooltipInstance, _this$tooltipTarget, _this$tooltipTarget2;
|
|
150
|
-
(_this$tooltipInstance = this.tooltipInstance) === null || _this$tooltipInstance === void 0 || _this$tooltipInstance.destroy();
|
|
151
|
-
(_this$tooltipTarget = this.tooltipTarget) === null || _this$tooltipTarget === void 0 || _this$tooltipTarget.removeAttribute('popovertarget');
|
|
152
|
-
(_this$tooltipTarget2 = this.tooltipTarget) === null || _this$tooltipTarget2 === void 0 || _this$tooltipTarget2.removeAttribute('aria-describedby');
|
|
153
|
-
this.tooltipInstance = undefined;
|
|
154
|
-
this.tooltipTarget = undefined;
|
|
155
|
-
}
|
|
156
|
-
}, {
|
|
157
139
|
key: "isHTMLElement",
|
|
158
140
|
value: function isHTMLElement(element) {
|
|
159
141
|
if (element === null) {
|
|
@@ -226,8 +208,6 @@ export var EmojiNodeView = /*#__PURE__*/function () {
|
|
|
226
208
|
// Pay attention, this method should be called only when the emoji provider returns
|
|
227
209
|
// emoji data to prevent rendering empty emoji during loading.
|
|
228
210
|
function cleanUpAndRenderCommonAttributes() {
|
|
229
|
-
this.destroyTooltip();
|
|
230
|
-
|
|
231
211
|
// Clean up the DOM before rendering the new emoji
|
|
232
212
|
if (this.domElement) {
|
|
233
213
|
this.domElement.innerHTML = '';
|
|
@@ -237,58 +217,6 @@ export var EmojiNodeView = /*#__PURE__*/function () {
|
|
|
237
217
|
this.domElement.removeAttribute('aria-busy');
|
|
238
218
|
}
|
|
239
219
|
}
|
|
240
|
-
|
|
241
|
-
/**
|
|
242
|
-
* Creates a VanillaTooltip on the given element showing the emoji shortName.
|
|
243
|
-
* Gated behind the platform_editor_emoji_hover_show_tooltip experiment.
|
|
244
|
-
* When the tooltip is active, the native `title` attribute is removed to avoid
|
|
245
|
-
* showing both the browser tooltip and the custom tooltip.
|
|
246
|
-
*/
|
|
247
|
-
}, {
|
|
248
|
-
key: "createTooltip",
|
|
249
|
-
value: function createTooltip(element, shortName) {
|
|
250
|
-
if (!expValEquals('platform_editor_emoji_hover_show_tooltip', 'isEnabled', true)) {
|
|
251
|
-
return;
|
|
252
|
-
}
|
|
253
|
-
if (isSSR()) {
|
|
254
|
-
return;
|
|
255
|
-
}
|
|
256
|
-
var tooltipId = typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function' ? "emoji-tooltip-".concat(crypto.randomUUID()) : uniqueId('emoji-tooltip-');
|
|
257
|
-
try {
|
|
258
|
-
var tooltipInstance = new 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
|
-
}
|
|
292
220
|
}, {
|
|
293
221
|
key: "renderFallback",
|
|
294
222
|
value: function renderFallback() {
|
|
@@ -318,7 +246,6 @@ export var EmojiNodeView = /*#__PURE__*/function () {
|
|
|
318
246
|
fallbackElement.setAttribute('data-testid', "fallback-emoji-".concat(shortName));
|
|
319
247
|
fallbackElement.setAttribute('data-emoji-type', 'fallback');
|
|
320
248
|
this.dom.appendChild(fallbackElement);
|
|
321
|
-
this.createTooltip(fallbackElement, shortName);
|
|
322
249
|
}
|
|
323
250
|
}, {
|
|
324
251
|
key: "renderEmoji",
|
|
@@ -346,7 +273,6 @@ export var EmojiNodeView = /*#__PURE__*/function () {
|
|
|
346
273
|
if (EmojiNodeView.shouldRecordUnicodeEmojiExposure(description, representation)) {
|
|
347
274
|
expValEquals('platform_use_unicode_emojis', 'isEnabled', true);
|
|
348
275
|
}
|
|
349
|
-
this.createTooltip(containerElement, description.shortName);
|
|
350
276
|
}
|
|
351
277
|
}, {
|
|
352
278
|
key: "createUnicodeEmojiElement",
|
|
@@ -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
|
+
*/
|
|
21
24
|
export declare class EmojiNodeView implements NodeView {
|
|
22
25
|
dom: Node;
|
|
23
26
|
domElement: HTMLElement | undefined;
|
|
24
27
|
private readonly node;
|
|
25
28
|
private readonly intl;
|
|
26
29
|
private renderingFallback;
|
|
27
|
-
private tooltipInstance;
|
|
28
|
-
private tooltipTarget;
|
|
29
30
|
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,13 +49,6 @@ 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;
|
|
59
52
|
private renderFallback;
|
|
60
53
|
private renderEmoji;
|
|
61
54
|
private createUnicodeEmojiElement;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-emoji",
|
|
3
|
-
"version": "13.
|
|
3
|
+
"version": "13.1.1",
|
|
4
4
|
"description": "Emoji plugin for @atlaskit/editor-core",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -32,20 +32,20 @@
|
|
|
32
32
|
"@atlaskit/editor-plugin-type-ahead": "^13.0.0",
|
|
33
33
|
"@atlaskit/editor-prosemirror": "^8.0.0",
|
|
34
34
|
"@atlaskit/editor-shared-styles": "^4.0.0",
|
|
35
|
-
"@atlaskit/emoji": "^71.
|
|
35
|
+
"@atlaskit/emoji": "^71.9.0",
|
|
36
36
|
"@atlaskit/icon": "^37.0.0",
|
|
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": "^
|
|
41
|
-
"@atlaskit/tokens": "^15.
|
|
40
|
+
"@atlaskit/tmp-editor-statsig": "^125.0.0",
|
|
41
|
+
"@atlaskit/tokens": "^15.8.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.
|
|
48
|
+
"@atlaskit/editor-common": "^116.30.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"
|