update build folder end

change imports

changelog.md

@@ -83,12 +83,40 @@ pre {
 .page .exampleTable td,th {
 	border:1px dashed #00000030;
 }
+
+.page .df {
+  font-size: 2em;
+  vertical-align: middle;
+}
 ```
 
 ## changelog
 For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
 
-### Friday 11/14/2025 - v13.20.0
+### Friday 1/11/2026 - v3.20.1
+
+{{taskList
+##### calculuschild
+* [x] Add D100 "ball" dice icons `:d100:` :df_d100_05:
+
+##### G-Ambatte
+* [x] Fix transparent edge on back cover image
+
+Fixes issue [#4551](https://github.com/naturalcrit/homebrewery/issues/4551)
+
+* [x] Fix "Out of sync" error when document contains extended unicode characters
+
+Fixes issue [#4583](https://github.com/naturalcrit/homebrewery/issues/4583)
+
+##### 5e-Cleric
+* [x] Fix page count error on Vault
+
+* [x] Fix cover page footnote set to all-caps
+
+Fixes issue [#4559](https://github.com/naturalcrit/homebrewery/issues/4559)
+}}
+
+### Friday 11/14/2025 - v3.20.0
 
 {{taskList
 ##### calculuschild

client/admin/admin.jsx

@@ -1,7 +1,7 @@
 import './admin.less';
 import React, { useEffect, useState } from 'react';
-const BrewUtils = require('./brewUtils/brewUtils.jsx');
+import BrewUtils from './brewUtils/brewUtils.jsx';
-const NotificationUtils = require('./notificationUtils/notificationUtils.jsx');
+import NotificationUtils from './notificationUtils/notificationUtils.jsx';
 import AuthorUtils from './authorUtils/authorUtils.jsx';
 import LockTools  from './lockTools/lockTools.jsx';
 
@@ -49,4 +49,4 @@ const Admin = ()=>{
 	);
 };
 
-module.exports = Admin;
+export default Admin;

client/admin/admin.less

@@ -1,12 +1,10 @@
-@import 'naturalcrit/styles/reset.less';
+@import './shared/naturalcrit/styles/reset.less';
-@import 'naturalcrit/styles/elements.less';
+@import './shared/naturalcrit/styles/elements.less';
-@import 'naturalcrit/styles/animations.less';
+@import './shared/naturalcrit/styles/animations.less';
-@import 'naturalcrit/styles/colors.less';
+@import './shared/naturalcrit/styles/colors.less';
-@import 'naturalcrit/styles/tooltip.less';
+@import './shared/naturalcrit/styles/tooltip.less';
 @import './themes/fonts/iconFonts/fontAwesome.less';
 
-@import 'font-awesome/css/font-awesome.css';
-
 html,body, #reactContainer, .naturalCrit { min-height : 100%; }
 
 @sidebarWidth : 250px;

client/admin/authorUtils/authorLookup/authorLookup.jsx

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

client/admin/authorUtils/authorUtils.jsx

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

client/admin/brewUtils/brewCleanup/brewCleanup.jsx

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

client/admin/brewUtils/brewCompress/brewCompress.jsx

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

client/admin/brewUtils/brewLookup/brewLookup.jsx

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

client/admin/brewUtils/brewUtils.jsx

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

client/admin/brewUtils/brewUtils.less

@@ -1,3 +1,5 @@
+@import '../../../shared/naturalcrit/styles/colors.less';
+
 .brewUtil {
 	.result {
 		margin-top : 20px;

client/admin/brewUtils/stats/stats.jsx

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

client/admin/lockTools/lockTools.jsx

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

client/admin/notificationUtils/notificationAdd/notificationAdd.jsx

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

client/admin/notificationUtils/notificationLookup/notificationLookup.jsx

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

client/admin/notificationUtils/notificationUtils.jsx

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

client/components/codeEditor/autocompleteEmoji.js

@@ -1,7 +1,7 @@
-import diceFont      from 'themes/fonts/iconFonts/diceFont.js';
+import diceFont      from '../../../themes/fonts/iconFonts/diceFont.js';
-import elderberryInn from 'themes/fonts/iconFonts/elderberryInn.js';
+import elderberryInn from '../../../themes/fonts/iconFonts/elderberryInn.js';
-import fontAwesome   from 'themes/fonts/iconFonts/fontAwesome.js';
+import fontAwesome   from '../../../themes/fonts/iconFonts/fontAwesome.js';
-import gameIcons     from 'themes/fonts/iconFonts/gameIcons.js';
+import gameIcons     from '../../../themes/fonts/iconFonts/gameIcons.js';
 
 const emojis = {
 	...diceFont,
@@ -79,6 +79,6 @@ const showAutocompleteEmoji = function(CodeMirror, editor) {
 	});
 };
 
-module.exports = {
+export default {
 	showAutocompleteEmoji
 };

client/components/codeEditor/close-tag.js

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

client/components/codeEditor/codeEditor.jsx

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

client/components/codeEditor/fold-css.js

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

client/components/codeEditor/fold-pages.js

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

client/components/combobox.jsx

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

client/components/renderWarnings/renderWarnings.jsx

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

client/components/renderWarnings/renderWarnings.less

@@ -1,3 +1,5 @@
+@import './shared/naturalcrit/styles/colors.less';
+
 .renderWarnings {
 	position         : relative;
 	float            : right;

client/components/splitPane/splitPane.jsx

@@ -1,6 +1,6 @@
-require('./splitPane.less');
+
-const React = require('react');
+import './splitPane.less';
-const { useState, useEffect } = React;
+import React, { useEffect, useState } from 'react';
 
 const PANE_WIDTH_KEY = 'HB_editor_splitWidth';
 const LIVE_SCROLL_KEY = 'HB_editor_liveScroll';
@@ -108,4 +108,4 @@ const Pane = ({ width, children, isDragging, moveBrew, moveSource, liveScroll, s
 	);
 };
 
-module.exports = SplitPane;
+export default SplitPane;

client/components/splitPane/splitPane.less

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

client/components/svg/cauldron.svg.jsx

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

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

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

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -1,23 +1,22 @@
 /*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
-require('./brewRenderer.less');
+import './brewRenderer.less';
-const React = require('react');
+import React, { useState, useRef, useMemo, useEffect } from 'react';
-const { useState, useRef, useMemo, useEffect } = React;
+import _ from 'lodash';
-const _ = require('lodash');
 
-const MarkdownLegacy = require('markdownLegacy.js');
+import MarkdownLegacy from '../../../shared/markdownLegacy.js';
-import Markdown from 'markdown.js';
+import Markdown from '../../../shared/markdown.js';
-const ErrorBar = require('./errorBar/errorBar.jsx');
+import ErrorBar from './errorBar/errorBar.jsx';
-const ToolBar  = require('./toolBar/toolBar.jsx');
+import ToolBar  from './toolBar/toolBar.jsx';
 
 //TODO: move to the brew renderer
-const RenderWarnings = require('client/components/renderWarnings/renderWarnings.jsx');
+import RenderWarnings from '../../components/renderWarnings/renderWarnings.jsx';
-const NotificationPopup = require('./notificationPopup/notificationPopup.jsx');
+import NotificationPopup from './notificationPopup/notificationPopup.jsx';
-const Frame = require('react-frame-component').default;
+import Frame from 'react-frame-component';
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent';
-const { printCurrentBrew } = require('../../../shared/helpers.js');
+import { printCurrentBrew } from '../../../shared/helpers.js';
 
 import HeaderNav from './headerNav/headerNav.jsx';
-import { safeHTML } from './safeHTML.js';
+import safeHTML from './safeHTML.js';
 
 const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
 const PAGEBREAK_REGEX_LEGACY = /\\page(?:break)?/m;
@@ -345,4 +344,4 @@ const BrewRenderer = (props)=>{
 	);
 };
 
-module.exports = BrewRenderer;
+export default BrewRenderer;

client/homebrew/brewRenderer/errorBar/errorBar.jsx

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

client/homebrew/brewRenderer/errorBar/errorBar.less

@@ -1,3 +1,4 @@
+@import './shared/naturalcrit/styles/colors.less';
 
 .errorBar {
 	position         : absolute;

client/homebrew/brewRenderer/headerNav/headerNav.jsx

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

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -1,7 +1,7 @@
-require('./notificationPopup.less');
+import './notificationPopup.less';
 import React, { useEffect, useState } from 'react';
 import request from '../../utils/request-middleware.js';
-import Markdown from 'markdown.js';
+import Markdown from '../../../../shared/markdown.js';
 
 import Dialog from '../../../components/dialog.jsx';
 
@@ -62,4 +62,4 @@ const NotificationPopup = ()=>{
 	</Dialog>;
 };
 
-module.exports = NotificationPopup;
+export default NotificationPopup;

client/homebrew/brewRenderer/notificationPopup/notificationPopup.less

@@ -1,3 +1,5 @@
+@import './client/homebrew/navbar/navbar.less';
+
 .popups {
 	position         : fixed;
 	top              : calc(@navbarHeight + @viewerToolsHeight);

client/homebrew/brewRenderer/safeHTML.js

@@ -43,4 +43,4 @@ function safeHTML(htmlString) {
 	return div.innerHTML;
 };
 
-module.exports.safeHTML = safeHTML;
+export default safeHTML;

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -1,8 +1,7 @@
 /* eslint-disable max-lines */
-require('./toolBar.less');
+import './toolBar.less';
-const React = require('react');
+import React, { useState, useEffect } from 'react';
-const { useState, useEffect } = React;
+import _ from 'lodash';
-const _ = require('lodash');
 
 import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anchored.jsx';
 
@@ -259,4 +258,4 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 	);
 };
 
-module.exports = ToolBar;
+export default ToolBar;

client/homebrew/editor/editor.jsx

@@ -1,14 +1,14 @@
 /*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/
-require('./editor.less');
+import './editor.less';
-const React = require('react');
+import React from 'react';
-const createClass = require('create-react-class');
+import createReactClass from 'create-react-class';
-const _ = require('lodash');
+import _ from 'lodash';
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent';
 import Markdown from '../../../shared/markdown.js';
 
-const CodeEditor = require('client/components/codeEditor/codeEditor.jsx');
+import CodeEditor from '../../components/codeEditor/codeEditor.jsx';
-const SnippetBar = require('./snippetbar/snippetbar.jsx');
+import SnippetBar from './snippetbar/snippetbar.jsx';
-const MetadataEditor = require('./metadataEditor/metadataEditor.jsx');
+import MetadataEditor from './metadataEditor/metadataEditor.jsx';
 
 const EDITOR_THEME_KEY = 'HB_editor_theme';
 
@@ -31,7 +31,7 @@ const DEFAULT_SNIPPET_TEXT = dedent`
 `;
 let isJumping = false;
 
-const Editor = createClass({
+const Editor = createReactClass({
 	displayName     : 'Editor',
 	getDefaultProps : function() {
 		return {
@@ -76,8 +76,8 @@ const Editor = createClass({
 		document.getElementById('BrewRenderer').addEventListener('keydown', this.handleControlKeys);
 		document.addEventListener('keydown', this.handleControlKeys);
 
-		this.codeEditor.current.codeMirror.on('cursorActivity', (cm)=>{this.updateCurrentCursorPage(cm.getCursor());});
+		this.codeEditor.current.codeMirror?.on('cursorActivity', (cm)=>{this.updateCurrentCursorPage(cm.getCursor());});
-		this.codeEditor.current.codeMirror.on('scroll', _.throttle(()=>{this.updateCurrentViewPage(this.codeEditor.current.getTopVisibleLine());}, 200));
+		this.codeEditor.current.codeMirror?.on('scroll', _.throttle(()=>{this.updateCurrentViewPage(this.codeEditor.current.getTopVisibleLine());}, 200));
 
 		const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY);
 		if(editorTheme) {
@@ -156,21 +156,21 @@ const Editor = createClass({
 		this.setState({
 			view : newView
 		}, ()=>{
-			this.codeEditor.current?.codeMirror.focus();
+			this.codeEditor.current?.codeMirror?.focus();
 		});
 	},
 
 	highlightCustomMarkdown : function(){
-		if(!this.codeEditor.current) return;
+		if(!this.codeEditor.current?.codeMirror) return;
 		if((this.state.view === 'text') ||(this.state.view === 'snippet')) {
 			const codeMirror = this.codeEditor.current.codeMirror;
 
-			codeMirror.operation(()=>{ // Batch CodeMirror styling
+			codeMirror?.operation(()=>{ // Batch CodeMirror styling
 
 				const foldLines = [];
 
 				//reset custom text styles
-				const customHighlights = codeMirror.getAllMarks().filter((mark)=>{
+				const customHighlights = codeMirror?.getAllMarks().filter((mark)=>{
 					// Record details of folded sections
 					if(mark.__isFold) {
 						const fold = mark.find();
@@ -191,10 +191,10 @@ const Editor = createClass({
 					const textOrSnip = this.state.view === 'text';
 
 					//reset custom line styles
-					codeMirror.removeLineClass(lineNumber, 'background', 'pageLine');
+					codeMirror?.removeLineClass(lineNumber, 'background', 'pageLine');
-					codeMirror.removeLineClass(lineNumber, 'background', 'snippetLine');
+					codeMirror?.removeLineClass(lineNumber, 'background', 'snippetLine');
-					codeMirror.removeLineClass(lineNumber, 'text');
+					codeMirror?.removeLineClass(lineNumber, 'text');
-					codeMirror.removeLineClass(lineNumber, 'wrap', 'sourceMoveFlash');
+					codeMirror?.removeLineClass(lineNumber, 'wrap', 'sourceMoveFlash');
 
 					// Don't process lines inside folded text
 					// If the current lineNumber is inside any folded marks, skip line styling
@@ -210,19 +210,19 @@ const Editor = createClass({
 						else if(this.state.view !== 'text')	userSnippetCount += 1;
 
 						// add back the original class 'background' but also add the new class '.pageline'
-						codeMirror.addLineClass(lineNumber, 'background', tabHighlight);
+						codeMirror?.addLineClass(lineNumber, 'background', tabHighlight);
 						const pageCountElement = Object.assign(document.createElement('span'), {
 							className   : 'editor-page-count',
 							textContent : textOrSnip ? editorPageCount : userSnippetCount
 						});
-						codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement);
+						codeMirror?.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement);
 					};
 
 
-					// New Codemirror styling for V3 renderer
+					// New CodeMirror styling for V3 renderer
 					if(this.props.renderer === 'V3') {
 						if(line.match(/^\\column(?:break)?$/)){
-							codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
+							codeMirror?.addLineClass(lineNumber, 'text', 'columnSplit');
 						}
 
 						// definition lists
@@ -231,14 +231,14 @@ const Editor = createClass({
 							const regex = /^([^\n]*?:?\s?)(::[^\n]*)(?:\n|$)/ymd;  // the `d` flag, for match indices, throws an ESLint error.
 							let match;
 							while ((match = regex.exec(line)) != null){
-								codeMirror.markText({ line: lineNumber, ch: match.indices[0][0] }, { line: lineNumber, ch: match.indices[0][1] }, { className: 'dl-highlight' });
+								codeMirror?.markText({ line: lineNumber, ch: match.indices[0][0] }, { line: lineNumber, ch: match.indices[0][1] }, { className: 'dl-highlight' });
-								codeMirror.markText({ line: lineNumber, ch: match.indices[1][0] }, { line: lineNumber, ch: match.indices[1][1] }, { className: 'dt-highlight' });
+								codeMirror?.markText({ line: lineNumber, ch: match.indices[1][0] }, { line: lineNumber, ch: match.indices[1][1] }, { className: 'dt-highlight' });
-								codeMirror.markText({ line: lineNumber, ch: match.indices[2][0] }, { line: lineNumber, ch: match.indices[2][1] }, { className: 'dd-highlight' });
+								codeMirror?.markText({ line: lineNumber, ch: match.indices[2][0] }, { line: lineNumber, ch: match.indices[2][1] }, { className: 'dd-highlight' });
 								const ddIndex = match.indices[2][0];
 								const colons = /::/g;
 								const colonMatches = colons.exec(match[2]);
 								if(colonMatches !== null){
-									codeMirror.markText({ line: lineNumber, ch: colonMatches.index + ddIndex }, { line: lineNumber, ch: colonMatches.index + colonMatches[0].length + ddIndex }, { className: 'dl-colon-highlight' });
+									codeMirror?.markText({ line: lineNumber, ch: colonMatches.index + ddIndex }, { line: lineNumber, ch: colonMatches.index + colonMatches[0].length + ddIndex }, { className: 'dl-colon-highlight' });
 								}
 							}
 						}
@@ -255,7 +255,7 @@ const Editor = createClass({
 								const match = subRegex.exec(line) || superRegex.exec(line);
 								if(match) {
 									isSuper = !subRegex.lastIndex;
-									codeMirror.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: isSuper ? 'superscript' : 'subscript' });
+									codeMirror?.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: isSuper ? 'superscript' : 'subscript' });
 								}
 								startIndex = line.indexOf('^', Math.max(startIndex + 1, subRegex.lastIndex, superRegex.lastIndex));
 							}
@@ -266,7 +266,7 @@ const Editor = createClass({
 							const regex = /(?:^|[^{\n])({(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\2})/gm;
 							let match;
 							while ((match = regex.exec(line)) != null) {
-								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length }, { className: 'injection' });
+								codeMirror?.markText({ line: lineNumber, ch: line.indexOf(match[1]) }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length }, { className: 'injection' });
 							}
 						}
 						// Highlight inline spans {{content}}
@@ -284,7 +284,7 @@ const Editor = createClass({
 									blockCount = 0;
 									continue;
 								}
-								codeMirror.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: 'inline-block' });
+								codeMirror?.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: 'inline-block' });
 							}
 						} else if(line.trimLeft().startsWith('{{') || line.trimLeft().startsWith('}}')){
 							// Highlight block divs {{\n Content \n}}
@@ -293,7 +293,7 @@ const Editor = createClass({
 							const match = line.match(/^ *{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *$|^ *}}$/);
 							if(match)
 								endCh = match.index+match[0].length;
-							codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
+							codeMirror?.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
 						}
 
 						// Emojis
@@ -314,11 +314,11 @@ const Editor = createClass({
 									const endPos   = { line: lineNumber, ch: match.index + match[0].length };
 
 									// Iterate over conflicting marks and clear them
-									const marks = codeMirror.findMarks(startPos, endPos);
+									const marks = codeMirror?.findMarks(startPos, endPos);
 									marks.forEach(function(marker) {
 										if(!marker.__isFold) marker.clear();
 									});
-									codeMirror.markText(startPos, endPos, { className: 'emoji' });
+									codeMirror?.markText(startPos, endPos, { className: 'emoji' });
 								}
 								startIndex = line.indexOf(':', Math.max(startIndex + 1, emojiRegex.lastIndex));
 							}
@@ -378,44 +378,46 @@ const Editor = createClass({
 		const textString = this.props.brew.text.split(textSplit).slice(0, targetPage-1).join(textSplit);
 		const targetLine = textString.match('\n') ? textString.split('\n').length - 1 : -1;
 
-		let currentY = this.codeEditor.current.codeMirror.getScrollInfo().top;
+		let currentY = this.codeEditor.current.codeMirror?.getScrollInfo().top;
-		let targetY  = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
+		let targetY  = this.codeEditor.current.codeMirror?.heightAtLine(targetLine, 'local', true);
 
 		let scrollingTimeout;
 		const checkIfScrollComplete = ()=>{ // Prevent interrupting a scroll in progress if user clicks multiple times
 			clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs
 			scrollingTimeout = setTimeout(()=>{
 				isJumping = false;
-				this.codeEditor.current.codeMirror.off('scroll', checkIfScrollComplete);
+				this.codeEditor.current.codeMirror?.off('scroll', checkIfScrollComplete);
 			}, 150); // If 150 ms pass without a scroll event, assume scrolling is done
 		};
 
 		isJumping = true;
 		checkIfScrollComplete();
-		this.codeEditor.current.codeMirror.on('scroll', checkIfScrollComplete);
+		if (this.codeEditor.current?.codeMirror) {
+			this.codeEditor.current.codeMirror?.on('scroll', checkIfScrollComplete);
+		}
 
 		if(smooth) {
 			//Scroll 1/10 of the way every 10ms until 1px off.
 			const incrementalScroll = setInterval(()=>{
 				currentY += (targetY - currentY) / 10;
-				this.codeEditor.current.codeMirror.scrollTo(null, currentY);
+				this.codeEditor.current.codeMirror?.scrollTo(null, currentY);
 
 				// Update target: target height is not accurate until within +-10 lines of the visible window
 				if(Math.abs(targetY - currentY > 100))
-					targetY = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true);
+					targetY = this.codeEditor.current.codeMirror?.heightAtLine(targetLine, 'local', true);
 
 				// End when close enough
 				if(Math.abs(targetY - currentY) < 1) {
-					this.codeEditor.current.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
+					this.codeEditor.current.codeMirror?.scrollTo(null, targetY);  // Scroll any remaining difference
 					this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
-					this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
+					this.codeEditor.current.codeMirror?.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
 					clearInterval(incrementalScroll);
 				}
 			}, 10);
 		} else {
-			this.codeEditor.current.codeMirror.scrollTo(null, targetY);  // Scroll any remaining difference
+			this.codeEditor.current.codeMirror?.scrollTo(null, targetY);  // Scroll any remaining difference
 			this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
-			this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
+			this.codeEditor.current.codeMirror?.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
 		}
 	},
 
@@ -542,4 +544,4 @@ const Editor = createClass({
 	}
 });
 
-module.exports = Editor;
+export default Editor;

client/homebrew/editor/editor.less

@@ -1,4 +1,6 @@
-@import 'themes/codeMirror/customEditorStyles.less';
+@import './shared/naturalcrit/styles/core.less';
+@import './themes/codeMirror/customEditorStyles.less';
+
 .editor {
 	position  : relative;
 	width     : 100%;

client/homebrew/editor/metadataEditor/metadataEditor.jsx

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

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -1,4 +1,4 @@
-@import 'naturalcrit/styles/colors.less';
+@import './shared/naturalcrit/styles/core.less';
 
 .userThemeName {
 	padding-right : 10px;

client/homebrew/editor/metadataEditor/validations.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
 	title : [
 		(value)=>{
 			return value?.length > 100 ? 'Max title length of 100 characters' : null;

client/homebrew/editor/snippetbar/snippetbar.jsx

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

client/homebrew/editor/snippetbar/snippetbar.less

@@ -1,3 +1,4 @@
+@import './shared/naturalcrit/styles/core.less';
 @import (less) './client/icons/customIcons.less';
 @import (less) '././././themes/fonts/5e/fonts.less';
 

client/homebrew/editor/tagInput/tagInput.jsx

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

client/homebrew/homebrew.jsx

@@ -1,4 +1,4 @@
-/* eslint-disable camelcase */
+
 import 'core-js/es/string/to-well-formed.js'; //Polyfill for older browsers
 import './homebrew.less';
 import React from 'react';
@@ -46,8 +46,8 @@ const Homebrew = (props)=>{
 	global.config        = config;
 
 	const backgroundObject = ()=>{
-		if(global.config.deployment || (config.local && config.development)){
+		if(global.config?.deployment || (config?.local && config?.development)){
-  			const bgText = global.config.deployment || 'Local';
+  			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>")`
   			};
@@ -58,7 +58,7 @@ const Homebrew = (props)=>{
 
 	return (
 		<Router location={url}>
-			<div className={`homebrew${(config.deployment || config.local) ? ' deployment' : ''}`} style={backgroundObject()}>
+			<div className={`homebrew${(config?.deployment || config?.local) ? ' deployment' : ''}`} style={backgroundObject()}>
 				<Routes>
 					<Route path='/edit/:id' element={<WithRoute el={EditPage} brew={brew} userThemes={userThemes}/>} />
 					<Route path='/share/:id' element={<WithRoute el={SharePage} brew={brew} />} />
@@ -80,4 +80,4 @@ const Homebrew = (props)=>{
 	);
 };
 
-module.exports = Homebrew;
+export default Homebrew;

client/homebrew/homebrew.less

@@ -1,4 +1,4 @@
-@import 'naturalcrit/styles/core.less';
+@import './shared/naturalcrit/styles/core.less';
 .homebrew {
 	height : 100%;
 	background-color:@steel;

client/homebrew/navbar/account.navitem.jsx

@@ -1,9 +1,9 @@
-const React = require('react');
+import React from 'react';
-const createClass = require('create-react-class');
+import createReactClass from 'create-react-class';
-const Nav = require('client/homebrew/navbar/nav.jsx');
+import request from 'superagent';
-const request = require('superagent');
+import Nav from './nav.jsx';
 
-const Account = createClass({
+const Account = createReactClass({
 	displayName     : 'AccountNavItem',
 	getInitialState : function() {
 		return {
@@ -97,7 +97,7 @@ const Account = createClass({
 
 		//  Logged out
 		//  LOCAL ONLY
-		if(global.config.local) {
+		if(global.config?.local) {
 			return <Nav.item color='teal' icon='fas fa-sign-in-alt' onClick={this.localLogin}>
 				login
 			</Nav.item>;
@@ -111,4 +111,4 @@ const Account = createClass({
 	}
 });
 
-module.exports = Account;
+export default Account;

client/homebrew/navbar/error-navitem.jsx

@@ -1,6 +1,6 @@
-require('./error-navitem.less');
+import './error-navitem.less';
-const React = require('react');
+import React from 'react';
-const Nav = require('client/homebrew/navbar/nav.jsx');
+import Nav from './nav.jsx';
 
 const ErrorNavItem = ({ error = '', clearError })=>{
 	const response    = error.response;
@@ -144,4 +144,4 @@ const ErrorNavItem = ({ error = '', clearError })=>{
 	</Nav.item>;
 };
 
-module.exports = ErrorNavItem;
+export default ErrorNavItem;

client/homebrew/navbar/error-navitem.less

@@ -1,3 +1,5 @@
+@import './shared/naturalcrit/styles/core.less';
+
 .navItem.error {
 	position         : relative;
 	background-color : @red;

client/homebrew/navbar/help.navitem.jsx

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

client/homebrew/navbar/metadata.navitem.jsx

@@ -1,11 +1,11 @@
-const React = require('react');
+import React from 'react';
-const createClass = require('create-react-class');
+import createReactClass from 'create-react-class';
-const Moment = require('moment');
+import Moment from 'moment';
 
-const Nav = require('client/homebrew/navbar/nav.jsx');
+import Nav from './nav.jsx';
 
 
-const MetadataNav = createClass({
+const MetadataNav = createReactClass({
 	displayName     : 'MetadataNav',
 	getDefaultProps : function() {
 		return {
@@ -86,4 +86,4 @@ const MetadataNav = createClass({
 
 });
 
-module.exports = MetadataNav;
+export default MetadataNav;

client/homebrew/navbar/nav.jsx

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

client/homebrew/navbar/navbar.jsx

@@ -1,22 +1,16 @@
-require('./navbar.less');
+import './navbar.less';
-const React = require('react');
+import React from 'react';
-const createClass = require('create-react-class');
+import createReactClass from 'create-react-class';
 
-const Nav = require('client/homebrew/navbar/nav.jsx');
+import Nav from './nav.jsx';
-const PatreonNavItem = require('./patreon.navitem.jsx');
+import PatreonNavItem from './patreon.navitem.jsx';
 
-const Navbar = createClass({
+const Navbar = createReactClass({
 	displayName     : 'Navbar',
 	getInitialState: function() {
   		return {
-			//showNonChromeWarning : false,
+			// showNonChromeWarning: false, // uncomment if needed
-			ver : '0.0.0'
+    		ver: global.version || '0.0.0'
-		};
-	},
-
-	getInitialState : function() {
-		return {
-			ver : global.version
   		};
 	},
 
@@ -49,4 +43,4 @@ const Navbar = createClass({
 	}
 });
 
-module.exports = Navbar;
+export default Navbar;

client/homebrew/navbar/navbar.less

@@ -1,4 +1,4 @@
-@import 'naturalcrit/styles/colors.less';
+@import './shared/naturalcrit/styles/core.less';
 
 @navbarHeight : 28px;
 @viewerToolsHeight : 32px;

client/homebrew/navbar/newbrew.navitem.jsx

@@ -1,7 +1,7 @@
-const React = require('react');
+import React from 'react';
-const _ = require('lodash');
+import _ from 'lodash';
-const Nav = require('client/homebrew/navbar/nav.jsx');
+import Nav from './nav.jsx';
-const { splitTextStyleAndMetadata } = require('../../../shared/helpers.js'); // Importing the function from helpers.js
+import { splitTextStyleAndMetadata } from '../../../shared/helpers.js';
 
 const BREWKEY  = 'HB_newPage_content';
 const STYLEKEY = 'HB_newPage_style';
@@ -100,4 +100,4 @@ const NewBrew = ()=>{
 	);
 };
 
-module.exports = NewBrew;
+export default NewBrew;

client/homebrew/navbar/patreon.navitem.jsx

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

client/homebrew/navbar/print.navitem.jsx

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

client/homebrew/navbar/recent.navitem.jsx

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

client/homebrew/navbar/share.navitem.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import dedent from 'dedent-tabs';
+import dedent from 'dedent';
-import Nav from 'client/homebrew/navbar/nav.jsx';
+import Nav from './nav.jsx';
 
 const getShareId = (brew)=>(
 	brew.googleId && !brew.stubbed

client/homebrew/navbar/vault.navitem.jsx

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

client/homebrew/pages/accountPage/accountPage.jsx

@@ -1,7 +1,7 @@
-const React  = require('react');
+import React from 'react';
-const moment = require('moment');
+import moment from 'moment';
-const UIPage = require('../basePages/uiPage/uiPage.jsx');
+import UIPage from '../basePages/uiPage/uiPage.jsx';
-const NaturalCritIcon = require('client/components/svg/naturalcrit-d20.svg.jsx');
+import NaturalCritIcon from '../../../components/svg/naturalcrit-d20.svg.jsx';
 
 let SAVEKEY = '';
 
@@ -79,4 +79,4 @@ const AccountPage = (props)=>{
 		</UIPage>);
 };
 
-module.exports = AccountPage;
+export default AccountPage;

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

@@ -1,12 +1,11 @@
-require('./brewItem.less');
+import './brewItem.less';
-const React = require('react');
+import React, { useCallback } from 'react';
-const { useCallback } = React;
+import moment from 'moment';
-const moment = require('moment');
 import request from '../../../../utils/request-middleware.js';
 
-const googleDriveIcon = require('../../../../googleDrive.svg');
+import googleDriveIcon from '../../../../googleDrive.svg';
-const homebreweryIcon = require('../../../../thumbnail.svg');
+import homebreweryIcon from '../../../../thumbnail.svg';
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent';
 
 const BrewItem = ({
 	brew = {
@@ -176,4 +175,4 @@ const BrewItem = ({
 	);
 };
 
-module.exports = BrewItem;
+export default BrewItem;

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

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

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

@@ -1,11 +1,11 @@
 /*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
-require('./listPage.less');
+import './listPage.less';
-const React       = require('react');
+import React from 'react';
-const createClass = require('create-react-class');
+import createReactClass from 'create-react-class';
-const _           = require('lodash');
+import _ from 'lodash';
-const moment      = require('moment');
+import moment from 'moment';
 
-const BrewItem    = require('./brewItem/brewItem.jsx');
+import BrewItem from './brewItem/brewItem.jsx';
 
 const USERPAGE_SORT_DIR = 'HB_listPage_sortDir';
 const USERPAGE_SORT_TYPE = 'HB_listPage_sortType';
@@ -14,7 +14,7 @@ const USERPAGE_GROUP_VISIBILITY_PREFIX = 'HB_listPage_visibility_group';
 const DEFAULT_SORT_TYPE = 'alpha';
 const DEFAULT_SORT_DIR = 'asc';
 
-const ListPage = createClass({
+const ListPage = createReactClass({
 	displayName     : 'ListPage',
 	getDefaultProps : function() {
 		return {
@@ -279,4 +279,4 @@ const ListPage = createClass({
 	}
 });
 
-module.exports = ListPage;
+export default ListPage;

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

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

client/homebrew/pages/editPage/editPage.jsx

@@ -4,33 +4,34 @@ import './editPage.less';
 // Common imports
 import React, { useState, useEffect, useRef } from 'react';
 import request                                from '../../utils/request-middleware.js';
-import Markdown                               from 'markdown.js';
+import Markdown                               from '../../../../shared/markdown.js';
 import _                                      from 'lodash';
 
 import { DEFAULT_BREW_LOAD }                  from '../../../../server/brewDefaults.js';
 import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js';
 
-import SplitPane    from 'client/components/splitPane/splitPane.jsx';
+import SplitPane    from '../../../components/splitPane/splitPane.jsx';
 import Editor       from '../../editor/editor.jsx';
 import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 
-import Nav                       from 'client/homebrew/navbar/nav.jsx';
+import Nav                       from '../../navbar/nav.jsx';
-import Navbar                    from 'client/homebrew/navbar/navbar.jsx';
+import Navbar                    from '../../navbar/navbar.jsx';
-import NewBrewItem               from 'client/homebrew/navbar/newbrew.navitem.jsx';
+import NewBrewItem               from '../../navbar/newbrew.navitem.jsx';
-import AccountNavItem            from 'client/homebrew/navbar/account.navitem.jsx';
+import AccountNavItem            from '../../navbar/account.navitem.jsx';
-import ErrorNavItem              from 'client/homebrew/navbar/error-navitem.jsx';
+import ErrorNavItem              from '../../navbar/error-navitem.jsx';
-import HelpNavItem               from 'client/homebrew/navbar/help.navitem.jsx';
+import HelpNavItem               from '../../navbar/help.navitem.jsx';
-import VaultNavItem              from 'client/homebrew/navbar/vault.navitem.jsx';
+import VaultNavItem              from '../../navbar/vault.navitem.jsx';
-import PrintNavItem              from 'client/homebrew/navbar/print.navitem.jsx';
+import PrintNavItem              from '../../navbar/print.navitem.jsx';
-import { both as RecentNavItem } from 'client/homebrew/navbar/recent.navitem.jsx';
+import RecentNavItems from '../../navbar/recent.navitem.jsx';
+const { both: RecentNavItem } = RecentNavItems;
 
 // Page specific imports
-import { Meta }                          from 'vitreum/headtags';
+import Meta    from '../../../../vitreum/headtags.js';
 import { md5 }                           from 'hash-wasm';
 import { gzipSync, strToU8 }             from 'fflate';
 import { makePatches, stringifyPatches } from '@sanity/diff-match-patch';
 
-import ShareNavItem              from 'client/homebrew/navbar/share.navitem.jsx';
+import ShareNavItem              from '../../navbar/share.navitem.jsx';
 import LockNotification from './lockNotification/lockNotification.jsx';
 import { updateHistory, versionHistoryGarbageCollection } from '../../utils/versionHistory.js';
 import googleDriveIcon from '../../googleDrive.svg';
@@ -216,7 +217,7 @@ const EditPage = (props)=>{
 			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),
+			hash      : await md5(lastSavedBrew.current.text.normalize('NFC')),
 			textBin   : undefined,
 			version   : lastSavedBrew.current.version
 		};
@@ -415,4 +416,4 @@ const EditPage = (props)=>{
 	);
 };
 
-module.exports = EditPage;
+export default EditPage;

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

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

client/homebrew/pages/errorPage/errorPage.jsx

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

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

@@ -1,4 +1,4 @@
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent';
 
 const loginUrl = 'https://www.naturalcrit.com/login';
 
@@ -268,4 +268,4 @@ const errorIndex = (props)=>{
 	};
 };
 
-module.exports = errorIndex;
+export default errorIndex;

client/homebrew/pages/homePage/homePage.jsx

@@ -4,28 +4,30 @@ import './homePage.less';
 // Common imports
 import React, { useState, useEffect, useRef } from 'react';
 import request                                from '../../utils/request-middleware.js';
-import Markdown                               from 'markdown.js';
+import Markdown                               from '../../../../shared/markdown.js';
 import _                                      from 'lodash';
 
 import { DEFAULT_BREW }                       from '../../../../server/brewDefaults.js';
 import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js';
 
-import SplitPane    from 'client/components/splitPane/splitPane.jsx';
+import SplitPane    from '../../../components/splitPane/splitPane.jsx';
 import Editor       from '../../editor/editor.jsx';
 import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 
-import Nav                       from 'client/homebrew/navbar/nav.jsx';
+import Nav                       from '../../navbar/nav.jsx';
-import Navbar                    from 'client/homebrew/navbar/navbar.jsx';
+import Navbar                    from '../../navbar/navbar.jsx';
-import NewBrewItem               from 'client/homebrew/navbar/newbrew.navitem.jsx';
+import NewBrewItem               from '../../navbar/newbrew.navitem.jsx';
-import AccountNavItem            from 'client/homebrew/navbar/account.navitem.jsx';
+import AccountNavItem            from '../../navbar/account.navitem.jsx';
-import ErrorNavItem              from 'client/homebrew/navbar/error-navitem.jsx';
+import ErrorNavItem              from '../../navbar/error-navitem.jsx';
-import HelpNavItem               from 'client/homebrew/navbar/help.navitem.jsx';
+import HelpNavItem               from '../../navbar/help.navitem.jsx';
-import VaultNavItem              from 'client/homebrew/navbar/vault.navitem.jsx';
+import VaultNavItem              from '../../navbar/vault.navitem.jsx';
-import PrintNavItem              from 'client/homebrew/navbar/print.navitem.jsx';
+import PrintNavItem              from '../../navbar/print.navitem.jsx';
-import { both as RecentNavItem } from 'client/homebrew/navbar/recent.navitem.jsx';
+import RecentNavItems from '../../navbar/recent.navitem.jsx';
+const { both: RecentNavItem } = RecentNavItems;
+
 
 // Page specific imports
-import { Meta }                               from 'vitreum/headtags';
+import Meta   from '../../../../vitreum/headtags.js';
 
 const BREWKEY  = 'homebrewery-new';
 const STYLEKEY = 'homebrewery-new-style';
@@ -230,4 +232,4 @@ const HomePage =(props)=>{
 	);
 };
 
-module.exports = HomePage;
+export default HomePage;

client/homebrew/pages/homePage/homePage.less

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

client/homebrew/pages/newPage/newPage.jsx

@@ -4,28 +4,29 @@ import './newPage.less';
 // Common imports
 import React, { useState, useEffect, useRef } from 'react';
 import request                                from '../../utils/request-middleware.js';
-import Markdown                               from 'markdown.js';
+import Markdown                               from '../../../../shared/markdown.js';
 import _                                      from 'lodash';
 
 import { DEFAULT_BREW }                       from '../../../../server/brewDefaults.js';
 import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js';
 
-import SplitPane    from 'client/components/splitPane/splitPane.jsx';
+import SplitPane    from '../../../components/splitPane/splitPane.jsx';
 import Editor       from '../../editor/editor.jsx';
 import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
 
-import Nav                       from 'client/homebrew/navbar/nav.jsx';
+import Nav                       from '../../navbar/nav.jsx';
-import Navbar                    from 'client/homebrew/navbar/navbar.jsx';
+import Navbar                    from '../../navbar/navbar.jsx';
-import NewBrewItem               from 'client/homebrew/navbar/newbrew.navitem.jsx';
+import NewBrewItem               from '../../navbar/newbrew.navitem.jsx';
-import AccountNavItem            from 'client/homebrew/navbar/account.navitem.jsx';
+import AccountNavItem            from '../../navbar/account.navitem.jsx';
-import ErrorNavItem              from 'client/homebrew/navbar/error-navitem.jsx';
+import ErrorNavItem              from '../../navbar/error-navitem.jsx';
-import HelpNavItem               from 'client/homebrew/navbar/help.navitem.jsx';
+import HelpNavItem               from '../../navbar/help.navitem.jsx';
-import VaultNavItem              from 'client/homebrew/navbar/vault.navitem.jsx';
+import VaultNavItem              from '../../navbar/vault.navitem.jsx';
-import PrintNavItem              from 'client/homebrew/navbar/print.navitem.jsx';
+import PrintNavItem              from '../../navbar/print.navitem.jsx';
-import { both as RecentNavItem } from 'client/homebrew/navbar/recent.navitem.jsx';
+import RecentNavItems from '../../navbar/recent.navitem.jsx';
+const { both: RecentNavItem } = RecentNavItems;
 
 // Page specific imports
-import { Meta }                  from 'vitreum/headtags';
+import { Meta }   from '../../../../vitreum/headtags.js';
 
 const BREWKEY  = 'HB_newPage_content';
 const STYLEKEY = 'HB_newPage_style';
@@ -276,4 +277,4 @@ const NewPage = (props)=>{
 	);
 };
 
-module.exports = NewPage;
+export default NewPage;

client/homebrew/pages/newPage/newPage.less

@@ -1,3 +1,5 @@
+@import './shared/naturalcrit/styles/colors.less';
+
 .newPage {
 	.navItem.save {
 		background-color : @orange;

client/homebrew/pages/sharePage/sharePage.jsx

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

client/homebrew/pages/userPage/userPage.jsx

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

client/homebrew/pages/vaultPage/vaultPage.jsx

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

client/homebrew/pages/vaultPage/vaultPage.less

@@ -1,3 +1,5 @@
+@import './shared/naturalcrit/styles/core.less';
+
 .vaultPage {
 	height           : 100%;
 	overflow-y       : hidden;

eslint.config.mjs

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "3.20.0",
+  "version": "3.20.1",
   "type": "module",
   "engines": {
     "npm": "^10.8.x",
@@ -12,6 +12,10 @@
     "url": "git://github.com/naturalcrit/homebrewery.git"
   },
   "scripts": {
+    "viteDev": "node scripts/dev.js",
+    "viteDevAdmin": "vite --config vite.config.js --ssr client/admin/admin.jsx",
+    "viteBuild": "vite build",
+    "viteStart": "vite preview --outDir build",
     "dev": "node --experimental-require-module scripts/dev.js",
     "quick": "node --experimental-require-module scripts/quick.js",
     "build": "node --experimental-require-module scripts/buildHomebrew.js && node --experimental-require-module scripts/buildAdmin.js",
@@ -61,8 +65,11 @@
       "server"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!nanoid/).*"
+      "node_modules/(?!(nanoid|@exodus/bytes|parse5)/)"
     ],
+    "transform": {
+      "^.+\\.js$": "babel-jest"
+    },
     "coveragePathIgnorePatterns": [
       "build/*"
     ],
@@ -88,19 +95,20 @@
     "@babel/core": "^7.28.4",
     "@babel/plugin-transform-runtime": "^7.28.3",
     "@babel/preset-env": "^7.28.3",
-    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-react": "^7.28.5",
     "@babel/runtime": "^7.28.4",
     "@dmsnell/diff-match-patch": "^1.1.0",
-    "@googleapis/drive": "^18.0.0",
+    "@googleapis/drive": "^19.2.0",
     "@sanity/diff-match-patch": "^3.2.0",
+    "@vitejs/plugin-react": "^5.1.2",
     "body-parser": "^2.2.0",
     "classnames": "^2.5.1",
     "codemirror": "^5.65.6",
     "cookie-parser": "^1.4.7",
-    "core-js": "^3.46.0",
+    "core-js": "^3.47.0",
     "cors": "^2.8.5",
     "create-react-class": "^15.7.0",
-    "dedent-tabs": "^0.10.3",
+    "dedent": "^1.7.1",
     "expr-eval": "^2.0.2",
     "express": "^5.1.0",
     "express-async-handler": "^1.2.0",
@@ -109,44 +117,46 @@
     "fs-extra": "11.3.2",
     "hash-wasm": "^4.12.0",
     "idb-keyval": "^6.2.2",
-    "js-yaml": "^4.1.0",
+    "js-yaml": "^4.1.1",
     "jwt-simple": "^0.5.6",
-    "less": "^3.13.1",
+    "less": "^4.5.1",
     "lodash": "^4.17.21",
     "marked": "15.0.12",
     "marked-alignment-paragraphs": "^1.0.0",
     "marked-definition-lists": "^1.0.1",
-    "marked-emoji": "^2.0.1",
+    "marked-emoji": "^2.0.2",
     "marked-extended-tables": "^2.0.1",
-    "marked-gfm-heading-id": "^4.1.2",
+    "marked-gfm-heading-id": "^4.1.3",
     "marked-nonbreaking-spaces": "^1.0.1",
     "marked-smartypants-lite": "^1.0.3",
     "marked-subsuper-text": "^1.0.4",
     "marked-variables": "^1.0.4",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.30.1",
-    "mongoose": "^8.19.1",
+    "mongoose": "^8.20.0",
     "nanoid": "5.1.6",
     "nconf": "^0.13.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-frame-component": "^4.1.3",
-    "react-router": "^7.9.4",
+    "react-router": "^7.9.6",
     "romans": "^3.1.0",
     "sanitize-filename": "1.6.3",
     "superagent": "^10.2.1",
-    "vitreum": "git+https://git@github.com/calculuschild/vitreum.git",
+    "vite": "^7.3.1",
     "written-number": "^0.11.1"
   },
   "devDependencies": {
     "@stylistic/stylelint-plugin": "^4.0.0",
+    "babel-jest": "^30.2.0",
     "babel-plugin-transform-import-meta": "^2.3.3",
-    "eslint": "^9.37.0",
+    "eslint": "^9.39.1",
-    "eslint-plugin-jest": "^29.0.1",
+    "eslint-plugin-jest": "^29.1.0",
     "eslint-plugin-react": "^7.37.5",
     "globals": "^16.4.0",
     "jest": "^30.2.0",
     "jest-expect-message": "^1.1.3",
+    "jsdom": "^27.4.0",
     "jsdom-global": "^3.0.2",
     "postcss-less": "^6.0.0",
     "stylelint": "^16.25.0",

scripts/dev.js

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

server/app.js

@@ -110,9 +110,9 @@ app.use(homebrewApi);
 app.use(adminApi);
 app.use(vaultApi);
 
-const welcomeText       = fs.readFileSync('client/homebrew/pages/homePage/welcome_msg.md', 'utf8');
+const welcomeText       = fs.readFileSync('./client/homebrew/pages/homePage/welcome_msg.md', 'utf8');
-const welcomeTextLegacy = fs.readFileSync('client/homebrew/pages/homePage/welcome_msg_legacy.md', 'utf8');
+const welcomeTextLegacy = fs.readFileSync('./client/homebrew/pages/homePage/welcome_msg_legacy.md', 'utf8');
-const migrateText       = fs.readFileSync('client/homebrew/pages/homePage/migrate.md', 'utf8');
+const migrateText       = fs.readFileSync('./client/homebrew/pages/homePage/migrate.md', 'utf8');
 const changelogText     = fs.readFileSync('changelog.md', 'utf8');
 const faqText           = fs.readFileSync('faq.md', 'utf8');
 

server/googleActions.js

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

shared/markdownLegacy.js

@@ -1,5 +1,5 @@
-const _ = require('lodash');
+import _ from 'lodash';
-const Markdown = require('markedLegacy');
+import Markdown from 'markedLegacy';
 const renderer = new Markdown.Renderer();
 
 //Processes the markdown within an HTML block if it's just a class-wrapper
@@ -103,7 +103,7 @@ const voidTags = new Set([
 ]);
 
 
-module.exports = {
+export default {
 	marked : Markdown,
 	render : (rawBrewText)=>{
 		return Markdown(

shared/naturalcrit/styles/core.less

@@ -1,9 +1,9 @@
 
-@import 'naturalcrit/styles/reset.less';
+@import './reset.less';
-//@import 'naturalcrit/styles/elements.less';
+//@import './elements.less';
-@import 'naturalcrit/styles/animations.less';
+@import './animations.less';
-@import 'naturalcrit/styles/colors.less';
+@import './colors.less';
-@import 'naturalcrit/styles/tooltip.less';
+@import './tooltip.less';
 @font-face {
 	font-family : 'CodeLight';
 	src         : data-uri('naturalcrit/styles/CODE Light.otf') format('opentype');

tests/html/safeHTML.test.js

@@ -1,7 +1,5 @@
-
+import globalJsdom from 'jsdom-global';
-
+globalJsdom();
-require('jsdom-global')();
-
 import { safeHTML } from '../../client/homebrew/brewRenderer/safeHTML';
 
 test('Exit if no document', function() {

tests/markdown/basic.test.js

@@ -1,6 +1,6 @@
 
 
-import Markdown from 'markdown.js';
+import Markdown from './shared/markdown.js';
 
 test('Processes the markdown within an HTML block if its just a class wrapper', function() {
 	const source = '<div>*Bold text*</div>';

tests/markdown/definition-lists.test.js

@@ -1,6 +1,6 @@
 
 
-import Markdown from 'markdown.js';
+import Markdown from './shared/markdown.js';
 
 describe('Inline Definition Lists', ()=>{
 	test('No Term 1 Definition', function() {

tests/markdown/emojis.test.js

@@ -1,5 +1,5 @@
-import Markdown from 'markdown.js';
+import Markdown from './shared/markdown.js';
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent';
 
 // Marked.js adds line returns after closing tags on some default tokens.
 // This removes those line returns for comparison sake.

tests/markdown/hard-breaks.test.js

@@ -1,6 +1,6 @@
 
 
-import Markdown from 'markdown.js';
+import Markdown from './shared/markdown.js';
 
 describe('Hard Breaks', ()=>{
 	test('Single Break', function() {

tests/markdown/mustache-syntax.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable max-lines */
 
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent';
-import Markdown from 'markdown.js';
+import Markdown from './shared/markdown.js';
 
 // Marked.js adds line returns after closing tags on some default tokens.
 // This removes those line returns for comparison sake.

tests/markdown/non-breaking-spaces.test.js

@@ -1,6 +1,6 @@
 
 
-import Markdown from 'markdown.js';
+import Markdown from './shared/markdown.js';
 
 describe('Non-Breaking Spaces Interactions', ()=>{
 	test('I am actually a single-line definition list!', function() {

tests/markdown/paragraph-justification.test.js

@@ -1,6 +1,6 @@
 
 
-import Markdown from 'markdown.js';
+import Markdown from './shared/markdown.js';
 
 describe('Justification', ()=>{
 	test('Left Justify', function() {

tests/markdown/variables.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable max-lines */
 
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent';
-import Markdown from 'markdown.js';
+import Markdown from './shared/markdown.js';
 
 // Marked.js adds line returns after closing tags on some default tokens.
 // This removes those line returns for comparison sake.

themes/Legacy/5ePHB/snippets.js

@@ -1,14 +1,14 @@
 /* eslint-disable max-lines */
 
-const MagicGen           = require('./snippets/magic.gen.js');
+import MagicGen from './snippets/magic.gen.js';
-const ClassTableGen      = require('./snippets/classtable.gen.js');
+import ClassTableGen      from './snippets/classtable.gen.js';
-const MonsterBlockGen    = require('./snippets/monsterblock.gen.js');
+import MonsterBlockGen    from './snippets/monsterblock.gen.js';
-const ClassFeatureGen    = require('./snippets/classfeature.gen.js');
+import ClassFeatureGen    from './snippets/classfeature.gen.js';
-const CoverPageGen       = require('./snippets/coverpage.gen.js');
+import CoverPageGen       from './snippets/coverpage.gen.js';
-const TableOfContentsGen = require('./snippets/tableOfContents.gen.js');
+import TableOfContentsGen from './snippets/tableOfContents.gen.js';
-const dedent             = require('dedent-tabs').default;
+import dedent from 'dedent';
 
-module.exports = [
+export default [
 
 	{
 		groupName : 'Text Editor',

themes/Legacy/5ePHB/snippets/classfeature.gen.js

@@ -1,6 +1,6 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
-module.exports = function(classname){
+function classFeatureGen(classname) {
 
 	classname = _.sample(['archivist', 'fancyman', 'linguist', 'fletcher',
 		'notary', 'berserker-typist', 'fishmongerer', 'manicurist', 'haberdasher', 'concierge']);
@@ -49,4 +49,6 @@ module.exports = function(classname){
 		`- ${_.sample(['10 lint fluffs', '1 button', 'a cherished lost sock'])}`,
 		'\n\n\n'
 	].join('\n');
-};
+}
+
+export default classFeatureGen;

themes/Legacy/5ePHB/snippets/classtable.gen.js

@@ -1,4 +1,4 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
 const features = [
 	'Astrological Botany',
@@ -50,7 +50,7 @@ const getFeature = (level)=>{
 	return res.join(', ');
 };
 
-module.exports = {
+export default {
 	full : function(){
 		const classname = _.sample(classnames);
 

themes/Legacy/5ePHB/snippets/coverpage.gen.js

@@ -1,4 +1,4 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
 const titles = [
 	'The Burning Gallows',
@@ -98,7 +98,7 @@ const subtitles = [
 ];
 
 
-module.exports = ()=>{
+function coverPageGen() {
 return `<style>
   .phb#p1{ text-align:center; }
   .phb#p1:after{ display:none; }
@@ -114,4 +114,6 @@ module.exports = ()=>{
 </div>
 
 \\page`;
-};
+}
+
+export default coverPageGen;

themes/Legacy/5ePHB/snippets/fullclass.gen.js

@@ -1,10 +1,10 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
-const ClassFeatureGen = require('./classfeature.gen.js');
+import ClassFeatureGen from './classfeature.gen.js';
 
-const ClassTableGen = require('./classtable.gen.js');
+import ClassTableGen from './classtable.gen.js';
 
-module.exports = function(){
+function fullClassGen(){
 
 	const classname = _.sample(['Archivist', 'Fancyman', 'Linguist', 'Fletcher',
 		'Notary', 'Berserker-Typist', 'Fishmongerer', 'Manicurist', 'Haberdasher', 'Concierge']);
@@ -40,4 +40,6 @@ module.exports = function(){
 
 
 	].join('\n')}\n\n\n`;
-};
+}
+
+export default fullClassGen;

themes/Legacy/5ePHB/snippets/magic.gen.js

@@ -1,4 +1,4 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
 const spellNames = [
 	'Astral Rite of Acne',
@@ -48,7 +48,7 @@ const spellNames = [
 	'Ultimate Ritual of Mouthwash',
 ];
 
-module.exports = {
+export default {
 
 	spellList : function(){
 		const levels = ['Cantrips (0 Level)', '1st Level', '2nd Level', '3rd Level', '4th Level', '5th Level', '6th Level', '7th Level', '8th Level', '9th Level'];

themes/Legacy/5ePHB/snippets/monsterblock.gen.js

@@ -1,4 +1,4 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
 const genList = function(list, max){
 	return _.sampleSize(list, _.random(0, max)).join(', ') || 'None';
@@ -137,7 +137,7 @@ const genAction = function(){
 };
 
 
-module.exports = {
+export default {
 
 	full : function(){
 		return `${[