implement unicode emoji replacements

app/assets/javascripts/pretty-text/engines/markdown-it/emoji.js.es6

@@ -171,13 +171,17 @@ function getEmojiTokenByTranslation(content, pos, state) {
   }
 }
 
-function applyEmoji(content, state) {
+function applyEmoji(content, state, emojiUnicodeReplacer) {
   let i;
   let result = null;
   let contentToken = null;
 
   let start = 0;
 
+  if (emojiUnicodeReplacer) {
+    content = emojiUnicodeReplacer(content);
+  }
+
   let endToken = content.length;
 
   for (i=0; i<content.length-1; i++) {
@@ -236,6 +240,8 @@ export function setup(helper) {
   });
 
   helper.registerPlugin((md)=>{
-    md.core.ruler.push('emoji', state => textReplace(state, applyEmoji));
+    md.core.ruler.push('emoji', state => textReplace(
+      state, (c,s)=>applyEmoji(c,s,md.options.discourse.emojiUnicodeReplacer))
+    );
   });
 }

app/assets/javascripts/pretty-text/pretty-text.js.es6

@@ -21,7 +21,8 @@ export function buildOptions(state) {
     userId,
     getCurrentUser,
     currentUser,
-    lookupAvatarByPostNumber
+    lookupAvatarByPostNumber,
+    emojiUnicodeReplacer
   } = state;
 
   if (!siteSettings.enable_experimental_markdown_it) {
@@ -53,6 +54,7 @@ export function buildOptions(state) {
     currentUser,
     lookupAvatarByPostNumber,
     mentionLookup: state.mentionLookup,
+    emojiUnicodeReplacer,
     allowedHrefSchemes: siteSettings.allowed_href_schemes ? siteSettings.allowed_href_schemes.split('|') : null,
     markdownIt: siteSettings.enable_experimental_markdown_it
   };

lib/pretty_text.rb

@@ -149,6 +149,7 @@ module PrettyText
       end
 
       if SiteSetting.enable_experimental_markdown_it
+        # defer load markdown it
         unless context.eval("window.markdownit")
           ctx_load_manifest(context, "markdown-it-bundle.js")
         end
@@ -168,6 +169,7 @@ module PrettyText
         __optInput.categoryHashtagLookup = __categoryLookup;
         __optInput.mentionLookup = __mentionLookup;
         __optInput.customEmoji = #{custom_emoji.to_json};
+        __optInput.emojiUnicodeReplacer = __emojiUnicodeReplacer;
       JS
 
       if opts[:topicId]

lib/pretty_text/shims.js

@@ -3,7 +3,28 @@ __buildOptions = require('pretty-text/pretty-text').buildOptions;
 __performEmojiUnescape = require('pretty-text/emoji').performEmojiUnescape;
 
 __utils = require('discourse/lib/utilities');
-__setUnicode = require('pretty-text/engines/discourse-markdown/emoji').setUnicodeReplacements;
+
+__emojiUnicodeReplacer = null;
+
+__setUnicode = function(replacements) {
+  require('pretty-text/engines/discourse-markdown/emoji').setUnicodeReplacements(replacements);
+  
+  let unicodeRegexp = new RegExp(Object.keys(replacements).sort().reverse().join("|"), "g");
+
+  __emojiUnicodeReplacer = function(text) {
+    unicodeRegexp.lastIndex = 0;
+    let m;
+    while ((m = unicodeRegexp.exec(text)) !== null) {
+      let replacement = ":" + replacements[m[0]] + ":";
+      const before = text.charAt(m.index-1);
+      if (!/\B/.test(before)) {
+        replacement = "\u200b" + replacement;
+      }
+      text = text.replace(m[0], replacement);
+    }
+    return text;
+  };
+};
 
 __paths = {};
 

spec/components/pretty_text_spec.rb

@@ -503,13 +503,13 @@ HTML
       SiteSetting.enable_experimental_markdown_it = true
     end
 
-    # it "replaces skin toned emoji" do
+    it "replaces skin toned emoji" do
-    #   expect(PrettyText.cook("hello 👱🏿‍♀️")).to eq("<p>hello <img src=\"/images/emoji/emoji_one/blonde_woman/6.png?v=5\" title=\":blonde_woman:t6:\" class=\"emoji\" alt=\":blonde_woman:t6:\"></p>")
+      expect(PrettyText.cook("hello 👱🏿‍♀️")).to eq("<p>hello <img src=\"/images/emoji/twitter/blonde_woman/6.png?v=5\" title=\":blonde_woman:t6:\" class=\"emoji\" alt=\":blonde_woman:t6:\"></p>")
-    #   expect(PrettyText.cook("hello 👩‍🎤")).to eq("<p>hello <img src=\"/images/emoji/emoji_one/woman_singer.png?v=5\" title=\":woman_singer:\" class=\"emoji\" alt=\":woman_singer:\"></p>")
+      expect(PrettyText.cook("hello 👩‍🎤")).to eq("<p>hello <img src=\"/images/emoji/twitter/woman_singer.png?v=5\" title=\":woman_singer:\" class=\"emoji\" alt=\":woman_singer:\"></p>")
-    #   expect(PrettyText.cook("hello 👩🏾‍🎓")).to eq("<p>hello <img src=\"/images/emoji/emoji_one/woman_student/5.png?v=5\" title=\":woman_student:t5:\" class=\"emoji\" alt=\":woman_student:t5:\"></p>")
+      expect(PrettyText.cook("hello 👩🏾‍🎓")).to eq("<p>hello <img src=\"/images/emoji/twitter/woman_student/5.png?v=5\" title=\":woman_student:t5:\" class=\"emoji\" alt=\":woman_student:t5:\"></p>")
-    #   expect(PrettyText.cook("hello 🤷‍♀️")).to eq("<p>hello <img src=\"/images/emoji/emoji_one/woman_shrugging.png?v=5\" title=\":woman_shrugging:\" class=\"emoji\" alt=\":woman_shrugging:\"></p>")
+      expect(PrettyText.cook("hello 🤷‍♀️")).to eq("<p>hello <img src=\"/images/emoji/twitter/woman_shrugging.png?v=5\" title=\":woman_shrugging:\" class=\"emoji\" alt=\":woman_shrugging:\"></p>")
-    # end
+    end
-    #
+
 
     it "supports href schemes" do
       SiteSetting.allowed_href_schemes = "macappstore|steam"