RichText: own undo signalling #10650

ellatrix · 2018-10-16T13:42:12Z

Description

This is a proposal for the RichText component to handle undo signalling in favour of listening to the TinyMCE change event.

RichText will signal that an undo level should be created:

When the user changes the value, except when it comes from the input event (typing).
When there is over a second pause between input events (typing).

Why?

It's not always clear when the change event exactly triggers and we do not always want it to create an undo level. The change event also no longer accounts for formatting changes, as these are no longer done by TinyMCE. It's easier to just do it ourselves so we can fine-tune and not rely on the TinyMCE event.

How has this been tested?

Test undoing and redoing changes from RichText components.

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.

ellatrix · 2018-10-16T13:48:36Z

TinyMCE's logic for undo levels, for reference:

https://github.com/tinymce/tinymce/blob/dd51681f898eea7e61fa9b4c2ef849aaf6853920/src/core/main/ts/api/UndoManager.ts#L72-L173

packages/editor/src/utils/with-history/index.js

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

packages/editor/src/components/rich-text/remove-browser-shortcuts.js

aduth · 2018-11-09T14:49:57Z

test/e2e/specs/undo.test.js

+
+		await pressWithModifier( META_KEY, 'z' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();


We should ideally test caret position here too. Because it resets to the beginning of the field unexpectedly. Apparently this also occurs in the latest plugin release, so not strictly a regression.

It's always been like this. We'll probably need to save selection to the editor state. Seems like material for a separate PR.

test/e2e/specs/blocks/__snapshots__/quote.test.js.snap

test/e2e/specs/__snapshots__/undo.test.js.snap

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

packages/editor/src/components/rich-text/remove-browser-shortcuts.js

aduth · 2018-11-09T15:19:50Z

The Undo behavior feels particularly heavy-handed (destroying all of a paragraph I've written if I don't move my mouse), but I guess this aligns with the previous behavior as well.

ellatrix · 2018-11-12T16:22:26Z

The Undo behavior feels particularly heavy-handed (destroying all of a paragraph I've written if I don't move my mouse), but I guess this aligns with the previous behavior as well.

It should behave roughly the same as before. With this change we can also fine tune it ourselves. Ideas for other triggers are welcome. Not sure what else we can do, maybe a typing pause could trigger an undo level? I don't think we can rely on punctuation as that's not universal.

ellatrix · 2018-11-13T17:43:46Z

@aduth I went for adding an undo level after a one second pause in input. We can adjust this value if it's too high or low.

aduth · 2018-11-15T17:16:43Z

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

@@ -612,7 +573,7 @@ export class RichText extends Component {
 		// The input event does not fire when the whole field is selected and
 		// BACKSPACE is pressed.
 		if ( keyCode === BACKSPACE ) {
-			this.onChange( this.createRecord(), true );


I don't understand why this change has been made.

We used to skip applying changes back to the live DOM, and so did we here. Since #11595 we no longer do that, but it hasn't been updated here. I've removed it here while revising the parameters for this.onChange.

aduth · 2018-11-15T17:18:02Z

test/e2e/specs/undo.test.js

+		await clickBlockAppender();
+
+		await page.keyboard.type( 'before pause' );
+		await new Promise( ( resolve ) => setTimeout( resolve, 1000 ) );


I wish we could emulate this without actually slowing our test run by one full second.

aduth · 2018-11-15T17:23:28Z

packages/editor/src/components/editor-global-keyboard-shortcuts/index.js

@@ -114,6 +99,9 @@ class EditorGlobalKeyboardShortcuts extends Component {
 					bindGlobal
 					shortcuts={ {
 						[ rawShortcut.primary( 's' ) ]: this.save,
+						[ rawShortcut.primary( 'z' ) ]: flow( preventDefault, onUndo ),


By moving this into bindGlobal, we're now preventing default behavior for all inputs in the page, not just RichText, right? We'd then rely on all of those inputs to be fully controlled by state values governed by history? I'm not sure I feel particularly confident we can trust that.

Example:

Navigate to Posts > Add New

Insert a reusable block

Click Edit in the Reusable Block's heading

Make some changes to the title

Press Cmd+Z

In 4.3: Input undoes changes
In this branch: The block is removed (presumably undo'ing the block addition to the editor)

Which input fields on the page would not be included in our history? Maybe it would be better then for those to opt-in vs opt-out? Currently undoing any changes with the browser actually adds to the history, not removes.

Why is the title not part of the history?

Non-exhaustive set of others:

Embed placeholder URL input

Table placeholder columns / rows inputs

Media placeholders URL input

Post permalink

Categories search

(Discovered via onSubmit= Find in Files search)

Okay, I'm unsure atm then how to prevent default behaviour for RichText only. Restore https://github.com/WordPress/gutenberg/blob/72e51c692108ce52021564352a6d2661466fc231/packages/editor/src/components/rich-text/remove-browser-shortcuts.js?

Yeah, for now I think we might just need to have two KeyboardShortcuts for handling these keys, one top-level but not applied to inputs, the other specific to when a RichText is selected.

tl;dr I think that's what we had in the prior revision you're referring to?

Right, I just restored your revision :)

aduth · 2018-11-15T17:52:28Z

packages/editor/src/components/rich-text/remove-browser-shortcuts.js

+const HANDLED_SHORTCUTS = [
+	rawShortcut.primary( 'z' ),
+	rawShortcut.primaryShift( 'z' ),
+	rawShortcut.primary( 'y' ),


Not necessary here, but if we're going to support Cmd+Y , we should probably do so consistently between RichText and the top-level handler.

We're only removing the browser shortcut here, not adding any support. But maybe we should add support everywhere?

Hmm, in that case, is the line even necessary if we're not handling it anyways?

ellatrix · 2018-11-15T18:41:40Z

Thanks a lot @aduth for the review!

ellatrix added [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Status] In Progress Tracking issues with work in progress [Feature] Writing Flow Block selection, navigation, splitting, merging, deletion... labels Oct 16, 2018

ellatrix force-pushed the try/own-richtext-undo branch 2 times, most recently from bfc721d to 7c9ffa8 Compare November 1, 2018 13:31

This comment has been minimized.

Sign in to view

ellatrix force-pushed the try/own-richtext-undo branch from b1b60d4 to 0233a47 Compare November 2, 2018 08:33

ellatrix commented Nov 2, 2018

View reviewed changes

packages/editor/src/utils/with-history/index.js Outdated Show resolved Hide resolved

ellatrix force-pushed the try/own-richtext-undo branch 3 times, most recently from 7cf30f6 to aa4740d Compare November 2, 2018 12:09

ellatrix requested review from a team, mcsf and aduth November 2, 2018 12:19

ellatrix added this to the 4.3 milestone Nov 2, 2018

aduth reviewed Nov 2, 2018

View reviewed changes

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

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

ellatrix commented Nov 2, 2018

View reviewed changes

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

ellatrix requested a review from a team November 2, 2018 15:51

ellatrix mentioned this pull request Nov 5, 2018

Make it possible to undo prefix transforms #11497

Merged

4 tasks

ellatrix removed the [Status] In Progress Tracking issues with work in progress label Nov 9, 2018

aduth reviewed Nov 9, 2018

View reviewed changes

packages/editor/src/components/rich-text/tinymce.js Outdated Show resolved Hide resolved

aduth reviewed Nov 9, 2018

View reviewed changes

packages/editor/src/components/rich-text/remove-browser-shortcuts.js Outdated Show resolved Hide resolved

youknowriad modified the milestones: 4.3, 4.4 Nov 9, 2018

ellatrix force-pushed the try/own-richtext-undo branch from 41ed725 to 1cfd664 Compare November 13, 2018 16:05

ellatrix requested a review from a team November 13, 2018 17:44

youknowriad modified the milestones: 4.4, 4.5 Nov 15, 2018

ellatrix force-pushed the try/own-richtext-undo branch from 77da162 to 78c1a1c Compare November 15, 2018 10:25

ellatrix modified the milestones: 4.5, 4.4 Nov 15, 2018

aduth reviewed Nov 15, 2018

View reviewed changes

ellatrix force-pushed the try/own-richtext-undo branch from 04430fc to dc4f688 Compare November 15, 2018 17:40

aduth approved these changes Nov 15, 2018

View reviewed changes

ellatrix added 4 commits November 15, 2018 19:20

Own undo history

935c7cb

Adjust e2e test

30205fc

Add undo level after input timeout

e6e9151

Remove _withoutApply

9dba9e5

ellatrix force-pushed the try/own-richtext-undo branch from dc4f688 to 9dba9e5 Compare November 15, 2018 18:20

ellatrix merged commit 9763f92 into master Nov 15, 2018

ellatrix deleted the try/own-richtext-undo branch November 15, 2018 18:41

ellatrix mentioned this pull request Nov 19, 2018

Undo / Redo inconsistencies when using mouse or keyboard #5685

Closed

afercia mentioned this pull request Nov 19, 2018

Undo / Redo unreliable with the post title #12075

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

RichText: own undo signalling #10650

RichText: own undo signalling #10650

ellatrix commented Oct 16, 2018 •

edited

Loading

ellatrix commented Oct 16, 2018

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

aduth Nov 9, 2018

ellatrix Nov 12, 2018

aduth commented Nov 9, 2018

ellatrix commented Nov 12, 2018

ellatrix commented Nov 13, 2018

aduth Nov 15, 2018

ellatrix Nov 15, 2018

aduth Nov 15, 2018

aduth Nov 15, 2018

aduth Nov 15, 2018

ellatrix Nov 15, 2018

ellatrix Nov 15, 2018

aduth Nov 15, 2018

ellatrix Nov 15, 2018

aduth Nov 15, 2018

ellatrix Nov 15, 2018

aduth Nov 15, 2018

ellatrix Nov 15, 2018

aduth Nov 15, 2018

ellatrix commented Nov 15, 2018


		await pressWithModifier( META_KEY, 'z' );

		expect( await getEditedPostContent() ).toMatchSnapshot();

RichText: own undo signalling #10650

RichText: own undo signalling #10650

Conversation

ellatrix commented Oct 16, 2018 • edited Loading

Description

How has this been tested?

Screenshots

Types of changes

Checklist:

ellatrix commented Oct 16, 2018

This comment has been minimized.

This comment has been minimized.

This comment has been minimized.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

aduth commented Nov 9, 2018

ellatrix commented Nov 12, 2018

ellatrix commented Nov 13, 2018

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

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

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

ellatrix commented Nov 15, 2018

ellatrix commented Oct 16, 2018 •

edited

Loading