@atlaskit/editor-plugin-emoji 2.3.1 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-emoji
 
+## 2.4.0
+
+### Minor Changes
+
+- [#135270](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/135270)
+  [`4a75557335357`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4a75557335357) -
+  [ux] [ED-23237] feat(node data provider): wire up to emoji provider
+
+## 2.3.2
+
+### Patch Changes
+
+- [#134213](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/134213)
+  [`93bd7032842ec`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/93bd7032842ec) -
+  [ux] [ED-24636] Bump ADF Schema package
+
 ## 2.3.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/emoji.js

@@ -9,6 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _emoji = require("@atlaskit/editor-common/emoji");
 var _Emoji = _interopRequireDefault(require("../ui/Emoji"));
+var _NdpEmoji = require("../ui/NdpEmoji");
 var EmojiAssistiveTextComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
   var emojiShortName = _ref.emojiShortName;
   var intl = (0, _reactIntlNext.useIntl)();
@@ -23,10 +24,17 @@ var EmojiAssistiveTextComponent = /*#__PURE__*/_react.default.memo(function (_re
   );
 });
 function EmojiNodeView(props) {
+  var _props$options;
   var _props$node$attrs = props.node.attrs,
     shortName = _props$node$attrs.shortName,
     id = _props$node$attrs.id,
     text = _props$node$attrs.text;
+  if ((_props$options = props.options) !== null && _props$options !== void 0 && _props$options.emojiNodeDataProvider) {
+    return /*#__PURE__*/_react.default.createElement(_NdpEmoji.NdpEmoji, {
+      node: props.node,
+      emojiNodeDataProvider: props.options.emojiNodeDataProvider
+    });
+  }
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(EmojiAssistiveTextComponent, {
     emojiShortName: shortName
   }), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_Emoji.default, {

package/dist/cjs/plugin.js

@@ -197,7 +197,7 @@ var emojiPlugin = exports.emojiPlugin = function emojiPlugin(_ref2) {
       return [{
         name: 'emoji',
         plugin: function plugin(pmPluginFactoryParams) {
-          return createEmojiPlugin(pmPluginFactoryParams);
+          return createEmojiPlugin(pmPluginFactoryParams, options);
         }
       }, {
         name: 'emojiAsciiInputRule',
@@ -344,7 +344,7 @@ var emojiPluginKey = exports.emojiPluginKey = new _state.PluginKey('emojiPlugin'
 function getEmojiPluginState(state) {
   return emojiPluginKey.getState(state) || {};
 }
-function createEmojiPlugin(pmPluginFactoryParams) {
+function createEmojiPlugin(pmPluginFactoryParams, options) {
   return new _safePlugin.SafePlugin({
     key: emojiPluginKey,
     state: {
@@ -382,7 +382,8 @@ function createEmojiPlugin(pmPluginFactoryParams) {
           pmPluginFactoryParams: pmPluginFactoryParams,
           Component: _emoji3.EmojiNodeView,
           extraComponentProps: {
-            providerFactory: pmPluginFactoryParams.providerFactory
+            providerFactory: pmPluginFactoryParams.providerFactory,
+            options: options
           }
         })
       }

package/dist/cjs/ui/LoadableSimpleEmoji.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LoadableSimpleEmojiPlaceholder = exports.LoadableSimpleEmoji = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _reactLoadable = _interopRequireDefault(require("react-loadable"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var LoadableSimpleEmoji = exports.LoadableSimpleEmoji = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_simpleEmoji" */'./SimpleEmoji'));
+    }).then(function (component) {
+      return component.SimpleEmoji;
+    });
+  },
+  loading: function loading() {
+    return null;
+  }
+});
+var LoadableSimpleEmojiPlaceholder = exports.LoadableSimpleEmojiPlaceholder = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_simpleEmoji" */'./SimpleEmoji'));
+    }).then(function (component) {
+      return component.SimpleEmojiPlaceholder;
+    });
+  },
+  loading: function loading() {
+    return null;
+  }
+});

package/dist/cjs/ui/NdpEmoji.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NdpEmoji = NdpEmoji;
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _emoji = require("@atlaskit/editor-common/emoji");
+var _pluginHooks = require("@atlaskit/node-data-provider/plugin-hooks");
+var _LoadableSimpleEmoji = require("./LoadableSimpleEmoji");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+
+function NdpEmoji(props) {
+  var emojiNode = props.node;
+  var value = (0, _pluginHooks.useNodeDataProviderGet)({
+    node: emojiNode,
+    provider: props.emojiNodeDataProvider
+  });
+  if (value.state === 'loading') {
+    return (0, _react2.jsx)(EmojiCommonWrapper, {
+      emojiNode: emojiNode
+    }, (0, _react2.jsx)(_LoadableSimpleEmoji.LoadableSimpleEmojiPlaceholder, {
+      shortName: emojiNode.attrs.shortName
+    }));
+  }
+  if (value.state === 'failed') {
+    return (0, _react2.jsx)(EmojiCommonWrapper, {
+      emojiNode: emojiNode
+    }, (0, _react2.jsx)(_react.Fragment, null, emojiNode.attrs.text || emojiNode.attrs.shortName));
+  }
+  return (0, _react2.jsx)(EmojiCommonWrapper, {
+    emojiNode: emojiNode
+  }, (0, _react2.jsx)(_LoadableSimpleEmoji.LoadableSimpleEmoji, {
+    emojiDescription: value.result
+  }));
+}
+var clickSelectWrapperStyle = (0, _react2.css)({
+  userSelect: 'all'
+});
+var EmojiAssistiveTextComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var emojiShortName = _ref.emojiShortName;
+  var intl = (0, _reactIntlNext.useIntl)();
+  return (
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    (0, _react2.jsx)("span", {
+      style: {
+        fontSize: 0
+      }
+    }, "".concat(intl.formatMessage(_emoji.messages.emojiNodeLabel), " ").concat(emojiShortName))
+  );
+});
+function EmojiCommonWrapper(_ref2) {
+  var emojiNode = _ref2.emojiNode,
+    children = _ref2.children;
+  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(EmojiAssistiveTextComponent, {
+    emojiShortName: emojiNode.attrs.shortName
+  }), (0, _react2.jsx)("span", null, (0, _react2.jsx)("span", {
+    css: clickSelectWrapperStyle
+  }, (0, _react2.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/cjs/ui/SimpleEmoji.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SimpleEmoji = SimpleEmoji;
+exports.SimpleEmojiPlaceholder = SimpleEmojiPlaceholder;
+var _react = _interopRequireDefault(require("react"));
+var _emoji = require("@atlaskit/emoji");
+function SimpleEmoji(_ref) {
+  var emojiDescription = _ref.emojiDescription;
+  return /*#__PURE__*/_react.default.createElement(_emoji.Emoji, {
+    emoji: emojiDescription,
+    autoWidth: false,
+    editorEmoji: true,
+    fitToHeight: _emoji.defaultEmojiHeight
+  });
+}
+function SimpleEmojiPlaceholder(_ref2) {
+  var shortName = _ref2.shortName;
+  return /*#__PURE__*/_react.default.createElement(_emoji.EmojiPlaceholder, {
+    shortName: shortName,
+    showTooltip: false,
+    size: _emoji.defaultEmojiHeight,
+    loading: true
+  });
+}

package/dist/es2019/nodeviews/emoji.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { messages } from '@atlaskit/editor-common/emoji';
 import Emoji from '../ui/Emoji';
+import { NdpEmoji } from '../ui/NdpEmoji';
 const EmojiAssistiveTextComponent = /*#__PURE__*/React.memo(({
   emojiShortName
 }) => {
@@ -17,11 +18,18 @@ const EmojiAssistiveTextComponent = /*#__PURE__*/React.memo(({
   );
 });
 export function EmojiNodeView(props) {
+  var _props$options;
   const {
     shortName,
     id,
     text
   } = props.node.attrs;
+  if ((_props$options = props.options) !== null && _props$options !== void 0 && _props$options.emojiNodeDataProvider) {
+    return /*#__PURE__*/React.createElement(NdpEmoji, {
+      node: props.node,
+      emojiNodeDataProvider: props.options.emojiNodeDataProvider
+    });
+  }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EmojiAssistiveTextComponent, {
     emojiShortName: shortName
   }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Emoji, {

package/dist/es2019/plugin.js

@@ -178,7 +178,7 @@ export const emojiPlugin = ({
     pmPlugins() {
       return [{
         name: 'emoji',
-        plugin: pmPluginFactoryParams => createEmojiPlugin(pmPluginFactoryParams)
+        plugin: pmPluginFactoryParams => createEmojiPlugin(pmPluginFactoryParams, options)
       }, {
         name: 'emojiAsciiInputRule',
         plugin: ({
@@ -319,7 +319,7 @@ export const emojiPluginKey = new PluginKey('emojiPlugin');
 export function getEmojiPluginState(state) {
   return emojiPluginKey.getState(state) || {};
 }
-export function createEmojiPlugin(pmPluginFactoryParams) {
+export function createEmojiPlugin(pmPluginFactoryParams, options) {
   return new SafePlugin({
     key: emojiPluginKey,
     state: {
@@ -360,7 +360,8 @@ export function createEmojiPlugin(pmPluginFactoryParams) {
           pmPluginFactoryParams,
           Component: EmojiNodeView,
           extraComponentProps: {
-            providerFactory: pmPluginFactoryParams.providerFactory
+            providerFactory: pmPluginFactoryParams.providerFactory,
+            options
           }
         })
       }

package/dist/es2019/ui/LoadableSimpleEmoji.js

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

package/dist/es2019/ui/NdpEmoji.js

@@ -0,0 +1,66 @@
+/**
+ * @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) {
+  const emojiNode = props.node;
+  const 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
+  }));
+}
+const clickSelectWrapperStyle = css({
+  userSelect: 'all'
+});
+const EmojiAssistiveTextComponent = /*#__PURE__*/React.memo(({
+  emojiShortName
+}) => {
+  const intl = useIntl();
+  return (
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    jsx("span", {
+      style: {
+        fontSize: 0
+      }
+    }, `${intl.formatMessage(messages.emojiNodeLabel)} ${emojiShortName}`)
+  );
+});
+function EmojiCommonWrapper({
+  emojiNode,
+  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/es2019/ui/SimpleEmoji.js

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

package/dist/esm/nodeviews/emoji.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { messages } from '@atlaskit/editor-common/emoji';
 import Emoji from '../ui/Emoji';
+import { NdpEmoji } from '../ui/NdpEmoji';
 var EmojiAssistiveTextComponent = /*#__PURE__*/React.memo(function (_ref) {
   var emojiShortName = _ref.emojiShortName;
   var intl = useIntl();
@@ -16,10 +17,17 @@ var EmojiAssistiveTextComponent = /*#__PURE__*/React.memo(function (_ref) {
   );
 });
 export function EmojiNodeView(props) {
+  var _props$options;
   var _props$node$attrs = props.node.attrs,
     shortName = _props$node$attrs.shortName,
     id = _props$node$attrs.id,
     text = _props$node$attrs.text;
+  if ((_props$options = props.options) !== null && _props$options !== void 0 && _props$options.emojiNodeDataProvider) {
+    return /*#__PURE__*/React.createElement(NdpEmoji, {
+      node: props.node,
+      emojiNodeDataProvider: props.options.emojiNodeDataProvider
+    });
+  }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EmojiAssistiveTextComponent, {
     emojiShortName: shortName
   }), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Emoji, {

package/dist/esm/plugin.js

@@ -184,7 +184,7 @@ export var emojiPlugin = function emojiPlugin(_ref2) {
       return [{
         name: 'emoji',
         plugin: function plugin(pmPluginFactoryParams) {
-          return createEmojiPlugin(pmPluginFactoryParams);
+          return createEmojiPlugin(pmPluginFactoryParams, options);
         }
       }, {
         name: 'emojiAsciiInputRule',
@@ -331,7 +331,7 @@ export var emojiPluginKey = new PluginKey('emojiPlugin');
 export function getEmojiPluginState(state) {
   return emojiPluginKey.getState(state) || {};
 }
-export function createEmojiPlugin(pmPluginFactoryParams) {
+export function createEmojiPlugin(pmPluginFactoryParams, options) {
   return new SafePlugin({
     key: emojiPluginKey,
     state: {
@@ -369,7 +369,8 @@ export function createEmojiPlugin(pmPluginFactoryParams) {
           pmPluginFactoryParams: pmPluginFactoryParams,
           Component: EmojiNodeView,
           extraComponentProps: {
-            providerFactory: pmPluginFactoryParams.providerFactory
+            providerFactory: pmPluginFactoryParams.providerFactory,
+            options: options
           }
         })
       }

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

package/dist/types/plugin.d.ts

@@ -3,7 +3,7 @@ import type { Command, PMPluginFactoryParams, TypeAheadItem } from '@atlaskit/ed
 import type { EditorState } 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;
@@ -39,4 +39,4 @@ export declare function createRateLimitReachedFunction<LimitedFunction extends (
 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): SafePlugin<EmojiPluginState>;

package/dist/types/types.d.ts

@@ -3,8 +3,10 @@ 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;
 }
 export type EmojiPluginState = {
     emojiProvider?: EmojiProvider;

package/dist/types/ui/LoadableSimpleEmoji.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import Loadable from 'react-loadable';
+import { type SimpleEmojiPlaceholderProps, type SimpleEmojiProps } from './SimpleEmoji';
+export declare const LoadableSimpleEmoji: import("react").ComponentType<import("react").PropsWithChildren<SimpleEmojiProps>> & Loadable.LoadableComponent;
+export declare const LoadableSimpleEmojiPlaceholder: import("react").ComponentType<import("react").PropsWithChildren<SimpleEmojiPlaceholderProps>> & Loadable.LoadableComponent;

package/dist/types/ui/NdpEmoji.d.ts

@@ -0,0 +1,7 @@
+import { jsx } from '@emotion/react';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { type EmojiNodeDataProvider } from '@atlaskit/node-data-provider/emoji-provider';
+export declare function NdpEmoji(props: {
+    node: PMNode;
+    emojiNodeDataProvider: EmojiNodeDataProvider;
+}): jsx.JSX.Element;

package/dist/types/ui/SimpleEmoji.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { type EmojiDescription } from '@atlaskit/emoji';
+export type SimpleEmojiProps = {
+    emojiDescription: EmojiDescription;
+};
+export declare function SimpleEmoji({ emojiDescription }: {
+    emojiDescription: EmojiDescription;
+}): JSX.Element;
+export type SimpleEmojiPlaceholderProps = {
+    shortName: string;
+};
+export declare function SimpleEmojiPlaceholder({ shortName }: {
+    shortName: string;
+}): JSX.Element;

package/dist/types-ts4.5/nodeviews/emoji.d.ts

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

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

@@ -3,7 +3,7 @@ import type { Command, PMPluginFactoryParams, TypeAheadItem } from '@atlaskit/ed
 import type { EditorState } 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;
@@ -39,4 +39,4 @@ export declare function createRateLimitReachedFunction<LimitedFunction extends (
 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): SafePlugin<EmojiPluginState>;

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

@@ -3,8 +3,10 @@ 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;
 }
 export type EmojiPluginState = {
     emojiProvider?: EmojiProvider;

package/dist/types-ts4.5/ui/LoadableSimpleEmoji.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import Loadable from 'react-loadable';
+import { type SimpleEmojiPlaceholderProps, type SimpleEmojiProps } from './SimpleEmoji';
+export declare const LoadableSimpleEmoji: import("react").ComponentType<import("react").PropsWithChildren<SimpleEmojiProps>> & Loadable.LoadableComponent;
+export declare const LoadableSimpleEmojiPlaceholder: import("react").ComponentType<import("react").PropsWithChildren<SimpleEmojiPlaceholderProps>> & Loadable.LoadableComponent;

package/dist/types-ts4.5/ui/NdpEmoji.d.ts

@@ -0,0 +1,7 @@
+import { jsx } from '@emotion/react';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { type EmojiNodeDataProvider } from '@atlaskit/node-data-provider/emoji-provider';
+export declare function NdpEmoji(props: {
+    node: PMNode;
+    emojiNodeDataProvider: EmojiNodeDataProvider;
+}): jsx.JSX.Element;

package/dist/types-ts4.5/ui/SimpleEmoji.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { type EmojiDescription } from '@atlaskit/emoji';
+export type SimpleEmojiProps = {
+    emojiDescription: EmojiDescription;
+};
+export declare function SimpleEmoji({ emojiDescription }: {
+    emojiDescription: EmojiDescription;
+}): JSX.Element;
+export type SimpleEmojiPlaceholderProps = {
+    shortName: string;
+};
+export declare function SimpleEmojiPlaceholder({ shortName }: {
+    shortName: string;
+}): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-emoji",
-	"version": "2.3.1",
+	"version": "2.4.0",
 	"description": "Emoji plugin for @atlaskit/editor-core",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -21,17 +21,19 @@
 		"runReact18": false
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^40.8.1",
-		"@atlaskit/editor-common": "^88.0.0",
+		"@atlaskit/adf-schema": "^40.9.0",
+		"@atlaskit/editor-common": "^88.4.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
 		"@atlaskit/editor-plugin-type-ahead": "^1.8.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/emoji": "^67.7.0",
+		"@atlaskit/node-data-provider": "^2.0.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/prosemirror-input-rules": "^3.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
-		"react-intl-next": "npm:react-intl@^5.18.1"
+		"react-intl-next": "npm:react-intl@^5.18.1",
+		"react-loadable": "^5.1.0"
 	},
 	"peerDependencies": {
 		"react": "^16.8.0"