@atlaskit/editor-plugin-emoji 7.4.2 → 7.6.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-emoji
 
+## 7.6.0
+
+### Minor Changes
+
+- [`fdba2e94783b7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fdba2e94783b7) -
+  [https://product-fabric.atlassian.net/browse/ED-29638](ED-29638) - fix editor NodeDataProvider
+  network requests deduplication
+
+### Patch Changes
+
+- Updated dependencies
+
+## 7.5.0
+
+### Minor Changes
+
+- [`5319dac3f8740`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5319dac3f8740) -
+  Do not re-fetch emoji on a client after successful ssr
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.4.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/EmojiNodeView.js

@@ -278,23 +278,33 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
       imageElement.src = 'imagePath' in representation ? representation.imagePath : representation.mediaPath;
       imageElement.loading = 'lazy';
       imageElement.alt = emojiDescription.name || emojiDescription.shortName;
+      if ((0, _expValEquals.expValEquals)('platform_editor_emoji_otp', 'isEnabled', true)) {
+        imageElement.style.minWidth = "".concat(_emoji.defaultEmojiHeight, "px");
+        imageElement.style.objectFit = 'contain';
+      }
       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));
+        if (!(0, _expValEquals.expValEquals)('platform_editor_emoji_otp', 'isEnabled', true)) {
+          // 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 () {
+      imageElement.onerror = function () {
+        if ((0, _expValEquals.expValEquals)('platform_editor_emoji_otp', 'isEnabled', true)) {
+          _this2.renderFallback();
+          return;
+        }
+        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.
           // 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/cjs/pm-plugins/providers/EmojiNodeDataProvider.js

@@ -42,6 +42,37 @@ var EmojiNodeDataProvider = exports.EmojiNodeDataProvider = /*#__PURE__*/functio
       var _node$attrs$id;
       return (_node$attrs$id = node.attrs.id) !== null && _node$attrs$id !== void 0 ? _node$attrs$id : node.attrs.shortName;
     }
+
+    /**
+     * Implementing different re-fetching strategy for emoji.
+     *
+     * Default strategy for NodeDataProvider is to:
+     * 1. If entry is in cache = return from cache
+     * 2. Re-fetch data.
+     * 3. Update cache
+     * 4. Re-render node with fresh data.
+     *
+     * This is similar, but doesn't update the node.
+     * 1. If entry is in cache = return from cache
+     * 2. Re-fetch data.
+     * 3. Update cache
+     */
+  }, {
+    key: "getData",
+    value: function getData(node, callback) {
+      var _this2 = this;
+      var cached = this.getNodeDataFromCache(node);
+      if (cached !== null && cached !== void 0 && cached.data) {
+        callback(cached);
+        if (!(0, _coreUtils.isSSR)() && typeof requestAnimationFrame !== 'undefined') {
+          requestAnimationFrame(function () {
+            return void _this2.getDataAsync(node, function () {});
+          });
+        }
+      } else {
+        void this.getDataAsync(node, callback);
+      }
+    }
   }, {
     key: "fetchNodesData",
     value: function () {

package/dist/es2019/nodeviews/EmojiNodeView.js

@@ -239,23 +239,33 @@ export class EmojiNodeView {
     imageElement.src = 'imagePath' in representation ? representation.imagePath : representation.mediaPath;
     imageElement.loading = 'lazy';
     imageElement.alt = emojiDescription.name || emojiDescription.shortName;
+    if (expValEquals('platform_editor_emoji_otp', 'isEnabled', true)) {
+      imageElement.style.minWidth = `${defaultEmojiHeight}px`;
+      imageElement.style.objectFit = 'contain';
+    }
     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}`);
+      if (!expValEquals('platform_editor_emoji_otp', 'isEnabled', true)) {
+        // 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 = () => {
+    imageElement.onerror = () => {
+      if (expValEquals('platform_editor_emoji_otp', 'isEnabled', true)) {
+        this.renderFallback();
+        return;
+      }
+      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.
         // 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/es2019/pm-plugins/providers/EmojiNodeDataProvider.js

@@ -16,6 +16,32 @@ export class EmojiNodeDataProvider extends NodeDataProvider {
     var _node$attrs$id;
     return (_node$attrs$id = node.attrs.id) !== null && _node$attrs$id !== void 0 ? _node$attrs$id : node.attrs.shortName;
   }
+
+  /**
+   * Implementing different re-fetching strategy for emoji.
+   *
+   * Default strategy for NodeDataProvider is to:
+   * 1. If entry is in cache = return from cache
+   * 2. Re-fetch data.
+   * 3. Update cache
+   * 4. Re-render node with fresh data.
+   *
+   * This is similar, but doesn't update the node.
+   * 1. If entry is in cache = return from cache
+   * 2. Re-fetch data.
+   * 3. Update cache
+   */
+  getData(node, callback) {
+    const cached = this.getNodeDataFromCache(node);
+    if (cached !== null && cached !== void 0 && cached.data) {
+      callback(cached);
+      if (!isSSR() && typeof requestAnimationFrame !== 'undefined') {
+        requestAnimationFrame(() => void this.getDataAsync(node, () => {}));
+      }
+    } else {
+      void this.getDataAsync(node, callback);
+    }
+  }
   async fetchNodesData(nodes) {
     var _this$emojiResource$e;
     // If we have an `optimisticImageApi`, use it to generate a URL immediately.

package/dist/esm/nodeviews/EmojiNodeView.js

@@ -270,23 +270,33 @@ export var EmojiNodeView = /*#__PURE__*/function () {
       imageElement.src = 'imagePath' in representation ? representation.imagePath : representation.mediaPath;
       imageElement.loading = 'lazy';
       imageElement.alt = emojiDescription.name || emojiDescription.shortName;
+      if (expValEquals('platform_editor_emoji_otp', 'isEnabled', true)) {
+        imageElement.style.minWidth = "".concat(defaultEmojiHeight, "px");
+        imageElement.style.objectFit = 'contain';
+      }
       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));
+        if (!expValEquals('platform_editor_emoji_otp', 'isEnabled', true)) {
+          // 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 () {
+      imageElement.onerror = function () {
+        if (expValEquals('platform_editor_emoji_otp', 'isEnabled', true)) {
+          _this2.renderFallback();
+          return;
+        }
+        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.
           // 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/esm/pm-plugins/providers/EmojiNodeDataProvider.js

@@ -35,6 +35,37 @@ export var EmojiNodeDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
       var _node$attrs$id;
       return (_node$attrs$id = node.attrs.id) !== null && _node$attrs$id !== void 0 ? _node$attrs$id : node.attrs.shortName;
     }
+
+    /**
+     * Implementing different re-fetching strategy for emoji.
+     *
+     * Default strategy for NodeDataProvider is to:
+     * 1. If entry is in cache = return from cache
+     * 2. Re-fetch data.
+     * 3. Update cache
+     * 4. Re-render node with fresh data.
+     *
+     * This is similar, but doesn't update the node.
+     * 1. If entry is in cache = return from cache
+     * 2. Re-fetch data.
+     * 3. Update cache
+     */
+  }, {
+    key: "getData",
+    value: function getData(node, callback) {
+      var _this2 = this;
+      var cached = this.getNodeDataFromCache(node);
+      if (cached !== null && cached !== void 0 && cached.data) {
+        callback(cached);
+        if (!isSSR() && typeof requestAnimationFrame !== 'undefined') {
+          requestAnimationFrame(function () {
+            return void _this2.getDataAsync(node, function () {});
+          });
+        }
+      } else {
+        void this.getDataAsync(node, callback);
+      }
+    }
   }, {
     key: "fetchNodesData",
     value: function () {

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

@@ -1,5 +1,6 @@
 import type { EmojiDefinition } from '@atlaskit/adf-schema';
 import type { JSONNode } from '@atlaskit/editor-json-transformer';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { type EmojiResource, type OptionalEmojiDescriptionWithVariations } from '@atlaskit/emoji';
 import { NodeDataProvider } from '@atlaskit/node-data-provider';
 export declare class EmojiNodeDataProvider extends NodeDataProvider<EmojiDefinition, OptionalEmojiDescriptionWithVariations> {
@@ -9,5 +10,26 @@ export declare class EmojiNodeDataProvider extends NodeDataProvider<EmojiDefinit
     constructor(resource: EmojiResource);
     isNodeSupported(node: JSONNode): node is EmojiDefinition;
     nodeDataKey(node: EmojiDefinition): string;
+    /**
+     * Implementing different re-fetching strategy for emoji.
+     *
+     * Default strategy for NodeDataProvider is to:
+     * 1. If entry is in cache = return from cache
+     * 2. Re-fetch data.
+     * 3. Update cache
+     * 4. Re-render node with fresh data.
+     *
+     * This is similar, but doesn't update the node.
+     * 1. If entry is in cache = return from cache
+     * 2. Re-fetch data.
+     * 3. Update cache
+     */
+    getData(node: EmojiDefinition | PMNode, callback: (payload: {
+        data: OptionalEmojiDescriptionWithVariations;
+        error?: undefined;
+    } | {
+        data?: undefined;
+        error: Error;
+    }) => void): void;
     fetchNodesData(nodes: EmojiDefinition[]): Promise<OptionalEmojiDescriptionWithVariations[]>;
 }

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

@@ -1,5 +1,6 @@
 import type { EmojiDefinition } from '@atlaskit/adf-schema';
 import type { JSONNode } from '@atlaskit/editor-json-transformer';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { type EmojiResource, type OptionalEmojiDescriptionWithVariations } from '@atlaskit/emoji';
 import { NodeDataProvider } from '@atlaskit/node-data-provider';
 export declare class EmojiNodeDataProvider extends NodeDataProvider<EmojiDefinition, OptionalEmojiDescriptionWithVariations> {
@@ -9,5 +10,26 @@ export declare class EmojiNodeDataProvider extends NodeDataProvider<EmojiDefinit
     constructor(resource: EmojiResource);
     isNodeSupported(node: JSONNode): node is EmojiDefinition;
     nodeDataKey(node: EmojiDefinition): string;
+    /**
+     * Implementing different re-fetching strategy for emoji.
+     *
+     * Default strategy for NodeDataProvider is to:
+     * 1. If entry is in cache = return from cache
+     * 2. Re-fetch data.
+     * 3. Update cache
+     * 4. Re-render node with fresh data.
+     *
+     * This is similar, but doesn't update the node.
+     * 1. If entry is in cache = return from cache
+     * 2. Re-fetch data.
+     * 3. Update cache
+     */
+    getData(node: EmojiDefinition | PMNode, callback: (payload: {
+        data: OptionalEmojiDescriptionWithVariations;
+        error?: undefined;
+    } | {
+        data?: undefined;
+        error: Error;
+    }) => void): void;
     fetchNodesData(nodes: EmojiDefinition[]): Promise<OptionalEmojiDescriptionWithVariations[]>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-emoji",
-	"version": "7.4.2",
+	"version": "7.6.0",
 	"description": "Emoji plugin for @atlaskit/editor-core",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,12 +32,12 @@
 		"@atlaskit/editor-shared-styles": "^3.8.0",
 		"@atlaskit/emoji": "^69.6.0",
 		"@atlaskit/icon": "^28.5.0",
-		"@atlaskit/node-data-provider": "^7.2.0",
+		"@atlaskit/node-data-provider": "^7.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/prosemirror-input-rules": "^3.5.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^13.18.0",
-		"@atlaskit/tokens": "^7.0.0",
+		"@atlaskit/tmp-editor-statsig": "^13.26.0",
+		"@atlaskit/tokens": "^7.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21",
@@ -45,7 +45,7 @@
 		"react-loadable": "^5.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.18.0",
+		"@atlaskit/editor-common": "^110.21.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},