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
					
				
					 5 changed files with 13 additions and 11 deletions
				
			
		| 
						 | 
				
			
			@ -4,14 +4,16 @@ exports[`<DisplayName /> renders display name + account name 1`] = `
 | 
			
		|||
<span
 | 
			
		||||
  className="display-name"
 | 
			
		||||
>
 | 
			
		||||
  <strong
 | 
			
		||||
    className="display-name__html"
 | 
			
		||||
    dangerouslySetInnerHTML={
 | 
			
		||||
      Object {
 | 
			
		||||
        "__html": "<p>Foo</p>",
 | 
			
		||||
  <bdi>
 | 
			
		||||
    <strong
 | 
			
		||||
      className="display-name__html"
 | 
			
		||||
      dangerouslySetInnerHTML={
 | 
			
		||||
        Object {
 | 
			
		||||
          "__html": "<p>Foo</p>",
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  />
 | 
			
		||||
    />
 | 
			
		||||
  </bdi>
 | 
			
		||||
   
 | 
			
		||||
  <span
 | 
			
		||||
    className="display-name__account"
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -12,7 +12,7 @@ export default class DisplayName extends React.PureComponent {
 | 
			
		|||
 | 
			
		||||
    return (
 | 
			
		||||
      <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>
 | 
			
		||||
    );
 | 
			
		||||
  }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -162,7 +162,7 @@ export default class Status extends ImmutablePureComponent {
 | 
			
		|||
      prepend = (
 | 
			
		||||
        <div className='status__prepend'>
 | 
			
		||||
          <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>
 | 
			
		||||
      );
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -34,7 +34,7 @@ export default class MovedNote extends ImmutablePureComponent {
 | 
			
		|||
      <div className='account__moved-note'>
 | 
			
		||||
        <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>
 | 
			
		||||
          <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>
 | 
			
		||||
 | 
			
		||||
        <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 account          = notification.get('account');
 | 
			
		||||
    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')) {
 | 
			
		||||
    case 'follow':
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		
		Reference in a new issue