Added MarkdownImage component (#6774)

* Added MarkdownImage component

* Fixed unit tests

4 files changed, 42 insertions, 26 deletions

diff --git a/webapp/components/markdown_image.jsx b/webapp/components/markdown_image.jsx
new file mode 100644
index 000000000..75a6ce9ea
--- /dev/null
+++ b/webapp/components/markdown_image.jsx
@@ -0,0 +1,19 @@
+// Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React, {PureComponent} from 'react';
+
+import {postListScrollChange} from 'actions/global_actions.jsx';
+
+export default class MarkdownImage extends PureComponent {
+    handleLoad = () => {
+        postListScrollChange();
+    }
+
+    render() {
+        const props = {...this.props};
+        props.onLoad = this.handleLoad;
+
+        return <img {...props}/>;
+    }
+}
diff --git a/webapp/components/post_view/post_message_view/post_message_view.jsx b/webapp/components/post_view/post_message_view/post_message_view.jsx
index d066183ff..76037741f 100644
--- a/webapp/components/post_view/post_message_view/post_message_view.jsx
+++ b/webapp/components/post_view/post_message_view/post_message_view.jsx
@@ -7,6 +7,7 @@ import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
 import AtMention from 'components/at_mention';
+import MarkdownImage from 'components/markdown_image';
 
 import store from 'stores/redux_store.jsx';
 
@@ -114,6 +115,22 @@ export default class PostMessageView extends React.PureComponent {
                 }
             },
             {
+                shouldProcessNode: (node) => node.type === 'tag' && node.name === 'img',
+                processNode: (node) => {
+                    const {
+                        class: className,
+                        ...attribs
+                    } = node.attribs;
+
+                    return (
+                        <MarkdownImage
+                            className={className}
+                            {...attribs}
+                        />
+                    );
+                }
+            },
+            {
                 shouldProcessNode: () => true,
                 processNode: processNodeDefinitions.processDefaultNode
             }
diff --git a/webapp/tests/utils/formatting_imgs.test.jsx b/webapp/tests/utils/formatting_imgs.test.jsx
index 645a648d1..3e19a1e06 100644
--- a/webapp/tests/utils/formatting_imgs.test.jsx
+++ b/webapp/tests/utils/formatting_imgs.test.jsx
@@ -9,7 +9,7 @@ describe('Markdown.Imgs', function() {
     it('Inline mage', function(done) {
         assert.equal(
             Markdown.format('![Mattermost](/images/icon.png)').trim(),
-            '<p><img src="/images/icon.png" alt="Mattermost" onload="window.markdownImageLoaded(this)" onerror="window.markdownImageLoaded(this)" class="markdown-inline-img"></p>'
+            '<p><img src="/images/icon.png" alt="Mattermost" class="markdown-inline-img"></p>'
         );
 
         done();
@@ -18,7 +18,7 @@ describe('Markdown.Imgs', function() {
     it('Image with hover text', function(done) {
         assert.equal(
             Markdown.format('![Mattermost](/images/icon.png "Mattermost Icon")').trim(),
-            '<p><img src="/images/icon.png" alt="Mattermost" title="Mattermost Icon" onload="window.markdownImageLoaded(this)" onerror="window.markdownImageLoaded(this)" class="markdown-inline-img"></p>'
+            '<p><img src="/images/icon.png" alt="Mattermost" title="Mattermost Icon" class="markdown-inline-img"></p>'
         );
 
         done();
@@ -27,7 +27,7 @@ describe('Markdown.Imgs', function() {
     it('Image with link', function(done) {
         assert.equal(
             Markdown.format('[![Mattermost](../../images/icon-76x76.png)](https://github.com/mattermost/platform)').trim(),
-            '<p><a class="theme markdown__link" href="https://github.com/mattermost/platform" rel="noreferrer" target="_blank"><img src="../../images/icon-76x76.png" alt="Mattermost" onload="window.markdownImageLoaded(this)" onerror="window.markdownImageLoaded(this)" class="markdown-inline-img"></a></p>'
+            '<p><a class="theme markdown__link" href="https://github.com/mattermost/platform" rel="noreferrer" target="_blank"><img src="../../images/icon-76x76.png" alt="Mattermost" class="markdown-inline-img"></a></p>'
         );
 
         done();
@@ -36,7 +36,7 @@ describe('Markdown.Imgs', function() {
     it('Image with width and height', function(done) {
         assert.equal(
             Markdown.format('![Mattermost](../../images/icon-76x76.png =50x76 "Mattermost Icon")').trim(),
-            '<p><img src="../../images/icon-76x76.png" alt="Mattermost" title="Mattermost Icon" width="50" height="76" onload="window.markdownImageLoaded(this)" onerror="window.markdownImageLoaded(this)" class="markdown-inline-img"></p>'
+            '<p><img src="../../images/icon-76x76.png" alt="Mattermost" title="Mattermost Icon" width="50" height="76" class="markdown-inline-img"></p>'
         );
 
         done();
@@ -45,7 +45,7 @@ describe('Markdown.Imgs', function() {
     it('Image with width', function(done) {
         assert.equal(
             Markdown.format('![Mattermost](../../images/icon-76x76.png =50 "Mattermost Icon")').trim(),
-            '<p><img src="../../images/icon-76x76.png" alt="Mattermost" title="Mattermost Icon" width="50" onload="window.markdownImageLoaded(this)" onerror="window.markdownImageLoaded(this)" class="markdown-inline-img"></p>'
+            '<p><img src="../../images/icon-76x76.png" alt="Mattermost" title="Mattermost Icon" width="50" class="markdown-inline-img"></p>'
         );
 
         done();
diff --git a/webapp/utils/markdown.jsx b/webapp/utils/markdown.jsx
index 65c4c0396..8733e6200 100644
--- a/webapp/utils/markdown.jsx
+++ b/webapp/utils/markdown.jsx
@@ -4,29 +4,9 @@
 import * as TextFormatting from './text_formatting.jsx';
 import * as SyntaxHighlighting from './syntax_highlighting.jsx';
 
-import {postListScrollChange} from 'actions/global_actions.jsx';
-
 import marked from 'marked';
 import katex from 'katex';
 
-function markdownImageLoaded(image) {
-    if (image.hasAttribute('height') && image.attributes.height.value !== 'auto') {
-        const maxHeight = parseInt(global.getComputedStyle(image).maxHeight, 10);
-
-        if (image.attributes.height.value > maxHeight) {
-            image.style.height = maxHeight + 'px';
-            image.style.width = ((maxHeight * image.attributes.width.value) / image.attributes.height.value) + 'px';
-        } else {
-            image.style.height = image.attributes.height.value + 'px';
-        }
-    } else {
-        image.style.height = 'auto';
-    }
-
-    postListScrollChange();
-}
-global.markdownImageLoaded = markdownImageLoaded;
-
 class MattermostMarkdownRenderer extends marked.Renderer {
     constructor(options, formattingOptions = {}) {
         super(options);
@@ -155,7 +135,7 @@ class MattermostMarkdownRenderer extends marked.Renderer {
         if (dimensions.length > 1) {
             out += ' height="' + dimensions[1] + '"';
         }
-        out += ' onload="window.markdownImageLoaded(this)" onerror="window.markdownImageLoaded(this)" class="markdown-inline-img"';
+        out += ' class="markdown-inline-img"';
         out += this.options.xhtml ? '/>' : '>';
         return out;
     }