Preformatted: save line breaks as characters (#14653)

* Preformatted: save line breaks as characters

* Update e2e test

Author: ellatrix

packages/block-library/src/preformatted/index.js

@@ -68,10 +68,14 @@ export const settings = {
 		return (
 			<RichText
 				tagName="pre"
+				// Ensure line breaks are normalised to HTML.
 				value={ content.replace( /\n/g, '<br>' ) }
 				onChange={ ( nextContent ) => {
 					setAttributes( {
-						content: nextContent,
+						// Ensure line breaks are normalised to characters. This
+						// saves space, is easier to read, and ensures display
+						// filters work correctly.
+						content: nextContent.replace( /<br ?\/?>/g, '\n' ),
 					} );
 				} }
 				placeholder={ __( 'Write preformatted text…' ) }

packages/e2e-tests/specs/__snapshots__/adding-blocks.test.js.snap

@@ -42,7 +42,9 @@ exports[`adding blocks Should insert content using the placeholder and the regul
 <!-- /wp:quote -->
 
 <!-- wp:preformatted -->
-<pre class=\\"wp-block-preformatted\\">Pre text<br><br>Foo</pre>
+<pre class=\\"wp-block-preformatted\\">Pre text
+
+Foo</pre>
 <!-- /wp:preformatted -->
 
 <!-- wp:shortcode -->

packages/e2e-tests/specs/blocks/__snapshots__/preformatted.test.js.snap

@@ -9,6 +9,8 @@ exports[`Preformatted should preserve character newlines 1`] = `
 
 exports[`Preformatted should preserve character newlines 2`] = `
 "<!-- wp:preformatted -->
-<pre class=\\"wp-block-preformatted\\">0<br>1<br>2</pre>
+<pre class=\\"wp-block-preformatted\\">0
+1
+2</pre>
 <!-- /wp:preformatted -->"
 `;