@atlaskit/editor-plugin-emoji 11.1.1 → 11.2.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-emoji
 
+## 11.2.0
+
+### Minor Changes
+
+- [`98324cca28bc6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/98324cca28bc6) -
+  Add unicode emoji support to EmojiNodeView
+
+## 11.1.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.1.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/EmojiNodeView.js

@@ -12,6 +12,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+var _browserApis = require("@atlaskit/browser-apis");
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _emoji = require("@atlaskit/editor-common/emoji");
 var _monitoring = require("@atlaskit/editor-common/monitoring");
@@ -223,7 +224,12 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
     value: function renderFallback() {
       this.renderingFallback = true;
       this.cleanUpAndRenderCommonAttributes();
-      var fallbackElement = document.createElement('span');
+      var doc = (0, _browserApis.getDocument)();
+      if (!doc) {
+        // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+        doc = document;
+      }
+      var fallbackElement = doc.createElement('span');
       fallbackElement.innerText = this.node.attrs.text || this.node.attrs.shortName;
       fallbackElement.setAttribute('data-testid', "fallback-emoji-".concat(this.node.attrs.shortName));
       fallbackElement.setAttribute('data-emoji-type', 'fallback');
@@ -235,23 +241,54 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
       this.renderingFallback = false;
       this.cleanUpAndRenderCommonAttributes();
       var emojiType = 'sprite' in representation ? 'sprite' : 'image';
+      var doc = (0, _browserApis.getDocument)();
+      if (!doc) {
+        // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+        doc = document;
+      }
 
       // Add wrapper for the emoji
-      var containerElement = document.createElement('span');
+      var containerElement = doc.createElement('span');
       containerElement.setAttribute('role', 'img');
       containerElement.setAttribute('title', description.shortName);
       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);
+      var emojiElement = 'unicodeEmoji' in representation ? this.createUnicodeEmojiElement(representation.unicodeEmoji) : 'sprite' in representation ? this.createSpriteEmojiElement(representation) : this.createImageEmojiElement(description, representation);
       containerElement.appendChild(emojiElement);
       this.dom.appendChild(containerElement);
     }
+  }, {
+    key: "createUnicodeEmojiElement",
+    value: function createUnicodeEmojiElement(emoji) {
+      var doc = (0, _browserApis.getDocument)();
+      if (!doc) {
+        // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+        doc = document;
+      }
+      var spanElement = doc.createElement('span');
+      spanElement.classList.add(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE);
+      spanElement.style.textAlign = 'center';
+      spanElement.style.alignContent = 'center';
+      spanElement.textContent = emoji;
+      spanElement.style.fontSize = "max(1em, ".concat(_emoji.defaultEmojiHeight, "px)");
+      spanElement.style.width = "max(calc(1em + 2px), ".concat(_emoji.defaultEmojiHeight + 2, "px)");
+      spanElement.style.height = "max(calc(1em + 2px), ".concat(_emoji.defaultEmojiHeight + 2, "px)");
+      spanElement.style.lineHeight = '0';
+      spanElement.style.margin = '0';
+      spanElement.style.padding = '0';
+      return spanElement;
+    }
   }, {
     key: "createSpriteEmojiElement",
     value: function createSpriteEmojiElement(representation) {
-      var spriteElement = document.createElement('span');
+      var doc = (0, _browserApis.getDocument)();
+      if (!doc) {
+        // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+        doc = document;
+      }
+      var spriteElement = doc.createElement('span');
       spriteElement.classList.add(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE);
       var sprite = representation.sprite;
       var xPositionInPercent = 100 / (sprite.column - 1) * representation.xIndex;
@@ -271,7 +308,12 @@ var EmojiNodeView = exports.EmojiNodeView = /*#__PURE__*/function () {
     key: "createImageEmojiElement",
     value: function createImageEmojiElement(emojiDescription, representation) {
       var _this2 = this;
-      var imageElement = document.createElement('img');
+      var doc = (0, _browserApis.getDocument)();
+      if (!doc) {
+        // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+        doc = document;
+      }
+      var imageElement = doc.createElement('img');
       imageElement.classList.add(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE);
       imageElement.src = 'imagePath' in representation ? representation.imagePath : representation.mediaPath;
       imageElement.loading = 'lazy';

package/dist/es2019/nodeviews/EmojiNodeView.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import isEqual from 'lodash/isEqual';
+import { getDocument } from '@atlaskit/browser-apis';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { messages, EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
 import { logException } from '@atlaskit/editor-common/monitoring';
@@ -191,7 +192,12 @@ export class EmojiNodeView {
   renderFallback() {
     this.renderingFallback = true;
     this.cleanUpAndRenderCommonAttributes();
-    const fallbackElement = document.createElement('span');
+    let doc = getDocument();
+    if (!doc) {
+      // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+      doc = document;
+    }
+    const fallbackElement = doc.createElement('span');
     fallbackElement.innerText = this.node.attrs.text || this.node.attrs.shortName;
     fallbackElement.setAttribute('data-testid', `fallback-emoji-${this.node.attrs.shortName}`);
     fallbackElement.setAttribute('data-emoji-type', 'fallback');
@@ -201,21 +207,50 @@ export class EmojiNodeView {
     this.renderingFallback = false;
     this.cleanUpAndRenderCommonAttributes();
     const emojiType = 'sprite' in representation ? 'sprite' : 'image';
+    let doc = getDocument();
+    if (!doc) {
+      // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+      doc = document;
+    }
 
     // Add wrapper for the emoji
-    const containerElement = document.createElement('span');
+    const containerElement = doc.createElement('span');
     containerElement.setAttribute('role', 'img');
     containerElement.setAttribute('title', description.shortName);
     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);
+    const emojiElement = 'unicodeEmoji' in representation ? this.createUnicodeEmojiElement(representation.unicodeEmoji) : 'sprite' in representation ? this.createSpriteEmojiElement(representation) : this.createImageEmojiElement(description, representation);
     containerElement.appendChild(emojiElement);
     this.dom.appendChild(containerElement);
   }
+  createUnicodeEmojiElement(emoji) {
+    let doc = getDocument();
+    if (!doc) {
+      // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+      doc = document;
+    }
+    const spanElement = doc.createElement('span');
+    spanElement.classList.add(EmojiSharedCssClassName.EMOJI_IMAGE);
+    spanElement.style.textAlign = 'center';
+    spanElement.style.alignContent = 'center';
+    spanElement.textContent = emoji;
+    spanElement.style.fontSize = `max(1em, ${defaultEmojiHeight}px)`;
+    spanElement.style.width = `max(calc(1em + 2px), ${defaultEmojiHeight + 2}px)`;
+    spanElement.style.height = `max(calc(1em + 2px), ${defaultEmojiHeight + 2}px)`;
+    spanElement.style.lineHeight = '0';
+    spanElement.style.margin = '0';
+    spanElement.style.padding = '0';
+    return spanElement;
+  }
   createSpriteEmojiElement(representation) {
-    const spriteElement = document.createElement('span');
+    let doc = getDocument();
+    if (!doc) {
+      // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+      doc = document;
+    }
+    const spriteElement = doc.createElement('span');
     spriteElement.classList.add(EmojiSharedCssClassName.EMOJI_SPRITE);
     const sprite = representation.sprite;
     const xPositionInPercent = 100 / (sprite.column - 1) * representation.xIndex;
@@ -232,7 +267,12 @@ export class EmojiNodeView {
     return spriteElement;
   }
   createImageEmojiElement(emojiDescription, representation) {
-    const imageElement = document.createElement('img');
+    let doc = getDocument();
+    if (!doc) {
+      // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+      doc = document;
+    }
+    const imageElement = doc.createElement('img');
     imageElement.classList.add(EmojiSharedCssClassName.EMOJI_IMAGE);
     imageElement.src = 'imagePath' in representation ? representation.imagePath : representation.mediaPath;
     imageElement.loading = 'lazy';

package/dist/esm/nodeviews/EmojiNodeView.js

@@ -4,6 +4,7 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import isEqual from 'lodash/isEqual';
+import { getDocument } from '@atlaskit/browser-apis';
 import { isSSR } from '@atlaskit/editor-common/core-utils';
 import { messages, EmojiSharedCssClassName, defaultEmojiHeight } from '@atlaskit/editor-common/emoji';
 import { logException } from '@atlaskit/editor-common/monitoring';
@@ -215,7 +216,12 @@ export var EmojiNodeView = /*#__PURE__*/function () {
     value: function renderFallback() {
       this.renderingFallback = true;
       this.cleanUpAndRenderCommonAttributes();
-      var fallbackElement = document.createElement('span');
+      var doc = getDocument();
+      if (!doc) {
+        // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+        doc = document;
+      }
+      var fallbackElement = doc.createElement('span');
       fallbackElement.innerText = this.node.attrs.text || this.node.attrs.shortName;
       fallbackElement.setAttribute('data-testid', "fallback-emoji-".concat(this.node.attrs.shortName));
       fallbackElement.setAttribute('data-emoji-type', 'fallback');
@@ -227,23 +233,54 @@ export var EmojiNodeView = /*#__PURE__*/function () {
       this.renderingFallback = false;
       this.cleanUpAndRenderCommonAttributes();
       var emojiType = 'sprite' in representation ? 'sprite' : 'image';
+      var doc = getDocument();
+      if (!doc) {
+        // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+        doc = document;
+      }
 
       // Add wrapper for the emoji
-      var containerElement = document.createElement('span');
+      var containerElement = doc.createElement('span');
       containerElement.setAttribute('role', 'img');
       containerElement.setAttribute('title', description.shortName);
       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);
+      var emojiElement = 'unicodeEmoji' in representation ? this.createUnicodeEmojiElement(representation.unicodeEmoji) : 'sprite' in representation ? this.createSpriteEmojiElement(representation) : this.createImageEmojiElement(description, representation);
       containerElement.appendChild(emojiElement);
       this.dom.appendChild(containerElement);
     }
+  }, {
+    key: "createUnicodeEmojiElement",
+    value: function createUnicodeEmojiElement(emoji) {
+      var doc = getDocument();
+      if (!doc) {
+        // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+        doc = document;
+      }
+      var spanElement = doc.createElement('span');
+      spanElement.classList.add(EmojiSharedCssClassName.EMOJI_IMAGE);
+      spanElement.style.textAlign = 'center';
+      spanElement.style.alignContent = 'center';
+      spanElement.textContent = emoji;
+      spanElement.style.fontSize = "max(1em, ".concat(defaultEmojiHeight, "px)");
+      spanElement.style.width = "max(calc(1em + 2px), ".concat(defaultEmojiHeight + 2, "px)");
+      spanElement.style.height = "max(calc(1em + 2px), ".concat(defaultEmojiHeight + 2, "px)");
+      spanElement.style.lineHeight = '0';
+      spanElement.style.margin = '0';
+      spanElement.style.padding = '0';
+      return spanElement;
+    }
   }, {
     key: "createSpriteEmojiElement",
     value: function createSpriteEmojiElement(representation) {
-      var spriteElement = document.createElement('span');
+      var doc = getDocument();
+      if (!doc) {
+        // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+        doc = document;
+      }
+      var spriteElement = doc.createElement('span');
       spriteElement.classList.add(EmojiSharedCssClassName.EMOJI_SPRITE);
       var sprite = representation.sprite;
       var xPositionInPercent = 100 / (sprite.column - 1) * representation.xIndex;
@@ -263,7 +300,12 @@ export var EmojiNodeView = /*#__PURE__*/function () {
     key: "createImageEmojiElement",
     value: function createImageEmojiElement(emojiDescription, representation) {
       var _this2 = this;
-      var imageElement = document.createElement('img');
+      var doc = getDocument();
+      if (!doc) {
+        // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage
+        doc = document;
+      }
+      var imageElement = doc.createElement('img');
       imageElement.classList.add(EmojiSharedCssClassName.EMOJI_IMAGE);
       imageElement.src = 'imagePath' in representation ? representation.imagePath : representation.mediaPath;
       imageElement.loading = 'lazy';

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

@@ -50,6 +50,7 @@ export declare class EmojiNodeView implements NodeView {
     private cleanUpAndRenderCommonAttributes;
     private renderFallback;
     private renderEmoji;
+    private createUnicodeEmojiElement;
     private createSpriteEmojiElement;
     private createImageEmojiElement;
 }

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

@@ -50,6 +50,7 @@ export declare class EmojiNodeView implements NodeView {
     private cleanUpAndRenderCommonAttributes;
     private renderFallback;
     private renderEmoji;
+    private createUnicodeEmojiElement;
     private createSpriteEmojiElement;
     private createImageEmojiElement;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-emoji",
-	"version": "11.1.1",
+	"version": "11.2.0",
 	"description": "Emoji plugin for @atlaskit/editor-core",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -21,7 +21,8 @@
 		"singleton": true
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^52.11.0",
+		"@atlaskit/adf-schema": "^52.12.0",
+		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/editor-plugin-analytics": "^10.1.0",
 		"@atlaskit/editor-plugin-annotation": "^10.4.0",
 		"@atlaskit/editor-plugin-base": "^11.1.0",
@@ -31,12 +32,12 @@
 		"@atlaskit/editor-plugin-type-ahead": "^10.1.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.11.0",
-		"@atlaskit/emoji": "^70.7.0",
-		"@atlaskit/icon": "^34.5.0",
+		"@atlaskit/emoji": "^70.9.0",
+		"@atlaskit/icon": "^35.0.0",
 		"@atlaskit/node-data-provider": "^11.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/prosemirror-input-rules": "^3.7.0",
-		"@atlaskit/tmp-editor-statsig": "^81.0.0",
+		"@atlaskit/tmp-editor-statsig": "^81.1.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -44,7 +45,7 @@
 		"react-loadable": "^5.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.32.0",
+		"@atlaskit/editor-common": "^114.35.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"