3 files changed, 19 insertions, 3 deletions
diff --git a/web/react/utils/emoticons.jsx b/web/react/utils/emoticons.jsx
index 7b43e48b4..aabddcffd 100644
--- a/web/react/utils/emoticons.jsx
+++ b/web/react/utils/emoticons.jsx
@@ -133,7 +133,7 @@ export function handleEmoticons(text, tokens) {
             const alias = `MM_EMOTICON${index}`;
 
             tokens.set(alias, {
-                value: `<img align="absmiddle" alt=${match} class="emoji" src=${getImagePathForEmoticon(name)} title=${match} />`,
+                value: `<img align="absmiddle" alt="${match}" class="emoji" src="${getImagePathForEmoticon(name)}" title="${match}" />`,
                 originalText: match
             });
 
diff --git a/web/react/utils/markdown.jsx b/web/react/utils/markdown.jsx
index 2813798d2..7a4e70054 100644
--- a/web/react/utils/markdown.jsx
+++ b/web/react/utils/markdown.jsx
@@ -11,6 +11,7 @@ export class MattermostMarkdownRenderer extends marked.Renderer {
         super(options);
 
         this.heading = this.heading.bind(this);
+        this.paragraph = this.paragraph.bind(this);
         this.text = this.text.bind(this);
 
         this.formattingOptions = formattingOptions;
@@ -53,11 +54,17 @@ export class MattermostMarkdownRenderer extends marked.Renderer {
     }
 
     paragraph(text) {
+        let outText = text;
+
+        if (!('emoticons' in this.options) || this.options.emoticon) {
+            outText = TextFormatting.doFormatEmoticons(text);
+        }
+
         if (this.formattingOptions.singleline) {
-            return `<p class="markdown__paragraph-inline">${text}</p>`;
+            return `<p class="markdown__paragraph-inline">${outText}</p>`;
         }
 
-        return super.paragraph(text);
+        return super.paragraph(outText);
     }
 
     table(header, body) {
diff --git a/web/react/utils/text_formatting.jsx b/web/react/utils/text_formatting.jsx
index d79aeed68..5c2e68f1e 100644
--- a/web/react/utils/text_formatting.jsx
+++ b/web/react/utils/text_formatting.jsx
@@ -69,6 +69,15 @@ export function doFormatText(text, options) {
     return output;
 }
 
+export function doFormatEmoticons(text) {
+    const tokens = new Map();
+
+    let output = Emoticons.handleEmoticons(text, tokens);
+    output = replaceTokens(output, tokens);
+
+    return output;
+}
+
 export function sanitizeHtml(text) {
     let output = text;