Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Iterate on 'Insert link' interface #6028

Merged
merged 9 commits into from
Apr 10, 2018
Merged

Iterate on 'Insert link' interface #6028

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
eb2454d
Revert "Remove "Open in new window" link option (#4583)"
noisysocks Apr 6, 2018
f46cd44
Fix 'Open in new window' link option
noisysocks Apr 6, 2018
b12be5b
Use ellipsis icon for opening link settings
noisysocks Apr 6, 2018
5f916d7
Use link toolbar button to remove links
noisysocks Apr 6, 2018
4a9ff7a
After editing a link, exit editing mode
noisysocks Apr 6, 2018
d111047
Fix error when setting 'Open in new window' on a new link
noisysocks Apr 6, 2018
8e64f33
Expand link UI to fit contents
noisysocks Apr 6, 2018
94ab326
Improve suggested links UI in link inserter
noisysocks Apr 6, 2018
0bb6c85
Move settings button to right of the link UI
noisysocks Apr 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
156 changes: 104 additions & 52 deletions blocks/rich-text/format-toolbar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,13 @@
*/
import { __ } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { IconButton, Toolbar, withSpokenMessages, Fill } from '@wordpress/components';
import {
Fill,
IconButton,
ToggleControl,
Toolbar,
withSpokenMessages,
} from '@wordpress/components';
import { keycodes } from '@wordpress/utils';

/**
Expand Down Expand Up @@ -32,8 +38,6 @@ const FORMATTING_CONTROLS = [
format: 'strikethrough',
},
{
icon: 'admin-links',
title: __( 'Link' ),
format: 'link',
},
];
Expand All @@ -47,10 +51,11 @@ const stopKeyPropagation = ( event ) => event.stopPropagation();
class FormatToolbar extends Component {
constructor() {
super( ...arguments );

this.state = {
isAddingLink: false,
isEditingLink: false,
settingsVisible: false,
opensInNewWindow: false,
newLinkValue: '',
};

Expand All @@ -60,6 +65,8 @@ class FormatToolbar extends Component {
this.submitLink = this.submitLink.bind( this );
this.onKeyDown = this.onKeyDown.bind( this );
this.onChangeLinkValue = this.onChangeLinkValue.bind( this );
this.toggleLinkSettingsVisibility = this.toggleLinkSettingsVisibility.bind( this );
this.setLinkTarget = this.setLinkTarget.bind( this );
}

onKeyDown( event ) {
Expand All @@ -79,6 +86,8 @@ class FormatToolbar extends Component {
this.setState( {
isAddingLink: false,
isEditingLink: false,
settingsVisible: false,
opensInNewWindow: !! nextProps.formats.link && !! nextProps.formats.link.target,
newLinkValue: '',
} );
}
Expand All @@ -96,6 +105,17 @@ class FormatToolbar extends Component {
};
}

toggleLinkSettingsVisibility() {
this.setState( ( state ) => ( { settingsVisible: ! state.settingsVisible } ) );
}

setLinkTarget( opensInNewWindow ) {
this.setState( { opensInNewWindow } );
if ( this.props.formats.link ) {
this.props.onChange( { link: { value: this.props.formats.link.value, target: opensInNewWindow ? '_blank' : '' } } );
}
}

addLink() {
this.setState( { isEditingLink: false, isAddingLink: true, newLinkValue: '' } );
}
Expand All @@ -112,7 +132,8 @@ class FormatToolbar extends Component {

submitLink( event ) {
event.preventDefault();
this.props.onChange( { link: { value: this.state.newLinkValue } } );
this.setState( { isEditingLink: false, isAddingLink: false, newLinkValue: '' } );
this.props.onChange( { link: { value: this.state.newLinkValue, target: this.state.opensInNewWindow ? '_blank' : '' } } );
if ( this.state.isAddingLink ) {
this.props.speak( __( 'Link added.' ), 'assertive' );
}
Expand All @@ -124,70 +145,101 @@ class FormatToolbar extends Component {

render() {
const { formats, focusPosition, enabledControls = DEFAULT_CONTROLS, customControls = [] } = this.props;
const { isAddingLink, isEditingLink, newLinkValue } = this.state;
const linkStyle = focusPosition ?
{ position: 'absolute', ...focusPosition } :
null;
const { isAddingLink, isEditingLink, newLinkValue, settingsVisible, opensInNewWindow } = this.state;

const toolbarControls = FORMATTING_CONTROLS.concat( customControls )
.filter( control => enabledControls.indexOf( control.format ) !== -1 )
.map( ( control ) => {
const isLink = control.format === 'link';
if ( control.format === 'link' ) {
const isFormatActive = this.isFormatActive( 'link' );
const isActive = isFormatActive || isAddingLink;
return {
...control,
icon: isFormatActive ? 'editor-unlink' : 'admin-links', // TODO: Need proper unlink icon
title: isFormatActive ? __( 'Unlink' ) : __( 'Link' ),
onClick: isActive ? this.dropLink : this.addLink,
isActive,
};
}

return {
...control,
onClick: isLink ? this.addLink : this.toggleFormat( control.format ),
isActive: this.isFormatActive( control.format ) || ( isLink && isAddingLink ),
onClick: this.toggleFormat( control.format ),
isActive: this.isFormatActive( control.format ),
};
} );

const linkSettings = settingsVisible && (
<div className="blocks-format-toolbar__link-modal-line blocks-format-toolbar__link-settings">
<ToggleControl
label={ __( 'Open in new window' ) }
checked={ opensInNewWindow }
onChange={ this.setLinkTarget } />
</div>
);

return (
<div className="blocks-format-toolbar">
<Toolbar controls={ toolbarControls } />

{ ( isAddingLink || isEditingLink ) &&
// Disable reason: KeyPress must be suppressed so the block doesn't hide the toolbar
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
<Fill name="RichText.Siblings">
<form
className="blocks-format-toolbar__link-modal"
style={ linkStyle }
onKeyPress={ stopKeyPropagation }
onKeyDown={ this.onKeyDown }
onSubmit={ this.submitLink }>
<div className="blocks-format-toolbar__link-modal-line">
<UrlInput value={ newLinkValue } onChange={ this.onChangeLinkValue } />
<IconButton icon="editor-break" label={ __( 'Apply' ) } type="submit" />
<IconButton icon="editor-unlink" label={ __( 'Remove link' ) } onClick={ this.dropLink } />
</div>
</form>
</Fill>
/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
}

{ !! formats.link && ! isAddingLink && ! isEditingLink &&
// Disable reason: KeyPress must be suppressed so the block doesn't hide the toolbar
/* eslint-disable jsx-a11y/no-static-element-interactions */
{ ( isAddingLink || isEditingLink || formats.link ) && (
<Fill name="RichText.Siblings">
<div
className="blocks-format-toolbar__link-modal"
style={ linkStyle }
onKeyPress={ stopKeyPropagation }
>
<div className="blocks-format-toolbar__link-modal-line">
<a
className="blocks-format-toolbar__link-value"
href={ formats.link.value }
target="_blank"
<div style={ { position: 'absolute', ...focusPosition } }>
{ ( isAddingLink || isEditingLink ) && (
// Disable reason: KeyPress must be suppressed so the block doesn't hide the toolbar
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
<form
className="blocks-format-toolbar__link-modal"
onKeyPress={ stopKeyPropagation }
onKeyDown={ this.onKeyDown }
onSubmit={ this.submitLink }>
<div className="blocks-format-toolbar__link-modal-line">
<UrlInput value={ newLinkValue } onChange={ this.onChangeLinkValue } />
<IconButton icon="editor-break" label={ __( 'Apply' ) } type="submit" />
<IconButton
className="blocks-format-toolbar__link-settings-toggle"
icon="ellipsis"
label={ __( 'Link Settings' ) }
onClick={ this.toggleLinkSettingsVisibility }
aria-expanded={ settingsVisible }
/>
</div>
{ linkSettings }
</form>
/* eslint-enable jsx-a11y/no-noninteractive-element-interactions */
) }

{ formats.link && ! isAddingLink && ! isEditingLink && (
// Disable reason: KeyPress must be suppressed so the block doesn't hide the toolbar
/* eslint-disable jsx-a11y/no-static-element-interactions */
<div
className="blocks-format-toolbar__link-modal"
onKeyPress={ stopKeyPropagation }
>
{ formats.link.value && filterURLForDisplay( decodeURI( formats.link.value ) ) }
</a>
<IconButton icon="edit" label={ __( 'Edit' ) } onClick={ this.editLink } />
<IconButton icon="editor-unlink" label={ __( 'Remove link' ) } onClick={ this.dropLink } />
</div>
<div className="blocks-format-toolbar__link-modal-line">
<a
className="blocks-format-toolbar__link-value"
href={ formats.link.value }
target="_blank"
>
{ formats.link.value && filterURLForDisplay( decodeURI( formats.link.value ) ) }
</a>
<IconButton icon="edit" label={ __( 'Edit' ) } onClick={ this.editLink } />
<IconButton
className="blocks-format-toolbar__link-settings-toggle"
icon="ellipsis"
label={ __( 'Link Settings' ) }
onClick={ this.toggleLinkSettingsVisibility }
aria-expanded={ settingsVisible }
/>
</div>
{ linkSettings }
</div>
/* eslint-enable jsx-a11y/no-static-element-interactions */
) }
</div>
</Fill>
/* eslint-enable jsx-a11y/no-static-element-interactions */
}
) }
</div>
);
}
Expand Down
53 changes: 47 additions & 6 deletions blocks/rich-text/format-toolbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@
}

.blocks-format-toolbar__link-modal {
position: absolute;
position: relative;
left: -50%;
box-shadow: 0 3px 20px rgba( 18, 24, 30, .1 ), 0 1px 3px rgba( 18, 24, 30, .1 );
border: 1px solid #e0e5e9;
background: #fff;
width: 300px;
display: flex;
flex-direction: column;
font-family: $default-font;
Expand All @@ -17,28 +17,69 @@
}

.blocks-format-toolbar__link-modal-line {
$button-size: 36px;
$input-padding: 10px;
$input-size: 230px;

display: flex;
flex-direction: row;
flex-grow: 1;
flex-shrink: 1;
min-width: 0;
align-items: center;
align-items: flex-start;

.components-button {
flex-shrink: 0;
width: $button-size;
height: $button-size;
}

.blocks-url-input {
width: $input-size;

input {
padding: $input-padding;
}
}

.blocks-url-input__suggestions {
border-top: 1px solid $light-gray-500;
box-shadow: none;
padding: 4px 0;
position: relative;
width: $input-size + $button-size * 2;
}

.blocks-url-input__suggestion {
color: $dark-gray-100;
padding: 4px ( $button-size + $input-padding );
}
}

.blocks-format-toolbar__link-settings-toggle .dashicon {
transform: rotate(90deg);
}

.blocks-format-toolbar__link-value {
margin: 10px;
flex-grow: 1;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
position: relative;
white-space: nowrap;
min-width: 0;
min-width: 150px;
max-width: 500px;
}

.blocks-format-toolbar__link-settings {
padding: 7px 8px;
border-top: 1px solid $light-gray-500;
padding-top: 8px; // add 1px for the border

&:after {
@include long-content-fade( $size: 40% );
.components-base-control {
margin: 0;
flex-grow: 1;
flex-shrink: 1;
}
}
7 changes: 3 additions & 4 deletions blocks/rich-text/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ export function getFormatProperties( formatName, parents ) {
switch ( formatName ) {
case 'link' : {
const anchor = find( parents, node => node.nodeName.toLowerCase() === 'a' );
return !! anchor ? { value: anchor.getAttribute( 'href' ) || '', node: anchor } : {};
return !! anchor ? { value: anchor.getAttribute( 'href' ) || '', target: anchor.getAttribute( 'target' ) || '', node: anchor } : {};
}
default:
return {};
Expand Down Expand Up @@ -432,11 +432,10 @@ export class RichText extends Component {
const container = findRelativeParent( this.editor.getBody() );
const containerPosition = container.getBoundingClientRect();
const toolbarOffset = { top: 10, left: 0 };
const linkModalWidth = 298;

return {
top: position.top - containerPosition.top + ( position.height ) + toolbarOffset.top,
left: position.left - containerPosition.left - ( linkModalWidth / 2 ) + ( position.width / 2 ) + toolbarOffset.left,
left: position.left - containerPosition.left + ( position.width / 2 ) + toolbarOffset.left,
};
}

Expand Down Expand Up @@ -753,7 +752,7 @@ export class RichText extends Component {
if ( ! anchor ) {
this.removeFormat( 'link' );
}
this.applyFormat( 'link', { href: formatValue.value }, anchor );
this.applyFormat( 'link', { href: formatValue.value, target: formatValue.target }, anchor );
} else {
this.editor.execCommand( 'Unlink' );
}
Expand Down
7 changes: 5 additions & 2 deletions blocks/rich-text/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ describe( 'getFormatProperties', () => {
nodeName: 'A',
attributes: {
href: 'https://www.testing.com',
target: '_blank',
},
};

Expand All @@ -156,7 +157,7 @@ describe( 'getFormatProperties', () => {
expect( getFormatProperties( formatName, [ { ...node, nodeName: 'P' } ] ) ).toEqual( {} );
} );

test( 'should return an object of value and node for a link', () => {
test( 'should return a populated object', () => {
const mockNode = {
...node,
getAttribute: jest.fn().mockImplementation( ( attr ) => mockNode.attributes[ attr ] ),
Expand All @@ -168,11 +169,12 @@ describe( 'getFormatProperties', () => {

expect( getFormatProperties( formatName, parents ) ).toEqual( {
value: 'https://www.testing.com',
target: '_blank',
node: mockNode,
} );
} );

test( 'should return an object of value and node of empty values when no values are found.', () => {
test( 'should return an object with empty values when no link is found', () => {
const mockNode = {
...node,
attributes: {},
Expand All @@ -185,6 +187,7 @@ describe( 'getFormatProperties', () => {

expect( getFormatProperties( formatName, parents ) ).toEqual( {
value: '',
target: '',
node: mockNode,
} );
} );
Expand Down