diff options
Diffstat (limited to 'web/react')
-rw-r--r-- | web/react/components/post.jsx | 2 | ||||
-rw-r--r-- | web/react/components/post_attachment_oembed.jsx | 35 | ||||
-rw-r--r-- | web/react/components/post_body.jsx | 21 | ||||
-rw-r--r-- | web/react/components/post_body_additional_content.jsx | 6 | ||||
-rw-r--r-- | web/react/components/post_info.jsx | 81 | ||||
-rw-r--r-- | web/react/components/providers.json | 158 | ||||
-rw-r--r-- | web/react/components/suggestion/suggestion_box.jsx | 2 | ||||
-rw-r--r-- | web/react/components/user_settings/user_settings_advanced.jsx | 2 | ||||
-rw-r--r-- | web/react/utils/constants.jsx | 7 | ||||
-rw-r--r-- | web/react/utils/utils.jsx | 20 |
10 files changed, 218 insertions, 116 deletions
diff --git a/web/react/components/post.jsx b/web/react/components/post.jsx index 786a4a325..695d7daef 100644 --- a/web/react/components/post.jsx +++ b/web/react/components/post.jsx @@ -152,7 +152,7 @@ export default class Post extends React.Component { } let currentUserCss = ''; - if (UserStore.getCurrentId() === post.user_id && !post.props.from_webhook) { + if (UserStore.getCurrentId() === post.user_id && !post.props.from_webhook && !utils.isSystemMessage(post)) { currentUserCss = 'current--user'; } diff --git a/web/react/components/post_attachment_oembed.jsx b/web/react/components/post_attachment_oembed.jsx index f544dbc88..13c32f744 100644 --- a/web/react/components/post_attachment_oembed.jsx +++ b/web/react/components/post_attachment_oembed.jsx @@ -20,8 +20,11 @@ export default class PostAttachmentOEmbed extends React.Component { fetchData(link) { if (!this.isLoading) { this.isLoading = true; + let url = 'https://noembed.com/embed?nowrap=on'; + url += '&url=' + encodeURIComponent(link); + url += '&maxheight=' + this.props.provider.height; return $.ajax({ - url: 'https://noembed.com/embed?nowrap=on&url=' + encodeURIComponent(link), + url, dataType: 'jsonp', success: (result) => { this.isLoading = false; @@ -39,8 +42,18 @@ export default class PostAttachmentOEmbed extends React.Component { } render() { + let data = {}; + let content; if ($.isEmptyObject(this.state.data)) { - return <div></div>; + content = <div style={{height: this.props.provider.height}}/>; + } else { + data = this.state.data; + content = ( + <div + style={{height: this.props.provider.height}} + dangerouslySetInnerHTML={{__html: data.html}} + /> + ); } return ( @@ -57,18 +70,17 @@ export default class PostAttachmentOEmbed extends React.Component { > <a className='attachment__title-link' - href={this.state.data.url} + href={data.url} target='_blank' > - {this.state.data.title} + {data.title} </a> </h1> - <div> - <div className={'attachment__body attachment__body--no_thumb'}> - <div - dangerouslySetInnerHTML={{__html: this.state.data.html}} - > - </div> + <div > + <div + className={'attachment__body attachment__body--no_thumb'} + > + {content} </div> </div> </div> @@ -79,5 +91,6 @@ export default class PostAttachmentOEmbed extends React.Component { } PostAttachmentOEmbed.propTypes = { - link: React.PropTypes.string.isRequired + link: React.PropTypes.string.isRequired, + provider: React.PropTypes.object.isRequired }; diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx index 27f7ad2de..296b9e7d7 100644 --- a/web/react/components/post_body.jsx +++ b/web/react/components/post_body.jsx @@ -6,6 +6,7 @@ import UserStore from '../stores/user_store.jsx'; import * as Utils from '../utils/utils.jsx'; import * as Emoji from '../utils/emoticons.jsx'; import Constants from '../utils/constants.jsx'; +const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES; import * as TextFormatting from '../utils/text_formatting.jsx'; import twemoji from 'twemoji'; import PostBodyAdditionalContent from './post_body_additional_content.jsx'; @@ -109,11 +110,14 @@ export default class PostBody extends React.Component { const trimmedLink = link.trim(); - if (this.checkForOembedContent(trimmedLink)) { - post.props.oEmbedLink = trimmedLink; - post.type = 'oEmbed'; - this.setState({post}); - return ''; + if (Utils.isFeatureEnabled(PreReleaseFeatures.EMBED_PREVIEW)) { + const provider = this.getOembedProvider(trimmedLink); + if (provider != null) { + post.props.oEmbedLink = trimmedLink; + post.type = 'oEmbed'; + this.setState({post, provider}); + return ''; + } } const embed = this.createYoutubeEmbed(link); @@ -133,15 +137,15 @@ export default class PostBody extends React.Component { return null; } - checkForOembedContent(link) { + getOembedProvider(link) { for (let i = 0; i < providers.length; i++) { for (let j = 0; j < providers[i].patterns.length; j++) { if (link.match(providers[i].patterns[j])) { - return true; + return providers[i]; } } } - return false; + return null; } loadImg(src) { @@ -399,6 +403,7 @@ export default class PostBody extends React.Component { </div> <PostBodyAdditionalContent post={this.state.post} + provider={this.state.provider} /> {fileAttachmentHolder} {this.embed} diff --git a/web/react/components/post_body_additional_content.jsx b/web/react/components/post_body_additional_content.jsx index e19bf51eb..7e6f3f037 100644 --- a/web/react/components/post_body_additional_content.jsx +++ b/web/react/components/post_body_additional_content.jsx @@ -32,6 +32,7 @@ export default class PostBodyAdditionalContent extends React.Component { return ( <PostAttachmentOEmbed key={'post_body_additional_content' + this.props.post.id} + provider={this.props.provider} link={link} /> ); @@ -68,5 +69,6 @@ export default class PostBodyAdditionalContent extends React.Component { } PostBodyAdditionalContent.propTypes = { - post: React.PropTypes.object.isRequired -};
\ No newline at end of file + post: React.PropTypes.object.isRequired, + provider: React.PropTypes.object +}; diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx index cedb2b59b..0b8b07d8c 100644 --- a/web/react/components/post_info.jsx +++ b/web/react/components/post_info.jsx @@ -9,14 +9,15 @@ import * as EventHelpers from '../dispatcher/event_helpers.jsx'; import Constants from '../utils/constants.jsx'; -const OverlayTrigger = ReactBootstrap.OverlayTrigger; +const Overlay = ReactBootstrap.Overlay; const Popover = ReactBootstrap.Popover; export default class PostInfo extends React.Component { constructor(props) { super(props); this.state = { - copiedLink: false + copiedLink: false, + show: false }; this.handlePermalinkCopy = this.handlePermalinkCopy.bind(this); @@ -41,30 +42,37 @@ export default class PostInfo extends React.Component { dataComments = this.props.commentCount; } - if (isOwner) { + if (this.props.allowReply === 'true') { dropdownContents.push( <li - key='editPost' + key='replyLink' role='presentation' > <a + className='link__reply theme' href='#' - role='menuitem' - data-toggle='modal' - data-target='#edit_post' - data-refocusid='#post_textbox' - data-title={type} - data-message={post.message} - data-postid={post.id} - data-channelid={post.channel_id} - data-comments={dataComments} + onClick={this.props.handleCommentClick} > - {'Edit'} + {'Reply'} </a> </li> ); } + dropdownContents.push( + <li + key='copyLink' + role='presentation' + > + <a + href='#' + onClick={(e) => this.setState({target: e.target, show: !this.state.show})} + > + {'Permalink'} + </a> + </li> + ); + if (isOwner || isAdmin) { dropdownContents.push( <li @@ -82,18 +90,25 @@ export default class PostInfo extends React.Component { ); } - if (this.props.allowReply === 'true') { + if (isOwner) { dropdownContents.push( <li - key='replyLink' + key='editPost' role='presentation' > <a - className='link__reply theme' href='#' - onClick={this.props.handleCommentClick} + role='menuitem' + data-toggle='modal' + data-target='#edit_post' + data-refocusid='#post_textbox' + data-title={type} + data-message={post.message} + data-postid={post.id} + data-channelid={post.channel_id} + data-comments={dataComments} > - {'Reply'} + {'Edit'} </a> </li> ); @@ -121,6 +136,7 @@ export default class PostInfo extends React.Component { </div> ); } + handlePermalinkCopy() { const textBox = $(ReactDOM.findDOMNode(this.refs.permalinkbox)); textBox.select(); @@ -128,7 +144,7 @@ export default class PostInfo extends React.Component { try { const successful = document.execCommand('copy'); if (successful) { - this.setState({copiedLink: true}); + this.setState({copiedLink: true, show: false}); } else { this.setState({copiedLink: false}); } @@ -197,6 +213,8 @@ export default class PostInfo extends React.Component { </Popover> ); + const containerPadding = 20; + return ( <ul className='post__header post__header--info'> <li className='col'> @@ -206,18 +224,23 @@ export default class PostInfo extends React.Component { </li> <li className='col col__reply'> {comments} - <OverlayTrigger - trigger='click' - placement='left' - rootClose={true} - overlay={permalinkOverlay} + <div + className='dropdown' + ref='dotMenu' > - <i className={'permalink-icon fa fa-link ' + showCommentClass}/> - </OverlayTrigger> - - <div className='dropdown'> {dropdown} </div> + <Overlay + show={this.state.show} + target={() => ReactDOM.findDOMNode(this.refs.dotMenu)} + onHide={() => this.setState({show: false})} + placement='left' + container={this} + containerPadding={containerPadding} + rootClose={true} + > + {permalinkOverlay} + </Overlay> </li> </ul> ); diff --git a/web/react/components/providers.json b/web/react/components/providers.json index 5e4cbd656..33e377a39 100644 --- a/web/react/components/providers.json +++ b/web/react/components/providers.json @@ -3,265 +3,308 @@ "patterns": [ "http://(?:www\\.)?xkcd\\.com/\\d+/?" ], - "name": "XKCD" + "name": "XKCD", + "height": 110 }, { "patterns": [ "https?://soundcloud.com/.*/.*" ], - "name": "SoundCloud" + "name": "SoundCloud", + "height": 110 }, { "patterns": [ "https?://(?:www\\.)?flickr\\.com/.*", "https?://flic\\.kr/p/[a-zA-Z0-9]+" ], - "name": "Flickr" + "name": "Flickr", + "height": 110 }, { "patterns": [ "http://www\\.ted\\.com/talks/.+\\.html" ], - "name": "TED" + "name": "TED", + "height": 110 }, { "patterns": [ "http://(?:www\\.)?theverge\\.com/\\d{4}/\\d{1,2}/\\d{1,2}/\\d+/[^/]+/?$" ], - "name": "The Verge" + "name": "The Verge", + "height": 110 }, { "patterns": [ "http://.*\\.viddler\\.com/.*" ], - "name": "Viddler" + "name": "Viddler", + "height": 110 }, { "patterns": [ "https?://(?:www\\.)?avclub\\.com/article/[^/]+/?$" ], - "name": "The AV Club" + "name": "The AV Club", + "height": 110 }, { "patterns": [ "https?://(?:www\\.)?wired\\.com/([^/]+/)?\\d+/\\d+/[^/]+/?$" ], - "name": "Wired" + "name": "Wired", + "height": 110 }, { "patterns": [ "http://www\\.theonion\\.com/articles/[^/]+/?" ], - "name": "The Onion" + "name": "The Onion", + "height": 110 }, { "patterns": [ "http://yfrog\\.com/[0-9a-zA-Z]+/?$" ], - "name": "YFrog" + "name": "YFrog", + "height": 110 }, { "patterns": [ "http://www\\.duffelblog\\.com/\\d{4}/\\d{1,2}/[^/]+/?$" ], - "name": "The Duffel Blog" + "name": "The Duffel Blog", + "height": 110 }, { "patterns": [ "http://www\\.clickhole\\.com/article/[^/]+/?" ], - "name": "Clickhole" + "name": "Clickhole", + "height": 110 }, { "patterns": [ "https?://(?:www.)?skitch.com/([^/]+)/[^/]+/.+", "http://skit.ch/[^/]+" ], - "name": "Skitch" + "name": "Skitch", + "height": 110 }, { "patterns": [ "https?://(alpha|posts|photos)\\.app\\.net/.*" ], - "name": "ADN" + "name": "ADN", + "height": 110 }, { "patterns": [ "https?://gist\\.github\\.com/(?:[-0-9a-zA-Z]+/)?([0-9a-fA-f]+)" ], - "name": "Gist" + "name": "Gist", + "height": 110 }, { "patterns": [ "https?://www\\.(dropbox\\.com/s/.+\\.(?:jpg|png|gif))", "https?://db\\.tt/[a-zA-Z0-9]+" ], - "name": "Dropbox" + "name": "Dropbox", + "height": 110 }, { "patterns": [ "https?://[^\\.]+\\.wikipedia\\.org/wiki/(?!Talk:)[^#]+(?:#(.+))?" ], - "name": "Wikipedia" + "name": "Wikipedia", + "height": 110 }, { "patterns": [ "http://www.traileraddict.com/trailer/[^/]+/trailer" ], - "name": "TrailerAddict" + "name": "TrailerAddict", + "height": 110 }, { "patterns": [ "http://lockerz\\.com/[sd]/\\d+" ], - "name": "Lockerz" + "name": "Lockerz", + "height": 110 }, { "patterns": [ "http://gifuk\\.com/s/[0-9a-f]{16}" ], - "name": "GIFUK" + "name": "GIFUK", + "height": 110 }, { "patterns": [ "http://trailers\\.apple\\.com/trailers/[^/]+/[^/]+" ], - "name": "iTunes Movie Trailers" + "name": "iTunes Movie Trailers", + "height": 110 }, { "patterns": [ "http://gfycat\\.com/([a-zA-Z]+)" ], - "name": "Gfycat" + "name": "Gfycat", + "height": 110 }, { "patterns": [ "http://bash\\.org/\\?(\\d+)" ], - "name": "Bash.org" + "name": "Bash.org", + "height": 110 }, { "patterns": [ "http://arstechnica\\.com/[^/]+/\\d+/\\d+/[^/]+/?$" ], - "name": "Ars Technica" + "name": "Ars Technica", + "height": 110 }, { "patterns": [ "http://imgur\\.com/gallery/[0-9a-zA-Z]+" ], - "name": "Imgur" + "name": "Imgur", + "height": 110 }, { "patterns": [ "http://www\\.asciiartfarts\\.com/[0-9]+\\.html" ], - "name": "ASCII Art Farts" + "name": "ASCII Art Farts", + "height": 110 }, { "patterns": [ "http://www\\.monoprice\\.com/products/product\\.asp\\?.*p_id=\\d+" ], - "name": "Monoprice" + "name": "Monoprice", + "height": 110 }, { "patterns": [ "http://boingboing\\.net/\\d{4}/\\d{2}/\\d{2}/[^/]+\\.html" ], - "name": "Boing Boing" + "name": "Boing Boing", + "height": 110 }, { "patterns": [ "https?://github\\.com/([^/]+)/([^/]+)/commit/(.+)", "http://git\\.io/[_0-9a-zA-Z]+" ], - "name": "Github Commit" + "name": "Github Commit", + "height": 110 }, { "patterns": [ "https?://open\\.spotify\\.com/(track|album)/([0-9a-zA-Z]{22})" ], - "name": "Spotify" + "name": "Spotify", + "height": 110 }, { "patterns": [ "https?://path\\.com/p/([0-9a-zA-Z]+)$" ], - "name": "Path" + "name": "Path", + "height": 110 }, { "patterns": [ "http://www.funnyordie.com/videos/[^/]+/.+" ], - "name": "Funny or Die" + "name": "Funny or Die", + "height": 110 }, { "patterns": [ "http://(?:www\\.)?twitpic\\.com/([^/]+)" ], - "name": "Twitpic" + "name": "Twitpic", + "height": 110 }, { "patterns": [ "https?://www\\.giantbomb\\.com/videos/[^/]+/\\d+-\\d+/?" ], - "name": "GiantBomb" + "name": "GiantBomb", + "height": 110 }, { "patterns": [ "http://(?:www\\.)?beeradvocate\\.com/beer/profile/\\d+/\\d+" ], - "name": "Beer Advocate" + "name": "Beer Advocate", + "height": 110 }, { "patterns": [ "http://(?:www\\.)?imdb.com/title/(tt\\d+)" ], - "name": "IMDB" + "name": "IMDB", + "height": 110 }, { "patterns": [ "http://cl\\.ly/(?:image/)?[0-9a-zA-Z]+/?$" ], - "name": "CloudApp" + "name": "CloudApp", + "height": 110 }, { "patterns": [ "http://clyp\\.it/.*" ], - "name": "Clyp" + "name": "Clyp", + "height": 110 }, { "patterns": [ "http://www\\.hulu\\.com/watch/.*" ], - "name": "Hulu" + "name": "Hulu", + "height": 110 }, { "patterns": [ "https?://(?:www|mobile\\.)?twitter\\.com/(?:#!/)?[^/]+/status(?:es)?/(\\d+)/?$", "https?://t\\.co/[a-zA-Z0-9]+" ], - "name": "Twitter" + "name": "Twitter", + "height": 110 }, { "patterns": [ "https?://(?:www\\.)?vimeo\\.com/.+" ], - "name": "Vimeo" + "name": "Vimeo", + "height": 110 }, { "patterns": [ "http://www\\.amazon\\.com/(?:.+/)?[gd]p/(?:product/)?(?:tags-on-product/)?([a-zA-Z0-9]+)", "http://amzn\\.com/([^/]+)" ], - "name": "Amazon" + "name": "Amazon", + "height": 110 }, { "patterns": [ "http://qik\\.com/video/.*" ], - "name": "Qik" + "name": "Qik", + "height": 110 }, { "patterns": [ @@ -269,56 +312,65 @@ "http://www\\.rdio\\.com/artist/[^/]+/album/[^/]+/track/[^/]+/?", "http://www\\.rdio\\.com/people/[^/]+/playlists/\\d+/[^/]+" ], - "name": "Rdio" + "name": "Rdio", + "height": 110 }, { "patterns": [ "http://www\\.slideshare\\.net/.*/.*" ], - "name": "SlideShare" + "name": "SlideShare", + "height": 110 }, { "patterns": [ "http://imgur\\.com/([0-9a-zA-Z]+)$" ], - "name": "Imgur" + "name": "Imgur", + "height": 110 }, { "patterns": [ "https?://instagr(?:\\.am|am\\.com)/p/.+" ], - "name": "Instagram" + "name": "Instagram", + "height": 110 }, { "patterns": [ "http://www\\.twitlonger\\.com/show/[a-zA-Z0-9]+", "http://tl\\.gd/[^/]+" ], - "name": "Twitlonger" + "name": "Twitlonger", + "height": 110 }, { "patterns": [ "https?://vine.co/v/[a-zA-Z0-9]+" ], - "name": "Vine" + "name": "Vine", + "height": 110 }, { "patterns": [ "http://www\\.urbandictionary\\.com/define\\.php\\?term=.+" ], - "name": "Urban Dictionary" + "name": "Urban Dictionary", + "height": 110 }, { "patterns": [ "http://picplz\\.com/user/[^/]+/pic/[^/]+" ], - "name": "Picplz" + "name": "Picplz", + "height": 110 }, { "patterns": [ "https?://(?:www\\.)?twitter\\.com/(?:#!/)?[^/]+/status(?:es)?/(\\d+)/photo/\\d+(?:/large|/)?$", "https?://pic\\.twitter\\.com/.+" ], - "name": "Twitter" + "name": "Twitter", + "height": 110 } -]
\ No newline at end of file +] diff --git a/web/react/components/suggestion/suggestion_box.jsx b/web/react/components/suggestion/suggestion_box.jsx index 4cfb38f8e..ad8ad1e9e 100644 --- a/web/react/components/suggestion/suggestion_box.jsx +++ b/web/react/components/suggestion/suggestion_box.jsx @@ -94,7 +94,7 @@ export default class SuggestionBox extends React.Component { } else if (e.which === KeyCodes.DOWN) { EventHelpers.emitSelectNextSuggestion(this.suggestionId); e.preventDefault(); - } else if (e.which === KeyCodes.ENTER || (e.which === KeyCodes.SPACE && SuggestionStore.shouldCompleteOnSpace(this.suggestionId))) { + } else if (e.which === KeyCodes.ENTER || e.which === KeyCodes.TAB || (e.which === KeyCodes.SPACE && SuggestionStore.shouldCompleteOnSpace(this.suggestionId))) { EventHelpers.emitCompleteWordSuggestion(this.suggestionId); e.preventDefault(); } else if (this.props.onKeyDown) { diff --git a/web/react/components/user_settings/user_settings_advanced.jsx b/web/react/components/user_settings/user_settings_advanced.jsx index b4d34c658..c15936ccd 100644 --- a/web/react/components/user_settings/user_settings_advanced.jsx +++ b/web/react/components/user_settings/user_settings_advanced.jsx @@ -195,7 +195,7 @@ export default class AdvancedSettingsDisplay extends React.Component { inputs.push( <div key='advancedPreviewFeatures_helptext'> <br/> - {'Check any pre-released features you\'d like to preview.'} + {'Check any pre-released features you\'d like to preview. You may also need to refresh the page before the setting will take effect.'} </div> ); diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index 2d0edd596..170a16049 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -391,7 +391,8 @@ export default { BACKSPACE: 8, ENTER: 13, ESCAPE: 27, - SPACE: 32 + SPACE: 32, + TAB: 9 }, HighlightedLanguages: { diff: 'Diff', @@ -431,6 +432,10 @@ export default { MARKDOWN_PREVIEW: { label: 'markdown_preview', // github issue: https://github.com/mattermost/platform/pull/1389 description: 'Show markdown preview option in message input box' + }, + EMBED_PREVIEW: { + label: 'embed_preview', + description: 'Show preview snippet of links below message' } } }; diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index afe27ef96..f80da8415 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -252,13 +252,6 @@ export function getTimestamp() { // extracts links not styled by Markdown export function extractLinks(text) { - const urlMatcher = new Autolinker.matchParser.MatchParser({ - urls: true, - emails: false, - twitter: false, - phone: false, - hashtag: false - }); const links = []; let replaceText = text; @@ -271,7 +264,7 @@ export function extractLinks(text) { } } - function replaceFn(match) { + function replaceFn(autolinker, match) { let link = ''; const matchText = match.getMatchedText(); const tempText = replaceText; @@ -304,7 +297,16 @@ export function extractLinks(text) { links.push(link); } - urlMatcher.replace(text, replaceFn, this); + + Autolinker.link(text, { + replaceFn, + urls: true, + emails: false, + twitter: false, + phone: false, + hashtag: false + }); + return {links, text}; } |