VideoPress: use core lib to handle html entities (#28376)

* add @wordpress/html-entities dep * decode title and description html entities * dont invent the weel again. Renove decodeEntities * changelog * Update projects/packages/videopress/changelog/update-videopress-use-core-pkg-to-handle-entities Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com> Co-authored-by: Marin Atanasov <8436925+tyxla@users.noreply.github.com>
Automattic · Jan 16, 2023 · 1bb4df9 · 1bb4df9
1 parent ec84865
commit 1bb4df9
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 43 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/packages/videopress/changelog/update-videopress-use-core-pkg-to-handle-entities b/projects/packages/videopress/changelog/update-videopress-use-core-pkg-to-handle-entities
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+VideoPress: use @wordpress/html-entities to handle html entities
diff --git a/projects/packages/videopress/package.json b/projects/packages/videopress/package.json
@@ -78,6 +78,7 @@
 		"@wordpress/dom-ready": "3.22.0",
 		"@wordpress/editor": "12.21.0",
 		"@wordpress/element": "4.20.0",
+		"@wordpress/html-entities": "3.24.0",
 		"@wordpress/i18n": "4.22.0",
 		"@wordpress/icons": "9.13.0",
 		"@wordpress/url": "3.23.0",

diff --git a/projects/packages/videopress/src/client/block-editor/hooks/use-video-data/index.ts b/projects/packages/videopress/src/client/block-editor/hooks/use-video-data/index.ts
@@ -3,11 +3,11 @@
  */
 import apiFetch from '@wordpress/api-fetch';
 import { useEffect, useState } from '@wordpress/element';
+import { decodeEntities } from '@wordpress/html-entities';
 /**
  * Internal dependencies
  */
 import getMediaToken from '../../../lib/get-media-token';
-import { decodeEntities } from '../../../lib/url';
 /**
  * Types
  */

diff --git a/projects/packages/videopress/src/client/lib/url/index.ts b/projects/packages/videopress/src/client/lib/url/index.ts
@@ -129,41 +129,3 @@ export function buildVideoPressURL(
 export const removeFileNameExtension = ( name: string ) => {
 	return name.replace( /\.[^/.]+$/, '' );
 };
-
-/**
- * Helper function to create and return textarea element.
- * Based on https://github.com/Automattic/wp-calypso/blob/1ea156fe734d57fdf13cd332e82ac688eacd3bee/client/lib/formatting/decode/browser.js#L9
- *
- * > Moreover, using textContent can prevent XSS attacks.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent#differences_from_innerhtml
- *
- * It will be used to decode HTML entities,
- * As long as element doesn’t get inserted in the DOM,
- * we’re good in terms of security,
- * since textContent will return the content without evaluating it.
- * @returns {HTMLTextAreaElement} - Textarea element
- */
-const createTextareaElement = (): HTMLTextAreaElement => {
-	if ( document.implementation && document.implementation.createHTMLDocument ) {
-		return document.implementation.createHTMLDocument( '' ).createElement( 'textarea' );
-	}
-
-	return document.createElement( 'textarea' );
-};
-
-/**
- * Decode the given text, replacing HTML entities
- * with their corresponding characters.
- *
- * @param {string} text     - Text to decode
- * @returns {string} Decoded text
- */
-export function decodeEntities( text: string ): string {
-	// Create temporary element to decode entities
-	const element = createTextareaElement();
-	element.innerHTML = text;
-	const decoded = element.textContent;
-	element.innerHTML = '';
-	return decoded;
-}