Code block: preserve indentation on paste (#26347)

WordPress · Oct 22, 2020 · 01000c4 · 01000c4
1 parent d5f194f
commit 01000c4
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 5 deletions.
diff --git a/packages/block-editor/src/components/rich-text/index.js b/packages/block-editor/src/components/rich-text/index.js
@@ -415,6 +415,7 @@ function RichTextWrapper(
 					HTML: filePasteHandler( files ),
 					mode: 'BLOCKS',
 					tagName,
+					preserveWhiteSpace,
 				} );
 
 				// Allows us to ask for this information when we get a report.
@@ -457,6 +458,7 @@ function RichTextWrapper(
 				plainText,
 				mode,
 				tagName,
+				preserveWhiteSpace,
 			} );
 
 			if ( typeof content === 'string' ) {
@@ -500,6 +502,7 @@ function RichTextWrapper(
 			splitValue,
 			__unstableEmbedURLOnPaste,
 			multiline,
+			preserveWhiteSpace,
 		]
 	);
 

diff --git a/packages/block-library/src/code/edit.js b/packages/block-library/src/code/edit.js
@@ -14,6 +14,7 @@ export default function CodeEdit( { attributes, setAttributes } ) {
 				onChange={ ( content ) => setAttributes( { content } ) }
 				placeholder={ __( 'Write code…' ) }
 				aria-label={ __( 'Code' ) }
+				preserveWhiteSpace
 			/>
 		</pre>
 	);

diff --git a/packages/blocks/README.md b/packages/blocks/README.md
@@ -624,6 +624,7 @@ _Parameters_
 -   _options.plainText_ `[string]`: Plain text version.
 -   _options.mode_ `[string]`: Handle content as blocks or inline content. _ 'AUTO': Decide based on the content passed. _ 'INLINE': Always handle as inline content, and return string. \* 'BLOCKS': Always handle as blocks, and return array of blocks.
 -   _options.tagName_ `[Array]`: The tag into which content will be inserted.
+-   _options.preserveWhiteSpace_ `[boolean]`: Whether or not to preserve consequent white space.
 
 _Returns_
 

diff --git a/packages/blocks/src/api/raw-handling/paste-handler.js b/packages/blocks/src/api/raw-handling/paste-handler.js
@@ -43,11 +43,12 @@ const { console } = window;
 /**
  * Filters HTML to only contain phrasing content.
  *
- * @param {string} HTML The HTML to filter.
+ * @param {string}  HTML The HTML to filter.
+ * @param {boolean} preserveWhiteSpace Whether or not to preserve consequent white space.
  *
  * @return {string} HTML only containing phrasing content.
  */
-function filterInlineHTML( HTML ) {
+function filterInlineHTML( HTML, preserveWhiteSpace ) {
 	HTML = deepFilterHTML( HTML, [
 		googleDocsUIDRemover,
 		phrasingContentReducer,
@@ -56,7 +57,10 @@ function filterInlineHTML( HTML ) {
 	HTML = removeInvalidHTML( HTML, getPhrasingContentSchema( 'paste' ), {
 		inline: true,
 	} );
-	HTML = deepFilterHTML( HTML, [ htmlFormattingRemover, brRemover ] );
+
+	if ( ! preserveWhiteSpace ) {
+		HTML = deepFilterHTML( HTML, [ htmlFormattingRemover, brRemover ] );
+	}
 
 	// Allows us to ask for this information when we get a report.
 	console.log( 'Processed inline HTML:\n\n', HTML );
@@ -132,6 +136,7 @@ function htmlToBlocks( { html, rawTransforms } ) {
  *                                      * 'INLINE': Always handle as inline content, and return string.
  *                                      * 'BLOCKS': Always handle as blocks, and return array of blocks.
  * @param {Array}   [options.tagName]   The tag into which content will be inserted.
+ * @param {boolean} [options.preserveWhiteSpace] Whether or not to preserve consequent white space.
  *
  * @return {Array|string} A list of blocks or a string, depending on `handlerMode`.
  */
@@ -140,6 +145,7 @@ export function pasteHandler( {
 	plainText = '',
 	mode = 'AUTO',
 	tagName,
+	preserveWhiteSpace,
 } ) {
 	// First of all, strip any meta tags.
 	HTML = HTML.replace( /<meta[^>]+>/g, '' );
@@ -196,7 +202,7 @@ export function pasteHandler( {
 	}
 
 	if ( mode === 'INLINE' ) {
-		return filterInlineHTML( HTML );
+		return filterInlineHTML( HTML, preserveWhiteSpace );
 	}
 
 	// An array of HTML strings and block objects. The blocks replace matched
@@ -213,7 +219,7 @@ export function pasteHandler( {
 		! hasShortcodes &&
 		isInlineContent( HTML, tagName )
 	) {
-		return filterInlineHTML( HTML );
+		return filterInlineHTML( HTML, preserveWhiteSpace );
 	}
 
 	const rawTransforms = getRawTransformations();