Raw Handling: Fix grok markdown pasting issues (#73019)

Co-authored-by: annezazu <[email protected]>
Co-authored-by: ellatrix <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: mcsf <[email protected]>
Co-authored-by: youknowriad <[email protected]>

Author: 5 people

packages/blocks/src/api/raw-handling/test/utils.js

@@ -30,6 +30,36 @@ describe( 'isPlain', () => {
 		expect( isPlain( '<strong>test<br></strong>' ) ).toBe( false );
 		expect( isPlain( 'test<br-custom>test' ) ).toBe( false );
 	} );
+
+	it( 'should return true for single non-semantic wrapper elements with only text', () => {
+		expect( isPlain( '<span>test</span>' ) ).toBe( true );
+	} );
+
+	it( 'should return true for single wrapper with styled content but no semantic tags', () => {
+		expect( isPlain( '<span style="color: red;">test</span>' ) ).toBe(
+			true
+		);
+	} );
+
+	it( 'should return true for single wrapper with line breaks', () => {
+		expect( isPlain( '<span>test<br>test</span>' ) ).toBe( true );
+	} );
+
+	it( 'should return false for wrapper with semantic child elements', () => {
+		expect( isPlain( '<div><strong>test</strong></div>' ) ).toBe( false );
+		expect( isPlain( '<span><em>test</em></span>' ) ).toBe( false );
+		expect( isPlain( '<p>Some <a href="#">link</a></p>' ) ).toBe( false );
+	} );
+
+	it( 'should return false for multiple wrapper elements', () => {
+		expect( isPlain( '<span>test</span><span>test</span>' ) ).toBe( false );
+	} );
+
+	it( 'should return false for semantic wrapper elements', () => {
+		expect( isPlain( '<h1>test</h1>' ) ).toBe( false );
+		expect( isPlain( '<ul><li>test</li></ul>' ) ).toBe( false );
+		expect( isPlain( '<article>test</article>' ) ).toBe( false );
+	} );
 } );
 
 describe( 'getBlockContentSchema', () => {

packages/blocks/src/api/raw-handling/utils.js

@@ -113,14 +113,39 @@ export function getBlockContentSchema( context ) {
 
 /**
  * Checks whether HTML can be considered plain text. That is, it does not contain
- * any elements that are not line breaks.
+ * any elements that are not line breaks, or it only contains a single non-semantic
+ * wrapper element (span) with no semantic child elements.
  *
  * @param {string} HTML The HTML to check.
  *
  * @return {boolean} Whether the HTML can be considered plain text.
  */
 export function isPlain( HTML ) {
-	return ! /<(?!br[ />])/i.test( HTML );
+	if ( ! /<(?!br[ />])/i.test( HTML ) ) {
+		return true;
+	}
+
+	const doc = document.implementation.createHTMLDocument( '' );
+	doc.body.innerHTML = HTML;
+
+	if ( doc.body.children.length !== 1 ) {
+		return false;
+	}
+
+	const wrapper = doc.body.children.item( 0 );
+
+	const descendants = wrapper.getElementsByTagName( '*' );
+	for ( let i = 0; i < descendants.length; i++ ) {
+		if ( descendants.item( i ).tagName !== 'BR' ) {
+			return false;
+		}
+	}
+
+	if ( wrapper.tagName !== 'SPAN' ) {
+		return false;
+	}
+
+	return true;
 }
 
 /**

test/integration/__snapshots__/blocks-raw-handling.test.js.snap

@@ -20,6 +20,8 @@ exports[`Blocks raw handling pasteHandler google-docs-table-with-rowspan 1`] = `
 
 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 grok-markdown 1`] = `"Heading<br>This is a paragraph with <strong>bold text</strong> and <em>italic text</em>.<br>Subheading<br>Another paragraph with a <a href="https://example.com">link</a>."`;
+
 exports[`Blocks raw handling pasteHandler gutenberg 1`] = `"Test"`;
 
 exports[`Blocks raw handling pasteHandler iframe-embed 1`] = `""`;

test/integration/blocks-raw-handling.test.js

@@ -419,6 +419,7 @@ describe( 'Blocks raw handling', () => {
 			'one-image',
 			'two-images',
 			'markdown',
+			'grok-markdown',
 			'wordpress',
 			'gutenberg',
 			'shortcode-matching',

test/integration/fixtures/documents/grok-markdown-in.html

@@ -0,0 +1,7 @@
+<span style="font-family: system-ui, -apple-system, sans-serif; font-size: 14px;"># Heading
+
+This is a paragraph with **bold text** and *italic text*.
+
+## Subheading
+
+Another paragraph with a [link](https://example.com).</span>

test/integration/fixtures/documents/grok-markdown-in.txt

@@ -0,0 +1,7 @@
+# Heading
+
+This is a paragraph with **bold text** and *italic text*.
+
+## Subheading
+
+Another paragraph with a [link](https://example.com).

test/integration/fixtures/documents/grok-markdown-out.html

@@ -0,0 +1,15 @@
+<!-- wp:heading {"level":1} -->
+<h1 class="wp-block-heading">Heading</h1>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>This is a paragraph with <strong>bold text</strong> and <em>italic text</em>.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Subheading</h2>
+<!-- /wp:heading -->
+
+<!-- wp:paragraph -->
+<p>Another paragraph with a <a href="https://example.com">link</a>.</p>
+<!-- /wp:paragraph -->