From 56312f8f53e210b299076c9d420fab2fb59502bb Mon Sep 17 00:00:00 2001 From: hmhealey Date: Thu, 10 Sep 2015 11:06:08 -0400 Subject: Changed one instance of textToJsx to use new text formatting for testing purposes --- web/react/components/post_body.jsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'web/react/components') diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx index d9b8f20ce..e08936923 100644 --- a/web/react/components/post_body.jsx +++ b/web/react/components/post_body.jsx @@ -5,6 +5,7 @@ const FileAttachmentList = require('./file_attachment_list.jsx'); const UserStore = require('../stores/user_store.jsx'); const Utils = require('../utils/utils.jsx'); const Constants = require('../utils/constants.jsx'); +const TextFormatting = require('../utils/text_formatting.jsx'); const twemoji = require('twemoji'); export default class PostBody extends React.Component { @@ -12,6 +13,7 @@ export default class PostBody extends React.Component { super(props); this.parseEmojis = this.parseEmojis.bind(this); + this.handleClick = this.handleClick.bind(this); const linkData = Utils.extractLinks(this.props.post.message); this.state = {links: linkData.links, message: linkData.text}; @@ -29,6 +31,12 @@ export default class PostBody extends React.Component { const linkData = Utils.extractLinks(nextProps.post.message); this.setState({links: linkData.links, message: linkData.text}); } + handleClick(e) { + let mentionAttribute = e.target.getAttributeNode('data-mention'); + if (mentionAttribute) { + Utils.searchForTerm(mentionAttribute.value); + } + } render() { const post = this.props.post; const filenames = this.props.post.filenames; @@ -135,7 +143,7 @@ export default class PostBody extends React.Component { key={`${post.id}_message`} className={postClass} > - {loading}{inner} + {loading}

{fileAttachmentHolder} {embed} -- cgit v1.2.3-1-g7c22 From 15aa853da5f6be8a95970d73a700afc6b626c572 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Mon, 14 Sep 2015 11:48:07 -0400 Subject: Removed all calls to textToJsx and replaced them with calls to TextFormatting --- web/react/components/channel_header.jsx | 8 ++++---- web/react/components/message_wrapper.jsx | 10 +++------- web/react/components/navbar.jsx | 2 +- web/react/components/post_body.jsx | 14 +++++--------- web/react/components/rhs_comment.jsx | 10 ++++++++-- web/react/components/rhs_root_post.jsx | 7 +++++-- web/react/components/search_results_item.jsx | 16 +++++++++++++--- 7 files changed, 39 insertions(+), 28 deletions(-) (limited to 'web/react/components') diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx index db23a5831..0dbbc20d4 100644 --- a/web/react/components/channel_header.jsx +++ b/web/react/components/channel_header.jsx @@ -8,6 +8,7 @@ const SocketStore = require('../stores/socket_store.jsx'); const NavbarSearchBox = require('./search_bar.jsx'); const AsyncClient = require('../utils/async_client.jsx'); const Client = require('../utils/client.jsx'); +const TextFormatting = require('../utils/text_formatting.jsx'); const Utils = require('../utils/utils.jsx'); const MessageWrapper = require('./message_wrapper.jsx'); const PopoverListMembers = require('./popover_list_members.jsx'); @@ -107,7 +108,6 @@ export default class ChannelHeader extends React.Component { } const channel = this.state.channel; - const description = Utils.textToJsx(channel.description, {singleline: true, noMentionHighlight: true}); const popoverContent = React.renderToString(); let channelTitle = channel.display_name; const currentId = UserStore.getCurrentId(); @@ -326,9 +326,9 @@ export default class ChannelHeader extends React.Component { data-toggle='popover' data-content={popoverContent} className='description' - > - {description} - + onClick={TextFormatting.handleClick} + dangerouslySetInnerHTML={{__html: TextFormatting.formatText(channel.description, {singleline: true, mentionHighlight: false})}} + /> diff --git a/web/react/components/message_wrapper.jsx b/web/react/components/message_wrapper.jsx index bce305853..5adf4f228 100644 --- a/web/react/components/message_wrapper.jsx +++ b/web/react/components/message_wrapper.jsx @@ -1,7 +1,7 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var Utils = require('../utils/utils.jsx'); +var TextFormatting = require('../utils/text_formatting.jsx'); export default class MessageWrapper extends React.Component { constructor(props) { @@ -10,10 +10,7 @@ export default class MessageWrapper extends React.Component { } render() { if (this.props.message) { - var inner = Utils.textToJsx(this.props.message, this.props.options); - return ( -
{inner}
- ); + return
; } return
; @@ -21,8 +18,7 @@ export default class MessageWrapper extends React.Component { } MessageWrapper.defaultProps = { - message: null, - options: null + message: '' }; MessageWrapper.propTypes = { message: React.PropTypes.string, diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx index 2258bf2b3..cae9f12e4 100644 --- a/web/react/components/navbar.jsx +++ b/web/react/components/navbar.jsx @@ -332,7 +332,7 @@ export default class Navbar extends React.Component { popoverContent = React.renderToString( ); isAdmin = this.state.member.roles.indexOf('admin') > -1; diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx index e08936923..df4ed3d57 100644 --- a/web/react/components/post_body.jsx +++ b/web/react/components/post_body.jsx @@ -13,7 +13,6 @@ export default class PostBody extends React.Component { super(props); this.parseEmojis = this.parseEmojis.bind(this); - this.handleClick = this.handleClick.bind(this); const linkData = Utils.extractLinks(this.props.post.message); this.state = {links: linkData.links, message: linkData.text}; @@ -31,17 +30,10 @@ export default class PostBody extends React.Component { const linkData = Utils.extractLinks(nextProps.post.message); this.setState({links: linkData.links, message: linkData.text}); } - handleClick(e) { - let mentionAttribute = e.target.getAttributeNode('data-mention'); - if (mentionAttribute) { - Utils.searchForTerm(mentionAttribute.value); - } - } render() { const post = this.props.post; const filenames = this.props.post.filenames; const parentPost = this.props.parentPost; - const inner = Utils.textToJsx(this.state.message); let comment = ''; let postClass = ''; @@ -143,7 +135,11 @@ export default class PostBody extends React.Component { key={`${post.id}_message`} className={postClass} > - {loading} + {loading} +

{fileAttachmentHolder} {embed} diff --git a/web/react/components/rhs_comment.jsx b/web/react/components/rhs_comment.jsx index f1a90102c..ed136c01f 100644 --- a/web/react/components/rhs_comment.jsx +++ b/web/react/components/rhs_comment.jsx @@ -12,6 +12,7 @@ var FileAttachmentList = require('./file_attachment_list.jsx'); var Client = require('../utils/client.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var ActionTypes = Constants.ActionTypes; +var TextFormatting = require('../utils/text_formatting.jsx'); var twemoji = require('twemoji'); export default class RhsComment extends React.Component { @@ -84,7 +85,6 @@ export default class RhsComment extends React.Component { type = 'Comment'; } - var message = Utils.textToJsx(post.message); var timestamp = UserStore.getCurrentUser().update_at; var loading; @@ -202,7 +202,13 @@ export default class RhsComment extends React.Component {
-

{loading}{message}

+

+ {loading} + +

{fileAttachment}
diff --git a/web/react/components/rhs_root_post.jsx b/web/react/components/rhs_root_post.jsx index 83b57b955..85755a85c 100644 --- a/web/react/components/rhs_root_post.jsx +++ b/web/react/components/rhs_root_post.jsx @@ -4,6 +4,7 @@ var ChannelStore = require('../stores/channel_store.jsx'); var UserProfile = require('./user_profile.jsx'); var UserStore = require('../stores/user_store.jsx'); +var TextFormatting = require('../utils/text_formatting.jsx'); var utils = require('../utils/utils.jsx'); var FileAttachmentList = require('./file_attachment_list.jsx'); var twemoji = require('twemoji'); @@ -35,7 +36,6 @@ export default class RhsRootPost extends React.Component { } render() { var post = this.props.post; - var message = utils.textToJsx(post.message); var isOwner = UserStore.getCurrentId() === post.user_id; var timestamp = UserStore.getProfile(post.user_id).update_at; var channel = ChannelStore.get(post.channel_id); @@ -140,7 +140,10 @@ export default class RhsRootPost extends React.Component {
-

{message}

+

{fileAttachment}

diff --git a/web/react/components/search_results_item.jsx b/web/react/components/search_results_item.jsx index aa56f1174..0e951f5c6 100644 --- a/web/react/components/search_results_item.jsx +++ b/web/react/components/search_results_item.jsx @@ -10,6 +10,7 @@ var client = require('../utils/client.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); var Constants = require('../utils/constants.jsx'); +var TextFormatting = require('../utils/text_formatting.jsx'); var ActionTypes = Constants.ActionTypes; export default class SearchResultsItem extends React.Component { @@ -56,7 +57,6 @@ export default class SearchResultsItem extends React.Component { } render() { - var message = utils.textToJsx(this.props.post.message, {searchTerm: this.props.term, noMentionHighlight: !this.props.isMentionSearch}); var channelName = ''; var channel = ChannelStore.get(this.props.post.channel_id); var timestamp = UserStore.getCurrentUser().update_at; @@ -68,6 +68,11 @@ export default class SearchResultsItem extends React.Component { } } + const formattingOptions = { + searchTerm: this.props.term, + mentionHighlight: this.props.isMentionSearch + }; + return (
-
{message}
+
+ +
); @@ -102,4 +112,4 @@ SearchResultsItem.propTypes = { post: React.PropTypes.object, isMentionSearch: React.PropTypes.bool, term: React.PropTypes.string -}; \ No newline at end of file +}; -- cgit v1.2.3-1-g7c22