; }; //v=====--------------------< Brew Renderer Component >-------------------=====v// let renderedPages = []; let rawPages = []; const BrewRenderer = (props)=>{ props = { text : '', style : '', renderer : 'legacy', theme : '5ePHB', lang : '', errors : [], currentEditorCursorPageNum : 1, currentEditorViewPageNum : 1, currentBrewRendererPageNum : 1, themeBundle : {}, onPageChange : ()=>{}, ...props }; const [state, setState] = useState({ isMounted : false, visibility : 'hidden', visiblePages : [], centerPage : 1 }); const [displayOptions, setDisplayOptions] = useState({ zoomLevel : 100, spread : 'single', startOnRight : true, pageShadows : true, rowGap : 5, columnGap : 10, }); //useEffect to store or gather toolbar state from storage useEffect(()=>{ const toolbarState = JSON.parse(window.localStorage.getItem(TOOLBAR_STATE_KEY)); toolbarState && setDisplayOptions(toolbarState); }, []); const [headerState, setHeaderState] = useState(false); const mainRef = useRef(null); const pagesRef = useRef(null); if(props.renderer == 'legacy') { rawPages = props.text.split(PAGEBREAK_REGEX_LEGACY); } else { rawPages = props.text.split(PAGEBREAK_REGEX_V3); } const handlePageVisibilityChange = (pageNum, isVisible, isCenter)=>{ setState((prevState)=>{ const updatedVisiblePages = new Set(prevState.visiblePages); if(!isCenter) isVisible ? updatedVisiblePages.add(pageNum) : updatedVisiblePages.delete(pageNum); return { ...prevState, visiblePages : [...updatedVisiblePages].sort((a, b)=>a - b), centerPage : isCenter ? pageNum : prevState.centerPage }; }); if(isCenter) props.onPageChange(pageNum); }; const isInView = (index)=>{ if(!state.isMounted) return false; if(index == props.currentEditorCursorPageNum - 1) //Already rendered before this step return false; if(Math.abs(index - props.currentBrewRendererPageNum - 1) <= 3) return true; return false; }; const renderDummyPage = (index)=>{ return

; }; const renderStyle = ()=>{ const themeStyles = props.themeBundle?.joinedStyles ?? ''; const cleanStyle = safeHTML(`${themeStyles} \n\n `); return
; }; const renderPage = (pageText, index)=>{ let styles = { ...(!displayOptions.pageShadows ? { boxShadow: 'none' } : {}) // Add more conditions as needed }; let classes = 'page'; let attributes = {}; if(props.renderer == 'legacy') { pageText.replace(COLUMNBREAK_REGEX_LEGACY, '```\n````\n'); // Allow Legacy brews to use `\column(break)` const html = MarkdownLegacy.render(pageText); return ; } else { if(pageText.startsWith('\\page')) { const firstLineTokens = Markdown.marked.lexer(pageText.split('\n', 1)[0])[0].tokens; const injectedTags = firstLineTokens?.find((obj)=>obj.injectedTags !== undefined)?.injectedTags; if(injectedTags) { styles = { ...styles, ...injectedTags.styles }; styles = _.mapKeys(styles, (v, k)=>k.startsWith('--') ? k : _.camelCase(k)); // Convert CSS to camelCase for React classes = [classes, injectedTags.classes].join(' ').trim(); attributes = injectedTags.attributes; } pageText = pageText.includes('\n') ? pageText.substring(pageText.indexOf('\n') + 1) : ''; // Remove the \page line } // DO NOT REMOVE!!! REQUIRED FOR BACKWARDS COMPATIBILITY WITH NON-UPGRADABLE VERSIONS OF CHROME. 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 if(rawPages.length > props.currentEditorCursorPageNum -1) renderedPages[props.currentEditorCursorPageNum - 1] = renderPage(rawPages[props.currentEditorCursorPageNum - 1], props.currentEditorCursorPageNum - 1); _.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 scrollToHash = (hash)=>{ if(!hash) return; const iframeDoc = document.getElementById('BrewRenderer').contentDocument; let anchor = iframeDoc.querySelector(hash); if(anchor) { anchor.scrollIntoView({ behavior: 'smooth' }); } else { // Use MutationObserver to wait for the element if it's not immediately available new MutationObserver((mutations, obs)=>{ anchor = iframeDoc.querySelector(hash); if(anchor) { anchor.scrollIntoView({ behavior: 'smooth' }); obs.disconnect(); } }).observe(iframeDoc, { childList: true, subtree: true }); } }; const frameDidMount = ()=>{ //This triggers when iFrame finishes internal "componentDidMount" scrollToHash(window.location.hash); setTimeout(()=>{ //We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame 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 handleDisplayOptionsChange = (newDisplayOptions)=>{ setDisplayOptions(newDisplayOptions); localStorage.setItem(TOOLBAR_STATE_KEY, JSON.stringify(newDisplayOptions)); }; const pagesStyle = { zoom : `${displayOptions.zoomLevel}%`, columnGap : `${displayOptions.columnGap}px`, rowGap : `${displayOptions.rowGap}px` }; const renderedStyle = useMemo(()=>renderStyle(), [props.style, props.themeBundle]); renderedPages = useMemo(()=>renderPages(), [props.text, displayOptions]); return ( <> {/*render dummy page while iFrame is mounting.*/} {!state.isMounted ?

{renderDummyPage(1)}

: null}

0 ? state.visiblePages : [state.centerPage]} totalPages={rawPages.length} headerState={headerState} setHeaderState={setHeaderState}/> {/*render in iFrame so broken code doesn't crash the site.*/} {emitClick();}} >
{/* Apply CSS from Style tab and render pages from Markdown tab */} {state.isMounted && <> {renderedStyle}
{renderedPages}
}
{headerState ? : <>} ); }; export default BrewRenderer;