Rework Marked custom HTML renderer to skip preprocess step

Marked Variables are getting cleared when the custom HTML renderer runs, because Marked.parse re-runs the whole pipeline, including the preprocessor.

Preprocess should only be run once globally during the pipeline, or the original results get overwritten (Marked Variables clears its global array of variables each time it is run)

changelog.md

@@ -143,6 +143,7 @@ Fixes issue [#2963](https://github.com/naturalcrit/homebrewery/issues/2963)
 * [x] Fixed edge case crash on admin page
 }}
 
+\page
 
 ### Wednesday 7/09/2025 - v3.19.3
 

client/homebrew/editor/editor.jsx

@@ -58,7 +58,7 @@ const Editor = createClass({
 		return {
 			editorTheme      : this.props.editorTheme,
 			view             : 'text', //'text', 'style', 'meta', 'snippet'
-			snippetbarHeight : 25
+			snippetBarHeight : 26,
 		};
 	},
 
@@ -85,7 +85,15 @@ const Editor = createClass({
 				editorTheme : editorTheme
 			});
 		}
-		this.setState({ snippetbarHeight: document.querySelector('.editor > .snippetBar').offsetHeight });
+		const snippetBar = document.querySelector('.editor > .snippetBar');
+		if (!snippetBar) return;
+
+		this.resizeObserver = new ResizeObserver(entries => {
+			const height = document.querySelector('.editor > .snippetBar').offsetHeight;
+			this.setState({ snippetBarHeight: height });
+		});
+
+		this.resizeObserver.observe(snippetBar);
 	},
 
 	componentDidUpdate : function(prevProps, prevState, snapshot) {
@@ -108,6 +116,10 @@ const Editor = createClass({
 		}
 	},
 
+	componentWillUnmount() {
+		if (this.resizeObserver) this.resizeObserver.disconnect();
+	},
+
 	handleControlKeys : function(e){
 		if(!(e.ctrlKey && e.metaKey && e.shiftKey)) return;
 		const LEFTARROW_KEY = 37;
@@ -408,11 +420,7 @@ const Editor = createClass({
 	},
 
 	//Called when there are changes to the editor's dimensions
-	update : function(){
-		const snipHeight = document.querySelector('.editor > .snippetBar').offsetHeight;
-		if(snipHeight !== this.state.snippetbarHeight)
-			this.setState({ snippetbarHeight: snipHeight });
-	},
+	update : function(){},
 
 	updateEditorTheme : function(newTheme){
 		window.localStorage.setItem(EDITOR_THEME_KEY, newTheme);
@@ -437,7 +445,7 @@ const Editor = createClass({
 					onChange={this.props.onBrewChange('text')}
 					editorTheme={this.state.editorTheme}
 					rerenderParent={this.rerenderParent}
-					style={{  height: `calc(100% - ${this.state.snippetbarHeight}px)` }} />
+					style={{  height: `calc(100% - ${this.state.snippetBarHeight}px)` }} />
 			</>;
 		}
 		if(this.isStyle()){
@@ -451,7 +459,7 @@ const Editor = createClass({
 					enableFolding={true}
 					editorTheme={this.state.editorTheme}
 					rerenderParent={this.rerenderParent}
-					style={{  height: `calc(100% - ${this.state.snippetbarHeight}px)` }} />
+					style={{  height: `calc(100% - ${this.state.snippetBarHeight}px)` }} />
 			</>;
 		}
 		if(this.isMeta()){
@@ -468,7 +476,6 @@ const Editor = createClass({
 					userThemes={this.props.userThemes}/>
 			</>;
 		}
-
 		if(this.isSnip()){
 			if(!this.props.brew.snippets) { this.props.brew.snippets = DEFAULT_SNIPPET_TEXT; }
 			return <>
@@ -481,7 +488,7 @@ const Editor = createClass({
 					enableFolding={true}
 					editorTheme={this.state.editorTheme}
 					rerenderParent={this.rerenderParent}
-					style={{  height: `calc(100% - ${this.state.snippetbarHeight}px)` }} />
+					style={{  height: `calc(100% -${this.state.snippetBarHeight}px)` }} />
 			</>;
 		}
 	},

client/homebrew/editor/snippetbar/snippetbar.less

@@ -14,7 +14,7 @@
 	.snippets {
 		display         : flex;
 		justify-content : flex-start;
-		min-width       : 432.18px;  //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
+		min-width       : 499.35px;  //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
 	}
 
 	.editors {
@@ -237,7 +237,7 @@
 	}
 
 }
-@container editor (width < 683px) {
+@container editor (width < 750px) {
 	.snippetBar {
 		.editors { 
 			flex            : 1;

client/homebrew/navbar/newbrew.navitem.jsx

@@ -3,19 +3,16 @@ const _ = require('lodash');
 const Nav = require('client/homebrew/navbar/nav.jsx');
 const { splitTextStyleAndMetadata } = require('../../../shared/helpers.js'); // Importing the function from helpers.js
 
-const BREWKEY  = 'homebrewery-new';
-const STYLEKEY = 'homebrewery-new-style';
-const METAKEY = 'homebrewery-new-meta';
+const BREWKEY  = 'HB_newPage_content';
+const STYLEKEY = 'HB_newPage_style';
+const METAKEY = 'HB_newPage_meta';
 
 const NewBrew = ()=>{
 	const handleFileChange = (e)=>{
 		const file = e.target.files[0];
 		if(!file) return;
 
-		const currentNew = localStorage.getItem(BREWKEY);
-		if(currentNew && !confirm(
-			`You have some text in the new brew space, if you load a file that text will be lost, are you sure you want to load the file?`
-		)) return;
+		if(!confirmLocalStorageChange()) return;
 
 		const reader = new FileReader();
 		reader.onload = (e)=>{
@@ -37,12 +34,35 @@ const NewBrew = ()=>{
 
 			alert(`This file is invalid: ${!type ? 'Missing file extension' :`.${type} files are not supported`}. Only .txt files exported from the Homebrewery are allowed.`);
 
-
 			console.log(file);
 		};
 		reader.readAsText(file);
 	};
 
+	const confirmLocalStorageChange = ()=>{
+		const currentText  = localStorage.getItem(BREWKEY);
+		const currentStyle = localStorage.getItem(STYLEKEY);
+		const currentMeta  = localStorage.getItem(METAKEY);
+
+		// TRUE if no data in any local storage key
+		// TRUE if data in any local storage key AND approval given
+		// FALSE if data in any local storage key AND approval declined
+		return (!(currentText || currentStyle || currentMeta) || confirm(
+			`You have made changes in the new brew space. If you continue, that information will be PERMANENTLY LOST.\nAre you sure you wish to continue?`
+		));
+	};
+
+	const clearLocalStorage = ()=>{
+		if(!confirmLocalStorageChange()) return;
+
+		localStorage.removeItem(BREWKEY);
+		localStorage.removeItem(STYLEKEY);
+		localStorage.removeItem(METAKEY);
+
+		window.location.href = '/new';
+		return;
+	};
+
 
 	return (
 		<Nav.dropdown>
@@ -50,24 +70,31 @@ const NewBrew = ()=>{
 				className='new'
 				color='purple'
 				icon='fa-solid fa-plus-square'>
-                new
+					new
 			</Nav.item>
 			<Nav.item
-				className='fromBlank'
+				className='new'
 				href='/new'
 				newTab={true}
 				color='purple'
 				icon='fa-solid fa-file'>
-                from blank
+					resume draft
+			</Nav.item>
+			<Nav.item
+				className='fromBlank'
+				newTab={true}
+				color='yellow'
+				icon='fa-solid fa-file-circle-plus'
+				onClick={()=>{ clearLocalStorage(); }}>
+					from blank
 			</Nav.item>
-
 			<Nav.item
 				className='fromFile'
-				color='purple'
+				color='green'
 				icon='fa-solid fa-upload'
 				onClick={()=>{ document.getElementById('uploadTxt').click(); }}>
 				<input id='uploadTxt' className='newFromLocal' type='file' onChange={handleFileChange} style={{ display: 'none' }} />
-                from file
+					from file
 			</Nav.item>
 		</Nav.dropdown>
 	);

client/homebrew/pages/homePage/homePage.jsx

@@ -53,8 +53,9 @@ const HomePage =(props)=>{
 	const [isSaving                  , setIsSaving]                   = useState(false);
 	const [autoSaveEnabled           , setAutoSaveEnable]             = useState(false);
 
-	const editorRef     = useRef(null);
-	const lastSavedBrew = useRef(_.cloneDeep(props.brew));
+	const editorRef         = useRef(null);
+	const lastSavedBrew     = useRef(_.cloneDeep(props.brew));
+	const unsavedChangesRef = useRef(unsavedChanges);
 
 	useEffect(()=>{
 		fetchThemeBundle(setError, setThemeBundle, currentBrew.renderer, currentBrew.theme);
@@ -70,12 +71,20 @@ const HomePage =(props)=>{
 		};
 
 		document.addEventListener('keydown', handleControlKeys);
-
+		window.onbeforeunload = ()=>{
+			if(unsavedChangesRef.current)
+				return 'You have unsaved changes!';
+		};
 		return ()=>{
 			document.removeEventListener('keydown', handleControlKeys);
+			window.onbeforeunload = null;
 		};
 	}, []);
 
+	useEffect(()=>{
+		unsavedChangesRef.current = unsavedChanges;
+	}, [unsavedChanges]);
+
 	const save = ()=>{
 		request.post('/api')
 			.send(currentBrew)

client/homebrew/pages/newPage/newPage.less

@@ -1,12 +1,15 @@
 .newPage {
 	.navItem.save {
-		.fadeInRight();
-		.transition(opacity);
 		background-color : @orange;
+		transition:all 0.2s;
 		&:hover { background-color : @green; }
+		
 		&.neverSaved {
-			.fadeOutRight();
+			translate:-100%;
 			opacity: 0;
+			background-color :#333;
+			cursor:auto;
 		}
 	}
 }
+

shared/markdown.js

@@ -31,7 +31,12 @@ renderer.html = function (token) {
 		const openTag = html.substring(0, html.indexOf('>')+1);
 		html = html.substring(html.indexOf('>')+1);
 		html = html.substring(0, html.lastIndexOf('</div>'));
-		return `${openTag} ${Marked.parse(html)} </div>`;
+
+		// Repeat the markdown processing for content inside the div, minus the preprocessing and postprocessing hooks which should only run once globally
+		const opts = Marked.defaults;
+		const tokens = Marked.lexer(html, opts);
+		Marked.walkTokens(tokens, opts.walkTokens);
+		return `${openTag} ${Marked.parser(tokens, opts)} </div>`;
 	}
 	return html;
 };

themes/V3/UnearthedArcana/settings.json

@@ -1,6 +1,6 @@
 {
   "name" : "UnearthedArcana",
   "renderer" : "V3",
-  "baseTheme" : false,
+  "baseTheme" : "Blank",
   "baseSnippets" : false
 }

themes/themes.json

@@ -39,7 +39,7 @@
     "UnearthedArcana": {
       "name": "UnearthedArcana",
       "renderer": "V3",
-      "baseTheme": false,
+      "baseTheme": "Blank",
       "baseSnippets": false,
       "path": "UnearthedArcana"
     }