html-react-parser 1.4.3 → 1.4.7

package/README.md

@@ -50,7 +50,6 @@ parse('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')
   - [Parser throws an error](#parser-throws-an-error)
   - [Is SSR supported?](#is-ssr-supported)
   - [Elements aren't nested correctly](#elements-arent-nested-correctly)
-  - [Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of table](#warning-validatedomnesting-whitespace-text-nodes-cannot-appear-as-a-child-of-table)
   - [Don't change case of tags](#dont-change-case-of-tags)
   - [TS Error: Property 'attribs' does not exist on type 'DOMNode'](#ts-error-property-attribs-does-not-exist-on-type-domnode)
   - [Can I enable `trim` for certain elements?](#can-i-enable-trim-for-certain-elements)
@@ -351,16 +350,16 @@ By default, whitespace is preserved:
 parse('<br>\n'); // [React.createElement('br'), '\n']
 ```
 
-To remove whitespace, enable the `trim` option:
+But certain elements like `<table>` will strip out invalid whitespace:
 
 ```js
-parse('<br>\n', { trim: true }); // React.createElement('br')
+parse('<table>\n</table>'); // React.createElement('table')
 ```
 
-This fixes the warning:
+To remove whitespace, enable the `trim` option:
 
-```
-Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of <table>. Make sure you don't have any extra whitespace between tags on each line of your source code.
+```js
+parse('<br>\n', { trim: true }); // React.createElement('br')
 ```
 
 However, intentional whitespace may be stripped out:
@@ -427,10 +426,6 @@ parse('<div /><div />'); // returns single element instead of array of elements
 
 See [#158](https://github.com/remarkablemark/html-react-parser/issues/158).
 
-### Warning: validateDOMNesting(...): Whitespace text nodes cannot appear as a child of table
-
-Enable the [trim](#trim) option. See [#155](https://github.com/remarkablemark/html-react-parser/issues/155).
-
 ### Don't change case of tags
 
 Tags are lowercased by default. To prevent that from happening, pass the [htmlparser2 option](#htmlparser2):

package/dist/html-react-parser.js

@@ -1279,11 +1279,37 @@
 	 */
 	var PRESERVE_CUSTOM_ATTRIBUTES = React$1.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'
+	]);
+
+	/**
+	 * Checks if the given node can contain text nodes
+	 *
+	 * @param {DomElement} node
+	 * @returns {boolean}
+	 */
+	function canTextBeChildOfNode$1(node) {
+	  return !elementsWithNoTextChildren.has(node.name);
+	}
+
 	var utilities$3 = {
 	  PRESERVE_CUSTOM_ATTRIBUTES: PRESERVE_CUSTOM_ATTRIBUTES,
 	  invertObject: invertObject,
 	  isCustomComponent: isCustomComponent,
-	  setStyleProp: setStyleProp$1
+	  setStyleProp: setStyleProp$1,
+	  canTextBeChildOfNode: canTextBeChildOfNode$1,
+	  elementsWithNoTextChildren: elementsWithNoTextChildren
 	};
 
 	var reactProperty = lib$1;
@@ -1298,12 +1324,18 @@
 	var attributesToProps$2 = function attributesToProps(attributes) {
 	  attributes = attributes || {};
 
+	  var valueOnlyInputs = {
+	    reset: true,
+	    submit: true
+	  };
+
 	  var attributeName;
 	  var attributeNameLowerCased;
 	  var attributeValue;
 	  var propName;
 	  var propertyInfo;
 	  var props = {};
+	  var inputIsValueOnly = attributes.type && valueOnlyInputs[attributes.type];
 
 	  for (attributeName in attributes) {
 	    attributeValue = attributes[attributeName];
@@ -1323,7 +1355,10 @@
 
 	      // convert attribute to uncontrolled component prop (e.g., `value` to `defaultValue`)
 	      // https://reactjs.org/docs/uncontrolled-components.html
-	      if (propName === 'checked' || propName === 'value') {
+	      if (
+	        (propName === 'checked' || propName === 'value') &&
+	        !inputIsValueOnly
+	      ) {
 	        propName = getPropName('default' + attributeNameLowerCased);
 	      }
 
@@ -1369,6 +1404,7 @@
 	var utilities$1 = utilities$3;
 
 	var setStyleProp = utilities$1.setStyleProp;
+	var canTextBeChildOfNode = utilities$1.canTextBeChildOfNode;
 
 	/**
 	 * Converts DOM nodes to JSX element(s).
@@ -1389,11 +1425,11 @@
 
 	  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++) {
@@ -1417,15 +1453,23 @@
 	    }
 
 	    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 its 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 that's not whitespace and it can be nested
+	      // in its parent so add it to the results
+	      result.push(node.data);
 	      continue;
 	    }