diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2017-06-28 10:30:02 -0400 |
---|---|---|
committer | Christopher Speller <crspeller@gmail.com> | 2017-06-28 07:30:02 -0700 |
commit | 2dea567dcfcdfcd016c0da55a120c6e854760fb0 (patch) | |
tree | ae718a1d36b8a6f48eb3684ff7b57c3b7b2eac6d /webapp | |
parent | 0f6992034229f542d823f73cf740002ad0ac48e3 (diff) | |
download | chat-2dea567dcfcdfcd016c0da55a120c6e854760fb0.tar.gz chat-2dea567dcfcdfcd016c0da55a120c6e854760fb0.tar.bz2 chat-2dea567dcfcdfcd016c0da55a120c6e854760fb0.zip |
Added MarkdownImage component (#6774)
* Added MarkdownImage component
* Fixed unit tests
Diffstat (limited to 'webapp')
-rw-r--r-- | webapp/components/markdown_image.jsx | 19 | ||||
-rw-r--r-- | webapp/components/post_view/post_message_view/post_message_view.jsx | 17 | ||||
-rw-r--r-- | webapp/tests/utils/formatting_imgs.test.jsx | 10 | ||||
-rw-r--r-- | webapp/utils/markdown.jsx | 22 |
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; } |