@ -8,31 +8,13 @@ import classnames from 'classnames';
import { autoPlayGif } from 'flavours/glitch/util/initial_state' ;
import { decode as decodeIDNA } from 'flavours/glitch/util/idna' ;
// Regex matching what "looks like a link", that is, something that starts with
// an optional "http://" or "https://" scheme and then what could look like a
// domain main, that is, at least two sequences of characters not including spaces
// and separated by "." or an homoglyph. The idea is not to match valid URLs or
// domain names, but what could be confused for a valid URL or domain name,
// especially to the untrained eye.
const h _confusables = 'h\u13c2\u1d58d\u1d4f1\u1d691\u0068\uff48\u1d525\u210e\u1d489\u1d629\u0570\u1d4bd\u1d65d\u1d421\u1d5c1\u1d5f5\u04bb\u1d559' ;
const t _confusables = 't\u1d42d\u1d5cd\u1d531\u1d565\u1d4c9\u1d669\u1d4fd\u1d69d\u0074\u1d461\u1d601\u1d495\u1d635\u1d599' ;
const p _confusables = 'p\u0440\u03c1\u1d52d\u1d631\u1d665\u1d429\uff50\u1d6e0\u1d45d\u1d561\u1d595\u1d71a\u1d699\u1d78e\u2ca3\u1d754\u1d6d2\u1d491\u1d7c8\u1d746\u1d4c5\u1d70c\u1d5c9\u0070\u1d780\u03f1\u1d5fd\u2374\u1d7ba\u1d4f9' ;
const s _confusables = 's\u1d530\u118c1\u1d494\u1d634\u1d4c8\u1d668\uabaa\u1d42c\u1d5cc\u1d460\u1d600\ua731\u0073\uff53\u1d564\u0455\u1d598\u1d4fc\u1d69c\u10448\u01bd' ;
const column _confusables = ':\u0903\u0a83\u0703\u1803\u05c3\u0704\u0589\u1809\ua789\u16ec\ufe30\u02d0\u2236\u02f8\u003a\uff1a\u205a\ua4fd' ;
const slash _confusables = '/\u2041\u2f03\u2044\u2cc6\u27cb\u30ce\u002f\u2571\u31d3\u3033\u1735\u2215\u29f8\u1d23a\u4e3f' ;
const dot _confusables = '.\u002e\u0660\u06f0\u0701\u0702\u2024\ua4f8\ua60e\u10a50\u1d16d' ;
const linkRegex = new RegExp ( ` ^ \\ s*(([ ${ h _confusables } ][ ${ t _confusables } ][ ${ t _confusables } ][ ${ p _confusables } ][ ${ s _confusables } ]?[ ${ column _confusables } ][ ${ slash _confusables } ][ ${ slash _confusables } ]))?[^:/ \\ n ]+([ ${ dot _confusables } ][^:/ \\ n ]+)+ ` ) ;
const textMatchesTarget = ( text , origin , host ) => {
return ( text === origin || text === host
|| text . startsWith ( origin + '/' ) || text . startsWith ( host + '/' )
|| 'www.' + text === host || ( 'www.' + text ) . startsWith ( host + '/' ) ) ;
}
// If `checkUrlLike` is true, consider only URL-like link texts to be misleading
const isLinkMisleading = ( link , checkUrlLike = true ) => {
const isLinkMisleading = ( link ) => {
let linkTextParts = [ ] ;
// Reconstruct visible text, as we do not have much control over how links
@ -69,12 +51,7 @@ const isLinkMisleading = (link, checkUrlLike = true) => {
const host = targetURL . host . replace ( targetURL . hostname , hostname ) ;
const origin = targetURL . origin . replace ( targetURL . host , host ) ;
const text = linkText . normalize ( 'NFKC' ) ;
if ( textMatchesTarget ( text , origin , host ) || textMatchesTarget ( text . toLowerCase ( ) , origin , host ) ) {
return false ;
}
// If the link text looks like an URL or auto-generated link, it is misleading
return ! checkUrlLike || linkRegex . test ( linkText ) ;
return ! ( textMatchesTarget ( text , origin , host ) || textMatchesTarget ( text . toLowerCase ( ) , origin , host ) ) ;
} ;
export default class StatusContent extends React . PureComponent {
@ -89,11 +66,11 @@ export default class StatusContent extends React.PureComponent {
parseClick : PropTypes . func ,
disabled : PropTypes . bool ,
onUpdate : PropTypes . func ,
linkRewriting: PropTypes . string ,
tagLinks: PropTypes . bool ,
} ;
static defaultProps = {
linkRewriting: 'tag' ,
tagLinks: true ,
} ;
state = {
@ -102,7 +79,7 @@ export default class StatusContent extends React.PureComponent {
_updateStatusLinks ( ) {
const node = this . contentsNode ;
const { linkRewriting } = this . props ;
const { tagLinks } = this . props ;
if ( ! node ) {
return ;
@ -129,35 +106,7 @@ export default class StatusContent extends React.PureComponent {
link . setAttribute ( 'title' , link . href ) ;
link . classList . add ( 'unhandled-link' ) ;
if ( linkRewriting === 'rewrite' && isLinkMisleading ( link ) ) {
// Rewrite misleading links entirely
while ( link . firstChild ) {
link . removeChild ( link . firstChild ) ;
}
const prefix = ( link . href . match ( /https?:\/\/(www\.)?/ ) || [ '' ] ) [ 0 ] ;
const text = link . href . substr ( prefix . length , 30 ) ;
const suffix = link . href . substr ( prefix . length + 30 ) ;
const cutoff = ! ! suffix ;
const prefixTag = document . createElement ( 'span' ) ;
prefixTag . classList . add ( 'invisible' ) ;
prefixTag . textContent = prefix ;
link . appendChild ( prefixTag ) ;
const textTag = document . createElement ( 'span' ) ;
if ( cutoff ) {
textTag . classList . add ( 'ellipsis' ) ;
}
textTag . textContent = text ;
link . appendChild ( textTag ) ;
const suffixTag = document . createElement ( 'span' ) ;
suffixTag . classList . add ( 'invisible' ) ;
suffixTag . textContent = suffix ;
link . appendChild ( suffixTag ) ;
} else if ( linkRewriting === 'tag' && isLinkMisleading ( link , false ) ) {
if ( tagLinks && isLinkMisleading ( link ) ) {
// Add a tag besides the link to display its origin
const tag = document . createElement ( 'span' ) ;
@ -287,7 +236,7 @@ export default class StatusContent extends React.PureComponent {
mediaIcon ,
parseClick ,
disabled ,
linkRewriting ,
tagLinks ,
} = this . props ;
const hidden = this . props . onExpandedToggle ? ! this . props . expanded : this . state . hidden ;
@ -362,7 +311,7 @@ export default class StatusContent extends React.PureComponent {
< div className = { ` status__content__spoiler ${ ! hidden ? 'status__content__spoiler--visible' : '' } ` } >
< div
ref = { this . setContentsRef }
key = { ` contents- ${ linkRewriting } ` }
key = { ` contents- ${ tagLinks } ` }
style = { directionStyle }
tabIndex = { ! hidden ? 0 : null }
dangerouslySetInnerHTML = { content }
@ -386,7 +335,7 @@ export default class StatusContent extends React.PureComponent {
>
< div
ref = { this . setContentsRef }
key = { ` contents- ${ linkRewriting } ` }
key = { ` contents- ${ tagLinks } ` }
dangerouslySetInnerHTML = { content }
lang = { status . get ( 'language' ) }
className = 'status__content__text'
@ -403,7 +352,7 @@ export default class StatusContent extends React.PureComponent {
tabIndex = '0'
ref = { this . setRef }
>
< div ref = { this . setContentsRef } key = { ` contents- ${ linkRewriting } ` } className = 'status__content__text' dangerouslySetInnerHTML = { content } lang = { status . get ( 'language' ) } tabIndex = '0' / >
< div ref = { this . setContentsRef } key = { ` contents- ${ tagLinks } ` } className = 'status__content__text' dangerouslySetInnerHTML = { content } lang = { status . get ( 'language' ) } tabIndex = '0' / >
{ media }
< / d i v >
) ;