html-react-parser 4.2.10 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +79 -55
- package/dist/html-react-parser.js +491 -514
- package/dist/html-react-parser.js.map +1 -1
- package/dist/html-react-parser.min.js +1 -1
- package/dist/html-react-parser.min.js.map +1 -1
- package/esm/attributes-to-props.mjs +3 -0
- package/esm/dom-to-react.mjs +3 -0
- package/esm/index.mjs +13 -0
- package/esm/utilities.mjs +8 -0
- package/lib/attributes-to-props.d.ts +8 -11
- package/lib/attributes-to-props.d.ts.map +1 -0
- package/lib/attributes-to-props.js +58 -75
- package/lib/attributes-to-props.js.map +1 -0
- package/lib/dom-to-react.d.ts +7 -13
- package/lib/dom-to-react.d.ts.map +1 -0
- package/lib/dom-to-react.js +104 -123
- package/lib/dom-to-react.js.map +1 -0
- package/lib/index.d.ts +17 -0
- package/lib/index.d.ts.map +1 -0
- package/lib/index.js +36 -0
- package/lib/index.js.map +1 -0
- package/lib/types.d.ts +17 -0
- package/lib/types.d.ts.map +1 -0
- package/lib/types.js +3 -0
- package/lib/types.js.map +1 -0
- package/lib/utilities.d.ts +42 -0
- package/lib/utilities.d.ts.map +1 -0
- package/lib/utilities.js +77 -79
- package/lib/utilities.js.map +1 -0
- package/package.json +27 -21
- package/src/attributes-to-props.ts +108 -0
- package/src/dom-to-react.ts +156 -0
- package/src/index.ts +37 -0
- package/src/types.ts +29 -0
- package/src/utilities.ts +108 -0
- package/index.d.ts +0 -60
- package/index.js +0 -50
- package/index.mjs +0 -13
package/esm/index.mjs
ADDED
|
@@ -1,12 +1,11 @@
|
|
|
1
|
-
// TypeScript Version: 5.3
|
|
2
|
-
/* eslint-disable no-unused-vars */
|
|
3
|
-
|
|
4
1
|
export type Attributes = Record<string, string>;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
2
|
+
export type Props = Record<string, string | boolean> & {
|
|
3
|
+
dangerouslySetInnerHTML?: {
|
|
4
|
+
__html: string;
|
|
5
|
+
};
|
|
6
|
+
key?: string | number;
|
|
7
|
+
style?: Record<string, string>;
|
|
8
8
|
};
|
|
9
|
-
|
|
10
9
|
/**
|
|
11
10
|
* Converts HTML/SVG DOM attributes to React props.
|
|
12
11
|
*
|
|
@@ -14,7 +13,5 @@ export type Props = Record<string, string> & {
|
|
|
14
13
|
* @param nodeName - DOM node name.
|
|
15
14
|
* @returns - React props.
|
|
16
15
|
*/
|
|
17
|
-
export default function attributesToProps(
|
|
18
|
-
|
|
19
|
-
nodeName?: string
|
|
20
|
-
): Props;
|
|
16
|
+
export default function attributesToProps(attributes?: Attributes, nodeName?: string): Props;
|
|
17
|
+
//# sourceMappingURL=attributes-to-props.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"attributes-to-props.d.ts","sourceRoot":"","sources":["../src/attributes-to-props.ts"],"names":[],"mappings":"AAmBA,MAAM,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEhD,MAAM,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IACrD,uBAAuB,CAAC,EAAE;QACxB,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACvC,UAAU,GAAE,UAAe,EAC3B,QAAQ,CAAC,EAAE,MAAM,GAChB,KAAK,CA0DP"}
|
|
@@ -1,92 +1,75 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
var react_property_1 = require("react-property");
|
|
4
|
+
var utilities_1 = require("./utilities");
|
|
5
|
+
// https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components
|
|
5
6
|
// https://developer.mozilla.org/docs/Web/HTML/Attributes
|
|
6
7
|
var UNCONTROLLED_COMPONENT_ATTRIBUTES = ['checked', 'value'];
|
|
7
8
|
var UNCONTROLLED_COMPONENT_NAMES = ['input', 'select', 'textarea'];
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
submit: true
|
|
9
|
+
var valueOnlyInputs = {
|
|
10
|
+
reset: true,
|
|
11
|
+
submit: true,
|
|
12
12
|
};
|
|
13
|
-
|
|
14
13
|
/**
|
|
15
14
|
* Converts HTML/SVG DOM attributes to React props.
|
|
16
15
|
*
|
|
17
|
-
* @param
|
|
18
|
-
* @param
|
|
16
|
+
* @param attributes - HTML/SVG DOM attributes.
|
|
17
|
+
* @param nodeName - DOM node name.
|
|
19
18
|
* @returns - React props.
|
|
20
19
|
*/
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
20
|
+
function attributesToProps(attributes, nodeName) {
|
|
21
|
+
if (attributes === void 0) { attributes = {}; }
|
|
22
|
+
var props = {};
|
|
23
|
+
var isInputValueOnly = Boolean(attributes.type &&
|
|
24
|
+
valueOnlyInputs[attributes.type]);
|
|
25
|
+
for (var attributeName in attributes) {
|
|
26
|
+
var attributeValue = attributes[attributeName];
|
|
27
|
+
// ARIA (aria-*) or custom data (data-*) attribute
|
|
28
|
+
if ((0, react_property_1.isCustomAttribute)(attributeName)) {
|
|
29
|
+
props[attributeName] = attributeValue;
|
|
30
|
+
continue;
|
|
31
|
+
}
|
|
32
|
+
// convert HTML/SVG attribute to React prop
|
|
33
|
+
var attributeNameLowerCased = attributeName.toLowerCase();
|
|
34
|
+
var propName = getPropName(attributeNameLowerCased);
|
|
35
|
+
if (propName) {
|
|
36
|
+
var propertyInfo = (0, react_property_1.getPropertyInfo)(propName);
|
|
37
|
+
// convert attribute to uncontrolled component prop (e.g., `value` to `defaultValue`)
|
|
38
|
+
if (UNCONTROLLED_COMPONENT_ATTRIBUTES.indexOf(propName) !== -1 &&
|
|
39
|
+
UNCONTROLLED_COMPONENT_NAMES.indexOf(nodeName) !== -1 &&
|
|
40
|
+
!isInputValueOnly) {
|
|
41
|
+
propName = getPropName('default' + attributeNameLowerCased);
|
|
42
|
+
}
|
|
43
|
+
props[propName] = attributeValue;
|
|
44
|
+
switch (propertyInfo && propertyInfo.type) {
|
|
45
|
+
case react_property_1.BOOLEAN:
|
|
46
|
+
props[propName] = true;
|
|
47
|
+
break;
|
|
48
|
+
case react_property_1.OVERLOADED_BOOLEAN:
|
|
49
|
+
if (attributeValue === '') {
|
|
50
|
+
props[propName] = true;
|
|
51
|
+
}
|
|
52
|
+
break;
|
|
53
|
+
}
|
|
54
|
+
continue;
|
|
55
|
+
}
|
|
56
|
+
// preserve custom attribute if React >=16
|
|
57
|
+
if (utilities_1.PRESERVE_CUSTOM_ATTRIBUTES) {
|
|
58
|
+
props[attributeName] = attributeValue;
|
|
59
|
+
}
|
|
39
60
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
if (propName) {
|
|
46
|
-
propertyInfo = reactProperty.getPropertyInfo(propName);
|
|
47
|
-
|
|
48
|
-
// convert attribute to uncontrolled component prop (e.g., `value` to `defaultValue`)
|
|
49
|
-
if (
|
|
50
|
-
UNCONTROLLED_COMPONENT_ATTRIBUTES.indexOf(propName) !== -1 &&
|
|
51
|
-
UNCONTROLLED_COMPONENT_NAMES.indexOf(nodeName) !== -1 &&
|
|
52
|
-
!inputIsValueOnly
|
|
53
|
-
) {
|
|
54
|
-
propName = getPropName('default' + attributeNameLowerCased);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
props[propName] = attributeValue;
|
|
58
|
-
|
|
59
|
-
switch (propertyInfo && propertyInfo.type) {
|
|
60
|
-
case reactProperty.BOOLEAN:
|
|
61
|
-
props[propName] = true;
|
|
62
|
-
break;
|
|
63
|
-
case reactProperty.OVERLOADED_BOOLEAN:
|
|
64
|
-
if (attributeValue === '') {
|
|
65
|
-
props[propName] = true;
|
|
66
|
-
}
|
|
67
|
-
break;
|
|
68
|
-
}
|
|
69
|
-
continue;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
// preserve custom attribute if React >=16
|
|
73
|
-
if (utilities.PRESERVE_CUSTOM_ATTRIBUTES) {
|
|
74
|
-
props[attributeName] = attributeValue;
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
// transform inline style to object
|
|
79
|
-
utilities.setStyleProp(attributes.style, props);
|
|
80
|
-
|
|
81
|
-
return props;
|
|
82
|
-
};
|
|
83
|
-
|
|
61
|
+
// transform inline style to object
|
|
62
|
+
(0, utilities_1.setStyleProp)(attributes.style, props);
|
|
63
|
+
return props;
|
|
64
|
+
}
|
|
65
|
+
exports.default = attributesToProps;
|
|
84
66
|
/**
|
|
85
67
|
* Gets prop name from lowercased attribute name.
|
|
86
68
|
*
|
|
87
|
-
* @param
|
|
69
|
+
* @param attributeName - Lowercased attribute name.
|
|
88
70
|
* @returns - Prop name.
|
|
89
71
|
*/
|
|
90
72
|
function getPropName(attributeName) {
|
|
91
|
-
|
|
73
|
+
return react_property_1.possibleStandardNames[attributeName];
|
|
92
74
|
}
|
|
75
|
+
//# sourceMappingURL=attributes-to-props.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"attributes-to-props.js","sourceRoot":"","sources":["../src/attributes-to-props.ts"],"names":[],"mappings":";;AAAA,iDAMwB;AACxB,yCAAuE;AAEvE,kGAAkG;AAClG,yDAAyD;AACzD,IAAM,iCAAiC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;AAC/D,IAAM,4BAA4B,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC;AAErE,IAAM,eAAe,GAAG;IACtB,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,IAAI;CACJ,CAAC;AAYX;;;;;;GAMG;AACH,SAAwB,iBAAiB,CACvC,UAA2B,EAC3B,QAAiB;IADjB,2BAAA,EAAA,eAA2B;IAG3B,IAAM,KAAK,GAAU,EAAE,CAAC;IAExB,IAAM,gBAAgB,GAAG,OAAO,CAC9B,UAAU,CAAC,IAAI;QACb,eAAe,CAAC,UAAU,CAAC,IAAoC,CAAC,CACnE,CAAC;IAEF,KAAK,IAAM,aAAa,IAAI,UAAU,EAAE;QACtC,IAAM,cAAc,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;QAEjD,kDAAkD;QAClD,IAAI,IAAA,kCAAiB,EAAC,aAAa,CAAC,EAAE;YACpC,KAAK,CAAC,aAAa,CAAC,GAAG,cAAc,CAAC;YACtC,SAAS;SACV;QAED,2CAA2C;QAC3C,IAAM,uBAAuB,GAAG,aAAa,CAAC,WAAW,EAAE,CAAC;QAC5D,IAAI,QAAQ,GAAG,WAAW,CAAC,uBAAuB,CAAC,CAAC;QAEpD,IAAI,QAAQ,EAAE;YACZ,IAAM,YAAY,GAAG,IAAA,gCAAe,EAAC,QAAQ,CAAC,CAAC;YAE/C,qFAAqF;YACrF,IACE,iCAAiC,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;gBAC1D,4BAA4B,CAAC,OAAO,CAAC,QAAS,CAAC,KAAK,CAAC,CAAC;gBACtD,CAAC,gBAAgB,EACjB;gBACA,QAAQ,GAAG,WAAW,CAAC,SAAS,GAAG,uBAAuB,CAAC,CAAC;aAC7D;YAED,KAAK,CAAC,QAAQ,CAAC,GAAG,cAAc,CAAC;YAEjC,QAAQ,YAAY,IAAI,YAAY,CAAC,IAAI,EAAE;gBACzC,KAAK,wBAAO;oBACV,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;oBACvB,MAAM;gBACR,KAAK,mCAAkB;oBACrB,IAAI,cAAc,KAAK,EAAE,EAAE;wBACzB,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;qBACxB;oBACD,MAAM;aACT;YACD,SAAS;SACV;QAED,0CAA0C;QAC1C,IAAI,sCAA0B,EAAE;YAC9B,KAAK,CAAC,aAAa,CAAC,GAAG,cAAc,CAAC;SACvC;KACF;IAED,mCAAmC;IACnC,IAAA,wBAAY,EAAC,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAEtC,OAAO,KAAK,CAAC;AACf,CAAC;AA7DD,oCA6DC;AAED;;;;;GAKG;AACH,SAAS,WAAW,CAAC,aAAqB;IACxC,OAAO,sCAAqB,CAAC,aAAa,CAAC,CAAC;AAC9C,CAAC"}
|
package/lib/dom-to-react.d.ts
CHANGED
|
@@ -1,18 +1,12 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import { DOMNode, HTMLReactParserOptions } from '..';
|
|
5
|
-
|
|
6
|
-
export { DOMNode, HTMLReactParserOptions };
|
|
7
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { DOMNode } from 'html-dom-parser';
|
|
3
|
+
import type { HTMLReactParserOptions } from './types';
|
|
8
4
|
/**
|
|
9
5
|
* Converts DOM nodes to JSX element(s).
|
|
10
6
|
*
|
|
11
7
|
* @param nodes - DOM nodes.
|
|
12
|
-
* @param options -
|
|
13
|
-
* @returns - JSX element(s).
|
|
8
|
+
* @param options - Options.
|
|
9
|
+
* @returns - String or JSX element(s).
|
|
14
10
|
*/
|
|
15
|
-
export default function domToReact(
|
|
16
|
-
|
|
17
|
-
options?: HTMLReactParserOptions
|
|
18
|
-
): string | JSX.Element | JSX.Element[];
|
|
11
|
+
export default function domToReact(nodes: DOMNode[], options?: HTMLReactParserOptions): string | JSX.Element | JSX.Element[];
|
|
12
|
+
//# sourceMappingURL=dom-to-react.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dom-to-react.d.ts","sourceRoot":"","sources":["../src/dom-to-react.ts"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAW,OAAO,EAAQ,MAAM,iBAAiB,CAAC;AAY9D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAQtD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAChC,KAAK,EAAE,OAAO,EAAE,EAChB,OAAO,CAAC,EAAE,sBAAsB,GAC/B,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,CA6GtC"}
|
package/lib/dom-to-react.js
CHANGED
|
@@ -1,141 +1,122 @@
|
|
|
1
|
-
|
|
2
|
-
var
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
var
|
|
7
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
var react_1 = require("react");
|
|
7
|
+
var attributes_to_props_1 = __importDefault(require("./attributes-to-props"));
|
|
8
|
+
var utilities_1 = require("./utilities");
|
|
9
|
+
var React = {
|
|
10
|
+
cloneElement: react_1.cloneElement,
|
|
11
|
+
createElement: react_1.createElement,
|
|
12
|
+
isValidElement: react_1.isValidElement,
|
|
13
|
+
};
|
|
8
14
|
/**
|
|
9
15
|
* Converts DOM nodes to JSX element(s).
|
|
10
16
|
*
|
|
11
|
-
* @param
|
|
12
|
-
* @param
|
|
13
|
-
* @param {Function} [options.replace] - Replacer.
|
|
14
|
-
* @param {Function} [options.transform] - Transform.
|
|
15
|
-
* @param {object} [options.library] - Library (React, Preact, etc.).
|
|
17
|
+
* @param nodes - DOM nodes.
|
|
18
|
+
* @param options - Options.
|
|
16
19
|
* @returns - String or JSX element(s).
|
|
17
20
|
*/
|
|
18
21
|
function domToReact(nodes, options) {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
replaceElement = options.replace(node);
|
|
42
|
-
|
|
43
|
-
if (isValidElement(replaceElement)) {
|
|
44
|
-
// set "key" prop for sibling elements
|
|
45
|
-
// https://fb.me/react-warning-keys
|
|
46
|
-
if (len > 1) {
|
|
47
|
-
replaceElement = cloneElement(replaceElement, {
|
|
48
|
-
key: replaceElement.key || i
|
|
49
|
-
});
|
|
22
|
+
var reactElements = [];
|
|
23
|
+
var hasReplace = typeof (options === null || options === void 0 ? void 0 : options.replace) === 'function';
|
|
24
|
+
var transform = (options === null || options === void 0 ? void 0 : options.transform) || utilities_1.returnFirstArg;
|
|
25
|
+
var _a = (options === null || options === void 0 ? void 0 : options.library) || React, cloneElement = _a.cloneElement, createElement = _a.createElement, isValidElement = _a.isValidElement;
|
|
26
|
+
var index = 0;
|
|
27
|
+
var nodesLength = nodes.length;
|
|
28
|
+
for (; index < nodesLength; index++) {
|
|
29
|
+
var node = nodes[index];
|
|
30
|
+
// replace with custom React element (if present)
|
|
31
|
+
if (hasReplace) {
|
|
32
|
+
var replaceElement = options.replace(node);
|
|
33
|
+
if (isValidElement(replaceElement)) {
|
|
34
|
+
// set "key" prop for sibling elements
|
|
35
|
+
// https://react.dev/learn/rendering-lists#rules-of-keys
|
|
36
|
+
if (nodesLength > 1) {
|
|
37
|
+
replaceElement = cloneElement(replaceElement, {
|
|
38
|
+
key: replaceElement.key || index,
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
reactElements.push(transform(replaceElement, node, index));
|
|
42
|
+
continue;
|
|
43
|
+
}
|
|
50
44
|
}
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
// We have a text node that's not whitespace and it can be nested
|
|
72
|
-
// in its parent so add it to the results
|
|
73
|
-
result.push(transform(node.data, node, i));
|
|
74
|
-
continue;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
props = node.attribs;
|
|
78
|
-
if (skipAttributesToProps(node)) {
|
|
79
|
-
setStyleProp(props.style, props);
|
|
80
|
-
} else if (props) {
|
|
81
|
-
props = attributesToProps(props, node.name);
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
children = null;
|
|
85
|
-
|
|
86
|
-
switch (node.type) {
|
|
87
|
-
case 'script':
|
|
88
|
-
case 'style':
|
|
89
|
-
// prevent text in <script> or <style> from being escaped
|
|
90
|
-
// https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
|
|
91
|
-
if (node.children[0]) {
|
|
92
|
-
props.dangerouslySetInnerHTML = {
|
|
93
|
-
__html: node.children[0].data
|
|
94
|
-
};
|
|
45
|
+
if (node.type === 'text') {
|
|
46
|
+
var isWhitespace = !node.data.trim().length;
|
|
47
|
+
// We have a whitespace node that can't be nested in its parent
|
|
48
|
+
// so skip it
|
|
49
|
+
if (isWhitespace &&
|
|
50
|
+
node.parent &&
|
|
51
|
+
!(0, utilities_1.canTextBeChildOfNode)(node.parent)) {
|
|
52
|
+
continue;
|
|
53
|
+
}
|
|
54
|
+
// Trim is enabled and we have a whitespace node
|
|
55
|
+
// so skip it
|
|
56
|
+
if ((options === null || options === void 0 ? void 0 : options.trim) && isWhitespace) {
|
|
57
|
+
continue;
|
|
58
|
+
}
|
|
59
|
+
// We have a text node that's not whitespace and it can be nested
|
|
60
|
+
// in its parent so add it to the results
|
|
61
|
+
reactElements.push(transform(node.data, node, index));
|
|
62
|
+
continue;
|
|
95
63
|
}
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
if (node.name === 'textarea' && node.children[0]) {
|
|
102
|
-
props.defaultValue = node.children[0].data;
|
|
103
|
-
} else if (node.children && node.children.length) {
|
|
104
|
-
// continue recursion of creating React elements (if applicable)
|
|
105
|
-
children = domToReact(node.children, options);
|
|
64
|
+
var element = node;
|
|
65
|
+
var props = {};
|
|
66
|
+
if (skipAttributesToProps(element)) {
|
|
67
|
+
(0, utilities_1.setStyleProp)(element.attribs.style, element.attribs);
|
|
68
|
+
props = element.attribs;
|
|
106
69
|
}
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
70
|
+
else if (element.attribs) {
|
|
71
|
+
props = (0, attributes_to_props_1.default)(element.attribs, element.name);
|
|
72
|
+
}
|
|
73
|
+
var children = null;
|
|
74
|
+
switch (node.type) {
|
|
75
|
+
case 'script':
|
|
76
|
+
case 'style':
|
|
77
|
+
// prevent text in <script> or <style> from being escaped
|
|
78
|
+
// https://react.dev/reference/react-dom/components/common#dangerously-setting-the-inner-html
|
|
79
|
+
if (node.children[0]) {
|
|
80
|
+
props.dangerouslySetInnerHTML = {
|
|
81
|
+
__html: node.children[0].data,
|
|
82
|
+
};
|
|
83
|
+
}
|
|
84
|
+
break;
|
|
85
|
+
case 'tag':
|
|
86
|
+
// setting textarea value in children is an antipattern in React
|
|
87
|
+
// https://react.dev/reference/react-dom/components/textarea#caveats
|
|
88
|
+
if (node.name === 'textarea' && node.children[0]) {
|
|
89
|
+
props.defaultValue = node.children[0].data;
|
|
90
|
+
}
|
|
91
|
+
else if (node.children && node.children.length) {
|
|
92
|
+
// continue recursion of creating React elements (if applicable)
|
|
93
|
+
children = domToReact(node.children, options);
|
|
94
|
+
}
|
|
95
|
+
break;
|
|
96
|
+
// skip all other cases (e.g., comment)
|
|
97
|
+
default:
|
|
98
|
+
continue;
|
|
99
|
+
}
|
|
100
|
+
// set "key" prop for sibling elements
|
|
101
|
+
// https://react.dev/learn/rendering-lists#rules-of-keys
|
|
102
|
+
if (nodesLength > 1) {
|
|
103
|
+
props.key = index;
|
|
104
|
+
}
|
|
105
|
+
reactElements.push(transform(createElement(node.name, props, children), node, index));
|
|
118
106
|
}
|
|
119
|
-
|
|
120
|
-
result.push(transform(createElement(node.name, props, children), node, i));
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
return result.length === 1 ? result[0] : result;
|
|
107
|
+
return reactElements.length === 1 ? reactElements[0] : reactElements;
|
|
124
108
|
}
|
|
125
|
-
|
|
109
|
+
exports.default = domToReact;
|
|
126
110
|
/**
|
|
127
111
|
* Determines whether DOM element attributes should be transformed to props.
|
|
128
112
|
* Web Components should not have their attributes transformed except for `style`.
|
|
129
113
|
*
|
|
130
|
-
* @param
|
|
131
|
-
* @returns - Whether node attributes should be converted to props.
|
|
114
|
+
* @param node - Element node.
|
|
115
|
+
* @returns - Whether the node attributes should be converted to props.
|
|
132
116
|
*/
|
|
133
117
|
function skipAttributesToProps(node) {
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
utilities.isCustomComponent(node.name, node.attribs)
|
|
138
|
-
);
|
|
118
|
+
return (utilities_1.PRESERVE_CUSTOM_ATTRIBUTES &&
|
|
119
|
+
node.type === 'tag' &&
|
|
120
|
+
(0, utilities_1.isCustomComponent)(node.name, node.attribs));
|
|
139
121
|
}
|
|
140
|
-
|
|
141
|
-
module.exports = domToReact;
|
|
122
|
+
//# sourceMappingURL=dom-to-react.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dom-to-react.js","sourceRoot":"","sources":["../src/dom-to-react.ts"],"names":[],"mappings":"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"}
|
package/lib/index.d.ts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import htmlToDOM from 'html-dom-parser';
|
|
3
|
+
import attributesToProps from './attributes-to-props';
|
|
4
|
+
import domToReact from './dom-to-react';
|
|
5
|
+
import type { HTMLReactParserOptions } from './types';
|
|
6
|
+
export { Comment, Element, ProcessingInstruction, Text } from 'domhandler';
|
|
7
|
+
export type { DOMNode } from 'html-dom-parser';
|
|
8
|
+
export { HTMLReactParserOptions, attributesToProps, domToReact, htmlToDOM };
|
|
9
|
+
/**
|
|
10
|
+
* Converts HTML string to React elements.
|
|
11
|
+
*
|
|
12
|
+
* @param html - HTML string.
|
|
13
|
+
* @param options - Parser options.
|
|
14
|
+
* @returns - React element(s), empty array, or string.
|
|
15
|
+
*/
|
|
16
|
+
export default function HTMLReactParser(html: string, options?: HTMLReactParserOptions): JSX.Element | JSX.Element[] | string;
|
|
17
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,iBAAiB,CAAC;AAExC,OAAO,iBAAiB,MAAM,uBAAuB,CAAC;AACtD,OAAO,UAAU,MAAM,gBAAgB,CAAC;AACxC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAEtD,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,qBAAqB,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAC3E,YAAY,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAE/C,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC;AAI5E;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CACrC,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,sBAAsB,GAC/B,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,EAAE,GAAG,MAAM,CAatC"}
|
package/lib/index.js
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.htmlToDOM = exports.domToReact = exports.attributesToProps = exports.Text = exports.ProcessingInstruction = exports.Element = exports.Comment = void 0;
|
|
7
|
+
var html_dom_parser_1 = __importDefault(require("html-dom-parser"));
|
|
8
|
+
exports.htmlToDOM = html_dom_parser_1.default;
|
|
9
|
+
var attributes_to_props_1 = __importDefault(require("./attributes-to-props"));
|
|
10
|
+
exports.attributesToProps = attributes_to_props_1.default;
|
|
11
|
+
var dom_to_react_1 = __importDefault(require("./dom-to-react"));
|
|
12
|
+
exports.domToReact = dom_to_react_1.default;
|
|
13
|
+
var domhandler_1 = require("domhandler");
|
|
14
|
+
Object.defineProperty(exports, "Comment", { enumerable: true, get: function () { return domhandler_1.Comment; } });
|
|
15
|
+
Object.defineProperty(exports, "Element", { enumerable: true, get: function () { return domhandler_1.Element; } });
|
|
16
|
+
Object.defineProperty(exports, "ProcessingInstruction", { enumerable: true, get: function () { return domhandler_1.ProcessingInstruction; } });
|
|
17
|
+
Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return domhandler_1.Text; } });
|
|
18
|
+
var domParserOptions = { lowerCaseAttributeNames: false };
|
|
19
|
+
/**
|
|
20
|
+
* Converts HTML string to React elements.
|
|
21
|
+
*
|
|
22
|
+
* @param html - HTML string.
|
|
23
|
+
* @param options - Parser options.
|
|
24
|
+
* @returns - React element(s), empty array, or string.
|
|
25
|
+
*/
|
|
26
|
+
function HTMLReactParser(html, options) {
|
|
27
|
+
if (typeof html !== 'string') {
|
|
28
|
+
throw new TypeError('First argument must be a string');
|
|
29
|
+
}
|
|
30
|
+
if (!html) {
|
|
31
|
+
return [];
|
|
32
|
+
}
|
|
33
|
+
return (0, dom_to_react_1.default)((0, html_dom_parser_1.default)(html, (options === null || options === void 0 ? void 0 : options.htmlparser2) || domParserOptions), options);
|
|
34
|
+
}
|
|
35
|
+
exports.default = HTMLReactParser;
|
|
36
|
+
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,oEAAwC;AASwB,oBATzD,yBAAS,CASyD;AAPzE,8EAAsD;AAOrB,4BAP1B,6BAAiB,CAO0B;AANlD,gEAAwC;AAMY,qBAN7C,sBAAU,CAM6C;AAH9D,yCAA2E;AAAlE,qGAAA,OAAO,OAAA;AAAE,qGAAA,OAAO,OAAA;AAAE,mHAAA,qBAAqB,OAAA;AAAE,kGAAA,IAAI,OAAA;AAKtD,IAAM,gBAAgB,GAAG,EAAE,uBAAuB,EAAE,KAAK,EAAW,CAAC;AAErE;;;;;;GAMG;AACH,SAAwB,eAAe,CACrC,IAAY,EACZ,OAAgC;IAEhC,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;QAC5B,MAAM,IAAI,SAAS,CAAC,iCAAiC,CAAC,CAAC;KACxD;IAED,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,EAAE,CAAC;KACX;IAED,OAAO,IAAA,sBAAU,EACf,IAAA,yBAAS,EAAC,IAAI,EAAE,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,KAAI,gBAAgB,CAAC,EACzD,OAAO,CACR,CAAC;AACJ,CAAC;AAhBD,kCAgBC"}
|
package/lib/types.d.ts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { DomHandlerOptions } from 'domhandler';
|
|
2
|
+
import type { DOMNode } from 'html-dom-parser';
|
|
3
|
+
import type { ParserOptions } from 'htmlparser2';
|
|
4
|
+
import type { ReactNode } from 'react';
|
|
5
|
+
export interface HTMLReactParserOptions {
|
|
6
|
+
htmlparser2?: ParserOptions & DomHandlerOptions;
|
|
7
|
+
library?: {
|
|
8
|
+
cloneElement: (element: JSX.Element, props?: object, ...children: any) => JSX.Element;
|
|
9
|
+
createElement: (type: any, props?: object, ...children: any) => JSX.Element;
|
|
10
|
+
isValidElement: (element: any) => boolean;
|
|
11
|
+
[key: string]: any;
|
|
12
|
+
};
|
|
13
|
+
replace?: (domNode: DOMNode) => JSX.Element | string | null | boolean | void;
|
|
14
|
+
transform?: (reactNode: ReactNode, domNode: DOMNode, index: number) => JSX.Element | string | null | void;
|
|
15
|
+
trim?: boolean;
|
|
16
|
+
}
|
|
17
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,sBAAsB;IACrC,WAAW,CAAC,EAAE,aAAa,GAAG,iBAAiB,CAAC;IAEhD,OAAO,CAAC,EAAE;QACR,YAAY,EAAE,CACZ,OAAO,EAAE,GAAG,CAAC,OAAO,EACpB,KAAK,CAAC,EAAE,MAAM,EACd,GAAG,QAAQ,EAAE,GAAG,KACb,GAAG,CAAC,OAAO,CAAC;QACjB,aAAa,EAAE,CAAC,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,GAAG,KAAK,GAAG,CAAC,OAAO,CAAC;QAC5E,cAAc,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,OAAO,CAAC;QAC1C,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;KACpB,CAAC;IAEF,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,GAAG,CAAC,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,OAAO,GAAG,IAAI,CAAC;IAE7E,SAAS,CAAC,EAAE,CACV,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,MAAM,KACV,GAAG,CAAC,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAExC,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB"}
|
package/lib/types.js
ADDED
package/lib/types.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}
|