Block Editor: move selection state from RichText to the store #14640

ellatrix · 2019-03-26T16:20:53Z

Description

Fixes #11616.
Blocks #11005 and #12002. Blocks making RichText a controlled component.

This is an attempt to move local RichText selection state to block-editor store.

RichText would have the following props:

selectionStart: the selection start offset, similar to the textarea attrubute.
selectionEnd: the selection end offset, similar to the textarea attrubute.
onSelectionChange: the function that will be called when the selection changes.

Within blocks, this state is provided by context. Nothing changes for block authors.

In the block-editor store, the selection state will now include a rich text identifier and offset in addition to the block client ID.

Why?

This will be needed if we ever want to read/write selection in RichText areas. Think:
- Restoring selection after undoing/redoing changes.
- Cross block selection.
- Collaborative editing.
- Plugins: How to select text/node inside block programmatically? #13976.
Blocks making RichText a controlled component. This PR moves logic to set the caret position to the MERGE_BLOCKS action and removes it from RichText.

How has this been tested?

Screenshots

Types of changes

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.

ellatrix · 2019-03-30T20:14:33Z

packages/e2e-tests/specs/keyboard-navigable-blocks.test.js

@@ -97,34 +97,6 @@ const tabThroughBlockToolbar = async () => {
 	);
 	await expect( isFocusedRightAlignmentControl ).toBe( true );

-	// Tab to focus on the 'Bold' formatting button


Reason why these are no longer expected: the formatting toolbar is only available one the rich text field has selection. The buttons are useless otherwise. In master, they are useless as well, but they display because there is lingering local selection state, so the toolbar thinks that the rich text field is selected. If you select the block for the first time in master, there will also be no formatting buttons. See #13598.

ellatrix · 2019-03-30T20:28:06Z

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

-			};
-		}
-
-		// Ensures that only one RichText component can be focused.


This is no longer needed as the selection state is stored in block-editor and there can be no two identifiers at the same time.

packages/block-editor/src/components/block-edit/index.js

gziolo

I will give it a spin and see how it works.

It might fix #7463 as well :)

packages/block-editor/src/components/block-edit/index.js

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

gziolo · 2019-04-01T08:52:10Z

In comparison to the master branch it works at least the same. It might work better in some cases but it's hard to tell as it's complex. I recorded a screencast with the most complicated blocks which were causing issues, like duplicated controls, in the past:

It seems like the changes proposed should open possibilities to finally resolve #7463 which we tried to tackle a few times but it was extremely difficult to detect blur event when implementation of RichText was fully dependant on TinyMCE. Given that this issue exists in the master branch, I personally don't expect it to be fixed in this PR. However, I wanted to raise it as it might have some influence on how this PR is shaped in its final form. I'm leaving it totally up to you @ellatrix. Great work on the refactoring in this PR.

…rnmobile/887-History-stack-is-not-empty-on-a-fresh-start-of-the-editor * 'master' of https://github.com/WordPress/gutenberg: 'string' misspelled as 'srting' (#15118) [Mobile] Improving accessibility on Post title (#15106) Fix 13776: Format is already registered to handle class name (#15072) Add wpDataSelect WordPress end 2 end test util (#15052) Block Editor: move selection state from RichText to the store (#14640) chore: Fix: Lint error that makes unit tests (and CI tests) fail. (#15073) Set ownProps.onFocus when context.onFocus is undefined. (#15069)

pinarol · 2019-04-23T14:59:23Z

This seems to have a crashing regression effect on mobile side: wordpress-mobile/gutenberg-mobile#921

ellatrix · 2019-04-24T11:22:50Z

@pinarol Selection state has been moved to the block-editor store. The mobile version should probably also set it there so the merge function can make use of it.

pinarol · 2019-04-24T11:41:44Z

Thanks for the info @ellatrix
cc @hypest

aduth · 2019-05-07T19:48:58Z

packages/block-editor/src/store/reducer.js

 		case 'TOGGLE_SELECTION':
 			return {
-				...state,
+				...BLOCK_SELECTION_INITIAL_STATE,


This change has the effect of deselecting the current block when toggling selection. Is that intended?

Insert an image block

Assign an image from the media library

Resize the image using the resizers

Expected: Block remains selected
Actual: Block is unselected

I think I noticed something similar with the Spacer block as well when using the resize handle.

Upgrade RichText on mobile native to use the latest changes from the web, mainly those made in #14640 It also removes the customization we made to the rich-text library since writing in multiple formats at once is now stable on the web. * Adding `onSelectionChange` from store to RichText * First experiment fixing selection change handling in rich text * Update readme change postcommit * Fix sequence of events on split and selection change * Remove commented onTextUpdate call on enter pressed * Do not reset activeFormats when onSelectionChange is emitted while typing * Update value from props * Pinpoint conditions for the case where onSelectionChange is emitted without changing selection * Improve isTyping detection * Fix applying link format * Do not try to update text from the paste handler * onChange should update the state * Selection change events always fire after text already changed * Fix issue where the list block was not being selected on focus. * Add isSelected prop from context to RichText * Fix move caret to the end when merging. This avoid moving the caret to the end when two blocks, both with content, are merged. * Caret position from props, don't force to end * Fix lint errors * WIP: more fixes * WIP: Fix list external Enter key on Android * No stray onSelectionChanged events from AztecAndroid * Only block html elements will be trimmed by AztecAndroid * Mirror caret state on text change * Fix issue on iOS where the format buttons were not working properly. Pressing on the buttons didn't change the format of the selected text. * Restore iOS autoscroll while editing. * Cleanup * Try a new approach to detect if the selection change event is manual or not * Fix iOS issue with formats, where pressing the format buttons sometimes won't change the format of the selected text

phpbits · 2019-05-24T09:18:36Z

@ellatrix Would you mind sending me to the right direction on RichText documentation? I need to fix the selection after onChange( applyFormat( record, { type: 'strong' }, startIndex, endIndex ) )

I'm using same code here :

gutenberg/packages/block-editor/src/components/rich-text/patterns.js

Line 73 in e6e5d85

record = applyFormat( record, { type: 'code' }, startIndex, endIndex );

which works perfectly but the selection is being reset to the start of paragraph for some reasons. I can't figure it out, been trying to on last couple of days. Here's the screenshot of my work so far:

Thank you very much!

aduth · 2019-06-06T18:53:20Z

docs/designers-developers/developers/data/data-core-block-editor.md

@@ -1042,6 +1068,18 @@ Returns an action object used in signalling that the caret has entered formatted

 Returns an action object used in signalling that the user caret has exited formatted text.

+### selectionChange


To maximize consistency with other action names in the pattern of "verbNoun" / "actSubject" (insertBlock, updateSettings, clearSelectedBlock), in retrospect I think this should have been named as changeSelection. Has this landed in a stable WordPress release?

ellatrix requested review from aduth, gziolo, jorgefilipecosta, noisysocks, talldan and youknowriad as code owners March 26, 2019 16:20

ellatrix changed the title ~~WIP~~ Block Editor: move selection state from RichText to the store Mar 26, 2019

ellatrix mentioned this pull request Mar 26, 2019

RichText: completely controlled #14641

Closed

5 tasks

aduth added the [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable label Mar 27, 2019

ellatrix added [Status] In Progress Tracking issues with work in progress [Package] Block editor /packages/block-editor labels Mar 28, 2019

ellatrix force-pushed the try/block-editor-selection-state branch 2 times, most recently from 8f68912 to d118977 Compare March 29, 2019 17:26

ellatrix requested review from ajitbohra, nerrad and ntwb as code owners March 29, 2019 17:39

ellatrix force-pushed the try/block-editor-selection-state branch from d69e964 to a9cccaa Compare March 29, 2019 19:30

ellatrix requested review from chrisvanpatten, mkaz, oandregal and notnownikki as code owners March 29, 2019 19:30

ellatrix force-pushed the try/block-editor-selection-state branch from d5deacd to c08c0b5 Compare March 30, 2019 17:43

ellatrix commented Mar 30, 2019

View reviewed changes

ellatrix force-pushed the try/block-editor-selection-state branch from 2d20ef9 to 800953a Compare March 31, 2019 11:15

ellatrix removed the [Status] In Progress Tracking issues with work in progress label Apr 1, 2019

ellatrix commented Apr 1, 2019

View reviewed changes

packages/block-editor/src/components/block-edit/index.js Show resolved Hide resolved

ellatrix mentioned this pull request Apr 1, 2019

Overview: RichText, APIs, & Formatting Library #13778

Closed

17 tasks

gziolo reviewed Apr 1, 2019

View reviewed changes

packages/block-editor/src/components/block-edit/index.js Outdated Show resolved Hide resolved

packages/block-editor/src/components/rich-text/index.js Show resolved Hide resolved

aduth deleted the try/block-editor-selection-state branch April 22, 2019 13:13

This was referenced Apr 29, 2019

Bump version number to 5.6.0-rc.1 #15248

Merged

Bump version number to 5.6.0 #15373

Merged

hypest mentioned this pull request May 2, 2019

[RNMobile] fork master before richtext selection state change #15399

Closed

5 tasks

Tug mentioned this pull request May 6, 2019

[RN Mobile] Fix crash when merging block #15392

Merged

aduth reviewed May 7, 2019

View reviewed changes

Tug mentioned this pull request May 13, 2019

Rich Text: Set applied format as active in applyFormats #15573

Merged

ellatrix mentioned this pull request May 13, 2019

Input Interaction: set caret correctly on merge forward (Delete) #15599

Merged

5 tasks

youknowriad added this to the 5.6 (Gutenberg) milestone May 13, 2019

hypest mentioned this pull request May 15, 2019

Fix caret position after multi line paste wordpress-mobile/gutenberg-mobile#870

Closed

kienstra mentioned this pull request May 29, 2019

Add rich text control getblocklab/block-lab#221

Merged

hypest mentioned this pull request May 30, 2019

Introduce a way to manage focus on the RichText editor #9740

Closed

aduth mentioned this pull request May 30, 2019

Block Library: Implement drag handles for columns resizing #15927

Closed

aduth reviewed Jun 6, 2019

View reviewed changes

aduth mentioned this pull request Jun 27, 2019

Block Editor: Maintain selection when multi-selection toggled #16336

Closed

ellatrix mentioned this pull request Oct 8, 2019

List Block: fix merging with indented list items #17845

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Block Editor: move selection state from RichText to the store #14640

Block Editor: move selection state from RichText to the store #14640

ellatrix commented Mar 26, 2019 •

edited

Loading

ellatrix Mar 30, 2019

ellatrix Mar 30, 2019

gziolo left a comment •

edited

Loading

gziolo commented Apr 1, 2019

pinarol commented Apr 23, 2019

ellatrix commented Apr 24, 2019

pinarol commented Apr 24, 2019

aduth May 7, 2019

talldan May 8, 2019

phpbits commented May 24, 2019 •

edited

Loading

aduth Jun 6, 2019

		@@ -1042,6 +1068,18 @@ Returns an action object used in signalling that the caret has entered formatted

		Returns an action object used in signalling that the user caret has exited formatted text.

		### selectionChange

Block Editor: move selection state from RichText to the store #14640

Block Editor: move selection state from RichText to the store #14640

Conversation

ellatrix commented Mar 26, 2019 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

ellatrix Mar 30, 2019

Choose a reason for hiding this comment

ellatrix Mar 30, 2019

Choose a reason for hiding this comment

gziolo left a comment • edited Loading

Choose a reason for hiding this comment

gziolo commented Apr 1, 2019

pinarol commented Apr 23, 2019

ellatrix commented Apr 24, 2019

pinarol commented Apr 24, 2019

aduth May 7, 2019

Choose a reason for hiding this comment

talldan May 8, 2019

Choose a reason for hiding this comment

phpbits commented May 24, 2019 • edited Loading

aduth Jun 6, 2019

Choose a reason for hiding this comment

ellatrix commented Mar 26, 2019 •

edited

Loading

gziolo left a comment •

edited

Loading

phpbits commented May 24, 2019 •

edited

Loading