From ab8a75d89076b3b32d86c66c18b1b451065e2ca6 Mon Sep 17 00:00:00 2001
From: Ella <4710635+ellatrix@users.noreply.github.com>
Date: Wed, 31 May 2023 17:34:39 +0300
Subject: [PATCH] Iframe: remove obsolete styles HTML parsing (#51136)
---
.../src/components/iframe/index.js | 73 ++++++-------------
1 file changed, 24 insertions(+), 49 deletions(-)
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 619b2c5dc9eb6..f68ba0cb60ad1 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -104,7 +104,6 @@ async function loadScript( head, { id, src } ) {
function Iframe( {
contentRef,
children,
- head,
tabIndex = 0,
scale = 1,
frameSize = 0,
@@ -121,12 +120,7 @@ function Iframe( {
const [ , forceRender ] = useReducer( () => ( {} ) );
const [ iframeDocument, setIframeDocument ] = useState();
const [ bodyClasses, setBodyClasses ] = useState( [] );
- const styles = useParsedAssets( assets?.styles );
- const styleIds = styles.map( ( style ) => style.id );
const compatStyles = useCompatibilityStyles();
- const neededCompatStyles = compatStyles.filter(
- ( style ) => ! styleIds.includes( style.id )
- );
const scripts = useParsedAssets( assets?.scripts );
const clearerRef = useBlockSelectionClearer();
const [ before, writingFlowRef, after ] = useWritingFlow();
@@ -160,9 +154,18 @@ function Iframe( {
);
contentDocument.dir = ownerDocument.dir;
- documentElement.removeChild( contentDocument.head );
documentElement.removeChild( contentDocument.body );
+ for ( const compatStyle of compatStyles ) {
+ if ( contentDocument.getElementById( compatStyle.id ) ) {
+ continue;
+ }
+
+ contentDocument.head.appendChild(
+ compatStyle.cloneNode( true )
+ );
+ }
+
iFrameDocument.addEventListener(
'dragover',
preventFileDropDefault,
@@ -209,31 +212,9 @@ function Iframe( {
clearerRef,
writingFlowRef,
disabledRef,
+ headRef,
] );
- const styleAssets = (
- <>
-
- { [ ...styles, ...neededCompatStyles ].map(
- ( { tagName, href, id, rel, media, textContent } ) => {
- const TagName = tagName.toLowerCase();
-
- if ( TagName === 'style' ) {
- return (
-
- { textContent }
-
- );
- }
-
- return (
-
- );
- }
- ) }
-
- );
-
// Correct doctype is required to enable rendering in standards
// mode. Also preload the styles to avoid a flash of unstyled
// content.
@@ -288,25 +269,19 @@ function Iframe( {
>
{ iframeDocument &&
createPortal(
- <>
-
- { styleAssets }
- { head }
-
-
- { contentResizeListener }
-
- { children }
-
-
- ,
+
+ { contentResizeListener }
+
+ { children }
+
+ ,
iframeDocument.documentElement
) }