Remove handler function for cursor/renderer page. Use setState directly

Add Windows-specific instructions to Docker README

README.DOCKER.md

@@ -49,7 +49,7 @@ Make an changes you need to `config/docker.json` then build the image. If it doe
 "web_port" : 8000,
 "enable_v3" : true,
 "mongodb_uri": "mongodb://172.17.0.2/homebrewery",
-"enable_themes" : true,
+"enable_themes" : true
 }
 ```
 
@@ -90,6 +90,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 +124,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

@@ -7,15 +7,17 @@ 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/components/splitPane/splitPane.jsx

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

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -24,6 +24,8 @@ 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="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
@@ -122,7 +124,7 @@ const BrewRenderer = (props)=>{
 
 	//useEffect to store or gather toolbar state from storage
 	useEffect(()=>{
-		const toolbarState = JSON.parse(window.localStorage.getItem('hb_toolbarState'));
+		const toolbarState = JSON.parse(window.localStorage.getItem(TOOLBAR_STATE_KEY));
 		toolbarState &&	setDisplayOptions(toolbarState);
 	}, []);
 
@@ -284,7 +286,7 @@ const BrewRenderer = (props)=>{
 
 	const handleDisplayOptionsChange = (newDisplayOptions)=>{
 		setDisplayOptions(newDisplayOptions);
-		localStorage.setItem('hb_toolbarState', JSON.stringify(newDisplayOptions));
+		localStorage.setItem(TOOLBAR_STATE_KEY, JSON.stringify(newDisplayOptions));
 	};
 
 	const pagesStyle = {

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -9,6 +9,8 @@ import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anch
 const MAX_ZOOM = 300;
 const MIN_ZOOM = 10;
 
+const TOOLBAR_VISIBILITY = 'HB_renderer_toolbarVisibility';
+
 const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPages, headerState, setHeaderState })=>{
 
 	const [pageNum, setPageNum]     = useState(1);
@@ -21,8 +23,8 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 	}, [visiblePages]);
 
 	useEffect(()=>{
-		const Visibility = localStorage.getItem('hb_toolbarVisibility');
-		if (Visibility) setToolsVisible(Visibility === 'true');
+		const Visibility = localStorage.getItem(TOOLBAR_VISIBILITY);
+		if(Visibility) setToolsVisible(Visibility === 'true');
 
 	}, []);
 
@@ -100,7 +102,7 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 			<div className='toggleButton'>
 				<button title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{
 					setToolsVisible(!toolsVisible);
-					localStorage.setItem('hb_toolbarVisibility', !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>

client/homebrew/editor/editor.jsx

@@ -10,7 +10,7 @@ const CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
 const SnippetBar = require('./snippetbar/snippetbar.jsx');
 const MetadataEditor = require('./metadataEditor/metadataEditor.jsx');
 
-const EDITOR_THEME_KEY = 'HOMEBREWERY-EDITOR-THEME';
+const EDITOR_THEME_KEY = 'HB_editor_theme';
 
 const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
 const SNIPPETBREAK_REGEX_V3 = /^\\snippet\ .*$/;
@@ -40,11 +40,8 @@ const Editor = createClass({
 				style : ''
 			},
 
-			onTextChange  : ()=>{},
-			onStyleChange : ()=>{},
-			onMetaChange  : ()=>{},
-			onSnipChange  : ()=>{},
-			reportError   : ()=>{},
+			onBrewChange : ()=>{},
+			reportError  : ()=>{},
 
 			onCursorPageChange : ()=>{},
 			onViewPageChange   : ()=>{},
@@ -143,7 +140,7 @@ const Editor = createClass({
 
 	handleViewChange : function(newView){
 		this.props.setMoveArrows(newView === 'text');
-		
+
 		this.setState({
 			view : newView
 		}, ()=>{
@@ -438,7 +435,7 @@ 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}
 					style={{  height: `calc(100% - ${this.state.snippetbarHeight}px)` }} />
@@ -451,7 +448,7 @@ 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}
@@ -467,7 +464,7 @@ 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}/>
 			</>;
@@ -481,7 +478,7 @@ 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}

client/homebrew/homebrew.jsx

@@ -4,6 +4,8 @@ import './homebrew.less';
 import React from 'react';
 import { StaticRouter as Router, Route, Routes, useParams, useSearchParams } from 'react-router';
 
+import { updateLocalStorage } from './utils/updateLocalStorage/updateLocalStorageKeys.js';
+
 import HomePage    from './pages/homePage/homePage.jsx';
 import EditPage    from './pages/editPage/editPage.jsx';
 import UserPage    from './pages/userPage/userPage.jsx';
@@ -48,6 +50,8 @@ const Homebrew = (props)=>{
 	global.enable_themes = enable_themes;
 	global.config        = config;
 
+	updateLocalStorage();
+
 	return (
 		<Router location={url}>
 			<div className='homebrew'>

client/homebrew/navbar/recent.navitem.jsx

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

client/homebrew/navbar/share.navitem.jsx

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

client/homebrew/pages/accountPage/accountPage.jsx

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

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

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

client/homebrew/pages/editPage/editPage.jsx

@@ -1,536 +1,411 @@
 /* eslint-disable max-lines */
-require('./editPage.less');
-const React = require('react');
-const _ = require('lodash');
-const createClass = require('create-react-class');
-import {makePatches, applyPatches, stringifyPatches, parsePatches} from '@sanity/diff-match-patch';
-import { md5 } from 'hash-wasm';
-import { gzipSync, strToU8 } from 'fflate';
+import './editPage.less';
 
-import request from '../../utils/request-middleware.js';
-const { Meta } = require('vitreum/headtags');
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import request                                from '../../utils/request-middleware.js';
+import Markdown                               from 'naturalcrit/markdown.js';
 
-const Nav = require('naturalcrit/nav/nav.jsx');
-const Navbar = require('../../navbar/navbar.jsx');
+import _                                 from 'lodash';;
+import { makePatches, stringifyPatches } from '@sanity/diff-match-patch';
+import { md5 }                           from 'hash-wasm';
+import { gzipSync, strToU8 }             from 'fflate';
+import { Meta }                          from 'vitreum/headtags';
 
-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 Nav                       from 'naturalcrit/nav/nav.jsx';
+import Navbar                    from '../../navbar/navbar.jsx';
+import NewBrewItem               from '../../navbar/newbrew.navitem.jsx';
+import AccountNavItem            from '../../navbar/account.navitem.jsx';
+import ShareNavItem              from '../../navbar/share.navitem.jsx';
+import ErrorNavItem              from '../../navbar/error-navitem.jsx';
+import HelpNavItem               from '../../navbar/help.navitem.jsx';
+import VaultNavItem              from '../../navbar/vault.navitem.jsx';
+import PrintNavItem              from '../../navbar/print.navitem.jsx';
+import { both as RecentNavItem } from '../../navbar/recent.navitem.jsx';
 
-const SplitPane = require('client/components/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 LockNotification = require('./lockNotification/lockNotification.jsx');
+import LockNotification from './lockNotification/lockNotification.jsx';
 
-import Markdown from 'naturalcrit/markdown.js';
-
-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';
 
 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,
-			unsavedChanges             : 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,
 
-	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
+
+	const useLocalStorage = false;
+
+	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.unsavedChanges){
+			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((err)=>{this.setState({ error: err })}, (theme)=>{this.setState({ themeBundle: theme })}, 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.unsavedChanges != hasChange){
-			this.setState({
-				unsavedChanges : hasChange
-			});
+		if(autoSaveEnabled) trySave(false, hasChange);
+	}, [currentBrew]);
+
+	const handleSplitMove = ()=>{
+		editorRef.current?.update();
+	};
+
+	const handleBrewChange = (field) => (value, subfield) => {	//'text', 'style', 'snippets', 'metadata'
+		if (subfield == 'renderer' || subfield == 'theme')
+			fetchThemeBundle(setError, setThemeBundle, value.renderer, value.theme);
+
+		//If there are HTML errors, run the validator on every change to give quick feedback
+		if(HTMLErrors.length && (field == 'text' || field == 'snippets'))
+			setHTMLErrors(Markdown.validate(value));
+
+		if(field == 'metadata') setCurrentBrew(prev => ({ ...prev, ...value }));
+		else                    setCurrentBrew(prev => ({ ...prev, [field]: value }));
+
+		if(useLocalStorage) {
+			if(field == 'text')     localStorage.setItem(BREWKEY, value);
+			if(field == 'style')    localStorage.setItem(STYLEKEY, value);
+			if(field == 'snippets') localStorage.setItem(SNIPKEY, value);
+			if(field == 'metadata') localStorage.setItem(METAKEY, JSON.stringify({
+				renderer : value.renderer,
+				theme    : value.theme,
+				lang     : value.lang
+			}));
 		}
-	},
+	};
 
-	handleControlKeys : function(e){
-		if(!(e.ctrlKey || e.metaKey)) return;
-		const S_KEY = 83;
-		const P_KEY = 80;
-		if(e.keyCode == S_KEY) this.trySave(true);
-		if(e.keyCode == P_KEY) printCurrentBrew();
-		if(e.keyCode == P_KEY || e.keyCode == S_KEY){
-			e.stopPropagation();
-			e.preventDefault();
-		}
-	},
+	const updateBrew = (newData)=>setCurrentBrew((prevBrew)=>({
+		...prevBrew,
+		style    : newData.style,
+		text     : newData.text,
+		snippets : newData.snippets
+	}));
 
-	handleSplitMove : function(){
-		this.editor.current.update();
-	},
+	const resetWarnUnsavedTimer = ()=>{
+		setTimeout(()=>setWarnUnsavedChanges(false), UNSAVED_WARNING_POPUP_TIMEOUT); // Hide the warning after 4 seconds
+		clearTimeout(warnUnsavedTimeout.current);
+		warnUnsavedTimeout.current = setTimeout(()=>setWarnUnsavedChanges(true), UNSAVED_WARNING_TIMEOUT); // 15 minutes between unsaved work warnings
+	};
 
-	handleEditorViewPageChange : function(pageNumber){
-		this.setState({ currentEditorViewPageNum: pageNumber });
-	},
-
-	handleEditorCursorPageChange : function(pageNumber){
-		this.setState({ currentEditorCursorPageNum: pageNumber });
-	},
-
-	handleBrewRendererPageChange : function(pageNumber){
-		this.setState({ currentBrewRendererPageNum: pageNumber });
-	},
-
-	handleTextChange : function(text){
-		//If there are errors, run the validator on every change to give quick feedback
-		let htmlErrors = this.state.htmlErrors;
-		if(htmlErrors.length) htmlErrors = Markdown.validate(text);
-
-		this.setState((prevState)=>({
-			brew       : { ...prevState.brew, text: text },
-			htmlErrors : htmlErrors,
-		}), ()=>{if(this.state.autoSave) this.trySave();});
-	},
-
-	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 },
-			unsavedChanges : 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((err)=>{this.setState({ error: err })}, (theme)=>{this.setState({ themeBundle: theme })}, 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,
-				snippets : newData.snippets
-			}
-		}));
-	},
-
-	trySave : function(immediate=false){
-		if(!this.debounceSave) this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT);
-		if(this.state.isSaving)
-			return;
-
-		if(immediate) {
-			this.debounceSave();
-			this.debounceSave.flush();
-			return;
-		}
-		
-		if(this.hasChanges())
-			this.debounceSave();
-		else
-			this.debounceSave.cancel();
-	},
-
-	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
-		});
-	},
 
-	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,
-			error      : null
-		}), ()=>this.trySave(true));
-	},
+	const closeAlerts = (e)=>{
+		e.stopPropagation(); //Only handle click once so alert doesn't reopen
+		setAlertTrashedGoogleBrew(false);
+		setAlertLoginToTransfer(false);
+		setConfirmGoogleTransfer(false);
+	};
 
-	save : async function(){
-		if(this.debounceSave && this.debounceSave.cancel) this.debounceSave.cancel();
+	const toggleGoogleStorage = ()=>{
+		setSaveGoogle((prev)=>!prev);
+		setError(null);
+		trySave(true);
+	};
 
-		const brewState       = this.state.brew; // freeze the current state
-		const preSaveSnapshot = { ...brewState };
+	const trySave = (immediate = false, hasChanges = true)=>{
+		clearTimeout(saveTimeout.current);
+		if(isSaving) return;
+		if(!hasChanges && !immediate) return;
+		const newTimeout = immediate ? 0 : SAVE_TIMEOUT;
 
-		this.setState((prevState)=>({
-			isSaving   : true,
-			error      : null,
-			htmlErrors : Markdown.validate(prevState.brew.text)
-		}));
+		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);
+	};
 
-		await updateHistory(this.state.brew).catch(console.error);
+	const save = async (brew, saveToGoogle)=>{
+		setHTMLErrors(Markdown.validate(brew.text));
+
+		await updateHistory(brew).catch(console.error);
 		await versionHistoryGarbageCollection().catch(console.error);
 
 		//Prepare content to send to server
-		const brew          = { ...brewState };
-		brew.text           = brew.text.normalize('NFC');
-		this.savedBrew.text = this.savedBrew.text.normalize('NFC');
-		brew.pageCount      = ((brew.renderer=='legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1;
-		brew.patches        = stringifyPatches(makePatches(encodeURI(this.savedBrew.text), encodeURI(brew.text)));
-		brew.hash           = await md5(this.savedBrew.text);
-		//brew.text           = undefined; - Temporary parallel path
-		brew.textBin        = undefined;
+		const brewToSave = {
+			...brew,
+			text      : brew.text.normalize('NFC'),
+			pageCount : ((brew.renderer === 'legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1,
+			patches   : stringifyPatches(makePatches(encodeURI(lastSavedBrew.current.text.normalize('NFC')), encodeURI(brew.text.normalize('NFC')))),
+			hash      : await md5(lastSavedBrew.current.text),
+			textBin   : undefined,
+			version   : lastSavedBrew.current.version
+		};
 
-		const compressedBrew = gzipSync(strToU8(JSON.stringify(brew)));
+		const compressedBrew = gzipSync(strToU8(JSON.stringify(brewToSave)));
+		const transfer = saveToGoogle === _.isNil(brew.googleId);
+		const params = transfer ? `?${saveToGoogle ? 'saveToGoogle' : 'removeFromGoogle'}=true` : '';
 
-		const transfer = this.state.saveGoogle == _.isNil(this.state.brew.googleId);
-		const params = `${transfer ? `?${this.state.saveGoogle ? 'saveToGoogle' : 'removeFromGoogle'}=true` : ''}`;
 		const res = await request
-			.put(`/api/update/${brew.editId}${params}`)
+			.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 = {
-			...preSaveSnapshot,
-			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
 		};
 
-		this.setState((prevState) => ({
-			brew: {
-				...prevState.brew,
-				googleId : res.body.googleId ? res.body.googleId : null,
-				editId 	 : res.body.editId,
-				shareId  : res.body.shareId,
-				version  : res.body.version
-			},
-			isSaving    : false,
-			unsavedTime : new Date()
-		}), ()=>{
-			this.setState({ unsavedChanges : this.hasChanges() });
-		});
+		lastSavedBrew.current = {
+			...brew,
+			...updatedFields
+		};
 
-		history.replaceState(null, null, `/edit/${this.savedBrew.editId}`);
-	},
+		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.unsavedChanges && 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.unsavedChanges){
-			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){
+		if(autoSaveEnabled)
 			return <Nav.item className='save saved'>auto-saved.</Nav.item>;
-		}
+
 		// DEFAULT - No unsaved changes, show SAVED
 		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)}`;
-	},
-
-	clearError : function(){
-		setState({
-			error    : null,
-			isSaving : false
-		})
-	},
-
-	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} clearError={this.clearError}></ErrorNavItem> :
-					<Nav.dropdown className='save-menu'>
-						{this.renderSaveButton()}
-						{this.renderAutoSaveButton()}
-					</Nav.dropdown>
-				}
-				<NewBrew />
+				{renderGoogleDriveIcon()}
+				{error
+					? <ErrorNavItem error={error} clearError={clearError} />
+					: <Nav.dropdown className='save-menu'>
+						{renderSaveButton()}
+						{renderAutoSaveButton()}
+					</Nav.dropdown>}
+				<NewBrewItem/>
 				<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>
+				<ShareNavItem brew={currentBrew} />
 				<PrintNavItem />
 				<VaultNavItem />
-				<RecentNavItem brew={this.state.brew} storageKey='edit' />
-				<Account />
+				<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;

client/homebrew/pages/homePage/homePage.jsx

@@ -3,6 +3,7 @@ import './homePage.less';
 import React                           from 'react';
 import { useEffect, useState, useRef } from 'react';
 import request                         from '../../utils/request-middleware.js';
+import Markdown                        from 'naturalcrit/markdown.js';
 import { Meta }                        from 'vitreum/headtags';
 
 import Nav                             from 'naturalcrit/nav/nav.jsx';
@@ -21,6 +22,11 @@ import BrewRenderer                    from '../../brewRenderer/brewRenderer.jsx
 
 import { DEFAULT_BREW }                from '../../../../server/brewDefaults.js';
 
+const BREWKEY  = 'homebrewery-new';
+const STYLEKEY = 'homebrewery-new-style';
+const SNIPKEY  = 'homebrewery-new-snippets';
+const METAKEY  = 'homebrewery-new-meta';
+
 const HomePage =(props)=>{
 	props = {
 		brew : DEFAULT_BREW,
@@ -28,9 +34,10 @@ const HomePage =(props)=>{
     ...props
   };
 
-	const [brew                      , setBrew]                       = useState(props.brew);
+	const [currentBrew               , setCurrentBrew]                = useState(props.brew);
 	const [welcomeText               , setWelcomeText]                = useState(props.brew.text);
 	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);
@@ -39,13 +46,15 @@ const HomePage =(props)=>{
 
 	const editorRef = useRef(null);
 
+	const useLocalStorage = false;
+
 	useEffect(()=>{
-		fetchThemeBundle(setError, setThemeBundle, brew.renderer, brew.theme);
+		fetchThemeBundle(setError, setThemeBundle, currentBrew.renderer, currentBrew.theme);
 	}, []);
 
 	const save = ()=>{
 		request.post('/api')
-			.send(brew)
+			.send(currentBrew)
 			.end((err, res)=>{
 				if(err) {
 					setError(err);
@@ -60,20 +69,27 @@ const HomePage =(props)=>{
 		editorRef.current.update();
 	};
 
-	const handleEditorViewPageChange = (pageNumber)=>{
-		setCurrentEditorViewPageNum(pageNumber);
-	};
-	
-	const handleEditorCursorPageChange = (pageNumber)=>{
-		setCurrentEditorCursorPageNum(pageNumber);
-	};
-	
-	const handleBrewRendererPageChange = (pageNumber)=>{
-		setCurrentBrewRendererPageNum(pageNumber);
-	};
+	const handleBrewChange = (field) => (value, subfield) => {	//'text', 'style', 'snippets', 'metadata'
+		if (subfield == 'renderer' || subfield == 'theme')
+			fetchThemeBundle(setError, setThemeBundle, value.renderer, value.theme);
 
-	const handleTextChange = (text)=>{
-		setBrew((prevBrew) => ({ ...prevBrew, 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));
+
+		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 clearError = ()=>{
@@ -105,22 +121,22 @@ const HomePage =(props)=>{
 				<SplitPane onDragFinish={handleSplitMove}>
 					<Editor
 						ref={editorRef}
-						brew={brew}
-						onTextChange={handleTextChange}
-						renderer={brew.renderer}
+						brew={currentBrew}
+						onBrewChange={handleBrewChange}
+						renderer={currentBrew.renderer}
 						showEditButtons={false}
 						themeBundle={themeBundle}
-						onCursorPageChange={handleEditorCursorPageChange}
-						onViewPageChange={handleEditorViewPageChange}
+						onCursorPageChange={setCurrentEditorCursorPageNum}
+						onViewPageChange={setCurrentEditorViewPageNum}
 						currentEditorViewPageNum={currentEditorViewPageNum}
 						currentEditorCursorPageNum={currentEditorCursorPageNum}
 						currentBrewRendererPageNum={currentBrewRendererPageNum}
 					/>
 					<BrewRenderer
-						text={brew.text}
-						style={brew.style}
-						renderer={brew.renderer}
-						onPageChange={handleBrewRendererPageChange}
+						text={currentBrew.text}
+						style={currentBrew.style}
+						renderer={currentBrew.renderer}
+						onPageChange={setCurrentBrewRendererPageNum}
 						currentEditorViewPageNum={currentEditorViewPageNum}
 						currentEditorCursorPageNum={currentEditorCursorPageNum}
 						currentBrewRendererPageNum={currentBrewRendererPageNum}
@@ -128,7 +144,7 @@ const HomePage =(props)=>{
 					/>
 				</SplitPane>
 			</div>
-			<div className={`floatingSaveButton${welcomeText !== brew.text ? ' show' : ''}`} onClick={save}>
+			<div className={`floatingSaveButton${welcomeText !== currentBrew.text ? ' show' : ''}`} onClick={save}>
 				Save current <i className='fas fa-save' />
 			</div>
 

client/homebrew/pages/newPage/newPage.jsx

@@ -20,10 +20,13 @@ import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 import { DEFAULT_BREW }                       from '../../../../server/brewDefaults.js';
 import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js';
 
-const BREWKEY  = 'homebrewery-new';
-const STYLEKEY = 'homebrewery-new-style';
-const METAKEY  = 'homebrewery-new-meta';
-const SAVEKEY  = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${global.account?.username || ''}`;
+
+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 = (props) => {
 	props = {
@@ -43,6 +46,8 @@ const NewPage = (props) => {
 
 	const editorRef = useRef(null);
 
+	const useLocalStorage = true;
+
 	useEffect(() => {
 		document.addEventListener('keydown', handleControlKeys);
 		loadBrew();
@@ -67,6 +72,7 @@ const NewPage = (props) => {
 			brew.lang     = metaStorage?.lang     ?? brew.lang;
 		}
 
+		const SAVEKEY = `${SAVEKEYPREFIX}${global.account?.username}`;
 		const saveStorage = localStorage.getItem(SAVEKEY) || 'HOMEBREWERY';
 
 		setCurrentBrew(brew);
@@ -96,52 +102,27 @@ const NewPage = (props) => {
 		editorRef.current.update();
 	};
 
-	const handleEditorViewPageChange = (pageNumber)=>{
-		setCurrentEditorViewPageNum(pageNumber);
-	};
-	
-	const handleEditorCursorPageChange = (pageNumber)=>{
-		setCurrentEditorCursorPageNum(pageNumber);
-	};
-	
-	const handleBrewRendererPageChange = (pageNumber)=>{
-		setCurrentBrewRendererPageNum(pageNumber);
-	};
+	const handleBrewChange = (field) => (value, subfield) => {	//'text', 'style', 'snippets', 'metadata'
+		if (subfield == 'renderer' || subfield == 'theme')
+			fetchThemeBundle(setError, setThemeBundle, value.renderer, value.theme);
 
-	const handleTextChange = (text)=>{
 		//If there are HTML errors, run the validator on every change to give quick feedback
-		if(HTMLErrors.length)
-			HTMLErrors = Markdown.validate(text);
+		if(HTMLErrors.length && (field == 'text' || field == 'snippets'))
+			setHTMLErrors(Markdown.validate(value));
 
-		setHTMLErrors(HTMLErrors);
-		setCurrentBrew((prevBrew) => ({ ...prevBrew, text }));
-		localStorage.setItem(BREWKEY, text);
-	};
+		if(field == 'metadata') setCurrentBrew(prev => ({ ...prev, ...value }));
+		else                    setCurrentBrew(prev => ({ ...prev, [field]: value }));
 
-	const handleStyleChange = (style) => {
-		setCurrentBrew(prevBrew => ({ ...prevBrew, style }));
-		localStorage.setItem(STYLEKEY, style);
-	};
-
-	const handleSnipChange = (snippet)=>{
-		//If there are HTML errors, run the validator on every change to give quick feedback
-		if(HTMLErrors.length)
-			HTMLErrors = Markdown.validate(snippet);
-
-		setHTMLErrors(HTMLErrors);
-		setCurrentBrew((prevBrew) => ({ ...prevBrew, snippets: snippet }));
-	};
-
-	const handleMetaChange = (metadata, field = undefined) => {
-		if (field === 'theme' || field === 'renderer')
-			fetchThemeBundle(setError, setThemeBundle, metadata.renderer, metadata.theme);
-
-		setCurrentBrew(prev => ({ ...prev, ...metadata }));
-		localStorage.setItem(METAKEY, JSON.stringify({
-			renderer : metadata.renderer,
-			theme    : metadata.theme,
-			lang     : metadata.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
+			}));
+		}
 	};
 
 	const save = async () => {
@@ -215,15 +196,12 @@ const NewPage = (props) => {
 					<Editor
 						ref={editorRef}
 						brew={currentBrew}
-						onTextChange={handleTextChange}
-						onStyleChange={handleStyleChange}
-						onMetaChange={handleMetaChange}
-						onSnipChange={handleSnipChange}
+						onBrewChange={handleBrewChange}
 						renderer={currentBrew.renderer}
 						userThemes={props.userThemes}
 						themeBundle={themeBundle}
-						onCursorPageChange={handleEditorCursorPageChange}
-						onViewPageChange={handleEditorViewPageChange}
+						onCursorPageChange={setCurrentEditorCursorPageNum}
+						onViewPageChange={setCurrentEditorViewPageNum}
 						currentEditorViewPageNum={currentEditorViewPageNum}
 						currentEditorCursorPageNum={currentEditorCursorPageNum}
 						currentBrewRendererPageNum={currentBrewRendererPageNum}
@@ -236,7 +214,7 @@ const NewPage = (props) => {
 						themeBundle={themeBundle}
 						errors={HTMLErrors}
 						lang={currentBrew.lang}
-						onPageChange={handleBrewRendererPageChange}
+						onPageChange={setCurrentBrewRendererPageNum}
 						currentEditorViewPageNum={currentEditorViewPageNum}
 						currentEditorCursorPageNum={currentEditorCursorPageNum}
 						currentBrewRendererPageNum={currentBrewRendererPageNum}

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/localStorageKeyMap.spec.js

@@ -0,0 +1,30 @@
+import getLocalStorageMap from './localStorageKeyMap.js';
+
+describe('getLocalStorageMap', ()=>{
+	it('no username', ()=>{
+		const account = global.account;
+
+		delete global.account;
+
+		const map = getLocalStorageMap();
+
+		global.account = account;
+
+		expect(map).toBeInstanceOf(Object);
+		expect(Object.entries(map)).toHaveLength(16);
+	});
+
+	it('no username', ()=>{
+		const account = global.account;
+
+		global.account = { username: 'test' };
+
+		const map = getLocalStorageMap();
+
+		global.account = account;
+
+		expect(map).toBeInstanceOf(Object);
+		expect(Object.entries(map)).toHaveLength(17);
+		expect(map).toHaveProperty('HOMEBREWERY-DEFAULT-SAVE-LOCATION-test', 'HB_editor_defaultSave_test');
+	});
+});

client/homebrew/utils/updateLocalStorage/updateLocalStorageKeys.js

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

package.json

@@ -138,16 +138,16 @@
   "devDependencies": {
     "@stylistic/stylelint-plugin": "^4.0.0",
     "babel-plugin-transform-import-meta": "^2.3.3",
-    "eslint": "^9.34.0",
+    "eslint": "^9.35.0",
     "eslint-plugin-jest": "^29.0.1",
     "eslint-plugin-react": "^7.37.5",
     "globals": "^16.3.0",
-    "jest": "^30.0.5",
+    "jest": "^30.1.3",
     "jest-expect-message": "^1.1.3",
     "jsdom-global": "^3.0.2",
     "postcss-less": "^6.0.0",
-    "stylelint": "^16.23.1",
-    "stylelint-config-recess-order": "^7.2.0",
+    "stylelint": "^16.24.0",
+    "stylelint-config-recess-order": "^7.3.0",
     "stylelint-config-recommended": "^17.0.0",
     "supertest": "^7.1.4"
   }

server/db.js

@@ -27,7 +27,10 @@ const disconnect = async ()=>{
 };
 
 const connect = async (config)=>{
-	return await Mongoose.connect(getMongoDBURL(config), { retryWrites: false })
+	return await Mongoose.connect(getMongoDBURL(config), {
+		retryWrites : false,
+		autoIndex   : (config.get('local_environments').includes(config.get('node_env')))
+	})
 		.catch((error)=>handleConnectionError(error));
 };
 

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 {

shared/naturalcrit/codeEditor/codeEditor.less

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

themes/V3/UnearthedArcana/settings.json

@@ -0,0 +1,6 @@
+{
+  "name" : "UnearthedArcana",
+  "renderer" : "V3",
+  "baseTheme" : false,
+  "baseSnippets" : false
+}

themes/V3/UnearthedArcana/style.less

@@ -0,0 +1,38 @@
+@import (less) './themes/fonts/5e/fonts.less';
+@import (less) './themes/assets/assets.less';
+
+:root {
+	//Colors
+	--HB_Color_Background            : #FFFFFF; // White
+	--HB_Color_WatercolorStain       : #000000; // Black
+}
+
+.page {
+	font-family: Cambria,Georgia,serif;
+	font-size: 14px;
+	h1, h2, h3, h4 {
+  		font-variant: small-caps;
+  		font-weight: normal;
+	}
+	h1 {
+		column-span: all;
+		-webkit-column-span: all;
+		font-size: 40px;
+	}
+	h2 {
+		font-size: 26px;
+	}
+	h3 {
+		font-size: 20px;
+		border-bottom: 2px solid black;
+	}
+	h4 {
+		font-size: 18px;
+	}
+	h5 {
+		font-size: 16px;
+	}
+	h6 {
+		font-size: 14px;
+	}
+}

themes/themes.json

@@ -35,6 +35,13 @@
       "baseTheme": "Blank",
       "baseSnippets": "5ePHB",
       "path": "Journal"
+    },
+    "UnearthedArcana": {
+      "name": "UnearthedArcana",
+      "renderer": "V3",
+      "baseTheme": false,
+      "baseSnippets": false,
+      "path": "UnearthedArcana"
     }
   }
 }