Editor: Extract LinkContainer from FormatToolbar #9192

gziolo · 2018-08-21T11:16:22Z

Description

Extracted out of #9012.

This PR extracts LinkContainer to make it easier to provide React Native implementation for the parts that need to work differently on mobile devices.

How has this been tested?

npm test
npm run build

Add paragraph block.
Type some text.
Select text and turn it into link.
Type link url and save it.
Edit just saved url and save it.
Add more text and turn it into link.
Go back to the previously added link and try to edit it.
Remove added link.

All of those should work properly.

Types of changes

There should be no visual changes. It should be still possible to add/remove links from RichText powered fields like Paragraph block.

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.

gziolo · 2018-08-21T11:45:40Z

packages/editor/src/components/rich-text/formatting-controls.js

+import { __ } from '@wordpress/i18n';
+import { displayShortcut } from '@wordpress/keycodes';
+
+export const DEFAULT_CONTROLS = [ 'bold', 'italic', 'strikethrough', 'link', 'code' ];


@iseulde I moved those contants to its own file. It's now easy to notice that code is listed as a default control, but it's not provided in formatting controls. Any thoughts?

I'm also not sure why there are two constants, and why code is there... code does have a shortcut and a pattern, but this constant is not used there.

Perhaps code should be taken away here?

yes, let's remove it.

SergioEstevao

This is looking good and it will make it easier to port the toolbar to RN.

gziolo · 2018-08-21T12:56:22Z

I added fix in e08af7b which resolves the issue with race condition between props update and internal state changes. To make it work properly the derived state always set linkValue based on formats prop and it changes explicitly only when the user types.

gziolo · 2018-08-21T13:16:07Z

packages/editor/src/components/rich-text/index.js

@@ -1000,7 +999,7 @@ RichText.contextTypes = {
 };

 RichText.defaultProps = {
-	formattingControls: DEFAULT_FORMATS,
+	formattingControls: FORMATTING_CONTROLS.map( ( { format } ) => format ),


@iseulde - as you pointed out, we don't need this constant as we can produce it from the default FORMATTING_CONTROLS.

noisysocks

Looks good! We're definitely overdue to break up this component 🙂

I'm wondering if we should move all of the code that knows about links out of FormatToolbar?

noisysocks · 2018-08-22T01:16:45Z

packages/editor/src/components/rich-text/format-toolbar/index.js

@@ -140,19 +107,16 @@ class FormatToolbar extends Component {
 	}

 	addLink() {


Why not move these methods to LinkContainer?

It should be now possible as I removed the usage of setState in both methods shared with toolbarControls variable. I will double check if this is expected on mobile and open a follow-up PR 👍

gziolo · 2018-08-22T06:04:14Z

packages/editor/src/components/rich-text/format-toolbar/index.js

@@ -140,19 +107,16 @@ class FormatToolbar extends Component {
 	}

 	addLink() {


It should be now possible as I removed the usage of setState in both methods shared with toolbarControls variable. I will double check if this is expected on mobile and open a follow-up PR 👍

gziolo · 2018-08-22T06:05:18Z

packages/editor/src/components/rich-text/format-toolbar/index.js

@@ -164,8 +129,6 @@ class FormatToolbar extends Component {
 			rel: this.state.opensInNewWindow ? 'noreferrer noopener' : null,
 			value,
 		} } );
-
-		this.setState( { linkValue: value, isEditingLink: false } );
 		if ( ! this.props.formats.link.value ) {


We call this.props.onChange so we don't need to update state explicitly because getDerivedStateFromProps will handle it properly.

gziolo · 2018-08-22T06:08:58Z

I'm wondering if we should move all of the code that knows about links out of FormatToolbar?

As commented already. It wasn't possible initially because both Toolbar and LinkContainer shared the same methods which depended on shared state. It's no longer an issue so we can take another step. I would prefer to do it in its own PR so we could unblock React Native implementation (#9012).

noisysocks

Looks good to me!

gziolo added [Type] Code Quality Issues or PRs that relate to code quality Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) labels Aug 21, 2018

gziolo added this to the 3.7 milestone Aug 21, 2018

gziolo self-assigned this Aug 21, 2018

gziolo requested review from SergioEstevao and ellatrix August 21, 2018 11:16

gziolo commented Aug 21, 2018

View reviewed changes

SergioEstevao approved these changes Aug 21, 2018

View reviewed changes

gziolo requested a review from a team August 21, 2018 13:05

gziolo commented Aug 21, 2018

View reviewed changes

gziolo force-pushed the update/split-formatting-toolbars branch from f2dfed9 to d2fc77a Compare August 21, 2018 13:39

noisysocks reviewed Aug 22, 2018

View reviewed changes

gziolo added 3 commits August 22, 2018 07:56

Editor: Extract LinkContainer from FormatToolbar

57509db

Format toolbar: Improve derived state handling

286ba53

Rich Text: Remove obsolete DEFAULT_CONTROLS constant

7b73a20

gziolo force-pushed the update/split-formatting-toolbars branch from d2fc77a to 7b73a20 Compare August 22, 2018 06:02

gziolo commented Aug 22, 2018

View reviewed changes

noisysocks approved these changes Aug 22, 2018

View reviewed changes

gziolo merged commit 649320e into master Aug 22, 2018

gziolo deleted the update/split-formatting-toolbars branch August 22, 2018 07:02

ellatrix mentioned this pull request Aug 22, 2018

Rich text formatting filter #6642

Closed

4 tasks

gziolo mentioned this pull request Aug 22, 2018

Implement toolbar on React Native #9012

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Editor: Extract LinkContainer from FormatToolbar #9192

Editor: Extract LinkContainer from FormatToolbar #9192

gziolo commented Aug 21, 2018 •

edited

Loading

gziolo Aug 21, 2018

ellatrix Aug 21, 2018

ellatrix Aug 21, 2018

gziolo Aug 21, 2018

SergioEstevao left a comment

gziolo commented Aug 21, 2018

gziolo Aug 21, 2018

noisysocks left a comment

noisysocks Aug 22, 2018

gziolo Aug 22, 2018

gziolo Aug 22, 2018

gziolo Aug 22, 2018

gziolo commented Aug 22, 2018

noisysocks left a comment

		@@ -140,19 +107,16 @@ class FormatToolbar extends Component {
		}

		addLink() {

Editor: Extract LinkContainer from FormatToolbar #9192

Editor: Extract LinkContainer from FormatToolbar #9192

Conversation

gziolo commented Aug 21, 2018 • edited Loading

Description

How has this been tested?

Types of changes

Checklist:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

SergioEstevao left a comment

Choose a reason for hiding this comment

gziolo commented Aug 21, 2018

Choose a reason for hiding this comment

noisysocks left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gziolo commented Aug 22, 2018

noisysocks left a comment

Choose a reason for hiding this comment

gziolo commented Aug 21, 2018 •

edited

Loading