Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow pasting tables with list content inside the cells. #46775

Open
wants to merge 3 commits into
base: trunk
Choose a base branch
from
Open

Allow pasting tables with list content inside the cells. #46775

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5e8a208
Allow pasting tables with list content inside the cells. This content…
mpkelly Dec 23, 2022
aa6ce58
Allow pasting tables with list content inside the cells. This content…
mpkelly Dec 23, 2022
38218df
Merge branch 'trunk' into add/support-for-pasting-lists-into-tables
danielbachhuber Jan 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/block-library/src/list/transforms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { create, split, toHTMLString } from '@wordpress/rich-text';
*/
import { createListBlockFromDOMElement } from './utils';

function getListContentSchema( { phrasingContentSchema } ) {
export function getListContentSchema( { phrasingContentSchema } ) {
const listContentSchema = {
...phrasingContentSchema,
ul: {},
Expand Down
21 changes: 21 additions & 0 deletions packages/block-library/src/table/test/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/**
* Internal dependencies
*/
import { getListItemBullet } from '../utils';

describe( 'getListItemBullet', () => {
it( 'UL list item', () => {
expect( getListItemBullet( 'UL', false, 0 ) ).toBe( '-' );
expect( getListItemBullet( 'UL', false, 100 ) ).toBe( '-' );
} );
it( 'OL numeric item', () => {
expect( getListItemBullet( 'OL', true, 0 ) ).toBe( '1.' );
expect( getListItemBullet( 'OL', true, 26 ) ).toBe( '27.' );
expect( getListItemBullet( 'OL', true, 53 ) ).toBe( '54.' );
} );
it( 'OL character list item', () => {
expect( getListItemBullet( 'OL', false, 0 ) ).toBe( 'a.' );
expect( getListItemBullet( 'OL', false, 26 ) ).toBe( 'aa.' );
expect( getListItemBullet( 'OL', false, 53 ) ).toBe( 'bbb.' );
} );
} );
105 changes: 103 additions & 2 deletions packages/block-library/src/table/transforms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,27 @@
/**
* WordPress dependencies
*/
import { createBlock, getBlockAttributes } from '@wordpress/blocks';

/**
* Internal dependencies
*/
import { name } from './block.json';
import { getListContentSchema } from '../list/transforms';
import { getListItemBullet } from './utils';

const tableContentPasteSchema = ( { phrasingContentSchema } ) => ( {
tr: {
allowEmpty: true,
children: {
th: {
allowEmpty: true,
children: phrasingContentSchema,
children: getListContentSchema( { phrasingContentSchema } ),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure I like this. Why not use '*' for children and let raw handling parse the cell contents as blocks, then transform that to the markdown syntax. OR instead of parsing as blocks, just convert the HTML to mark down?

gutenberg/packages/block-library/src/quote/transforms.js

Lines 38 to 61 in 6517008

{
type: 'raw',
schema: () => ( {
blockquote: {
children: '*',
},
} ),
selector: 'blockquote',
transform: ( node, handler ) => {
return createBlock(
'core/quote',
// Don't try to parse any `cite` out of this content.
// * There may be more than one cite.
// * There may be more attribution text than just the cite.
// * If the cite is nested in the quoted text, it's wrong to
// remove it.
{},
handler( {
HTML: node.innerHTML,
mode: 'BLOCKS',
} )
);
},
},

Suggested change
children: getListContentSchema( { phrasingContentSchema } ),
children: '*',

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Although, when it's parsed as block, it's harder to convert all blocks to something textual (like heading to plain text etc.)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why don't we build this into the paste handler and generally convert lists to plain text if the allowed children is phrasingContentSchema? This behaviour could be useful in other places. What if there's a list in a caption? Generalising this would be great.

So inside the paste handler, I think we need a filter before removeInvalidHTML that converts list that are not allowed in these places (not in schema) to the text version of the list.

Let me know if you need help here.

attributes: [ 'scope', 'colspan' ],
},
td: {
allowEmpty: true,
children: phrasingContentSchema,
children: getListContentSchema( { phrasingContentSchema } ),
attributes: [ 'colspan' ],
},
},
Expand All @@ -35,12 +47,101 @@ const tablePasteSchema = ( args ) => ( {
},
} );

const indent = ( depth ) => {
return Array.from( { length: depth * 4 } )
.map( () => ' ' )
.join( '' );
};

const isList = ( node ) => {
return node.tagName === 'UL' || node.tagName === 'OL';
};

const transformContent = ( cell ) => {
// not available by default in node (jest) env so eslint complains.
// eslint-disable-next-line no-undef
const parser = new DOMParser();
const document = parser.parseFromString( cell.content, 'text/html' );
const result = [];
let orderedListUsesNumbers = true;
const processDOMTree = ( node, listDepth = 0 ) => {
if ( isList( node ) ) {
//debugger;
if ( listDepth === 0 ) {
result.push( '<br/>' );
}
Array.from( node.childNodes ).forEach(
( listItem, listItemIndex ) => {
const children = Array.from( listItem.childNodes );
let simple = [];
children.forEach( ( child ) => {
if ( isList( child ) ) {
const bullet = getListItemBullet(
node.tagName,
orderedListUsesNumbers,
listItemIndex
);
if ( simple.length ) {
result.push(
`${ indent(
listDepth
) } ${ bullet } ${ simple.join( '' ) }<br/>`
);
simple = [];
}
orderedListUsesNumbers = ! orderedListUsesNumbers;
processDOMTree( child, listDepth + 1 );
} else {
simple.push( child.outerHTML || child.textContent );
}
} );
if ( simple.length ) {
const bullet = getListItemBullet(
node.tagName,
orderedListUsesNumbers,
listItemIndex
);

result.push(
`${ indent(
listDepth
) } ${ bullet } ${ simple.join( '' ) }<br/>`
);
simple = [];
}
}
);
} else if ( node.nodeName === '#text' ) {
result.push( node.textContent );
} else {
result.push( node.outerHTML );
}
};

Array.from( document.body.childNodes ).forEach( ( node ) =>
processDOMTree( node )
);

cell.content = result.join( '' );
};

const transformTableNode = ( node ) => {
const attributes = getBlockAttributes( name, node.outerHTML );
attributes.body.forEach( ( row ) => {
row.cells.forEach( ( cell ) => {
transformContent( cell );
} );
} );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why not transform node before running getBlockAttributes? That way we don't need to parse the HTML of every cell.

return createBlock( name, attributes );
};

const transforms = {
from: [
{
type: 'raw',
selector: 'table',
schema: tablePasteSchema,
transform: transformTableNode,
},
],
};
Expand Down
25 changes: 25 additions & 0 deletions packages/block-library/src/table/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
function intToChar( int ) {
const code = 'a'.charCodeAt( 0 );
return String.fromCharCode( code + int );
}

const NUMBER_OF_CHARS_IN_ALPHABET = 26;

// returns a, b, c...aa, bb etc. for order lists that are nested in numeric ordered lists.
const getListItemCharCode = ( index ) => {
const code = intToChar( index % NUMBER_OF_CHARS_IN_ALPHABET );
const multiplier = Math.floor( index / NUMBER_OF_CHARS_IN_ALPHABET ) + 1;
return Array.from( { length: multiplier } )
.map( () => code )
.join( '' );
};

// Return the bullet for a list item.
export const getListItemBullet = ( type, orderedListUsesNumbers, index ) => {
if ( type === 'UL' ) {
return '-';
}
return orderedListUsesNumbers
? `${ index + 1 }.`
: `${ getListItemCharCode( index ) }.`;
};
2 changes: 1 addition & 1 deletion packages/dependency-extraction-webpack-plugin/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@

### Bug Fixes

- Fix missing file entry for `util.js` in `package.json`
- Fix missing file entry for `utils.js` in `package.json`

## 1.0.0 (2019-05-21)

Expand Down
2 changes: 2 additions & 0 deletions test/integration/__snapshots__/blocks-raw-handling.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ exports[`Blocks raw handling pasteHandler google-docs-table 1`] = `"<br><br><br>

exports[`Blocks raw handling pasteHandler google-docs-table-with-comments 1`] = `"<br><br><br><br>One<br>Two<br>Three<br>1<br>2<br>3<br>I<br>II<br>III"`;

exports[`Blocks raw handling pasteHandler google-docs-table-with-lists 1`] = `"<br><br><br><strong>Test</strong><br><strong>Stuff</strong><br><br><strong>Notes:</strong><br>Line one&nbsp;&nbsp;&nbsp;<br>Line <strong>two</strong><br><strong><em>Nested</em></strong> one<br>Nested two<br>Line three<br><br>Another list<br>Stuff<br><br>"`;

exports[`Blocks raw handling pasteHandler google-docs-with-comments 1`] = `"This is a <strong>title</strong><br><br>This is a <em>heading</em><br><br>Formatting test: <strong>bold</strong>, <em>italic</em>, <a href=\\"https://w.org/\\">link</a>, <s>strikethrough</s>, <sup>superscript</sup>, <sub>subscript</sub>, <strong><em>nested</em></strong>.<br><br>A<br>Bulleted<br>Indented<br>List<br><br>One<br>Two<br>Three<br><br><br><br><br>One<br>Two<br>Three<br>1<br>2<br>3<br>I<br>II<br>III<br><br><br><br><br><br>An image:<br><br><img src=\\"https://lh4.googleusercontent.com/ID\\" width=\\"544\\" height=\\"184\\"><br><br>"`;

exports[`Blocks raw handling pasteHandler gutenberg 1`] = `"Test"`;
Expand Down
6 changes: 6 additions & 0 deletions test/integration/blocks-raw-handling.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
// eslint-disable-next-line jsdoc/check-tag-names
/**
* @jest-environment jsdom
*/

/**
* External dependencies
*/
Expand Down Expand Up @@ -379,6 +384,7 @@ describe( 'Blocks raw handling', () => {
'google-docs-list-only',
'google-docs-table',
'google-docs-table-with-comments',
'google-docs-table-with-lists',
'google-docs-with-comments',
'ms-word',
'ms-word-styled',
Expand Down
1 change: 1 addition & 0 deletions test/integration/fixtures/documents/google-docs-table-with-lists-in.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-2ff64649-7fff-2807-3386-7b8d2fb0cab6"><div dir="ltr" style="margin-left:0pt;" align="left"><table style="border:none;border-collapse:collapse;"><colgroup><col width="143" /><col width="143" /><col width="339" /></colgroup><tbody><tr style="height:21pt"><td style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Test</span></p></td><td colspan="2" style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Stuff</span></p></td></tr><tr style="height:21pt"><td colspan="3" style="border-left:solid #000000 1pt;border-right:solid #000000 1pt;border-bottom:solid #000000 1pt;border-top:solid #000000 1pt;vertical-align:top;padding:5pt 5pt 5pt 5pt;overflow:hidden;overflow-wrap:break-word;"><br /><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Notes:</span></p><ol style="margin-top:0;margin-bottom:0;padding-inline-start:48px;"><li dir="ltr" style="list-style-type:decimal;font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;" aria-level="1"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;" role="presentation"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Line one&nbsp;&nbsp;&nbsp;</span></p></li><li dir="ltr" style="list-style-type:decimal;font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;" aria-level="1"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;" role="presentation"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Line </span><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:700;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">two</span></p></li><ol style="margin-top:0;margin-bottom:0;padding-inline-start:48px;"><li dir="ltr" style="list-style-type:lower-alpha;font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;" aria-level="2"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;" role="presentation"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:700;font-style:italic;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Nested</span><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;"> one</span></p></li><ol style="margin-top:0;margin-bottom:0;padding-inline-start:48px;"><li dir="ltr" style="list-style-type:lower-roman;font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;" aria-level="3"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;" role="presentation"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Nested two</span></p></li></ol></ol><li dir="ltr" style="list-style-type:decimal;font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;" aria-level="1"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;" role="presentation"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Line three</span></p></li></ol><br /><ul style="margin-top:0;margin-bottom:0;padding-inline-start:48px;"><li dir="ltr" style="list-style-type:disc;font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;" aria-level="1"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;" role="presentation"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Another list</span></p></li><ul style="margin-top:0;margin-bottom:0;padding-inline-start:48px;"><li dir="ltr" style="list-style-type:disc;font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;" aria-level="2"><p dir="ltr" style="line-height:1.2;margin-top:0pt;margin-bottom:0pt;" role="presentation"><span style="font-size:11pt;font-family:Arial;color:#000000;background-color:transparent;font-weight:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Stuff</span></p></li></ul></ul></td></tr></tbody></table></div><br /><br /></b>
3 changes: 3 additions & 0 deletions test/integration/fixtures/documents/google-docs-table-with-lists-out.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<!-- wp:table -->
<figure class="wp-block-table"><table><tbody><tr><td><strong>Test</strong></td><td colspan="2"><strong>Stuff</strong></td></tr><tr><td colspan="3"><br><strong>Notes:</strong><br/> 1. Line one   <br/> 2. Line <strong>two</strong><br/> a. <strong><em>Nested</em></strong> one<br/> 1. Nested two<br/> 3. Line three<br/><br/> - Another list<br/> - Stuff<br/></td></tr></tbody></table></figure>
<!-- /wp:table -->
2 changes: 1 addition & 1 deletion test/integration/fixtures/documents/ms-word-online-out.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
<!-- /wp:list -->

<!-- wp:table -->
<figure class="wp-block-table"><table><tbody><tr><td>One&nbsp;</td><td>Two&nbsp;</td><td>Three&nbsp;</td></tr><tr><td>1&nbsp;</td><td>2&nbsp;</td><td>3&nbsp;</td></tr><tr><td>I&nbsp;</td><td>II&nbsp;</td><td>III&nbsp;</td></tr></tbody></table></figure>
<figure class="wp-block-table"><table><tbody><tr><td>One </td><td>Two </td><td>Three </td></tr><tr><td>1 </td><td>2 </td><td>3 </td></tr><tr><td>I </td><td>II </td><td>III </td></tr></tbody></table></figure>
<!-- /wp:table -->

<!-- wp:paragraph -->
Expand Down