From 6cd9a208d80ae7ec76595fecde2fade9b1104668 Mon Sep 17 00:00:00 2001 From: Mark Date: Sat, 26 Dec 2020 00:23:41 -0500 Subject: [PATCH 1/6] docs(readme): fix instructions for `Element` type check in TS --- README.md | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index d55ea4e6..c9fe49cd 100644 --- a/README.md +++ b/README.md @@ -176,18 +176,19 @@ parse('

text

', { }); ``` -For TypeScript projects, check that `domNode` is an instance of domhandler's `Element`: +For TypeScript projects, you may need to check that `domNode` is an instance of domhandler's `Element`: ```tsx -import parse, { Element } from 'html-react-parser'; +import { HTMLReactParserOptions } from 'html-react-parser'; +import { Element } from 'domhandler/lib/node'; -parse('

text

', { +const options: HTMLReactParserOptions = { replace: domNode => { - if (domNode instanceof Element && domNode.attribs.id === 'replace') { - return replaced; + if (domNode instanceof Element && domNode.attribs) { + // ... } } -}); +}; ``` The following [example](https://repl.it/@remarkablemark/html-react-parser-replace-example) modifies the element along with its children: @@ -367,12 +368,12 @@ parse('

', { trim: true }); // React.createElement('p') ### v1.0.0 -TypeScript projects will need to check the types in [v1.0.0](https://github.com/remarkablemark/html-react-parser/releases/tag/v1.0.0). +TypeScript projects will need to update the types in [v1.0.0](https://github.com/remarkablemark/html-react-parser/releases/tag/v1.0.0). -For `replace` option: +For the `replace` option, you may need to do the following: ```tsx -import parse, { Element } from 'html-react-parser'; +import { Element } from 'domhandler/lib/node'; parse('
', { replace: domNode => { @@ -446,7 +447,7 @@ See [#62](https://github.com/remarkablemark/html-react-parser/issues/62) and [ex ### TS Error: Property 'attribs' does not exist on type 'DOMNode' -The TypeScript error happens because `DOMNode` needs be an instance of domhandler's `Element`. See [migration](#migration) or [#199](https://github.com/remarkablemark/html-react-parser/issues/199). +The TypeScript error occurs because `DOMNode` needs be an instance of domhandler's `Element`. See [migration](#migration) or [#199](https://github.com/remarkablemark/html-react-parser/issues/199). ## Performance From 07e10551f5febfa70075df22255cb2eb1dec5f54 Mon Sep 17 00:00:00 2001 From: Mark Date: Sun, 27 Dec 2020 17:47:03 -0500 Subject: [PATCH 2/6] fix: escape tags inside of `` (html-dom-parser@1.0.0) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes #202 html-dom-parser 0.5.0 → 1.0.0 * https://github.com/remarkablemark/html-dom-parser/releases/tag/v1.0.0 * https://github.com/fb55/htmlparser2/releases/tag/v5.0.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 78608284..21a3a3ea 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,7 @@ "dom" ], "dependencies": { - "html-dom-parser": "0.5.0", + "html-dom-parser": "1.0.0", "react-property": "1.0.1", "style-to-js": "1.1.0" }, From 943e2d30a104c1084fbc27a09b33dd7a1e4f352f Mon Sep 17 00:00:00 2001 From: Mark <mark@remarkablemark.org> Date: Sun, 27 Dec 2020 17:52:10 -0500 Subject: [PATCH 3/6] test: add snapshot to verify tags inside of `<title>` are escaped --- test/__snapshots__/index.test.js.snap | 6 ++++++ test/data/html.js | 1 + test/index.test.js | 4 ++++ 3 files changed, 11 insertions(+) diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap index 658946d3..772788cd 100644 --- a/test/__snapshots__/index.test.js.snap +++ b/test/__snapshots__/index.test.js.snap @@ -1,5 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`HTMLReactParser escapes tags inside of <title> 1`] = ` +<title> + <em>text</em> + +`; + exports[`HTMLReactParser parses SVG 1`] = `
', comment: '', doctype: '', + title: '<em>text</em>', customElement: '' }; diff --git a/test/index.test.js b/test/index.test.js index 59f0ba5f..4ceb844c 100644 --- a/test/index.test.js +++ b/test/index.test.js @@ -75,6 +75,10 @@ describe('HTMLReactParser', () => { const reactElement = parse('' + encodedEntities + ''); expect(reactElement.props.children).toBe(decodedEntities); }); + + it('escapes tags inside of ', () => { + expect(parse(html.title)).toMatchSnapshot(); + }); }); describe('replace option', () => { From 1dc24f11e03ea27b02ff45e1cde96ffdf2478ca9 Mon Sep 17 00:00:00 2001 From: Mark <mark@remarkablemark.org> Date: Sun, 27 Dec 2020 17:53:27 -0500 Subject: [PATCH 4/6] refactor(index): prune unnecessary option for `htmlparser2` `htmlparser2` defaults `decodeEntities` to true in v5.0.0: https://github.com/fb55/htmlparser2/releases/tag/v5.0.0 --- index.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/index.js b/index.js index c66fbbdf..3929d5a5 100644 --- a/index.js +++ b/index.js @@ -2,8 +2,7 @@ var domToReact = require('./lib/dom-to-react'); var attributesToProps = require('./lib/attributes-to-props'); var htmlToDOM = require('html-dom-parser'); -// decode HTML entities by default for `htmlparser2` -var domParserOptions = { decodeEntities: true, lowerCaseAttributeNames: false }; +var domParserOptions = { lowerCaseAttributeNames: false }; /** * Converts HTML string to React elements. From 886e53d3dfd792289197e5e69ba92e422fffe54e Mon Sep 17 00:00:00 2001 From: Mark <mark@remarkablemark.org> Date: Sun, 27 Dec 2020 17:57:51 -0500 Subject: [PATCH 5/6] docs(readme): update htmlparser2 section and remove `decodeEntities` --- README.md | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index c9fe49cd..29276a0f 100644 --- a/README.md +++ b/README.md @@ -314,23 +314,21 @@ parse('<br>', { ### htmlparser2 -The default [htmlparser2 options](https://github.com/fb55/htmlparser2/wiki/Parser-options) are: +Along with the default [htmlparser2 options](https://github.com/fb55/htmlparser2/wiki/Parser-options#option-xmlmode), the parser also sets: -```js +```json { - decodeEntities: true, - lowerCaseAttributeNames: false + "lowerCaseAttributeNames": false } ``` Since [v0.12.0](https://github.com/remarkablemark/html-react-parser/tree/v0.12.0), the htmlparser2 options can be overridden. -The following example enables [`decodeEntities`](https://github.com/fb55/htmlparser2/wiki/Parser-options#option-decodeentities) and [`xmlMode`](https://github.com/fb55/htmlparser2/wiki/Parser-options#option-xmlmode): +The following example enables [`xmlMode`](https://github.com/fb55/htmlparser2/wiki/Parser-options#option-xmlmode) but disables [`lowerCaseAttributeNames`](https://github.com/fb55/htmlparser2/wiki/Parser-options#option-lowercaseattributenames): ```js parse('<p /><p />', { htmlparser2: { - decodeEntities: true, xmlMode: true } }); From b2cdbcb3fbd04213b183ed65ac1904e40690f623 Mon Sep 17 00:00:00 2001 From: Mark <mark@remarkablemark.org> Date: Sun, 27 Dec 2020 18:08:35 -0500 Subject: [PATCH 6/6] chore(release): 1.1.1 --- CHANGELOG.md | 7 +++++++ package.json | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 32bbf214..33d27a41 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,13 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +### [1.1.1](https://github.com/remarkablemark/html-react-parser/compare/v1.1.0...v1.1.1) (2020-12-27) + + +### Bug Fixes + +* escape tags inside of `<title>` (html-dom-parser@1.0.0) ([07e1055](https://github.com/remarkablemark/html-react-parser/commit/07e10551f5febfa70075df22255cb2eb1dec5f54)), closes [#202](https://github.com/remarkablemark/html-react-parser/issues/202) + ## [1.1.0](https://github.com/remarkablemark/html-react-parser/compare/v1.0.0...v1.1.0) (2020-12-26) diff --git a/package.json b/package.json index 21a3a3ea..2cd1b8a5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "html-react-parser", - "version": "1.1.0", + "version": "1.1.1", "description": "HTML to React parser.", "author": "Mark <mark@remarkablemark.org>", "main": "index.js",