Repository: naturalcrit/homebrewery
Pull request #4099 (2025-03-17 21:09:09)

Fix minor v3.18.0 issues
This PR seeks to revert the changes to hard breaks from PR #4058, in order to eliminate the issues as reported in [this Reddit post](https://redd.it/1jcor5e).

This PR also adds a `<div class='columnSplit'></div>` to the end of every BrewPage, which will restore the simulated `column-fill: auto` functionality to older versions of Chrome.


Patch:
diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx
index 8f0f2f2f..10d94c5a 100644
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -39,7 +39,7 @@ const BrewPage = (props)=>{
 		...props
 	};
 	const pageRef = useRef(null);
-	const cleanText = safeHTML(props.contents);
+	const cleanText = safeHTML(`${props.contents}\n<div class="columnSplit"></div>\n`);
 
 	useEffect(()=>{
 		if(!pageRef.current) return;
diff --git a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less
index 6180decc..9e5a4a73 100644
--- a/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less
+++ b/client/homebrew/brewRenderer/notificationPopup/notificationPopup.less
@@ -85,4 +85,9 @@
 		display          : inline-block;
 		width            : 100%;
 	}
+	.blank {
+		height : 1em;
+		margin-top: 0;
+		& + * { margin-top: 0; }
+	}
 }
\ No newline at end of file
diff --git a/client/homebrew/pages/basePages/uiPage/uiPage.less b/client/homebrew/pages/basePages/uiPage/uiPage.less
index 49cb8311..e1013fa8 100644
--- a/client/homebrew/pages/basePages/uiPage/uiPage.less
+++ b/client/homebrew/pages/basePages/uiPage/uiPage.less
@@ -59,6 +59,13 @@
 				padding-left : 1.25em;
 				list-style   : square;
 			}
+			.blank {
+				height: 1em;
+				margin-top: 0;
+				& + * {
+					margin-top: 0;
+				}
+			}
 		}
 	}
 }
\ No newline at end of file
diff --git a/shared/naturalcrit/markdown.js b/shared/naturalcrit/markdown.js
index bed10977..3334b026 100644
--- a/shared/naturalcrit/markdown.js
+++ b/shared/naturalcrit/markdown.js
@@ -391,7 +391,7 @@ const forcedParagraphBreaks = {
 		}
 	},
 	renderer(token) {
-		return `<br>\n`.repeat(token.length);
+		return `<div class='blank'></div>\n`.repeat(token.length);
 	}
 };
 
diff --git a/themes/V3/5ePHB/style.less b/themes/V3/5ePHB/style.less
index 00804c19..1a751b18 100644
--- a/themes/V3/5ePHB/style.less
+++ b/themes/V3/5ePHB/style.less
@@ -689,6 +689,7 @@
 		background-repeat : no-repeat;
 		background-size   : contain;
 	}
+	.blank { height: 1.4em; }
 	h1 {
 		margin-bottom : 0.3cm;
 		font-family   : 'NodestoCapsCondensed';
diff --git a/themes/V3/Blank/style.less b/themes/V3/Blank/style.less
index 1a22db6a..e107c76b 100644
--- a/themes/V3/Blank/style.less
+++ b/themes/V3/Blank/style.less
@@ -437,6 +437,13 @@ body { counter-reset : page-numbers 0; }
 		margin-bottom       : 1em;
 		& + * { margin-top : 0; }
 	}
+	.blank {
+		height: 1em;
+		margin-top: 0;
+		& + * {
+			margin-top: 0;
+		}
+	}
 }
 
 //*****************************


Test patch:
diff --git a/tests/markdown/definition-lists.test.js b/tests/markdown/definition-lists.test.js
index 4c754db4..144dad88 100644
--- a/tests/markdown/definition-lists.test.js
+++ b/tests/markdown/definition-lists.test.js
@@ -1,4 +1,4 @@
-/* eslint-disable max-lines */
+
 
 import Markdown from 'naturalcrit/markdown.js';
 
@@ -92,12 +92,12 @@ describe('Multiline Definition Lists', ()=>{
 	test('Multiline Definition Term must have at least one non-empty Definition', function() {
 		const source = 'Term 1\n::';
 		const rendered = Markdown.render(source).trim();
-		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Term 1</p>\n<br>\n<br>`);
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Term 1</p>\n<div class='blank'></div>\n<div class='blank'></div>`);
 	});
 
 	test('Multiline Definition List must have at least one non-newline character after ::', function() {
 		const source = 'Term 1\n::\nDefinition 1\n\n';
 		const rendered = Markdown.render(source).trim();
-		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Term 1</p>\n<br>\n<br>\n<p>Definition 1</p>`);
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Term 1</p>\n<div class='blank'></div>\n<div class='blank'></div>\n<p>Definition 1</p>`);
 	});
 });
diff --git a/tests/markdown/hard-breaks.test.js b/tests/markdown/hard-breaks.test.js
index fe646eac..63bfaef9 100644
--- a/tests/markdown/hard-breaks.test.js
+++ b/tests/markdown/hard-breaks.test.js
@@ -1,4 +1,4 @@
-/* eslint-disable max-lines */
+
 
 import Markdown from 'naturalcrit/markdown.js';
 
@@ -6,37 +6,37 @@ describe('Hard Breaks', ()=>{
 	test('Single Break', function() {
 		const source = ':\n\n';
 		const rendered = Markdown.render(source).trim();
-		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<br>`);
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div>`);
 	});
 
 	test('Double Break', function() {
 		const source = '::\n\n';
 		const rendered = Markdown.render(source).trim();
-		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<br>\n<br>`);
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div>\n<div class='blank'></div>`);
 	});
 
 	test('Triple Break', function() {
 		const source = ':::\n\n';
 		const rendered = Markdown.render(source).trim();
-		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<br>\n<br>\n<br>`);
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>`);
 	});
 
 	test('Many Break', function() {
 		const source = '::::::::::\n\n';
 		const rendered = Markdown.render(source).trim();
-		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<br>\n<br>\n<br>\n<br>\n<br>\n<br>\n<br>\n<br>\n<br>\n<br>`);
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>`);
 	});
 
 	test('Multiple sets of Breaks', function() {
 		const source = ':::\n:::\n:::';
 		const rendered = Markdown.render(source).trim();
-		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<br>\n<br>\n<br>\n<br>\n<br>\n<br>\n<br>\n<br>\n<br>`);
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>\n<div class='blank'></div>`);
 	});
 
 	test('Break directly between two paragraphs', function() {
 		const source = 'Line 1\n::\nLine 2';
 		const rendered = Markdown.render(source).trim();
-		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Line 1</p>\n<br>\n<br>\n<p>Line 2</p>`);
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Line 1</p>\n<div class='blank'></div>\n<div class='blank'></div>\n<p>Line 2</p>`);
 	});
 
 	test('Ignored inside a code block', function() {