Paste: apply active formats when pasting inline

WordPress · Dec 11, 2019 · 72cb5ad · 72cb5ad
1 parent 989132f
commit 72cb5ad
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 2 deletions.
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
@@ -122,7 +122,7 @@ class RichTextWrapper extends Component {
 		}
 	}
 
-	onPaste( { value, onChange, html, plainText, files } ) {
+	onPaste( { value, onChange, html, plainText, files, activeFormats } ) {
 		const {
 			onReplace,
 			onSplit,
@@ -175,6 +175,18 @@ class RichTextWrapper extends Component {
 		if ( typeof content === 'string' ) {
 			let valueToInsert = create( { html: content } );
 
+			// If there are active formats, merge them with the pasted formats.
+			if ( activeFormats.length ) {
+				let index = valueToInsert.formats.length;
+
+				while ( index-- ) {
+					valueToInsert.formats[ index ] = [
+						...activeFormats,
+						...( valueToInsert.formats[ index ] || [] ),
+					];
+				}
+			}
+
 			// If the content should be multiline, we should process text
 			// separated by a line break as separate lines.
 			if ( multiline ) {

diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/rich-text.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/rich-text.test.js.snap
@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`RichText should apply active formatting for inline paste 1`] = `
+"<!-- wp:paragraph -->
+<p><strong>132</strong>3</p>
+<!-- /wp:paragraph -->"
+`;
+
 exports[`RichText should apply formatting when selection is collapsed 1`] = `
 "<!-- wp:paragraph -->
 <p>Some <strong>bold</strong>.</p>

diff --git a/packages/e2e-tests/specs/editor/various/rich-text.test.js b/packages/e2e-tests/specs/editor/various/rich-text.test.js
@@ -336,4 +336,21 @@ describe( 'RichText', () => {
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	it( 'should apply active formatting for inline paste', async () => {
+		await clickBlockAppender();
+		await pressKeyWithModifier( 'primary', 'b' );
+		await page.keyboard.type( '1' );
+		await page.keyboard.type( '2' );
+		await pressKeyWithModifier( 'primary', 'b' );
+		await page.keyboard.type( '3' );
+		await pressKeyWithModifier( 'shift', 'ArrowLeft' );
+		await pressKeyWithModifier( 'primary', 'c' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await page.keyboard.press( 'ArrowLeft' );
+		await pressKeyWithModifier( 'primary', 'v' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
 } );
diff --git a/packages/rich-text/src/component/index.js b/packages/rich-text/src/component/index.js
@@ -249,6 +249,7 @@ class RichText extends Component {
 			onPaste,
 			__unstableIsSelected: isSelected,
 		} = this.props;
+		const { activeFormats = [] } = this.state;
 
 		if ( ! isSelected ) {
 			event.preventDefault();
@@ -331,6 +332,7 @@ class RichText extends Component {
 				html,
 				plainText,
 				files,
+				activeFormats,
 			} );
 		}
 	}
@@ -421,7 +423,7 @@ class RichText extends Component {
 			inputType = event.inputType;
 		}
 
-		if ( ! inputType ) {
+		if ( ! inputType && event && event.nativeEvent ) {
 			inputType = event.nativeEvent.inputType;
 		}