@atlaskit/editor-plugin-emoji 3.6.6 → 3.6.7

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-emoji
 
+## 3.6.7
+
+### Patch Changes
+
+- [#154163](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/154163)
+  [`82b017a2d9588`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/82b017a2d9588) -
+  Add error handling if offline editing to refresh the emoji node when returning online.
+
 ## 3.6.6
 
 ### Patch Changes

package/dist/cjs/nodeviews/EmojiNodeView.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EmojiNodeView = void 0;
+exports.isSingleEmoji = isSingleEmoji;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -14,15 +15,47 @@ 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 _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _emojiNodeSpec = require("./emojiNodeSpec");
+/**
+ * Check if we can nicely fallback to the nodes text
+ *
+ * @param fallbackText string of the nodes fallback text
+ *
+ * @example
+ * isSingleEmoji('😀') // true
+ */
+function isSingleEmoji(fallbackText) {
+  // Regular expression to match a single emoji character
+  var emojiRegex = /^((?:[\u231A\u231B\u23E9-\u23EC\u23F0\u23F3\u25FD\u25FE\u2614\u2615\u2648-\u2653\u267F\u2693\u26A1\u26AA\u26AB\u26BD\u26BE\u26C4\u26C5\u26CE\u26D4\u26EA\u26F2\u26F3\u26F5\u26FA\u26FD\u2705\u270A\u270B\u2728\u274C\u274E\u2753-\u2755\u2757\u2795-\u2797\u27B0\u27BF\u2B1B\u2B1C\u2B50\u2B55]|\uD83C[\uDC04\uDCCF\uDD8E\uDD91-\uDD9A\uDDE6-\uDDFF\uDE01\uDE1A\uDE2F\uDE32-\uDE36\uDE38-\uDE3A\uDE50\uDE51\uDF00-\uDF20\uDF2D-\uDF35\uDF37-\uDF7C\uDF7E-\uDF93\uDFA0-\uDFCA\uDFCF-\uDFD3\uDFE0-\uDFF0\uDFF4\uDFF8-\uDFFF]|\uD83D[\uDC00-\uDC3E\uDC40\uDC42-\uDCFC\uDCFF-\uDD3D\uDD4B-\uDD4E\uDD50-\uDD67\uDD7A\uDD95\uDD96\uDDA4\uDDFB-\uDE4F\uDE80-\uDEC5\uDECC\uDED0-\uDED2\uDED5-\uDED7\uDEDC-\uDEDF\uDEEB\uDEEC\uDEF4-\uDEFC\uDFE0-\uDFEB\uDFF0]|\uD83E[\uDD0C-\uDD3A\uDD3C-\uDD45\uDD47-\uDDFF\uDE70-\uDE7C\uDE80-\uDE89\uDE8F-\uDEC6\uDECE-\uDEDC\uDEDF-\uDEE9\uDEF0-\uDEF8])|(?:[\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u2388\u23CF\u23E9-\u23F3\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB-\u25FE\u2600-\u2605\u2607-\u2612\u2614-\u2685\u2690-\u2705\u2708-\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753-\u2755\u2757\u2763-\u2767\u2795-\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]|\uD83C[\uDC00-\uDCFF\uDD0D-\uDD0F\uDD2F\uDD6C-\uDD71\uDD7E\uDD7F\uDD8E\uDD91-\uDD9A\uDDAD-\uDDE5\uDE01-\uDE0F\uDE1A\uDE2F\uDE32-\uDE3A\uDE3C-\uDE3F\uDE49-\uDFFA]|\uD83D[\uDC00-\uDD3D\uDD46-\uDE4F\uDE80-\uDEFF\uDF74-\uDF7F\uDFD5-\uDFFF]|\uD83E[\uDC0C-\uDC0F\uDC48-\uDC4F\uDC5A-\uDC5F\uDC88-\uDC8F\uDCAE-\uDCFF\uDD0C-\uDD3A\uDD3C-\uDD45\uDD47-\uDEFF]|\uD83F[\uDC00-\uDFFD])\uFE0F?(?:\u200D(?:[\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u2388\u23CF\u23E9-\u23F3\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB-\u25FE\u2600-\u2605\u2607-\u2612\u2614-\u2685\u2690-\u2705\u2708-\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753-\u2755\u2757\u2763-\u2767\u2795-\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]|\uD83C[\uDC00-\uDCFF\uDD0D-\uDD0F\uDD2F\uDD6C-\uDD71\uDD7E\uDD7F\uDD8E\uDD91-\uDD9A\uDDAD-\uDDE5\uDE01-\uDE0F\uDE1A\uDE2F\uDE32-\uDE3A\uDE3C-\uDE3F\uDE49-\uDFFA]|\uD83D[\uDC00-\uDD3D\uDD46-\uDE4F\uDE80-\uDEFF\uDF74-\uDF7F\uDFD5-\uDFFF]|\uD83E[\uDC0C-\uDC0F\uDC48-\uDC4F\uDC5A-\uDC5F\uDC88-\uDC8F\uDCAE-\uDCFF\uDD0C-\uDD3A\uDD3C-\uDD45\uDD47-\uDEFF]|\uD83F[\uDC00-\uDFFD])\uFE0F?)+|(?:\uD83C[\uDDE6-\uDDFF])(?:\uD83C[\uDDE6-\uDDFF]))$/;
+  return emojiRegex.test(fallbackText);
+}
+
+/**
+ * Emoji node view for renderering emoji nodes
+ */
 var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
+  /**
+   * Prosemirror node view for rendering emoji nodes. This class is responsible for
+   * rendering emoji nodes in the editor, handling updates, and managing fallback rendering.
+   *
+   * @param node - The ProseMirror node representing the emoji.
+   * @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.
+   *
+   * @example
+   * const emojiNodeView = new EmojiNodeView(node, { intl, api });
+   */
   function EmojiNodeView(node, _ref) {
     var _api$emoji,
       _sharedState$currentS,
-      _this = this;
+      _this = this,
+      _api$connectivity;
     var intl = _ref.intl,
       api = _ref.api;
     (0, _classCallCheck2.default)(this, EmojiNodeView);
+    (0, _defineProperty2.default)(this, "renderingFallback", false);
     (0, _defineProperty2.default)(this, "destroy", function () {});
     this.node = node;
     this.intl = intl;
@@ -57,8 +90,19 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
       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();
     };
   }
   return (0, _createClass2.default)(EmojiNodeView, [{
@@ -136,6 +180,7 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
   }, {
     key: "renderFallback",
     value: function renderFallback() {
+      this.renderingFallback = true;
       this.cleanUpAndRenderCommonAttributes();
       var fallbackElement = document.createElement('span');
       fallbackElement.innerText = this.node.attrs.text || this.node.attrs.shortName;
@@ -146,6 +191,7 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
   }, {
     key: "renderEmoji",
     value: function renderEmoji(description, representation) {
+      this.renderingFallback = false;
       this.cleanUpAndRenderCommonAttributes();
       var emojiType = 'sprite' in representation ? 'sprite' : 'image';
 
@@ -180,6 +226,7 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
   }, {
     key: "createImageEmojiElement",
     value: function createImageEmojiElement(emojiDescription, representation) {
+      var _this2 = this;
       var imageElement = document.createElement('img');
       imageElement.classList.add(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE);
       imageElement.src = 'imagePath' in representation ? representation.imagePath : representation.mediaPath;
@@ -190,6 +237,18 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
         // Because img.width is round to the nearest integer.
         imageElement.setAttribute('width', "".concat(_emoji.defaultEmojiHeight / representation.height * representation.width));
       }
+      if ((0, _experiments.editorExperiment)('platform_editor_offline_editing_web', true)) {
+        // If there's an error (ie. offline) render the ascii fallback if possible, otherwise
+        // mark the node to refresh when returning online.
+        imageElement.onerror = function () {
+          // Create a check that confirms if this.node.attrs.text if an ascii emoji
+          if (isSingleEmoji(_this2.node.attrs.text)) {
+            _this2.renderFallback();
+          } else {
+            _this2.renderingFallback = true;
+          }
+        };
+      }
       return imageElement;
     }
   }], [{

package/dist/es2019/nodeviews/EmojiNodeView.js

@@ -3,18 +3,50 @@ 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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { emojiToDom } from './emojiNodeSpec';
+/**
+ * Check if we can nicely fallback to the nodes text
+ *
+ * @param fallbackText string of the nodes fallback text
+ *
+ * @example
+ * isSingleEmoji('😀') // true
+ */
+export function isSingleEmoji(fallbackText) {
+  // Regular expression to match a single emoji character
+  const emojiRegex = /^(\p{Emoji_Presentation}|\p{Extended_Pictographic}\u{FE0F}?(?:\u{200D}\p{Extended_Pictographic}\u{FE0F}?)+|\p{Regional_Indicator}\p{Regional_Indicator})$/u;
+  return emojiRegex.test(fallbackText);
+}
+
+/**
+ * Emoji node view for renderering emoji nodes
+ */
 export class EmojiNodeView {
   static logError(error) {
     void logException(error, {
       location: 'editor-plugin-emoji/EmojiNodeView'
     });
   }
+
+  /**
+   * Prosemirror node view for rendering emoji nodes. This class is responsible for
+   * rendering emoji nodes in the editor, handling updates, and managing fallback rendering.
+   *
+   * @param node - The ProseMirror node representing the emoji.
+   * @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.
+   *
+   * @example
+   * const emojiNodeView = new EmojiNodeView(node, { intl, api });
+   */
   constructor(node, {
     intl,
     api
   }) {
-    var _api$emoji, _sharedState$currentS;
+    var _api$emoji, _sharedState$currentS, _api$connectivity;
+    _defineProperty(this, "renderingFallback", false);
     _defineProperty(this, "destroy", () => {});
     this.node = node;
     this.intl = intl;
@@ -51,8 +83,20 @@ export class EmojiNodeView {
       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();
     };
   }
   async updateDom(emojiProvider) {
@@ -104,6 +148,7 @@ export class EmojiNodeView {
     }
   }
   renderFallback() {
+    this.renderingFallback = true;
     this.cleanUpAndRenderCommonAttributes();
     const fallbackElement = document.createElement('span');
     fallbackElement.innerText = this.node.attrs.text || this.node.attrs.shortName;
@@ -112,6 +157,7 @@ export class EmojiNodeView {
     this.dom.appendChild(fallbackElement);
   }
   renderEmoji(description, representation) {
+    this.renderingFallback = false;
     this.cleanUpAndRenderCommonAttributes();
     const emojiType = 'sprite' in representation ? 'sprite' : 'image';
 
@@ -152,6 +198,18 @@ export class EmojiNodeView {
       // Because img.width is round to the nearest integer.
       imageElement.setAttribute('width', `${defaultEmojiHeight / representation.height * representation.width}`);
     }
+    if (editorExperiment('platform_editor_offline_editing_web', true)) {
+      // If there's an error (ie. offline) render the ascii fallback if possible, otherwise
+      // mark the node to refresh when returning online.
+      imageElement.onerror = () => {
+        // Create a check that confirms if this.node.attrs.text if an ascii emoji
+        if (isSingleEmoji(this.node.attrs.text)) {
+          this.renderFallback();
+        } else {
+          this.renderingFallback = true;
+        }
+      };
+    }
     return imageElement;
   }
 }

package/dist/esm/nodeviews/EmojiNodeView.js

@@ -7,15 +7,47 @@ 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 { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { emojiToDom } from './emojiNodeSpec';
+/**
+ * Check if we can nicely fallback to the nodes text
+ *
+ * @param fallbackText string of the nodes fallback text
+ *
+ * @example
+ * isSingleEmoji('😀') // true
+ */
+export function isSingleEmoji(fallbackText) {
+  // Regular expression to match a single emoji character
+  var emojiRegex = /^((?:[\u231A\u231B\u23E9-\u23EC\u23F0\u23F3\u25FD\u25FE\u2614\u2615\u2648-\u2653\u267F\u2693\u26A1\u26AA\u26AB\u26BD\u26BE\u26C4\u26C5\u26CE\u26D4\u26EA\u26F2\u26F3\u26F5\u26FA\u26FD\u2705\u270A\u270B\u2728\u274C\u274E\u2753-\u2755\u2757\u2795-\u2797\u27B0\u27BF\u2B1B\u2B1C\u2B50\u2B55]|\uD83C[\uDC04\uDCCF\uDD8E\uDD91-\uDD9A\uDDE6-\uDDFF\uDE01\uDE1A\uDE2F\uDE32-\uDE36\uDE38-\uDE3A\uDE50\uDE51\uDF00-\uDF20\uDF2D-\uDF35\uDF37-\uDF7C\uDF7E-\uDF93\uDFA0-\uDFCA\uDFCF-\uDFD3\uDFE0-\uDFF0\uDFF4\uDFF8-\uDFFF]|\uD83D[\uDC00-\uDC3E\uDC40\uDC42-\uDCFC\uDCFF-\uDD3D\uDD4B-\uDD4E\uDD50-\uDD67\uDD7A\uDD95\uDD96\uDDA4\uDDFB-\uDE4F\uDE80-\uDEC5\uDECC\uDED0-\uDED2\uDED5-\uDED7\uDEDC-\uDEDF\uDEEB\uDEEC\uDEF4-\uDEFC\uDFE0-\uDFEB\uDFF0]|\uD83E[\uDD0C-\uDD3A\uDD3C-\uDD45\uDD47-\uDDFF\uDE70-\uDE7C\uDE80-\uDE89\uDE8F-\uDEC6\uDECE-\uDEDC\uDEDF-\uDEE9\uDEF0-\uDEF8])|(?:[\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u2388\u23CF\u23E9-\u23F3\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB-\u25FE\u2600-\u2605\u2607-\u2612\u2614-\u2685\u2690-\u2705\u2708-\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753-\u2755\u2757\u2763-\u2767\u2795-\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]|\uD83C[\uDC00-\uDCFF\uDD0D-\uDD0F\uDD2F\uDD6C-\uDD71\uDD7E\uDD7F\uDD8E\uDD91-\uDD9A\uDDAD-\uDDE5\uDE01-\uDE0F\uDE1A\uDE2F\uDE32-\uDE3A\uDE3C-\uDE3F\uDE49-\uDFFA]|\uD83D[\uDC00-\uDD3D\uDD46-\uDE4F\uDE80-\uDEFF\uDF74-\uDF7F\uDFD5-\uDFFF]|\uD83E[\uDC0C-\uDC0F\uDC48-\uDC4F\uDC5A-\uDC5F\uDC88-\uDC8F\uDCAE-\uDCFF\uDD0C-\uDD3A\uDD3C-\uDD45\uDD47-\uDEFF]|\uD83F[\uDC00-\uDFFD])\uFE0F?(?:\u200D(?:[\xA9\xAE\u203C\u2049\u2122\u2139\u2194-\u2199\u21A9\u21AA\u231A\u231B\u2328\u2388\u23CF\u23E9-\u23F3\u23F8-\u23FA\u24C2\u25AA\u25AB\u25B6\u25C0\u25FB-\u25FE\u2600-\u2605\u2607-\u2612\u2614-\u2685\u2690-\u2705\u2708-\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753-\u2755\u2757\u2763-\u2767\u2795-\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299]|\uD83C[\uDC00-\uDCFF\uDD0D-\uDD0F\uDD2F\uDD6C-\uDD71\uDD7E\uDD7F\uDD8E\uDD91-\uDD9A\uDDAD-\uDDE5\uDE01-\uDE0F\uDE1A\uDE2F\uDE32-\uDE3A\uDE3C-\uDE3F\uDE49-\uDFFA]|\uD83D[\uDC00-\uDD3D\uDD46-\uDE4F\uDE80-\uDEFF\uDF74-\uDF7F\uDFD5-\uDFFF]|\uD83E[\uDC0C-\uDC0F\uDC48-\uDC4F\uDC5A-\uDC5F\uDC88-\uDC8F\uDCAE-\uDCFF\uDD0C-\uDD3A\uDD3C-\uDD45\uDD47-\uDEFF]|\uD83F[\uDC00-\uDFFD])\uFE0F?)+|(?:\uD83C[\uDDE6-\uDDFF])(?:\uD83C[\uDDE6-\uDDFF]))$/;
+  return emojiRegex.test(fallbackText);
+}
+
+/**
+ * Emoji node view for renderering emoji nodes
+ */
 export var EmojiNodeView = /*#__PURE__*/function () {
+  /**
+   * Prosemirror node view for rendering emoji nodes. This class is responsible for
+   * rendering emoji nodes in the editor, handling updates, and managing fallback rendering.
+   *
+   * @param node - The ProseMirror node representing the emoji.
+   * @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.
+   *
+   * @example
+   * const emojiNodeView = new EmojiNodeView(node, { intl, api });
+   */
   function EmojiNodeView(node, _ref) {
     var _api$emoji,
       _sharedState$currentS,
-      _this = this;
+      _this = this,
+      _api$connectivity;
     var intl = _ref.intl,
       api = _ref.api;
     _classCallCheck(this, EmojiNodeView);
+    _defineProperty(this, "renderingFallback", false);
     _defineProperty(this, "destroy", function () {});
     this.node = node;
     this.intl = intl;
@@ -50,8 +82,19 @@ export var EmojiNodeView = /*#__PURE__*/function () {
       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();
     };
   }
   return _createClass(EmojiNodeView, [{
@@ -129,6 +172,7 @@ export var EmojiNodeView = /*#__PURE__*/function () {
   }, {
     key: "renderFallback",
     value: function renderFallback() {
+      this.renderingFallback = true;
       this.cleanUpAndRenderCommonAttributes();
       var fallbackElement = document.createElement('span');
       fallbackElement.innerText = this.node.attrs.text || this.node.attrs.shortName;
@@ -139,6 +183,7 @@ export var EmojiNodeView = /*#__PURE__*/function () {
   }, {
     key: "renderEmoji",
     value: function renderEmoji(description, representation) {
+      this.renderingFallback = false;
       this.cleanUpAndRenderCommonAttributes();
       var emojiType = 'sprite' in representation ? 'sprite' : 'image';
 
@@ -173,6 +218,7 @@ export var EmojiNodeView = /*#__PURE__*/function () {
   }, {
     key: "createImageEmojiElement",
     value: function createImageEmojiElement(emojiDescription, representation) {
+      var _this2 = this;
       var imageElement = document.createElement('img');
       imageElement.classList.add(EmojiSharedCssClassName.EMOJI_IMAGE);
       imageElement.src = 'imagePath' in representation ? representation.imagePath : representation.mediaPath;
@@ -183,6 +229,18 @@ export var EmojiNodeView = /*#__PURE__*/function () {
         // Because img.width is round to the nearest integer.
         imageElement.setAttribute('width', "".concat(defaultEmojiHeight / representation.height * representation.width));
       }
+      if (editorExperiment('platform_editor_offline_editing_web', true)) {
+        // If there's an error (ie. offline) render the ascii fallback if possible, otherwise
+        // mark the node to refresh when returning online.
+        imageElement.onerror = function () {
+          // Create a check that confirms if this.node.attrs.text if an ascii emoji
+          if (isSingleEmoji(_this2.node.attrs.text)) {
+            _this2.renderFallback();
+          } else {
+            _this2.renderingFallback = true;
+          }
+        };
+      }
       return imageElement;
     }
   }], [{

package/dist/types/emojiPluginType.d.ts

@@ -3,6 +3,7 @@ import type { Command, EditorCommand, NextEditorPlugin, OptionalPlugin, TypeAhea
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { InlineCommentInputMethod, InlineCommentMap } from '@atlaskit/editor-plugin-annotation';
 import type { BasePlugin } from '@atlaskit/editor-plugin-base';
+import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
 import { type EditorViewModePluginState } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { MetricsPlugin } from '@atlaskit/editor-plugin-metrics';
 import type { TypeAheadInputMethod, TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
@@ -53,7 +54,8 @@ export type EmojiPluginDependencies = [
     OptionalPlugin<AnnotationPluginType>,
     OptionalPlugin<EditorViewModePluginType>,
     OptionalPlugin<BasePlugin>,
-    OptionalPlugin<MetricsPlugin>
+    OptionalPlugin<MetricsPlugin>,
+    OptionalPlugin<ConnectivityPlugin>
 ];
 export type EmojiPlugin = NextEditorPlugin<'emoji', {
     pluginConfiguration: EmojiPluginOptions | undefined;

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

@@ -7,13 +7,38 @@ interface Params {
     intl: IntlShape;
     api: ExtractInjectionAPI<EmojiPlugin> | undefined;
 }
+/**
+ * Check if we can nicely fallback to the nodes text
+ *
+ * @param fallbackText string of the nodes fallback text
+ *
+ * @example
+ * isSingleEmoji('😀') // true
+ */
+export declare function isSingleEmoji(fallbackText: string): boolean;
+/**
+ * Emoji node view for renderering emoji nodes
+ */
 export declare class EmojiNodeView implements NodeView {
     dom: Node;
     domElement: HTMLElement | undefined;
     private readonly node;
     private readonly intl;
+    private renderingFallback;
     readonly destroy: () => void;
     private static logError;
+    /**
+     * Prosemirror node view for rendering emoji nodes. This class is responsible for
+     * rendering emoji nodes in the editor, handling updates, and managing fallback rendering.
+     *
+     * @param node - The ProseMirror node representing the emoji.
+     * @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.
+     *
+     * @example
+     * const emojiNodeView = new EmojiNodeView(node, { intl, api });
+     */
     constructor(node: PMNode, { intl, api }: Params);
     private updateDom;
     private static isEmojiRepresentationSupported;

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

@@ -3,6 +3,7 @@ import type { Command, EditorCommand, NextEditorPlugin, OptionalPlugin, TypeAhea
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { InlineCommentInputMethod, InlineCommentMap } from '@atlaskit/editor-plugin-annotation';
 import type { BasePlugin } from '@atlaskit/editor-plugin-base';
+import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
 import { type EditorViewModePluginState } from '@atlaskit/editor-plugin-editor-viewmode';
 import type { MetricsPlugin } from '@atlaskit/editor-plugin-metrics';
 import type { TypeAheadInputMethod, TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
@@ -53,7 +54,8 @@ export type EmojiPluginDependencies = [
     OptionalPlugin<AnnotationPluginType>,
     OptionalPlugin<EditorViewModePluginType>,
     OptionalPlugin<BasePlugin>,
-    OptionalPlugin<MetricsPlugin>
+    OptionalPlugin<MetricsPlugin>,
+    OptionalPlugin<ConnectivityPlugin>
 ];
 export type EmojiPlugin = NextEditorPlugin<'emoji', {
     pluginConfiguration: EmojiPluginOptions | undefined;

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

@@ -7,13 +7,38 @@ interface Params {
     intl: IntlShape;
     api: ExtractInjectionAPI<EmojiPlugin> | undefined;
 }
+/**
+ * Check if we can nicely fallback to the nodes text
+ *
+ * @param fallbackText string of the nodes fallback text
+ *
+ * @example
+ * isSingleEmoji('😀') // true
+ */
+export declare function isSingleEmoji(fallbackText: string): boolean;
+/**
+ * Emoji node view for renderering emoji nodes
+ */
 export declare class EmojiNodeView implements NodeView {
     dom: Node;
     domElement: HTMLElement | undefined;
     private readonly node;
     private readonly intl;
+    private renderingFallback;
     readonly destroy: () => void;
     private static logError;
+    /**
+     * Prosemirror node view for rendering emoji nodes. This class is responsible for
+     * rendering emoji nodes in the editor, handling updates, and managing fallback rendering.
+     *
+     * @param node - The ProseMirror node representing the emoji.
+     * @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.
+     *
+     * @example
+     * const emojiNodeView = new EmojiNodeView(node, { intl, api });
+     */
     constructor(node: PMNode, { intl, api }: Params);
     private updateDom;
     private static isEmojiRepresentationSupported;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-emoji",
-	"version": "3.6.6",
+	"version": "3.6.7",
 	"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": "^105.0.0",
-		"@atlaskit/editor-plugin-analytics": "^2.2.0",
+		"@atlaskit/editor-common": "^105.2.0",
+		"@atlaskit/editor-plugin-analytics": "^2.3.0",
 		"@atlaskit/editor-plugin-annotation": "^2.8.0",
 		"@atlaskit/editor-plugin-base": "^3.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.1.0",
 		"@atlaskit/editor-plugin-metrics": "^3.4.0",
-		"@atlaskit/editor-plugin-type-ahead": "^2.6.0",
+		"@atlaskit/editor-plugin-type-ahead": "^2.7.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
-		"@atlaskit/emoji": "^69.1.0",
+		"@atlaskit/emoji": "^69.2.0",
 		"@atlaskit/icon": "^26.0.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.19.0",
+		"@atlaskit/tmp-editor-statsig": "^4.21.0",
 		"@atlaskit/tokens": "^4.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",