From f73daebb61311efb966afdff75034a7f9c710fbf Mon Sep 17 00:00:00 2001 From: Harrison Healey Date: Fri, 22 Apr 2016 14:52:44 -0400 Subject: [PATCH] PLT-1236 Added special handling for markdown links within mattermost (#2763) * Added special handling for markdown links within mattermost * Moved application of .app__body class to route components --- webapp/components/channel_view.jsx | 5 +++++ webapp/components/permalink_view.jsx | 5 +++++ webapp/components/posts_view.jsx | 2 -- .../tutorial/tutorial_intro_screens.jsx | 7 ------- webapp/components/tutorial/tutorial_view.jsx | 5 +++++ webapp/utils/markdown.jsx | 19 ++++++++++--------- webapp/utils/text_formatting.jsx | 4 ++++ 7 files changed, 29 insertions(+), 18 deletions(-) diff --git a/webapp/components/channel_view.jsx b/webapp/components/channel_view.jsx index 00e1b7f35f..45d0f2393c 100644 --- a/webapp/components/channel_view.jsx +++ b/webapp/components/channel_view.jsx @@ -1,6 +1,7 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. +import $ from 'jquery'; import React from 'react'; import ChannelHeader from 'components/channel_header.jsx'; @@ -35,9 +36,13 @@ export default class ChannelView extends React.Component { } componentDidMount() { ChannelStore.addChangeListener(this.updateState); + + $('body').addClass('app__body'); } componentWillUnmount() { ChannelStore.removeChangeListener(this.updateState); + + $('body').removeClass('app__body'); } componentWillReceiveProps(nextProps) { this.setState(this.getStateFromStores(nextProps)); diff --git a/webapp/components/permalink_view.jsx b/webapp/components/permalink_view.jsx index 2c32d643d0..07f826d573 100644 --- a/webapp/components/permalink_view.jsx +++ b/webapp/components/permalink_view.jsx @@ -1,6 +1,7 @@ // Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. +import $ from 'jquery'; import React from 'react'; import ChannelHeader from 'components/channel_header.jsx'; @@ -45,10 +46,14 @@ export default class PermalinkView extends React.Component { componentDidMount() { ChannelStore.addChangeListener(this.updateState); TeamStore.addChangeListener(this.updateState); + + $('body').addClass('app__body'); } componentWillUnmount() { ChannelStore.removeChangeListener(this.updateState); TeamStore.removeChangeListener(this.updateState); + + $('body').removeClass('app__body'); } componentWillReceiveProps(nextProps) { this.setState(this.getStateFromStores(nextProps)); diff --git a/webapp/components/posts_view.jsx b/webapp/components/posts_view.jsx index 560a46e9ad..be098086f6 100644 --- a/webapp/components/posts_view.jsx +++ b/webapp/components/posts_view.jsx @@ -379,13 +379,11 @@ export default class PostsView extends React.Component { } window.addEventListener('resize', this.handleResize); PreferenceStore.addChangeListener(this.updateState); - $('body').addClass('app__body'); } componentWillUnmount() { window.removeEventListener('resize', this.handleResize); this.scrollStopAction.cancel(); PreferenceStore.removeChangeListener(this.updateState); - $('body').removeClass('app__body'); } componentDidUpdate() { if (this.props.postList != null) { diff --git a/webapp/components/tutorial/tutorial_intro_screens.jsx b/webapp/components/tutorial/tutorial_intro_screens.jsx index 8b73775e5d..0358a6a65e 100644 --- a/webapp/components/tutorial/tutorial_intro_screens.jsx +++ b/webapp/components/tutorial/tutorial_intro_screens.jsx @@ -1,7 +1,6 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -import $ from 'jquery'; import UserStore from 'stores/user_store.jsx'; import TeamStore from 'stores/team_store.jsx'; import PreferenceStore from 'stores/preference_store.jsx'; @@ -35,12 +34,6 @@ export default class TutorialIntroScreens extends React.Component { this.state = {currentScreen: 0}; } - componentDidMount() { - $('body').addClass('app__body'); - } - componentWillUnmount() { - $('body').removeClass('app__body'); - } handleNext() { if (this.state.currentScreen < 2) { this.setState({currentScreen: this.state.currentScreen + 1}); diff --git a/webapp/components/tutorial/tutorial_view.jsx b/webapp/components/tutorial/tutorial_view.jsx index 5f2c1a257e..39e7b68168 100644 --- a/webapp/components/tutorial/tutorial_view.jsx +++ b/webapp/components/tutorial/tutorial_view.jsx @@ -6,6 +6,7 @@ import TutorialIntroScreens from './tutorial_intro_screens.jsx'; import ChannelStore from 'stores/channel_store.jsx'; import Constants from 'utils/constants.jsx'; +import $ from 'jquery'; import React from 'react'; export default class TutorialView extends React.Component { @@ -20,9 +21,13 @@ export default class TutorialView extends React.Component { } componentDidMount() { ChannelStore.addChangeListener(this.handleChannelChange); + + $('body').addClass('app__body'); } componentWillUnmount() { ChannelStore.removeChangeListener(this.handleChannelChange); + + $('body').removeClass('app__body'); } handleChannelChange() { this.setState({ diff --git a/webapp/utils/markdown.jsx b/webapp/utils/markdown.jsx index dff425e1fa..f2b5bcc393 100644 --- a/webapp/utils/markdown.jsx +++ b/webapp/utils/markdown.jsx @@ -2,7 +2,6 @@ // See License.txt for license information. import * as TextFormatting from './text_formatting.jsx'; -import * as Utils from './utils.jsx'; import * as syntaxHightlighting from './syntax_hightlighting.jsx'; import marked from 'marked'; @@ -137,18 +136,20 @@ class MattermostMarkdownRenderer extends marked.Renderer { outHref = `http://${outHref}`; } - let output = ''; + output += '>' + outText + ''; return prefix + output + suffix; } diff --git a/webapp/utils/text_formatting.jsx b/webapp/utils/text_formatting.jsx index 4c8b5e24c3..3aa82ccdcb 100644 --- a/webapp/utils/text_formatting.jsx +++ b/webapp/utils/text_formatting.jsx @@ -2,6 +2,7 @@ // See License.txt for license information. import Autolinker from 'autolinker'; +import {browserHistory} from 'react-router'; import Constants from './constants.jsx'; import * as Emoticons from './emoticons.jsx'; import * as Markdown from './markdown.jsx'; @@ -398,10 +399,13 @@ function replaceNewlines(text) { export function handleClick(e) { const mentionAttribute = e.target.getAttributeNode('data-mention'); const hashtagAttribute = e.target.getAttributeNode('data-hashtag'); + const linkAttribute = e.target.getAttributeNode('data-link'); if (mentionAttribute) { Utils.searchForTerm(mentionAttribute.value); } else if (hashtagAttribute) { Utils.searchForTerm(hashtagAttribute.value); + } else if (linkAttribute) { + browserHistory.push(linkAttribute.value); } }