Avoid using RichText api in favour of a simpler way to strip html tags

WordPress · Dec 11, 2019 · 7bf4683 · 7bf4683
1 parent 77f8db1
commit 7bf4683
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 9 deletions.
diff --git a/packages/blocks/package.json b/packages/blocks/package.json
@@ -33,7 +33,6 @@
 		"@wordpress/html-entities": "file:../html-entities",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/is-shallow-equal": "file:../is-shallow-equal",
-		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/shortcode": "file:../shortcode",
 		"hpq": "^1.3.0",
 		"lodash": "^4.17.15",

diff --git a/packages/blocks/src/api/utils.js b/packages/blocks/src/api/utils.js
@@ -9,7 +9,7 @@ import { default as tinycolor, mostReadable } from 'tinycolor2';
  */
 import { Component, isValidElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { create, getTextContent } from '@wordpress/rich-text';
+import { stripHTML } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -146,11 +146,8 @@ export function getBlockLabel( blockType, attributes, context = 'visual' ) {
 		return title;
 	}
 
-	// Strip any formatting.
-	const richTextValue = create( { html: label } );
-	const formatlessLabel = getTextContent( richTextValue );
-
-	return formatlessLabel;
+	// Strip any HTML (i.e. RichText formatting) before returning.
+	return stripHTML( label );
 }
 
 /**

diff --git a/packages/dom/README.md b/packages/dom/README.md
@@ -204,6 +204,18 @@ _Returns_
 
 -   `Element`: The new node.
 
+<a name="stripHTML" href="#stripHTML">#</a> **stripHTML**
+
+Removes any HTML tags from the provided string.
+
+_Parameters_
+
+-   _html_ `string`: The string containing html.
+
+_Returns_
+
+-   `string`: The text content with any html removed.
+
 <a name="unwrap" href="#unwrap">#</a> **unwrap**
 
 Unwrap the given node. This means any child nodes are moved to the parent.

diff --git a/packages/dom/src/dom.js b/packages/dom/src/dom.js
@@ -7,7 +7,7 @@ import { includes } from 'lodash';
  * Browser dependencies
  */
 
-const { getComputedStyle } = window;
+const { DOMParser, getComputedStyle } = window;
 const {
 	TEXT_NODE,
 	ELEMENT_NODE,
@@ -661,3 +661,15 @@ export function wrap( newNode, referenceNode ) {
 	referenceNode.parentNode.insertBefore( newNode, referenceNode );
 	newNode.appendChild( referenceNode );
 }
+
+/**
+ * Removes any HTML tags from the provided string.
+ *
+ * @param {string} html The string containing html.
+ *
+ * @return {string} The text content with any html removed.
+ */
+export function stripHTML( html ) {
+	const document = new DOMParser().parseFromString( html, 'text/html' );
+	return document.body.textContent || '';
+}
diff --git a/packages/dom/src/test/dom.js b/packages/dom/src/test/dom.js
@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { isHorizontalEdge, placeCaretAtHorizontalEdge, isTextField } from '../dom';
+import { isHorizontalEdge, placeCaretAtHorizontalEdge, isTextField, stripHTML } from '../dom';
 
 describe( 'DOM', () => {
 	let parent;
@@ -153,4 +153,16 @@ describe( 'DOM', () => {
 			expect( isTextField( document.createElement( 'div' ) ) ).toBe( false );
 		} );
 	} );
+
+	describe( 'stripHTML', () => {
+		it( 'removes any HTML from a text string', () => {
+			expect( stripHTML( 'This is <em>emphasized</em>' ) ).toBe( 'This is emphasized' );
+		} );
+
+		it( 'removes script tags, but does not execute them', () => {
+			const html = 'This will not <script>throw "Error"</script>';
+			expect( stripHTML( html ) ).toBe( 'This will not throw "Error"' );
+			expect( () => stripHTML( html ) ).not.toThrow();
+		} );
+	} );
 } );