@atlaskit/editor-plugin-emoji 7.4.1 → 7.5.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/editor-plugin-emoji
 
+## 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
+
+- [`21fe79119fe74`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/21fe79119fe74) -
+  EDITOR-2447 Bump adf-schema to 51.3.2
+- [`f42616e52392b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f42616e52392b) -
+  [ux] EDITOR-2506 Disable emoji inserting when matched with ascii map
+- Updated dependencies
+
 ## 7.4.1
 
 ### Patch Changes

package/dist/cjs/emojiPlugin.js

@@ -151,10 +151,9 @@ var emojiPlugin = exports.emojiPlugin = function emojiPlugin(_ref2) {
       var _ref5 = emojiPluginKey.getState(editorState) || {},
         asciiMap = _ref5.asciiMap;
       var normalizedQuery = TRIGGER.concat(query);
-
       // if the query has space at the end
       // check the ascii map for emojis
-      if (asciiMap && normalizedQuery.length >= 3 && normalizedQuery.endsWith(' ') && asciiMap.has(normalizedQuery.trim())) {
+      if (!(options !== null && options !== void 0 && options.disableAutoformat && (0, _expValEquals.expValEquals)('platform_editor_plain_text_support', 'isEnabled', true)) && asciiMap && normalizedQuery.length >= 3 && normalizedQuery.endsWith(' ') && asciiMap.has(normalizedQuery.trim())) {
         var _emoji = asciiMap.get(normalizedQuery.trim());
         return {
           title: (_emoji === null || _emoji === void 0 ? void 0 : _emoji.name) || '',

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 && cached.data && !(0, _nodeDataProvider.isPromise)(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/emojiPlugin.js

@@ -130,10 +130,9 @@ export const emojiPlugin = ({
         asciiMap
       } = emojiPluginKey.getState(editorState) || {};
       const normalizedQuery = TRIGGER.concat(query);
-
       // if the query has space at the end
       // check the ascii map for emojis
-      if (asciiMap && normalizedQuery.length >= 3 && normalizedQuery.endsWith(' ') && asciiMap.has(normalizedQuery.trim())) {
+      if (!(options !== null && options !== void 0 && options.disableAutoformat && expValEquals('platform_editor_plain_text_support', 'isEnabled', true)) && asciiMap && normalizedQuery.length >= 3 && normalizedQuery.endsWith(' ') && asciiMap.has(normalizedQuery.trim())) {
         const emoji = asciiMap.get(normalizedQuery.trim());
         return {
           title: (emoji === null || emoji === void 0 ? void 0 : emoji.name) || '',

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

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { defaultEmojiHeight } from '@atlaskit/emoji';
-import { NodeDataProvider } from '@atlaskit/node-data-provider';
+import { NodeDataProvider, isPromise } from '@atlaskit/node-data-provider';
 export class EmojiNodeDataProvider extends NodeDataProvider {
   constructor(resource) {
     super();
@@ -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 && cached.data && !isPromise(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/emojiPlugin.js

@@ -140,10 +140,9 @@ export var emojiPlugin = function emojiPlugin(_ref2) {
       var _ref5 = emojiPluginKey.getState(editorState) || {},
         asciiMap = _ref5.asciiMap;
       var normalizedQuery = TRIGGER.concat(query);
-
       // if the query has space at the end
       // check the ascii map for emojis
-      if (asciiMap && normalizedQuery.length >= 3 && normalizedQuery.endsWith(' ') && asciiMap.has(normalizedQuery.trim())) {
+      if (!(options !== null && options !== void 0 && options.disableAutoformat && expValEquals('platform_editor_plain_text_support', 'isEnabled', true)) && asciiMap && normalizedQuery.length >= 3 && normalizedQuery.endsWith(' ') && asciiMap.has(normalizedQuery.trim())) {
         var _emoji = asciiMap.get(normalizedQuery.trim());
         return {
           title: (_emoji === null || _emoji === void 0 ? void 0 : _emoji.name) || '',

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

@@ -12,7 +12,7 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { defaultEmojiHeight } from '@atlaskit/emoji';
-import { NodeDataProvider } from '@atlaskit/node-data-provider';
+import { NodeDataProvider, isPromise } from '@atlaskit/node-data-provider';
 export var EmojiNodeDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
   function EmojiNodeDataProvider(resource) {
     var _this;
@@ -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 && cached.data && !isPromise(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.1",
+	"version": "7.5.0",
 	"description": "Emoji plugin for @atlaskit/editor-core",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -21,7 +21,7 @@
 		"singleton": true
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^51.3.1",
+		"@atlaskit/adf-schema": "^51.3.2",
 		"@atlaskit/editor-plugin-analytics": "^6.2.0",
 		"@atlaskit/editor-plugin-annotation": "^6.2.0",
 		"@atlaskit/editor-plugin-base": "^7.2.0",
@@ -32,11 +32,11 @@
 		"@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.3.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/tmp-editor-statsig": "^13.19.0",
 		"@atlaskit/tokens": "^7.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",