@atlaskit/editor-plugin-emoji 13.0.14 → 13.0.15

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 (5) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/nodeviews/EmojiNodeView.js +16 -11
  3. package/dist/es2019/nodeviews/EmojiNodeView.js +15 -10
  4. package/dist/esm/nodeviews/EmojiNodeView.js +16 -11
  5. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-emoji
2
2
 
3
+ ## 13.0.15
4
+
5
+ ### Patch Changes
6
+
7
+ - [`6563ceb049527`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6563ceb049527) -
8
+ Add selected-state styling for unicode emoji in the editor.
9
+ - Updated dependencies
10
+
3
11
  ## 13.0.14
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/nodeviews/EmojiNodeView.js CHANGED
@@ -20,8 +20,10 @@ var _monitoring = require("@atlaskit/editor-common/monitoring");
20
20
  var _vanillaTooltip = require("@atlaskit/editor-common/vanilla-tooltip");
21
21
  var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
22
22
  var _model = require("@atlaskit/editor-prosemirror/model");
23
+ var _emojiIdToEmoji = require("@atlaskit/emoji/emoji-id-to-emoji");
23
24
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
24
25
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
26
+ var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
25
27
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
26
28
  var _emojiNodeSpec = require("./emojiNodeSpec");
27
29
  /**
@@ -173,7 +175,7 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
173
175
  key: "updateDom",
174
176
  value: function () {
175
177
  var _updateDom = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(emojiProvider) {
176
- var _this$node$attrs, shortName, id, fallback, emojiDescription, emojiRepresentation, _t;
178
+ var _this$node$attrs, shortName, id, fallback, emojiDescription, unicodeEmoji, emojiRepresentation, _t;
177
179
  return _regenerator.default.wrap(function (_context) {
178
180
  while (1) switch (_context.prev = _context.next) {
179
181
  case 0:
@@ -195,7 +197,10 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
195
197
  this.renderFallback();
196
198
  return _context.abrupt("return");
197
199
  case 2:
198
- emojiRepresentation = emojiDescription === null || emojiDescription === void 0 ? void 0 : emojiDescription.representation;
200
+ unicodeEmoji = id && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_use_unicode_emojis', 'isEnabled', true) ? (0, _emojiIdToEmoji.emojiIdToEmoji)(id) : undefined;
201
+ emojiRepresentation = unicodeEmoji ? {
202
+ unicodeEmoji: unicodeEmoji
203
+ } : emojiDescription === null || emojiDescription === void 0 ? void 0 : emojiDescription.representation;
199
204
  if (EmojiNodeView.isEmojiRepresentationSupported(emojiRepresentation)) {
200
205
  _context.next = 3;
201
206
  break;
@@ -357,16 +362,16 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
357
362
  doc = document;
358
363
  }
359
364
  var spanElement = doc.createElement('span');
360
- spanElement.classList.add(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE);
361
- spanElement.style.textAlign = 'center';
362
- spanElement.style.alignContent = 'center';
365
+ spanElement.classList.add(_emoji.EmojiSharedCssClassName.EMOJI_UNICODE);
363
366
  spanElement.textContent = emoji;
364
- spanElement.style.fontSize = "max(1em, ".concat(_emoji.defaultEmojiHeight, "px)");
365
- spanElement.style.width = "max(calc(1em + 2px), ".concat(_emoji.defaultEmojiHeight + 2, "px)");
366
- spanElement.style.height = "max(calc(1em + 2px), ".concat(_emoji.defaultEmojiHeight + 2, "px)");
367
- spanElement.style.lineHeight = '0';
368
- spanElement.style.margin = '0';
369
- spanElement.style.padding = '0';
367
+ spanElement.style.display = 'inline-flex';
368
+ spanElement.style.fontSize = "var(--emoji-common-unicode-size, ".concat(_emoji.defaultEmojiHeight, "px)");
369
+ spanElement.style.alignItems = 'center';
370
+ spanElement.style.aspectRatio = '1/1';
371
+ spanElement.style.lineHeight = '1em';
372
+ spanElement.style.margin = '-1px 0';
373
+ spanElement.style.verticalAlign = 'middle'; // to keep vertical alignment consistent with images
374
+
370
375
  return spanElement;
371
376
  }
372
377
  }, {
package/dist/es2019/nodeviews/EmojiNodeView.js CHANGED
@@ -8,8 +8,10 @@ import { logException } from '@atlaskit/editor-common/monitoring';
8
8
  import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
9
9
  import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
10
10
  import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
11
+ import { emojiIdToEmoji } from '@atlaskit/emoji/emoji-id-to-emoji';
11
12
  import { fg } from '@atlaskit/platform-feature-flags';
12
13
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
14
+ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
13
15
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
14
16
  import { emojiToDom } from './emojiNodeSpec';
15
17
  /**
@@ -178,7 +180,10 @@ export class EmojiNodeView {
178
180
  this.renderFallback();
179
181
  return;
180
182
  }
181
- const emojiRepresentation = emojiDescription === null || emojiDescription === void 0 ? void 0 : emojiDescription.representation;
183
+ const unicodeEmoji = id && expValEqualsNoExposure('platform_use_unicode_emojis', 'isEnabled', true) ? emojiIdToEmoji(id) : undefined;
184
+ const emojiRepresentation = unicodeEmoji ? {
185
+ unicodeEmoji
186
+ } : emojiDescription === null || emojiDescription === void 0 ? void 0 : emojiDescription.representation;
182
187
  if (!EmojiNodeView.isEmojiRepresentationSupported(emojiRepresentation)) {
183
188
  EmojiNodeView.logError(new Error('Emoji representation is not supported'));
184
189
  this.renderFallback();
@@ -321,16 +326,16 @@ export class EmojiNodeView {
321
326
  doc = document;
322
327
  }
323
328
  const spanElement = doc.createElement('span');
324
- spanElement.classList.add(EmojiSharedCssClassName.EMOJI_IMAGE);
325
- spanElement.style.textAlign = 'center';
326
- spanElement.style.alignContent = 'center';
329
+ spanElement.classList.add(EmojiSharedCssClassName.EMOJI_UNICODE);
327
330
  spanElement.textContent = emoji;
328
- spanElement.style.fontSize = `max(1em, ${defaultEmojiHeight}px)`;
329
- spanElement.style.width = `max(calc(1em + 2px), ${defaultEmojiHeight + 2}px)`;
330
- spanElement.style.height = `max(calc(1em + 2px), ${defaultEmojiHeight + 2}px)`;
331
- spanElement.style.lineHeight = '0';
332
- spanElement.style.margin = '0';
333
- spanElement.style.padding = '0';
331
+ spanElement.style.display = 'inline-flex';
332
+ spanElement.style.fontSize = `var(--emoji-common-unicode-size, ${defaultEmojiHeight}px)`;
333
+ spanElement.style.alignItems = 'center';
334
+ spanElement.style.aspectRatio = '1/1';
335
+ spanElement.style.lineHeight = '1em';
336
+ spanElement.style.margin = '-1px 0';
337
+ spanElement.style.verticalAlign = 'middle'; // to keep vertical alignment consistent with images
338
+
334
339
  return spanElement;
335
340
  }
336
341
  createSpriteEmojiElement(representation) {
package/dist/esm/nodeviews/EmojiNodeView.js CHANGED
@@ -12,8 +12,10 @@ import { logException } from '@atlaskit/editor-common/monitoring';
12
12
  import { VanillaTooltip } from '@atlaskit/editor-common/vanilla-tooltip';
13
13
  import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
14
14
  import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
15
+ import { emojiIdToEmoji } from '@atlaskit/emoji/emoji-id-to-emoji';
15
16
  import { fg } from '@atlaskit/platform-feature-flags';
16
17
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
18
+ import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
17
19
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
18
20
  import { emojiToDom } from './emojiNodeSpec';
19
21
  /**
@@ -165,7 +167,7 @@ export var EmojiNodeView = /*#__PURE__*/function () {
165
167
  key: "updateDom",
166
168
  value: function () {
167
169
  var _updateDom = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(emojiProvider) {
168
- var _this$node$attrs, shortName, id, fallback, emojiDescription, emojiRepresentation, _t;
170
+ var _this$node$attrs, shortName, id, fallback, emojiDescription, unicodeEmoji, emojiRepresentation, _t;
169
171
  return _regeneratorRuntime.wrap(function (_context) {
170
172
  while (1) switch (_context.prev = _context.next) {
171
173
  case 0:
@@ -187,7 +189,10 @@ export var EmojiNodeView = /*#__PURE__*/function () {
187
189
  this.renderFallback();
188
190
  return _context.abrupt("return");
189
191
  case 2:
190
- emojiRepresentation = emojiDescription === null || emojiDescription === void 0 ? void 0 : emojiDescription.representation;
192
+ unicodeEmoji = id && expValEqualsNoExposure('platform_use_unicode_emojis', 'isEnabled', true) ? emojiIdToEmoji(id) : undefined;
193
+ emojiRepresentation = unicodeEmoji ? {
194
+ unicodeEmoji: unicodeEmoji
195
+ } : emojiDescription === null || emojiDescription === void 0 ? void 0 : emojiDescription.representation;
191
196
  if (EmojiNodeView.isEmojiRepresentationSupported(emojiRepresentation)) {
192
197
  _context.next = 3;
193
198
  break;
@@ -349,16 +354,16 @@ export var EmojiNodeView = /*#__PURE__*/function () {
349
354
  doc = document;
350
355
  }
351
356
  var spanElement = doc.createElement('span');
352
- spanElement.classList.add(EmojiSharedCssClassName.EMOJI_IMAGE);
353
- spanElement.style.textAlign = 'center';
354
- spanElement.style.alignContent = 'center';
357
+ spanElement.classList.add(EmojiSharedCssClassName.EMOJI_UNICODE);
355
358
  spanElement.textContent = emoji;
356
- spanElement.style.fontSize = "max(1em, ".concat(defaultEmojiHeight, "px)");
357
- spanElement.style.width = "max(calc(1em + 2px), ".concat(defaultEmojiHeight + 2, "px)");
358
- spanElement.style.height = "max(calc(1em + 2px), ".concat(defaultEmojiHeight + 2, "px)");
359
- spanElement.style.lineHeight = '0';
360
- spanElement.style.margin = '0';
361
- spanElement.style.padding = '0';
359
+ spanElement.style.display = 'inline-flex';
360
+ spanElement.style.fontSize = "var(--emoji-common-unicode-size, ".concat(defaultEmojiHeight, "px)");
361
+ spanElement.style.alignItems = 'center';
362
+ spanElement.style.aspectRatio = '1/1';
363
+ spanElement.style.lineHeight = '1em';
364
+ spanElement.style.margin = '-1px 0';
365
+ spanElement.style.verticalAlign = 'middle'; // to keep vertical alignment consistent with images
366
+
362
367
  return spanElement;
363
368
  }
364
369
  }, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-emoji",
3
- "version": "13.0.14",
3
+ "version": "13.0.15",
4
4
  "description": "Emoji plugin for @atlaskit/editor-core",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
32
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
- "@atlaskit/emoji": "^71.5.0",
35
+ "@atlaskit/emoji": "^71.6.0",
36
36
  "@atlaskit/icon": "^36.0.0",
37
37
  "@atlaskit/node-data-provider": "^13.0.0",
38
38
  "@atlaskit/platform-feature-flags": "^2.0.0",
@@ -45,7 +45,7 @@
45
45
  "react-loadable": "^5.1.0"
46
46
  },
47
47
  "peerDependencies": {
48
- "@atlaskit/editor-common": "^116.13.0",
48
+ "@atlaskit/editor-common": "^116.14.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"