Keep track of user inserted line breaks

WordPress · Feb 20, 2019 · 6cd67e1 · 6cd67e1
1 parent e522e4d
commit 6cd67e1
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 28 deletions.
diff --git a/packages/editor/src/components/rich-text/index.js b/packages/editor/src/components/rich-text/index.js
@@ -165,6 +165,7 @@ export class RichText extends Component {
 			multilineTag: this.multilineTag,
 			multilineWrapperTags: this.multilineWrapperTags,
 			prepareEditableTree: this.props.prepareEditableTree,
+			isEditableTree: true,
 		} );
 	}
 

diff --git a/packages/rich-text/src/create.js b/packages/rich-text/src/create.js
@@ -108,6 +108,7 @@ export function create( {
 	range,
 	multilineTag,
 	multilineWrapperTags,
+	isEditableTree,
 } = {} ) {
 	if ( typeof text === 'string' && text.length > 0 ) {
 		return {
@@ -128,6 +129,7 @@ export function create( {
 		return createFromElement( {
 			element,
 			range,
+			isEditableTree,
 		} );
 	}
 
@@ -136,6 +138,7 @@ export function create( {
 		range,
 		multilineTag,
 		multilineWrapperTags,
+		isEditableTree,
 	} );
 }
 
@@ -257,6 +260,7 @@ function createFromElement( {
 	multilineTag,
 	multilineWrapperTags,
 	currentWrapperTags = [],
+	isEditableTree,
 } ) {
 	const accumulator = createEmptyValue();
 
@@ -291,7 +295,10 @@ function createFromElement( {
 			continue;
 		}
 
-		if ( node.getAttribute( 'data-rich-text-padding' ) ) {
+		if (
+			node.getAttribute( 'data-rich-text-padding' ) ||
+			( isEditableTree && type === 'br' && ! node.getAttribute( 'data-rich-text-line-break' ) )
+		) {
 			accumulateSelection( accumulator, node, range, createEmptyValue() );
 			continue;
 		}
@@ -433,31 +440,14 @@ function createFromMultilineElement( {
 			continue;
 		}
 
-		let value = createFromElement( {
+		const value = createFromElement( {
 			element: node,
 			range,
 			multilineTag,
 			multilineWrapperTags,
 			currentWrapperTags,
 		} );
 
-		// If a line consists of one single line break (invisible), consider the
-		// line empty, wether this is the browser's doing or not.
-		if ( value.text === '\n' ) {
-			const start = value.start;
-			const end = value.end;
-
-			value = createEmptyValue();
-
-			if ( start !== undefined ) {
-				value.start = 0;
-			}
-
-			if ( end !== undefined ) {
-				value.end = 0;
-			}
-		}
-
 		// Multiline value text should be separated by a double line break.
 		if ( index !== 0 || currentWrapperTags.length > 0 ) {
 			const formats = currentWrapperTags.length > 0 ? [ currentWrapperTags ] : [ , ];
@@ -495,7 +485,7 @@ function getAttributes( { element } ) {
 	for ( let i = 0; i < length; i++ ) {
 		const { name, value } = element.attributes[ i ];
 
-		if ( name === 'data-rich-text-format-boundary' ) {
+		if ( name.indexOf( 'data-rich-text-' ) === 0 ) {
 			continue;
 		}
 

diff --git a/packages/rich-text/src/test/__snapshots__/to-dom.js.snap b/packages/rich-text/src/test/__snapshots__/to-dom.js.snap
@@ -132,7 +132,9 @@ exports[`recordToDom should filter format boundary attributes 1`] = `
 exports[`recordToDom should handle br 1`] = `
 <body>
   
-  <br />
+  <br
+    data-rich-text-line-break="true"
+  />
   
   <br
     data-rich-text-padding="true"
@@ -146,7 +148,9 @@ exports[`recordToDom should handle br with formatting 1`] = `
     data-rich-text-format-boundary="true"
   >
     
-    <br />
+    <br
+      data-rich-text-line-break="true"
+    />
     
   </em>
   
@@ -159,17 +163,23 @@ exports[`recordToDom should handle br with formatting 1`] = `
 exports[`recordToDom should handle br with text 1`] = `
 <body>
   te
-  <br />
+  <br
+    data-rich-text-line-break="true"
+  />
   st
 </body>
 `;
 
 exports[`recordToDom should handle double br 1`] = `
 <body>
   a
-  <br />
+  <br
+    data-rich-text-line-break="true"
+  />
   
-  <br />
+  <br
+    data-rich-text-line-break="true"
+  />
   b
 </body>
 `;
@@ -303,9 +313,13 @@ exports[`recordToDom should handle nested empty list value 1`] = `
 exports[`recordToDom should handle selection before br 1`] = `
 <body>
   a
-  <br />
+  <br
+    data-rich-text-line-break="true"
+  />
   
-  <br />
+  <br
+    data-rich-text-line-break="true"
+  />
   b
 </body>
 `;

diff --git a/packages/rich-text/src/to-tree.js b/packages/rich-text/src/to-tree.js
@@ -242,7 +242,13 @@ export function toTree( {
 
 		if ( character !== OBJECT_REPLACEMENT_CHARACTER ) {
 			if ( character === '\n' ) {
-				pointer = append( getParent( pointer ), { type: 'br', object: true } );
+				pointer = append( getParent( pointer ), {
+					type: 'br',
+					attributes: isEditableTree ? {
+						'data-rich-text-line-break': 'true',
+					} : undefined,
+					object: true,
+				} );
 				// Ensure pointer is text node.
 				pointer = append( getParent( pointer ), '' );
 			} else if ( ! isText( pointer ) ) {