Surround mid-text display names with bdi tags (#6257)
* Fix #1095 - Surround mid-text display names with bdi tags * Update jest snapshot
This commit is contained in:
		
							parent
							
								
									3987bd18a4
								
							
						
					
					
						commit
						7861c5f108
					
				@ -4,14 +4,16 @@ exports[`<DisplayName /> renders display name + account name 1`] = `
 | 
				
			|||||||
<span
 | 
					<span
 | 
				
			||||||
  className="display-name"
 | 
					  className="display-name"
 | 
				
			||||||
>
 | 
					>
 | 
				
			||||||
  <strong
 | 
					  <bdi>
 | 
				
			||||||
    className="display-name__html"
 | 
					    <strong
 | 
				
			||||||
    dangerouslySetInnerHTML={
 | 
					      className="display-name__html"
 | 
				
			||||||
      Object {
 | 
					      dangerouslySetInnerHTML={
 | 
				
			||||||
        "__html": "<p>Foo</p>",
 | 
					        Object {
 | 
				
			||||||
 | 
					          "__html": "<p>Foo</p>",
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
    }
 | 
					    />
 | 
				
			||||||
  />
 | 
					  </bdi>
 | 
				
			||||||
   
 | 
					   
 | 
				
			||||||
  <span
 | 
					  <span
 | 
				
			||||||
    className="display-name__account"
 | 
					    className="display-name__account"
 | 
				
			||||||
 | 
				
			|||||||
@ -12,7 +12,7 @@ export default class DisplayName extends React.PureComponent {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
    return (
 | 
					    return (
 | 
				
			||||||
      <span className='display-name'>
 | 
					      <span className='display-name'>
 | 
				
			||||||
        <strong className='display-name__html' dangerouslySetInnerHTML={displayNameHtml} /> <span className='display-name__account'>@{this.props.account.get('acct')}</span>
 | 
					        <bdi><strong className='display-name__html' dangerouslySetInnerHTML={displayNameHtml} /></bdi> <span className='display-name__account'>@{this.props.account.get('acct')}</span>
 | 
				
			||||||
      </span>
 | 
					      </span>
 | 
				
			||||||
    );
 | 
					    );
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
 | 
				
			|||||||
@ -162,7 +162,7 @@ export default class Status extends ImmutablePureComponent {
 | 
				
			|||||||
      prepend = (
 | 
					      prepend = (
 | 
				
			||||||
        <div className='status__prepend'>
 | 
					        <div className='status__prepend'>
 | 
				
			||||||
          <div className='status__prepend-icon-wrapper'><i className='fa fa-fw fa-retweet status__prepend-icon' /></div>
 | 
					          <div className='status__prepend-icon-wrapper'><i className='fa fa-fw fa-retweet status__prepend-icon' /></div>
 | 
				
			||||||
          <FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><strong dangerouslySetInnerHTML={display_name_html} /></a> }} />
 | 
					          <FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} />
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
      );
 | 
					      );
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
				
			|||||||
@ -34,7 +34,7 @@ export default class MovedNote extends ImmutablePureComponent {
 | 
				
			|||||||
      <div className='account__moved-note'>
 | 
					      <div className='account__moved-note'>
 | 
				
			||||||
        <div className='account__moved-note__message'>
 | 
					        <div className='account__moved-note__message'>
 | 
				
			||||||
          <div className='account__moved-note__icon-wrapper'><i className='fa fa-fw fa-suitcase account__moved-note__icon' /></div>
 | 
					          <div className='account__moved-note__icon-wrapper'><i className='fa fa-fw fa-suitcase account__moved-note__icon' /></div>
 | 
				
			||||||
          <FormattedMessage id='account.moved_to' defaultMessage='{name} has moved to:' values={{ name: <strong dangerouslySetInnerHTML={displayNameHtml} /> }} />
 | 
					          <FormattedMessage id='account.moved_to' defaultMessage='{name} has moved to:' values={{ name: <bdi><strong dangerouslySetInnerHTML={displayNameHtml} /></bdi> }} />
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
        <a href={to.get('url')} onClick={this.handleAccountClick} className='detailed-status__display-name'>
 | 
					        <a href={to.get('url')} onClick={this.handleAccountClick} className='detailed-status__display-name'>
 | 
				
			||||||
 | 
				
			|||||||
@ -133,7 +133,7 @@ export default class Notification extends ImmutablePureComponent {
 | 
				
			|||||||
    const { notification } = this.props;
 | 
					    const { notification } = this.props;
 | 
				
			||||||
    const account          = notification.get('account');
 | 
					    const account          = notification.get('account');
 | 
				
			||||||
    const displayNameHtml  = { __html: account.get('display_name_html') };
 | 
					    const displayNameHtml  = { __html: account.get('display_name_html') };
 | 
				
			||||||
    const link             = <Permalink className='notification__display-name' href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHtml} />;
 | 
					    const link             = <bdi><Permalink className='notification__display-name' href={account.get('url')} title={account.get('acct')} to={`/accounts/${account.get('id')}`} dangerouslySetInnerHTML={displayNameHtml} /></bdi>;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    switch(notification.get('type')) {
 | 
					    switch(notification.get('type')) {
 | 
				
			||||||
    case 'follow':
 | 
					    case 'follow':
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user