fix (content attribute): only escape HTML if invalid (#3399)

Author: Arukuen

src/block-components/typography/edit.js

@@ -20,6 +20,7 @@ import {
 	ShadowControl,
 } from '~stackable/components'
 import { getAttributeName, getAttrNameFunction } from '~stackable/util'
+import { escapeHTMLIfInvalid } from './util'
 
 /**
  * WordPress dependencies
@@ -28,7 +29,6 @@ import {
 	useEffect, useState, useCallback, memo,
 } from '@wordpress/element'
 import { __ } from '@wordpress/i18n'
-import { escapeHTML } from '@wordpress/escape-html'
 import { applyFilters } from '@wordpress/hooks'
 
 const TYPOGRAPHY_SHADOWS = [
@@ -98,7 +98,7 @@ export const Controls = props => {
 		return () => clearTimeout( timeout )
 	}, [ updateAttribute, debouncedText, text ] )
 
-	const onChangeContent = useCallback( text => setDebouncedText( escapeHTML( text ) ), [] )
+	const onChangeContent = useCallback( text => setDebouncedText( escapeHTMLIfInvalid( text ) ), [] )
 
 	return (
 		<>

src/block-components/typography/util.js

@@ -0,0 +1,14 @@
+import { escapeHTML } from '@wordpress/escape-html'
+
+export const escapeHTMLIfInvalid = html => {
+	const parser = new DOMParser()
+	const doc = parser.parseFromString( html, 'text/html' )
+	const parseError = doc.querySelector( 'parsererror' )
+	const serialized = doc.body.innerHTML.trim()
+
+	// If valid, return the raw HTML
+	if ( ! parseError && serialized === html.trim() ) {
+		return html
+	}
+	return escapeHTML( html )
+}