UX: Better emoji escaping for topic title (#7176)

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

@@ -3,7 +3,8 @@ import {
   aliases,
   searchAliases,
   translations,
-  tonableEmojis
+  tonableEmojis,
+  replacements
 } from "pretty-text/emoji/data";
 import { IMAGE_VERSION } from "pretty-text/emoji/version";
 
@@ -34,25 +35,48 @@ export function performEmojiUnescape(string, opts) {
     return;
   }
 
-  // this can be further improved by supporting matches of emoticons that don't begin with a colon
-  if (string.indexOf(":") >= 0) {
-    return string.replace(/\B:[^\s:]+(?::t\d)?:?\B/g, m => {
-      const isEmoticon = !!translations[m];
-      const emojiVal = isEmoticon ? translations[m] : m.slice(1, m.length - 1);
-      const hasEndingColon = m.lastIndexOf(":") === m.length - 1;
-      const url = buildEmojiUrl(emojiVal, opts);
-      const classes = isCustomEmoji(emojiVal, opts)
-        ? "emoji emoji-custom"
-        : "emoji";
+  return string.replace(/[\u1000-\uFFFF]+|\B:[^\s:]+(?::t\d)?:?\B/g, m => {
+    const isEmoticon = !!translations[m];
+    const isUnicodeEmoticon = !!replacements[m];
+    let emojiVal;
+    if (isEmoticon) {
+      emojiVal = translations[m];
+    } else if (isUnicodeEmoticon) {
+      emojiVal = replacements[m];
+    } else {
+      emojiVal = m.slice(1, m.length - 1);
+    }
+    const hasEndingColon = m.lastIndexOf(":") === m.length - 1;
+    const url = buildEmojiUrl(emojiVal, opts);
+    const classes = isCustomEmoji(emojiVal, opts)
+      ? "emoji emoji-custom"
+      : "emoji";
 
-      return url && (isEmoticon || hasEndingColon)
-        ? `<img src='${url}' ${
-            opts.skipTitle ? "" : `title='${emojiVal}'`
-          } alt='${emojiVal}' class='${classes}'>`
-        : m;
-    });
+    return url && (isEmoticon || hasEndingColon || isUnicodeEmoticon)
+      ? `<img src='${url}' ${
+          opts.skipTitle ? "" : `title='${emojiVal}'`
+        } alt='${emojiVal}' class='${classes}'>`
+      : m;
+  });
+
+  return string;
+}
+
+export function performEmojiEscape(string) {
+  if (!string) {
+    return;
   }
 
+  return string.replace(/[\u1000-\uFFFF]+|\B:[^\s:]+(?::t\d)?:?\B/g, m => {
+    if (!!translations[m]) {
+      return ":" + translations[m] + ":";
+    } else if (!!replacements[m]) {
+      return ":" + replacements[m] + ":";
+    } else {
+      return m;
+    }
+  });
+
   return string;
 }
 

app/assets/javascripts/pretty-text/emoji/data.js.es6.erb

@@ -3,3 +3,4 @@ export const tonableEmojis = <%= Emoji.tonable_emojis.flatten.inspect %>;
 export const aliases = <%= Emoji.aliases.inspect.gsub("=>", ":") %>;
 export const searchAliases = <%= Emoji.search_aliases.inspect.gsub("=>", ":") %>;
 export const translations = <%= Emoji.translations.inspect.gsub("=>", ":") %>;
+export const replacements = <%= Emoji.unicode_replacements_json %>;