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)
Merge pull request #4534 from G-Ambatte/fixNewNavItem
2026-01-26 07:23:01 +00:00 · 2025-11-19 23:53:39 -05:00 · 2025-11-17 23:49:42 -05:00 · 2025-11-17 23:48:56 -05:00 · 2025-11-17 23:25:44 -05:00 · 2025-11-17 23:22:04 -05:00
10 changed files with 109 additions and 78 deletions
--- a/client/homebrew/editor/editor.jsx
+++ b/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)` }} />
 			</>;
 		}
 	},
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/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;
--- a/client/homebrew/navbar/newbrew.navitem.jsx
+++ b/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>
 	);
--- a/client/homebrew/pages/homePage/homePage.jsx
+++ b/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)
--- a/client/homebrew/pages/newPage/newPage.less
+++ b/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;
 		}
 	}
 }
+
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,7 @@
        "idb-keyval": "^6.2.2",
        "js-yaml": "^4.1.0",
        "jwt-simple": "^0.5.6",
-        "less": "^4.4.2",
+        "less": "^3.13.1",
        "lodash": "^4.17.21",
        "marked": "15.0.12",
        "marked-alignment-paragraphs": "^1.0.0",
@@ -9736,20 +9736,19 @@
      }
    },
    "node_modules/less": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/less/-/less-4.4.2.tgz",
-      "integrity": "sha512-j1n1IuTX1VQjIy3tT7cyGbX7nvQOsFLoIqobZv4ttI5axP923gA44zUj6miiA6R5Aoms4sEGVIIcucXUbRI14g==",
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/less/-/less-3.13.1.tgz",
+      "integrity": "sha512-SwA1aQXGUvp+P5XdZslUOhhLnClSLIjWvJhmd+Vgib5BFIr9lMNlQwmwUNOjXThF/A0x+MCYYPeWEfeWiLRnTw==",
      "license": "Apache-2.0",
      "dependencies": {
        "copy-anything": "^2.0.1",
-        "parse-node-version": "^1.0.1",
-        "tslib": "^2.3.0"
+        "tslib": "^1.10.0"
      },
      "bin": {
        "lessc": "bin/lessc"
      },
      "engines": {
-        "node": ">=14"
+        "node": ">=6"
      },
      "optionalDependencies": {
        "errno": "^0.1.1",
@@ -9757,7 +9756,7 @@
        "image-size": "~0.5.0",
        "make-dir": "^2.1.0",
        "mime": "^1.4.1",
-        "needle": "^3.1.0",
+        "native-request": "^1.0.5",
        "source-map": "~0.6.0"
      }
    },
@@ -9785,6 +9784,12 @@
        "semver": "bin/semver"
      }
    },
+    "node_modules/less/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "license": "0BSD"
+    },
    "node_modules/leven": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -10762,6 +10767,13 @@
        "url": "https://opencollective.com/napi-postinstall"
      }
    },
+    "node_modules/native-request": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/native-request/-/native-request-1.1.2.tgz",
+      "integrity": "sha512-/etjwrK0J4Ebbcnt35VMWnfiUX/B04uwGJxyJInagxDqf2z5drSt/lsOvEMWGYunz1kaLZAFrV4NDAbOoDKvAQ==",
+      "license": "MIT",
+      "optional": true
+    },
    "node_modules/natural-compare": {
      "version": "1.4.0",
      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -10822,23 +10834,6 @@
        "node": ">=10"
      }
    },
-    "node_modules/needle": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz",
-      "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "iconv-lite": "^0.6.3",
-        "sax": "^1.2.4"
-      },
-      "bin": {
-        "needle": "bin/needle"
-      },
-      "engines": {
-        "node": ">= 4.4.x"
-      }
-    },
    "node_modules/negotiator": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-1.0.0.tgz",
@@ -11356,15 +11351,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/parse-node-version": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
-      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.10"
-      }
-    },
    "node_modules/parse5": {
      "version": "7.3.0",
      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
@@ -12670,13 +12656,6 @@
        "truncate-utf8-bytes": "^1.0.0"
      }
    },
-    "node_modules/sax": {
-      "version": "1.4.3",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.3.tgz",
-      "integrity": "sha512-yqYn1JhPczigF94DMS+shiDMjDowYO6y9+wB/4WgO0Y19jWYk0lQ4tuG5KI7kj4FTp1wxPj5IFfcrz/s1c3jjQ==",
-      "license": "BlueOak-1.0.0",
-      "optional": true
-    },
    "node_modules/saxes": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -14243,6 +14222,7 @@
      "version": "2.8.1",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
      "license": "0BSD"
    },
    "node_modules/tty-browserify": {
--- a/package.json
+++ b/package.json
@@ -111,7 +111,7 @@
    "idb-keyval": "^6.2.2",
    "js-yaml": "^4.1.0",
    "jwt-simple": "^0.5.6",
-    "less": "^4.4.2",
+    "less": "^3.13.1",
    "lodash": "^4.17.21",
    "marked": "15.0.12",
    "marked-alignment-paragraphs": "^1.0.0",
--- a/shared/markdown.js
+++ b/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;
 };
--- a/themes/V3/UnearthedArcana/settings.json
+++ b/themes/V3/UnearthedArcana/settings.json
@@ -1,6 +1,6 @@
 {
  "name" : "UnearthedArcana",
  "renderer" : "V3",
-  "baseTheme" : false,
+  "baseTheme" : "Blank",
  "baseSnippets" : false
 }
--- a/themes/themes.json
+++ b/themes/themes.json
@@ -39,7 +39,7 @@
    "UnearthedArcana": {
      "name": "UnearthedArcana",
      "renderer": "V3",
-      "baseTheme": false,
+      "baseTheme": "Blank",
      "baseSnippets": false,
      "path": "UnearthedArcana"
    }
Author	SHA1	Message	Date
Trevor Buckner	31c034c029	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)	2025-11-19 23:53:39 -05:00
Trevor Buckner	6a02ed410b	Merge pull request #4534 from G-Ambatte/fixNewNavItem Update New Item on NavBar	2025-11-17 23:49:42 -05:00
Trevor Buckner	429ad4d63b	Linting and move checkLocalStorage inside confirmLocalStorageChange	2025-11-17 23:48:56 -05:00
Trevor Buckner	033893361d	Merge branch 'master' into fixNewNavItem	2025-11-17 23:25:44 -05:00
Trevor Buckner	f1ae7e4d26	Merge pull request #4533 from naturalcrit/fix-editor-issues Fix small bugs towards 3.20	2025-11-17 23:22:04 -05:00
Trevor Buckner	059d6d7939	Lint	2025-11-17 23:09:47 -05:00
G.Ambatte	73b7d6887b	Fix typo in state property name for snippet bar height	2025-11-17 17:09:23 +13:00
Víctor Losada Hernández	f1891d9250	use state instead	2025-11-16 19:02:37 +01:00
G.Ambatte	a17ccdb2a2	Merge branch 'master' into fixNewNavItem	2025-11-16 13:19:08 +13:00
G.Ambatte	c784e2e63b	Fix New item on Nav Bar	2025-11-16 13:12:40 +13:00
Víctor Losada Hernández	1d061e6d3f	Merge branch 'master' of https://github.com/naturalcrit/homebrewery into fix-editor-issues	2025-11-15 23:41:10 +01:00
Víctor Losada Hernández	5e7fdb34a9	Revert "remove new brew nav item from new page" This reverts commit `b6478f3964`.	2025-11-15 23:40:01 +01:00
Víctor Losada Hernández	677e8eaf6c	Merge pull request #4532 from G-Ambatte/fixUnearthedArcanaTheme Fix UnearthedArcana theme	2025-11-15 17:52:59 +01:00
Víctor Losada Hernández	b6478f3964	remove new brew nav item from new page	2025-11-15 17:25:25 +01:00
Víctor Losada Hernández	f18a73e1ff	fix glitch in newPage	2025-11-15 17:25:05 +01:00
Víctor Losada Hernández	b78f5079df	bring back update native func	2025-11-15 16:59:32 +01:00
Víctor Losada Hernández	7bc41f9b0d	fix snippetbar hidden	2025-11-15 16:49:48 +01:00
Víctor Losada Hernández	a217779e76	fix snippetbar wrap	2025-11-15 16:05:21 +01:00
G.Ambatte	ad3d63a5b1	Merge branch 'master' into fixUnearthedArcanaTheme	2025-11-15 18:44:33 +13:00
G.Ambatte	93ef9bfd51	Set UnearthedArcana baseTheme to Blank	2025-11-15 18:33:22 +13:00
Trevor Buckner	972c675629	Merge pull request #4527 from MiniX16/master Add unsaved-change warning to Home page editor	2025-11-14 23:04:19 -05:00
Trevor Buckner	fa9f180759	Modify slightly to follow the existing structure in editPage.jsx for easier merging of these pages later	2025-11-14 22:59:34 -05:00
Trevor Buckner	5625121b82	Merge branch 'master' into master	2025-11-14 22:25:47 -05:00
G.Ambatte	d73b695127	Merge branch 'master' into master	2025-11-15 14:34:13 +13:00
MiniX16	b66625e59d	Handle unsaved warning with onbeforeunload	2025-11-13 12:16:37 +01:00
MiniX16	590688f123	Add unsaved-change warning to Home page editor	2025-11-12 17:59:28 +01:00