Restore stripping white space when parsing HTML

packages/block-editor/src/components/rich-text/README.md

@@ -69,6 +69,12 @@ _Optional._ Whether to show the input is selected or not in order to show the fo
 
 _Optional._ A list of autocompleters to use instead of the default.
 
+### `preserveWhiteSpace: Boolean`
+
+_Optional._ Whether or not to preserve white space characters in the `value`.
+Normally tab, newline and space characters are collapsed to a single space or
+trimmed.
+
 ## RichText.Content
 
 `RichText.Content` should be used in the `save` function of your block to correctly save rich text content.

packages/block-editor/src/components/rich-text/index.js

@@ -103,6 +103,7 @@ export function RichTextWrapper(
  __unstableOnSplitAtEnd: onSplitAtEnd,
  __unstableOnSplitAtDoubleLineEnd: onSplitAtDoubleLineEnd,
  identifier,
+ preserveWhiteSpace,
  __unstablePastePlainText: pastePlainText,
  __unstableEmbedURLOnPaste,
  __unstableDisableFormats: disableFormats,
@@ -261,6 +262,7 @@ export function RichTextWrapper(
  placeholder,
  __unstableIsSelected: isSelected,
  __unstableDisableFormats: disableFormats,
+ preserveWhiteSpace,
  __unstableDependencies: [ ...dependencies, tagName ],
  __unstableAfterParse: addEditorOnlyFormats,
  __unstableBeforeSerialize: removeEditorOnlyFormats,

packages/block-library/src/code/block.json

@@ -10,7 +10,8 @@
  "content": {
  "type": "string",
  "source": "html",
- "selector": "code"
+ "selector": "code",
+ "__unstablePreserveWhiteSpace": true
  }
  },
  "supports": {

packages/block-library/src/code/edit.js

@@ -24,6 +24,7 @@ export default function CodeEdit( {
  onMerge={ mergeBlocks }
  placeholder={ __( 'Write code…' ) }
  aria-label={ __( 'Code' ) }
+ preserveWhiteSpace
  __unstablePastePlainText
  __unstableOnSplitAtDoubleLineEnd={ () =>
  insertBlocksAfter( createBlock( getDefaultBlockName() ) )

packages/block-library/src/preformatted/block.json

@@ -12,6 +12,7 @@
  "source": "html",
  "selector": "pre",
  "default": "",
+ "__unstablePreserveWhiteSpace": true,
  "__experimentalRole": "content"
  }
  },

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

@@ -20,6 +20,7 @@ export default function PreformattedEdit( {
  <RichText
  tagName="pre"
  identifier="content"
+ preserveWhiteSpace
  value={ content }
  onChange={ ( nextContent ) => {
  setAttributes( {

packages/block-library/src/verse/block.json

@@ -13,6 +13,7 @@
  "source": "html",
  "selector": "pre",
  "default": "",
+ "__unstablePreserveWhiteSpace": true,
  "__experimentalRole": "content"
  },
  "textAlign": {

packages/block-library/src/verse/edit.js

@@ -44,6 +44,7 @@ export default function VerseEdit( {
  <RichText
  tagName="pre"
  identifier="content"
+ preserveWhiteSpace
  value={ content }
  onChange={ ( nextContent ) => {
  setAttributes( {

packages/rich-text/README.md

@@ -174,6 +174,7 @@ _Parameters_
 - _$1.text_ `[string]`: Text to create value from.
 - _$1.html_ `[string]`: HTML to create value from.
 - _$1.range_ `[Range]`: Range to create value from.
+- _$1.preserveWhiteSpace_ `[boolean]`: Whether or not to collapse white space characters.
 - _$1.\_\_unstableIsEditableTree_ `[boolean]`:
 
 _Returns_

packages/rich-text/src/component/index.js

@@ -26,6 +26,7 @@ export function useRichText( {
  selectionEnd,
  placeholder,
  onSelectionChange,
+ preserveWhiteSpace,
  onChange,
  __unstableDisableFormats: disableFormats,
  __unstableIsSelected: isSelected,
@@ -69,7 +70,7 @@ export function useRichText( {
 
  function setRecordFromProps() {
  _value.current = value;
- record.current = create( { html: value } );
+ record.current = create( { html: value, preserveWhiteSpace } );
  if ( disableFormats ) {
  record.current.formats = Array( value.length );
  record.current.replacements = Array( value.length );

packages/rich-text/src/create.js

@@ -135,6 +135,8 @@ function toFormat( { tagName, attributes } ) {
  * @param {string} [$1.text] Text to create value from.
  * @param {string} [$1.html] HTML to create value from.
  * @param {Range} [$1.range] Range to create value from.
+ * @param {boolean} [$1.preserveWhiteSpace] Whether or not to collapse
+ * white space characters.
  * @param {boolean} [$1.__unstableIsEditableTree]
  *
  * @return {RichTextValue} A rich text value.
@@ -145,6 +147,7 @@ export function create( {
  html,
  range,
  __unstableIsEditableTree: isEditableTree,
+ preserveWhiteSpace,
 } = {} ) {
  if ( typeof text === 'string' && text.length > 0 ) {
  return {
@@ -155,6 +158,7 @@ export function create( {
  }
 
  if ( typeof html === 'string' && html.length > 0 ) {
+ html = preserveWhiteSpace ? html : collapseWhiteSpace( html );
  // It does not matter which document this is, we're just using it to
  // parse.
  element = createElement( document, html );
@@ -264,6 +268,24 @@ function filterRange( node, range, filter ) {
  return { startContainer, startOffset, endContainer, endOffset };
 }
 
+/**
+ * Collapse any whitespace used for HTML formatting to one space character,
+ * because it will also be displayed as such by the browser.
+ *
+ * We need to strip it from the content because we use white-space: pre-wrap for
+ * displaying editable rich text. Without using white-space: pre-wrap, the
+ * browser will litter the content with non breaking spaces, among other issues.
+ * See packages/rich-text/src/component/use-default-style.js.
+ *
+ * @see
+ * https://developer.mozilla.org/en-US/docs/Web/CSS/white-space-collapse#collapsing_of_white_space
+ *
+ * @param {string} string
+ */
+function collapseWhiteSpace( string ) {
+ return string.replace( /[ \n\r\t]+/g, ' ' ).replace( /^ | $/g, '' );
+}
+
 /**
  * Removes reserved characters used by rich-text (zero width non breaking spaces added by `toTree` and object replacement characters).
  *