Delete empty paragraphs when backspacing #3732

noisysocks · 2017-11-30T04:54:02Z

This is a rough attempt to fix #3624.

When backspacing from an empty paragraph into a block that has no merge function (e.g. an image), the empty paragraph should be deleted.

Out with the old:

In with the new:

How to test

Have multiple paragraphs.
Backspace to empty out a paragraph and backspace into previous one, verify the empty paragraph disappears.
Now insert an image, and backspace into image from the empty paragraph block, verify that the empty paragraph disappears.

codecov · 2017-11-30T04:54:05Z

Codecov Report

Merging #3732 into master will decrease coverage by 0.11%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #3732      +/-   ##
==========================================
- Coverage    37.7%   37.58%   -0.12%     
==========================================
  Files         279      278       -1     
  Lines        6737     6726      -11     
  Branches     1226     1227       +1     
==========================================
- Hits         2540     2528      -12     
- Misses       3536     3537       +1     
  Partials      661      661

Impacted Files	Coverage Δ
editor/effects.js	`58.2% <100%> (+0.63%)`	⬆️
components/panel/row.js	`0% <0%> (-100%)`	⬇️
editor/utils/mobile/index.js	`57.14% <0%> (-17.86%)`	⬇️
editor/components/block-list/block.js	`0.74% <0%> (-1.5%)`	⬇️
editor/reducer.js	`90.27% <0%> (-0.11%)`	⬇️
editor/selectors.js	`93.43% <0%> (-0.04%)`	⬇️
element/index.js	`100% <0%> (ø)`	⬆️
blocks/hooks/index.js	`100% <0%> (ø)`	⬆️
editor/edit-post/layout/index.js	`0% <0%> (ø)`	⬆️
editor/store-defaults.js	`100% <0%> (ø)`	⬆️
... and 9 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 499b320...e5383ce. Read the comment docs.

noisysocks · 2017-11-30T04:57:10Z

editor/effects.js

@@ -217,6 +218,9 @@ export default {
 		// Only focus the previous block if it's not mergeable
 		if ( ! blockType.merge ) {
 			dispatch( focusBlock( blockA.uid ) );
+			if ( blockB.name === 'core/paragraph' && ! blockB.attributes.content.length ) {


My instinct here is to invent a isBlockEmpty helper which we would use instead of this very very specific logic.

I'm not sure, though, since it probably is only paragraphs that we want this behaviour for...

Thoughts, @aduth?

We could also introduce a flag that marks all other removable blocks like heading or list.

blockB.attributes.content.length - is it safe to assume that content is there and it's a string?

And yes, you can at least introduce a local variable which better explains what is happening in this conditional statement :)

Maybe we could introduce a isEmpty property to the block API and if not defined the block is never empty. Only the block knows how to read its attributes.

This is another API to maintain but it makes sense to me. cc @aduth

I added an isEmpty property and implemented it for core/paragraph. I agree that extra API isn't ideal, but this seems necessary.

I don't love the isEmpty property (more to a general concern of limiting number of properties on the block API). It seems to me if Editable is smart enough to know that it should merge its own content into previous, it can also be smart enough to know that it has no content to merge and should just remove. That said, I also don't love an onRemove being added to Editable. Wondering if we could enhance one of the existing like onReplace to also encompass behavior of "replacing with nothing" ?

That's a good idea @aduth. I moved my deletion logic to Editable in a0d193b.

gziolo · 2017-11-30T08:06:15Z

This merge property is also a bit strange, try the following:

Add an empty list and a quote and try to delete quote with backspace. It merges them together producing the list of 3 empty items:

noisysocks · 2017-12-04T06:22:11Z

@gziolo it looks like that strangeness is caused by an unrelated bug in the core/quote → core/list transform. e5383ce ought to fix it!

jasmussen · 2017-12-04T13:41:45Z

Seriously cool work. In my testing, behavior wise, this works exactly like it needs to! 👍 👍 from an experience point of view.

jorgefilipecosta · 2017-12-04T15:56:06Z

blocks/library/list/index.js

-						values: value.map( ( item, index ) => <li key={ index } >{ get( item, 'children.props.children', '' ) } </li> )
-							.concat( citation ? <li key="citation">{ citation }</li> : [] ),
+						values: value.map( item => get( item, 'children.props.children' ) ).concat( citation )
+							.filter( text => typeof text === 'string' )


This was a nice find that we are creating a list with an empty <li> and this affects some functionality 👍
Unfortunately, we cannot be that strict and force the text to be a string. For example, if we have a quote with items in bold they are ignored in the transformation because these items are not a string.
If the user adds a quote with a line then 3 empty lines and another line, I'm not certain if we should just transform to a list with two items or to a list with one item 3 empty items and one last item.
Maybe we can just add a special case that verifies if value and citation are both empty/unset and if yes we just return with a list with no items. e.g: if ( ( ! value || ! value.length ) && ! citation ) {.

I've fiddled with this in e2257f5. There's a surprising amount of edge cases!

The logic I opted for is:

'Quote' / 'Citation' → <li>Quote</li><li>Citation</li>

'' / 'Citation' → <li></li><li>Citation</li>

'Quote' / '' → <li>Quote</li>

'' / '' → ``

aduth · 2017-12-05T14:09:02Z

A small thing that I really appreciate from this change: Clicking into the "Write your story" and hitting Backspace resets to remove the inserted paragraph block.

aduth · 2017-12-05T14:12:05Z

blocks/editable/index.js

+			const isEmpty = dom.isEmpty( rootNode );
+			if ( this.props.onReplace && isEmpty ) {
+				// Remove this block if the editor is empty
+				this.props.onReplace( [] );


One odd thing about the logic flow here: If I render an <Editable /> with onReplace, but not onMerge, I won't have this emptiness replace behavior, since this is only reached if onMerge is assigned, even though it's not called.

aduth · 2017-12-05T14:13:10Z

I should note to my review, functionally it works great and I'm glad to see it handled in Editable entirely.

aduth · 2017-12-05T14:26:59Z

Hmm, a potential issue is that some blocks may have multiple Editables, and one of them being empty is not a sufficient metric to determine that the block should be replaced. Example: Pressing backspace from a quote citation, when the quote itself has text, shouldn't delete the block.

mcsf

Nice work, but it seems the replace behavior takes precedence over the merge one, leading to unexpected outcomes. Note how focus is lost when deleting into another paragraph:

Before	After

noisysocks · 2017-12-06T05:27:41Z

Hmm, a potential issue is that some blocks may have multiple Editables, and one of them being empty is not a sufficient metric to determine that the block should be replaced.

Good point... there's a lot of ~~dragons~~ subtleties here.

This approach kind of works right now because in practice it's only core/paragraph that has both onMerge and onReplace passed to its Editable.

Unfortunately that means that the bug that this PR attempts to fix is only fixed for paragraph blocks and not quotes (which has onMerge but not onReplace):

If we give core/quote an onReplace, we fix the problem:

BUT doing this means we now have the problem you describe where a quote that contains only a citation can be incorrectly deleted:

Long story short, I think that patching Editable is unworkable. To fix this bug in the general case we need the merge/deletion logic to read the block's entire state.

I have two ideas:

Go back to what we had before where each block defines an isEmpty method which the MERGE_BLOCKS effect can use to determine if that block should be deleted when being merged. I like the explicitness of this approach, but it does mean extra API surface.
Same as (1) but instead of each block defining an isEmpty we build a method that compares each of the block's attributes against the block's default attributes. If no attribute differs from its default, then the block is empty and can be deleted when being merged. I think this might be our best bet.

aduth · 2017-12-11T14:46:26Z

Could we add a new callback onRemove to Editable which is called as in the current implementation where we delete an empty Editable? Then, the block could decide if onRemove should be handled as onReplace( [] ) (i.e. paragraph, or in other blocks when first checking that all other fields are empty as well).

noisysocks · 2017-12-13T01:10:46Z

Could we add a new callback onRemove to Editable which is called as in the current implementation where we delete an empty Editable?

Nice suggestion. I've done this and it seems to work pretty well.

I also fixed a similar bug to what @gziolo found where if one presses backspace in an empty paragraph block that follows a list block, an empty <li> is created.

aduth

This seems to work quite nicely.

aduth · 2017-12-13T18:21:17Z

blocks/editable/index.js

 			event.preventDefault();
 			event.stopImmediatePropagation();
+
+			return;


Is the return; necessary?

aduth · 2017-12-13T18:23:11Z

blocks/editable/index.js

+			}
+
+			const isEmpty = dom.isEmpty( rootNode );
+			if ( isEmpty && this.props.onRemove ) {


Minor: If dom.isEmpty is non-trivial (sorta appears so), we could achieve a minor optimization here with conditional short-circuiting by reordering the condition to test the truthy onRemove first:

if ( this.props.onRemove && dom.isEmpty( rootNode ) ) {

When backspacing from an empty paragraph into a block that has no merge function (e.g. an image), the empty paragraph should be deleted. Empty lists, headings and quotes are treated similarly.

Reduce the amount of times that empty <li>s are created when converting a core/quote to a core/list. The conversion logic is: * 'Quote' / 'Citation' -> `<li>Quote</li><li>Citation</li>` * '' / 'Citation' -> `<li></li><li>Citation</li>` * 'Quote' / '' -> `<li>Quote</li>` * '' / '' -> ``

Prevent empty paragraphs from being converted to an empty <li>.

mtias · 2018-01-10T16:51:31Z

Nice work here.

noisysocks commented Nov 30, 2017

View reviewed changes

noisysocks added the [Type] Bug An existing feature does not function as intended label Nov 30, 2017

noisysocks force-pushed the try/deleting-empty-blocks-when-backspacing-into-an-image branch from 8d9cab7 to e5383ce Compare December 4, 2017 06:11

gziolo requested review from karmatosed and jasmussen December 4, 2017 12:24

jorgefilipecosta reviewed Dec 4, 2017

View reviewed changes

noisysocks force-pushed the try/deleting-empty-blocks-when-backspacing-into-an-image branch from e5383ce to e2257f5 Compare December 5, 2017 04:47

aduth requested changes Dec 5, 2017

View reviewed changes

mcsf requested changes Dec 5, 2017

View reviewed changes

noisysocks force-pushed the try/deleting-empty-blocks-when-backspacing-into-an-image branch from e2257f5 to 07e051e Compare December 13, 2017 00:45

aduth approved these changes Dec 13, 2017

View reviewed changes

noisysocks added 3 commits December 14, 2017 12:55

Delete empty paragraphs when backspacing

bdff481

When backspacing from an empty paragraph into a block that has no merge function (e.g. an image), the empty paragraph should be deleted. Empty lists, headings and quotes are treated similarly.

Improve core/paragraph -> core/list conversion

18e281a

Prevent empty paragraphs from being converted to an empty <li>.

noisysocks force-pushed the try/deleting-empty-blocks-when-backspacing-into-an-image branch from 07e051e to 18e281a Compare December 14, 2017 01:56

noisysocks merged commit e421572 into master Dec 14, 2017

noisysocks deleted the try/deleting-empty-blocks-when-backspacing-into-an-image branch December 14, 2017 02:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Delete empty paragraphs when backspacing #3732

Delete empty paragraphs when backspacing #3732

noisysocks commented Nov 30, 2017 •

edited

codecov bot commented Nov 30, 2017 •

edited

noisysocks Nov 30, 2017

gziolo Nov 30, 2017 •

edited

gziolo Nov 30, 2017

youknowriad Dec 1, 2017 •

edited

noisysocks Dec 4, 2017 •

edited

aduth Dec 4, 2017

noisysocks Dec 5, 2017

gziolo commented Nov 30, 2017

noisysocks commented Dec 4, 2017 •

edited

jasmussen commented Dec 4, 2017

jorgefilipecosta Dec 4, 2017 •

edited

noisysocks Dec 5, 2017 •

edited

aduth commented Dec 5, 2017

aduth Dec 5, 2017

aduth commented Dec 5, 2017

aduth commented Dec 5, 2017

mcsf left a comment

noisysocks commented Dec 6, 2017

aduth commented Dec 11, 2017

noisysocks commented Dec 13, 2017

aduth left a comment

aduth Dec 13, 2017

aduth Dec 13, 2017

mtias commented Jan 10, 2018

Delete empty paragraphs when backspacing #3732

Delete empty paragraphs when backspacing #3732

Conversation

noisysocks commented Nov 30, 2017 • edited

How to test

codecov bot commented Nov 30, 2017 • edited

Codecov Report

noisysocks Nov 30, 2017

Choose a reason for hiding this comment

gziolo Nov 30, 2017 • edited

Choose a reason for hiding this comment

gziolo Nov 30, 2017

Choose a reason for hiding this comment

youknowriad Dec 1, 2017 • edited

Choose a reason for hiding this comment

noisysocks Dec 4, 2017 • edited

Choose a reason for hiding this comment

aduth Dec 4, 2017

Choose a reason for hiding this comment

noisysocks Dec 5, 2017

Choose a reason for hiding this comment

gziolo commented Nov 30, 2017

noisysocks commented Dec 4, 2017 • edited

jasmussen commented Dec 4, 2017

jorgefilipecosta Dec 4, 2017 • edited

Choose a reason for hiding this comment

noisysocks Dec 5, 2017 • edited

Choose a reason for hiding this comment

aduth commented Dec 5, 2017

aduth Dec 5, 2017

Choose a reason for hiding this comment

aduth commented Dec 5, 2017

aduth commented Dec 5, 2017

mcsf left a comment

Choose a reason for hiding this comment

noisysocks commented Dec 6, 2017

aduth commented Dec 11, 2017

noisysocks commented Dec 13, 2017

aduth left a comment

Choose a reason for hiding this comment

aduth Dec 13, 2017

Choose a reason for hiding this comment

aduth Dec 13, 2017

Choose a reason for hiding this comment

mtias commented Jan 10, 2018

noisysocks commented Nov 30, 2017 •

edited

codecov bot commented Nov 30, 2017 •

edited

gziolo Nov 30, 2017 •

edited

youknowriad Dec 1, 2017 •

edited

noisysocks Dec 4, 2017 •

edited

noisysocks commented Dec 4, 2017 •

edited

jorgefilipecosta Dec 4, 2017 •

edited

noisysocks Dec 5, 2017 •

edited