Fix Google Docs table paste (#13543)

WordPress · Mar 6, 2019 · 224d63d · 224d63d
1 parent 77480ae
commit 224d63d
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 25 deletions.
diff --git a/packages/blocks/src/api/raw-handling/phrasing-content-reducer.js b/packages/blocks/src/api/raw-handling/phrasing-content-reducer.js
@@ -1,18 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { wrap, unwrap, replaceTag } from '@wordpress/dom';
+import { wrap, replaceTag } from '@wordpress/dom';
 
-/**
- * Internal dependencies
- */
-import { isPhrasingContent } from './phrasing-content';
-
-function isBlockContent( node, schema = {} ) {
-	return schema.hasOwnProperty( node.nodeName.toLowerCase() );
-}
-
-export default function( node, doc, schema ) {
+export default function( node, doc ) {
 	if ( node.nodeName === 'SPAN' ) {
 		const {
 			fontWeight,
@@ -50,12 +41,4 @@ export default function( node, doc, schema ) {
 			node.removeAttribute( 'rel' );
 		}
 	}
-
-	if (
-		isPhrasingContent( node ) &&
-		node.hasChildNodes() &&
-		Array.from( node.childNodes ).some( ( child ) => isBlockContent( child, schema ) )
-	) {
-		unwrap( node );
-	}
 }
diff --git a/packages/blocks/src/api/raw-handling/test/phrasing-content-reducer.js b/packages/blocks/src/api/raw-handling/test/phrasing-content-reducer.js
@@ -21,10 +21,6 @@ describe( 'phrasingContentReducer', () => {
 		expect( deepFilterHTML( '<span style="font-style:italic;font-weight:bold">test</span>', [ phrasingContentReducer ], {} ) ).toEqual( '<strong><em><span style="font-style:italic;font-weight:bold">test</span></em></strong>' );
 	} );
 
-	it( 'should remove invalid phrasing content', () => {
-		expect( deepFilterHTML( '<strong><p>test</p></strong>', [ phrasingContentReducer ], { p: {} } ) ).toEqual( '<p>test</p>' );
-	} );
-
 	it( 'should normalise the rel attribute', () => {
 		const input = '<a href="https://wordpress.org" target="_blank">WordPress</a>';
 		const output = '<a href="https://wordpress.org" target="_blank" rel="noreferrer noopener">WordPress</a>';

diff --git a/packages/blocks/src/api/raw-handling/test/utils.js b/packages/blocks/src/api/raw-handling/test/utils.js
@@ -186,6 +186,12 @@ describe( 'removeInvalidHTML', () => {
 		const output = '<p>test</p>test';
 		expect( removeInvalidHTML( input, schema ) ).toBe( output );
 	} );
+
+	it( 'should remove invalid phrasing content', () => {
+		const input = '<strong><p>test</p></strong>';
+		const output = '<p>test</p>';
+		expect( removeInvalidHTML( input, schema ) ).toEqual( output );
+	} );
 } );
 
 describe( 'getBlockContentSchema', () => {

diff --git a/packages/blocks/src/api/raw-handling/utils.js b/packages/blocks/src/api/raw-handling/utils.js
@@ -239,9 +239,21 @@ function cleanNodeList( nodeList, doc, schema, inline ) {
 						if ( require.length && ! node.querySelector( require.join( ',' ) ) ) {
 							cleanNodeList( node.childNodes, doc, schema, inline );
 							unwrap( node );
-						}
+						// If the node is at the top, phrasing content, and
+						// contains children that are block content, unwrap
+						// the node because it is invalid.
+						} else if (
+							node.parentNode.nodeName === 'BODY' &&
+							isPhrasingContent( node )
+						) {
+							cleanNodeList( node.childNodes, doc, schema, inline );
 
-						cleanNodeList( node.childNodes, doc, children, inline );
+							if ( Array.from( node.childNodes ).some( ( child ) => ! isPhrasingContent( child ) ) ) {
+								unwrap( node );
+							}
+						} else {
+							cleanNodeList( node.childNodes, doc, children, inline );
+						}
 					// Remove children if the node is not supposed to have any.
 					} else {
 						while ( node.firstChild ) {

diff --git a/test/integration/blocks-raw-handling.spec.js b/test/integration/blocks-raw-handling.spec.js
@@ -207,6 +207,7 @@ describe( 'Blocks raw handling', () => {
 			'classic',
 			'apple',
 			'google-docs',
+			'google-docs-table',
 			'ms-word',
 			'ms-word-styled',
 			'ms-word-online',

diff --git a/test/integration/fixtures/google-docs-table-in.html b/test/integration/fixtures/google-docs-table-in.html
@@ -0,0 +1 @@
+ <meta charset='utf-8'><meta charset="utf-8"><b style="font-weight:normal;" id="docs-internal-guid-7102d5c2-7fff-c8d1-1082-5abceee52545"><br /><div dir="ltr" style="margin-left:0pt;"><table style="border:none;border-collapse:collapse;width:451.27559055118115pt"><colgroup><col width="*" /><col width="*" /><col width="*" /></colgroup><tr style="height:3.75pt"><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;"><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:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">One</span></p></td><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;"><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:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Two</span></p></td><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;"><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:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">Three</span></p></td></tr><tr style="height:0pt"><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;"><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:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">1</span></p></td><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;"><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:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">2</span></p></td><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;"><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:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">3</span></p></td></tr><tr style="height:0pt"><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;"><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:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">I</span></p></td><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;"><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:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">II</span></p></td><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;"><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:400;font-style:normal;font-variant:normal;text-decoration:none;vertical-align:baseline;white-space:pre;white-space:pre-wrap;">III</span></p></td></tr></table></div></b>
diff --git a/test/integration/fixtures/google-docs-table-out.html b/test/integration/fixtures/google-docs-table-out.html
@@ -0,0 +1,3 @@
+<!-- wp:table -->
+<table class="wp-block-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>
+<!-- /wp:table -->