@atlaskit/emoji 71.0.1 → 71.1.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/emoji
 
+## 71.1.0
+
+### Minor Changes
+
+- [`1abdd6ae1f4aa`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1abdd6ae1f4aa) -
+  Add renderUnicodeEmojiAsImage prop to render unicode emojis as images via OffscreenCanvas, with
+  override to text as alternative
+
 ## 71.0.1
 
 ### Patch Changes

package/dist/cjs/components/common/Emoji.js

@@ -10,7 +10,9 @@ exports.default = exports.UnicodeEmoji = exports.SpriteEmoji = exports.ImageEmoj
 require("./Emoji.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
@@ -32,7 +34,9 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _browserApis = require("@atlaskit/browser-apis");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _i18n = require("../i18n");
-var _excluded = ["emoji", "fitToHeight", "selected", "selectOnHover", "className", "showTooltip", "showDelete", "shouldBeInteractive", "tabIndex", "onSelected", "onMouseMove", "onFocus", "onDelete", "onLoadError", "onLoadSuccess", "disableLazyLoad", "autoWidth", "children", "type", "editorEmoji"];
+var _isSsr = require("../../util/is-ssr");
+var _EmojiPlaceholder = _interopRequireDefault(require("./EmojiPlaceholder"));
+var _excluded = ["emoji", "fitToHeight", "selected", "selectOnHover", "className", "showTooltip", "showDelete", "shouldBeInteractive", "tabIndex", "onSelected", "onMouseMove", "onFocus", "onDelete", "onLoadError", "onLoadSuccess", "disableLazyLoad", "autoWidth", "children", "type", "editorEmoji", "renderUnicodeEmojiAsImage"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -151,15 +155,145 @@ var SpriteEmoji = exports.SpriteEmoji = function SpriteEmoji(props) {
     }))
   );
 };
-var UnicodeEmoji = exports.UnicodeEmoji = function UnicodeEmoji(props) {
+var unicodeEmojiCanvasSize = 128;
+var unicodeEmojiCanvasFontSize = 124;
+var unicodeEmojiCanvasTopPadding = 8;
+var renderUnicodeEmojiToImagePath = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(unicodeEmoji) {
+    var OffscreenCanvasCtor, canvas, context, blob;
+    return _regenerator.default.wrap(function (_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          OffscreenCanvasCtor = globalThis['OffscreenCanvas'];
+          if (!((0, _isSsr.isSSR)() || !OffscreenCanvasCtor || typeof URL === 'undefined')) {
+            _context.next = 1;
+            break;
+          }
+          return _context.abrupt("return", undefined);
+        case 1:
+          canvas = new OffscreenCanvasCtor(unicodeEmojiCanvasSize, unicodeEmojiCanvasSize);
+          context = canvas.getContext('2d');
+          if (context) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return", undefined);
+        case 2:
+          context.clearRect(0, 0, unicodeEmojiCanvasSize, unicodeEmojiCanvasSize);
+          context.textAlign = 'center';
+          context.textBaseline = 'middle';
+          context.font = "".concat(unicodeEmojiCanvasFontSize, "px sans-serif");
+          context.fillText(unicodeEmoji, unicodeEmojiCanvasSize / 2, unicodeEmojiCanvasSize / 2 + unicodeEmojiCanvasTopPadding);
+          _context.next = 3;
+          return canvas.convertToBlob({
+            type: 'image/png'
+          });
+        case 3:
+          blob = _context.sent;
+          return _context.abrupt("return", URL.createObjectURL(blob));
+        case 4:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function renderUnicodeEmojiToImagePath(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var useUnicodeEmojiImage = function useUnicodeEmojiImage(unicodeEmoji) {
+  var _useState = (0, _react.useState)({
+      status: 'loading'
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  (0, _react.useEffect)(function () {
+    var cancelled = false;
+    var imagePathToRevoke;
+    setState({
+      status: 'loading',
+      unicodeEmoji: unicodeEmoji
+    });
+    void renderUnicodeEmojiToImagePath(unicodeEmoji).then(function (imagePath) {
+      if (cancelled) {
+        if (imagePath) {
+          URL.revokeObjectURL(imagePath);
+        }
+        return;
+      }
+      imagePathToRevoke = imagePath;
+      setState(imagePath ? {
+        status: 'ready',
+        unicodeEmoji: unicodeEmoji,
+        imagePath: imagePath
+      } : {
+        status: 'failed',
+        unicodeEmoji: unicodeEmoji
+      });
+    }).catch(function () {
+      if (!cancelled) {
+        setState({
+          status: 'failed',
+          unicodeEmoji: unicodeEmoji
+        });
+      }
+    });
+    return function () {
+      cancelled = true;
+      if (imagePathToRevoke) {
+        URL.revokeObjectURL(imagePathToRevoke);
+      }
+    };
+  }, [unicodeEmoji]);
+  return state;
+};
+var UnicodeEmojiImage = function UnicodeEmojiImage(props) {
   var emoji = props.emoji,
     fitToHeight = props.fitToHeight,
+    showTooltip = props.showTooltip;
+  var emojiText = emoji.representation.unicodeEmoji;
+  var unicodeEmojiImage = useUnicodeEmojiImage(emojiText);
+  var hasCurrentEmojiImage = unicodeEmojiImage.unicodeEmoji === emojiText;
+  if ((0, _isSsr.isSSR)() || !hasCurrentEmojiImage || unicodeEmojiImage.status === 'loading') {
+    return /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder.default, {
+      shortName: emoji.shortName,
+      showTooltip: showTooltip,
+      size: fitToHeight,
+      loading: true
+    });
+  }
+  if (unicodeEmojiImage.status === 'ready') {
+    return /*#__PURE__*/_react.default.createElement(ImageEmoji, (0, _extends2.default)({}, props, {
+      emoji: _objectSpread(_objectSpread({}, emoji), {}, {
+        representation: {
+          imagePath: unicodeEmojiImage.imagePath,
+          width: unicodeEmojiCanvasSize,
+          height: unicodeEmojiCanvasSize
+        }
+      })
+    }));
+  }
+  return /*#__PURE__*/_react.default.createElement(_EmojiPlaceholder.default, {
+    shortName: emoji.shortName,
+    showTooltip: showTooltip,
+    size: fitToHeight
+  });
+};
+var UnicodeEmoji = exports.UnicodeEmoji = function UnicodeEmoji(props) {
+  var _props$fitToHeight;
+  var emoji = props.emoji,
     selected = props.selected,
     selectOnHover = props.selectOnHover,
-    className = props.className;
+    className = props.className,
+    _props$renderUnicodeE = props.renderUnicodeEmojiAsImage,
+    renderUnicodeEmojiAsImage = _props$renderUnicodeE === void 0 ? true : _props$renderUnicodeE;
+  if (renderUnicodeEmojiAsImage) {
+    return /*#__PURE__*/_react.default.createElement(UnicodeEmojiImage, props);
+  }
   var classes = "".concat(_styles.emojiNodeStyles, " ").concat(selected ? _styles.commonSelectedStyles : '', " ").concat(selectOnHover ? _styles.selectOnHoverStyles : '', " ").concat(className ? className : '');
   var emojiText = emoji.representation.unicodeEmoji;
-  var size = fitToHeight !== null && fitToHeight !== void 0 ? fitToHeight : _constants.defaultEmojiHeight;
+  var size = (_props$fitToHeight = props.fitToHeight) !== null && _props$fitToHeight !== void 0 ? _props$fitToHeight : _constants.defaultEmojiHeight;
   var style = {
     display: 'inline-block',
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
@@ -363,6 +497,7 @@ var EmojiNodeWrapper = exports.EmojiNodeWrapper = /*#__PURE__*/(0, _react.forwar
     children = props.children,
     type = props.type,
     editorEmoji = props.editorEmoji,
+    renderUnicodeEmojiAsImage = props.renderUnicodeEmojiAsImage,
     other = (0, _objectWithoutProperties2.default)(props, _excluded);
   var intl = (0, _react.useContext)(_reactIntl.IntlContext);
   var ariaLabel = intl && (0, _platformFeatureFlags.fg)('platform_change_emoji_button_label') ? intl.formatMessage(_i18n.messages.changeEmojiShortnameButtonLabel, {

package/dist/cjs/components/common/ResourcedEmojiComponent.js

@@ -44,6 +44,8 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     _ref$optimisticImageU = _ref.optimisticImageURL,
     optimisticImageURL = _ref$optimisticImageU === void 0 ? undefined : _ref$optimisticImageU,
     editorEmoji = _ref.editorEmoji,
+    _ref$renderUnicodeEmo = _ref.renderUnicodeEmojiAsImage,
+    renderUnicodeEmojiAsImage = _ref$renderUnicodeEmo === void 0 ? true : _ref$renderUnicodeEmo,
     _ref$pageTitleEmoji = _ref.pageTitleEmoji,
     pageTitleEmoji = _ref$pageTitleEmoji === void 0 ? false : _ref$pageTitleEmoji,
     placeholderXcss = _ref.placeholderXcss,
@@ -304,7 +306,8 @@ var ResourcedEmojiComponent = exports.ResourcedEmojiComponent = function Resourc
     showTooltip: showTooltip,
     fitToHeight: fitToHeight,
     autoWidth: autoWidth,
-    editorEmoji: editorEmoji
+    editorEmoji: editorEmoji,
+    renderUnicodeEmojiAsImage: renderUnicodeEmojiAsImage
   })));
 };
 var _default = exports.default = ResourcedEmojiComponent;

package/dist/cjs/util/analytics/analytics.js

@@ -20,7 +20,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "71.0.0"
+      packageVersion: "71.0.1"
     }, attributes)
   };
 };

package/dist/es2019/components/common/Emoji.js

@@ -2,7 +2,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import "./Emoji.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { useEffect, useCallback, useContext, useMemo, forwardRef } from 'react';
+import React, { useEffect, useCallback, useContext, useMemo, useState, forwardRef } from 'react';
 import { IntlContext } from 'react-intl';
 import Tooltip from '@atlaskit/tooltip';
 import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
@@ -21,6 +21,8 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getDocument } from '@atlaskit/browser-apis';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { messages } from '../i18n';
+import { isSSR } from '../../util/is-ssr';
+import EmojiPlaceholder from './EmojiPlaceholder';
 const emojiSpriteContainer = null;
 const emojiImageContainer = null;
 
@@ -151,17 +153,123 @@ export const SpriteEmoji = props => {
     }))
   );
 };
-export const UnicodeEmoji = props => {
+const unicodeEmojiCanvasSize = 128;
+const unicodeEmojiCanvasFontSize = 124;
+const unicodeEmojiCanvasTopPadding = 8;
+const renderUnicodeEmojiToImagePath = async unicodeEmoji => {
+  const OffscreenCanvasCtor = globalThis['OffscreenCanvas'];
+  if (isSSR() || !OffscreenCanvasCtor || typeof URL === 'undefined') {
+    return undefined;
+  }
+  const canvas = new OffscreenCanvasCtor(unicodeEmojiCanvasSize, unicodeEmojiCanvasSize);
+  const context = canvas.getContext('2d');
+  if (!context) {
+    return undefined;
+  }
+  context.clearRect(0, 0, unicodeEmojiCanvasSize, unicodeEmojiCanvasSize);
+  context.textAlign = 'center';
+  context.textBaseline = 'middle';
+  context.font = `${unicodeEmojiCanvasFontSize}px sans-serif`;
+  context.fillText(unicodeEmoji, unicodeEmojiCanvasSize / 2, unicodeEmojiCanvasSize / 2 + unicodeEmojiCanvasTopPadding);
+  const blob = await canvas.convertToBlob({
+    type: 'image/png'
+  });
+  return URL.createObjectURL(blob);
+};
+const useUnicodeEmojiImage = unicodeEmoji => {
+  const [state, setState] = useState({
+    status: 'loading'
+  });
+  useEffect(() => {
+    let cancelled = false;
+    let imagePathToRevoke;
+    setState({
+      status: 'loading',
+      unicodeEmoji
+    });
+    void renderUnicodeEmojiToImagePath(unicodeEmoji).then(imagePath => {
+      if (cancelled) {
+        if (imagePath) {
+          URL.revokeObjectURL(imagePath);
+        }
+        return;
+      }
+      imagePathToRevoke = imagePath;
+      setState(imagePath ? {
+        status: 'ready',
+        unicodeEmoji,
+        imagePath
+      } : {
+        status: 'failed',
+        unicodeEmoji
+      });
+    }).catch(() => {
+      if (!cancelled) {
+        setState({
+          status: 'failed',
+          unicodeEmoji
+        });
+      }
+    });
+    return () => {
+      cancelled = true;
+      if (imagePathToRevoke) {
+        URL.revokeObjectURL(imagePathToRevoke);
+      }
+    };
+  }, [unicodeEmoji]);
+  return state;
+};
+const UnicodeEmojiImage = props => {
   const {
     emoji,
     fitToHeight,
+    showTooltip
+  } = props;
+  const emojiText = emoji.representation.unicodeEmoji;
+  const unicodeEmojiImage = useUnicodeEmojiImage(emojiText);
+  const hasCurrentEmojiImage = unicodeEmojiImage.unicodeEmoji === emojiText;
+  if (isSSR() || !hasCurrentEmojiImage || unicodeEmojiImage.status === 'loading') {
+    return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
+      shortName: emoji.shortName,
+      showTooltip: showTooltip,
+      size: fitToHeight,
+      loading: true
+    });
+  }
+  if (unicodeEmojiImage.status === 'ready') {
+    return /*#__PURE__*/React.createElement(ImageEmoji, _extends({}, props, {
+      emoji: {
+        ...emoji,
+        representation: {
+          imagePath: unicodeEmojiImage.imagePath,
+          width: unicodeEmojiCanvasSize,
+          height: unicodeEmojiCanvasSize
+        }
+      }
+    }));
+  }
+  return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
+    shortName: emoji.shortName,
+    showTooltip: showTooltip,
+    size: fitToHeight
+  });
+};
+export const UnicodeEmoji = props => {
+  var _props$fitToHeight;
+  const {
+    emoji,
     selected,
     selectOnHover,
-    className
+    className,
+    renderUnicodeEmojiAsImage = true
   } = props;
+  if (renderUnicodeEmojiAsImage) {
+    return /*#__PURE__*/React.createElement(UnicodeEmojiImage, props);
+  }
   const classes = `${emojiNodeStyles} ${selected ? commonSelectedStyles : ''} ${selectOnHover ? selectOnHoverStyles : ''} ${className ? className : ''}`;
   const emojiText = emoji.representation.unicodeEmoji;
-  const size = fitToHeight !== null && fitToHeight !== void 0 ? fitToHeight : defaultEmojiHeight;
+  const size = (_props$fitToHeight = props.fitToHeight) !== null && _props$fitToHeight !== void 0 ? _props$fitToHeight : defaultEmojiHeight;
   const style = {
     display: 'inline-block',
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
@@ -356,6 +464,7 @@ export const EmojiNodeWrapper = /*#__PURE__*/forwardRef((props, ref) => {
     children,
     type,
     editorEmoji,
+    renderUnicodeEmojiAsImage,
     ...other
   } = props;
   const intl = useContext(IntlContext);

package/dist/es2019/components/common/ResourcedEmojiComponent.js

@@ -24,6 +24,7 @@ export const ResourcedEmojiComponent = ({
   optimistic = false,
   optimisticImageURL = undefined,
   editorEmoji,
+  renderUnicodeEmojiAsImage = true,
   pageTitleEmoji = false,
   placeholderXcss,
   onEmojiLoadSuccess,
@@ -259,7 +260,8 @@ export const ResourcedEmojiComponent = ({
     showTooltip: showTooltip,
     fitToHeight: fitToHeight,
     autoWidth: autoWidth,
-    editorEmoji: editorEmoji
+    editorEmoji: editorEmoji,
+    renderUnicodeEmojiAsImage: renderUnicodeEmojiAsImage
   })));
 };
 export default ResourcedEmojiComponent;

package/dist/es2019/util/analytics/analytics.js

@@ -9,7 +9,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "71.0.0",
+    packageVersion: "71.0.1",
     ...attributes
   }
 });

package/dist/esm/components/common/Emoji.js

@@ -1,14 +1,16 @@
 /* Emoji.tsx generated by @compiled/babel-plugin v0.39.1 */
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["emoji", "fitToHeight", "selected", "selectOnHover", "className", "showTooltip", "showDelete", "shouldBeInteractive", "tabIndex", "onSelected", "onMouseMove", "onFocus", "onDelete", "onLoadError", "onLoadSuccess", "disableLazyLoad", "autoWidth", "children", "type", "editorEmoji"];
+var _excluded = ["emoji", "fitToHeight", "selected", "selectOnHover", "className", "showTooltip", "showDelete", "shouldBeInteractive", "tabIndex", "onSelected", "onMouseMove", "onFocus", "onDelete", "onLoadError", "onLoadSuccess", "disableLazyLoad", "autoWidth", "children", "type", "editorEmoji", "renderUnicodeEmojiAsImage"];
 import "./Emoji.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { useEffect, useCallback, useContext, useMemo, forwardRef } from 'react';
+import React, { useEffect, useCallback, useContext, useMemo, useState, forwardRef } from 'react';
 import { IntlContext } from 'react-intl';
 import Tooltip from '@atlaskit/tooltip';
 import { shouldUseAltRepresentation } from '../../api/EmojiUtils';
@@ -27,6 +29,8 @@ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getDocument } from '@atlaskit/browser-apis';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { messages } from '../i18n';
+import { isSSR } from '../../util/is-ssr';
+import EmojiPlaceholder from './EmojiPlaceholder';
 var emojiSpriteContainer = null;
 var emojiImageContainer = null;
 
@@ -142,15 +146,145 @@ export var SpriteEmoji = function SpriteEmoji(props) {
     }))
   );
 };
-export var UnicodeEmoji = function UnicodeEmoji(props) {
+var unicodeEmojiCanvasSize = 128;
+var unicodeEmojiCanvasFontSize = 124;
+var unicodeEmojiCanvasTopPadding = 8;
+var renderUnicodeEmojiToImagePath = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(unicodeEmoji) {
+    var OffscreenCanvasCtor, canvas, context, blob;
+    return _regeneratorRuntime.wrap(function (_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          OffscreenCanvasCtor = globalThis['OffscreenCanvas'];
+          if (!(isSSR() || !OffscreenCanvasCtor || typeof URL === 'undefined')) {
+            _context.next = 1;
+            break;
+          }
+          return _context.abrupt("return", undefined);
+        case 1:
+          canvas = new OffscreenCanvasCtor(unicodeEmojiCanvasSize, unicodeEmojiCanvasSize);
+          context = canvas.getContext('2d');
+          if (context) {
+            _context.next = 2;
+            break;
+          }
+          return _context.abrupt("return", undefined);
+        case 2:
+          context.clearRect(0, 0, unicodeEmojiCanvasSize, unicodeEmojiCanvasSize);
+          context.textAlign = 'center';
+          context.textBaseline = 'middle';
+          context.font = "".concat(unicodeEmojiCanvasFontSize, "px sans-serif");
+          context.fillText(unicodeEmoji, unicodeEmojiCanvasSize / 2, unicodeEmojiCanvasSize / 2 + unicodeEmojiCanvasTopPadding);
+          _context.next = 3;
+          return canvas.convertToBlob({
+            type: 'image/png'
+          });
+        case 3:
+          blob = _context.sent;
+          return _context.abrupt("return", URL.createObjectURL(blob));
+        case 4:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function renderUnicodeEmojiToImagePath(_x) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var useUnicodeEmojiImage = function useUnicodeEmojiImage(unicodeEmoji) {
+  var _useState = useState({
+      status: 'loading'
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  useEffect(function () {
+    var cancelled = false;
+    var imagePathToRevoke;
+    setState({
+      status: 'loading',
+      unicodeEmoji: unicodeEmoji
+    });
+    void renderUnicodeEmojiToImagePath(unicodeEmoji).then(function (imagePath) {
+      if (cancelled) {
+        if (imagePath) {
+          URL.revokeObjectURL(imagePath);
+        }
+        return;
+      }
+      imagePathToRevoke = imagePath;
+      setState(imagePath ? {
+        status: 'ready',
+        unicodeEmoji: unicodeEmoji,
+        imagePath: imagePath
+      } : {
+        status: 'failed',
+        unicodeEmoji: unicodeEmoji
+      });
+    }).catch(function () {
+      if (!cancelled) {
+        setState({
+          status: 'failed',
+          unicodeEmoji: unicodeEmoji
+        });
+      }
+    });
+    return function () {
+      cancelled = true;
+      if (imagePathToRevoke) {
+        URL.revokeObjectURL(imagePathToRevoke);
+      }
+    };
+  }, [unicodeEmoji]);
+  return state;
+};
+var UnicodeEmojiImage = function UnicodeEmojiImage(props) {
   var emoji = props.emoji,
     fitToHeight = props.fitToHeight,
+    showTooltip = props.showTooltip;
+  var emojiText = emoji.representation.unicodeEmoji;
+  var unicodeEmojiImage = useUnicodeEmojiImage(emojiText);
+  var hasCurrentEmojiImage = unicodeEmojiImage.unicodeEmoji === emojiText;
+  if (isSSR() || !hasCurrentEmojiImage || unicodeEmojiImage.status === 'loading') {
+    return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
+      shortName: emoji.shortName,
+      showTooltip: showTooltip,
+      size: fitToHeight,
+      loading: true
+    });
+  }
+  if (unicodeEmojiImage.status === 'ready') {
+    return /*#__PURE__*/React.createElement(ImageEmoji, _extends({}, props, {
+      emoji: _objectSpread(_objectSpread({}, emoji), {}, {
+        representation: {
+          imagePath: unicodeEmojiImage.imagePath,
+          width: unicodeEmojiCanvasSize,
+          height: unicodeEmojiCanvasSize
+        }
+      })
+    }));
+  }
+  return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
+    shortName: emoji.shortName,
+    showTooltip: showTooltip,
+    size: fitToHeight
+  });
+};
+export var UnicodeEmoji = function UnicodeEmoji(props) {
+  var _props$fitToHeight;
+  var emoji = props.emoji,
     selected = props.selected,
     selectOnHover = props.selectOnHover,
-    className = props.className;
+    className = props.className,
+    _props$renderUnicodeE = props.renderUnicodeEmojiAsImage,
+    renderUnicodeEmojiAsImage = _props$renderUnicodeE === void 0 ? true : _props$renderUnicodeE;
+  if (renderUnicodeEmojiAsImage) {
+    return /*#__PURE__*/React.createElement(UnicodeEmojiImage, props);
+  }
   var classes = "".concat(emojiNodeStyles, " ").concat(selected ? commonSelectedStyles : '', " ").concat(selectOnHover ? selectOnHoverStyles : '', " ").concat(className ? className : '');
   var emojiText = emoji.representation.unicodeEmoji;
-  var size = fitToHeight !== null && fitToHeight !== void 0 ? fitToHeight : defaultEmojiHeight;
+  var size = (_props$fitToHeight = props.fitToHeight) !== null && _props$fitToHeight !== void 0 ? _props$fitToHeight : defaultEmojiHeight;
   var style = {
     display: 'inline-block',
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
@@ -354,6 +488,7 @@ export var EmojiNodeWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
     children = props.children,
     type = props.type,
     editorEmoji = props.editorEmoji,
+    renderUnicodeEmojiAsImage = props.renderUnicodeEmojiAsImage,
     other = _objectWithoutProperties(props, _excluded);
   var intl = useContext(IntlContext);
   var ariaLabel = intl && fg('platform_change_emoji_button_label') ? intl.formatMessage(messages.changeEmojiShortnameButtonLabel, {

package/dist/esm/components/common/ResourcedEmojiComponent.js

@@ -35,6 +35,8 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
     _ref$optimisticImageU = _ref.optimisticImageURL,
     optimisticImageURL = _ref$optimisticImageU === void 0 ? undefined : _ref$optimisticImageU,
     editorEmoji = _ref.editorEmoji,
+    _ref$renderUnicodeEmo = _ref.renderUnicodeEmojiAsImage,
+    renderUnicodeEmojiAsImage = _ref$renderUnicodeEmo === void 0 ? true : _ref$renderUnicodeEmo,
     _ref$pageTitleEmoji = _ref.pageTitleEmoji,
     pageTitleEmoji = _ref$pageTitleEmoji === void 0 ? false : _ref$pageTitleEmoji,
     placeholderXcss = _ref.placeholderXcss,
@@ -295,7 +297,8 @@ export var ResourcedEmojiComponent = function ResourcedEmojiComponent(_ref) {
     showTooltip: showTooltip,
     fitToHeight: fitToHeight,
     autoWidth: autoWidth,
-    editorEmoji: editorEmoji
+    editorEmoji: editorEmoji,
+    renderUnicodeEmojiAsImage: renderUnicodeEmojiAsImage
   })));
 };
 export default ResourcedEmojiComponent;

package/dist/esm/util/analytics/analytics.js

@@ -14,7 +14,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "71.0.0"
+      packageVersion: "71.0.1"
     }, attributes)
   };
 };

package/dist/types/components/common/Emoji.d.ts

@@ -59,6 +59,11 @@ export interface Props extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onMo
      * Called when an emoji is selected
      */
     onSelected?: OnEmojiEvent;
+    /**
+     * Renders unicode emoji through an image representation when a fixed height is supplied.
+     * Defaults to `true`.
+     */
+    renderUnicodeEmojiAsImage?: boolean;
     /**
      * Show the emoji as selected
      */

package/dist/types/components/common/ResourcedEmojiComponent.d.ts

@@ -50,6 +50,11 @@ export interface BaseResourcedEmojiProps {
      * allows custom styling to the placeholder component while the emoji is loading.
      */
     placeholderXcss?: StrictXCSSProp<'backgroundColor', never>;
+    /**
+     * Renders unicode emoji through an image representation when a fixed height is supplied.
+     * Defaults to `true`.
+     */
+    renderUnicodeEmojiAsImage?: boolean;
     /**
      * Allows to show the tooltip.
      * Defaults to `false`.
@@ -70,5 +75,5 @@ export interface Props extends BaseResourcedEmojiProps {
      */
     onEmojiLoadSuccess?: EmojiLoadSuccessCallback;
 }
-export declare const ResourcedEmojiComponent: ({ emojiProvider, emojiId, showTooltip, customFallback, fitToHeight, optimistic, optimisticImageURL, editorEmoji, pageTitleEmoji, placeholderXcss, onEmojiLoadSuccess, onEmojiLoadFail, }: Props) => React.JSX.Element;
+export declare const ResourcedEmojiComponent: ({ emojiProvider, emojiId, showTooltip, customFallback, fitToHeight, optimistic, optimisticImageURL, editorEmoji, renderUnicodeEmojiAsImage, pageTitleEmoji, placeholderXcss, onEmojiLoadSuccess, onEmojiLoadFail, }: Props) => React.JSX.Element;
 export default ResourcedEmojiComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "71.0.1",
+	"version": "71.1.0",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"