@atlaskit/editor-plugin-emoji 6.2.0 → 6.3.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-emoji
 
+## 6.3.0
+
+### Minor Changes
+
+- [`e49f1d35e507a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e49f1d35e507a) -
+  [https://product-fabric.atlassian.net/browse/ED-29349](ED-29349) - add one tick provider (SSR)
+  support for emojis in editor and live pages
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.2.0
 
 ### Minor Changes

package/dist/cjs/emojiPlugin.js

@@ -555,7 +555,8 @@ function createEmojiPlugin(pmPluginFactoryParams, options, api) {
         emoji: function emoji(node) {
           return new _EmojiNodeView.EmojiNodeView(node, {
             intl: pmPluginFactoryParams.getIntl(),
-            api: api
+            api: api,
+            emojiNodeDataProvider: options === null || options === void 0 ? void 0 : options.emojiNodeDataProvider
           });
         }
       }

package/dist/cjs/index.js

@@ -3,10 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "EmojiNodeDataProvider", {
+  enumerable: true,
+  get: function get() {
+    return _EmojiNodeDataProvider.EmojiNodeDataProvider;
+  }
+});
 Object.defineProperty(exports, "emojiPlugin", {
   enumerable: true,
   get: function get() {
     return _emojiPlugin.emojiPlugin;
   }
 });
-var _emojiPlugin = require("./emojiPlugin");
+var _emojiPlugin = require("./emojiPlugin");
+var _EmojiNodeDataProvider = require("./pm-plugins/providers/EmojiNodeDataProvider");

package/dist/cjs/nodeviews/EmojiNodeView.js

@@ -15,6 +15,7 @@ var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _emoji = require("@atlaskit/editor-common/emoji");
 var _monitoring = require("@atlaskit/editor-common/monitoring");
 var _model = require("@atlaskit/editor-prosemirror/model");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _emojiNodeSpec = require("./emojiNodeSpec");
 /**
@@ -45,17 +46,16 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
    * @param extraProps - An object containing additional parameters.
    * @param extraProps.intl - The internationalization object for formatting messages.
    * @param extraProps.api - The editor API for accessing shared state and connectivity features.
+   * @param extraProps.emojiNodeDataProvider - (Optional) A provider for fetching emoji data.
    *
    * @example
-   * const emojiNodeView = new EmojiNodeView(node, { intl, api });
+   * const emojiNodeView = new EmojiNodeView(node, { intl, api, emojiNodeDataProvider });
    */
   function EmojiNodeView(node, _ref) {
-    var _api$emoji,
-      _sharedState$currentS,
-      _this = this,
-      _api$connectivity;
+    var _this = this;
     var intl = _ref.intl,
-      api = _ref.api;
+      api = _ref.api,
+      emojiNodeDataProvider = _ref.emojiNodeDataProvider;
     (0, _classCallCheck2.default)(this, EmojiNodeView);
     (0, _defineProperty2.default)(this, "renderingFallback", false);
     (0, _defineProperty2.default)(this, "destroy", function () {});
@@ -64,50 +64,86 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
     var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, (0, _emojiNodeSpec.emojiToDom)(this.node)),
       dom = _DOMSerializer$render.dom;
     this.dom = dom;
-    this.domElement = dom instanceof HTMLElement ? dom : undefined;
-    if ((0, _coreUtils.isSSR)()) {
-      // The provider doesn't work in SSR, and we don't want to render fallback in SSR,
-      // that's why we don't need to continue node rendering.
-      // In SSR we want to show a placeholder, that `emojiToDom()` returns.
-      return;
-    }
-
-    // We use the `emojiProvider` from the shared state
-    // because it supports the `emojiProvider` prop in the `ComposableEditor` options
-    // as well as the `emojiProvider` in the `EmojiPlugin` options.
-    var sharedState = api === null || api === void 0 || (_api$emoji = api.emoji) === null || _api$emoji === void 0 ? void 0 : _api$emoji.sharedState;
-    if (!sharedState) {
-      return;
-    }
-    var emojiProvider = (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.emojiProvider;
-    if (emojiProvider) {
-      void this.updateDom(emojiProvider);
-    }
-    var unsubscribe = sharedState.onChange(function (_ref2) {
-      var nextSharedState = _ref2.nextSharedState;
-      if (emojiProvider === (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider)) {
-        // Do not update if the provider is the same
+    this.domElement = (0, _expValEquals.expValEquals)('platform_editor_emoji_otp', 'isEnabled', true) && this.isHTMLElement(dom) || !(0, _expValEquals.expValEquals)('platform_editor_emoji_otp', 'isEnabled', true) && dom instanceof HTMLElement ? dom : undefined;
+    if ((0, _expValEquals.expValEquals)('platform_editor_emoji_otp', 'isEnabled', true) && emojiNodeDataProvider) {
+      emojiNodeDataProvider.getData(node, function (payload) {
+        if (payload.error) {
+          EmojiNodeView.logError(payload.error);
+          _this.renderFallback();
+          return;
+        }
+        var emojiDescription = payload.data;
+        if (!emojiDescription) {
+          EmojiNodeView.logError(new Error('Emoji description is not loaded'));
+          _this.renderFallback();
+          return;
+        }
+        var emojiRepresentation = emojiDescription === null || emojiDescription === void 0 ? void 0 : emojiDescription.representation;
+        if (!EmojiNodeView.isEmojiRepresentationSupported(emojiRepresentation)) {
+          EmojiNodeView.logError(new Error('Emoji representation is not supported'));
+          _this.renderFallback();
+          return;
+        }
+        _this.renderEmoji(emojiDescription, emojiRepresentation);
+      });
+    } else {
+      var _api$emoji, _sharedState$currentS, _api$connectivity;
+      if ((0, _coreUtils.isSSR)()) {
+        // The provider doesn't work in SSR, and we don't want to render fallback in SSR,
+        // that's why we don't need to continue node rendering.
+        // In SSR we want to show a placeholder, that `emojiToDom()` returns.
         return;
       }
-      emojiProvider = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider;
-      void _this.updateDom(emojiProvider);
-    });
 
-    // Refresh emojis if we go back online
-    var subscribeToConnection = api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.sharedState.onChange(function (_ref3) {
-      var prevSharedState = _ref3.prevSharedState,
-        nextSharedState = _ref3.nextSharedState;
-      if ((prevSharedState === null || prevSharedState === void 0 ? void 0 : prevSharedState.mode) === 'offline' && (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mode) === 'online' && _this.renderingFallback && (0, _experiments.editorExperiment)('platform_editor_offline_editing_web', true)) {
-        var _sharedState$currentS2;
-        _this.updateDom((_sharedState$currentS2 = sharedState.currentState()) === null || _sharedState$currentS2 === void 0 ? void 0 : _sharedState$currentS2.emojiProvider);
+      // We use the `emojiProvider` from the shared state
+      // because it supports the `emojiProvider` prop in the `ComposableEditor` options
+      // as well as the `emojiProvider` in the `EmojiPlugin` options.
+      var sharedState = api === null || api === void 0 || (_api$emoji = api.emoji) === null || _api$emoji === void 0 ? void 0 : _api$emoji.sharedState;
+      if (!sharedState) {
+        return;
       }
-    });
-    this.destroy = function () {
-      unsubscribe();
-      subscribeToConnection === null || subscribeToConnection === void 0 || subscribeToConnection();
-    };
+      var emojiProvider = (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.emojiProvider;
+      if (emojiProvider) {
+        void this.updateDom(emojiProvider);
+      }
+      var unsubscribe = sharedState.onChange(function (_ref2) {
+        var nextSharedState = _ref2.nextSharedState;
+        if (emojiProvider === (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider)) {
+          // Do not update if the provider is the same
+          return;
+        }
+        emojiProvider = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider;
+        void _this.updateDom(emojiProvider);
+      });
+
+      // Refresh emojis if we go back online
+      var subscribeToConnection = api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.sharedState.onChange(function (_ref3) {
+        var prevSharedState = _ref3.prevSharedState,
+          nextSharedState = _ref3.nextSharedState;
+        if ((prevSharedState === null || prevSharedState === void 0 ? void 0 : prevSharedState.mode) === 'offline' && (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mode) === 'online' && _this.renderingFallback && (0, _experiments.editorExperiment)('platform_editor_offline_editing_web', true)) {
+          var _sharedState$currentS2;
+          _this.updateDom((_sharedState$currentS2 = sharedState.currentState()) === null || _sharedState$currentS2 === void 0 ? void 0 : _sharedState$currentS2.emojiProvider);
+        }
+      });
+      this.destroy = function () {
+        unsubscribe();
+        subscribeToConnection === null || subscribeToConnection === void 0 || subscribeToConnection();
+      };
+    }
   }
+
+  /** Type guard to check if a Node is an HTMLElement in a safe way. */
   return (0, _createClass2.default)(EmojiNodeView, [{
+    key: "isHTMLElement",
+    value: function isHTMLElement(element) {
+      if (element === null) {
+        return false;
+      }
+
+      // In SSR `HTMLElement` is not defined, so we need to use duck typing here
+      return 'innerHTML' in element && 'style' in element && 'classList' in element;
+    }
+  }, {
     key: "updateDom",
     value: function () {
       var _updateDom = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(emojiProvider) {

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

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmojiNodeDataProvider = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+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 _nodeDataProvider = require("@atlaskit/node-data-provider");
+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) {
+  function EmojiNodeDataProvider(resource) {
+    var _this;
+    (0, _classCallCheck2.default)(this, EmojiNodeDataProvider);
+    _this = _callSuper(this, EmojiNodeDataProvider);
+    (0, _defineProperty2.default)(_this, "name", 'emojiNodeDataProvider');
+    _this.emojiProvider = resource.getEmojiProvider();
+    return _this;
+  }
+  (0, _inherits2.default)(EmojiNodeDataProvider, _NodeDataProvider);
+  return (0, _createClass2.default)(EmojiNodeDataProvider, [{
+    key: "isNodeSupported",
+    value: function isNodeSupported(node) {
+      return node.type === 'emoji';
+    }
+  }, {
+    key: "nodeDataKey",
+    value: function nodeDataKey(node) {
+      var _node$attrs$id;
+      return (_node$attrs$id = node.attrs.id) !== null && _node$attrs$id !== void 0 ? _node$attrs$id : node.attrs.shortName;
+    }
+  }, {
+    key: "fetchNodesData",
+    value: function () {
+      var _fetchNodesData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(nodes) {
+        var emojiProvider, fetches;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return this.emojiProvider;
+            case 2:
+              emojiProvider = _context.sent;
+              fetches = nodes.map(function (node) {
+                return emojiProvider.fetchByEmojiId({
+                  id: node.attrs.id,
+                  shortName: node.attrs.shortName,
+                  fallback: node.attrs.text
+                }, true);
+              });
+              return _context.abrupt("return", Promise.all(fetches));
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function fetchNodesData(_x) {
+        return _fetchNodesData.apply(this, arguments);
+      }
+      return fetchNodesData;
+    }()
+  }]);
+}(_nodeDataProvider.NodeDataProvider);

package/dist/es2019/emojiPlugin.js

@@ -511,7 +511,8 @@ function createEmojiPlugin(pmPluginFactoryParams, options, api) {
         emoji: node => {
           return new EmojiNodeView(node, {
             intl: pmPluginFactoryParams.getIntl(),
-            api
+            api,
+            emojiNodeDataProvider: options === null || options === void 0 ? void 0 : options.emojiNodeDataProvider
           });
         }
       }

package/dist/es2019/index.js

@@ -1,4 +1,10 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
 // Entry file in package.json
 
-export { emojiPlugin } from './emojiPlugin';
+export { emojiPlugin } from './emojiPlugin';
+
+// It would be nice to be able to export the provider that needs for the plugin from
+// ./providers/..., but it's forbidden by https://hello.atlassian.net/wiki/spaces/EDITOR/pages/4106313244/EES+Proposal+003+Editor+Plugins+Standards.
+// So provider will be in ./pm-plugins/providers and we re-export it here with eslint ignore =(
+// eslint-disable-next-line @atlaskit/editor/only-export-plugin
+export { EmojiNodeDataProvider } from './pm-plugins/providers/EmojiNodeDataProvider';

package/dist/es2019/nodeviews/EmojiNodeView.js

@@ -3,6 +3,7 @@ import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { messages, EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
 import { logException } from '@atlaskit/editor-common/monitoring';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { emojiToDom } from './emojiNodeSpec';
 /**
@@ -39,15 +40,16 @@ export class EmojiNodeView {
    * @param extraProps - An object containing additional parameters.
    * @param extraProps.intl - The internationalization object for formatting messages.
    * @param extraProps.api - The editor API for accessing shared state and connectivity features.
+   * @param extraProps.emojiNodeDataProvider - (Optional) A provider for fetching emoji data.
    *
    * @example
-   * const emojiNodeView = new EmojiNodeView(node, { intl, api });
+   * const emojiNodeView = new EmojiNodeView(node, { intl, api, emojiNodeDataProvider });
    */
   constructor(node, {
     intl,
-    api
+    api,
+    emojiNodeDataProvider
   }) {
-    var _api$emoji, _sharedState$currentS, _api$connectivity;
     _defineProperty(this, "renderingFallback", false);
     _defineProperty(this, "destroy", () => {});
     this.node = node;
@@ -56,50 +58,84 @@ export class EmojiNodeView {
       dom
     } = DOMSerializer.renderSpec(document, emojiToDom(this.node));
     this.dom = dom;
-    this.domElement = dom instanceof HTMLElement ? dom : undefined;
-    if (isSSR()) {
-      // The provider doesn't work in SSR, and we don't want to render fallback in SSR,
-      // that's why we don't need to continue node rendering.
-      // In SSR we want to show a placeholder, that `emojiToDom()` returns.
-      return;
-    }
-
-    // We use the `emojiProvider` from the shared state
-    // because it supports the `emojiProvider` prop in the `ComposableEditor` options
-    // as well as the `emojiProvider` in the `EmojiPlugin` options.
-    const sharedState = api === null || api === void 0 ? void 0 : (_api$emoji = api.emoji) === null || _api$emoji === void 0 ? void 0 : _api$emoji.sharedState;
-    if (!sharedState) {
-      return;
-    }
-    let emojiProvider = (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.emojiProvider;
-    if (emojiProvider) {
-      void this.updateDom(emojiProvider);
-    }
-    const unsubscribe = sharedState.onChange(({
-      nextSharedState
-    }) => {
-      if (emojiProvider === (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider)) {
-        // Do not update if the provider is the same
+    this.domElement = expValEquals('platform_editor_emoji_otp', 'isEnabled', true) && this.isHTMLElement(dom) || !expValEquals('platform_editor_emoji_otp', 'isEnabled', true) && dom instanceof HTMLElement ? dom : undefined;
+    if (expValEquals('platform_editor_emoji_otp', 'isEnabled', true) && emojiNodeDataProvider) {
+      emojiNodeDataProvider.getData(node, payload => {
+        if (payload.error) {
+          EmojiNodeView.logError(payload.error);
+          this.renderFallback();
+          return;
+        }
+        const emojiDescription = payload.data;
+        if (!emojiDescription) {
+          EmojiNodeView.logError(new Error('Emoji description is not loaded'));
+          this.renderFallback();
+          return;
+        }
+        const emojiRepresentation = emojiDescription === null || emojiDescription === void 0 ? void 0 : emojiDescription.representation;
+        if (!EmojiNodeView.isEmojiRepresentationSupported(emojiRepresentation)) {
+          EmojiNodeView.logError(new Error('Emoji representation is not supported'));
+          this.renderFallback();
+          return;
+        }
+        this.renderEmoji(emojiDescription, emojiRepresentation);
+      });
+    } else {
+      var _api$emoji, _sharedState$currentS, _api$connectivity;
+      if (isSSR()) {
+        // The provider doesn't work in SSR, and we don't want to render fallback in SSR,
+        // that's why we don't need to continue node rendering.
+        // In SSR we want to show a placeholder, that `emojiToDom()` returns.
         return;
       }
-      emojiProvider = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider;
-      void this.updateDom(emojiProvider);
-    });
 
-    // Refresh emojis if we go back online
-    const subscribeToConnection = api === null || api === void 0 ? void 0 : (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.sharedState.onChange(({
-      prevSharedState,
-      nextSharedState
-    }) => {
-      if ((prevSharedState === null || prevSharedState === void 0 ? void 0 : prevSharedState.mode) === 'offline' && (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mode) === 'online' && this.renderingFallback && editorExperiment('platform_editor_offline_editing_web', true)) {
-        var _sharedState$currentS2;
-        this.updateDom((_sharedState$currentS2 = sharedState.currentState()) === null || _sharedState$currentS2 === void 0 ? void 0 : _sharedState$currentS2.emojiProvider);
+      // We use the `emojiProvider` from the shared state
+      // because it supports the `emojiProvider` prop in the `ComposableEditor` options
+      // as well as the `emojiProvider` in the `EmojiPlugin` options.
+      const sharedState = api === null || api === void 0 ? void 0 : (_api$emoji = api.emoji) === null || _api$emoji === void 0 ? void 0 : _api$emoji.sharedState;
+      if (!sharedState) {
+        return;
       }
-    });
-    this.destroy = () => {
-      unsubscribe();
-      subscribeToConnection === null || subscribeToConnection === void 0 ? void 0 : subscribeToConnection();
-    };
+      let emojiProvider = (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.emojiProvider;
+      if (emojiProvider) {
+        void this.updateDom(emojiProvider);
+      }
+      const unsubscribe = sharedState.onChange(({
+        nextSharedState
+      }) => {
+        if (emojiProvider === (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider)) {
+          // Do not update if the provider is the same
+          return;
+        }
+        emojiProvider = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider;
+        void this.updateDom(emojiProvider);
+      });
+
+      // Refresh emojis if we go back online
+      const subscribeToConnection = api === null || api === void 0 ? void 0 : (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.sharedState.onChange(({
+        prevSharedState,
+        nextSharedState
+      }) => {
+        if ((prevSharedState === null || prevSharedState === void 0 ? void 0 : prevSharedState.mode) === 'offline' && (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mode) === 'online' && this.renderingFallback && editorExperiment('platform_editor_offline_editing_web', true)) {
+          var _sharedState$currentS2;
+          this.updateDom((_sharedState$currentS2 = sharedState.currentState()) === null || _sharedState$currentS2 === void 0 ? void 0 : _sharedState$currentS2.emojiProvider);
+        }
+      });
+      this.destroy = () => {
+        unsubscribe();
+        subscribeToConnection === null || subscribeToConnection === void 0 ? void 0 : subscribeToConnection();
+      };
+    }
+  }
+
+  /** Type guard to check if a Node is an HTMLElement in a safe way. */
+  isHTMLElement(element) {
+    if (element === null) {
+      return false;
+    }
+
+    // In SSR `HTMLElement` is not defined, so we need to use duck typing here
+    return 'innerHTML' in element && 'style' in element && 'classList' in element;
   }
   async updateDom(emojiProvider) {
     try {

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

@@ -0,0 +1,25 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { NodeDataProvider } from '@atlaskit/node-data-provider';
+export class EmojiNodeDataProvider extends NodeDataProvider {
+  constructor(resource) {
+    super();
+    _defineProperty(this, "name", 'emojiNodeDataProvider');
+    this.emojiProvider = resource.getEmojiProvider();
+  }
+  isNodeSupported(node) {
+    return node.type === 'emoji';
+  }
+  nodeDataKey(node) {
+    var _node$attrs$id;
+    return (_node$attrs$id = node.attrs.id) !== null && _node$attrs$id !== void 0 ? _node$attrs$id : node.attrs.shortName;
+  }
+  async fetchNodesData(nodes) {
+    const emojiProvider = await this.emojiProvider;
+    const fetches = nodes.map(node => emojiProvider.fetchByEmojiId({
+      id: node.attrs.id,
+      shortName: node.attrs.shortName,
+      fallback: node.attrs.text
+    }, true));
+    return Promise.all(fetches);
+  }
+}

package/dist/esm/emojiPlugin.js

@@ -544,7 +544,8 @@ function createEmojiPlugin(pmPluginFactoryParams, options, api) {
         emoji: function emoji(node) {
           return new EmojiNodeView(node, {
             intl: pmPluginFactoryParams.getIntl(),
-            api: api
+            api: api,
+            emojiNodeDataProvider: options === null || options === void 0 ? void 0 : options.emojiNodeDataProvider
           });
         }
       }

package/dist/esm/index.js

@@ -1,4 +1,10 @@
 /* eslint-disable @atlaskit/editor/no-re-export */
 // Entry file in package.json
 
-export { emojiPlugin } from './emojiPlugin';
+export { emojiPlugin } from './emojiPlugin';
+
+// It would be nice to be able to export the provider that needs for the plugin from
+// ./providers/..., but it's forbidden by https://hello.atlassian.net/wiki/spaces/EDITOR/pages/4106313244/EES+Proposal+003+Editor+Plugins+Standards.
+// So provider will be in ./pm-plugins/providers and we re-export it here with eslint ignore =(
+// eslint-disable-next-line @atlaskit/editor/only-export-plugin
+export { EmojiNodeDataProvider } from './pm-plugins/providers/EmojiNodeDataProvider';

package/dist/esm/nodeviews/EmojiNodeView.js

@@ -7,6 +7,7 @@ import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { messages, EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
 import { logException } from '@atlaskit/editor-common/monitoring';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { emojiToDom } from './emojiNodeSpec';
 /**
@@ -37,17 +38,16 @@ export var EmojiNodeView = /*#__PURE__*/function () {
    * @param extraProps - An object containing additional parameters.
    * @param extraProps.intl - The internationalization object for formatting messages.
    * @param extraProps.api - The editor API for accessing shared state and connectivity features.
+   * @param extraProps.emojiNodeDataProvider - (Optional) A provider for fetching emoji data.
    *
    * @example
-   * const emojiNodeView = new EmojiNodeView(node, { intl, api });
+   * const emojiNodeView = new EmojiNodeView(node, { intl, api, emojiNodeDataProvider });
    */
   function EmojiNodeView(node, _ref) {
-    var _api$emoji,
-      _sharedState$currentS,
-      _this = this,
-      _api$connectivity;
+    var _this = this;
     var intl = _ref.intl,
-      api = _ref.api;
+      api = _ref.api,
+      emojiNodeDataProvider = _ref.emojiNodeDataProvider;
     _classCallCheck(this, EmojiNodeView);
     _defineProperty(this, "renderingFallback", false);
     _defineProperty(this, "destroy", function () {});
@@ -56,50 +56,86 @@ export var EmojiNodeView = /*#__PURE__*/function () {
     var _DOMSerializer$render = DOMSerializer.renderSpec(document, emojiToDom(this.node)),
       dom = _DOMSerializer$render.dom;
     this.dom = dom;
-    this.domElement = dom instanceof HTMLElement ? dom : undefined;
-    if (isSSR()) {
-      // The provider doesn't work in SSR, and we don't want to render fallback in SSR,
-      // that's why we don't need to continue node rendering.
-      // In SSR we want to show a placeholder, that `emojiToDom()` returns.
-      return;
-    }
-
-    // We use the `emojiProvider` from the shared state
-    // because it supports the `emojiProvider` prop in the `ComposableEditor` options
-    // as well as the `emojiProvider` in the `EmojiPlugin` options.
-    var sharedState = api === null || api === void 0 || (_api$emoji = api.emoji) === null || _api$emoji === void 0 ? void 0 : _api$emoji.sharedState;
-    if (!sharedState) {
-      return;
-    }
-    var emojiProvider = (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.emojiProvider;
-    if (emojiProvider) {
-      void this.updateDom(emojiProvider);
-    }
-    var unsubscribe = sharedState.onChange(function (_ref2) {
-      var nextSharedState = _ref2.nextSharedState;
-      if (emojiProvider === (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider)) {
-        // Do not update if the provider is the same
+    this.domElement = expValEquals('platform_editor_emoji_otp', 'isEnabled', true) && this.isHTMLElement(dom) || !expValEquals('platform_editor_emoji_otp', 'isEnabled', true) && dom instanceof HTMLElement ? dom : undefined;
+    if (expValEquals('platform_editor_emoji_otp', 'isEnabled', true) && emojiNodeDataProvider) {
+      emojiNodeDataProvider.getData(node, function (payload) {
+        if (payload.error) {
+          EmojiNodeView.logError(payload.error);
+          _this.renderFallback();
+          return;
+        }
+        var emojiDescription = payload.data;
+        if (!emojiDescription) {
+          EmojiNodeView.logError(new Error('Emoji description is not loaded'));
+          _this.renderFallback();
+          return;
+        }
+        var emojiRepresentation = emojiDescription === null || emojiDescription === void 0 ? void 0 : emojiDescription.representation;
+        if (!EmojiNodeView.isEmojiRepresentationSupported(emojiRepresentation)) {
+          EmojiNodeView.logError(new Error('Emoji representation is not supported'));
+          _this.renderFallback();
+          return;
+        }
+        _this.renderEmoji(emojiDescription, emojiRepresentation);
+      });
+    } else {
+      var _api$emoji, _sharedState$currentS, _api$connectivity;
+      if (isSSR()) {
+        // The provider doesn't work in SSR, and we don't want to render fallback in SSR,
+        // that's why we don't need to continue node rendering.
+        // In SSR we want to show a placeholder, that `emojiToDom()` returns.
         return;
       }
-      emojiProvider = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider;
-      void _this.updateDom(emojiProvider);
-    });
 
-    // Refresh emojis if we go back online
-    var subscribeToConnection = api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.sharedState.onChange(function (_ref3) {
-      var prevSharedState = _ref3.prevSharedState,
-        nextSharedState = _ref3.nextSharedState;
-      if ((prevSharedState === null || prevSharedState === void 0 ? void 0 : prevSharedState.mode) === 'offline' && (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mode) === 'online' && _this.renderingFallback && editorExperiment('platform_editor_offline_editing_web', true)) {
-        var _sharedState$currentS2;
-        _this.updateDom((_sharedState$currentS2 = sharedState.currentState()) === null || _sharedState$currentS2 === void 0 ? void 0 : _sharedState$currentS2.emojiProvider);
+      // We use the `emojiProvider` from the shared state
+      // because it supports the `emojiProvider` prop in the `ComposableEditor` options
+      // as well as the `emojiProvider` in the `EmojiPlugin` options.
+      var sharedState = api === null || api === void 0 || (_api$emoji = api.emoji) === null || _api$emoji === void 0 ? void 0 : _api$emoji.sharedState;
+      if (!sharedState) {
+        return;
       }
-    });
-    this.destroy = function () {
-      unsubscribe();
-      subscribeToConnection === null || subscribeToConnection === void 0 || subscribeToConnection();
-    };
+      var emojiProvider = (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.emojiProvider;
+      if (emojiProvider) {
+        void this.updateDom(emojiProvider);
+      }
+      var unsubscribe = sharedState.onChange(function (_ref2) {
+        var nextSharedState = _ref2.nextSharedState;
+        if (emojiProvider === (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider)) {
+          // Do not update if the provider is the same
+          return;
+        }
+        emojiProvider = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider;
+        void _this.updateDom(emojiProvider);
+      });
+
+      // Refresh emojis if we go back online
+      var subscribeToConnection = api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.sharedState.onChange(function (_ref3) {
+        var prevSharedState = _ref3.prevSharedState,
+          nextSharedState = _ref3.nextSharedState;
+        if ((prevSharedState === null || prevSharedState === void 0 ? void 0 : prevSharedState.mode) === 'offline' && (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mode) === 'online' && _this.renderingFallback && editorExperiment('platform_editor_offline_editing_web', true)) {
+          var _sharedState$currentS2;
+          _this.updateDom((_sharedState$currentS2 = sharedState.currentState()) === null || _sharedState$currentS2 === void 0 ? void 0 : _sharedState$currentS2.emojiProvider);
+        }
+      });
+      this.destroy = function () {
+        unsubscribe();
+        subscribeToConnection === null || subscribeToConnection === void 0 || subscribeToConnection();
+      };
+    }
   }
+
+  /** Type guard to check if a Node is an HTMLElement in a safe way. */
   return _createClass(EmojiNodeView, [{
+    key: "isHTMLElement",
+    value: function isHTMLElement(element) {
+      if (element === null) {
+        return false;
+      }
+
+      // In SSR `HTMLElement` is not defined, so we need to use duck typing here
+      return 'innerHTML' in element && 'style' in element && 'classList' in element;
+    }
+  }, {
     key: "updateDom",
     value: function () {
       var _updateDom = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(emojiProvider) {

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

@@ -0,0 +1,65 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+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 _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 { NodeDataProvider } from '@atlaskit/node-data-provider';
+export var EmojiNodeDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
+  function EmojiNodeDataProvider(resource) {
+    var _this;
+    _classCallCheck(this, EmojiNodeDataProvider);
+    _this = _callSuper(this, EmojiNodeDataProvider);
+    _defineProperty(_this, "name", 'emojiNodeDataProvider');
+    _this.emojiProvider = resource.getEmojiProvider();
+    return _this;
+  }
+  _inherits(EmojiNodeDataProvider, _NodeDataProvider);
+  return _createClass(EmojiNodeDataProvider, [{
+    key: "isNodeSupported",
+    value: function isNodeSupported(node) {
+      return node.type === 'emoji';
+    }
+  }, {
+    key: "nodeDataKey",
+    value: function nodeDataKey(node) {
+      var _node$attrs$id;
+      return (_node$attrs$id = node.attrs.id) !== null && _node$attrs$id !== void 0 ? _node$attrs$id : node.attrs.shortName;
+    }
+  }, {
+    key: "fetchNodesData",
+    value: function () {
+      var _fetchNodesData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(nodes) {
+        var emojiProvider, fetches;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return this.emojiProvider;
+            case 2:
+              emojiProvider = _context.sent;
+              fetches = nodes.map(function (node) {
+                return emojiProvider.fetchByEmojiId({
+                  id: node.attrs.id,
+                  shortName: node.attrs.shortName,
+                  fallback: node.attrs.text
+                }, true);
+              });
+              return _context.abrupt("return", Promise.all(fetches));
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function fetchNodesData(_x) {
+        return _fetchNodesData.apply(this, arguments);
+      }
+      return fetchNodesData;
+    }()
+  }]);
+}(NodeDataProvider);

package/dist/types/emojiPluginType.d.ts

@@ -9,6 +9,7 @@ import type { MetricsPlugin } from '@atlaskit/editor-plugin-metrics';
 import type { TypeAheadInputMethod, TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
 import type { SelectionBookmark } from '@atlaskit/editor-prosemirror/state';
 import type { EmojiDescription, EmojiId, EmojiProvider, EmojiResourceConfig } from '@atlaskit/emoji';
+import type { EmojiNodeDataProvider } from './pm-plugins/providers/EmojiNodeDataProvider';
 type SetInlineCommentDraftState = (drafting: boolean, inputMethod: InlineCommentInputMethod) => Command;
 type AnnotationPluginType = NextEditorPlugin<'annotation', {
     actions: {
@@ -27,6 +28,7 @@ type EditorViewModePluginType = NextEditorPlugin<'editorViewMode', {
     sharedState: EditorViewModePluginState;
 }>;
 export interface EmojiPluginOptions {
+    emojiNodeDataProvider?: EmojiNodeDataProvider;
     emojiProvider?: Promise<EmojiProvider>;
     headless?: boolean;
 }

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
 export type { EmojiPlugin, EmojiPluginOptions, EmojiPluginState, EmojiPluginSharedState, EmojiPluginDependencies, EmojiPluginActions, EmojiPluginCommands, } from './emojiPluginType';
 export { emojiPlugin } from './emojiPlugin';
+export { EmojiNodeDataProvider } from './pm-plugins/providers/EmojiNodeDataProvider';

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

@@ -3,8 +3,10 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { EmojiPlugin } from '../emojiPluginType';
+import type { EmojiNodeDataProvider } from '../pm-plugins/providers/EmojiNodeDataProvider';
 interface Params {
     api: ExtractInjectionAPI<EmojiPlugin> | undefined;
+    emojiNodeDataProvider?: EmojiNodeDataProvider;
     intl: IntlShape;
 }
 /**
@@ -35,11 +37,14 @@ export declare class EmojiNodeView implements NodeView {
      * @param extraProps - An object containing additional parameters.
      * @param extraProps.intl - The internationalization object for formatting messages.
      * @param extraProps.api - The editor API for accessing shared state and connectivity features.
+     * @param extraProps.emojiNodeDataProvider - (Optional) A provider for fetching emoji data.
      *
      * @example
-     * const emojiNodeView = new EmojiNodeView(node, { intl, api });
+     * const emojiNodeView = new EmojiNodeView(node, { intl, api, emojiNodeDataProvider });
      */
-    constructor(node: PMNode, { intl, api }: Params);
+    constructor(node: PMNode, { intl, api, emojiNodeDataProvider }: Params);
+    /** Type guard to check if a Node is an HTMLElement in a safe way. */
+    private isHTMLElement;
     private updateDom;
     private static isEmojiRepresentationSupported;
     private cleanUpAndRenderCommonAttributes;

package/dist/types/pm-plugins/providers/EmojiNodeDataProvider.d.ts

@@ -0,0 +1,12 @@
+import type { EmojiDefinition } from '@atlaskit/adf-schema';
+import type { JSONNode } from '@atlaskit/editor-json-transformer';
+import type { EmojiResource, OptionalEmojiDescriptionWithVariations } from '@atlaskit/emoji';
+import { NodeDataProvider } from '@atlaskit/node-data-provider';
+export declare class EmojiNodeDataProvider extends NodeDataProvider<EmojiDefinition, OptionalEmojiDescriptionWithVariations> {
+    name: "emojiNodeDataProvider";
+    private readonly emojiProvider;
+    constructor(resource: EmojiResource);
+    isNodeSupported(node: JSONNode): node is EmojiDefinition;
+    nodeDataKey(node: EmojiDefinition): string;
+    fetchNodesData(nodes: EmojiDefinition[]): Promise<OptionalEmojiDescriptionWithVariations[]>;
+}

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

@@ -9,6 +9,7 @@ import type { MetricsPlugin } from '@atlaskit/editor-plugin-metrics';
 import type { TypeAheadInputMethod, TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
 import type { SelectionBookmark } from '@atlaskit/editor-prosemirror/state';
 import type { EmojiDescription, EmojiId, EmojiProvider, EmojiResourceConfig } from '@atlaskit/emoji';
+import type { EmojiNodeDataProvider } from './pm-plugins/providers/EmojiNodeDataProvider';
 type SetInlineCommentDraftState = (drafting: boolean, inputMethod: InlineCommentInputMethod) => Command;
 type AnnotationPluginType = NextEditorPlugin<'annotation', {
     actions: {
@@ -27,6 +28,7 @@ type EditorViewModePluginType = NextEditorPlugin<'editorViewMode', {
     sharedState: EditorViewModePluginState;
 }>;
 export interface EmojiPluginOptions {
+    emojiNodeDataProvider?: EmojiNodeDataProvider;
     emojiProvider?: Promise<EmojiProvider>;
     headless?: boolean;
 }

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

@@ -1,2 +1,3 @@
 export type { EmojiPlugin, EmojiPluginOptions, EmojiPluginState, EmojiPluginSharedState, EmojiPluginDependencies, EmojiPluginActions, EmojiPluginCommands, } from './emojiPluginType';
 export { emojiPlugin } from './emojiPlugin';
+export { EmojiNodeDataProvider } from './pm-plugins/providers/EmojiNodeDataProvider';

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

@@ -3,8 +3,10 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { EmojiPlugin } from '../emojiPluginType';
+import type { EmojiNodeDataProvider } from '../pm-plugins/providers/EmojiNodeDataProvider';
 interface Params {
     api: ExtractInjectionAPI<EmojiPlugin> | undefined;
+    emojiNodeDataProvider?: EmojiNodeDataProvider;
     intl: IntlShape;
 }
 /**
@@ -35,11 +37,14 @@ export declare class EmojiNodeView implements NodeView {
      * @param extraProps - An object containing additional parameters.
      * @param extraProps.intl - The internationalization object for formatting messages.
      * @param extraProps.api - The editor API for accessing shared state and connectivity features.
+     * @param extraProps.emojiNodeDataProvider - (Optional) A provider for fetching emoji data.
      *
      * @example
-     * const emojiNodeView = new EmojiNodeView(node, { intl, api });
+     * const emojiNodeView = new EmojiNodeView(node, { intl, api, emojiNodeDataProvider });
      */
-    constructor(node: PMNode, { intl, api }: Params);
+    constructor(node: PMNode, { intl, api, emojiNodeDataProvider }: Params);
+    /** Type guard to check if a Node is an HTMLElement in a safe way. */
+    private isHTMLElement;
     private updateDom;
     private static isEmojiRepresentationSupported;
     private cleanUpAndRenderCommonAttributes;

package/dist/types-ts4.5/pm-plugins/providers/EmojiNodeDataProvider.d.ts

@@ -0,0 +1,12 @@
+import type { EmojiDefinition } from '@atlaskit/adf-schema';
+import type { JSONNode } from '@atlaskit/editor-json-transformer';
+import type { EmojiResource, OptionalEmojiDescriptionWithVariations } from '@atlaskit/emoji';
+import { NodeDataProvider } from '@atlaskit/node-data-provider';
+export declare class EmojiNodeDataProvider extends NodeDataProvider<EmojiDefinition, OptionalEmojiDescriptionWithVariations> {
+    name: "emojiNodeDataProvider";
+    private readonly emojiProvider;
+    constructor(resource: EmojiResource);
+    isNodeSupported(node: JSONNode): node is EmojiDefinition;
+    nodeDataKey(node: EmojiDefinition): string;
+    fetchNodesData(nodes: EmojiDefinition[]): Promise<OptionalEmojiDescriptionWithVariations[]>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-emoji",
-	"version": "6.2.0",
+	"version": "6.3.0",
 	"description": "Emoji plugin for @atlaskit/editor-core",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^51.1.2",
 		"@atlaskit/editor-plugin-analytics": "^5.2.0",
-		"@atlaskit/editor-plugin-annotation": "^5.3.0",
+		"@atlaskit/editor-plugin-annotation": "^5.4.0",
 		"@atlaskit/editor-plugin-base": "^6.2.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^7.0.0",
 		"@atlaskit/editor-plugin-metrics": "^6.2.0",
@@ -31,11 +31,12 @@
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.6.0",
 		"@atlaskit/emoji": "^69.5.0",
-		"@atlaskit/icon": "^28.1.0",
+		"@atlaskit/icon": "^28.2.0",
+		"@atlaskit/node-data-provider": "^6.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/prosemirror-input-rules": "^3.4.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^12.18.0",
+		"@atlaskit/tmp-editor-statsig": "^12.29.0",
 		"@atlaskit/tokens": "^6.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -43,7 +44,7 @@
 		"react-loadable": "^5.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^109.5.0",
+		"@atlaskit/editor-common": "^109.13.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
@@ -52,7 +53,6 @@
 		"@atlaskit/editor-plugin-composition": "^4.0.0",
 		"@atlaskit/editor-plugin-decorations": "^5.0.0",
 		"@atlaskit/ssr": "workspace:^",
-		"@atlaskit/util-data-test": "^18.2.0",
 		"@testing-library/react": "^13.4.0",
 		"wait-for-expect": "^1.2.0"
 	},