Fixing height of embeded images

2 files changed, 22 insertions, 2 deletions

diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx
index e1f495d54..e4094daf3 100644
--- a/web/react/components/post_body.jsx
+++ b/web/react/components/post_body.jsx
@@ -77,12 +77,12 @@ export default class PostBody extends React.Component {
         this.isGifLoading = true;
 
         const gif = new Image();
-        gif.src = src;
         gif.onload = (
             () => {
                 this.setState({gifLoaded: true});
             }
         );
+        gif.src = src;
     }
 
     createGifEmbed(link) {
@@ -92,7 +92,12 @@ export default class PostBody extends React.Component {
 
         if (!this.state.gifLoaded) {
             this.loadGif(link);
-            return null;
+            return (
+                <img
+                    className='gif-div placeholder'
+                    height='500px'
+                />
+            );
         }
 
         return (
diff --git a/web/react/utils/markdown.jsx b/web/react/utils/markdown.jsx
index 179416ea0..f9416b2de 100644
--- a/web/react/utils/markdown.jsx
+++ b/web/react/utils/markdown.jsx
@@ -34,6 +34,11 @@ const highlightJsIni = require('highlight.js/lib/languages/ini.js');
 const Constants = require('../utils/constants.jsx');
 const HighlightedLanguages = Constants.HighlightedLanguages;
 
+function markdownImageLoaded(image) {
+    image.style.height = 'auto';
+}
+window.markdownImageLoaded = markdownImageLoaded;
+
 class MattermostInlineLexer extends marked.InlineLexer {
     constructor(links, options) {
         super(links, options);
@@ -132,6 +137,16 @@ class MattermostMarkdownRenderer extends marked.Renderer {
         return super.br();
     }
 
+    image(href, title, text) {
+        let out = '<img src="' + href + '" alt="' + text + '"';
+        if (title) {
+            out += ' title="' + title + '"';
+        }
+        out += ' onload="window.markdownImageLoaded(this)" class="markdown-inline-img"';
+        out += this.options.xhtml ? '/>' : '>';
+        return out;
+    }
+
     heading(text, level, raw) {
         const id = `${this.options.headerPrefix}${raw.toLowerCase().replace(/[^\w]+/g, '-')}`;
         return `<h${level} id="${id}" class="markdown__heading">${text}</h${level}>`;