@atlaskit/editor-plugin-emoji 3.2.3 → 3.4.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/editor-plugin-emoji
 
+## 3.4.0
+
+### Minor Changes
+
+- [#135822](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135822)
+  [`020b063194651`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/020b063194651) -
+  [https://product-fabric.atlassian.net/browse/ED-27424](ED-27424) - add exposure point to
+  `platform_editor_vanilla_dom` Statsig experiment into `editor-plugin-emoji` plugin
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.3.0
+
+### Minor Changes
+
+- [#133547](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/133547)
+  [`d13f959c13041`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d13f959c13041) -
+  [https://product-fabric.atlassian.net/browse/ED-27374](ED-27374) - rewrite editor-emoji-plugin in
+  vanilla JS
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.2.3
 
 ### Patch Changes

package/dist/cjs/emojiPlugin.js

@@ -32,6 +32,7 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _insertEmoji = require("./editor-commands/insert-emoji");
 var _emoji3 = require("./nodeviews/emoji");
 var _emojiNodeSpec = require("./nodeviews/emojiNodeSpec");
+var _EmojiNodeView = require("./nodeviews/EmojiNodeView");
 var _actions = require("./pm-plugins/actions");
 var _asciiInputRules = require("./pm-plugins/ascii-input-rules");
 var _InlineEmojiPopup = require("./ui/InlineEmojiPopup");
@@ -372,7 +373,7 @@ var emojiPlugin = exports.emojiPlugin = function emojiPlugin(_ref2) {
           var _api$editorViewMode;
           return (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
         };
-        if (!isViewMode() || !(0, _platformFeatureFlags.fg)('platform_inline_node_as_valid_annotation_selection')) {
+        if (!isViewMode()) {
           return undefined;
         }
         var onClick = function onClick(stateFromClickEvent, dispatch) {
@@ -542,15 +543,22 @@ function createEmojiPlugin(pmPluginFactoryParams, options, api) {
     },
     props: {
       nodeViews: {
-        emoji: (0, _reactNodeView.getInlineNodeViewProducer)({
-          pmPluginFactoryParams: pmPluginFactoryParams,
-          Component: _emoji3.EmojiNodeView,
-          extraComponentProps: {
-            providerFactory: pmPluginFactoryParams.providerFactory,
-            options: options,
+        emoji: function emoji(node, view, getPos, decorations) {
+          return (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+            exposure: true
+          }) ? new _EmojiNodeView.EmojiNodeView(node, {
+            intl: pmPluginFactoryParams.getIntl(),
             api: api
-          }
-        })
+          }) : (0, _reactNodeView.getInlineNodeViewProducer)({
+            pmPluginFactoryParams: pmPluginFactoryParams,
+            Component: _emoji3.EmojiNodeView,
+            extraComponentProps: {
+              providerFactory: pmPluginFactoryParams.providerFactory,
+              options: options,
+              api: api
+            }
+          })(node, view, getPos, decorations);
+        }
       }
     },
     view: function view(editorView) {

package/dist/cjs/nodeviews/EmojiNodeView.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EmojiNodeView = 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _emoji = require("@atlaskit/editor-common/emoji");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _emojiNodeSpec = require("./emojiNodeSpec");
+var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
+  function EmojiNodeView(node, _ref) {
+    var _this = this;
+    var intl = _ref.intl,
+      api = _ref.api;
+    (0, _classCallCheck2.default)(this, EmojiNodeView);
+    (0, _defineProperty2.default)(this, "destroy", function () {});
+    // The pure `span` element will be used as a worse fallback only
+    // if DOMSerializer.renderSpec() in constructor fails.
+    (0, _defineProperty2.default)(this, "dom", document.createElement('span'));
+    this.node = node;
+    this.intl = intl;
+    try {
+      var _api$emoji, _sharedState$currentS;
+      var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, (0, _emojiNodeSpec.emojiToDom)(this.node)),
+        dom = _DOMSerializer$render.dom;
+      if (!(dom instanceof HTMLElement)) {
+        // It's safe to throw error here because, the code is wrapped in try-catch.
+        // However, it should never happen because `DOMSerializer.renderSpec()` should always return HTMLElement.
+        throw new Error('DOMSerializer.renderSpec() did not return HTMLElement');
+      }
+      this.dom = dom;
+
+      // 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
+          return;
+        }
+        emojiProvider = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider;
+        void _this.updateDom(emojiProvider);
+      });
+      this.destroy = function () {
+        unsubscribe();
+      };
+    } catch (error) {
+      // TODO: ED-27390 - send analytics event with error
+
+      this.renderFallback();
+    }
+  }
+  return (0, _createClass2.default)(EmojiNodeView, [{
+    key: "updateDom",
+    value: function () {
+      var _updateDom = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(emojiProvider) {
+        var _this$node$attrs, shortName, id, fallback, emojiDescription, emojiRepresentation;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              // Clean up the DOM before rendering the new emoji
+              this.dom.innerHTML = '';
+              this.dom.style.cssText = '';
+              this.dom.classList.remove(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER);
+              this.dom.removeAttribute('aria-label'); // The label is set in the renderEmoji method
+              this.dom.removeAttribute('aria-busy');
+
+              // Each vanilla JS node implementation should have this data attribute
+              this.dom.setAttribute('data-prosemirror-node-view-type', 'vanilla');
+              _context.prev = 6;
+              _this$node$attrs = this.node.attrs, shortName = _this$node$attrs.shortName, id = _this$node$attrs.id, fallback = _this$node$attrs.text;
+              _context.next = 10;
+              return emojiProvider === null || emojiProvider === void 0 ? void 0 : emojiProvider.fetchByEmojiId({
+                id: id,
+                shortName: shortName,
+                fallback: fallback
+              }, true);
+            case 10:
+              emojiDescription = _context.sent;
+              emojiRepresentation = emojiDescription === null || emojiDescription === void 0 ? void 0 : emojiDescription.representation;
+              if (emojiDescription && this.isEmojiRepresentationSupported(emojiRepresentation)) {
+                this.renderEmoji(emojiDescription, emojiRepresentation);
+              } else {
+                // TODO: ED-27390 - send analytics event with info that emoji description is not supported
+
+                this.renderFallback();
+              }
+              _context.next = 18;
+              break;
+            case 15:
+              _context.prev = 15;
+              _context.t0 = _context["catch"](6);
+              // TODO: ED-27390 - send analytics event with error
+
+              this.renderFallback();
+            case 18:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this, [[6, 15]]);
+      }));
+      function updateDom(_x) {
+        return _updateDom.apply(this, arguments);
+      }
+      return updateDom;
+    }()
+  }, {
+    key: "isEmojiRepresentationSupported",
+    value: function isEmojiRepresentationSupported(representation) {
+      return !!representation && ('sprite' in representation || 'imagePath' in representation || 'mediaPath' in representation);
+    }
+  }, {
+    key: "renderFallback",
+    value: function renderFallback() {
+      // TODO: ED-27390 - send analytics event with info that fallback was used
+
+      var fallbackElement = document.createElement('span');
+      fallbackElement.innerText = this.node.attrs.text || this.node.attrs.shortName;
+      fallbackElement.setAttribute('data-testid', "sprite-emoji-".concat(this.node.attrs.shortName));
+      fallbackElement.setAttribute('data-emoji-type', 'sprite');
+      this.dom.appendChild(fallbackElement);
+    }
+  }, {
+    key: "renderEmoji",
+    value: function renderEmoji(description, representation) {
+      // TODO: ED-27390 - Add necessary analytics UFO events
+
+      var emojiType = 'sprite' in representation ? 'sprite' : 'image';
+
+      // Add wrapper for the emoji
+      var containerElement = document.createElement('span');
+      containerElement.setAttribute('role', 'img');
+      containerElement.classList.add(_emoji.EmojiSharedCssClassName.EMOJI_CONTAINER);
+      containerElement.setAttribute('data-testid', "".concat(emojiType, "-emoji-").concat(description.shortName));
+      containerElement.setAttribute('data-emoji-type', emojiType);
+      containerElement.setAttribute('aria-label', "".concat(this.intl.formatMessage(_emoji.messages.emojiNodeLabel), " ").concat(description.shortName));
+      var emojiElement = 'sprite' in representation ? this.createSpriteEmojiElement(representation) : this.createImageEmojiElement(description, representation);
+      containerElement.appendChild(emojiElement);
+      this.dom.appendChild(containerElement);
+    }
+  }, {
+    key: "createSpriteEmojiElement",
+    value: function createSpriteEmojiElement(representation) {
+      var spriteElement = document.createElement('span');
+      spriteElement.classList.add(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE);
+      var sprite = representation.sprite;
+      var xPositionInPercent = 100 / (sprite.column - 1) * representation.xIndex;
+      var yPositionInPercent = 100 / (sprite.row - 1) * representation.yIndex;
+      spriteElement.style.backgroundImage = "url(".concat(sprite.url, ")");
+      spriteElement.style.backgroundPosition = "".concat(xPositionInPercent, "% ").concat(yPositionInPercent, "%");
+      spriteElement.style.backgroundSize = "".concat(sprite.column * 100, "% ").concat(sprite.row * 100, "%");
+      spriteElement.style.width = "".concat(_emoji.defaultEmojiHeight, "px");
+      spriteElement.style.minWidth = "".concat(_emoji.defaultEmojiHeight, "px");
+      spriteElement.style.height = "".concat(_emoji.defaultEmojiHeight, "px");
+      spriteElement.style.minHeight = "".concat(_emoji.defaultEmojiHeight, "px");
+      return spriteElement;
+    }
+  }, {
+    key: "createImageEmojiElement",
+    value: function createImageEmojiElement(emojiDescription, representation) {
+      var imageElement = document.createElement('img');
+      imageElement.classList.add(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE);
+      imageElement.src = 'imagePath' in representation ? representation.imagePath : representation.mediaPath;
+      imageElement.loading = 'lazy';
+      imageElement.alt = emojiDescription.name || emojiDescription.shortName;
+      if (representation.width && representation.height) {
+        imageElement.height = _emoji.defaultEmojiHeight;
+        // Because img.width is round to the nearest integer.
+        imageElement.setAttribute('width', "".concat(_emoji.defaultEmojiHeight / representation.height * representation.width));
+      }
+      return imageElement;
+    }
+  }]);
+}();

package/dist/cjs/nodeviews/emojiNodeSpec.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.emojiNodeSpec = void 0;
+exports.emojiToDom = emojiToDom;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
@@ -25,37 +26,40 @@ var emojiNodeSpec = exports.emojiNodeSpec = function emojiNodeSpec() {
   }
   return _objectSpread(_objectSpread({}, _adfSchema.emoji), {}, {
     toDOM: function toDOM(node) {
-      // From packages/elements/emoji/src/components/common/EmojiPlaceholder.tsx
-      var _node$attrs = node.attrs,
-        shortName = _node$attrs.shortName,
-        id = _node$attrs.id,
-        text = _node$attrs.text;
-      var attrs = {
-        'data-emoji-short-name': shortName,
-        'data-emoji-id': id,
-        'data-emoji-text': text,
-        contenteditable: 'false',
-        style: (0, _lazyNodeView.convertToInlineCss)({
-          content: "''",
-          fill: "var(--ds-background-neutral, #091E420F)",
-          minWidth: "20px",
-          width: "20px",
-          height: "20px",
-          position: 'relative',
-          margin: '-1px 0',
-          display: 'inline-block',
-          background: "var(--ds-background-neutral, #091E420F)",
-          borderRadius: "var(--ds-border-radius-100, 3px)",
-          overflow: 'hidden',
-          verticalAlign: 'middle',
-          whiteSpace: 'nowrap',
-          textAlign: 'center'
-        }),
-        'aria-busy': 'true',
-        'aria-label': shortName,
-        class: 'emoji-common-placeholder'
-      };
-      return ['span', attrs];
+      return emojiToDom(node);
     }
   });
-};
+};
+function emojiToDom(node) {
+  // From packages/elements/emoji/src/components/common/EmojiPlaceholder.tsx
+  var _node$attrs = node.attrs,
+    shortName = _node$attrs.shortName,
+    id = _node$attrs.id,
+    text = _node$attrs.text;
+  var attrs = {
+    'data-emoji-short-name': shortName,
+    'data-emoji-id': id,
+    'data-emoji-text': text,
+    contenteditable: 'false',
+    style: (0, _lazyNodeView.convertToInlineCss)({
+      content: "''",
+      fill: "var(--ds-background-neutral, #091E420F)",
+      minWidth: "20px",
+      width: "20px",
+      height: "20px",
+      position: 'relative',
+      margin: '-1px 0',
+      display: 'inline-block',
+      background: "var(--ds-background-neutral, #091E420F)",
+      borderRadius: "var(--ds-border-radius-100, 3px)",
+      overflow: 'hidden',
+      verticalAlign: 'middle',
+      whiteSpace: 'nowrap',
+      textAlign: 'center'
+    }),
+    'aria-busy': 'true',
+    'aria-label': shortName,
+    class: 'emoji-common-placeholder'
+  };
+  return ['span', attrs];
+}

package/dist/es2019/emojiPlugin.js

@@ -14,8 +14,9 @@ import CommentIcon from '@atlaskit/icon/core/comment';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createEmojiFragment, insertEmoji } from './editor-commands/insert-emoji';
-import { EmojiNodeView } from './nodeviews/emoji';
+import { EmojiNodeView as EmojiNodeViewReact } from './nodeviews/emoji';
 import { emojiNodeSpec } from './nodeviews/emojiNodeSpec';
+import { EmojiNodeView } from './nodeviews/EmojiNodeView';
 import { ACTIONS, openTypeAhead as openTypeAheadAction, setAsciiMap as setAsciiMapAction, setInlineEmojiPopupOpen, setProvider as setProviderAction } from './pm-plugins/actions';
 import { inputRulePlugin as asciiInputRulePlugin } from './pm-plugins/ascii-input-rules';
 import { InlineEmojiPopup } from './ui/InlineEmojiPopup';
@@ -332,7 +333,7 @@ export const emojiPlugin = ({
           var _api$editorViewMode, _api$editorViewMode$s;
           return (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view';
         };
-        if (!isViewMode() || !fg('platform_inline_node_as_valid_annotation_selection')) {
+        if (!isViewMode()) {
           return undefined;
         }
         const onClick = (stateFromClickEvent, dispatch) => {
@@ -496,15 +497,22 @@ export function createEmojiPlugin(pmPluginFactoryParams, options, api) {
     },
     props: {
       nodeViews: {
-        emoji: getInlineNodeViewProducer({
-          pmPluginFactoryParams,
-          Component: EmojiNodeView,
-          extraComponentProps: {
-            providerFactory: pmPluginFactoryParams.providerFactory,
-            options,
+        emoji: (node, view, getPos, decorations) => {
+          return editorExperiment('platform_editor_vanilla_dom', true, {
+            exposure: true
+          }) ? new EmojiNodeView(node, {
+            intl: pmPluginFactoryParams.getIntl(),
             api
-          }
-        })
+          }) : getInlineNodeViewProducer({
+            pmPluginFactoryParams,
+            Component: EmojiNodeViewReact,
+            extraComponentProps: {
+              providerFactory: pmPluginFactoryParams.providerFactory,
+              options,
+              api
+            }
+          })(node, view, getPos, decorations);
+        }
       }
     },
     view(editorView) {

package/dist/es2019/nodeviews/EmojiNodeView.js

@@ -0,0 +1,149 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { messages, EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { emojiToDom } from './emojiNodeSpec';
+export class EmojiNodeView {
+  constructor(node, {
+    intl,
+    api
+  }) {
+    _defineProperty(this, "destroy", () => {});
+    // The pure `span` element will be used as a worse fallback only
+    // if DOMSerializer.renderSpec() in constructor fails.
+    _defineProperty(this, "dom", document.createElement('span'));
+    this.node = node;
+    this.intl = intl;
+    try {
+      var _api$emoji, _sharedState$currentS;
+      const {
+        dom
+      } = DOMSerializer.renderSpec(document, emojiToDom(this.node));
+      if (!(dom instanceof HTMLElement)) {
+        // It's safe to throw error here because, the code is wrapped in try-catch.
+        // However, it should never happen because `DOMSerializer.renderSpec()` should always return HTMLElement.
+        throw new Error('DOMSerializer.renderSpec() did not return HTMLElement');
+      }
+      this.dom = dom;
+
+      // 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
+          return;
+        }
+        emojiProvider = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider;
+        void this.updateDom(emojiProvider);
+      });
+      this.destroy = () => {
+        unsubscribe();
+      };
+    } catch (error) {
+      // TODO: ED-27390 - send analytics event with error
+
+      this.renderFallback();
+    }
+  }
+  async updateDom(emojiProvider) {
+    // Clean up the DOM before rendering the new emoji
+    this.dom.innerHTML = '';
+    this.dom.style.cssText = '';
+    this.dom.classList.remove(EmojiSharedCssClassName.EMOJI_PLACEHOLDER);
+    this.dom.removeAttribute('aria-label'); // The label is set in the renderEmoji method
+    this.dom.removeAttribute('aria-busy');
+
+    // Each vanilla JS node implementation should have this data attribute
+    this.dom.setAttribute('data-prosemirror-node-view-type', 'vanilla');
+    try {
+      const {
+        shortName,
+        id,
+        text: fallback
+      } = this.node.attrs;
+      const emojiDescription = await (emojiProvider === null || emojiProvider === void 0 ? void 0 : emojiProvider.fetchByEmojiId({
+        id,
+        shortName,
+        fallback
+      }, true));
+      const emojiRepresentation = emojiDescription === null || emojiDescription === void 0 ? void 0 : emojiDescription.representation;
+      if (emojiDescription && this.isEmojiRepresentationSupported(emojiRepresentation)) {
+        this.renderEmoji(emojiDescription, emojiRepresentation);
+      } else {
+        // TODO: ED-27390 - send analytics event with info that emoji description is not supported
+
+        this.renderFallback();
+      }
+    } catch (error) {
+      // TODO: ED-27390 - send analytics event with error
+
+      this.renderFallback();
+    }
+  }
+  isEmojiRepresentationSupported(representation) {
+    return !!representation && ('sprite' in representation || 'imagePath' in representation || 'mediaPath' in representation);
+  }
+  renderFallback() {
+    // TODO: ED-27390 - send analytics event with info that fallback was used
+
+    const fallbackElement = document.createElement('span');
+    fallbackElement.innerText = this.node.attrs.text || this.node.attrs.shortName;
+    fallbackElement.setAttribute('data-testid', `sprite-emoji-${this.node.attrs.shortName}`);
+    fallbackElement.setAttribute('data-emoji-type', 'sprite');
+    this.dom.appendChild(fallbackElement);
+  }
+  renderEmoji(description, representation) {
+    // TODO: ED-27390 - Add necessary analytics UFO events
+
+    const emojiType = 'sprite' in representation ? 'sprite' : 'image';
+
+    // Add wrapper for the emoji
+    const containerElement = document.createElement('span');
+    containerElement.setAttribute('role', 'img');
+    containerElement.classList.add(EmojiSharedCssClassName.EMOJI_CONTAINER);
+    containerElement.setAttribute('data-testid', `${emojiType}-emoji-${description.shortName}`);
+    containerElement.setAttribute('data-emoji-type', emojiType);
+    containerElement.setAttribute('aria-label', `${this.intl.formatMessage(messages.emojiNodeLabel)} ${description.shortName}`);
+    const emojiElement = 'sprite' in representation ? this.createSpriteEmojiElement(representation) : this.createImageEmojiElement(description, representation);
+    containerElement.appendChild(emojiElement);
+    this.dom.appendChild(containerElement);
+  }
+  createSpriteEmojiElement(representation) {
+    const spriteElement = document.createElement('span');
+    spriteElement.classList.add(EmojiSharedCssClassName.EMOJI_SPRITE);
+    const sprite = representation.sprite;
+    const xPositionInPercent = 100 / (sprite.column - 1) * representation.xIndex;
+    const yPositionInPercent = 100 / (sprite.row - 1) * representation.yIndex;
+    spriteElement.style.backgroundImage = `url(${sprite.url})`;
+    spriteElement.style.backgroundPosition = `${xPositionInPercent}% ${yPositionInPercent}%`;
+    spriteElement.style.backgroundSize = `${sprite.column * 100}% ${sprite.row * 100}%`;
+    spriteElement.style.width = `${defaultEmojiHeight}px`;
+    spriteElement.style.minWidth = `${defaultEmojiHeight}px`;
+    spriteElement.style.height = `${defaultEmojiHeight}px`;
+    spriteElement.style.minHeight = `${defaultEmojiHeight}px`;
+    return spriteElement;
+  }
+  createImageEmojiElement(emojiDescription, representation) {
+    const imageElement = document.createElement('img');
+    imageElement.classList.add(EmojiSharedCssClassName.EMOJI_IMAGE);
+    imageElement.src = 'imagePath' in representation ? representation.imagePath : representation.mediaPath;
+    imageElement.loading = 'lazy';
+    imageElement.alt = emojiDescription.name || emojiDescription.shortName;
+    if (representation.width && representation.height) {
+      imageElement.height = defaultEmojiHeight;
+      // Because img.width is round to the nearest integer.
+      imageElement.setAttribute('width', `${defaultEmojiHeight / representation.height * representation.width}`);
+    }
+    return imageElement;
+  }
+}

package/dist/es2019/nodeviews/emojiNodeSpec.js

@@ -15,39 +15,40 @@ export const emojiNodeSpec = () => {
   }
   return {
     ...emoji,
-    toDOM: node => {
-      // From packages/elements/emoji/src/components/common/EmojiPlaceholder.tsx
-      const {
-        shortName,
-        id,
-        text
-      } = node.attrs;
-      const attrs = {
-        'data-emoji-short-name': shortName,
-        'data-emoji-id': id,
-        'data-emoji-text': text,
-        contenteditable: 'false',
-        style: convertToInlineCss({
-          content: "''",
-          fill: "var(--ds-background-neutral, #091E420F)",
-          minWidth: `20px`,
-          width: `20px`,
-          height: `20px`,
-          position: 'relative',
-          margin: '-1px 0',
-          display: 'inline-block',
-          background: "var(--ds-background-neutral, #091E420F)",
-          borderRadius: "var(--ds-border-radius-100, 3px)",
-          overflow: 'hidden',
-          verticalAlign: 'middle',
-          whiteSpace: 'nowrap',
-          textAlign: 'center'
-        }),
-        'aria-busy': 'true',
-        'aria-label': shortName,
-        class: 'emoji-common-placeholder'
-      };
-      return ['span', attrs];
-    }
+    toDOM: node => emojiToDom(node)
   };
-};
+};
+export function emojiToDom(node) {
+  // From packages/elements/emoji/src/components/common/EmojiPlaceholder.tsx
+  const {
+    shortName,
+    id,
+    text
+  } = node.attrs;
+  const attrs = {
+    'data-emoji-short-name': shortName,
+    'data-emoji-id': id,
+    'data-emoji-text': text,
+    contenteditable: 'false',
+    style: convertToInlineCss({
+      content: "''",
+      fill: "var(--ds-background-neutral, #091E420F)",
+      minWidth: `20px`,
+      width: `20px`,
+      height: `20px`,
+      position: 'relative',
+      margin: '-1px 0',
+      display: 'inline-block',
+      background: "var(--ds-background-neutral, #091E420F)",
+      borderRadius: "var(--ds-border-radius-100, 3px)",
+      overflow: 'hidden',
+      verticalAlign: 'middle',
+      whiteSpace: 'nowrap',
+      textAlign: 'center'
+    }),
+    'aria-busy': 'true',
+    'aria-label': shortName,
+    class: 'emoji-common-placeholder'
+  };
+  return ['span', attrs];
+}

package/dist/esm/emojiPlugin.js

@@ -19,8 +19,9 @@ import CommentIcon from '@atlaskit/icon/core/comment';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createEmojiFragment, insertEmoji } from './editor-commands/insert-emoji';
-import { EmojiNodeView } from './nodeviews/emoji';
+import { EmojiNodeView as EmojiNodeViewReact } from './nodeviews/emoji';
 import { emojiNodeSpec } from './nodeviews/emojiNodeSpec';
+import { EmojiNodeView } from './nodeviews/EmojiNodeView';
 import { ACTIONS, openTypeAhead as openTypeAheadAction, setAsciiMap as setAsciiMapAction, setInlineEmojiPopupOpen, setProvider as setProviderAction } from './pm-plugins/actions';
 import { inputRulePlugin as asciiInputRulePlugin } from './pm-plugins/ascii-input-rules';
 import { InlineEmojiPopup } from './ui/InlineEmojiPopup';
@@ -357,7 +358,7 @@ export var emojiPlugin = function emojiPlugin(_ref2) {
           var _api$editorViewMode;
           return (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
         };
-        if (!isViewMode() || !fg('platform_inline_node_as_valid_annotation_selection')) {
+        if (!isViewMode()) {
           return undefined;
         }
         var onClick = function onClick(stateFromClickEvent, dispatch) {
@@ -527,15 +528,22 @@ export function createEmojiPlugin(pmPluginFactoryParams, options, api) {
     },
     props: {
       nodeViews: {
-        emoji: getInlineNodeViewProducer({
-          pmPluginFactoryParams: pmPluginFactoryParams,
-          Component: EmojiNodeView,
-          extraComponentProps: {
-            providerFactory: pmPluginFactoryParams.providerFactory,
-            options: options,
+        emoji: function emoji(node, view, getPos, decorations) {
+          return editorExperiment('platform_editor_vanilla_dom', true, {
+            exposure: true
+          }) ? new EmojiNodeView(node, {
+            intl: pmPluginFactoryParams.getIntl(),
             api: api
-          }
-        })
+          }) : getInlineNodeViewProducer({
+            pmPluginFactoryParams: pmPluginFactoryParams,
+            Component: EmojiNodeViewReact,
+            extraComponentProps: {
+              providerFactory: pmPluginFactoryParams.providerFactory,
+              options: options,
+              api: api
+            }
+          })(node, view, getPos, decorations);
+        }
       }
     },
     view: function view(editorView) {

package/dist/esm/nodeviews/EmojiNodeView.js

@@ -0,0 +1,182 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { messages, EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { emojiToDom } from './emojiNodeSpec';
+export var EmojiNodeView = /*#__PURE__*/function () {
+  function EmojiNodeView(node, _ref) {
+    var _this = this;
+    var intl = _ref.intl,
+      api = _ref.api;
+    _classCallCheck(this, EmojiNodeView);
+    _defineProperty(this, "destroy", function () {});
+    // The pure `span` element will be used as a worse fallback only
+    // if DOMSerializer.renderSpec() in constructor fails.
+    _defineProperty(this, "dom", document.createElement('span'));
+    this.node = node;
+    this.intl = intl;
+    try {
+      var _api$emoji, _sharedState$currentS;
+      var _DOMSerializer$render = DOMSerializer.renderSpec(document, emojiToDom(this.node)),
+        dom = _DOMSerializer$render.dom;
+      if (!(dom instanceof HTMLElement)) {
+        // It's safe to throw error here because, the code is wrapped in try-catch.
+        // However, it should never happen because `DOMSerializer.renderSpec()` should always return HTMLElement.
+        throw new Error('DOMSerializer.renderSpec() did not return HTMLElement');
+      }
+      this.dom = dom;
+
+      // 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
+          return;
+        }
+        emojiProvider = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.emojiProvider;
+        void _this.updateDom(emojiProvider);
+      });
+      this.destroy = function () {
+        unsubscribe();
+      };
+    } catch (error) {
+      // TODO: ED-27390 - send analytics event with error
+
+      this.renderFallback();
+    }
+  }
+  return _createClass(EmojiNodeView, [{
+    key: "updateDom",
+    value: function () {
+      var _updateDom = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(emojiProvider) {
+        var _this$node$attrs, shortName, id, fallback, emojiDescription, emojiRepresentation;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              // Clean up the DOM before rendering the new emoji
+              this.dom.innerHTML = '';
+              this.dom.style.cssText = '';
+              this.dom.classList.remove(EmojiSharedCssClassName.EMOJI_PLACEHOLDER);
+              this.dom.removeAttribute('aria-label'); // The label is set in the renderEmoji method
+              this.dom.removeAttribute('aria-busy');
+
+              // Each vanilla JS node implementation should have this data attribute
+              this.dom.setAttribute('data-prosemirror-node-view-type', 'vanilla');
+              _context.prev = 6;
+              _this$node$attrs = this.node.attrs, shortName = _this$node$attrs.shortName, id = _this$node$attrs.id, fallback = _this$node$attrs.text;
+              _context.next = 10;
+              return emojiProvider === null || emojiProvider === void 0 ? void 0 : emojiProvider.fetchByEmojiId({
+                id: id,
+                shortName: shortName,
+                fallback: fallback
+              }, true);
+            case 10:
+              emojiDescription = _context.sent;
+              emojiRepresentation = emojiDescription === null || emojiDescription === void 0 ? void 0 : emojiDescription.representation;
+              if (emojiDescription && this.isEmojiRepresentationSupported(emojiRepresentation)) {
+                this.renderEmoji(emojiDescription, emojiRepresentation);
+              } else {
+                // TODO: ED-27390 - send analytics event with info that emoji description is not supported
+
+                this.renderFallback();
+              }
+              _context.next = 18;
+              break;
+            case 15:
+              _context.prev = 15;
+              _context.t0 = _context["catch"](6);
+              // TODO: ED-27390 - send analytics event with error
+
+              this.renderFallback();
+            case 18:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this, [[6, 15]]);
+      }));
+      function updateDom(_x) {
+        return _updateDom.apply(this, arguments);
+      }
+      return updateDom;
+    }()
+  }, {
+    key: "isEmojiRepresentationSupported",
+    value: function isEmojiRepresentationSupported(representation) {
+      return !!representation && ('sprite' in representation || 'imagePath' in representation || 'mediaPath' in representation);
+    }
+  }, {
+    key: "renderFallback",
+    value: function renderFallback() {
+      // TODO: ED-27390 - send analytics event with info that fallback was used
+
+      var fallbackElement = document.createElement('span');
+      fallbackElement.innerText = this.node.attrs.text || this.node.attrs.shortName;
+      fallbackElement.setAttribute('data-testid', "sprite-emoji-".concat(this.node.attrs.shortName));
+      fallbackElement.setAttribute('data-emoji-type', 'sprite');
+      this.dom.appendChild(fallbackElement);
+    }
+  }, {
+    key: "renderEmoji",
+    value: function renderEmoji(description, representation) {
+      // TODO: ED-27390 - Add necessary analytics UFO events
+
+      var emojiType = 'sprite' in representation ? 'sprite' : 'image';
+
+      // Add wrapper for the emoji
+      var containerElement = document.createElement('span');
+      containerElement.setAttribute('role', 'img');
+      containerElement.classList.add(EmojiSharedCssClassName.EMOJI_CONTAINER);
+      containerElement.setAttribute('data-testid', "".concat(emojiType, "-emoji-").concat(description.shortName));
+      containerElement.setAttribute('data-emoji-type', emojiType);
+      containerElement.setAttribute('aria-label', "".concat(this.intl.formatMessage(messages.emojiNodeLabel), " ").concat(description.shortName));
+      var emojiElement = 'sprite' in representation ? this.createSpriteEmojiElement(representation) : this.createImageEmojiElement(description, representation);
+      containerElement.appendChild(emojiElement);
+      this.dom.appendChild(containerElement);
+    }
+  }, {
+    key: "createSpriteEmojiElement",
+    value: function createSpriteEmojiElement(representation) {
+      var spriteElement = document.createElement('span');
+      spriteElement.classList.add(EmojiSharedCssClassName.EMOJI_SPRITE);
+      var sprite = representation.sprite;
+      var xPositionInPercent = 100 / (sprite.column - 1) * representation.xIndex;
+      var yPositionInPercent = 100 / (sprite.row - 1) * representation.yIndex;
+      spriteElement.style.backgroundImage = "url(".concat(sprite.url, ")");
+      spriteElement.style.backgroundPosition = "".concat(xPositionInPercent, "% ").concat(yPositionInPercent, "%");
+      spriteElement.style.backgroundSize = "".concat(sprite.column * 100, "% ").concat(sprite.row * 100, "%");
+      spriteElement.style.width = "".concat(defaultEmojiHeight, "px");
+      spriteElement.style.minWidth = "".concat(defaultEmojiHeight, "px");
+      spriteElement.style.height = "".concat(defaultEmojiHeight, "px");
+      spriteElement.style.minHeight = "".concat(defaultEmojiHeight, "px");
+      return spriteElement;
+    }
+  }, {
+    key: "createImageEmojiElement",
+    value: function createImageEmojiElement(emojiDescription, representation) {
+      var imageElement = document.createElement('img');
+      imageElement.classList.add(EmojiSharedCssClassName.EMOJI_IMAGE);
+      imageElement.src = 'imagePath' in representation ? representation.imagePath : representation.mediaPath;
+      imageElement.loading = 'lazy';
+      imageElement.alt = emojiDescription.name || emojiDescription.shortName;
+      if (representation.width && representation.height) {
+        imageElement.height = defaultEmojiHeight;
+        // Because img.width is round to the nearest integer.
+        imageElement.setAttribute('width', "".concat(defaultEmojiHeight / representation.height * representation.width));
+      }
+      return imageElement;
+    }
+  }]);
+}();

package/dist/esm/nodeviews/emojiNodeSpec.js

@@ -18,37 +18,40 @@ export var emojiNodeSpec = function emojiNodeSpec() {
   }
   return _objectSpread(_objectSpread({}, emoji), {}, {
     toDOM: function toDOM(node) {
-      // From packages/elements/emoji/src/components/common/EmojiPlaceholder.tsx
-      var _node$attrs = node.attrs,
-        shortName = _node$attrs.shortName,
-        id = _node$attrs.id,
-        text = _node$attrs.text;
-      var attrs = {
-        'data-emoji-short-name': shortName,
-        'data-emoji-id': id,
-        'data-emoji-text': text,
-        contenteditable: 'false',
-        style: convertToInlineCss({
-          content: "''",
-          fill: "var(--ds-background-neutral, #091E420F)",
-          minWidth: "20px",
-          width: "20px",
-          height: "20px",
-          position: 'relative',
-          margin: '-1px 0',
-          display: 'inline-block',
-          background: "var(--ds-background-neutral, #091E420F)",
-          borderRadius: "var(--ds-border-radius-100, 3px)",
-          overflow: 'hidden',
-          verticalAlign: 'middle',
-          whiteSpace: 'nowrap',
-          textAlign: 'center'
-        }),
-        'aria-busy': 'true',
-        'aria-label': shortName,
-        class: 'emoji-common-placeholder'
-      };
-      return ['span', attrs];
+      return emojiToDom(node);
     }
   });
-};
+};
+export function emojiToDom(node) {
+  // From packages/elements/emoji/src/components/common/EmojiPlaceholder.tsx
+  var _node$attrs = node.attrs,
+    shortName = _node$attrs.shortName,
+    id = _node$attrs.id,
+    text = _node$attrs.text;
+  var attrs = {
+    'data-emoji-short-name': shortName,
+    'data-emoji-id': id,
+    'data-emoji-text': text,
+    contenteditable: 'false',
+    style: convertToInlineCss({
+      content: "''",
+      fill: "var(--ds-background-neutral, #091E420F)",
+      minWidth: "20px",
+      width: "20px",
+      height: "20px",
+      position: 'relative',
+      margin: '-1px 0',
+      display: 'inline-block',
+      background: "var(--ds-background-neutral, #091E420F)",
+      borderRadius: "var(--ds-border-radius-100, 3px)",
+      overflow: 'hidden',
+      verticalAlign: 'middle',
+      whiteSpace: 'nowrap',
+      textAlign: 'center'
+    }),
+    'aria-busy': 'true',
+    'aria-label': shortName,
+    class: 'emoji-common-placeholder'
+  };
+  return ['span', attrs];
+}

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

@@ -0,0 +1,23 @@
+import type { IntlShape } from 'react-intl-next';
+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';
+interface Params {
+    intl: IntlShape;
+    api: ExtractInjectionAPI<EmojiPlugin> | undefined;
+}
+export declare class EmojiNodeView implements NodeView {
+    private readonly node;
+    private readonly intl;
+    readonly destroy: () => void;
+    readonly dom: HTMLElement;
+    constructor(node: PMNode, { intl, api }: Params);
+    private updateDom;
+    private isEmojiRepresentationSupported;
+    private renderFallback;
+    private renderEmoji;
+    private createSpriteEmojiElement;
+    private createImageEmojiElement;
+}
+export {};

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

@@ -1,3 +1,4 @@
+import type { DOMOutputSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 /**
  * Wrapper for ADF emoji node spec to augment toDOM implementation
  * with fallback UI for lazy node view rendering / window virtualization
@@ -5,3 +6,4 @@
  * @returns
  */
 export declare const emojiNodeSpec: () => import("prosemirror-model").NodeSpec;
+export declare function emojiToDom(node: PMNode): DOMOutputSpec;

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

@@ -0,0 +1,23 @@
+import type { IntlShape } from 'react-intl-next';
+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';
+interface Params {
+    intl: IntlShape;
+    api: ExtractInjectionAPI<EmojiPlugin> | undefined;
+}
+export declare class EmojiNodeView implements NodeView {
+    private readonly node;
+    private readonly intl;
+    readonly destroy: () => void;
+    readonly dom: HTMLElement;
+    constructor(node: PMNode, { intl, api }: Params);
+    private updateDom;
+    private isEmojiRepresentationSupported;
+    private renderFallback;
+    private renderEmoji;
+    private createSpriteEmojiElement;
+    private createImageEmojiElement;
+}
+export {};

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

@@ -1,3 +1,4 @@
+import type { DOMOutputSpec, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 /**
  * Wrapper for ADF emoji node spec to augment toDOM implementation
  * with fallback UI for lazy node view rendering / window virtualization
@@ -5,3 +6,4 @@
  * @returns
  */
 export declare const emojiNodeSpec: () => import("prosemirror-model").NodeSpec;
+export declare function emojiToDom(node: PMNode): DOMOutputSpec;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-emoji",
-	"version": "3.2.3",
+	"version": "3.4.0",
 	"description": "Emoji plugin for @atlaskit/editor-core",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -23,22 +23,22 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^102.10.0",
+		"@atlaskit/editor-common": "^102.18.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
-		"@atlaskit/editor-plugin-annotation": "^2.1.0",
+		"@atlaskit/editor-plugin-annotation": "^2.2.0",
 		"@atlaskit/editor-plugin-base": "^2.3.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
-		"@atlaskit/editor-plugin-type-ahead": "^2.1.0",
+		"@atlaskit/editor-plugin-type-ahead": "^2.3.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/emoji": "^69.0.0",
-		"@atlaskit/icon": "^25.0.0",
+		"@atlaskit/icon": "^25.5.0",
 		"@atlaskit/node-data-provider": "^4.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/prosemirror-input-rules": "^3.3.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.1.0",
-		"@atlaskit/tokens": "^4.5.0",
+		"@atlaskit/tmp-editor-statsig": "^4.6.0",
+		"@atlaskit/tokens": "^4.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"react-intl-next": "npm:react-intl@^5.18.1",
@@ -110,9 +110,6 @@
 		"editor_inline_comments_paste_insert_nodes": {
 			"type": "boolean"
 		},
-		"platform_inline_node_as_valid_annotation_selection": {
-			"type": "boolean"
-		},
 		"platform_editor_preload_emoji_picker": {
 			"type": "boolean"
 		}