Hide conflicting lint rules

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,13 +90,6 @@ 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. 
@@ -124,9 +117,3 @@ 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,9 +75,8 @@ it using the two commands:
 1. `npm install`
 1. `npm start`
 
-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.
+You should now be able to go to [http://localhost:8000](http://localhost:8000)
-
+in your browser and use The Homebrewery offline.
-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
@@ -146,4 +145,3 @@ 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,17 +7,15 @@ 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(ADMIN_TAB) || 'brew');
+		setCurrentTab(localStorage.getItem('hbAdminTab') || 'brew');
 	}, []);
 
 	useEffect(()=>{
-		localStorage.setItem(ADMIN_TAB, currentTab);
+		localStorage.setItem('hbAdminTab', currentTab);
 	}, [currentTab]);
 
 	return (

client/components/splitPane/splitPane.jsx

@@ -2,8 +2,7 @@ require('./splitPane.less');
 const React = require('react');
 const { useState, useEffect } = React;
 
-const PANE_WIDTH_KEY = 'HB_editor_splitWidth';
+const storageKey = 'naturalcrit-pane-split';
-const LIVE_SCROLL_KEY = 'HB_editor_liveScroll';
 
 const SplitPane = (props)=>{
 	const {
@@ -19,9 +18,9 @@ const SplitPane = (props)=>{
 	const [liveScroll, setLiveScroll] = useState(false);
 
 	useEffect(()=>{
-		const savedPos = window.localStorage.getItem(PANE_WIDTH_KEY);
+		const savedPos = window.localStorage.getItem(storageKey);
 		setDividerPos(savedPos ? limitPosition(savedPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)) : window.innerWidth / 2);
-		setLiveScroll(window.localStorage.getItem(LIVE_SCROLL_KEY) === 'true');
+		setLiveScroll(window.localStorage.getItem('liveScroll') === 'true');
 
 		window.addEventListener('resize', handleResize);
 		return ()=>window.removeEventListener('resize', handleResize);
@@ -30,13 +29,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(PANE_WIDTH_KEY), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)));
+	const handleResize = ()=>setDividerPos(limitPosition(window.localStorage.getItem(storageKey), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)));
 
 	const handleUp =(e)=>{
 		e.preventDefault();
 		if(isDragging) {
 			onDragFinish(dividerPos);
-			window.localStorage.setItem(PANE_WIDTH_KEY, dividerPos);
+			window.localStorage.setItem(storageKey, dividerPos);
 		}
 		setIsDragging(false);
 	};
@@ -53,7 +52,7 @@ const SplitPane = (props)=>{
 	};
 
 	const liveScrollToggle = ()=>{
-		window.localStorage.setItem(LIVE_SCROLL_KEY, String(!liveScroll));
+		window.localStorage.setItem('liveScroll', String(!liveScroll));
 		setLiveScroll(!liveScroll);
 	};
 

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -24,8 +24,6 @@ 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" />
@@ -124,7 +122,7 @@ const BrewRenderer = (props)=>{
 
 	//useEffect to store or gather toolbar state from storage
 	useEffect(()=>{
-		const toolbarState = JSON.parse(window.localStorage.getItem(TOOLBAR_STATE_KEY));
+		const toolbarState = JSON.parse(window.localStorage.getItem('hb_toolbarState'));
 		toolbarState &&	setDisplayOptions(toolbarState);
 	}, []);
 
@@ -286,7 +284,7 @@ const BrewRenderer = (props)=>{
 
 	const handleDisplayOptionsChange = (newDisplayOptions)=>{
 		setDisplayOptions(newDisplayOptions);
-		localStorage.setItem(TOOLBAR_STATE_KEY, JSON.stringify(newDisplayOptions));
+		localStorage.setItem('hb_toolbarState', JSON.stringify(newDisplayOptions));
 	};
 
 	const pagesStyle = {
@@ -295,6 +293,12 @@ 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]);
 
@@ -323,9 +327,10 @@ const BrewRenderer = (props)=>{
 				contentDidMount={frameDidMount}
 				onClick={()=>{emitClick();}}
 			>
-				<div className='brewRenderer'
+				<div className={`brewRenderer ${global.config.deployment && 'deployment'}`}
 					onKeyDown={handleControlKeys}
 					tabIndex={-1}
+					style={ styleObject }
 				>
 
 					{/* Apply CSS from Style tab and render pages from Markdown tab */}

client/homebrew/brewRenderer/brewRenderer.less

@@ -6,6 +6,7 @@
 	overflow-y    : scroll;
 	will-change   : transform;
 	&:has(.facing, .flow) { padding : 60px 30px; }
+	&.deployment { background-color : darkred; }
 	:where(.pages) {
 		&.facing {
 			display               : grid; 

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -9,8 +9,6 @@ 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);
@@ -23,7 +21,7 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 	}, [visiblePages]);
 
 	useEffect(()=>{
-		const Visibility = localStorage.getItem(TOOLBAR_VISIBILITY);
+		const Visibility = localStorage.getItem('hb_toolbarVisibility');
 		if (Visibility) setToolsVisible(Visibility === 'true');
 
 	}, []);
@@ -102,7 +100,7 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 			<div className='toggleButton'>
 				<button title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{
 					setToolsVisible(!toolsVisible);
-					localStorage.setItem(TOOLBAR_VISIBILITY, !toolsVisible);
+					localStorage.setItem('hb_toolbarVisibility', !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 = 'HB_editor_theme';
+const EDITOR_THEME_KEY = 'HOMEBREWERY-EDITOR-THEME';
 
 const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
 const SNIPPETBREAK_REGEX_V3 = /^\\snippet\ .*$/;
@@ -40,7 +40,10 @@ const Editor = createClass({
 				style : ''
 			},
 
-			onBrewChange : ()=>{},
+			onTextChange  : ()=>{},
+			onStyleChange : ()=>{},
+			onMetaChange  : ()=>{},
+			onSnipChange  : ()=>{},
 			reportError   : ()=>{},
 
 			onCursorPageChange : ()=>{},
@@ -435,7 +438,7 @@ const Editor = createClass({
 					language='gfm'
 					view={this.state.view}
 					value={this.props.brew.text}
-					onChange={this.props.onBrewChange('text')}
+					onChange={this.props.onTextChange}
 					editorTheme={this.state.editorTheme}
 					rerenderParent={this.rerenderParent}
 					style={{  height: `calc(100% - ${this.state.snippetbarHeight}px)` }} />
@@ -448,7 +451,7 @@ const Editor = createClass({
 					language='css'
 					view={this.state.view}
 					value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
-					onChange={this.props.onBrewChange('style')}
+					onChange={this.props.onStyleChange}
 					enableFolding={true}
 					editorTheme={this.state.editorTheme}
 					rerenderParent={this.rerenderParent}
@@ -464,7 +467,7 @@ const Editor = createClass({
 				<MetadataEditor
 					metadata={this.props.brew}
 					themeBundle={this.props.themeBundle}
-					onChange={this.props.onBrewChange('metadata')}
+					onChange={this.props.onMetaChange}
 					reportError={this.props.reportError}
 					userThemes={this.props.userThemes}/>
 			</>;
@@ -478,7 +481,7 @@ const Editor = createClass({
 					language='gfm'
 					view={this.state.view}
 					value={this.props.brew.snippets}
-					onChange={this.props.onBrewChange('snippets')}
+					onChange={this.props.onSnipChange}
 					enableFolding={true}
 					editorTheme={this.state.editorTheme}
 					rerenderParent={this.rerenderParent}

client/homebrew/homebrew.jsx

@@ -4,8 +4,6 @@ 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';
@@ -19,6 +17,7 @@ const WithRoute = ({ el: Element, ...rest })=>{
 	const params = useParams();
 	const [searchParams] = useSearchParams();
 	const queryParams = Object.fromEntries(searchParams?.entries() || []);
+
 	return <Element {...rest} {...params} query={queryParams} />;
 };
 
@@ -49,20 +48,9 @@ const Homebrew = (props)=>{
 	global.enable_themes = enable_themes;
 	global.config        = config;
 
-	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();
-
 	return (
 		<Router location={url}>
-			<div className={`homebrew${(config.deployment || config.local) ? ' deployment' : ''}`} style={backgroundObject()}>
+			<div className='homebrew'>
 				<Routes>
 					<Route path='/edit/:id' element={<WithRoute el={EditPage} brew={brew} userThemes={userThemes}/>} />
 					<Route path='/share/:id' element={<WithRoute el={SharePage} brew={brew} />} />

client/homebrew/homebrew.less

@@ -1,14 +1,12 @@
 @import '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/recent.navitem.jsx

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

client/homebrew/navbar/share.navitem.jsx

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

client/homebrew/pages/editPage/editPage.jsx

@@ -1,18 +1,15 @@
 /* eslint-disable max-lines */
 import './editPage.less';
 
-// Common imports
+import React, { useState, useEffect, useRef, useCallback } from 'react';
-import React, { useState, useEffect, useRef } from 'react';
 import request                                from '../../utils/request-middleware.js';
 import Markdown                               from 'naturalcrit/markdown.js';
-import _                                      from 'lodash';
 
-import { DEFAULT_BREW_LOAD }                  from '../../../../server/brewDefaults.js';
+import _                                 from 'lodash';;
-import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js';
+import { makePatches, stringifyPatches } from '@sanity/diff-match-patch';
-
+import { md5 }                           from 'hash-wasm';
-import SplitPane    from 'client/components/splitPane/splitPane.jsx';
+import { gzipSync, strToU8 }             from 'fflate';
-import Editor       from '../../editor/editor.jsx';
+import { Meta }                          from 'vitreum/headtags';
-import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 
 import Nav                       from 'naturalcrit/nav/nav.jsx';
 import Navbar                    from '../../navbar/navbar.jsx';
@@ -24,31 +21,23 @@ import VaultNavItem              from '../../navbar/vault.navitem.jsx';
 import PrintNavItem              from '../../navbar/print.navitem.jsx';
 import { both as RecentNavItem } from '../../navbar/recent.navitem.jsx';
 
-// Page specific imports
+import SplitPane    from 'client/components/splitPane/splitPane.jsx';
-import { Meta }                          from 'vitreum/headtags';
+import Editor       from '../../editor/editor.jsx';
-import { md5 }                           from 'hash-wasm';
+import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
-import { gzipSync, strToU8 }             from 'fflate';
-import { makePatches, stringifyPatches } from '@sanity/diff-match-patch';
 
-import ShareNavItem              from '../../navbar/share.navitem.jsx';
 import LockNotification from './lockNotification/lockNotification.jsx';
+
+import { DEFAULT_BREW_LOAD }                  from '../../../../server/brewDefaults.js';
+import { printCurrentBrew, fetchThemeBundle } from '../../../../shared/helpers.js';
+
 import { updateHistory, versionHistoryGarbageCollection } from '../../utils/versionHistory.js';
+
 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 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';
-
-const useLocalStorage = false;
-const neverSaved			= false;
-
 const EditPage = (props)=>{
 	props = {
 		brew : DEFAULT_BREW_LOAD,
@@ -57,7 +46,6 @@ const EditPage = (props)=>{
 
 	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));
@@ -69,81 +57,95 @@ const EditPage = (props)=>{
 	const [alertTrashedGoogleBrew    , setAlertTrashedGoogleBrew    ] = useState(props.brew.trashed);
 	const [alertLoginToTransfer      , setAlertLoginToTransfer      ] = useState(false);
 	const [confirmGoogleTransfer     , setConfirmGoogleTransfer     ] = useState(false);
+	const [url                       , setUrl                       ] = useState('');
 	const [autoSaveEnabled           , setAutoSaveEnabled           ] = useState(true);
-	const [warnUnsavedChanges        , setWarnUnsavedChanges        ] = useState(true);
+	const [autoSaveWarning           , setAutoSaveWarning           ] = useState(true);
+	const [unsavedTime               , setUnsavedTime               ] = useState(new Date());
 
 	const editorRef    = useRef(null);
-	const lastSavedBrew      = useRef(_.cloneDeep(props.brew));
+	const savedBrew    = useRef(_.cloneDeep(props.brew));
-	const saveTimeout        = useRef(null);
+	const warningTimer = useRef(null);
-	const warnUnsavedTimeout = useRef(null);
+	const debounceSave = useCallback(_.debounce((brew, saveToGoogle)=>save(brew, saveToGoogle), SAVE_TIMEOUT), []);
-	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);
+		setUrl(window.location.href);
+
+		const autoSavePref = JSON.parse(localStorage.getItem('AUTOSAVE_ON') ?? true);
 		setAutoSaveEnabled(autoSavePref);
-		setWarnUnsavedChanges(!autoSavePref);
+		setAutoSaveWarning(!autoSavePref);
 		setHTMLErrors(Markdown.validate(currentBrew.text));
 		fetchThemeBundle(setError, setThemeBundle, currentBrew.renderer, currentBrew.theme);
 
+		document.addEventListener('keydown', handleControlKeys);
+		window.onbeforeunload = ()=>{
+			if(isSaving || unsavedChanges)
+				return 'You have unsaved changes!';
+		};
+
+		return ()=>{
+			document.removeEventListener('keydown', handleControlKeys);
+			window.onbeforeunload = null;
+		};
+	}, []);
+
+	useEffect(()=>{
+		const hasChange = !_.isEqual(currentBrew, savedBrew.current);
+		setUnsavedChanges(hasChange);
+
+		if(hasChange && autoSaveEnabled) trySave();
+	}, [currentBrew]);
+
 	const handleControlKeys = (e)=>{
 		if(!(e.ctrlKey || e.metaKey)) return;
-			if(e.keyCode === 83) trySaveRef.current(true);
+		const S_KEY = 83;
-			if(e.keyCode === 80) printCurrentBrew();
+		const P_KEY = 80;
-			if([83, 80].includes(e.keyCode)) {
+		if(e.keyCode === S_KEY) trySave(true);
+		if(e.keyCode === P_KEY) printCurrentBrew();
+		if(e.keyCode === S_KEY || e.keyCode === P_KEY) {
 			e.stopPropagation();
 			e.preventDefault();
 		}
 	};
 
-		document.addEventListener('keydown', handleControlKeys);
-		window.onbeforeunload = ()=>{
-			if(unsavedChangesRef.current)
-				return 'You have unsaved changes!';
-		};
-		return ()=>{
-			document.removeEventListener('keydown', handleControlKeys);
-			window.onBeforeUnload = null;
-		};
-	}, []);
-
-	useEffect(()=>{
-		trySaveRef.current = trySave;
-		unsavedChangesRef.current = unsavedChanges;
-	});
-
-	useEffect(()=>{
-		const hasChange = !_.isEqual(currentBrew, lastSavedBrew.current);
-		setUnsavedChanges(hasChange);
-
-		if(autoSaveEnabled) trySave(false, hasChange);
-	}, [currentBrew]);
-
 	const handleSplitMove = ()=>{
 		editorRef.current?.update();
 	};
 
-	const handleBrewChange = (field) => (value, subfield) => {	//'text', 'style', 'snippets', 'metadata'
+	const handleEditorViewPageChange = (pageNumber)=>{
-		if (subfield == 'renderer' || subfield == 'theme')
+		setCurrentEditorViewPageNum(pageNumber);
-			fetchThemeBundle(setError, setThemeBundle, value.renderer, value.theme);
+	};
 
+	const handleEditorCursorPageChange = (pageNumber)=>{
+		setCurrentEditorCursorPageNum(pageNumber);
+	};
+
+	const handleBrewRendererPageChange = (pageNumber)=>{
+		setCurrentBrewRendererPageNum(pageNumber);
+	};
+
+	const handleTextChange = (text)=>{
 		//If there are HTML errors, run the validator on every change to give quick feedback
-		if(HTMLErrors.length && (field == 'text' || field == 'snippets'))
+		if(HTMLErrors.length)
-			setHTMLErrors(Markdown.validate(value));
+			setHTMLErrors(Markdown.validate(text));
+		setCurrentBrew((prevBrew)=>({ ...prevBrew, text }));
+	};
 
-		if(field == 'metadata') setCurrentBrew(prev => ({ ...prev, ...value }));
+	const handleStyleChange = (style)=>{
-		else                    setCurrentBrew(prev => ({ ...prev, [field]: value }));
+		setCurrentBrew((prevBrew)=>({ ...prevBrew, style }));
+	};
 
-		if(useLocalStorage) {
+	const handleSnipChange = (snippet)=>{
-			if(field == 'text')     localStorage.setItem(BREWKEY, value);
+		//If there are HTML errors, run the validator on every change to give quick feedback
-			if(field == 'style')    localStorage.setItem(STYLEKEY, value);
+		if(HTMLErrors.length)
-			if(field == 'snippets') localStorage.setItem(SNIPKEY, value);
+			setHTMLErrors(Markdown.validate(snippet));
-			if(field == 'metadata') localStorage.setItem(METAKEY, JSON.stringify({
+		setCurrentBrew((prevBrew)=>({ ...prevBrew, snippets: snippet }));
-				renderer : value.renderer,
+	};
-				theme    : value.theme,
+
-				lang     : value.lang
+	const handleMetaChange = (metadata, field = undefined)=>{
-			}));
+		if(field === 'theme' || field === 'renderer')
-		}
+			fetchThemeBundle(setError, setThemeBundle, metadata.renderer, metadata.theme);
+
+		setCurrentBrew((prev)=>({ ...prev, ...metadata }));
 	};
 
 	const updateBrew = (newData)=>setCurrentBrew((prevBrew)=>({
@@ -153,10 +155,22 @@ const EditPage = (props)=>{
 		snippets : newData.snippets
 	}));
 
-	const resetWarnUnsavedTimer = ()=>{
+	const trySave = (immediate = false)=>{
-		setTimeout(()=>setWarnUnsavedChanges(false), UNSAVED_WARNING_POPUP_TIMEOUT); // Hide the warning after 4 seconds
+		//debounceSave = _.debounce(save, SAVE_TIMEOUT);
-		clearTimeout(warnUnsavedTimeout.current);
+		if(isSaving) return;
-		warnUnsavedTimeout.current = setTimeout(()=>setWarnUnsavedChanges(true), UNSAVED_WARNING_TIMEOUT); // 15 minutes between unsaved work warnings
+
+		const hasChange = !_.isEqual(currentBrew, savedBrew.current);
+
+		if(immediate) {
+			debounceSave(currentBrew, saveGoogle);
+			debounceSave.flush?.();
+			return;
+		}
+
+		if(hasChange)
+			debounceSave(currentBrew, saveGoogle);
+		else
+			debounceSave.cancel?.();
 	};
 
 	const handleGoogleClick = ()=>{
@@ -182,26 +196,11 @@ const EditPage = (props)=>{
 		trySave(true);
 	};
 
-	const trySave = (immediate = false, hasChanges = true)=>{
+	const save = async (brew, saveToGoogle)=>{
-		clearTimeout(saveTimeout.current);
+		debounceSave?.cancel?.();
-		if(isSaving) return;
-		if(!hasChanges && !immediate) return;
-		const newTimeout = immediate ? 0 : SAVE_TIMEOUT;
 
-		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);
@@ -212,10 +211,9 @@ const EditPage = (props)=>{
 			...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')))),
+			patches   : stringifyPatches(makePatches(encodeURI(savedBrew.current.text.normalize('NFC')), encodeURI(brew.text.normalize('NFC')))),
-			hash      : await md5(lastSavedBrew.current.text),
+			hash      : await md5(savedBrew.current.text),
-			textBin   : undefined,
+			textBin   : undefined
-			version   : lastSavedBrew.current.version
 		};
 
 		const compressedBrew = gzipSync(strToU8(JSON.stringify(brewToSave)));
@@ -233,24 +231,22 @@ const EditPage = (props)=>{
 			});
 		if(!res) return;
 
-		const updatedFields = {
+		const { googleId, editId, shareId, version } = res.body;
-			googleId : res.body.googleId ?? null,
-			editId   : res.body.editId,
-			shareId  : res.body.shareId,
-			version  : res.body.version
-		};
 
-		lastSavedBrew.current = {
+		savedBrew.current = {
 			...brew,
-			...updatedFields
+			googleId : googleId ?? null,
+			editId,
+			shareId,
+			version
 		};
 
-		setCurrentBrew((prevBrew)=>({
+		setCurrentBrew(savedBrew.current);
-			...prevBrew,
-			...updatedFields
-		}));
 
-		history.replaceState(null, null, `/edit/${res.body.editId}`);
+		setIsSaving(false);
+		setUnsavedTime(new Date());
+
+		history.replaceState(null, null, `/edit/${editId}`);
 	};
 
 	const renderGoogleDriveIcon = ()=>(
@@ -271,7 +267,7 @@ const EditPage = (props)=>{
 			{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}`}>
+					<a target='_blank' rel='noopener noreferrer' href={`https://www.naturalcrit.com/login?redirect=${url}`}>
 						<div className='confirm'> Sign In </div>
 					</a>
 					<div className='deny'>      Not Now </div>
@@ -294,9 +290,9 @@ const EditPage = (props)=>{
 			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) {
+		if(unsavedChanges && autoSaveWarning) {
-			resetWarnUnsavedTimer();
+			resetAutoSaveWarning();
-			const elapsedTime = Math.round((new Date() - lastSavedTime) / 1000 / 60);
+			const elapsedTime = Math.round((new Date() - unsavedTime) / 1000 / 60);
 			const text = elapsedTime === 0
 				? 'Autosave is OFF.'
 				: `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`;
@@ -304,31 +300,31 @@ const EditPage = (props)=>{
 			return <Nav.item className='save error' icon='fas fa-exclamation-circle'>
 							Reminder...
 							<div className='errorContainer'>{text}</div>
-			</Nav.item>;
+						</Nav.item>
 		}
 
 		// #3 - Unsaved changes exist, click to save, show SAVE NOW
 		if(unsavedChanges)
-			return <Nav.item className='save' onClick={()=>trySave(true)} color='blue' icon='fas fa-save'>save now</Nav.item>;
+			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(autoSaveEnabled)
-			return <Nav.item className='save saved'>auto-saved</Nav.item>;
+			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>;
 	};
 
 	const toggleAutoSave = ()=>{
-		clearTimeout(warnUnsavedTimeout.current);
+		if(warningTimer.current) clearTimeout(warningTimer.current);
-		clearTimeout(saveTimeout.current);
+		localStorage.setItem('AUTOSAVE_ON', JSON.stringify(!autoSaveEnabled));
-		localStorage.setItem(AUTOSAVE_KEY, JSON.stringify(!autoSaveEnabled));
+		setAutoSaveWarning(autoSaveWarning);
 		setAutoSaveEnabled(!autoSaveEnabled);
-		setWarnUnsavedChanges(autoSaveEnabled);
+	};
+
+	const resetAutoSaveWarning = ()=>{
+		setTimeout(()=>setAutoSaveWarning(false), UNSAVED_WARNING_POPUP_TIMEOUT); // Hide the warning after 4 seconds
+		warningTimer.current = setTimeout(()=>setAutoSaveWarning(true), UNSAVED_WARNING_TIMEOUT); // 15 minutes between unsaved changes warnings
 	};
 
 	const renderAutoSaveButton = ()=>(
@@ -337,12 +333,31 @@ const EditPage = (props)=>{
 		</Nav.item>
 	);
 
+	const processShareId = ()=>(
+		currentBrew.googleId && !currentBrew.stubbed
+			? currentBrew.googleId + currentBrew.shareId
+			: currentBrew.shareId
+	);
+
+	const getRedditLink = ()=>{
+		const shareLink = processShareId();
+		const systems = currentBrew.systems.length > 0 ? ` [${currentBrew.systems.join(' - ')}]` : '';
+		const title = `${currentBrew.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)}`;
+	};
+
 	const clearError = ()=>{
 		setError(null);
 		setIsSaving(false);
 	};
 
 	const renderNavbar = ()=>{
+		const shareLink = processShareId();
+
 		return <Navbar>
 			<Nav.section>
 				<Nav.item className='brewTitle'>{currentBrew.title}</Nav.item>
@@ -357,10 +372,23 @@ const EditPage = (props)=>{
 							{renderAutoSaveButton()}
 						</Nav.dropdown>}
 				<NewBrewItem/>
-				<PrintNavItem />
 				<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={getRedditLink()} newTab={true} rel='noopener noreferrer'>
+						post to reddit
+					</Nav.item>
+				</Nav.dropdown>
+				<PrintNavItem />
 				<VaultNavItem />
-				<ShareNavItem brew={currentBrew} />
 				<RecentNavItem brew={currentBrew} storageKey='edit' />
 				<AccountNavItem/>
 			</Nav.section>
@@ -380,14 +408,17 @@ const EditPage = (props)=>{
 					<Editor
 						ref={editorRef}
 						brew={currentBrew}
-						onBrewChange={handleBrewChange}
+						onTextChange={handleTextChange}
+						onStyleChange={handleStyleChange}
+						onSnipChange={handleSnipChange}
+						onMetaChange={handleMetaChange}
 						reportError={setError}
 						renderer={currentBrew.renderer}
 						userThemes={props.userThemes}
 						themeBundle={themeBundle}
 						updateBrew={updateBrew}
-						onCursorPageChange={setCurrentEditorCursorPageNum}
+						onCursorPageChange={handleEditorCursorPageChange}
-						onViewPageChange={setCurrentEditorViewPageNum}
+						onViewPageChange={handleEditorViewPageChange}
 						currentEditorViewPageNum={currentEditorViewPageNum}
 						currentEditorCursorPageNum={currentEditorCursorPageNum}
 						currentBrewRendererPageNum={currentBrewRendererPageNum}
@@ -400,7 +431,7 @@ const EditPage = (props)=>{
 						themeBundle={themeBundle}
 						errors={HTMLErrors}
 						lang={currentBrew.lang}
-						onPageChange={setCurrentBrewRendererPageNum}
+						onPageChange={handleBrewRendererPageChange}
 						currentEditorViewPageNum={currentEditorViewPageNum}
 						currentEditorCursorPageNum={currentEditorCursorPageNum}
 						currentBrewRendererPageNum={currentBrewRendererPageNum}

client/homebrew/pages/homePage/homePage.jsx

@@ -1,39 +1,25 @@
-/* eslint-disable max-lines */
 import './homePage.less';
 
-// Common imports
+import React                           from 'react';
-import React, { useState, useEffect, useRef } 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 _                                      from 'lodash';
 
-import { DEFAULT_BREW }                       from '../../../../server/brewDefaults.js';
+import Nav                             from 'naturalcrit/nav/nav.jsx';
-import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js';
+import Navbar                          from '../../navbar/navbar.jsx';
+import NewBrewItem                     from '../../navbar/newbrew.navitem.jsx';
+import HelpNavItem                     from '../../navbar/help.navitem.jsx';
+import VaultNavItem                    from '../../navbar/vault.navitem.jsx';
+import { both as RecentNavItem }       from '../../navbar/recent.navitem.jsx';
+import AccountNavItem                  from '../../navbar/account.navitem.jsx';
+import ErrorNavItem                    from '../../navbar/error-navitem.jsx';
+import { fetchThemeBundle }            from '../../../../shared/helpers.js';
 
 import SplitPane                       from 'client/components/splitPane/splitPane.jsx';
 import Editor                          from '../../editor/editor.jsx';
 import BrewRenderer                    from '../../brewRenderer/brewRenderer.jsx';
 
-import Nav                       from 'naturalcrit/nav/nav.jsx';
+import { DEFAULT_BREW }                from '../../../../server/brewDefaults.js';
-import Navbar                    from '../../navbar/navbar.jsx';
-import NewBrewItem               from '../../navbar/newbrew.navitem.jsx';
-import AccountNavItem            from '../../navbar/account.navitem.jsx';
-import ErrorNavItem              from '../../navbar/error-navitem.jsx';
-import HelpNavItem               from '../../navbar/help.navitem.jsx';
-import VaultNavItem              from '../../navbar/vault.navitem.jsx';
-import PrintNavItem              from '../../navbar/print.navitem.jsx';
-import { both as RecentNavItem } from '../../navbar/recent.navitem.jsx';
-
-// Page specific imports
-import { Meta }                               from 'vitreum/headtags';
-
-const BREWKEY  = 'homebrewery-new';
-const STYLEKEY = 'homebrewery-new-style';
-const SNIPKEY  = 'homebrewery-new-snippets';
-const METAKEY  = 'homebrewery-new-meta';
-
-const useLocalStorage = false;
-const neverSaved      = true;
 
 const HomePage =(props)=>{
 	props = {
@@ -42,43 +28,24 @@ const HomePage =(props)=>{
     ...props
   };
 
-	const [currentBrew               , setCurrentBrew]                = useState(props.brew);
+	const [brew                      , setBrew]                       = 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);
 	const [themeBundle               , setThemeBundle]                = useState({});
-	const [unsavedChanges            , setUnsavedChanges]             = useState(false);
 	const [isSaving                  , setIsSaving]                   = useState(false);
-	const [autoSaveEnabled           , setAutoSaveEnable]             = useState(false);
 
 	const editorRef = useRef(null);
-	const lastSavedBrew = useRef(_.cloneDeep(props.brew));
 
 	useEffect(()=>{
-		fetchThemeBundle(setError, setThemeBundle, currentBrew.renderer, currentBrew.theme);
+		fetchThemeBundle(setError, setThemeBundle, brew.renderer, brew.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);
-
-		return () => {
-			document.removeEventListener('keydown', handleControlKeys);
-		};
 	}, []);
 
 	const save = ()=>{
 		request.post('/api')
-			.send(currentBrew)
+			.send(brew)
 			.end((err, res)=>{
 				if(err) {
 					setError(err);
@@ -89,73 +56,24 @@ const HomePage =(props)=>{
 			});
 	};
 
-	useEffect(()=>{
-		const hasChange = !_.isEqual(currentBrew, lastSavedBrew.current);
-		setUnsavedChanges(hasChange);
-
-		if(autoSaveEnabled) trySave(false, hasChange);
-	}, [currentBrew]);
-
 	const handleSplitMove = ()=>{
 		editorRef.current.update();
 	};
 
-	const handleBrewChange = (field) => (value, subfield) => {	//'text', 'style', 'snippets', 'metadata'
+	const handleEditorViewPageChange = (pageNumber)=>{
-		if (subfield == 'renderer' || subfield == 'theme')
+		setCurrentEditorViewPageNum(pageNumber);
-			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 = ()=>{
+	const handleEditorCursorPageChange = (pageNumber)=>{
-		// #1 - Currently saving, show SAVING
+		setCurrentEditorCursorPageNum(pageNumber);
-		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
+	const handleBrewRendererPageChange = (pageNumber)=>{
-		// if(unsavedChanges && warnUnsavedChanges) {
+		setCurrentBrewRendererPageNum(pageNumber);
-		// 	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'>
+	const handleTextChange = (text)=>{
-		// 					Reminder...
+		setBrew((prevBrew) => ({ ...prevBrew, text }));
-		// 		<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 = ()=>{
@@ -166,11 +84,11 @@ const HomePage =(props)=>{
 	const renderNavbar = ()=>{
 		return <Navbar ver={props.ver}>
 			<Nav.section>
-				{error
+				{error ?
-					? <ErrorNavItem error={error} clearError={clearError} />
+					<ErrorNavItem error={error} clearError={clearError}></ErrorNavItem> :
-					: renderSaveButton()}
+					null
+				}
 				<NewBrewItem />
-				<PrintNavItem />
 				<HelpNavItem />
 				<VaultNavItem />
 				<RecentNavItem />
@@ -187,22 +105,22 @@ const HomePage =(props)=>{
 				<SplitPane onDragFinish={handleSplitMove}>
 					<Editor
 						ref={editorRef}
-						brew={currentBrew}
+						brew={brew}
-						onBrewChange={handleBrewChange}
+						onTextChange={handleTextChange}
-						renderer={currentBrew.renderer}
+						renderer={brew.renderer}
 						showEditButtons={false}
 						themeBundle={themeBundle}
-						onCursorPageChange={setCurrentEditorCursorPageNum}
+						onCursorPageChange={handleEditorCursorPageChange}
-						onViewPageChange={setCurrentEditorViewPageNum}
+						onViewPageChange={handleEditorViewPageChange}
 						currentEditorViewPageNum={currentEditorViewPageNum}
 						currentEditorCursorPageNum={currentEditorCursorPageNum}
 						currentBrewRendererPageNum={currentBrewRendererPageNum}
 					/>
 					<BrewRenderer
-						text={currentBrew.text}
+						text={brew.text}
-						style={currentBrew.style}
+						style={brew.style}
-						renderer={currentBrew.renderer}
+						renderer={brew.renderer}
-						onPageChange={setCurrentBrewRendererPageNum}
+						onPageChange={handleBrewRendererPageChange}
 						currentEditorViewPageNum={currentEditorViewPageNum}
 						currentEditorCursorPageNum={currentEditorCursorPageNum}
 						currentBrewRendererPageNum={currentBrewRendererPageNum}
@@ -210,7 +128,7 @@ const HomePage =(props)=>{
 					/>
 				</SplitPane>
 			</div>
-			<div className={`floatingSaveButton${unsavedChanges ? ' show' : ''}`} onClick={save}>
+			<div className={`floatingSaveButton${welcomeText !== brew.text ? ' show' : ''}`} onClick={save}>
 				Save current <i className='fas fa-save' />
 			</div>
 

client/homebrew/pages/homePage/homePage.less

@@ -34,13 +34,7 @@
 	}
 
 	.navItem.save {
-		.fadeInRight();
-		.transition(opacity);
 		background-color : @orange;
 		&:hover { background-color : @green; }
-		&.neverSaved {
-			.fadeOutRight();
-			opacity: 0;
-		}
 	}
 }

client/homebrew/pages/newPage/newPage.jsx

@@ -1,40 +1,29 @@
-/* eslint-disable max-lines */
+/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
 import './newPage.less';
 
-// Common imports
 import React, { useState, useEffect, useRef } from 'react';
 import request                                from '../../utils/request-middleware.js';
 import Markdown                               from 'naturalcrit/markdown.js';
-import _                                      from 'lodash';
 
-import { DEFAULT_BREW }                       from '../../../../server/brewDefaults.js';
+import Nav                       from 'naturalcrit/nav/nav.jsx';
-import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js';
+import Navbar                    from '../../navbar/navbar.jsx';
+import AccountNavItem            from '../../navbar/account.navitem.jsx';
+import ErrorNavItem              from '../../navbar/error-navitem.jsx';
+import HelpNavItem               from '../../navbar/help.navitem.jsx';
+import PrintNavItem              from '../../navbar/print.navitem.jsx';
+import { both as RecentNavItem } from '../../navbar/recent.navitem.jsx';
 
 import SplitPane    from 'client/components/splitPane/splitPane.jsx';
 import Editor       from '../../editor/editor.jsx';
 import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 
-import Nav                       from 'naturalcrit/nav/nav.jsx';
+import { DEFAULT_BREW }                       from '../../../../server/brewDefaults.js';
-import Navbar                    from '../../navbar/navbar.jsx';
+import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js';
-import NewBrewItem               from '../../navbar/newbrew.navitem.jsx';
-import AccountNavItem            from '../../navbar/account.navitem.jsx';
-import ErrorNavItem              from '../../navbar/error-navitem.jsx';
-import HelpNavItem               from '../../navbar/help.navitem.jsx';
-import VaultNavItem              from '../../navbar/vault.navitem.jsx';
-import PrintNavItem              from '../../navbar/print.navitem.jsx';
-import { both as RecentNavItem } from '../../navbar/recent.navitem.jsx';
 
-// Page specific imports
+const BREWKEY  = 'homebrewery-new';
-import { Meta }                  from 'vitreum/headtags';
+const STYLEKEY = 'homebrewery-new-style';
-
+const METAKEY  = 'homebrewery-new-meta';
-const BREWKEY  = 'HB_newPage_content';
+const SAVEKEY  = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${global.account?.username || ''}`;
-const STYLEKEY = 'HB_newPage_style';
-const METAKEY  = 'HB_newPage_metadata';
-const SNIPKEY  = 'HB_newPage_snippets';
-const SAVEKEYPREFIX  = 'HB_editor_defaultSave_';
-
-const useLocalStorage = true;
-const neverSaved      = true;
 
 const NewPage = (props) => {
 	props = {
@@ -51,28 +40,14 @@ const NewPage = (props) => {
 	const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1);
 	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
 	const [themeBundle               , setThemeBundle               ] = useState({});
-	const [unsavedChanges            , setUnsavedChanges            ] = useState(false);
-	const [autoSaveEnabled           , setAutoSaveEnabled           ] = useState(false);
 
 	const editorRef = useRef(null);
-	const lastSavedBrew = useRef(_.cloneDeep(props.brew));
 
 	useEffect(() => {
+		document.addEventListener('keydown', handleControlKeys);
 		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();
-			}
-		};
-
-		document.addEventListener('keydown', handleControlKeys);
-
 		return () => {
 			document.removeEventListener('keydown', handleControlKeys);
 		};
@@ -92,11 +67,9 @@ const NewPage = (props) => {
 			brew.lang     = metaStorage?.lang     ?? brew.lang;
 		}
 
-		const SAVEKEY = `${SAVEKEYPREFIX}${global.account?.username}`;
 		const saveStorage = localStorage.getItem(SAVEKEY) || 'HOMEBREWERY';
 
 		setCurrentBrew(brew);
-		lastSavedBrew.current = brew;
 		setSaveGoogle(saveStorage == 'GOOGLE-DRIVE' && saveGoogle);
 
 		localStorage.setItem(BREWKEY, brew.text);
@@ -107,38 +80,68 @@ const NewPage = (props) => {
 			window.history.replaceState({}, window.location.title, '/new/');
 	};
 
-	useEffect(()=>{
+	const handleControlKeys = (e) => {
-		const hasChange = !_.isEqual(currentBrew, lastSavedBrew.current);
+		if (!(e.ctrlKey || e.metaKey)) return;
-		setUnsavedChanges(hasChange);
+		const S_KEY = 83;
-
+		const P_KEY = 80;
-		if(autoSaveEnabled) trySave(false, hasChange);
+		if (e.keyCode === S_KEY) save();
-	}, [currentBrew]);
+		if (e.keyCode === P_KEY) printCurrentBrew();
+		if (e.keyCode === S_KEY || e.keyCode === P_KEY) {
+			e.preventDefault();
+			e.stopPropagation();
+		}
+	};
 
 	const handleSplitMove = ()=>{
 		editorRef.current.update();
 	};
 
-	const handleBrewChange = (field) => (value, subfield) => {	//'text', 'style', 'snippets', 'metadata'
+	const handleEditorViewPageChange = (pageNumber)=>{
-		if (subfield == 'renderer' || subfield == 'theme')
+		setCurrentEditorViewPageNum(pageNumber);
-			fetchThemeBundle(setError, setThemeBundle, value.renderer, value.theme);
+	};
 	
+	const handleEditorCursorPageChange = (pageNumber)=>{
+		setCurrentEditorCursorPageNum(pageNumber);
+	};
+	
+	const handleBrewRendererPageChange = (pageNumber)=>{
+		setCurrentBrewRendererPageNum(pageNumber);
+	};
+
+	const handleTextChange = (text)=>{
 		//If there are HTML errors, run the validator on every change to give quick feedback
-		if(HTMLErrors.length && (field == 'text' || field == 'snippets'))
+		if(HTMLErrors.length)
-			setHTMLErrors(Markdown.validate(value));
+			HTMLErrors = Markdown.validate(text);
 
-		if(field == 'metadata') setCurrentBrew(prev => ({ ...prev, ...value }));
+		setHTMLErrors(HTMLErrors);
-		else                    setCurrentBrew(prev => ({ ...prev, [field]: value }));
+		setCurrentBrew((prevBrew) => ({ ...prevBrew, text }));
+		localStorage.setItem(BREWKEY, text);
+	};
 
-		if(useLocalStorage) {
+	const handleStyleChange = (style) => {
-			if(field == 'text')     localStorage.setItem(BREWKEY, value);
+		setCurrentBrew(prevBrew => ({ ...prevBrew, style }));
-			if(field == 'style')    localStorage.setItem(STYLEKEY, value);
+		localStorage.setItem(STYLEKEY, style);
-			if(field == 'snippets') localStorage.setItem(SNIPKEY, value);
+	};
-			if(field == 'metadata') localStorage.setItem(METAKEY, JSON.stringify({
+
-				renderer : value.renderer,
+	const handleSnipChange = (snippet)=>{
-				theme    : value.theme,
+		//If there are HTML errors, run the validator on every change to give quick feedback
-				lang     : value.lang
+		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
 		}));
-		}
 	};
 
 	const save = async () => {
@@ -170,38 +173,15 @@ const NewPage = (props) => {
 	};
 
 	const renderSaveButton = ()=>{
-		// #1 - Currently saving, show SAVING
+		if(isSaving){
-		if(isSaving)
+			return <Nav.item icon='fas fa-spinner fa-spin' className='save'>
-			return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>;
+				save...
-
+			</Nav.item>;
-		// #2 - Unsaved changes exist, autosave is OFF and warning timer has expired, show AUTOSAVE WARNING
+		} else {
-		// if(unsavedChanges && warnUnsavedChanges) {
+			return <Nav.item icon='fas fa-save' className='save' onClick={save}>
-		// 	resetWarnUnsavedTimer();
+				save
-		// 	const elapsedTime = Math.round((new Date() - lastSavedTime) / 1000 / 60);
+			</Nav.item>;
-		// 	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 = ()=>{
@@ -219,10 +199,8 @@ const NewPage = (props) => {
 				{error
 					? <ErrorNavItem error={error} clearError={clearError} />
 					: renderSaveButton()}
-				<NewBrewItem />
 				<PrintNavItem />
 				<HelpNavItem />
-				<VaultNavItem />
 				<RecentNavItem />
 				<AccountNavItem />
 			</Nav.section>
@@ -237,12 +215,15 @@ const NewPage = (props) => {
 					<Editor
 						ref={editorRef}
 						brew={currentBrew}
-						onBrewChange={handleBrewChange}
+						onTextChange={handleTextChange}
+						onStyleChange={handleStyleChange}
+						onMetaChange={handleMetaChange}
+						onSnipChange={handleSnipChange}
 						renderer={currentBrew.renderer}
 						userThemes={props.userThemes}
 						themeBundle={themeBundle}
-						onCursorPageChange={setCurrentEditorCursorPageNum}
+						onCursorPageChange={handleEditorCursorPageChange}
-						onViewPageChange={setCurrentEditorViewPageNum}
+						onViewPageChange={handleEditorViewPageChange}
 						currentEditorViewPageNum={currentEditorViewPageNum}
 						currentEditorCursorPageNum={currentEditorCursorPageNum}
 						currentBrewRendererPageNum={currentBrewRendererPageNum}
@@ -255,7 +236,7 @@ const NewPage = (props) => {
 						themeBundle={themeBundle}
 						errors={HTMLErrors}
 						lang={currentBrew.lang}
-						onPageChange={setCurrentBrewRendererPageNum}
+						onPageChange={handleBrewRendererPageChange}
 						currentEditorViewPageNum={currentEditorViewPageNum}
 						currentEditorCursorPageNum={currentEditorCursorPageNum}
 						currentBrewRendererPageNum={currentBrewRendererPageNum}

client/homebrew/pages/newPage/newPage.less

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

client/homebrew/pages/vaultPage/vaultPage.less

@@ -1,16 +1,14 @@
 .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;
@@ -173,6 +171,7 @@
 				max-height       : 100%;
 				padding          : 70px 50px;
 				overflow-y       : scroll;
+				background-color : #2C3E50;
 				container-type   : inline-size;
 
 				h3 { font-size : 25px; }

client/homebrew/utils/updateLocalStorage/localStorageKeyMap.js

@@ -1,35 +0,0 @@
-
-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

@@ -1,22 +0,0 @@
-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 };

config/default.json

@@ -1,5 +1,4 @@
 {
-	"development": true,
 	"host" : "homebrewery.local.naturalcrit.com:8000",
 	"naturalcrit_url" : "local.naturalcrit.com:8010",
 	"secret" : "secret",

eslint.config.mjs

@@ -1,13 +1,14 @@
 import react from "eslint-plugin-react";
 import jest from "eslint-plugin-jest";
 import globals from "globals";
+import localPlugin from "./eslint_plugins/index.js";
 
 export default [{
 		ignores: ["build/"]
 	},
 	{
 		files           : ['**/*.js', '**/*.jsx'],
-		plugins         : { react, jest },
+		plugins         : { react, jest, local: localPlugin },
 		languageOptions : {
 				ecmaVersion   : "latest",
 				sourceType    : "module",
@@ -46,9 +47,9 @@ export default [{
 				"semi"            : ["warn", "always"],
 
 				/** Whitespace **/
-				"array-bracket-spacing"         : ["warn", "never"],
+				//"array-bracket-spacing"         : ["warn", "never"],
 				"arrow-spacing"                 : ["warn", { before: false, after: false	}],
-				"comma-spacing"                 : ["warn", { before: false, after: true }],
+				//"comma-spacing"                 : ["warn", { before: false, after: true }],
 				"indent"                        : ["warn", "tab", { MemberExpression: "off" }],
 				"linebreak-style"               : "off",
 				"no-trailing-spaces"            : "warn",
@@ -65,7 +66,10 @@ export default [{
 				"key-spacing"                   : ["warn", {
 						multiLine  : { beforeColon: true, afterColon: true, align: "colon" },
 						singleLine : { beforeColon: false, afterColon: true }
-				}]
+				}],
+
+				"local/aligned-useState-pairs": "warn"
+
 		}
 	}
 ];

eslint_plugins/index.js

@@ -0,0 +1,7 @@
+import alignedUseStatePairs from './rules/aligned-useState-pairs.js';
+
+export default {
+  rules: {
+    'aligned-useState-pairs': alignedUseStatePairs
+  }
+};

eslint_plugins/rules/aligned-useState-pairs.js

@@ -0,0 +1,103 @@
+export default {
+	meta: {
+		type: "layout",
+		docs: {
+			description: "Enforce alignment of adjacent useState variable pairs",
+		},
+		fixable: "whitespace",
+		schema: [],
+	},
+	create(context) {
+		const sourceCode = context.getSourceCode();
+		const useStateDeclarations = [];
+
+		return {
+			VariableDeclaration(node) {
+				for (const decl of node.declarations) {
+					const init = decl.init;
+					if (
+						init &&
+						init.type === "CallExpression" &&
+						init.callee.name === "useState" &&
+						decl.id.type === "ArrayPattern"
+					) {
+						useStateDeclarations.push(decl);
+					}
+				}
+			},
+			"Program:exit"() {
+				if (useStateDeclarations.length < 2) return;
+
+				// Sort by line number
+				useStateDeclarations.sort(
+					(a, b) => a.loc.start.line - b.loc.start.line
+				);
+
+				// Group adjacent lines
+				const groups = [];
+				let currentGroup = [useStateDeclarations[0]];
+
+				for (let i = 1; i < useStateDeclarations.length; i++) {
+					const prev = useStateDeclarations[i - 1];
+					const curr = useStateDeclarations[i];
+
+					if (curr.loc.start.line === prev.loc.end.line + 1) {
+						currentGroup.push(curr);
+					} else {
+						if (currentGroup.length > 1) groups.push(currentGroup);
+						currentGroup = [curr];
+					}
+				}
+				if (currentGroup.length > 1) groups.push(currentGroup);
+
+				// Analyze each group
+				for (const group of groups) {
+					const positions = group.map((decl) => {
+						const text = sourceCode.getText(decl);
+						const commaIndex = text.indexOf(",");
+						const closingBracketIndex = text.lastIndexOf("]");
+						return {
+							node: decl,
+							comma: commaIndex,
+							closing: closingBracketIndex,
+						};
+					});
+
+					const maxComma = Math.max(...positions.map((p) => p.comma));
+					const maxClosing = Math.max(
+						...positions.map((p) => p.closing)
+					);
+
+					for (const pos of positions) {
+						if (
+							pos.comma !== maxComma ||
+							pos.closing !== maxClosing
+						) {
+							console.log(context);
+							context.report({
+								node: pos.node,
+								message: "useState pair is not aligned with others in its block.",
+								fix(fixer) {
+									const text = sourceCode.getText(pos.node);
+									const parts = text.match(/^\[\s*(.+?)\s*,\s*(.+?)\s*\]\s*=\s*useState\((.+)\)$/);
+									if (!parts) return null;
+
+									const [_, left, right, value] = parts;
+
+									const paddedLeft = left.padEnd(maxComma - 1);
+									const paddedRight = right.padEnd(maxClosing - maxComma - 2);
+									const aligned = `[${paddedLeft}, ${paddedRight}] = useState(${value})`;
+									return [
+										fixer.replaceText(pos.node, aligned),
+										fixer.insertTextBefore(pos.node.parent, ""),
+										fixer.insertTextAfter(pos.node.parent, "")
+									];
+								}
+							});
+						}
+					}
+				}
+			},
+		};
+	},
+};

server/db.js

@@ -27,10 +27,7 @@ const disconnect = async ()=>{
 };
 
 const connect = async (config)=>{
-	return await Mongoose.connect(getMongoDBURL(config), {
+	return await Mongoose.connect(getMongoDBURL(config), { retryWrites: false })
-		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, index: true },
+	googleId  : { type: String },
-	title     : { type: String, default: '', index: true },
+	title     : { type: String, default: '' },
 	text      : { type: String, default: '' },
 	textBin   : { type: Buffer },
-	pageCount : { type: Number, default: 1, index: true },
+	pageCount : { type: Number, default: 1 },
 
 	description    : { type: String, default: '' },
-	tags           : { type: [String], index: true },
+	tags           : [String],
 	systems        : [String],
-	lang           : { type: String, default: 'en', index: true },
+	lang           : { type: String, default: 'en' },
-	renderer       : { type: String, default: '', index: true },
+	renderer       : { type: String, default: '' },
-	authors        : { type: [String], index: true },
+	authors        : [String],
 	invitedAuthors : [String],
-	published      : { type: Boolean, default: false, index: true },
+	published      : { type: Boolean, default: false },
-	thumbnail      : { type: String, default: '', index: true },
+	thumbnail      : { type: String, default: '' },
 
-	createdAt  : { type: Date, default: Date.now, index: true },
+	createdAt  : { type: Date, default: Date.now },
-	updatedAt  : { type: Date, default: Date.now, index: true },
+	updatedAt  : { type: Date, default: Date.now },
-	lastViewed : { type: Date, default: Date.now, index: true },
+	lastViewed : { type: Date, default: Date.now },
 	views      : { type: Number, default: 0 },
-	version    : { type: Number, default: 1, index: true },
+	version    : { type: Number, default: 1 },
 
-	lock : { type: Object, index: true }
+	lock : { type: Object }
 }, { versionKey: false });
 
 HomebrewSchema.statics.increaseView = async function(query) {
@@ -43,8 +43,6 @@ 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';});
@@ -65,15 +63,6 @@ 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,6 +38,15 @@
 		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/Blank/style.less

@@ -611,17 +611,3 @@ h6,
 	}
 	.toc.wide li { break-inside : auto; }
 }
-
-
-/**********************************
-Firefox endruns
-**********************************/
-
-@supports (-moz-user-select: none) {  // This section will only apply to Firefox; it's the only browser that supports `-mos-xyz...`
-  .page {
-    blockquote, table {
-      page-break-inside: auto;
-      break-inside: auto; 
-    }
-  }
-}