Merge branch 'master' of https://github.com/naturalcrit/homebrewery into vitreum-to-vite

Getting rid of requires in favor of newer syntax

.circleci/config.yml

@@ -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
@@ -145,3 +146,4 @@ your contribution to the project, please join our [gitter chat][gitter-url].
 [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
 
+

client/admin/admin.jsx

@@ -1,21 +1,23 @@
 import './admin.less';
 import React, { useEffect, useState } from 'react';
-const BrewUtils = require('./brewUtils/brewUtils.jsx');
-const NotificationUtils = require('./notificationUtils/notificationUtils.jsx');
+import BrewUtils from './brewUtils/brewUtils.jsx';
+import NotificationUtils from './notificationUtils/notificationUtils.jsx';
 import AuthorUtils from './authorUtils/authorUtils.jsx';
 import LockTools  from './lockTools/lockTools.jsx';
 
 const tabGroups = ['brew', 'notifications', 'authors', 'locks'];
 
+const ADMIN_TAB = 'HB_adminPage_currentTab';
+
 const Admin = ()=>{
 	const [currentTab, setCurrentTab] = useState('');
 
 	useEffect(()=>{
-		setCurrentTab(localStorage.getItem('hbAdminTab') || 'brew');
+		setCurrentTab(localStorage.getItem(ADMIN_TAB) || 'brew');
 	}, []);
 
 	useEffect(()=>{
-		localStorage.setItem('hbAdminTab', currentTab);
+		localStorage.setItem(ADMIN_TAB, currentTab);
 	}, [currentTab]);
 
 	return (

client/admin/admin.less

@@ -1,8 +1,9 @@
-@import 'naturalcrit/styles/reset.less';
-@import 'naturalcrit/styles/elements.less';
-@import 'naturalcrit/styles/animations.less';
-@import 'naturalcrit/styles/colors.less';
-@import 'naturalcrit/styles/tooltip.less';
+@import './shared/naturalcrit/styles/reset.less';
+@import './shared/naturalcrit/styles/elements.less';
+@import './shared/naturalcrit/styles/animations.less';
+@import './shared/naturalcrit/styles/colors.less';
+@import './shared/naturalcrit/styles/tooltip.less';
+@import './themes/fonts/iconFonts/fontAwesome.less';
 
 @import 'font-awesome/css/font-awesome.css';
 

client/admin/authorUtils/authorLookup/authorLookup.jsx

@@ -84,4 +84,4 @@ const authorLookup = ()=>{
 	);
 };
 
-module.exports = authorLookup;
+export default authorLookup;

client/admin/authorUtils/authorUtils.jsx

@@ -10,4 +10,4 @@ const authorUtils = ()=>{
 	);
 };
 
-module.exports = authorUtils;
+export default authorUtils;

client/admin/brewUtils/brewCleanup/brewCleanup.jsx

@@ -1,9 +1,8 @@
-const React       = require('react');
-const createClass = require('create-react-class');
+import React from 'react';
+import createReactClass from 'create-react-class';
+import request from 'superagent';
 
-const request = require('superagent');
-
-const BrewCleanup = createClass({
+const BrewCleanup = createReactClass({
 	displayName : 'BrewCleanup',
 	getDefaultProps(){
 		return {};
@@ -69,4 +68,4 @@ const BrewCleanup = createClass({
 	}
 });
 
-module.exports = BrewCleanup;
+export default BrewCleanup;

client/admin/brewUtils/brewCompress/brewCompress.jsx

@@ -1,8 +1,8 @@
-const React       = require('react');
-const createClass = require('create-react-class');
-const request = require('superagent');
+import React from 'react';
+import createReactClass from 'create-react-class';
+import request from 'superagent';
 
-const BrewCompress = createClass({
+const BrewCompress = createReactClass({
 	displayName : 'BrewCompress',
 	getDefaultProps(){
 		return {};
@@ -85,4 +85,4 @@ const BrewCompress = createClass({
 	}
 });
 
-module.exports = BrewCompress;
+export default BrewCompress;

client/admin/brewUtils/brewLookup/brewLookup.jsx

@@ -1,12 +1,11 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const cx    = require('classnames');
+import React from 'react';
+import createReactClass from 'create-react-class';
+import request from 'superagent';
+import cx from 'classnames';
 
-const request = require('superagent');
-const Moment = require('moment');
+import Moment from 'moment';
 
-
-const BrewLookup = createClass({
+const BrewLookup = createReactClass({
 	getDefaultProps() {
 		return {};
 	},
@@ -110,4 +109,4 @@ const BrewLookup = createClass({
 	}
 });
 
-module.exports = BrewLookup;
+export default BrewLookup;

client/admin/brewUtils/brewUtils.jsx

@@ -1,15 +1,14 @@
-const React = require('react');
-const createClass = require('create-react-class');
-require('./brewUtils.less');
+import React from 'react';
+import './brewUtils.less';
 
-const BrewCleanup = require('./brewCleanup/brewCleanup.jsx');
-const BrewLookup = require('./brewLookup/brewLookup.jsx');
-const BrewCompress = require ('./brewCompress/brewCompress.jsx');
-const Stats = require('./stats/stats.jsx');
+import BrewCleanup from './brewCleanup/brewCleanup.jsx';
+import BrewLookup from './brewLookup/brewLookup.jsx';
+import BrewCompress from './brewCompress/brewCompress.jsx';
+import Stats from './stats/stats.jsx';
 
-const BrewUtils = createClass({
-	render : function(){
-		return <>
+const BrewUtils = ()=>{
+	return (
+		<>
 			<Stats />
 			<hr />
 			<BrewLookup />
@@ -17,8 +16,7 @@ const BrewUtils = createClass({
 			<BrewCleanup />
 			<hr />
 			<BrewCompress />
-		</>;
-	}
-});
-
-module.exports = BrewUtils;
+		</>
+	);
+};
+export default BrewUtils;

client/admin/brewUtils/stats/stats.jsx

@@ -1,9 +1,8 @@
-const React       = require('react');
-const createClass = require('create-react-class');
+import React from 'react';
+import createReactClass from 'create-react-class';
+import request from 'superagent';
 
-const request = require('superagent');
-
-const Stats = createClass({
+const Stats = createReactClass({
 	displayName : 'Stats',
 	getDefaultProps(){
 		return {};
@@ -43,4 +42,4 @@ const Stats = createClass({
 	}
 });
 
-module.exports = Stats;
+export default Stats;

client/admin/lockTools/lockTools.jsx

@@ -1,11 +1,11 @@
 /*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/
-require('./lockTools.less');
-const React = require('react');
-const createClass = require('create-react-class');
+import './lockTools.less';
+import React from 'react';
+import createReactClass from 'create-react-class';
 
 import request from '../../homebrew/utils/request-middleware.js';
 
-const LockTools = createClass({
+const LockTools = createReactClass({
 	displayName     : 'LockTools',
 	getInitialState : function() {
 		return {
@@ -55,7 +55,7 @@ const LockTools = createClass({
 	}
 });
 
-const LockBrew = createClass({
+const LockBrew = createReactClass({
 	displayName     : 'LockBrew',
 	getInitialState : function() {
 		// Default values
@@ -183,7 +183,7 @@ const LockBrew = createClass({
 	}
 });
 
-const LockTable = createClass({
+const LockTable = createReactClass({
 	displayName     : 'LockTable',
 	getDefaultProps : function() {
 		return {
@@ -273,7 +273,7 @@ const LockTable = createClass({
 	}
 });
 
-const LockLookup = createClass({
+const LockLookup = createReactClass({
 	displayName     : 'LockLookup',
 	getDefaultProps : function() {
 		return {
@@ -339,4 +339,4 @@ const LockLookup = createClass({
 	}
 });
 
-module.exports = LockTools;
+export default LockTools;

client/admin/notificationUtils/notificationAdd/notificationAdd.jsx

@@ -1,7 +1,6 @@
-require('./notificationAdd.less');
-const React = require('react');
-const { useState, useRef } = require('react');
-const request = require('superagent');
+import './notificationAdd.less';
+import React, { useState, useRef } from 'react';
+import request from 'superagent';
 
 const NotificationAdd = ()=>{
 	const [notificationResult, setNotificationResult] = useState(null);
@@ -106,4 +105,4 @@ const NotificationAdd = ()=>{
 	);
 };
 
-module.exports = NotificationAdd;
+export default NotificationAdd;

client/admin/notificationUtils/notificationLookup/notificationLookup.jsx

@@ -1,9 +1,7 @@
-require('./notificationLookup.less');
-
-const React = require('react');
-const { useState } = require('react');
-const request = require('superagent');
-const Moment = require('moment');
+import './notificationLookup.less';
+import React, { useState } from 'react';
+import request from 'superagent';
+import Moment from 'moment';
 
 const NotificationDetail = ({ notification, onDelete })=>(
 	<>
@@ -102,4 +100,4 @@ const NotificationLookup = ()=>{
 	);
 };
 
-module.exports = NotificationLookup;
+export default NotificationLookup;

client/admin/notificationUtils/notificationUtils.jsx

@@ -1,7 +1,6 @@
-const React = require('react');
-
-const NotificationLookup = require('./notificationLookup/notificationLookup.jsx');
-const NotificationAdd = require('./notificationAdd/notificationAdd.jsx');
+import React from 'react';
+import NotificationLookup from './notificationLookup/notificationLookup.jsx';
+import NotificationAdd from './notificationAdd/notificationAdd.jsx';
 
 const NotificationUtils = ()=>{
 	return (
@@ -12,4 +11,4 @@ const NotificationUtils = ()=>{
 	);
 };
 
-module.exports = NotificationUtils;
+export default NotificationUtils;

client/components/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,
@@ -79,6 +79,6 @@ const showAutocompleteEmoji = function(CodeMirror, editor) {
 	});
 };
 
-module.exports = {
+export default {
 	showAutocompleteEmoji
 };

client/components/codeEditor/close-tag.js

@@ -38,11 +38,11 @@ const autoCloseCurlyBraces = function(CodeMirror, cm, typingClosingBrace) {
 	}
 };
 
-module.exports = {
+export default {
 	autoCloseCurlyBraces : function(CodeMirror, codeMirror) {
 		const map = { name: 'autoCloseCurlyBraces' };
 		map[`'{'`] = function(cm) { return autoCloseCurlyBraces(CodeMirror, cm); };
 		map[`'}'`] = function(cm) { return autoCloseCurlyBraces(CodeMirror, cm, true); };
-		codeMirror.addKeyMap(map);
+		codeMirror?.addKeyMap(map);
 	}
 };

client/components/codeEditor/codeEditor.jsx

@@ -1,51 +1,13 @@
 /* eslint-disable max-lines */
-require('./codeEditor.less');
-const React = require('react');
-const createClass = require('create-react-class');
-const _ = require('lodash');
-const closeTag = require('./close-tag');
-const autoCompleteEmoji = require('./autocompleteEmoji');
-
+import './codeEditor.less';
+import React from 'react';
+import createReactClass from 'create-react-class';
+import _ from 'lodash';
+import closeTag from './close-tag';
+import autoCompleteEmoji from './autocompleteEmoji';
 let CodeMirror;
-if(typeof window !== 'undefined'){
-	CodeMirror = require('codemirror');
 
-	//Language Modes
-	require('codemirror/mode/gfm/gfm.js'); //Github flavoured markdown
-	require('codemirror/mode/css/css.js');
-	require('codemirror/mode/javascript/javascript.js');
-
-	//Addons
-	//Code folding
-	require('codemirror/addon/fold/foldcode.js');
-	require('codemirror/addon/fold/foldgutter.js');
-	//Search and replace
-	require('codemirror/addon/search/search.js');
-	require('codemirror/addon/search/searchcursor.js');
-	require('codemirror/addon/search/jump-to-line.js');
-	require('codemirror/addon/search/match-highlighter.js');
-	require('codemirror/addon/search/matchesonscrollbar.js');
-	require('codemirror/addon/dialog/dialog.js');
-	//Trailing space highlighting
-	// require('codemirror/addon/edit/trailingspace.js');
-	//Active line highlighting
-	// require('codemirror/addon/selection/active-line.js');
-	//Scroll past last line
-	require('codemirror/addon/scroll/scrollpastend.js');
-	//Auto-closing
-	//XML code folding is a requirement of the auto-closing tag feature and is not enabled
-	require('codemirror/addon/fold/xml-fold.js');
-	require('codemirror/addon/edit/closetag.js');
-	//Autocompletion
-	require('codemirror/addon/hint/show-hint.js');
-
-	const foldPagesCode = require('./fold-pages');
-	foldPagesCode.registerHomebreweryHelper(CodeMirror);
-	const foldCSSCode = require('./fold-css');
-	foldCSSCode.registerHomebreweryHelper(CodeMirror);
-}
-
-const CodeEditor = createClass({
+const CodeEditor = createReactClass({
 	displayName     : 'CodeEditor',
 	getDefaultProps : function() {
 		return {
@@ -66,23 +28,54 @@ const CodeEditor = createClass({
 
 	editor : React.createRef(null),
 
-	componentDidMount : function() {
+	async componentDidMount() {
+		CodeMirror = (await import('codemirror')).default;
+		this.CodeMirror = CodeMirror;
+
+		await import('codemirror/mode/gfm/gfm.js');
+		await import('codemirror/mode/css/css.js');
+		await import('codemirror/mode/javascript/javascript.js');
+
+		// addons
+		await import('codemirror/addon/fold/foldcode.js');
+		await import('codemirror/addon/fold/foldgutter.js');
+		await import('codemirror/addon/fold/xml-fold.js');
+		await import('codemirror/addon/search/search.js');
+		await import('codemirror/addon/search/searchcursor.js');
+		await import('codemirror/addon/search/jump-to-line.js');
+		await import('codemirror/addon/search/match-highlighter.js');
+		await import('codemirror/addon/search/matchesonscrollbar.js');
+		await import('codemirror/addon/dialog/dialog.js');
+		await import('codemirror/addon/scroll/scrollpastend.js');
+		await import('codemirror/addon/edit/closetag.js');
+		await import('codemirror/addon/hint/show-hint.js');
+		// import 'codemirror/addon/selection/active-line.js';
+		// import 'codemirror/addon/edit/trailingspace.js';
+
+
+		// register helpers dynamically as well
+		const foldPagesCode = (await import('./fold-pages')).default;
+		const foldCSSCode   = (await import('./fold-css')).default;
+		foldPagesCode.registerHomebreweryHelper(CodeMirror);
+		foldCSSCode.registerHomebreweryHelper(CodeMirror);
+
 		this.buildEditor();
-		const newDoc = CodeMirror.Doc(this.props.value, this.props.language);
-		this.codeMirror.swapDoc(newDoc);
+		const newDoc = CodeMirror?.Doc(this.props.value, this.props.language);
+		this.codeMirror?.swapDoc(newDoc);
 	},
 
+
 	componentDidUpdate : function(prevProps) {
 		if(prevProps.view !== this.props.view){ //view changed; swap documents
 			let newDoc;
 
 			if(!this.state.docs[this.props.view]) {
-				newDoc = CodeMirror.Doc(this.props.value, this.props.language);
+				newDoc = CodeMirror?.Doc(this.props.value, this.props.language);
 			} else {
 				newDoc = this.state.docs[this.props.view];
 			}
 
-			const oldDoc = { [prevProps.view]: this.codeMirror.swapDoc(newDoc) };
+			const oldDoc = { [prevProps.view]: this.codeMirror?.swapDoc(newDoc) };
 
 			this.setState((prevState)=>({
 				docs : _.merge({}, prevState.docs, oldDoc)
@@ -90,17 +83,17 @@ const CodeEditor = createClass({
 
 			this.props.rerenderParent();
 		} else if(this.codeMirror?.getValue() != this.props.value) { //update editor contents if brew.text is changed from outside
-			this.codeMirror.setValue(this.props.value);
+			this.codeMirror?.setValue(this.props.value);
 		}
 
 		if(this.props.enableFolding) {
-			this.codeMirror.setOption('foldOptions', this.foldOptions(this.codeMirror));
+			this.codeMirror?.setOption('foldOptions', this.foldOptions(this.codeMirror));
 		} else {
-			this.codeMirror.setOption('foldOptions', false);
+			this.codeMirror?.setOption('foldOptions', false);
 		}
 
 		if(prevProps.editorTheme !== this.props.editorTheme){
-			this.codeMirror.setOption('theme', this.props.editorTheme);
+			this.codeMirror?.setOption('theme', this.props.editorTheme);
 		}
 	},
 
@@ -188,8 +181,8 @@ const CodeEditor = createClass({
 		closeTag.autoCloseCurlyBraces(CodeMirror, this.codeMirror);
 		autoCompleteEmoji.showAutocompleteEmoji(CodeMirror, this.codeMirror);
 
-		// Note: codeMirror passes a copy of itself in this callback. cm === this.codeMirror. Either one works.
-		this.codeMirror.on('change', (cm)=>{this.props.onChange(cm.getValue());});
+		// Note: codeMirror passes a copy of itself in this callback. cm === this.codeMirror?. Either one works.
+		this.codeMirror?.on('change', (cm)=>{this.props.onChange(cm.getValue());});
 		this.updateSize();
 	},
 
@@ -203,84 +196,84 @@ const CodeEditor = createClass({
 	},
 
 	dedent : function () {
-		this.codeMirror.execCommand('indentLess');
+		this.codeMirror?.execCommand('indentLess');
 	},
 
 	makeHeader : function (number) {
-		const selection = this.codeMirror.getSelection();
+		const selection = this.codeMirror?.getSelection();
 		const header = Array(number).fill('#').join('');
-		this.codeMirror.replaceSelection(`${header} ${selection}`, 'around');
-		const cursor = this.codeMirror.getCursor();
-		this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch + selection.length + number + 1 });
+		this.codeMirror?.replaceSelection(`${header} ${selection}`, 'around');
+		const cursor = this.codeMirror?.getCursor();
+		this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch + selection.length + number + 1 });
 	},
 
 	makeBold : function() {
-		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '**' && selection.slice(-2) === '**';
-		this.codeMirror.replaceSelection(t ? selection.slice(2, -2) : `**${selection}**`, 'around');
+		const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 2) === '**' && selection.slice(-2) === '**';
+		this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `**${selection}**`, 'around');
 		if(selection.length === 0){
-			const cursor = this.codeMirror.getCursor();
-			this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 2 });
+			const cursor = this.codeMirror?.getCursor();
+			this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch - 2 });
 		}
 	},
 
 	makeItalic : function() {
-		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '*' && selection.slice(-1) === '*';
-		this.codeMirror.replaceSelection(t ? selection.slice(1, -1) : `*${selection}*`, 'around');
+		const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 1) === '*' && selection.slice(-1) === '*';
+		this.codeMirror?.replaceSelection(t ? selection.slice(1, -1) : `*${selection}*`, 'around');
 		if(selection.length === 0){
-			const cursor = this.codeMirror.getCursor();
-			this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 1 });
+			const cursor = this.codeMirror?.getCursor();
+			this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch - 1 });
 		}
 	},
 
 	makeSuper : function() {
-		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '^' && selection.slice(-1) === '^';
-		this.codeMirror.replaceSelection(t ? selection.slice(1, -1) : `^${selection}^`, 'around');
+		const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 1) === '^' && selection.slice(-1) === '^';
+		this.codeMirror?.replaceSelection(t ? selection.slice(1, -1) : `^${selection}^`, 'around');
 		if(selection.length === 0){
-			const cursor = this.codeMirror.getCursor();
-			this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 1 });
+			const cursor = this.codeMirror?.getCursor();
+			this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch - 1 });
 		}
 	},
 
 	makeSub : function() {
-		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '^^' && selection.slice(-2) === '^^';
-		this.codeMirror.replaceSelection(t ? selection.slice(2, -2) : `^^${selection}^^`, 'around');
+		const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 2) === '^^' && selection.slice(-2) === '^^';
+		this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `^^${selection}^^`, 'around');
 		if(selection.length === 0){
-			const cursor = this.codeMirror.getCursor();
-			this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 2 });
+			const cursor = this.codeMirror?.getCursor();
+			this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch - 2 });
 		}
 	},
 
 
 	makeNbsp : function() {
-		this.codeMirror.replaceSelection(' ', 'end');
+		this.codeMirror?.replaceSelection(' ', 'end');
 	},
 
 	makeSpace : function() {
-		const selection = this.codeMirror.getSelection();
+		const selection = this.codeMirror?.getSelection();
 		const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}';
 		if(t){
 			const percent = parseInt(selection.slice(8, -4)) + 10;
-			this.codeMirror.replaceSelection(percent < 90 ? `{{width:${percent}% }}` : '{{width:100% }}', 'around');
+			this.codeMirror?.replaceSelection(percent < 90 ? `{{width:${percent}% }}` : '{{width:100% }}', 'around');
 		} else {
-			this.codeMirror.replaceSelection(`{{width:10% }}`, 'around');
+			this.codeMirror?.replaceSelection(`{{width:10% }}`, 'around');
 		}
 	},
 
 	removeSpace : function() {
-		const selection = this.codeMirror.getSelection();
+		const selection = this.codeMirror?.getSelection();
 		const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}';
 		if(t){
 			const percent = parseInt(selection.slice(8, -4)) - 10;
-			this.codeMirror.replaceSelection(percent > 10 ? `{{width:${percent}% }}` : '', 'around');
+			this.codeMirror?.replaceSelection(percent > 10 ? `{{width:${percent}% }}` : '', 'around');
 		}
 	},
 
 	newColumn : function() {
-		this.codeMirror.replaceSelection('\n\\column\n\n', 'end');
+		this.codeMirror?.replaceSelection('\n\\column\n\n', 'end');
 	},
 
 	newPage : function() {
-		this.codeMirror.replaceSelection('\n\\page\n\n', 'end');
+		this.codeMirror?.replaceSelection('\n\\page\n\n', 'end');
 	},
 
 	injectText : function(injectText, overwrite=true) {
@@ -293,29 +286,29 @@ const CodeEditor = createClass({
 	},
 
 	makeUnderline : function() {
-		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 3) === '<u>' && selection.slice(-4) === '</u>';
-		this.codeMirror.replaceSelection(t ? selection.slice(3, -4) : `<u>${selection}</u>`, 'around');
+		const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 3) === '<u>' && selection.slice(-4) === '</u>';
+		this.codeMirror?.replaceSelection(t ? selection.slice(3, -4) : `<u>${selection}</u>`, 'around');
 		if(selection.length === 0){
-			const cursor = this.codeMirror.getCursor();
-			this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 4 });
+			const cursor = this.codeMirror?.getCursor();
+			this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch - 4 });
 		}
 	},
 
 	makeSpan : function() {
-		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}';
-		this.codeMirror.replaceSelection(t ? selection.slice(2, -2) : `{{ ${selection}}}`, 'around');
+		const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}';
+		this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `{{ ${selection}}}`, 'around');
 		if(selection.length === 0){
-			const cursor = this.codeMirror.getCursor();
-			this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 2 });
+			const cursor = this.codeMirror?.getCursor();
+			this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch - 2 });
 		}
 	},
 
 	makeDiv : function() {
-		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}';
-		this.codeMirror.replaceSelection(t ? selection.slice(2, -2) : `{{\n${selection}\n}}`, 'around');
+		const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}';
+		this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `{{\n${selection}\n}}`, 'around');
 		if(selection.length === 0){
-			const cursor = this.codeMirror.getCursor();
-			this.codeMirror.setCursor({ line: cursor.line - 1, ch: cursor.ch });  // set to -2? if wanting to enter classes etc.  if so, get rid of first \n when replacing selection
+			const cursor = this.codeMirror?.getCursor();
+			this.codeMirror?.setCursor({ line: cursor.line - 1, ch: cursor.ch });  // set to -2? if wanting to enter classes etc.  if so, get rid of first \n when replacing selection
 		}
 	},
 
@@ -323,7 +316,7 @@ const CodeEditor = createClass({
 		let regex;
 		let cursorPos;
 		let newComment;
-		const selection = this.codeMirror.getSelection();
+		const selection = this.codeMirror?.getSelection();
 		if(this.props.language === 'gfm'){
 			regex = /^\s*(<!--\s?)(.*?)(\s?-->)\s*$/gs;
 			cursorPos = 4;
@@ -333,44 +326,44 @@ const CodeEditor = createClass({
 			cursorPos = 3;
 			newComment = `/* ${selection} */`;
 		}
-		this.codeMirror.replaceSelection(regex.test(selection) == true ? selection.replace(regex, '$2') : newComment, 'around');
+		this.codeMirror?.replaceSelection(regex.test(selection) == true ? selection.replace(regex, '$2') : newComment, 'around');
 		if(selection.length === 0){
-			const cursor = this.codeMirror.getCursor();
-			this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - cursorPos });
+			const cursor = this.codeMirror?.getCursor();
+			this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch - cursorPos });
 		};
 	},
 
 	makeLink : function() {
 		const isLink = /^\[(.*)\]\((.*)\)$/;
-		const selection = this.codeMirror.getSelection().trim();
+		const selection = this.codeMirror?.getSelection().trim();
 		let match;
 		if(match = isLink.exec(selection)){
 			const altText = match[1];
 			const url     = match[2];
-			this.codeMirror.replaceSelection(`${altText} ${url}`);
-			const cursor = this.codeMirror.getCursor();
-			this.codeMirror.setSelection({ line: cursor.line, ch: cursor.ch - url.length }, { line: cursor.line, ch: cursor.ch });
+			this.codeMirror?.replaceSelection(`${altText} ${url}`);
+			const cursor = this.codeMirror?.getCursor();
+			this.codeMirror?.setSelection({ line: cursor.line, ch: cursor.ch - url.length }, { line: cursor.line, ch: cursor.ch });
 		} else {
-			this.codeMirror.replaceSelection(`[${selection || 'alt text'}](url)`);
-			const cursor = this.codeMirror.getCursor();
-			this.codeMirror.setSelection({ line: cursor.line, ch: cursor.ch - 4 }, { line: cursor.line, ch: cursor.ch - 1 });
+			this.codeMirror?.replaceSelection(`[${selection || 'alt text'}](url)`);
+			const cursor = this.codeMirror?.getCursor();
+			this.codeMirror?.setSelection({ line: cursor.line, ch: cursor.ch - 4 }, { line: cursor.line, ch: cursor.ch - 1 });
 		}
 	},
 
 	makeList : function(listType) {
-		const selectionStart = this.codeMirror.getCursor('from'), selectionEnd = this.codeMirror.getCursor('to');
-		this.codeMirror.setSelection(
+		const selectionStart = this.codeMirror?.getCursor('from'), selectionEnd = this.codeMirror?.getCursor('to');
+		this.codeMirror?.setSelection(
 			{ line: selectionStart.line, ch: 0 },
-			{ line: selectionEnd.line, ch: this.codeMirror.getLine(selectionEnd.line).length }
+			{ line: selectionEnd.line, ch: this.codeMirror?.getLine(selectionEnd.line).length }
 		);
-		const newSelection = this.codeMirror.getSelection();
+		const newSelection = this.codeMirror?.getSelection();
 
 		const regex = /^\d+\.\s|^-\s/gm;
 		if(newSelection.match(regex) != null){   	// if selection IS A LIST
-			this.codeMirror.replaceSelection(newSelection.replace(regex, ''), 'around');
+			this.codeMirror?.replaceSelection(newSelection.replace(regex, ''), 'around');
 		} else {									// if selection IS NOT A LIST
-			listType == 'UL' ? this.codeMirror.replaceSelection(newSelection.replace(/^/gm, `- `), 'around') :
-				this.codeMirror.replaceSelection(newSelection.replace(/^/gm, (()=>{
+			listType == 'UL' ? this.codeMirror?.replaceSelection(newSelection.replace(/^/gm, `- `), 'around') :
+				this.codeMirror?.replaceSelection(newSelection.replace(/^/gm, (()=>{
 					let n = 1;
 					return ()=>{
 						return `${n++}. `;
@@ -380,39 +373,39 @@ const CodeEditor = createClass({
 	},
 
 	foldAllCode : function() {
-		this.codeMirror.execCommand('foldAll');
+		this.codeMirror?.execCommand('foldAll');
 	},
 
 	unfoldAllCode : function() {
-		this.codeMirror.execCommand('unfoldAll');
+		this.codeMirror?.execCommand('unfoldAll');
 	},
 
 	//=-- Externally used -==//
 	setCursorPosition : function(line, char){
 		setTimeout(()=>{
-			this.codeMirror.focus();
-			this.codeMirror.doc.setCursor(line, char);
+			this.codeMirror?.focus();
+			this.codeMirror?.doc.setCursor(line, char);
 		}, 10);
 	},
 	getCursorPosition : function(){
-		return this.codeMirror.getCursor();
+		return this.codeMirror?.getCursor();
 	},
 	getTopVisibleLine : function(){
-		const rect = this.codeMirror.getWrapperElement().getBoundingClientRect();
-		const topVisibleLine = this.codeMirror.lineAtHeight(rect.top, 'window');
+		const rect = this.codeMirror?.getWrapperElement().getBoundingClientRect();
+		const topVisibleLine = this.codeMirror?.lineAtHeight(rect.top, 'window');
 		return topVisibleLine;
 	},
 	updateSize : function(){
-		this.codeMirror.refresh();
+		this.codeMirror?.refresh();
 	},
 	redo : function(){
-		return this.codeMirror.redo();
+		return this.codeMirror?.redo();
 	},
 	undo : function(){
-		return this.codeMirror.undo();
+		return this.codeMirror?.undo();
 	},
 	historySize : function(){
-		return this.codeMirror.doc.historySize();
+		return this.codeMirror?.doc.historySize();
 	},
 
 	foldOptions : function(cm){
@@ -426,7 +419,7 @@ const CodeEditor = createClass({
 
 				let foldPreviewText = '';
 				while (currentLine <= to.line && text.length <= maxLength) {
-					const currentText = this.codeMirror.getLine(currentLine);
+					const currentText = this.codeMirror?.getLine(currentLine);
 					currentLine++;
 					if(currentText[0] == '#'){
 						foldPreviewText = currentText;
@@ -461,5 +454,5 @@ const CodeEditor = createClass({
 	}
 });
 
-module.exports = CodeEditor;
+export default CodeEditor;
 

client/components/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;
 	//}

client/components/codeEditor/fold-css.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
 	registerHomebreweryHelper : function(CodeMirror) {
 		CodeMirror.registerHelper('fold', 'homebrewerycss', function(cm, start) {
 

client/components/codeEditor/fold-pages.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
 	registerHomebreweryHelper : function(CodeMirror) {
 		CodeMirror.registerHelper('fold', 'homebrewery', function(cm, start) {
 			const matcher = /^\\page.*/;

client/components/combobox.jsx

@@ -1,9 +1,9 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const _ = require('lodash');
-require('./combobox.less');
+import React from 'react';
+import createReactClass from 'create-react-class';
+import _ from 'lodash';
+import './combobox.less';
 
-const Combobox = createClass({
+const Combobox = createReactClass({
 	displayName     : 'Combobox',
 	getDefaultProps : function() {
 		return {
@@ -126,4 +126,4 @@ const Combobox = createClass({
 	}
 });
 
-module.exports = Combobox;
+export default Combobox;

client/components/renderWarnings/renderWarnings.jsx

@@ -1,11 +1,11 @@
-require('./renderWarnings.less');
-const React = require('react');
-const createClass = require('create-react-class');
-const _     = require('lodash');
+import './renderWarnings.less';
+import React from 'react';
+import createReactClass from 'create-react-class';
+import _ from 'lodash';
 
-import Dialog from '../../../client/components/dialog.jsx';
+import Dialog from '../dialog.jsx';
 
-const RenderWarnings = createClass({
+const RenderWarnings = createReactClass({
 	displayName     : 'RenderWarnings',
 	getInitialState : function() {
 		return {
@@ -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.
@@ -57,4 +57,4 @@ const RenderWarnings = createClass({
 	}
 });
 
-module.exports = RenderWarnings;
+export default RenderWarnings;

client/components/splitPane/splitPane.jsx

@@ -1,8 +1,9 @@
-require('./splitPane.less');
-const React = require('react');
-const { useState, useEffect } = React;
 
-const storageKey = 'naturalcrit-pane-split';
+import './splitPane.less';
+import React, { useEffect, useState } from 'react';
+
+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);
 	};
 
@@ -107,4 +108,4 @@ const Pane = ({ width, children, isDragging, moveBrew, moveSource, liveScroll, s
 	);
 };
 
-module.exports = SplitPane;
+export default SplitPane;

client/components/splitPane/splitPane.less

@@ -1,3 +1,5 @@
+@import './shared/naturalcrit/styles/core.less';
+
 
 .splitPane {
 	position       : relative;

client/components/svg/cauldron.svg.jsx

@@ -1,7 +1,6 @@
-const React = require('react');
-const createClass = require('create-react-class');
+import React from 'react';
 
-module.exports = function(props){
+export default function(props){
 	return <svg version='1.1' x='0px' y='0px' viewBox='0 0 90 112.5' enableBackground='new 0 0 90 90' >
 		<path d='M25.363,25.54c0,1.906,8.793,3.454,19.636,3.454c10.848,0,19.638-1.547,19.638-3.454c0-1.12-3.056-2.117-7.774-2.75  c-1.418,1.891-3.659,3.133-6.208,3.133c-2.85,0-5.315-1.547-6.67-3.833C33.617,22.185,25.363,23.692,25.363,25.54z'/><path d='M84.075,54.142c0-8.68-2.868-17.005-8.144-23.829c1.106-1.399,1.41-2.771,1.41-3.854c0-6.574-10.245-9.358-19.264-10.533  c0.209,0.706,0.359,1.439,0.359,2.215c0,0.09-0.022,0.17-0.028,0.26l0,0c-0.028,0.853-0.195,1.667-0.479,2.429  c9.106,1.282,14.508,3.754,14.508,5.63c0,2.644-10.688,6.486-27.439,6.486c-16.748,0-27.438-3.842-27.438-6.486  c0-2.542,9.904-6.183,25.559-6.459c-0.098-0.396-0.159-0.807-0.2-1.223c0.006,0,0.013,0,0.017,0  c-0.017-0.213-0.063-0.417-0.063-0.636c0-1.084,0.226-2.119,0.628-3.058c-6.788,0.129-30.846,1.299-30.846,11.376  c0,1.083,0.305,2.455,1.411,3.854c-5.276,6.823-8.145,15.149-8.145,23.829c0,11.548,5.187,20.107,14.693,25.115  c-0.902,3.146-1.391,7.056,1.111,8.181c2.626,1.178,5.364-2.139,7.111-5.005c4.73,1.261,10.13,1.923,16.161,1.923  c6.034,0,11.428-0.661,16.158-1.922c1.75,2.865,4.493,6.18,7.112,5.004c2.504-1.123,2.014-5.035,1.113-8.179  C78.889,74.249,84.075,65.689,84.075,54.142z M70.39,31.392c5.43,6.046,8.78,14,8.78,22.75c0,20.919-18.582,25.309-34.171,25.309  c-15.587,0-34.17-4.39-34.17-25.309c0-8.75,3.35-16.7,8.781-22.753c5.561,2.643,15.502,4.009,25.389,4.009  C54.886,35.397,64.829,34.031,70.39,31.392z'/><path d='M50.654,23.374c2.892,0,5.234-2.341,5.234-5.233c0-2.887-2.343-5.23-5.234-5.23c-2.887,0-5.231,2.343-5.231,5.23  C45.423,21.032,47.768,23.374,50.654,23.374z'/>
 		<circle cx='62.905' cy='10.089' r='3.595'/>

client/components/svg/naturalcrit-d20.svg.jsx

@@ -1,6 +1,5 @@
-const React = require('react');
-const createClass = require('create-react-class');
+import React from 'react';
 
-module.exports = function(props){
+export default function(props){
 	return <svg version='1.1' x='0px' y='0px' viewBox='0 0 100 100' enableBackground='new 0 0 100 100'><path d='M80.644,87.982l16.592-41.483c0.054-0.128,0.088-0.26,0.108-0.394c0.006-0.039,0.007-0.077,0.011-0.116  c0.007-0.087,0.008-0.174,0.002-0.26c-0.003-0.046-0.007-0.091-0.014-0.137c-0.014-0.089-0.036-0.176-0.063-0.262  c-0.012-0.034-0.019-0.069-0.031-0.103c-0.047-0.118-0.106-0.229-0.178-0.335c-0.004-0.006-0.006-0.012-0.01-0.018L67.999,3.358  c-0.01-0.013-0.003-0.026-0.013-0.04L68,3.315V4c0,0-0.033,0-0.037,0c-0.403-1-1.094-1.124-1.752-0.976  c0,0.004-0.004-0.012-0.007-0.012C66.201,3.016,66.194,3,66.194,3H66.19h-0.003h-0.003h-0.004h-0.003c0,0-0.004,0-0.007,0  s-0.003-0.151-0.007-0.151L20.495,15.227c-0.025,0.007-0.046-0.019-0.071-0.011c-0.087,0.028-0.172,0.041-0.253,0.083  c-0.054,0.027-0.102,0.053-0.152,0.085c-0.051,0.033-0.101,0.061-0.147,0.099c-0.044,0.036-0.084,0.073-0.124,0.113  c-0.048,0.048-0.093,0.098-0.136,0.152c-0.03,0.039-0.059,0.076-0.085,0.117c-0.046,0.07-0.084,0.145-0.12,0.223  c-0.011,0.023-0.027,0.042-0.036,0.066L2.911,57.664C2.891,57.715,3,57.768,3,57.82v0.002c0,0.186,0,0.375,0,0.562  c0,0.004,0,0.004,0,0.008c0,0,0,0,0,0.002c0,0,0,0,0,0.004v0.004v0.002c0,0.074-0.002,0.15,0.012,0.223  C3.015,58.631,3,58.631,3,58.633c0,0.004,0,0.004,0,0.008c0,0,0,0,0,0.002c0,0,0,0,0,0.004v0.004c0,0,0,0,0,0.002v0.004  c0,0.191-0.046,0.377,0.06,0.545c0-0.002-0.03,0.004-0.03,0.004c0,0.004-0.03,0.004-0.03,0.004c0,0.002,0,0.002,0,0.002  l-0.045,0.004c0.03,0.047,0.036,0.09,0.068,0.133l29.049,37.359c0.002,0.004,0,0.006,0.002,0.01c0.002,0.002,0,0.004,0.002,0.008  c0.006,0.008,0.014,0.014,0.021,0.021c0.024,0.029,0.052,0.051,0.078,0.078c0.027,0.029,0.053,0.057,0.082,0.082  c0.03,0.027,0.055,0.062,0.086,0.088c0.026,0.02,0.057,0.033,0.084,0.053c0.04,0.027,0.081,0.053,0.123,0.076  c0.005,0.004,0.01,0.008,0.016,0.01c0.087,0.051,0.176,0.09,0.269,0.123c0.042,0.014,0.082,0.031,0.125,0.043  c0.021,0.006,0.041,0.018,0.062,0.021c0.123,0.027,0.249,0.043,0.375,0.043c0.099,0,0.202-0.012,0.304-0.027l45.669-8.303  c0.057-0.01,0.108-0.021,0.163-0.037C79.547,88.992,79.562,89,79.575,89c0.004,0,0.004,0,0.004,0c0.021,0,0.039-0.027,0.06-0.035  c0.041-0.014,0.08-0.034,0.12-0.052c0.021-0.01,0.044-0.019,0.064-0.03c0.017-0.01,0.026-0.015,0.033-0.017  c0.014-0.008,0.023-0.021,0.037-0.028c0.14-0.078,0.269-0.174,0.38-0.285c0.014-0.016,0.024-0.034,0.038-0.048  c0.109-0.119,0.201-0.252,0.271-0.398c0.006-0.01,0.016-0.018,0.021-0.029c0.004-0.008,0.008-0.017,0.011-0.026  c0.002-0.004,0.003-0.006,0.005-0.01C80.627,88.021,80.635,88.002,80.644,87.982z M77.611,84.461L48.805,66.453l32.407-25.202  L77.611,84.461z M46.817,63.709L35.863,23.542l43.818,14.608L46.817,63.709z M84.668,40.542l8.926,5.952l-11.902,29.75  L84.668,40.542z M89.128,39.446L84.53,36.38l-6.129-12.257L89.128,39.446z M79.876,34.645L37.807,20.622L65.854,6.599L79.876,34.645  z M33.268,19.107l-6.485-2.162l23.781-6.487L33.268,19.107z M21.92,18.895l8.67,2.891L10.357,47.798L21.92,18.895z M32.652,24.649  l10.845,39.757L7.351,57.178L32.652,24.649z M43.472,67.857L32.969,92.363L8.462,60.855L43.472,67.857z M46.631,69.09l27.826,17.393  l-38.263,6.959L46.631,69.09z'></path></svg>;
 };

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -1,30 +1,32 @@
 /*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
-require('./brewRenderer.less');
-const React = require('react');
-const { useState, useRef, useMemo, useEffect } = React;
-const _ = require('lodash');
+import './brewRenderer.less';
+import React, { useState, useRef, useMemo, useEffect } from 'react';
+import _ from 'lodash';
 
-const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
-import Markdown from 'naturalcrit/markdown.js';
-const ErrorBar = require('./errorBar/errorBar.jsx');
-const ToolBar  = require('./toolBar/toolBar.jsx');
+import MarkdownLegacy from 'markdownLegacy.js';
+import Markdown from 'markdown.js';
+import ErrorBar from './errorBar/errorBar.jsx';
+import ToolBar  from './toolBar/toolBar.jsx';
 
 //TODO: move to the brew renderer
-const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx');
-const NotificationPopup = require('./notificationPopup/notificationPopup.jsx');
-const Frame = require('react-frame-component').default;
-const dedent = require('dedent-tabs').default;
-const { printCurrentBrew } = require('../../../shared/helpers.js');
+import RenderWarnings from 'client/components/renderWarnings/renderWarnings.jsx';
+import NotificationPopup from './notificationPopup/notificationPopup.jsx';
+import Frame from 'react-frame-component';
+import dedent from 'dedent-tabs';
+import { printCurrentBrew } from '../../../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,8 +40,8 @@ const BrewPage = (props)=>{
 		index    : 0,
 		...props
 	};
-	const pageRef = useRef(null);
-	const cleanText = safeHTML(`${props.contents}\n<div class="columnSplit"></div>\n`);
+	const pageRef   = useRef(null);
+	const cleanText = safeHTML(props.contents);
 
 	useEffect(()=>{
 		if(!pageRef.current) return;
@@ -114,16 +116,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,6 +190,7 @@ 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} />;
@@ -196,6 +207,9 @@ const BrewRenderer = (props)=>{
 				pageText = pageText.includes('\n') ? pageText.substring(pageText.indexOf('\n') + 1) : ''; // Remove the \page line
 			}
 
+			// 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 +285,7 @@ const BrewRenderer = (props)=>{
 
 	const handleDisplayOptionsChange = (newDisplayOptions)=>{
 		setDisplayOptions(newDisplayOptions);
+		localStorage.setItem(TOOLBAR_STATE_KEY, JSON.stringify(newDisplayOptions));
 	};
 
 	const pagesStyle = {
@@ -279,12 +294,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 +322,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 */}
@@ -336,4 +344,4 @@ const BrewRenderer = (props)=>{
 	);
 };
 
-module.exports = BrewRenderer;
+export default BrewRenderer;

client/homebrew/brewRenderer/brewRenderer.less

@@ -6,7 +6,6 @@
 	overflow-y    : scroll;
 	will-change   : transform;
 	&:has(.facing, .flow) { padding : 60px 30px; }
-	&.deployment { background-color : darkred; }
 	:where(.pages) {
 		&.facing {
 			display               : grid; 
@@ -68,12 +67,16 @@
 @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; }
 		}
 	}

client/homebrew/brewRenderer/errorBar/errorBar.jsx

@@ -1,5 +1,5 @@
-require('./errorBar.less');
-const React = require('react');
+import './errorBar.less';
+import React from 'react';
 
 import Dialog from '../../../components/dialog.jsx';
 
@@ -50,4 +50,4 @@ const ErrorBar = (props)=>{
 	);
 };
 
-module.exports = ErrorBar;
+export default ErrorBar;

client/homebrew/brewRenderer/headerNav/headerNav.jsx

@@ -1,7 +1,7 @@
-require('./headerNav.less');
+import './headerNav.less';
 
-import * as React from 'react';
-import * as _ from 'lodash';
+import React from 'react';
+import _ from 'lodash';
 
 const MAX_TEXT_LENGTH = 40;
 

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -1,7 +1,7 @@
-require('./notificationPopup.less');
+import './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';
 
@@ -62,4 +62,4 @@ const NotificationPopup = ()=>{
 	</Dialog>;
 };
 
-module.exports = NotificationPopup;
+export default NotificationPopup;

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -1,14 +1,15 @@
 /* eslint-disable max-lines */
-require('./toolBar.less');
-const React = require('react');
-const { useState, useEffect } = React;
-const _ = require('lodash');
+import './toolBar.less';
+import React, { useState, useEffect } from 'react';
+import _ from 'lodash';
 
 import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anchored.jsx';
 
 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 +21,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 +62,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 +99,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 +167,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 +192,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
@@ -233,4 +258,4 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 	);
 };
 
-module.exports = ToolBar;
+export default ToolBar;

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,7 +153,7 @@
 		align-items      : center;
 		justify-content  : center;
 		width            : auto;
-		min-width        : 46px;
+		min-width        : 40px;
 		height           : 100%;
 		&:hover { background-color : #444444; }
 		&:focus {outline : none; border  : 1px solid #D3D3D3;}
@@ -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);
+		}
 	}
 }
 
@@ -183,7 +187,5 @@
 	left      : 0;
 	z-index   : 5;
 	display   : flex;
-	width     : 32px;
-	min-width : unset;
 	height    : 100%;
 }

client/homebrew/editor/editor.jsx

@@ -1,20 +1,19 @@
 /*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/
-require('./editor.less');
-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 './editor.less';
+import React from 'react';
+import createReactClass from 'create-react-class';
+import _ from 'lodash';
+import dedent from 'dedent-tabs';
+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');
+import CodeEditor from 'client/components/codeEditor/codeEditor.jsx';
+import SnippetBar from './snippetbar/snippetbar.jsx';
+import MetadataEditor from './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 PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
 const SNIPPETBREAK_REGEX_V3 = /^\\snippet\ .*$/;
-const SNIPPETBAR_HEIGHT  = 25;
 const DEFAULT_STYLE_TEXT = dedent`
 				/*=======---  Example CSS styling  ---=======*/
 				/* Any CSS here will apply to your document! */
@@ -32,7 +31,7 @@ const DEFAULT_SNIPPET_TEXT = dedent`
 `;
 let isJumping = false;
 
-const Editor = createClass({
+const Editor = createReactClass({
 	displayName     : 'Editor',
 	getDefaultProps : function() {
 		return {
@@ -41,11 +40,8 @@ const Editor = createClass({
 				style : ''
 			},
 
-			onTextChange  : ()=>{},
-			onStyleChange : ()=>{},
-			onMetaChange  : ()=>{},
-			onSnipChange  : ()=>{},
-			reportError   : ()=>{},
+			onBrewChange : ()=>{},
+			reportError  : ()=>{},
 
 			onCursorPageChange : ()=>{},
 			onViewPageChange   : ()=>{},
@@ -60,8 +56,9 @@ const Editor = createClass({
 	},
 	getInitialState : function() {
 		return {
-			editorTheme : this.props.editorTheme,
-			view        : 'text' //'text', 'style', 'meta', 'snippet'
+			editorTheme      : this.props.editorTheme,
+			view             : 'text', //'text', 'style', 'meta', 'snippet'
+			snippetBarHeight : 26,
 		};
 	},
 
@@ -79,8 +76,8 @@ const Editor = createClass({
 		document.getElementById('BrewRenderer').addEventListener('keydown', this.handleControlKeys);
 		document.addEventListener('keydown', this.handleControlKeys);
 
-		this.codeEditor.current.codeMirror.on('cursorActivity', (cm)=>{this.updateCurrentCursorPage(cm.getCursor());});
-		this.codeEditor.current.codeMirror.on('scroll', _.throttle(()=>{this.updateCurrentViewPage(this.codeEditor.current.getTopVisibleLine());}, 200));
+		this.codeEditor.current.codeMirror?.on('cursorActivity', (cm)=>{this.updateCurrentCursorPage(cm.getCursor());});
+		this.codeEditor.current.codeMirror?.on('scroll', _.throttle(()=>{this.updateCurrentViewPage(this.codeEditor.current.getTopVisibleLine());}, 200));
 
 		const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY);
 		if(editorTheme) {
@@ -88,6 +85,15 @@ const Editor = createClass({
 				editorTheme : editorTheme
 			});
 		}
+		const snippetBar = document.querySelector('.editor > .snippetBar');
+		if (!snippetBar) return;
+
+		this.resizeObserver = new ResizeObserver(entries => {
+			const height = document.querySelector('.editor > .snippetBar').offsetHeight;
+			this.setState({ snippetBarHeight: height });
+		});
+
+		this.resizeObserver.observe(snippetBar);
 	},
 
 	componentDidUpdate : function(prevProps, prevState, snapshot) {
@@ -110,6 +116,10 @@ const Editor = createClass({
 		}
 	},
 
+	componentWillUnmount() {
+		if (this.resizeObserver) this.resizeObserver.disconnect();
+	},
+
 	handleControlKeys : function(e){
 		if(!(e.ctrlKey && e.metaKey && e.shiftKey)) return;
 		const LEFTARROW_KEY = 37;
@@ -142,25 +152,25 @@ const Editor = createClass({
 
 	handleViewChange : function(newView){
 		this.props.setMoveArrows(newView === 'text');
-		
+
 		this.setState({
 			view : newView
 		}, ()=>{
-			this.codeEditor.current?.codeMirror.focus();
+			this.codeEditor.current?.codeMirror?.focus();
 		});
 	},
 
 	highlightCustomMarkdown : function(){
-		if(!this.codeEditor.current) return;
+		if(!this.codeEditor.current?.codeMirror) return;
 		if((this.state.view === 'text') ||(this.state.view === 'snippet')) {
 			const codeMirror = this.codeEditor.current.codeMirror;
 
-			codeMirror.operation(()=>{ // Batch CodeMirror styling
+			codeMirror?.operation(()=>{ // Batch CodeMirror styling
 
 				const foldLines = [];
 
 				//reset custom text styles
-				const customHighlights = codeMirror.getAllMarks().filter((mark)=>{
+				const customHighlights = codeMirror?.getAllMarks().filter((mark)=>{
 					// Record details of folded sections
 					if(mark.__isFold) {
 						const fold = mark.find();
@@ -181,10 +191,10 @@ const Editor = createClass({
 					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');
+					codeMirror?.removeLineClass(lineNumber, 'background', 'pageLine');
+					codeMirror?.removeLineClass(lineNumber, 'background', 'snippetLine');
+					codeMirror?.removeLineClass(lineNumber, 'text');
+					codeMirror?.removeLineClass(lineNumber, 'wrap', 'sourceMoveFlash');
 
 					// Don't process lines inside folded text
 					// If the current lineNumber is inside any folded marks, skip line styling
@@ -200,19 +210,19 @@ const Editor = createClass({
 						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', tabHighlight);
+						codeMirror?.addLineClass(lineNumber, 'background', tabHighlight);
 						const pageCountElement = Object.assign(document.createElement('span'), {
 							className   : 'editor-page-count',
 							textContent : textOrSnip ? editorPageCount : userSnippetCount
 						});
-						codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement);
+						codeMirror?.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement);
 					};
 
 
-					// New Codemirror styling for V3 renderer
+					// New CodeMirror styling for V3 renderer
 					if(this.props.renderer === 'V3') {
-						if(line.match(/^\\column$/)){
-							codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
+						if(line.match(/^\\column(?:break)?$/)){
+							codeMirror?.addLineClass(lineNumber, 'text', 'columnSplit');
 						}
 
 						// definition lists
@@ -221,14 +231,14 @@ const Editor = createClass({
 							const regex = /^([^\n]*?:?\s?)(::[^\n]*)(?:\n|$)/ymd;  // the `d` flag, for match indices, throws an ESLint error.
 							let match;
 							while ((match = regex.exec(line)) != null){
-								codeMirror.markText({ line: lineNumber, ch: match.indices[0][0] }, { line: lineNumber, ch: match.indices[0][1] }, { className: 'dl-highlight' });
-								codeMirror.markText({ line: lineNumber, ch: match.indices[1][0] }, { line: lineNumber, ch: match.indices[1][1] }, { className: 'dt-highlight' });
-								codeMirror.markText({ line: lineNumber, ch: match.indices[2][0] }, { line: lineNumber, ch: match.indices[2][1] }, { className: 'dd-highlight' });
+								codeMirror?.markText({ line: lineNumber, ch: match.indices[0][0] }, { line: lineNumber, ch: match.indices[0][1] }, { className: 'dl-highlight' });
+								codeMirror?.markText({ line: lineNumber, ch: match.indices[1][0] }, { line: lineNumber, ch: match.indices[1][1] }, { className: 'dt-highlight' });
+								codeMirror?.markText({ line: lineNumber, ch: match.indices[2][0] }, { line: lineNumber, ch: match.indices[2][1] }, { className: 'dd-highlight' });
 								const ddIndex = match.indices[2][0];
 								const colons = /::/g;
 								const colonMatches = colons.exec(match[2]);
 								if(colonMatches !== null){
-									codeMirror.markText({ line: lineNumber, ch: colonMatches.index + ddIndex }, { line: lineNumber, ch: colonMatches.index + colonMatches[0].length + ddIndex }, { className: 'dl-colon-highlight' });
+									codeMirror?.markText({ line: lineNumber, ch: colonMatches.index + ddIndex }, { line: lineNumber, ch: colonMatches.index + colonMatches[0].length + ddIndex }, { className: 'dl-colon-highlight' });
 								}
 							}
 						}
@@ -245,7 +255,7 @@ const Editor = createClass({
 								const match = subRegex.exec(line) || superRegex.exec(line);
 								if(match) {
 									isSuper = !subRegex.lastIndex;
-									codeMirror.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: isSuper ? 'superscript' : 'subscript' });
+									codeMirror?.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: isSuper ? 'superscript' : 'subscript' });
 								}
 								startIndex = line.indexOf('^', Math.max(startIndex + 1, subRegex.lastIndex, superRegex.lastIndex));
 							}
@@ -256,7 +266,7 @@ const Editor = createClass({
 							const regex = /(?:^|[^{\n])({(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\2})/gm;
 							let match;
 							while ((match = regex.exec(line)) != null) {
-								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length }, { className: 'injection' });
+								codeMirror?.markText({ line: lineNumber, ch: line.indexOf(match[1]) }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length }, { className: 'injection' });
 							}
 						}
 						// Highlight inline spans {{content}}
@@ -274,7 +284,7 @@ const Editor = createClass({
 									blockCount = 0;
 									continue;
 								}
-								codeMirror.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: 'inline-block' });
+								codeMirror?.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: 'inline-block' });
 							}
 						} else if(line.trimLeft().startsWith('{{') || line.trimLeft().startsWith('}}')){
 							// Highlight block divs {{\n Content \n}}
@@ -283,7 +293,7 @@ const Editor = createClass({
 							const match = line.match(/^ *{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *$|^ *}}$/);
 							if(match)
 								endCh = match.index+match[0].length;
-							codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
+							codeMirror?.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
 						}
 
 						// Emojis
@@ -304,11 +314,11 @@ const Editor = createClass({
 									const endPos   = { line: lineNumber, ch: match.index + match[0].length };
 
 									// Iterate over conflicting marks and clear them
-									const marks = codeMirror.findMarks(startPos, endPos);
+									const marks = codeMirror?.findMarks(startPos, endPos);
 									marks.forEach(function(marker) {
 										if(!marker.__isFold) marker.clear();
 									});
-									codeMirror.markText(startPos, endPos, { className: 'emoji' });
+									codeMirror?.markText(startPos, endPos, { className: 'emoji' });
 								}
 								startIndex = line.indexOf(':', Math.max(startIndex + 1, emojiRegex.lastIndex));
 							}
@@ -327,10 +337,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);
@@ -368,51 +378,51 @@ const Editor = createClass({
 		const textString = this.props.brew.text.split(textSplit).slice(0, targetPage-1).join(textSplit);
 		const targetLine = textString.match('\n') ? textString.split('\n').length - 1 : -1;
 
-		let currentY = this.codeEditor.current.codeMirror.getScrollInfo().top;
-		let targetY  = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
+		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;
-				this.codeEditor.current.codeMirror.off('scroll', checkIfScrollComplete);
+				this.codeEditor.current.codeMirror?.off('scroll', checkIfScrollComplete);
 			}, 150); // If 150 ms pass without a scroll event, assume scrolling is done
 		};
 
 		isJumping = true;
 		checkIfScrollComplete();
-		this.codeEditor.current.codeMirror.on('scroll', checkIfScrollComplete);
+		if (this.codeEditor.current?.codeMirror) {
+			this.codeEditor.current.codeMirror?.on('scroll', checkIfScrollComplete);
+		}
 
 		if(smooth) {
 			//Scroll 1/10 of the way every 10ms until 1px off.
 			const incrementalScroll = setInterval(()=>{
 				currentY += (targetY - currentY) / 10;
-				this.codeEditor.current.codeMirror.scrollTo(null, currentY);
+				this.codeEditor.current.codeMirror?.scrollTo(null, currentY);
 
 				// Update target: target height is not accurate until within +-10 lines of the visible window
 				if(Math.abs(targetY - currentY > 100))
-					targetY = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
+					targetY = this.codeEditor.current.codeMirror?.heightAtLine(targetLine, 'local', true);
 
 				// End when close enough
 				if(Math.abs(targetY - currentY) < 1) {
-					this.codeEditor.current.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
+					this.codeEditor.current.codeMirror?.scrollTo(null, targetY);  // Scroll any remaining difference
 					this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
-					this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
+					this.codeEditor.current.codeMirror?.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
 					clearInterval(incrementalScroll);
 				}
 			}, 10);
 		} else {
-			this.codeEditor.current.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
+			this.codeEditor.current.codeMirror?.scrollTo(null, targetY);  // Scroll any remaining difference
 			this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
-			this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
+			this.codeEditor.current.codeMirror?.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
 		}
 	},
 
 	//Called when there are changes to the editor's dimensions
-	update : function(){
-		this.codeEditor.current?.updateSize();
-	},
+	update : function(){},
 
 	updateEditorTheme : function(newTheme){
 		window.localStorage.setItem(EDITOR_THEME_KEY, newTheme);
@@ -434,9 +444,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()){
@@ -446,10 +457,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()){
@@ -461,12 +473,11 @@ 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 <>
@@ -475,10 +486,11 @@ const Editor = createClass({
 					language='gfm'
 					view={this.state.view}
 					value={this.props.brew.snippets}
-					onChange={this.props.onSnipChange}
+					onChange={this.props.onBrewChange('snippets')}
 					enableFolding={true}
 					editorTheme={this.state.editorTheme}
-					rerenderParent={this.rerenderParent} />
+					rerenderParent={this.rerenderParent}
+					style={{  height: `calc(100% -${this.state.snippetBarHeight}px)` }} />
 			</>;
 		}
 	},
@@ -532,4 +544,4 @@ const Editor = createClass({
 	}
 });
 
-module.exports = Editor;
+export default Editor;

client/homebrew/editor/editor.less

@@ -5,7 +5,7 @@
 	height    : 100%;
 	container : editor / inline-size;
 	.codeEditor {
-		height            : 100%;
+		height            : calc(100% - 25px);
 		.CodeMirror { height : 100%; }
 		.pageLine, .snippetLine {
 			background : #33333328;
@@ -108,8 +108,4 @@
 		span { padding : 2px 5px; }
 	}
 
-}
-
-@container editor (width < 553px) {
-	.editor .codeEditor .CodeMirror { height : calc(100% - 51px);}
 }

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -1,19 +1,19 @@
 /* eslint-disable max-lines */
-require('./metadataEditor.less');
-const React = require('react');
-const createClass = require('create-react-class');
-const _     = require('lodash');
+import './metadataEditor.less';
+import React from 'react';
+import createReactClass from 'create-react-class';
+import _ from 'lodash';
 import request from '../../utils/request-middleware.js';
-const Combobox = require('client/components/combobox.jsx');
-const TagInput = require('../tagInput/tagInput.jsx');
+import Combobox from 'client/components/combobox.jsx';
+import TagInput from '../tagInput/tagInput.jsx';
 
 
-const Themes = require('themes/themes.json');
-const validations = require('./validations.js');
+import Themes from 'themes/themes.json';
+import validations from './validations.js';
 
 const SYSTEMS = ['5e', '4e', '3.5e', 'Pathfinder'];
 
-const homebreweryThumbnail = require('../../thumbnail.png');
+import homebreweryThumbnail from '../../thumbnail.png';
 
 const callIfExists = (val, fn, ...args)=>{
 	if(val[fn]) {
@@ -21,7 +21,7 @@ const callIfExists = (val, fn, ...args)=>{
 	}
 };
 
-const MetadataEditor = createClass({
+const MetadataEditor = createReactClass({
 	displayName     : 'MetadataEditor',
 	getDefaultProps : function() {
 		return {
@@ -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'>
@@ -415,4 +411,4 @@ const MetadataEditor = createClass({
 	}
 });
 
-module.exports = MetadataEditor;
+export default MetadataEditor;

client/homebrew/editor/metadataEditor/validations.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
 	title : [
 		(value)=>{
 			return value?.length > 100 ? 'Max title length of 100 characters' : null;
@@ -18,7 +18,7 @@ module.exports = {
 			try {
 				Boolean(new URL(value));
 				return null;
-			} catch (e) {
+			} catch {
 				return 'Must be a valid URL';
 			}
 		}

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -1,29 +1,36 @@
 /*eslint max-lines: ["warn", {"max": 350, "skipBlankLines": true, "skipComments": true}]*/
-require('./snippetbar.less');
-const React = require('react');
-const createClass = require('create-react-class');
-const _     = require('lodash');
-const cx    = require('classnames');
+import './snippetbar.less';
+import React from 'react';
+import createReactClass from 'create-react-class';
+
+import _ from 'lodash';
+import cx from 'classnames';
 
 import { loadHistory } from '../../utils/versionHistory.js';
 import { brewSnippetsToJSON } from '../../../../shared/helpers.js';
 
-//Import all themes
-const ThemeSnippets = {};
-ThemeSnippets['Legacy_5ePHB'] = require('themes/Legacy/5ePHB/snippets.js');
-ThemeSnippets['V3_5ePHB']     = require('themes/V3/5ePHB/snippets.js');
-ThemeSnippets['V3_5eDMG']     = require('themes/V3/5eDMG/snippets.js');
-ThemeSnippets['V3_Journal']   = require('themes/V3/Journal/snippets.js');
-ThemeSnippets['V3_Blank']     = require('themes/V3/Blank/snippets.js');
+import Legacy5ePHB from 'themes/Legacy/5ePHB/snippets.js';
+import V3_5ePHB   from 'themes/V3/5ePHB/snippets.js';
+import V3_5eDMG   from 'themes/V3/5eDMG/snippets.js';
+import V3_Journal from 'themes/V3/Journal/snippets.js';
+import V3_Blank  from 'themes/V3/Blank/snippets.js';
 
-const EditorThemes = require('build/homebrew/codeMirror/editorThemes.json');
+const ThemeSnippets = {
+	Legacy_5ePHB : Legacy5ePHB,
+	V3_5ePHB     : V3_5ePHB,
+	V3_5eDMG     : V3_5eDMG,
+	V3_Journal   : V3_Journal,
+	V3_Blank     : V3_Blank,
+};
+
+import EditorThemes from 'build/homebrew/codeMirror/editorThemes.json';
 
 const execute = function(val, props){
 	if(_.isFunction(val)) return val(props);
 	return val;
 };
 
-const Snippetbar = createClass({
+const Snippetbar = createReactClass({
 	displayName     : 'SnippetBar',
 	getDefaultProps : function() {
 		return {
@@ -281,9 +288,9 @@ const Snippetbar = createClass({
 	}
 });
 
-module.exports = Snippetbar;
+export default Snippetbar;
 
-const SnippetGroup = createClass({
+const SnippetGroup = createReactClass({
 	displayName     : 'SnippetGroup',
 	getDefaultProps : function() {
 		return {

client/homebrew/editor/snippetbar/snippetbar.less

@@ -14,7 +14,7 @@
 	.snippets {
 		display         : flex;
 		justify-content : flex-start;
-		min-width       : 432.18px;  //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
+		min-width       : 499.35px;  //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
 	}
 
 	.editors {
@@ -51,7 +51,7 @@
 				&.meta {
 					.tooltipLeft('Properties');
 				}
-				&.snip {
+				&.snippet {
 					.tooltipLeft('Snippets');
 				}
 				&.undo {
@@ -93,7 +93,7 @@
 				&.editorTheme {
 					.tooltipLeft('Editor Themes');
 					font-size : 0.75em;
-					color     : black;
+					color     : inherit;
 					&.active {
 						position         : relative;
 						background-color : #999999;
@@ -237,7 +237,7 @@
 	}
 
 }
-@container editor (width < 683px) {
+@container editor (width < 750px) {
 	.snippetBar {
 		.editors { 
 			flex            : 1;

client/homebrew/editor/tagInput/tagInput.jsx

@@ -1,7 +1,6 @@
-require('./tagInput.less');
-const React = require('react');
-const { useState, useEffect } = React;
-const _     = require('lodash');
+import './tagInput.less';
+import React, { useState, useEffect } from 'react';
+import _ from 'lodash';
 
 const TagInput = ({ unique = true, values = [], ...props })=>{
 	const [tempInputText, setTempInputText] = useState('');
@@ -102,4 +101,4 @@ const TagInput = ({ unique = true, values = [], ...props })=>{
 	);
 };
 
-module.exports = TagInput;
+export default TagInput;

client/homebrew/homebrew.jsx

@@ -1,95 +1,83 @@
-//╔===--------------- Polyfills --------------===╗//
-import 'core-js/es/string/to-well-formed.js';
-//╚===---------------          ---------------===╝//
 
-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 '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';
 
-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 { updateLocalStorage } from './utils/updateLocalStorage/updateLocalStorageKeys.js';
 
-const WithRoute = (props)=>{
+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 = ({ 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,12 +1,14 @@
-@import 'naturalcrit/styles/core.less';
+@import './shared/naturalcrit/styles/core.less';
 .homebrew {
 	height : 100%;
+	background-color:@steel;
+	&.deployment { background-color : darkred; }
+
 	.sitePage {
 		display          : flex;
 		flex-direction   : column;
 		height           : 100%;
 		overflow-y       : hidden;
-		background-color : @steel;
 		.content {
 			position   : relative;
 			flex       : auto;

client/homebrew/navbar/account.navitem.jsx

@@ -1,9 +1,9 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const Nav = require('naturalcrit/nav/nav.jsx');
-const request = require('superagent');
+import React from 'react';
+import createReactClass from 'create-react-class';
+import request from 'superagent';
+import Nav from 'client/homebrew/navbar/nav.jsx';
 
-const Account = createClass({
+const Account = createReactClass({
 	displayName     : 'AccountNavItem',
 	getInitialState : function() {
 		return {
@@ -70,7 +70,7 @@ const Account = createClass({
 					{global.account.username}
 				</Nav.item>
 				<Nav.item
-					href={`/user/${encodeURI(global.account.username)}`}
+					href={`/user/${encodeURIComponent(global.account.username)}`}
 					color='yellow'
 					icon='fas fa-beer'
 				>
@@ -111,4 +111,4 @@ const Account = createClass({
 	}
 });
 
-module.exports = Account;
+export default Account;

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');
+import './error-navitem.less';
+import React from 'react';
+import Nav from 'client/homebrew/navbar/nav.jsx';
 
-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>;
 	}
-});
 
-module.exports = ErrorNavItem;
+	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>;
+};
+
+export default ErrorNavItem;

client/homebrew/navbar/help.navitem.jsx

@@ -1,9 +1,9 @@
-const React = require('react');
-const dedent = require('dedent-tabs').default;
+import React from 'react';
+import dedent from 'dedent-tabs';
 
-const Nav = require('naturalcrit/nav/nav.jsx');
+import Nav from 'client/homebrew/navbar/nav.jsx';
 
-module.exports = function(props){
+export default function(props){
 	return <Nav.dropdown>
 		<Nav.item color='grey' icon='fas fa-question-circle'>
 			need help?

client/homebrew/navbar/metadata.navitem.jsx

@@ -1,11 +1,11 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const Moment = require('moment');
+import React from 'react';
+import createReactClass from 'create-react-class';
+import Moment from 'moment';
 
-const Nav = require('naturalcrit/nav/nav.jsx');
+import Nav from 'client/homebrew/navbar/nav.jsx';
 
 
-const MetadataNav = createClass({
+const MetadataNav = createReactClass({
 	displayName     : 'MetadataNav',
 	getDefaultProps : function() {
 		return {
@@ -32,7 +32,7 @@ const MetadataNav = createClass({
 		return <>
 			{this.props.brew.authors.map((author, idx, arr)=>{
 				const spacer = arr.length - 1 == idx ? <></> : <span>, </span>;
-				return <span key={idx}><a className='userPageLink' href={`/user/${author}`}>{author}</a>{spacer}</span>;
+				return <span key={idx}><a className='userPageLink' href={`/user/${encodeURIComponent(author)}`}>{author}</a>{spacer}</span>;
 			})}
 		</>;
 	},
@@ -86,4 +86,4 @@ const MetadataNav = createClass({
 
 });
 
-module.exports = MetadataNav;
+export default MetadataNav;

client/homebrew/navbar/nav.jsx

@@ -1,14 +1,13 @@
-require('client/homebrew/navbar/navbar.less');
-const React = require('react');
-const { useState, useRef, useEffect } = React;
-const createClass = require('create-react-class');
-const _ = require('lodash');
-const cx = require('classnames');
+import 'client/homebrew/navbar/navbar.less';
+import React, { useState, useRef, useEffect } from 'react';
+import createReactClass from 'create-react-class';
+import _ from 'lodash';
+import cx from 'classnames';
 
-const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx');
+import NaturalCritIcon from 'client/components/svg/naturalcrit-d20.svg.jsx';
 
 const Nav = {
-	base : createClass({
+	base : createReactClass({
 		displayName : 'Nav.base',
 		render      : function(){
 			return <nav>
@@ -25,7 +24,7 @@ const Nav = {
 		</a>;
 	},
 
-	section : createClass({
+	section : createReactClass({
 		displayName : 'Nav.section',
 		render      : function(){
 			return <div className={`navSection ${this.props.className ?? ''}`}>
@@ -34,7 +33,7 @@ const Nav = {
 		}
 	}),
 
-	item : createClass({
+	item : createReactClass({
 		displayName     : 'Nav.item',
 		getDefaultProps : function() {
 			return {
@@ -117,4 +116,4 @@ const Nav = {
 };
 
 
-module.exports = Nav;
+export default Nav;

client/homebrew/navbar/navbar.jsx

@@ -1,11 +1,11 @@
-require('./navbar.less');
-const React = require('react');
-const createClass = require('create-react-class');
+import './navbar.less';
+import React from 'react';
+import createReactClass from 'create-react-class';
 
-const Nav = require('naturalcrit/nav/nav.jsx');
-const PatreonNavItem = require('./patreon.navitem.jsx');
+import Nav from 'client/homebrew/navbar/nav.jsx';
+import PatreonNavItem from './patreon.navitem.jsx';
 
-const Navbar = createClass({
+const Navbar = createReactClass({
 	displayName     : 'Navbar',
 	getInitialState : function() {
 		return {
@@ -49,4 +49,4 @@ const Navbar = createClass({
 	}
 });
 
-module.exports = Navbar;
+export default Navbar;

client/homebrew/navbar/navbar.less

@@ -37,7 +37,10 @@
 
 		&:has(.brewTitle) {
 			flex-grow : 1;
-			min-width : 300px; 
+			min-width : 300px;
+		}
+		>.brewTitle {
+			cursor:auto;
 		}
 	}
 	// "NaturalCrit" logo

client/homebrew/navbar/newbrew.navitem.jsx

@@ -1,64 +1,103 @@
-const React = require('react');
-const _ = require('lodash');
-const Nav = require('naturalcrit/nav/nav.jsx');
-const { splitTextStyleAndMetadata } = require('../../../shared/helpers.js'); // Importing the function from helpers.js
+import React from 'react';
+import _ from 'lodash';
+import Nav from 'client/homebrew/navbar/nav.jsx';
+import { splitTextStyleAndMetadata } from '../../../shared/helpers.js';
 
-const BREWKEY  = 'homebrewery-new';
-const STYLEKEY = 'homebrewery-new-style';
-const METAKEY  = 'homebrewery-new-meta';
+const BREWKEY  = 'HB_newPage_content';
+const STYLEKEY = 'HB_newPage_style';
+const METAKEY = 'HB_newPage_meta';
 
 const NewBrew = ()=>{
 	const handleFileChange = (e)=>{
 		const file = e.target.files[0];
-		if(file) {
-			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;
+
+		if(!confirmLocalStorageChange()) 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);
 	};
 
+	const confirmLocalStorageChange = ()=>{
+		const currentText  = localStorage.getItem(BREWKEY);
+		const currentStyle = localStorage.getItem(STYLEKEY);
+		const currentMeta  = localStorage.getItem(METAKEY);
+
+		// TRUE if no data in any local storage key
+		// TRUE if data in any local storage key AND approval given
+		// FALSE if data in any local storage key AND approval declined
+		return (!(currentText || currentStyle || currentMeta) || confirm(
+			`You have made changes in the new brew space. If you continue, that information will be PERMANENTLY LOST.\nAre you sure you wish to continue?`
+		));
+	};
+
+	const clearLocalStorage = ()=>{
+		if(!confirmLocalStorageChange()) return;
+
+		localStorage.removeItem(BREWKEY);
+		localStorage.removeItem(STYLEKEY);
+		localStorage.removeItem(METAKEY);
+
+		window.location.href = '/new';
+		return;
+	};
+
+
 	return (
 		<Nav.dropdown>
 			<Nav.item
 				className='new'
 				color='purple'
 				icon='fa-solid fa-plus-square'>
-                new
+					new
 			</Nav.item>
 			<Nav.item
-				className='fromBlank'
+				className='new'
 				href='/new'
 				newTab={true}
 				color='purple'
 				icon='fa-solid fa-file'>
-                from blank
+					resume draft
+			</Nav.item>
+			<Nav.item
+				className='fromBlank'
+				newTab={true}
+				color='yellow'
+				icon='fa-solid fa-file-circle-plus'
+				onClick={()=>{ clearLocalStorage(); }}>
+					from blank
 			</Nav.item>
-
 			<Nav.item
 				className='fromFile'
-				color='purple'
+				color='green'
 				icon='fa-solid fa-upload'
 				onClick={()=>{ document.getElementById('uploadTxt').click(); }}>
 				<input id='uploadTxt' className='newFromLocal' type='file' onChange={handleFileChange} style={{ display: 'none' }} />
-                from file
+					from file
 			</Nav.item>
 		</Nav.dropdown>
 	);
 };
 
-module.exports = NewBrew;
+export default NewBrew;

client/homebrew/navbar/patreon.navitem.jsx

@@ -1,7 +1,7 @@
-const React = require('react');
-const Nav = require('naturalcrit/nav/nav.jsx');
+import React from 'react';
+import Nav from 'client/homebrew/navbar/nav.jsx';
 
-module.exports = function(props){
+export default function(props){
 	return <Nav.item
 		className='patreon'
 		newTab={true}

client/homebrew/navbar/print.navitem.jsx

@@ -1,8 +1,8 @@
-const React = require('react');
-const Nav = require('naturalcrit/nav/nav.jsx');
-const { printCurrentBrew } = require('../../../shared/helpers.js');
+import React from 'react';
+import Nav from 'client/homebrew/navbar/nav.jsx';
+import { printCurrentBrew } from '../../../shared/helpers.js';
 
-module.exports = function(){
+export default function(){
 	return <Nav.item onClick={printCurrentBrew} color='purple' icon='far fa-file-pdf'>
 		get PDF
 	</Nav.item>;

client/homebrew/navbar/recent.navitem.jsx

@@ -1,15 +1,15 @@
-const React = require('react');
-const createClass = require('create-react-class');
-const _ = require('lodash');
-const Moment = require('moment');
+import React from 'react';
+import createReactClass from 'create-react-class';
+import _ from 'lodash';
+import Moment from 'moment';
 
-const Nav = require('naturalcrit/nav/nav.jsx');
+import Nav from 'client/homebrew/navbar/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({
+const RecentItems = createReactClass({
 	DisplayName     : 'RecentItems',
 	getDefaultProps : function() {
 		return {
@@ -175,7 +175,7 @@ const RecentItems = createClass({
 
 });
 
-module.exports = {
+export default {
 
 	edited : (props)=>{
 		return <RecentItems

client/homebrew/navbar/share.navitem.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import dedent from 'dedent-tabs';
+import Nav from 'client/homebrew/navbar/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/navbar/vault.navitem.jsx

@@ -1,8 +1,8 @@
-const React = require('react');
+import React from 'react';
 
-const Nav = require('naturalcrit/nav/nav.jsx');
+import Nav from 'client/homebrew/navbar/nav.jsx';
 
-module.exports = function (props) {
+export default function (props) {
 	return (
 		<Nav.item
 			color='purple'

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');
+import React from 'react';
+import moment from 'moment';
+import UIPage from '../basePages/uiPage/uiPage.jsx';
+import NaturalCritIcon from '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');
@@ -79,4 +79,4 @@ const AccountPage = (props)=>{
 		</UIPage>);
 };
 
-module.exports = AccountPage;
+export default AccountPage;

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

@@ -1,12 +1,11 @@
-require('./brewItem.less');
-const React = require('react');
-const { useCallback } = React;
-const moment = require('moment');
+import './brewItem.less';
+import React, { useCallback } from 'react';
+import moment from 'moment';
 import request from '../../../../utils/request-middleware.js';
 
-const googleDriveIcon = require('../../../../googleDrive.svg');
-const homebreweryIcon = require('../../../../thumbnail.png');
-const dedent = require('dedent-tabs').default;
+import googleDriveIcon from '../../../../googleDrive.svg';
+import homebreweryIcon from '../../../../thumbnail.svg';
+import dedent from 'dedent-tabs';
 
 const BrewItem = ({
 	brew = {
@@ -143,7 +142,7 @@ const BrewItem = ({
 								<span title="Username contained an email address; hidden to protect user's privacy">
 									{author}
 								</span>
-							) : (<a href={`/user/${author}`}>{author}</a>)}
+							) : (<a href={`/user/${encodeURIComponent(author)}`}>{author}</a>)}
 							{index < brew.authors.length - 1 && ', '}
 						</React.Fragment>
 					))}
@@ -176,4 +175,4 @@ const BrewItem = ({
 	);
 };
 
-module.exports = BrewItem;
+export default BrewItem;

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

@@ -64,7 +64,7 @@
 		border-radius    : 4px;
 		&::before {
 			margin-right : 3px;
-			font-family  : 'Font Awesome 5 Free';
+			font-family  : 'Font Awesome 6 Free';
 			font-size    : 12px;
 		}
 		&.type {
@@ -115,15 +115,15 @@
 		}
 	}
 	.googleDriveIcon {
-		height  : 18px;
 		padding : 0px;
 		margin  : -5px;
+		height  : 18px;
 	}
 	.homebreweryIcon {
-		position       : relative;
-		top            : 5px;
-		left           : -5px;
-		height         : 24px;
-		mix-blend-mode : darken;
+		position : relative;
+		padding  : 0px;
+		top      : 5px;
+		left     : -7.5px;
+		height   : 18px;
 	}
 }

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

@@ -1,18 +1,20 @@
 /*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
-require('./listPage.less');
-const React       = require('react');
-const createClass = require('create-react-class');
-const _           = require('lodash');
-const moment      = require('moment');
+import './listPage.less';
+import React from 'react';
+import createReactClass from 'create-react-class';
+import _ from 'lodash';
+import moment from 'moment';
 
-const BrewItem    = require('./brewItem/brewItem.jsx');
+import BrewItem from './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';
 
-const ListPage = createClass({
+const ListPage = createReactClass({
 	displayName     : 'ListPage',
 	getDefaultProps : function() {
 		return {
@@ -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){
@@ -277,4 +279,4 @@ const ListPage = createClass({
 	}
 });
 
-module.exports = ListPage;
+export default ListPage;

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

@@ -30,7 +30,7 @@
 				h1:hover { cursor : pointer; }
 				.active::before, .inactive::before {
 					padding-right : 0.5em;
-					font-family   : 'Font Awesome 5 Free';
+					font-family   : 'Font Awesome 6 Free';
 					font-size     : 0.6cm;
 					font-weight   : 900;
 				}
@@ -130,12 +130,12 @@
 			border-radius  : 3px;
 			&::before {
 				margin-right : 3px;
-				font-family  : 'Font Awesome 5 Free';
+				font-family  : 'Font Awesome 6 Free';
 				font-size    : 12px;
 			}
 			&::after {
 				margin-left : 3px;
-				font-family : 'Font Awesome 5 Free';
+				font-family : 'Font Awesome 6 Free';
 				font-size   : 12px;
 				content     : '\f00d';
 			}

client/homebrew/pages/basePages/uiPage/uiPage.jsx

@@ -1,16 +1,17 @@
-require('./uiPage.less');
-const React = require('react');
-const createClass = require('create-react-class');
+import './uiPage.less';
+import React from 'react';
+import createReactClass from 'create-react-class';
 
-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 RecentNavItem = require('../../../navbar/recent.navitem.jsx').both;
-const Account = require('../../../navbar/account.navitem.jsx');
+import Nav from 'client/homebrew/navbar/nav.jsx';
+import Navbar from 'client/homebrew/navbar/navbar.jsx';
+import NewBrewItem from 'client/homebrew/navbar/newbrew.navitem.jsx';
+import HelpNavItem from 'client/homebrew/navbar/help.navitem.jsx';
+import RecentNavItems from 'client/homebrew/navbar/recent.navitem.jsx';
+const { both: RecentNavItem } = RecentNavItems;
+import Account from 'client/homebrew/navbar/account.navitem.jsx';
 
 
-const UIPage = createClass({
+const UIPage = createReactClass({
 	displayName : 'UIPage',
 
 	render : function(){
@@ -35,4 +36,4 @@ const UIPage = createClass({
 	}
 });
 
-module.exports = UIPage;
+export default UIPage;

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

@@ -28,7 +28,8 @@
 						background-color : #00000077;
 						&::before {
 							margin-right : 5px;
-							font-family  : 'FONT AWESOME 5 FREE';
+							font-family  : 'Font Awesome 6 Free';
+							font-weight  : 900;
 							content      : '\f00c';
 						}
 					}

client/homebrew/pages/editPage/editPage.jsx

@@ -1,499 +1,419 @@
 /* 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 'client/homebrew/navbar/nav.jsx';
+import Navbar                    from 'client/homebrew/navbar/navbar.jsx';
+import NewBrewItem               from 'client/homebrew/navbar/newbrew.navitem.jsx';
+import AccountNavItem            from 'client/homebrew/navbar/account.navitem.jsx';
+import ErrorNavItem              from 'client/homebrew/navbar/error-navitem.jsx';
+import HelpNavItem               from 'client/homebrew/navbar/help.navitem.jsx';
+import VaultNavItem              from 'client/homebrew/navbar/vault.navitem.jsx';
+import PrintNavItem              from 'client/homebrew/navbar/print.navitem.jsx';
+import RecentNavItems from 'client/homebrew/navbar/recent.navitem.jsx';
+const { both: RecentNavItem } = RecentNavItems;
 
-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 'client/homebrew/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]);
+
+	useEffect(()=>{
+		trySave(true);
+	}, [saveGoogle]);
+
+	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();});
-	},
-
-	handleSnipChange : function(snippet){
-		//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(snippet);
-
-		this.setState((prevState)=>({
-			brew       : { ...prevState.brew, snippets: snippet },
-			isPending  : true,
-			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);
+	};
 
-		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.normalize('NFC')),
+			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} reviewRequested={this.props.brew.lock.reviewRequested} />}
+			{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}
-						onSnipChange={this.handleSnipChange}
-						onMetaChange={this.handleMetaChange}
-						reportError={this.errorReported}
-						renderer={this.state.brew.renderer}
-						userThemes={this.props.userThemes}
-						themeBundle={this.state.themeBundle}
-						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;
+export default EditPage;

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

@@ -40,4 +40,4 @@ function LockNotification(props) {
 	</Dialog>;
 };
 
-module.exports = LockNotification;
+export default LockNotification;

client/homebrew/pages/errorPage/errorPage.jsx

@@ -1,8 +1,8 @@
-require('./errorPage.less');
-const React      = require('react');
-const UIPage     = require('../basePages/uiPage/uiPage.jsx');
-import Markdown  from '../../../../shared/naturalcrit/markdown.js';
-const ErrorIndex = require('./errors/errorIndex.js');
+import './errorPage.less';
+import React      from 'react';
+import UIPage     from '../basePages/uiPage/uiPage.jsx';
+import Markdown   from '../../../../shared/markdown.js';
+import ErrorIndex from './errors/errorIndex.js';
 
 const ErrorPage = ({ brew })=>{
 	// Retrieving the error text based on the brew's error code from ErrorIndex
@@ -22,4 +22,4 @@ const ErrorPage = ({ brew })=>{
 	);
 };
 
-module.exports = ErrorPage;
+export default ErrorPage;

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

@@ -1,4 +1,4 @@
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent-tabs';
 
 const loginUrl = 'https://www.naturalcrit.com/login';
 
@@ -96,7 +96,7 @@ const errorIndex = (props)=>{
 
 		**Brew Title:** ${escape(props.brew.brewTitle) || 'Unable to show title'}
 
-		**Current Authors:** ${props.brew.authors?.map((author)=>{return `[${author}](/user/${author})`;}).join(', ') || 'Unable to list authors'}
+		**Current Authors:** ${props.brew.authors?.map((author)=>{return `[${author}](/user/${encodeURIComponent(author)})`;}).join(', ') || 'Unable to list authors'}
 		
 		[Click here to be redirected to the brew's share page.](/share/${props.brew.shareId})`,
 
@@ -111,7 +111,7 @@ const errorIndex = (props)=>{
 
 		**Brew Title:** ${escape(props.brew.brewTitle) || 'Unable to show title'}
 
-		**Current Authors:** ${props.brew.authors?.map((author)=>{return `[${author}](/user/${author})`;}).join(', ') || 'Unable to list authors'}
+		**Current Authors:** ${props.brew.authors?.map((author)=>{return `[${author}](/user/${encodeURIComponent(author)})`;}).join(', ') || 'Unable to list authors'}
 
 		[Click here to be redirected to the brew's share page.](/share/${props.brew.shareId})`,
 
@@ -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
@@ -196,7 +222,7 @@ const errorIndex = (props)=>{
 		
 		**Brew Title:** ${escape(props.brew.brewTitle)}
 		
-		**Brew Authors:**  ${props.brew.authors?.map((author)=>{return `[${author}](/user/${author})`;}).join(', ') || 'Unable to list authors'}`,
+		**Brew Authors:**  ${props.brew.authors?.map((author)=>{return `[${author}](/user/${encodeURIComponent(author)})`;}).join(', ') || 'Unable to list authors'}`,
 
 		// ####### Admin page error #######
 		'52' : dedent`
@@ -242,4 +268,4 @@ const errorIndex = (props)=>{
 	};
 };
 
-module.exports = errorIndex;
+export default errorIndex;

client/homebrew/pages/homePage/homePage.jsx

@@ -1,141 +1,235 @@
-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 '../../../../shared/naturalcrit/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 '../../../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 'client/homebrew/navbar/nav.jsx';
+import Navbar                    from 'client/homebrew/navbar/navbar.jsx';
+import NewBrewItem               from 'client/homebrew/navbar/newbrew.navitem.jsx';
+import AccountNavItem            from 'client/homebrew/navbar/account.navitem.jsx';
+import ErrorNavItem              from 'client/homebrew/navbar/error-navitem.jsx';
+import HelpNavItem               from 'client/homebrew/navbar/help.navitem.jsx';
+import VaultNavItem              from 'client/homebrew/navbar/vault.navitem.jsx';
+import PrintNavItem              from 'client/homebrew/navbar/print.navitem.jsx';
+import RecentNavItems from 'client/homebrew/navbar/recent.navitem.jsx';
+const { both: RecentNavItem } = RecentNavItems;
+
+
+// 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));
+	const unsavedChangesRef = useRef(unsavedChanges);
+
+	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);
+		window.onbeforeunload = ()=>{
+			if(unsavedChangesRef.current)
+				return 'You have unsaved changes!';
 		};
-	},
+		return ()=>{
+			document.removeEventListener('keydown', handleControlKeys);
+			window.onbeforeunload = null;
+		};
+	}, []);
 
-	editor : React.createRef(null),
+	useEffect(()=>{
+		unsavedChangesRef.current = unsavedChanges;
+	}, [unsavedChanges]);
 
-	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()}
+			{renderNavbar()}
 			<div className='content'>
-				<SplitPane onDragFinish={this.handleSplitMove}>
+				<SplitPane onDragFinish={handleSplitMove}>
 					<Editor
-						ref={this.editor}
-						brew={this.state.brew}
-						onTextChange={this.handleTextChange}
-						renderer={this.state.brew.renderer}
+						ref={editorRef}
+						brew={currentBrew}
+						onBrewChange={handleBrewChange}
+						renderer={currentBrew.renderer}
 						showEditButtons={false}
-						themeBundle={this.state.themeBundle}
-						onCursorPageChange={this.handleEditorCursorPageChange}
-						onViewPageChange={this.handleEditorViewPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+						themeBundle={themeBundle}
+						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}
-						onPageChange={this.handleBrewRendererPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
-						themeBundle={this.state.themeBundle}
+						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;
+export default HomePage;

client/homebrew/pages/homePage/homePage.less

@@ -1,3 +1,5 @@
+@import './shared/naturalcrit/styles/core.less';
+
 .homePage {
 	position : relative;
 	a.floatingNewButton {
@@ -35,6 +37,14 @@
 
 	.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,276 +1,280 @@
-/*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 'client/homebrew/navbar/nav.jsx';
+import Navbar                    from 'client/homebrew/navbar/navbar.jsx';
+import NewBrewItem               from 'client/homebrew/navbar/newbrew.navitem.jsx';
+import AccountNavItem            from 'client/homebrew/navbar/account.navitem.jsx';
+import ErrorNavItem              from 'client/homebrew/navbar/error-navitem.jsx';
+import HelpNavItem               from 'client/homebrew/navbar/help.navitem.jsx';
+import VaultNavItem              from 'client/homebrew/navbar/vault.navitem.jsx';
+import PrintNavItem              from 'client/homebrew/navbar/print.navitem.jsx';
+import RecentNavItems from 'client/homebrew/navbar/recent.navitem.jsx';
+const { both: RecentNavItem } = RecentNavItems;
 
-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));
+	// 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(()=>{
+		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 });
-	},
+	useEffect(()=>{
+		trySaveRef.current = trySave;
+		unsavedChangesRef.current = unsavedChanges;
+	});
 
-	handleEditorCursorPageChange : function(pageNumber){
-		this.setState({ currentEditorCursorPageNum: pageNumber });
-	},
+	const handleSplitMove = ()=>{
+		editorRef.current.update();
+	};
 
-	handleBrewRendererPageChange : function(pageNumber){
-		this.setState({ currentBrewRendererPageNum: pageNumber });
-	},
+	const handleBrewChange = (field)=>(value, subfield)=>{	//'text', 'style', 'snippets', 'metadata'
+		if(subfield == 'renderer' || subfield == 'theme')
+			fetchThemeBundle(setError, setThemeBundle, value.renderer, value.theme);
 
-	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 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));
 
-		this.setState((prevState)=>({
-			brew       : { ...prevState.brew, text: text },
-			htmlErrors : htmlErrors,
-		}));
-		localStorage.setItem(BREWKEY, text);
-	},
+		if(field == 'metadata') setCurrentBrew((prev)=>({ ...prev, ...value }));
+		else                    setCurrentBrew((prev)=>({ ...prev, [field]: value }));
 
-	handleStyleChange : function(style){
-		this.setState((prevState)=>({
-			brew : { ...prevState.brew, style: style },
-		}));
-		localStorage.setItem(STYLEKEY, style);
-	},
-
-	handleSnipChange : function(snippet){
-		//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(snippet);
-
-		this.setState((prevState)=>({
-			brew       : { ...prevState.brew, snippets: snippet },
-			isPending  : true,
-			htmlErrors : htmlErrors,
-		}), ()=>{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 },
-		}), ()=>{
-			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 trySave = 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={trySave} 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()}
+	return (
+		<div className='newPage sitePage'>
+			{renderNavbar()}
 			<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}
-						onSnipChange={this.handleSnipChange}
-						renderer={this.state.brew.renderer}
-						userThemes={this.props.userThemes}
-						themeBundle={this.state.themeBundle}
-						onCursorPageChange={this.handleEditorCursorPageChange}
-						onViewPageChange={this.handleEditorViewPageChange}
-						currentEditorViewPageNum={this.state.currentEditorViewPageNum}
-						currentEditorCursorPageNum={this.state.currentEditorCursorPageNum}
-						currentBrewRendererPageNum={this.state.currentBrewRendererPageNum}
+						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={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 = NewPage;
+export default NewPage;

client/homebrew/pages/newPage/newPage.less

@@ -1,6 +1,15 @@
 .newPage {
 	.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/sharePage/sharePage.jsx

@@ -1,31 +1,27 @@
-require('./sharePage.less');
-const React = require('react');
-const { useState, useEffect, useCallback } = React;
-const { Meta } = require('vitreum/headtags');
+import './sharePage.less';
+import React, { useState, useEffect, useCallback } from 'react';
+import { Meta }                          from 'vitreum/headtags';
 
-const Nav = require('naturalcrit/nav/nav.jsx');
-const Navbar = require('../../navbar/navbar.jsx');
-const MetadataNav = require('../../navbar/metadata.navitem.jsx');
-const PrintNavItem = require('../../navbar/print.navitem.jsx');
-const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
-const Account = require('../../navbar/account.navitem.jsx');
-const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
+import Nav from 'client/homebrew/navbar/nav.jsx';
+import Navbar from 'client/homebrew/navbar/navbar.jsx';
+import MetadataNav from 'client/homebrew/navbar/metadata.navitem.jsx';
+import PrintNavItem from 'client/homebrew/navbar/print.navitem.jsx';
+import RecentNavItems from 'client/homebrew/navbar/recent.navitem.jsx';
+const { both: RecentNavItem } = RecentNavItems;
+import Account from 'client/homebrew/navbar/account.navitem.jsx';
+import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 
-const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js');
-const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js');
+import { DEFAULT_BREW_LOAD } from '../../../../server/brewDefaults.js';
+import { printCurrentBrew, fetchThemeBundle } from '../../../../shared/helpers.js';
 
 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>
@@ -124,4 +116,4 @@ const SharePage = (props)=>{
 	);
 };
 
-module.exports = SharePage;
+export default SharePage;

client/homebrew/pages/userPage/userPage.jsx

@@ -1,17 +1,17 @@
-const React = require('react');
-const { useState } = React;
-const _ = require('lodash');
+import React, { useState } from 'react';
+import _ from 'lodash';
 
-const ListPage = require('../basePages/listPage/listPage.jsx');
+import ListPage from '../basePages/listPage/listPage.jsx';
 
-const Nav = require('naturalcrit/nav/nav.jsx');
-const Navbar = require('../../navbar/navbar.jsx');
-const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
-const Account = require('../../navbar/account.navitem.jsx');
-const NewBrew = require('../../navbar/newbrew.navitem.jsx');
-const HelpNavItem = require('../../navbar/help.navitem.jsx');
-const ErrorNavItem = require('../../navbar/error-navitem.jsx');
-const VaultNavitem = require('../../navbar/vault.navitem.jsx');
+import Nav from 'client/homebrew/navbar/nav.jsx';
+import Navbar from 'client/homebrew/navbar/navbar.jsx';
+import RecentNavItems from 'client/homebrew/navbar/recent.navitem.jsx';
+const { both: RecentNavItem } = RecentNavItems;
+import Account from 'client/homebrew/navbar/account.navitem.jsx';
+import NewBrew from 'client/homebrew/navbar/newbrew.navitem.jsx';
+import HelpNavItem from 'client/homebrew/navbar/help.navitem.jsx';
+import ErrorNavItem from 'client/homebrew/navbar/error-navitem.jsx';
+import VaultNavitem from 'client/homebrew/navbar/vault.navitem.jsx';
 
 const UserPage = (props)=>{
 	props = {
@@ -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 />
@@ -57,4 +61,4 @@ const UserPage = (props)=>{
 	);
 };
 
-module.exports = UserPage;
+export default UserPage;

client/homebrew/pages/vaultPage/vaultPage.jsx

@@ -1,19 +1,18 @@
 /*eslint max-lines: ["warn", {"max": 400, "skipBlankLines": true, "skipComments": true}]*/
 /*eslint max-params:["warn", { max: 10 }], */
-require('./vaultPage.less');
+import './vaultPage.less';
+import React, { useState, useEffect, useRef } from 'react';
 
-const React = require('react');
-const { useState, useEffect, useRef } = React;
-
-const Nav           = require('naturalcrit/nav/nav.jsx');
-const Navbar        = require('../../navbar/navbar.jsx');
-const RecentNavItem = require('../../navbar/recent.navitem.jsx').both;
-const Account       = require('../../navbar/account.navitem.jsx');
-const NewBrew       = require('../../navbar/newbrew.navitem.jsx');
-const HelpNavItem   = require('../../navbar/help.navitem.jsx');
-const BrewItem      = require('../basePages/listPage/brewItem/brewItem.jsx');
-const SplitPane     = require('../../../../shared/naturalcrit/splitPane/splitPane.jsx');
-const ErrorIndex    = require('../errorPage/errors/errorIndex.js');
+import Nav          from 'client/homebrew/navbar/nav.jsx';
+import Navbar       from 'client/homebrew/navbar/navbar.jsx';
+import RecentNavItems from 'client/homebrew/navbar/recent.navitem.jsx';
+const { both: RecentNavItem } = RecentNavItems;
+import Account      from 'client/homebrew/navbar/account.navitem.jsx';
+import NewBrew      from 'client/homebrew/navbar/newbrew.navitem.jsx';
+import HelpNavItem  from 'client/homebrew/navbar/help.navitem.jsx';
+import BrewItem     from '../basePages/listPage/brewItem/brewItem.jsx';
+import SplitPane    from 'client/components/splitPane/splitPane.jsx';
+import ErrorIndex   from '../errorPage/errors/errorIndex.js';
 
 import request from '../../utils/request-middleware.js';
 
@@ -101,7 +100,7 @@ const VaultPage = (props)=>{
 
 		const title      = titleRef.current.value || '';
 		const author     = authorRef.current.value || '';
-		const count      = countRef.current.value || 10;
+		const count      = countRef.current.value || 20;
 		const v3         = v3Ref.current.checked != false;
 		const legacy     = legacyRef.current.checked != false;
 		const sortOption = sort || 'title';
@@ -288,7 +287,8 @@ const VaultPage = (props)=>{
 	const renderPaginationControls = ()=>{
 		if(!totalBrews || totalBrews < 10) return null;
 
-		const countInt = parseInt(brewCollection.length || 20);
+
+		const countInt = parseInt(countRef.current.value || 20);
 		const totalPages = Math.ceil(totalBrews / countInt);
 
 		let startPage, endPage;
@@ -429,4 +429,4 @@ const VaultPage = (props)=>{
 	);
 };
 
-module.exports = VaultPage;
+export default VaultPage;

client/homebrew/pages/vaultPage/vaultPage.less

@@ -1,14 +1,16 @@
 .vaultPage {
 	height           : 100%;
 	overflow-y       : hidden;
-	background-color : #2C3E50;
 
 	*:not(input) { user-select : none; }
 
+	.form {
+		background:white;
+	}
+
 	:where(.content .dataGroup) {
 		width      : 100%;
 		height     : 100%;
-		background : white;
 
 		&.form .brewLookup {
 			position : relative;
@@ -171,7 +173,6 @@
 				max-height       : 100%;
 				padding          : 70px 50px;
 				overflow-y       : scroll;
-				background-color : #2C3E50;
 				container-type   : inline-size;
 
 				h3 { font-size : 25px; }

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/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,

eslint.config.mjs

@@ -32,7 +32,7 @@ export default [{
 				"max-depth"            : ["warn", { max: 4 }],
 				"max-params"           : ["warn", { max: 5 }],
 				"no-restricted-syntax" : ["warn", "ClassDeclaration", "SwitchStatement"],
-				"no-unused-vars"       : ["warn", { vars: "all", args: "none", varsIgnorePattern: "config|_|cx|createClass" }],
+				"no-unused-vars"       : ["warn", { vars: "all", args: "none", varsIgnorePattern: "config|_|cx|createReactClass" }],
 				"react/jsx-uses-vars"  : "warn",
 
 				/** Fixable **/

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,7 +1,7 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "3.18.1",
+  "version": "3.20.1",
   "type": "module",
   "engines": {
     "npm": "^10.8.x",
@@ -12,6 +12,10 @@
     "url": "git://github.com/naturalcrit/homebrewery.git"
   },
   "scripts": {
+    "viteDev": "node scripts/dev.js",
+    "viteDevAdmin": "vite --config vite.config.js --ssr client/admin/admin.jsx",
+    "viteBuild":"vite build",
+    "viteStart":"vite preview",
     "dev": "node --experimental-require-module scripts/dev.js",
     "quick": "node --experimental-require-module scripts/quick.js",
     "build": "node --experimental-require-module scripts/buildHomebrew.js && node --experimental-require-module scripts/buildAdmin.js",
@@ -36,7 +40,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 +48,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",
@@ -60,8 +65,11 @@
       "server"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!nanoid/).*"
+      "node_modules/(?!(nanoid|@exodus/bytes|parse5)/)"
     ],
+    "transform": {
+      "^.+\\.js$": "babel-jest"
+    },
     "coveragePathIgnorePatterns": [
       "build/*"
     ],
@@ -73,7 +81,7 @@
         "lines": 50
       },
       "server/homebrew.api.js": {
-        "statements": 70,
+        "statements": 60,
         "branches": 50,
         "functions": 65,
         "lines": 70
@@ -84,66 +92,75 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.26.10",
-    "@babel/plugin-transform-runtime": "^7.26.10",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-react": "^7.26.3",
-    "@googleapis/drive": "^11.0.0",
+    "@babel/core": "^7.28.4",
+    "@babel/plugin-transform-runtime": "^7.28.3",
+    "@babel/preset-env": "^7.28.3",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/runtime": "^7.28.4",
+    "@dmsnell/diff-match-patch": "^1.1.0",
+    "@googleapis/drive": "^19.2.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.47.0",
     "cors": "^2.8.5",
     "create-react-class": "^15.7.0",
     "dedent-tabs": "^0.10.3",
     "expr-eval": "^2.0.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",
-    "js-yaml": "^4.1.0",
+    "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.1",
     "jwt-simple": "^0.5.6",
-    "less": "^3.13.1",
+    "less": "^4.5.1",
     "lodash": "^4.17.21",
-    "marked": "15.0.8",
-    "marked-emoji": "^2.0.0",
-    "marked-extended-tables": "^2.0.1",
-    "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.2",
+    "marked-extended-tables": "^2.0.1",
+    "marked-gfm-heading-id": "^4.1.3",
     "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.13.2",
-    "nanoid": "5.1.5",
-    "nconf": "^0.12.1",
+    "mongoose": "^8.20.0",
+    "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.5.0",
-    "romans": "^3.0.0",
+    "react-router": "^7.9.6",
+    "romans": "^3.1.0",
     "sanitize-filename": "1.6.3",
-    "superagent": "^10.2.0",
-    "vitreum": "git+https://git@github.com/calculuschild/vitreum.git",
+    "superagent": "^10.2.1",
+    "vite": "^7.3.1",
     "written-number": "^0.11.1"
   },
   "devDependencies": {
-    "@stylistic/stylelint-plugin": "^3.1.2",
-    "babel-plugin-transform-import-meta": "^2.3.2",
-    "eslint": "^9.24.0",
-    "eslint-plugin-jest": "^28.11.0",
+    "@stylistic/stylelint-plugin": "^4.0.0",
+    "babel-jest": "^30.2.0",
+    "babel-plugin-transform-import-meta": "^2.3.3",
+    "eslint": "^9.39.1",
+    "eslint-plugin-jest": "^29.1.0",
     "eslint-plugin-react": "^7.37.5",
-    "globals": "^16.0.0",
-    "jest": "^29.7.0",
+    "globals": "^16.4.0",
+    "jest": "^30.2.0",
     "jest-expect-message": "^1.1.3",
+    "jsdom": "^27.4.0",
     "jsdom-global": "^3.0.2",
     "postcss-less": "^6.0.0",
-    "stylelint": "^16.18.0",
-    "stylelint-config-recess-order": "^6.0.0",
-    "stylelint-config-recommended": "^16.0.0",
-    "supertest": "^7.1.0"
+    "stylelint": "^16.25.0",
+    "stylelint-config-recess-order": "^7.3.0",
+    "stylelint-config-recommended": "^17.0.0",
+    "supertest": "^7.1.4"
   }
 }

scripts/dev.js

@@ -1,22 +1,44 @@
-const label = 'dev';
-console.time(label);
+import express from "express";
+import { createServer as createViteServer } from "vite";
+import path from "path";
+import url from "url";
+import template from "../client/template.js";
 
-const jsx = require('vitreum/steps/jsx.watch.js');
-const less = require('vitreum/steps/less.watch.js');
-const assets = require('vitreum/steps/assets.watch.js');
-const server = require('vitreum/steps/server.watch.js');
-const livereload = require('vitreum/steps/livereload.js');
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
+const app = express();
 
-const Proj = require('./project.json');
+async function start() {
+	const vite = await createViteServer({
+		server: { middlewareMode: true },
+		root: path.resolve(__dirname, "../client"),
+		appType: "custom",
+	});
 
-Promise.resolve()
-	.then(()=>jsx('homebrew', './client/homebrew/homebrew.jsx', { libs: Proj.libs, shared: ['./shared'] }))
-	.then((deps)=>less('homebrew', { shared: ['./shared'] }, deps))
-	.then(()=>jsx('admin', './client/admin/admin.jsx', { libs: Proj.libs, shared: ['./shared'] }))
-	.then((deps)=>less('admin', { shared: ['./shared'] }, deps))
+	app.use(vite.middlewares);
+	app.use("/assets", express.static(path.resolve(__dirname, "../client/assets")));
 
-	.then(()=>assets(Proj.assets, ['./shared', './client']))
-	.then(()=>livereload())
-	.then(()=>server('./server.js', ['server']))
-	.then(console.timeEnd.bind(console, label))
-	.catch(console.error);
+	app.use(/(.*)/, async (req, res, next) => {
+		try {
+			const parsed = url.parse(req.url);
+			const pathname = parsed.pathname || "/";
+
+			// Ignore vite HMR or ping requests
+			if (pathname.startsWith("/__vite")) return next();
+
+			const entry = pathname.startsWith("/admin") ? "admin" : "homebrew";
+
+			const ssrModule = await vite.ssrLoadModule(`/${entry}/${entry}.jsx`);
+
+			const html = await template(entry, "", { path: pathname, ssrModule });
+			res.status(200).set({ "Content-Type": "text/html" }).end(html);
+		} catch (e) {
+			vite.ssrFixStacktrace(e);
+			console.error(e);
+			res.status(500).end(e.message);
+		}
+	});
+
+	app.listen(8000, () => console.log("Dev server running on http://localhost:8000"));
+}
+
+start();

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/app.js

@@ -35,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)=>{
@@ -274,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,
@@ -346,7 +347,7 @@ 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);
 
@@ -383,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'
 	};
 
@@ -404,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);
 
@@ -430,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'
@@ -457,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';
 
@@ -485,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 = {
@@ -560,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

@@ -6,6 +6,7 @@ import config      from './config.js';
 
 
 let serviceAuth;
+let clientEmail;
 if(!config.get('service_account')){
 	const reset = '\x1b[0m'; // Reset to default style
 	const yellow = '\x1b[33m'; // yellow color
@@ -15,6 +16,10 @@ if(!config.get('service_account')){
 		JSON.parse(config.get('service_account')) :
 		config.get('service_account');
 
+	if(keys?.client_email) {
+		clientEmail = keys.client_email;
+	}
+
 	try {
 		serviceAuth = googleDrive.auth.fromJSON(keys);
 		serviceAuth.scopes = ['https://www.googleapis.com/auth/drive'];
@@ -227,14 +232,30 @@ const GoogleActions = {
 
 		if(!obj) return;
 
+		if(clientEmail) {
+			await drive.permissions.create({
+				resource : {
+					type         : 'user',
+					emailAddress : clientEmail,
+					role         : 'writer'
+				},
+				fileId : obj.data.id,
+				fields : 'id',
+			})
+			.catch((err)=>{
+				console.log('Error adding Service Account permissions on Google Drive file');
+				console.error(err);
+			});
+		}
+
 		await drive.permissions.create({
 			resource : { type : 'anyone',
-									 role : 'writer' },
+			             role : 'writer' },
 			fileId : obj.data.id,
 			fields : 'id',
 		})
 		.catch((err)=>{
-			console.log('Error updating permissions');
+			console.log('Error adding "Anyone" permissions on Google Drive file');
 			console.error(err);
 		});
 

server/homebrew.api.js

@@ -4,13 +4,16 @@ 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, 
-		 brewSnippetsToJSON }        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();
@@ -46,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`
@@ -337,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 ()=>{
@@ -412,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)=>{
@@ -431,6 +481,7 @@ const api = {
 				await HomebrewModel.deleteOne({ editId: id });
 				return next();
 			}
+			throw(err);
 		}
 
 		let brew = req.brew;
@@ -481,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', ()=>{
@@ -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,29 +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 }
+	lock : { type: Object, index: true }
 }, { versionKey: false });
 
 HomebrewSchema.statics.increaseView = async function(query) {
@@ -43,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';});
@@ -63,6 +65,15 @@ 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 {