; }; //v=====--------------------< Brew Renderer Component >-------------------=====v// const renderedPages = []; let rawPages = []; const BrewRenderer = (props)=>{ props = { text : '', style : '', renderer : 'legacy', theme : '5ePHB', lang : '', errors : [], currentEditorPage : 0, ...props }; const [state, setState] = useState({ viewablePageNumber : 0, height : PAGE_HEIGHT, isMounted : false, visibility : 'hidden', }); const mainRef = useRef(null); if(props.renderer == 'legacy') { rawPages = props.text.split('\\page'); } else { rawPages = props.text.split(/^\\page$/gm); } useEffect(()=>{ // Unmounting steps return ()=>{window.removeEventListener('resize', updateSize);}; }, []); const updateSize = ()=>{ setState((prevState)=>({ ...prevState, height : mainRef.current.parentNode.clientHeight, })); }; const handleScroll = (e)=>{ const target = e.target; setState((prevState)=>({ ...prevState, viewablePageNumber : Math.floor(target.scrollTop / target.scrollHeight * rawPages.length) })); }; const isInView = (index)=>{ if(!state.isMounted) return false; if(index == props.currentEditorPage) //Already rendered before this step return false; if(Math.abs(index - state.viewablePageNumber) <= 3) return true; return false; }; const renderPageInfo = ()=>{ return

{props.renderer}

{state.viewablePageNumber + 1} / {rawPages.length}

; }; const renderDummyPage = (index)=>{ return

; }; const renderStyle = ()=>{ if(!props.style) return; const cleanStyle = DOMPurify.sanitize(props.style, purifyConfig); //return
@layer styleTab {\n${sanitizeScriptTags(props.style)}\n} ` }} />; return
${cleanStyle} ` }} />; }; const renderPage = (pageText, index)=>{ if(props.renderer == 'legacy') { const html = MarkdownLegacy.render(pageText); return ; } else { pageText += `\n\n \n\\column\n `; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear) const html = Markdown.render(pageText, index); return ; } }; const renderPages = ()=>{ if(props.errors && props.errors.length) return renderedPages; if(rawPages.length != renderedPages.length) // Re-render all pages when page count changes renderedPages.length = 0; // Render currently-edited page first so cross-page effects (variables, links) can propagate out first renderedPages[props.currentEditorPage] = renderPage(rawPages[props.currentEditorPage], props.currentEditorPage); _.forEach(rawPages, (page, index)=>{ if((isInView(index) || !renderedPages[index]) && typeof window !== 'undefined'){ renderedPages[index] = renderPage(page, index); // Render any page not yet rendered, but only re-render those in PPR range } }); return renderedPages; }; const handleControlKeys = (e)=>{ if(!(e.ctrlKey || e.metaKey)) return; const P_KEY = 80; if(e.keyCode == P_KEY && props.allowPrint) printCurrentBrew(); if(e.keyCode == P_KEY) { e.stopPropagation(); e.preventDefault(); } }; const frameDidMount = ()=>{ //This triggers when iFrame finishes internal "componentDidMount" setTimeout(()=>{ //We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame updateSize(); window.addEventListener('resize', updateSize); renderPages(); //Make sure page is renderable before showing setState((prevState)=>({ ...prevState, isMounted : true, visibility : 'visible' })); }, 100); }; const emitClick = ()=>{ // Allow clicks inside iFrame to interact with dropdowns, etc. from outside if(!window || !document) return; document.dispatchEvent(new MouseEvent('click')); }; const rendererPath = props.renderer == 'V3' ? 'V3' : 'Legacy'; const themePath = props.theme ?? '5ePHB'; const baseThemePath = Themes[rendererPath][themePath].baseTheme; return ( <> {/*render dummy page while iFrame is mounting.*/} {!state.isMounted ?

{renderDummyPage(1)}

: null}

{/*render in iFrame so broken code doesn't crash the site.*/} {emitClick();}} >
{baseThemePath && } {/* Apply CSS from Style tab and render pages from Markdown tab */} {state.isMounted && <> {renderStyle()}
{renderPages()}
}
{renderPageInfo()} ); }; module.exports = BrewRenderer;