fix(dom-to-react): trim whitespaces if it is not valid in parent

Author: vidhu

lib/dom-to-react.js

@@ -3,6 +3,7 @@ var attributesToProps = require('./attributes-to-props');
 var utilities = require('./utilities');
 
 var setStyleProp = utilities.setStyleProp;
+var canTextBeChildOfNode = utilities.canTextBeChildOfNode;
 
 /**
  * Converts DOM nodes to JSX element(s).
@@ -23,11 +24,11 @@ function domToReact(nodes, options) {
 
   var result = [];
   var node;
+  var isWhitespace;
   var hasReplace = typeof options.replace === 'function';
   var replaceElement;
   var props;
   var children;
-  var data;
   var trim = options.trim;
 
   for (var i = 0, len = nodes.length; i < len; i++) {
@@ -51,15 +52,23 @@ function domToReact(nodes, options) {
     }
 
     if (node.type === 'text') {
-      // if trim option is enabled, skip whitespace text nodes
-      if (trim) {
-        data = node.data.trim();
-        if (data) {
-          result.push(node.data);
-        }
-      } else {
-        result.push(node.data);
+      isWhitespace = !node.data.trim().length;
+
+      if (isWhitespace && node.parent && !canTextBeChildOfNode(node.parent)) {
+        // We have a whitespace node that can't be nested in it's parent
+        // so skip it
+        continue;
       }
+
+      if (trim && isWhitespace) {
+        // Trim is enabled and we have a whitespace node
+        // so skip it
+        continue;
+      }
+
+      // We have a text node thats not whitespace and it can be nested
+      // in its parent so add it to the results
+      result.push(node.data);
       continue;
     }
 

lib/utilities.js

@@ -96,9 +96,34 @@ function setStyleProp(style, props) {
  */
 var PRESERVE_CUSTOM_ATTRIBUTES = React.version.split('.')[0] >= 16;
 
+// Taken from
+// https://github.com/facebook/react/blob/cae635054e17a6f107a39d328649137b83f25972/packages/react-dom/src/client/validateDOMNesting.js#L213
+var elementsWithNoTextChildren = new Set([
+  'tr',
+  'tbody',
+  'thead',
+  'tfoot',
+  'colgroup',
+  'table',
+  'head',
+  'html',
+  'frameset',
+  '#document'
+]);
+
+/**
+ * Returns True if the the given node can contains text nodes
+ * @param {DomElement} node
+ * @returns {boolean}
+ */
+function canTextBeChildOfNode(node) {
+  return !elementsWithNoTextChildren.has(node.name);
+}
+
 module.exports = {
   PRESERVE_CUSTOM_ATTRIBUTES: PRESERVE_CUSTOM_ATTRIBUTES,
   invertObject: invertObject,
   isCustomComponent: isCustomComponent,
-  setStyleProp: setStyleProp
+  setStyleProp: setStyleProp,
+  canTextBeChildOfNode: canTextBeChildOfNode
 };

test/index.test.js

@@ -138,13 +138,16 @@ describe('htmlparser2 option', () => {
 });
 
 describe('trim option', () => {
-  it('preserves whitespace text nodes when disabled (default)', () => {
+  it('preserves whitespace text nodes when disabled if valid in parent (default)', () => {
     const html = `<table>
   <tbody>
+    <tr><td>\n</td>\t</tr>\r
   </tbody>
 </table>`;
     const reactElement = parse(html);
-    expect(render(reactElement)).toBe(html);
+    expect(render(reactElement)).toBe(
+      '<table><tbody><tr><td>\n</td></tr></tbody></table>'
+    );
   });
 
   it('removes whitespace text nodes when enabled', () => {