From f364f054f8b73864964e6ef0392401012ae9648e Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Fri, 19 Jul 2024 01:33:56 -0400 Subject: [PATCH] restore `renderStyle` `renderStyle` is still necessary; it allows us to update the style live in the component render step as the user types into the style tab. Otherwise the style is only rendered once and never updates. React also discourages directly editing the DOM ourselves, because it makes changes to the DOM that react cannot track; we should aim to provide all DOM writes inside of the component render function instead of using `document.createElement`, etc. Too that end, this commit reduces the `loadAllStylesAndSnippets` function to just fetch and parse the data; actual rendering is moved back to `renderStyle()` --- client/homebrew/brewRenderer/brewRenderer.jsx | 45 +++++++------------ 1 file changed, 15 insertions(+), 30 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index fa17dfee2..fce84b5f7 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -69,6 +69,7 @@ const BrewRenderer = (props)=>{ height : PAGE_HEIGHT, isMounted : false, visibility : 'hidden', + themeBundle : {} }); const mainRef = useRef(null); @@ -128,6 +129,11 @@ const BrewRenderer = (props)=>{ ; }; + const renderStyle = ()=>{ + const cleanStyle = props.style; //DOMPurify.sanitize(props.style, purifyConfig); + return
${cleanStyle} ` }} />; + }; + const renderPage = (pageText, index)=>{ if(props.renderer == 'legacy') { const html = MarkdownLegacy.render(pageText); @@ -167,39 +173,17 @@ const BrewRenderer = (props)=>{ } }; + // Loads the theme bundle and parses it out. Called when the iFrame is first mounted, and when a new theme is selected const loadAllBrewStylesAndSnippets = ()=>{ - /* - Loads the theme bundle and parses it out. - These functionally replaces the previous renderStyles() function but needs to wait until the window is mounted. - */ const rendererPath = isStaticTheme(props.renderer, props.theme) ? `/${props.renderer}/` : '/'; - // Check for a User or Static Theme to change the endpoint path + + // Load the themeBundle from the endpoint as an object fetch(`${window.location.protocol}//${window.location.host}/theme${rendererPath}${props.theme}`).then((response)=>response.json()).then((themeBundle)=>{ - // Load the themeBundle from the endpoint as an object. - const documentFrame = document.getElementById('BrewRenderer'); - const iframeDocument = documentFrame.contentDocument || documentFrame.contentWindow.document; - // Find the brew frame Document root. - - for (let style=0; style < themeBundle.styles.length; style++){ - /* - Walk through the styles array on the Theme Bundle. - Create a new style node and add it to the Brew Frame - */ - const newStyles = document.createElement('style'); - newStyles.appendChild(document.createTextNode(`${themeBundle.styles[style]}\n`)); - iframeDocument.head.appendChild(newStyles); - - } - /* - Add the local brew styling to the Brew Frame - */ - const newStyles = document.createElement('style'); - const cleanStyle = props.style; //DOMPurify.sanitize(props.style, purifyConfig); - - newStyles.appendChild(document.createTextNode(`/* Local Brew Styling */\n\n${cleanStyle}`)); - iframeDocument.head.appendChild(newStyles); - - // TO-DO - Walk the snippets returns and add them to the appropriate menu. + themeBundle.joinedStyles = themeBundle.styles.map(style => ``).join('\n\n'); //DOMPurify.sanitize(joinedStyles, purifyConfig); + setState((prevState)=>({ + ...prevState, + themeBundle : themeBundle + })); }); }; @@ -260,6 +244,7 @@ const BrewRenderer = (props)=>{ {state.isMounted && <> + {renderStyle()}
{renderPages()}