Merge branch 'master' into v3.15.0

Need a new key so this new message will appear again for users who cleared the popup before

changelog.md

@@ -84,9 +84,54 @@ pre {
 ## changelog
 For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
 
-### Tuesday 8/27/2024 - v3.14.2
+### Wednesday 9/04/2024 - v3.15.0
-{{taskList
 
+{{taskList
+##### 5e-Cleric, abquintic, calculuschild, Gazook89, G-Ambatte, Ericsheid, Kaiburr
+
+* [x] New {{openSans **VAULT** {{fas,fa-dungeon}}}} page 🎉🎉🎉
+:
+All **PUBLISHED** brews ({{openSans :fas_circle_info: **Properties**}} menu) will be searchable, by title or author, and filtered by renderer. More features and adjustments will be coming.
+:
+Note: If any of your own brews are not showing up in search (particularly if stored on Google Drive), please edit and re-save to ensure our database has the data needed from document to be searchable. 
+
+Fixes issue [#697](https://github.com/naturalcrit/homebrewery/issues/697)
+
+##### Gazook89
+
+* [x] Auto-focus on text editor when switching editor tabs
+}}
+
+### Wednesday 8/28/2024 - v3.14.3
+
+{{taskList
+##### calculuschild, G-Ambatte
+
+* [x] New {{openSans **IMAGES → {{fac,image-wrap-left}} IMAGE WRAP LEFT/RIGHT**}} snippets
+
+Fixes issue [#380](https://github.com/naturalcrit/homebrewery/issues/380)
+
+* [x] Fix v3.14.2 bug with `꞉꞉꞉꞉` failing after tables
+
+##### 5e-Cleric
+
+* [x] Fix Account page crash when not logged in
+
+Fixes issue [#3605](https://github.com/naturalcrit/homebrewery/issues/3605)
+
+##### abquintic
+
+* [x] Fix jump hotkeys conflicting with `CTRL + SHIFT`. Preview and Source movement shortcuts now use `CTRL + SHIFT + META + LEFT\RIGHTARROW`
+
+##### G-Ambatte
+
+* [x] Fix display issue with image wrap icons
+}}
+
+
+### Tuesday 8/27/2024 - v3.14.2
+
+{{taskList
 ##### calculuschild
 
 * [x] Reroute invalid urls to homepage
@@ -119,7 +164,7 @@ Fixes issues [#3572](https://github.com/naturalcrit/homebrewery/issues/3572)
 
 Fixes issues [#1430](https://github.com/naturalcrit/homebrewery/issues/1430)
 
-* [x] Fix colon `:::` being parsed in codeblocks
+* [x] Fix colon `꞉꞉꞉꞉` being parsed in codeblocks
 
 * [x] Prevent crashes when loading undefined renderer or theme bundle
 
@@ -133,12 +178,11 @@ Fixes issues [#1430](https://github.com/naturalcrit/homebrewery/issues/1430)
 ##### 5e-Cleric, Gazook89
 
 * [x] Viewer tools for zoom/page navigation
-
 }}
 
 ### Tuesday 8/13/2024 - v3.14.1
-{{taskList
 
+{{taskList
 ##### abquintic
 
 * [x] Allow Table of Contents to flow across columns
@@ -181,16 +225,13 @@ Fixes issues [#3613](https://github.com/naturalcrit/homebrewery/issues/3613)
 
 Fixes issues [#3622](https://github.com/naturalcrit/homebrewery/issues/3622)
 
-
 ##### calculuschild
 
 * [x] Fix `/migrate` page using an editor context instead of share context
 
-
 ##### 5e-Cleric
 
 * [x] Fix Monster Stat Blocks losing color in Safari
-
 }}
 
 \page

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -4,7 +4,7 @@ const _     = require('lodash');
 
 import Dialog from '../../../components/dialog.jsx';
 
-const DISMISS_KEY = 'dismiss_notification12-04-23';
+const DISMISS_KEY = 'dismiss_notification04-09-24';
 const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;
 
 const NotificationPopup = ()=>{
@@ -15,11 +15,12 @@ const NotificationPopup = ()=>{
 			<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
 		</div>
 		<ul>
-			<li key='psa'>
+			<li key='Vault'>
-				<em>Don't store IMAGES in Google Drive</em><br />
+				<em>Search brews with our new page!</em><br />
-				Google Drive is not an image service, and will block images from being used
+				We have been working very hard in making this possible, now you can share your work and look at it in the new <a href="/vault">Vault</a> page!
-				in brews if they get more views than expected. Google has confirmed they won't fix
+				All PUBLISHED brews will be available to anyone searching there, by title or author, and filtering by renderer.
-				this, so we recommend you look for another image hosting service such as imgur, ImgBB or Google Photos.
+
+				More features will be coming.
 			</li>
 
 			<li key='googleDriveFolder'>

client/homebrew/editor/editor.jsx

@@ -85,7 +85,7 @@ const Editor = createClass({
 	},
 
 	handleControlKeys : function(e){
-		if(!(e.ctrlKey || e.metaKey)) return;
+		if(!(e.ctrlKey && e.metaKey)) return;
 		const LEFTARROW_KEY = 37;
 		const RIGHTARROW_KEY = 39;
 		if (e.shiftKey && (e.keyCode == RIGHTARROW_KEY)) this.brewJump();
@@ -113,7 +113,10 @@ const Editor = createClass({
 		this.props.setMoveArrows(newView === 'text');
 		this.setState({
 			view : newView
-		}, this.updateEditorSize);	//TODO: not sure if updateeditorsize needed
+		}, ()=>{
+			this.codeEditor.current?.codeMirror.focus();
+			this.updateEditorSize();
+		});	//TODO: not sure if updateeditorsize needed
 	},
 
 	getCurrentPage : function(){

client/homebrew/homebrew.jsx

@@ -10,6 +10,7 @@ const UserPage = require('./pages/userPage/userPage.jsx');
 const SharePage = require('./pages/sharePage/sharePage.jsx');
 const NewPage = require('./pages/newPage/newPage.jsx');
 const ErrorPage = require('./pages/errorPage/errorPage.jsx');
+const VaultPage = require('./pages/vaultPage/vaultPage.jsx');
 const AccountPage = require('./pages/accountPage/accountPage.jsx');
 
 const WithRoute = (props)=>{
@@ -71,6 +72,7 @@ const Homebrew = createClass({
 						<Route path='/new/:id' element={<WithRoute el={NewPage} brew={this.props.brew} userThemes={this.props.userThemes}/>} />
 						<Route path='/new' element={<WithRoute el={NewPage} userThemes={this.props.userThemes}/> } />
 						<Route path='/user/:username' element={<WithRoute el={UserPage} brews={this.props.brews} />} />
+						<Route path='/vault' element={<WithRoute el={VaultPage}/>}/>
 						<Route path='/changelog' element={<WithRoute el={SharePage} brew={this.props.brew} disableMeta={true} />} />
 						<Route path='/faq' element={<WithRoute el={SharePage} brew={this.props.brew} disableMeta={true} />} />
 						<Route path='/migrate' element={<WithRoute el={SharePage} brew={this.props.brew} disableMeta={true} />} />

client/homebrew/navbar/vault.navitem.jsx

@@ -0,0 +1,17 @@
+const React = require('react');
+
+const Nav = require('naturalcrit/nav/nav.jsx');
+
+module.exports = function (props) {
+	return (
+		<Nav.item
+			color='purple'
+			icon='fas fa-dungeon'
+			href='/vault'
+			newTab={false}
+			rel='noopener noreferrer'
+		>
+			Vault
+		</Nav.item>
+	);
+};

client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx

@@ -19,7 +19,8 @@ const BrewItem = createClass({
 				stubbed     : true
 			},
 			updateListFilter : ()=>{},
-			reportError      : ()=>{}
+			reportError      : ()=>{},
+			renderStorage    : true
 		};
 	},
 
@@ -95,6 +96,7 @@ const BrewItem = createClass({
 	},
 
 	renderStorageIcon : function(){
+		if(!this.props.renderStorage) return;
 		if(this.props.brew.googleId) {
 			return <span title={this.props.brew.webViewLink ? 'Your Google Drive Storage': 'Another User\'s Google Drive Storage'}>
 				<a href={this.props.brew.webViewLink} target='_blank'>
@@ -142,10 +144,14 @@ const BrewItem = createClass({
 				}
 				<span title={`Authors:\n${brew.authors?.join('\n')}`}>
 					<i className='fas fa-user'/> {brew.authors?.map((author, index)=>(
-  					<>
+						<React.Fragment key={index}>
-    					<a key={index} href={`/user/${author}`}>{author}</a>
+							{author === 'hidden'
+								? <span title="Username contained an email address; hidden to protect user's privacy">{author}</span>
+								: <a href={`/user/${author}`}>{author}</a>
+							}
 							{index < brew.authors.length - 1 && ', '}
-  					</>))}
+						</React.Fragment>
+					))}
 				</span>
 				<br />
 				<span title={`Last viewed: ${moment(brew.lastViewed).local().format(dateFormatString)}`}>

client/homebrew/pages/errorPage/errors/errorIndex.js

@@ -2,6 +2,9 @@ const dedent = require('dedent-tabs').default;
 
 const loginUrl = 'https://www.naturalcrit.com/login';
 
+//001-050 : Brew errors
+//050-100 : Other pages errors
+
 const errorIndex = (props)=>{
 	return {
 		// Default catch all
@@ -149,8 +152,16 @@ const errorIndex = (props)=>{
 
 		**Brew ID:**  ${props.brew.brewId}`,
 
+		//account page when account is not defined
+		'50' : dedent`
+		## You are not signed in
+		
+		You are trying to access the account page, but are not signed in to an account.
+		
+		Please login or signup at our [login page](https://www.naturalcrit.com/login?redirect=https://homebrewery.naturalcrit.com/account).`,
+
 		// Brew locked by Administrators error
-		'100' : dedent`
+		'51' : dedent`
 		## This brew has been locked.
 		
 		Only an author may request that this lock is removed.
@@ -160,6 +171,11 @@ const errorIndex = (props)=>{
 		**Brew ID:**  ${props.brew.brewId}
 		
 		**Brew Title:** ${props.brew.brewTitle}`,
+
+		'90' : dedent` An unexpected error occurred while looking for these brews.  
+            Try again in a few minutes.`,
+
+		'91' : dedent` An unexpected error occurred while trying to get the total of brews.`,
 	};
 };
 

client/homebrew/pages/homePage/homePage.jsx

@@ -10,12 +10,12 @@ const Nav = require('naturalcrit/nav/nav.jsx');
 const Navbar = require('../../navbar/navbar.jsx');
 const NewBrewItem = require('../../navbar/newbrew.navitem.jsx');
 const HelpNavItem = require('../../navbar/help.navitem.jsx');
+const VaultNavItem = require('../../navbar/vault.navitem.jsx');
 const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
 const AccountNavItem = require('../../navbar/account.navitem.jsx');
 const ErrorNavItem = require('../../navbar/error-navitem.jsx');
 const { fetchThemeBundle } = require('../../../../shared/helpers.js');
 
-
 const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
 const Editor = require('../../editor/editor.jsx');
 const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
@@ -76,6 +76,7 @@ const HomePage = createClass({
 				}
 				<NewBrewItem />
 				<HelpNavItem />
+				<VaultNavItem />
 				<RecentNavItem />
 				<AccountNavItem />
 			</Nav.section>

client/homebrew/pages/userPage/userPage.jsx

@@ -12,6 +12,7 @@ const Account = require('../../navbar/account.navitem.jsx');
 const NewBrew = require('../../navbar/newbrew.navitem.jsx');
 const HelpNavItem = require('../../navbar/help.navitem.jsx');
 const ErrorNavItem = require('../../navbar/error-navitem.jsx');
+const VaultNavitem = require('../../navbar/vault.navitem.jsx');
 
 const UserPage = createClass({
 	displayName     : 'UserPage',
@@ -66,6 +67,7 @@ const UserPage = createClass({
 				}
 				<NewBrew />
 				<HelpNavItem />
+				<VaultNavitem/>
 				<RecentNavItem />
 				<Account />
 			</Nav.section>

client/homebrew/pages/vaultPage/vaultPage.jsx

@@ -0,0 +1,396 @@
+require('./vaultPage.less');
+
+const React = require('react');
+const { useState, useEffect, useRef } = React;
+
+const Nav           = require('naturalcrit/nav/nav.jsx');
+const Navbar        = require('../../navbar/navbar.jsx');
+const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
+const Account       = require('../../navbar/account.navitem.jsx');
+const NewBrew       = require('../../navbar/newbrew.navitem.jsx');
+const HelpNavItem   = require('../../navbar/help.navitem.jsx');
+const BrewItem      = require('../basePages/listPage/brewItem/brewItem.jsx');
+const SplitPane     = require('../../../../shared/naturalcrit/splitPane/splitPane.jsx');
+const ErrorIndex    = require('../errorPage/errors/errorIndex.js');
+
+const request = require('../../utils/request-middleware.js');
+
+const VaultPage = (props)=>{
+	const [pageState, setPageState] = useState(parseInt(props.query.page) || 1);
+
+	//Response state
+	const [brewCollection, setBrewCollection] = useState(null);
+	const [totalBrews, setTotalBrews]         = useState(null);
+	const [searching, setSearching]           = useState(false);
+	const [error, setError]                   = useState(null);
+
+
+	const titleRef        = useRef(null);
+	const authorRef       = useRef(null);
+	const countRef        = useRef(null);
+	const v3Ref           = useRef(null);
+	const legacyRef       = useRef(null);
+	const submitButtonRef = useRef(null);
+
+	useEffect(()=>{
+		disableSubmitIfFormInvalid();
+		loadPage(pageState, true);
+	}, []);
+
+	const updateStateWithBrews = (brews, page)=>{
+		setBrewCollection(brews || null);
+		setPageState(parseInt(page) || 1);
+		setSearching(false);
+	};
+
+	const updateUrl = (titleValue, authorValue, countValue, v3Value, legacyValue, page)=>{
+		const url = new URL(window.location.href);
+		const urlParams = new URLSearchParams(url.search);
+
+		urlParams.set('title', titleValue);
+		urlParams.set('author', authorValue);
+		urlParams.set('count', countValue);
+		urlParams.set('v3', v3Value);
+		urlParams.set('legacy', legacyValue);
+		urlParams.set('page', page);
+
+		url.search = urlParams.toString();
+		window.history.replaceState(null, '', url.toString());
+	};
+
+	const performSearch = async (title, author, count, v3, legacy, page)=>{
+		updateUrl(title, author, count, v3, legacy, page);
+
+		const response = await request.get(
+			`/api/vault?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}&count=${count}&page=${page}`
+		).catch((error)=>{
+			console.log('error at loadPage: ', error);
+			setError(error);
+			updateStateWithBrews([], 1);
+		});
+
+		if(response.ok)
+			updateStateWithBrews(response.body.brews, page);
+	};
+
+	const loadTotal = async (title, author, v3, legacy)=>{
+		setTotalBrews(null);
+
+		const response = await request.get(
+			`/api/vault/total?title=${title}&author=${author}&v3=${v3}&legacy=${legacy}`
+		).catch((error)=>{
+			console.log('error at loadTotal: ', error);
+			setError(error);
+			updateStateWithBrews([], 1);
+		});
+
+		if(response.ok)
+			setTotalBrews(response.body.totalBrews);
+	};
+
+	const loadPage = async (page, updateTotal)=>{
+		if(!validateForm())
+			return;
+
+		setSearching(true);
+		setError(null);
+
+		const title  = titleRef.current.value || '';
+		const author = authorRef.current.value || '';
+		const count  = countRef.current.value || 10;
+		const v3     = v3Ref.current.checked != false;
+		const legacy = legacyRef.current.checked != false;
+
+		performSearch(title, author, count, v3, legacy, page);
+
+		if(updateTotal)
+			loadTotal(title, author, v3, legacy);
+	};
+
+	const renderNavItems = ()=>(
+		<Navbar>
+			<Nav.section>
+				<Nav.item className='brewTitle'>
+					Vault: Search for brews
+				</Nav.item>
+			</Nav.section>
+			<Nav.section>
+				<NewBrew />
+				<HelpNavItem />
+				<RecentNavItem />
+				<Account />
+			</Nav.section>
+		</Navbar>
+	);
+
+	const validateForm = ()=>{
+		//form validity: title or author must be written, and at least one renderer set
+		const isTitleValid      = titleRef.current.validity.valid && titleRef.current.value;
+		const isAuthorValid     = authorRef.current.validity.valid && authorRef.current.value;
+		const isCheckboxChecked = legacyRef.current.checked || v3Ref.current.checked;
+
+		const isFormValid = (isTitleValid || isAuthorValid) && isCheckboxChecked;
+
+		return isFormValid;
+	};
+
+	const disableSubmitIfFormInvalid = ()=>{
+		submitButtonRef.current.disabled = !validateForm();
+	};
+
+	const renderForm = ()=>(
+		<div className='brewLookup'>
+			<h2 className='formTitle'>Brew Lookup</h2>
+			<div className='formContents'>
+				<label>
+					Title of the brew
+					<input
+						ref={titleRef}
+						type='text'
+						name='title'
+						defaultValue={props.query.title || ''}
+						onKeyUp={disableSubmitIfFormInvalid}
+						pattern='.{3,}'
+						title='At least 3 characters'
+						onKeyDown={(e)=>{
+							if(e.key === 'Enter' && !submitButtonRef.current.disabled)
+								loadPage(1, true);
+						}}
+						placeholder='v3 Reference Document'
+					/>
+				</label>
+
+				<label>
+					Author of the brew
+					<input
+						ref={authorRef}
+						type='text'
+						name='author'
+						pattern='.{1,}'
+						defaultValue={props.query.author || ''}
+						onKeyUp={disableSubmitIfFormInvalid}
+						onKeyDown={(e)=>{
+							if(e.key === 'Enter' && !submitButtonRef.current.disabled)
+								loadPage(1, true);
+						}}
+						placeholder='Username'
+					/>
+				</label>
+
+				<label>
+					Results per page
+					<select ref={countRef} name='count' defaultValue={props.query.count || 20}>
+						<option value='10'>10</option>
+						<option value='20'>20</option>
+						<option value='40'>40</option>
+						<option value='60'>60</option>
+					</select>
+				</label>
+
+				<label>
+					<input
+						className='renderer'
+						ref={v3Ref}
+						type='checkbox'
+						defaultChecked={props.query.v3 !== 'false'}
+						onChange={disableSubmitIfFormInvalid}
+					/>
+					Search for v3 brews
+				</label>
+
+				<label>
+					<input
+						className='renderer'
+						ref={legacyRef}
+						type='checkbox'
+						defaultChecked={props.query.legacy !== 'false'}
+						onChange={disableSubmitIfFormInvalid}
+					/>
+					Search for legacy brews
+				</label>
+
+				<button
+					id='searchButton'
+					ref={submitButtonRef}
+					onClick={()=>{
+						loadPage(1, true);
+					}}
+				>
+					Search
+					<i
+						className={searching ? 'fas fa-spin fa-spinner': 'fas fa-search'}
+					/>
+				</button>
+			</div>
+			<legend>
+				<h3>Tips and tricks</h3>
+				<ul>
+					<li>
+						Only <b>published</b> brews are searchable via this tool
+					</li>
+					<li>
+						Usernames are case-sensitive
+					</li>
+					<li>
+						Use <code>"word"</code> to match an exact string,
+						and <code>-</code> to exclude words (at least one word must not be negated)
+					</li>
+					<li>
+						Some common words like "a", "after", "through", "itself", "here", etc.,
+						are ignored in searches. The full list can be found &nbsp;
+						<a href='https://github.com/mongodb/mongo/blob/0e3b3ca8480ddddf5d0105d11a94bd4698335312/src/mongo/db/fts/stop_words_english.txt'>
+							here
+						</a>
+					</li>
+				</ul>
+				<small>New features will be coming, such as filters and search by tags.</small>
+			</legend>
+		</div>
+	);
+
+	const renderPaginationControls = ()=>{
+		if(!totalBrews) return null;
+
+		const countInt = parseInt(props.query.count || 20);
+		const totalPages = Math.ceil(totalBrews / countInt);
+
+		let startPage, endPage;
+		if(pageState <= 6) {
+			startPage = 1;
+			endPage = Math.min(totalPages, 10);
+		} else if(pageState + 4 >= totalPages) {
+			startPage = Math.max(1, totalPages - 9);
+			endPage = totalPages;
+		} else {
+			startPage = pageState - 5;
+			endPage = pageState + 4;
+		}
+
+		const pagesAroundCurrent = new Array(endPage - startPage + 1)
+			.fill()
+			.map((_, index)=>(
+				<a
+					key={startPage + index}
+					className={`pageNumber ${
+						pageState === startPage + index ? 'currentPage' : ''
+					}`}
+					onClick={()=>loadPage(startPage + index, false)}
+				>
+					{startPage + index}
+				</a>
+			));
+
+		return (
+			<div className='paginationControls'>
+				<button
+					className='previousPage'
+					onClick={()=>loadPage(pageState - 1, false)}
+					disabled={pageState === startPage}
+				>
+					<i className='fa-solid fa-chevron-left'></i>
+				</button>
+				<ol className='pages'>
+					{startPage > 1 && (
+						<a
+							className='pageNumber firstPage'
+							onClick={()=>loadPage(1, false)}
+						>
+							1 ...
+						</a>
+					)}
+					{pagesAroundCurrent}
+					{endPage < totalPages && (
+						<a
+							className='pageNumber lastPage'
+							onClick={()=>loadPage(totalPages, false)}
+						>
+							... {totalPages}
+						</a>
+					)}
+				</ol>
+				<button
+					className='nextPage'
+					onClick={()=>loadPage(pageState + 1, false)}
+					disabled={pageState === totalPages}
+				>
+					<i className='fa-solid fa-chevron-right'></i>
+				</button>
+			</div>
+		);
+	};
+
+	const renderFoundBrews = ()=>{
+		if(searching) {
+			return (
+				<div className='foundBrews searching'>
+					<h3 className='searchAnim'>Searching</h3>
+				</div>
+			);
+		}
+
+		if(error) {
+			const errorText = ErrorIndex()[error.HBErrorCode.toString()] || '';
+			
+			return (
+				<div className='foundBrews noBrews'>
+					<h3>Error: {errorText}</h3>
+				</div>
+			);
+		}
+
+		if(!brewCollection) {
+			return (
+				<div className='foundBrews noBrews'>
+					<h3>No search yet</h3>
+				</div>
+			);
+		}
+
+		if(brewCollection.length === 0) {
+			return (
+				<div className='foundBrews noBrews'>
+					<h3>No brews found</h3>
+				</div>
+			);
+		}
+
+		return (
+			<div className='foundBrews'>
+				<span className='totalBrews'>
+					{`Brews found: `}
+					<span>{totalBrews}</span>
+				</span>
+				{brewCollection.map((brew, index)=>{
+					return (
+						<BrewItem
+							brew={{ ...brew }}
+							key={index}
+							reportError={props.reportError}
+							renderStorage={false}
+						/>
+					);
+				})}
+				{renderPaginationControls()}
+			</div>
+		);
+	};
+
+	return (
+		<div className='vaultPage'>
+			<link href='/themes/V3/Blank/style.css' rel='stylesheet' />
+			<link href='/themes/V3/5ePHB/style.css' rel='stylesheet' />
+			{renderNavItems()}
+			<div className='content'>
+				<SplitPane showDividerButtons={false}>
+					<div className='form dataGroup'>{renderForm()}</div>
+
+					<div className='resultsContainer dataGroup'>
+						{renderFoundBrews()}
+					</div>
+				</SplitPane>
+			</div>
+		</div>
+	);
+};
+
+module.exports = VaultPage;

client/homebrew/pages/vaultPage/vaultPage.less

@@ -0,0 +1,371 @@
+body {
+	height : 100vh;
+
+	.content { height : 100%; }
+
+	small {
+		font-size : 10pt;
+		color     : #555555;
+
+		a { color : #333333; }
+	}
+
+	code {
+		padding-inline : 5px;
+		background     : lightgrey;
+		border-radius  : 5px;
+	}
+
+	*:not(input) { user-select : none; }
+}
+
+.vaultPage {
+	height           : 100%;
+	overflow-y       : hidden;
+	background-color : #2C3E50;
+	
+
+	.content {
+		background : #2C3E50;
+
+		.dataGroup {
+			width      : 100%;
+			height     : 100%;
+			background : white;
+
+			&.form .brewLookup {
+				position : relative;
+				padding  : 50px clamp(20px, 4vw, 50px);
+
+				h1, h2, h3, h4 {
+					font-family    : 'CodeBold';
+					letter-spacing : 2px;
+				}
+
+				
+				legend {
+					h3 {
+						margin-block  : 30px 20px;
+						font-size     : 20px;
+						text-align    : center;
+						border-bottom : 2px solid;
+					}
+					ul {
+						padding-inline : 30px 10px;
+						li {
+							margin-block : 5px;
+							line-height  : calc(1em + 5px);
+							list-style   : disc;
+						}
+					} 
+				}
+
+				&::after {
+					position    : absolute;
+					top         : 0;
+					right       : 0;
+					left        : 0;
+					display     : block;
+					padding     : 10px;
+					font-weight : 900;
+					color       : white;
+					white-space : pre-wrap;
+					content     : 'Error:\A At least one renderer should be enabled to make a search';
+					background  : rgb(255, 60, 60);
+					opacity     : 0;
+					transition  : opacity 0.5s;
+				}
+				&:not(:has(input[type='checkbox']:checked))::after { opacity : 1; }
+
+				.formTitle {
+					margin        : 20px 0;
+					font-size     : 30px;
+					color         : black;
+					text-align    : center;
+					border-bottom : 2px solid;
+				}
+
+				.formContents {
+					position       : relative;
+					display        : flex;
+					flex-direction : column;
+
+					label {
+						display     : flex;
+						align-items : center; 
+						margin      : 10px 0;
+					}
+					select { margin : 0 10px; }
+
+					input { 
+						margin   : 0 10px; 
+
+						&:invalid { background : rgb(255, 188, 181); }
+					
+						&[type='checkbox'] {
+							position       : relative;
+							display        : inline-block;
+							width          : 50px;
+							height         : 30px;
+							font-family    : 'WalterTurncoat';
+							font-size      : 20px;
+							font-weight    : 800;
+							color          : white;
+							letter-spacing : 2px;
+							appearance     : none;
+							background     : red;
+							isolation      : isolate;
+							border-radius  : 5px;
+
+							&::before,&::after {
+								position    : absolute;
+								inset       : 0;
+								z-index     : 5;
+								padding-top : 2px;
+								text-align  : center;
+							}
+
+							&::before {
+								display : block;
+								content : 'No';
+							}
+
+							&::after {
+								display : none;
+								content : 'Yes';
+							}
+
+							&:checked {
+								background : green;
+
+								&::before { display : none; }
+								&::after { display : block; }
+							}
+						}
+					}
+
+					
+
+					#searchButton {
+						position : absolute;
+						right    : 20px;
+						bottom   : 0;
+
+						i {
+							margin-left         : 10px;
+							animation-duration  : 1000s;
+						}
+					}
+				}
+			}
+
+			&.resultsContainer {
+				display        : flex;
+				flex-direction : column;
+				height         : 100%;
+				overflow-y     : auto;
+				font-family    : 'BookInsanityRemake';
+				font-size      : 0.34cm;
+
+				
+				h3 {
+					font-family : 'Open Sans';
+					font-weight : 900;
+					color       : white;
+				}
+
+				.foundBrews {
+					position         : relative;
+					width            : 100%;
+					height           : 100%;
+					max-height       : 100%;
+					padding          : 50px 50px 70px 50px;
+					overflow-y       : scroll;
+					background-color : #2C3E50;
+
+					h3 { font-size : 25px; }
+
+					&.noBrews {
+						display     : grid;
+						place-items : center;
+						color       : white;
+					}
+
+					&.searching {
+						display     : grid;
+						place-items : center;
+						color       : white;
+
+						h3 { position : relative; }
+
+						h3.searchAnim::after {
+							position  : absolute;
+							top       : 50%;
+							right     : 0;
+							width     : max-content;
+							height    : 1em;
+							content   : '';
+							translate : calc(100% + 5px) -50%;
+							animation : trailingDots 2s ease infinite;
+						}
+					}
+
+					.totalBrews {
+						position         : fixed;
+						right            : 0;
+						bottom           : 0;
+						z-index          : 1000;
+						padding          : 8px 10px;
+						font-family      : 'Open Sans';
+						font-size        : 11px;
+						font-weight      : 800;
+						color            : white;
+						background-color : #333333;
+
+						.searchAnim {
+							position : relative;
+							display  : inline-block;
+							width    : 3ch;
+							height   : 1em;
+						}
+
+						.searchAnim::after {
+							position  : absolute;
+							top       : 50%;
+							right     : 0;
+							width     : max-content;
+							height    : 1em;
+							content   : '';
+							translate : -50% -50%;
+							animation : trailingDots 2s ease infinite;
+						}
+					}
+
+					.brewItem {
+						width            : 47%;
+						margin-right     : 40px;
+						color            : black;
+						isolation:isolate;
+						
+						&:after {
+							position:absolute;
+							inset:0;
+							display:block;
+							content:'';
+							background-image : url('/assets/parchmentBackground.jpg');
+							z-index:-1;
+						}
+
+						&:nth-child(even of .brewItem) { margin-right : 0; }
+
+						h2 {
+							font-family : 'MrEavesRemake';
+							font-size   : 0.75cm;
+							font-weight : 800;
+							line-height : 0.988em;
+							color       : var(--HB_Color_HeaderText);
+						}
+						.info {
+							font-family : 'ScalySansRemake';
+							font-size   : 1.2em;
+							position:relative;
+							z-index:2;
+
+							>span {
+								margin-right : 12px;
+								line-height  : 1.5em;
+							}
+						}
+						.links {
+							z-index:2;
+						}
+
+						hr {
+							margin: 0px;
+							visibility: hidden;
+						}
+
+						.thumbnail {
+							z-index:1;
+						}
+					}
+
+					.paginationControls {
+						position              : absolute;
+						left                  : 50%;
+						display               : grid;
+						grid-template-areas   : 'previousPage currentPage nextPage';
+						grid-template-columns : 50px 1fr 50px;
+						place-items           : center;
+						width                 : auto;
+						translate             : -50%;
+
+						.pages {
+							display         : flex;
+							grid-area       : currentPage;
+							justify-content : space-evenly;
+							width           : 100%;
+							height          : 100%;
+							padding         : 5px 8px;
+							text-align      : center;
+
+							.pageNumber {
+								margin-inline           : 1vw;
+								font-family             : 'Open Sans';
+								font-weight             : 900;
+								color                   : white;
+								text-underline-position : under;
+								text-wrap               : nowrap;
+								cursor                  : pointer;
+
+								&.currentPage {
+									color           : gold;
+									text-decoration : underline;
+									pointer-events  : none;
+								}
+
+								&.firstPage { margin-right : -5px; }
+
+								&.lastPage { margin-left : -5px; }
+							}
+						}
+
+						button {
+							width : max-content;
+
+							&.previousPage { grid-area : previousPage; }
+
+							&.nextPage { grid-area : nextPage; }
+						}
+
+					}
+				}
+			}
+		}
+	}
+}
+
+@keyframes trailingDots {
+
+	0%,
+	32% { content : ' .'; }
+
+	33%,
+	65% { content : ' ..'; }
+
+	66%,
+	100% { content : ' ...'; }
+}
+
+// media query for when the page is smaller than 1079 px in width
+@media screen and (max-width : 1079px) {
+	.vaultPage .content {
+
+		.dataGroup.form .brewLookup { padding : 1px 20px 20px 10px; }
+
+		.dataGroup.resultsContainer .foundBrews .brewItem {
+			width         : 100%;
+			margin-inline : auto;
+		}
+	}
+}

client/icons/customIcons.less

@@ -52,6 +52,12 @@
 .book-part-cover {
   mask-image: url('../icons/book-part-cover.svg');
 }
+.image-wrap-left {
+  mask-image: url('../icons/image-wrap-left.svg');
+}
+.image-wrap-right {
+  mask-image: url('../icons/image-wrap-right.svg');
+}
 .davek {
   mask-image: url('../icons/Davek.svg');
 }

client/icons/image-wrap-left.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 512.00006 512"
+   xml:space="preserve"
+   id="svg10"
+   sodipodi:docname="noun-wrap-image-left-212078.svg"
+   width="512.00006"
+   height="512"
+   inkscape:export-filename="image-wrap-right.svg"
+   inkscape:export-xdpi="300"
+   inkscape:export-ydpi="300"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs10" /><sodipodi:namedview
+     id="namedview10"
+     pagecolor="#ffffff"
+     bordercolor="#111111"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 185.80018,144 H 32"
+     id="path11"
+     sodipodi:nodetypes="cc"
+     clip-path="none"
+     inkscape:export-filename="image-wrap-right.svg"
+     inkscape:export-xdpi="300"
+     inkscape:export-ydpi="300" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 185.80018,368 H 32"
+     id="path11-8"
+     sodipodi:nodetypes="cc"
+     clip-path="none" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 480.00007,32 H 32"
+     id="path11-8-2-67"
+     clip-path="none"
+     sodipodi:nodetypes="cc" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 480.00008,480 H 32"
+     id="path11-8-2-67-2"
+     clip-path="none"
+     sodipodi:nodetypes="cc" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 160.0001,255.98832 32,256.01162"
+     id="path11-0"
+     sodipodi:nodetypes="cc"
+     clip-path="none" /><path
+     id="path23"
+     style="opacity:0.922046;fill:#000000;fill-opacity:1;stroke-width:64;stroke-linecap:round;stroke-dasharray:none;paint-order:fill markers stroke"
+     d="m 416.00008,96 a 160,160 0 0 1 96,32.50977 v 254.98046 a 160,160 0 0 1 -96,32.50977 160,160 0 0 1 -160,-160 160,160 0 0 1 160,-160 z" /></svg>

client/icons/image-wrap-right.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   version="1.1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 512.00006 512"
+   xml:space="preserve"
+   id="svg10"
+   sodipodi:docname="noun-wrap-image-left-212078.svg"
+   width="512.00006"
+   height="512"
+   inkscape:export-filename="image-wrap-right.svg"
+   inkscape:export-xdpi="300"
+   inkscape:export-ydpi="300"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs10" /><sodipodi:namedview
+     id="namedview10"
+     pagecolor="#ffffff"
+     bordercolor="#111111"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 326.1999,144 H 480.00008"
+     id="path11"
+     sodipodi:nodetypes="cc"
+     clip-path="none"
+     inkscape:export-filename="image-wrap-right.svg"
+     inkscape:export-xdpi="300"
+     inkscape:export-ydpi="300" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 326.1999,368 H 480.00008"
+     id="path11-8"
+     sodipodi:nodetypes="cc"
+     clip-path="none" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 32.00001,32 H 480.00008"
+     id="path11-8-2-67"
+     clip-path="none"
+     sodipodi:nodetypes="cc" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="M 32,480 H 480.00008"
+     id="path11-8-2-67-2"
+     clip-path="none"
+     sodipodi:nodetypes="cc" /><path
+     style="fill:none;stroke:#000000;stroke-width:64;stroke-linecap:round;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+     d="m 351.99998,255.98832 128.0001,0.0233"
+     id="path11-0"
+     sodipodi:nodetypes="cc"
+     clip-path="none" /><path
+     id="path23"
+     style="opacity:0.922046;fill:#000000;fill-opacity:1;stroke-width:64;stroke-linecap:round;stroke-dasharray:none;paint-order:fill markers stroke"
+     d="M 96,96 A 160,160 0 0 0 0,128.50977 V 383.49023 A 160,160 0 0 0 96,416 160,160 0 0 0 256,256 160,160 0 0 0 96,96 Z" /></svg>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "homebrewery",
-  "version": "3.14.2",
+  "version": "3.15.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "homebrewery",
-      "version": "3.14.2",
+      "version": "3.15.0",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -14,7 +14,7 @@
         "@babel/plugin-transform-runtime": "^7.25.4",
         "@babel/preset-env": "^7.25.4",
         "@babel/preset-react": "^7.24.7",
-        "@googleapis/drive": "^8.13.0",
+        "@googleapis/drive": "^8.14.0",
         "body-parser": "^1.20.2",
         "classnames": "^2.5.1",
         "codemirror": "^5.65.6",
@@ -33,12 +33,12 @@
         "lodash": "^4.17.21",
         "marked": "11.2.0",
         "marked-emoji": "^1.4.2",
-        "marked-extended-tables": "^1.0.8",
+        "marked-extended-tables": "^1.0.10",
         "marked-gfm-heading-id": "^3.2.0",
         "marked-smartypants-lite": "^1.0.2",
         "markedLegacy": "npm:marked@^0.3.19",
         "moment": "^2.30.1",
-        "mongoose": "^8.5.4",
+        "mongoose": "^8.6.0",
         "nanoid": "3.3.4",
         "nconf": "^0.12.1",
         "react": "^18.3.1",
@@ -52,13 +52,13 @@
       "devDependencies": {
         "@stylistic/stylelint-plugin": "^3.0.1",
         "eslint": "^9.9.1",
-        "eslint-plugin-jest": "^28.8.0",
+        "eslint-plugin-jest": "^28.8.2",
-        "eslint-plugin-react": "^7.35.0",
+        "eslint-plugin-react": "^7.35.1",
         "globals": "^15.9.0",
         "jest": "^29.7.0",
         "jest-expect-message": "^1.1.3",
         "postcss-less": "^6.0.0",
-        "stylelint": "^16.8.2",
+        "stylelint": "^16.9.0",
         "stylelint-config-recess-order": "^5.1.0",
         "stylelint-config-recommended": "^14.0.1",
         "supertest": "^7.0.0"
@@ -2091,9 +2091,9 @@
       }
     },
     "node_modules/@googleapis/drive": {
-      "version": "8.13.0",
+      "version": "8.14.0",
-      "resolved": "https://registry.npmjs.org/@googleapis/drive/-/drive-8.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/@googleapis/drive/-/drive-8.14.0.tgz",
-      "integrity": "sha512-xpXzZeYtNNFLy1m2D5A8/QR2bngpjLPEvO5KZUW4Dlwi/SBHYNTjVm37IQagtQg6QUJlFb4lVLewenUdZZB1rA==",
+      "integrity": "sha512-AOokfpP6pCdcJXWA8khaCEgbGpWYavWTdAAhL4idbbf2VCQcJ2f7vPalAYNu6a4Sfj0Ly4Ehnd1xw9J9TixB1A==",
       "dependencies": {
         "googleapis-common": "^7.0.0"
       },
@@ -2970,7 +2970,6 @@
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/@mongodb-js/saslprep/-/saslprep-1.1.8.tgz",
       "integrity": "sha512-qKwC/M/nNNaKUBMQ0nuzm47b7ZYWQHN3pcXq4IIcoSBc2hOIrflAxJduIvvqmhoz3gR2TacTAs8vlsCVPkiEdQ==",
-      "license": "MIT",
       "dependencies": {
         "sparse-bitfield": "^3.0.3"
       }
@@ -3172,14 +3171,12 @@
     "node_modules/@types/webidl-conversions": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/@types/webidl-conversions/-/webidl-conversions-7.0.3.tgz",
-      "integrity": "sha512-CiJJvcRtIgzadHCYXw7dqEnMNRjhGZlYK05Mj9OyktqV8uVT8fD2BFOB7S1uwBE3Kj2Z+4UyPmFw/Ixgw/LAlA==",
+      "integrity": "sha512-CiJJvcRtIgzadHCYXw7dqEnMNRjhGZlYK05Mj9OyktqV8uVT8fD2BFOB7S1uwBE3Kj2Z+4UyPmFw/Ixgw/LAlA=="
-      "license": "MIT"
     },
     "node_modules/@types/whatwg-url": {
       "version": "11.0.5",
       "resolved": "https://registry.npmjs.org/@types/whatwg-url/-/whatwg-url-11.0.5.tgz",
       "integrity": "sha512-coYR071JRaHa+xoEvvYqvnIHaVqaYrLPbsufM9BF63HkwI5Lgmy2QR8Q5K/lYDYo5AK82wOvSOS0UsLTpTG7uQ==",
-      "license": "MIT",
       "dependencies": {
         "@types/webidl-conversions": "*"
       }
@@ -4434,7 +4431,6 @@
       "version": "6.8.0",
       "resolved": "https://registry.npmjs.org/bson/-/bson-6.8.0.tgz",
       "integrity": "sha512-iOJg8pr7wq2tg/zSlCCHMi3hMm5JTOxLTagf3zxhcenHsFp+c6uOs6K7W5UE7A4QIJGtqh/ZovFNMP4mOPJynQ==",
-      "license": "Apache-2.0",
       "engines": {
         "node": ">=16.20.1"
       }
@@ -5882,9 +5878,9 @@
       }
     },
     "node_modules/eslint-plugin-jest": {
-      "version": "28.8.0",
+      "version": "28.8.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-28.8.0.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-28.8.2.tgz",
-      "integrity": "sha512-Tubj1hooFxCl52G4qQu0edzV/+EZzPUeN8p2NnW5uu4fbDs+Yo7+qDVDc4/oG3FbCqEBmu/OC3LSsyiU22oghw==",
+      "integrity": "sha512-mC3OyklHmS5i7wYU1rGId9EnxRI8TVlnFG56AE+8U9iRy6zwaNygZR+DsdZuCL0gRG0wVeyzq+uWcPt6yJrrMA==",
       "dev": true,
       "dependencies": {
         "@typescript-eslint/utils": "^6.0.0 || ^7.0.0 || ^8.0.0"
@@ -5907,11 +5903,10 @@
       }
     },
     "node_modules/eslint-plugin-react": {
-      "version": "7.35.0",
+      "version": "7.35.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.35.0.tgz",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.35.1.tgz",
-      "integrity": "sha512-v501SSMOWv8gerHkk+IIQBkcGRGrO2nfybfj5pLxuJNFTPxxA3PSryhXTK+9pNbtkggheDdsC0E9Q8CuPk6JKA==",
+      "integrity": "sha512-B5ok2JgbaaWn/zXbKCGgKDNL2tsID3Pd/c/yvjcpsd9HQDwyYc/TQv3AZMmOvrJgCs3AnYNUHRCQEMMQAYJ7Yg==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "array-includes": "^3.1.8",
         "array.prototype.findlast": "^1.2.5",
@@ -10430,12 +10425,11 @@
       }
     },
     "node_modules/marked-extended-tables": {
-      "version": "1.0.8",
+      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/marked-extended-tables/-/marked-extended-tables-1.0.8.tgz",
+      "resolved": "https://registry.npmjs.org/marked-extended-tables/-/marked-extended-tables-1.0.10.tgz",
-      "integrity": "sha512-GcVQP7EnfQ98o09ooqM4t4M0qfpKdKuk7/z4qZfgkLyXTXsIyFS1eeBmfC36o1NbR6aSq8ynL/LeTz3w4RS27Q==",
+      "integrity": "sha512-zvRS0GPTkxq8UWawSDecd1Rxd2KD8crrmq2QALGDdrgkcgRNQzHlbnlujBGuXxdgDJg7f6UTv+JpcfejBpKdSg==",
-      "license": "MIT",
       "peerDependencies": {
-        "marked": ">=3 <12"
+        "marked": ">=3 <15"
       }
     },
     "node_modules/marked-gfm-heading-id": {
@@ -10513,8 +10507,7 @@
     "node_modules/memory-pager": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/memory-pager/-/memory-pager-1.5.0.tgz",
-      "integrity": "sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg==",
+      "integrity": "sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg=="
-      "license": "MIT"
     },
     "node_modules/meow": {
       "version": "13.2.0",
@@ -10562,11 +10555,10 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.7",
+      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
         "picomatch": "^2.3.1"
@@ -10765,7 +10757,6 @@
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/mongodb-connection-string-url/-/mongodb-connection-string-url-3.0.1.tgz",
       "integrity": "sha512-XqMGwRX0Lgn05TDB4PyG2h2kKO/FfWJyCzYQbIhXUxz7ETt0I/FqHjUeqj37irJ+Dl1ZtU82uYyj14u2XsZKfg==",
-      "license": "Apache-2.0",
       "dependencies": {
         "@types/whatwg-url": "^11.0.2",
         "whatwg-url": "^13.0.0"
@@ -10775,7 +10766,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/tr46/-/tr46-4.1.1.tgz",
       "integrity": "sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw==",
-      "license": "MIT",
       "dependencies": {
         "punycode": "^2.3.0"
       },
@@ -10787,7 +10777,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
       "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
-      "license": "BSD-2-Clause",
       "engines": {
         "node": ">=12"
       }
@@ -10796,7 +10785,6 @@
       "version": "13.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-13.0.0.tgz",
       "integrity": "sha512-9WWbymnqj57+XEuqADHrCJ2eSXzn8WXIW/YSGaZtb2WKAInQ6CHfaUUcTyyver0p8BDg5StLQq8h1vtZuwmOig==",
-      "license": "MIT",
       "dependencies": {
         "tr46": "^4.1.1",
         "webidl-conversions": "^7.0.0"
@@ -10806,13 +10794,13 @@
       }
     },
     "node_modules/mongoose": {
-      "version": "8.5.4",
+      "version": "8.6.0",
-      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-8.5.4.tgz",
+      "resolved": "https://registry.npmjs.org/mongoose/-/mongoose-8.6.0.tgz",
-      "integrity": "sha512-nG3eehhWf9l1q80WuHvp5DV+4xDNFpDWLE5ZgcFD5tslUV2USJ56ogun8gaZ62MKAocJnoStjAdno08b8U57hg==",
+      "integrity": "sha512-p6VSbYKvD4ZIabqo8C0kS5eKX1Xpji+opTAIJ9wyuPJ8Y/FblgXSMnFRXnB40bYZLKPQT089K5KU8+bqIXtFdw==",
       "dependencies": {
         "bson": "^6.7.0",
         "kareem": "2.6.3",
-        "mongodb": "6.7.0",
+        "mongodb": "6.8.0",
         "mpath": "0.9.0",
         "mquery": "5.0.0",
         "ms": "2.1.3",
@@ -10830,7 +10818,6 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
       "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
-      "license": "MIT",
       "optional": true,
       "peer": true,
       "dependencies": {
@@ -10844,7 +10831,6 @@
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/gaxios/-/gaxios-5.1.3.tgz",
       "integrity": "sha512-95hVgBRgEIRQQQHIbnxBXeHbW4TqFk4ZDJW7wmVtvYar72FdhRIo1UGOLS2eRAKCPEdPBWu+M7+A33D9CdX9rA==",
-      "license": "Apache-2.0",
       "optional": true,
       "peer": true,
       "dependencies": {
@@ -10861,7 +10847,6 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/gcp-metadata/-/gcp-metadata-5.3.0.tgz",
       "integrity": "sha512-FNTkdNEnBdlqF2oatizolQqNANMrcqJt6AAYt99B3y1aLLC8Hc5IOBb+ZnnzllodEEf6xMBp6wRcBbc16fa65w==",
-      "license": "Apache-2.0",
       "optional": true,
       "peer": true,
       "dependencies": {
@@ -10876,7 +10861,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
       "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
-      "license": "MIT",
       "optional": true,
       "peer": true,
       "dependencies": {
@@ -10888,10 +10872,9 @@
       }
     },
     "node_modules/mongoose/node_modules/mongodb": {
-      "version": "6.7.0",
+      "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-6.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-6.8.0.tgz",
-      "integrity": "sha512-TMKyHdtMcO0fYBNORiYdmM25ijsHs+Njs963r4Tro4OQZzqYigAzYQouwWRg4OIaiLRUEGUh/1UAcH5lxdSLIA==",
+      "integrity": "sha512-HGQ9NWDle5WvwMnrvUxsFYPd3JEbqD3RgABHBQRuoCEND0qzhsd0iH5ypHsf1eJ+sXmvmyKpP+FLOKY8Il7jMw==",
-      "license": "Apache-2.0",
       "dependencies": {
         "@mongodb-js/saslprep": "^1.1.5",
         "bson": "^6.7.0",
@@ -13231,7 +13214,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz",
       "integrity": "sha512-kvzhi7vqKTfkh0PZU+2D2PIllw2ymqJKujUcyPMd9Y75Nv4nPbGJZXNhxsgdQab2BmlDct1YnfQCguEvHr7VsQ==",
-      "license": "MIT",
       "dependencies": {
         "memory-pager": "^1.0.2"
       }
@@ -13573,9 +13555,9 @@
       "license": "ISC"
     },
     "node_modules/stylelint": {
-      "version": "16.8.2",
+      "version": "16.9.0",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.8.2.tgz",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.9.0.tgz",
-      "integrity": "sha512-fInKATippQhcSm7AB+T32GpI+626yohrg33GkFT/5jzliUw5qhlwZq2UQQwgl3HsHrf09oeARi0ZwgY/UWEv9A==",
+      "integrity": "sha512-31Nm3WjxGOBGpQqF43o3wO9L5AC36TPIe6030Lnm13H3vDMTcS21DrLh69bMX+DBilKqMMVLian4iG6ybBoNRQ==",
       "dev": true,
       "funding": [
         {
@@ -13588,9 +13570,9 @@
         }
       ],
       "dependencies": {
-        "@csstools/css-parser-algorithms": "^3.0.0",
+        "@csstools/css-parser-algorithms": "^3.0.1",
-        "@csstools/css-tokenizer": "^3.0.0",
+        "@csstools/css-tokenizer": "^3.0.1",
-        "@csstools/media-query-list-parser": "^3.0.0",
+        "@csstools/media-query-list-parser": "^3.0.1",
         "@csstools/selector-specificity": "^4.0.0",
         "@dual-bundle/import-meta-resolve": "^4.1.0",
         "balanced-match": "^2.0.0",
@@ -13612,7 +13594,7 @@
         "known-css-properties": "^0.34.0",
         "mathml-tag-names": "^2.1.3",
         "meow": "^13.2.0",
-        "micromatch": "^4.0.7",
+        "micromatch": "^4.0.8",
         "normalize-path": "^3.0.0",
         "picocolors": "^1.0.1",
         "postcss": "^8.4.41",
@@ -13623,7 +13605,7 @@
         "resolve-from": "^5.0.0",
         "string-width": "^4.2.3",
         "strip-ansi": "^7.1.0",
-        "supports-hyperlinks": "^3.0.0",
+        "supports-hyperlinks": "^3.1.0",
         "svg-tags": "^1.0.0",
         "table": "^6.8.2",
         "write-file-atomic": "^5.0.1"
@@ -13684,70 +13666,6 @@
         "stylelint": "^14.0.0 || ^15.0.0 || ^16.0.1"
       }
     },
-    "node_modules/stylelint/node_modules/@csstools/css-parser-algorithms": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.1.tgz",
-      "integrity": "sha512-lSquqZCHxDfuTg/Sk2hiS0mcSFCEBuj49JfzPHJogDBT0mGCyY5A1AQzBWngitrp7i1/HAZpIgzF/VjhOEIJIg==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/csstools"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/csstools"
-        }
-      ],
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "@csstools/css-tokenizer": "^3.0.1"
-      }
-    },
-    "node_modules/stylelint/node_modules/@csstools/css-tokenizer": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.1.tgz",
-      "integrity": "sha512-UBqaiu7kU0lfvaP982/o3khfXccVlHPWp0/vwwiIgDF0GmqqqxoiXC/6FCjlS9u92f7CoEz6nXKQnrn1kIAkOw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/csstools"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/csstools"
-        }
-      ],
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/stylelint/node_modules/@csstools/media-query-list-parser": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-3.0.1.tgz",
-      "integrity": "sha512-HNo8gGD02kHmcbX6PvCoUuOQvn4szyB9ca63vZHKX5A81QytgDG4oxG4IaEfHTlEZSZ6MjPEMWIVU+zF2PZcgw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/csstools"
-        },
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/csstools"
-        }
-      ],
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "@csstools/css-parser-algorithms": "^3.0.1",
-        "@csstools/css-tokenizer": "^3.0.1"
-      }
-    },
     "node_modules/stylelint/node_modules/ansi-regex": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
@@ -13947,17 +13865,19 @@
       }
     },
     "node_modules/supports-hyperlinks": {
-      "version": "3.0.0",
+      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-3.1.0.tgz",
-      "integrity": "sha512-QBDPHyPQDRTy9ku4URNGY5Lah8PAaXs6tAAwp55sL5WCsSW7GIfdf6W5ixfziW+t7wh3GVvHyHHyQ1ESsoRvaA==",
+      "integrity": "sha512-2rn0BZ+/f7puLOHZm1HOJfwBggfaHXUpPUSSG/SWM4TWp5KCfmNYwnC3hruy2rZlMnmWZ+QAGpZfchu3f3695A==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "has-flag": "^4.0.0",
         "supports-color": "^7.0.0"
       },
       "engines": {
         "node": ">=14.18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/supports-hyperlinks/node_modules/has-flag": {
@@ -13965,7 +13885,6 @@
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true,
-      "license": "MIT",
       "engines": {
         "node": ">=8"
       }
@@ -13975,7 +13894,6 @@
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
       "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
       "dev": true,
-      "license": "MIT",
       "dependencies": {
         "has-flag": "^4.0.0"
       },

package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "3.14.2",
+  "version": "3.15.0",
   "engines": {
     "npm": "^10.2.x",
     "node": "^20.8.x"
@@ -89,7 +89,7 @@
     "@babel/plugin-transform-runtime": "^7.25.4",
     "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
-    "@googleapis/drive": "^8.13.0",
+    "@googleapis/drive": "^8.14.0",
     "body-parser": "^1.20.2",
     "classnames": "^2.5.1",
     "codemirror": "^5.65.6",
@@ -108,12 +108,12 @@
     "lodash": "^4.17.21",
     "marked": "11.2.0",
     "marked-emoji": "^1.4.2",
-    "marked-extended-tables": "^1.0.8",
+    "marked-extended-tables": "^1.0.10",
     "marked-gfm-heading-id": "^3.2.0",
     "marked-smartypants-lite": "^1.0.2",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.30.1",
-    "mongoose": "^8.5.4",
+    "mongoose": "^8.6.0",
     "nanoid": "3.3.4",
     "nconf": "^0.12.1",
     "react": "^18.3.1",
@@ -127,13 +127,13 @@
   "devDependencies": {
     "@stylistic/stylelint-plugin": "^3.0.1",
     "eslint": "^9.9.1",
-    "eslint-plugin-jest": "^28.8.0",
+    "eslint-plugin-jest": "^28.8.2",
-    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react": "^7.35.1",
     "globals": "^15.9.0",
     "jest": "^29.7.0",
     "jest-expect-message": "^1.1.3",
     "postcss-less": "^6.0.0",
-    "stylelint": "^16.8.2",
+    "stylelint": "^16.9.0",
     "stylelint-config-recess-order": "^5.1.0",
     "stylelint-config-recommended": "^14.0.1",
     "supertest": "^7.0.0"

server/app.js

@@ -55,6 +55,7 @@ app.use((req, res, next)=>{
 
 app.use(homebrewApi);
 app.use(require('./admin.api.js'));
+app.use(require('./vault.api.js'));
 
 const HomebrewModel     = require('./homebrew.model.js').model;
 const welcomeText       = require('fs').readFileSync('client/homebrew/pages/homePage/welcome_msg.md', 'utf8');
@@ -361,6 +362,15 @@ app.get('/account', asyncHandler(async (req, res, next)=>{
 	const data = {};
 	data.title = 'Account Information Page';
 	
+	if(!req.account) {
+		res.set('WWW-Authenticate', 'Bearer realm="Authorization Required"');
+		const error = new Error('No valid account');
+		error.status = 401;
+		error.HBErrorCode = '50';
+		error.page = data.title;
+		return next(error);
+	};
+
 	let auth;
 	let googleCount = [];
 	if(req.account) {
@@ -424,6 +434,11 @@ if(isLocalEnvironment){
 	});
 }
 
+//Vault Page
+app.get('/vault', asyncHandler(async(req, res, next)=>{
+	return next();
+}));
+
 //Send rendered page
 app.use(asyncHandler(async (req, res, next)=>{
 	if (!req.route) return res.redirect('/'); // Catch-all for invalid routes

server/homebrew.api.js

@@ -99,7 +99,7 @@ const api = {
 			stub = stub?.toObject();
 
 			if(stub?.lock?.locked && accessType != 'edit') {
-				throw { HBErrorCode: '100', code: stub.lock.code, message: stub.lock.shareMessage, brewId: stub.shareId, brewTitle: stub.title };
+				throw { HBErrorCode: '51', code: stub.lock.code, message: stub.lock.shareMessage, brewId: stub.shareId, brewTitle: stub.title };
 			}
 
 			// If there is a google id, try to find the google brew

server/homebrew.api.spec.js

@@ -309,7 +309,7 @@ describe('Tests for api', ()=>{
 			const req = { brew: {} };
 			const next = jest.fn();
 
-			await expect(fn(req, null, next)).rejects.toEqual({ 'HBErrorCode': '100', 'brewId': '1', 'brewTitle': 'test brew', 'code': 404, 'message': 'brew locked' });
+			await expect(fn(req, null, next)).rejects.toEqual({ 'HBErrorCode': '51', 'brewId': '1', 'brewTitle': 'test brew', 'code': 404, 'message': 'brew locked' });
 		});
 	});
 

server/vault.api.js

@@ -0,0 +1,102 @@
+const express = require('express');
+const asyncHandler = require('express-async-handler');
+const HomebrewModel = require('./homebrew.model.js').model;
+
+const router = express.Router();
+
+const titleConditions = (title)=>{
+	if(!title) return {};
+	return {
+		$text : {
+			$search        : title,
+			$caseSensitive : false,
+		},
+	};
+};
+
+const authorConditions = (author)=>{
+	if(!author) return {};
+	return { authors: author };
+};
+
+const rendererConditions = (legacy, v3)=>{
+	if(legacy === 'true' && v3 !== 'true')
+		return { renderer: 'legacy' };
+
+	if(v3 === 'true' && legacy !== 'true')
+		return { renderer: 'V3' };
+
+	return {}; // If all renderers selected, renderer field not needed in query for speed
+};
+
+const findBrews = async (req, res)=>{
+	const title  = req.query.title || '';
+	const author = req.query.author || '';
+	const page   = Math.max(parseInt(req.query.page)  || 1, 1);
+	const count  = Math.max(parseInt(req.query.count) || 20, 10);
+	const skip   = (page - 1) * count;
+
+	const combinedQuery = {
+		$and : [
+			{ published: true },
+			rendererConditions(req.query.legacy, req.query.v3),
+			titleConditions(title),
+			authorConditions(author)
+		],
+	};
+
+	const projection = {
+		editId   : 0,
+		googleId : 0,
+		text     : 0,
+		textBin  : 0,
+		version  : 0
+	};
+
+	await HomebrewModel.find(combinedQuery, projection)
+		.skip(skip)
+		.limit(count)
+		.maxTimeMS(5000)
+		.exec()
+		.then((brews)=>{
+			const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+			const processedBrews = brews.map((brew)=>{
+				brew.authors = brew.authors.map((author)=>emailRegex.test(author) ? 'hidden' : author
+				);
+				return brew;
+			});
+			res.json({ brews: processedBrews, page });
+		})
+		.catch((error)=>{
+			throw { ...error, message: 'Error finding brews in Vault search', HBErrorCode: 90 };
+		});
+};
+
+const findTotal = async (req, res)=>{
+	const title  = req.query.title || '';
+	const author = req.query.author || '';
+
+	const combinedQuery = {
+		$and : [
+			{ published: true },
+			rendererConditions(req.query.legacy, req.query.v3),
+			titleConditions(title),
+			authorConditions(author)
+		],
+	};
+
+	await HomebrewModel.countDocuments(combinedQuery)
+		.then((totalBrews)=>{
+			console.log(`when returning, the total of brews is ${totalBrews} for the query ${JSON.stringify(combinedQuery)}`);
+			res.json({ totalBrews });
+		})
+		.catch((error)=>{
+			throw { ...error, message: 'Error finding brews in Vault search findTotal function', HBErrorCode: 91 };
+		});
+};
+
+router.get('/api/vault/total', asyncHandler(findTotal));
+router.get('/api/vault', asyncHandler(findBrews));
+
+module.exports = router;

shared/naturalcrit/markdown.js

@@ -102,6 +102,20 @@ renderer.link = function (href, title, text) {
 	return out;
 };
 
+// Expose `src` attribute as `--HB_src` to make the URL accessible via CSS
+renderer.image = function (href, title, text) {
+	href = cleanUrl(href);
+	if (href === null)
+		return text;
+
+	let out = `<img src="${href}" alt="${text}" style="--HB_src:url(${href});"`;
+	if (title)
+		out += ` title="${title}"`;
+
+	out += '>';
+	return out;
+}
+
 // Disable default reflink behavior, as it steps on our variables extension
 tokenizer.def = function () {
 	return undefined;
@@ -727,12 +741,18 @@ const MarkedEmojiOptions = {
 	renderer : (token)=>`<i class="${token.emoji}"></i>`
 };
 
+const tableTerminators = [
+	`:+\\n`,                // hardBreak
+	` *{[^\n]+}`,           // blockInjector
+	` *{{[^{\n]*\n.*?\n}}`  // mustacheDiv
+]
+
 Marked.use(MarkedVariables());
 Marked.use({ extensions : [definitionListsMultiLine, definitionListsSingleLine, forcedParagraphBreaks, superSubScripts,
 	mustacheSpans, mustacheDivs, mustacheInjectInline] });
 Marked.use(mustacheInjectBlock);
 Marked.use({ renderer: renderer, tokenizer: tokenizer, mangle: false });
-Marked.use(MarkedExtendedTables(), MarkedGFMHeadingId({ globalSlugs: true }), MarkedSmartypantsLite(), MarkedEmojis(MarkedEmojiOptions));
+Marked.use(MarkedExtendedTables(tableTerminators), MarkedGFMHeadingId({ globalSlugs: true }), MarkedSmartypantsLite(), MarkedEmojis(MarkedEmojiOptions));
 
 function cleanUrl(href) {
   try {

shared/naturalcrit/splitPane/splitPane.jsx

@@ -8,7 +8,8 @@ const SplitPane = createClass({
 	getDefaultProps : function() {
 		return {
 			storageKey         : 'naturalcrit-pane-split',
-			onDragFinish : function(){} //fires when dragging
+			onDragFinish       : function(){}, //fires when dragging
+			showDividerButtons : true
 		};
 	},
 
@@ -18,8 +19,7 @@ const SplitPane = createClass({
 			windowWidth       : 0,
 			isDragging        : false,
 			moveSource        : false,
-			moveBrew          : false,
+			moveBrew          : false
-			showMoveArrows    : true
 		};
 	},
 
@@ -142,9 +142,11 @@ const SplitPane = createClass({
 				width={this.state.currentDividerPos}
 			>
 				{React.cloneElement(this.props.children[0], {
+					...(this.props.showDividerButtons && {
 						moveBrew: this.state.moveBrew,
 						moveSource: this.state.moveSource,
-					setMoveArrows : this.setMoveArrows
+						setMoveArrows: this.setMoveArrows,
+					}),
 				})}
 			</Pane>
 			{this.renderDivider()}

tests/markdown/mustache-syntax.test.js

@@ -322,9 +322,9 @@ describe('Injection: When an injection tag follows an element', ()=>{
 		});
 
 		it('Renders an image element with injected style', function() {
-			const source = '![alt text](http://i.imgur.com/hMna6G0.png){position:absolute}';
+			const source = '![alt text](https://i.imgur.com/hMna6G0.png){position:absolute}';
 			const rendered = Markdown.render(source).trimReturns();
-			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p><img style="position:absolute;" src="http://i.imgur.com/hMna6G0.png" alt="alt text"></p>');
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<p><img style="--HB_src:url(https://i.imgur.com/hMna6G0.png); position:absolute;" src="https://i.imgur.com/hMna6G0.png" alt="alt text"></p>');
 		});
 
 		it('Renders an element modified by only the first of two consecutive injections', function() {
@@ -343,19 +343,19 @@ describe('Injection: When an injection tag follows an element', ()=>{
 		it('Renders an image with added attributes', function() {
 			const source = `![homebrew mug](https://i.imgur.com/hMna6G0.png) {position:absolute,bottom:20px,left:130px,width:220px,a="b and c",d=e}`;
 			const rendered = Markdown.render(source).trimReturns();
-			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><img style="position:absolute; bottom:20px; left:130px; width:220px;" src="https://i.imgur.com/hMna6G0.png" alt="homebrew mug" a="b and c" d="e"></p>`);
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><img style="--HB_src:url(https://i.imgur.com/hMna6G0.png); position:absolute; bottom:20px; left:130px; width:220px;" src="https://i.imgur.com/hMna6G0.png" alt="homebrew mug" a="b and c" d="e"></p>`);
 		});
 
 		it('Renders an image with "=" in the url, and added attributes', function() {
 			const source = `![homebrew mug](https://i.imgur.com/hMna6G0.png?auth=12345&height=1024) {position:absolute,bottom:20px,left:130px,width:220px,a="b and c",d=e}`;
 			const rendered = Markdown.render(source).trimReturns();
-			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><img style="position:absolute; bottom:20px; left:130px; width:220px;" src="https://i.imgur.com/hMna6G0.png?auth=12345&height=1024" alt="homebrew mug" a="b and c" d="e"></p>`);
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><img style="--HB_src:url(https://i.imgur.com/hMna6G0.png?auth=12345&height=1024); position:absolute; bottom:20px; left:130px; width:220px;" src="https://i.imgur.com/hMna6G0.png?auth=12345&height=1024" alt="homebrew mug" a="b and c" d="e"></p>`);
 		});
 
 		it('Renders an image and added attributes with "=" in the value, ', function() {
 			const source = `![homebrew mug](https://i.imgur.com/hMna6G0.png) {position:absolute,bottom:20px,left:130px,width:220px,a="b and c",d=e,otherUrl="url?auth=12345"}`;
 			const rendered = Markdown.render(source).trimReturns();
-			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><img style="position:absolute; bottom:20px; left:130px; width:220px;" src="https://i.imgur.com/hMna6G0.png" alt="homebrew mug" a="b and c" d="e" otherUrl="url?auth=12345"></p>`);
+			expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p><img style="--HB_src:url(https://i.imgur.com/hMna6G0.png); position:absolute; bottom:20px; left:130px; width:220px;" src="https://i.imgur.com/hMna6G0.png" alt="homebrew mug" a="b and c" d="e" otherUrl="url?auth=12345"></p>`);
 		});
 	});
 

tests/markdown/variables.test.js

@@ -315,21 +315,21 @@ describe('Normal Links and Images', ()=>{
 		const source = `![alt text](url)`;
 		const rendered = Markdown.render(source).trimReturns();
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
-			<p><img src="url" alt="alt text"></p>`.trimReturns());
+			<p><img src="url" alt="alt text" style="--HB_src:url(url);"></p>`.trimReturns());
 	});
 
 	it('Renders normal images with a title', function() {
 		const source = 'An image ![alt text](url "and title")!';
 		const rendered = Markdown.render(source).trimReturns();
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
-			<p>An image <img src="url" alt="alt text" title="and title">!</p>`.trimReturns());
+			<p>An image <img src="url" alt="alt text" style="--HB_src:url(url);" title="and title">!</p>`.trimReturns());
 	});
 
 	it('Applies curly injectors to images', function() {
 		const source = `![alt text](url){width:100px}`;
 		const rendered = Markdown.render(source).trimReturns();
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(dedent`
-			<p><img style="width:100px;" src="url" alt="alt text"></p>`.trimReturns());
+			<p><img style="--HB_src:url(url); width:100px;" src="url" alt="alt text"></p>`.trimReturns());
 	});
 
 	it('Renders normal links', function() {

themes/V3/Blank/snippets.js

@@ -153,6 +153,18 @@ module.exports = [
 				gen  : dedent`
 					![cat warrior](https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg) {width:325px,mix-blend-mode:multiply}`
 			},
+			{
+				name : 'Image Wrap Left',
+				icon : 'fac image-wrap-left',
+				gen  : dedent`
+					![homebrewery_mug](http://i.imgur.com/hMna6G0.png) {width:280px,margin-right:-3cm,wrapLeft}`
+			},
+			{
+				name : 'Image Wrap Right',
+				icon : 'fac image-wrap-right',
+				gen  : dedent`
+					![homebrewery_mug](http://i.imgur.com/hMna6G0.png) {width:280px,margin-left:-3cm,wrapRight}`
+			},
 			{
 				name : 'Background Image',
 				icon : 'fas fa-tree',

themes/V3/Blank/style.less

@@ -156,6 +156,19 @@ body { counter-reset : page-numbers; }
 		break-inside                : avoid;
 	}
 
+	/* Wrap Text */
+	.wrapLeft {
+		shape-outside : var(--HB_src);
+		float         : right;
+		shape-margin  : 0.2cm;
+	}
+
+	.wrapRight {
+		shape-outside : var(--HB_src);
+		float         : left;
+		shape-margin  : 0.2cm;
+	}
+
 	/* Watermark */
 	.watermark {
 		position        : absolute;