Paste Handler: convert lists inside of table cells to pseudo lists WIP #55651

mpkelly · 2023-10-26T16:00:41Z

Fixes #45774

Related #46775

Details to follow - WIP.

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

mpkelly · 2023-10-26T16:02:29Z

packages/blocks/src/api/raw-handling/nested-list-converted.js

+		bullet = `${ index + 1 }. `;
+	}
+	if ( isNested ) {
+		bullet = `  ${ bullet }`;


@ellatrix I made some progress on this. Now that the transformation happens during an earlier stage, the indentation whitespace I am adding gets stripped away. Any ideas on how to preserve it so nested lists look correct?

Currently this:

Gets rendered as this:

The whitespace is being stripped out by htmlFormattingRemover in the same file. What are the implications of changing the code so it doesn't do this for td?

Or maybe the transformation I am adding can add an attribute data-preserve-whitespace="true" which htmlFormattingRemover can check? (it can also remove the attribute after reading it)

I've been trying to use an attribute like data-preserve-whitespace or just a flag like node.preserveWhiteSpace but these don't work. Any attributes need to be on the schema(s), or they get removed. And adding new properties to nodes like node.preserveWhiteSpace does not work because these properties get removed during other transformations.

One other thing I just tried was to record the XPath of the elements where you want to preserve white space, e.g. body/b/div/table/tbody/tr[3]/td and then check these paths in htmlFormattingRemover and return early. However, this doesn't work because in htmlFormattingRemover, the same path now looks like body/table/tbody/tr[3]/td due to other transform functions removing nodes. This is harder than I expected!

But what are they using to represent the tables? Are those just unicode bullets (text) or is it actual list markup? Maybe test in a couple of more places?

Apple Notes (should be identical to Pages)

Anything else you use?

Could you create a table with a list in HTML and paste it in Google Docs?

I don't want (1) these "fake" lists to be too good that it becomes confusing to understand what you're dealing with and (2) people to thing you can indent with spaces, because you cannot. Try a soft line break in a paragraph followed by spaces and preview the result. On the front-end the spaces will be collapsed because that's how HTML works. In the editor all rich text instances have white-space: pre-wrap turned on so even invisible spacing is visible. It's not ideal... either we should remove that CSS in the editor (but it's weird to press space multiple times with nothing happening), or we need to alternate between inserting spaces and non breaking spaces.

I don't want (1) these "fake" lists to be too good that it becomes confusing to understand what you're dealing with and (2) people to thing you can indent with spaces, because you cannot

@ellatrix, this feels like a bug to me. As it's a WYSIWYG editor, it feels like they should match. I tried creating the same "fake" list in the editor and it's fine but on the frontend it is collapsed.

or we need to alternate between inserting spaces and non breaking spaces.

Can confirm this works. Can we go with that?

I just pushed my latest code.

mpkelly · 2023-10-26T16:03:46Z

packages/blocks/src/api/raw-handling/paste-handler.js

@@ -189,6 +190,7 @@ export function pasteHandler( {
 			}

 			const filters = [
+				nestedListedConverter,


@ellatrix in #46775, you mentioned updating filterInlineHTML, but I found that this is not always called. I registered a transformer function here - is this ok?

You'll need to add it both here and filterInlineHTML.

I've added the transform function there too. Still need to test it though.

…ting does not get removed during raw-handling transforms

mpkelly · 2023-11-06T12:01:30Z

packages/blocks/src/api/raw-handling/nested-list-converted.js

+
+	if ( isList( node ) ) {
+		const nodes = transformList( node );
+		if ( nodes.length ) {


I read the comment above, specialCommentConverter, which mentions using a special block node, core/nextpage, to avoid further transformations.

As a POC, I used the same node and found that whitespace is now preserved. Can we use something like this as a basis for a solution to keeping whitespace, @ellatrix?

Using this solution produces the final result we're after:

Why does this work? Why are non breaking spaces otherwise stripped? What's responsible for that?

Actually, this change isn't necessary:

const wrapper = doc.createElement( 'wp-block' ); wrapper.dataset.block = 'core/nextpage';

The way I added space characters (\u00A0) in this last commit seems to be enough by itself. Previously, I created a span with just a \u00A0, which didn't survive. In this commit, I append the space and bullet (\u00A0\u00A0-) together, and it works.

So I think I have a solution. All that remains is to write some tests.

Actually, my earlier attempt used document.createTextNode( '\u00A0' ). I just tried that now, and it actually works too. 🤔

ellatrix · 2023-11-13T04:46:29Z

packages/blocks/src/api/raw-handling/nested-list-converted.js

+	return (
+		Array.from( { length } )
+			// eslint-disable-next-line no-unused-vars
+			.map( ( i ) => `\u00A0 \u00A0` )


Why three spaces?

One is hard to spot, and two didn't feel like enough. This produces something closer to the source list.

packages/blocks/src/api/raw-handling/nested-list-converted.js

ellatrix · 2023-11-13T04:54:40Z

packages/blocks/src/api/raw-handling/paste-handler.js

@@ -191,6 +193,7 @@ export function pasteHandler( {
 			const filters = [
 				googleDocsUIDRemover,
 				msListConverter,
+				nestedListedConverter,


Hm, this shouldn't be done for all lists. Ideally, this is added to phrasing content cleanup so that it runs when pasting inline HTML, but also when pasting blocks where a table or figure captions contains lists.

Maybe it should be part of removeInvalidHTML? Before removing an invalid list, convert it to plain text. We already have some fixing logic there that inserts line breaks when it encounters a block level element (see bottom of cleanNodeList).

Other than this, code looks good.

I've started reworking it so it's compatible with cleanNodeList . I can maybe get a PR delivered tomorrow on the train; otherwise, it will be after the meet-up. I will include some integration tests.

ellatrix

Could you add some integration tests to the existing raw handling integration tests? The list in a table from Google Docs would be good.

Paste Handler: convert lists inside to table cells to pseudo lists

c2c6e11

mpkelly commented Oct 26, 2023

View reviewed changes

Rework solution to use special core/nextpage block which means format…

cd0bcc2

…ting does not get removed during raw-handling transforms

mpkelly commented Nov 6, 2023

View reviewed changes

mpkelly added 2 commits November 9, 2023 15:24

Rework solution to alternate space character; use 3 spaces to indent.

235202b

Remove log statement

d57b258

ellatrix reviewed Nov 13, 2023

View reviewed changes

packages/blocks/src/api/raw-handling/nested-list-converted.js Show resolved Hide resolved

ellatrix reviewed Nov 13, 2023

View reviewed changes

packages/blocks/src/api/raw-handling/nested-list-converted.js Show resolved Hide resolved

ellatrix reviewed Nov 13, 2023

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Paste Handler: convert lists inside of table cells to pseudo lists WIP #55651

Paste Handler: convert lists inside of table cells to pseudo lists WIP #55651

mpkelly commented Oct 26, 2023 •

edited

Loading

mpkelly Oct 26, 2023

mpkelly Oct 26, 2023

mpkelly Oct 27, 2023

mpkelly Oct 30, 2023

mpkelly Oct 30, 2023

ellatrix Nov 9, 2023

ellatrix Nov 9, 2023

mpkelly Nov 9, 2023 •

edited

Loading

mpkelly Nov 9, 2023

mpkelly Nov 9, 2023

mpkelly Oct 26, 2023

ellatrix Nov 3, 2023

mpkelly Nov 6, 2023

mpkelly Nov 6, 2023 •

edited

Loading

mpkelly Nov 6, 2023

ellatrix Nov 8, 2023

mpkelly Nov 8, 2023 •

edited

Loading

mpkelly Nov 8, 2023

ellatrix Nov 13, 2023

mpkelly Nov 13, 2023

ellatrix Nov 13, 2023

ellatrix Nov 13, 2023

ellatrix Nov 13, 2023

mpkelly Nov 13, 2023

ellatrix left a comment

Paste Handler: convert lists inside of table cells to pseudo lists WIP #55651

Are you sure you want to change the base?

Paste Handler: convert lists inside of table cells to pseudo lists WIP #55651

Conversation

mpkelly commented Oct 26, 2023 • edited Loading

What?

Why?

How?

Testing Instructions

Testing Instructions for Keyboard

Screenshots or screencast

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

mpkelly Nov 9, 2023 • edited Loading

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

mpkelly Nov 6, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mpkelly Nov 8, 2023 • edited Loading

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 left a comment

Choose a reason for hiding this comment

mpkelly commented Oct 26, 2023 •

edited

Loading

mpkelly Nov 9, 2023 •

edited

Loading

mpkelly Nov 6, 2023 •

edited

Loading

mpkelly Nov 8, 2023 •

edited

Loading