From 2a373339cdce7909a05ec52c53d06d4bd17fe0f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ella=20Van=C2=A0Durpe?= <iseulde@automattic.com>
Date: Wed, 20 Feb 2019 14:12:27 +0100
Subject: [PATCH] Fix character newlines in pre (#13799)

* Fix character newlines in pre

* Add e2e test
---
 .../block-library/src/preformatted/index.js   |  2 +-
 .../__snapshots__/preformatted.test.js.snap   | 14 ++++++++
 .../specs/blocks/preformatted.test.js         | 35 +++++++++++++++++++
 3 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 packages/e2e-tests/specs/blocks/__snapshots__/preformatted.test.js.snap
 create mode 100644 packages/e2e-tests/specs/blocks/preformatted.test.js

diff --git a/packages/block-library/src/preformatted/index.js b/packages/block-library/src/preformatted/index.js
index f0ee53a942221e..25144b04abcfe8 100644
--- a/packages/block-library/src/preformatted/index.js
+++ b/packages/block-library/src/preformatted/index.js
@@ -68,7 +68,7 @@ export const settings = {
 		return (
 			<RichText
 				tagName="pre"
-				value={ content }
+				value={ content.replace( /\n/g, '<br>' ) }
 				onChange={ ( nextContent ) => {
 					setAttributes( {
 						content: nextContent,
diff --git a/packages/e2e-tests/specs/blocks/__snapshots__/preformatted.test.js.snap b/packages/e2e-tests/specs/blocks/__snapshots__/preformatted.test.js.snap
new file mode 100644
index 00000000000000..4538816e15b411
--- /dev/null
+++ b/packages/e2e-tests/specs/blocks/__snapshots__/preformatted.test.js.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Preformatted should preserve character newlines 1`] = `
+"<!-- wp:html -->
+<pre>1
+2</pre>
+<!-- /wp:html -->"
+`;
+
+exports[`Preformatted should preserve character newlines 2`] = `
+"<!-- wp:preformatted -->
+<pre class=\\"wp-block-preformatted\\">0<br>1<br>2</pre>
+<!-- /wp:preformatted -->"
+`;
diff --git a/packages/e2e-tests/specs/blocks/preformatted.test.js b/packages/e2e-tests/specs/blocks/preformatted.test.js
new file mode 100644
index 00000000000000..3397c9f75f68d5
--- /dev/null
+++ b/packages/e2e-tests/specs/blocks/preformatted.test.js
@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	getEditedPostContent,
+	createNewPost,
+	insertBlock,
+	clickButton,
+} from '@wordpress/e2e-test-utils';
+
+describe( 'Preformatted', () => {
+	beforeEach( async () => {
+		await createNewPost();
+	} );
+
+	it( 'should preserve character newlines', async () => {
+		await insertBlock( 'Custom HTML' );
+		await page.keyboard.type( '<pre>1' );
+		await page.keyboard.press( 'Enter' );
+		await page.keyboard.type( '2</pre>' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+
+		await page.keyboard.press( 'Escape' );
+		await page.click( 'button[aria-label="More options"]' );
+		await clickButton( 'Convert to Blocks' );
+		// Once it's edited, it should be saved as BR tags.
+		await page.keyboard.type( '0' );
+		await page.keyboard.press( 'Enter' );
+		await page.click( 'button[aria-label="More options"]' );
+		await clickButton( 'Edit as HTML' );
+
+		expect( await getEditedPostContent() ).toMatchSnapshot();
+	} );
+} );