Merge branch 'master' into dependabot/npm_and_yarn/dev-dependencies-65f50cb316

Move SVG components to components folder

.circleci/config.yml

@@ -10,7 +10,7 @@ orbs:
 jobs:
   build:
     docker:
-      - image: cimg/node:20.17.0
+      - image: cimg/node:20.18.0
       - image: mongo:4.4
 
     working_directory: ~/homebrewery
@@ -64,9 +64,6 @@ jobs:
       - run:
           name: Test - Mustache Spans
           command: npm run test:mustache-syntax
-      - run:
-          name: Test - Definition Lists
-          command: npm run test:definition-lists
       - run:
           name: Test - Hard Breaks
           command: npm run test:hard-breaks

.github/dependabot.yml

@@ -5,6 +5,15 @@ updates:
   schedule:
     interval: daily
   open-pull-requests-limit: 99
+  groups:
+    dev-dependencies:
+      dependency-type: "development"
+      patterns: ["*"]
+      update-types: ["patch", "minor"]
+    prod-dependencies:
+      dependency-type: "production"
+      patterns: ["*"]
+      update-types: ["patch", "minor"]
   ignore:
   - dependency-name: eslint
     versions:

README.DOCKER.md

@@ -47,9 +47,7 @@ Make an changes you need to `config/docker.json` then build the image. If it doe
 "naturalcrit_url" : "local.naturalcrit.com:8010",
 "secret" : "secret",
 "web_port" : 8000,
-"enable_v3" : true,
 "mongodb_uri": "mongodb://172.17.0.2/homebrewery",
-"enable_themes" : true,
 }
 ```
 
@@ -90,6 +88,13 @@ docker run --name homebrewery-mongodb -d --restart unless-stopped -v mongodata:/
 docker run --name homebrewery-app -d --restart unless-stopped -e NODE_ENV=docker -v $(pwd)/config/docker.json:/usr/src/app/config/docker.json -p 8000:8000 docker.io/library/homebrewery:latest
 ```
 
+**NOTE:** If you are running from the Windows command line, this will not work as `$(pwd)` is not valid syntax. Use this command instead:
+```shell
+# Make sure you run this in the homebrewery directory
+docker run --name homebrewery-app -d --restart unless-stopped -e NODE_ENV=docker -v %cd%/config/docker.json:/usr/src/app/config/docker.json -p 8000:8000 docker.io/library/homebrewery:latest
+```
+
+
 ## Updating the Image
 
 When Homebrewery code updates, your docker container will not automatically follow the changes. To do so you will need to rebuild your homebrewery image. 
@@ -117,3 +122,9 @@ docker-compose build homebrewery
 docker run --name homebrewery-app -d --restart unless-stopped -e NODE_ENV=docker -v $(pwd)/config/docker.json:/usr/src/app/config/docker.json -p 8000:8000 docker.io/library/homebrewery:latest
 ```
 
+**NOTE:** If you are running from the Windows command line, this will not work as `$(pwd)` is not valid syntax. Use this command instead:
+```shell
+# Make sure you run this in the homebrewery directory
+docker run --name homebrewery-app -d --restart unless-stopped -e NODE_ENV=docker -v %cd%/config/docker.json:/usr/src/app/config/docker.json -p 8000:8000 docker.io/library/homebrewery:latest
+```
+

README.md

@@ -75,8 +75,9 @@ it using the two commands:
 1. `npm install`
 1. `npm start`
 
-You should now be able to go to [http://localhost:8000](http://localhost:8000)
-in your browser and use The Homebrewery offline.
+When the Homebrewery server is started for the first time, it will modify the database to create the indexes required for better Homebrewery performance. This may take a few moments to complete for each index, dependent on how much content is in your local database - a brand new, empty database should be done in seconds.
+
+On completion, you should be able to go to [http://localhost:8000](http://localhost:8000) in your browser and use The Homebrewery offline.
 
 If you had any issue at all, here are some links that may be useful:
 - [Course](https://learn.mongodb.com/courses/m103-basic-cluster-administration) on cluster administration, useful for beginners
@@ -144,3 +145,5 @@ your contribution to the project, please join our [gitter chat][gitter-url].
 [github-mark-duplicate-url]: https://docs.github.com/en/free-pro-team@latest/github/managing-your-work-on-github/about-duplicate-issues-and-pull-requests
 [github-pr-docs-url]: https://docs.github.com/en/free-pro-team@latest/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request
 [gitter-url]: https://gitter.im/naturalcrit/Lobby
+
+

changelog.md

@@ -88,10 +88,94 @@ pre {
 ## changelog
 For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
 
+### Wednesday 7/09/2025 - v3.19.3
+
+{{taskList
+##### calculuschild
+* [x] Restoring original saving behavior; will continue investigating why save was failing for some users in background
+}}
+
+
+### Wednesday 7/09/2025 - v3.19.2
+
+{{taskList
+##### calculuschild
+* [x] Hotfix for saving issues - Please refresh your browser and report if problems continue
+}}
+
+### Wednesday 7/09/2025 - v3.19.1
+
+{{taskList
+##### calculuschild
+* [x] Send diffs instead of full file on save - should help with timeout/disconnect errors
+}}
+
+\column
+
+### Thursday 05/22/2025 - v3.19.0
+
+{{taskList
+##### abquintic
+* [x] Fix crash due to colons after `\page`
+
+Fixes issue [#4105](https://github.com/naturalcrit/homebrewery/issues/4105)
+
+* [x] Fix images with spaces in alt text not rendering
+
+Fixes issue [#3659](https://github.com/naturalcrit/homebrewery/issues/3659)
+
+* [x] Custom snippets! Open the new {{openSans **:fas_table_list: SNIPPETS**}} tab (next to the {{openSans **:fas_paintbrush: STYLE**}} tab). Custom snippets will appear in a new snippet dropdown, and will be included when imported as a custom theme.
+
+* [x] Move several generic styles/snippets from PHB to the Blank theme; generic snippets like image masks no longer require the PHB theme.
+
+* [x] Extract several Markdown+ syntax extensions into their own NPM packages, for use by the wider community.
+
+* [x] Allow `\pagebreak` and `\columnbreak` as alternatives to `\page` and `\column`
+
+Partially fixes issue [#4035](https://github.com/naturalcrit/homebrewery/issues/4035)
+
+* [x] Fix misbehaving column breaks on old Chrome
+
+Fixes issue [#4192](https://github.com/naturalcrit/homebrewery/issues/4192)
+
+* [x] Self-host font-awesome icons; fix missing icons on local installs
+
+Fixes issue [#1965](https://github.com/naturalcrit/homebrewery/issues/1965)
+Fixes issue [#1548](https://github.com/naturalcrit/homebrewery/issues/1548)
+
+##### G-Ambatte
+* [x] Fix CORS issue on local installs
+
+* [x] Fix print size issues when using the Facing and Flow view options.
+
+Fixes issue [#4146](https://github.com/naturalcrit/homebrewery/issues/4146)
+
+* [x] New built-in `$[HB_pageNumber]` variable. Works with math operations or can be reassigned like any other variable for more customization over the old `{{pageNumber,auto}}` snippet.\
+New snippet found at {{openSans **:fas_pencil: TEXT EDITOR :fas_arrow_right: :fas_bookmark: PAGE NUMBERING :fas_arrow_right: :fas_arrow_down_1_9: VARIABLE AUTO PAGE NUMBER**}}
+
+##### 5e-Cleric
+* [x] Fix search bar covering up snippet bar (3 times)
+
+Fixes issue [#4098](https://github.com/naturalcrit/homebrewery/issues/4098)
+
+* [x] Save view toolbar settings across sessions
+
+Fixes issue [#3835](https://github.com/naturalcrit/homebrewery/issues/3835)
+
+* [x] Fix styling issues on the view toolbar
+
+* [x] Update the Darkbrewery editor theme
+
+Fixes issue [#3312](https://github.com/naturalcrit/homebrewery/issues/3312)
+
+}}
+
+\page
+
 ### Monday 03/10/2025 - v3.18.0
 
 {{taskList
-##### dbolack
+##### abquintic
 * [x] Add ability to paste in any Share ID/URL into a brew's {{openSans :fas_circle_info: **Properties** :fas_arrow_right: **THEMES**}} selection, as long as that brew has been tagged as `meta:theme`. You can now share your custom brew themes without needing to make a personal copy.
 * [x] Begin migration of custom Markdown extensions into their own NPM packages, for easier adoption by other users or projects
 * [x] Fix external HTML appearing in open codeblocks
@@ -114,6 +198,9 @@ Fixes issue [#1729](https://github.com/naturalcrit/homebrewery/issues/1729)
 ##### 5e-Cleric
 * [x] Style fixes for covers art and logos on A4 size pages
 * [x] Fix crash when trying to open brews that don't exist
+* [x] Tweaks and style update styling on {{openSans **VAULT** :fas_dungeon:}} page.
+
+Fixes issue [#4079](https://github.com/naturalcrit/homebrewery/issues/4079)
 
 ##### Calculuschild
 * [x] `꞉꞉꞉꞉` now produces `<br>` instead of a `<div>`
@@ -150,7 +237,7 @@ Fixes issue [#4073](https://github.com/naturalcrit/homebrewery/issues/4073)
 
 * [x] Fix Reddit link crash when title has non-latin chars
 
-##### dbolack
+##### abquintic
 
 * [x] Fix page shadows toolbar option
 

client/admin/admin.jsx

@@ -3,18 +3,21 @@ import React, { useEffect, useState } from 'react';
 const BrewUtils = require('./brewUtils/brewUtils.jsx');
 const NotificationUtils = require('./notificationUtils/notificationUtils.jsx');
 import AuthorUtils from './authorUtils/authorUtils.jsx';
+import LockTools  from './lockTools/lockTools.jsx';
 
-const tabGroups = ['brew', 'notifications', 'authors'];
+const tabGroups = ['brew', 'notifications', 'authors', 'locks'];
+
+const ADMIN_TAB = 'HB_adminPage_currentTab';
 
 const Admin = ()=>{
-	const [currentTab, setCurrentTab] = useState('brew');
+	const [currentTab, setCurrentTab] = useState('');
 
 	useEffect(()=>{
-		setCurrentTab(localStorage.getItem('hbAdminTab'));
+		setCurrentTab(localStorage.getItem(ADMIN_TAB) || 'brew');
 	}, []);
 
 	useEffect(()=>{
-		localStorage.setItem('hbAdminTab', currentTab);
+		localStorage.setItem(ADMIN_TAB, currentTab);
 	}, [currentTab]);
 
 	return (
@@ -40,6 +43,7 @@ const Admin = ()=>{
 				{currentTab === 'brew' && <BrewUtils />}
 				{currentTab === 'notifications' && <NotificationUtils />}
 				{currentTab === 'authors' && <AuthorUtils />}
+        		{currentTab === 'locks' && <LockTools />}
 			</main>
 		</div>
 	);

client/admin/admin.less

@@ -3,6 +3,7 @@
 @import 'naturalcrit/styles/animations.less';
 @import 'naturalcrit/styles/colors.less';
 @import 'naturalcrit/styles/tooltip.less';
+@import './themes/fonts/iconFonts/fontAwesome.less';
 
 @import 'font-awesome/css/font-awesome.css';
 

client/admin/authorUtils/authorLookup/authorLookup.less

@@ -20,7 +20,7 @@
 		}
 	
 		button {
-			width: 50px;
+			width : 50px;
 				
 			i { margin-right : 10px; }
 		}

client/admin/lockTools/lockTools.jsx

@@ -0,0 +1,342 @@
+/*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/
+require('./lockTools.less');
+const React = require('react');
+const createClass = require('create-react-class');
+
+import request from '../../homebrew/utils/request-middleware.js';
+
+const LockTools = createClass({
+	displayName     : 'LockTools',
+	getInitialState : function() {
+		return {
+			fetching    : false,
+			reviewCount : 0
+		};
+	},
+
+	componentDidMount : function() {
+		this.updateReviewCount();
+	},
+
+	updateReviewCount : async function() {
+		const newCount = await request.get('/api/lock/count')
+            .then((res)=>{return res.body?.count || 'Unknown';});
+		if(newCount != this.state.reviewCount){
+			this.setState({
+				reviewCount : newCount
+			});
+		}
+	},
+
+	updateLockData : function(lock){
+		this.setState({
+			lock : lock
+		});
+	},
+
+	render : function() {
+		return <div className='lockTools'>
+			<h2>Lock Count</h2>
+			<p>Number of brews currently locked: {this.state.reviewCount}</p>
+			<button onClick={this.updateReviewCount}>REFRESH</button>
+			<hr />
+			<LockTable title='Locked Brews' text='Total Locked Brews' resultName='lockedDocuments' fetchURL='/api/locks' propertyNames={['shareId', 'title']} loadBrew={this.updateLockData} ></LockTable>
+			<hr />
+			<LockTable title='Brews Awaiting Review' text='Total Reviews Waiting' resultName='reviewDocuments' fetchURL='/api/lock/reviews' propertyNames={['shareId', 'title']} loadBrew={this.updateLockData} ></LockTable>
+			<hr />
+			<LockBrew key={this.state.lock?.key || 0} lock={this.state.lock}></LockBrew>
+			<hr />
+			<div style={{ columns: 2 }}>
+				<LockLookup title='Unlock Brew' fetchURL='/api/unlock' updateFn={this.updateReviewCount}></LockLookup>
+				<LockLookup title='Clear Review Request' fetchURL='/api/lock/review/remove'></LockLookup>
+			</div>
+			<hr />
+		</div>;
+	}
+});
+
+const LockBrew = createClass({
+	displayName     : 'LockBrew',
+	getInitialState : function() {
+		// Default values
+		return {
+			brewId       : this.props.lock?.shareId || '',
+			code         : this.props.lock?.code || 455,
+			editMessage  : this.props.lock?.editMessage || '',
+			shareMessage : this.props.lock?.shareMessage || 'This Brew has been locked.',
+			result       : {},
+			overwrite    : false,
+		};
+	},
+
+	handleChange : function(e, varName) {
+		const output = {};
+		output[varName] = e.target.value;
+		this.setState(output);
+	},
+
+	submit : function(e){
+		e.preventDefault();
+		if(!this.state.editMessage) return;
+		const newLock = {
+			overwrite    : this.state.overwrite,
+			code         : parseInt(this.state.code) || 100,
+			editMessage  : this.state.editMessage,
+			shareMessage : this.state.shareMessage,
+			applied      : new Date
+		};
+
+		request.post(`/api/lock/${this.state.brewId}`)
+			.send(newLock)
+			.set('Content-Type', 'application/json')
+			.then((response)=>{
+				this.setState({ result: response.body });
+			})
+			.catch((err)=>{
+				this.setState({ result: err.response.body });
+			});
+	},
+
+	renderInput : function (name) {
+		return <input type='text' name={name} value={this.state[name]} onChange={(e)=>this.handleChange(e, name)} autoComplete='off' required/>;
+	},
+
+	renderResult : function(){
+		return <>
+			<h3>Result:</h3>
+			<table>
+				<tbody>
+					{Object.keys(this.state.result).map((key, idx)=>{
+						return <tr key={`${idx}-row`}>
+							<td key={`${idx}-key`}>{key}</td>
+							<td key={`${idx}-value`}>{this.state.result[key].toString()}
+							</td>
+						</tr>;
+					})}
+				</tbody>
+			</table>
+		</>;
+	},
+
+	render : function() {
+		return <div className='lockBrew'>
+			<div className='lockForm'>
+				<h2>Lock Brew</h2>
+				<form onSubmit={this.submit}>
+					<label>
+						ID:
+						{this.renderInput('brewId')}
+					</label>
+					<br />
+					<label>
+						Error Code:
+						{this.renderInput('code')}
+					</label>
+					<br />
+					<label>
+						Private Message:
+						{this.renderInput('editMessage')}
+					</label>
+					<br />
+					<label>
+						Public Message:
+						{this.renderInput('shareMessage')}
+					</label>
+					<br />
+					<label className='checkbox'>
+						Overwrite
+						<input name='overwrite' className='checkbox' type='checkbox' value={this.state.overwrite} onClick={()=>{return this.setState((prevState)=>{return { overwrite: !prevState.overwrite };});}} />
+					</label>
+					<label>
+						<input type='submit' />
+					</label>
+				</form>
+				{this.state.result && this.renderResult()}
+			</div>
+			<div className='lockSuggestions'>
+				<h2>Suggestions</h2>
+				<div className='lockCodes'>
+					<h3>Codes</h3>
+					<ul>
+						<li>455 - Generic Lock</li>
+						<li>456 - Copyright issues</li>
+						<li>457 - Confidential Information Leakage</li>
+						<li>458 - Sensitive Personal Information</li>
+						<li>459 - Defamation or Libel</li>
+						<li>460 - Hate Speech or Discrimination</li>
+						<li>461 - Illegal Activities</li>
+						<li>462 - Malware or Phishing</li>
+						<li>463 - Plagiarism</li>
+						<li>465 - Misrepresentation</li>
+						<li>466 - Inappropriate Content</li>
+					</ul>
+				</div>
+				<div className='lockMessages'>
+					<h3>Messages</h3>
+					<ul>
+						<li><b>Private Message:</b> This is the private message that is ONLY displayed to the authors of the locked brew. This message MUST specify exactly what actions must be taken in order to have the brew unlocked.</li>
+						<li><b>Public Message:</b> This is the public message that is displayed to the EVERYONE that attempts to view the locked brew.</li>
+					</ul>
+				</div>
+			</div>
+		</div>;
+	}
+});
+
+const LockTable = createClass({
+	displayName     : 'LockTable',
+	getDefaultProps : function() {
+		return {
+			title         : '',
+			text          : '',
+			fetchURL      : '/api/locks',
+			resultName    : '',
+			propertyNames : ['shareId'],
+			loadBrew      : ()=>{}
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			result    : '',
+			error     : '',
+			searching : false
+		};
+	},
+
+	lockKey : React.createRef(0),
+
+	clickFn : function (){
+		this.setState({ searching: true, error: null });
+
+		request.get(this.props.fetchURL)
+			.then((res)=>this.setState({ result: res.body }))
+			.catch((err)=>this.setState({ result: err.response.body }))
+			.finally(()=>{
+				this.setState({ searching: false });
+			});
+	},
+
+	updateBrewLockData : function (lockData){
+		this.lockKey.current++;
+		const brewData = {
+			key          : this.lockKey.current,
+			shareId      : lockData.shareId,
+			code         : lockData.lock.code,
+			editMessage  : lockData.lock.editMessage,
+			shareMessage : lockData.lock.shareMessage
+		};
+		this.props.loadBrew(brewData);
+	},
+
+	render : function () {
+		return <>
+			<div className='brewsAwaitingReview'>
+				<div className='brewBlock'>
+					<h2>{this.props.title}</h2>
+					<button onClick={this.clickFn}>
+						REFRESH
+						<i className={`fas ${!this.state.searching ? 'fa-search' : 'fa-spin fa-spinner'}`} />
+					</button>
+				</div>
+				{this.state.result[this.props.resultName] &&
+				<>
+					<p>{this.props.text}: {this.state.result[this.props.resultName].length}</p>
+					<table className='lockTable'>
+						<thead>
+							<tr>
+								{this.props.propertyNames.map((name, idx)=>{
+									return <th key={idx}>{name}</th>;
+								})}
+								<th>clip</th>
+								<th>load</th>
+							</tr>
+						</thead>
+						<tbody>
+							{this.state.result[this.props.resultName].map((result, resultIdx)=>{
+								return <tr className='row' key={`${resultIdx}-row`}>
+									{this.props.propertyNames.map((name, nameIdx)=>{
+										return <td key={`${resultIdx}-${nameIdx}`}>
+											{result[name].toString()}
+										</td>;
+									})}
+									<td className='icon' title='Copy ID to Clipboard' onClick={()=>{navigator.clipboard.writeText(result.shareId.toString());}}><i className='fa-regular fa-clipboard'></i></td>
+									<td className='icon' title='View Lock details' onClick={()=>{this.updateBrewLockData(result);}}><i className='fa-regular fa-circle-down'></i></td>
+								</tr>;
+							})}
+						</tbody>
+					</table>
+				</>
+				}
+			</div>
+		</>;
+	}
+});
+
+const LockLookup = createClass({
+	displayName     : 'LockLookup',
+	getDefaultProps : function() {
+		return {
+			fetchURL : '/api/lookup'
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			query     : '',
+			result    : '',
+			error     : '',
+			searching : false
+		};
+	},
+
+	handleChange(e){
+		this.setState({ query: e.target.value });
+	},
+
+	clickFn(){
+		this.setState({ searching: true, error: null });
+
+		request.put(`${this.props.fetchURL}/${this.state.query}`)
+			.then((res)=>this.setState({ result: res.body }))
+			.catch((err)=>this.setState({ result: err.response.body }))
+			.finally(()=>{
+				this.setState({ searching: false });
+			});
+	},
+
+	renderResult : function(){
+		return <div className='lockLookup'>
+			<h3>Result:</h3>
+			<table>
+				<tbody>
+					{Object.keys(this.state.result).map((key, idx)=>{
+						return <tr key={`${idx}-row`}>
+							<td key={`${idx}-key`}>{key}</td>
+							<td key={`${idx}-value`}>{this.state.result[key].toString()}
+							</td>
+						</tr>;
+					})}
+				</tbody>
+			</table>
+		</div>;
+	},
+
+	render : function() {
+		return <div className='brewLookup'>
+			<h2>{this.props.title}</h2>
+			<input type='text' value={this.state.query} onChange={this.handleChange} placeholder='share id' />
+			<button onClick={this.clickFn}>
+				<i className={`fas ${!this.state.searching ? 'fa-search' : 'fa-spin fa-spinner'}`} />
+			</button>
+
+			{this.state.error
+				&& <div className='error'>{this.state.error.toString()}</div>
+			}
+
+			{this.state.result && this.renderResult()}
+		</div>;
+	}
+});
+
+module.exports = LockTools;

client/admin/lockTools/lockTools.less

@@ -0,0 +1,66 @@
+.lockTools {
+	.lockBrew { 
+		columns : 2;
+
+		.lockForm {
+			break-inside : avoid;
+
+			label {
+				display     : inline-block;
+				width       : 100%;
+				line-height : 2.25em;
+				text-align  : right;
+				input {
+					float       : right;
+					width       : 65%;
+					margin-left : 10px;
+				}
+				&.checkbox {
+					line-height: 1.5em;
+					input {
+						width  : 1.5em;
+						height : 1.5em;
+					}
+				}
+			}
+		}
+
+		.lockSuggestions {
+			line-height  : 1.2em;
+			break-inside : avoid;
+			columns      : 2;
+			h2 { column-span : all; }
+			h3 { margin-top : 0px; }
+			b { font-weight : 600; }
+
+			.lockCodes { break-inside : avoid; }
+		}
+	}
+
+	.lockTable {
+		cursor       : default;
+		break-inside : avoid;
+		.row:hover {
+			color            : #000000;
+			background-color : #CCCCCC;
+		}
+		.icon {
+			cursor : pointer;
+			&:hover { text-shadow : 0px 0px 6px black; }
+		}
+	}
+    
+	th, td {
+		padding    : 4px 10px;
+		text-align : center;
+	}
+	table, td { border : 1px solid #333333; }
+
+	.brewLookup {
+		min-height   : 175px;
+		break-inside : avoid;
+		h2 { margin-top : 0px; }
+	}
+
+	button i { padding-left : 5px; }
+}

client/admin/notificationUtils/notificationAdd/notificationAdd.less

@@ -18,22 +18,20 @@
 			margin-bottom : unset;
 			font-family   : monospace;
 
-			&[type="date"] {
-				width:14ch;
-			}
+			&[type='date'] { width : 14ch; }
 		}
 	
 		textarea {
 			width      : 50ch;
 			min-height : 7em;
 			max-height : 20em;
-			resize     : vertical;
 			padding	   : 10px;
+			resize     : vertical;
 		}
 	}
 
 	button {
-	width: 200px;
+		width : 200px;
 		
 		i { margin-right : 10px; }
 	}

client/admin/notificationUtils/notificationLookup/notificationLookup.less

@@ -1,6 +1,6 @@
 .notificationLookup {
 	width     : 450px;
-	height	  : fit-content;
+	height    : fit-content;
 
 	.noNotification { margin-block : 20px; }
 	.notificationList {

client/components/Anchored.less

@@ -1,13 +1,11 @@
 
 
 .anchored-box {
-	position:absolute;
-	@supports (inset-block-start: anchor(bottom)){
-		inset-block-start: anchor(bottom);
-	}
-	justify-self: anchor-center;
-	visibility: hidden;
-	&.active {
-		visibility: visible;
+	position     : absolute;
+	visibility   : hidden;
+	justify-self : anchor-center;
+	@supports (inset-block-start: anchor(bottom)) {
+		inset-block-start : anchor(bottom);
 	}
+	&.active { visibility : visible; }
 }

client/components/combobox.less

@@ -27,7 +27,7 @@
 			position    : relative;
 			padding     : 5px;
 			margin      : 0 3px;
-			font-family : "Open Sans";
+			font-family : 'Open Sans';
 			font-size   : 11px;
 			cursor      : default;
 			&:hover {

client/components/renderWarnings/renderWarnings.jsx

@@ -3,7 +3,7 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
 
-import Dialog from '../../../client/components/dialog.jsx';
+import Dialog from '../dialog.jsx';
 
 const RenderWarnings = createClass({
 	displayName     : 'RenderWarnings',
@@ -25,7 +25,7 @@ const RenderWarnings = createClass({
 			if(!isChrome){
 				return <li key='chrome'>
 					<em>Built for Chrome </em> <br />
-					Other browsers have not been tested for compatiblilty. If you
+					Other browsers have not been tested for compatibility. If you
 					experience issues with your document not rendering or printing
 					properly, please try using the latest version of Chrome before
 					submitting a bug report.

client/components/splitPane/splitPane.jsx

@@ -2,7 +2,8 @@ require('./splitPane.less');
 const React = require('react');
 const { useState, useEffect } = React;
 
-const storageKey = 'naturalcrit-pane-split';
+const PANE_WIDTH_KEY = 'HB_editor_splitWidth';
+const LIVE_SCROLL_KEY = 'HB_editor_liveScroll';
 
 const SplitPane = (props)=>{
 	const {
@@ -18,9 +19,9 @@ const SplitPane = (props)=>{
 	const [liveScroll, setLiveScroll] = useState(false);
 
 	useEffect(()=>{
-		const savedPos = window.localStorage.getItem(storageKey);
+		const savedPos = window.localStorage.getItem(PANE_WIDTH_KEY);
 		setDividerPos(savedPos ? limitPosition(savedPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)) : window.innerWidth / 2);
-		setLiveScroll(window.localStorage.getItem('liveScroll') === 'true');
+		setLiveScroll(window.localStorage.getItem(LIVE_SCROLL_KEY) === 'true');
 
 		window.addEventListener('resize', handleResize);
 		return ()=>window.removeEventListener('resize', handleResize);
@@ -29,13 +30,13 @@ const SplitPane = (props)=>{
 	const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>Math.round(Math.min(max, Math.max(min, x)));
 
 	//when resizing, the divider should grow smaller if less space is given, then grow back if the space is restored, to the original position
-	const handleResize = () =>setDividerPos(limitPosition(window.localStorage.getItem(storageKey), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)));
-	
+	const handleResize = ()=>setDividerPos(limitPosition(window.localStorage.getItem(PANE_WIDTH_KEY), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)));
+
 	const handleUp =(e)=>{
 		e.preventDefault();
 		if(isDragging) {
 			onDragFinish(dividerPos);
-			window.localStorage.setItem(storageKey, dividerPos);
+			window.localStorage.setItem(PANE_WIDTH_KEY, dividerPos);
 		}
 		setIsDragging(false);
 	};
@@ -52,7 +53,7 @@ const SplitPane = (props)=>{
 	};
 
 	const liveScrollToggle = ()=>{
-		window.localStorage.setItem('liveScroll', String(!liveScroll));
+		window.localStorage.setItem(LIVE_SCROLL_KEY, String(!liveScroll));
 		setLiveScroll(!liveScroll);
 	};
 

client/components/splitPane/splitPane.less

@@ -21,8 +21,8 @@
 		background-color : #BBBBBB;
 		.dots {
 			display        : table-cell;
-			text-align     : center;
 			vertical-align : middle;
+			text-align     : center;
 			i {
 				display   : block !important;
 				margin    : 10px 0px;

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -4,13 +4,13 @@ const React = require('react');
 const { useState, useRef, useMemo, useEffect } = React;
 const _ = require('lodash');
 
-const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
-import Markdown from 'naturalcrit/markdown.js';
+const MarkdownLegacy = require('markdownLegacy.js');
+import Markdown from 'markdown.js';
 const ErrorBar = require('./errorBar/errorBar.jsx');
 const ToolBar  = require('./toolBar/toolBar.jsx');
 
 //TODO: move to the brew renderer
-const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx');
+const RenderWarnings = require('client/components/renderWarnings/renderWarnings.jsx');
 const NotificationPopup = require('./notificationPopup/notificationPopup.jsx');
 const Frame = require('react-frame-component').default;
 const dedent = require('dedent-tabs').default;
@@ -19,12 +19,15 @@ const { printCurrentBrew } = require('../../../shared/helpers.js');
 import HeaderNav from './headerNav/headerNav.jsx';
 import { safeHTML } from './safeHTML.js';
 
-const PAGEBREAK_REGEX_V3 = /^(?=\\page(?: *{[^\n{}]*})?$)/m;
+const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
+const PAGEBREAK_REGEX_LEGACY = /\\page(?:break)?/m;
+const COLUMNBREAK_REGEX_LEGACY = /\\column(:?break)?/m;
 const PAGE_HEIGHT = 1056;
 
+const TOOLBAR_STATE_KEY = 'HB_renderer_toolbarState';
+
 const INITIAL_CONTENT = dedent`
 	<!DOCTYPE html><html><head>
-	<link href="//use.fontawesome.com/releases/v6.5.1/css/all.css" rel="stylesheet" type="text/css" />
 	<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
 	<link href='/homebrew/bundle.css' type="text/css" rel='stylesheet' />
 	<base target=_blank>
@@ -38,7 +41,7 @@ const BrewPage = (props)=>{
 		index    : 0,
 		...props
 	};
-	const pageRef = useRef(null);
+	const pageRef   = useRef(null);
 	const cleanText = safeHTML(props.contents);
 
 	useEffect(()=>{
@@ -114,16 +117,24 @@ const BrewRenderer = (props)=>{
 		zoomLevel    : 100,
 		spread       : 'single',
 		startOnRight : true,
-		pageShadows  : true
+		pageShadows  : true,
+		rowGap       : 5,
+		columnGap    : 10,
 	});
 
+	//useEffect to store or gather toolbar state from storage
+	useEffect(()=>{
+		const toolbarState = JSON.parse(window.localStorage.getItem(TOOLBAR_STATE_KEY));
+		toolbarState &&	setDisplayOptions(toolbarState);
+	}, []);
+
 	const [headerState, setHeaderState] = useState(false);
 
 	const mainRef  = useRef(null);
 	const pagesRef = useRef(null);
 
 	if(props.renderer == 'legacy') {
-		rawPages = props.text.split('\\page');
+		rawPages = props.text.split(PAGEBREAK_REGEX_LEGACY);
 	} else {
 		rawPages = props.text.split(PAGEBREAK_REGEX_V3);
 	}
@@ -180,23 +191,27 @@ const BrewRenderer = (props)=>{
 		let attributes = {};
 
 		if(props.renderer == 'legacy') {
+			pageText.replace(COLUMNBREAK_REGEX_LEGACY, '```\n````\n'); // Allow Legacy brews to use `\column(break)`
 			const html = MarkdownLegacy.render(pageText);
 
 			return <BrewPage className='page phb' index={index} key={index} contents={html} style={styles} onVisibilityChange={handlePageVisibilityChange} />;
 		} else {
 			if(pageText.startsWith('\\page')) {
 				const firstLineTokens  = Markdown.marked.lexer(pageText.split('\n', 1)[0])[0].tokens;
-				const injectedTags = firstLineTokens.find((obj)=>obj.injectedTags !== undefined)?.injectedTags;
+				const injectedTags = firstLineTokens?.find((obj)=>obj.injectedTags !== undefined)?.injectedTags;
 				if(injectedTags) {
 					styles     = { ...styles, ...injectedTags.styles };
-					styles     = _.mapKeys(styles, (v, k) => k.startsWith('--') ? k : _.camelCase(k)); // Convert CSS to camelCase for React
+					styles     = _.mapKeys(styles, (v, k)=>k.startsWith('--') ? k : _.camelCase(k)); // Convert CSS to camelCase for React
 					classes    = [classes, injectedTags.classes].join(' ').trim();
 					attributes = injectedTags.attributes;
 				}
 				pageText = pageText.includes('\n') ? pageText.substring(pageText.indexOf('\n') + 1) : ''; // Remove the \page line
 			}
 
-			let html = Markdown.render(pageText, index);
+			// DO NOT REMOVE!!! REQUIRED FOR BACKWARDS COMPATIBILITY WITH NON-UPGRADABLE VERSIONS OF CHROME.
+			pageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
+
+			const html = Markdown.render(pageText, index);
 
 			return <BrewPage className={classes} index={index} key={index} contents={html} style={styles} attributes={attributes} onVisibilityChange={handlePageVisibilityChange} />;
 		}
@@ -271,6 +286,7 @@ const BrewRenderer = (props)=>{
 
 	const handleDisplayOptionsChange = (newDisplayOptions)=>{
 		setDisplayOptions(newDisplayOptions);
+		localStorage.setItem(TOOLBAR_STATE_KEY, JSON.stringify(newDisplayOptions));
 	};
 
 	const pagesStyle = {
@@ -279,12 +295,6 @@ const BrewRenderer = (props)=>{
 		rowGap    : `${displayOptions.rowGap}px`
 	};
 
-	const styleObject = {};
-
-	if(global.config.deployment) {
-		styleObject.backgroundImage = `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='40px' width='200px'><text x='0' y='15' fill='%23fff7' font-size='20'>${global.config.deployment}</text></svg>")`;
-	}
-
 	const renderedStyle = useMemo(()=>renderStyle(), [props.style, props.themeBundle]);
 	renderedPages = useMemo(()=>renderPages(), [props.text, displayOptions]);
 
@@ -313,10 +323,9 @@ const BrewRenderer = (props)=>{
 				contentDidMount={frameDidMount}
 				onClick={()=>{emitClick();}}
 			>
-				<div className={`brewRenderer ${global.config.deployment && 'deployment'}`}
+				<div className='brewRenderer'
 					onKeyDown={handleControlKeys}
 					tabIndex={-1}
-					style={ styleObject }
 				>
 
 					{/* Apply CSS from Style tab and render pages from Markdown tab */}

client/homebrew/brewRenderer/brewRenderer.less

@@ -1,43 +1,38 @@
 @import (multiple, less) 'shared/naturalcrit/styles/reset.less';
 
 .brewRenderer {
+	height        : 100vh;
+	padding-top   : 60px;
 	overflow-y    : scroll;
 	will-change   : transform;
-	padding-top   : 60px;
-	height        : 100vh;
-	&:has(.facing, .flow) {
-		padding : 60px 30px;
-	}
-	&.deployment {
-		background-color: darkred;
-	}
+	&:has(.facing, .flow) { padding : 60px 30px; }
 	:where(.pages) {
 		&.facing {
-			display: grid; 
-			grid-template-columns: repeat(2, auto); 
-			grid-template-rows: repeat(3, auto); 
-			gap: 10px 10px; 
-			justify-content: safe center;
+			display               : grid; 
+			grid-template-rows    : repeat(3, auto); 
+			grid-template-columns : repeat(2, auto); 
+			gap                   : 10px 10px; 
+			justify-content       : safe center;
 			&.recto .page:first-child {
 				// sets first page on 'right' ('recto') of the preview, as if for a Cover page.  
 				// todo: add a checkbox to toggle this setting
-				grid-column-start: 2; 
+				grid-column-start : 2; 
 			}
 			& :where(.page) {
-				margin-left: unset !important;
-				margin-right: unset !important;
+				margin-right : unset !important;
+				margin-left  : unset !important;
 			}
 		}
 
 		&.flow {
-			display: flex;
-			flex-wrap: wrap;
-			gap: 10px;
-			justify-content: safe center;
+			display         : flex;
+			flex-wrap       : wrap;
+			gap             : 10px;
+			justify-content : safe center;
 			& :where(.page) {
-				flex: 0 0 auto;
-				margin-left: unset !important;
-				margin-right: unset !important;
+				flex         : 0 0 auto;
+				margin-right : unset !important;
+				margin-left  : unset !important;
 			}
 
 		}
@@ -50,9 +45,7 @@
 			margin-left   : auto;
 			box-shadow    : 1px 4px 14px #000000;
 		}
-		*[id] {
-			scroll-margin-top:100px;
-		}
+		*[id] { scroll-margin-top : 100px; }
 	}
 	&::-webkit-scrollbar {
 		width : 20px;
@@ -74,16 +67,18 @@
 @media print {
 	.toolBar { display : none; }
 	.brewRenderer {
-		height      : 100%;
-		padding-top : unset;
-		overflow-y  : unset;
+		height     : 100%;
+		padding    : unset;
+		overflow-y : unset;
+		&:has(.facing, .flow) {
+			padding : unset;
+		}
 		.pages {
-			margin : 0px;
-			zoom: 100% !important;
+			margin  : 0px;
+			zoom    : 100% !important;
+			display : block;
 			& > .page { box-shadow : unset; }
 		}
 	}
-	.headerNav {
-		visibility: hidden;
-	}
+	.headerNav { visibility : hidden; }
 }

client/homebrew/brewRenderer/headerNav/headerNav.jsx

@@ -25,7 +25,7 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
 			'.toc'         : ()=>{ return 'Table of Contents'; },
 		};
 
-		const getHeaderContent = el => el.querySelector('h1')?.textContent;
+		const getHeaderContent = (el)=>el.querySelector('h1')?.textContent;
 
 		const topLevelPageSelector = Object.keys(topLevelPages).join(',');
 
@@ -52,25 +52,23 @@ const HeaderNav = React.forwardRef(({}, pagesRef)=>{
 				depth : 7,              // All unmatched elements with IDs are set to the maximum depth (7)
 				text  : el.textContent, // Use `textContent` because `innerText` is affected by rendering, e.g. 'content-visibility: auto'
 				link  : el.id
-			}
+			};
 			if(el.classList.contains('page')) {
 				let text = `Page ${el.id.slice(1)}`; // Get the page # by trimming off the 'p' from the ID
-				const pageType = Object.keys(topLevelPages).find(pageType => el.querySelector(pageType));
-				if (pageType)
-					text += ` - ${topLevelPages[pageType](el, pageType)}` // If a Top Level Page, add extra label
+				const pageType = Object.keys(topLevelPages).find((pageType)=>el.querySelector(pageType));
+				if(pageType)
+					text += ` - ${topLevelPages[pageType](el, pageType)}`; // If a Top Level Page, add extra label
 
 				navEntry.depth     = 0; // Pages are always at the least indented level
 				navEntry.text      = text;
 				navEntry.className = 'pageLink';
-			}
-			else if(el.localName.match(/^h[1-6]/)){  // Header elements H1 through H6
+			} else if(el.localName.match(/^h[1-6]/)){  // Header elements H1 through H6
 				navEntry.depth = el.localName[1];      // Depth is set by the header level
 			}
 			navList.push(navEntry);
 		});
 
-		return _.map(navList, (navItem, index)=>
-			<HeaderNavItem {...navItem} key={index} />
+		return _.map(navList, (navItem, index)=><HeaderNavItem {...navItem} key={index} />
 		);
 	};
 

client/homebrew/brewRenderer/headerNav/headerNav.less

@@ -1,39 +1,31 @@
 .headerNav {
-	position: fixed;
-	top: 32px;
-	left: 0px;
-	padding: 5px 10px;
-	background-color: #ccc;
-	border-radius: 5px;
-	max-height: calc(100vh - 32px);
-	max-width: 40vw;
-	overflow-y: auto;
-    &.active {
-        padding-bottom: 10px;
-        .navIcon {
-            padding-bottom: 10px;
-        }
-    }
-	.navIcon {
-		cursor: pointer;
+	position         : fixed;
+	top              : 32px;
+	left             : 0px;
+	max-width        : 40vw;
+	max-height       : calc(100vh - 32px);
+	padding          : 5px 10px;
+	overflow-y       : auto;
+	background-color : #CCCCCC;
+	border-radius    : 5px;
+	&.active {
+		padding-bottom : 10px;
+		.navIcon { padding-bottom : 10px; }
 	}
+	.navIcon { cursor : pointer; }
 	li {
-		list-style-type: none;
+		list-style-type : none;
 		a {
-			display: inline-block;
-			width: 100%;
-			font-family: 'Open Sans';
-			font-size: 12px;
-			padding: 2px;
-			color: inherit;
-			text-decoration: none;
-			cursor: pointer;
-			&:hover {
-				text-decoration: underline;
-			}
-			&.pageLink {
-				font-weight: 900;
-			}
+			display         : inline-block;
+			width           : 100%;
+			padding         : 2px;
+			font-family     : 'Open Sans';
+			font-size       : 12px;
+			color           : inherit;
+			text-decoration : none;
+			cursor          : pointer;
+			&:hover { text-decoration : underline; }
+			&.pageLink { font-weight : 900; }
 
 			@depths: 0,1,2,3,4,5,6,7;
 

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -1,7 +1,7 @@
 require('./notificationPopup.less');
 import React, { useEffect, useState } from 'react';
 import request from '../../utils/request-middleware.js';
-import Markdown from 'naturalcrit/markdown.js';
+import Markdown from 'markdown.js';
 
 import Dialog from '../../../components/dialog.jsx';
 

client/homebrew/brewRenderer/notificationPopup/notificationPopup.less

@@ -85,4 +85,9 @@
 		display          : inline-block;
 		width            : 100%;
 	}
+	.blank {
+		height     : 1em;
+		margin-top : 0;
+		& + * { margin-top : 0; }
+	}
 }

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -9,6 +9,8 @@ import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anch
 const MAX_ZOOM = 300;
 const MIN_ZOOM = 10;
 
+const TOOLBAR_VISIBILITY = 'HB_renderer_toolbarVisibility';
+
 const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPages, headerState, setHeaderState })=>{
 
 	const [pageNum, setPageNum]     = useState(1);
@@ -20,6 +22,12 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 		setPageNum(pageRange);
 	}, [visiblePages]);
 
+	useEffect(()=>{
+		const Visibility = localStorage.getItem(TOOLBAR_VISIBILITY);
+		if(Visibility) setToolsVisible(Visibility === 'true');
+
+	}, []);
+
 	const handleZoomButton = (zoom)=>{
 		handleOptionChange('zoomLevel', _.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
 	};
@@ -55,15 +63,30 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 			// find widest page, in case pages are different widths, so that the zoom is adapted to not cut the widest page off screen.
 			const widestPage = _.maxBy([...pages], 'offsetWidth').offsetWidth;
 
-			desiredZoom = (iframeWidth / widestPage) * 100;
+			if(displayOptions.spread === 'facing')
+				desiredZoom = (iframeWidth / ((widestPage * 2) + parseInt(displayOptions.columnGap))) * 100;
+			else
+				desiredZoom = (iframeWidth / (widestPage + 20)) * 100;
 
 		} else if(mode == 'fit'){
-			let minDimRatio;
 			// find the page with the largest single dim (height or width) so that zoom can be adapted to fit it.
-			if(displayOptions.spread === 'facing')
-				minDimRatio = [...pages].reduce((minRatio, page)=>Math.min(minRatio, iframeWidth / page.offsetWidth / 2), Infinity);    // if 'facing' spread, fit two pages in view
+			let minDimRatio;
+			if(displayOptions.spread === 'single')
+				minDimRatio = [...pages].reduce(
+					(minRatio, page)=>Math.min(minRatio,
+						iframeWidth / page.offsetWidth,
+						iframeHeight / page.offsetHeight
+					),
+					Infinity
+				);
 			else
-				minDimRatio = [...pages].reduce((minRatio, page)=>Math.min(minRatio, iframeWidth / page.offsetWidth, iframeHeight / page.offsetHeight), Infinity);
+				minDimRatio = [...pages].reduce(
+					(minRatio, page)=>Math.min(minRatio,
+						iframeWidth / ((page.offsetWidth * 2) + parseInt(displayOptions.columnGap)),
+						iframeHeight / page.offsetHeight
+					),
+					Infinity
+				);
 
 			desiredZoom = minDimRatio * 100;
 		}
@@ -77,7 +100,10 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 	return (
 		<div id='preview-toolbar' className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`} role='toolbar'>
 			<div className='toggleButton'>
-				<button title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{setToolsVisible(!toolsVisible);}}><i className='fas fa-glasses' /></button>
+				<button title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{
+					setToolsVisible(!toolsVisible);
+					localStorage.setItem(TOOLBAR_VISIBILITY, !toolsVisible);
+				}}><i className='fas fa-glasses' /></button>
 				<button title={`${headerState ? 'Hide' : 'Show'} Header Navigation`} onClick={()=>{setHeaderState(!headerState);}}><i className='fas fa-rectangle-list' /></button>
 			</div>
 			{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
@@ -142,7 +168,7 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 						id='single-spread'
 						className='tool'
 						title='Single Page'
-						onClick={()=>{handleOptionChange('spread', 'active');}}
+						onClick={()=>{handleOptionChange('spread', 'single');}}
 						aria-checked={displayOptions.spread === 'single'}
 					><i className='fac single-spread' /></button>
 					<button role='radio'
@@ -167,11 +193,11 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 						<h1>Options</h1>
 						<label title='Modify the horizontal space between pages.'>
 							Column gap
-							<input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>handleOptionChange('columnGap', evt.target.value)} />
+							<input type='range' min={0} max={200} defaultValue={displayOptions.columnGap || 10} className='range-input' onChange={(evt)=>handleOptionChange('columnGap', evt.target.value)} />
 						</label>
 						<label title='Modify the vertical space between rows of pages.'>
 							Row gap
-							<input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>handleOptionChange('rowGap', evt.target.value)} />
+							<input type='range' min={0} max={200} defaultValue={displayOptions.rowGap || 10} className='range-input' onChange={(evt)=>handleOptionChange('rowGap', evt.target.value)} />
 						</label>
 						<label title='Start 1st page on the right side, such as if you have cover page.'>
 							Start on right

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -6,12 +6,12 @@
 	box-sizing       : border-box;
 	display          : flex;
 	flex-wrap        : wrap;
-	gap              : 8px 30px;
+	gap              : 8px 20px;
 	align-items      : center;
 	justify-content  : center;
 	width            : 100%;
 	height           : auto;
-	padding          : 2px 0;
+	padding          : 2px 10px 2px 90px;
 	font-family      : 'Open Sans', sans-serif;
 	font-size        : 13px;
 	color            : #CCCCCC;
@@ -153,10 +153,10 @@
 		align-items      : center;
 		justify-content  : center;
 		width            : auto;
-		min-width        : 46px;
+		min-width        : 40px;
 		height           : 100%;
 		&:hover { background-color : #444444; }
-		&:focus { border  : 1px solid #D3D3D3;outline : none;}
+		&:focus {outline : none; border  : 1px solid #D3D3D3;}
 		&:disabled {
 			color            : #777777;
 			background-color : unset !important;
@@ -169,12 +169,16 @@
 		width            : 92px;
 		overflow         : hidden;
 		background-color : unset;
-		opacity          : 0.5;
+		opacity          : 0.7;
 		transition       : all 0.3s ease;
 		& > *:not(.toggleButton) {
 			opacity    : 0;
 			transition : all 0.2s ease;
 		}
+
+		.toggleButton button i {
+			filter: drop-shadow(0 0 2px black) drop-shadow(0 0 1px black);
+		}
 	}
 }
 
@@ -182,8 +186,6 @@
 	position  : absolute;
 	left      : 0;
 	z-index   : 5;
-	width     : 32px;
-	min-width : unset;
-	height    : 100%;
 	display   : flex;
+	height    : 100%;
 }

client/homebrew/editor/editor.jsx

@@ -4,16 +4,16 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
 const dedent = require('dedent-tabs').default;
-import Markdown from '../../../shared/naturalcrit/markdown.js';
+import Markdown from '../../../shared/markdown.js';
 
 const CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
 const SnippetBar = require('./snippetbar/snippetbar.jsx');
 const MetadataEditor = require('./metadataEditor/metadataEditor.jsx');
 
-const EDITOR_THEME_KEY = 'HOMEBREWERY-EDITOR-THEME';
+const EDITOR_THEME_KEY = 'HB_editor_theme';
 
-const PAGEBREAK_REGEX_V3 = /^(?=\\page(?: *{[^\n{}]*})?$)/m;
-const SNIPPETBAR_HEIGHT  = 25;
+const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
+const SNIPPETBREAK_REGEX_V3 = /^\\snippet\ .*$/;
 const DEFAULT_STYLE_TEXT = dedent`
 				/*=======---  Example CSS styling  ---=======*/
 				/* Any CSS here will apply to your document! */
@@ -22,6 +22,13 @@ const DEFAULT_STYLE_TEXT = dedent`
 					color: black;
 				}`;
 
+const DEFAULT_SNIPPET_TEXT = dedent`
+				\snippet example snippet
+				
+				The text between \`\snippet title\` lines will become a snippet of name \`title\` as this example provides.
+				
+				This snippet is accessible in the brew tab, and will be inherited if the brew is used as a theme.
+`;
 let isJumping = false;
 
 const Editor = createClass({
@@ -33,10 +40,8 @@ const Editor = createClass({
 				style : ''
 			},
 
-			onTextChange  : ()=>{},
-			onStyleChange : ()=>{},
-			onMetaChange  : ()=>{},
-			reportError   : ()=>{},
+			onBrewChange : ()=>{},
+			reportError  : ()=>{},
 
 			onCursorPageChange : ()=>{},
 			onViewPageChange   : ()=>{},
@@ -51,8 +56,9 @@ const Editor = createClass({
 	},
 	getInitialState : function() {
 		return {
-			editorTheme : this.props.editorTheme,
-			view        : 'text' //'text', 'style', 'meta'
+			editorTheme      : this.props.editorTheme,
+			view             : 'text', //'text', 'style', 'meta', 'snippet'
+			snippetbarHeight : 25
 		};
 	},
 
@@ -62,12 +68,11 @@ const Editor = createClass({
 	isText  : function() {return this.state.view == 'text';},
 	isStyle : function() {return this.state.view == 'style';},
 	isMeta  : function() {return this.state.view == 'meta';},
+	isSnip  : function() {return this.state.view == 'snippet';},
 
 	componentDidMount : function() {
 
-		this.updateEditorSize();
 		this.highlightCustomMarkdown();
-		window.addEventListener('resize', this.updateEditorSize);
 		document.getElementById('BrewRenderer').addEventListener('keydown', this.handleControlKeys);
 		document.addEventListener('keydown', this.handleControlKeys);
 
@@ -80,10 +85,7 @@ const Editor = createClass({
 				editorTheme : editorTheme
 			});
 		}
-	},
-
-	componentWillUnmount : function() {
-		window.removeEventListener('resize', this.updateEditorSize);
+		this.setState({ snippetbarHeight: document.querySelector('.editor > .snippetBar').offsetHeight });
 	},
 
 	componentDidUpdate : function(prevProps, prevState, snapshot) {
@@ -118,14 +120,6 @@ const Editor = createClass({
 		}
 	},
 
-	updateEditorSize : function() {
-		if(this.codeEditor.current) {
-			let paneHeight = this.editor.current.parentNode.clientHeight;
-			paneHeight -= SNIPPETBAR_HEIGHT;
-			this.codeEditor.current.codeMirror.setSize(null, paneHeight);
-		}
-	},
-
 	updateCurrentCursorPage : function(cursor) {
 		const lines = this.props.brew.text.split('\n').slice(1, cursor.line + 1);
 		const pageRegex = this.props.brew.renderer == 'V3' ? PAGEBREAK_REGEX_V3 : /\\page/;
@@ -146,17 +140,17 @@ const Editor = createClass({
 
 	handleViewChange : function(newView){
 		this.props.setMoveArrows(newView === 'text');
+
 		this.setState({
 			view : newView
 		}, ()=>{
 			this.codeEditor.current?.codeMirror.focus();
-			this.updateEditorSize();
-		});	//TODO: not sure if updateeditorsize needed
+		});
 	},
 
 	highlightCustomMarkdown : function(){
 		if(!this.codeEditor.current) return;
-		if(this.state.view === 'text')  {
+		if((this.state.view === 'text') ||(this.state.view === 'snippet')) {
 			const codeMirror = this.codeEditor.current.codeMirror;
 
 			codeMirror.operation(()=>{ // Batch CodeMirror styling
@@ -175,12 +169,18 @@ const Editor = createClass({
 
 				for (let i=customHighlights.length - 1;i>=0;i--) customHighlights[i].clear();
 
+				let userSnippetCount = 1; // start snippet count from snippet 1
 				let editorPageCount = 1; // start page count from page 1
 
-				_.forEach(this.props.brew.text.split('\n'), (line, lineNumber)=>{
+				const whichSource = this.state.view === 'text' ? this.props.brew.text : this.props.brew.snippets;
+				_.forEach(whichSource?.split('\n'), (line, lineNumber)=>{
+
+					const tabHighlight = this.state.view === 'text' ? 'pageLine' : 'snippetLine';
+					const textOrSnip = this.state.view === 'text';
 
 					//reset custom line styles
 					codeMirror.removeLineClass(lineNumber, 'background', 'pageLine');
+					codeMirror.removeLineClass(lineNumber, 'background', 'snippetLine');
 					codeMirror.removeLineClass(lineNumber, 'text');
 					codeMirror.removeLineClass(lineNumber, 'wrap', 'sourceMoveFlash');
 
@@ -191,23 +191,25 @@ const Editor = createClass({
 
 					// Styling for \page breaks
 					if((this.props.renderer == 'legacy' && line.includes('\\page')) ||
-				     (this.props.renderer == 'V3'     && line.match(PAGEBREAK_REGEX_V3))) {
+				     (this.props.renderer == 'V3'     && line.match(textOrSnip ? PAGEBREAK_REGEX_V3 : SNIPPETBREAK_REGEX_V3))) {
 
-						if(lineNumber > 0)      // Since \page is optional on first line of document,
+						if((lineNumber > 0) && (textOrSnip))      // Since \page is optional on first line of document,
 							editorPageCount += 1; // don't use it to increment page count; stay at 1
+						else if(this.state.view !== 'text')	userSnippetCount += 1;
 
 						// add back the original class 'background' but also add the new class '.pageline'
-						codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
+						codeMirror.addLineClass(lineNumber, 'background', tabHighlight);
 						const pageCountElement = Object.assign(document.createElement('span'), {
 							className   : 'editor-page-count',
-							textContent : editorPageCount
+							textContent : textOrSnip ? editorPageCount : userSnippetCount
 						});
 						codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement);
 					};
 
+
 					// New Codemirror styling for V3 renderer
-					if(this.props.renderer == 'V3') {
-						if(line.match(/^\\column$/)){
+					if(this.props.renderer === 'V3') {
+						if(line.match(/^\\column(?:break)?$/)){
 							codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
 						}
 
@@ -323,10 +325,10 @@ const Editor = createClass({
 		const brewRenderer = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0];
 		const currentPos = brewRenderer.scrollTop;
 		const targetPos = window.frames['BrewRenderer'].contentDocument.getElementById(`p${targetPage}`).getBoundingClientRect().top;
-
-		const checkIfScrollComplete = ()=>{
-			let scrollingTimeout;
-			clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs
+		
+		let scrollingTimeout;
+		const checkIfScrollComplete = ()=>{	// Prevent interrupting a scroll in progress if user clicks multiple times
+			clearTimeout(scrollingTimeout);   // Reset the timer every time a scroll event occurs
 			scrollingTimeout = setTimeout(()=>{
 				isJumping = false;
 				brewRenderer.removeEventListener('scroll', checkIfScrollComplete);
@@ -367,8 +369,8 @@ const Editor = createClass({
 		let currentY = this.codeEditor.current.codeMirror.getScrollInfo().top;
 		let targetY  = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
 
-		const checkIfScrollComplete = ()=>{
-			let scrollingTimeout;
+		let scrollingTimeout;
+		const checkIfScrollComplete = ()=>{ // Prevent interrupting a scroll in progress if user clicks multiple times
 			clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs
 			scrollingTimeout = setTimeout(()=>{
 				isJumping = false;
@@ -407,7 +409,9 @@ const Editor = createClass({
 
 	//Called when there are changes to the editor's dimensions
 	update : function(){
-		this.codeEditor.current?.updateSize();
+		const snipHeight = document.querySelector('.editor > .snippetBar').offsetHeight;
+		if(snipHeight !== this.state.snippetbarHeight)
+			this.setState({ snippetbarHeight: snipHeight });
 	},
 
 	updateEditorTheme : function(newTheme){
@@ -430,9 +434,10 @@ const Editor = createClass({
 					language='gfm'
 					view={this.state.view}
 					value={this.props.brew.text}
-					onChange={this.props.onTextChange}
+					onChange={this.props.onBrewChange('text')}
 					editorTheme={this.state.editorTheme}
-					rerenderParent={this.rerenderParent} />
+					rerenderParent={this.rerenderParent}
+					style={{  height: `calc(100% - ${this.state.snippetbarHeight}px)` }} />
 			</>;
 		}
 		if(this.isStyle()){
@@ -442,10 +447,11 @@ const Editor = createClass({
 					language='css'
 					view={this.state.view}
 					value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
-					onChange={this.props.onStyleChange}
+					onChange={this.props.onBrewChange('style')}
 					enableFolding={true}
 					editorTheme={this.state.editorTheme}
-					rerenderParent={this.rerenderParent} />
+					rerenderParent={this.rerenderParent}
+					style={{  height: `calc(100% - ${this.state.snippetbarHeight}px)` }} />
 			</>;
 		}
 		if(this.isMeta()){
@@ -457,11 +463,27 @@ const Editor = createClass({
 				<MetadataEditor
 					metadata={this.props.brew}
 					themeBundle={this.props.themeBundle}
-					onChange={this.props.onMetaChange}
+					onChange={this.props.onBrewChange('metadata')}
 					reportError={this.props.reportError}
 					userThemes={this.props.userThemes}/>
 			</>;
 		}
+
+		if(this.isSnip()){
+			if(!this.props.brew.snippets) { this.props.brew.snippets = DEFAULT_SNIPPET_TEXT; }
+			return <>
+				<CodeEditor key='codeEditor'
+					ref={this.codeEditor}
+					language='gfm'
+					view={this.state.view}
+					value={this.props.brew.snippets}
+					onChange={this.props.onBrewChange('snippets')}
+					enableFolding={true}
+					editorTheme={this.state.editorTheme}
+					rerenderParent={this.rerenderParent}
+					style={{  height: `calc(100% - ${this.state.snippetbarHeight}px)` }} />
+			</>;
+		}
 	},
 
 	redo : function(){
@@ -502,7 +524,7 @@ const Editor = createClass({
 					historySize={this.historySize()}
 					currentEditorTheme={this.state.editorTheme}
 					updateEditorTheme={this.updateEditorTheme}
-					snippetBundle={this.props.snippetBundle}
+					themeBundle={this.props.themeBundle}
 					cursorPos={this.codeEditor.current?.getCursorPosition() || {}}
 					updateBrew={this.props.updateBrew}
 				/>

client/homebrew/editor/editor.less

@@ -1,12 +1,13 @@
 @import 'themes/codeMirror/customEditorStyles.less';
 .editor {
-	position : relative;
-	width    : 100%;
-	container: editor / inline-size;
-
+	position  : relative;
+	width     : 100%;
+	height    : 100%;
+	container : editor / inline-size;
 	.codeEditor {
-		height            : 100%;
-		.pageLine {
+		height            : calc(100% - 25px);
+		.CodeMirror { height : 100%; }
+		.pageLine, .snippetLine {
 			background : #33333328;
 			border-top : #333399 solid 1px;
 		}
@@ -14,6 +15,10 @@
 			float : right;
 			color : grey;
 		}
+		.editor-snippet-count {
+			float : right;
+			color : grey;
+		}
 		.columnSplit {
 			font-style        : italic;
 			color             : grey;
@@ -45,26 +50,26 @@
 			color       : green;
 		}
 		.emoji:not(.cm-comment) {
-			margin-left    : 2px;
-			color          : #360034;
-			background     : #ffc8ff;
-			border-radius  : 6px;
-			font-weight    : bold;
 			padding-bottom : 1px;
+			margin-left    : 2px;
+			font-weight    : bold;
+			color          : #360034;
+			outline        : solid 2px #FF96FC;
 			outline-offset : -2px;
-			outline        : solid 2px #ff96fc;
+			background     : #FFC8FF;
+			border-radius  : 6px;
 		}
 		.superscript:not(.cm-comment) {
-			font-weight    : bold;
-			color          : goldenrod;
-			vertical-align : super;
 			font-size      : 0.9em;
+			font-weight    : bold;
+			vertical-align : super;
+			color          : goldenrod;
 		}
 		.subscript:not(.cm-comment) {
-			font-weight    : bold;
-			color          : rgb(123, 123, 15);
-			vertical-align : sub;
 			font-size      : 0.9em;
+			font-weight    : bold;
+			vertical-align : sub;
+			color          : rgb(123, 123, 15);
 		}
 		.dl-highlight {
 			&.dl-colon-highlight {
@@ -103,4 +108,4 @@
 		span { padding : 2px 5px; }
 	}
 
-}
+}

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -4,7 +4,6 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _     = require('lodash');
 import request from '../../utils/request-middleware.js';
-const Nav = require('naturalcrit/nav/nav.jsx');
 const Combobox = require('client/components/combobox.jsx');
 const TagInput = require('../tagInput/tagInput.jsx');
 
@@ -48,7 +47,7 @@ const MetadataEditor = createClass({
 
 	getInitialState : function(){
 		return {
-			showThumbnail     : true
+			showThumbnail : true
 		};
 	},
 
@@ -68,7 +67,7 @@ const MetadataEditor = createClass({
 		const inputRules = validations[name] ?? [];
 		const validationErr = inputRules.map((rule)=>rule(e.target.value)).filter(Boolean);
 
-		const debouncedReportValidity = _.debounce((target, errMessage) => {
+		const debouncedReportValidity = _.debounce((target, errMessage)=>{
 			callIfExists(target, 'setCustomValidity', errMessage);
 			callIfExists(target, 'reportValidity');
 		}, 300); // 300ms debounce delay, adjust as needed
@@ -87,7 +86,7 @@ const MetadataEditor = createClass({
 				return `- ${err}`;
 			}).join('\n');
 
-			
+
 			debouncedReportValidity(e.target, errMessage);
 			return false;
 		}
@@ -110,6 +109,7 @@ const MetadataEditor = createClass({
 		}
 		this.props.onChange(this.props.metadata, 'renderer');
 	},
+
 	handlePublish : function(val){
 		this.props.onChange({
 			...this.props.metadata,
@@ -207,8 +207,6 @@ const MetadataEditor = createClass({
 	},
 
 	renderThemeDropdown : function(){
-		if(!global.enable_themes) return;
-
 		const mergedThemes = _.merge(Themes, this.props.userThemes);
 
 		const listThemes = (renderer)=>{
@@ -307,8 +305,6 @@ const MetadataEditor = createClass({
 	},
 
 	renderRenderOptions : function(){
-		if(!global.enable_v3) return;
-
 		return <div className='field systems'>
 			<label>Renderer</label>
 			<div className='value'>

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -1,8 +1,8 @@
 @import 'naturalcrit/styles/colors.less';
 
 .userThemeName {
-	padding-left: 10px;
-	padding-right: 10px;
+	padding-right : 10px;
+	padding-left  : 10px;
 }
 
 .metadataEditor {
@@ -12,20 +12,20 @@
 	height           : calc(100vh - 54px); // 54px is the height of the navbar + snippet bar.  probably a better way to dynamic get this.
 	padding          : 25px;
 	overflow-y       : auto;
+	font-size        : 13px;
 	background-color : #999999;
-	font-size		 : 13px;
 
 	h1 {
-		margin: 0 0 40px;
-		font-weight: bold;
-		text-transform: uppercase;
+		margin         : 0 0 40px;
+		font-weight    : bold;
+		text-transform : uppercase;
 	}
 	
 	h2 {
-		margin      : 20px 0;
-		font-weight : bold;
-		border-bottom: 2px solid gray;
-		color: #555;
+		margin        : 20px 0;
+		font-weight   : bold;
+		color         : #555555;
+		border-bottom : 2px solid gray;
 	}
 
 	& > div { margin-bottom : 10px; }
@@ -54,10 +54,10 @@
 		min-width     : 200px;
 		& > label {
 			width          : 80px;
+			font-size      : 0.9em;
 			font-weight    : 800;
 			line-height    : 1.8em;
 			text-transform : uppercase;
-			font-size: .9em;
 		}
 		& > .value {
 			flex           : 1 1 auto;
@@ -74,7 +74,7 @@
 			border : 1px solid gray;
 			&:focus { outline : 1px solid #444444; }
 		}
-		&.thumbnail, &.themes{
+		&.thumbnail, &.themes {
 			label { line-height : 2.0em; }
 			.value {
 				overflow      : hidden;
@@ -90,14 +90,14 @@
 			}
 		}
 
-		&.themes{
+		&.themes {
 			.value {
 				overflow      : visible;
 				text-overflow : auto;
 			}
 			button {
-				padding-left: 5px;
-				padding-right: 5px;
+				padding-right : 5px;
+				padding-left  : 5px;
 			}
 		}
 
@@ -136,8 +136,8 @@
 			margin-right   : 15px;
 			font-size      : 0.9em;
 			font-weight    : 800;
-			white-space    : nowrap;
 			vertical-align : middle;
+			white-space    : nowrap;
 			cursor         : pointer;
 			user-select    : none;
 		}
@@ -164,9 +164,7 @@
 			.colorButton(@red);
 		}
 	}
-	.authors.field .value {
-		line-height    : 1.5em;
-	}
+	.authors.field .value { line-height    : 1.5em; }
 
 	.themes.field {
 		& .dropdown-container {
@@ -174,9 +172,7 @@
 			z-index          : 100;
 			background-color : white;
 		}
-		& .dropdown-options {
-			overflow-y : visible;
-		}
+		& .dropdown-options { overflow-y : visible; }
 		.disabled {
 			font-style       : italic;
 			color            : dimgray;

client/homebrew/editor/metadataEditor/validations.js

@@ -18,7 +18,7 @@ module.exports = {
 			try {
 				Boolean(new URL(value));
 				return null;
-			} catch (e) {
+			} catch {
 				return 'Must be a valid URL';
 			}
 		}
@@ -28,18 +28,18 @@ module.exports = {
 			return new RegExp(/^([a-zA-Z]{2,3})(-[a-zA-Z]{4})?(-(?:[0-9]{3}|[a-zA-Z]{2}))?$/).test(value) === false && (value.length > 0) ? 'Invalid language code.' : null;
 		}
 	],
-	theme: [
-		(value) => {
+	theme : [
+		(value)=>{
 			const URL = global.config.baseUrl.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'); //Escape any regex characters
 			const shareIDPattern = '[a-zA-Z0-9-_]{12}';
 			const shareURLRegex  = new RegExp(`^${URL}\\/share\\/${shareIDPattern}$`);
 			const shareIDRegex   = new RegExp(`^${shareIDPattern}$`);
-			if (value?.length === 0)       return null;
-			if (shareURLRegex.test(value)) return null;
-			if (shareIDRegex.test(value))  return null;
+			if(value?.length === 0)       return null;
+			if(shareURLRegex.test(value)) return null;
+			if(shareIDRegex.test(value))  return null;
 
 			return 'Must be a valid Share URL or a 12-character ID.';
-		}	
+		}
 	]
 };
 

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -6,6 +6,7 @@ const _     = require('lodash');
 const cx    = require('classnames');
 
 import { loadHistory } from '../../utils/versionHistory.js';
+import { brewSnippetsToJSON } from '../../../../shared/helpers.js';
 
 //Import all themes
 const ThemeSnippets = {};
@@ -40,7 +41,7 @@ const Snippetbar = createClass({
 			unfoldCode        : ()=>{},
 			updateEditorTheme : ()=>{},
 			cursorPos         : {},
-			snippetBundle     : [],
+			themeBundle       : [],
 			updateBrew        : ()=>{}
 		};
 	},
@@ -64,7 +65,10 @@ const Snippetbar = createClass({
 	},
 
 	componentDidUpdate : async function(prevProps, prevState) {
-		if(prevProps.renderer != this.props.renderer || prevProps.theme != this.props.theme || prevProps.snippetBundle != this.props.snippetBundle) {
+		if(prevProps.renderer != this.props.renderer ||
+			prevProps.theme != this.props.theme ||
+			prevProps.themeBundle != this.props.themeBundle ||
+			prevProps.brew.snippets != this.props.brew.snippets) {
 			this.setState({
 				snippets : this.compileSnippets()
 			});
@@ -97,7 +101,7 @@ const Snippetbar = createClass({
 		if(key == 'snippets') {
 			const result = _.reverse(_.unionBy(_.reverse(newValue), _.reverse(oldValue), 'name')); // Join snippets together, with preference for the child theme over the parent theme
 			return result.filter((snip)=>snip.gen || snip.subsnippets);
-		}
+		};
 	},
 
 	compileSnippets : function() {
@@ -105,15 +109,21 @@ const Snippetbar = createClass({
 
 		let oldSnippets = _.keyBy(compiledSnippets, 'groupName');
 
-		for (let snippets of this.props.snippetBundle) {
-			if(typeof(snippets) == 'string')	// load staticThemes as needed; they were sent as just a file name
-				snippets = ThemeSnippets[snippets];
+		if(this.props.themeBundle.snippets) {
+			for (let snippets of this.props.themeBundle.snippets) {
+				if(typeof(snippets) == 'string')	// load staticThemes as needed; they were sent as just a file name
+					snippets = ThemeSnippets[snippets];
 
-			const newSnippets = _.keyBy(_.cloneDeep(snippets), 'groupName');
-			compiledSnippets = _.values(_.mergeWith(oldSnippets, newSnippets, this.mergeCustomizer));
+				const newSnippets = _.keyBy(_.cloneDeep(snippets), 'groupName');
+				compiledSnippets = _.values(_.mergeWith(oldSnippets, newSnippets, this.mergeCustomizer));
 
-			oldSnippets = _.keyBy(compiledSnippets, 'groupName');
+				oldSnippets = _.keyBy(compiledSnippets, 'groupName');
+			}
 		}
+
+		const userSnippetsasJSON = brewSnippetsToJSON(this.props.brew.title || 'New Document', this.props.brew.snippets, this.props.themeBundle.snippets);
+		compiledSnippets.push(userSnippetsasJSON);
+
 		return compiledSnippets;
 	},
 
@@ -207,59 +217,60 @@ const Snippetbar = createClass({
 	renderEditorButtons : function(){
 		if(!this.props.showEditButtons) return;
 
-		
-
 		return (
-		<div className='editors'>
-			{this.props.view !== 'meta' && <><div className='historyTools'>
-				<div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
-					onClick={this.toggleHistoryMenu} >
-					<i className='fas fa-clock-rotate-left' />
-					{ this.state.showHistory && this.renderHistoryItems() }
+			<div className='editors'>
+				{this.props.view !== 'meta' && <><div className='historyTools'>
+					<div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
+						onClick={this.toggleHistoryMenu} >
+						<i className='fas fa-clock-rotate-left' />
+						{ this.state.showHistory && this.renderHistoryItems() }
+					</div>
+					<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
+						onClick={this.props.undo} >
+						<i className='fas fa-undo' />
+					</div>
+					<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`}
+						onClick={this.props.redo} >
+						<i className='fas fa-redo' />
+					</div>
 				</div>
-				<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
-					onClick={this.props.undo} >
-					<i className='fas fa-undo' />
-				</div>
-				<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`}
-					onClick={this.props.redo} >
-					<i className='fas fa-redo' />
-				</div>
-			</div>
-			<div className='codeTools'>
-			<div className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
-				onClick={this.props.foldCode} >
-				<i className='fas fa-compress-alt' />
-			</div>
-			<div className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
-				onClick={this.props.unfoldCode} >
-				<i className='fas fa-expand-alt' />
-			</div>
-				<div className={`editorTheme ${this.state.themeSelector ? 'active' : ''}`}
-					onClick={this.toggleThemeSelector} >
-					<i className='fas fa-palette' />
-					{this.state.themeSelector && this.renderThemeSelector()}
-				</div>
-			</div></>}
-	
+				<div className='codeTools'>
+					<div className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
+						onClick={this.props.foldCode} >
+						<i className='fas fa-compress-alt' />
+					</div>
+					<div className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
+						onClick={this.props.unfoldCode} >
+						<i className='fas fa-expand-alt' />
+					</div>
+					<div className={`editorTheme ${this.state.themeSelector ? 'active' : ''}`}
+						onClick={this.toggleThemeSelector} >
+						<i className='fas fa-palette' />
+						{this.state.themeSelector && this.renderThemeSelector()}
+					</div>
+				</div></>}
 
-			<div className='tabs'>
-				<div className={cx('text', { selected: this.props.view === 'text' })}
-					onClick={()=>this.props.onViewChange('text')}>
-					<i className='fa fa-beer' />
+				<div className='tabs'>
+					<div className={cx('text', { selected: this.props.view === 'text' })}
+						onClick={()=>this.props.onViewChange('text')}>
+						<i className='fa fa-beer' />
+					</div>
+					<div className={cx('style', { selected: this.props.view === 'style' })}
+						onClick={()=>this.props.onViewChange('style')}>
+						<i className='fa fa-paint-brush' />
+					</div>
+					<div className={cx('snippet', { selected: this.props.view === 'snippet' })}
+						onClick={()=>this.props.onViewChange('snippet')}>
+						<i className='fas fa-th-list' />
+					</div>
+					<div className={cx('meta', { selected: this.props.view === 'meta' })}
+						onClick={()=>this.props.onViewChange('meta')}>
+						<i className='fas fa-info-circle' />
+					</div>
 				</div>
-				<div className={cx('style', { selected: this.props.view === 'style' })}
-					onClick={()=>this.props.onViewChange('style')}>
-					<i className='fa fa-paint-brush' />
-				</div>
-				<div className={cx('meta', { selected: this.props.view === 'meta' })}
-					onClick={()=>this.props.onViewChange('meta')}>
-					<i className='fas fa-info-circle' />
-				</div>
-			</div>
 
-		</div>
-		)
+			</div>
+		);
 	},
 
 	render : function(){
@@ -272,11 +283,6 @@ const Snippetbar = createClass({
 
 module.exports = Snippetbar;
 
-
-
-
-
-
 const SnippetGroup = createClass({
 	displayName     : 'SnippetGroup',
 	getDefaultProps : function() {
@@ -310,7 +316,8 @@ const SnippetGroup = createClass({
 	},
 
 	render : function(){
-		return <div className='snippetGroup snippetBarButton'>
+		const snippetGroup = `snippetGroup snippetBarButton ${this.props.snippets.length === 0 ? 'disabledSnippets' : ''}`;
+		return <div className={snippetGroup}>
 			<div className='text'>
 				<i className={this.props.icon} />
 				<span className='groupName'>{this.props.groupName}</span>

client/homebrew/editor/snippetbar/snippetbar.less

@@ -14,15 +14,15 @@
 	.snippets {
 		display         : flex;
 		justify-content : flex-start;
-		min-width       : 327.58px;
+		min-width       : 432.18px;  //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
 	}
 
 	.editors {
 		display         : flex;
 		justify-content : flex-end;
-		min-width       : 225px;
+		min-width       : 250px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
 
-		&:only-child { margin-left : auto;min-width:unset;}
+		&:only-child {min-width   : unset; margin-left : auto;}
 
 		>div {
 			display         : flex;
@@ -39,9 +39,7 @@
 				text-align  : center;
 				cursor      : pointer;
 
-				&.editorTool:not(.active) {
-					cursor:not-allowed;
-				}
+				&.editorTool:not(.active) { cursor : not-allowed; }
 
 				&:hover,&.selected { background-color : #999999; }
 				&.text {
@@ -53,6 +51,9 @@
 				&.meta {
 					.tooltipLeft('Properties');
 				}
+				&.snippet {
+					.tooltipLeft('Snippets');
+				}
 				&.undo {
 					.tooltipLeft('Undo');
 					font-size : 0.75em;
@@ -92,7 +93,7 @@
 				&.editorTheme {
 					.tooltipLeft('Editor Themes');
 					font-size : 0.75em;
-					color     : black;
+					color     : inherit;
 					&.active {
 						position         : relative;
 						background-color : #999999;
@@ -151,9 +152,9 @@
 			position         : absolute;
 			top              : 100%;
 			z-index          : 1000;
+			visibility       : hidden;
 			padding          : 0px;
 			margin-left      : -5px;
-			visibility       : hidden;
 			background-color : #DDDDDD;
 			.snippet {
 				position    : relative;
@@ -228,8 +229,15 @@
 			}
 		}
 	}
+	.disabledSnippets {
+		color: grey;
+		cursor: not-allowed;
+
+		&:hover { background-color: #DDDDDD;}
+	}
+
 }
-@container editor (width < 553px) {
+@container editor (width < 683px) {
 	.snippetBar {
 		.editors { 
 			flex            : 1;

client/homebrew/editor/tagInput/tagInput.jsx

@@ -3,43 +3,43 @@ const React = require('react');
 const { useState, useEffect } = React;
 const _     = require('lodash');
 
-const TagInput = ({ unique = true, values = [], ...props }) => {
+const TagInput = ({ unique = true, values = [], ...props })=>{
 	const [tempInputText, setTempInputText] = useState('');
-	const [tagList, setTagList] = useState(values.map((value) => ({ value, editing: false })));
+	const [tagList, setTagList] = useState(values.map((value)=>({ value, editing: false })));
 
 	useEffect(()=>{
-		handleChange(tagList.map((context)=>context.value))
-	}, [tagList])
+		handleChange(tagList.map((context)=>context.value));
+	}, [tagList]);
 
 	const handleChange = (value)=>{
 		props.onChange({
 			target : { value }
-		})
+		});
 	};
 
-	const handleInputKeyDown = ({ evt, value, index, options = {} }) => {
-		if (_.includes(['Enter', ','], evt.key)) {
+	const handleInputKeyDown = ({ evt, value, index, options = {} })=>{
+		if(_.includes(['Enter', ','], evt.key)) {
 			evt.preventDefault();
 			submitTag(evt.target.value, value, index);
-			if (options.clear) {
+			if(options.clear) {
 				setTempInputText('');
 			}
 		}
 	};
 
-	const submitTag = (newValue, originalValue, index) => {
-		setTagList((prevContext) => {
+	const submitTag = (newValue, originalValue, index)=>{
+		setTagList((prevContext)=>{
 			// remove existing tag
 			if(newValue === null){
 				return [...prevContext].filter((context, i)=>i !== index);
 			}
 			// add new tag
 			if(originalValue === null){
-				return [...prevContext, { value: newValue, editing: false }]
+				return [...prevContext, { value: newValue, editing: false }];
 			}
 			// update existing tag
-			return prevContext.map((context, i) => {
-				if (i === index) {
+			return prevContext.map((context, i)=>{
+				if(i === index) {
 					return { ...context, value: newValue, editing: false };
 				}
 				return context;
@@ -47,10 +47,10 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
 		});
 	};
 
-	const editTag = (index) => {
-		setTagList((prevContext) => {
-			return prevContext.map((context, i) => {
-				if (i === index) {
+	const editTag = (index)=>{
+		setTagList((prevContext)=>{
+			return prevContext.map((context, i)=>{
+				if(i === index) {
 					return { ...context, editing: true };
 				}
 				return { ...context, editing: false };
@@ -58,25 +58,25 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
 		});
 	};
 
-	const renderReadTag = (context, index) => {
+	const renderReadTag = (context, index)=>{
 		return (
 			<li key={index}
 				data-value={context.value}
 				className='tag'
-				onClick={() => editTag(index)}>
+				onClick={()=>editTag(index)}>
 				{context.value}
-				<button onClick={(evt)=>{evt.stopPropagation(); submitTag(null, context.value, index)}}><i className='fa fa-times fa-fw'/></button>
+				<button onClick={(evt)=>{evt.stopPropagation(); submitTag(null, context.value, index);}}><i className='fa fa-times fa-fw'/></button>
 			</li>
 		);
 	};
 
-	const renderWriteTag = (context, index) => {
+	const renderWriteTag = (context, index)=>{
 		return (
 			<input type='text'
 				key={index}
-				defaultValue={context.value} 
-				onKeyDown={(evt) => handleInputKeyDown({evt, value: context.value, index: index})} 
-				autoFocus 
+				defaultValue={context.value}
+				onKeyDown={(evt)=>handleInputKeyDown({ evt, value: context.value, index: index })}
+				autoFocus
 			/>
 		);
 	};
@@ -86,7 +86,7 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
 			<label>{props.label}</label>
 			<div className='value'>
 				<ul className='list'>
-					{tagList.map((context, index) => { return context.editing ? renderWriteTag(context, index) : renderReadTag(context, index); })}
+					{tagList.map((context, index)=>{ return context.editing ? renderWriteTag(context, index) : renderReadTag(context, index); })}
 				</ul>
 
 				<input
@@ -94,8 +94,8 @@ const TagInput = ({ unique = true, values = [], ...props }) => {
 					className='value'
 					placeholder={props.placeholder}
 					value={tempInputText}
-					onChange={(e) => setTempInputText(e.target.value)}
-					onKeyDown={(evt) => handleInputKeyDown({ evt, value: null, options: { clear: true } })}
+					onChange={(e)=>setTempInputText(e.target.value)}
+					onKeyDown={(evt)=>handleInputKeyDown({ evt, value: null, options: { clear: true } })}
 				/>
 			</div>
 		</div>

client/homebrew/homebrew.jsx

@@ -1,95 +1,83 @@
-//╔===--------------- Polyfills --------------===╗//
-import 'core-js/es/string/to-well-formed.js';
-//╚===---------------          ---------------===╝//
+/* eslint-disable camelcase */
+import 'core-js/es/string/to-well-formed.js'; //Polyfill for older browsers
+import './homebrew.less';
+import React from 'react';
+import { StaticRouter as Router, Route, Routes, useParams, useSearchParams } from 'react-router';
 
-require('./homebrew.less');
-const React = require('react');
-const createClass = require('create-react-class');
-const { StaticRouter:Router } = require('react-router');
-const { Route, Routes, useParams, useSearchParams } = require('react-router');
+import { updateLocalStorage } from './utils/updateLocalStorage/updateLocalStorageKeys.js';
 
-const HomePage = require('./pages/homePage/homePage.jsx');
-const EditPage = require('./pages/editPage/editPage.jsx');
-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');
+import HomePage    from './pages/homePage/homePage.jsx';
+import EditPage    from './pages/editPage/editPage.jsx';
+import UserPage    from './pages/userPage/userPage.jsx';
+import SharePage   from './pages/sharePage/sharePage.jsx';
+import NewPage     from './pages/newPage/newPage.jsx';
+import ErrorPage   from './pages/errorPage/errorPage.jsx';
+import VaultPage   from './pages/vaultPage/vaultPage.jsx';
+import AccountPage from './pages/accountPage/accountPage.jsx';
 
-const WithRoute = (props)=>{
+const WithRoute = ({ el: Element, ...rest })=>{
 	const params = useParams();
 	const [searchParams] = useSearchParams();
-	const queryParams = {};
-	for (const [key, value] of searchParams?.entries() || []) {
-		queryParams[key] = value;
-	}
-	const Element = props.el;
-	const allProps = {
-		...props,
-		...params,
-		query : queryParams,
-		el    : undefined
-	};
-	return <Element {...allProps} />;
+	const queryParams = Object.fromEntries(searchParams?.entries() || []);
+	return <Element {...rest} {...params} query={queryParams} />;
 };
 
-const Homebrew = createClass({
-	displayName     : 'Homebrewery',
-	getDefaultProps : function() {
-		return {
-			url         : '',
-			welcomeText : '',
-			changelog   : '',
-			version     : '0.0.0',
-			account     : null,
-			enable_v3   : false,
-			brew        : {
-				title     : '',
-				text      : '',
-				shareId   : null,
-				editId    : null,
-				createdAt : null,
-				updatedAt : null,
-				lang      : ''
-			}
-		};
-	},
+const Homebrew = (props)=>{
+	const {
+		url = '',
+		version = '0.0.0',
+		account = null,
+		config,
+		brew = {
+			title     : '',
+			text      : '',
+			shareId   : null,
+			editId    : null,
+			createdAt : null,
+			updatedAt : null,
+			lang      : ''
+		},
+		userThemes,
+		brews
+	} = props;
 
-	getInitialState : function() {
-		global.account = this.props.account;
-		global.version = this.props.version;
-		global.enable_v3 = this.props.enable_v3;
-		global.enable_themes = this.props.enable_themes;
-		global.config = this.props.config;
+	global.account       = account;
+	global.version       = version;
+	global.config        = config;
 
-		return {};
-	},
+	const backgroundObject = ()=>{
+		if(global.config.deployment || (config.local && config.development)){
+  			const bgText = global.config.deployment || 'Local';
+  			return {
+    			backgroundImage : `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100px' width='200px'><text x='0' y='15' fill='%23fff7' font-size='20'>${bgText}</text></svg>")`
+  			};
+		}
+		return null;
+	};
+	updateLocalStorage();
 
-	render : function (){
-		return (
-			<Router location={this.props.url}>
-				<div className='homebrew'>
-					<Routes>
-						<Route path='/edit/:id' element={<WithRoute el={EditPage} brew={this.props.brew} userThemes={this.props.userThemes}/>} />
-						<Route path='/share/:id' element={<WithRoute el={SharePage} brew={this.props.brew} />} />
-						<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} />} />
-						<Route path='/account' element={<WithRoute el={AccountPage} brew={this.props.brew} accountDetails={this.props.brew.accountDetails} />} />
-						<Route path='/legacy' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-						<Route path='/error' element={<WithRoute el={ErrorPage} brew={this.props.brew} />} />
-						<Route path='/' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-						<Route path='/*' element={<WithRoute el={HomePage} brew={this.props.brew} />} />
-					</Routes>
-				</div>
-			</Router>
-		);
-	}
-});
+	return (
+		<Router location={url}>
+			<div className={`homebrew${(config.deployment || config.local) ? ' deployment' : ''}`} style={backgroundObject()}>
+				<Routes>
+					<Route path='/edit/:id' element={<WithRoute el={EditPage} brew={brew} userThemes={userThemes}/>} />
+					<Route path='/share/:id' element={<WithRoute el={SharePage} brew={brew} />} />
+					<Route path='/new/:id' element={<WithRoute el={NewPage} brew={brew} userThemes={userThemes}/>} />
+					<Route path='/new' element={<WithRoute el={NewPage} userThemes={userThemes}/> } />
+					<Route path='/user/:username' element={<WithRoute el={UserPage} brews={brews} />} />
+					<Route path='/vault' element={<WithRoute el={VaultPage}/>}/>
+					<Route path='/changelog' element={<WithRoute el={SharePage} brew={brew} disableMeta={true} />} />
+					<Route path='/faq' element={<WithRoute el={SharePage} brew={brew} disableMeta={true} />} />
+					<Route path='/migrate' element={<WithRoute el={SharePage} brew={brew} disableMeta={true} />} />
+					<Route path='/account' element={<WithRoute el={AccountPage} brew={brew} accountDetails={brew.accountDetails} />} />
+					<Route path='/legacy' element={<WithRoute el={HomePage} brew={brew} />} />
+					<Route path='/error' element={<WithRoute el={ErrorPage} brew={brew} />} />
+					<Route path='/' element={<WithRoute el={HomePage} brew={brew} />} />
+					<Route path='/*' element={<WithRoute el={HomePage} brew={brew} />} />
+				</Routes>
+			</div>
+		</Router>
+	);
+};
 
 module.exports = Homebrew;

client/homebrew/homebrew.less

@@ -1,36 +1,34 @@
 @import 'naturalcrit/styles/core.less';
-.homebrew{
+.homebrew {
 	height : 100%;
-	.sitePage{
+	background-color:@steel;
+	&.deployment { background-color : darkred; }
+
+	.sitePage {
 		display          : flex;
-		height           : 100%;
-		background-color : @steel;
 		flex-direction   : column;
+		height           : 100%;
 		overflow-y       : hidden;
-		.content{
+		.content {
 			position   : relative;
-			height     : calc(~"100% - 29px"); //Navbar height
 			flex       : auto;
+			height     : calc(~'100% - 29px'); //Navbar height
 			overflow-y : hidden;
 		}
 		&.listPage .content {
 			overflow-y : scroll;
 
 			&::-webkit-scrollbar {
-				width: 20px;
-				&:horizontal{
-					height: 20px;
-					width:auto;
+				width : 20px;
+				&:horizontal {
+					width  : auto;
+					height : 20px;
 				}
 				&-thumb {
-					background: linear-gradient(90deg, #d3c1af 15px, #00000000 15px);
-					&:horizontal{
-						background: linear-gradient(0deg, #d3c1af 15px, #00000000 15px);
-					}
-				}
-				&-corner {
-					visibility: hidden;
+					background : linear-gradient(90deg, #D3C1AF 15px, #00000000 15px);
+					&:horizontal { background : linear-gradient(0deg, #D3C1AF 15px, #00000000 15px); }
 				}
+				&-corner { visibility : hidden; }
 			}
 		}
 	}

client/homebrew/navbar/error-navitem.jsx

@@ -1,144 +1,147 @@
 require('./error-navitem.less');
 const React = require('react');
 const Nav = require('naturalcrit/nav/nav.jsx');
-const createClass = require('create-react-class');
 
-const ErrorNavItem = createClass({
-	getDefaultProps : function() {
-		return {
-			error  : '',
-			parent : null
-		};
-	},
-	render : function() {
-		const clearError = ()=>{
-			const state = {
-				error : null
-			};
-			if(this.props.parent.state.isSaving) {
-				state.isSaving = false;
-			}
-			this.props.parent.setState(state);
-		};
+const ErrorNavItem = ({ error = '', clearError })=>{
+	const response    = error.response;
+	const errorCode   = error.code;
+	const status      = response?.status;
+	const HBErrorCode = response?.body?.HBErrorCode;
+	const message     = response?.body?.message;
 
-		const error       = this.props.error;
-		const response    = error.response;
-		const status      = response.status;
-		const HBErrorCode = response.body?.HBErrorCode;
-		const message     = response.body?.message;
-		let errMsg = '';
-		try {
-			errMsg += `${error.toString()}\n\n`;
-			errMsg += `\`\`\`\n${error.stack}\n`;
-			errMsg += `${JSON.stringify(response.error, null, '  ')}\n\`\`\``;
-			console.log(errMsg);
-		} catch (e){}
-
-		if(status === 409) {
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer' onClick={clearError}>
-					{message ?? 'Conflict: please refresh to get latest changes'}
-				</div>
-			</Nav.item>;
-		}
-
-		if(status === 412) {
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer' onClick={clearError}>
-					{message ?? 'Your client is out of date. Please save your changes elsewhere and refresh.'}
-				</div>
-			</Nav.item>;
-		}
-
-		if(HBErrorCode === '04') {
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer' onClick={clearError}>
-					You are no longer signed in as an author of
-					this brew! Were you signed out from a different
-					window? Visit our log in page, then try again!
-					<br></br>
-					<a target='_blank' rel='noopener noreferrer'
-						href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
-						<div className='confirm'>
-							Sign In
-						</div>
-					</a>
-					<div className='deny'>
-						Not Now
-					</div>
-				</div>
-			</Nav.item>;
-		}
-
-		if(response.body?.errors?.[0].reason == 'storageQuotaExceeded') {
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-			Oops!
-				<div className='errorContainer' onClick={clearError}>
-				Can't save because your Google Drive seems to be full!
-				</div>
-			</Nav.item>;
-		}
-
-		if(response.req.url.match(/^\/api.*Google.*$/m)){
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer' onClick={clearError}>
-					Looks like your Google credentials have
-					expired! Visit our log in page to sign out
-					and sign back in with Google,
-					then try saving again!
-					<br></br>
-					<a target='_blank' rel='noopener noreferrer'
-						href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
-						<div className='confirm'>
-							Sign In
-						</div>
-					</a>
-					<div className='deny'>
-						Not Now
-					</div>
-				</div>
-			</Nav.item>;
-		}
-
-		if(HBErrorCode === '09') {
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer' onClick={clearError}>
-					Looks like there was a problem retreiving
-					the theme, or a theme that it inherits,
-					for this brew. Verify that brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
-						{response.body.brewId}</a> still exists!
-				</div>
-			</Nav.item>;
-		}
-
-		if(HBErrorCode === '10') {
-			return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
-				Oops!
-				<div className='errorContainer' onClick={clearError}>
-					Looks like the brew you have selected
-					as a theme is not tagged for use as a
-					theme. Verify that
-					brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
-						{response.body.brewId}</a> has the <span className='lowercase'>meta:theme</span> tag!
-				</div>
-			</Nav.item>;
-		}
+	let errMsg = '';
+	try {
+		errMsg += `${error.toString()}\n\n`;
+		errMsg += `\`\`\`\n${error.stack}\n`;
+		errMsg += `${JSON.stringify(response?.error, null, '  ')}\n\`\`\``;
+		console.log(errMsg);
+	} catch {}
 
+	if(status === 409) {
 		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
 			Oops!
-			<div className='errorContainer'>
-				Looks like there was a problem saving. <br />
-				Report the issue <a target='_blank' rel='noopener noreferrer' href={`https://github.com/naturalcrit/homebrewery/issues/new?template=save_issue.yml&error-code=${encodeURIComponent(errMsg)}`}>
-				here
-				</a>.
+			<div className='errorContainer' onClick={clearError}>
+				{message ?? 'Conflict: please refresh to get latest changes'}
 			</div>
 		</Nav.item>;
 	}
-});
+
+	if(status === 412) {
+		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			Oops!
+			<div className='errorContainer' onClick={clearError}>
+				{message ?? 'Your client is out of date. Please save your changes elsewhere and refresh.'}
+			</div>
+		</Nav.item>;
+	}
+
+	if(HBErrorCode === '04') {
+		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			Oops!
+			<div className='errorContainer' onClick={clearError}>
+				You are no longer signed in as an author of
+				this brew! Were you signed out from a different
+				window? Visit our log in page, then try again!
+				<br></br>
+				<a target='_blank' rel='noopener noreferrer'
+					href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
+					<div className='confirm'>
+						Sign In
+					</div>
+				</a>
+				<div className='deny'>
+					Not Now
+				</div>
+			</div>
+		</Nav.item>;
+	}
+
+	if(response?.body?.errors?.[0].reason == 'storageQuotaExceeded') {
+		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+		Oops!
+			<div className='errorContainer' onClick={clearError}>
+			Can't save because your Google Drive seems to be full!
+			</div>
+		</Nav.item>;
+	}
+
+	if(response?.req.url.match(/^\/api.*Google.*$/m)){
+		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			Oops!
+			<div className='errorContainer' onClick={clearError}>
+				Looks like your Google credentials have
+				expired! Visit our log in page to sign out
+				and sign back in with Google,
+				then try saving again!
+				<br></br>
+				<a target='_blank' rel='noopener noreferrer'
+					href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
+					<div className='confirm'>
+						Sign In
+					</div>
+				</a>
+				<div className='deny'>
+					Not Now
+				</div>
+			</div>
+		</Nav.item>;
+	}
+
+	if(HBErrorCode === '09') {
+		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			Oops!
+			<div className='errorContainer' onClick={clearError}>
+				Looks like there was a problem retreiving
+				the theme, or a theme that it inherits,
+				for this brew. Verify that brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
+					{response.body.brewId}</a> still exists!
+			</div>
+		</Nav.item>;
+	}
+
+	if(HBErrorCode === '10') {
+		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			Oops!
+			<div className='errorContainer' onClick={clearError}>
+				Looks like the brew you have selected
+				as a theme is not tagged for use as a
+				theme. Verify that
+				brew <a className='lowercase' target='_blank' rel='noopener noreferrer' href={`/share/${response.body.brewId}`}>
+					{response.body.brewId}</a> has the <span className='lowercase'>meta:theme</span> tag!
+			</div>
+		</Nav.item>;
+	}
+
+	if(HBErrorCode === '13') {
+		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			Oops!
+			<div className='errorContainer' onClick={clearError}>
+				Server has lost connection to the database.
+			</div>
+		</Nav.item>;
+	}
+
+	if(errorCode === 'ECONNABORTED') {
+		return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+			Oops!
+			<div className='errorContainer' onClick={clearError}>
+				The request to the server was interrupted or timed out.
+				This can happen due to a network issue, or if
+				trying to save a particularly large brew.
+				Please check your internet connection and try again.
+			</div>
+		</Nav.item>;
+	}
+
+	return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
+		Oops!
+		<div className='errorContainer'>
+			Looks like there was a problem saving. <br />
+			Report the issue <a target='_blank' rel='noopener noreferrer' href={`https://github.com/naturalcrit/homebrewery/issues/new?template=save_issue.yml&error-code=${encodeURIComponent(errMsg)}`}>
+			here
+			</a>.
+		</div>
+	</Nav.item>;
+};
 
 module.exports = ErrorNavItem;

client/homebrew/navbar/error-navitem.less

@@ -1,78 +1,70 @@
 .navItem.error {
-  position         : relative;
-  background-color : @red;
+	position         : relative;
+	background-color : @red;
 }
 
-.errorContainer{
-  animation-name: glideDown;
-  animation-duration: 0.4s;
-  position         : absolute;
-  top              : 100%;
-  left             : 50%;
-  z-index          : 1000;
-  width            : 140px;
-  padding          : 3px;
-  color            : white;
-  background-color : #333;
-  border           : 3px solid #444;
-  border-radius    : 5px;
-  transform        : translate(-50% + 3px, 10px);
-  text-align       : center;
-  font-size        : 10px;
-  font-weight      : 800;
-  text-transform   : uppercase;
-	.lowercase {
-		text-transform : none;
+.errorContainer {
+	position           : absolute;
+	top                : 100%;
+	left               : 50%;
+	z-index            : 1000;
+	width              : 140px;
+	padding            : 3px;
+	font-size          : 10px;
+	font-weight        : 800;
+	color              : white;
+	text-align         : center;
+	text-transform     : uppercase;
+	background-color   : #333333;
+	border             : 3px solid #444444;
+	border-radius      : 5px;
+	transform          : translate(-50% + 3px, 10px);
+	animation-name     : glideDown;
+	animation-duration : 0.4s;
+	.lowercase { text-transform : none; }
+	a { color : @teal; }
+	&::before {
+		position      : absolute;
+		top           : -23px;
+		left          : 53px;
+		width         : 0px;
+		height        : 0px;
+		content       : '';
+		border-top    : 10px solid transparent;
+		border-right  : 10px solid transparent;
+		border-bottom : 10px solid #444444;
+		border-left   : 10px solid transparent;
+	}
+	&::after {
+		position      : absolute;
+		top           : -19px;
+		left          : 53px;
+		width         : 0px;
+		height        : 0px;
+		content       : '';
+		border-top    : 10px solid transparent;
+		border-right  : 10px solid transparent;
+		border-bottom : 10px solid #333333;
+		border-left   : 10px solid transparent;
+	}
+	.deny {
+		display          : inline-block;
+		width            : 48%;
+		padding          : 5px;
+		margin           : 1px;
+		background-color : #333333;
+		border-left      : 1px solid #666666;
+		.animate(background-color);
+		&:hover { background-color : red; }
+	}
+	.confirm {
+		display          : inline-block;
+		width            : 48%;
+		padding          : 5px;
+		margin           : 1px;
+		color            : white;
+		background-color : #333333;
+		.animate(background-color);
+		&:hover { background-color : teal; }
 	}
-  a{
-    color : @teal;
-  }
-  &:before {
-    content: "";
-    width: 0px;
-    height: 0px;
-    position: absolute;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-top: 10px solid transparent;
-    border-bottom: 10px solid #444;
-    left: 53px;
-    top: -23px;
-  }
-  &:after {
-    content: "";
-    width: 0px;
-    height: 0px;
-    position: absolute;
-    border-left: 10px solid transparent;
-    border-right: 10px solid transparent;
-    border-top: 10px solid transparent;
-    border-bottom: 10px solid #333;
-    left: 53px;
-    top: -19px;
-  }
-  .deny {
-    width            : 48%;
-    margin           : 1px;
-    padding          : 5px;
-    background-color : #333;
-    display          : inline-block;
-    border-left      : 1px solid #666;
-    .animate(background-color);
-    &:hover{
-      background-color : red;
-    }
-  }
-  .confirm {
-    width            : 48%;
-    margin           : 1px;
-    padding          : 5px;
-    background-color : #333;
-    display          : inline-block;
-    color            : white;
-    .animate(background-color);
-    &:hover{
-      background-color : teal;
-    }
-  }
 }

client/homebrew/navbar/navbar.less

@@ -24,11 +24,11 @@
 }
 
 .homebrew nav {
+	position         : relative;
+	z-index          : 2;
+	display          : flex;
+	justify-content  : space-between;
 	background-color : #333333;
-	position        : relative;
-	z-index         : 2;
-	display         : flex;
-	justify-content : space-between;
 	
 	.navSection {
 		display     : flex;
@@ -37,7 +37,10 @@
 
 		&:has(.brewTitle) {
 			flex-grow : 1;
-			min-width : 300px; 
+			min-width : 300px;
+		}
+		>.brewTitle {
+			cursor:auto;
 		}
 	}
 	// "NaturalCrit" logo
@@ -82,8 +85,8 @@
 		font-weight      : 800;
 		line-height      : 13px;
 		color            : white;
-		text-decoration  : none;
 		text-transform   : uppercase;
+		text-decoration  : none;
 		cursor           : pointer;
 		background-color : #333333;
 		i {
@@ -106,11 +109,11 @@
 			display          : block;
 			width            : 100%;
 			overflow         : hidden;
+			text-overflow    : ellipsis;
 			font-size        : 12px;
 			font-weight      : 800;
 			color            : white;
 			text-align       : center;
-			text-overflow    : ellipsis;
 			text-transform   : initial;	
 			white-space      : nowrap;
 			background-color : transparent;		
@@ -170,16 +173,16 @@
 					h4 {
 						box-sizing : border-box;
 						display    : block;
-						flex-basis : 20%;
 						flex-grow  : 1;
+						flex-basis : 20%;
 						min-width  : 76px;
 						padding    : 5px 0;
 						color      : #BBBBBB;
 						text-align : center;
 					}
 					p {
-						flex-basis     : 80%;
 						flex-grow      : 1;
+						flex-basis     : 80%;
 						padding        : 5px 0;
 						font-family    : 'Open Sans', sans-serif;
 						font-size      : 10px;
@@ -215,10 +218,10 @@
 				z-index          : 10000;
 				box-sizing       : border-box;
 				display          : block;
+				visibility       : hidden;
 				width            : 100%;
 				padding          : 13px 5px;
 				text-align       : center;
-				visibility       : hidden;
 				background-color : #333333;
 			}
 		}

client/homebrew/navbar/newbrew.navitem.jsx

@@ -5,33 +5,45 @@ const { splitTextStyleAndMetadata } = require('../../../shared/helpers.js'); //
 
 const BREWKEY  = 'homebrewery-new';
 const STYLEKEY = 'homebrewery-new-style';
-const METAKEY  = 'homebrewery-new-meta';
+const METAKEY = 'homebrewery-new-meta';
 
 const NewBrew = ()=>{
 	const handleFileChange = (e)=>{
 		const file = e.target.files[0];
-		if(file) {
-			const reader = new FileReader();
-			reader.onload = (e)=>{
-				const fileContent = e.target.result;
-				const newBrew = {
-					text  : fileContent,
-					style : ''
-				};
-				if(fileContent.startsWith('```metadata')) {
-					splitTextStyleAndMetadata(newBrew); // Modify newBrew directly
-					localStorage.setItem(BREWKEY, newBrew.text);
-					localStorage.setItem(STYLEKEY, newBrew.style);
-					localStorage.setItem(METAKEY, JSON.stringify(_.pick(newBrew, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang'])));
-					window.location.href = '/new';
-				} else {
-					alert('This file is invalid, please, enter a valid file');
-				}
-			};
-			reader.readAsText(file);
-		}
+		if(!file) return;
+
+		const currentNew = localStorage.getItem(BREWKEY);
+		if(currentNew && !confirm(
+			`You have some text in the new brew space, if you load a file that text will be lost, are you sure you want to load the file?`
+		)) return;
+
+		const reader = new FileReader();
+		reader.onload = (e)=>{
+			const fileContent = e.target.result;
+			const newBrew = { text: fileContent, style: '' };
+
+			if(fileContent.startsWith('```metadata')) {
+				splitTextStyleAndMetadata(newBrew);
+				localStorage.setItem(BREWKEY, newBrew.text);
+				localStorage.setItem(STYLEKEY, newBrew.style);
+				localStorage.setItem(METAKEY, JSON.stringify(
+					_.pick(newBrew, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang'])
+				));
+				window.location.href = '/new';
+				return;
+			}
+
+			const type = file.name.split('.').pop().toLowerCase();
+
+			alert(`This file is invalid: ${!type ? 'Missing file extension' :`.${type} files are not supported`}. Only .txt files exported from the Homebrewery are allowed.`);
+
+
+			console.log(file);
+		};
+		reader.readAsText(file);
 	};
 
+
 	return (
 		<Nav.dropdown>
 			<Nav.item

client/homebrew/navbar/recent.navitem.jsx

@@ -5,8 +5,8 @@ const Moment = require('moment');
 
 const Nav = require('naturalcrit/nav/nav.jsx');
 
-const EDIT_KEY = 'homebrewery-recently-edited';
-const VIEW_KEY = 'homebrewery-recently-viewed';
+const EDIT_KEY = 'HB_nav_recentlyEdited';
+const VIEW_KEY = 'HB_nav_recentlyViewed';
 
 
 const RecentItems = createClass({

client/homebrew/navbar/share.navitem.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import dedent from 'dedent-tabs';
+import Nav from 'naturalcrit/nav/nav.jsx';
+
+const getShareId = (brew)=>(
+	brew.googleId && !brew.stubbed
+		? brew.googleId + brew.shareId
+		: brew.shareId
+);
+
+const getRedditLink = (brew)=>{
+	const text = dedent`
+			Hey guys! I've been working on this homebrew. I'd love your feedback. Check it out.
+
+			**[Homebrewery Link](${global.config.baseUrl}/share/${getShareId(brew)})**`;
+
+	return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(brew.title.toWellFormed())}&text=${encodeURIComponent(text)}`;
+};
+
+export default ({ brew })=>(
+	<Nav.dropdown>
+		<Nav.item color='teal' icon='fas fa-share-alt'>
+			share
+		</Nav.item>
+		<Nav.item color='blue' href={`/share/${getShareId(brew)}`}>
+			view
+		</Nav.item>
+		<Nav.item color='blue' onClick={()=>{navigator.clipboard.writeText(`${global.config.baseUrl}/share/${getShareId(brew)}`);}}>
+			copy url
+		</Nav.item>
+		<Nav.item color='blue' href={getRedditLink(brew)} newTab rel='noopener noreferrer'>
+			post to reddit
+		</Nav.item>
+	</Nav.dropdown>
+);

client/homebrew/pages/accountPage/accountPage.jsx

@@ -1,7 +1,7 @@
 const React  = require('react');
 const moment = require('moment');
 const UIPage = require('../basePages/uiPage/uiPage.jsx');
-const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx');
+const NaturalCritIcon = require('client/components/svg/naturalcrit-d20.svg.jsx');
 
 let SAVEKEY = '';
 
@@ -13,7 +13,7 @@ const AccountPage = (props)=>{
 	// initialize save location from local storage based on user id
 	React.useEffect(()=>{
 		if(!saveLocation && accountDetails.username) {
-			SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${accountDetails.username}`;
+			SAVEKEY = `HB_editor_defaultSave_${accountDetails.username}`;
 			// if no SAVEKEY in local storage, default save location to Google Drive if user has Google account.
 			let saveLocation = window.localStorage.getItem(SAVEKEY);
 			saveLocation = saveLocation ?? (accountDetails.googleId ? 'GOOGLE-DRIVE' : 'HOMEBREWERY');

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

@@ -5,7 +5,7 @@ const moment = require('moment');
 import request from '../../../../utils/request-middleware.js';
 
 const googleDriveIcon = require('../../../../googleDrive.svg');
-const homebreweryIcon = require('../../../../thumbnail.png');
+const homebreweryIcon = require('../../../../thumbnail.svg');
 const dedent = require('dedent-tabs').default;
 
 const BrewItem = ({
@@ -30,11 +30,11 @@ const BrewItem = ({
 		}
 
 		request.delete(`/api/${brew.googleId ?? ''}${brew.editId}`).send().end((err, res)=>{
-				if (err) reportError(err); else window.location.reload();
-        });
+			if(err) reportError(err); else window.location.reload();
+		});
 	}, [brew, reportError]);
 
-	const updateFilter = useCallback((type, term)=> updateListFilter(type, term), [updateListFilter]);
+	const updateFilter = useCallback((type, term)=>updateListFilter(type, term), [updateListFilter]);
 
 	const renderDeleteBrewLink = ()=>{
 		if(!brew.editId) return null;

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

@@ -1,148 +1,129 @@
 
-.brewItem{
+.brewItem {
 	position                    : relative;
+	box-sizing                  : border-box;
 	display                     : inline-block;
-	vertical-align              : top;
-	box-sizing                  : border-box;
-	box-sizing                  : border-box;
-	overflow                    : hidden;
 	width                       : 48%;
 	min-height                  : 105px;
-	margin-right                : 15px;
-	margin-bottom               : 15px;
 	padding                     : 5px 15px 2px 6px;
 	padding-right               : 15px;
-	border                      : 1px solid #c9ad6a;
+	margin-right                : 15px;
+	margin-bottom               : 15px;
+	overflow                    : hidden;
+	vertical-align              : top;
+	background-color            : #CAB2802E;
+	border                      : 1px solid #C9AD6A;
 	border-radius               : 5px;
+	box-shadow                  : 0px 4px 5px 0px #333333;
+	break-inside                : avoid;
 	-webkit-column-break-inside : avoid;
 	page-break-inside           : avoid;
-	break-inside                : avoid;
-	box-shadow                  : 0px 4px 5px 0px #333;
-	background-color            : #cab2802e;
-	.thumbnail  {
-		position: absolute;
-		width: 150px;
-		height: 100%;
-		top: 0;
-		right: 0;
-		z-index: -1;
-		background-size: contain;
-		background-repeat: no-repeat;
-		background-position: right top;
-		mask-image: linear-gradient(80deg, #0000 20%, #050 40%);
-		-webkit-mask-image: linear-gradient(80deg, #0000 20%, #050 40%);
-		opacity: 50%;
+	.thumbnail {
+		position            : absolute;
+		top                 : 0;
+		right               : 0;
+		z-index             : -1;
+		width               : 150px;
+		height              : 100%;
+		background-repeat   : no-repeat;
+		background-position : right top;
+		background-size     : contain;
+		opacity             : 50%;
+		-webkit-mask-image  : linear-gradient(80deg, #00000000 20%, #005500 40%);
+		mask-image          : linear-gradient(80deg, #00000000 20%, #005500 40%);
 	}
 	.text {
 		min-height : 54px;
-		h4{
+		h4 {
 			margin-bottom : 5px;
 			font-size     : 2.2em;
 		}
 	}
-	.info{
-		position: initial;
-		bottom: 2px;
-		font-family : ScalySansRemake;
+	.info {
+		position    : initial;
+		bottom      : 2px;
+		font-family : "ScalySansRemake";
 		font-size   : 1.2em;
-		&>span{
+		& > span {
 			margin-right : 12px;
 			line-height  : 1.5em;
 
-			a {
-				color:inherit;
-			}
+			a { color : inherit; }
 		}
 	}
 	.brewTags span {
-		background-color: #c8ac6e3b;
-		margin: 2px;
-		padding: 2px;
-		border: 1px solid #c8ac6e;
-		border-radius: 4px;
-		white-space: nowrap;
-		display: inline-block;
-		font-weight: bold;
-		border-color: currentColor;
-		cursor : pointer;
-		&:before {
-			font-family: 'Font Awesome 5 Free';
-			font-size: 12px;
-			margin-right: 3px;
+		display          : inline-block;
+		padding          : 2px;
+		margin           : 2px;
+		font-weight      : bold;
+		white-space      : nowrap;
+		cursor           : pointer;
+		background-color : #C8AC6E3B;
+		border           : 1px solid #C8AC6E;
+		border-color     : currentColor;
+		border-radius    : 4px;
+		&::before {
+			margin-right : 3px;
+			font-family  : 'Font Awesome 6 Free';
+			font-size    : 12px;
 		}
 		&.type {
-			background-color: #0080003b;
-			color: #008000;
-			&:before{
-				content: '\f0ad';
-			}
+			color            : #008000;
+			background-color : #0080003B;
+			&::before { content : '\f0ad'; }
 		}
 		&.group {
-			background-color: #5050503b;
-			color: #000000;
-			&:before{
-				content: '\f500';
-			}
+			color            : #000000;
+			background-color : #5050503B;
+			&::before { content : '\f500'; }
 		}
 		&.meta {
-			background-color: #0000803b;
-			color: #000080;
-			&:before{
-				content: '\f05a';
-			}
+			color            : #000080;
+			background-color : #0000803B;
+			&::before { content : '\f05a'; }
 		}
 		&.system {
-			background-color: #8000003b;
-			color: #800000;
-			&:before{
-				content: '\f518';
-			}
+			color            : #800000;
+			background-color : #8000003B;
+			&::before { content : '\f518'; }
 		}
 	}
-	&:hover{
-		.links{
-			opacity : 1;
-		}
+	&:hover {
+		.links { opacity : 1; }
 	}
-	&:nth-child(2n + 1){
-		margin-right : 0px;
-	}
-	.links{
+	&:nth-child(2n + 1) { margin-right : 0px; }
+	.links {
 		.animate(opacity);
 		position         : absolute;
 		top              : 0px;
 		right            : 0px;
-		height           : 100%;
 		width            : 2em;
-		opacity          : 0;
-		background-color : fade(black, 60%);
+		height           : 100%;
 		text-align       : center;
-		a{
+		background-color : fade(black, 60%);
+		opacity          : 0;
+		a {
 			.animate(opacity);
 			display         : block;
 			margin          : 8px 0px;
-			opacity         : 0.6;
 			font-size       : 1.3em;
 			color           : white;
 			text-decoration : unset;
-			&:hover{
-				opacity : 1;
-			}
-			i{
-				cursor : pointer;
-			}
+			opacity         : 0.6;
+			&:hover { opacity : 1; }
+			i { cursor : pointer; }
 		}
 	}
 	.googleDriveIcon {
-		height	: 18px;
 		padding : 0px;
 		margin  : -5px;
+		height  : 18px;
 	}
 	.homebreweryIcon {
-		mix-blend-mode : darken;
-		height         : 24px;
-		position       : relative;
-		top            : 5px;
-		left           : -5px;
+		position : relative;
+		padding  : 0px;
+		top      : 5px;
+		left     : -7.5px;
+		height   : 18px;
 	}
 }

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

@@ -7,7 +7,9 @@ const moment      = require('moment');
 
 const BrewItem    = require('./brewItem/brewItem.jsx');
 
-const USERPAGE_KEY_PREFIX = 'HOMEBREWERY-LISTPAGE';
+const USERPAGE_SORT_DIR = 'HB_listPage_sortDir';
+const USERPAGE_SORT_TYPE = 'HB_listPage_sortType';
+const USERPAGE_GROUP_VISIBILITY_PREFIX = 'HB_listPage_visibility_group';
 
 const DEFAULT_SORT_TYPE = 'alpha';
 const DEFAULT_SORT_DIR = 'asc';
@@ -50,12 +52,12 @@ const ListPage = createClass({
 
 		// LOAD FROM LOCAL STORAGE
 		if(typeof window !== 'undefined') {
-			const newSortType = (this.state.sortType ?? (localStorage.getItem(`${USERPAGE_KEY_PREFIX}-SORTTYPE`) || DEFAULT_SORT_TYPE));
-			const newSortDir = (this.state.sortDir ?? (localStorage.getItem(`${USERPAGE_KEY_PREFIX}-SORTDIR`) || DEFAULT_SORT_DIR));
+			const newSortType = (this.state.sortType ?? (localStorage.getItem(USERPAGE_SORT_TYPE) || DEFAULT_SORT_TYPE));
+			const newSortDir = (this.state.sortDir ?? (localStorage.getItem(USERPAGE_SORT_DIR) || DEFAULT_SORT_DIR));
 			this.updateUrl(this.state.filterString, newSortType, newSortDir);
 
 			const brewCollection = this.props.brewCollection.map((brewGroup)=>{
-				brewGroup.visible = (localStorage.getItem(`${USERPAGE_KEY_PREFIX}-VISIBILITY-${brewGroup.class}`) ?? 'true')=='true';
+				brewGroup.visible = (localStorage.getItem(`${USERPAGE_GROUP_VISIBILITY_PREFIX}_${brewGroup.class}`) ?? 'true')=='true';
 				return brewGroup;
 			});
 
@@ -73,10 +75,10 @@ const ListPage = createClass({
 
 	saveToLocalStorage : function() {
 		this.state.brewCollection.map((brewGroup)=>{
-			localStorage.setItem(`${USERPAGE_KEY_PREFIX}-VISIBILITY-${brewGroup.class}`, `${brewGroup.visible}`);
+			localStorage.setItem(`${USERPAGE_GROUP_VISIBILITY_PREFIX}_${brewGroup.class}`, `${brewGroup.visible}`);
 		});
-		localStorage.setItem(`${USERPAGE_KEY_PREFIX}-SORTTYPE`, this.state.sortType);
-		localStorage.setItem(`${USERPAGE_KEY_PREFIX}-SORTDIR`, this.state.sortDir);
+		localStorage.setItem(USERPAGE_SORT_TYPE, this.state.sortType);
+		localStorage.setItem(USERPAGE_SORT_DIR, this.state.sortDir);
 	},
 
 	renderBrews : function(brews){

client/homebrew/pages/basePages/listPage/listPage.less

@@ -1,5 +1,5 @@
 
-.noColumns(){
+.noColumns() {
 	column-count         : auto;
 	column-fill          : auto;
 	column-gap           : normal;
@@ -13,177 +13,151 @@
 	height               : auto;
 	min-height           : 279.4mm;
 	margin               : 20px auto;
-	contain				 : unset;
+	contain              : unset;
 }
-.listPage{
-	.content{
+.listPage {
+	.content {
 		z-index : 1;
-		.page{
+		.page {
 			.noColumns() !important; //Needed to override PHB Theme since this is on a lower @layer
-			&::after{
-				display : none;
-			}
-			.noBrews{
+			&::after { display : none; }
+			.noBrews {
 				margin     : 10px 0px;
 				font-size  : 1.3em;
 				font-style : italic;
 			}
 			.brewCollection {
-				h1:hover{
-					cursor: pointer;
-				}
+				h1:hover { cursor : pointer; }
 				.active::before, .inactive::before {
-					font-family: 'Font Awesome 5 Free';
-					font-weight: 900;
-					font-size: 0.6cm;
-					padding-right: 0.5em;
-				}
-				.active {
-					color: var(--HB_Color_HeaderText);
-				}
-				.active::before {
-					content: '\f107';
-				}
-				.inactive {
-					color: #707070;
-				}
-				.inactive::before {
-					content: '\f105';
+					padding-right : 0.5em;
+					font-family   : 'Font Awesome 6 Free';
+					font-size     : 0.6cm;
+					font-weight   : 900;
 				}
+				.active { color : var(--HB_Color_HeaderText); }
+				.active::before { content : '\f107'; }
+				.inactive { color : #707070; }
+				.inactive::before { content : '\f105'; }
 			}
 		}
 	}
 	.sort-container {
-		font-family        : 'Open Sans', sans-serif;
-		position           : sticky;
-		top                : 0;
-		left               : 0;
-		width              : 100%;
-		height             : 30px;
-		background-color   : #555;
-		border-top         : 1px solid #666;
-		border-bottom         : 1px solid #666;
-		color              : white;
-		text-align         : center;
-		z-index            : 1;
-		display            : flex;
-		justify-content    : center;
-		align-items        : baseline;
-		column-gap         : 15px;
-		row-gap            : 5px;
-		flex-wrap          : wrap;
-		h6{
-			text-transform : uppercase;
+		position              : sticky;
+		top                   : 0;
+		left                  : 0;
+		z-index               : 1;
+		display               : flex;
+		flex-wrap             : wrap;
+		row-gap               : 5px;
+		column-gap            : 15px;
+		align-items           : baseline;
+		justify-content       : center;
+		width                 : 100%;
+		height                : 30px;
+		font-family           : 'Open Sans', sans-serif;
+		color                 : white;
+		text-align            : center;
+		background-color      : #555555;
+		border-top            : 1px solid #666666;
+		border-bottom         : 1px solid #666666;
+		h6 {
 			font-family    : 'Open Sans', sans-serif;
 			font-size      : 11px;
 			font-weight    : bold;
+			text-transform : uppercase;
 		}
 		.sort-option {
-			display: flex;
-			align-items: center;
-			padding: 0 8px;
-			color: #ccc;
-			height: 100%;
+			display     : flex;
+			align-items : center;
+			height      : 100%;
+			padding     : 0 8px;
+			color       : #CCCCCC;
 
-			&:hover{
-				background-color : #444;
-			}
+			&:hover { background-color : #444444; }
 
 			&.active {
-			font-weight: bold;
-			color: #ddd;
-			background-color: #333;
+				font-weight      : bold;
+				color            : #DDDDDD;
+				background-color : #333333;
 
-			button {
-				color: white;
-				font-weight: 800;
-				height: 100%;
-				& + .sortDir {
-					padding-left: 5px;
+				button {
+					height      : 100%;
+					font-weight : 800;
+					color       : white;
+					& + .sortDir { padding-left : 5px; }
 				}
 			}
-		}
 
 		}
 		.filter-option {
-			margin-left: 20px;
-			background-color : transparent !important;
+			margin-left      : 20px;
 			font-size        : 11px;
-			i{
-				padding-right : 5px;
-			}
+			background-color : transparent !important;
+			i { padding-right : 5px; }
+		}
+		button {
+			padding          : 0;
+			font-family      : 'Open Sans', sans-serif;
+			font-size        : 11px;
+			font-weight      : normal;
+			color            : #CCCCCC;
+			text-transform   : uppercase;
+			background-color : transparent;
 		}
-		button{
-				background-color : transparent;
-				font-family      : 'Open Sans', sans-serif;
-				text-transform   : uppercase;
-				font-weight      : normal;
-				font-size        : 11px;
-				color            : #ccc;
-				padding          : 0;
-			}
 
 
 	}
 	.tags-container {
-		height             : 30px;
-		background-color   : #555;
-		border-top         : 1px solid #666;
-		border-bottom      : 1px solid #666;
-		color              : white;
 		display            : flex;
-		justify-content    : center;
-		align-items        : center;
-		column-gap         : 15px;
-		row-gap            : 5px;
 		flex-wrap          : wrap;
+		row-gap            : 5px;
+		column-gap         : 15px;
+		align-items        : center;
+		justify-content    : center;
+		height             : 30px;
+		color              : white;
+		background-color   : #555555;
+		border-top         : 1px solid #666666;
+		border-bottom      : 1px solid #666666;
 		span {
+			padding        : 3px;
 			font-family    : 'Open Sans', sans-serif;
 			font-size      : 11px;
 			font-weight    : bold;
+			color          : #DFDFDF;
+			cursor         : pointer;
 			border         : 1px solid;
 			border-radius  : 3px;
-			padding        : 3px;
-			cursor         : pointer;
-			color: #dfdfdf;
-			&:before {
-				font-family: 'Font Awesome 5 Free';
-				font-size: 12px;
-				margin-right: 3px;
+			&::before {
+				margin-right : 3px;
+				font-family  : 'Font Awesome 6 Free';
+				font-size    : 12px;
 			}
-			&:after {
-				content: '\f00d';
-				font-family: 'Font Awesome 5 Free';
-				font-size: 12px;
-				margin-left: 3px;
+			&::after {
+				margin-left : 3px;
+				font-family : 'Font Awesome 6 Free';
+				font-size   : 12px;
+				content     : '\f00d';
 			}
 			&.type {
-				background-color: #008000;
-				border-color: #00a000;
-				&:before{
-					content: '\f0ad';
-				}
+				background-color : #008000;
+				border-color     : #00A000;
+				&::before { content : '\f0ad'; }
 			}
 			&.group {
-				background-color: #505050;
-				border-color: #000000;
-				&:before{
-					content: '\f500';
-				}
+				background-color : #505050;
+				border-color     : #000000;
+				&::before { content : '\f500'; }
 			}
 			&.meta {
-				background-color: #000080;
-				border-color: #0000a0;
-				&:before{
-					content: '\f05a';
-				}
+				background-color : #000080;
+				border-color     : #0000A0;
+				&::before { content : '\f05a'; }
 			}
 			&.system {
-				background-color: #800000;
-				border-color: #a00000;
-				&:before{
-					content: '\f518';
-				}
+				background-color : #800000;
+				border-color     : #A00000;
+				&::before { content : '\f518'; }
 			}
 		}
 	}

client/homebrew/pages/basePages/uiPage/uiPage.less

@@ -1,7 +1,7 @@
 .homebrew {
 	.uiPage.sitePage {
 		.content {
-			width            : ~"min(90vw, 1000px)";
+			width            : ~'min(90vw, 1000px)';
 			padding          : 2% 4%;
 			margin-top       : 25px;
 			margin-right     : auto;
@@ -17,19 +17,20 @@
 				border        : 2px solid black;
 				border-radius : 5px;
 				button {
+					width            : 125px;
+					margin-right     : 5px;
+					color            : black;
 					background-color : transparent;
 					border           : 1px solid black;
 					border-radius    : 5px;
-					width            : 125px;
-					color            : black;
-					margin-right     : 5px;
 					&.active {
-						background-color: #0007;
-						color: white;
-						&:before {
-							content: '\f00c';
-    						font-family: 'FONT AWESOME 5 FREE';
-    						margin-right: 5px;
+						color            : white;
+						background-color : #00000077;
+						&::before {
+							margin-right : 5px;
+							font-family  : 'Font Awesome 6 Free';
+							font-weight  : 900;
+							content      : '\f00c';
 						}
 					}
 				}
@@ -59,6 +60,11 @@
 				padding-left : 1.25em;
 				list-style   : square;
 			}
+			.blank {
+				height     : 1em;
+				margin-top : 0;
+				& + * { margin-top : 0; }
+			}
 		}
 	}
 }

client/homebrew/pages/editPage/editPage.jsx

@@ -1,487 +1,415 @@
 /* eslint-disable max-lines */
-require('./editPage.less');
-const React = require('react');
-const _ = require('lodash');
-const createClass = require('create-react-class');
+import './editPage.less';
 
-import request from '../../utils/request-middleware.js';
-const { Meta } = require('vitreum/headtags');
+// Common imports
+import React, { useState, useEffect, useRef } from 'react';
+import request                                from '../../utils/request-middleware.js';
+import Markdown                               from 'markdown.js';
+import _                                      from 'lodash';
 
-const Nav = require('naturalcrit/nav/nav.jsx');
-const Navbar = require('../../navbar/navbar.jsx');
+import { DEFAULT_BREW_LOAD }                  from '../../../../server/brewDefaults.js';
+import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js';
 
-const NewBrew = require('../../navbar/newbrew.navitem.jsx');
-const HelpNavItem = require('../../navbar/help.navitem.jsx');
-const PrintNavItem = require('../../navbar/print.navitem.jsx');
-const ErrorNavItem = require('../../navbar/error-navitem.jsx');
-const Account = require('../../navbar/account.navitem.jsx');
-const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
-const VaultNavItem = require('../../navbar/vault.navitem.jsx');
+import SplitPane    from 'client/components/splitPane/splitPane.jsx';
+import Editor       from '../../editor/editor.jsx';
+import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 
-const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
-const Editor = require('../../editor/editor.jsx');
-const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
+import Nav                       from 'naturalcrit/nav/nav.jsx';
+import Navbar                    from '../../navbar/navbar.jsx';
+import NewBrewItem               from '../../navbar/newbrew.navitem.jsx';
+import AccountNavItem            from '../../navbar/account.navitem.jsx';
+import ErrorNavItem              from '../../navbar/error-navitem.jsx';
+import HelpNavItem               from '../../navbar/help.navitem.jsx';
+import VaultNavItem              from '../../navbar/vault.navitem.jsx';
+import PrintNavItem              from '../../navbar/print.navitem.jsx';
+import { both as RecentNavItem } from '../../navbar/recent.navitem.jsx';
 
-const LockNotification = require('./lockNotification/lockNotification.jsx');
-
-import Markdown from 'naturalcrit/markdown.js';
-
-const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
-const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
+// Page specific imports
+import { Meta }                          from 'vitreum/headtags';
+import { md5 }                           from 'hash-wasm';
+import { gzipSync, strToU8 }             from 'fflate';
+import { makePatches, stringifyPatches } from '@sanity/diff-match-patch';
 
+import ShareNavItem              from '../../navbar/share.navitem.jsx';
+import LockNotification from './lockNotification/lockNotification.jsx';
 import { updateHistory, versionHistoryGarbageCollection } from '../../utils/versionHistory.js';
-
-const googleDriveIcon = require('../../googleDrive.svg');
+import googleDriveIcon from '../../googleDrive.svg';
 
 const SAVE_TIMEOUT = 10000;
+const UNSAVED_WARNING_TIMEOUT = 900000; //Warn user afer 15 minutes of unsaved changes
+const UNSAVED_WARNING_POPUP_TIMEOUT = 4000; //Show the warning for 4 seconds
 
-const EditPage = createClass({
-	displayName     : 'EditPage',
-	getDefaultProps : function() {
-		return {
-			brew : DEFAULT_BREW_LOAD
-		};
-	},
 
-	getInitialState : function() {
-		return {
-			brew                       : this.props.brew,
-			isSaving                   : false,
-			isPending                  : false,
-			alertTrashedGoogleBrew     : this.props.brew.trashed,
-			alertLoginToTransfer       : false,
-			saveGoogle                 : this.props.brew.googleId ? true : false,
-			confirmGoogleTransfer      : false,
-			error                      : null,
-			htmlErrors                 : Markdown.validate(this.props.brew.text),
-			url                        : '',
-			autoSave                   : true,
-			autoSaveWarning            : false,
-			unsavedTime                : new Date(),
-			currentEditorViewPageNum   : 1,
-			currentEditorCursorPageNum : 1,
-			currentBrewRendererPageNum : 1,
-			displayLockMessage         : this.props.brew.lock || false,
-			themeBundle                : {}
-		};
-	},
+const AUTOSAVE_KEY = 'HB_editor_autoSaveOn';
+const BREWKEY  = 'HB_newPage_content';
+const STYLEKEY = 'HB_newPage_style';
+const SNIPKEY  = 'HB_newPage_snippets';
+const METAKEY  = 'HB_newPage_meta';
 
-	editor    : React.createRef(null),
-	savedBrew : null,
+const useLocalStorage = false;
+const neverSaved			= false;
 
-	componentDidMount : function(){
-		this.setState({
-			url : window.location.href
-		});
+const EditPage = (props)=>{
+	props = {
+		brew : DEFAULT_BREW_LOAD,
+		...props
+	};
 
-		this.savedBrew = JSON.parse(JSON.stringify(this.props.brew)); //Deep copy
+	const [currentBrew               , setCurrentBrew               ] = useState(props.brew);
+	const [isSaving                  , setIsSaving                  ] = useState(false);
+	const [lastSavedTime             , setLastSavedTime             ] = useState(new Date());
+  const [saveGoogle                , setSaveGoogle                ] = useState(!!props.brew.googleId);
+	const [error                     , setError                     ] = useState(null);
+	const [HTMLErrors                , setHTMLErrors                ] = useState(Markdown.validate(props.brew.text));
+	const [currentEditorViewPageNum  , setCurrentEditorViewPageNum  ] = useState(1);
+	const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1);
+	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
+	const [themeBundle               , setThemeBundle               ] = useState({});
+	const [unsavedChanges            , setUnsavedChanges            ] = useState(false);
+	const [alertTrashedGoogleBrew    , setAlertTrashedGoogleBrew    ] = useState(props.brew.trashed);
+	const [alertLoginToTransfer      , setAlertLoginToTransfer      ] = useState(false);
+	const [confirmGoogleTransfer     , setConfirmGoogleTransfer     ] = useState(false);
+	const [autoSaveEnabled           , setAutoSaveEnabled           ] = useState(true);
+	const [warnUnsavedChanges        , setWarnUnsavedChanges        ] = useState(true);
 
-		this.setState({ autoSave: JSON.parse(localStorage.getItem('AUTOSAVE_ON')) ?? true }, ()=>{
-			if(this.state.autoSave){
-				this.trySave();
-			} else {
-				this.setState({ autoSaveWarning: true });
+	const editorRef          = useRef(null);
+	const lastSavedBrew      = useRef(_.cloneDeep(props.brew));
+	const saveTimeout        = useRef(null);
+	const warnUnsavedTimeout = useRef(null);
+	const trySaveRef         = useRef(trySave); // CTRL+S listener lives outside React and needs ref to use trySave with latest copy of brew
+	const unsavedChangesRef  = useRef(unsavedChanges); // Similarly, onBeforeUnload lives outside React and needs ref to unsavedChanges
+
+	useEffect(()=>{
+		const autoSavePref = JSON.parse(localStorage.getItem(AUTOSAVE_KEY) ?? true);
+		setAutoSaveEnabled(autoSavePref);
+		setWarnUnsavedChanges(!autoSavePref);
+		setHTMLErrors(Markdown.validate(currentBrew.text));
+		fetchThemeBundle(setError, setThemeBundle, currentBrew.renderer, currentBrew.theme);
+
+		const handleControlKeys = (e)=>{
+			if(!(e.ctrlKey || e.metaKey)) return;
+			if(e.keyCode === 83) trySaveRef.current(true);
+			if(e.keyCode === 80) printCurrentBrew();
+			if([83, 80].includes(e.keyCode)) {
+				e.stopPropagation();
+				e.preventDefault();
 			}
-		});
+		};
 
+		document.addEventListener('keydown', handleControlKeys);
 		window.onbeforeunload = ()=>{
-			if(this.state.isSaving || this.state.isPending){
+			if(unsavedChangesRef.current)
 				return 'You have unsaved changes!';
-			}
 		};
+		return ()=>{
+			document.removeEventListener('keydown', handleControlKeys);
+			window.onBeforeUnload = null;
+		};
+	}, []);
 
-		this.setState((prevState)=>({
-			htmlErrors : Markdown.validate(prevState.brew.text)
-		}));
+	useEffect(()=>{
+		trySaveRef.current = trySave;
+		unsavedChangesRef.current = unsavedChanges;
+	});
 
-		fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
+	useEffect(()=>{
+		const hasChange = !_.isEqual(currentBrew, lastSavedBrew.current);
+		setUnsavedChanges(hasChange);
 
-		document.addEventListener('keydown', this.handleControlKeys);
-	},
-	componentWillUnmount : function() {
-		window.onbeforeunload = function(){};
-		document.removeEventListener('keydown', this.handleControlKeys);
-	},
-	componentDidUpdate : function(){
-		const hasChange = this.hasChanges();
-		if(this.state.isPending != hasChange){
-			this.setState({
-				isPending : hasChange
-			});
+		if(autoSaveEnabled) trySave(false, hasChange);
+	}, [currentBrew]);
+
+	const handleSplitMove = ()=>{
+		editorRef.current?.update();
+	};
+
+	const handleBrewChange = (field)=>(value, subfield)=>{	//'text', 'style', 'snippets', 'metadata'
+		if(subfield == 'renderer' || subfield == 'theme')
+			fetchThemeBundle(setError, setThemeBundle, value.renderer, value.theme);
+
+		//If there are HTML errors, run the validator on every change to give quick feedback
+		if(HTMLErrors.length && (field == 'text' || field == 'snippets'))
+			setHTMLErrors(Markdown.validate(value));
+
+		if(field == 'metadata') setCurrentBrew((prev)=>({ ...prev, ...value }));
+		else                    setCurrentBrew((prev)=>({ ...prev, [field]: value }));
+
+		if(useLocalStorage) {
+			if(field == 'text')     localStorage.setItem(BREWKEY, value);
+			if(field == 'style')    localStorage.setItem(STYLEKEY, value);
+			if(field == 'snippets') localStorage.setItem(SNIPKEY, value);
+			if(field == 'metadata') localStorage.setItem(METAKEY, JSON.stringify({
+				renderer : value.renderer,
+				theme    : value.theme,
+				lang     : value.lang
+			}));
 		}
-	},
+	};
 
-	handleControlKeys : function(e){
-		if(!(e.ctrlKey || e.metaKey)) return;
-		const S_KEY = 83;
-		const P_KEY = 80;
-		if(e.keyCode == S_KEY) this.trySave(true);
-		if(e.keyCode == P_KEY) printCurrentBrew();
-		if(e.keyCode == P_KEY || e.keyCode == S_KEY){
-			e.stopPropagation();
-			e.preventDefault();
-		}
-	},
+	const updateBrew = (newData)=>setCurrentBrew((prevBrew)=>({
+		...prevBrew,
+		style    : newData.style,
+		text     : newData.text,
+		snippets : newData.snippets
+	}));
 
-	handleSplitMove : function(){
-		this.editor.current.update();
-	},
+	const resetWarnUnsavedTimer = ()=>{
+		setTimeout(()=>setWarnUnsavedChanges(false), UNSAVED_WARNING_POPUP_TIMEOUT); // Hide the warning after 4 seconds
+		clearTimeout(warnUnsavedTimeout.current);
+		warnUnsavedTimeout.current = setTimeout(()=>setWarnUnsavedChanges(true), UNSAVED_WARNING_TIMEOUT); // 15 minutes between unsaved work warnings
+	};
 
-	handleEditorViewPageChange : function(pageNumber){
-		this.setState({ currentEditorViewPageNum: pageNumber });
-	},
-
-	handleEditorCursorPageChange : function(pageNumber){
-		this.setState({ currentEditorCursorPageNum: pageNumber });
-	},
-
-	handleBrewRendererPageChange : function(pageNumber){
-		this.setState({ currentBrewRendererPageNum: pageNumber });
-	},
-
-	handleTextChange : function(text){
-		//If there are errors, run the validator on every change to give quick feedback
-		let htmlErrors = this.state.htmlErrors;
-		if(htmlErrors.length) htmlErrors = Markdown.validate(text);
-
-		this.setState((prevState)=>({
-			brew       : { ...prevState.brew, text: text },
-			htmlErrors : htmlErrors,
-		}), ()=>{if(this.state.autoSave) this.trySave();});
-	},
-
-	handleStyleChange : function(style){
-		this.setState((prevState)=>({
-			brew : { ...prevState.brew, style: style }
-		}), ()=>{if(this.state.autoSave) this.trySave();});
-	},
-
-	handleMetaChange : function(metadata, field=undefined){
-		if(field == 'theme' || field == 'renderer')	// Fetch theme bundle only if theme or renderer was changed
-			fetchThemeBundle(this, metadata.renderer, metadata.theme);
-
-		this.setState((prevState)=>({
-			brew : {
-				...prevState.brew,
-				...metadata
-			}
-		}), ()=>{if(this.state.autoSave) this.trySave();});
-	},
-
-	hasChanges : function(){
-		return !_.isEqual(this.state.brew, this.savedBrew);
-	},
-
-	updateBrew : function(newData){
-		this.setState((prevState)=>({
-			brew : {
-				...prevState.brew,
-				style : newData.style,
-				text  : newData.text
-			}
-		}));
-	},
-
-	trySave : function(immediate=false){
-		if(!this.debounceSave) this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT);
-		if(this.hasChanges()){
-			this.debounceSave();
-		} else {
-			this.debounceSave.cancel();
-		}
-		if(immediate) this.debounceSave.flush();
-	},
-
-	handleGoogleClick : function(){
+	const handleGoogleClick = ()=>{
 		if(!global.account?.googleId) {
-			this.setState({
-				alertLoginToTransfer : true
-			});
+			setAlertLoginToTransfer(true);
 			return;
 		}
-		this.setState((prevState)=>({
-			confirmGoogleTransfer : !prevState.confirmGoogleTransfer
-		}));
-		this.setState({
-			error    : null,
-			isSaving : false
-		});
-	},
 
-	closeAlerts : function(event){
-		event.stopPropagation();	//Only handle click once so alert doesn't reopen
-		this.setState({
-			alertTrashedGoogleBrew : false,
-			alertLoginToTransfer   : false,
-			confirmGoogleTransfer  : false
-		});
-	},
+		setConfirmGoogleTransfer((prev)=>!prev);
+		setError(null);
+	};
 
-	toggleGoogleStorage : function(){
-		this.setState((prevState)=>({
-			saveGoogle : !prevState.saveGoogle,
-			isSaving   : false,
-			error      : null
-		}), ()=>this.save());
-	},
+	const closeAlerts = (e)=>{
+		e.stopPropagation(); //Only handle click once so alert doesn't reopen
+		setAlertTrashedGoogleBrew(false);
+		setAlertLoginToTransfer(false);
+		setConfirmGoogleTransfer(false);
+	};
 
-	save : async function(){
-		if(this.debounceSave && this.debounceSave.cancel) this.debounceSave.cancel();
+	const toggleGoogleStorage = ()=>{
+		setSaveGoogle((prev)=>!prev);
+		setError(null);
+		trySave(true);
+	};
 
-		this.setState((prevState)=>({
-			isSaving   : true,
-			error      : null,
-			htmlErrors : Markdown.validate(prevState.brew.text)
-		}));
+	const trySave = (immediate = false, hasChanges = true)=>{
+		clearTimeout(saveTimeout.current);
+		if(isSaving) return;
+		if(!hasChanges && !immediate) return;
+		const newTimeout = immediate ? 0 : SAVE_TIMEOUT;
 
-		await updateHistory(this.state.brew).catch(console.error);
+		saveTimeout.current = setTimeout(async ()=>{
+			setIsSaving(true);
+			setError(null);
+			await save(currentBrew, saveGoogle)
+			.catch((err)=>{
+				setError(err);
+			});
+			setIsSaving(false);
+			setLastSavedTime(new Date());
+			if(!autoSaveEnabled) resetWarnUnsavedTimer();
+		}, newTimeout);
+	};
+
+	const save = async (brew, saveToGoogle)=>{
+		setHTMLErrors(Markdown.validate(brew.text));
+
+		await updateHistory(brew).catch(console.error);
 		await versionHistoryGarbageCollection().catch(console.error);
 
-		const transfer = this.state.saveGoogle == _.isNil(this.state.brew.googleId);
+		//Prepare content to send to server
+		const brewToSave = {
+			...brew,
+			text      : brew.text.normalize('NFC'),
+			pageCount : ((brew.renderer === 'legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1,
+			patches   : stringifyPatches(makePatches(encodeURI(lastSavedBrew.current.text.normalize('NFC')), encodeURI(brew.text.normalize('NFC')))),
+			hash      : await md5(lastSavedBrew.current.text),
+			textBin   : undefined,
+			version   : lastSavedBrew.current.version
+		};
 
-		const brew = this.state.brew;
-		brew.pageCount = ((brew.renderer=='legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1;
+		const compressedBrew = gzipSync(strToU8(JSON.stringify(brewToSave)));
+		const transfer = saveToGoogle === _.isNil(brew.googleId);
+		const params = transfer ? `?${saveToGoogle ? 'saveToGoogle' : 'removeFromGoogle'}=true` : '';
 
-		const params = `${transfer ? `?${this.state.saveGoogle ? 'saveToGoogle' : 'removeFromGoogle'}=true` : ''}`;
 		const res = await request
-			.put(`/api/update/${brew.editId}${params}`)
-			.send(brew)
+			.put(`/api/update/${brewToSave.editId}${params}`)
+			.set('Content-Encoding', 'gzip')
+			.set('Content-Type', 'application/json')
+			.send(compressedBrew)
 			.catch((err)=>{
-				console.log('Error Updating Local Brew');
-				this.setState({ error: err });
+				console.error('Error Updating Local Brew');
+				setError(err);
 			});
 		if(!res) return;
 
-		this.savedBrew = {
-			...this.state.brew,
-			googleId : res.body.googleId ? res.body.googleId : null,
-			editId 	 : res.body.editId,
+		const updatedFields = {
+			googleId : res.body.googleId ?? null,
+			editId   : res.body.editId,
 			shareId  : res.body.shareId,
 			version  : res.body.version
 		};
-		history.replaceState(null, null, `/edit/${this.savedBrew.editId}`);
 
-		this.setState(()=>({
-			brew        : this.savedBrew,
-			isPending   : false,
-			isSaving    : false,
-			unsavedTime : new Date()
+		lastSavedBrew.current = {
+			...brew,
+			...updatedFields
+		};
+
+		setCurrentBrew((prevBrew)=>({
+			...prevBrew,
+			...updatedFields
 		}));
-	},
 
-	renderGoogleDriveIcon : function(){
-		return <Nav.item className='googleDriveStorage' onClick={this.handleGoogleClick}>
-			<img src={googleDriveIcon} className={this.state.saveGoogle ? '' : 'inactive'} alt='Google Drive icon'/>
+		history.replaceState(null, null, `/edit/${res.body.editId}`);
+	};
 
-			{this.state.confirmGoogleTransfer &&
-				<div className='errorContainer' onClick={this.closeAlerts}>
-					{ this.state.saveGoogle
-						?	`Would you like to transfer this brew from your Google Drive storage back to the Homebrewery?`
-						: `Would you like to transfer this brew from the Homebrewery to your personal Google Drive storage?`
-					}
+	const renderGoogleDriveIcon = ()=>(
+		<Nav.item className='googleDriveStorage' onClick={handleGoogleClick}>
+			<img src={googleDriveIcon} className={saveGoogle ? '' : 'inactive'} alt='Google Drive icon' />
+
+			{confirmGoogleTransfer && (
+				<div className='errorContainer' onClick={closeAlerts}>
+					{saveGoogle
+						? 'Would you like to transfer this brew from your Google Drive storage back to the Homebrewery?'
+						: 'Would you like to transfer this brew from the Homebrewery to your personal Google Drive storage?'}
 					<br />
-					<div className='confirm' onClick={this.toggleGoogleStorage}>
-						Yes
-					</div>
-					<div className='deny'>
-						No
-					</div>
+					<div className='confirm' onClick={toggleGoogleStorage}> Yes </div>
+					<div className='deny'>                                  No  </div>
 				</div>
-			}
+			)}
 
-			{this.state.alertLoginToTransfer &&
-				<div className='errorContainer' onClick={this.closeAlerts}>
-					You must be signed in to a Google account to transfer
-					between the homebrewery and Google Drive!
-					<a target='_blank' rel='noopener noreferrer'
-						href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
-						<div className='confirm'>
-							Sign In
-						</div>
+			{alertLoginToTransfer && (
+				<div className='errorContainer' onClick={closeAlerts}>
+					You must be signed in to a Google account to transfer between the homebrewery and Google Drive!
+					<a target='_blank' rel='noopener noreferrer' href={`https://www.naturalcrit.com/login?redirect=${window.location.href}`}>
+						<div className='confirm'> Sign In </div>
 					</a>
-					<div className='deny'>
-						Not Now
-					</div>
+					<div className='deny'>      Not Now </div>
 				</div>
-			}
+			)}
 
-			{this.state.alertTrashedGoogleBrew &&
-				<div className='errorContainer' onClick={this.closeAlerts}>
-				This brew is currently in your Trash folder on Google Drive!<br />If you want to keep it, make sure to move it before it is deleted permanently!<br />
-					<div className='confirm'>
-						OK
-					</div>
+			{alertTrashedGoogleBrew && (
+				<div className='errorContainer' onClick={closeAlerts}>
+					This brew is currently in your Trash folder on Google Drive!<br />
+					If you want to keep it, make sure to move it before it is deleted permanently!<br />
+					<div className='confirm'> OK </div>
 				</div>
-			}
-		</Nav.item>;
-	},
-
-	renderSaveButton : function(){
+			)}
+		</Nav.item>
+	);
 
+	const renderSaveButton = ()=>{
 		// #1 - Currently saving, show SAVING
-		if(this.state.isSaving){
+		if(isSaving)
 			return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>;
-		}
 
 		// #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING
-		if(this.state.isPending && this.state.autoSaveWarning){
-			this.setAutosaveWarning();
-			const elapsedTime = Math.round((new Date() - this.state.unsavedTime) / 1000 / 60);
-			const text = elapsedTime == 0 ? 'Autosave is OFF.' : `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`;
+		if(unsavedChanges && warnUnsavedChanges) {
+			resetWarnUnsavedTimer();
+			const elapsedTime = Math.round((new Date() - lastSavedTime) / 1000 / 60);
+			const text = elapsedTime === 0
+				? 'Autosave is OFF.'
+				: `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`;
 
 			return <Nav.item className='save error' icon='fas fa-exclamation-circle'>
-			Reminder...
-				<div className='errorContainer'>
-					{text}
-				</div>
+							Reminder...
+				<div className='errorContainer'>{text}</div>
 			</Nav.item>;
 		}
 
 		// #3 - Unsaved changes exist, click to save, show SAVE NOW
-		// Use trySave(true) instead of save() to use debounced save function
-		if(this.state.isPending){
-			return <Nav.item className='save' onClick={()=>this.trySave(true)} color='blue' icon='fas fa-save'>Save Now</Nav.item>;
-		}
+		if(unsavedChanges)
+			return <Nav.item className='save' onClick={()=>trySave(true)} color='blue' icon='fas fa-save'>save now</Nav.item>;
+
 		// #4 - No unsaved changes, autosave is ON, show AUTO-SAVED
-		if(this.state.autoSave){
-			return <Nav.item className='save saved'>auto-saved.</Nav.item>;
-		}
+		if(autoSaveEnabled)
+			return <Nav.item className='save saved'>auto-saved</Nav.item>;
+
+		// #5 - No unsaved changes, and has never been saved, hide the button
+		if(neverSaved)
+			return <Nav.item className='save neverSaved'>save now</Nav.item>;
+
 		// DEFAULT - No unsaved changes, show SAVED
-		return <Nav.item className='save saved'>saved.</Nav.item>;
-	},
+		return <Nav.item className='save saved'>saved</Nav.item>;
+	};
 
-	handleAutoSave : function(){
-		if(this.warningTimer) clearTimeout(this.warningTimer);
-		this.setState((prevState)=>({
-			autoSave        : !prevState.autoSave,
-			autoSaveWarning : prevState.autoSave
-		}), ()=>{
-			localStorage.setItem('AUTOSAVE_ON', JSON.stringify(this.state.autoSave));
-		});
-	},
+	const toggleAutoSave = ()=>{
+		clearTimeout(warnUnsavedTimeout.current);
+		clearTimeout(saveTimeout.current);
+		localStorage.setItem(AUTOSAVE_KEY, JSON.stringify(!autoSaveEnabled));
+		setAutoSaveEnabled(!autoSaveEnabled);
+		setWarnUnsavedChanges(autoSaveEnabled);
+	};
 
-	setAutosaveWarning : function(){
-		setTimeout(()=>this.setState({ autoSaveWarning: false }), 4000);                           // 4 seconds to display
-		this.warningTimer = setTimeout(()=>{this.setState({ autoSaveWarning: true });}, 900000);   // 15 minutes between warnings
-		this.warningTimer;
-	},
+	const renderAutoSaveButton = ()=>(
+		<Nav.item onClick={toggleAutoSave}>
+			Autosave <i className={autoSaveEnabled ? 'fas fa-power-off active' : 'fas fa-power-off'}></i>
+		</Nav.item>
+	);
 
-	errorReported : function(error) {
-		this.setState({
-			error
-		});
-	},
-
-	renderAutoSaveButton : function(){
-		return <Nav.item onClick={this.handleAutoSave}>
-			Autosave <i className={this.state.autoSave ? 'fas fa-power-off active' : 'fas fa-power-off'}></i>
-		</Nav.item>;
-	},
-
-	processShareId : function() {
-		return this.state.brew.googleId && !this.state.brew.stubbed ?
-					 this.state.brew.googleId + this.state.brew.shareId :
-					 this.state.brew.shareId;
-	},
-
-	getRedditLink : function(){
-
-		const shareLink = this.processShareId();
-		const systems = this.props.brew.systems.length > 0 ? ` [${this.props.brew.systems.join(' - ')}]` : '';
-		const title = `${this.props.brew.title} ${systems}`;
-		const text = `Hey guys! I've been working on this homebrew. I'd love your feedback. Check it out.
-
-**[Homebrewery Link](${global.config.baseUrl}/share/${shareLink})**`;
-
-		return `https://www.reddit.com/r/UnearthedArcana/submit?title=${encodeURIComponent(title.toWellFormed())}&text=${encodeURIComponent(text)}`;
-	},
-
-	renderNavbar : function(){
-		const shareLink = this.processShareId();
+	const clearError = ()=>{
+		setError(null);
+		setIsSaving(false);
+	};
 
+	const renderNavbar = ()=>{
 		return <Navbar>
 			<Nav.section>
-				<Nav.item className='brewTitle'>{this.state.brew.title}</Nav.item>
+				<Nav.item className='brewTitle'>{currentBrew.title}</Nav.item>
 			</Nav.section>
 
 			<Nav.section>
-				{this.renderGoogleDriveIcon()}
-				{this.state.error ?
-					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
-					<Nav.dropdown className='save-menu'>
-						{this.renderSaveButton()}
-						{this.renderAutoSaveButton()}
-					</Nav.dropdown>
-				}
-				<NewBrew />
-				<HelpNavItem/>
-				<Nav.dropdown>
-					<Nav.item color='teal' icon='fas fa-share-alt'>
-						share
-					</Nav.item>
-					<Nav.item color='blue' href={`/share/${shareLink}`}>
-						view
-					</Nav.item>
-					<Nav.item color='blue' onClick={()=>{navigator.clipboard.writeText(`${global.config.baseUrl}/share/${shareLink}`);}}>
-						copy url
-					</Nav.item>
-					<Nav.item color='blue' href={this.getRedditLink()} newTab={true} rel='noopener noreferrer'>
-						post to reddit
-					</Nav.item>
-				</Nav.dropdown>
+				{renderGoogleDriveIcon()}
+				{error
+					? <ErrorNavItem error={error} clearError={clearError} />
+					: <Nav.dropdown className='save-menu'>
+						{renderSaveButton()}
+						{renderAutoSaveButton()}
+					</Nav.dropdown>}
+				<NewBrewItem />
 				<PrintNavItem />
+				<HelpNavItem />
 				<VaultNavItem />
-				<RecentNavItem brew={this.state.brew} storageKey='edit' />
-				<Account />
+				<ShareNavItem brew={currentBrew} />
+				<RecentNavItem brew={currentBrew} storageKey='edit' />
+				<AccountNavItem/>
 			</Nav.section>
-
 		</Navbar>;
-	},
+	};
 
-	render : function(){
-		return <div className='editPage sitePage'>
+	return (
+		<div className='editPage sitePage'>
 			<Meta name='robots' content='noindex, nofollow' />
-			{this.renderNavbar()}
 
-			{this.props.brew.lock && <LockNotification shareId={this.props.brew.shareId} message={this.props.brew.lock.editMessage} />}
+			{renderNavbar()}
+
+			{currentBrew.lock && <LockNotification shareId={currentBrew.shareId} message={currentBrew.lock.editMessage} reviewRequested={currentBrew.lock.reviewRequested}/>}
+
 			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove}>
+				<SplitPane onDragFinish={handleSplitMove}>
 					<Editor
-						ref={this.editor}
-						brew={this.state.brew}
-						onTextChange={this.handleTextChange}
-						onStyleChange={this.handleStyleChange}
-						onMetaChange={this.handleMetaChange}
-						reportError={this.errorReported}
-						renderer={this.state.brew.renderer}
-						userThemes={this.props.userThemes}
-						themeBundle={this.state.themeBundle}
-						snippetBundle={this.state.themeBundle.snippets}
-						updateBrew={this.updateBrew}
-						onCursorPageChange={this.handleEditorCursorPageChange}
-						onViewPageChange={this.handleEditorViewPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+						ref={editorRef}
+						brew={currentBrew}
+						onBrewChange={handleBrewChange}
+						reportError={setError}
+						renderer={currentBrew.renderer}
+						userThemes={props.userThemes}
+						themeBundle={themeBundle}
+						updateBrew={updateBrew}
+						onCursorPageChange={setCurrentEditorCursorPageNum}
+						onViewPageChange={setCurrentEditorViewPageNum}
+						currentEditorViewPageNum={currentEditorViewPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
+						currentBrewRendererPageNum={currentBrewRendererPageNum}
 					/>
 					<BrewRenderer
-						text={this.state.brew.text}
-						style={this.state.brew.style}
-						renderer={this.state.brew.renderer}
-						theme={this.state.brew.theme}
-						themeBundle={this.state.themeBundle}
-						errors={this.state.htmlErrors}
-						lang={this.state.brew.lang}
-						onPageChange={this.handleBrewRendererPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+						text={currentBrew.text}
+						style={currentBrew.style}
+						renderer={currentBrew.renderer}
+						theme={currentBrew.theme}
+						themeBundle={themeBundle}
+						errors={HTMLErrors}
+						lang={currentBrew.lang}
+						onPageChange={setCurrentBrewRendererPageNum}
+						currentEditorViewPageNum={currentEditorViewPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
+						currentBrewRendererPageNum={currentBrewRendererPageNum}
 						allowPrint={true}
 					/>
 				</SplitPane>
 			</div>
-		</div>;
-	}
-});
+		</div>
+	);
+};
 
 module.exports = EditPage;

client/homebrew/pages/editPage/editPage.less

@@ -1,29 +1,25 @@
 @keyframes glideDown {
-	0%   {transform : translate(-50% + 3px, 0px);
-				opacity   : 0;}
-	100% {transform : translate(-50% + 3px, 10px);
-				opacity   : 1;}
+	0% {
+		opacity   : 0;transform : translate(-50% + 3px, 0px);}
+	100% {
+		opacity   : 1;transform : translate(-50% + 3px, 10px);}
 }
-.editPage{
-	.navItem.save{
+.editPage {
+	.navItem.save {
+		position   : relative;
 		width      : 106px;
 		text-align : center;
-		position   : relative;
-		&.saved{
+		&.saved {
+			color  : #666666;
 			cursor : initial;
-			color  : #666;
 		}
 	}
-	.googleDriveStorage {
-		position : relative;
-	}
-	.googleDriveStorage img{
-		height	: 18px;
+	.googleDriveStorage { position : relative; }
+	.googleDriveStorage img {
+		height  : 18px;
 		padding : 0px;
 		margin  : -5px;
 
-		&.inactive {
-			filter: grayscale(1);
-		}
+		&.inactive { filter : grayscale(1); }
 	}
 }

client/homebrew/pages/editPage/lockNotification/lockNotification.jsx

@@ -1,17 +1,30 @@
-require('./lockNotification.less');
-const React = require('react');
+import './lockNotification.less';
+import * as React from 'react';
+import request from '../../../utils/request-middleware.js';
 import Dialog from '../../../../components/dialog.jsx';
 
 function LockNotification(props) {
 	props = {
-		shareId     : 0,
-		disableLock : ()=>{},
-		message     : '',
+		shareId         : 0,
+		disableLock     : ()=>{},
+		lock            : {},
+		message         : 'Unable to retrieve Lock Message',
+		reviewRequested : false,
 		...props
 	};
 
-	const removeLock = ()=>{
-		alert(`Not yet implemented - ID ${props.shareId}`);
+	const [reviewState, setReviewState] = React.useState(props.reviewRequested);
+
+	const removeLock = async ()=>{
+		await request.put(`/api/lock/review/request/${props.shareId}`)
+			.then(()=>{
+				setReviewState(true);
+			});
+	};
+
+	const renderReviewButton = function(){
+		if(reviewState){ return <button className='inactive'>REVIEW REQUESTED</button>; };
+		return <button onClick={removeLock}>REQUEST LOCK REMOVAL</button>;
 	};
 
 	return <Dialog className='lockNotification' blocking closeText='CONTINUE TO EDITOR' >
@@ -19,11 +32,11 @@ function LockNotification(props) {
 		<p>This brew been locked by the Administrators. It will not be accessible by any method other than the Editor until the lock is removed.</p>
 		<hr />
 		<h3>LOCK REASON</h3>
-		<p>{props.message || 'Unable to retrieve Lock Message'}</p>
+		<p>{props.message}</p>
 		<hr />
 		<p>Once you have resolved this issue, click REQUEST LOCK REMOVAL to notify the Administrators for review.</p>
 		<p>Click CONTINUE TO EDITOR to temporarily hide this notification; it will reappear the next time the page is reloaded.</p>
-		<button onClick={removeLock}>REQUEST LOCK REMOVAL</button>
+		{renderReviewButton()}
 	</Dialog>;
 };
 

client/homebrew/pages/editPage/lockNotification/lockNotification.less

@@ -11,10 +11,12 @@
 	&::backdrop { background-color : #000000AA; }
 
 	button {
+		padding          : 2px 15px;
 		margin           : 10px;
 		color            : white;
 		background-color : #333333;
 
+		&.inactive,
 		&:hover { background-color : #777777; }
 	}
 

client/homebrew/pages/errorPage/errorPage.jsx

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

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

@@ -167,7 +167,7 @@ const errorIndex = (props)=>{
 		**Requested access:** ${props.brew.accessType}
 
 		**Brew ID:**  ${props.brew.brewId}`,
-		
+
 		// Theme Not Valid
 		'10' : dedent`
 		## The selected theme is not tagged as a theme.
@@ -176,6 +176,32 @@ const errorIndex = (props)=>{
 		
 		If the selected brew is your document, you may designate it as a theme by adding the \`theme:meta\` tag.`,
 
+		// ID validation error
+		'11' : dedent`
+		## No Homebrewery document could be found.
+		
+		The server could not locate the Homebrewery document. The Brew ID failed the validation check.
+		
+		:
+
+		**Brew ID:**  ${props.brew.brewId}`,
+
+		// Google ID validation error
+		'12' : dedent`
+		## No Google document could be found.
+		
+		The server could not locate the Google document. The Google ID failed the validation check.
+		
+		:
+
+		**Brew ID:**  ${props.brew.brewId}`,
+
+		// Database Connection Lost
+		'13' : dedent`
+		## Database connection has been lost.
+		
+		The server could not communicate with the database.`,
+
 		//account page when account is not defined
 		'50' : dedent`
 		## You are not signed in
@@ -194,13 +220,47 @@ const errorIndex = (props)=>{
 
 		**Brew ID:**  ${props.brew.brewId}
 		
-		**Brew Title:** ${escape(props.brew.brewTitle)}`,
+		**Brew Title:** ${escape(props.brew.brewTitle)}
+		
+		**Brew Authors:**  ${props.brew.authors?.map((author)=>{return `[${author}](/user/${author})`;}).join(', ') || 'Unable to list authors'}`,
 
 		// ####### Admin page error #######
 		'52' : dedent`
 		## Access Denied
 		You need to provide correct administrator credentials to access this page.`,
 
+		// ####### Lock Errors
+
+		'60' : dedent`Lock Error: General`,
+
+		'61' : dedent`Lock Get Error: Unable to get lock count`,
+
+		'62' : dedent`Lock Set Error: Cannot lock`,
+
+		'63' : dedent`Lock Set Error: Brew not found`,
+
+		'64' : dedent`Lock Set Error: Already locked`,
+
+		'65' : dedent`Lock Remove Error: Cannot unlock`,
+
+		'66' : dedent`Lock Remove Error: Brew not found`,
+
+		'67' : dedent`Lock Remove Error: Not locked`,
+
+		'68' : dedent`Lock Get Review Error: Cannot get review requests`,
+
+		'69' : dedent`Lock Set Review Error: Cannot set review request`,
+
+		'70' : dedent`Lock Set Review Error: Brew not found`,
+
+		'71' : dedent`Lock Set Review Error: Review already requested`,
+
+		'72' : dedent`Lock Remove Review Error: Cannot clear review request`,
+
+		'73' : dedent`Lock Remove Review Error: Brew not found`,
+
+		// ####### Other Errors
+
 		'90' : dedent` An unexpected error occurred while looking for these brews.  
             Try again in a few minutes.`,
 

client/homebrew/pages/homePage/homePage.jsx

@@ -1,141 +1,224 @@
-require('./homePage.less');
-const React = require('react');
-const createClass = require('create-react-class');
-const cx = require('classnames');
-import request from '../../utils/request-middleware.js';
-const { Meta } = require('vitreum/headtags');
+/* eslint-disable max-lines */
+import './homePage.less';
 
-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');
+// Common imports
+import React, { useState, useEffect, useRef } from 'react';
+import request                                from '../../utils/request-middleware.js';
+import Markdown                               from 'markdown.js';
+import _                                      from 'lodash';
 
-const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
-const Editor = require('../../editor/editor.jsx');
-const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
+import { DEFAULT_BREW }                       from '../../../../server/brewDefaults.js';
+import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js';
 
-const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
+import SplitPane    from 'client/components/splitPane/splitPane.jsx';
+import Editor       from '../../editor/editor.jsx';
+import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 
-const HomePage = createClass({
-	displayName     : 'HomePage',
-	getDefaultProps : function() {
-		return {
-			brew : DEFAULT_BREW,
-			ver  : '0.0.0'
+import Nav                       from 'naturalcrit/nav/nav.jsx';
+import Navbar                    from '../../navbar/navbar.jsx';
+import NewBrewItem               from '../../navbar/newbrew.navitem.jsx';
+import AccountNavItem            from '../../navbar/account.navitem.jsx';
+import ErrorNavItem              from '../../navbar/error-navitem.jsx';
+import HelpNavItem               from '../../navbar/help.navitem.jsx';
+import VaultNavItem              from '../../navbar/vault.navitem.jsx';
+import PrintNavItem              from '../../navbar/print.navitem.jsx';
+import { both as RecentNavItem } from '../../navbar/recent.navitem.jsx';
+
+// Page specific imports
+import { Meta }                               from 'vitreum/headtags';
+
+const BREWKEY  = 'homebrewery-new';
+const STYLEKEY = 'homebrewery-new-style';
+const SNIPKEY  = 'homebrewery-new-snippets';
+const METAKEY  = 'homebrewery-new-meta';
+
+const useLocalStorage = false;
+const neverSaved      = true;
+
+const HomePage =(props)=>{
+	props = {
+		brew : DEFAULT_BREW,
+		ver  : '0.0.0',
+		...props
+	};
+
+	const [currentBrew               , setCurrentBrew]                = useState(props.brew);
+	const [error                     , setError]                      = useState(undefined);
+	const [HTMLErrors                , setHTMLErrors]                 = useState(Markdown.validate(props.brew.text));
+	const [currentEditorViewPageNum  , setCurrentEditorViewPageNum]   = useState(1);
+	const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1);
+	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
+	const [themeBundle               , setThemeBundle]                = useState({});
+	const [unsavedChanges            , setUnsavedChanges]             = useState(false);
+	const [isSaving                  , setIsSaving]                   = useState(false);
+	const [autoSaveEnabled           , setAutoSaveEnable]             = useState(false);
+
+	const editorRef     = useRef(null);
+	const lastSavedBrew = useRef(_.cloneDeep(props.brew));
+
+	useEffect(()=>{
+		fetchThemeBundle(setError, setThemeBundle, currentBrew.renderer, currentBrew.theme);
+
+		const handleControlKeys = (e)=>{
+			if(!(e.ctrlKey || e.metaKey)) return;
+			if(e.keyCode === 83) trySaveRef.current(true);
+			if(e.keyCode === 80) printCurrentBrew();
+			if([83, 80].includes(e.keyCode)) {
+				e.stopPropagation();
+				e.preventDefault();
+			}
 		};
-	},
-	getInitialState : function() {
-		return {
-			brew                       : this.props.brew,
-			welcomeText                : this.props.brew.text,
-			error                      : undefined,
-			currentEditorViewPageNum   : 1,
-			currentEditorCursorPageNum : 1,
-			currentBrewRendererPageNum : 1,
-			themeBundle                : {}
+
+		document.addEventListener('keydown', handleControlKeys);
+
+		return ()=>{
+			document.removeEventListener('keydown', handleControlKeys);
 		};
-	},
+	}, []);
 
-	editor : React.createRef(null),
-
-	componentDidMount : function() {
-		fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
-	},
-
-	handleSave : function(){
+	const save = ()=>{
 		request.post('/api')
-			.send(this.state.brew)
+			.send(currentBrew)
 			.end((err, res)=>{
 				if(err) {
-					this.setState({ error: err });
+					setError(err);
 					return;
 				}
-				const brew = res.body;
-				window.location = `/edit/${brew.editId}`;
+				const saved = res.body;
+				window.location = `/edit/${saved.editId}`;
 			});
-	},
-	handleSplitMove : function(){
-		this.editor.current.update();
-	},
+	};
 
-	handleEditorViewPageChange : function(pageNumber){
-		this.setState({ currentEditorViewPageNum: pageNumber });
-	},
+	useEffect(()=>{
+		const hasChange = !_.isEqual(currentBrew, lastSavedBrew.current);
+		setUnsavedChanges(hasChange);
 
-	handleEditorCursorPageChange : function(pageNumber){
-		this.setState({ currentEditorCursorPageNum: pageNumber });
-	},
+		if(autoSaveEnabled) trySave(false, hasChange);
+	}, [currentBrew]);
 
-	handleBrewRendererPageChange : function(pageNumber){
-		this.setState({ currentBrewRendererPageNum: pageNumber });
-	},
+	const handleSplitMove = ()=>{
+		editorRef.current.update();
+	};
 
-	handleTextChange : function(text){
-		this.setState((prevState)=>({
-			brew : { ...prevState.brew, text: text },
-		}));
-	},
-	renderNavbar : function(){
-		return <Navbar ver={this.props.ver}>
+	const handleBrewChange = (field)=>(value, subfield)=>{	//'text', 'style', 'snippets', 'metadata'
+		if(subfield == 'renderer' || subfield == 'theme')
+			fetchThemeBundle(setError, setThemeBundle, value.renderer, value.theme);
+
+		//If there are HTML errors, run the validator on every change to give quick feedback
+		if(HTMLErrors.length && (field == 'text' || field == 'snippets'))
+			setHTMLErrors(Markdown.validate(value));
+
+		if(field == 'metadata') setCurrentBrew((prev)=>({ ...prev, ...value }));
+		else                    setCurrentBrew((prev)=>({ ...prev, [field]: value }));
+
+		if(useLocalStorage) {
+			if(field == 'text')     localStorage.setItem(BREWKEY, value);
+			if(field == 'style')    localStorage.setItem(STYLEKEY, value);
+			if(field == 'snippets') localStorage.setItem(SNIPKEY, value);
+			if(field == 'metadata') localStorage.setItem(METAKEY, JSON.stringify({
+				renderer : value.renderer,
+				theme    : value.theme,
+				lang     : value.lang
+			}));
+		}
+	};
+
+	const renderSaveButton = ()=>{
+		// #1 - Currently saving, show SAVING
+		if(isSaving)
+			return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>;
+
+		// #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING
+		// if(unsavedChanges && warnUnsavedChanges) {
+		// 	resetWarnUnsavedTimer();
+		// 	const elapsedTime = Math.round((new Date() - lastSavedTime) / 1000 / 60);
+		// 	const text = elapsedTime === 0
+		// 		? 'Autosave is OFF.'
+		// 		: `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`;
+
+		// 	return <Nav.item className='save error' icon='fas fa-exclamation-circle'>
+		// 					Reminder...
+		// 		<div className='errorContainer'>{text}</div>
+		// 	</Nav.item>;
+		// }
+
+		// #3 - Unsaved changes exist, click to save, show SAVE NOW
+		if(unsavedChanges)
+			return <Nav.item className='save' onClick={save} color='blue' icon='fas fa-save'>save now</Nav.item>;
+
+		// #4 - No unsaved changes, autosave is ON, show AUTO-SAVED
+		if(autoSaveEnabled)
+			return <Nav.item className='save saved'>auto-saved</Nav.item>;
+
+		// #5 - No unsaved changes, and has never been saved, hide the button
+		if(neverSaved)
+			return <Nav.item className='save neverSaved'>save now</Nav.item>;
+
+		// DEFAULT - No unsaved changes, show SAVED
+		return <Nav.item className='save saved'>saved</Nav.item>;
+	};
+
+	const clearError = ()=>{
+		setError(null);
+		setIsSaving(false);
+	};
+
+	const renderNavbar = ()=>{
+		return <Navbar ver={props.ver}>
 			<Nav.section>
-				{this.state.error ?
-					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
-					null
-				}
+				{error
+					? <ErrorNavItem error={error} clearError={clearError} />
+					: renderSaveButton()}
 				<NewBrewItem />
+				<PrintNavItem />
 				<HelpNavItem />
 				<VaultNavItem />
 				<RecentNavItem />
 				<AccountNavItem />
 			</Nav.section>
 		</Navbar>;
-	},
+	};
 
-	render : function(){
-		return <div className='homePage sitePage'>
+	return (
+		<div className='homePage sitePage'>
 			<Meta name='google-site-verification' content='NwnAQSSJZzAT7N-p5MY6ydQ7Njm67dtbu73ZSyE5Fy4' />
-			{this.renderNavbar()}
-			<div className="content">
-			<SplitPane onDragFinish={this.handleSplitMove}>
-				<Editor
-					ref={this.editor}
-					brew={this.state.brew}
-					onTextChange={this.handleTextChange}
-					renderer={this.state.brew.renderer}
-					showEditButtons={false}
-					snippetBundle={this.state.themeBundle.snippets}
-					onCursorPageChange={this.handleEditorCursorPageChange}
-					onViewPageChange={this.handleEditorViewPageChange}
-					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-				/>
-				<BrewRenderer
-					text={this.state.brew.text}
-					style={this.state.brew.style}
-					renderer={this.state.brew.renderer}
-					onPageChange={this.handleBrewRendererPageChange}
-					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-					themeBundle={this.state.themeBundle}
-				/>
-			</SplitPane>
+			{renderNavbar()}
+			<div className='content'>
+				<SplitPane onDragFinish={handleSplitMove}>
+					<Editor
+						ref={editorRef}
+						brew={currentBrew}
+						onBrewChange={handleBrewChange}
+						renderer={currentBrew.renderer}
+						showEditButtons={false}
+						themeBundle={themeBundle}
+						onCursorPageChange={setCurrentEditorCursorPageNum}
+						onViewPageChange={setCurrentEditorViewPageNum}
+						currentEditorViewPageNum={currentEditorViewPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
+						currentBrewRendererPageNum={currentBrewRendererPageNum}
+					/>
+					<BrewRenderer
+						text={currentBrew.text}
+						style={currentBrew.style}
+						renderer={currentBrew.renderer}
+						onPageChange={setCurrentBrewRendererPageNum}
+						currentEditorViewPageNum={currentEditorViewPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
+						currentBrewRendererPageNum={currentBrewRendererPageNum}
+						themeBundle={themeBundle}
+					/>
+				</SplitPane>
 			</div>
-			<div className={cx('floatingSaveButton', { show: this.state.welcomeText != this.state.brew.text })} onClick={this.handleSave}>
+			<div className={`floatingSaveButton${unsavedChanges ? ' show' : ''}`} onClick={save}>
 				Save current <i className='fas fa-save' />
 			</div>
 
 			<a href='/new' className='floatingNewButton'>
 				Create your own <i className='fas fa-magic' />
 			</a>
-		</div>;
-	}
-});
+		</div>
+	);
+};
 
 module.exports = HomePage;

client/homebrew/pages/homePage/homePage.less

@@ -1,50 +1,48 @@
-.homePage{
+.homePage {
 	position : relative;
-	a.floatingNewButton{
+	a.floatingNewButton {
 		.animate(background-color);
 		position         : absolute;
-		display          : block;
 		right            : 70px;
 		bottom           : 50px;
-		z-index          : 100;
 		z-index          : 5001;
+		display          : block;
 		padding          : 1em;
-		background-color : @orange;
 		font-size        : 1.5em;
 		color            : white;
 		text-decoration  : none;
+		background-color : @orange;
 		box-shadow       : 3px 3px 15px black;
-		&:hover{
-			background-color : darken(@orange, 20%);
-		}
+		&:hover { background-color : darken(@orange, 20%); }
 	}
-	.floatingSaveButton{
+	.floatingSaveButton {
 		.animateAll();
 		position         : absolute;
-		display          : block;
 		right            : 200px;
 		bottom           : 70px;
-		z-index          : 100;
 		z-index          : 5000;
+		display          : block;
 		padding          : 0.8em;
-		cursor           : pointer;
-		background-color : @blue;
 		font-size        : 0.8em;
 		color            : white;
 		text-decoration  : none;
+		cursor           : pointer;
+		background-color : @blue;
 		box-shadow       : 3px 3px 15px black;
-		&:hover{
-			background-color : darken(@blue, 20%);
-		}
-		&.show{
-			right : 350px;
-		}
+		&:hover { background-color : darken(@blue, 20%); }
+		&.show { right : 350px; }
 	}
 
-	.navItem.save{
-		background-color: @orange;
-		&:hover{
-			background-color: @green;
+	.navItem.save {
+		background-color : @orange;
+		transition:all 0.2s;
+		&:hover { background-color : @green; }
+		
+		&.neverSaved {
+			translate:-100%;
+			opacity: 0;
+			background-color :#333;
+			cursor:auto;
 		}
 	}
 }

client/homebrew/pages/newPage/newPage.jsx

@@ -1,264 +1,270 @@
-/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
-require('./newPage.less');
-const React = require('react');
-const createClass = require('create-react-class');
-import request from '../../utils/request-middleware.js';
+/* eslint-disable max-lines */
+import './newPage.less';
 
-import Markdown from 'naturalcrit/markdown.js';
+// Common imports
+import React, { useState, useEffect, useRef } from 'react';
+import request                                from '../../utils/request-middleware.js';
+import Markdown                               from 'markdown.js';
+import _                                      from 'lodash';
 
-const Nav = require('naturalcrit/nav/nav.jsx');
-const PrintNavItem = require('../../navbar/print.navitem.jsx');
-const Navbar = require('../../navbar/navbar.jsx');
-const AccountNavItem = require('../../navbar/account.navitem.jsx');
-const ErrorNavItem = require('../../navbar/error-navitem.jsx');
-const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
-const HelpNavItem = require('../../navbar/help.navitem.jsx');
+import { DEFAULT_BREW }                       from '../../../../server/brewDefaults.js';
+import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js';
 
-const SplitPane = require('naturalcrit/splitPane/splitPane.jsx');
-const Editor = require('../../editor/editor.jsx');
-const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
+import SplitPane    from 'client/components/splitPane/splitPane.jsx';
+import Editor       from '../../editor/editor.jsx';
+import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 
-const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
-const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
+import Nav                       from 'naturalcrit/nav/nav.jsx';
+import Navbar                    from '../../navbar/navbar.jsx';
+import NewBrewItem               from '../../navbar/newbrew.navitem.jsx';
+import AccountNavItem            from '../../navbar/account.navitem.jsx';
+import ErrorNavItem              from '../../navbar/error-navitem.jsx';
+import HelpNavItem               from '../../navbar/help.navitem.jsx';
+import VaultNavItem              from '../../navbar/vault.navitem.jsx';
+import PrintNavItem              from '../../navbar/print.navitem.jsx';
+import { both as RecentNavItem } from '../../navbar/recent.navitem.jsx';
 
-const BREWKEY  = 'homebrewery-new';
-const STYLEKEY = 'homebrewery-new-style';
-const METAKEY  = 'homebrewery-new-meta';
-let SAVEKEY;
+// Page specific imports
+import { Meta }                  from 'vitreum/headtags';
 
+const BREWKEY  = 'HB_newPage_content';
+const STYLEKEY = 'HB_newPage_style';
+const METAKEY  = 'HB_newPage_metadata';
+const SNIPKEY  = 'HB_newPage_snippets';
+const SAVEKEYPREFIX  = 'HB_editor_defaultSave_';
 
-const NewPage = createClass({
-	displayName     : 'NewPage',
-	getDefaultProps : function() {
-		return {
-			brew : DEFAULT_BREW
+const useLocalStorage = true;
+const neverSaved      = true;
+
+const NewPage = (props)=>{
+	props = {
+		brew : DEFAULT_BREW,
+		...props
+	};
+
+	const [currentBrew               , setCurrentBrew               ] = useState(props.brew);
+	const [isSaving                  , setIsSaving                  ] = useState(false);
+	const [saveGoogle                , setSaveGoogle                ] = useState(global.account?.googleId ? true : false);
+	const [error                     , setError                     ] = useState(null);
+	const [HTMLErrors                , setHTMLErrors                ] = useState(Markdown.validate(props.brew.text));
+	const [currentEditorViewPageNum  , setCurrentEditorViewPageNum  ] = useState(1);
+	const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1);
+	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
+	const [themeBundle               , setThemeBundle               ] = useState({});
+	const [unsavedChanges            , setUnsavedChanges            ] = useState(false);
+	const [autoSaveEnabled           , setAutoSaveEnabled           ] = useState(false);
+
+	const editorRef     = useRef(null);
+	const lastSavedBrew = useRef(_.cloneDeep(props.brew));
+
+	useEffect(()=>{
+		loadBrew();
+		fetchThemeBundle(setError, setThemeBundle, currentBrew.renderer, currentBrew.theme);
+
+		const handleControlKeys = (e)=>{
+			if(!(e.ctrlKey || e.metaKey)) return;
+			if(e.keyCode === 83) trySaveRef.current(true);
+			if(e.keyCode === 80) printCurrentBrew();
+			if([83, 80].includes(e.keyCode)) {
+				e.stopPropagation();
+				e.preventDefault();
+			}
 		};
-	},
 
-	getInitialState : function() {
-		const brew = this.props.brew;
+		document.addEventListener('keydown', handleControlKeys);
 
-		return {
-			brew                       : brew,
-			isSaving                   : false,
-			saveGoogle                 : (global.account && global.account.googleId ? true : false),
-			error                      : null,
-			htmlErrors                 : Markdown.validate(brew.text),
-			currentEditorViewPageNum   : 1,
-			currentEditorCursorPageNum : 1,
-			currentBrewRendererPageNum : 1,
-			themeBundle                : {}
+		return ()=>{
+			document.removeEventListener('keydown', handleControlKeys);
 		};
-	},
+	}, []);
 
-	editor : React.createRef(null),
-
-	componentDidMount : function() {
-		document.addEventListener('keydown', this.handleControlKeys);
-
-		const brew = this.state.brew;
-
-		if(!this.props.brew.shareId && typeof window !== 'undefined') { //Load from localStorage if in client browser
+	const loadBrew = ()=>{
+		const brew = { ...currentBrew };
+		if(!brew.shareId && typeof window !== 'undefined') { //Load from localStorage if in client browser
 			const brewStorage  = localStorage.getItem(BREWKEY);
 			const styleStorage = localStorage.getItem(STYLEKEY);
-			const metaStorage = JSON.parse(localStorage.getItem(METAKEY));
+			const metaStorage  = JSON.parse(localStorage.getItem(METAKEY));
 
-			brew.text  = brewStorage  ?? brew.text;
-			brew.style = styleStorage ?? brew.style;
-			// brew.title = metaStorage?.title || this.state.brew.title;
-			// brew.description = metaStorage?.description || this.state.brew.description;
+			brew.text     = brewStorage           ?? brew.text;
+			brew.style    = styleStorage          ?? brew.style;
 			brew.renderer = metaStorage?.renderer ?? brew.renderer;
 			brew.theme    = metaStorage?.theme    ?? brew.theme;
 			brew.lang     = metaStorage?.lang     ?? brew.lang;
 		}
 
-		SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${global.account?.username || ''}`;
+		const SAVEKEY = `${SAVEKEYPREFIX}${global.account?.username}`;
 		const saveStorage = localStorage.getItem(SAVEKEY) || 'HOMEBREWERY';
 
-		this.setState({
-			brew       : brew,
-			saveGoogle : (saveStorage == 'GOOGLE-DRIVE' && this.state.saveGoogle)
-		});
-
-		fetchThemeBundle(this, this.props.brew.renderer, this.props.brew.theme);
+		setCurrentBrew(brew);
+		lastSavedBrew.current = brew;
+		setSaveGoogle(saveStorage == 'GOOGLE-DRIVE' && saveGoogle);
 
 		localStorage.setItem(BREWKEY, brew.text);
 		if(brew.style)
 			localStorage.setItem(STYLEKEY, brew.style);
-		localStorage.setItem(METAKEY, JSON.stringify({ 'renderer': brew.renderer, 'theme': brew.theme, 'lang': brew.lang }));
-		if(window.location.pathname != '/new') {
+		localStorage.setItem(METAKEY, JSON.stringify({ renderer: brew.renderer, theme: brew.theme, lang: brew.lang }));
+		if(window.location.pathname !== '/new')
 			window.history.replaceState({}, window.location.title, '/new/');
-		}
-	},
-	componentWillUnmount : function() {
-		document.removeEventListener('keydown', this.handleControlKeys);
-	},
+	};
 
-	handleControlKeys : function(e){
-		if(!(e.ctrlKey || e.metaKey)) return;
-		const S_KEY = 83;
-		const P_KEY = 80;
-		if(e.keyCode == S_KEY) this.save();
-		if(e.keyCode == P_KEY) printCurrentBrew();
-		if(e.keyCode == P_KEY || e.keyCode == S_KEY){
-			e.stopPropagation();
-			e.preventDefault();
-		}
-	},
+	useEffect(()=>{
+		const hasChange = !_.isEqual(currentBrew, lastSavedBrew.current);
+		setUnsavedChanges(hasChange);
 
-	handleSplitMove : function(){
-		this.editor.current.update();
-	},
+		if(autoSaveEnabled) trySave(false, hasChange);
+	}, [currentBrew]);
 
-	handleEditorViewPageChange : function(pageNumber){
-		this.setState({ currentEditorViewPageNum: pageNumber });
-	},
+	const handleSplitMove = ()=>{
+		editorRef.current.update();
+	};
 
-	handleEditorCursorPageChange : function(pageNumber){
-		this.setState({ currentEditorCursorPageNum: pageNumber });
-	},
+	const handleBrewChange = (field)=>(value, subfield)=>{	//'text', 'style', 'snippets', 'metadata'
+		if(subfield == 'renderer' || subfield == 'theme')
+			fetchThemeBundle(setError, setThemeBundle, value.renderer, value.theme);
 
-	handleBrewRendererPageChange : function(pageNumber){
-		this.setState({ currentBrewRendererPageNum: pageNumber });
-	},
+		//If there are HTML errors, run the validator on every change to give quick feedback
+		if(HTMLErrors.length && (field == 'text' || field == 'snippets'))
+			setHTMLErrors(Markdown.validate(value));
 
-	handleTextChange : function(text){
-		//If there are errors, run the validator on every change to give quick feedback
-		let htmlErrors = this.state.htmlErrors;
-		if(htmlErrors.length) htmlErrors = Markdown.validate(text);
+		if(field == 'metadata') setCurrentBrew((prev)=>({ ...prev, ...value }));
+		else                    setCurrentBrew((prev)=>({ ...prev, [field]: value }));
 
-		this.setState((prevState)=>({
-			brew       : { ...prevState.brew, text: text },
-			htmlErrors : htmlErrors,
-		}));
-		localStorage.setItem(BREWKEY, text);
-	},
-
-	handleStyleChange : function(style){
-		this.setState((prevState)=>({
-			brew : { ...prevState.brew, style: style },
-		}));
-		localStorage.setItem(STYLEKEY, style);
-	},
-
-	handleMetaChange : function(metadata, field=undefined){
-		if(field == 'theme' || field == 'renderer')	// Fetch theme bundle only if theme or renderer was changed
-			fetchThemeBundle(this, metadata.renderer, metadata.theme);
-
-		this.setState((prevState)=>({
-			brew : { ...prevState.brew, ...metadata },
-		}), ()=>{
-			localStorage.setItem(METAKEY, JSON.stringify({
-				// 'title'       : this.state.brew.title,
-				// 'description' : this.state.brew.description,
-				'renderer' : this.state.brew.renderer,
-				'theme'    : this.state.brew.theme,
-				'lang'     : this.state.brew.lang
+		if(useLocalStorage) {
+			if(field == 'text')     localStorage.setItem(BREWKEY, value);
+			if(field == 'style')    localStorage.setItem(STYLEKEY, value);
+			if(field == 'snippets') localStorage.setItem(SNIPKEY, value);
+			if(field == 'metadata') localStorage.setItem(METAKEY, JSON.stringify({
+				renderer : value.renderer,
+				theme    : value.theme,
+				lang     : value.lang
 			}));
-		});
-		;
-	},
-
-	save : async function(){
-		this.setState({
-			isSaving : true
-		});
-
-		let brew = this.state.brew;
-		// Split out CSS to Style if CSS codefence exists
-		if(brew.text.startsWith('```css') && brew.text.indexOf('```\n\n') > 0) {
-			const index = brew.text.indexOf('```\n\n');
-			brew.style = `${brew.style ? `${brew.style}\n` : ''}${brew.text.slice(7, index - 1)}`;
-			brew.text = brew.text.slice(index + 5);
 		}
+	};
+
+	const save = async ()=>{
+  	setIsSaving(true);
+
+		const updatedBrew = { ...currentBrew };
+		splitTextStyleAndMetadata(updatedBrew);
+
+		const pageRegex = updatedBrew.renderer === 'legacy' ? /\\page/g : /^\\page$/gm;
+		updatedBrew.pageCount = (updatedBrew.text.match(pageRegex) || []).length + 1;
 
-		brew.pageCount=((brew.renderer=='legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1;
 		const res = await request
-			.post(`/api${this.state.saveGoogle ? '?saveToGoogle=true' : ''}`)
-			.send(brew)
+			.post(`/api${saveGoogle ? '?saveToGoogle=true' : ''}`)
+			.send(updatedBrew)
 			.catch((err)=>{
-				this.setState({ isSaving: false, error: err });
+				setIsSaving(false);
+				setError(err);
 			});
+
+		setIsSaving(false);
 		if(!res) return;
 
-		brew = res.body;
+		const savedBrew = res.body;
+
 		localStorage.removeItem(BREWKEY);
 		localStorage.removeItem(STYLEKEY);
 		localStorage.removeItem(METAKEY);
-		window.location = `/edit/${brew.editId}`;
-	},
+		window.location = `/edit/${savedBrew.editId}`;
+	};
 
-	renderSaveButton : function(){
-		if(this.state.isSaving){
-			return <Nav.item icon='fas fa-spinner fa-spin' className='save'>
-				save...
-			</Nav.item>;
-		} else {
-			return <Nav.item icon='fas fa-save' className='save' onClick={this.save}>
-				save
-			</Nav.item>;
-		}
-	},
+	const renderSaveButton = ()=>{
+		// #1 - Currently saving, show SAVING
+		if(isSaving)
+			return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>;
 
-	renderNavbar : function(){
-		return <Navbar>
+		// #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING
+		// if(unsavedChanges && warnUnsavedChanges) {
+		// 	resetWarnUnsavedTimer();
+		// 	const elapsedTime = Math.round((new Date() - lastSavedTime) / 1000 / 60);
+		// 	const text = elapsedTime === 0
+		// 		? 'Autosave is OFF.'
+		// 		: `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`;
 
+		// 	return <Nav.item className='save error' icon='fas fa-exclamation-circle'>
+		// 					Reminder...
+		// 		<div className='errorContainer'>{text}</div>
+		// 	</Nav.item>;
+		// }
+
+		// #3 - Unsaved changes exist, click to save, show SAVE NOW
+		if(unsavedChanges)
+			return <Nav.item className='save' onClick={save} color='blue' icon='fas fa-save'>save now</Nav.item>;
+
+		// #4 - No unsaved changes, autosave is ON, show AUTO-SAVED
+		if(autoSaveEnabled)
+			return <Nav.item className='save saved'>auto-saved</Nav.item>;
+
+		// #5 - No unsaved changes, and has never been saved, hide the button
+		if(neverSaved)
+			return <Nav.item className='save neverSaved'>save now</Nav.item>;
+
+		// DEFAULT - No unsaved changes, show SAVED
+		return <Nav.item className='save saved'>saved</Nav.item>;
+	};
+
+	const clearError = ()=>{
+		setError(null);
+		setIsSaving(false);
+	};
+
+	const renderNavbar = ()=>(
+		<Navbar>
 			<Nav.section>
-				<Nav.item className='brewTitle'>{this.state.brew.title}</Nav.item>
+				<Nav.item className='brewTitle'>{currentBrew.title}</Nav.item>
 			</Nav.section>
 
 			<Nav.section>
-				{this.state.error ?
-					<ErrorNavItem error={this.state.error} parent={this}></ErrorNavItem> :
-					this.renderSaveButton()
-				}
+				{error
+					? <ErrorNavItem error={error} clearError={clearError} />
+					: renderSaveButton()}
+				<NewBrewItem />
 				<PrintNavItem />
 				<HelpNavItem />
+				<VaultNavItem />
 				<RecentNavItem />
 				<AccountNavItem />
 			</Nav.section>
-		</Navbar>;
-	},
+		</Navbar>
+	);
 
-	render : function(){
-		return <div className='newPage sitePage'>
-			{this.renderNavbar()}
-			<div className="content">
-			<SplitPane onDragFinish={this.handleSplitMove}>
-				<Editor
-					ref={this.editor}
-					brew={this.state.brew}
-					onTextChange={this.handleTextChange}
-					onStyleChange={this.handleStyleChange}
-					onMetaChange={this.handleMetaChange}
-					renderer={this.state.brew.renderer}
-					userThemes={this.props.userThemes}
-					themeBundle={this.state.themeBundle}
-					snippetBundle={this.state.themeBundle.snippets}
-					onCursorPageChange={this.handleEditorCursorPageChange}
-					onViewPageChange={this.handleEditorViewPageChange}
-					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-				/>
-				<BrewRenderer
-					text={this.state.brew.text}
-					style={this.state.brew.style}
-					renderer={this.state.brew.renderer}
-					theme={this.state.brew.theme}
-					themeBundle={this.state.themeBundle}
-					errors={this.state.htmlErrors}
-					lang={this.state.brew.lang}
-					onPageChange={this.handleBrewRendererPageChange}
-					currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-					currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-					currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-					allowPrint={true}
-				/>
-			</SplitPane>
+	return (
+		<div className='newPage sitePage'>
+			{renderNavbar()}
+			<div className='content'>
+				<SplitPane onDragFinish={handleSplitMove}>
+					<Editor
+						ref={editorRef}
+						brew={currentBrew}
+						onBrewChange={handleBrewChange}
+						renderer={currentBrew.renderer}
+						userThemes={props.userThemes}
+						themeBundle={themeBundle}
+						onCursorPageChange={setCurrentEditorCursorPageNum}
+						onViewPageChange={setCurrentEditorViewPageNum}
+						currentEditorViewPageNum={currentEditorViewPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
+						currentBrewRendererPageNum={currentBrewRendererPageNum}
+					/>
+					<BrewRenderer
+						text={currentBrew.text}
+						style={currentBrew.style}
+						renderer={currentBrew.renderer}
+						theme={currentBrew.theme}
+						themeBundle={themeBundle}
+						errors={HTMLErrors}
+						lang={currentBrew.lang}
+						onPageChange={setCurrentBrewRendererPageNum}
+						currentEditorViewPageNum={currentEditorViewPageNum}
+						currentEditorCursorPageNum={currentEditorCursorPageNum}
+						currentBrewRendererPageNum={currentBrewRendererPageNum}
+						allowPrint={true}
+					/>
+				</SplitPane>
 			</div>
-		</div>;
-	}
-});
+		</div>
+	);
+};
 
 module.exports = NewPage;

client/homebrew/pages/newPage/newPage.less

@@ -1,8 +1,12 @@
-.newPage{
-	.navItem.save{
-		background-color: @orange;
-		&:hover{
-			background-color: @green;
+.newPage {
+	.navItem.save {
+		.fadeInRight();
+		.transition(opacity);
+		background-color : @orange;
+		&:hover { background-color : @green; }
+		&.neverSaved {
+			.fadeOutRight();
+			opacity: 0;
 		}
 	}
 }

client/homebrew/pages/sharePage/sharePage.jsx

@@ -17,15 +17,11 @@ const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpe
 const SharePage = (props)=>{
 	const { brew = DEFAULT_BREW_LOAD, disableMeta = false } = props;
 
-	const [state, setState] = useState({
-		themeBundle                : {},
-		currentBrewRendererPageNum : 1,
-	});
+	const [themeBundle,                setThemeBundle]                = useState({});
+	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
 
 	const handleBrewRendererPageChange = useCallback((pageNumber)=>{
-		setState((prevState)=>({
-			currentBrewRendererPageNum : pageNumber,
-			...prevState }));
+		setCurrentBrewRendererPageNum(pageNumber);
 	}, []);
 
 	const handleControlKeys = (e)=>{
@@ -40,11 +36,7 @@ const SharePage = (props)=>{
 
 	useEffect(()=>{
 		document.addEventListener('keydown', handleControlKeys);
-		fetchThemeBundle(
-			{ setState },
-			brew.renderer,
-			brew.theme
-		);
+		fetchThemeBundle(undefined, setThemeBundle, brew.renderer, brew.theme);
 
 		return ()=>{
 			document.removeEventListener('keydown', handleControlKeys);
@@ -114,9 +106,9 @@ const SharePage = (props)=>{
 					lang={brew.lang}
 					renderer={brew.renderer}
 					theme={brew.theme}
-					themeBundle={state.themeBundle}
+					themeBundle={themeBundle}
 					onPageChange={handleBrewRendererPageChange}
-					currentBrewRendererPageNum={state.currentBrewRendererPageNum}
+					currentBrewRendererPageNum={currentBrewRendererPageNum}
 					allowPrint={true}
 				/>
 			</div>

client/homebrew/pages/sharePage/sharePage.less

@@ -1,9 +1,7 @@
-.sharePage{
+.sharePage {
 	nav .navSection.titleSection {
-		flex-grow: 1;
-		justify-content: center;
-	}
-	.content{
-		overflow-y : hidden;
+		flex-grow       : 1;
+		justify-content : center;
 	}
+	.content { overflow-y : hidden; }
 }

client/homebrew/pages/userPage/userPage.jsx

@@ -39,10 +39,14 @@ const UserPage = (props)=>{
 		}] : [])
 	];
 
+	const clearError = ()=>{
+		setError(null);
+	};
+
 	const navItems = (
 		<Navbar>
 			<Nav.section>
-				{error && (<ErrorNavItem error={error} parent={null}></ErrorNavItem>)}
+				{error && (<ErrorNavItem error={error} clearError={clearError}></ErrorNavItem>)}
 				<NewBrew />
 				<HelpNavItem />
 				<VaultNavitem />

client/homebrew/pages/vaultPage/vaultPage.jsx

@@ -12,7 +12,7 @@ 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 SplitPane     = require('client/components/splitPane/splitPane.jsx');
 const ErrorIndex    = require('../errorPage/errors/errorIndex.js');
 
 import request from '../../utils/request-middleware.js';
@@ -99,14 +99,14 @@ const VaultPage = (props)=>{
 		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;
+		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;
 		const sortOption = sort || 'title';
-		const dirOption = dir || 'asc';
-		const pageProp = page || 1;
+		const dirOption  = dir || 'asc';
+		const pageProp   = page || 1;
 
 		setSort(sortOption);
 		setdir(dirOption);
@@ -247,7 +247,7 @@ const VaultPage = (props)=>{
 					</li>
 					<li>
 						Some common words like "a", "after", "through", "itself", "here", etc.,
-						are ignored in searches. The full list can be found &nbsp;
+						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>
@@ -286,9 +286,9 @@ const VaultPage = (props)=>{
 	};
 
 	const renderPaginationControls = ()=>{
-		if(!totalBrews) return null;
+		if(!totalBrews || totalBrews < 10) return null;
 
-		const countInt = parseInt(props.query.count || 20);
+		const countInt = parseInt(brewCollection.length || 20);
 		const totalPages = Math.ceil(totalBrews / countInt);
 
 		let startPage, endPage;
@@ -355,7 +355,7 @@ const VaultPage = (props)=>{
 	};
 
 	const renderFoundBrews = ()=>{
-		if(searching) {
+		if(searching && !brewCollection) {
 			return (
 				<div className='foundBrews searching'>
 					<h3 className='searchAnim'>Searching</h3>
@@ -395,6 +395,7 @@ const VaultPage = (props)=>{
 					{`Brews found: `}
 					<span>{totalBrews}</span>
 				</span>
+				{brewCollection.length > 10 && renderPaginationControls()}
 				{brewCollection.map((brew, index)=>{
 					return (
 						<BrewItem
@@ -415,14 +416,14 @@ const VaultPage = (props)=>{
 			<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'>
-					{renderSortBar()}
-					{renderFoundBrews()}
-				</div>
-			</SplitPane>
+			<div className='content'>
+				<SplitPane showDividerButtons={false}>
+					<div className='form dataGroup'>{renderForm()}</div>
+					<div className='resultsContainer dataGroup'>
+						{renderSortBar()}
+						{renderFoundBrews()}
+					</div>
+				</SplitPane>
 			</div>
 		</div>
 	);

client/homebrew/pages/vaultPage/vaultPage.less

@@ -1,14 +1,16 @@
 .vaultPage {
 	height           : 100%;
 	overflow-y       : hidden;
-	background-color : #2C3E50;
 
 	*:not(input) { user-select : none; }
 
-	.content .dataGroup {
+	.form {
+		background:white;
+	}
+
+	:where(.content .dataGroup) {
 		width      : 100%;
 		height     : 100%;
-		background : white;
 
 		&.form .brewLookup {
 			position : relative;
@@ -169,9 +171,9 @@
 				width            : 100%;
 				height           : 100%;
 				max-height       : 100%;
-				padding          : 50px 50px 70px 50px;
+				padding          : 70px 50px;
 				overflow-y       : scroll;
-				background-color : #2C3E50;
+				container-type   : inline-size;
 
 				h3 { font-size : 25px; }
 
@@ -236,6 +238,7 @@
 					margin-right     : 40px;
 					color            : black;
 					isolation        : isolate;
+					transition       : width 0.5s;
 						
 					&::after {
 						position         : absolute;
@@ -269,8 +272,8 @@
 					.links { z-index : 2; }
 
 					hr {
-						margin     : 0px;
 						visibility : hidden;
+						margin     : 0px;
 					}
 
 					.thumbnail { z-index : -1; }
@@ -278,30 +281,37 @@
 
 				.paginationControls {
 					position              : absolute;
+					top                   : 35px;
 					left                  : 50%;
 					display               : grid;
 					grid-template-areas   : 'previousPage currentPage nextPage';
 					grid-template-columns : 50px 1fr 50px;
+					gap                   : 20px;
 					place-items           : center;
 					width                 : auto;
+					font-size             : 15px;
 					translate             : -50%;
 
+					&:last-child { top : unset; }
+
 					.pages {
 						display         : flex;
 						grid-area       : currentPage;
+						gap             : 1em;
 						justify-content : space-evenly;
 						width           : 100%;
 						height          : 100%;
-						padding         : 5px 8px;
 						text-align      : center;
 
 						.pageNumber {
-							margin-inline           : 1vw;
+							place-content           : center;
+							width                   : fit-content;
+							min-width               : 2em;
 							font-family             : 'Open Sans';
 							font-weight             : 900;
 							color                   : white;
-							text-underline-position : under;
 							text-wrap               : nowrap;
+							text-underline-position : under;
 							cursor                  : pointer;
 
 							&.currentPage {
@@ -329,7 +339,6 @@
 			}
 		}
 	}
-	
 }
 
 @keyframes trailingDots {
@@ -344,8 +353,7 @@
 	100% { content : ' ...'; }
 }
 
-// media query for when the page is smaller than 1079 px in width
-@media screen and (max-width : 1079px) {
+@container (width < 670px) {
 	.vaultPage {
 
 		.dataGroup.form .brewLookup { padding : 1px 20px 20px 10px; }

client/homebrew/thumbnail.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 94.65 94.6"
+   version="1.1"
+   id="svg11"
+   sodipodi:docname="thumbnail.svg"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   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"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <sodipodi:namedview
+     id="namedview13"
+     pagecolor="#ffffff"
+     bordercolor="#111111"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="8.4989431"
+     inkscape:cx="38.887188"
+     inkscape:cy="47.417661"
+     inkscape:window-width="1920"
+     inkscape:window-height="1043"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg11" />
+  <defs
+     id="defs4">
+    <style
+       id="style2">.cls-1{fill:#ed1f24;}</style>
+  </defs>
+  <title
+     id="title6">NaturalCritLogo</title>
+  <g
+     id="Layer_2"
+     data-name="Layer 2"
+     style="fill:#000000;stroke:#000000">
+    <g
+       id="base"
+       style="fill:#000000;stroke:#000000">
+      <path
+         id="D20"
+         class="cls-1"
+         d="M63.45.09s-45.91,12.4-46,12.45a.71.71,0,0,0-.15.08l-.15.1-.12.11a1.07,1.07,0,0,0-.14.16l-.09.11-.12.23,0,.06L.2,54.9a1.59,1.59,0,0,0,.11,1.69L29.36,94h0l0,0,.08.08.08.08.09.09.08.06.13.07a0,0,0,0,0,0,0,1.59,1.59,0,0,0,.27.12l.13.05.06,0a1.55,1.55,0,0,0,.37,0,1.63,1.63,0,0,0,.31,0l45.67-8.3.16,0,.11,0,.12,0,.06,0s0,0,0,0l.06,0a1.65,1.65,0,0,0,.36-.28l0-.06a1.6,1.6,0,0,0,.26-.38s0,0,0,0v0h0a.14.14,0,0,1,0-.06L94.52,43.74a1.4,1.4,0,0,0,.11-.4.41.41,0,0,0,0-.11,1.13,1.13,0,0,0,0-.26.66.66,0,0,0,0-.14,2,2,0,0,0-.06-.26l0-.11a2.68,2.68,0,0,0-.18-.33v0L65.29.6C64.77-.31,63.45.09,63.45.09ZM74.9,81.7l-28.81-18L78.5,38.49ZM44.1,61l-11-40.17L77,35.39ZM82,37.78l8.92,5.95L79,73.48Zm4.46-1.1-4.6-3.06L75.69,21.36Zm-9.26-4.8-42.07-14,28.05-14ZM30.56,16.34l-6.49-2.16L47.85,7.7Zm-11.35-.21L27.88,19,7.64,45Zm10.73,5.76L40.78,61.64,4.64,54.42Zm10.82,43.2L30.26,89.6,5.75,58.09Zm3.16,1.24L71.74,83.72l-38.26,7Z"
+         style="fill:#000000;fill-opacity:1;stroke:#000000" />
+    </g>
+  </g>
+  <metadata
+     id="metadata1">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:title>NaturalCritLogo</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+</svg>

client/homebrew/utils/request-middleware.spec.js

@@ -0,0 +1,74 @@
+import requestMiddleware from './request-middleware';
+
+jest.mock('superagent');
+import request from 'superagent';
+
+describe('request-middleware', ()=>{
+	let version;
+
+	let setFn;
+	let testFn;
+
+	beforeEach(()=>{
+		jest.resetAllMocks();
+		version = global.version;
+
+		global.version = '999';
+
+		setFn = jest.fn();
+		testFn = jest.fn(()=>{ return { set: setFn }; });
+	});
+
+	afterEach(()=>{
+		global.version = version;
+	});
+
+	it('should add header to get', ()=>{
+		// Ensure tests functions have been reset
+		expect(testFn).not.toHaveBeenCalled();
+		expect(setFn).not.toHaveBeenCalled();
+
+		request.get = testFn;
+
+		requestMiddleware.get('path');
+
+		expect(testFn).toHaveBeenCalledWith('path');
+		expect(setFn).toHaveBeenCalledWith('Homebrewery-Version', '999');
+	});
+
+	it('should add header to put', ()=>{
+		expect(testFn).not.toHaveBeenCalled();
+		expect(setFn).not.toHaveBeenCalled();
+
+		request.put = testFn;
+
+		requestMiddleware.put('path');
+
+		expect(testFn).toHaveBeenCalledWith('path');
+		expect(setFn).toHaveBeenCalledWith('Homebrewery-Version', '999');
+	});
+
+	it('should add header to post', ()=>{
+		expect(testFn).not.toHaveBeenCalled();
+		expect(setFn).not.toHaveBeenCalled();
+
+		request.post = testFn;
+
+		requestMiddleware.post('path');
+
+		expect(testFn).toHaveBeenCalledWith('path');
+		expect(setFn).toHaveBeenCalledWith('Homebrewery-Version', '999');
+	});
+
+	it('should add header to delete', ()=>{
+		expect(testFn).not.toHaveBeenCalled();
+		expect(setFn).not.toHaveBeenCalled();
+
+		request.delete = testFn;
+
+		requestMiddleware.delete('path');
+
+		expect(testFn).toHaveBeenCalledWith('path');
+		expect(setFn).toHaveBeenCalledWith('Homebrewery-Version', '999');
+	});
+});

client/homebrew/utils/updateLocalStorage/localStorageKeyMap.js

@@ -0,0 +1,35 @@
+
+const getLocalStorageMap = function(){
+	const localStorageMap = {
+		'AUTOSAVE_ON'              : 'HB_editor_autoSaveOn',
+		'HOMEBREWERY-EDITOR-THEME' : 'HB_editor_theme',
+		'liveScroll'               : 'HB_editor_liveScroll',
+		'naturalcrit-pane-split'   : 'HB_editor_splitWidth',
+
+		'HOMEBREWERY-LISTPAGE-SORTDIR'                : 'HB_listPage_sortDir',
+		'HOMEBREWERY-LISTPAGE-SORTTYPE'               : 'HB_listPage_sortType',
+		'HOMEBREWERY-LISTPAGE-VISIBILITY-published'   : 'HB_listPage_visibility_group_published',
+		'HOMEBREWERY-LISTPAGE-VISIBILITY-unpublished' : 'HB_listPage_visibility_group_unpublished',
+
+		'hbAdminTab' : 'HB_adminPage_currentTab',
+
+		'homebrewery-new'       : 'HB_newPage_content',
+		'homebrewery-new-meta'  : 'HB_newPage_metadata',
+		'homebrewery-new-style' : 'HB_newPage_style',
+
+		'homebrewery-recently-edited' : 'HB_nav_recentlyEdited',
+		'homebrewery-recently-viewed' : 'HB_nav_recentlyViewed',
+
+		'hb_toolbarState'      : 'HB_renderer_toolbarState',
+		'hb_toolbarVisibility' : 'HB_renderer_toolbarVisibility'
+	};
+
+	if(global?.account?.username){
+		const username = global.account.username;
+		localStorageMap[`HOMEBREWERY-DEFAULT-SAVE-LOCATION-${username}`] = `HB_editor_defaultSave_${username}`;
+	}
+
+	return localStorageMap;
+};
+
+export default getLocalStorageMap;

client/homebrew/utils/updateLocalStorage/updateLocalStorageKeys.js

@@ -0,0 +1,22 @@
+import getLocalStorageMap from './localStorageKeyMap.js';
+
+const updateLocalStorage = function(){
+	// Return if no window and thus no local storage
+	if(typeof window === 'undefined') return;
+
+	const localStorageKeyMap = getLocalStorageMap();
+	const storage = window.localStorage;
+
+	Object.keys(localStorageKeyMap).forEach((key)=>{
+		if(storage[key]){
+			if(!storage[localStorageKeyMap[key]]){
+				const data = storage.getItem(key);
+				storage.setItem(localStorageKeyMap[key], data);
+			};
+			storage.removeItem(key);
+		}
+	});
+
+};
+
+export { updateLocalStorage };

client/homebrew/utils/versionHistory.js

@@ -42,6 +42,7 @@ function parseBrewForStorage(brew, slot = 0) {
 		title    : brew.title,
 		text     : brew.text,
 		style    : brew.style,
+		snippets : brew.snippets,
 		version  : brew.version,
 		shareId  : brew.shareId,
 		savedAt  : brew?.savedAt || new Date(),

client/icons/customIcons.less

@@ -1,84 +1,34 @@
 .fac {
 	display          : inline-block;
-	background-color : currentColor;
-	mask-size        : contain;
-	mask-repeat      : no-repeat;
-	mask-position    : center;
 	width            : 1em;
 	aspect-ratio     : 1;
+	background-color : currentColor;
+	mask-repeat      : no-repeat;
+	mask-position    : center;
+	mask-size        : contain;
 }
-.position-top-left {
-  mask-image: url('../icons/position-top-left.svg');
-}
-.position-top-right {
-  mask-image: url('../icons/position-top-right.svg');
-}
-.position-bottom-left {
-  mask-image: url('../icons/position-bottom-left.svg');
-}
-.position-bottom-right {
-  mask-image: url('../icons/position-bottom-right.svg');
-}
-.position-top {
-  mask-image: url('../icons/position-top.svg');
-}
-.position-right {
-  mask-image: url('../icons/position-right.svg');
-}
-.position-bottom {
-  mask-image: url('../icons/position-bottom.svg');
-}
-.position-left {
-  mask-image: url('../icons/position-left.svg');
-}
-.mask-edge {
-  mask-image: url('../icons/mask-edge.svg');
-}
-.mask-corner {
-  mask-image: url('../icons/mask-corner.svg');
-}
-.mask-center {
-  mask-image: url('../icons/mask-center.svg');
-}
-.book-front-cover {
-  mask-image: url('../icons/book-front-cover.svg');
-}
-.book-back-cover {
-  mask-image: url('../icons/book-back-cover.svg');
-}
-.book-inside-cover {
-  mask-image: url('../icons/book-inside-cover.svg');
-}
-.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');
-}
-.rellanic {
-  mask-image: url('../icons/Rellanic.svg');
-}
-.iokharic {
-  mask-image: url('../icons/Iokharic.svg');
-}
-.zoom-to-fit {
-	mask-image: url('../icons/zoom-to-fit.svg');
-}
-.fit-width {
-	mask-image: url('../icons/fit-width.svg');
-}
-.single-spread {
-	mask-image: url('../icons/single-spread.svg');
-}
-.facing-spread {
-	mask-image: url('../icons/facing-spread.svg');
-}
-.flow-spread {
-	mask-image: url('../icons/flow-spread.svg');
-}
+.position-top-left { mask-image : url('../icons/position-top-left.svg'); }
+.position-top-right { mask-image : url('../icons/position-top-right.svg'); }
+.position-bottom-left { mask-image : url('../icons/position-bottom-left.svg'); }
+.position-bottom-right { mask-image : url('../icons/position-bottom-right.svg'); }
+.position-top { mask-image : url('../icons/position-top.svg'); }
+.position-right { mask-image : url('../icons/position-right.svg'); }
+.position-bottom { mask-image : url('../icons/position-bottom.svg'); }
+.position-left { mask-image : url('../icons/position-left.svg'); }
+.mask-edge { mask-image : url('../icons/mask-edge.svg'); }
+.mask-corner { mask-image : url('../icons/mask-corner.svg'); }
+.mask-center { mask-image : url('../icons/mask-center.svg'); }
+.book-front-cover { mask-image : url('../icons/book-front-cover.svg'); }
+.book-back-cover { mask-image : url('../icons/book-back-cover.svg'); }
+.book-inside-cover { mask-image : url('../icons/book-inside-cover.svg'); }
+.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'); }
+.rellanic { mask-image : url('../icons/Rellanic.svg'); }
+.iokharic { mask-image : url('../icons/Iokharic.svg'); }
+.zoom-to-fit { mask-image : url('../icons/zoom-to-fit.svg'); }
+.fit-width { mask-image : url('../icons/fit-width.svg'); }
+.single-spread { mask-image : url('../icons/single-spread.svg'); }
+.facing-spread { mask-image : url('../icons/facing-spread.svg'); }
+.flow-spread { mask-image : url('../icons/flow-spread.svg'); }

client/template.js

@@ -14,7 +14,6 @@ const template = async function(name, title='', props = {}){
 	<html>
 		<head>
 			<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height, interactive-widget=resizes-visual" />
-			<link href="//use.fontawesome.com/releases/v6.5.1/css/all.css" rel="stylesheet" type="text/css" />
 			<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
 			<link href=${`/${name}/bundle.css`} type="text/css" rel='stylesheet' />
 			<link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />

config/default.json

@@ -1,10 +1,9 @@
 {
+	"development": true,
 	"host" : "homebrewery.local.naturalcrit.com:8000",
 	"naturalcrit_url" : "local.naturalcrit.com:8010",
 	"secret" : "secret",
 	"web_port" : 8000,
-	"enable_v3" : true,
-	"enable_themes" : true,
 	"local_environments" : ["docker", "local"],
 	"publicUrl" : "https://homebrewery.naturalcrit.com",
 	"hb_images" : null,

font-awesome-source/README.md

@@ -0,0 +1,3 @@
+# About
+
+Run `deploy.bash` to download, extract, and deploy the font awesome files into place for building. Should only be needed when  Font Awesome version changes and we want the new version.

font-awesome-source/deploy.bash

@@ -0,0 +1,42 @@
+#!/bin/bash
+
+# Deploys the Font Awesome files for HB self-hosting to settle various issues.
+
+THEURL=https://use.fontawesome.com/releases/v6.7.2/fontawesome-free-6.7.2-web.zip
+THEFILE=fontawesome-free-6.7.2-web.zip
+if [ ! "$(which wget)" ]; then
+   echo "Please manually download ${THEURL}"
+   exit -1
+fi
+
+wget ${THEURL}
+if [ $? -ne 0 ]; then
+  echo "Error downloading ${THEURL}"
+  exit -2
+fi
+
+if [ ! "$(which unzip)" ]; then
+  echo "Please unzip the file with your tool of choice."
+  exit -3
+fi
+
+unzip fontawesome-free-6.7.2-web.zip
+if [ $? -ne 0 ]; then
+  echo "Error extracting ${THEFILE}"
+fi
+
+echo "Copying fonts"
+cp -rv  fontawesome-free-*-web/webfonts/*.woff2 ../themes/fonts/iconFonts
+echo "Copying and updating css"
+
+echo "fontawesome-free.less"
+sed  's/..\/webfonts/\/fonts\/iconFonts/g' fontawesome-free-*-web/css/fontawesome.css > ../themes/fonts/iconFonts/fontawesome-free.less
+
+echo "fontawesome-solid.less"
+sed  's/..\/webfonts/\/fonts\/iconFonts/g' fontawesome-free-*-web/css/solid.css > ../themes/fonts/iconFonts/fontawesome-solid.less
+
+echo "fontawesome-brands.less"
+sed  's/..\/webfonts/\/fonts\/iconFonts/g' fontawesome-free-*-web/css/brands.css > ../themes/fonts/iconFonts/fontawesome-brands.less
+
+echo "fontawesome-regular.less"
+sed  's/..\/webfonts/\/fonts\/iconFonts/g' fontawesome-free-*-web/css/regular.css > ../themes/fonts/iconFonts/fontawesome-regular.less

package.json

@@ -1,10 +1,10 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "3.18.0",
+  "version": "3.19.3",
   "type": "module",
   "engines": {
-    "npm": "^10.2.x",
+    "npm": "^10.8.x",
     "node": "^20.18.x"
   },
   "repository": {
@@ -36,7 +36,6 @@
     "test:mustache-syntax:inline": "jest \".*(mustache-syntax).*\" -t '^Inline:.*' --verbose --noStackTrace",
     "test:mustache-syntax:block": "jest \".*(mustache-syntax).*\" -t '^Block:.*' --verbose --noStackTrace",
     "test:mustache-syntax:injection": "jest \".*(mustache-syntax).*\" -t '^Injection:.*' --verbose --noStackTrace",
-    "test:definition-lists": "jest tests/markdown/definition-lists.test.js --verbose --noStackTrace",
     "test:hard-breaks": "jest tests/markdown/hard-breaks.test.js --verbose --noStackTrace",
     "test:non-breaking-spaces": "jest tests/markdown/non-breaking-spaces.test.js --verbose --noStackTrace",
     "test:emojis": "jest tests/markdown/emojis.test.js --verbose --noStackTrace",
@@ -45,7 +44,9 @@
     "phb": "node --experimental-require-module scripts/phb.js",
     "prod": "set NODE_ENV=production && npm run build",
     "postinstall": "npm run build",
-    "start": "node --experimental-require-module server.js"
+    "start": "node --experimental-require-module server.js",
+    "docker:build": "docker build -t ${DOCKERID}/homebrewery:$npm_package_version .",
+    "docker:publish": "docker login && docker push  ${DOCKERID}/homebrewery:$npm_package_version"
   },
   "author": "stolksdorf",
   "license": "MIT",
@@ -73,7 +74,7 @@
         "lines": 50
       },
       "server/homebrew.api.js": {
-        "statements": 70,
+        "statements": 60,
         "branches": 50,
         "functions": 65,
         "lines": 70
@@ -84,63 +85,73 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.26.9",
-    "@babel/plugin-transform-runtime": "^7.26.9",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-react": "^7.26.3",
-    "@googleapis/drive": "^8.16.0",
-    "body-parser": "^1.20.2",
+    "@babel/core": "^7.28.4",
+    "@babel/plugin-transform-runtime": "^7.28.3",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/runtime": "^7.28.4",
+    "@dmsnell/diff-match-patch": "^1.1.0",
+    "@googleapis/drive": "^18.0.0",
+    "@sanity/diff-match-patch": "^3.2.0",
+    "body-parser": "^2.2.0",
     "classnames": "^2.5.1",
     "codemirror": "^5.65.6",
     "cookie-parser": "^1.4.7",
-    "core-js": "^3.41.0",
+    "core-js": "^3.46.0",
     "cors": "^2.8.5",
     "create-react-class": "^15.7.0",
     "dedent-tabs": "^0.10.3",
-    "dompurify": "^3.2.4",
     "expr-eval": "^2.0.2",
-    "express": "^4.21.2",
+    "express": "^5.1.0",
     "express-async-handler": "^1.2.0",
-    "express-static-gzip": "2.2.0",
-    "fs-extra": "11.3.0",
-    "idb-keyval": "^6.2.1",
+    "express-static-gzip": "3.0.0",
+    "fflate": "^0.8.2",
+    "fs-extra": "11.3.2",
+    "hash-wasm": "^4.12.0",
+    "idb-keyval": "^6.2.2",
     "js-yaml": "^4.1.0",
     "jwt-simple": "^0.5.6",
     "less": "^3.13.1",
     "lodash": "^4.17.21",
-    "marked": "14.0.0",
-    "marked-emoji": "^2.0.0",
-    "marked-extended-tables": "^2.0.0",
-    "marked-gfm-heading-id": "^4.0.1",
+    "marked": "15.0.12",
+    "marked-alignment-paragraphs": "^1.0.0",
+    "marked-definition-lists": "^1.0.1",
+    "marked-emoji": "^2.0.1",
+    "marked-extended-tables": "^2.0.1",
+    "marked-gfm-heading-id": "^4.1.2",
+    "marked-nonbreaking-spaces": "^1.0.1",
     "marked-smartypants-lite": "^1.0.3",
-    "marked-subsuper-text": "^1.0.3",
+    "marked-subsuper-text": "^1.0.4",
+    "marked-variables": "^1.0.4",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.30.1",
-    "mongoose": "^8.12.1",
-    "nanoid": "5.1.2",
-    "nconf": "^0.12.1",
+    "mongoose": "^8.19.1",
+    "nanoid": "5.1.6",
+    "nconf": "^0.13.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-frame-component": "^4.1.3",
-    "react-router": "^7.3.0",
+    "react-router": "^7.9.4",
+    "romans": "^3.1.0",
     "sanitize-filename": "1.6.3",
-    "superagent": "^10.1.1",
-    "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
+    "superagent": "^10.2.1",
+    "vitreum": "git+https://git@github.com/calculuschild/vitreum.git",
+    "written-number": "^0.11.1"
   },
   "devDependencies": {
-    "@stylistic/stylelint-plugin": "^3.1.2",
-    "babel-plugin-transform-import-meta": "^2.3.2",
-    "eslint": "^9.22.0",
-    "eslint-plugin-jest": "^28.11.0",
-    "eslint-plugin-react": "^7.37.4",
-    "globals": "^16.0.0",
-    "jest": "^29.7.0",
+    "@stylistic/stylelint-plugin": "^4.0.0",
+    "babel-plugin-transform-import-meta": "^2.3.3",
+    "eslint": "^9.39.1",
+    "eslint-plugin-jest": "^29.0.1",
+    "eslint-plugin-react": "^7.37.5",
+    "globals": "^16.4.0",
+    "jest": "^30.2.0",
     "jest-expect-message": "^1.1.3",
     "jsdom-global": "^3.0.2",
     "postcss-less": "^6.0.0",
-    "stylelint": "^16.15.0",
-    "stylelint-config-recess-order": "^6.0.0",
-    "stylelint-config-recommended": "^15.0.0",
-    "supertest": "^7.0.0"
+    "stylelint": "^16.25.0",
+    "stylelint-config-recess-order": "^7.3.0",
+    "stylelint-config-recommended": "^17.0.0",
+    "supertest": "^7.1.4"
   }
 }

scripts/buildHomebrew.js

@@ -10,7 +10,7 @@ import babel          from '@babel/core';
 import babelConfig    from '../babel.config.json' with { type : 'json' };
 import less           from 'less';
 
-const isDev = !!process.argv.find((arg) => arg === '--dev');
+const isDev = !!process.argv.find((arg)=>arg === '--dev');
 
 const babelify = async (code)=>(await babel.transformAsync(code, babelConfig)).code;
 
@@ -53,7 +53,7 @@ fs.emptyDirSync('./build');
 	const themes = { Legacy: {}, V3: {} };
 
 	let themeFiles = fs.readdirSync('./themes/Legacy');
-	for (let dir of themeFiles) {
+	for (const dir of themeFiles) {
 		const themeData = JSON.parse(fs.readFileSync(`./themes/Legacy/${dir}/settings.json`).toString());
 		themeData.path = dir;
 		themes.Legacy[dir] = (themeData);
@@ -70,7 +70,7 @@ fs.emptyDirSync('./build');
 	}
 
 	themeFiles = fs.readdirSync('./themes/V3');
-	for (let dir of themeFiles) {
+	for (const dir of themeFiles) {
 		const themeData = JSON.parse(fs.readFileSync(`./themes/V3/${dir}/settings.json`).toString());
 		themeData.path = dir;
 		themes.V3[dir] = (themeData);
@@ -113,7 +113,7 @@ fs.emptyDirSync('./build');
 	const stream = fs.createWriteStream(editorThemeFile, { flags: 'a' });
 	stream.write('[\n"default"');
 
-	for (let themeFile of editorThemeFiles) {
+	for (const themeFile of editorThemeFiles) {
 		stream.write(`,\n"${themeFile.slice(0, -4)}"`);
 	}
 	stream.write('\n]\n');

scripts/project.json

@@ -27,6 +27,8 @@
 		"codemirror/addon/selection/active-line.js",
 		"codemirror/addon/hint/show-hint.js",
 		"moment",
-		"superagent"
+		"superagent",
+		"@sanity/diff-match-patch",
+		"fflate"
 	]
 }

server/admin.api.js

@@ -1,3 +1,4 @@
+/*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/
 import { model as HomebrewModel }     from './homebrew.model.js';
 import { model as NotificationModel } from './notifications.model.js';
 import express    from 'express';
@@ -11,6 +12,7 @@ import { splitTextStyleAndMetadata } from '../shared/helpers.js';
 
 const router = express.Router();
 
+
 process.env.ADMIN_USER = process.env.ADMIN_USER || 'admin';
 process.env.ADMIN_PASS = process.env.ADMIN_PASS || 'password3';
 
@@ -162,6 +164,180 @@ router.get('/admin/stats', mw.adminOnly, async (req, res)=>{
 	}
 });
 
+// #######################   LOCKS
+
+router.get('/api/lock/count', mw.adminOnly, asyncHandler(async (req, res)=>{
+
+	const countLocksQuery = {
+		lock : { $exists: true }
+	};
+	const count = await HomebrewModel.countDocuments(countLocksQuery)
+		.catch((error)=>{
+			throw { name: 'Lock Count Error', message: 'Unable to get lock count', status: 500, HBErrorCode: '61', error };
+		});
+
+	return res.json({ count });
+
+}));
+
+router.get('/api/locks', mw.adminOnly, asyncHandler(async (req, res)=>{
+	const countLocksPipeline = [
+		{
+			  $match :
+				{
+				  'lock' : { '$exists': 1 }
+				},
+		},
+		{
+			$project : {
+				shareId : 1,
+				editId  : 1,
+				title   : 1,
+				lock    : 1
+			}
+		}
+	];
+	const lockedDocuments = await HomebrewModel.aggregate(countLocksPipeline)
+		.catch((error)=>{
+			throw { name: 'Can Not Get Locked Brews', message: 'Unable to get locked brew collection', status: 500, HBErrorCode: '68', error };
+		});
+	return res.json({
+		lockedDocuments
+	});
+
+}));
+
+router.post('/api/lock/:id', mw.adminOnly, asyncHandler(async (req, res)=>{
+
+	const lock = req.body;
+
+	lock.applied = new Date;
+
+	const filter = {
+		shareId : req.params.id
+	};
+
+	const brew = await HomebrewModel.findOne(filter);
+
+	if(!brew) throw { name: 'Brew Not Found', message: 'Cannot find brew to lock', shareId: req.params.id, status: 500, HBErrorCode: '63' };
+
+	if(brew.lock && !lock.overwrite) {
+		throw { name: 'Already Locked', message: 'Lock already exists on brew', shareId: req.params.id, title: brew.title, status: 500, HBErrorCode: '64' };
+	}
+
+	lock.overwrite = undefined;
+
+	brew.lock = lock;
+	brew.markModified('lock');
+
+	await brew.save()
+		.catch((error)=>{
+			throw { name: 'Lock Error', message: 'Unable to set lock', shareId: req.params.id, status: 500, HBErrorCode: '62', error };
+		});
+
+	return res.json({ name: 'LOCKED', message: `Lock applied to brew ID ${brew.shareId} - ${brew.title}`, ...lock });
+
+}));
+
+router.put('/api/unlock/:id', mw.adminOnly, asyncHandler(async (req, res)=>{
+
+	const filter = {
+		shareId : req.params.id
+	};
+
+	const brew = await HomebrewModel.findOne(filter);
+
+	if(!brew) throw { name: 'Brew Not Found', message: 'Cannot find brew to unlock', shareId: req.params.id, status: 500, HBErrorCode: '66' };
+
+	if(!brew.lock) throw { name: 'Not Locked', message: 'Cannot unlock as brew is not locked', shareId: req.params.id, status: 500, HBErrorCode: '67' };
+
+	brew.lock = undefined;
+	brew.markModified('lock');
+
+	await brew.save()
+		.catch((error)=>{
+			throw { name: 'Cannot Unlock', message: 'Unable to clear lock', shareId: req.params.id, status: 500, HBErrorCode: '65', error };
+		});
+
+	return res.json({ name: 'Unlocked', message: `Lock removed from brew ID ${req.params.id}` });
+}));
+
+router.get('/api/lock/reviews', mw.adminOnly, asyncHandler(async (req, res)=>{
+	const countReviewsPipeline = [
+		{
+			  $match :
+				{
+				  'lock.reviewRequested' : { '$exists': 1 }
+				},
+		},
+		{
+			$project : {
+				shareId : 1,
+				editId  : 1,
+				title   : 1,
+				lock    : 1
+			}
+		}
+	];
+	const reviewDocuments = await HomebrewModel.aggregate(countReviewsPipeline)
+		.catch((error)=>{
+			throw { name: 'Can Not Get Reviews', message: 'Unable to get review collection', status: 500, HBErrorCode: '68', error };
+		});
+	return res.json({
+		reviewDocuments
+	});
+
+}));
+
+router.put('/api/lock/review/request/:id', asyncHandler(async (req, res)=>{
+	// === This route is NOT Admin only ===
+	// Any user can request a review of their document
+	const filter = {
+		shareId : req.params.id,
+		lock    : { $exists: 1 }
+	};
+
+	const brew = await HomebrewModel.findOne(filter);
+	if(!brew) { throw { name: 'Brew Not Found', message: `Cannot find a locked brew with ID ${req.params.id}`, code: 500, HBErrorCode: '70' }; };
+
+	if(brew.lock.reviewRequested){
+		throw { name: 'Review Already Requested', message: `Review already requested for brew ${brew.shareId} - ${brew.title}`, code: 500, HBErrorCode: '71' };
+	};
+
+	brew.lock.reviewRequested = new Date();
+	brew.markModified('lock');
+
+	await brew.save()
+		.catch((error)=>{
+			throw { name: 'Can Not Set Review Request', message: `Unable to set request for review on brew ID ${req.params.id}`, code: 500, HBErrorCode: '69', error };
+		});
+
+	return res.json({ name: 'Review Requested', message: `Review requested on brew ID ${brew.shareId} - ${brew.title}` });
+
+}));
+
+router.put('/api/lock/review/remove/:id', mw.adminOnly, asyncHandler(async (req, res)=>{
+
+	const filter = {
+		shareId                : req.params.id,
+		'lock.reviewRequested' : { $exists: 1 }
+	};
+
+	const brew = await HomebrewModel.findOne(filter);
+	if(!brew) { throw { name: 'Can Not Clear Review Request', message: `Brew ID ${req.params.id} does not have a review pending!`, HBErrorCode: '73' }; };
+
+	brew.lock.reviewRequested = undefined;
+	brew.markModified('lock');
+
+	await brew.save()
+		.catch((error)=>{
+			throw { name: 'Can Not Clear Review Request', message: `Unable to remove request for review on brew ID ${req.params.id}`, HBErrorCode: '72', error };
+		});
+
+	return res.json({ name: 'Review Request Cleared', message: `Review request removed for brew ID ${brew.shareId} - ${brew.title}` });
+
+}));
+
 // #######################   NOTIFICATIONS
 
 router.get('/admin/notification/all', async (req, res, next)=>{

server/admin.api.spec.js

@@ -1,6 +1,8 @@
+/*eslint max-lines: ["warn", {"max": 1000, "skipBlankLines": true, "skipComments": true}]*/
 import supertest from 'supertest';
 import HBApp     from './app.js';
-import {model as NotificationModel } from './notifications.model.js';
+import { model as NotificationModel } from './notifications.model.js';
+import { model as HomebrewModel } from './homebrew.model.js';
 
 
 // Mimic https responses to avoid being redirected all the time
@@ -16,7 +18,7 @@ describe('Tests for admin api', ()=>{
 			const testNotifications = ['a', 'b'];
 
 			jest.spyOn(NotificationModel, 'find')
-			.mockImplementationOnce(() => {
+			.mockImplementationOnce(()=>{
 				return { exec: jest.fn().mockResolvedValue(testNotifications) };
 			});
 
@@ -59,7 +61,7 @@ describe('Tests for admin api', ()=>{
 			expect(response.body).toEqual(savedNotification);
 		});
 
-		it('should handle error adding a notification without dismissKey', async () => {
+		it('should handle error adding a notification without dismissKey', async ()=>{
 			const inputNotification = {
 				title   : 'Test Notification',
 				text    : 'This is a test notification',
@@ -75,7 +77,7 @@ describe('Tests for admin api', ()=>{
 
 			const response = await app
 				.post('/admin/notification/add')
-				.set('Authorization', 'Basic ' + Buffer.from('admin:password3').toString('base64'))
+				.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`)
 				.send(inputNotification);
 
 			expect(response.status).toBe(500);
@@ -86,14 +88,14 @@ describe('Tests for admin api', ()=>{
 			const dismissKey = 'testKey';
 
 			jest.spyOn(NotificationModel, 'findOneAndDelete')
-				.mockImplementationOnce((key) => {
+				.mockImplementationOnce((key)=>{
 					return { exec: jest.fn().mockResolvedValue(key) };
 				});
 			const response = await app
 				.delete(`/admin/notification/delete/${dismissKey}`)
 				.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`);
 
-			expect(NotificationModel.findOneAndDelete).toHaveBeenCalledWith({'dismissKey': 'testKey'});
+			expect(NotificationModel.findOneAndDelete).toHaveBeenCalledWith({ 'dismissKey': 'testKey' });
 			expect(response.status).toBe(200);
 			expect(response.body).toEqual({ dismissKey: 'testKey' });
 		});
@@ -102,16 +104,602 @@ describe('Tests for admin api', ()=>{
 			const dismissKey = 'testKey';
 
 			jest.spyOn(NotificationModel, 'findOneAndDelete')
-				.mockImplementationOnce(() => {
+				.mockImplementationOnce(()=>{
 					return { exec: jest.fn().mockResolvedValue() };
 				});
 			const response = await app
 				.delete(`/admin/notification/delete/${dismissKey}`)
 				.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`);
 
-			expect(NotificationModel.findOneAndDelete).toHaveBeenCalledWith({'dismissKey': 'testKey'});
+			expect(NotificationModel.findOneAndDelete).toHaveBeenCalledWith({ 'dismissKey': 'testKey' });
 			expect(response.status).toBe(500);
 			expect(response.body).toEqual({ message: 'Notification not found' });
 		});
 	});
+
+	describe('Locks', ()=>{
+		describe('Count', ()=>{
+			it('Count of all locked documents', async ()=>{
+				const testNumber = 16777216; // 8^8, because why not
+
+				jest.spyOn(HomebrewModel, 'countDocuments')
+					.mockImplementationOnce(()=>{
+						return Promise.resolve(testNumber);
+					});
+
+				const response = await app
+					.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`)
+					.get('/api/lock/count');
+
+				expect(response.status).toBe(200);
+				expect(response.body).toEqual({ count: testNumber });
+			});
+
+			it('Handle error while fetching count of locked documents', async ()=>{
+				jest.spyOn(HomebrewModel, 'countDocuments')
+					.mockImplementationOnce(()=>{
+						return Promise.reject();
+					});
+
+				const response = await app
+					.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`)
+					.get('/api/lock/count');
+
+				expect(response.status).toBe(500);
+				expect(response.body).toEqual({
+					HBErrorCode : '61',
+					message     : 'Unable to get lock count',
+					name        : 'Lock Count Error',
+					originalUrl : '/api/lock/count',
+					status      : 500,
+				});
+			});
+		});
+
+		describe('Lists', ()=>{
+			it('Get list of all locked documents', async ()=>{
+				const testLocks = ['a', 'b'];
+
+				jest.spyOn(HomebrewModel, 'aggregate')
+					.mockImplementationOnce(()=>{
+						return Promise.resolve(testLocks);
+					});
+
+				const response = await app
+				.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`)
+				.get('/api/locks');
+
+				expect(response.status).toBe(200);
+				expect(response.body).toEqual({ lockedDocuments: testLocks });
+			});
+
+			it('Handle error while fetching list of all locked documents', async ()=>{
+				jest.spyOn(HomebrewModel, 'aggregate')
+					.mockImplementationOnce(()=>{
+						return Promise.reject();
+					});
+
+				const response = await app
+				.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`)
+				.get('/api/locks');
+
+				expect(response.status).toBe(500);
+				expect(response.body).toEqual({
+					HBErrorCode : '68',
+					message     : 'Unable to get locked brew collection',
+					name        : 'Can Not Get Locked Brews',
+					originalUrl : '/api/locks',
+					status      : 500
+				});
+			});
+
+			it('Get list of all locked documents with pending review requests', async ()=>{
+				const testLocks = ['a', 'b'];
+
+				jest.spyOn(HomebrewModel, 'aggregate')
+					.mockImplementationOnce(()=>{
+						return Promise.resolve(testLocks);
+					});
+
+				const response = await app
+				.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`)
+				.get('/api/lock/reviews');
+
+				expect(response.status).toBe(200);
+				expect(response.body).toEqual({ reviewDocuments: testLocks });
+			});
+
+			it('Handle error while fetching list of all locked documents with pending review requests', async ()=>{
+				jest.spyOn(HomebrewModel, 'aggregate')
+					.mockImplementationOnce(()=>{
+						return Promise.reject();
+					});
+
+				const response = await app
+				.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`)
+				.get('/api/lock/reviews');
+
+				expect(response.status).toBe(500);
+				expect(response.body).toEqual({
+					HBErrorCode : '68',
+					message     : 'Unable to get review collection',
+					name        : 'Can Not Get Reviews',
+					originalUrl : '/api/lock/reviews',
+					status      : 500
+				});
+			});
+		});
+
+		describe('Lock', ()=>{
+			it('Lock a brew', async ()=>{
+				const testBrew = {
+					shareId      : 'shareId',
+					title        : 'title',
+					markModified : ()=>{ return true; },
+					save         : ()=>{ return Promise.resolve(); }
+				};
+
+				const testLock = {
+					code         : 999,
+					editMessage  : 'edit',
+					shareMessage : 'share'
+				};
+
+				jest.spyOn(HomebrewModel, 'findOne')
+					.mockImplementationOnce(()=>{
+						return Promise.resolve(testBrew);
+					});
+
+				const response = await app
+					.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`)
+					.post(`/api/lock/${testBrew.shareId}`)
+					.send(testLock);
+
+				expect(response.status).toBe(200);
+				expect(response.body).toMatchObject({
+					applied      : expect.any(String),
+					code         : testLock.code,
+					editMessage  : testLock.editMessage,
+					shareMessage : testLock.shareMessage,
+					name         : 'LOCKED',
+					message      : `Lock applied to brew ID ${testBrew.shareId} - ${testBrew.title}`
+				});
+			});
+
+			it('Overwrite lock on a locked brew', async ()=>{
+				const testLock = {
+					code         : 999,
+					editMessage  : 'newEdit',
+					shareMessage : 'newShare',
+					overwrite    : true
+				};
+
+				const testBrew = {
+					shareId      : 'shareId',
+					title        : 'title',
+					markModified : ()=>{ return true; },
+					save         : ()=>{ return Promise.resolve(); },
+					lock         : {
+						code         : 1,
+						editMessage  : 'oldEdit',
+						shareMessage : 'oldShare',
+					}
+				};
+
+				jest.spyOn(HomebrewModel, 'findOne')
+					.mockImplementationOnce(()=>{
+						return Promise.resolve(testBrew);
+					});
+
+				const response = await app
+					.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`)
+					.post(`/api/lock/${testBrew.shareId}`)
+					.send(testLock);
+
+				expect(response.status).toBe(200);
+				expect(response.body).toMatchObject({
+					applied      : expect.any(String),
+					code         : testLock.code,
+					editMessage  : testLock.editMessage,
+					shareMessage : testLock.shareMessage,
+					name         : 'LOCKED',
+					message      : `Lock applied to brew ID ${testBrew.shareId} - ${testBrew.title}`
+				});
+			});
+
+			it('Error when locking a locked brew', async ()=>{
+				const testLock = {
+					code         : 999,
+					editMessage  : 'newEdit',
+					shareMessage : 'newShare'
+				};
+
+				const testBrew = {
+					shareId      : 'shareId',
+					title        : 'title',
+					markModified : ()=>{ return true; },
+					save         : ()=>{ return Promise.resolve(); },
+					lock         : {
+						code         : 1,
+						editMessage  : 'oldEdit',
+						shareMessage : 'oldShare',
+					}
+				};
+
+				jest.spyOn(HomebrewModel, 'findOne')
+					.mockImplementationOnce(()=>{
+						return Promise.resolve(testBrew);
+					});
+
+				const response = await app
+					.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`)
+					.post(`/api/lock/${testBrew.shareId}`)
+					.send(testLock);
+
+				expect(response.status).toBe(500);
+				expect(response.body).toEqual({
+					HBErrorCode : '64',
+					message     : 'Lock already exists on brew',
+					name        : 'Already Locked',
+					originalUrl : `/api/lock/${testBrew.shareId}`,
+					shareId     : testBrew.shareId,
+					status      : 500,
+					title       : 'title'
+				});
+			});
+
+			it('Handle save error while locking a brew', async ()=>{
+				const testBrew = {
+					shareId      : 'shareId',
+					title        : 'title',
+					markModified : ()=>{ return true; },
+					save         : ()=>{ return Promise.reject(); }
+				};
+
+				const testLock = {
+					code         : 999,
+					editMessage  : 'edit',
+					shareMessage : 'share'
+				};
+
+				jest.spyOn(HomebrewModel, 'findOne')
+					.mockImplementationOnce(()=>{
+						return Promise.resolve(testBrew);
+					});
+
+				const response = await app
+					.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`)
+					.post(`/api/lock/${testBrew.shareId}`)
+					.send(testLock);
+
+				expect(response.status).toBe(500);
+				expect(response.body).toEqual({
+					HBErrorCode : '62',
+					message     : 'Unable to set lock',
+					name        : 'Lock Error',
+					originalUrl : `/api/lock/${testBrew.shareId}`,
+					shareId     : testBrew.shareId,
+					status      : 500
+				});
+			});
+		});
+
+		describe('Unlock', ()=>{
+			it('Unlock a brew', async ()=>{
+				const testLock = {
+					applied      : 'YES',
+					code         : 999,
+					editMessage  : 'edit',
+					shareMessage : 'share'
+				};
+
+				const testBrew = {
+					shareId      : 'shareId',
+					title        : 'title',
+					markModified : ()=>{ return true; },
+					save         : ()=>{ return Promise.resolve(); },
+					lock         : testLock
+				};
+
+				jest.spyOn(HomebrewModel, 'findOne')
+					.mockImplementationOnce(()=>{
+						return Promise.resolve(testBrew);
+					});
+
+				const response = await app
+					.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`)
+					.put(`/api/unlock/${testBrew.shareId}`);
+
+				expect(response.status).toBe(200);
+				expect(response.body).toEqual({
+					name    : 'Unlocked',
+					message : `Lock removed from brew ID ${testBrew.shareId}`
+				});
+			});
+
+			it('Error when unlocking a brew with no lock', async ()=>{
+				const testBrew = {
+					shareId      : 'shareId',
+					title        : 'title',
+					markModified : ()=>{ return true; },
+					save         : ()=>{ return Promise.resolve(); },
+				};
+
+				jest.spyOn(HomebrewModel, 'findOne')
+					.mockImplementationOnce(()=>{
+						return Promise.resolve(testBrew);
+					});
+
+				const response = await app
+					.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`)
+					.put(`/api/unlock/${testBrew.shareId}`);
+
+				expect(response.status).toBe(500);
+				expect(response.body).toEqual({
+					HBErrorCode : '67',
+					message     : 'Cannot unlock as brew is not locked',
+					name        : 'Not Locked',
+					originalUrl : `/api/unlock/${testBrew.shareId}`,
+					shareId     : testBrew.shareId,
+					status      : 500,
+				});
+			});
+
+			it('Handle error while unlocking a brew', async ()=>{
+				const testLock = {
+					applied      : 'YES',
+					code         : 999,
+					editMessage  : 'edit',
+					shareMessage : 'share'
+				};
+
+				const testBrew = {
+					shareId      : 'shareId',
+					title        : 'title',
+					markModified : ()=>{ return true; },
+					save         : ()=>{ return Promise.reject(); },
+					lock         : testLock
+				};
+
+				jest.spyOn(HomebrewModel, 'findOne')
+					.mockImplementationOnce(()=>{
+						return Promise.resolve(testBrew);
+					});
+
+				const response = await app
+					.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`)
+					.put(`/api/unlock/${testBrew.shareId}`);
+
+				expect(response.status).toBe(500);
+				expect(response.body).toEqual({
+					HBErrorCode : '65',
+					message     : 'Unable to clear lock',
+					name        : 'Cannot Unlock',
+					originalUrl : `/api/unlock/${testBrew.shareId}`,
+					shareId     : testBrew.shareId,
+					status      : 500
+				});
+			});
+		});
+
+		describe('Reviews', ()=>{
+			it('Add review request to a locked brew', async ()=>{
+				const testLock = {
+					applied      : 'YES',
+					code         : 999,
+					editMessage  : 'edit',
+					shareMessage : 'share'
+				};
+
+				const testBrew = {
+					shareId      : 'shareId',
+					title        : 'title',
+					markModified : ()=>{ return true; },
+					save         : ()=>{ return Promise.resolve(); },
+					lock         : testLock
+				};
+
+				jest.spyOn(HomebrewModel, 'findOne')
+					.mockImplementationOnce(()=>{
+						return Promise.resolve(testBrew);
+					});
+
+				const response = await app
+					.put(`/api/lock/review/request/${testBrew.shareId}`);
+
+				expect(response.status).toBe(200);
+				expect(response.body).toEqual({
+					message : `Review requested on brew ID ${testBrew.shareId} - ${testBrew.title}`,
+					name    : 'Review Requested',
+				});
+			});
+
+			it('Error when cannot find a locked brew', async ()=>{
+				const testBrew = {
+					shareId : 'shareId'
+				};
+
+				jest.spyOn(HomebrewModel, 'findOne')
+					.mockImplementationOnce(()=>{
+						return Promise.resolve(false);
+					});
+
+
+				const response = await app
+					.put(`/api/lock/review/request/${testBrew.shareId}`)
+					.catch((err)=>{return err;});
+
+				expect(response.status).toBe(500);
+				expect(response.body).toEqual({
+					message     : `Cannot find a locked brew with ID ${testBrew.shareId}`,
+					name        : 'Brew Not Found',
+					HBErrorCode : '70',
+					code        : 500,
+					originalUrl : `/api/lock/review/request/${testBrew.shareId}`
+				});
+			});
+
+			it('Error when review is already requested', async ()=>{
+				const testLock = {
+					applied         : 'YES',
+					code            : 999,
+					editMessage     : 'edit',
+					shareMessage    : 'share',
+					reviewRequested : 'YES'
+				};
+
+				const testBrew = {
+					shareId      : 'shareId',
+					title        : 'title',
+					markModified : ()=>{ return true; },
+					save         : ()=>{ return Promise.resolve(); },
+					lock         : testLock
+				};
+
+				jest.spyOn(HomebrewModel, 'findOne')
+					.mockImplementationOnce(()=>{
+						return Promise.resolve(false);
+					});
+
+
+				const response = await app
+					.put(`/api/lock/review/request/${testBrew.shareId}`)
+					.catch((err)=>{return err;});
+
+				expect(response.status).toBe(500);
+				expect(response.body).toEqual({
+					HBErrorCode : '70',
+					code        : 500,
+					message     : `Cannot find a locked brew with ID ${testBrew.shareId}`,
+					name        : 'Brew Not Found',
+					originalUrl : `/api/lock/review/request/${testBrew.shareId}`
+				});
+			});
+
+			it('Handle error while adding review request to a locked brew', async ()=>{
+				const testLock = {
+					applied      : 'YES',
+					code         : 999,
+					editMessage  : 'edit',
+					shareMessage : 'share'
+				};
+
+				const testBrew = {
+					shareId      : 'shareId',
+					title        : 'title',
+					markModified : ()=>{ return true; },
+					save         : ()=>{ return Promise.reject(); },
+					lock         : testLock
+				};
+
+				jest.spyOn(HomebrewModel, 'findOne')
+					.mockImplementationOnce(()=>{
+						return Promise.resolve(testBrew);
+					});
+
+				const response = await app
+					.put(`/api/lock/review/request/${testBrew.shareId}`);
+
+				expect(response.status).toBe(500);
+				expect(response.body).toEqual({
+					HBErrorCode : '69',
+					code        : 500,
+					message     : `Unable to set request for review on brew ID ${testBrew.shareId}`,
+					name        : 'Can Not Set Review Request',
+					originalUrl : `/api/lock/review/request/${testBrew.shareId}`
+				});
+			});
+
+			it('Clear review request from a locked brew', async ()=>{
+				const testLock = {
+					applied         : 'YES',
+					code            : 999,
+					editMessage     : 'edit',
+					shareMessage    : 'share',
+					reviewRequested : 'YES'
+				};
+
+				const testBrew = {
+					shareId      : 'shareId',
+					title        : 'title',
+					markModified : ()=>{ return true; },
+					save         : ()=>{ return Promise.resolve(); },
+					lock         : testLock
+				};
+
+				jest.spyOn(HomebrewModel, 'findOne')
+					.mockImplementationOnce(()=>{
+						return Promise.resolve(testBrew);
+					});
+
+				const response = await app
+					.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`)
+					.put(`/api/lock/review/remove/${testBrew.shareId}`);
+
+				expect(response.status).toBe(200);
+				expect(response.body).toEqual({
+					message : `Review request removed for brew ID ${testBrew.shareId} - ${testBrew.title}`,
+					name    : 'Review Request Cleared'
+				});
+			});
+
+			it('Error when clearing review request from a brew with no review request', async ()=>{
+				const testBrew = {
+					shareId : 'shareId',
+				};
+
+				jest.spyOn(HomebrewModel, 'findOne')
+					.mockImplementationOnce(()=>{
+						return Promise.resolve(false);
+					});
+
+				const response = await app
+					.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`)
+					.put(`/api/lock/review/remove/${testBrew.shareId}`);
+
+				expect(response.status).toBe(500);
+				expect(response.body).toEqual({
+					HBErrorCode : '73',
+					message     : `Brew ID ${testBrew.shareId} does not have a review pending!`,
+					name        : 'Can Not Clear Review Request',
+					originalUrl : `/api/lock/review/remove/${testBrew.shareId}`
+				});
+			});
+
+			it('Handle error while clearing review request from a locked brew', async ()=>{
+				const testLock = {
+					applied         : 'YES',
+					code            : 999,
+					editMessage     : 'edit',
+					shareMessage    : 'share',
+					reviewRequested : 'YES'
+				};
+
+				const testBrew = {
+					shareId      : 'shareId',
+					title        : 'title',
+					markModified : ()=>{ return true; },
+					save         : ()=>{ return Promise.reject(); },
+					lock         : testLock
+				};
+
+				jest.spyOn(HomebrewModel, 'findOne')
+					.mockImplementationOnce(()=>{
+						return Promise.resolve(testBrew);
+					});
+
+				const response = await app
+					.set('Authorization', `Basic ${Buffer.from('admin:password3').toString('base64')}`)
+					.put(`/api/lock/review/remove/${testBrew.shareId}`);
+
+				expect(response.status).toBe(500);
+				expect(response.body).toEqual({
+					HBErrorCode : '72',
+					message     : `Unable to remove request for review on brew ID ${testBrew.shareId}`,
+					name        : 'Can Not Clear Review Request',
+					originalUrl : `/api/lock/review/remove/${testBrew.shareId}`
+				});
+			});
+		});
+	});
 });

server/app.js

@@ -2,7 +2,7 @@
 // Set working directory to project root
 import { dirname }       from 'path';
 import { fileURLToPath } from 'url';
-import packageJSON       from './../package.json' with { type: 'json' };
+import packageJSON from './../package.json' with { type: 'json' };
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 process.chdir(`${__dirname}/..`);
@@ -11,7 +11,6 @@ const version = packageJSON.version;
 import _       from 'lodash';
 import jwt     from 'jwt-simple';
 import express from 'express';
-import yaml    from 'js-yaml';
 import config  from './config.js';
 import fs      from 'fs-extra';
 
@@ -36,6 +35,7 @@ import contentNegotiation from './middleware/content-negotiation.js';
 import bodyParser         from 'body-parser';
 import cookieParser       from 'cookie-parser';
 import forceSSL           from './forcessl.mw.js';
+import dbCheck            from './middleware/dbCheck.js';
 
 
 const sanitizeBrew = (brew, accessType)=>{
@@ -70,13 +70,11 @@ const corsOptions = {
 			'https://homebrewery-stage.herokuapp.com',
 		];
 
-		if(isLocalEnvironment) {
-			allowedOrigins.push('http://localhost:8000', 'http://localhost:8010');
-		}
+		const localNetworkRegex = /^http:\/\/(localhost|127\.0\.0\.1|10\.\d+\.\d+\.\d+|192\.168\.\d+\.\d+|172\.(1[6-9]|2\d|3[0-1])\.\d+\.\d+):\d+$/;
 
 		const herokuRegex = /^https:\/\/(?:homebrewery-pr-\d+\.herokuapp\.com|naturalcrit-pr-\d+\.herokuapp\.com)$/; // Matches any Heroku app
 
-		if(!origin || allowedOrigins.includes(origin) || herokuRegex.test(origin)) {
+		if(!origin || allowedOrigins.includes(origin) || herokuRegex.test(origin) || (isLocalEnvironment && localNetworkRegex.test(origin))) {
 			callback(null, true);
 		} else {
 			console.log(origin, 'not allowed');
@@ -277,7 +275,7 @@ app.get('/metadata/:id', asyncHandler(getBrew('share')), (req, res)=>{
 app.get('/css/:id', asyncHandler(getBrew('share')), (req, res)=>{getCSS(req, res);});
 
 //User Page
-app.get('/user/:username', async (req, res, next)=>{
+app.get('/user/:username', dbCheck, async (req, res, next)=>{
 	const ownAccount = req.account && (req.account.username == req.params.username);
 
 	req.ogMeta = { ...defaultMetaTags,
@@ -349,10 +347,10 @@ app.get('/user/:username', async (req, res, next)=>{
 });
 
 //Change author name on brews
-app.put('/api/user/rename', async (req, res)=>{
+app.put('/api/user/rename', dbCheck, async (req, res)=>{
 	const { username, newUsername } = req.body;
 	const ownAccount = req.account && (req.account.username == newUsername);
-	
+
 	if(!username || !newUsername)
 		return res.status(400).json({ error: 'Username and newUsername are required.' });
 	if(!ownAccount)
@@ -386,6 +384,7 @@ app.get('/edit/:id', asyncHandler(getBrew('edit')), asyncHandler(async(req, res,
 		title       : req.brew.title || 'Untitled Brew',
 		description : req.brew.description || 'No description.',
 		image       : req.brew.thumbnail || defaultMetaTags.image,
+		locale      : req.brew.lang,
 		type        : 'article'
 	};
 
@@ -407,6 +406,7 @@ app.get('/new/:id', asyncHandler(getBrew('share')), asyncHandler(async(req, res,
 		renderer : req.brew.renderer,
 		theme    : req.brew.theme,
 		tags     : req.brew.tags,
+		snippets : req.brew.snippets
 	};
 	req.brew = _.defaults(brew, DEFAULT_BREW);
 
@@ -433,10 +433,10 @@ app.get('/new', asyncHandler(async(req, res, next)=>{
 }));
 
 //Share Page
-app.get('/share/:id', asyncHandler(getBrew('share')), asyncHandler(async (req, res, next)=>{
+app.get('/share/:id', dbCheck, asyncHandler(getBrew('share')), asyncHandler(async (req, res, next)=>{
 	const { brew } = req;
 	req.ogMeta = { ...defaultMetaTags,
-		title       : req.brew.title || 'Untitled Brew',
+		title       : `${req.brew.title || 'Untitled Brew'} - ${req.brew.authors[0] || 'No author.'}`,
 		description : req.brew.description || 'No description.',
 		image       : req.brew.thumbnail || defaultMetaTags.image,
 		type        : 'article'
@@ -460,7 +460,7 @@ app.get('/share/:id', asyncHandler(getBrew('share')), asyncHandler(async (req, r
 }));
 
 //Account Page
-app.get('/account', asyncHandler(async (req, res, next)=>{
+app.get('/account', dbCheck, asyncHandler(async (req, res, next)=>{
 	const data = {};
 	data.title = 'Account Information Page';
 
@@ -488,8 +488,8 @@ app.get('/account', asyncHandler(async (req, res, next)=>{
 		const query = { authors: req.account.username, googleId: { $exists: false } };
 		const mongoCount = await HomebrewModel.countDocuments(query)
 			.catch((err)=>{
-				mongoCount = 0;
 				console.log(err);
+				return 0;
 			});
 
 		data.accountDetails = {
@@ -563,8 +563,6 @@ const renderPage = async (req, res)=>{
 		brews         : req.brews,
 		googleBrews   : req.googleBrews,
 		account       : req.account,
-		enable_v3     : config.get('enable_v3'),
-		enable_themes : config.get('enable_themes'),
 		config        : configuration,
 		ogMeta        : req.ogMeta,
 		userThemes    : req.userThemes

server/db.js

@@ -22,16 +22,29 @@ const handleConnectionError = (error)=>{
 	}
 };
 
+const addListeners = (conn)=>{
+	conn.connection.on('disconnecting', ()=>{console.log('Mongo disconnecting...');});
+	conn.connection.on('disconnected', ()=>{console.log('Mongo disconnected!');});
+	conn.connection.on('connecting', ()=>{console.log('Mongo connecting...');});
+	conn.connection.on('connected', ()=>{console.log('Mongo connected!');});
+	return conn;
+};
+
 const disconnect = async ()=>{
 	return await Mongoose.disconnect();
 };
 
 const connect = async (config)=>{
-	return await Mongoose.connect(getMongoDBURL(config), { retryWrites: false })
-		.catch((error)=>handleConnectionError(error));
+	return await Mongoose.connect(getMongoDBURL(config), {
+		retryWrites : false,
+		autoIndex   : (config.get('local_environments').includes(config.get('node_env')))
+	})
+	.then(addListeners(Mongoose))
+	.catch((error)=>handleConnectionError(error));
 };
 
 export default {
 	connect,
 	disconnect
 };
+

server/forcessl.mw.spec.js

@@ -0,0 +1,66 @@
+import forceSSL from './forcessl.mw';
+
+describe('Tests for ForceSSL middleware', ()=>{
+	let originalEnv;
+	let nextFn;
+
+	let req = {};
+	let res = {};
+
+	beforeEach(()=>{
+		originalEnv = process.env.NODE_ENV;
+		nextFn = jest.fn();
+
+		req = {
+			header : ()=>{ return 'http'; },
+			get    : ()=>{ return 'test'; },
+			url    : 'URL'
+		};
+
+		res = {
+			redirect : jest.fn()
+		};
+	});
+	afterEach(()=>{
+		process.env.NODE_ENV = originalEnv;
+		jest.clearAllMocks();
+	});
+
+	it('should not redirect when NODE_ENV is set to local', ()=>{
+		process.env.NODE_ENV = 'local';
+
+		forceSSL(null, null, nextFn);
+
+		expect(res.redirect).not.toHaveBeenCalled();
+		expect(nextFn).toHaveBeenCalled();
+	});
+
+	it('should not redirect when NODE_ENV is set to docker', ()=>{
+		process.env.NODE_ENV = 'docker';
+
+		forceSSL(null, null, nextFn);
+
+		expect(res.redirect).not.toHaveBeenCalled();
+		expect(nextFn).toHaveBeenCalled();
+	});
+
+	it('should redirect with 302 when header is not HTTPS and NODE_ENV is not local or docker', ()=>{
+		process.env.NODE_ENV = 'test';
+
+		forceSSL(req, res, nextFn);
+
+		expect(res.redirect).toHaveBeenCalledWith(302, 'https://testURL');
+		expect(nextFn).not.toHaveBeenCalled();
+	});
+
+	it('should not redirect when header is HTTPS and NODE_ENV is not local or docker', ()=>{
+		process.env.NODE_ENV = 'test';
+		req.header = ()=>{ return 'https'; };
+
+		forceSSL(req, res, nextFn);
+
+		expect(res.redirect).not.toHaveBeenCalled();
+		expect(nextFn).toHaveBeenCalled();
+	});
+
+});

server/googleActions.js

@@ -27,12 +27,12 @@ if(!config.get('service_account')){
 const defaultAuth = serviceAuth || config.get('google_api_key');
 
 const retryConfig = {
-  retry: 3, // Number of retry attempts
-  retryDelay: 100, // Initial delay in milliseconds
-  retryDelayMultiplier: 2, // Multiplier for exponential backoff
-  maxRetryDelay: 32000, // Maximum delay in milliseconds
-  httpMethodsToRetry: ['PATCH'], // Only retry PATCH requests
-  statusCodesToRetry: [[429, 429]], // Only retry on 429 status code
+	retry                : 3, // Number of retry attempts
+	retryDelay           : 100, // Initial delay in milliseconds
+	retryDelayMultiplier : 2, // Multiplier for exponential backoff
+	maxRetryDelay        : 32000, // Maximum delay in milliseconds
+	httpMethodsToRetry   : ['PATCH'], // Only retry PATCH requests
+	statusCodesToRetry   : [[429, 429]], // Only retry on 429 status code
 };
 
 const GoogleActions = {
@@ -177,8 +177,8 @@ const GoogleActions = {
 				mimeType : 'text/plain',
 				body     : brew.text
 			},
-			headers: {
-				'X-Forwarded-For': userIp, // Set the X-Forwarded-For header
+			headers : {
+				'X-Forwarded-For' : userIp, // Set the X-Forwarded-For header
 			},
 			retryConfig
 		})

server/homebrew.api.js

@@ -4,12 +4,17 @@ import { model as HomebrewModel }    from './homebrew.model.js';
 import express                       from 'express';
 import zlib                          from 'zlib';
 import GoogleActions                 from './googleActions.js';
-import Markdown                      from '../shared/naturalcrit/markdown.js';
+import Markdown                      from '../shared/markdown.js';
 import yaml                          from 'js-yaml';
 import asyncHandler                  from 'express-async-handler';
 import { nanoid }                    from 'nanoid';
-import { splitTextStyleAndMetadata } from '../shared/helpers.js';
+import { makePatches, applyPatches, stringifyPatches, parsePatch } from '@sanity/diff-match-patch';
+import { md5 }                       from 'hash-wasm';
+import { splitTextStyleAndMetadata,
+		 brewSnippetsToJSON, debugTextMismatch }        from '../shared/helpers.js';
 import checkClientVersion            from './middleware/check-client-version.js';
+import dbCheck                       from './middleware/dbCheck.js';
+
 
 const router = express.Router();
 
@@ -44,6 +49,20 @@ const api = {
 			}
 			id = id.slice(googleId.length);
 		}
+
+		// ID Validation Checks
+		// Homebrewery ID
+		// Typically 12 characters, but the DB shows a range of 7 to 14 characters
+		if(!id.match(/^[a-zA-Z0-9-_]{7,14}$/)){
+			throw { name: 'ID Error', message: 'Invalid ID', status: 404, HBErrorCode: '11', brewId: id };
+		}
+		// Google ID
+		// Typically 33 characters, old format is 44 - always starts with a 1
+		// Managed by Google, may change outside of our control, so any length between 33 and 44 is acceptable
+		if(googleId && !googleId.match(/^1(?:[a-zA-Z0-9-_]{32,43})$/)){
+			throw { name: 'Google ID Error', message: 'Invalid ID', status: 404, HBErrorCode: '12', brewId: id };
+		}
+
 		return { id, googleId };
 	},
 	//Get array of any of this user's brews tagged with `meta:theme`
@@ -92,7 +111,7 @@ const api = {
 			const accessMap = {
 				edit  : { editId: id },
 				share : { shareId: id },
-				admin : { $or : [{ editId: id }, { shareId: id }] }
+				admin : { $or: [{ editId: id }, { shareId: id }] }
 			};
 
 			// Try to find the document in the Homebrewery database -- if it doesn't exist, that's fine.
@@ -118,8 +137,8 @@ const api = {
 					throw { ...accessError, message: 'User is not logged in', HBErrorCode: '04' };
 			}
 
-			if(stub?.lock?.locked && accessType != 'edit') {
-				throw { HBErrorCode: '51', code: stub?.lock.code, message: stub?.lock.shareMessage, brewId: stub?.shareId, brewTitle: stub?.title };
+			if(stub?.lock && accessType === 'share') {
+				throw { HBErrorCode: '51', code: stub.lock.code, message: stub.lock.shareMessage, brewId: stub.shareId, brewTitle: stub.title, brewAuthors: stub.authors };
 			}
 
 			// If there's a google id, get it if requesting the full brew or if no stub found yet
@@ -175,12 +194,15 @@ const api = {
 				`${text}`;
 		}
 		const metadata = _.pick(brew, ['title', 'description', 'tags', 'systems', 'renderer', 'theme']);
+		const snippetsArray = brewSnippetsToJSON('brew_snippets', brew.snippets, null, false).snippets;
+		metadata.snippets = snippetsArray.length > 0 ? snippetsArray : undefined;
 		text = `\`\`\`metadata\n` +
 			`${yaml.dump(metadata)}\n` +
 			`\`\`\`\n\n` +
 			`${text}`;
 		return text;
 	},
+
 	getGoodBrewTitle : (text)=>{
 		const tokens = Markdown.marked.lexer(text);
 		return (tokens.find((token)=>token.type === 'heading' || token.type === 'paragraph')?.text || 'No Title')
@@ -294,13 +316,13 @@ const api = {
 
 				currentTheme = req.brew;
 				splitTextStyleAndMetadata(currentTheme);
-				if(!currentTheme.tags.some(tag => tag === "meta:theme" || tag === "meta:Theme"))
+				if(!currentTheme.tags.some((tag)=>tag === 'meta:theme' || tag === 'meta:Theme'))
 					throw { brewId: req.params.id, name: 'Invalid Theme Selected', message: 'Selected theme does not have the meta:theme tag', status: 422, HBErrorCode: '10' };
 				themeName   ??= currentTheme.title;
 				themeAuthor ??= currentTheme.authors?.[0];
 
 				// If there is anything in the snippets or style members, append them to the appropriate array
-				if(currentTheme?.snippets) completeSnippets.push(JSON.parse(currentTheme.snippets));
+				if(currentTheme?.snippets) completeSnippets.push({ name: currentTheme.title, snippets: currentTheme.snippets });
 				if(currentTheme?.style) completeStyles.push(`/* From Brew: ${req.protocol}://${req.get('host')}/share/${req.params.id} */\n\n${currentTheme.style}`);
 
 				req.params.id       = currentTheme.theme;
@@ -332,21 +354,52 @@ const api = {
 		// Initialize brew from request and body, destructure query params, and set the initial value for the after-save method
 		const brewFromClient = api.excludePropsFromUpdate(req.body);
 		const brewFromServer = req.brew;
-		if(brewFromServer.version && brewFromClient.version && brewFromServer.version > brewFromClient.version) {
+		splitTextStyleAndMetadata(brewFromServer);
+
+		if(brewFromServer?.version !== brewFromClient?.version){
 			console.log(`Version mismatch on brew ${brewFromClient.editId}`);
+
 			res.setHeader('Content-Type', 'application/json');
-			return res.status(409).send(JSON.stringify({ message: `The brew has been changed on a different device. Please save your changes elsewhere, refresh, and try again.` }));
+			return res.status(409).send(JSON.stringify({ message: `The server version is out of sync with the saved brew. Please save your changes elsewhere, refresh, and try again.` }));
 		}
 
-		let brew = _.assign(brewFromServer, brewFromClient);
+		brewFromServer.text  = brewFromServer.text.normalize('NFC');
+		brewFromServer.hash  = await md5(brewFromServer.text);
+
+		if(brewFromServer?.hash !== brewFromClient?.hash) {
+			console.log(`Hash mismatch on brew ${brewFromClient.editId}`);
+			//debugTextMismatch(brewFromClient.text, brewFromServer.text, `edit/${brewFromClient.editId}`);
+			res.setHeader('Content-Type', 'application/json');
+			return res.status(409).send(JSON.stringify({ message: `The server copy is out of sync with the saved brew. Please save your changes elsewhere, refresh, and try again.` }));
+		}
+
+		try {
+			const patches = parsePatch(brewFromClient.patches);
+			// Patch to a throwaway variable while parallelizing - we're more concerned with error/no error.
+			const patchedResult = decodeURI(applyPatches(patches, encodeURI(brewFromServer.text))[0]);
+			if(patchedResult != brewFromClient.text)
+				throw ('Patches did not apply cleanly, text mismatch detected');
+			// brew.text = applyPatches(patches, brewFromServer.text)[0];
+		} catch (err) {
+			//debugTextMismatch(brewFromClient.text, brewFromServer.text, `edit/${brewFromClient.editId}`);
+			console.error('Failed to apply patches:', {
+				//patches : brewFromClient.patches,
+				brewId : brewFromClient.editId || 'unknown',
+				error  : err
+			});
+			// While running in parallel, don't throw the error upstream.
+			// throw err; // rethrow to preserve the 500 behavior
+		}
+
+		let brew         = _.assign(brewFromServer, brewFromClient);
+		brew.title       = brew.title.trim();
+		brew.description = brew.description.trim() || '';
+		brew.text        = api.mergeBrewText(brew);
+
 		const googleId = brew.googleId;
 		const { saveToGoogle, removeFromGoogle } = req.query;
 		let afterSave = async ()=>true;
 
-		brew.title = brew.title.trim();
-		brew.description = brew.description.trim() || '';
-		brew.text = api.mergeBrewText(brew);
-
 		if(brew.googleId && removeFromGoogle) {
 			// If the google id exists and we're removing it from google, set afterSave to delete the google brew and mark the brew's google id as undefined
 			afterSave = async ()=>{
@@ -407,6 +460,8 @@ const api = {
 		const after = await afterSave();
 		if(!after) return;
 
+		saved.textBin = undefined; // Remove textBin from the saved object to save bandwidth
+
 		res.status(200).send(saved);
 	},
 	deleteGoogleBrew : async (account, id, editId, res)=>{
@@ -426,6 +481,7 @@ const api = {
 				await HomebrewModel.deleteOne({ editId: id });
 				return next();
 			}
+			throw(err);
 		}
 
 		let brew = req.brew;
@@ -476,11 +532,13 @@ const api = {
 	}
 };
 
+router.use(dbCheck);
+
 router.post('/api', checkClientVersion, asyncHandler(api.newBrew));
-router.put('/api/:id', checkClientVersion, asyncHandler(api.getBrew('edit', true)), asyncHandler(api.updateBrew));
-router.put('/api/update/:id', checkClientVersion, asyncHandler(api.getBrew('edit', true)), asyncHandler(api.updateBrew));
+router.put('/api/:id', checkClientVersion, asyncHandler(api.getBrew('edit', false)), asyncHandler(api.updateBrew));
+router.put('/api/update/:id', checkClientVersion, asyncHandler(api.getBrew('edit', false)), asyncHandler(api.updateBrew));
 router.delete('/api/:id', checkClientVersion, asyncHandler(api.deleteBrew));
 router.get('/api/remove/:id', checkClientVersion, asyncHandler(api.deleteBrew));
 router.get('/api/theme/:renderer/:id', asyncHandler(api.getThemeBundle));
 
-export default api;
+export default api;

server/homebrew.api.spec.js

@@ -99,18 +99,87 @@ describe('Tests for api', ()=>{
 			expect(googleId).toBeUndefined();
 		});
 
+		it('should throw if id is too short', ()=>{
+			let err;
+			try {
+				api.getId({
+					params : {
+						id : 'abcd'
+					}
+				});
+			} catch (e) {
+				err = e;
+			};
+
+			expect(err).toEqual({ HBErrorCode: '11', brewId: 'abcd', message: 'Invalid ID', name: 'ID Error', status: 404 });
+		});
+
 		it('should return id and google id from request body', ()=>{
 			const { id, googleId } = api.getId({
 				params : {
-					id : 'abcdefgh'
+					id : 'abcdefghijkl'
 				},
 				body : {
-					googleId : '12345'
+					googleId : '123456789012345678901234567890123'
 				}
 			});
 
-			expect(id).toEqual('abcdefgh');
-			expect(googleId).toEqual('12345');
+			expect(id).toEqual('abcdefghijkl');
+			expect(googleId).toEqual('123456789012345678901234567890123');
+		});
+
+		it('should throw invalid - google id right length but does not match pattern', ()=>{
+			let err;
+			try {
+				api.getId({
+					params : {
+						id : 'abcdefghijkl'
+					},
+					body : {
+						googleId : '012345678901234567890123456789012'
+					}
+				});
+			} catch (e) {
+				err = e;
+			}
+
+			expect(err).toEqual({ HBErrorCode: '12', brewId: 'abcdefghijkl', message: 'Invalid ID', name: 'Google ID Error', status: 404 });
+		});
+
+		it('should throw invalid - google id too short (32 char)', ()=>{
+			let err;
+			try {
+				api.getId({
+					params : {
+						id : 'abcdefghijkl'
+					},
+					body : {
+						googleId : '12345678901234567890123456789012'
+					}
+				});
+			} catch (e) {
+				err = e;
+			}
+
+			expect(err).toEqual({ HBErrorCode: '12', brewId: 'abcdefghijkl', message: 'Invalid ID', name: 'Google ID Error', status: 404 });
+		});
+
+		it('should throw invalid - google id too long (45 char)', ()=>{
+			let err;
+			try {
+				api.getId({
+					params : {
+						id : 'abcdefghijkl'
+					},
+					body : {
+						googleId : '123456789012345678901234567890123456789012345'
+					}
+				});
+			} catch (e) {
+				err = e;
+			}
+
+			expect(err).toEqual({ HBErrorCode: '12', brewId: 'abcdefghijkl', message: 'Invalid ID', name: 'Google ID Error', status: 404 });
 		});
 
 		it('should return 12-char id and google id from params', ()=>{
@@ -302,7 +371,7 @@ describe('Tests for api', ()=>{
 		});
 
 		it('access is denied to a locked brew', async()=>{
-			const lockBrew = { title: 'test brew', shareId: '1', lock: { locked: true, code: 404, shareMessage: 'brew locked' } };
+			const lockBrew = { title: 'test brew', shareId: '1', lock: { code: 404, shareMessage: 'brew locked' } };
 			model.get = jest.fn(()=>toBrewPromise(lockBrew));
 			api.getId = jest.fn(()=>({ id: '1', googleId: undefined }));
 
@@ -939,7 +1008,7 @@ brew`);
 	});
 	describe('Get CSS', ()=>{
 		it('should return brew style content as CSS text', async ()=>{
-			const testBrew = { title: 'test brew', text: '```css\n\nI Have a style!\n````\n\n' };
+			const testBrew = { title: 'test brew', text: '```css\n\nI Have a style!\n```\n\n' };
 
 			const toBrewPromise = (brew)=>new Promise((res)=>res({ toObject: ()=>brew }));
 			api.getId = jest.fn(()=>({ id: '1', googleId: undefined }));
@@ -1034,7 +1103,7 @@ brew`);
 			expect(testBrew.theme).toEqual('5ePHB');
 			expect(testBrew.lang).toEqual('en');
 			// Style
-			expect(testBrew.style).toEqual('style\nstyle\nstyle');
+			expect(testBrew.style).toEqual('style\nstyle\nstyle\n');
 			// Text
 			expect(testBrew.text).toEqual('text\n');
 		});
@@ -1052,4 +1121,83 @@ brew`);
 			expect(testBrew.tags).toEqual(['tag a']);
 		});
 	});
+
+	describe('updateBrew', ()=>{
+		it('should return error on version mismatch', async ()=>{
+			const brewFromClient = { version: 1 };
+			const brewFromServer = { version: 1000, text: '' };
+
+			const req = {
+				brew : brewFromServer,
+				body : brewFromClient
+			};
+
+			await api.updateBrew(req, res);
+
+			expect(res.status).toHaveBeenCalledWith(409);
+			expect(res.send).toHaveBeenCalledWith('{\"message\":\"The server version is out of sync with the saved brew. Please save your changes elsewhere, refresh, and try again.\"}');
+		});
+
+		it('should return error on hash mismatch', async ()=>{
+			const brewFromClient = { version: 1, hash: '1234' };
+			const brewFromServer = { version: 1, text: 'test' };
+
+			const req = {
+				brew : brewFromServer,
+				body : brewFromClient
+			};
+
+			await api.updateBrew(req, res);
+
+			expect(req.brew.hash).toBe('098f6bcd4621d373cade4e832627b4f6');
+			expect(res.status).toHaveBeenCalledWith(409);
+			expect(res.send).toHaveBeenCalledWith('{\"message\":\"The server copy is out of sync with the saved brew. Please save your changes elsewhere, refresh, and try again.\"}');
+		});
+
+		// Commenting this one out for now, since we are no longer throwing this error while we monitor
+		// it('should return error on applying patches', async ()=>{
+		// 	const brewFromClient = { version: 1, hash: '098f6bcd4621d373cade4e832627b4f6', patches: 'not a valid patch string' };
+		// 	const brewFromServer = { version: 1, text: 'test', title: 'Test Title', description: 'Test Description' };
+
+		// 	const req = {
+		// 		brew  : brewFromServer,
+		// 		body  : brewFromClient,
+		// 	};
+
+		// 	let err;
+		// 	try {
+		// 		await api.updateBrew(req, res);
+		// 	} catch (e) {
+		// 		err = e;
+		// 	}
+
+		// 	expect(err).toEqual(Error('Invalid patch string: not a valid patch string'));
+		// });
+
+		it('should save brew, no ID', async ()=>{
+			const brewFromClient = { version: 1, hash: '098f6bcd4621d373cade4e832627b4f6', patches: '' };
+			const brewFromServer = { version: 1, text: 'test', title: 'Test Title', description: 'Test Description' };
+
+			model.save = jest.fn((brew)=>{return brew;});
+
+			const req = {
+				brew  : brewFromServer,
+				body  : brewFromClient,
+				query : { saveToGoogle: false, removeFromGoogle: false }
+			};
+
+			await api.updateBrew(req, res);
+
+			expect(res.status).toHaveBeenCalledWith(200);
+			expect(res.send).toHaveBeenCalledWith(
+				expect.objectContaining({
+					_id         : '1',
+					description : 'Test Description',
+					hash        : '098f6bcd4621d373cade4e832627b4f6',
+					title       : 'Test Title',
+					version     : 2
+				})
+			);
+		});
+	});
 });

server/homebrew.model.js

@@ -7,27 +7,29 @@ import zlib       from 'zlib';
 const HomebrewSchema = mongoose.Schema({
 	shareId   : { type: String, default: ()=>{return nanoid(12);}, index: { unique: true } },
 	editId    : { type: String, default: ()=>{return nanoid(12);}, index: { unique: true } },
-	googleId  : { type: String },
-	title     : { type: String, default: '' },
+	googleId  : { type: String, index: true },
+	title     : { type: String, default: '', index: true },
 	text      : { type: String, default: '' },
 	textBin   : { type: Buffer },
-	pageCount : { type: Number, default: 1 },
+	pageCount : { type: Number, default: 1, index: true },
 
 	description    : { type: String, default: '' },
-	tags           : [String],
+	tags           : { type: [String], index: true },
 	systems        : [String],
-	lang           : { type: String, default: 'en' },
-	renderer       : { type: String, default: '' },
-	authors        : [String],
+	lang           : { type: String, default: 'en', index: true },
+	renderer       : { type: String, default: '', index: true },
+	authors        : { type: [String], index: true },
 	invitedAuthors : [String],
-	published      : { type: Boolean, default: false },
-	thumbnail      : { type: String, default: '' },
+	published      : { type: Boolean, default: false, index: true },
+	thumbnail      : { type: String, default: '', index: true },
 
-	createdAt  : { type: Date, default: Date.now },
-	updatedAt  : { type: Date, default: Date.now },
-	lastViewed : { type: Date, default: Date.now },
+	createdAt  : { type: Date, default: Date.now, index: true },
+	updatedAt  : { type: Date, default: Date.now, index: true },
+	lastViewed : { type: Date, default: Date.now, index: true },
 	views      : { type: Number, default: 0 },
-	version    : { type: Number, default: 1 }
+	version    : { type: Number, default: 1, index: true },
+
+	lock : { type: Object, index: true }
 }, { versionKey: false });
 
 HomebrewSchema.statics.increaseView = async function(query) {
@@ -41,6 +43,8 @@ HomebrewSchema.statics.increaseView = async function(query) {
 	return brew;
 };
 
+// STATIC FUNCTIONS
+
 HomebrewSchema.statics.get = async function(query, fields=null){
 	const brew = await Homebrew.findOne(query, fields).orFail()
 		.catch((error)=>{throw 'Can not find brew';});
@@ -61,9 +65,18 @@ HomebrewSchema.statics.getByUser = async function(username, allowAccess=false, f
 	return brews;
 };
 
+// INDEXES
+
+HomebrewSchema.index({ updatedAt: -1, lastViewed: -1 });
+HomebrewSchema.index({ published: 1, title: 'text' });
+
+HomebrewSchema.index({ lock: 1, sparse: true });
+HomebrewSchema.path('lock.reviewRequested').index({ sparse: true });
+
+
 const Homebrew = mongoose.model('Homebrew', HomebrewSchema);
 
-export { 
+export {
 	HomebrewSchema as schema,
 	Homebrew       as model
 };

server/middleware/dbCheck.js

@@ -0,0 +1,15 @@
+import mongoose from 'mongoose';
+import config from '../config.js';
+
+export default (req, res, next)=>{
+	// Bypass DB checks during testing
+	if(config.get('node_env') == 'test') return next();
+
+	if(mongoose.connection.readyState == 1) return next();
+	throw {
+		HBErrorCode : '13',
+		name        : 'Database Connection Error',
+		message     : 'Unable to connect to database',
+		status      : mongoose.connection.readyState
+	};
+};

server/middleware/dbCheck.spec.js

@@ -0,0 +1,28 @@
+import mongoose from 'mongoose';
+import dbCheck from './dbCheck.js';
+import config from '../config.js';
+
+describe('dbCheck middleware', ()=>{
+	const next = jest.fn();
+
+	afterEach(()=>jest.clearAllMocks());
+
+	it('should skip check in test mode', ()=>{
+		config.get = jest.fn(()=>'test');
+		expect(()=>dbCheck({}, {}, next)).not.toThrow();
+		expect(next).toHaveBeenCalled();
+	});
+
+	it('should call next if readyState == 1', ()=>{
+		config.get = jest.fn(()=>'production');
+		mongoose.connection.readyState = 1;
+		dbCheck({}, {}, next);
+		expect(next).toHaveBeenCalled();
+	});
+
+	it('should throw if readyState != 1', ()=>{
+		config.get = jest.fn(()=>'production');
+		mongoose.connection.readyState = 99;
+		expect(()=>dbCheck({}, {}, next)).toThrow(/Unable to connect/);
+	});
+});

server/token.js

@@ -5,21 +5,16 @@ import config from './config.js';
 const generateAccessToken = (account)=>{
 	const payload = account;
 
-	// When the token was issued
-	payload.issued = (new Date());
-	// Which service issued the Token
-	payload.issuer = config.get('authentication_token_issuer');
-	// Which service is the token intended for
-	payload.audience = config.get('authentication_token_audience');
-	// The signing key for signing the token
+	payload.issued = (new Date());                              	// When the token was issued
+	payload.issuer = config.get('authentication_token_issuer');     // Which service issued the Token
+	payload.audience = config.get('authentication_token_audience'); // Which service is the token intended for
+	const secret = config.get('authentication_token_secret');       // The signing key for signing the token
+
 	delete payload.password;
 	delete payload._id;
 
-	const secret = config.get('authentication_token_secret');
-
 	const token = jwt.encode(payload, secret);
-
 	return token;
 };
 
-export default generateAccessToken;
+export default generateAccessToken;

server/token.spec.js

@@ -0,0 +1,27 @@
+import { expect, jest } from '@jest/globals';
+import config from './config.js';
+
+import generateAccessToken from './token';
+
+describe('Tests for Token', ()=>{
+	it('Get token', ()=>{
+
+		// Mock the Config module, so we aren't grabbing actual secrets for testing
+		jest.mock('./config.js');
+		config.get = jest.fn((param)=>{
+			// The requested key name will be reflected to the output
+			return param;
+		});
+
+		const account = {};
+
+		const token = generateAccessToken(account);
+
+		// If these tests fail, the config mock has failed
+		expect(account).toHaveProperty('issuer', 'authentication_token_issuer');
+		expect(account).toHaveProperty('audience', 'authentication_token_audience');
+
+		// Because the inputs are fixed, this JWT key should be static
+		expect(typeof token).toBe('string');
+	});
+});

server/vault.api.js

@@ -1,6 +1,6 @@
 import express    from 'express';
 import asyncHandler from 'express-async-handler';
-import {model as HomebrewModel }     from './homebrew.model.js';
+import { model as HomebrewModel }     from './homebrew.model.js';
 
 const router = express.Router();
 
@@ -29,7 +29,7 @@ const rendererConditions = (legacy, v3)=>{
 	return {}; // If all renderers selected, renderer field not needed in query for speed
 };
 
-const sortConditions = (sort, dir) => {
+const sortConditions = (sort, dir)=>{
 	return { [sort]: dir === 'asc' ? 1 : -1 };
 };
 

shared/helpers.js

@@ -2,24 +2,103 @@ import _       from 'lodash';
 import yaml    from 'js-yaml';
 import request from '../client/homebrew/utils/request-middleware.js';
 
+// Convert the templates from a brew to a Snippets Structure.
+const brewSnippetsToJSON = (menuTitle, userBrewSnippets, themeBundleSnippets=null, full=true)=>{
+	const textSplit  = /^(\\snippet +.+\n)/gm;
+	const mpAsSnippets = [];
+	// Snippets from Themes first.
+	if(themeBundleSnippets) {
+		for (const themes of themeBundleSnippets) {
+			if(typeof themes !== 'string') {
+				const userSnippets = [];
+				const snipSplit = themes.snippets.trim().split(textSplit).slice(1);
+				for (let snips = 0; snips < snipSplit.length; snips+=2) {
+					if(!snipSplit[snips].startsWith('\\snippet ')) break;
+					const snippetName = snipSplit[snips].split(/\\snippet +/)[1].split('\n')[0].trim();
+					if(snippetName.length != 0) {
+						userSnippets.push({
+							name : snippetName,
+							icon : '',
+							gen  : snipSplit[snips + 1],
+						});
+					}
+				}
+				if(userSnippets.length > 0) {
+					mpAsSnippets.push({
+						name        : themes.name,
+						icon        : '',
+						gen         : '',
+						subsnippets : userSnippets
+					});
+				}
+			}
+		}
+	}
+	// Local Snippets
+	if(userBrewSnippets) {
+		const userSnippets = [];
+		const snipSplit = userBrewSnippets.trim().split(textSplit).slice(1);
+		for (let snips = 0; snips < snipSplit.length; snips+=2) {
+			if(!snipSplit[snips].startsWith('\\snippet ')) break;
+			const snippetName = snipSplit[snips].split(/\\snippet +/)[1].split('\n')[0].trim();
+			if(snippetName.length != 0) {
+				const subSnip = {
+					name : snippetName,
+					gen  : snipSplit[snips + 1],
+				};
+				// if(full) subSnip.icon = '';
+				userSnippets.push(subSnip);
+			}
+		}
+		if(userSnippets.length) {
+			mpAsSnippets.push({
+				name        : menuTitle,
+				// icon        : '',
+				subsnippets : userSnippets
+			});
+		}
+	}
+
+	const returnObj = {
+		snippets : mpAsSnippets
+	};
+
+	if(full) {
+		returnObj.groupName = 'Brew Snippets';
+		returnObj.icon = 'fas fa-th-list';
+		returnObj.view = 'text';
+	}
+
+	return returnObj;
+};
+
+const yamlSnippetsToText = (yamlObj)=>{
+	if(typeof yamlObj == 'string') return yamlObj;
+
+	let snippetsText = '';
+
+	for (const snippet of yamlObj) {
+		for (const subSnippet of snippet.subsnippets) {
+			snippetsText = `${snippetsText}\\snippet ${subSnippet.name}\n${subSnippet.gen || ''}\n`;
+		}
+	}
+	return snippetsText;
+};
+
 const splitTextStyleAndMetadata = (brew)=>{
 	brew.text = brew.text.replaceAll('\r\n', '\n');
 	if(brew.text.startsWith('```metadata')) {
-		const index = brew.text.indexOf('```\n\n');
-		const metadataSection = brew.text.slice(12, index - 1);
+		const index = brew.text.indexOf('\n```\n\n');
+		const metadataSection = brew.text.slice(11, index + 1);
 		const metadata = yaml.load(metadataSection);
 		Object.assign(brew, _.pick(metadata, ['title', 'description', 'tags', 'systems', 'renderer', 'theme', 'lang']));
-		brew.text = brew.text.slice(index + 5);
+		brew.snippets = yamlSnippetsToText(_.pick(metadata, ['snippets']).snippets || '');
+		brew.text = brew.text.slice(index + 6);
 	}
 	if(brew.text.startsWith('```css')) {
-		const index = brew.text.indexOf('```\n\n');
-		brew.style = brew.text.slice(7, index - 1);
-		brew.text = brew.text.slice(index + 5);
-	}
-	if(brew.text.startsWith('```snippets')) {
-		const index = brew.text.indexOf('```\n\n');
-		brew.snippets = brew.text.slice(11, index - 1);
-		brew.text = brew.text.slice(index + 5);
+		const index = brew.text.indexOf('\n```\n\n');
+		brew.style = brew.text.slice(7, index + 1);
+		brew.text = brew.text.slice(index + 6);
 	}
 
 	// Handle old brews that still have empty strings in the tags metadata
@@ -37,31 +116,62 @@ const printCurrentBrew = ()=>{
 	}
 };
 
-const fetchThemeBundle = async (obj, renderer, theme)=>{
+const fetchThemeBundle = async (setError, setThemeBundle, renderer, theme)=>{
 	if(!renderer || !theme) return;
 	const res = await request
 			.get(`/api/theme/${renderer}/${theme}`)
 			.catch((err)=>{
-				obj.setState({ error: err });
+				setError(err);
 			});
 	if(!res) {
-		obj.setState((prevState)=>({
-			...prevState,
-			themeBundle : {}
-		}));
+		setThemeBundle({});
 		return;
 	}
 	const themeBundle = res.body;
 	themeBundle.joinedStyles = themeBundle.styles.map((style)=>`<style>${style}</style>`).join('\n\n');
-	obj.setState((prevState)=>({
-		...prevState,
-		themeBundle : themeBundle,
-		error       : null
-	}));
+	setThemeBundle(themeBundle);
+	setError(null);
+};
+
+const debugTextMismatch = (clientTextRaw, serverTextRaw, label)=>{
+	const clientText = clientTextRaw?.normalize('NFC') || '';
+	const serverText = serverTextRaw?.normalize('NFC') || '';
+
+	const clientBuffer = Buffer.from(clientText, 'utf8');
+	const serverBuffer = Buffer.from(serverText, 'utf8');
+
+	if(clientBuffer.equals(serverBuffer)) {
+		console.log(`✅ ${label} text matches byte-for-byte.`);
+		return;
+	}
+
+	console.warn(`❗${label} text mismatch detected.`);
+	console.log(`Client length: ${clientBuffer.length}`);
+	console.log(`Server length: ${serverBuffer.length}`);
+
+	// Byte-level diff
+	for (let i = 0; i < Math.min(clientBuffer.length, serverBuffer.length); i++) {
+		if(clientBuffer[i] !== serverBuffer[i]) {
+			console.log(`Byte mismatch at offset ${i}: client=0x${clientBuffer[i].toString(16)} server=0x${serverBuffer[i].toString(16)}`);
+			break;
+		}
+	}
+
+	// Char-level diff
+	for (let i = 0; i < Math.min(clientText.length, serverText.length); i++) {
+		if(clientText[i] !== serverText[i]) {
+			console.log(`Char mismatch at index ${i}:`);
+			console.log(`  Client: '${clientText[i]}' (U+${clientText.charCodeAt(i).toString(16).toUpperCase()})`);
+			console.log(`  Server: '${serverText[i]}' (U+${serverText.charCodeAt(i).toString(16).toUpperCase()})`);
+			break;
+		}
+	}
 };
 
 export {
 	splitTextStyleAndMetadata,
 	printCurrentBrew,
 	fetchThemeBundle,
+	brewSnippetsToJSON,
+	debugTextMismatch
 };

shared/markdown.js

@@ -1,65 +1,29 @@
 /* eslint-disable max-depth */
 /* eslint-disable max-lines */
 import _                        from 'lodash';
-import { Parser as MathParser } from 'expr-eval';
 import { marked as Marked }     from 'marked';
 import MarkedExtendedTables     from 'marked-extended-tables';
+import MarkedDefinitionLists    from 'marked-definition-lists';
+import MarkedAlignedParagraphs  from 'marked-alignment-paragraphs';
+import MarkedNonbreakingSpaces  from 'marked-nonbreaking-spaces';
+import MarkedSubSuperText       from 'marked-subsuper-text';
+import { markedVariables,
+				setMarkedVariablePage,
+				setMarkedVariable,
+				getMarkedVariable }  from 'marked-variables';
 import { markedSmartypantsLite as MarkedSmartypantsLite }                                from 'marked-smartypants-lite';
 import { gfmHeadingId as MarkedGFMHeadingId, resetHeadings as MarkedGFMResetHeadingIDs } from 'marked-gfm-heading-id';
 import { markedEmoji as MarkedEmojis }                                                   from 'marked-emoji';
-import MarkedSubSuperText from 'marked-subsuper-text';
 
 //Icon fonts included so they can appear in emoji autosuggest dropdown
-import diceFont      from '../../themes/fonts/iconFonts/diceFont.js';
-import elderberryInn from '../../themes/fonts/iconFonts/elderberryInn.js';
-import gameIcons     from '../../themes/fonts/iconFonts/gameIcons.js';
-import fontAwesome   from '../../themes/fonts/iconFonts/fontAwesome.js';
+import diceFont      from '../themes/fonts/iconFonts/diceFont.js';
+import elderberryInn from '../themes/fonts/iconFonts/elderberryInn.js';
+import gameIcons     from '../themes/fonts/iconFonts/gameIcons.js';
+import fontAwesome   from '../themes/fonts/iconFonts/fontAwesome.js';
 
 const renderer  = new Marked.Renderer();
 const tokenizer = new Marked.Tokenizer();
 
-//Limit math features to simple items
-const mathParser = new MathParser({
-	operators : {
-		// These default to true, but are included to be explicit
-		add      : true,
-		subtract : true,
-		multiply : true,
-		divide   : true,
-		power    : true,
-		round    : true,
-		floor    : true,
-		ceil     : true,
-		abs      : true,
-
-		sin     : false, cos     : false, tan     : false, asin    : false, acos    : false,
-		atan    : false, sinh    : false, cosh    : false, tanh    : false, asinh   : false,
-		acosh   : false, atanh   : false, sqrt    : false, cbrt    : false, log     : false,
-		log2    : false, ln      : false, lg      : false, log10   : false, expm1   : false,
-		log1p   : false, trunc   : false, join    : false, sum     : false, indexOf : false,
-		'-'     : false, '+'     : false, exp     : false, not     : false, length  : false,
-		'!'     : false, sign    : false, random  : false, fac     : false, min     : false,
-		max     : false, hypot   : false, pyt     : false, pow     : false, atan2   : false,
-		'if'    : false, gamma   : false, roundTo : false, map     : false, fold    : false,
-		filter  : false,
-
-		remainder   : false, factorial   : false,
-		comparison  : false, concatenate : false,
-		logical     : false, assignment  : false,
-		array       : false, fndef       : false
-	}
-});
-// Add sign function
-mathParser.functions.sign = function (a) {
-	if(a >= 0) return '+';
-	return '-';
-};
-// Add signed function
-mathParser.functions.signed = function (a) {
-	if(a >= 0) return `+${a}`;
-	return `${a}`;
-};
-
 //Processes the markdown within an HTML block if it's just a class-wrapper
 renderer.html = function (token) {
 	let html = token.text;
@@ -86,8 +50,8 @@ renderer.paragraph = function(token){
 
 //Fix local links in the Preview iFrame to link inside the frame
 renderer.link = function (token) {
-	let {href, title, tokens} = token;
-	const text = this.parser.parseInline(tokens)
+	let { href, title, tokens } = token;
+	const text = this.parser.parseInline(tokens);
 	let self = false;
 	if(href[0] == '#') {
 		self = true;
@@ -99,7 +63,7 @@ renderer.link = function (token) {
 	}
 	let out = `<a href="${escape(href)}"`;
 	if(title) {
-		out += ` title="${title}"`;
+		out += ` title="${escape(title)}"`;
 	}
 	if(self) {
 		out += ' target="_self"';
@@ -110,7 +74,7 @@ renderer.link = function (token) {
 
 // Expose `src` attribute as `--HB_src` to make the URL accessible via CSS
 renderer.image = function (token) {
-	let {href, title, text} = token;
+	const { href, title, text } = token;
 	if(href === null)
 		return text;
 
@@ -133,7 +97,7 @@ const mustacheSpans = {
 	start(src) { return src.match(/{{[^{]/)?.index; },  // Hint to Marked.js to stop and check for a match
 	tokenizer(src, tokens) {
 		const completeSpan = /^{{[^\n]*}}/;               // Regex for the complete token
-		const inlineRegex = /{{(?=((?:[:=](?:"['\w,\-()#%=?. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1 *|}}/g;
+		const inlineRegex = /{{(?=((?:[:=](?:"['\w,\-+*/()#%=?.&:!@$^;:\[\]_= ]*"|[\w\-+*/()#%.]*)|[^"=':{}\s]*)*))\1 *|}}/g;
 		const match = completeSpan.exec(src);
 		if(match) {
 			//Find closing delimiter
@@ -190,7 +154,7 @@ const mustacheDivs = {
 	start(src) { return src.match(/\n *{{[^{]/m)?.index; },  // Hint to Marked.js to stop and check for a match
 	tokenizer(src, tokens) {
 		const completeBlock = /^ *{{[^\n}]* *\n.*\n *}}/s;                // Regex for the complete token
-		const blockRegex = /^ *{{(?=((?:[:=](?:"['\w,\-()#%=?. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1 *$|^ *}}$/gm;
+		const blockRegex = /^ *{{(?=((?:[:=](?:"['\w,\-+*/()#%=?.&:!@$^;:\[\]_= ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1 *$|^ *}}$/gm;
 		const match = completeBlock.exec(src);
 		if(match) {
 			//Find closing delimiter
@@ -245,7 +209,7 @@ const mustacheInjectInline = {
 	level : 'inline',
 	start(src) { return src.match(/ *{[^{\n]/)?.index; },  // Hint to Marked.js to stop and check for a match
 	tokenizer(src, tokens) {
-		const inlineRegex = /^ *{(?=((?:[:=](?:"['\w,\-()#%=?. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1}/g;
+		const inlineRegex = /^ *{(?=((?:[:=](?:"['\w,\-+*/()#%=?.&:!@$^;:\[\]_= ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1}/g;
 		const match = inlineRegex.exec(src);
 		if(match) {
 			const lastToken = tokens[tokens.length - 1];
@@ -291,7 +255,7 @@ const mustacheInjectBlock = {
 		level : 'block',
 		start(src) { return src.match(/\n *{[^{\n]/m)?.index; },  // Hint to Marked.js to stop and check for a match
 		tokenizer(src, tokens) {
-			const inlineRegex = /^ *{(?=((?:[:=](?:"['\w,\-()#%=?. ]*"|[\w\-()#%.]*)|[^"=':{}\s]*)*))\1}/ym;
+			const inlineRegex = /^ *{(?=((?:[:=](?:"['\w,\-+*/()#%=?.&:!@$^;:\[\]_= ]*"|[\w\-+*/()#%.]*)|[^"=':{}\s]*)*))\1}/ym;
 			const match = inlineRegex.exec(src);
 			if(match) {
 				const lastToken = tokens[tokens.length - 1];
@@ -338,42 +302,6 @@ const mustacheInjectBlock = {
 	}
 };
 
-const justifiedParagraphClasses = [];
-justifiedParagraphClasses[2] = 'Left';
-justifiedParagraphClasses[4] = 'Right';
-justifiedParagraphClasses[6] = 'Center';
-
-const justifiedParagraphs = {
-	name  : 'justifiedParagraphs',
-	level : 'block',
-	start(src) {
-		return src.match(/\n(?:-:|:-|-:) {1}/m)?.index;
-	},  // Hint to Marked.js to stop and check for a match
-	tokenizer(src, tokens) {
-		const regex  = /^(((:-))|((-:))|((:-:))) .+(\n(([^\n].*\n)*(\n|$))|$)/ygm;
-		const match = regex.exec(src);
-		if(match?.length) {
-			let whichJustify;
-			if(match[2]?.length) whichJustify = 2;
-			if(match[4]?.length) whichJustify = 4;
-			if(match[6]?.length) whichJustify = 6;
-			return {
-				type   : 'justifiedParagraphs', // Should match "name" above
-				raw    : match[0],     // Text to consume from the source
-				length : match[whichJustify].length,
-				text   : match[0].slice(match[whichJustify].length),
-				class  : justifiedParagraphClasses[whichJustify],
-				tokens : this.lexer.inlineTokens(match[0].slice(match[whichJustify].length + 1))
-			};
-		}
-	},
-	renderer(token) {
-		return `<p align="${token.class}">${this.parser.parseInline(token.tokens)}</p>`;
-	}
-
-};
-
-
 const forcedParagraphBreaks = {
 	name  : 'hardBreaks',
 	level : 'block',
@@ -391,360 +319,10 @@ const forcedParagraphBreaks = {
 		}
 	},
 	renderer(token) {
-		return `<br>\n`.repeat(token.length);
+		return `<div class='blank'></div>\n`.repeat(token.length);
 	}
 };
 
-const nonbreakingSpaces = {
-	name  : 'nonbreakingSpaces',
-	level : 'inline',
-	start(src) { return src.match(/:>+/m)?.index; },  // Hint to Marked.js to stop and check for a match
-	tokenizer(src, tokens) {
-		const regex  = /:(>+)/ym;
-		const match = regex.exec(src);
-		if(match?.length) {
-			return {
-				type   : 'nonbreakingSpaces', // Should match "name" above
-				raw    : match[0],     // Text to consume from the source
-				length : match[1].length,
-				text   : ''
-			};
-		}
-	},
-	renderer(token) {
-		return `&nbsp;`.repeat(token.length).concat('');
-	}
-};
-
-const definitionListsSingleLine = {
-	name  : 'definitionListsSingleLine',
-	level : 'block',
-	start(src) { return src.match(/\n[^\n]*?::[^\n]*/m)?.index; }, // Hint to Marked.js to stop and check for a match
-	tokenizer(src, tokens) {
-		const regex = /^([^\n]*?)::([^\n]*)(?:\n|$)/ym;
-		let match;
-		let endIndex = 0;
-		const definitions = [];
-		while (match = regex.exec(src)) {
-			const originalLine = match[0];											// This line and below to handle conflict with emojis
-			let firstLine = originalLine;											// Remove in V4 when definitionListsInline updated to
-			this.lexer.inlineTokens(firstLine.trim())					// require spaces around `::`
-				.filter((t)=>t.type == 'emoji')
-				.map((emoji)=>firstLine = firstLine.replace(emoji.raw, 'x'.repeat(emoji.raw.length)));
-
-			const newMatch = /^([^\n]*?)::([^\n]*)(?:\n|$)/ym.exec(firstLine);
-			if(newMatch) {
-				definitions.push({
-					dt : this.lexer.inlineTokens(originalLine.slice(0, newMatch[1].length).trim()),
-					dd : this.lexer.inlineTokens(originalLine.slice(newMatch[1].length + 2).trim())
-				});
-			}																									// End of emoji hack.
-			endIndex = regex.lastIndex;
-		}
-		if(definitions.length) {
-			return {
-				type : 'definitionListsSingleLine',
-				raw  : src.slice(0, endIndex),
-				definitions
-			};
-		}
-	},
-	renderer(token) {
-		return `<dl>${token.definitions.reduce((html, def)=>{
-			return `${html}<dt>${this.parser.parseInline(def.dt)}</dt>`
-			            + `<dd>${this.parser.parseInline(def.dd)}</dd>\n`;
-		}, '')}</dl>`;
-	}
-};
-
-const definitionListsMultiLine = {
-	name  : 'definitionListsMultiLine',
-	level : 'block',
-	start(src) { return src.match(/\n[^\n]*\n::[^:\n]/m)?.index; },  // Hint to Marked.js to stop and check for a match
-	tokenizer(src, tokens) {
-		const regex = /(\n?\n?(?!::)[^\n]+?(?=\n::[^:\n]))|\n::([^:\n](?:.|\n)*?(?=(?:\n::)|(?:\n\n)|$))/y;
-		let match;
-		let endIndex = 0;
-		const definitions = [];
-		while (match = regex.exec(src)) {
-			if(match[1]) {
-				if(this.lexer.blockTokens(match[1].trim())[0]?.type !== 'paragraph') // DT must not be another block-level token besides <p>
-					break;
-				definitions.push({
-					dt  : this.lexer.inlineTokens(match[1].trim()),
-					dds : []
-				});
-			}
-			if(match[2] && definitions.length) {
-				definitions[definitions.length - 1].dds.push(
-					this.lexer.inlineTokens(match[2].trim().replace(/\s/g, ' '))
-				);
-			}
-			endIndex = regex.lastIndex;
-		}
-		if(definitions.length) {
-			return {
-				type : 'definitionListsMultiLine',
-				raw  : src.slice(0, endIndex),
-				definitions
-			};
-		}
-	},
-	renderer(token) {
-		let returnVal = `<dl>`;
-		token.definitions.forEach((def)=>{
-			const dds = def.dds.map((s)=>{
-				return `\n<dd>${this.parser.parseInline(s).trim()}</dd>`;
-			}).join('');
-			returnVal += `<dt>${this.parser.parseInline(def.dt)}</dt>${dds}\n`;
-		});
-		returnVal = returnVal.trim();
-		return `${returnVal}</dl>`;
-	}
-};
-
-//v=====--------------------< Variable Handling >-------------------=====v// 242 lines
-const replaceVar = function(input, hoist=false, allowUnresolved=false) {
-	const regex = /([!$]?)\[((?!\s*\])(?:\\.|[^\[\]\\])+)\]/g;
-	const match = regex.exec(input);
-
-	const prefix = match[1];
-	const label  = match[2];
-
-	//v=====--------------------< HANDLE MATH >-------------------=====v//
-	const mathRegex = /[a-z]+\(|[+\-*/^(),]/g;
-	const matches = label.split(mathRegex);
-	const mathVars = matches.filter((match)=>isNaN(match))?.map((s)=>s.trim()); // Capture any variable names
-
-	let replacedLabel = label;
-
-	if(prefix[0] == '$' && mathVars?.[0] !== label.trim())  {// If there was mathy stuff not captured, let's do math!
-		mathVars?.forEach((variable)=>{
-			const foundVar = lookupVar(variable, globalPageNumber, hoist);
-			if(foundVar && foundVar.resolved && foundVar.content && !isNaN(foundVar.content)) // Only subsitute math values if fully resolved, not empty strings, and numbers
-				replacedLabel = replacedLabel.replaceAll(new RegExp(`(?<!\\w)(${variable})(?!\\w)`, 'g'), foundVar.content);
-		});
-
-		try {
-			return mathParser.evaluate(replacedLabel);
-		} catch (error) {
-			return undefined;		// Return undefined if invalid math result
-		}
-	}
-	//^=====--------------------< HANDLE MATH >-------------------=====^//
-
-	const foundVar = lookupVar(label, globalPageNumber, hoist);
-
-	if(!foundVar || (!foundVar.resolved && !allowUnresolved))
-		return undefined;			// Return undefined if not found, or parially-resolved vars are not allowed
-
-	//                    url or <url>            "title"    or   'title'     or  (title)
-	const linkRegex =  /^([^<\s][^\s]*|<.*?>)(?: ("(?:\\"|[^"])*"|'(?:\\'|[^'])*'|\((?:\\\(|\\\)|[^()])*\)))?$/m;
-	const linkMatch = linkRegex.exec(foundVar.content);
-
-	const href  = linkMatch ? linkMatch[1]               : null; //TODO: TRIM OFF < > IF PRESENT
-	const title = linkMatch ? linkMatch[2]?.slice(1, -1) : null;
-
-	if(!prefix[0] && href)        // Link
-		return `[${label}](${href}${title ? ` "${title}"` : ''})`;
-
-	if(prefix[0] == '!' && href)  // Image
-		return `![${label}](${href} ${title ? ` "${title}"` : ''})`;
-
-	if(prefix[0] == '$')          // Variable
-		return foundVar.content;
-};
-
-const lookupVar = function(label, index, hoist=false) {
-	while (index >= 0) {
-		if(globalVarsList[index]?.[label] !== undefined)
-			return globalVarsList[index][label];
-		index--;
-	}
-
-	if(hoist) {	//If normal lookup failed, attempt hoisting
-		index = Object.keys(globalVarsList).length; // Move index to start from last page
-		while (index >= 0) {
-			if(globalVarsList[index]?.[label] !== undefined)
-				return globalVarsList[index][label];
-			index--;
-		}
-	}
-
-	return undefined;
-};
-
-const processVariableQueue = function() {
-	let resolvedOne = true;
-	let finalLoop   = false;
-	while (resolvedOne || finalLoop) { // Loop through queue until no more variable calls can be resolved
-		resolvedOne = false;
-		for (const item of varsQueue) {
-			if(item.type == 'text')
-				continue;
-
-			if(item.type == 'varDefBlock') {
-				const regex = /[!$]?\[((?!\s*\])(?:\\.|[^\[\]\\])+)\]/g;
-				let match;
-				let resolved = true;
-				let tempContent = item.content;
-				while (match = regex.exec(item.content)) { // regex to find variable calls
-					const value = replaceVar(match[0], true);
-
-					if(value == undefined)
-						resolved = false;
-					else
-						tempContent = tempContent.replaceAll(match[0], value);
-				}
-
-				if(resolved == true || item.content != tempContent) {
-					resolvedOne = true;
-					item.content = tempContent;
-				}
-
-				globalVarsList[globalPageNumber][item.varName] = {
-					content  : item.content,
-					resolved : resolved
-				};
-
-				if(resolved)
-					item.type = 'resolved';
-			}
-
-			if(item.type == 'varCallBlock' || item.type == 'varCallInline') {
-				const value = replaceVar(item.content, true, finalLoop); // final loop will just use the best value so far
-
-				if(value == undefined)
-					continue;
-
-				resolvedOne  = true;
-				item.content = value;
-				item.type    = 'text';
-			}
-		}
-		varsQueue = varsQueue.filter((item)=>item.type !== 'resolved'); // Remove any fully-resolved variable definitions
-
-		if(finalLoop)
-			break;
-		if(!resolvedOne)
-			finalLoop   = true;
-	}
-	varsQueue = varsQueue.filter((item)=>item.type !== 'varDefBlock');
-};
-
-function MarkedVariables() {
-	return {
-		hooks : {
-			preprocess(src) {
-				const codeBlockSkip   = /^(?: {4}[^\n]+(?:\n(?: *(?:\n|$))*)?)+|^ {0,3}(`{3,}(?=[^`\n]*(?:\n|$))|~{3,})(?:[^\n]*)(?:\n|$)(?:|(?:[\s\S]*?)(?:\n|$))(?: {0,3}\2[~`]* *(?=\n|$))|`[^`]*?`/;
-				const blockDefRegex   = /^[!$]?\[((?!\s*\])(?:\\.|[^\[\]\\])+)\]:(?!\() *((?:\n? *[^\s].*)+)(?=\n+|$)/; //Matches 3, [4]:5
-				const blockCallRegex  = /^[!$]?\[((?!\s*\])(?:\\.|[^\[\]\\])+)\](?=\n|$)/;                              //Matches 6, [7]
-				const inlineDefRegex  = /([!$]?\[((?!\s*\])(?:\\.|[^\[\]\\])+)\])\(([^\n]+)\)/;                         //Matches 8, 9[10](11)
-				const inlineCallRegex =  /[!$]?\[((?!\s*\])(?:\\.|[^\[\]\\])+)\](?!\()/;                                //Matches 12, [13]
-
-				// Combine regexes and wrap in parens like so: (regex1)|(regex2)|(regex3)|(regex4)
-				const combinedRegex = new RegExp([codeBlockSkip, blockDefRegex, blockCallRegex, inlineDefRegex, inlineCallRegex].map((s)=>`(${s.source})`).join('|'), 'gm');
-
-				let lastIndex = 0;
-				let match;
-				while ((match = combinedRegex.exec(src)) !== null) {
-					// Format any matches into tokens and store
-					if(match.index > lastIndex) { // Any non-variable stuff
-						varsQueue.push(
-							{ type    : 'text',
-								varName : null,
-								content : src.slice(lastIndex, match.index)
-							});
-					}
-					if(match[1]) {
-						varsQueue.push(
-							{ type    : 'text',
-								varName : null,
-								content : match[0]
-							});
-					}
-					if(match[3]) { // Block Definition
-						const label   = match[4] ? match[4].trim().replace(/\s+/g, ' ')    : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
-						const content = match[5] ? match[5].trim().replace(/[ \t]+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
-
-						varsQueue.push(
-							{ type    : 'varDefBlock',
-								varName : label,
-								content : content
-							});
-					}
-					if(match[6]) { // Block Call
-						const label = match[7] ? match[7].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
-
-						varsQueue.push(
-							{ type    : 'varCallBlock',
-								varName : label,
-								content : match[0]
-							});
-					}
-					if(match[8]) { // Inline Definition
-						const label = match[10] ? match[10].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
-						let content = match[11] || null;
-
-						// In case of nested (), find the correct matching end )
-						let level = 0;
-						let i;
-						for (i = 0; i < content.length; i++) {
-							if(content[i] === '\\') {
-								i++;
-							} else if(content[i] === '(') {
-								level++;
-							} else if(content[i] === ')') {
-								level--;
-								if(level < 0)
-									break;
-							}
-						}
-						combinedRegex.lastIndex = combinedRegex.lastIndex - (content.length - i);
-						content = content.slice(0, i).trim().replace(/\s+/g, ' ');
-
-						varsQueue.push(
-							{ type    : 'varDefBlock',
-								varName : label,
-								content : content
-							});
-						varsQueue.push(
-							{ type    : 'varCallInline',
-								varName : label,
-								content : match[9]
-							});
-					}
-					if(match[12]) { // Inline Call
-						const label = match[13] ? match[13].trim().replace(/\s+/g, ' ') : null; // Trim edge spaces and shorten blocks of whitespace to 1 space
-
-						varsQueue.push(
-							{ type    : 'varCallInline',
-								varName : label,
-								content : match[0]
-							});
-					}
-					lastIndex = combinedRegex.lastIndex;
-				}
-
-				if(lastIndex < src.length) {
-					varsQueue.push(
-						{ type    : 'text',
-							varName : null,
-							content : src.slice(lastIndex)
-						});
-				}
-
-				processVariableQueue();
-
-				const output = varsQueue.map((item)=>item.content).join('');
-				varsQueue = []; // Must clear varsQueue because custom HTML renderer uses Marked.parse which will preprocess again without clearing the array
-				return output;
-			}
-		}
-	};
-};
-//^=====--------------------< Variable Handling >-------------------=====^//
-
 // Emoji options
 // To add more icon fonts, need to do these things
 // 1) Add the font file as .woff2 to themes/fonts/iconFonts folder
@@ -770,13 +348,15 @@ const tableTerminators = [
 	` *{{[^{\n]*\n.*?\n}}`  // mustacheDiv
 ];
 
-Marked.use(MarkedVariables());
-Marked.use({ extensions : [justifiedParagraphs, definitionListsMultiLine, definitionListsSingleLine, forcedParagraphBreaks,
-	nonbreakingSpaces, mustacheSpans, mustacheDivs, mustacheInjectInline] });
+Marked.use(markedVariables());
+Marked.use(MarkedDefinitionLists());
+Marked.use({ extensions: [forcedParagraphBreaks, mustacheSpans, mustacheDivs, mustacheInjectInline] });
 Marked.use(mustacheInjectBlock);
+Marked.use(MarkedAlignedParagraphs());
 Marked.use(MarkedSubSuperText());
+Marked.use(MarkedNonbreakingSpaces());
 Marked.use({ renderer: renderer, tokenizer: tokenizer, mangle: false });
-Marked.use(MarkedExtendedTables({interruptPatterns : tableTerminators}), MarkedGFMHeadingId({ globalSlugs: true }),
+Marked.use(MarkedExtendedTables({ interruptPatterns: tableTerminators }), MarkedGFMHeadingId({ globalSlugs: true }),
 	MarkedSmartypantsLite(), MarkedEmojis(MarkedEmojiOptions));
 
 function cleanUrl(href) {
@@ -841,12 +421,12 @@ const processStyleTags = (string)=>{
 			obj[key.trim()] = value.trim();
 			return obj;
 		}, {}) || null;
-	const styles = tags?.length ? tags.reduce((styleObj, style) => {
-			const index = style.indexOf(':');
-			const [key, value] = [style.substring(0, index), style.substring(index + 1)];
-			styleObj[key.trim()] = value.replace(/"?([^"]*)"?/g, '$1').trim();
-			return styleObj;
-		}, {}) : null;
+	const styles = tags?.length ? tags.reduce((styleObj, style)=>{
+		const index = style.indexOf(':');
+		const [key, value] = [style.substring(0, index), style.substring(index + 1)];
+		styleObj[key.trim()] = value.replace(/"?([^"]*)"?/g, '$1').trim();
+		return styleObj;
+	}, {}) : null;
 
 	return {
 		id         : id,
@@ -862,8 +442,8 @@ const extractHTMLStyleTags = (htmlString)=>{
 	const id         = firstElementOnly.match(/id="([^"]*)"/)?.[1]    || null;
 	const classes    = firstElementOnly.match(/class="([^"]*)"/)?.[1] || null;
 	const styles     = firstElementOnly.match(/style="([^"]*)"/)?.[1]
-		?.split(';').reduce((styleObj, style) => {
-			if (style.trim() === '') return styleObj;
+		?.split(';').reduce((styleObj, style)=>{
+			if(style.trim() === '') return styleObj;
 			const index = style.indexOf(':');
 			const [key, value] = [style.substring(0, index), style.substring(index + 1)];
 			styleObj[key.trim()] = value.trim();
@@ -873,7 +453,7 @@ const extractHTMLStyleTags = (htmlString)=>{
 		?.filter((attr)=>!attr.startsWith('class="') && !attr.startsWith('style="') && !attr.startsWith('id="'))
 		.reduce((obj, attr)=>{
 			const index = attr.indexOf('=');
-			let [key, value] = [attr.substring(0, index), attr.substring(index + 1)];
+			const [key, value] = [attr.substring(0, index), attr.substring(index + 1)];
 			obj[key.trim()] = value.replace(/"/g, '');
 			return obj;
 		}, {}) || null;
@@ -886,7 +466,7 @@ const extractHTMLStyleTags = (htmlString)=>{
 	};
 };
 
-const mergeHTMLTags = (originalTags, newTags) => {
+const mergeHTMLTags = (originalTags, newTags)=>{
 	return {
 		id         : newTags.id || originalTags.id || null,
 		classes    : [originalTags.classes, newTags.classes].join(' ').trim() || null,
@@ -895,21 +475,19 @@ const mergeHTMLTags = (originalTags, newTags) => {
 	};
 };
 
-const globalVarsList    = {};
-let varsQueue       = [];
-let globalPageNumber = 0;
-
 const Markdown = {
 	marked : Marked,
 	render : (rawBrewText, pageNumber=0)=>{
-		globalVarsList[pageNumber] = {};					//Reset global links for current page, to ensure values are parsed in order
-		varsQueue                  = [];						//Could move into MarkedVariables()
-		globalPageNumber           = pageNumber;
-		if(pageNumber==0) {
-			MarkedGFMResetHeadingIDs();
-		}
+		setMarkedVariablePage(pageNumber);
 
-		rawBrewText = rawBrewText.replace(/^\\column$/gm, `\n<div class='columnSplit'></div>\n`);
+		const lastPageNumber = pageNumber > 0 ? getMarkedVariable('HB_pageNumber', pageNumber - 1) : 0;
+		setMarkedVariable('HB_pageNumber',  //Add document variables for this page
+			!isNaN(Number(lastPageNumber)) ? Number(lastPageNumber) + 1 : lastPageNumber,
+			pageNumber);
+
+		if(pageNumber==0) MarkedGFMResetHeadingIDs();
+
+		rawBrewText = rawBrewText.replace(/^\\column(?:break)?$/gm, `\n<div class='columnSplit'></div>\n`);
 
 		const opts = Marked.defaults;
 

shared/markdownLegacy.js

@@ -49,7 +49,7 @@ const cleanUrl = function (sanitize, base, href) {
 			prot = decodeURIComponent(unescape(href))
         .replace(nonWordAndColonTest, '')
         .toLowerCase();
-		} catch (e) {
+		} catch {
 			return null;
 		}
 		if(prot.indexOf('javascript:') === 0 || prot.indexOf('vbscript:') === 0 || prot.indexOf('data:') === 0) {
@@ -58,7 +58,7 @@ const cleanUrl = function (sanitize, base, href) {
 	}
 	try {
 		href = encodeURI(href).replace(/%25/g, '%');
-	} catch (e) {
+	} catch {
 		return null;
 	}
 	return href;

shared/naturalcrit/codeEditor/autocompleteEmoji.js

@@ -1,7 +1,7 @@
-import diceFont      from '../../../themes/fonts/iconFonts/diceFont.js';
-import elderberryInn from '../../../themes/fonts/iconFonts/elderberryInn.js';
-import fontAwesome   from '../../../themes/fonts/iconFonts/fontAwesome.js';
-import gameIcons     from '../../../themes/fonts/iconFonts/gameIcons.js';
+import diceFont      from 'themes/fonts/iconFonts/diceFont.js';
+import elderberryInn from 'themes/fonts/iconFonts/elderberryInn.js';
+import fontAwesome   from 'themes/fonts/iconFonts/fontAwesome.js';
+import gameIcons     from 'themes/fonts/iconFonts/gameIcons.js';
 
 const emojis = {
 	...diceFont,

shared/naturalcrit/codeEditor/codeEditor.less

@@ -38,15 +38,11 @@
 		animation-duration : 0.4s;
 	}
 
-	.CodeMirror-vscrollbar {
-		&::-webkit-scrollbar { width : 20px; }
-		&::-webkit-scrollbar-thumb {
-			width      : 20px;
-			background : linear-gradient(90deg, #858585 15px, #808080 15px);
-		}
+	.CodeMirror-search-field {
+		width:25em !important;
+		outline:1px inset #00000055 !important;
 	}
 
-
 	//.cm-tab {
 	//  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAMCAQAAACOs/baAAAARUlEQVR4nGJgIAG8JkXxUAcCtDWemcGR1lY4MvgzCEKY7jSBjgxBDAG09UEQzAe0AMwMHrSOAwEGRtpaMIwAAAAA//8DAG4ID9EKs6YqAAAAAElFTkSuQmCC) no-repeat right;
 	//}

shared/naturalcrit/nav/nav.jsx

@@ -5,15 +5,15 @@ const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
 
-const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx');
+const NaturalCritIcon = require('client/components/svg/naturalcrit-d20.svg.jsx');
 
 const Nav = {
 	base : createClass({
 		displayName : 'Nav.base',
 		render      : function(){
 			return <nav>
-					{this.props.children}
-					</nav>;
+				{this.props.children}
+			</nav>;
 		}
 	}),
 	logo : function(){

shared/naturalcrit/styles/animations.less

@@ -3,127 +3,127 @@
 @defaultEasing             : ease;
 
 //Animates all properties on an element
-.animateAll(@duration : @defaultDuration, @easing : @defaultEasing){
-	-webkit-transition: all @duration @easing;
-	   -moz-transition: all @duration @easing;
-		 -o-transition: all @duration @easing;
-			transition: all @duration @easing;
+.animateAll(@duration : @defaultDuration, @easing : @defaultEasing) {
+	-webkit-transition : all @duration @easing;
+	-moz-transition    : all @duration @easing;
+	-o-transition      : all @duration @easing;
+	transition         : all @duration @easing;
 }
 //Animates Specific property
-.animate(@prop, @duration : @defaultDuration, @easing : @defaultEasing){
-	-webkit-transition: @prop @duration @easing;
-	   -moz-transition: @prop @duration @easing;
-		 -o-transition: @prop @duration @easing;
-			transition: @prop @duration @easing;
+.animate(@prop, @duration : @defaultDuration, @easing : @defaultEasing) {
+	-webkit-transition : @prop @duration @easing;
+	-moz-transition    : @prop @duration @easing;
+	-o-transition      : @prop @duration @easing;
+	transition         : @prop @duration @easing;
 }
 
-.animateMany(...){
+.animateMany(...) {
 	@value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
-	-webkit-transition-property: @value;
-	   -moz-transition-property: @value;
-		 -o-transition-property: @value;
-			transition-property: @value;
+	-webkit-transition-property : @value;
+	-moz-transition-property    : @value;
+	-o-transition-property      : @value;
+	transition-property         : @value;
 
 	.animateDuration();
 	.animateEasing();
 }
 
-.animateDuration(@duration : @defaultDuration){
-	-webkit-transition-duration: @duration;
-	   -moz-transition-duration: @duration;
-		 -o-transition-duration: @duration;
-			transition-duration: @duration;
+.animateDuration(@duration : @defaultDuration) {
+	-webkit-transition-duration : @duration;
+	-moz-transition-duration    : @duration;
+	-o-transition-duration      : @duration;
+	transition-duration         : @duration;
 }
 
-.animateEasing(@easing : @defaultEasing){
-	-webkit-transition-timing-function: @easing;
-	   -moz-transition-timing-function: @easing;
-		 -o-transition-timing-function: @easing;
-			transition-timing-function: @easing;
+.animateEasing(@easing : @defaultEasing) {
+	-webkit-transition-timing-function : @easing;
+	-moz-transition-timing-function    : @easing;
+	-o-transition-timing-function      : @easing;
+	transition-timing-function         : @easing;
 }
 
 
 .transition (@prop, @duration: @defaultDuration) {
-	-webkit-transition: @prop @duration, -webkit-transform @duration;
-	   -moz-transition: @prop @duration, -moz-transform @duration;
-		 -o-transition: @prop @duration, -o-transform @duration;
-		-ms-transition: @prop @duration, -ms-transform @duration;
-			transition: @prop @duration, transform @duration;
+	-webkit-transition : @prop @duration, -webkit-transform @duration;
+	-moz-transition    : @prop @duration, -moz-transform @duration;
+	-o-transition      : @prop @duration, -o-transform @duration;
+	-ms-transition     : @prop @duration, -ms-transform @duration;
+	transition         : @prop @duration, transform @duration;
 }
 .transform (@transform) {
-	-webkit-transform: @transform;
-	   -moz-transform: @transform;
-		 -o-transform: @transform;
-		-ms-transform: @transform;
-			transform: @transform;
+	-webkit-transform : @transform;
+	-moz-transform    : @transform;
+	-o-transform      : @transform;
+	-ms-transform     : @transform;
+	transform         : @transform;
 }
 
 
-.delay(@delay){
-	animation-delay:@delay;
-	-webkit-animation-delay:@delay;
-	transition-delay:@delay;
-	-webkit-transition-delay:@delay;
+.delay(@delay) {
+	-webkit-transition-delay : @delay;
+	transition-delay         : @delay;
+	-webkit-animation-delay  : @delay;
+	animation-delay          : @delay;
 }
-.keep(){
-	-webkit-animation-fill-mode:forwards;
-	   -moz-animation-fill-mode:forwards;
-		-ms-animation-fill-mode:forwards;
-		 -o-animation-fill-mode:forwards;
-			animation-fill-mode:forwards;
+.keep() {
+	-webkit-animation-fill-mode : forwards;
+	-moz-animation-fill-mode    : forwards;
+	-ms-animation-fill-mode     : forwards;
+	-o-animation-fill-mode      : forwards;
+	animation-fill-mode         : forwards;
 }
 
 
-.sequentialDelay(@delayInc : 0.2s, @initialDelay : 0s){
-	&:nth-child(1){.delay(0*@delayInc + @initialDelay)}
-	&:nth-child(2){.delay(1*@delayInc + @initialDelay)}
-	&:nth-child(3){.delay(2*@delayInc + @initialDelay)}
-	&:nth-child(4){.delay(3*@delayInc + @initialDelay)}
-	&:nth-child(5){.delay(4*@delayInc + @initialDelay)}
-	&:nth-child(6){.delay(5*@delayInc + @initialDelay)}
-	&:nth-child(7){.delay(6*@delayInc + @initialDelay)}
-	&:nth-child(8){.delay(7*@delayInc + @initialDelay)}
-	&:nth-child(9){.delay(8*@delayInc + @initialDelay)}
-	&:nth-child(10){.delay(9*@delayInc + @initialDelay)}
-	&:nth-child(11){.delay(10*@delayInc + @initialDelay)}
-	&:nth-child(12){.delay(11*@delayInc + @initialDelay)}
-	&:nth-child(13){.delay(12*@delayInc + @initialDelay)}
-	&:nth-child(14){.delay(13*@delayInc + @initialDelay)}
-	&:nth-child(15){.delay(14*@delayInc + @initialDelay)}
-	&:nth-child(16){.delay(15*@delayInc + @initialDelay)}
-	&:nth-child(17){.delay(16*@delayInc + @initialDelay)}
-	&:nth-child(18){.delay(17*@delayInc + @initialDelay)}
-	&:nth-child(19){.delay(18*@delayInc + @initialDelay)}
-	&:nth-child(20){.delay(19*@delayInc + @initialDelay)}
+.sequentialDelay(@delayInc : 0.2s, @initialDelay : 0s) {
+	&:nth-child(1) {.delay(0*@delayInc + @initialDelay); }
+	&:nth-child(2) {.delay(1*@delayInc + @initialDelay); }
+	&:nth-child(3) {.delay(2*@delayInc + @initialDelay); }
+	&:nth-child(4) {.delay(3*@delayInc + @initialDelay); }
+	&:nth-child(5) {.delay(4*@delayInc + @initialDelay); }
+	&:nth-child(6) {.delay(5*@delayInc + @initialDelay); }
+	&:nth-child(7) {.delay(6*@delayInc + @initialDelay); }
+	&:nth-child(8) {.delay(7*@delayInc + @initialDelay); }
+	&:nth-child(9) {.delay(8*@delayInc + @initialDelay); }
+	&:nth-child(10) {.delay(9*@delayInc + @initialDelay); }
+	&:nth-child(11) {.delay(10*@delayInc + @initialDelay); }
+	&:nth-child(12) {.delay(11*@delayInc + @initialDelay); }
+	&:nth-child(13) {.delay(12*@delayInc + @initialDelay); }
+	&:nth-child(14) {.delay(13*@delayInc + @initialDelay); }
+	&:nth-child(15) {.delay(14*@delayInc + @initialDelay); }
+	&:nth-child(16) {.delay(15*@delayInc + @initialDelay); }
+	&:nth-child(17) {.delay(16*@delayInc + @initialDelay); }
+	&:nth-child(18) {.delay(17*@delayInc + @initialDelay); }
+	&:nth-child(19) {.delay(18*@delayInc + @initialDelay); }
+	&:nth-child(20) {.delay(19*@delayInc + @initialDelay); }
 }
 
 
 
-.createFrames(@name, @from, @to){
+.createFrames(@name, @from, @to) {
 	@frames: {
 		from { @from(); }
 		to { @to(); }
 	};
-	@-webkit-keyframes @name {@frames();}
-	   @-moz-keyframes @name {@frames();}
-		@-ms-keyframes @name {@frames();}
-		 @-o-keyframes @name {@frames();}
-			@keyframes @name {@frames();}
+	@-webkit-keyframes		 @name {@frames();}
+	@-moz-keyframes @name {@frames();}
+	@-ms-keyframes @name {@frames();}
+	@-o-keyframes @name {@frames();}
+	@keyframes @name {@frames();}
 }
 
-.createAnimation(@name, @duration : @defaultDuration, @easing : @defaultEasing){
-	-webkit-animation-name: @name;
-	   -moz-animation-name: @name;
-		-ms-animation-name: @name;
-			animation-name: @name;
-	-webkit-animation-duration: @duration;
-	   -moz-animation-duration: @duration;
-		-ms-animation-duration: @duration;
-			animation-duration: @duration;
-	-webkit-animation-timing-function: @easing;
-	   -moz-animation-timing-function: @easing;
-		-ms-animation-timing-function: @easing;
-			animation-timing-function: @easing;
+.createAnimation(@name, @duration : @defaultDuration, @easing : @defaultEasing) {
+	-webkit-animation-name            : @name;
+	-moz-animation-name               : @name;
+	-ms-animation-name                : @name;
+	animation-name                    : @name;
+	-webkit-animation-duration        : @duration;
+	-moz-animation-duration           : @duration;
+	-ms-animation-duration            : @duration;
+	animation-duration                : @duration;
+	-webkit-animation-timing-function : @easing;
+	-moz-animation-timing-function    : @easing;
+	-ms-animation-timing-function     : @easing;
+	animation-timing-function         : @easing;
 }
 
 
@@ -132,82 +132,82 @@
 	  Standard Animations
 ****************************/
 
-.fadeIn(@duration : @defaultDuration, @easing : @defaultEasing){
+.fadeIn(@duration : @defaultDuration, @easing : @defaultEasing) {
 	.createAnimation(fadeIn; @duration; @easing);
 	.createFrames(fadeIn,
-		{ opacity : 0; },
+	{ opacity : 0; },
 		{ opacity : 1; }
 	);
 }
 
-.fadeInDown(@duration : @defaultDuration, @easing : @defaultEasing){
+.fadeInDown(@duration : @defaultDuration, @easing : @defaultEasing) {
 	.createAnimation(fadeInDown; @duration; @easing);
 	.createFrames(fadeInDown,
-		{ opacity : 0; .transform(translateY(20px));},
+	{ opacity : 0; .transform(translateY(20px));},
 		{ opacity : 1; .transform(translateY(0px));}
 	);
 }
 
-.fadeInTop(@duration : @defaultDuration, @easing : @defaultEasing){
+.fadeInTop(@duration : @defaultDuration, @easing : @defaultEasing) {
 	.createAnimation(fadeInTop; @duration; @easing);
 	.createFrames(fadeInTop,
-		{ opacity : 0; .transform(translateY(-20px)); },
+	{ opacity : 0; .transform(translateY(-20px)); },
 		{ opacity : 1; .transform(translateY(0px));}
 	);
 }
 
-.fadeInLeft(@duration : @defaultDuration, @easing : @defaultEasing){
+.fadeInLeft(@duration : @defaultDuration, @easing : @defaultEasing) {
 	.createAnimation(fadeInLeft; @duration; @easing);
 	.createFrames(fadeInLeft,
-		{ opacity: 0; .transform(translateX(-20px));},
+	{ opacity: 0; .transform(translateX(-20px));},
 		{ opacity: 1; .transform(translateX(0));}
 	);
 }
 
-.fadeInRight(@duration : @defaultDuration, @easing : @defaultEasing){
+.fadeInRight(@duration : @defaultDuration, @easing : @defaultEasing) {
 	.createAnimation(fadeInRight; @duration; @easing);
 	.createFrames(fadeInRight,
-		{ opacity: 0; .transform(translateX(20px));},
+	{ opacity: 0; .transform(translateX(20px));},
 		{ opacity: 1; .transform(translateX(0));}
 	);
 }
 
-.fadeOut(@duration : @defaultDuration, @easing : @defaultEasing){
+.fadeOut(@duration : @defaultDuration, @easing : @defaultEasing) {
 	.createAnimation(fadeOut; @duration; @easing);
 	.createFrames(fadeOut,
-		{ opacity : 1; },
+	{ opacity : 1; },
 		{ opacity : 0; }
 	);
 }
 
-.fadeOutDown(@duration : @defaultDuration, @easing : @defaultEasing){
+.fadeOutDown(@duration : @defaultDuration, @easing : @defaultEasing) {
 	.createAnimation(fadeOutDown; @duration; @easing);
 	.createFrames(fadeOutDown,
-		{ opacity : 1; .transform(translateY(0)); visibility: visible;},
+	{ opacity : 1; .transform(translateY(0)); visibility: visible;},
 		{ opacity : 0; .transform(translateY(20px)); visibility: hidden;}
 	);
 }
 
-.fadeOutTop(@duration : @defaultDuration, @easing : @defaultEasing){
+.fadeOutTop(@duration : @defaultDuration, @easing : @defaultEasing) {
 	.createAnimation(fadeOutTop; @duration; @easing);
 	.createFrames(fadeOutTop,
-		{ opacity : 1; .transform(translateY(0)); },
+	{ opacity : 1; .transform(translateY(0)); },
 		{ opacity : 0; .transform(translateY(-20px)); }
 	);
 }
 
-.fadeOutLeft(@duration : @defaultDuration, @easing : @defaultEasing){
+.fadeOutLeft(@duration : @defaultDuration, @easing : @defaultEasing) {
 	.createAnimation(fadeOutLeft; @duration; @easing);
 	.createFrames(fadeOutLeft,
-		{ opacity : 1; .transform(translateX(0));},
+	{ opacity : 1; .transform(translateX(0));},
 		{ opacity : 0; .transform(translateX(-20px));}
 	);
 }
 
-.fadeOutRight(@duration : @defaultDuration, @easing : @defaultEasing){
+.fadeOutRight(@duration : @defaultDuration, @easing : @defaultEasing) {
 	.createAnimation(fadeOutRight; @duration; @easing);
 	.createFrames(fadeOutRight,
-		{ opacity : 1; .transform(translateX(0));},
+	{ opacity : 1; .transform(translateX(0));},
 		{ opacity : 0; .transform(translateX(20px));}
 	);
 }
@@ -219,50 +219,50 @@
 		Fun Animations
 ****************************/
 
-.spin(@duration : @defaultDuration, @easing : @defaultEasing){
+.spin(@duration : @defaultDuration, @easing : @defaultEasing) {
 	.createAnimation(spin, @duration, @easing);
-	.spinKeyFrames(){
+	.spinKeyFrames() {
 		from { .transform(rotate(0deg)); }
-		to   { .transform(rotate(360deg)); }
+		to { .transform(rotate(360deg)); }
 	}
 	@-webkit-keyframes spin {.spinKeyFrames();}
-	   @-moz-keyframes spin {.spinKeyFrames();}
-	    @-ms-keyframes spin {.spinKeyFrames();}
-	     @-o-keyframes spin {.spinKeyFrames();}
-	        @keyframes spin {.spinKeyFrames();}
+	@-moz-keyframes spin {.spinKeyFrames();}
+	@-ms-keyframes spin {.spinKeyFrames();}
+	@-o-keyframes spin {.spinKeyFrames();}
+	@keyframes spin {.spinKeyFrames();}
 }
 
-.bounce(@duration : @defaultDuration, @easing : @defaultEasing){
+.bounce(@duration : @defaultDuration, @easing : @defaultEasing) {
 	.createAnimation(bounce, @duration, @easing);
-	.bounceKeyFrames(){
+	.bounceKeyFrames() {
 		0%, 20%, 50%, 80%, 100% { .transform(translateY(0));}
 		40% { .transform(translateY(-30px));}
 		60% { .transform(translateY(-15px));}
 	}
 	@-webkit-keyframes bounce {.bounceKeyFrames();}
-	   @-moz-keyframes bounce {.bounceKeyFrames();}
-	    @-ms-keyframes bounce {.bounceKeyFrames();}
-	     @-o-keyframes bounce {.bounceKeyFrames();}
-	        @keyframes bounce {.bounceKeyFrames();}
+	@-moz-keyframes bounce {.bounceKeyFrames();}
+	@-ms-keyframes bounce {.bounceKeyFrames();}
+	@-o-keyframes bounce {.bounceKeyFrames();}
+	@keyframes bounce {.bounceKeyFrames();}
 }
 
-.pulse(@duration : @defaultDuration, @easing : @defaultEasing){
+.pulse(@duration : @defaultDuration, @easing : @defaultEasing) {
 	.createAnimation(pulse, @duration, @easing);
-	.pulseKeyFrames(){
-		0%   { .transform(scale(1));}
-		50%  { .transform(scale(1.4));}
+	.pulseKeyFrames() {
+		0% { .transform(scale(1));}
+		50% { .transform(scale(1.4));}
 		100% { .transform(scale(1));}
 	}
 	@-webkit-keyframes pulse {.pulseKeyFrames();}
-	   @-moz-keyframes pulse {.pulseKeyFrames();}
-	    @-ms-keyframes pulse {.pulseKeyFrames();}
-	     @-o-keyframes pulse {.pulseKeyFrames();}
-	        @keyframes pulse {.pulseKeyFrames();}
+	@-moz-keyframes pulse {.pulseKeyFrames();}
+	@-ms-keyframes pulse {.pulseKeyFrames();}
+	@-o-keyframes pulse {.pulseKeyFrames();}
+	@keyframes pulse {.pulseKeyFrames();}
 }
 
-.rubberBand(@duration : @defaultDuration, @easing : @defaultEasing){
+.rubberBand(@duration : @defaultDuration, @easing : @defaultEasing) {
 	.createAnimation(rubberBand, @duration, @easing);
-	.rubberBandKeyFrames(){
+	.rubberBandKeyFrames() {
 		0% {.transform(scale(1));}
 		30% {.transform(scaleX(1.25) scaleY(0.75));}
 		40% {.transform(scaleX(0.75) scaleY(1.25));}
@@ -270,32 +270,32 @@
 		100% {.transform(scale(1));}
 	}
 	@-webkit-keyframes rubberBand {.rubberBandKeyFrames();}
-	   @-moz-keyframes rubberBand {.rubberBandKeyFrames();}
-	    @-ms-keyframes rubberBand {.rubberBandKeyFrames();}
-	     @-o-keyframes rubberBand {.rubberBandKeyFrames();}
-	        @keyframes rubberBand {.rubberBandKeyFrames();}
+	@-moz-keyframes rubberBand {.rubberBandKeyFrames();}
+	@-ms-keyframes rubberBand {.rubberBandKeyFrames();}
+	@-o-keyframes rubberBand {.rubberBandKeyFrames();}
+	@keyframes rubberBand {.rubberBandKeyFrames();}
 }
 
-.shake(@duration : @defaultDuration, @easing : @defaultEasing){
+.shake(@duration : @defaultDuration, @easing : @defaultEasing) {
 	.createAnimation(shake, @duration, @easing);
-	.shakeKeyFrames(){
+	.shakeKeyFrames() {
 		0%, 100% {.transform( translateX(0));}
 		10%, 30%, 50%, 70%, 90% {.transform( translateX(-10px));}
 		20%, 40%, 60%, 80% {.transform( translateX(10px));}
 	}
 	@-webkit-keyframes shake {.shakeKeyFrames();}
-	   @-moz-keyframes shake {.shakeKeyFrames();}
-	    @-ms-keyframes shake {.shakeKeyFrames();}
-	     @-o-keyframes shake {.shakeKeyFrames();}
-	        @keyframes shake {.shakeKeyFrames();}
+	@-moz-keyframes shake {.shakeKeyFrames();}
+	@-ms-keyframes shake {.shakeKeyFrames();}
+	@-o-keyframes shake {.shakeKeyFrames();}
+	@keyframes shake {.shakeKeyFrames();}
 }
 
-.swing(@duration : @defaultDuration, @easing : @defaultEasing){
-	-webkit-transform-origin: top center;
-	    -ms-transform-origin: top center;
-	        transform-origin: top center;
+.swing(@duration : @defaultDuration, @easing : @defaultEasing) {
+	-webkit-transform-origin : top center;
+	-ms-transform-origin     : top center;
+	transform-origin         : top center;
 	.createAnimation(swing, @duration, @easing);
-	.swingKeyFrames(){
+	.swingKeyFrames() {
 		20% {.transform(rotate(15deg));}
 		40% {.transform(rotate(-10deg));}
 		60% {.transform(rotate(5deg));}
@@ -303,18 +303,18 @@
 		100% {.transform(rotate(0deg));}
 	}
 	@-webkit-keyframes swing {.swingKeyFrames();}
-	   @-moz-keyframes swing {.swingKeyFrames();}
-	    @-ms-keyframes swing {.swingKeyFrames();}
-	     @-o-keyframes swing {.swingKeyFrames();}
-	        @keyframes swing {.swingKeyFrames();}
+	@-moz-keyframes swing {.swingKeyFrames();}
+	@-ms-keyframes swing {.swingKeyFrames();}
+	@-o-keyframes swing {.swingKeyFrames();}
+	@keyframes swing {.swingKeyFrames();}
 }
 
-.twist(@duration : @defaultDuration, @easing : @defaultEasing){
-	-webkit-transform-origin: center center;
-	    -ms-transform-origin: center center;
-	        transform-origin: center center;
+.twist(@duration : @defaultDuration, @easing : @defaultEasing) {
+	-webkit-transform-origin : center center;
+	-ms-transform-origin     : center center;
+	transform-origin         : center center;
 	.createAnimation(swing, @duration, @easing);
-	.swingKeyFrames(){
+	.swingKeyFrames() {
 		20% {.transform(rotate(15deg));}
 		40% {.transform(rotate(-10deg));}
 		60% {.transform(rotate(5deg));}
@@ -322,15 +322,15 @@
 		100% {.transform(rotate(0deg));}
 	}
 	@-webkit-keyframes swing {.swingKeyFrames();}
-	   @-moz-keyframes swing {.swingKeyFrames();}
-	    @-ms-keyframes swing {.swingKeyFrames();}
-	     @-o-keyframes swing {.swingKeyFrames();}
-	        @keyframes swing {.swingKeyFrames();}
+	@-moz-keyframes swing {.swingKeyFrames();}
+	@-ms-keyframes swing {.swingKeyFrames();}
+	@-o-keyframes swing {.swingKeyFrames();}
+	@keyframes swing {.swingKeyFrames();}
 }
 
-.wobble(@duration : @defaultDuration, @easing : @defaultEasing){
+.wobble(@duration : @defaultDuration, @easing : @defaultEasing) {
 	.createAnimation(wobble, @duration, @easing);
-	.wobbleKeyFrames(){
+	.wobbleKeyFrames() {
 		0% {.transform(translateX(0%));}
 		15% {.transform(translateX(-25%) rotate(-5deg));}
 		30% {.transform(translateX(20%) rotate(3deg));}
@@ -340,22 +340,22 @@
 		100% {.transform(translateX(0%));}
 	}
 	@-webkit-keyframes wobble {.wobbleKeyFrames();}
-	   @-moz-keyframes wobble {.wobbleKeyFrames();}
-	    @-ms-keyframes wobble {.wobbleKeyFrames();}
-	     @-o-keyframes wobble {.wobbleKeyFrames();}
-	        @keyframes wobble {.wobbleKeyFrames();}
+	@-moz-keyframes wobble {.wobbleKeyFrames();}
+	@-ms-keyframes wobble {.wobbleKeyFrames();}
+	@-o-keyframes wobble {.wobbleKeyFrames();}
+	@keyframes wobble {.wobbleKeyFrames();}
 }
 
-.popIn(@duration : @defaultDuration, @easing : @defaultEasing){
+.popIn(@duration : @defaultDuration, @easing : @defaultEasing) {
 	.createAnimation(popIn, @duration, @easing);
-	.popInKeyFrames(){
-		0%   { .transform(scale(0));}
-		70%  { .transform(scale(1.4));}
+	.popInKeyFrames() {
+		0% { .transform(scale(0));}
+		70% { .transform(scale(1.4));}
 		100% { .transform(scale(1));}
 	}
 	@-webkit-keyframes popIn {.popInKeyFrames();}
-	   @-moz-keyframes popIn {.popInKeyFrames();}
-	    @-ms-keyframes popIn {.popInKeyFrames();}
-	     @-o-keyframes popIn {.popInKeyFrames();}
-	        @keyframes popIn {.popInKeyFrames();}
+	@-moz-keyframes popIn {.popInKeyFrames();}
+	@-ms-keyframes popIn {.popInKeyFrames();}
+	@-o-keyframes popIn {.popInKeyFrames();}
+	@keyframes popIn {.popInKeyFrames();}
 }