Merge branch 'master' of https://github.com/naturalcrit/homebrewery into correct-changelog

.circleci/config.yml

@@ -82,6 +82,9 @@ jobs:
       - run:
           name: Test - HTML sanitization
           command: npm run test:safehtml
+      - run:
+          name: Test - Helpers
+          command: npm run test:helpers
       - run:
           name: Test - Coverage
           command: npm run test:coverage

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -6,7 +6,7 @@ import React, { useState, useRef, useMemo, useEffect } from 'react';
 import _ from 'lodash';
 
 import MarkdownLegacy from '@shared/markdownLegacy.js';
-import { hbfm } from 'hbmarkedwrapper';
+import { hbfm } from 'marked-hbfm';
 import ErrorBar from './errorBar/errorBar.jsx';
 import ToolBar  from './toolBar/toolBar.jsx';
 
@@ -54,7 +54,7 @@ const BrewPage = (props)=>{
 		// Observer for tracking which pages are at least 30% visible in the iframe
 		const visibleObserver = new IntersectionObserver(
 			(entries)=>entries.forEach((entry)=>{
-				props.onVisibilityChange(pageNum, entry.isIntersecting, false); // add page to array of visible pages.
+				props.onVisibilityChange(pageNum, entry.isIntersecting, false); // add/remove page from array of visible pages.
 			}),
 			{ threshold: .3, rootMargin: '0px 0px 0px 0px'  } // detect when >30% of page is within bounds.
 		);
@@ -102,8 +102,11 @@ const BrewRenderer = (props)=>{
 		...props
 	};
 
+	const pagesRef = useRef(null);
+
 	const [visiblePages, setVisiblePages] = useState([]);
 	const [centerPage  , setCenterPage  ] = useState(1);
+	const [headerState , setHeaderState ] = useState(false);
 
 	const [state, setState] = useState({
 		isMounted  : false,
@@ -125,10 +128,6 @@ const BrewRenderer = (props)=>{
 		toolbarState &&	setDisplayOptions(toolbarState);
 	}, []);
 
-	const [headerState, setHeaderState] = useState(false);
-
-	const pagesRef = useRef(null);
-
 	if(props.renderer == 'legacy') {
 		rawPages = props.text.split(PAGEBREAK_REGEX_LEGACY);
 	} else {
@@ -313,7 +312,7 @@ const BrewRenderer = (props)=>{
 	};
 
 	const renderedStyle = useMemo(()=>renderStyle(), [props.style, props.themeBundle]);
-	renderedPages = useMemo(()=>renderPages(), [props.text, displayOptions]);
+	renderedPages = useMemo(()=>renderPages(), [props.text, centerPage, displayOptions]);
 
 	return (
 		<>

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -1,7 +1,7 @@
 import './notificationPopup.less';
 import React, { useEffect, useState } from 'react';
 import request from '../../utils/request-middleware.js';
-import { hbfm } from 'hbmarkedwrapper';
+import { hbfm } from 'marked-hbfm';
 
 import Dialog from '@components/dialog.jsx';
 

client/homebrew/pages/editPage/editPage.jsx

@@ -4,7 +4,7 @@ import './editPage.less';
 // Common imports
 import React, { useState, useEffect, useRef, useEffectEvent } from 'react';
 import request                                from '../../utils/request-middleware.js';
-import { hbfm } from 'hbmarkedwrapper';
+import { hbfm } from 'marked-hbfm';
 import _                                      from 'lodash';
 
 import { DEFAULT_BREW_LOAD }                  from '../../../../server/brewDefaults.js';

client/homebrew/pages/errorPage/errorPage.jsx

@@ -1,7 +1,7 @@
 import './errorPage.less';
 import React      from 'react';
 import UIPage     from '../basePages/uiPage/uiPage.jsx';
-import { hbfm } from 'hbmarkedwrapper';
+import { hbfm }   from 'marked-hbfm';
 import ErrorIndex from './errors/errorIndex.js';
 
 const ErrorPage = ({ brew })=>{

client/homebrew/pages/homePage/homePage.jsx

@@ -4,7 +4,7 @@ import './homePage.less';
 // Common imports
 import React, { useState, useEffect, useRef, useEffectEvent } from 'react';
 import request                                from '../../utils/request-middleware.js';
-import { hbfm } from 'hbmarkedwrapper';
+import { hbfm } from 'marked-hbfm';
 import _                                      from 'lodash';
 
 import { DEFAULT_BREW }                       from '../../../../server/brewDefaults.js';

client/homebrew/pages/newPage/newPage.jsx

@@ -4,7 +4,7 @@ import './newPage.less';
 // Common imports
 import React, { useState, useEffect, useRef, useEffectEvent } from 'react';
 import request                                from '../../utils/request-middleware.js';
-import { hbfm } from 'hbmarkedwrapper';
+import { hbfm } from 'marked-hbfm';
 import _                                      from 'lodash';
 
 import { DEFAULT_BREW }                       from '../../../../server/brewDefaults.js';

client/homebrew/pages/sharePage/sharePage.jsx

@@ -12,6 +12,8 @@ const { both: RecentNavItem } = RecentNavItems;
 import Account from '@navbar/account.navitem.jsx';
 import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 
+import request from '../../utils/request-middleware.js';
+
 import { DEFAULT_BREW_LOAD } from '../../../../server/brewDefaults.js';
 import { printCurrentBrew, fetchThemeBundle } from '@shared/helpers.js';
 
@@ -36,19 +38,30 @@ const SharePage = (props)=>{
 		}
 	};
 
+	const fetchUpdatedBrew = async ()=>{
+		const response = await request
+			.get(`/api/fetch/${currentBrew.shareId}`)
+			.catch((error)=>{
+				console.log('error at fetching updated brew: ', error);
+			});
+		if(response.ok && !!response.body.brew) {
+			setCurrentBrew(response.body.brew);
+		}
+	};
+
 	useEffect(()=>{
 		document.addEventListener('keydown', handleControlKeys);
 		fetchThemeBundle(undefined, setThemeBundle, currentBrew.renderer, currentBrew.theme);
 
-        // listen for changes in the brew version
+		// listen for changes in the brew version
 		const eventSource = new EventSource('/stream');
 		eventSource.addEventListener('message', (evt)=>{
 			const messageData = JSON.parse(evt.data);
 
 			if(messageData.eventType == 'brewUpdated'){
 				if(messageData.shareId == currentBrew.shareId && messageData.version != currentBrew.version) {
-					console.log(`brew has been updated, viewing ${currentBrew.version}, new version is ${messageData.version}`);
 					console.log('should fetch brew');
+					fetchUpdatedBrew();
 				}
 			}
 		});

package.json

@@ -39,6 +39,7 @@
     "test:emojis": "jest tests/markdown/emojis.test.js --verbose --noStackTrace",
     "test:route": "jest tests/routes/static-pages.test.js --verbose",
     "test:safehtml": "jest tests/html/safeHTML.test.js --verbose",
+    "test:helpers": "jest tests/html/helpers.test.js --verbose",
     "phb": "node --experimental-require-module scripts/phb.js",
     "prod": "set NODE_ENV=production && npm run build",
     "postinstall": "npm run build",
@@ -103,7 +104,7 @@
     "@codemirror/state": "^6.7.5",
     "@codemirror/view": "^6.43.12",
     "@dmsnell/diff-match-patch": "^1.1.0",
-    "@googleapis/drive": "^21.0.0",
+    "@googleapis/drive": "^26.0.0",
     "@lezer/highlight": "^1.2.3",
     "@oddbird/css-anchor-positioning": "^0.10.2",
     "@sanity/diff-match-patch": "^3.2.0",
@@ -122,7 +123,6 @@
     "fflate": "^0.8.3",
     "fs-extra": "^11.3.5",
     "hash-wasm": "^4.12.0",
-    "hbmarkedwrapper": "^1.0.0",
     "idb-keyval": "^6.2.5",
     "js-yaml": "^5.4.2",
     "jwt-simple": "^0.5.6",
@@ -132,9 +132,10 @@
     "marked-alignment-paragraphs": "^1.0.0",
     "marked-definition-lists": "^1.0.1",
     "marked-diagrams-markdeep": "^1.0.1",
-    "marked-emoji": "^2.0.3",
+    "marked-emoji": "^3.0.0",
     "marked-extended-tables": "^2.0.1",
     "marked-gfm-heading-id": "^4.1.4",
+    "marked-hbfm": "^1.0.1",
     "marked-nonbreaking-spaces": "^1.0.1",
     "marked-smartypants-lite": "^1.0.3",
     "marked-subsuper-text": "^1.0.4",
@@ -155,21 +156,21 @@
   },
   "devDependencies": {
     "@stylistic/stylelint-plugin": "^5.3.0",
-    "babel-jest": "^30.4.1",
+    "babel-jest": "^30.5.2",
     "babel-plugin-transform-import-meta": "^3.0.0",
     "eslint": "9.7",
     "eslint-plugin-jest": "^29.15.1",
     "eslint-plugin-react": "^7.37.5",
     "globals": "^16.4.0",
-    "jest": "^30.4.2",
+    "jest": "^30.5.2",
     "jest-expect-message": "^1.1.3",
-    "jsdom": "^30.0.1",
+    "jsdom": "^30.1.0",
     "jsdom-global": "^3.0.2",
     "postcss-less": "^6.0.0",
-    "stylelint": "^17.11.1",
+    "stylelint": "^17.15.0",
     "stylelint-config-recess-order": "^7.7.0",
     "stylelint-config-recommended": "^18.0.0",
     "supertest": "^7.1.4",
-    "vite": "^8.2.1"
+    "vite": "^8.3.0"
   }
 }

server/app.js

@@ -14,6 +14,7 @@ import express from 'express';
 import config  from './config.js';
 import path from 'path';
 import fs      from 'fs-extra';
+import { splitTextStyleAndMetadata } from '../shared/helpers.js';
 
 import api from './homebrew.api.js';
 const { homebrewApi, getBrew, getCSS } = api;
@@ -135,6 +136,15 @@ export default async function createApp(vite) {
 	app.get('/robots.txt', (req, res)=>{
 		return res.sendFile(`robots.txt`, { root: process.cwd() });
 	});
+	//serve brew for sharepage rerender
+	app.get('/api/fetch/:id', asyncHandler(getBrew('share')), asyncHandler(async (req, res) => {
+		const { brew } = req;
+		brew.authors.includes(req.account?.username)
+			? sanitizeBrew(brew, 'shareAuthor')
+			: sanitizeBrew(brew, 'share');
+		splitTextStyleAndMetadata(brew);
+		res.json({ brew });
+	}));
 
 	//Serve brew metadata
 	app.get('/metadata/:id', asyncHandler(getBrew('share')), (req, res)=>{

server/homebrew.api.js

@@ -4,7 +4,7 @@ import { model as HomebrewModel }    from './homebrew.model.js';
 import express                       from 'express';
 import zlib                          from 'zlib';
 import GoogleActions                 from './googleActions.js';
-import { hbfm }   from 'hbmarkedwrapper';
+import { hbfm }   from 'marked-hbfm';
 import * as yaml                     from 'js-yaml';
 import asyncHandler                  from 'express-async-handler';
 import { nanoid }                    from 'nanoid';
@@ -577,9 +577,9 @@ const api = {
 router.use(dbCheck);
 
 router.post('/api', checkClientVersion, asyncHandler(api.newBrew));
-router.put('/api/:id', checkClientVersion, asyncHandler(api.getBrew('edit', false)), asyncHandler(api.updateBrew));
+router.put('/api/:id', checkClientVersion, asyncHandler(api.getBrew('edit', false)), asyncHandler(api.updateBrew)); //alt endpoint, unused
 router.put('/api/update/:id', checkClientVersion, asyncHandler(api.getBrew('edit', false)), asyncHandler(api.updateBrew));
-router.delete('/api/:id', checkClientVersion, asyncHandler(api.deleteBrew));
+router.delete('/api/:id', checkClientVersion, asyncHandler(api.deleteBrew)); //alt endpoint, unused
 router.get('/api/remove/:id', checkClientVersion, asyncHandler(api.deleteBrew));
 router.get('/api/theme/:renderer/:id', asyncHandler(api.getThemeBundle));
 

shared/helpers.js

@@ -229,5 +229,6 @@ export {
 	printCurrentBrew,
 	fetchThemeBundle,
 	brewSnippetsToJSON,
-	debugTextMismatch
+	debugTextMismatch,
+	yamlSnippetsToText
 };

tests/html/helpers.test.js

@@ -0,0 +1,114 @@
+import {
+	fetchThemeBundle,
+	brewSnippetsToJSON,
+	debugTextMismatch,
+	yamlSnippetsToText,
+} from '../../shared/helpers.js';
+
+import dedent from 'dedent';
+
+// Marked.js adds line returns after closing tags on some default tokens.
+// This removes those line returns for comparison sake.
+String.prototype.trimReturns = function(){
+	return this.replace(/\r?\n|\r/g, '');
+};
+
+const emoji = 'df_d12_2';
+
+const brewSnippetsThemeTest =  [
+	{
+		name     : 'Test Theme',
+		snippets : dedent `
+			\snippet First Theme Snippet
+			I am the first theme snippet!
+
+			\snippet Second Theme Snippet
+			I am the second theme Snippet!`,
+	}
+];
+
+const brewSnippetsBrewTest = dedent`
+	\snippet First Brew Snippet
+	I am the first brew snippet!
+
+	\snippet Second Brew Snippet
+	I am the second brew Snippet!`;
+
+describe(`brewSnippetsToJSON`, ()=>{
+	it('converts raw brew snippets without theme snippets to JSON', function() {
+		const testMenuObject = {
+			groupName : 'Brew Snippets',
+			icon      : 'fas fa-th-list',
+			view      : 'text',
+			snippets  : [{
+				name        : 'Test Snippets JSON without theme snippets',
+				subsnippets : [
+					{
+						gen  : 'I am the first brew snippet!\n',
+						name : 'First Brew Snippet'
+					}, {
+						gen : 'I am the second brew Snippet!',
+						name: 'Second Brew Snippet'
+					}
+				]}]
+		};
+		const rendered = brewSnippetsToJSON(`Test Snippets JSON without theme snippets`, brewSnippetsBrewTest, null, true);
+		expect(rendered).toStrictEqual(testMenuObject);
+	});
+
+		it('converts raw brew snippets with theme snippets to JSON', function() {
+		const testMenuObject = {
+			groupName : 'Brew Snippets',
+			icon	    : 'fas fa-th-list',
+			view      : 'text',
+			snippets  : [{
+				gen         : '',
+  			icon        : '',
+				name        : 'Test Theme',
+				subsnippets : [
+  				{
+						gen  : 'I am the first theme snippet!\n',
+						icon : '',
+						name : 'First Theme Snippet',
+ 					},
+ 					{
+						gen  : 'I am the second theme Snippet!',
+						icon : '',
+						name : 'Second Theme Snippet',
+ 					},
+  			]},
+				{
+					name        : 'Test Snippets JSON with theme snippets',
+					subsnippets : [
+						{
+							gen  : 'I am the first brew snippet!\n',
+							name : 'First Brew Snippet'
+						},
+						{
+							gen : 'I am the second brew Snippet!',
+							name: 'Second Brew Snippet'
+						}
+					]
+				}]};
+		const rendered = brewSnippetsToJSON(`Test Snippets JSON with theme snippets`, brewSnippetsBrewTest, brewSnippetsThemeTest, true);
+		expect(rendered).toStrictEqual(testMenuObject);
+	});
+});
+
+describe(`YAMLSnippetsToText`, ()=>{
+	it('converts brew snippet YAML to a string ', function() {
+		const brewSnippetsYAML = [{
+			subsnippets : [
+				{
+					gen  : 'I am the first brew snippet!\n',
+					name : 'First Brew Snippet'
+				}, {
+					gen : 'I am the second brew Snippet!',
+					name: 'Second Brew Snippet'
+				}
+			]
+		}];
+		const rendered = yamlSnippetsToText(brewSnippetsYAML);
+		expect(rendered).toBe(`${brewSnippetsBrewTest}\n`);
+	});
+});

tests/markdown/basic.test.js

@@ -1,6 +1,6 @@
 
 
-import { hbfm } from 'hbmarkedwrapper';
+import { hbfm } from 'marked-hbfm';
 
 test('Processes the markdown within an HTML block if its just a class wrapper', function() {
 	const source = '<div>*Bold text*</div>';

tests/markdown/definition-lists.test.js

@@ -1,6 +1,6 @@
 
 
-import { hbfm } from 'hbmarkedwrapper';
+import { hbfm } from 'marked-hbfm';
 
 describe('Inline Definition Lists', ()=>{
 	test('No Term 1 Definition', function() {

tests/markdown/emojis.test.js

@@ -1,4 +1,4 @@
-import { hbfm } from 'hbmarkedwrapper';
+import { hbfm } from 'marked-hbfm';
 import dedent from 'dedent';
 
 // Marked.js adds line returns after closing tags on some default tokens.

tests/markdown/hard-breaks.test.js

@@ -1,6 +1,6 @@
 
 
-import { hbfm } from 'hbmarkedwrapper';
+import { hbfm } from 'marked-hbfm';
 
 describe('Hard Breaks', ()=>{
 	test('Single Break', function() {

tests/markdown/mustache-syntax.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable max-lines */
 
 import dedent from 'dedent';
-import { hbfm } from 'hbmarkedwrapper';
+import { hbfm } from 'marked-hbfm';
 
 // Marked.js adds line returns after closing tags on some default tokens.
 // This removes those line returns for comparison sake.

tests/markdown/non-breaking-spaces.test.js

@@ -1,6 +1,6 @@
 
 
-import {hbfm} from 'hbmarkedwrapper';
+import {hbfm} from 'marked-hbfm';
 
 describe('Non-Breaking Spaces Interactions', ()=>{
 	test('I am actually a single-line definition list!', function() {

tests/markdown/paragraph-justification.test.js

@@ -1,6 +1,6 @@
 
 
-import { hbfm } from 'hbmarkedwrapper';
+import { hbfm } from 'marked-hbfm';
 
 describe('Justification', ()=>{
 	test('Left Justify', function() {

tests/markdown/variables.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable max-lines */
 
 import dedent from 'dedent';
-import { hbfm } from 'hbmarkedwrapper';
+import { hbfm } from 'marked-hbfm';
 
 // Marked.js adds line returns after closing tags on some default tokens.
 // This removes those line returns for comparison sake.

themes/V3/5eDMG/style.less

@@ -14,7 +14,8 @@
 	.note table tbody tr:nth-child(odd) { background : #FFFFFF; }
 
 	/* DROP CAP */
-	.first-letter, .drop-cap
+	p.first-letter::first-letter,
+	p.drop-cap::first-letter,
 	h1 + p::first-letter {
 		color            : black;
 		background-image : unset;

themes/V3/5ePHB/snippets.js

@@ -30,7 +30,8 @@ export default [
 				name : 'Tweak Drop Cap',
 				icon : 'fas fa-sliders-h',
 				gen  : dedent`/* Drop Cap settings */
-						.page .first-letter, .page .drop-cap,
+						.page p.first-letter::first-letter,
+						.page p.drop-cap::first-letter,
 						.page h1 + p::first-letter {
 							font-family: SolberaImitationRemake;
 							font-size: 3.5cm;

themes/V3/5ePHB/style.less

@@ -87,7 +87,8 @@
 		-moz-column-span    : all;
 		& + p::first-line { font-variant : small-caps; }
 	}
-	.first-letter, .drop-cap,
+	p.first-letter::first-letter,
+	p.drop-cap::first-letter,
 	h1 + p::first-letter {
 		float                   : left;
 		padding-bottom          : 2px;

themes/V3/Blank/snippets/footer.gen.js

@@ -1,4 +1,4 @@
-import hbfm   from 'hbmarkedwrapper';
+import { hbfm } from 'marked-hbfm';
 
 export default {
 	createFooterFunc : function(headerSize=1){

themes/V3/Journal/style.less

@@ -82,7 +82,8 @@
 		line-height         : 1em;
 		& + p::first-line { font-variant : small-caps; }
 	}
-	.first-letter, .drop-cap,
+	p.first-letter::first-letter,
+	p.drop-cap::first-letter,
 	h1 + p::first-letter {
 		float                   : left;
 		padding-top             : 0.3em;