html-react-parser 4.2.1 → 4.2.3
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 +5 -5
- package/dist/html-react-parser.js +37 -38
- 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/lib/utilities.js +15 -10
- package/package.json +22 -23
package/README.md
CHANGED
|
@@ -155,7 +155,7 @@ The `replace` callback's first argument is [domhandler](https://github.com/fb55/
|
|
|
155
155
|
|
|
156
156
|
```js
|
|
157
157
|
parse('<br>', {
|
|
158
|
-
replace: domNode => {
|
|
158
|
+
replace: (domNode) => {
|
|
159
159
|
console.dir(domNode, { depth: null });
|
|
160
160
|
}
|
|
161
161
|
});
|
|
@@ -186,7 +186,7 @@ The element is replaced if a **valid** React element is returned:
|
|
|
186
186
|
|
|
187
187
|
```jsx
|
|
188
188
|
parse('<p id="replace">text</p>', {
|
|
189
|
-
replace: domNode => {
|
|
189
|
+
replace: (domNode) => {
|
|
190
190
|
if (domNode.attribs && domNode.attribs.id === 'replace') {
|
|
191
191
|
return <span>replaced</span>;
|
|
192
192
|
}
|
|
@@ -202,7 +202,7 @@ For TypeScript projects, you may need to check that `domNode` is an instance of
|
|
|
202
202
|
import { HTMLReactParserOptions, Element } from 'html-react-parser';
|
|
203
203
|
|
|
204
204
|
const options: HTMLReactParserOptions = {
|
|
205
|
-
replace: domNode => {
|
|
205
|
+
replace: (domNode) => {
|
|
206
206
|
if (domNode instanceof Element && domNode.attribs) {
|
|
207
207
|
// ...
|
|
208
208
|
}
|
|
@@ -281,7 +281,7 @@ const html = `
|
|
|
281
281
|
`;
|
|
282
282
|
|
|
283
283
|
const options = {
|
|
284
|
-
replace: domNode => {
|
|
284
|
+
replace: (domNode) => {
|
|
285
285
|
if (domNode.attribs && domNode.name === 'main') {
|
|
286
286
|
const props = attributesToProps(domNode.attribs);
|
|
287
287
|
return <div {...props} />;
|
|
@@ -437,7 +437,7 @@ For the `replace` option, you may need to do the following:
|
|
|
437
437
|
import { Element } from 'domhandler/lib/node';
|
|
438
438
|
|
|
439
439
|
parse('<br class="remove">', {
|
|
440
|
-
replace: domNode => {
|
|
440
|
+
replace: (domNode) => {
|
|
441
441
|
if (domNode instanceof Element && domNode.attribs.class === 'remove') {
|
|
442
442
|
return <></>;
|
|
443
443
|
}
|
|
@@ -4,10 +4,6 @@
|
|
|
4
4
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.HTMLReactParser = factory(global.React));
|
|
5
5
|
})(this, (function (require$$0) { 'use strict';
|
|
6
6
|
|
|
7
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
|
-
|
|
9
|
-
var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);
|
|
10
|
-
|
|
11
7
|
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
|
12
8
|
|
|
13
9
|
function getDefaultExportFromCjs (x) {
|
|
@@ -2222,7 +2218,7 @@
|
|
|
2222
2218
|
|
|
2223
2219
|
var utilities$3 = {};
|
|
2224
2220
|
|
|
2225
|
-
utilities$3
|
|
2221
|
+
Object.defineProperty(utilities$3, "__esModule", { value: true });
|
|
2226
2222
|
utilities$3.camelCase = void 0;
|
|
2227
2223
|
var CUSTOM_PROPERTY_REGEX = /^--[a-zA-Z0-9-]+$/;
|
|
2228
2224
|
var HYPHEN_REGEX = /-([a-z])/g;
|
|
@@ -2254,29 +2250,27 @@
|
|
|
2254
2250
|
};
|
|
2255
2251
|
utilities$3.camelCase = camelCase;
|
|
2256
2252
|
|
|
2257
|
-
(function (
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
|
|
2273
|
-
|
|
2274
|
-
|
|
2275
|
-
|
|
2276
|
-
exports["default"] = StyleToJS;
|
|
2277
|
-
} (cjs));
|
|
2253
|
+
var __importDefault = (commonjsGlobal && commonjsGlobal.__importDefault) || function (mod) {
|
|
2254
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
2255
|
+
};
|
|
2256
|
+
Object.defineProperty(cjs, "__esModule", { value: true });
|
|
2257
|
+
var style_to_object_1 = __importDefault(styleToObjectExports);
|
|
2258
|
+
var utilities_1 = utilities$3;
|
|
2259
|
+
function StyleToJS(style, options) {
|
|
2260
|
+
var output = {};
|
|
2261
|
+
if (!style || typeof style !== 'string') {
|
|
2262
|
+
return output;
|
|
2263
|
+
}
|
|
2264
|
+
(0, style_to_object_1.default)(style, function (property, value) {
|
|
2265
|
+
if (property && value) {
|
|
2266
|
+
output[(0, utilities_1.camelCase)(property, options)] = value;
|
|
2267
|
+
}
|
|
2268
|
+
});
|
|
2269
|
+
return output;
|
|
2270
|
+
}
|
|
2271
|
+
cjs.default = StyleToJS;
|
|
2278
2272
|
|
|
2279
|
-
var React$1 = require$$
|
|
2273
|
+
var React$1 = require$$0;
|
|
2280
2274
|
var styleToJS = cjs.default;
|
|
2281
2275
|
|
|
2282
2276
|
/**
|
|
@@ -2314,16 +2308,6 @@
|
|
|
2314
2308
|
return result;
|
|
2315
2309
|
}
|
|
2316
2310
|
|
|
2317
|
-
/**
|
|
2318
|
-
* Check if a given tag is a custom component.
|
|
2319
|
-
*
|
|
2320
|
-
* @see {@link https://github.com/facebook/react/blob/v16.6.3/packages/react-dom/src/shared/isCustomComponent.js}
|
|
2321
|
-
*
|
|
2322
|
-
* @param {string} tagName - The name of the html tag.
|
|
2323
|
-
* @param {object} props - The props being passed to the element.
|
|
2324
|
-
* @returns - Whether tag is custom component.
|
|
2325
|
-
*/
|
|
2326
|
-
|
|
2327
2311
|
var RESERVED_SVG_MATHML_ELEMENTS = new Set([
|
|
2328
2312
|
'annotation-xml',
|
|
2329
2313
|
'color-profile',
|
|
@@ -2335,6 +2319,15 @@
|
|
|
2335
2319
|
'missing-glyph'
|
|
2336
2320
|
]);
|
|
2337
2321
|
|
|
2322
|
+
/**
|
|
2323
|
+
* Check if a given tag is a custom component.
|
|
2324
|
+
*
|
|
2325
|
+
* @see {@link https://github.com/facebook/react/blob/v16.6.3/packages/react-dom/src/shared/isCustomComponent.js}
|
|
2326
|
+
*
|
|
2327
|
+
* @param {string} tagName - The name of the html tag.
|
|
2328
|
+
* @param {object} props - The props being passed to the element.
|
|
2329
|
+
* @returns {boolean} - Whether tag is custom component.
|
|
2330
|
+
*/
|
|
2338
2331
|
function isCustomComponent(tagName, props) {
|
|
2339
2332
|
if (tagName.indexOf('-') === -1) {
|
|
2340
2333
|
return props && typeof props.is === 'string';
|
|
@@ -2399,6 +2392,12 @@
|
|
|
2399
2392
|
return !ELEMENTS_WITH_NO_TEXT_CHILDREN.has(node.name);
|
|
2400
2393
|
}
|
|
2401
2394
|
|
|
2395
|
+
/**
|
|
2396
|
+
* Returns the first argument as is.
|
|
2397
|
+
*
|
|
2398
|
+
* @param {any} arg - The argument to be returned.
|
|
2399
|
+
* @returns {any} The input argument `arg`.
|
|
2400
|
+
*/
|
|
2402
2401
|
function returnFirstArg(arg) {
|
|
2403
2402
|
return arg;
|
|
2404
2403
|
}
|
|
@@ -2506,7 +2505,7 @@
|
|
|
2506
2505
|
return reactProperty.possibleStandardNames[attributeName];
|
|
2507
2506
|
}
|
|
2508
2507
|
|
|
2509
|
-
var React = require$$
|
|
2508
|
+
var React = require$$0;
|
|
2510
2509
|
var attributesToProps$1 = attributesToProps$2;
|
|
2511
2510
|
var utilities = utilities$2;
|
|
2512
2511
|
|