Rich text: copy tag name on internal paste

packages/block-editor/src/components/rich-text/use-paste-handler.js

@@ -8,6 +8,9 @@ import {
 	pasteHandler,
 	findTransform,
 	getBlockTransforms,
+	htmlToBlocks,
+	hasBlockSupport,
+	getBlockContent,
 } from '@wordpress/blocks';
 import {
 	isEmpty,
@@ -44,6 +47,15 @@ function adjustLines( value, isMultiline ) {
 	return replace( value, new RegExp( LINE_SEPARATOR, 'g' ), '\n' );
 }
 
+function maybeInline( blocks, mode ) {
+	if ( mode !== 'AUTO' ) return blocks;
+	if ( blocks.length !== 1 ) return blocks;
+	const [ block ] = blocks;
+	if ( ! hasBlockSupport( block.name, '__unstablePasteTextInline', false ) )
+		return blocks;
+	return getBlockContent( block );
+}
+
 export function usePasteHandler( props ) {
 	const propsRef = useRef( props );
 	propsRef.current = props;
@@ -129,29 +141,6 @@ export function usePasteHandler( props ) {
 			}
 
 			const files = [ ...getFilesFromDataTransfer( clipboardData ) ];
-			const isInternal = clipboardData.getData( 'rich-text' ) === 'true';
-
-			// If the data comes from a rich text instance, we can directly use it
-			// without filtering the data. The filters are only meant for externally
-			// pasted content and remove inline styles.
-			if ( isInternal ) {
-				const pastedMultilineTag =
-					clipboardData.getData( 'rich-text-multi-line-tag' ) ||
-					undefined;
-				let pastedValue = create( {
-					html,
-					multilineTag: pastedMultilineTag,
-					multilineWrapperTags:
-						pastedMultilineTag === 'li'
-							? [ 'ul', 'ol' ]
-							: undefined,
-					preserveWhiteSpace,
-				} );
-				pastedValue = adjustLines( pastedValue, !! multilineTag );
-				addActiveFormats( pastedValue, value.activeFormats );
-				onChange( insert( value, pastedValue ) );
-				return;
-			}
 
 			if ( pastePlainText ) {
 				onChange( insert( value, create( { text: plainText } ) ) );
@@ -232,13 +221,19 @@ export function usePasteHandler( props ) {
 				mode = 'BLOCKS';
 			}
 
-			const content = pasteHandler( {
-				HTML: html,
-				plainText,
-				mode,
-				tagName,
-				preserveWhiteSpace,
-			} );
+			// If the data comes from a rich text instance, we can directly use it
+			// without filtering the data. The filters are only meant for externally
+			// pasted content and remove inline styles.
+			const isInternal = !! clipboardData.getData( 'rich-text' );
+			const content = isInternal
+				? maybeInline( htmlToBlocks( html ), mode )
+				: pasteHandler( {
+						HTML: html,
+						plainText,
+						mode,
+						tagName,
+						preserveWhiteSpace,
+				  } );
 
 			if ( typeof content === 'string' ) {
 				let valueToInsert = create( { html: content } );

packages/blocks/README.md

@@ -324,6 +324,19 @@ _Returns_
 
 -   `boolean`: True if a block contains at least one child blocks with inserter support and false otherwise.
 
+### htmlToBlocks
+
+Converts HTML directly to blocks. Looks for a matching transform for each top-level tag. The HTML should be filtered to not have any text between top-level tags and formatted in a way that blocks can handle the HTML.
+
+_Parameters_
+
+-   _html_ `string`: HTML to convert.
+-   _handler_ `Function`: The handler calling htmlToBlocks: either rawHandler or pasteHandler.
+
+_Returns_
+
+-   `Array`: An array of blocks.
+
 ### isReusableBlock
 
 Determines whether or not the given block is a reusable block. This is a special block type that is used to point to a global block stored via the API.

packages/blocks/src/api/index.js

@@ -47,6 +47,7 @@ export {
 export {
 	pasteHandler,
 	rawHandler,
+	htmlToBlocks,
 	deprecatedGetPhrasingContentSchema as getPhrasingContentSchema,
 } from './raw-handling';
 

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

@@ -18,6 +18,7 @@ import shortcodeConverter from './shortcode-converter';
 import { deepFilterHTML, getBlockContentSchema } from './utils';
 
 export { pasteHandler } from './paste-handler';
+export { htmlToBlocks } from './html-to-blocks';
 
 export function deprecatedGetPhrasingContentSchema( context ) {
 	deprecated( 'wp.blocks.getPhrasingContentSchema', {

packages/e2e-tests/specs/editor/various/__snapshots__/rich-text.test.js.snap

@@ -24,6 +24,16 @@ exports[`RichText should apply multiple formats when selection is collapsed 1`]
 <!-- /wp:paragraph -->"
 `;
 
+exports[`RichText should copy/paste heading 1`] = `
+"<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\">Heading</h2>
+<!-- /wp:heading -->
+
+<!-- wp:heading -->
+<h2 class=\\"wp-block-heading\\">Heading</h2>
+<!-- /wp:heading -->"
+`;
+
 exports[`RichText should handle Home and End keys 1`] = `
 "<!-- wp:paragraph -->
 <p>-<strong>12</strong>+</p>

packages/e2e-tests/specs/editor/various/rich-text.test.js

@@ -347,7 +347,7 @@
 		await page.keyboard.press( 'ArrowLeft' );
 		await pressKeyWithModifier( 'primary', 'v' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
 	it( 'should not split rich text on inline paste with formatting', async () => {
@@ -363,7 +363,7 @@
 		await page.keyboard.press( 'ArrowLeft' );
 		await pressKeyWithModifier( 'primary', 'v' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
 	it( 'should make bold after split and merge', async () => {
@@ -391,7 +391,7 @@
 		await page.keyboard.press( 'ArrowLeft' );
 		await pressKeyWithModifier( 'primary', 'v' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
 	it( 'should preserve internal formatting', async () => {
@@ -442,7 +442,7 @@
 		// Paste the colored text.
 		await pressKeyWithModifier( 'primary', 'v' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
 	it( 'should paste paragraph contents into list', async () => {
@@ -467,7 +467,7 @@
 		// Paste paragraph contents.
 		await pressKeyWithModifier( 'primary', 'v' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
 	it( 'should paste list contents into paragraph', async () => {
@@ -556,4 +556,15 @@
 		// Expect: <strong>1</strong>-<em>2</em>
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	test( 'should copy/paste heading', async () => {
+		await insertBlock( 'Heading' );
+		await page.keyboard.type( 'Heading' );
+		await pressKeyWithModifier( 'primary', 'a' );
+		await pressKeyWithModifier( 'primary', 'c' );
+		await page.keyboard.press( 'ArrowRight' );
+		await page.keyboard.press( 'Enter' );
+		await pressKeyWithModifier( 'primary', 'v' );
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );

packages/rich-text/src/component/use-copy-handler.js

@@ -29,18 +29,18 @@ export function useCopyHandler( props ) {
 
 			const selectedRecord = slice( record.current );
 			const plainText = getTextContent( selectedRecord );
+			const tagName = element.tagName.toLowerCase();
 			const html = toHTMLString( {
 				value: selectedRecord,
 				multilineTag,
 				preserveWhiteSpace,
 			} );
 			event.clipboardData.setData( 'text/plain', plainText );
-			event.clipboardData.setData( 'text/html', html );
-			event.clipboardData.setData( 'rich-text', 'true' );
 			event.clipboardData.setData(
-				'rich-text-multi-line-tag',
-				multilineTag || ''
+				'text/html',
+				`<${ tagName }>${ html }</${ tagName }>`
 			);
+			event.clipboardData.setData( 'rich-text', 'true' );
 			event.preventDefault();
 
 			if ( event.type === 'cut' ) {