html-react-parser 1.4.2 → 1.4.6

package/README.md

@@ -25,7 +25,7 @@ const parse = require('html-react-parser');
 parse('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')
 ```
 
-[Repl.it](https://repl.it/@remarkablemark/html-react-parser) | [JSFiddle](https://jsfiddle.net/remarkablemark/7v86d800/) | [CodeSandbox](https://codesandbox.io/s/940pov1l4w) | [TypeScript](https://codesandbox.io/s/html-react-parser-z0kp6) | [Examples](https://github.com/remarkablemark/html-react-parser/tree/master/examples)
+[Replit](https://replit.com/@remarkablemark/html-react-parser) | [JSFiddle](https://jsfiddle.net/remarkablemark/7v86d800/) | [CodeSandbox](https://codesandbox.io/s/940pov1l4w) | [TypeScript](https://codesandbox.io/s/html-react-parser-z0kp6) | [Examples](https://github.com/remarkablemark/html-react-parser/tree/master/examples)
 
 <details>
 <summary>Table of Contents</summary>
@@ -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)
@@ -202,7 +201,7 @@ If you're having issues take a look at our [Create React App example](./examples
 
 #### replace element and children
 
-Replace the element and its children (see [demo](https://repl.it/@remarkablemark/html-react-parser-replace-example)):
+Replace the element and its children (see [demo](https://replit.com/@remarkablemark/html-react-parser-replace-example)):
 
 ```jsx
 import parse, { domToReact } from 'html-react-parser';
@@ -283,7 +282,7 @@ HTML output:
 
 #### replace and remove element
 
-[Exclude](https://repl.it/@remarkablemark/html-react-parser-56) an element from rendering by replacing it with `<React.Fragment>`:
+[Exclude](https://replit.com/@remarkablemark/html-react-parser-56) an element from rendering by replacing it with `<React.Fragment>`:
 
 ```jsx
 parse('<p><br id="remove"></p>', {
@@ -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:
@@ -415,7 +414,7 @@ If the parser throws an erorr, check if your arguments are valid. See ["Does inv
 
 ### Is SSR supported?
 
-Yes, server-side rendering on Node.js is supported by this library. See [demo](https://repl.it/@remarkablemark/html-react-parser-SSR).
+Yes, server-side rendering on Node.js is supported by this library. See [demo](https://replit.com/@remarkablemark/html-react-parser-SSR).
 
 ### Elements aren't nested correctly
 
@@ -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):
@@ -450,7 +445,7 @@ parse('<CustomElement>', options); // React.createElement('CustomElement')
 > Warning: <CustomElement> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
 > ```
 
-See [#62](https://github.com/remarkablemark/html-react-parser/issues/62) and [example](https://repl.it/@remarkablemark/html-react-parser-62).
+See [#62](https://github.com/remarkablemark/html-react-parser/issues/62) and [example](https://replit.com/@remarkablemark/html-react-parser-62).
 
 ### TS Error: Property 'attribs' does not exist on type 'DOMNode'
 

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];
@@ -1316,11 +1348,22 @@
 
 	    // convert HTML/SVG attribute to React prop
 	    attributeNameLowerCased = attributeName.toLowerCase();
-	    propName = reactProperty.possibleStandardNames[attributeNameLowerCased];
+	    propName = getPropName(attributeNameLowerCased);
 
 	    if (propName) {
-	      props[propName] = attributeValue;
 	      propertyInfo = reactProperty.getPropertyInfo(propName);
+
+	      // convert attribute to uncontrolled component prop (e.g., `value` to `defaultValue`)
+	      // https://reactjs.org/docs/uncontrolled-components.html
+	      if (
+	        (propName === 'checked' || propName === 'value') &&
+	        !inputIsValueOnly
+	      ) {
+	        propName = getPropName('default' + attributeNameLowerCased);
+	      }
+
+	      props[propName] = attributeValue;
+
 	      switch (propertyInfo && propertyInfo.type) {
 	        case reactProperty.BOOLEAN:
 	          props[propName] = true;
@@ -1346,11 +1389,22 @@
 	  return props;
 	};
 
+	/**
+	 * Gets prop name from lowercased attribute name.
+	 *
+	 * @param {string} attributeName - Lowercased attribute name.
+	 * @return {string}
+	 */
+	function getPropName(attributeName) {
+	  return reactProperty.possibleStandardNames[attributeName];
+	}
+
 	var React = require$$0__default["default"];
 	var attributesToProps$1 = attributesToProps$2;
 	var utilities$1 = utilities$3;
 
 	var setStyleProp = utilities$1.setStyleProp;
+	var canTextBeChildOfNode = utilities$1.canTextBeChildOfNode;
 
 	/**
 	 * Converts DOM nodes to JSX element(s).
@@ -1371,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++) {
@@ -1399,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;
 	    }