diff options
| -rw-r--r-- | webapp/components/post_view/components/post_body_additional_content.jsx | 23 |
1 files changed, 14 insertions, 9 deletions
diff --git a/webapp/components/post_view/components/post_body_additional_content.jsx b/webapp/components/post_view/components/post_body_additional_content.jsx index 58b6f8498..549bb9faa 100644 --- a/webapp/components/post_view/components/post_body_additional_content.jsx +++ b/webapp/components/post_view/components/post_body_additional_content.jsx @@ -153,30 +153,36 @@ export default class PostBodyAdditionalContent extends React.Component { render() { if (this.isLinkToggleable() && !this.state.linkLoadError) { - const messageWithToggle = []; - // if message has only one line and starts with a link place toggle in this only line // else - place it in new line between message and embed const prependToggle = (/^\s*https?:\/\/.*$/).test(this.props.post.message); - messageWithToggle.push( + + const toggle = ( <a + key='toggle' className={`post__embed-visibility ${prependToggle ? 'pull-left' : ''}`} data-expanded={this.state.embedVisible} aria-label='Toggle Embed Visibility' onClick={this.toggleEmbedVisibility} /> ); + const message = ( + <div key='message'> + {this.props.message} + </div> + ); + let contents; if (prependToggle) { - messageWithToggle.push(this.props.message); + contents = [toggle, message]; } else { - messageWithToggle.unshift(this.props.message); + contents = [message, toggle]; } - let toggleableEmbed; if (this.state.embedVisible) { - toggleableEmbed = ( + contents.push( <div + key='embed' className='post__embed-container' > {this.generateToggleableEmbed()} @@ -186,8 +192,7 @@ export default class PostBodyAdditionalContent extends React.Component { return ( <div> - {messageWithToggle} - {toggleableEmbed} + {contents} </div> ); } |