From be84a56d31225bdbe62b7b1ecd2f4bf631a21124 Mon Sep 17 00:00:00 2001
From: Alquen Sarmiento <sarmientoalquen@gmail.com>
Date: Wed, 22 Jan 2025 13:11:46 +0800
Subject: [PATCH] fix: only escape HTML if invalid

---
 src/block-components/typography/edit.js |  4 ++--
 src/block-components/typography/util.js | 14 ++++++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 src/block-components/typography/util.js

diff --git a/src/block-components/typography/edit.js b/src/block-components/typography/edit.js
index 595d7f3bd9..5a7642bb8b 100644
--- a/src/block-components/typography/edit.js
+++ b/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 (
 		<>
diff --git a/src/block-components/typography/util.js b/src/block-components/typography/util.js
new file mode 100644
index 0000000000..2bfc8cddc3
--- /dev/null
+++ b/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 )
+}