Move Themes/styles into iFrame Head

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -106,8 +106,8 @@ const BrewRenderer = (props)=>{
 
 	const renderStyle = ()=>{
 		const cleanStyle = props.style; //DOMPurify.sanitize(props.style, purifyConfig);
-		const themeStyles = props.themeBundle?.joinedStyles ?? '<style>@import url("/themes/V3/Blank/style.css");</style>';
+		const themeStyles = props.themeBundle?.joinedStyles ?? '@import url("/themes/V3/Blank/style.css");';
-		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `${themeStyles} \n\n <style> ${cleanStyle} </style>` }} />;
+		return `${themeStyles}\n\n${cleanStyle}`;
 	};
 
 	const renderPage = (pageText, index)=>{
@@ -202,7 +202,7 @@ const BrewRenderer = (props)=>{
 			<ToolBar onZoomChange={handleZoom} currentPage={props.currentBrewRendererPageNum}  totalPages={rawPages.length}/>
 
 			{/*render in iFrame so broken code doesn't crash the site.*/}
-			<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT}
+			<Frame id='BrewRenderer' initialContent={INITIAL_CONTENT} head={<style>{renderedStyle}</style>}
 				style={{ width: '100%', height: '100%', visibility: state.visibility }}
 				contentDidMount={frameDidMount}
 				onClick={()=>{emitClick();}}
@@ -217,7 +217,6 @@ const BrewRenderer = (props)=>{
 					{state.isMounted
 						&&
 						<>
-							{renderedStyle}
 							<div className='pages' lang={`${props.lang || 'en'}`} style={{ zoom: `${state.zoom}%` }}>
 								{renderedPages}
 							</div>

shared/helpers.js

@@ -44,7 +44,7 @@ const fetchThemeBundle = async (obj, renderer, theme)=>{
 	if(!res) return;
 
 	const themeBundle = res.body;
-	themeBundle.joinedStyles = themeBundle.styles.map((style)=>`<style>${style}</style>`).join('\n\n');
+	themeBundle.joinedStyles = themeBundle.styles.map((style)=>`${style}`).join('\n\n');
 	obj.setState((prevState)=>({
 		...prevState,
 		themeBundle : themeBundle