From 3cf2570561373209ec64cc3a197f3aa0ada2ce66 Mon Sep 17 00:00:00 2001
From: Jackie Luo <jacquelineluo95@gmail.com>
Date: Mon, 4 Apr 2016 11:03:52 -0700
Subject: [PATCH] fix(composer-emoji): Replace images with Unicode characters
 properly

---
 .../composer-emoji/lib/emoji-composer-extension.jsx   | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/internal_packages/composer-emoji/lib/emoji-composer-extension.jsx b/internal_packages/composer-emoji/lib/emoji-composer-extension.jsx
index febf61c02..33963ad10 100644
--- a/internal_packages/composer-emoji/lib/emoji-composer-extension.jsx
+++ b/internal_packages/composer-emoji/lib/emoji-composer-extension.jsx
@@ -133,7 +133,7 @@ class EmojiComposerExtension extends ComposerExtension {
 
   static applyTransformsToDraft = ({draft}) => {
     const nextDraft = draft.clone();
-    nextDraft.body = nextDraft.body.replace(/<span class="missing-emoji ([a-zA-Z0-9-_]*)">.*<\/span>/g, (match, emojiName) =>
+    nextDraft.body = nextDraft.body.replace(/<img class="missing-emoji ([a-zA-Z0-9-_]*)" [^<]+>/g, (match, emojiName) =>
       `<span class="broken-emoji ${emojiName}">${emoji.get(emojiName)}</span>`
     );
     return nextDraft;
@@ -141,8 +141,8 @@ class EmojiComposerExtension extends ComposerExtension {
 
   static unapplyTransformsToDraft = ({draft}) => {
     const nextDraft = draft.clone();
-    nextDraft.body = nextDraft.body.replace(/<span class="broken-emoji ([a-zA-Z0-9-_]*)">.*<\/span>/g, (match, emojiName) =>
-      `<span class="missing-emoji ${emojiName}"><img src="images/composer-emoji/missing-emoji/${emojiName}.png" width="14" height="14" style="margin-top: -5px;" /></span>`
+    nextDraft.body = nextDraft.body.replace(/<span class="broken-emoji ([a-zA-Z0-9-_]*)">[^<]+<\/span>/g, (match, emojiName) =>
+      `<img class="missing-emoji ${emojiName}" src="images/composer-emoji/missing-emoji/${emojiName}.png" width="14" height="14" style="margin-top: -5px;">`
     );
     return nextDraft;
   }
@@ -206,11 +206,12 @@ class EmojiComposerExtension extends ComposerExtension {
     }
     const emojiChar = emoji.get(emojiName);
     if (process.platform === "darwin" && missingEmojiList.indexOf(emojiName) !== -1) {
-      const html = `<span class="missing-emoji ${emojiName}"><img
+      const html = `<img
+                      class="missing-emoji ${emojiName}"
                       src="images/composer-emoji/missing-emoji/${emojiName}.png"
                       width="14"
                       height="14"
-                      style="margin-top: -5px;" /></span>`;
+                      style="margin-top: -5px;">`;
       editor.insertHTML(html, {selectInsertion: false});
     } else {
       editor.insertText(emojiChar);