fix a few issues

[Widgets] clean up codeEditor

.circleci/config.yml

@@ -5,12 +5,12 @@
 version: 2.1
 
 orbs:
-  node: circleci/node@5.1.0
+  node: circleci/node@3.0.0
 
 jobs:
   build:
     docker:
-      - image: cimg/node:20.8.0
+      - image: cimg/node:16.11.0
       - image: mongo:4.4
 
     working_directory: ~/homebrewery
@@ -27,7 +27,7 @@ jobs:
           # fallback to using the latest cache if no exact match is found
           - v1-dependencies-
 
-      - run: sudo npm install -g npm@10.2.0
+      - run: sudo npm install -g npm@8.10.0
       - node/install-packages:
           app-dir: ~/homebrewery
           cache-path: node_modules
@@ -45,7 +45,7 @@ jobs:
 
   test:
     docker:
-      - image: cimg/node:20.8.0
+      - image: cimg/node:16.11.0
 
     working_directory: ~/homebrewery
     parallelism: 1

changelog.md

@@ -80,104 +80,6 @@ pre {
 ## changelog
 For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
 
-### Friday 13/10/2023 - v3.10.0
-{{taskList
-
-##### G-Ambatte
-
-* [x] Fix user preferred save location being ignored
-
-Fixes issue [#2993](https://github.com/naturalcrit/homebrewery/issues/2993)
-
-* [x] Fix crash to white screen when starting new brews while not signed in
-
-Fixes issue [#2999](https://github.com/naturalcrit/homebrewery/issues/2999)
-
-* [x] Fix FreeBSD install script 
-
-Fixes issue [#3005](https://github.com/naturalcrit/homebrewery/issues/3005)
-
-* [x] Fix *"This brew has been changed on another device"* triggering when manually saving during auto-save
-
-Fixes issue [#2641](https://github.com/naturalcrit/homebrewery/issues/2641)
-
-* [x] Fix Firefox different column-flow behavior
-
-Fixes issue [#2982](https://github.com/naturalcrit/homebrewery/issues/2982)
-
-* [x] Fix brew titles being mis-sorted on user page
-
-Fixes issue [#2775](https://github.com/naturalcrit/homebrewery/issues/2775)
-
-* [x] Text Editor themes now available via new drop-down
-
-Fixes issue [#362](https://github.com/naturalcrit/homebrewery/issues/362)
-
-##### 5e-Cleric
-
-* [x] New {{openSans **PHB → {{fas,fa-quote-right}} QUOTE**  }} snippet for V3!
-
-Fixes issue [#2920](https://github.com/naturalcrit/homebrewery/issues/2920)
-
-* [x] Several updates and fixes to FAQ and Welcome page
-
-Fixes issue [#2729](https://github.com/naturalcrit/homebrewery/issues/2729),
-[#2787](https://github.com/naturalcrit/homebrewery/issues/2787)
-
-##### Gazook89
-
-* [x] Add syntax highlighting for Definition Lists <code>:\:</code>
-}}
-
-
-### Thursday 17/08/2023 - v3.9.2
-{{taskList
-
-##### Calculuschild
-
-* [x] Fix links to certain old Google Drive files
-
-Fixes issue [#2917](https://github.com/naturalcrit/homebrewery/issues/2917)
-
-##### G-Ambatte
-
-* [x] Menus now open on click, and internally consistent
-
-Fixes issue [#2702](https://github.com/naturalcrit/homebrewery/issues/2702), [#2782](https://github.com/naturalcrit/homebrewery/issues/2782) 
-
-* [x] Add smarter footer snippet
-
-Fixes issue [#2289](https://github.com/naturalcrit/homebrewery/issues/2289) 
-
-* [x] Add sanitization in Style editor
-
-Fixes issue [#1437](https://github.com/naturalcrit/homebrewery/issues/1437) 
-
-* [x] Rework class table snippets to remove unnecessary randomness
-
-Fixes issue [#2964](https://github.com/naturalcrit/homebrewery/issues/2964) 
-
-* [x] Add User Page link to Google Drive file for file owners, add icons for additional storage locations
-
-Fixes issue [#2954](https://github.com/naturalcrit/homebrewery/issues/2954) 
-
-* [x] Add default save location selection to Account Page
-
-Fixes issue [#2943](https://github.com/naturalcrit/homebrewery/issues/2943) 
-
-##### 5e-Cleric
-
-* [x] Exclude cover pages from Table of Content generation (editing on mobile is still not recommended)
-
-Fixes issue [#2920](https://github.com/naturalcrit/homebrewery/issues/2920)
-
-##### Gazook89
-
-* [x] Adjustments to improve mobile viewing
-}}
-
-
-
 ### Wednesday 28/06/2023 - v3.9.1
 {{taskList
 
@@ -222,8 +124,6 @@ Fixes issue [#2790](https://github.com/naturalcrit/homebrewery/issues/2790)
 Fixes issue [#2784](https://github.com/naturalcrit/homebrewery/issues/2784) 
 }}
 
-\page
-
 ### Wednesday 12/04/2023 - v3.8.0
 {{taskList
 
@@ -285,6 +185,8 @@ Fixes issues [#2731](https://github.com/naturalcrit/homebrewery/issues/2731)
 
 }}
 
+\page
+
 ### Monday 13/03/2023 - v3.7.2
 {{taskList
 
@@ -365,11 +267,7 @@ Fixes issues [#2603](https://github.com/naturalcrit/homebrewery/issues/2603)
 * [x] Add message to refresh the browser if the user is missing an update to the Homebrewery
 
 Fixes issues [#2583](https://github.com/naturalcrit/homebrewery/issues/2583)
-}}
 
-\page
-
-{{taskList
 ##### G-Ambatte
 
 * [x] Auto-compile Themes CSS on development server
@@ -379,6 +277,7 @@ Fixes issues [#2583](https://github.com/naturalcrit/homebrewery/issues/2583)
 * [x] Fix cloned brews inheriting the parent view count
 }}
 
+\page
 
 ### Friday 23/12/2022 - v3.5.0
 {{taskList

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -147,11 +147,11 @@ const BrewRenderer = createClass({
 	},
 
 	renderPage : function(pageText, index){
-		let cleanPageText = this.sanitizeScriptTags(pageText);
+		const cleanPageText = this.sanitizeScriptTags(pageText);
 		if(this.props.renderer == 'legacy')
 			return <div className='phb page' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(cleanPageText) }} key={index} />;
 		else {
-			cleanPageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
+			pageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
 			return (
 				<div className='page' id={`p${index + 1}`} key={index} >
 					<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(cleanPageText) }} />

client/homebrew/editor/editor.jsx

@@ -10,8 +10,6 @@ const CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
 const SnippetBar = require('./snippetbar/snippetbar.jsx');
 const MetadataEditor = require('./metadataEditor/metadataEditor.jsx');
 
-const EDITOR_THEME_KEY = 'HOMEBREWERY-EDITOR-THEME';
-
 const SNIPPETBAR_HEIGHT = 25;
 const DEFAULT_STYLE_TEXT = dedent`
 				/*=======---  Example CSS styling  ---=======*/
@@ -36,14 +34,12 @@ const Editor = createClass({
 			onMetaChange  : ()=>{},
 			reportError   : ()=>{},
 
-			editorTheme : 'default',
+			renderer : 'legacy'
-			renderer    : 'legacy'
 		};
 	},
 	getInitialState : function() {
 		return {
-			editorTheme : this.props.editorTheme,
+			view : 'text' //'text', 'style', 'meta'
-			view        : 'text' //'text', 'style', 'meta'
 		};
 	},
 
@@ -55,13 +51,6 @@ const Editor = createClass({
 		this.updateEditorSize();
 		this.highlightCustomMarkdown();
 		window.addEventListener('resize', this.updateEditorSize);
-
-		const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY);
-		if(editorTheme) {
-			this.setState({
-				editorTheme : editorTheme
-			});
-		}
 	},
 
 	componentWillUnmount : function() {
@@ -149,17 +138,6 @@ const Editor = createClass({
 							codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
 						}
 
-						// definition lists
-						if(line.includes('::')){
-							const regex = /^([^\n]*?)::([^\n]*)(?:\n|$)/ym;
-							let match;
-							while ((match = regex.exec(line)) != null){
-								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[0]) }, { line: lineNumber, ch: line.indexOf(match[0]) + match[0].length }, { className: 'define' });
-								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length }, { className: 'term' });
-								codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[2]) }, { line: lineNumber, ch: line.indexOf(match[2]) + match[2].length }, { className: 'definition' });
-							}
-						}
-
 						// Highlight injectors {style}
 						if(line.includes('{') && line.includes('}')){
 							const regex = /(?:^|[^{\n])({(?=((?::(?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':{}\s]*)*))\2})/gm;
@@ -277,13 +255,6 @@ const Editor = createClass({
 		this.refs.codeEditor?.updateSize();
 	},
 
-	updateEditorTheme : function(newTheme){
-		window.localStorage.setItem(EDITOR_THEME_KEY, newTheme);
-		this.setState({
-			editorTheme : newTheme
-		});
-	},
-
 	//Called by CodeEditor after document switch, so Snippetbar can refresh UndoHistory
 	rerenderParent : function (){
 		this.forceUpdate();
@@ -298,8 +269,7 @@ const Editor = createClass({
 					view={this.state.view}
 					value={this.props.brew.text}
 					onChange={this.props.onTextChange}
-					editorTheme={this.state.editorTheme}
+					rerenderParent={this.rerenderParent}/>
-					rerenderParent={this.rerenderParent} />
 			</>;
 		}
 		if(this.isStyle()){
@@ -311,7 +281,6 @@ const Editor = createClass({
 					value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
 					onChange={this.props.onStyleChange}
 					enableFolding={false}
-					editorTheme={this.state.editorTheme}
 					rerenderParent={this.rerenderParent} />
 			</>;
 		}
@@ -355,8 +324,6 @@ const Editor = createClass({
 					undo={this.undo}
 					redo={this.redo}
 					historySize={this.historySize()}
-					currentEditorTheme={this.state.editorTheme}
-					updateEditorTheme={this.updateEditorTheme}
 					cursorPos={this.refs.codeEditor?.getCursorPosition() || {}} />
 
 				{this.renderEditor()}

client/homebrew/editor/editor.less

@@ -1,73 +1,65 @@
-@import 'themes/codeMirror/customEditorStyles.less';
+
-.editor {
+.editor{
 	position : relative;
 	width    : 100%;
 
-	.codeEditor {
+	.codeEditor{
 		height            : 100%;
-		.pageLine {
+		.pageLine{
 			background : #33333328;
-			border-top : #333399 solid 1px;
+			border-top : #339 solid 1px;
 		}
-		.editor-page-count {
+		.editor-page-count{
-			float : right;
 			color : grey;
+			float : right;
 		}
-		.columnSplit {
+		.columnSplit{
-			font-style        : italic;
+			font-style 			: italic;
-			color             : grey;
+			color 				: grey;
-			background-color  : fade(#229999, 15%);
+			background-color 	: fade(#299, 15%);
-			border-bottom     : #229999 solid 1px;
+			border-bottom    	: #299 solid 1px;
 		}
-		.define {
+		.block:not(.cm-comment){
-			&:not(.term):not(.definition) {
+			color 		: purple;
-				font-weight   : bold;
-				color         : #949494;
-				background    : #E5E5E5;
-				border-radius : 3px;
-			}
-			&.term { color : rgb(96, 117, 143); }
-			&.definition { color : rgb(97, 57, 178); }
-		}
-		.block:not(.cm-comment) {
 			font-weight : bold;
-			color       : purple;
 			//font-style: italic;
 		}
-		.inline-block:not(.cm-comment) {
+		.inline-block:not(.cm-comment){
+			color 		: red;
 			font-weight : bold;
-			color       : red;
 			//font-style: italic;
 		}
-		.injection:not(.cm-comment) {
+		.injection:not(.cm-comment){
-			font-weight : bold;
 			color       : green;
+			font-weight : bold;
 		}
 	}
 
-	.brewJump {
+	.brewJump{
-		position         : absolute;
+		position			: absolute;
-		right            : 20px;
+		background-color	: @teal;
-		bottom           : 20px;
+		cursor				: pointer;
-		z-index          : 1000000;
+		width 				: 30px;
-		display          : flex;
+		height 				: 30px;
-		align-items      : center;
+		display 			: flex;
-		justify-content  : center;
+		align-items 		: center;
-		width            : 30px;
+		bottom 				: 20px;
-		height           : 30px;
+		right 				: 20px;
-		cursor           : pointer;
+		z-index				: 1000000;
-		background-color : @teal;
+		justify-content		: center;
-		.tooltipLeft('Jump to brew page');
+		.tooltipLeft("Jump to brew page");
 	}
 
-	.editorToolbar {
+	.editorToolbar{
-		position  : absolute;
+		position: absolute;
-		top       : 5px;
+		top: 5px;
-		left      : 50%;
+		left: 50%;
-		z-index   : 9;
+		color: black;
-		font-size : 13px;
+		font-size: 13px;
-		color     : black;
+		z-index: 9;
-		span { padding : 2px 5px; }
+		span {
+			padding: 2px 5px;
+		}
 	}
 
 }

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -1,4 +1,3 @@
-/*eslint max-lines: ["warn", {"max": 250, "skipBlankLines": true, "skipComments": true}]*/
 require('./snippetbar.less');
 const React = require('react');
 const createClass = require('create-react-class');
@@ -16,8 +15,6 @@ ThemeSnippets['V3_5eDMG']     = require('themes/V3/5eDMG/snippets.js');
 ThemeSnippets['V3_Journal']   = require('themes/V3/Journal/snippets.js');
 ThemeSnippets['V3_Blank']     = require('themes/V3/Blank/snippets.js');
 
-const EditorThemes = require('build/homebrew/codeMirror/editorThemes.json');
-
 const execute = function(val, props){
 	if(_.isFunction(val)) return val(props);
 	return val;
@@ -27,26 +24,24 @@ const Snippetbar = createClass({
 	displayName     : 'SnippetBar',
 	getDefaultProps : function() {
 		return {
-			brew              : {},
+			brew            : {},
-			view              : 'text',
+			view            : 'text',
-			onViewChange      : ()=>{},
+			onViewChange    : ()=>{},
-			onInject          : ()=>{},
+			onInject        : ()=>{},
-			onToggle          : ()=>{},
+			onToggle        : ()=>{},
-			showEditButtons   : true,
+			showEditButtons : true,
-			renderer          : 'legacy',
+			renderer        : 'legacy',
-			undo              : ()=>{},
+			undo            : ()=>{},
-			redo              : ()=>{},
+			redo            : ()=>{},
-			historySize       : ()=>{},
+			historySize     : ()=>{},
-			updateEditorTheme : ()=>{},
+			cursorPos       : {}
-			cursorPos         : {}
 		};
 	},
 
 	getInitialState : function() {
 		return {
-			renderer      : this.props.renderer,
+			renderer : this.props.renderer,
-			themeSelector : false,
+			snippets : []
-			snippets      : []
 		};
 	},
 
@@ -100,31 +95,6 @@ const Snippetbar = createClass({
 		this.props.onInject(injectedText);
 	},
 
-	toggleThemeSelector : function(){
-		this.setState({
-			themeSelector : !this.state.themeSelector
-		});
-	},
-
-	changeTheme : function(e){
-		if(e.target.value == this.props.currentEditorTheme) return;
-		this.props.updateEditorTheme(e.target.value);
-
-		this.setState({
-			showThemeSelector : false,
-		});
-	},
-
-	renderThemeSelector : function(){
-		return <div className='themeSelector'>
-			<select value={this.props.currentEditorTheme} onChange={this.changeTheme} onMouseDown={(this.changeTheme)}>
-				{EditorThemes.map((theme, key)=>{
-					return <option key={key} value={theme}>{theme}</option>;
-				})}
-			</select>
-		</div>;
-	},
-
 	renderSnippetGroups : function(){
 		const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view);
 
@@ -154,12 +124,6 @@ const Snippetbar = createClass({
 				<i className='fas fa-redo' />
 			</div>
 			<div className='divider'></div>
-			<div className={`editorTool editorTheme ${this.state.themeSelector ? 'active' : ''}`}
-				onClick={this.toggleThemeSelector} >
-				<i className='fas fa-palette' />
-			</div>
-			{this.state.themeSelector && this.renderThemeSelector()}
-			<div className='divider'></div>
 			<div className={cx('text', { selected: this.props.view === 'text' })}
 				 onClick={()=>this.props.onViewChange('text')}>
 				<i className='fa fa-beer' />
@@ -232,4 +196,5 @@ const SnippetGroup = createClass({
 			</div>
 		</div>;
 	},
+
 });

client/homebrew/editor/snippetbar/snippetbar.less

@@ -46,15 +46,6 @@
 					color : black;
 				}
 			}
-			&.editorTheme{
-				.tooltipLeft('Editor Themes');
-				font-size : 0.75em;
-				color     : black;
-				&.active{
-					color : white;
-					background-color: black;
-				}
-			}
 			&.divider {
 				background: linear-gradient(#000, #000) no-repeat center/1px 100%;
 				width: 5px;
@@ -63,15 +54,6 @@
 				}
 			}
 		}
-		.themeSelector{
-			position: absolute;
-			left: -65px;
-			top: 30px;
-			z-index: 999;
-			width: 170px;
-			background-color: black;
-    		border-radius: 5px;
-		}
 	}
 	.snippetBarButton{
 		height         : @menuHeight;

client/homebrew/pages/accountPage/accountPage.jsx

@@ -16,8 +16,6 @@ const HelpNavItem = require('../../navbar/help.navitem.jsx');
 
 const NaturalCritIcon = require('naturalcrit/svg/naturalcrit.svg.jsx');
 
-let SAVEKEY = '';
-
 const AccountPage = createClass({
 	displayName     : 'AccountPage',
 	getDefaultProps : function() {
@@ -31,27 +29,6 @@ const AccountPage = createClass({
 			uiItems : this.props.uiItems
 		};
 	},
-	componentDidMount : function(){
-		if(!this.state.saveLocation && this.props.uiItems.username) {
-			SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${this.props.uiItems.username}`;
-			let saveLocation =  window.localStorage.getItem(SAVEKEY);
-			saveLocation = saveLocation ?? (this.state.uiItems.googleId ? 'GOOGLE-DRIVE' : 'HOMEBREWERY');
-			this.makeActive(saveLocation);
-		}
-	},
-
-	makeActive : function(newSelection){
-		if(this.state.saveLocation == newSelection) return;
-		window.localStorage.setItem(SAVEKEY, newSelection);
-		this.setState({
-			saveLocation : newSelection
-		});
-	},
-
-	renderButton : function(name, key, shouldRender=true){
-		if(!shouldRender) return;
-		return <button className={this.state.saveLocation==key ? 'active' :	''}	onClick={()=>{this.makeActive(key);}}>{name}</button>;
-	},
 
 	renderNavItems : function() {
 		return <Navbar>
@@ -84,11 +61,6 @@ const AccountPage = createClass({
 					</p>
 				}
 			</div>
-			<div className='dataGroup'>
-				<h4>Default Save Location</h4>
-				{this.renderButton('Homebrewery', 'HOMEBREWERY')}
-				{this.renderButton('Google Drive', 'GOOGLE-DRIVE', this.state.uiItems.googleId)}
-			</div>
 		</>;
 	},
 

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

@@ -7,7 +7,6 @@ const moment = require('moment');
 const request = require('../../../../utils/request-middleware.js');
 
 const googleDriveIcon = require('../../../../googleDrive.svg');
-const homebreweryIcon = require('../../../../thumbnail.png');
 const dedent = require('dedent-tabs').default;
 
 const BrewItem = createClass({
@@ -91,17 +90,11 @@ const BrewItem = createClass({
 		</a>;
 	},
 
-	renderStorageIcon : function(){
+	renderGoogleDriveIcon : function(){
-		if(this.props.brew.googleId) {
+		if(!this.props.brew.googleId) return;
-			return <span title={this.props.brew.webViewLink ? 'Your Google Drive Storage': 'Another User\'s Google Drive Storage'}>
-				<a href={this.props.brew.webViewLink} target='_blank'>
-					<img className='googleDriveIcon' src={googleDriveIcon} alt='googleDriveIcon' />
-				</a>
-			</span>;
-		}
 
-		return <span title='Homebrewery Storage'>
+		return <span>
-			<img className='homebreweryIcon' src={homebreweryIcon} alt='homebreweryIcon' />
+			<img className='googleDriveIcon' src={googleDriveIcon} alt='googleDriveIcon' />
 		</span>;
 	},
 
@@ -151,7 +144,7 @@ const BrewItem = createClass({
 					Last updated: ${moment(brew.updatedAt).local().format(dateFormatString)}`}>
 					<i className='fas fa-sync-alt' /> {moment(brew.updatedAt).fromNow()}
 				</span>
-				{this.renderStorageIcon()}
+				{this.renderGoogleDriveIcon()}
 			</div>
 
 			<div className='links'>

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

@@ -98,11 +98,4 @@
 		padding : 0px;
 		margin  : -5px;
 	}
-	.homebreweryIcon {
-		mix-blend-mode : darken;
-		height         : 24px;
-		position       : relative;
-		top            : 5px;
-		left           : -5px;
-	}
 }

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

@@ -89,7 +89,7 @@ const ListPage = createClass({
 	sortBrewOrder : function(brew){
 		if(!brew.title){brew.title = 'No Title';}
 		const mapping = {
-			'alpha'   : _.deburr(brew.title.trim().toLowerCase()),
+			'alpha'   : _.deburr(brew.title.toLowerCase()),
 			'created' : moment(brew.createdAt).format(),
 			'updated' : moment(brew.updatedAt).format(),
 			'views'   : brew.views,

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

@@ -16,23 +16,6 @@
 				margin        : 5px 0px;
 				border        : 2px solid black;
 				border-radius : 5px;
-				button {
-					background-color : transparent;
-					border           : 1px solid black;
-					border-radius    : 5px;
-					width            : 125px;
-					color            : black;
-					margin-right     : 5px;
-					&.active {
-						background-color: #0007;
-						color: white;
-						&:before {
-							content: '\f00c';
-    						font-family: 'FONT AWESOME 5 FREE';
-    						margin-right: 5px;
-						}
-					}
-				}
 			}
 			h1, h2, h3, h4 {
 				width          : 100%;

client/homebrew/pages/editPage/editPage.jsx

@@ -91,7 +91,7 @@ const EditPage = createClass({
 		if(!(e.ctrlKey || e.metaKey)) return;
 		const S_KEY = 83;
 		const P_KEY = 80;
-		if(e.keyCode == S_KEY) this.trySave(true);
+		if(e.keyCode == S_KEY) this.save();
 		if(e.keyCode == P_KEY) window.open(`/print/${this.processShareId()}?dialog=true`, '_blank').focus();
 		if(e.keyCode == P_KEY || e.keyCode == S_KEY){
 			e.stopPropagation();
@@ -137,14 +137,13 @@ const EditPage = createClass({
 		return !_.isEqual(this.state.brew, this.savedBrew);
 	},
 
-	trySave : function(immediate=false){
+	trySave : function(){
 		if(!this.debounceSave) this.debounceSave = _.debounce(this.save, SAVE_TIMEOUT);
 		if(this.hasChanges()){
 			this.debounceSave();
 		} else {
 			this.debounceSave.cancel();
 		}
-		if(immediate) this.debounceSave.flush();
 	},
 
 	handleGoogleClick : function(){

client/homebrew/pages/homePage/welcome_msg.md

@@ -16,9 +16,9 @@ The Homebrewery makes the creation and sharing of authentic looking Fifth-Editio
 **Try it!** Simply edit the text on the left and watch it *update live* on the right. Note that not every button is visible on this demo page. Click New {{fas,fa-plus-square}} in the navbar above to start brewing with all the features!
 
 ### Editing and Sharing
-When you create a new homebrew document ("brew"), your document will be given a *edit link* and a *share link*.
+When you create your own homebrew, you will be given a *edit url* and a *share url*.
 
-The *edit link* is where you write your brew. If you edit a brew while logged in, you are added as one of the brew's authors, and no one else can edit that brew until you add them as a new author via the {{fa,fa-info-circle}} **Properties** tab. Brews without any author can still be edited by anyone with the *edit link*, so be careful about who you share it with if you prefer to work without an account.
+Any changes you make while on the *edit url* will be automatically saved to the database within a few seconds. Anyone with the edit url will be able to make edits to your homebrew, so be careful about who you share it with.
 
 Anyone with the *share url* will be able to access a read-only version of your homebrew.
 
@@ -48,63 +48,57 @@ If you want to save ink or have a monochrome printer, add the **PRINT → {{fas,
 
 \column
 
-## V3 vs Legacy
+## New in V3.0.0
-The Homebrewery has two renderers: Legacy and V3. The V3 renderer is recommended for all users because it is more powerful, more customizable, and continues to receive new feature updates while Legacy does not. However Legacy mode will remain available for older brews and veteran users.
+We've implemented an extended Markdown-like syntax for block and span elements, plus a few other changes, eliminating the need for HTML tags like `div` and `span` in most cases. No raw HTML tags should be needed in a brew (*but can still be used if you insist*).
 
-At any time, any individual brew can be changed to your renderer of choice via the {{fa,fa-info-circle}} **Properties** tab on your brew. However, converting between Legacy and V3 may require heavily tweaking the document; while both renderers can use raw HTML, V3 prefers a streamlined curly bracket syntax that avoids the complex HTML structures required by Legacy.
+Much of the syntax and styling has changed in V3, so converting a Legacy brew to V3 (or vice-versa) will require tweaking your document. *However*, all brews made prior to the release of v3.0.0 will still render normally, and you may switch between the "Legacy" brew renderer and the newer "V3" renderer via the {{fa,fa-info-circle}} **Properties** button on your brew at any time.
 
+Scroll down to the next page for a brief summary of the changes and new features available in V3!
 
-Scroll down to the next page for a brief summary of the changes and features available in V3!
 #### New Things All The Time!
 Check out the latest updates in the full changelog [here](/changelog).
 
 ### Helping out
-Like this tool? Head over to our [Patreon](https://www.patreon.com/Naturalcrit) to help us keep the servers running.
+Like this tool? Want to buy me a beer? [Head here](https://www.patreon.com/Naturalcrit) to help me keep the servers running.
 
-
+This tool will **always** be free, never have ads, and I will never offer any "premium" features or whatever.
-This tool will **always** be free, never have ads, and we will never offer any "premium" features or whatever.
 
 ### Bugs, Issues, Suggestions?
-- Check the [Frequently Asked Questions](/faq) page first for quick answers.
+Take a quick look at our [Frequently Asked Questions page](/faq) to see if your question has a handy answer.
-- Get help or the right look for your brew by posting on [r/Homebrewery](https://www.reddit.com/r/homebrewery/submit?selftext=true&title=%5BIssue%5D%20Describe%20Your%20Issue%20Here) or joining the [Discord Of Many Things](https://discord.gg/by3deKx).
+
-- Report technical issues or provide feedback on the [GitHub Repo](https://github.com/naturalcrit/homebrewery/).
+Need help getting started or just the right look for your brew? Head to [r/Homebrewery](https://www.reddit.com/r/homebrewery/submit?selftext=true&title=%5BIssue%5D%20Describe%20Your%20Issue%20Here) and let us know!
+
+Have an idea to make The Homebrewery better? Or did you find something that wasn't quite right? Check out the [GitHub Repo](https://github.com/naturalcrit/homebrewery/) to report technical issues.
 
 ### Legal Junk
 The Homebrewery is licensed using the [MIT License](https://github.com/naturalcrit/homebrewery/blob/master/license). Which means you are free to use The Homebrewery codebase any way that you want, except for claiming that you made it yourself.
 
 If you wish to sell or in some way gain profit for what's created on this site, it's your responsibility to ensure you have the proper licenses/rights for any images or resources used.
-#### Crediting Us
+
-If you'd like to credit us in your brew, we'd be flattered! Just reference that you made it with The Homebrewery.
+#### Crediting Me
+If you'd like to credit me in your brew, I'd be flattered! Just reference that you made it with The Homebrewery.
 
 ### More Homebrew Resources
-[![Discord](/assets/discordOfManyThings.svg){width:50px,float:right,padding-left:10px}](https://discord.gg/by3deKx)
+<a href='https://discord.gg/by3deKx' target='_blank'><img src='/assets/discordOfManyThings.svg' alt='Discord of Many Things Logo' title='Discord of Many Things Logo' style='width:50px; float: right; padding-left: 10px;'/></a>
-
+If you are looking for more 5e Homebrew resources check out [r/UnearthedArcana](https://www.reddit.com/r/UnearthedArcana/) and their list of useful resources [here](https://www.reddit.com/r/UnearthedArcana/wiki/resources). The <a href='https://discord.gg/by3deKx' target='_blank' title='Discord of Many Things'>Discord of Many Things</a> is another great resource to connect with fellow homebrewers for help and feedback.
-If you are looking for more 5e Homebrew resources check out [r/UnearthedArcana](https://www.reddit.com/r/UnearthedArcana/) and their list of useful resources [here](https://www.reddit.com/r/UnearthedArcana/wiki/resources). The [Discord Of Many Things](https://discord.gg/by3deKx) is another great resource to connect with fellow homebrewers for help and feedback.
-
 
 {{position:absolute;top:20px;right:20px;width:auto
-[![Discord](/assets/discord.png){height:30px}](https://discord.gg/by3deKx)
+<a href='https://discord.gg/by3deKx' target='_blank' title='Discord of Many Things' style='color: black;'><img src='/assets/discord.png' style='height:30px'/></a>
-[![Github](/assets/github.png){height:30px}](https://github.com/naturalcrit/homebrewery)
+<a href='https://github.com/naturalcrit/homebrewery' target='_blank' title='Github' style='color: black; padding-left: 5px;'><img src='/assets/github.png' style='height:30px'/></a>
-[![Patreon](/assets/patreon.png){height:30px}](https://patreon.com/NaturalCrit)
+<a href='https://patreon.com/NaturalCrit' target='_blank' title='Patreon' style='color: black; padding-left: 5px;'><img src='/assets/patreon.png' style='height:30px'/></a>
-[![Reddit](/assets/reddit.png){height:30px}](https://www.reddit.com/r/homebrewery/)
+<a href='https://www.reddit.com/r/homebrewery/' target='_blank' title='Reddit' style='color: black; padding-left: 5px;'><img src='/assets/reddit.png' style='height:30px'/></a>
 }}
 
 \page
 
-
-
-
-
-
-
-
 ## Markdown+
 The Homebrewery aims to make homebrewing as simple as possible, providing a live editor with Markdown syntax that is more human-readable and faster to write with than raw HTML.
 
-From version 3.0.0, with a goal of adding maximum flexibility without users resorting to complex HTML to accomplish simple tasks, Homebrewery provides an extended verision of Markdown with additional syntax.
+In version 3.0.0, with a goal of adding maximum flexibility without users resorting to complex HTML to accomplish simple tasks, Homebrewery provides an extended verision of Markdown with additional syntax.
+**You can enable V3 via the {{fa,fa-info-circle}} Properties button!**
 
 ### Curly Brackets
-Standard Markdown lacks several equivalences to HTML. Hence, we have introduced `{{ }}` as a replacement for `<span></span>` and `<div></div>` for a cleaner custom formatting. Inline spans and block elements can be created and given ID's and Classes, as well as CSS properties, each of which are comma separated with no spaces. Use double quotes if a value requires spaces. Spans and Blocks start the same:
+The biggest change in V3 is the replacement of `<span></span>` and `<div></div>` with `{{ }}` for a cleaner custom formatting.  Inline spans and block elements can be created and given ID's and Classes, as well as css properties, each of which are comma separated with no spaces. Use double quotes if a value requires spaces. Spans and Blocks start the same:
 
 #### Span
 My favorite author is {{pen,#author,color:orange,font-family:"trebuchet ms" Brandon Sanderson}}.  The orange text has a class of `pen`, an id of `author`, is colored orange, and given a new font. The first space outside of quotes marks the beginning of the content.
@@ -132,17 +126,16 @@ A blank line can be achieved with a run of one or more `:` alone on a line. More
 
 ::
 
-
 Much nicer than `<br><br><br><br><br>`
 
 ### Definition Lists
 **Example** :: V3 uses HTML *definition lists* to create "lists" with hanging indents.
 
-
-
 ### Column Breaks
 Column and page breaks with `\column` and `\page`.
 
+\column
+
 ### Tables
 Tables now allow column & row spanning between cells. This is included in some updated snippets, but a simplified example is given below.
 
@@ -170,13 +163,13 @@ Using *Curly Injection* you can assign an id, classes, or inline CSS properties
 
 ![alt-text](https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg) {width:100px,border:"2px solid",border-radius:10px}
 
-\* *When using Imgur-hosted images, use the "direct link", which can be found when you click into your image in the Imgur interface.*
+\* *When using Imgur-hosted images, use the "direct link", which can be found when you click into your image in the Imgur interace.*
 
 ## Snippets
 Homebrewery comes with a series of *code snippets* found at the top of the editor pane that make it easy to create brews as quickly as possible.  Just set your cursor where you want the code to appear in the editor pane, choose a snippet, and make the adjustments you need.
 
 ## Style Editor Panel
-{{fa,fa-paint-brush}} Usually overlooked or unused by some users, the **Style Editor** tab is located on the right side of the Snippet bar. This editor accepts CSS for styling without requiring `<style>` tags-- anything that would have gone inside style tags before can now be placed here, and snippets that insert CSS styles are now located on that tab.
+{{fa,fa-paint-brush}} Technically released prior to v3 but still new to many users, check out the new **Style Editor** located on the right side of the Snippet bar.  This editor accepts CSS for styling without requiring `<style>` tags-- anything that would have gone inside style tags before can now be placed here, and snippets that insert CSS styles are now located on that tab.
 
 {{pageNumber 2}}
 {{footnote PART 2 | BORING STUFF}}

client/homebrew/pages/newPage/newPage.jsx

@@ -20,10 +20,9 @@ const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 
 const { DEFAULT_BREW } = require('../../../../server/brewDefaults.js');
 
-const BREWKEY  = 'homebrewery-new';
+const BREWKEY = 'homebrewery-new';
 const STYLEKEY = 'homebrewery-new-style';
-const METAKEY  = 'homebrewery-new-meta';
+const METAKEY = 'homebrewery-new-meta';
-let SAVEKEY;
 
 
 const NewPage = createClass({
@@ -63,16 +62,12 @@ const NewPage = createClass({
 			brew.renderer = metaStorage?.renderer ?? brew.renderer;
 			brew.theme    = metaStorage?.theme    ?? brew.theme;
 			brew.lang     = metaStorage?.lang     ?? brew.lang;
+
+			this.setState({
+				brew : brew
+			});
 		}
 
-		SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${global.account?.username || ''}`;
-		const saveStorage = localStorage.getItem(SAVEKEY) || 'HOMEBREWERY';
-
-		this.setState({
-			brew       : brew,
-			saveGoogle : (saveStorage == 'GOOGLE-DRIVE' && this.state.saveGoogle)
-		});
-
 		localStorage.setItem(BREWKEY, brew.text);
 		if(brew.style)
 			localStorage.setItem(STYLEKEY, brew.style);

client/template.js

@@ -11,7 +11,6 @@ const template = async function(name, title='', props = {}){
 	return `<!DOCTYPE html>
 	<html>
 		<head>
-			<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height, interactive-widget=resizes-visual" />
 			<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
 			<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
 			<link href=${`/${name}/bundle.css`} rel='stylesheet' />

faq.md

@@ -62,13 +62,16 @@ pre {
 ```
 
 # FAQ
-{{wide Updated Apr. 15, 2023}}
+{{wide Updated Oct. 11, 2021}}
 
 
 ### The site is down for me! Anyone else?
 
 You can check the site status here: [Everyone or Just Me](https://downforeveryoneorjustme.com/homebrewery.naturalcrit.com)
 
+### How do I log out?
+
+Go to https://homebrewery.naturalcrit.com/login, and hit the "*logout*" link.
 
 ### Why am I getting an error when trying to save, and my account is linked to Google?
 
@@ -117,6 +120,26 @@ The fonts used were originally created for use with the English language, though
 ### Whenever I click on the "Get PDF" button, instead of getting a download, it opens Print Preview in another tab.
 Yes, this is by design. In the print preview, select "Save as PDF" as the Destination, and then click "Save". There will be a normal download dialog where you can save your brew as a PDF.
 
+### The preview window is suddenly gone, I can only see the editor side of the Homebrewery (or the other way around).
+
+1. Press `CTRL`+`SHIFT`+`i` (or right-click and select "Inspect") while in the Homebrewery.
+
+2. Expand...
+```
+	- `body` 
+	- `main`
+	- `div class="homebrew"`
+	- `div class="editPage page"`
+	- `div class="content"`
+	- `div class="splitPane"`
+```
+
+There you will find 3 divs: `div class="pane" [...]`, `div class="divider" [...]`, and `div class="pane" [...]`.
+
+The `class="pane"` looks similar to this: `div class="pane" data-reactid="36" style="flex: 0 0 auto; width: 925px;"`.
+
+Change whatever stands behind width: to something smaller than your display width. 
+
 ### I have white borders on the bottom/sides of the print preview.
 
 The Homebrewery paper size and your print paper size do not match.

install/freebsd/install.sh

@@ -13,7 +13,7 @@ npm install
 npm audit fix
 npm run postinstall
 
-cp install/freebsd/rc.d/homebrewery /usr/local/etc/rc.d/
+cp freebsd/rc.d/homebrewery /usr/local/etc/rc.d/
 chmod +x /usr/local/etc/rc.d/homebrewery
 
 sysrc homebrewery_enable=YES

package.json

@@ -1,10 +1,9 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "3.10.0",
+  "version": "3.9.1",
   "engines": {
-		"npm": "^10.2.x",
+    "node": ">=18.16.x"
-    "node": ">=20.8.x"
   },
   "repository": {
     "type": "git",
@@ -79,11 +78,11 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.23.2",
+    "@babel/core": "^7.22.8",
-    "@babel/plugin-transform-runtime": "^7.23.2",
+    "@babel/plugin-transform-runtime": "^7.22.7",
-    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-env": "^7.22.7",
-    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-react": "^7.22.5",
-    "@googleapis/drive": "^8.4.0",
+    "@googleapis/drive": "^5.1.0",
     "body-parser": "^1.20.2",
     "classnames": "^2.3.2",
     "codemirror": "^5.65.6",
@@ -99,30 +98,31 @@
     "less": "^3.13.1",
     "lodash": "^4.17.21",
     "marked": "5.1.1",
-    "marked-extended-tables": "^1.0.7",
+    "marked-extended-tables": "^1.0.6",
-    "marked-gfm-heading-id": "^3.1.0",
+    "marked-gfm-heading-id": "^3.0.4",
-    "marked-smartypants-lite": "^1.0.1",
+    "marked-smartypants-lite": "^1.0.0",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.29.4",
-    "mongoose": "^7.6.1",
+    "mongoose": "^7.3.2",
     "nanoid": "3.3.4",
     "nconf": "^0.12.0",
+    "npm": "^9.8.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-frame-component": "^4.1.3",
-    "react-router-dom": "6.16.0",
+    "react-router-dom": "6.14.1",
     "sanitize-filename": "1.6.3",
-    "superagent": "^8.1.2",
+    "superagent": "^6.1.0",
     "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
   },
   "devDependencies": {
-    "eslint": "^8.51.0",
+    "eslint": "^8.44.0",
-    "eslint-plugin-jest": "^27.4.2",
+    "eslint-plugin-jest": "^27.2.2",
-    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react": "^7.32.2",
-    "jest": "^29.7.0",
+    "jest": "^29.6.1",
     "jest-expect-message": "^1.1.3",
     "postcss-less": "^6.0.0",
-    "stylelint": "^15.10.3",
+    "stylelint": "^15.10.1",
     "stylelint-config-recess-order": "^4.3.0",
     "stylelint-config-recommended": "^13.0.0",
     "stylelint-stylistic": "^0.4.3",

scripts/buildHomebrew.js

@@ -99,24 +99,6 @@ fs.emptyDirSync('./build');
 	await fs.copy('./themes/assets', './build/assets');
 	await fs.copy('./client/icons', './build/icons');
 
-	//v==---------------------------MOVE CM EDITOR THEMES -----------------------------==v//
-
-	editorThemeFiles = fs.readdirSync('./node_modules/codemirror/theme');
-
-	const editorThemeFile = './themes/codeMirror/editorThemes.json';
-	if(fs.existsSync(editorThemeFile)) fs.rmSync(editorThemeFile);
-	const stream = fs.createWriteStream(editorThemeFile, { flags: 'a' });
-	stream.write('[\n"default"');
-
-	for (themeFile of editorThemeFiles) {
-		stream.write(`,\n"${themeFile.slice(0, -4)}"`);
-	}
-	stream.write('\n]\n');
-	stream.end();
-
-	await fs.copy('./node_modules/codemirror/theme', './build/homebrew/cm-themes');
-	await fs.copy('./themes/codeMirror', './build/homebrew/codeMirror');
-
 	//v==----------------------------- BUNDLE PACKAGES --------------------------------==v//
 
 	const bundles = await pack('./client/homebrew/homebrew.jsx', {

server/app.js

@@ -257,7 +257,6 @@ app.get('/user/:username', async (req, res, next)=>{
 					brew.pageCount = googleBrews[match].pageCount;
 					brew.renderer = googleBrews[match].renderer;
 					brew.version = googleBrews[match].version;
-					brew.webViewLink = googleBrews[match].webViewLink;
 					googleBrews.splice(match, 1);
 				}
 			}
@@ -268,9 +267,6 @@ app.get('/user/:username', async (req, res, next)=>{
 	}
 
 	req.brews = _.map(brews, (brew)=>{
-		// Clean up brew data
-		brew.title = brew.title?.trim();
-		brew.description = brew.description?.trim();
 		return sanitizeBrew(brew, ownAccount ? 'edit' : 'share');
 	});
 

server/googleActions.js

@@ -106,7 +106,7 @@ const GoogleActions = {
 			const obj = await drive.files.list({
 				pageSize  : 1000,
 				pageToken : NextPageToken || '',
-				fields    : 'nextPageToken, files(id, name, description, createdTime, modifiedTime, properties, webViewLink)',
+				fields    : 'nextPageToken, files(id, name, description, createdTime, modifiedTime, properties)',
 				q         : 'mimeType != \'application/vnd.google-apps.folder\' and trashed = false'
 			})
 			.catch((err)=>{
@@ -139,8 +139,7 @@ const GoogleActions = {
 				published   : file.properties.published ? file.properties.published == 'true' : false,
 				systems     : [],
 				lang        : file.properties.lang,
-				thumbnail   : file.properties.thumbnail,
+				thumbnail   : file.properties.thumbnail
-				webViewLink : file.webViewLink
 			};
 		});
 	  return brews;

server/homebrew.api.js

@@ -153,9 +153,6 @@ const api = {
 		brew.text = api.mergeBrewText(brew);
 
 		_.defaults(brew, DEFAULT_BREW);
-
-		brew.title = brew.title.trim();
-		brew.description = brew.description.trim();
 	},
 	newGoogleBrew : async (account, brew, res)=>{
 		const oAuth2Client = GoogleActions.authCheck(account, res);
@@ -220,8 +217,6 @@ const api = {
 		const { saveToGoogle, removeFromGoogle } = req.query;
 		let afterSave = async ()=>true;
 
-		brew.title = brew.title.trim();
-		brew.description = brew.description.trim() || '';
 		brew.text = api.mergeBrewText(brew);
 
 		if(brew.googleId && removeFromGoogle) {

shared/naturalcrit/codeEditor/code-mirror.js

@@ -0,0 +1,36 @@
+let CodeMirror;
+if(typeof navigator !== 'undefined'){
+	CodeMirror = require('codemirror');
+
+	//Language Modes
+	require('codemirror/mode/gfm/gfm.js'); //Github flavoured markdown
+	require('codemirror/mode/css/css.js');
+	require('codemirror/mode/javascript/javascript.js');
+
+	//Addons
+	//Code folding
+	require('codemirror/addon/fold/foldcode.js');
+	require('codemirror/addon/fold/foldgutter.js');
+	//Search and replace
+	require('codemirror/addon/search/search.js');
+	require('codemirror/addon/search/searchcursor.js');
+	require('codemirror/addon/search/jump-to-line.js');
+	require('codemirror/addon/search/match-highlighter.js');
+	require('codemirror/addon/search/matchesonscrollbar.js');
+	require('codemirror/addon/dialog/dialog.js');
+	//Trailing space highlighting
+	// require('codemirror/addon/edit/trailingspace.js');
+	//Active line highlighting
+	// require('codemirror/addon/selection/active-line.js');
+	//Scroll past last line
+	require('codemirror/addon/scroll/scrollpastend.js');
+	//Auto-closing
+	//XML code folding is a requirement of the auto-closing tag feature and is not enabled
+	require('codemirror/addon/fold/xml-fold.js');
+	require('codemirror/addon/edit/closetag.js');
+
+	const foldCode = require('./helpers/fold-code');
+	foldCode.registerHomebreweryHelper(CodeMirror);
+}
+
+module.exports = CodeMirror;

shared/naturalcrit/codeEditor/codeEditor.jsx

@@ -4,45 +4,15 @@ const React = require('react');
 const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
-const closeTag = require('./close-tag');
+const closeTag = require('./helpers/close-tag');
+const Hints = require('./helpers/widget-elements/hints/hints.jsx');
+const CodeMirror = require('./code-mirror.js');
 
-let CodeMirror;
+const themeWidgets = require('../../../themes/V3/5ePHB/widgets');
-if(typeof navigator !== 'undefined'){
-	CodeMirror = require('codemirror');
-
-	//Language Modes
-	require('codemirror/mode/gfm/gfm.js'); //Github flavoured markdown
-	require('codemirror/mode/css/css.js');
-	require('codemirror/mode/javascript/javascript.js');
-
-	//Addons
-	//Code folding
-	require('codemirror/addon/fold/foldcode.js');
-	require('codemirror/addon/fold/foldgutter.js');
-	//Search and replace
-	require('codemirror/addon/search/search.js');
-	require('codemirror/addon/search/searchcursor.js');
-	require('codemirror/addon/search/jump-to-line.js');
-	require('codemirror/addon/search/match-highlighter.js');
-	require('codemirror/addon/search/matchesonscrollbar.js');
-	require('codemirror/addon/dialog/dialog.js');
-	//Trailing space highlighting
-	// require('codemirror/addon/edit/trailingspace.js');
-	//Active line highlighting
-	// require('codemirror/addon/selection/active-line.js');
-	//Scroll past last line
-	require('codemirror/addon/scroll/scrollpastend.js');
-	//Auto-closing
-	//XML code folding is a requirement of the auto-closing tag feature and is not enabled
-	require('codemirror/addon/fold/xml-fold.js');
-	require('codemirror/addon/edit/closetag.js');
-
-	const foldCode = require('./fold-code');
-	foldCode.registerHomebreweryHelper(CodeMirror);
-}
 
 const CodeEditor = createClass({
 	displayName     : 'CodeEditor',
+	hintsRef        : React.createRef(),
 	getDefaultProps : function() {
 		return {
 			language      : '',
@@ -50,13 +20,16 @@ const CodeEditor = createClass({
 			wrap          : true,
 			onChange      : ()=>{},
 			enableFolding : true,
-			editorTheme   : 'default'
 		};
 	},
 
 	getInitialState : function() {
 		return {
-			docs : {}
+			docs        : {},
+			widgetUtils : {},
+			widgets     : {},
+			hints       : [],
+			hintsField  : undefined,
 		};
 	},
 
@@ -93,9 +66,8 @@ const CodeEditor = createClass({
 			this.codeMirror.setOption('foldOptions', false);
 		}
 
-		if(prevProps.editorTheme !== this.props.editorTheme){
+		this.state.widgetUtils.updateWidgetGutter();
-			this.codeMirror.setOption('theme', this.props.editorTheme);
+		this.state.widgetUtils.updateAllLineWidgets();
-		}
 	},
 
 	buildEditor : function() {
@@ -160,11 +132,10 @@ const CodeEditor = createClass({
 			},
 			foldGutter        : true,
 			foldOptions       : this.foldOptions(this.codeMirror),
-			gutters           : ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+			gutters           : ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'widget-gutter'],
 			autoCloseTags     : true,
 			styleActiveLine   : true,
 			showTrailingSpace : false,
-			theme             : this.props.editorTheme
 			// specialChars           : / /,
 			// specialCharPlaceholder : function(char) {
 			// 	const el = document.createElement('span');
@@ -175,9 +146,69 @@ const CodeEditor = createClass({
 		});
 		closeTag.autoCloseCurlyBraces(CodeMirror, this.codeMirror);
 
+		this.setState({
+			widgetUtils : require('./helpers/widgets')(themeWidgets, this.codeMirror, (hints, field)=>{
+				this.setState({
+					hints,
+					hintsField : field
+				});
+			})
+		});
+
 		// 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.state.widgetUtils.updateWidgetGutter();
+		});
+
+		this.codeMirror.on('cursorActivity', (cm)=>{
+			const { line } = cm.getCursor();
+			for (const key in this.state.widgets) {
+				if(key != line) {
+					this.state.widgetUtils.removeLineWidget(key, this.state.widgets[key]);
+				}
+			}
+			this.setState({
+				hints      : [],
+				hintsField : undefined
+			});
+			const { widgets } = this.codeMirror.lineInfo(line);
+			if(!widgets) {
+				const widget = this.state.widgetUtils.updateLineWidgets(line);
+				if(widget) {
+					this.setState({
+						widgets : {
+							[line] : widget
+						}
+					});
+				}
+			}
+		});
+
 		this.updateSize();
+
+		this.codeMirror.on('gutterClick', (cm, n)=>{
+			// Open line widgets when 'widget-gutter' marker clicked
+			if(this.codeMirror.lineInfo(n).gutterMarkers?.['widget-gutter']) {
+				const { widgets } = this.codeMirror.lineInfo(n);
+				if(!widgets) {
+					const widget = this.state.widgetUtils.updateLineWidgets(n);
+					if(widget) {
+						this.setState({
+							widgets : { ...this.state.widgets, [n]: widget }
+						});
+					}
+				} else {
+					for (const widget of widgets) {
+						this.state.widgetUtils.removeLineWidget(n, widget);
+					}
+					this.setState({
+						hints      : [],
+						hintsField : undefined
+					});
+				}
+			}
+		});
 	},
 
 	indent : function () {
@@ -409,13 +440,19 @@ const CodeEditor = createClass({
 			}
 		};
 	},
+	keyDown : function(e) {
+		if(this.hintsRef.current) {
+			this.hintsRef.current.keyDown(e);
+		}
+	},
 	//----------------------//
 
 	render : function(){
-		return <>
+		const { hints, hintsField } = this.state;
-			<link href={`../homebrew/cm-themes/${this.props.editorTheme}.css`} rel='stylesheet' />
+		return <React.Fragment>
-			<div className='codeEditor' ref='editor' style={this.props.style}/>
+			<div className='codeEditor' ref='editor' style={this.props.style} onKeyDown={this.keyDown}/>
-		</>;
+			<Hints ref={this.hintsRef} hints={hints} field={hintsField}/>
+		</React.Fragment>;
 	}
 });
 

shared/naturalcrit/codeEditor/codeEditor.less

@@ -2,6 +2,8 @@
 @import (less) 'codemirror/addon/fold/foldgutter.css';
 @import (less) 'codemirror/addon/search/matchesonscrollbar.css';
 @import (less) 'codemirror/addon/dialog/dialog.css';
+@import (less) 'codemirror/addon/hint/show-hint.css';
+@import 'naturalcrit/styles/colors.less';
 
 @keyframes sourceMoveAnimation {
 	50%  {background-color: red;   color: white;}
@@ -9,15 +11,12 @@
 }
 
 .codeEditor{
-  @media screen and (pointer : coarse) {
-    font-size : 16px;
-  }
   .CodeMirror-foldmarker {
     font-family: inherit;
     text-shadow: none;
     font-weight: 600;
     color: grey;
-}
+  }
 
   .sourceMoveFlash .CodeMirror-line{
     animation-name: sourceMoveAnimation;
@@ -33,4 +32,51 @@
   //    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAQAgMAAABW5NbuAAAACVBMVEVHcEwAAAAAAAAWawmTAAAAA3RSTlMAPBJ6PMxpAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAFUlEQVQI12NgwACcCQysASAEZGAAACMuAX06aCQUAAAAAElFTkSuQmCC) no-repeat right;
   //  }
   //}
+
+  .widget-gutter {
+    width: .7em;
+  }
+
+  .snippet-options-widget {
+    padding: 2px 0;
+
+    >div {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    * {
+      margin: 0 2px 2px 2px;
+    }
+
+    input {
+      max-width: 10vw;
+    }
+  }
+
+  .widget-field {
+    border: 2px solid #ddd;
+
+    &.default {
+      background-color: @purple;
+      border: 2px solid @purple;
+      color: white;
+
+      >input {
+        background-color: @purple;
+        color: white;
+      }
+    }
+
+    &.suggested {
+      background-color: #ddd;
+      border: 2px dashed grey;
+      color: grey;
+
+      >input {
+        background-color: #ddd;
+        color: black;
+      }
+    }
+  }
 }

shared/naturalcrit/codeEditor/helpers/widget-elements/checkbox/checkbox.jsx

@@ -0,0 +1,48 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const _ = require('lodash');
+require('./checkbox.less');
+const CodeMirror = require('../../../code-mirror.js');
+
+const Checkbox = createClass({
+	getDefaultProps : function() {
+		return {
+			value   : '',
+			prefix  : '',
+			cm      : {},
+			n       : -1,
+			default : false
+		};
+	},
+
+	handleChange : function (e) {
+		const { cm, n, value, prefix } = this.props;
+		const { text } = cm.lineInfo(n);
+		const updatedPrefix = `{{${prefix}`;
+		if(e.target?.checked)
+			cm.replaceRange(`,${value}`, CodeMirror.Pos(n, updatedPrefix.length), CodeMirror.Pos(n, updatedPrefix.length), '+insert');
+		else {
+			const start = text.indexOf(`,${value}`);
+			if(start > -1)
+				cm.replaceRange('', CodeMirror.Pos(n, start), CodeMirror.Pos(n, start + value.length + 1), '-delete');
+		}
+	},
+
+	render : function() {
+		const { cm, n, value, prefix, def } = this.props;
+		const { text } = cm.lineInfo(n);
+		const id = [prefix, value, n].join('-');
+		let className = 'widget-field widget-checkbox';
+		if(def) {
+			className += ' default';
+		}
+		return <React.Fragment>
+			<div className={className}>
+				<input type='checkbox' id={id} onChange={this.handleChange} checked={_.includes(text, `,${value}`)}/>
+				<label htmlFor={id}>{_.startCase(value)}</label>
+			</div>
+		</React.Fragment>;
+	}
+});
+
+module.exports = Checkbox;

shared/naturalcrit/codeEditor/helpers/widget-elements/checkbox/checkbox.less

@@ -0,0 +1,7 @@
+.widget-checkbox {
+  display: inline-block;
+  flex: 0 0 auto;
+  background-color: #ddd;
+  border-radius: 10px;
+  padding: 4px 2px;
+}

shared/naturalcrit/codeEditor/helpers/widget-elements/color-selector/color-selector.jsx

@@ -0,0 +1,95 @@
+require('./color-selector.less');
+const React = require('react');
+const createClass = require('create-react-class');
+const { PATTERNS, STYLE_FN, SNIPPET_TYPE } = require('../constants');
+const CodeMirror = require('../../../code-mirror');
+const debounce = require('lodash.debounce');
+
+const ColorSelector = createClass({
+	getDefaultProps : function() {
+		return {
+			field : {},
+			cm    : {},
+			n     : undefined,
+			text  : '',
+			def   : false
+		};
+	},
+	getInitialState : function() {
+		return {
+			value : ''
+		};
+	},
+	componentDidMount : function() {
+		const { field, text } = this.props;
+		const pattern = PATTERNS.field[field.type](field.name);
+		const [_, __, value] = text.match(pattern) ?? [];
+		this.setState({
+			value : value,
+		});
+	},
+	componentDidUpdate({ text }) {
+		const { field } = this.props;
+		if(this.props.text !== text) {
+			const pattern = PATTERNS.field[field.type](field.name);
+			const [_, __, value] = this.props.text.match(pattern) ?? [];
+			this.setState({
+				value,
+			});
+		}
+	},
+	onChange : function(e) {
+		const { cm, text, field, n, snippetType } = this.props;
+		const pattern = PATTERNS.field[field.type](field.name);
+		const [_, label, current] = text.match(pattern) ?? [null, field.name, ''];
+		let index = text.indexOf(`${label}:${current}`);
+		while (index !== -1 && text[index - 1] === '-') {
+			index = text.indexOf(`${label}:${current}`, index + 1);
+		}
+		let value = e.target.value;
+		if(index === -1) {
+			if(snippetType === SNIPPET_TYPE.INLINE) {
+				index = text.indexOf('}');
+			}
+			index = index === -1 ? text.length : index;
+			value = `,${field.name}:${value}`;
+		} else {
+			index = index + 1 + field.name.length;
+		}
+		cm.replaceRange(value, CodeMirror.Pos(n, index), CodeMirror.Pos(n, index + current.length), '+insert');
+		this.setState({
+			value : e.target.value,
+		});
+	},
+	debounce         : debounce((self, e)=>self.onChange(e), 300),
+	onChangeDebounce : function(e) {
+		this.setState({
+			value : e.target.value,
+		});
+		this.debounce(this, e);
+	},
+	render : function() {
+		const { field, n, text, def } = this.props;
+		const { value } = this.state;
+		const style = STYLE_FN(value);
+		const id = `${field?.name}-${n}`;
+		const pattern = PATTERNS.field[field.type](field.name);
+		const [_, label, __] = text.match(pattern) ?? [null, undefined, ''];
+		let className = 'widget-field color-selector';
+		if(!label) {
+			className += ' suggested';
+		}
+		if(def) {
+			className += ' default';
+		}
+		return <React.Fragment>
+			<div className={className}>
+				<label htmlFor={id}>{field.name}:</label>
+				<input className='color' type='color' value={value} onChange={this.onChangeDebounce}/>
+				<input id={id} className='text' type='text' style={style} value={value} onChange={this.onChange}/>
+			</div>
+		</React.Fragment>;
+	}
+});
+
+module.exports = ColorSelector;

shared/naturalcrit/codeEditor/helpers/widget-elements/color-selector/color-selector.less

@@ -0,0 +1,8 @@
+.color-selector {
+  .color {
+    height: 17px;
+    width: 13px;
+    padding: 0;
+    margin: 0;
+  }
+}

shared/naturalcrit/codeEditor/helpers/widget-elements/constants.js

@@ -0,0 +1,50 @@
+const _ = require('lodash');
+
+export const UNITS = ['cm', 'mm', 'in', 'px', 'pt', 'pc', 'em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', '%'];
+
+export const HINT_TYPE = {
+	VALUE         : 0,
+	NUMBER_SUFFIX : 1
+};
+
+export const SNIPPET_TYPE = {
+	BLOCK    : 0,
+	INLINE   : 1,
+	INJECTOR : 2,
+};
+
+export const FIELD_TYPE = {
+	TEXT           : 0,
+	CHECKBOX       : 1,
+	IMAGE_SELECTOR : 2,
+	COLOR_SELECTOR : 3,
+};
+
+const textField = (name)=>new RegExp(`[{,;](${name}):([^};,"\\(]*\\((?!,)[^};"\\)]*\\)|"[^},;"]*"|[^},;]*)`);
+export const PATTERNS = {
+	snippet : {
+		[SNIPPET_TYPE.BLOCK]    : (name)=>new RegExp(`^{{${name}(?:[^a-zA-Z].*)?`),
+		[SNIPPET_TYPE.INLINE]   : (name)=>new RegExp(`{{${name}`),
+		[SNIPPET_TYPE.INJECTOR] : ()=>new RegExp(`^\\!\\[(?:[a-zA-Z -]+)?\\]\\(.*\\).*{[a-zA-Z0-9:, "'-]+}$`),
+	},
+	field : {
+		[FIELD_TYPE.TEXT]           : textField,
+		[FIELD_TYPE.IMAGE_SELECTOR] : (name)=>new RegExp(`{{(${name})(\\d*)`),
+		[FIELD_TYPE.COLOR_SELECTOR] : textField
+	},
+	collectStyles : new RegExp(`(?:([a-zA-Z-]+):(?!\\/))+`, 'g'),
+};
+
+export const NUMBER_PATTERN = new RegExp(`([^-\\d]*)([-\\d]+)(${UNITS.join('|')})?(.*)`);
+
+export const fourDigitNumberFromValue = (value)=>typeof value === 'number' ? (()=>{
+	const str = String(value);
+	return _.range(0, 4 - str.length).map(()=>'0').join('') + str;
+})() : value;
+
+const DEFAULT_WIDTH = '30px';
+
+export const STYLE_FN = (value, extras = {})=>({
+	width : `calc(${value?.length ?? 0}ch + ${value?.length ? `${DEFAULT_WIDTH} / 2` : DEFAULT_WIDTH})`,
+	...extras
+});

shared/naturalcrit/codeEditor/helpers/widget-elements/hints/hints.jsx

@@ -0,0 +1,128 @@
+const React = require('react');
+const createClass = require('create-react-class');
+const { NUMBER_PATTERN } = require('../constants');
+
+const Hints = createClass({
+	hintsRef      : React.createRef(),
+	activeHintRef : React.createRef(),
+
+	getDefaultProps : function() {
+		return {
+			hints : [],
+			field : undefined,
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			activeHint : 0
+		};
+	},
+
+	componentDidUpdate : function({ hints }) {
+		const hintsLength = this.props.hints.length;
+		if(hintsLength - 1 < this.state.activeHint && hintsLength !== hints.length) {
+			this.setState({
+				activeHint : hintsLength === 0 ? 0 : hintsLength - 1
+			});
+			return;
+		}
+
+		if(this.hintsRef.current && this.activeHintRef.current) {
+			const offset = this.activeHintRef.current.offsetTop;
+			const scrollTop = this.hintsRef.current.scrollTop;
+			if(scrollTop + 50 < offset || scrollTop + 50 > offset) {
+				this.hintsRef.current.scrollTo({
+					top      : offset - 50,
+					behavior : 'smooth'
+				});
+			}
+		}
+	},
+
+	componentDidMount : function() {},
+
+	keyDown : function(e) {
+		const { code } = e;
+		const { activeHint } = this.state;
+		const { hints, field } = this.props;
+		const match = field?.state?.value?.match(NUMBER_PATTERN);
+		if(code === 'ArrowDown') {
+			e.preventDefault();
+			if(!match || !match?.at(3)) {
+				this.setState({
+					activeHint : activeHint === hints.length - 1 ? 0 : activeHint + 1
+				});
+			}
+		} else if(code === 'ArrowUp') {
+			e.preventDefault();
+			if(!match || !match?.at(3)) {
+				this.setState({
+					activeHint : activeHint === 0 ? hints.length - 1 : activeHint - 1
+				});
+			}
+		} else if(code === 'Enter') {
+			e.preventDefault();
+			if(!match || !match?.at(3)) {
+				field?.hintSelected(hints[activeHint]);
+				this.setState({
+					activeHint : 0
+				});
+			}
+		}
+	},
+
+	render : function() {
+		const { activeHint } = this.state;
+		const { hints, field } = this.props;
+		if(!field) return null;
+		const bounds = field.fieldRef[field.state.id]?.current?.getBoundingClientRect();
+		if(!bounds) return null;
+
+		const hintElements = hints
+			.filter((h)=>h.hint !== field.state.value)
+			.map((h, i)=>{
+				let className = 'CodeMirror-hint';
+				if(activeHint === i) {
+					className += ' CodeMirror-hint-active';
+					return <li key={i}
+						role={'option'}
+						className={className}
+						onMouseDown={(e)=>field.hintSelected(h, e)}
+						ref={this.activeHintRef}>
+						{h.hint}
+					</li>;
+				}
+				return <li key={i}
+					role={'option'}
+					className={className}
+					onMouseDown={(e)=>field.hintSelected(h, e)}>
+					{h.hint}
+				</li>;
+			});
+
+		let style = {
+			display : 'none'
+		};
+		if(hintElements.length > 0) {
+			style = {
+				...style,
+				display : 'block',
+				top     : `${bounds.top - 5}px`,
+				left    : `${bounds.left}px`
+			};
+		}
+		return <React.Fragment>
+			<ul role={'listbox'}
+				id={'hints'}
+				aria-expanded={true}
+				className={'CodeMirror-hints default'}
+				style={style}
+				ref={this.hintsRef}>
+				{hintElements}
+			</ul>
+		</React.Fragment>;
+	}
+});
+
+module.exports = Hints;

shared/naturalcrit/codeEditor/helpers/widget-elements/image-selector/image-selector.jsx

@@ -0,0 +1,92 @@
+require('./image-selector.less');
+const React = require('react');
+const createClass = require('create-react-class');
+const { Modal, modalHelpers } = require('../modal/modal.jsx');
+const { PATTERNS } = require('../constants.js');
+const CodeMirror = require('../../../code-mirror.js');
+const _ = require('lodash');
+
+const ImageSelector = createClass({
+	modalRef : React.createRef(),
+
+	getDefaultProps : function () {
+		return {
+			field : {},
+			cm    : {},
+			n     : undefined
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			selected : undefined,
+		};
+	},
+
+	componentDidMount : function() {
+		modalHelpers.mount(this);
+	},
+
+	componentDidUpdate : function() {
+		const { name, preview, values } = this.props.field;
+		const { selected } = this.state;
+
+		const images = values.map((v, i)=>{
+			const className = String(selected) === String(v) ? 'selected' : '';
+			return <img key={i} className={className} src={preview(v)} alt={`${name} image ${v}`} onClick={()=>this.select(v)}/>;
+		});
+
+		this.state.modalRoot?.render(<Modal ref={this.modalRef} header={_.startCase(name)} save={this.save}>
+			<div className={'images'}>
+				{images}
+			</div>
+		</Modal>);
+	},
+
+	componentWillUnmount : function() {
+		modalHelpers.unmount(this);
+	},
+
+	save : function() {
+		const { cm, field, n } = this.props;
+		const { text } = cm.lineInfo(n);
+		const pattern = PATTERNS.field[field.type](field.name);
+		const [fullmatch, label, current] = text.match(pattern);
+		if(!fullmatch) {
+			console.warn('something is wrong... please report this warning with a screenshot');
+			return;
+		}
+		const currentText = `${label}${current ?? ''}`;
+		const index = 2;
+		const value = label + this.state.selected;
+		cm.replaceRange(value, CodeMirror.Pos(n, index), CodeMirror.Pos(n, index + currentText.length), '+insert');
+	},
+
+	select : function(value) {
+		this.setState({
+			selected : value
+		});
+	},
+
+	showModal : function() {
+		const { cm, field, n } = this.props;
+		const { text } = cm.lineInfo(n);
+		const pattern = PATTERNS.field[field.type](field.name);
+		const [fullmatch, _, current] = text.match(pattern);
+		if(!fullmatch) {
+			return;
+		}
+		this.setState({
+			selected : current
+		});
+		this.modalRef.current.setVisible(true);
+	},
+
+	render : function () {
+		return <React.Fragment>
+			<button onClick={this.showModal}>Select Image</button>
+		</React.Fragment>;
+	}
+});
+
+module.exports = ImageSelector;

shared/naturalcrit/codeEditor/helpers/widget-elements/image-selector/image-selector.less

@@ -0,0 +1,23 @@
+.images {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  max-height: 60vh;
+  overflow-y: scroll;
+
+  img {
+    flex: 0 0 auto;
+    max-width: 10vw;
+    max-height: 20vh;
+    border-radius: 10px;
+
+    &:hover {
+      background-color: rgba(0, 0, 0, .1);
+    }
+
+    &.selected {
+      background-color: rgba(0, 0, 0, .175);
+    }
+  }
+}
+

shared/naturalcrit/codeEditor/helpers/widget-elements/index.js

@@ -0,0 +1,11 @@
+const Text = require('./text/text.jsx');
+const Checkbox = require('./checkbox/checkbox.jsx');
+const ImageSelector = require('./image-selector/image-selector.jsx');
+const ColorSelector = require('./color-selector/color-selector.jsx');
+
+module.exports = {
+	Text          : Text,
+	Checkbox      : Checkbox,
+	ImageSelector : ImageSelector,
+	ColorSelector : ColorSelector,
+};

shared/naturalcrit/codeEditor/helpers/widget-elements/modal/modal.jsx

@@ -0,0 +1,75 @@
+require('./modal.less');
+const React = require('react');
+const ReactDOMClient = require('react-dom/client');
+const createClass = require('create-react-class');
+
+const Modal = createClass({
+	getDefaultProps : function () {
+		return {
+			header : '',
+			save   : ()=>{},
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			visible : false,
+		};
+	},
+
+	setVisible : function(visible) {
+		this.setState({
+			visible
+		});
+	},
+
+	save : function() {
+		this.props.save();
+		this.setVisible(false);
+	},
+
+	render : function () {
+		const { children, header } = this.props;
+		const { visible } = this.state;
+		return <React.Fragment>
+			{visible ? <div className={'bg-cover'}>
+				<div className={'modal'}>
+					<h1>{header}</h1>
+					<hr/>
+					{children}
+					<div className={'action-row'}>
+						<button id={'save'} onClick={()=>this.save()}>Save</button>
+						<button id={'cancel'} onClick={()=>this.setVisible(false)}>Cancel</button>
+					</div>
+				</div>
+			</div> : null}
+		</React.Fragment>;
+	}
+});
+
+module.exports = {
+	/*
+	* Requirements:
+	* - modalRef member variable
+	* - should be re-rendered via `this.state.modalRoot?.render` in `componentDidUpdate`
+	*/
+	Modal,
+	modalHelpers : {
+		// should be called in `componentDidMount`
+		// `self` should be passed as the component instance (`this`)
+		mount : (self)=>{
+			const el = document.createElement('div');
+			const root = ReactDOMClient.createRoot(el);
+			document.querySelector('body').append(el);
+			self.setState({
+				el,
+				modalRoot : root
+			});
+		},
+		// should be called in `componentWillUnmount`
+		// `self` should be passed as the component instance (`this`)
+		unmount : (self)=>{
+			self.state.el.remove();
+		}
+	}
+};

shared/naturalcrit/codeEditor/helpers/widget-elements/modal/modal.less

@@ -0,0 +1,58 @@
+@import 'naturalcrit/styles/colors.less';
+
+.bg-cover {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  z-index: 10000000;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .5);
+}
+
+.modal {
+  position: absolute;
+  top: 10vh;
+  left: 25vw;
+  width: 50vw;
+  min-height: 50vh;
+  max-height: 80vh;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 5px 5px 50px black;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+  h1 {
+    margin-top: 5px;
+    margin-left: 5px;
+    font-size: 2em;
+  }
+
+  >* {
+    flex: 0 0 auto;
+  }
+
+  .action-row {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: left;
+
+    >* {
+      flex: 0 0 auto;
+      margin-left: 5px;
+    }
+  }
+
+  button {
+    &#cancel {
+      background-color: @redLight;
+
+      &:hover {
+        background-color: @red;
+      }
+    }
+  }
+}

shared/naturalcrit/codeEditor/helpers/widget-elements/text/text.jsx

@@ -0,0 +1,165 @@
+require('./text.less');
+const React = require('react');
+const createClass = require('create-react-class');
+const _ = require('lodash');
+const { NUMBER_PATTERN, HINT_TYPE, PATTERNS, STYLE_FN, FIELD_TYPE, SNIPPET_TYPE } = require('../constants');
+const CodeMirror = require('../../../code-mirror.js');
+
+const Text = createClass({
+	fieldRef : {},
+
+	getDefaultProps : function() {
+		return {
+			field         : {},
+			text          : '',
+			n             : 0,
+			setHints      : ()=>{},
+			onChange      : ()=>{},
+			getStyleHints : ()=>{},
+			def           : false,
+			snippetType   : -1
+		};
+	},
+
+	getInitialState : function() {
+		return {
+			value : '',
+			id    : ''
+		};
+	},
+
+	componentDidUpdate : function({ text }, { value }) {
+		if(this.props.text !== text) {
+			const { field, n } = this.props;
+			const pattern = PATTERNS.field[field.type](field.name);
+			const [_, __, value] = this.props.text.match(pattern) ?? [];
+			this.setState({
+				value : value,
+				id    : `${field?.name}-${n}`
+			});
+		}
+
+		if(this.state.value !== value) {
+			const { field } = this.props;
+			this.props.setHints(this, field.hints ? this.props.getStyleHints(field, this.state.value) : []);
+		}
+	},
+
+	componentDidMount : function() {
+		const { field, text, n } = this.props;
+		const id = `${field?.name}-${n}`;
+		const pattern = PATTERNS.field[field.type](field.name);
+		const [_, __, value] = text.match(pattern) ?? [];
+		this.setState({
+			value : value,
+			id
+		});
+		this.fieldRef[id] = React.createRef();
+	},
+
+	componentWillUnmount : function() {
+		this.fieldRef = undefined;
+		this.fieldRef = {};
+		this.fieldRef[this.state.id]?.remove();
+	},
+
+	setFocus : function(e) {
+		const { type } = e;
+		const { field } = this.props;
+		this.props.setHints(this, type === 'focus' && field.hints ? this.props.getStyleHints(field, this.state.value) : []);
+	},
+
+	hintSelected : function(h, e) {
+		let value;
+		if(h?.type === HINT_TYPE.VALUE) {
+			value = h.hint;
+		} else if(h?.type === HINT_TYPE.NUMBER_SUFFIX) {
+			const match = this.state.value.match(NUMBER_PATTERN);
+			let suffix = match?.at(4) ?? '';
+			for (const char of h.hint) {
+				if(suffix.at(0) === char) {
+					suffix = suffix.slice(1);
+				}
+			}
+			value = `${match?.at(1) ?? ''}${match?.at(2) ?? ''}${h.hint}${suffix}`;
+		}
+		this.onChange({
+			target : {
+				value
+			}
+		});
+	},
+	keyDown : function(e) {
+		const { code } = e;
+		const { field } = this.props;
+		const { value } = this.state;
+		const match = value?.match(NUMBER_PATTERN);
+		if(code === 'ArrowDown') {
+			if(match && CSS.supports(field.name, value)) {
+				e.preventDefault();
+				this.onChange({
+					target : {
+						value : `${match.at(1) ?? ''}${Number(match[2]) - field.increment}${match[3] ?? ''}${match.at(4) ?? ''}`
+					}
+				});
+			}
+		} else if(code === 'ArrowUp') {
+			if(match && CSS.supports(field.name, value)) {
+				e.preventDefault();
+				this.onChange({
+					target : {
+						value : `${match.at(1) ?? ''}${Number(match[2]) + field.increment}${match[3] ?? ''}${match.at(4) ?? ''}`
+					}
+				});
+			}
+		}
+	},
+	onChange : function (e){
+		const { cm, text, field, n, snippetType } = this.props;
+		const pattern = PATTERNS.field[field.type](field.name);
+		const [_, label, current] = text.match(pattern) ?? [null, field.name, ''];
+		let index = text.indexOf(`${label}:${current}`);
+		let value = e.target.value;
+		if(index === -1) {
+			if(snippetType === SNIPPET_TYPE.INLINE) {
+				index = text.indexOf('}');
+			}
+			index = index === -1 ? text.length : index;
+			value = `,${field.name}:${value}`;
+		} else {
+			index = index + 1 + field.name.length;
+		}
+		cm.replaceRange(value, CodeMirror.Pos(n, index), CodeMirror.Pos(n, index + current.length), '+insert');
+		this.setState({
+			value : e.target.value,
+		});
+	},
+	render : function() {
+		const { value, id } = this.state;
+		const { field, text, def } = this.props;
+		const style = STYLE_FN(value);
+		const pattern = PATTERNS.field[field.type](field.name);
+		const [_, label, __] = text.match(pattern) ?? [null, undefined, ''];
+		let className = 'widget-field';
+		if(!label) {
+			className += ' suggested';
+		}
+		if(def) {
+			className += ' default';
+		}
+		return <React.Fragment>
+			<div className={className}>
+				<label htmlFor={id}>{field.name}:</label>
+				<input id={id} type='text' value={value}
+					   style={style}
+					   ref={this.fieldRef[id]}
+					   onChange={this.onChange}
+					   onFocus={this.setFocus}
+					   onBlur={this.setFocus}
+					   onKeyDown={this.keyDown}/>
+			</div>
+		</React.Fragment>;
+	}
+});
+
+module.exports = Text;

shared/naturalcrit/codeEditor/helpers/widget-elements/text/text.less

@@ -0,0 +1,37 @@
+.widget-field {
+  display: inline-block;
+  flex: 0 0 auto;
+  background-color: #ddd;
+  border-radius: 10px;
+  padding: 4px 2px;
+
+  >label {
+    display: inline;
+    width: 50px;
+    margin: 0 0;
+  }
+
+  >input {
+    background-color: #ddd;
+    border: none;
+  }
+
+  >.hints {
+    position: relative;
+    left: 30px;
+    max-height: 100px;
+    overflow-y: scroll;
+    background-color: white;
+
+    >.hint {
+      margin: 0 0;
+      padding: 2px;
+      cursor: default;
+
+      &:hover,
+      &.active {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+    }
+  }
+}

shared/naturalcrit/codeEditor/helpers/widgets.js

@@ -0,0 +1,188 @@
+const React = require('react');
+const ReactDOMClient = require('react-dom/client');
+const { PATTERNS, FIELD_TYPE, HINT_TYPE, UNITS } = require('./widget-elements/constants');
+require('./widget-elements/hints/hints.jsx');
+const { Text, Checkbox, ImageSelector, ColorSelector } = require('./widget-elements');
+const CodeMirror = require('../code-mirror.js');
+
+// See https://codemirror.net/5/addon/hint/css-hint.js for code reference
+const pseudoClasses = { 'active'           : 1, 'after'            : 1, 'before'           : 1, 'checked'          : 1, 'default'          : 1,
+	'disabled'         : 1, 'empty'            : 1, 'enabled'          : 1, 'first-child'      : 1, 'first-letter'     : 1,
+	'first-line'       : 1, 'first-of-type'    : 1, 'focus'            : 1, 'hover'            : 1, 'in-range'         : 1,
+	'indeterminate'    : 1, 'invalid'          : 1, 'lang'             : 1, 'last-child'       : 1, 'last-of-type'     : 1,
+	'link'             : 1, 'not'              : 1, 'nth-child'        : 1, 'nth-last-child'   : 1, 'nth-last-of-type' : 1,
+	'nth-of-type'      : 1, 'only-of-type'     : 1, 'only-child'       : 1, 'optional'         : 1, 'out-of-range'     : 1,
+	'placeholder'      : 1, 'read-only'        : 1, 'read-write'       : 1, 'required'         : 1, 'root'             : 1,
+	'selection'        : 1, 'target'           : 1, 'valid'            : 1, 'visited'          : 1
+};
+
+const genKey = (...args)=>args.join('-');
+
+module.exports = function(widgets, cm, setHints) {
+	const roots = {};
+	const spec = CodeMirror.resolveMode('text/css');
+	const headless = CodeMirror(()=>{});
+
+	const makeTempCSSDoc = (value)=>CodeMirror.Doc(`.selector {\n${value}\n}`, 'text/css');
+
+	// See https://codemirror.net/5/addon/hint/css-hint.js for code reference
+	const getStyleHints = (field, value)=>{
+		const tempDoc = makeTempCSSDoc(`${field.name}:${value?.replaceAll(`'"`, '') ?? ''}`);
+		headless.swapDoc(tempDoc);
+		const pos = CodeMirror.Pos(1, field.name.length + 1 + (value?.length ?? 0), false);
+		const token = headless.getTokenAt(pos);
+		const inner = CodeMirror.innerMode(tempDoc.getMode(), token?.state);
+
+		if(inner.mode.name !== 'css') return;
+
+		if(token.type === 'keyword' && '!important'.indexOf(token.string) === 0)
+			return { list : ['!important'], from : CodeMirror.Pos(pos.line, token.start),
+				to   : CodeMirror.Pos(pos.line, token.end) };
+
+		let start = token.start, end = pos.ch, word = token.string.slice(0, end - start);
+		if(/[^\w$_-]/.test(word)) {
+			word = ''; start = end = pos.ch;
+		}
+
+		let result = [];
+		const add = (keywords)=>{
+			for (const name in keywords)
+				if(!word || name.lastIndexOf(word, 0) === 0)
+					result.push(name);
+		};
+
+		const st = inner.state.state;
+		if(st === 'pseudo' || token.type === 'variable-3') {
+			add(pseudoClasses);
+		} else if(st === 'block' || st === 'maybeprop') {
+			add(spec.propertyKeywords);
+		} else if(st === 'prop' || st === 'parens' || st === 'at' || st === 'params') {
+			add(spec.valueKeywords);
+			add(spec.colorKeywords);
+		} else if(st === 'media' || st === 'media_parens') {
+			add(spec.mediaTypes);
+			add(spec.mediaFeatures);
+		}
+		result = result.map((h)=>({ hint: h, type: HINT_TYPE.VALUE }))
+			.filter((h)=>CSS.supports(field.name, h.hint) && h.hint.includes(value ?? ''));
+
+		const numberSuffix = word.slice(-4).replaceAll(/\d/g, '');
+		if(token.type === 'number' && !UNITS.includes(numberSuffix)) {
+			result.push(...UNITS
+				.filter((u)=>u.includes(numberSuffix) && CSS.supports(field.name, `${value.replaceAll(/\D/g, '') ?? ''}${u}`))
+				.map((u)=>({ hint: u, type: HINT_TYPE.NUMBER_SUFFIX }))
+			);
+		}
+
+		return result;
+	};
+
+	const widgetOptions = widgets.map((widget)=>({
+		name         : widget.name,
+		pattern      : PATTERNS.snippet[widget.type](widget.name),
+		renderWidget : (n, node)=>{
+			roots[n] = roots[n] ?? {};
+			const parent = document.createElement('div');
+			const id = `${widget.name}-${n}`;
+			parent.id = id;
+
+			const textFieldNames = (widget.fields || []).filter((f)=>f.type === FIELD_TYPE.TEXT || f.type === FIELD_TYPE.COLOR_SELECTOR).map((f)=>f.name);
+			const { text } = cm.lineInfo(n);
+
+			const fields = (widget.fields || []).map((field)=>{
+				const key = genKey(widget.name, n, field.name);
+				if(field.type === FIELD_TYPE.CHECKBOX) {
+					return <Checkbox key={key} cm={cm} n={n} prefix={widget.name} value={field.name} def={true}/>;
+				} else if(field.type === FIELD_TYPE.TEXT) {
+					return <Text key={key} field={field} cm={cm} n={n} text={text} setHints={(f, h)=>setHints(h, f)} getStyleHints={getStyleHints} def={true} snippetType={widget.type}/>;
+				} else if(field.type === FIELD_TYPE.IMAGE_SELECTOR) {
+					return <ImageSelector key={key} field={field} cm={cm} n={n}/>;
+				} else if(field.type === FIELD_TYPE.COLOR_SELECTOR) {
+					return <ColorSelector key={key} field={field} cm={cm} n={n} text={text} def={true} snippetType={widget.type}/>;
+				} else {
+					return null;
+				}
+			}).filter(Boolean);
+
+			const styles = [...text.matchAll(PATTERNS.collectStyles)].map(([_, style])=>{
+				if(textFieldNames.includes(style)) return false;
+				const field = {
+					name      : style,
+					type      : FIELD_TYPE.TEXT,
+					increment : 5,
+					hints     : true,
+				};
+				const key = genKey(widget.name, n, style);
+				if(style.includes('color')) {
+					return <ColorSelector key={key} field={field} cm={cm} n={n} text={text} snippetType={widget.type}/>;
+				}
+				return <Text key={key} field={field} cm={cm} n={n} text={text} setHints={(f, h)=>setHints(h, f)} getStyleHints={getStyleHints} snippetType={widget.type}/>;
+			}).filter(Boolean);
+
+			const root = roots[n][id] ?? ReactDOMClient.createRoot(node || parent);
+			root.render(<React.Fragment>
+				{fields}
+				{styles}
+			</React.Fragment>);
+			roots[n][id] = root;
+
+			return node || parent;
+		}
+	}));
+
+	const updateLineWidgets = (n)=>{
+		const { text, widgets } =  cm.lineInfo(n);
+		const widgetOption = widgetOptions.find((option)=>!!text.match(option.pattern));
+		if(!widgetOption) return;
+		if(!!widgets) {
+			for (const widget of widgets) {
+				widgetOption.renderWidget(n, widget.node);
+			}
+		} else {
+			return cm.addLineWidget(n, widgetOption.renderWidget(n), {
+				above       : false,
+				coverGutter : false,
+				noHScroll   : true,
+				className   : `snippet-options-widget ${widgetOption.name}-widget ${widgetOption.name}-widget-${n}`
+			});
+		}
+	};
+
+	return {
+		roots,
+		removeLineWidget : (n, widget)=>{
+			roots[n][widget.node.id]?.unmount();
+			delete roots[n][widget.node.id];
+			widget?.clear();
+		},
+		updateLineWidgets,
+		updateAllLineWidgets : ()=>{
+			for (let i = 0; i < cm.lineCount(); i++) {
+				const { widgets } = cm.lineInfo(i);
+				if(!!widgets) {
+					updateLineWidgets(i);
+				}
+			}
+		},
+		updateWidgetGutter : ()=>{
+			cm.operation(()=>{
+				for (let i = 0; i < cm.lineCount(); i++) {
+					const { text, widgets } = cm.lineInfo(i);
+
+					if(widgetOptions.some((option)=>text.match(option.pattern))) {
+						if(widgets) {
+							continue;
+						}
+						const optionsMarker = document.createElement('div');
+						optionsMarker.style.color = '#822';
+						optionsMarker.style.cursor = 'pointer';
+						optionsMarker.innerHTML = '●';
+						cm.setGutterMarker(i, 'widget-gutter', optionsMarker);
+					} else {
+						cm.setGutterMarker(i, 'widget-gutter', null);
+					}
+				}
+			});
+		}
+	};
+};

shared/naturalcrit/splitPane/splitPane.jsx

@@ -61,8 +61,7 @@ const SplitPane = createClass({
 		return result;
 	},
 
-	handleUp : function(e){
+	handleUp : function(){
-		e.preventDefault();
 		if(this.state.isDragging){
 			this.props.onDragFinish(this.state.currentDividerPos);
 			window.localStorage.setItem(this.props.storageKey, this.state.currentDividerPos);
@@ -79,7 +78,6 @@ const SplitPane = createClass({
 	handleMove : function(e){
 		if(!this.state.isDragging) return;
 
-		e.preventDefault();
 		const newSize = this.limitPosition(e.pageX);
 		this.setState({
 			currentDividerPos : newSize,
@@ -124,7 +122,7 @@ const SplitPane = createClass({
 	renderDivider : function(){
 		return <>
 			{this.renderMoveArrows()}
-			<div className='divider' onPointerDown={this.handleDown} >
+			<div className='divider' onMouseDown={this.handleDown} >
 				<div className='dots'>
 					<i className='fas fa-circle' />
 					<i className='fas fa-circle' />
@@ -135,7 +133,7 @@ const SplitPane = createClass({
 	},
 
 	render : function(){
-		return <div className='splitPane' onPointerMove={this.handleMove} onPointerUp={this.handleUp}>
+		return <div className='splitPane' onMouseMove={this.handleMove} onMouseUp={this.handleUp}>
 			<Pane
 				ref='pane1'
 				width={this.state.currentDividerPos}

shared/naturalcrit/splitPane/splitPane.less

@@ -11,7 +11,6 @@
 		flex       : 1;
 	}
 	.divider{
-		touch-action     : none;
 		display          : table;
 		height           : 100%;
 		width            : 15px;

themes/V3/5eDMG/style.less

@@ -10,21 +10,6 @@
 	background-image : url(/assets/DMG_background.png);
 	background-size  : cover;
 
-	/*TABLES WITHIN NOTES*/
-	.note table tbody tr:nth-child(odd) {
-		background:#fff;
-	}
-
-	/*DROP CAP*/
-	h1 + p::first-letter {
-		background-image: unset;
-		color:black;
-	}
-
-	.quote p:first-child::first-line  {
-		all: unset;
-	}
-
 	&:after {
 		background-image : url(/assets/DMG_footerAccent.png);
 		height: 58px;

themes/V3/5ePHB/snippets.js

@@ -8,7 +8,6 @@ const ClassFeatureGen    = require('./snippets/classfeature.gen.js');
 const CoverPageGen       = require('./snippets/coverpage.gen.js');
 const TableOfContentsGen = require('./snippets/tableOfContents.gen.js');
 const indexGen           = require('./snippets/index.gen.js');
-const QuoteGen 			 = require('./snippets/quote.gen.js');
 const dedent             = require('dedent-tabs').default;
 
 
@@ -124,11 +123,6 @@ module.exports = [
 				icon : 'fas fa-mask',
 				gen  : ClassFeatureGen,
 			},
-			{
-				name : 'Quote',
-				icon : 'fas fa-quote-right',
-				gen  : QuoteGen,
-			},
 			{
 				name : 'Note',
 				icon : 'fas fa-sticky-note',
@@ -226,51 +220,34 @@ module.exports = [
 		view      : 'text',
 		snippets  : [
 			{
-				name        : 'Class Tables',
+				name : 'Class Table',
-				icon        : 'fas fa-table',
+				icon : 'fas fa-table',
-				gen         : ClassTableGen.full('classTable,frame,decoration,wide'),
+				gen  : ClassTableGen.full('classTable,frame,decoration,wide'),
-				subsnippets : [
+			},
-					{
+			{
-						name : 'Martial Class Table',
+				name : 'Class Table (unframed)',
-						icon : 'fas fa-table',
+				icon : 'fas fa-border-none',
-						gen  : ClassTableGen.non('classTable,frame,decoration'),
+				gen  : ClassTableGen.full('classTable,wide'),
-					},
+			},
-					{
+			{
-						name : 'Martial Class Table (unframed)',
+				name : '1/2 Class Table',
-						icon : 'fas fa-border-none',
+				icon : 'fas fa-list-alt',
-						gen  : ClassTableGen.non('classTable'),
+				gen  : ClassTableGen.half('classTable,decoration,frame'),
-					},
+			},
-					{
+			{
-						name : 'Full Caster Class Table',
+				name : '1/2 Class Table (unframed)',
-						icon : 'fas fa-table',
+				icon : 'fas fa-border-none',
-						gen  : ClassTableGen.full('classTable,frame,decoration,wide'),
+				gen  : ClassTableGen.half('classTable'),
-					},
+			},
-					{
+			{
-						name : 'Full Caster Class Table (unframed)',
+				name : '1/3 Class Table',
-						icon : 'fas fa-border-none',
+				icon : 'fas fa-border-all',
-						gen  : ClassTableGen.full('classTable,wide'),
+				gen  : ClassTableGen.third('classTable,frame'),
-					},
+			},
-					{
+			{
-						name : 'Half Caster Class Table',
+				name : '1/3 Class Table (unframed)',
-						icon : 'fas fa-list-alt',
+				icon : 'fas fa-border-none',
-						gen  : ClassTableGen.half('classTable,frame,decoration,wide'),
+				gen  : ClassTableGen.third('classTable'),
-					},
-					{
-						name : 'Half Caster Class Table (unframed)',
-						icon : 'fas fa-border-none',
-						gen  : ClassTableGen.half('classTable,wide'),
-					},
-					{
-						name : 'Third Caster Spell Table',
-						icon : 'fas fa-border-all',
-						gen  : ClassTableGen.third('classTable,frame,decoration'),
-					},
-					{
-						name : 'Third Caster Spell Table (unframed)',
-						icon : 'fas fa-border-none',
-						gen  : ClassTableGen.third('classTable'),
-					}
-				]
 			},
 			{
 				name         : 'Rune Table',

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

@@ -1,138 +1,132 @@
 const _ = require('lodash');
-const dedent = require('dedent-tabs').default;
 
 const features = [
-	'Astrological Botany',   'Biochemical Sorcery',   'Civil Divination',
+	'Astrological Botany',
-	'Consecrated Augury',    'Demonic Anthropology',  'Divinatory Mineralogy',
+	'Biochemical Sorcery',
-	'Exo Interfacer',        'Genetic Banishing',     'Gunpowder Torturer',
+	'Civil Divination',
-	'Gunslinger Corruptor',  'Hermetic Geography',    'Immunological Cultist',
+	'Consecrated Augury',
-	'Malefic Chemist',       'Mathematical Pharmacy', 'Nuclear Biochemistry',
+	'Demonic Anthropology',
-	'Orbital Gravedigger',   'Pharmaceutical Outlaw', 'Phased Linguist',
+	'Divinatory Mineralogy',
-	'Plasma Gunslinger',     'Police Necromancer',    'Ritual Astronomy',
+	'Exo Interfacer',
-	'Sixgun Poisoner',       'Seismological Alchemy', 'Spiritual Illusionism',
+	'Genetic Banishing',
-	'Statistical Occultism', 'Spell Analyst',         'Torque Interfacer'
+	'Gunpowder Torturer',
-].map((f)=>_.padEnd(f, 21)); // Pad to equal length of 21 chars long
+	'Gunslinger Corruptor',
-
+	'Hermetic Geography',
-const classnames = [
+	'Immunological Cultist',
-	'Ackerman', 'Berserker-Typist', 'Concierge', 'Fishmonger',
+	'Malefic Chemist',
-	'Haberdasher', 'Manicurist', 'Netrunner', 'Weirkeeper'
+	'Mathematical Pharmacy',
+	'Nuclear Biochemistry',
+	'Orbital Gravedigger',
+	'Pharmaceutical Outlaw',
+	'Phased Linguist',
+	'Plasma Gunslinger',
+	'Police Necromancer',
+	'Ritual Astronomy',
+	'Sixgun Poisoner',
+	'Seismological Alchemy',
+	'Spiritual Illusionism',
+	'Statistical Occultism',
+	'Spell Analyst',
+	'Torque Interfacer'
 ];
 
+const classnames = ['Ackerman', 'Berserker-Typist', 'Concierge', 'Fishmonger',
+	                  'Haberdasher', 'Manicurist', 'Netrunner', 'Weirkeeper'];
+
+const levels = ['1st', '2nd', '3rd', '4th', '5th',
+              	'6th', '7th', '8th', '9th', '10th',
+	              '11th', '12th', '13th', '14th', '15th',
+              	'16th', '17th', '18th', '19th', '20th'];
+
+const profBonus = [2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6];
+
+const maxes = [4, 3, 3, 3, 3, 2, 2, 1, 1];
+
+const drawSlots = function(Slots, rows, padding){
+	let slots = Number(Slots);
+	return _.times(rows, function(i){
+		const max = maxes[i];
+		if(slots < 1) return _.pad('—', padding);
+		const res = _.min([max, slots]);
+		slots -= res;
+		return _.pad(res.toString(), padding);
+	}).join(' | ');
+};
+
 module.exports = {
-	non : function(snippetClasses){
+	full : function(classes){
-		return dedent`
+		const classname = _.sample(classnames);
-		{{${snippetClasses}
+
-		##### The ${_.sample(classnames)}
+
-		| Level | Proficiency Bonus | Features | ${_.sample(features)} |
+		let cantrips = 3;
-		|:-----:|:-----------------:|:---------|:---------------------:|
+		let spells = 1;
-		|  1st  |  +2  | ${_.sample(features)} |          2            |
+		let slots = 2;
-		|  2nd  |  +2  | ${_.sample(features)} |          2            |
+		return `{{${classes}\n##### The ${classname}\n` +
-		|  3rd  |  +2  | ${_.sample(features)} |          3            |
+		`| Level | Proficiency | Features     | Cantrips | Spells | --- Spell Slots Per Spell Level ---|||||||||\n`+
-		|  4th  |  +2  | ${_.sample(features)} |          3            |
+		`|      ^| Bonus      ^|             ^| Known   ^| Known ^|1st |2nd |3rd |4th |5th |6th |7th |8th |9th |\n`+
-		|  5th  |  +3  | ${_.sample(features)} |          3            |
+		`|:-----:|:-----------:|:-------------|:--------:|:------:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|\n${
-		|  6th  |  +3  | ${_.sample(features)} |          4            |
+			_.map(levels, function(levelName, level){
-		|  7th  |  +3  | ${_.sample(features)} |          4            |
+				const res = [
-		|  8th  |  +3  | ${_.sample(features)} |          4            |
+					_.pad(levelName, 5),
-		|  9th  |  +4  | ${_.sample(features)} |          4            |
+					_.pad(`+${profBonus[level]}`, 2),
-		| 10th  |  +4  | ${_.sample(features)} |          4            |
+					_.padEnd(_.sample(features), 21),
-		| 11th  |  +4  | ${_.sample(features)} |          4            |
+					_.pad(cantrips.toString(), 8),
-		| 12th  |  +4  | ${_.sample(features)} |          5            |
+					_.pad(spells.toString(), 6),
-		| 13th  |  +5  | ${_.sample(features)} |          5            |
+					drawSlots(slots, 9, 2),
-		| 14th  |  +5  | ${_.sample(features)} |          5            |
+				].join(' | ');
-		| 15th  |  +5  | ${_.sample(features)} |          5            |
+
-		| 16th  |  +5  | ${_.sample(features)} |          5            |
+				cantrips += _.random(0, 1);
-		| 17th  |  +6  | ${_.sample(features)} |          6            |
+				spells += _.random(0, 1);
-		| 18th  |  +6  | ${_.sample(features)} |          6            |
+				slots += _.random(0, 2);
-		| 19th  |  +6  | ${_.sample(features)} |          6            |
+
-		| 20th  |  +6  | ${_.sample(features)} |      unlimited        |
+				return `| ${res} |`;
-		}}\n\n`;
+			}).join('\n')}\n}}\n\n`;
 	},
 
-	full : function(snippetClasses){
+	half : function(classes){
-		return dedent`
+		const classname =  _.sample(classnames);
-		{{${snippetClasses}
+
-		##### The ${_.sample(classnames)}
+		let featureScore = 1;
-		| Level | Proficiency | Features     | Cantrips | --- Spell Slots Per Spell Level ---|||||||||
+		return `{{${classes}\n##### The ${classname}\n` +
-		|      ^| Bonus      ^|             ^| Known   ^|1st |2nd |3rd |4th |5th |6th |7th |8th |9th |
+		`| Level | Proficiency Bonus | Features | ${_.pad(_.sample(features), 21)} |\n` +
-		|:-----:|:-----------:|:-------------|:--------:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|
+		`|:-----:|:-----------------:|:---------|:---------------------:|\n${
-		|  1st  | +2 | ${_.sample(features)} |    2     | 2  | —  | —  | —  | —  | —  | —  | —  | —  |
+			_.map(levels, function(levelName, level){
-		|  2nd  | +2 | ${_.sample(features)} |    2     | 3  | —  | —  | —  | —  | —  | —  | —  | —  |
+				const res = [
-		|  3rd  | +2 | ${_.sample(features)} |    2     | 4  | 2  | —  | —  | —  | —  | —  | —  | —  |
+					_.pad(levelName, 5),
-		|  4th  | +2 | ${_.sample(features)} |    3     | 4  | 3  | —  | —  | —  | —  | —  | —  | —  |
+					_.pad(`+${profBonus[level]}`, 2),
-		|  5th  | +3 | ${_.sample(features)} |    3     | 4  | 3  | 2  | —  | —  | —  | —  | —  | —  |
+					_.padEnd(_.sample(features), 23),
-		|  6th  | +3 | ${_.sample(features)} |    3     | 4  | 3  | 3  | —  | —  | —  | —  | —  | —  |
+					_.pad(`+${featureScore}`, 21),
-		|  7th  | +3 | ${_.sample(features)} |    3     | 4  | 3  | 3  | 1  | —  | —  | —  | —  | —  |
+				].join(' | ');
-		|  8th  | +3 | ${_.sample(features)} |    3     | 4  | 3  | 3  | 2  | —  | —  | —  | —  | —  |
+
-		|  9th  | +4 | ${_.sample(features)} |    3     | 4  | 3  | 3  | 2  | 1  | —  | —  | —  | —  |
+				featureScore += _.random(0, 1);
-		| 10th  | +4 | ${_.sample(features)} |    3     | 4  | 3  | 3  | 2  | 1  | —  | —  | —  | —  |
+
-		| 11th  | +4 | ${_.sample(features)} |    4     | 4  | 3  | 3  | 2  | 1  | 1  | —  | —  | —  |
+				return `| ${res} |`;
-		| 12th  | +4 | ${_.sample(features)} |    4     | 4  | 3  | 3  | 2  | 1  | 1  | —  | —  | —  |
+			}).join('\n')}\n}}\n\n`;
-		| 13th  | +5 | ${_.sample(features)} |    4     | 4  | 3  | 3  | 2  | 1  | 1  | 1  | —  | —  |
-		| 14th  | +5 | ${_.sample(features)} |    4     | 4  | 3  | 3  | 2  | 1  | 1  | 1  | —  | —  |
-		| 15th  | +5 | ${_.sample(features)} |    4     | 4  | 3  | 3  | 2  | 1  | 1  | 1  | 1  | —  |
-		| 16th  | +5 | ${_.sample(features)} |    4     | 4  | 3  | 3  | 2  | 1  | 1  | 1  | 1  | —  |
-		| 17th  | +6 | ${_.sample(features)} |    4     | 4  | 3  | 3  | 2  | 1  | 1  | 1  | 1  | 1  |
-		| 18th  | +6 | ${_.sample(features)} |    4     | 4  | 3  | 3  | 3  | 1  | 1  | 1  | 1  | 1  |
-		| 19th  | +6 | ${_.sample(features)} |    4     | 4  | 3  | 3  | 3  | 2  | 2  | 1  | 1  | 1  |
-		| 20th  | +6 | ${_.sample(features)} |    4     | 4  | 3  | 3  | 3  | 2  | 2  | 2  | 1  | 1  |
-		}}\n\n`;
 	},
 
-	half : function(snippetClasses){
+	third : function(classes){
-		return dedent`
+		const classname = _.sample(classnames);
-		{{${snippetClasses}
-		##### The ${_.sample(classnames)}
-		| Level | Proficiency | Features     | Spells |--- Spell Slots Per Spell Level ---|||||
-		|      ^| Bonus      ^|             ^| Known ^|  1st  |  2nd  |  3rd  |  4th  |  5th  |
-		|:-----:|:-----------:|:-------------|:------:|:-----:|:-----:|:-----:|:-----:|:-----:|
-		|  1st  | +2 | ${_.sample(features)} |   —    |   —   |   —   |   —   |   —   |   —   |
-		|  2nd  | +2 | ${_.sample(features)} |   2    |   2   |   —   |   —   |   —   |   —   |
-		|  3rd  | +2 | ${_.sample(features)} |   3    |   3   |   —   |   —   |   —   |   —   |
-		|  4th  | +2 | ${_.sample(features)} |   3    |   3   |   —   |   —   |   —   |   —   |
-		|  5th  | +3 | ${_.sample(features)} |   4    |   4   |   2   |   —   |   —   |   —   |
-		|  6th  | +3 | ${_.sample(features)} |   4    |   4   |   2   |   —   |   —   |   —   |
-		|  7th  | +3 | ${_.sample(features)} |   5    |   4   |   3   |   —   |   —   |   —   |
-		|  8th  | +3 | ${_.sample(features)} |   5    |   4   |   3   |   —   |   —   |   —   |
-		|  9th  | +4 | ${_.sample(features)} |   6    |   4   |   3   |   2   |   —   |   —   |
-		| 10th  | +4 | ${_.sample(features)} |   6    |   4   |   3   |   2   |   —   |   —   |
-		| 11th  | +4 | ${_.sample(features)} |   7    |   4   |   3   |   3   |   —   |   —   |
-		| 12th  | +4 | ${_.sample(features)} |   7    |   4   |   3   |   3   |   —   |   —   |
-		| 13th  | +5 | ${_.sample(features)} |   8    |   4   |   3   |   3   |   1   |   —   |
-		| 14th  | +5 | ${_.sample(features)} |   8    |   4   |   3   |   3   |   1   |   —   |
-		| 15th  | +5 | ${_.sample(features)} |   9    |   4   |   3   |   3   |   2   |   —   |
-		| 16th  | +5 | ${_.sample(features)} |   9    |   4   |   3   |   3   |   2   |   —   |
-		| 17th  | +6 | ${_.sample(features)} |   10   |   4   |   3   |   3   |   3   |   1   |
-		| 18th  | +6 | ${_.sample(features)} |   10   |   4   |   3   |   3   |   3   |   1   |
-		| 19th  | +6 | ${_.sample(features)} |   11   |   4   |   3   |   3   |   3   |   2   |
-		| 20th  | +6 | ${_.sample(features)} |   11   |   4   |   3   |   3   |   3   |   2   |
-		}}\n\n`;
-	},
 
-	third : function(snippetClasses){
+		let cantrips = 3;
-		return dedent`
+		let spells = 1;
-		{{${snippetClasses}
+		let slots = 2;
-		##### ${_.sample(classnames)} Spellcasting
+		return `{{${classes}\n##### ${classname} Spellcasting\n` +
-		| Level | Cantrips | Spells |--- Spells Slots per Spell Level ---||||
+		`| Class  | Cantrips | Spells  |--- Spells Slots per Spell Level ---||||\n` +
-		|      ^| Known   ^| Known ^|   1st   |   2nd   |   3rd   |   4th   |
+		`| Level ^| Known   ^| Known  ^|   1st   |   2nd   |   3rd   |   4th   |\n` +
-		|:-----:|:--------:|:------:|:-------:|:-------:|:-------:|:-------:|
+		`|:------:|:--------:|:-------:|:-------:|:-------:|:-------:|:-------:|\n${
-		|  3rd  |    2     |   3    |    2    |    —    |    —    |    —    |
+			_.map(levels, function(levelName, level){
-		|  4th  |    2     |   4    |    3    |    —    |    —    |    —    |
+				const res = [
-		|  5th  |    2     |   4    |    3    |    —    |    —    |    —    |
+					_.pad(levelName, 6),
-		|  6th  |    2     |   4    |    3    |    —    |    —    |    —    |
+					_.pad(cantrips.toString(), 8),
-		|  7th  |    2     |   5    |    4    |    2    |    —    |    —    |
+					_.pad(spells.toString(), 7),
-		|  8th  |    2     |   6    |    4    |    2    |    —    |    —    |
+					drawSlots(slots, 4, 7),
-		|  9th  |    2     |   6    |    4    |    2    |    —    |    —    |
+				].join(' | ');
-		| 10th  |    3     |   7    |    4    |    3    |    —    |    —    |
+
-		| 11th  |    3     |   8    |    4    |    3    |    —    |    —    |
+				cantrips += _.random(0, 1);
-		| 12th  |    3     |   8    |    4    |    3    |    —    |    —    |
+				spells += _.random(0, 1);
-		| 13th  |    3     |   9    |    4    |    3    |    2    |    —    |
+				slots += _.random(0, 1);
-		| 14th  |    3     |   10   |    4    |    3    |    2    |    —    |
+
-		| 15th  |    3     |   10   |    4    |    3    |    2    |    —    |
+				return `| ${res} |`;
-		| 16th  |    3     |   11   |    4    |    3    |    3    |    —    |
+			}).join('\n')}\n}}\n\n`;
-		| 17th  |    3     |   11   |    4    |    3    |    3    |    —    |
-		| 18th  |    3     |   11   |    4    |    3    |    3    |    —    |
-		| 19th  |    3     |   12   |    4    |    3    |    3    |    1    |
-		| 20th  |    3     |   13   |    4    |    3    |    3    |    1    |
-		}}\n\n`;
 	}
 };

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

@@ -1,51 +0,0 @@
-const _ = require("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.",
-  "The dragon's roar shook the ground beneath their feet, and the brave knight stood tall, his sword at the ready. He knew that this would be the battle of his life, but he was determined to emerge victorious.",
-  "The wizard's laboratory was a sight to behold, filled with bubbling cauldrons, ancient tomes, and strange artifacts from distant lands. As the apprentice gazed around in wonder, she knew that she was about to embark on a journey unlike any other.",
-  "The tavern was packed with rowdy patrons, their voices raised in song and laughter. The bard took center stage, strumming his lute and launching into a tale of adventure and heroism that had the crowd hanging on his every word.",
-  "The thief crept through the shadows, his eyes scanning the room for any sign of danger. He knew that one false move could mean the difference between success and failure, and he was determined to come out on top.",
-  "The elf queen stood atop her castle walls, surveying the kingdom below with a mix of pride and sadness. She knew that the coming war would be brutal, but she was determined to protect her people at all costs.",
-  "The necromancer's tower loomed in the distance, its dark spires piercing the sky. As the adventurers approached, they could feel the chill of death emanating from within",
-  "The ranger moved through the forest like a shadow, his senses attuned to every sound and movement around him. He knew that danger lurked behind every tree, but he was ready for whatever came his way.",
-  "The paladin knelt before the altar, his hands clasped in prayer. He knew that his faith would be tested in the days ahead, but he was ready to face whatever trials lay in store for him.",
-  "The druid communed with the spirits of nature, his mind merging with the trees, the animals, and the very earth itself. He knew that his power came with a great responsibility, and he was determined to use it for the greater good.",
-];
-
-const authors = [
-    "Unknown",
-    "James Wyatt",
-    "Eolande Blackwood",
-    "Ragnar Ironheart",
-    "Lyra Nightshade",
-    "Valtorius Darkstar",
-    "Isadora Fireheart",
-    "Theron Shadowbane",
-    "Lirien Starweaver",
-    "Drogathar Bonecrusher",
-    "Kaelen Frostblade",
-];
-
-const books = [
-    "The Blade of Destiny",
-    "Dragonfire and Steel",
-    "The Bard's Tale",
-    "Darkness Rising",
-    "The Sacred Quest",
-    "Shadows in the Forest",
-    "The Starweaver Chronicles",
-    "Beneath the Bones",
-    "Moonlit Magic",
-    "Frost and Fury",
-
-];
-module.exports = () => {
-  return `
-{{quote
-${_.sample(quotes)}
-
-{{attribution ${_.sample(authors)}, *${_.sample(books)}*}}
-}}
-\n`;
-};

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

@@ -29,23 +29,21 @@ const getTOC = (pages)=>{
 
 	const res = [];
 	_.each(pages, (page, pageNum)=>{
-		if(!page.includes("{{frontCover}}") && !page.includes("{{insideCover}}") && !page.includes("{{partCover}}") && !page.includes("{{backCover}}")) {
+		const lines = page.split('\n');
-			const lines = page.split('\n');
+		_.each(lines, (line)=>{
-			_.each(lines, (line)=>{
+			if(_.startsWith(line, '# ')){
-				if(_.startsWith(line, '# ')){
+				const title = line.replace('# ', '');
-					const title = line.replace('# ', '');
+				add1(title, pageNum);
-					add1(title, pageNum);
+			}
-				}
+			if(_.startsWith(line, '## ')){
-				if(_.startsWith(line, '## ')){
+				const title = line.replace('## ', '');
-					const title = line.replace('## ', '');
+				add2(title, pageNum);
-					add2(title, pageNum);
+			}
-				}
+			if(_.startsWith(line, '### ')){
-				if(_.startsWith(line, '### ')){
+				const title = line.replace('### ', '');
-					const title = line.replace('### ', '');
+				add3(title, pageNum);
-					add3(title, pageNum);
+			}
-				}
+		});
-			});
-		}
 	});
 	return res;
 };

themes/V3/5ePHB/widgets.js

@@ -0,0 +1,154 @@
+const _ = require('lodash');
+const { SNIPPET_TYPE, FIELD_TYPE, fourDigitNumberFromValue } = require('../../../shared/naturalcrit/codeEditor/helpers/widget-elements/constants');
+
+module.exports = [{
+	name   : 'monster',
+	type   : SNIPPET_TYPE.BLOCK,
+	fields : [{
+		name : 'frame',
+		type : FIELD_TYPE.CHECKBOX
+	}, {
+		name : 'wide',
+		type : FIELD_TYPE.CHECKBOX
+	}]
+}, {
+	name   : 'classTable',
+	type   : SNIPPET_TYPE.BLOCK,
+	fields : [{
+		name : 'frame',
+		type : FIELD_TYPE.CHECKBOX
+	}, {
+		name : 'decoration',
+		type : FIELD_TYPE.CHECKBOX
+	}, {
+		name : 'wide',
+		type : FIELD_TYPE.CHECKBOX
+	}]
+}, {
+	name   : 'runeTable',
+	type   : SNIPPET_TYPE.BLOCK,
+	fields : [{
+		name : 'frame',
+		type : FIELD_TYPE.CHECKBOX
+	}, {
+		name : 'wide',
+		type : FIELD_TYPE.CHECKBOX
+	}, {
+		name : 'font-family',
+		type : FIELD_TYPE.TEXT
+	}]
+}, {
+	name   : 'index',
+	type   : SNIPPET_TYPE.BLOCK,
+	fields : [{
+		name : 'wide',
+		type : FIELD_TYPE.CHECKBOX
+	}, {
+		name      : 'columns',
+		type      : FIELD_TYPE.TEXT,
+		increment : 1
+	}]
+}, {
+	name   : 'image',
+	type   : SNIPPET_TYPE.INJECTOR,
+	fields : []
+}, {
+	name   : 'artist',
+	type   : SNIPPET_TYPE.BLOCK,
+	fields : [{
+		name      : 'top',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+		hints     : true
+	}]
+}, {
+	name   : 'watercolor',
+	type   : SNIPPET_TYPE.INLINE,
+	fields : [{
+		name    : 'watercolor',
+		type    : FIELD_TYPE.IMAGE_SELECTOR,
+		preview : (value)=>`/assets/watercolor/watercolor${value}.png`,
+		values  : _.range(1, 13)
+	}, {
+		name      : 'top',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+		hints     : true
+	}, {
+		name      : 'left',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+		hints     : true
+	}, {
+		name      : 'width',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+		hints     : true
+	}, {
+		name      : 'opacity',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5
+	}, {
+		name : 'background-color',
+		type : FIELD_TYPE.COLOR_SELECTOR,
+	}]
+}, {
+	name   : 'imageMaskCenter',
+	type   : SNIPPET_TYPE.INLINE,
+	fields : [{
+		name    : 'imageMaskCenter',
+		type    : FIELD_TYPE.IMAGE_SELECTOR,
+		preview : (value)=>`/assets/waterColorMasks/center/${fourDigitNumberFromValue(value)}.webp`,
+		values  : _.range(1, 17)
+	}, {
+		name      : '--offsetX',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+	}, {
+		name      : '--offsetY',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+	}, {
+		name      : '--rotation',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+	}]
+}, {
+	name   : 'imageMaskEdge',
+	type   : SNIPPET_TYPE.INLINE,
+	fields : [{
+		name    : 'imageMaskEdge',
+		type    : FIELD_TYPE.IMAGE_SELECTOR,
+		preview : (value)=>`/assets/waterColorMasks/edge/${fourDigitNumberFromValue(value)}.webp`,
+		values  : _.range(1, 9)
+	}, {
+		name      : '--offset',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+	}, {
+		name      : '--rotation',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+	}]
+}, {
+	name   : 'imageMaskCorner',
+	type   : SNIPPET_TYPE.INLINE,
+	fields : [{
+		name    : 'imageMaskCorner',
+		type    : FIELD_TYPE.IMAGE_SELECTOR,
+		preview : (value)=>`/assets/waterColorMasks/corner/${fourDigitNumberFromValue(value)}.webp`,
+		values  : _.range(1, 38)
+	}, {
+		name      : '--offsetX',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+	}, {
+		name      : '--offsetY',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+	}, {
+		name      : '--rotation',
+		type      : FIELD_TYPE.TEXT,
+		increment : 5,
+	}]
+}];

themes/V3/Blank/style.less

@@ -33,7 +33,7 @@ body {
 	}
 }
 
-.useColumns(@multiplier : 1, @fillMode: auto){
+.useColumns(@multiplier : 1, @fillMode: balance){
 	column-fill          : @fillMode;
 	column-count         : 2;
 }
@@ -42,7 +42,6 @@ body {
 	column-span       : all;
 	columns           : inherit;
 	column-gap        : inherit;
-	column-fill       : inherit;
 }
 .page{
 	.useColumns();

themes/codeMirror/customEditorStyles.less

@@ -1,88 +0,0 @@
-.editor .codeEditor .CodeMirror {
-    // Themes with dark backgrounds
-    &.cm-s-3024-night,
-    &.cm-s-abbott,
-    &.cm-s-abcdef,
-    &.cm-s-ambiance,
-    &.cm-s-ayu-dark,
-    &.cm-s-ayu-mirage,
-    &.cm-s-base16-dark,
-    &.cm-s-bespin,
-    &.cm-s-blackboard,
-    &.cm-s-cobalt,
-    &.cm-s-colorforth,
-    &.cm-s-darcula,
-    &.cm-s-dracula,
-    &.cm-s-duotone-dark,
-    &.cm-s-erlang-dark,
-    &.cm-s-gruvbox-dark,
-    &.cm-s-hopscotch,
-    &.cm-s-icecoder,
-    &.cm-s-isotope,
-    &.cm-s-lesser-dark,
-    &.cm-s-liquibyte,
-    &.cm-s-lucario,
-    &.cm-s-material,
-    &.cm-s-material-darker,
-    &.cm-s-material-ocean,
-    &.cm-s-material-palenight,
-    &.cm-s-mbo,
-    &.cm-s-midnight,
-    &.cm-s-monokai,
-    &.cm-s-moxer,
-    &.cm-s-night,
-    &.cm-s-nord,
-    &.cm-s-oceanic-next,
-    &.cm-s-panda-syntax,
-    &.cm-s-paraiso-dark,
-    &.cm-s-pastel-on-dark,
-    &.cm-s-railscasts,
-    &.cm-s-rubyblue,
-    &.cm-s-seti,
-    &.cm-s-shadowfox,
-    &.cm-s-the-matrix,
-    &.cm-s-tomorrow-night-bright,
-    &.cm-s-tomorrow-night-eighties,
-    &.cm-s-twilight,
-    &.cm-s-vibrant-ink,
-    &.cm-s-xq-dark,
-    &.cm-s-yonce,
-    &.cm-s-zenburn
-     {
-        .CodeMirror-code {
-            .block:not(.cm-comment) {
-                color: magenta;
-            }
-            .columnSplit {
-                color: black;
-                background-color: rgba(35,153,153,0.5);
-            }
-            .pageLine {
-                background-color: rgba(255,255,255,0.75);
-                & ~ pre.CodeMirror-line {
-                    color: black;
-                }
-            }
-        }
-    }
-    // Themes with light backgrounds
-    &.cm-s-default,
-    &.cm-s-3024-day,
-    &.cm-s-ambiance-mobile,
-    &.cm-s-base16-light,
-    &.cm-s-duotone-light,
-    &.cm-s-eclipse,
-    &.cm-s-elegant,
-    &.cm-s-juejin,
-    &.cm-s-neat,
-    &.cm-s-neo,
-    &.cm-s-paraiso-lightm
-    &.cm-s-solarized,
-    &.cm-s-ssms,
-    &.cm-s-ttcn,
-    &.cm-s-xq-light,
-    &.cm-s-yeti {
-        // Future styling for themes with light backgrounds
-        --dummyVar: 'currently unused';
-    }
-}

themes/codeMirror/editorThemes.json

@@ -1,68 +0,0 @@
-[
-"default",
-"3024-day",
-"3024-night",
-"abbott",
-"abcdef",
-"ambiance-mobile",
-"ambiance",
-"ayu-dark",
-"ayu-mirage",
-"base16-dark",
-"base16-light",
-"bespin",
-"blackboard",
-"cobalt",
-"colorforth",
-"darcula",
-"dracula",
-"duotone-dark",
-"duotone-light",
-"eclipse",
-"elegant",
-"erlang-dark",
-"gruvbox-dark",
-"hopscotch",
-"icecoder",
-"idea",
-"isotope",
-"juejin",
-"lesser-dark",
-"liquibyte",
-"lucario",
-"material-darker",
-"material-ocean",
-"material-palenight",
-"material",
-"mbo",
-"mdn-like",
-"midnight",
-"monokai",
-"moxer",
-"neat",
-"neo",
-"night",
-"nord",
-"oceanic-next",
-"panda-syntax",
-"paraiso-dark",
-"paraiso-light",
-"pastel-on-dark",
-"railscasts",
-"rubyblue",
-"seti",
-"shadowfox",
-"solarized",
-"ssms",
-"the-matrix",
-"tomorrow-night-bright",
-"tomorrow-night-eighties",
-"ttcn",
-"twilight",
-"vibrant-ink",
-"xq-dark",
-"xq-light",
-"yeti",
-"yonce",
-"zenburn"
-]