@atlaskit/editor-plugin-emoji 2.3.2 → 2.5.0

package/dist/esm/plugin.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 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 _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import { emoji } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -15,6 +17,7 @@ import { EmojiTypeAheadItem, recordSelectionFailedSli, recordSelectionSucceededS
 import { fg } from '@atlaskit/platform-feature-flags';
 import { createEmojiFragment, insertEmoji } from './commands/insert-emoji';
 import { EmojiNodeView } from './nodeviews/emoji';
+import { ACTIONS, openTypeAhead as openTypeAheadAction, setAsciiMap as setAsciiMapAction, setProvider as setProviderAction } from './pm-plugins/actions';
 import { inputRulePlugin as asciiInputRulePlugin } from './pm-plugins/ascii-input-rules';
 export var emojiToTypeaheadItem = function emojiToTypeaheadItem(emoji, emojiProvider) {
   return {
@@ -70,6 +73,7 @@ export var emojiPlugin = function emojiPlugin(_ref2) {
   var _api$analytics5;
   var options = _ref2.config,
     api = _ref2.api;
+  var previousEmojiProvider;
   var typeAhead = {
     id: TypeAheadAvailableNodes.EMOJI,
     trigger: TRIGGER,
@@ -184,7 +188,7 @@ export var emojiPlugin = function emojiPlugin(_ref2) {
       return [{
         name: 'emoji',
         plugin: function plugin(pmPluginFactoryParams) {
-          return createEmojiPlugin(pmPluginFactoryParams);
+          return createEmojiPlugin(pmPluginFactoryParams, options, api);
         }
       }, {
         name: 'emojiAsciiInputRule',
@@ -193,7 +197,7 @@ export var emojiPlugin = function emojiPlugin(_ref2) {
           var schema = _ref7.schema,
             providerFactory = _ref7.providerFactory,
             featureFlags = _ref7.featureFlags;
-          return asciiInputRulePlugin(schema, providerFactory, featureFlags, api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions);
+          return asciiInputRulePlugin(schema, providerFactory, featureFlags, api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions, api);
         }
       }];
     },
@@ -204,28 +208,57 @@ export var emojiPlugin = function emojiPlugin(_ref2) {
       }
       var _ref8 = (_emojiPluginKey$getSt = emojiPluginKey.getState(editorState)) !== null && _emojiPluginKey$getSt !== void 0 ? _emojiPluginKey$getSt : {},
         emojiResourceConfig = _ref8.emojiResourceConfig,
-        asciiMap = _ref8.asciiMap;
+        asciiMap = _ref8.asciiMap,
+        emojiProvider = _ref8.emojiProvider;
       return {
         emojiResourceConfig: emojiResourceConfig,
         asciiMap: asciiMap,
-        typeAheadHandler: typeAhead
+        typeAheadHandler: typeAhead,
+        emojiProvider: emojiProvider
       };
     },
     actions: {
-      openTypeAhead: function openTypeAhead(inputMethod) {
-        var _api$typeAhead;
-        return Boolean(api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.open({
-          triggerHandler: typeAhead,
-          inputMethod: inputMethod
+      openTypeAhead: openTypeAheadAction(typeAhead, api),
+      setProvider: function () {
+        var _setProvider = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(providerPromise) {
+          var _api$core$actions$exe;
+          var provider;
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return providerPromise;
+              case 2:
+                provider = _context.sent;
+                if (!(previousEmojiProvider === provider || (options === null || options === void 0 ? void 0 : options.emojiProvider) === providerPromise)) {
+                  _context.next = 5;
+                  break;
+                }
+                return _context.abrupt("return", false);
+              case 5:
+                previousEmojiProvider = provider;
+                return _context.abrupt("return", (_api$core$actions$exe = api === null || api === void 0 ? void 0 : api.core.actions.execute(function (_ref9) {
+                  var tr = _ref9.tr;
+                  return setProviderTr(provider)(tr);
+                })) !== null && _api$core$actions$exe !== void 0 ? _api$core$actions$exe : false);
+              case 7:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
         }));
-      }
+        function setProvider(_x) {
+          return _setProvider.apply(this, arguments);
+        }
+        return setProvider;
+      }()
     },
     commands: {
       insertEmoji: insertEmoji(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions)
     },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref9) {
-        var formatMessage = _ref9.formatMessage;
+      quickInsert: function quickInsert(_ref10) {
+        var formatMessage = _ref10.formatMessage;
         return [{
           id: 'emoji',
           title: formatMessage(messages.emoji),
@@ -236,9 +269,9 @@ export var emojiPlugin = function emojiPlugin(_ref2) {
             return /*#__PURE__*/React.createElement(IconEmoji, null);
           },
           action: function action(insert, state) {
-            var _api$typeAhead2;
+            var _api$typeAhead;
             var tr = insert(undefined);
-            api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 || _api$typeAhead2.actions.openAtTransaction({
+            api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 || _api$typeAhead.actions.openAtTransaction({
               triggerHandler: typeAhead,
               inputMethod: INPUT_METHOD.QUICK_INSERT
             })(tr);
@@ -255,20 +288,11 @@ export var emojiPlugin = function emojiPlugin(_ref2) {
  * Actions
  */
 
-export var ACTIONS = {
-  SET_PROVIDER: 'SET_PROVIDER',
-  SET_RESULTS: 'SET_RESULTS',
-  SET_ASCII_MAP: 'SET_ASCII_MAP'
-};
 var setAsciiMap = function setAsciiMap(asciiMap) {
   return function (state, dispatch) {
     if (dispatch) {
-      dispatch(state.tr.setMeta(emojiPluginKey, {
-        action: ACTIONS.SET_ASCII_MAP,
-        params: {
-          asciiMap: asciiMap
-        }
-      }));
+      var _tr = setAsciiMapAction(asciiMap)(state.tr);
+      dispatch(_tr);
     }
     return true;
   };
@@ -310,28 +334,29 @@ var logRateWarning = function logRateWarning() {
     console.error('The emoji provider injected in the Editor is being reloaded frequently, this will cause a slow Editor experience.');
   }
 };
-export var setProvider = createRateLimitReachedFunction(function (provider) {
-  return function (state, dispatch) {
-    if (dispatch) {
-      dispatch(state.tr.setMeta(emojiPluginKey, {
-        action: ACTIONS.SET_PROVIDER,
-        params: {
-          provider: provider
-        }
-      }));
-    }
-    return true;
+export var setProviderTr = createRateLimitReachedFunction(function (provider) {
+  return function (tr) {
+    return setProviderAction(provider)(tr);
   };
 },
 // If we change the emoji provider more than three times every 5 seconds we should warn.
 // This seems like a really long time but the performance can be that laggy that we don't
 // even get 3 events in 3 seconds and miss this indicator.
 5000, 3, logRateWarning);
+export var setProvider = function setProvider(provider) {
+  return function (state, dispatch) {
+    if (dispatch) {
+      var _tr2 = setProviderTr(provider)(state.tr);
+      dispatch(_tr2);
+    }
+    return true;
+  };
+};
 export var emojiPluginKey = new PluginKey('emojiPlugin');
 export function getEmojiPluginState(state) {
   return emojiPluginKey.getState(state) || {};
 }
-export function createEmojiPlugin(pmPluginFactoryParams) {
+export function createEmojiPlugin(pmPluginFactoryParams, options, api) {
   return new SafePlugin({
     key: emojiPluginKey,
     state: {
@@ -339,25 +364,29 @@ export function createEmojiPlugin(pmPluginFactoryParams) {
         return {};
       },
       apply: function apply(tr, pluginState) {
-        var _ref10 = tr.getMeta(emojiPluginKey) || {
+        var _ref11 = tr.getMeta(emojiPluginKey) || {
             action: null,
             params: null
           },
-          action = _ref10.action,
-          params = _ref10.params;
+          action = _ref11.action,
+          params = _ref11.params;
         var newPluginState = pluginState;
         switch (action) {
           case ACTIONS.SET_PROVIDER:
             newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
               emojiProvider: params.provider
             });
-            pmPluginFactoryParams.dispatch(emojiPluginKey, newPluginState);
+            if (!fg('platform_editor_get_emoji_provider_from_config')) {
+              pmPluginFactoryParams.dispatch(emojiPluginKey, newPluginState);
+            }
             return newPluginState;
           case ACTIONS.SET_ASCII_MAP:
             newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
               asciiMap: params.asciiMap
             });
-            pmPluginFactoryParams.dispatch(emojiPluginKey, newPluginState);
+            if (!fg('platform_editor_get_emoji_provider_from_config')) {
+              pmPluginFactoryParams.dispatch(emojiPluginKey, newPluginState);
+            }
             return newPluginState;
         }
         return newPluginState;
@@ -369,7 +398,9 @@ export function createEmojiPlugin(pmPluginFactoryParams) {
           pmPluginFactoryParams: pmPluginFactoryParams,
           Component: EmojiNodeView,
           extraComponentProps: {
-            providerFactory: pmPluginFactoryParams.providerFactory
+            providerFactory: pmPluginFactoryParams.providerFactory,
+            options: options,
+            api: api
           }
         })
       }
@@ -379,28 +410,36 @@ export function createEmojiPlugin(pmPluginFactoryParams) {
         switch (name) {
           case 'emojiProvider':
             if (!providerPromise) {
-              var _setProvider;
-              return setProvider === null || setProvider === void 0 || (_setProvider = setProvider(undefined)) === null || _setProvider === void 0 ? void 0 : _setProvider(editorView.state, editorView.dispatch);
+              var _setProvider2;
+              return setProvider === null || setProvider === void 0 || (_setProvider2 = setProvider(undefined)) === null || _setProvider2 === void 0 ? void 0 : _setProvider2(editorView.state, editorView.dispatch);
             }
             providerPromise.then(function (provider) {
-              var _setProvider2;
-              setProvider === null || setProvider === void 0 || (_setProvider2 = setProvider(provider)) === null || _setProvider2 === void 0 || _setProvider2(editorView.state, editorView.dispatch);
+              var _setProvider3;
+              setProvider === null || setProvider === void 0 || (_setProvider3 = setProvider(provider)) === null || _setProvider3 === void 0 || _setProvider3(editorView.state, editorView.dispatch);
               provider.getAsciiMap().then(function (asciiMap) {
                 setAsciiMap(asciiMap)(editorView.state, editorView.dispatch);
               });
             }).catch(function () {
-              var _setProvider3;
-              return setProvider === null || setProvider === void 0 || (_setProvider3 = setProvider(undefined)) === null || _setProvider3 === void 0 ? void 0 : _setProvider3(editorView.state, editorView.dispatch);
+              var _setProvider4;
+              return setProvider === null || setProvider === void 0 || (_setProvider4 = setProvider(undefined)) === null || _setProvider4 === void 0 ? void 0 : _setProvider4(editorView.state, editorView.dispatch);
             });
             break;
         }
         return;
       };
-      pmPluginFactoryParams.providerFactory.subscribe('emojiProvider', providerHandler);
+      if (fg('platform_editor_get_emoji_provider_from_config')) {
+        if (options !== null && options !== void 0 && options.emojiProvider) {
+          providerHandler('emojiProvider', options.emojiProvider);
+        }
+      } else {
+        pmPluginFactoryParams.providerFactory.subscribe('emojiProvider', providerHandler);
+      }
       return {
         destroy: function destroy() {
-          if (pmPluginFactoryParams.providerFactory) {
-            pmPluginFactoryParams.providerFactory.unsubscribe('emojiProvider', providerHandler);
+          if (!fg('platform_editor_get_emoji_provider_from_config')) {
+            if (pmPluginFactoryParams.providerFactory) {
+              pmPluginFactoryParams.providerFactory.unsubscribe('emojiProvider', providerHandler);
+            }
           }
         }
       };

package/dist/esm/pm-plugins/actions.js

@@ -0,0 +1,35 @@
+import { emojiPluginKey } from '../plugin';
+export var ACTIONS = {
+  SET_PROVIDER: 'SET_PROVIDER',
+  SET_RESULTS: 'SET_RESULTS',
+  SET_ASCII_MAP: 'SET_ASCII_MAP'
+};
+export var setAsciiMap = function setAsciiMap(asciiMap) {
+  return function (tr) {
+    return tr.setMeta(emojiPluginKey, {
+      action: ACTIONS.SET_ASCII_MAP,
+      params: {
+        asciiMap: asciiMap
+      }
+    });
+  };
+};
+export var openTypeAhead = function openTypeAhead(typeaheadHandler, api) {
+  return function (inputMethod) {
+    var _api$typeAhead;
+    return Boolean(api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.open({
+      triggerHandler: typeaheadHandler,
+      inputMethod: inputMethod
+    }));
+  };
+};
+export var setProvider = function setProvider(provider) {
+  return function (tr) {
+    return tr.setMeta(emojiPluginKey, {
+      action: ACTIONS.SET_PROVIDER,
+      params: {
+        provider: provider
+      }
+    });
+  };
+};

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

@@ -11,17 +11,18 @@ 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 { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { createPlugin, leafNodeReplacementCharacter } from '@atlaskit/prosemirror-input-rules';
 var matcher;
-export function inputRulePlugin(schema, providerFactory, featureFlags, editorAnalyticsAPI) {
+export function inputRulePlugin(schema, providerFactory, featureFlags, editorAnalyticsAPI, pluginInjectionApi) {
   if (schema.nodes.emoji && providerFactory) {
-    initMatcher(providerFactory);
+    initMatcher(providerFactory, pluginInjectionApi);
     var asciiEmojiRule = createRule(AsciiEmojiMatcher.REGEX, inputRuleHandler(editorAnalyticsAPI));
     return new SafePlugin(createPlugin('emoji', [asciiEmojiRule]));
   }
   return;
 }
-function initMatcher(providerFactory) {
+function initMatcher(providerFactory, pluginInjectionApi) {
   var handleProvider = function handleProvider(_name, provider) {
     if (!provider) {
       return;
@@ -32,7 +33,19 @@ function initMatcher(providerFactory) {
       });
     });
   };
-  providerFactory.subscribe('emojiProvider', handleProvider);
+  if (fg('platform_editor_get_emoji_provider_from_config')) {
+    pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.emoji.sharedState.onChange(function (_ref) {
+      var nextSharedState = _ref.nextSharedState;
+      var emojiProvider = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider;
+      if (emojiProvider) {
+        emojiProvider.getAsciiMap().then(function (map) {
+          matcher = new RecordingAsciiEmojiMatcher(emojiProvider, map);
+        });
+      }
+    });
+  } else {
+    providerFactory.subscribe('emojiProvider', handleProvider);
+  }
 }
 var inputRuleHandler = function inputRuleHandler(editorAnalyticsAPI) {
   return function (state, matchParts, start, end) {
@@ -218,8 +231,8 @@ var AsciiEmojiTransactionCreator = /*#__PURE__*/function () {
   return AsciiEmojiTransactionCreator;
 }();
 export var stateKey = new PluginKey('asciiEmojiPlugin');
-var plugins = function plugins(schema, providerFactory, featureFlags, editorAnalyticsAPI) {
-  return [inputRulePlugin(schema, providerFactory, featureFlags, editorAnalyticsAPI)].filter(function (plugin) {
+var plugins = function plugins(schema, providerFactory, featureFlags, editorAnalyticsAPI, pluginInjectionApi) {
+  return [inputRulePlugin(schema, providerFactory, featureFlags, editorAnalyticsAPI, pluginInjectionApi)].filter(function (plugin) {
     return !!plugin;
   });
 };

package/dist/esm/ui/Emoji/emoji-next.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { ResourcedEmoji } from '@atlaskit/emoji/element';
+var useEmojiProvider = function useEmojiProvider(pluginInjectionApi) {
+  var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['emoji']),
+    emojiState = _useSharedPluginState.emojiState;
+  return emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider;
+};
+var EmojiNode = function EmojiNode(props) {
+  var _resourceConfig$optim;
+  var allowTextFallback = props.allowTextFallback,
+    shortName = props.shortName,
+    id = props.id,
+    fallback = props.fallback,
+    fitToHeight = props.fitToHeight,
+    showTooltip = props.showTooltip,
+    resourceConfig = props.resourceConfig,
+    pluginInjectionApi = props.pluginInjectionApi;
+  var emojiProvider = useEmojiProvider(pluginInjectionApi);
+  if (allowTextFallback && !emojiProvider) {
+    return /*#__PURE__*/React.createElement("span", {
+      "data-emoji-id": id,
+      "data-emoji-short-name": shortName,
+      "data-emoji-text": fallback || shortName
+    }, fallback || shortName);
+  }
+  if (!emojiProvider) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ResourcedEmoji, {
+    emojiId: {
+      id: id,
+      fallback: fallback,
+      shortName: shortName
+    },
+    emojiProvider: Promise.resolve(emojiProvider),
+    showTooltip: showTooltip,
+    fitToHeight: fitToHeight,
+    optimistic: true,
+    optimisticImageURL: resourceConfig === null || resourceConfig === void 0 || (_resourceConfig$optim = resourceConfig.optimisticImageApi) === null || _resourceConfig$optim === void 0 ? void 0 : _resourceConfig$optim.getUrl({
+      id: id,
+      fallback: fallback,
+      shortName: shortName
+    }),
+    editorEmoji: true
+  });
+};
+export default EmojiNode;

package/dist/esm/ui/Emoji/index.js

@@ -7,10 +7,12 @@ var _templateObject;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { Emoji } from '@atlaskit/editor-common/emoji';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { default as EmojiNext } from './emoji-next';
 // eslint-disable-next-line
 var clickSelectWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage\n\tuser-select: all;\n"])));
 export default function EmojiNode(props) {
   return jsx("span", {
     css: clickSelectWrapperStyle
-  }, jsx(Emoji, props));
+  }, fg('platform_editor_get_emoji_provider_from_config') ? jsx(EmojiNext, props) : jsx(Emoji, props));
 }

package/dist/esm/ui/LoadableSimpleEmoji.js

@@ -0,0 +1,21 @@
+import Loadable from 'react-loadable';
+export var LoadableSimpleEmoji = Loadable({
+  loader: function loader() {
+    return import( /* webpackChunkName: "@atlaskit-internal_simpleEmoji" */'./SimpleEmoji').then(function (component) {
+      return component.SimpleEmoji;
+    });
+  },
+  loading: function loading() {
+    return null;
+  }
+});
+export var LoadableSimpleEmojiPlaceholder = Loadable({
+  loader: function loader() {
+    return import( /* webpackChunkName: "@atlaskit-internal_simpleEmoji" */'./SimpleEmoji').then(function (component) {
+      return component.SimpleEmojiPlaceholder;
+    });
+  },
+  loading: function loading() {
+    return null;
+  }
+});

package/dist/esm/ui/NdpEmoji.js

@@ -0,0 +1,64 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React, { Fragment } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
+import { messages } from '@atlaskit/editor-common/emoji';
+import { useNodeDataProviderGet } from '@atlaskit/node-data-provider/plugin-hooks';
+import { LoadableSimpleEmoji, LoadableSimpleEmojiPlaceholder } from './LoadableSimpleEmoji';
+export function NdpEmoji(props) {
+  var emojiNode = props.node;
+  var value = useNodeDataProviderGet({
+    node: emojiNode,
+    provider: props.emojiNodeDataProvider
+  });
+  if (value.state === 'loading') {
+    return jsx(EmojiCommonWrapper, {
+      emojiNode: emojiNode
+    }, jsx(LoadableSimpleEmojiPlaceholder, {
+      shortName: emojiNode.attrs.shortName
+    }));
+  }
+  if (value.state === 'failed') {
+    return jsx(EmojiCommonWrapper, {
+      emojiNode: emojiNode
+    }, jsx(Fragment, null, emojiNode.attrs.text || emojiNode.attrs.shortName));
+  }
+  return jsx(EmojiCommonWrapper, {
+    emojiNode: emojiNode
+  }, jsx(LoadableSimpleEmoji, {
+    emojiDescription: value.result
+  }));
+}
+var clickSelectWrapperStyle = css({
+  userSelect: 'all'
+});
+var EmojiAssistiveTextComponent = /*#__PURE__*/React.memo(function (_ref) {
+  var emojiShortName = _ref.emojiShortName;
+  var intl = useIntl();
+  return (
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    jsx("span", {
+      style: {
+        fontSize: 0
+      }
+    }, "".concat(intl.formatMessage(messages.emojiNodeLabel), " ").concat(emojiShortName))
+  );
+});
+function EmojiCommonWrapper(_ref2) {
+  var emojiNode = _ref2.emojiNode,
+    children = _ref2.children;
+  return jsx(Fragment, null, jsx(EmojiAssistiveTextComponent, {
+    emojiShortName: emojiNode.attrs.shortName
+  }), jsx("span", null, jsx("span", {
+    css: clickSelectWrapperStyle
+  }, jsx("span", {
+    "data-emoji-id": emojiNode.attrs.id,
+    "data-emoji-short-name": emojiNode.attrs.shortName,
+    "data-emoji-text": emojiNode.attrs.text || emojiNode.attrs.shortName
+  }, children))));
+}

package/dist/esm/ui/SimpleEmoji.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Emoji as AtlaskitEmoji, defaultEmojiHeight, EmojiPlaceholder } from '@atlaskit/emoji';
+export function SimpleEmoji(_ref) {
+  var emojiDescription = _ref.emojiDescription;
+  return /*#__PURE__*/React.createElement(AtlaskitEmoji, {
+    emoji: emojiDescription,
+    autoWidth: false,
+    editorEmoji: true,
+    fitToHeight: defaultEmojiHeight
+  });
+}
+export function SimpleEmojiPlaceholder(_ref2) {
+  var shortName = _ref2.shortName;
+  return /*#__PURE__*/React.createElement(EmojiPlaceholder, {
+    shortName: shortName,
+    showTooltip: false,
+    size: defaultEmojiHeight,
+    loading: true
+  });
+}

package/dist/types/nodeviews/emoji.d.ts

@@ -1,7 +1,11 @@
 /// <reference types="react" />
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import type { InlineNodeViewComponentProps } from '@atlaskit/editor-common/react-node-view';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type EmojiPlugin, type EmojiPluginOptions } from '../types';
 export type Props = InlineNodeViewComponentProps & {
     providerFactory: ProviderFactory;
+    options?: EmojiPluginOptions;
+    api?: ExtractInjectionAPI<EmojiPlugin>;
 };
 export declare function EmojiNodeView(props: Props): JSX.Element;

package/dist/types/plugin.d.ts

@@ -1,9 +1,9 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import type { Command, PMPluginFactoryParams, TypeAheadItem } from '@atlaskit/editor-common/types';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { Command, ExtractInjectionAPI, PMPluginFactoryParams, TypeAheadItem } from '@atlaskit/editor-common/types';
+import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import type { EmojiDescription, EmojiProvider } from '@atlaskit/emoji';
-import type { EmojiPlugin, EmojiPluginState } from './types';
+import type { EmojiPlugin, EmojiPluginOptions, EmojiPluginState } from './types';
 export declare const emojiToTypeaheadItem: (emoji: EmojiDescription, emojiProvider?: EmojiProvider) => TypeAheadItem;
 export declare function memoize<ResultFn extends (emoji: EmojiDescription, emojiProvider?: EmojiProvider) => TypeAheadItem>(fn: ResultFn): {
     call: ResultFn;
@@ -15,14 +15,6 @@ export declare const defaultListLimit = 50;
  * from `@atlaskit/editor-core`.
  */
 export declare const emojiPlugin: EmojiPlugin;
-/**
- * Actions
- */
-export declare const ACTIONS: {
-    SET_PROVIDER: string;
-    SET_RESULTS: string;
-    SET_ASCII_MAP: string;
-};
 /**
  *
  * Wrapper to call `onLimitReached` when a specified number of calls of that function
@@ -36,7 +28,8 @@ export declare const ACTIONS: {
  * @returns Wrapped function
  */
 export declare function createRateLimitReachedFunction<LimitedFunction extends (...args: any[]) => any>(fn: Function, limitTime: number, limitCount: number, onLimitReached: () => void): (...args: Parameters<LimitedFunction>) => ReturnType<LimitedFunction> | undefined;
+export declare const setProviderTr: (provider?: EmojiProvider) => (tr: Transaction) => Transaction;
 export declare const setProvider: ((provider?: EmojiProvider) => Command) | undefined;
 export declare const emojiPluginKey: PluginKey<EmojiPluginState>;
 export declare function getEmojiPluginState(state: EditorState): EmojiPluginState;
-export declare function createEmojiPlugin(pmPluginFactoryParams: PMPluginFactoryParams): SafePlugin<EmojiPluginState>;
+export declare function createEmojiPlugin(pmPluginFactoryParams: PMPluginFactoryParams, options?: EmojiPluginOptions, api?: ExtractInjectionAPI<EmojiPlugin>): SafePlugin<EmojiPluginState>;

package/dist/types/pm-plugins/actions.d.ts

@@ -0,0 +1,13 @@
+import { type PublicPluginAPI } from '@atlaskit/editor-common/types';
+import { type TypeAheadHandler, type TypeAheadInputMethod } from '@atlaskit/editor-plugin-type-ahead';
+import { type Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { EmojiDescription, EmojiProvider } from '@atlaskit/emoji';
+import { type EmojiPlugin } from '../types';
+export declare const ACTIONS: {
+    SET_PROVIDER: string;
+    SET_RESULTS: string;
+    SET_ASCII_MAP: string;
+};
+export declare const setAsciiMap: (asciiMap: Map<string, EmojiDescription>) => (tr: Transaction) => Transaction;
+export declare const openTypeAhead: (typeaheadHandler: TypeAheadHandler, api?: PublicPluginAPI<EmojiPlugin>) => (inputMethod: TypeAheadInputMethod) => boolean;
+export declare const setProvider: (provider?: EmojiProvider) => (tr: Transaction) => Transaction;

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

@@ -1,10 +1,11 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import type { FeatureFlags } from '@atlaskit/editor-common/types';
+import type { ExtractInjectionAPI, FeatureFlags } from '@atlaskit/editor-common/types';
 import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-export declare function inputRulePlugin(schema: Schema, providerFactory: ProviderFactory, featureFlags: FeatureFlags, editorAnalyticsAPI: EditorAnalyticsAPI | undefined): SafePlugin | undefined;
+import { type EmojiPlugin } from '../types';
+export declare function inputRulePlugin(schema: Schema, providerFactory: ProviderFactory, featureFlags: FeatureFlags, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, pluginInjectionApi: ExtractInjectionAPI<EmojiPlugin> | undefined): SafePlugin | undefined;
 export declare const stateKey: PluginKey<any>;
-declare const plugins: (schema: Schema, providerFactory: ProviderFactory, featureFlags: FeatureFlags, editorAnalyticsAPI: EditorAnalyticsAPI | undefined) => SafePlugin<any>[];
+declare const plugins: (schema: Schema, providerFactory: ProviderFactory, featureFlags: FeatureFlags, editorAnalyticsAPI: EditorAnalyticsAPI | undefined, pluginInjectionApi: ExtractInjectionAPI<EmojiPlugin> | undefined) => SafePlugin<any>[];
 export default plugins;

package/dist/types/types.d.ts

@@ -3,8 +3,11 @@ import type { EditorCommand, NextEditorPlugin, OptionalPlugin, TypeAheadHandler
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { TypeAheadInputMethod, TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
 import type { EmojiDescription, EmojiId, EmojiProvider, EmojiResourceConfig } from '@atlaskit/emoji';
+import { type EmojiNodeDataProvider } from '@atlaskit/node-data-provider/emoji-provider';
 export interface EmojiPluginOptions {
     headless?: boolean;
+    emojiNodeDataProvider?: EmojiNodeDataProvider;
+    emojiProvider?: Promise<EmojiProvider>;
 }
 export type EmojiPluginState = {
     emojiProvider?: EmojiProvider;
@@ -17,11 +20,12 @@ export type EmojiPluginSharedState = EmojiPluginState & {
 export type EmojiPlugin = NextEditorPlugin<'emoji', {
     pluginConfiguration: EmojiPluginOptions | undefined;
     dependencies: [OptionalPlugin<AnalyticsPlugin>, TypeAheadPlugin];
-    sharedState: Omit<EmojiPluginSharedState, 'emojiProvider'> | undefined;
+    sharedState: EmojiPluginSharedState | undefined;
     commands: {
         insertEmoji: (emojiId: EmojiId, inputMethod?: INPUT_METHOD.PICKER | INPUT_METHOD.ASCII | INPUT_METHOD.TYPEAHEAD) => EditorCommand;
     };
     actions: {
         openTypeAhead: (inputMethod: TypeAheadInputMethod) => boolean;
+        setProvider: (provider: Promise<EmojiProvider>) => Promise<boolean>;
     };
 }>;