Added MarkdownImage component (#6774)

* Added MarkdownImage component

* Fixed unit tests

2 files changed, 36 insertions, 0 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
             }