@atlaskit/editor-plugin-emoji 7.1.2 → 7.3.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-emoji
 
+## 7.3.0
+
+### Minor Changes
+
+- [`9daa116b53aaf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9daa116b53aaf) -
+  [ux] ED-29504 Add a new plugin option to disable emoji autoformatting
+
+### Patch Changes
+
+- Updated dependencies
+
+## 7.2.0
+
+### Minor Changes
+
+- [`3a08cc16abe76`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3a08cc16abe76) -
+  [https://product-fabric.atlassian.net/browse/ED-29521](ED-29521) - use optimistic image URL for
+  emojis in editor (client support)
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.1.2
 
 ### Patch Changes

package/dist/cjs/emojiPlugin.js

@@ -24,6 +24,7 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _emoji2 = require("@atlaskit/emoji");
 var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _insertEmoji = require("./editor-commands/insert-emoji");
 var _emojiNodeSpec = require("./nodeviews/emojiNodeSpec");
@@ -247,7 +248,7 @@ var emojiPlugin = exports.emojiPlugin = function emojiPlugin(_ref2) {
         plugin: function plugin(_ref8) {
           var _api$analytics4;
           var schema = _ref8.schema;
-          return (0, _asciiInputRules.inputRulePlugin)(schema, api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, api);
+          return (0, _asciiInputRules.inputRulePlugin)(schema, api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, api, (0, _expValEquals.expValEquals)('platform_editor_plain_text_support', 'isEnabled', true) ? options === null || options === void 0 ? void 0 : options.disableAutoformat : undefined);
         }
       }];
     },

package/dist/cjs/pm-plugins/ascii-input-rules.js

@@ -18,11 +18,15 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _utils = require("@atlaskit/editor-common/utils");
 var _prosemirrorInputRules = require("@atlaskit/prosemirror-input-rules");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function _superPropGet(t, o, e, r) { var p = (0, _get2.default)((0, _getPrototypeOf2.default)(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
 var matcher;
-function inputRulePlugin(schema, editorAnalyticsAPI, pluginInjectionApi) {
+function inputRulePlugin(schema, editorAnalyticsAPI, pluginInjectionApi, disableAutoformat) {
+  if (disableAutoformat && (0, _expValEquals.expValEquals)('platform_editor_plain_text_support', 'isEnabled', true)) {
+    return;
+  }
   if (schema.nodes.emoji) {
     initMatcher(pluginInjectionApi);
     var asciiEmojiRule = (0, _utils.createRule)(AsciiEmojiMatcher.REGEX, inputRuleHandler(editorAnalyticsAPI));

package/dist/cjs/pm-plugins/providers/EmojiNodeDataProvider.js

@@ -13,8 +13,11 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _emoji = require("@atlaskit/emoji");
 var _nodeDataProvider = require("@atlaskit/node-data-provider");
+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; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var EmojiNodeDataProvider = exports.EmojiNodeDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
@@ -42,24 +45,27 @@ var EmojiNodeDataProvider = exports.EmojiNodeDataProvider = /*#__PURE__*/functio
   }, {
     key: "fetchNodesData",
     value: function () {
-      var _fetchNodesData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(nodes) {
+      var _fetchNodesData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(nodes) {
         var _this$emojiResource$e;
         var getOptimisticImageUrl, emojiProvider, fetches;
-        return _regenerator.default.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+        return _regenerator.default.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
             case 0:
               // If we have an `optimisticImageApi`, use it to generate a URL immediately.
               // This is how emojis are server-side rendered in Confluence.
               // Without this, the emoji server response will hit timeout on SSR and the emoji will not be rendered.
               //
+              // We are using this optimization only in SSR because on client side we need to know a valid emoji size
+              // which is not possible to get from optimisticImageApi.
+              //
               // Check platform/packages/editor/renderer/src/react/nodes/emoji.tsx
               // and platform/packages/elements/emoji/src/components/common/ResourcedEmojiComponent.tsx
               getOptimisticImageUrl = (_this$emojiResource$e = this.emojiResource.emojiProviderConfig.optimisticImageApi) === null || _this$emojiResource$e === void 0 ? void 0 : _this$emojiResource$e.getUrl;
-              if (!getOptimisticImageUrl) {
-                _context.next = 3;
+              if (!((0, _coreUtils.isSSR)() && getOptimisticImageUrl)) {
+                _context2.next = 3;
                 break;
               }
-              return _context.abrupt("return", nodes.map(function (node) {
+              return _context2.abrupt("return", nodes.map(function (node) {
                 var emojiId = {
                   id: node.attrs.id,
                   shortName: node.attrs.shortName,
@@ -83,26 +89,57 @@ var EmojiNodeDataProvider = exports.EmojiNodeDataProvider = /*#__PURE__*/functio
                 };
               }));
             case 3:
-              _context.next = 5;
+              _context2.next = 5;
               return this.emojiProvider;
             case 5:
-              emojiProvider = _context.sent;
-              fetches = nodes.map(function (node) {
-                var emojiId = {
-                  id: node.attrs.id,
-                  shortName: node.attrs.shortName,
-                  fallback: node.attrs.text
+              emojiProvider = _context2.sent;
+              fetches = nodes.map( /*#__PURE__*/function () {
+                var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(node) {
+                  var emojiId, result, optimisticImageURL;
+                  return _regenerator.default.wrap(function _callee$(_context) {
+                    while (1) switch (_context.prev = _context.next) {
+                      case 0:
+                        emojiId = {
+                          id: node.attrs.id,
+                          shortName: node.attrs.shortName,
+                          fallback: node.attrs.text
+                        }; // This usually fast because the emojiProvider already has all emojis fetched.
+                        _context.next = 3;
+                        return emojiProvider.fetchByEmojiId(emojiId, true);
+                      case 3:
+                        result = _context.sent;
+                        if (!(getOptimisticImageUrl && result)) {
+                          _context.next = 8;
+                          break;
+                        }
+                        optimisticImageURL = getOptimisticImageUrl(emojiId);
+                        if (!(result.representation && 'imagePath' in result.representation)) {
+                          _context.next = 8;
+                          break;
+                        }
+                        return _context.abrupt("return", _objectSpread(_objectSpread({}, result), {}, {
+                          representation: _objectSpread(_objectSpread({}, result.representation), {}, {
+                            imagePath: optimisticImageURL
+                          })
+                        }));
+                      case 8:
+                        return _context.abrupt("return", result);
+                      case 9:
+                      case "end":
+                        return _context.stop();
+                    }
+                  }, _callee);
+                }));
+                return function (_x2) {
+                  return _ref.apply(this, arguments);
                 };
-
-                // This usually fast because the emojiProvider already has all emojis fetched.
-                return emojiProvider.fetchByEmojiId(emojiId, true);
-              });
-              return _context.abrupt("return", Promise.all(fetches));
+              }());
+              return _context2.abrupt("return", Promise.all(fetches));
             case 8:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
-        }, _callee, this);
+        }, _callee2, this);
       }));
       function fetchNodesData(_x) {
         return _fetchNodesData.apply(this, arguments);

package/dist/es2019/emojiPlugin.js

@@ -11,6 +11,7 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { EmojiTypeAheadItem, preloadEmojiPicker, recordSelectionFailedSli, recordSelectionSucceededSli, SearchSort } from '@atlaskit/emoji';
 import CommentIcon from '@atlaskit/icon/core/comment';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createEmojiFragment, insertEmoji } from './editor-commands/insert-emoji';
 import { emojiNodeSpec } from './nodeviews/emojiNodeSpec';
@@ -233,7 +234,7 @@ export const emojiPlugin = ({
           schema
         }) => {
           var _api$analytics4;
-          return asciiInputRulePlugin(schema, api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, api);
+          return asciiInputRulePlugin(schema, api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, api, expValEquals('platform_editor_plain_text_support', 'isEnabled', true) ? options === null || options === void 0 ? void 0 : options.disableAutoformat : undefined);
         }
       }];
     },

package/dist/es2019/pm-plugins/ascii-input-rules.js

@@ -3,8 +3,12 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } f
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createRule } from '@atlaskit/editor-common/utils';
 import { createPlugin, leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 let matcher;
-export function inputRulePlugin(schema, editorAnalyticsAPI, pluginInjectionApi) {
+export function inputRulePlugin(schema, editorAnalyticsAPI, pluginInjectionApi, disableAutoformat) {
+  if (disableAutoformat && expValEquals('platform_editor_plain_text_support', 'isEnabled', true)) {
+    return;
+  }
   if (schema.nodes.emoji) {
     initMatcher(pluginInjectionApi);
     const asciiEmojiRule = createRule(AsciiEmojiMatcher.REGEX, inputRuleHandler(editorAnalyticsAPI));

package/dist/es2019/pm-plugins/providers/EmojiNodeDataProvider.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { defaultEmojiHeight } from '@atlaskit/emoji';
 import { NodeDataProvider } from '@atlaskit/node-data-provider';
 export class EmojiNodeDataProvider extends NodeDataProvider {
@@ -21,10 +22,13 @@ export class EmojiNodeDataProvider extends NodeDataProvider {
     // This is how emojis are server-side rendered in Confluence.
     // Without this, the emoji server response will hit timeout on SSR and the emoji will not be rendered.
     //
+    // We are using this optimization only in SSR because on client side we need to know a valid emoji size
+    // which is not possible to get from optimisticImageApi.
+    //
     // Check platform/packages/editor/renderer/src/react/nodes/emoji.tsx
     // and platform/packages/elements/emoji/src/components/common/ResourcedEmojiComponent.tsx
     const getOptimisticImageUrl = (_this$emojiResource$e = this.emojiResource.emojiProviderConfig.optimisticImageApi) === null || _this$emojiResource$e === void 0 ? void 0 : _this$emojiResource$e.getUrl;
-    if (getOptimisticImageUrl) {
+    if (isSSR() && getOptimisticImageUrl) {
       return nodes.map(node => {
         const emojiId = {
           id: node.attrs.id,
@@ -53,7 +57,7 @@ export class EmojiNodeDataProvider extends NodeDataProvider {
     // This is slower path because during access to emojiProvider emojiResource
     // makes a request to fetch all emojis.
     const emojiProvider = await this.emojiProvider;
-    const fetches = nodes.map(node => {
+    const fetches = nodes.map(async node => {
       const emojiId = {
         id: node.attrs.id,
         shortName: node.attrs.shortName,
@@ -61,7 +65,22 @@ export class EmojiNodeDataProvider extends NodeDataProvider {
       };
 
       // This usually fast because the emojiProvider already has all emojis fetched.
-      return emojiProvider.fetchByEmojiId(emojiId, true);
+      const result = await emojiProvider.fetchByEmojiId(emojiId, true);
+
+      // If we have optimisticImageApi, we need to path response and set URL from it to match the URL used in SSR.
+      if (getOptimisticImageUrl && result) {
+        const optimisticImageURL = getOptimisticImageUrl(emojiId);
+        if (result.representation && 'imagePath' in result.representation) {
+          return {
+            ...result,
+            representation: {
+              ...result.representation,
+              imagePath: optimisticImageURL
+            }
+          };
+        }
+      }
+      return result;
     });
     return Promise.all(fetches);
   }

package/dist/esm/emojiPlugin.js

@@ -16,6 +16,7 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { EmojiTypeAheadItem, preloadEmojiPicker, recordSelectionFailedSli, recordSelectionSucceededSli, SearchSort } from '@atlaskit/emoji';
 import CommentIcon from '@atlaskit/icon/core/comment';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createEmojiFragment, insertEmoji } from './editor-commands/insert-emoji';
 import { emojiNodeSpec } from './nodeviews/emojiNodeSpec';
@@ -236,7 +237,7 @@ export var emojiPlugin = function emojiPlugin(_ref2) {
         plugin: function plugin(_ref8) {
           var _api$analytics4;
           var schema = _ref8.schema;
-          return asciiInputRulePlugin(schema, api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, api);
+          return asciiInputRulePlugin(schema, api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, api, expValEquals('platform_editor_plain_text_support', 'isEnabled', true) ? options === null || options === void 0 ? void 0 : options.disableAutoformat : undefined);
         }
       }];
     },

package/dist/esm/pm-plugins/ascii-input-rules.js

@@ -13,8 +13,12 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } f
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createRule } from '@atlaskit/editor-common/utils';
 import { createPlugin, leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var matcher;
-export function inputRulePlugin(schema, editorAnalyticsAPI, pluginInjectionApi) {
+export function inputRulePlugin(schema, editorAnalyticsAPI, pluginInjectionApi, disableAutoformat) {
+  if (disableAutoformat && expValEquals('platform_editor_plain_text_support', 'isEnabled', true)) {
+    return;
+  }
   if (schema.nodes.emoji) {
     initMatcher(pluginInjectionApi);
     var asciiEmojiRule = createRule(AsciiEmojiMatcher.REGEX, inputRuleHandler(editorAnalyticsAPI));

package/dist/esm/pm-plugins/providers/EmojiNodeDataProvider.js

@@ -6,8 +6,11 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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; }
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { defaultEmojiHeight } from '@atlaskit/emoji';
 import { NodeDataProvider } from '@atlaskit/node-data-provider';
 export var EmojiNodeDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
@@ -35,24 +38,27 @@ export var EmojiNodeDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
   }, {
     key: "fetchNodesData",
     value: function () {
-      var _fetchNodesData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(nodes) {
+      var _fetchNodesData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(nodes) {
         var _this$emojiResource$e;
         var getOptimisticImageUrl, emojiProvider, fetches;
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
             case 0:
               // If we have an `optimisticImageApi`, use it to generate a URL immediately.
               // This is how emojis are server-side rendered in Confluence.
               // Without this, the emoji server response will hit timeout on SSR and the emoji will not be rendered.
               //
+              // We are using this optimization only in SSR because on client side we need to know a valid emoji size
+              // which is not possible to get from optimisticImageApi.
+              //
               // Check platform/packages/editor/renderer/src/react/nodes/emoji.tsx
               // and platform/packages/elements/emoji/src/components/common/ResourcedEmojiComponent.tsx
               getOptimisticImageUrl = (_this$emojiResource$e = this.emojiResource.emojiProviderConfig.optimisticImageApi) === null || _this$emojiResource$e === void 0 ? void 0 : _this$emojiResource$e.getUrl;
-              if (!getOptimisticImageUrl) {
-                _context.next = 3;
+              if (!(isSSR() && getOptimisticImageUrl)) {
+                _context2.next = 3;
                 break;
               }
-              return _context.abrupt("return", nodes.map(function (node) {
+              return _context2.abrupt("return", nodes.map(function (node) {
                 var emojiId = {
                   id: node.attrs.id,
                   shortName: node.attrs.shortName,
@@ -76,26 +82,57 @@ export var EmojiNodeDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
                 };
               }));
             case 3:
-              _context.next = 5;
+              _context2.next = 5;
               return this.emojiProvider;
             case 5:
-              emojiProvider = _context.sent;
-              fetches = nodes.map(function (node) {
-                var emojiId = {
-                  id: node.attrs.id,
-                  shortName: node.attrs.shortName,
-                  fallback: node.attrs.text
+              emojiProvider = _context2.sent;
+              fetches = nodes.map( /*#__PURE__*/function () {
+                var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(node) {
+                  var emojiId, result, optimisticImageURL;
+                  return _regeneratorRuntime.wrap(function _callee$(_context) {
+                    while (1) switch (_context.prev = _context.next) {
+                      case 0:
+                        emojiId = {
+                          id: node.attrs.id,
+                          shortName: node.attrs.shortName,
+                          fallback: node.attrs.text
+                        }; // This usually fast because the emojiProvider already has all emojis fetched.
+                        _context.next = 3;
+                        return emojiProvider.fetchByEmojiId(emojiId, true);
+                      case 3:
+                        result = _context.sent;
+                        if (!(getOptimisticImageUrl && result)) {
+                          _context.next = 8;
+                          break;
+                        }
+                        optimisticImageURL = getOptimisticImageUrl(emojiId);
+                        if (!(result.representation && 'imagePath' in result.representation)) {
+                          _context.next = 8;
+                          break;
+                        }
+                        return _context.abrupt("return", _objectSpread(_objectSpread({}, result), {}, {
+                          representation: _objectSpread(_objectSpread({}, result.representation), {}, {
+                            imagePath: optimisticImageURL
+                          })
+                        }));
+                      case 8:
+                        return _context.abrupt("return", result);
+                      case 9:
+                      case "end":
+                        return _context.stop();
+                    }
+                  }, _callee);
+                }));
+                return function (_x2) {
+                  return _ref.apply(this, arguments);
                 };
-
-                // This usually fast because the emojiProvider already has all emojis fetched.
-                return emojiProvider.fetchByEmojiId(emojiId, true);
-              });
-              return _context.abrupt("return", Promise.all(fetches));
+              }());
+              return _context2.abrupt("return", Promise.all(fetches));
             case 8:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
-        }, _callee, this);
+        }, _callee2, this);
       }));
       function fetchNodesData(_x) {
         return _fetchNodesData.apply(this, arguments);

package/dist/types/emojiPluginType.d.ts

@@ -28,6 +28,7 @@ type EditorViewModePluginType = NextEditorPlugin<'editorViewMode', {
     sharedState: EditorViewModePluginState;
 }>;
 export interface EmojiPluginOptions {
+    disableAutoformat?: boolean;
     emojiNodeDataProvider?: EmojiNodeDataProvider;
     emojiProvider?: Promise<EmojiProvider>;
     headless?: boolean;

package/dist/types/pm-plugins/ascii-input-rules.d.ts

@@ -4,6 +4,6 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI, FeatureFlags } from '@atlaskit/editor-common/types';
 import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import { type EmojiPlugin } from '../emojiPluginType';
-export declare function inputRulePlugin(schema: Schema, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, pluginInjectionApi: ExtractInjectionAPI<EmojiPlugin> | undefined): SafePlugin | undefined;
+export declare function inputRulePlugin(schema: Schema, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, pluginInjectionApi: ExtractInjectionAPI<EmojiPlugin> | undefined, disableAutoformat?: boolean): SafePlugin | undefined;
 declare const plugins: (schema: Schema, providerFactory: ProviderFactory, featureFlags: FeatureFlags, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, pluginInjectionApi: ExtractInjectionAPI<EmojiPlugin> | undefined) => SafePlugin[];
 export default plugins;

package/dist/types-ts4.5/emojiPluginType.d.ts

@@ -28,6 +28,7 @@ type EditorViewModePluginType = NextEditorPlugin<'editorViewMode', {
     sharedState: EditorViewModePluginState;
 }>;
 export interface EmojiPluginOptions {
+    disableAutoformat?: boolean;
     emojiNodeDataProvider?: EmojiNodeDataProvider;
     emojiProvider?: Promise<EmojiProvider>;
     headless?: boolean;

package/dist/types-ts4.5/pm-plugins/ascii-input-rules.d.ts

@@ -4,6 +4,6 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI, FeatureFlags } from '@atlaskit/editor-common/types';
 import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import { type EmojiPlugin } from '../emojiPluginType';
-export declare function inputRulePlugin(schema: Schema, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, pluginInjectionApi: ExtractInjectionAPI<EmojiPlugin> | undefined): SafePlugin | undefined;
+export declare function inputRulePlugin(schema: Schema, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, pluginInjectionApi: ExtractInjectionAPI<EmojiPlugin> | undefined, disableAutoformat?: boolean): SafePlugin | undefined;
 declare const plugins: (schema: Schema, providerFactory: ProviderFactory, featureFlags: FeatureFlags, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, pluginInjectionApi: ExtractInjectionAPI<EmojiPlugin> | undefined) => SafePlugin[];
 export default plugins;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-emoji",
-	"version": "7.1.2",
+	"version": "7.3.0",
 	"description": "Emoji plugin for @atlaskit/editor-core",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,14 +29,14 @@
 		"@atlaskit/editor-plugin-metrics": "^7.0.0",
 		"@atlaskit/editor-plugin-type-ahead": "^6.4.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-shared-styles": "^3.6.0",
+		"@atlaskit/editor-shared-styles": "^3.7.0",
 		"@atlaskit/emoji": "^69.5.0",
 		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/node-data-provider": "^7.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/prosemirror-input-rules": "^3.5.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.9.0",
+		"@atlaskit/tmp-editor-statsig": "^13.10.0",
 		"@atlaskit/tokens": "^6.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -45,7 +45,7 @@
 		"react-loadable": "^5.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.10.0",
+		"@atlaskit/editor-common": "^110.11.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},