Use fname to render emojis properly

Author: alexmunda

draft-js-emoji-plugin/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "draft-js-emoji-plugin",
-  "version": "2.1.1",
+  "name": "draft-js-emoji-bump",
+  "version": "2.1.1-beta5",
   "description": "Emoji Plugin for DraftJS",
   "author": {
     "name": "Nik Graf",
@@ -32,11 +32,11 @@
   "license": "MIT",
   "dependencies": {
     "decorate-component-with-props": "^1.1.0",
-    "emojione": "^2.2.7",
+    "emojione": "^4.5.0",
     "find-with-regex": "^1.1.3",
     "immutable": "~3.7.4",
-    "prop-types": "^15.5.8",
     "lodash.keys": "^4.2.0",
+    "prop-types": "^15.5.8",
     "react-custom-scrollbars": "^4.2.0",
     "react-icons": "^2.2.6",
     "to-style": "^1.3.3",

draft-js-emoji-plugin/src/components/Emoji/index.js

@@ -16,14 +16,14 @@ const Emoji = ({ theme = {}, cacheBustParam, imagePath, imageType, className, de
     );
   } else {
     // short name to image url code steal from emojione source code
-    const shortNameForImage = emojione.emojioneList[shortName].unicode[emojione.emojioneList[shortName].unicode.length - 1];
-    const backgroundImage = `url(${imagePath}${shortNameForImage}.${imageType}${cacheBustParam})`;
+    const codepointsForImage = emojione.emojioneList[shortName].fname;
+    const backgroundImage = `url(${imagePath}${codepointsForImage}.${imageType}${cacheBustParam})`;
     const combinedClassName = unionClassNames(theme.emoji, className);
 
     emojiDisplay = (
       <span
         className={combinedClassName}
-        title={emojione.toShort(decoratedText)}
+        title={shortName}
         style={{ backgroundImage }}
       >
         {props.children}

draft-js-emoji-plugin/src/components/EmojiSelect/Popover/Entry/index.js

@@ -66,8 +66,8 @@ export default class Entry extends Component {
       emojiDisplay = convertShortNameToUnicode(unicode);
     } else {
       // short name to image url code steal from emojione source code
-      const shortNameForImage = emojione.emojioneList[emoji].unicode[emojione.emojioneList[emoji].unicode.length - 1];
-      const fullImagePath = `${imagePath}${shortNameForImage}.${imageType}${cacheBustParam}`;
+      const codePointsForImage = emojione.emojioneList[emoji].fname;
+      const fullImagePath = `${imagePath}${codePointsForImage}.${imageType}${cacheBustParam}`;
       emojiDisplay = (
         <img
           src={fullImagePath}

draft-js-emoji-plugin/src/components/EmojiSuggestions/Entry/index.js

@@ -41,12 +41,12 @@ export default class Entry extends Component {
 
     let emojiDisplay = null;
     if (useNativeArt === true) {
-      const unicode = emojiList.list[this.props.emoji][0];
+      const unicode = emojiList.list[this.props.emoji];
       emojiDisplay = convertShortNameToUnicode(unicode);
     } else {
       // short name to image url code steal from emojione source code
-      const shortNameForImage = emojione.emojioneList[this.props.emoji].unicode[emojione.emojioneList[this.props.emoji].unicode.length - 1];
-      const fullImagePath = `${imagePath}${shortNameForImage}.${imageType}${cacheBustParam}`;
+      const codePointsForImage = emojione.emojioneList[this.props.emoji].fname;
+      const fullImagePath = `${imagePath}${codePointsForImage}.${imageType}${cacheBustParam}`;
       emojiDisplay = (
         <img
           src={fullImagePath}

draft-js-emoji-plugin/src/emojiStrategy.js

@@ -1,7 +1,7 @@
 import findWithRegex from 'find-with-regex';
 import emojione from 'emojione';
 
-const unicodeRegex = new RegExp(emojione.unicodeRegexp, 'g');
+const unicodeRegex = emojione.regUnicode;
 
 export default (contentBlock: Object, callback: Function) => {
   findWithRegex(unicodeRegex, contentBlock, callback);

draft-js-emoji-plugin/src/index.js

@@ -17,9 +17,9 @@ import attachImmutableEntitiesToEmojis from './modifiers/attachImmutableEntities
 import defaultPositionSuggestions from './utils/positionSuggestions';
 import emojiList from './utils/emojiList';
 
-const defaultImagePath = '//cdn.jsdelivr.net/emojione/assets/svg/';
-const defaultImageType = 'svg';
-const defaultCacheBustParam = '?v=2.2.7';
+const defaultImagePath = '//cdn.jsdelivr.net/npm/emojione-assets@3.1.0/png/128/';
+const defaultImageType = 'png';
+const defaultCacheBustParam = '?v=4.5.0';
 
 // TODO activate/deactivate different the conversion or search part
 

draft-js-emoji-plugin/src/modifiers/addEmoji.js

@@ -11,7 +11,7 @@ const Mode = {
 };
 
 const addEmoji = (editorState, emojiShortName, mode = Mode.INSERT) => {
-  const unicode = emojiList.list[emojiShortName][0];
+  const unicode = emojiList.list[emojiShortName];
   const emoji = convertShortNameToUnicode(unicode);
 
   const contentState = editorState.getCurrentContent();

draft-js-emoji-plugin/src/modifiers/attachImmutableEntitiesToEmojis.js

@@ -2,7 +2,7 @@ import { EditorState, Modifier, SelectionState } from 'draft-js';
 import findWithRegex from 'find-with-regex';
 import emojione from 'emojione';
 
-const unicodeRegex = new RegExp(emojione.unicodeRegexp, 'g');
+const unicodeRegex = emojione.regUnicode;
 
 /*
  * Attaches Immutable DraftJS Entities to the Emoji text.

draft-js-emoji-plugin/src/utils/emojiList.js

@@ -6,7 +6,7 @@ const newEmojiListWithOutPriorityList = (priorityList) => {
     if (priorityList.hasOwnProperty(key)) { // eslint-disable-line no-prototype-builtins
       continue; // eslint-disable-line no-continue
     }
-    list[key] = emojione.emojioneList[key].unicode;
+    list[key] = emojione.emojioneList[key].fname;
   }
 
   return { ...priorityList, ...list };
@@ -21,15 +21,15 @@ emojiList.setPriorityList = (newPriorityList) => {
 
 // init emojiList
 const priorityList = {
-  ':thumbsup:': ['1f44d'],
-  ':smile:': ['1f604'],
-  ':heart:': ['2764-fe0f', '2764'],
-  ':ok_hand:': ['1f44c'],
-  ':joy:': ['1f602'],
-  ':tada:': ['1f389'],
-  ':see_no_evil:': ['1f648'],
-  ':raised_hands:': ['1f64c'],
-  ':100:': ['1f4af'],
+  ':thumbsup:': '1f44d',
+  ':smile:': '1f604',
+  ':heart:': '2764-fe0f',
+  ':ok_hand:': '1f44c',
+  ':joy:': '1f602',
+  ':tada:': '1f389',
+  ':see_no_evil:': '1f648',
+  ':raised_hands:': '1f64c',
+  ':100:': '1f4af',
 };
 emojiList.setPriorityList(priorityList);
 

draft-js-emoji-plugin/src/utils/mappedUnicode.js

@@ -9,9 +9,7 @@ const mapUnicode = () => {
       continue;// eslint-disable-line no-continue
     }
 
-    for (let i = 0, len = emojiList.list[shortname].length; i < len; i += 1) {
-      unicodes[emojiList.list[shortname][i]] = shortname;
-    }
+    unicodes[emojiList.list[shortname]] = shortname;
   }
 
   return unicodes;