Merge pull request #4607 from naturalcrit/change-imports-from-absolute-to-relative

change imports

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';
 

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

@@ -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/splitPane/splitPane.jsx

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

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,20 +1,19 @@
 /*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';
@@ -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/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,4 +1,4 @@
-require('./notificationPopup.less');
+import './notificationPopup.less';
 import React, { useEffect, useState } from 'react';
 import request from '../../utils/request-middleware.js';
 import Markdown from 'markdown.js';
@@ -62,4 +62,4 @@ const NotificationPopup = ()=>{
 	</Dialog>;
 };
 
-module.exports = NotificationPopup;
+export default NotificationPopup;

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/metadataEditor/metadataEditor.jsx

@@ -1,19 +1,18 @@
 /* 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';
 
-
+import Themes from 'themes/themes.json';
-const Themes = require('themes/themes.json');
+import validations from './validations.js';
-const validations = require('./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 +20,7 @@ const callIfExists = (val, fn, ...args)=>{
 	}
 };
 
-const MetadataEditor = createClass({
+const MetadataEditor = createReactClass({
 	displayName     : 'MetadataEditor',
 	getDefaultProps : function() {
 		return {
@@ -411,4 +410,4 @@ const MetadataEditor = createClass({
 	}
 });
 
-module.exports = MetadataEditor;
+export default MetadataEditor;

client/homebrew/editor/metadataEditor/validations.js

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

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/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';

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 {
@@ -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/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,11 +1,11 @@
-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 {
@@ -49,4 +49,4 @@ const Navbar = createClass({
 	}
 });
 
-module.exports = Navbar;
+export default Navbar;

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/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,25 +4,26 @@ 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';
@@ -30,7 +31,7 @@ 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';
@@ -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';
+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,25 +4,27 @@ 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';
@@ -230,4 +232,4 @@ const HomePage =(props)=>{
 	);
 };
 
-module.exports = HomePage;
+export default HomePage;

client/homebrew/pages/newPage/newPage.jsx

@@ -4,25 +4,26 @@ 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';
@@ -276,4 +277,4 @@ const NewPage = (props)=>{
 	);
 };
 
-module.exports = NewPage;
+export default NewPage;

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';
-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';
 
@@ -430,4 +429,4 @@ const VaultPage = (props)=>{
 	);
 };
 
-module.exports = VaultPage;
+export default VaultPage;

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

@@ -61,8 +61,11 @@
       "server"
     ],
     "transformIgnorePatterns": [
-      "node_modules/(?!nanoid/).*"
+      "node_modules/(?!(nanoid|@exodus/bytes|parse5)/)"
     ],
+    "transform": {
+      "^.+\\.js$": "babel-jest"
+    },
     "coveragePathIgnorePatterns": [
       "build/*"
     ],
@@ -100,7 +103,7 @@
     "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",
@@ -140,6 +143,7 @@
   },
   "devDependencies": {
     "@stylistic/stylelint-plugin": "^4.0.0",
+    "babel-jest": "^30.2.0",
     "babel-plugin-transform-import-meta": "^2.3.3",
     "eslint": "^9.39.1",
     "eslint-plugin-jest": "^29.1.0",
@@ -147,6 +151,7 @@
     "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",

shared/markdown.js

@@ -8,9 +8,9 @@ import MarkedAlignedParagraphs  from 'marked-alignment-paragraphs';
 import MarkedNonbreakingSpaces  from 'marked-nonbreaking-spaces';
 import MarkedSubSuperText       from 'marked-subsuper-text';
 import { markedVariables,
-				setMarkedVariablePage,
+	setMarkedVariablePage,
-				setMarkedVariable,
+	setMarkedVariable,
-				getMarkedVariable }  from 'marked-variables';
+	getMarkedVariable }  from 'marked-variables';
 import { markedSmartypantsLite as MarkedSmartypantsLite }                                from 'marked-smartypants-lite';
 import { gfmHeadingId as MarkedGFMHeadingId, resetHeadings as MarkedGFMResetHeadingIDs } from 'marked-gfm-heading-id';
 import { markedEmoji as MarkedEmojis }                                                   from 'marked-emoji';

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(

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/emojis.test.js

@@ -1,5 +1,5 @@
 import Markdown from '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/mustache-syntax.test.js

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

tests/markdown/variables.test.js

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

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){
+export default function(classname){
 
 	classname = _.sample(['archivist', 'fancyman', 'linguist', 'fletcher',
 		'notary', 'berserker-typist', 'fishmongerer', 'manicurist', 'haberdasher', 'concierge']);

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 = ()=>{
+export default ()=>{
 	return `<style>
   .phb#p1{ text-align:center; }
   .phb#p1:after{ display:none; }

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(){
+export default function(){
 
 	const classname = _.sample(['Archivist', 'Fancyman', 'Linguist', 'Fletcher',
 		'Notary', 'Berserker-Typist', 'Fishmongerer', 'Manicurist', 'Haberdasher', 'Concierge']);

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 `${[

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

@@ -1,4 +1,4 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
 const getTOC = (pages)=>{
 	const add1 = (title, page)=>{
@@ -47,7 +47,7 @@ const getTOC = (pages)=>{
 	return res;
 };
 
-module.exports = function(props){
+export default function(props){
 	const pages = props.brew.text.split('\\page');
 	const TOC = getTOC(pages);
 	const markdown = _.reduce(TOC, (r, g1, idx1)=>{

themes/V3/5eDMG/snippets.js

@@ -1,4 +1,4 @@
 
 
-module.exports = [
+export default [
 ];

themes/V3/5ePHB/snippets.js

@@ -1,17 +1,14 @@
 /* eslint-disable max-lines */
+import MagicGen         from './snippets/magic.gen.js';
+import ClassTableGen    from './snippets/classtable.gen.js';
+import MonsterBlockGen  from './snippets/monsterblock.gen.js';
+import scriptGen        from './snippets/script.gen.js';
+import ClassFeatureGen  from './snippets/classfeature.gen.js';
+import CoverPageGen     from './snippets/coverpage.gen.js';
+import QuoteGen 		from './snippets/quote.gen.js';
+import dedent           from 'dedent';
 
-const MagicGen           = require('./snippets/magic.gen.js');
+export default [
-const ClassTableGen      = require('./snippets/classtable.gen.js');
-const MonsterBlockGen    = require('./snippets/monsterblock.gen.js');
-const scriptGen          = require('./snippets/script.gen.js');
-const ClassFeatureGen    = require('./snippets/classfeature.gen.js');
-const CoverPageGen       = require('./snippets/coverpage.gen.js');
-const QuoteGen 			 = require('./snippets/quote.gen.js');
-const dedent             = require('dedent-tabs').default;
-
-
-
-module.exports = [
 	{
 		groupName : 'Style Editor',
 		icon      : 'fas fa-pencil-alt',

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

@@ -1,7 +1,7 @@
-const _ = require('lodash');
+import _ from 'lodash';
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent';
 
-module.exports = function(classname){
+export default function(classname){
 
 	classname = _.sample(['archivist', 'fancyman', 'linguist', 'fletcher',
 		'notary', 'berserker-typist', 'fishmongerer', 'manicurist', 'haberdasher', 'concierge']);

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

@@ -1,5 +1,5 @@
-const _ = require('lodash');
+import _ from 'lodash';
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent';
 
 const features = [
 	'Astrological Botany',   'Biochemical Sorcery',   'Civil Divination',
@@ -18,7 +18,7 @@ const classnames = [
 	'Haberdasher', 'Manicurist', 'Netrunner', 'Weirkeeper'
 ];
 
-module.exports = {
+export default {
 	non : function(snippetClasses){
 		return dedent`
 		{{${snippetClasses}

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

@@ -1,5 +1,5 @@
-const _ = require('lodash');
+import _ from 'lodash';
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent';
 
 const titles = [
 	'The Burning Gallows',                    'The Ring of Nenlast',
@@ -78,7 +78,7 @@ const coverText = [
 	'Enter a world of wonder and danger, where you can find allies and enemies among the various races and factions that inhabit it. You can choose to join or oppose any of them, or forge your own path. The game world is alive and responsive to your actions.'
 ];
 
-module.exports = {
+export default {
 
 	front : function() {
 		return dedent`

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

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

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

@@ -1,4 +1,4 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
 const spellNames = [
 	'Astral Rite of Acne',
@@ -54,7 +54,7 @@ const itemNames = [
 	'Staff of Endless Confetti',
 ];
 
-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/V3/5ePHB/snippets/monsterblock.gen.js

@@ -1,5 +1,5 @@
-const _ = require('lodash');
+import _ from 'lodash';
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent';
 
 const genList = function(list, max){
 	return _.sampleSize(list, _.random(0, max)).join(', ') || 'None';
@@ -152,7 +152,7 @@ const genAction = function(){
 };
 
 
-module.exports = {
+export default {
 
 	monster : function(classes, genLines){
 		return dedent`

themes/V3/5ePHB/snippets/quote.gen.js

@@ -1,4 +1,4 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
 const quotes = [
 	'The sword glinted in the dim light, its edges keen and deadly. As the adventurer reached for it, he couldn\'t help but feel a surge of excitement mixed with fear. This was no ordinary blade.',
@@ -40,7 +40,7 @@ const books = [
 	'Frost and Fury',
 
 ];
-module.exports = ()=>{
+export default ()=>{
 	return `
 {{quote
 ${_.sample(quotes)}

themes/V3/5ePHB/snippets/script.gen.js

@@ -1,7 +1,7 @@
-const _ = require('lodash');
+import _ from 'lodash';
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent';
 
-module.exports = {
+export default {
 	dwarvish : ()=>{
 		return dedent `##### Dwarvish Runes: Sample Alphabet
             {{runeTable,wide,frame,font-family:Davek

themes/V3/5ePHB/snippets/watercolor.gen.js

@@ -1,5 +1,5 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
-module.exports = ()=>{
+export default ()=>{
 	return `{{watercolor${_.random(1, 12)},top:20px,left:30px,width:300px,background-color:#BBAD82,opacity:80%}}\n\n`;
 };

themes/V3/Blank/snippets.js

@@ -1,19 +1,18 @@
 /* eslint-disable max-lines */
+import dedent                    from 'dedent';
+import WatercolorGen 			 from './snippets/watercolor.gen.js';
+import ImageMaskGen              from './snippets/imageMask.gen.js';
+import FooterGen                 from './snippets/footer.gen.js';
+import LicenseGenWotC            from './snippets/licenseWotC.gen.js';
+import LicenseGenGNU             from './snippets/licenseGNU.gen.js';
+import LicenseGen 			     from './snippets/license.gen.js';
+import LicenseGenAelf            from './snippets/licenseAELF.js';
+import LicenseDTTRPGGCC          from './snippets/licenseDTRPGCC.gen.js';
+import LicenseMongoosePublishing from './snippets/licenseMongoose.gen.js';
+import TableOfContentsGen        from './snippets/tableOfContents.gen.js';
+import indexGen                  from './snippets/index.gen.js';
 
-const WatercolorGen 			= require('./snippets/watercolor.gen.js');
+export default [
-const ImageMaskGen              = require('./snippets/imageMask.gen.js');
-const FooterGen                 = require('./snippets/footer.gen.js');
-const LicenseGenWotC            = require('./snippets/licenseWotC.gen.js');
-const LicenseGenGNU             = require('./snippets/licenseGNU.gen.js');
-const LicenseGen 			    = require('./snippets/license.gen.js');
-const LicenseGenAelf            = require('./snippets/licenseAELF.js');
-const LicenseDTTRPGGCC          = require('./snippets/licenseDTRPGCC.gen.js');
-const LicenseMongoosePublishing = require('./snippets/licenseMongoose.gen.js');
-const dedent                    = require('dedent-tabs').default;
-const TableOfContentsGen        = require('./snippets/tableOfContents.gen.js');
-const indexGen                  = require('./snippets/index.gen.js');
-
-module.exports = [
 
 	{
 		groupName : 'Text Editor',
@@ -209,7 +208,7 @@ module.exports = [
 		view      : 'text',
 		snippets  : [
 			{
-				name : 'AELF',
+				name        : 'AELF',
 				subsnippets : [
 					{
 						name : 'Title Page Declaration',
@@ -329,51 +328,51 @@ module.exports = [
 				]
 			},
 			{
-				name  : 'DTRPG Community Content',
+				name        : 'DTRPG Community Content',
-				incon : 'fab fa-dtrpg',
+				incon       : 'fab fa-dtrpg',
 				subsnippets : [
 					{
-						name : "Chronicle System Guild Colophon",
+						name : 'Chronicle System Guild Colophon',
 						gen	 : LicenseDTTRPGGCC.greenRoninChronicleSystemGuildColophon,
 					},
 
 					{
-						name : 'Green Ronin\'s Age Creator\'s Alliance',
+						name        : 'Green Ronin\'s Age Creator\'s Alliance',
 						subsnippets : [
 							{
-								name : "Required Text",
+								name        : 'Required Text',
 								subsnippets : [
 									{
-										name : "Colophon",
+										name : 'Colophon',
 										gen	 : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceColophon,
 									},
 
 									{
-										name : "Cover",
+										name : 'Cover',
 										gen	 : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceCover,
 									},
 								]
 							},
 							{
-								name : "Logos",
+								name        : 'Logos',
 								subsnippets : [
 									{
-										name : "Age",
+										name : 'Age',
 										gen	 : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceLogo,
 									},
 
 									{
-										name : "Blue Rose",
+										name : 'Blue Rose',
 										gen	 : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceBlueRoseLogo,
 									},
 
 									{
-										name : "Fantasy Age Compatible",
+										name : 'Fantasy Age Compatible',
 										gen	 : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceFantasyAgeCompatible,
 									},
 
 									{
-										name : "Modern AGE Compatible",
+										name : 'Modern AGE Compatible',
 										gen	 : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceModernAGECompatible,
 									},
 								]
@@ -382,30 +381,30 @@ module.exports = [
 					},
 
 					{
-						name : "Hero Kid\'s Creators Guild",
+						name        : 'Hero Kid\'s Creators Guild',
 						subsnippets : [
 
 							{
-								name: "Required Text",
+								name        : 'Required Text',
 								subsnippets : [
-							
+
 									{
-										name : "heroForgeHeroKidsCreatorsGuildColophon",
+										name : 'heroForgeHeroKidsCreatorsGuildColophon',
 										gen	 : LicenseDTTRPGGCC.heroForgeHeroKidsCreatorsGuildColophon,
 									},
 
 									{
-										name : "heroForgeHeroKidsCreatorsGuildSuperKidsColophon",
+										name : 'heroForgeHeroKidsCreatorsGuildSuperKidsColophon',
 										gen	 : LicenseDTTRPGGCC.heroForgeHeroKidsCreatorsGuildSuperKidsColophon,
 									},
 
 									{
-										name : "heroForgeHeroKidsCreatorsGuildCover",
+										name : 'heroForgeHeroKidsCreatorsGuildCover',
 										gen	 : LicenseDTTRPGGCC.heroForgeHeroKidsCreatorsGuildCover,
 									},
 
 									{
-										name : "heroForgeHeroKidsCreatorsGuildSuperKidsCover",
+										name : 'heroForgeHeroKidsCreatorsGuildSuperKidsCover',
 										gen	 : LicenseDTTRPGGCC.heroForgeHeroKidsCreatorsGuildSuperKidsCover,
 									},
 								]
@@ -414,33 +413,33 @@ module.exports = [
 					},
 
 					{
-						name : "Travellers' Aid Society",
+						name        : 'Travellers\' Aid Society',
 						subsnippets : [
 							{
-								name : "Legal Statement",
+								name : 'Legal Statement',
 								gen  : LicenseMongoosePublishing.TASLegal,
 							}
 						]
 					},
-          
+
 					{
-						name : "Super-Powered by M&M",
+						name        : 'Super-Powered by M&M',
 						subsnippets : [
 							{
-								name : "Required Text",
+								name        : 'Required Text',
 								subsnippets : [
 									{
-										name : "Colophon",
+										name : 'Colophon',
 										gen	 : LicenseDTTRPGGCC.greenRoninSuperPoweredMMColophon,
 									},
 
 									{
-										name : "Cover",
+										name : 'Cover',
 										gen	 : LicenseDTTRPGGCC.greenRoninSuperPoweredMMCover,
 									},
 
 									{
-										name : "Section 15",
+										name : 'Section 15',
 										gen	 : LicenseDTTRPGGCC.greenRoninSuperPoweredMMSection15,
 									},
 								]

themes/V3/Blank/snippets/footer.gen.js

@@ -1,6 +1,6 @@
 import Markdown from '../../../../shared/markdown.js';
 
-module.exports = {
+export default {
 	createFooterFunc : function(headerSize=1){
 		return (props)=>{
 			const cursorPos = props.cursorPos;

themes/V3/Blank/snippets/imageMask.gen.js

@@ -1,7 +1,7 @@
-const _ = require('lodash');
+import _ from 'lodash';
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent';
 
-module.exports = {
+export default {
 	center : ()=>{
 		return dedent`
 			{{imageMaskCenter${_.random(1, 16)},--offsetX:0%,--offsetY:0%,--rotation:0

themes/V3/Blank/snippets/index.gen.js

@@ -1,6 +1,6 @@
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent';
 
-module.exports = ()=>{
+export default ()=>{
 	return dedent`
 	{{index,wide,columns:5;
 	##### Index

themes/V3/Blank/snippets/license.gen.js

@@ -1,11 +1,11 @@
-/* eslint-disable max-lines */
+
-const dedent = require('dedent');
+import dedent from 'dedent';
 
 // Small and one-off licenses
-// Licenses in this file consist of one or two functions at most. If something is larger, 
+// Licenses in this file consist of one or two functions at most. If something is larger,
 // has more assets, or variations, break it out into a distinct file.
 
-module.exports = {
+export default {
 
 	mit : function () {
 		return dedent`
@@ -35,28 +35,28 @@ module.exports = {
         }}
         `;
 	},
-	cczero           : `<i class="far fa-copyright"></i> \<year\> This work is openly licensed via [CC0](https://creativecommons.org/publicdomain/zero/1.0/)\n\n`,
+	cczero                    : `<i class="far fa-copyright"></i> \<year\> This work is openly licensed via [CC0](https://creativecommons.org/publicdomain/zero/1.0/)\n\n`,
-	ccby             : `<i class="far fa-copyright"></i> \<year\> This work is openly licensed via [CC BY 4.0](https://creativecommons.org/publicdomain/by/4.0/)\n\n`,
+	ccby                      : `<i class="far fa-copyright"></i> \<year\> This work is openly licensed via [CC BY 4.0](https://creativecommons.org/publicdomain/by/4.0/)\n\n`,
-	ccbysa           : `<i class="far fa-copyright"></i> \<year\> This work is openly licensed via [CC BY-SA 4.0](https://creativecommons.org/publicdomain/by-sa/4.0/)\n\n`,
+	ccbysa                    : `<i class="far fa-copyright"></i> \<year\> This work is openly licensed via [CC BY-SA 4.0](https://creativecommons.org/publicdomain/by-sa/4.0/)\n\n`,
-	ccbync           : `<i class="far fa-copyright"></i> \<year\> This work is openly licensed via [CC BY-NC 4.0](https://creativecommons.org/publicdomain/by-nc/4.0/)\n\n`,
+	ccbync                    : `<i class="far fa-copyright"></i> \<year\> This work is openly licensed via [CC BY-NC 4.0](https://creativecommons.org/publicdomain/by-nc/4.0/)\n\n`,
-	ccbyncsa         : `<i class="far fa-copyright"></i> \<year\> This work is openly licensed via [CC BY-NC-SA](https://creativecommons.org/publicdomain/by-nc-sa/4.0/)\n\n`,
+	ccbyncsa                  : `<i class="far fa-copyright"></i> \<year\> This work is openly licensed via [CC BY-NC-SA](https://creativecommons.org/publicdomain/by-nc-sa/4.0/)\n\n`,
-	ccbynd           : `<i class="far fa-copyright"></i> \<year\> This work is openly licensed via [CC BY-ND 4.0](https://creativecommons.org/publicdomain/by-nd/4.0/)\n\n`,
+	ccbynd                    : `<i class="far fa-copyright"></i> \<year\> This work is openly licensed via [CC BY-ND 4.0](https://creativecommons.org/publicdomain/by-nd/4.0/)\n\n`,
-	ccbyncnd         : `<i class="far fa-copyright"></i> \<year\> This work is openly licensed via [CC NY-NC-ND 4.0](https://creativecommons.org/publicdomain/by-nc-nd/4.0/)\n\n`,
+	ccbyncnd                  : `<i class="far fa-copyright"></i> \<year\> This work is openly licensed via [CC NY-NC-ND 4.0](https://creativecommons.org/publicdomain/by-nc-nd/4.0/)\n\n`,
-	cczeroBadge      : `![CC0](http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)`,
+	cczeroBadge               : `![CC0](http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)`,
-	ccbyBadge        : `![CC BY](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by.svg)`,
+	ccbyBadge                 : `![CC BY](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by.svg)`,
-	ccbysaBadge      : `![CC BY-SA](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by-sa.svg)`,
+	ccbysaBadge               : `![CC BY-SA](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by-sa.svg)`,
-	ccbyncBadge      : `![CC BY-NC](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by-nc.svg)`,
+	ccbyncBadge               : `![CC BY-NC](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by-nc.svg)`,
-	ccbyncsaBadge    : `![CC BY-NC-SA](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by-nc-sa.svg)`,
+	ccbyncsaBadge             : `![CC BY-NC-SA](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by-nc-sa.svg)`,
-	ccbyndBadge      : `![CC BY-ND](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by-nd.svg)`,
+	ccbyndBadge               : `![CC BY-ND](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by-nd.svg)`,
-	ccbyncndBadge    : `![CC BY-NC-ND](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by-nc-nd.svg)`,
+	ccbyncndBadge             : `![CC BY-NC-ND](https://mirrors.creativecommons.org/presskit/buttons/88x31/svg/by-nc-nd.svg)`,
-	shadowDarkNotice : `\[Product Name]\ is an independent product published under the Shadowdark RPG Third-Party License and is not affiliated with The Arcane Library, LLC. Shadowdark RPG © 2023 The Arcane Library, LLC.\n`,
+	shadowDarkNotice          : `\[Product Name]\ is an independent product published under the Shadowdark RPG Third-Party License and is not affiliated with The Arcane Library, LLC. Shadowdark RPG © 2023 The Arcane Library, LLC.\n`,
-	shadowDarkBlack  : `![Shadowdark Black Logo](/assets/license_logos/The-Arcane-Library_Third-Party-License_Black.png){width:200px}`,
+	shadowDarkBlack           : `![Shadowdark Black Logo](/assets/license_logos/The-Arcane-Library_Third-Party-License_Black.png){width:200px}`,
-	shadowDarkWhite  : `![Shadowdark White Logo](/assets/license_logos/The-Arcane-Library_Third-Party-License_White.png){width:200px}`,
+	shadowDarkWhite           : `![Shadowdark White Logo](/assets/license_logos/The-Arcane-Library_Third-Party-License_White.png){width:200px}`,
-	bladesDarkNotice : `This work is based on Blades in the Dark \(found at (http://www.bladesinthedark.com/)\), product of One Seven Design, developed and authored by John Harper, and licensed for our use under the Creative Commons Attribution 3.0 Unported license \(http://creativecommons.org/licenses/by/3.0/\).\n`,
+	bladesDarkNotice          : `This work is based on Blades in the Dark \(found at (http://www.bladesinthedark.com/)\), product of One Seven Design, developed and authored by John Harper, and licensed for our use under the Creative Commons Attribution 3.0 Unported license \(http://creativecommons.org/licenses/by/3.0/\).\n`,
-	bladesDarkLogo   : `![Forged in the Dark](/assets/license_logos/Evil-Hat_Forged-In-The-Dark_Logo-V2.png)`,
+	bladesDarkLogo            : `![Forged in the Dark](/assets/license_logos/Evil-Hat_Forged-In-The-Dark_Logo-V2.png)`,
 	bladesDarkLogoAttribution : `*Blades in the Dark^tm^ is a trademark of One Seven Design. The Forged in the Dark Logo is © One Seven Design, and is used with permission.*`,
-	iconsCompatibility : 'Compatibility with Icons requires Icons Superpowered Roleplaying from Ad Infinitum Adventures. Ad Infinitum Adventures does not guarantee compatibility, and does not endorse this product.',
+	iconsCompatibility        : 'Compatibility with Icons requires Icons Superpowered Roleplaying from Ad Infinitum Adventures. Ad Infinitum Adventures does not guarantee compatibility, and does not endorse this product.',
-	iconsTrademark   : 'Icons Superpowered Roleplaying is a trademark of Steve Kenson, published exclusively by Ad Infinitum Adventures. The Icons Superpowered Roleplaying Compatibility Logo is a trademark of Ad Infinitum Adventures and is used under the Icons Superpowered Roleplaying Compatibility License.',
+	iconsTrademark            : 'Icons Superpowered Roleplaying is a trademark of Steve Kenson, published exclusively by Ad Infinitum Adventures. The Icons Superpowered Roleplaying Compatibility Logo is a trademark of Ad Infinitum Adventures and is used under the Icons Superpowered Roleplaying Compatibility License.',
-	icondsSection15  : 'Open Game License v 1.0, Copyright 2000, Wizards of the Coast, Inc.\n::\nFudge System Reference Document, Copyright 2005, Grey Ghost Press, Inc.; Authors Steffan O\’Sullivan and Ann Dupuis, with additional material by Peter Bonney, Deird’Re Brooks, Reimer Behrends, Shawn Garbett, Steven Hammond, Ed Heil, Bernard Hsiung, Sedge Lewis, Gordon McCormick, Kent Matthewson, Peter Mikelsons, Anthony Roberson, Andy Skinner, Stephan Szabo, John Ughrin, Dmitri Zagidulin\n::\nFATE (Fantastic Adventures in Tabletop Entertainment), Copyright 2003 by Evil Hat Productions LLC; Authors Robert Donoghue and Fred Hicks\n::\nSpirit of the Century, Copyright 2006, Evil Hat Productions LLC. Authors Robert Donoghue, Fred Hicks, and Leonard Balsera.\n::\nIcons, Copyright 2010, Ad Infinitum Adventures; Author Steve Kenson.\n',
+	icondsSection15           : 'Open Game License v 1.0, Copyright 2000, Wizards of the Coast, Inc.\n::\nFudge System Reference Document, Copyright 2005, Grey Ghost Press, Inc.; Authors Steffan O\’Sullivan and Ann Dupuis, with additional material by Peter Bonney, Deird’Re Brooks, Reimer Behrends, Shawn Garbett, Steven Hammond, Ed Heil, Bernard Hsiung, Sedge Lewis, Gordon McCormick, Kent Matthewson, Peter Mikelsons, Anthony Roberson, Andy Skinner, Stephan Szabo, John Ughrin, Dmitri Zagidulin\n::\nFATE (Fantastic Adventures in Tabletop Entertainment), Copyright 2003 by Evil Hat Productions LLC; Authors Robert Donoghue and Fred Hicks\n::\nSpirit of the Century, Copyright 2006, Evil Hat Productions LLC. Authors Robert Donoghue, Fred Hicks, and Leonard Balsera.\n::\nIcons, Copyright 2010, Ad Infinitum Adventures; Author Steve Kenson.\n',
-	iconsCompatibilityLogo : '![Icons Compatibility Logo](/assets/license_logos/Ad-Infinitum-Adventures_Icons-Compatibility-License_Logo.png){width:200px}'
+	iconsCompatibilityLogo    : '![Icons Compatibility Logo](/assets/license_logos/Ad-Infinitum-Adventures_Icons-Compatibility-License_Logo.png){width:200px}'
 };

themes/V3/Blank/snippets/licenseAELF.js

@@ -1,9 +1,9 @@
-/* eslint-disable max-lines */
+
-const dedent = require('dedent');
+import dedent from 'dedent';
 
 // AELF License
 
-module.exports = {
+export default {
 	aelfTitleNotice : function() {
 		return `This work includes AELF Open Gaming Content, which may only be used under the terms of the AELF Open License version 1.0a. This product is not endorsed or reviewed by Mythmere Games LLC or any other contributor of AELF Open Gaming Content and does not represent the views of Mythmere Games LLC any other contributor.`;
 	},

themes/V3/Blank/snippets/licenseDTRPGCC.gen.js

@@ -1,9 +1,9 @@
-/* eslint-disable max-lines */
+
-const dedent = require('dedent');
+import dedent from 'dedent';
 
 // DriveThruRPG/OneBookShelf Community Content Programs
 
-module.exports = {
+export default {
 	// Alligator Alley Entertainment  Starforger's Guild
 	alligatorAlleyEntertainmentStarforgersGuildColophon : function() {
 		return dedent `
@@ -168,8 +168,8 @@ module.exports = {
 		`;
 	},
 	// Monte Cook's Cypher License
-	monteCookCypherCover                 : `Requires the Cypher System Rulebook from Monte Cook Games. Distributed through the Cypher System CreatorTM at DriveThruRPG.`,
+	monteCookCypherCover    : `Requires the Cypher System Rulebook from Monte Cook Games. Distributed through the Cypher System CreatorTM at DriveThruRPG.`,
-	monteCookCypherColophon              : function() {
+	monteCookCypherColophon : function() {
 		return dedent`
 		This product was created under license. CYPHER SYSTEM and its logo, and CYPHER SYSTEM CREATOR and its logo, are trademarks of Monte Cook Games, LLC in the U.S.A. and other countries. All Monte Cook Games characters and character names, and the distinctive likenesses thereof, are trademarks of Monte Cook Games, LLC. [](www.montecookgames.com)
 
@@ -179,10 +179,10 @@ module.exports = {
 		`;
 	},
 	// Verify Logo redistribution
-	monteCookLogoDarkLarge              : `![Cypher System Compatible](/assets/license_logos/CSCDarkLarge.png)`,
+	monteCookLogoDarkLarge     : `![Cypher System Compatible](/assets/license_logos/CSCDarkLarge.png)`,
-	monteCookLogoDarkSmall              : `![Cypher System Compatible](/assets/license_logos/CSCDarkSmall.png)`,
+	monteCookLogoDarkSmall     : `![Cypher System Compatible](/assets/license_logos/CSCDarkSmall.png)`,
-	monteCookLogoLightLarge             : `![Cypher System Compatible](/assets/license_logos/CSCLightLarge.png)`,
+	monteCookLogoLightLarge    : `![Cypher System Compatible](/assets/license_logos/CSCLightLarge.png)`,
-	monteCookLogoLightSmall             : `![Cypher System Compatible](/assets/license_logos/CSCLightSmall.png)`,
+	monteCookLogoLightSmall    : `![Cypher System Compatible](/assets/license_logos/CSCLightSmall.png)`,
 	// Onyx Path Canis Minor - Verify logos and access
 	onyxPathCanisMinorColophon : function () {
 		return dedent`

themes/V3/Blank/snippets/licenseGNU.gen.js

@@ -1,9 +1,9 @@
 /* eslint-disable max-lines */
-const dedent = require('dedent');
+import dedent from 'dedent';
 
 // GNU Licenses
 
-module.exports = {
+export default {
 
 	gpl3 : function () {
 		return dedent`{{license,wide

themes/V3/Blank/snippets/licenseMongoose.gen.js

@@ -1,9 +1,9 @@
-/* eslint-disable max-lines */
+
-const dedent = require('dedent');
+import dedent from 'dedent';
 
 // Mongoose Publishing Licenses
 
-module.exports = {
+export default {
 	fairUseLong : function() {
 		return `The Traveller, 2300AD and Twilight: 2000 games in all forms are owned by Mongoose Publishing. Copyright 1977 - 2025 Mongoose Publishing. Traveller is a registered trademark of Mongoose Publishing. Mongoose Publishing permits web sites and fanzines for this game, provided it contains this notice, that Mongoose Publishing is notified, and subject to a withdrawal of permission on 90 days notice. The contents of this site are for personal, non-commercial use only. Any use of Mongoose Publishing's copyrighted material or trademarks anywhere on this web site and its files should not be viewed as a challenge to those copyrights or trademarks. In addition, any program/articles/file on this site cannot be republished or distributed without the consent of the author who contributed it.\n\n`;
 	},

themes/V3/Blank/snippets/licenseWotC.gen.js

@@ -1,7 +1,7 @@
-/* eslint-disable max-lines */
-const dedent = require('dedent');
 
-module.exports = {
+import dedent from 'dedent';
+
+export default {
 	ogl1a : function () {
 		return dedent`
 			{{license,wide

themes/V3/Blank/snippets/tableOfContents.gen.js

@@ -1,4 +1,4 @@
-const dedent = require('dedent-tabs').default;
+import dedent from 'dedent';
 
 // Map each actual page to its footer label, accounting for skips or numbering resets
 const mapPages = (pages)=>{
@@ -65,7 +65,7 @@ const getTOC = ()=>{
 	return getMarkdown(headings, pageMap);
 };
 
-module.exports = function(props){
+export default function(props){
 	const TOC = getTOC();
 
 	return dedent`

themes/V3/Blank/snippets/watercolor.gen.js

@@ -1,5 +1,5 @@
-const _ = require('lodash');
+import _ from 'lodash';
 
-module.exports = ()=>{
+export default ()=>{
 	return `{{watercolor${_.random(1, 12)},top:20px,left:30px,width:300px,background-color:#BBAD82,opacity:80%}}\n\n`;
 };

themes/V3/Journal/snippets.js

@@ -1,4 +1,4 @@
 
 
-module.exports = [
+export default [
 ];