diff --git a/packages/format-library/src/link/inline.js b/packages/format-library/src/link/inline.js index 6c134df2cd737c..0960c7842d3236 100644 --- a/packages/format-library/src/link/inline.js +++ b/packages/format-library/src/link/inline.js @@ -6,12 +6,11 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { sprintf, __ } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { Component, createRef } from '@wordpress/element'; import { ExternalLink, IconButton, - ToggleControl, withSpokenMessages, Slot, } from '@wordpress/components'; @@ -32,6 +31,7 @@ import { URLInput, URLPopover } from '@wordpress/editor'; */ import PositionedAtSelection from './positioned-at-selection'; import { isValidHref } from './utils'; +import OpenInNewTabToggle from './open-in-new-tab-toggle'; const stopKeyPropagation = ( event ) => event.stopPropagation(); @@ -174,49 +174,6 @@ class InlineLinkUI extends Component { } ); } - getLabel( opensInNewWindow ) { - const selectedText = getTextContent( slice( this.props.value ) ); - - if ( opensInNewWindow ) { - return sprintf( __( '%s (opens in a new tab)' ), selectedText ); - } - - return selectedText; - } - - setLinkTarget( opensInNewWindow ) { - const { attributes = {} } = this.props; - const label = this.getLabel( opensInNewWindow ); - - if ( opensInNewWindow ) { - let rel = 'noopener noreferrer'; - - if ( attributes.rel ) { - rel = [ rel, attributes.rel ].join( ' ' ); - } - - this.setLinkAttributes( { - 'aria-label': label, - target: '_blank', - rel, - ...attributes, - } ); - } else { - if ( typeof attributes.rel === 'string' ) { - attributes.rel = attributes.rel.split( ' ' ).filter( ( relItem ) => { - return relItem !== 'noopener' && relItem !== 'noreferrer'; - } ).join( ' ' ).trim(); - } else { - delete attributes.rel; - } - - delete attributes.target; - attributes[ 'aria-label' ] = label; - - this.setLinkAttributes( attributes ); - } - } - editLink( event ) { this.setState( { editLink: true } ); event.preventDefault(); @@ -291,11 +248,6 @@ class InlineLinkUI extends Component { className="editor-format-toolbar__link-settings-container" renderSettings={ () => (
- +
) } > diff --git a/packages/format-library/src/link/open-in-new-tab-toggle.js b/packages/format-library/src/link/open-in-new-tab-toggle.js new file mode 100644 index 00000000000000..68b91c90668ab4 --- /dev/null +++ b/packages/format-library/src/link/open-in-new-tab-toggle.js @@ -0,0 +1,79 @@ +/** + * WordPress dependencies + */ +import { Component } from '@wordpress/element'; +import { Fill, ToggleControl } from '@wordpress/components'; +import { __, sprintf } from '@wordpress/i18n'; + +class OpenInNewTabToggle extends Component { + constructor() { + super( ...arguments ); + + this.setLinkTarget = this.setLinkTarget.bind( this ); + } + + setLinkTarget( opensInNewWindow ) { + const { attributes = {}, setLinkAttributes } = this.props; + const label = this.getLabel( opensInNewWindow ); + + if ( opensInNewWindow ) { + let rel = 'noopener noreferrer'; + + if ( attributes.rel ) { + rel = [ rel, attributes.rel ].join( ' ' ); + } + + setLinkAttributes( { + 'aria-label': label, + target: '_blank', + rel, + ...attributes, + } ); + } else { + if ( typeof attributes.rel === 'string' ) { + attributes.rel = attributes.rel.split( ' ' ).filter( ( relItem ) => { + return relItem !== 'noopener' && relItem !== 'noreferrer'; + } ).join( ' ' ).trim(); + } else { + delete attributes.rel; + } + + delete attributes.target; + attributes[ 'aria-label' ] = label; + + setLinkAttributes( attributes ); + } + } + + getLabel( opensInNewWindow ) { + const { text } = this.props; + + if ( opensInNewWindow ) { + return sprintf( __( '%s (opens in a new tab)' ), text ); + } + + return text; + } + + render() { + return ( + + ); + } +} + +const OpenInNewTabToggleWrapper = () => { + return ( + + { ( props ) => ( + + ) } + + ); +}; + +export default OpenInNewTabToggleWrapper;