0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-27 18:13:08 +00:00

Move Themes/styles into iFrame Head

This commit is contained in:
Trevor Buckner
2024-10-16 00:04:49 -04:00
parent 17b77f5460
commit 7c49088656
2 changed files with 4 additions and 5 deletions

View File

@@ -106,8 +106,8 @@ const BrewRenderer = (props)=>{
const renderStyle = ()=>{ const renderStyle = ()=>{
const cleanStyle = props.style; //DOMPurify.sanitize(props.style, purifyConfig); 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)=>{ const renderPage = (pageText, index)=>{
@@ -202,7 +202,7 @@ const BrewRenderer = (props)=>{
<ToolBar onZoomChange={handleZoom} currentPage={props.currentBrewRendererPageNum} totalPages={rawPages.length}/> <ToolBar onZoomChange={handleZoom} currentPage={props.currentBrewRendererPageNum} totalPages={rawPages.length}/>
{/*render in iFrame so broken code doesn't crash the site.*/} {/*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 }} style={{ width: '100%', height: '100%', visibility: state.visibility }}
contentDidMount={frameDidMount} contentDidMount={frameDidMount}
onClick={()=>{emitClick();}} onClick={()=>{emitClick();}}
@@ -217,7 +217,6 @@ const BrewRenderer = (props)=>{
{state.isMounted {state.isMounted
&& &&
<> <>
{renderedStyle}
<div className='pages' lang={`${props.lang || 'en'}`} style={{ zoom: `${state.zoom}%` }}> <div className='pages' lang={`${props.lang || 'en'}`} style={{ zoom: `${state.zoom}%` }}>
{renderedPages} {renderedPages}
</div> </div>

View File

@@ -44,7 +44,7 @@ const fetchThemeBundle = async (obj, renderer, theme)=>{
if(!res) return; if(!res) return;
const themeBundle = res.body; 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)=>({ obj.setState((prevState)=>({
...prevState, ...prevState,
themeBundle : themeBundle themeBundle : themeBundle