Merge branch 'master' into Open-Graph-Meta-Changes

.gitignore

@@ -11,3 +11,4 @@ config/docker.*
 todo.md
 startDB.bat
 startMViewer.bat
+.vscode

changelog.md

@@ -1,6 +1,7 @@
 ```css
 h5 {
 	font-size: .35cm !important;
+	margin-top: 0.3cm;
 }
 
 .page ul ul {
@@ -14,6 +15,11 @@ h5 {
 	filter: brightness(1.1) drop-shadow(1px 2px 1px #222);
 }
 
+.taskList ul {
+	margin-bottom: 0px;
+	margin-top: 0px;
+}
+
 .taskList li input[checked] {
 	filter: sepia(100%) hue-rotate(60deg) saturate(3.5) contrast(4) brightness(1.1) drop-shadow(1px 2px 1px #222);
 }
@@ -39,6 +45,68 @@ pre {
 ## changelog
 For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
 
+### Friday 19/10/2022 - v3.3.0
+{{taskList
+
+##### Calculuschild
+
+* [x] Fix for tables broken by Chrome v106
+
+
+##### G-Ambatte:
+
+* [x] Fix Table of Contents broken by Chrome v106
+
+Fixes issues  [#2437](https://github.com/naturalcrit/homebrewery/issues/2437)
+
+* [x] Show brew thumbnails on user page
+
+Fixes issues  [#2331](https://github.com/naturalcrit/homebrewery/issues/2331)
+
+* [x] Allow longer URLs for brew thumbnails
+
+Fixes issues  [#2351](https://github.com/naturalcrit/homebrewery/issues/2351)
+
+* [x] Code no longer unfolds when inserting a snippet
+
+Fixes issues  [#2135](https://github.com/naturalcrit/homebrewery/issues/2135)
+
+* [x] Fix brew settings being lost on first save
+
+Fixes issues  [#2427](https://github.com/naturalcrit/homebrewery/issues/2427)
+
+
+
+
+##### Gazook:
+
+* [x] Several updates to bug reporting and error popups
+
+Fixes issues  [#2376](https://github.com/naturalcrit/homebrewery/issues/2376)
+
+* [x] Fixes to userpage search bar
+
+Fixes issues  [#1675](https://github.com/naturalcrit/homebrewery/issues/1675), [#2353](https://github.com/naturalcrit/homebrewery/issues/2353)
+
+* [x] Renderer *(legacy / V3)* now shown next to page #
+
+Fixes issues  [#1928](https://github.com/naturalcrit/homebrewery/issues/1928)
+
+* [x] Prevent text selection when moving divider bar
+
+Fixes issues  [#1632](https://github.com/naturalcrit/homebrewery/issues/1632)
+
+* [x] Tweak Monster Stat Block coloring
+
+Fixes issues  [#2123](https://github.com/naturalcrit/homebrewery/issues/2123)
+
+* [x] Added dropdown button to toggle autosave
+
+Fixes issues  [#1546](https://github.com/naturalcrit/homebrewery/issues/1546)
+
+}}
+
+
 ### Friday 08/09/2022 - v3.2.2
 {{taskList
 

client/homebrew/editor/editor.jsx

@@ -19,11 +19,6 @@ const DEFAULT_STYLE_TEXT = dedent`
 					color: black;
 				}`;
 
-const splice = function(str, index, inject){
-	return str.slice(0, index) + inject + str.slice(index);
-};
-
-
 
 const Editor = createClass({
 	displayName     : 'Editor',
@@ -80,19 +75,7 @@ const Editor = createClass({
 	},
 
 	handleInject : function(injectText){
-		let text;
+		this.refs.codeEditor?.injectText(injectText, false);
-		if(this.isText())  text = this.props.brew.text;
-		if(this.isStyle()) text = this.props.brew.style ?? DEFAULT_STYLE_TEXT;
-
-		const lines = text.split('\n');
-		const cursorPos = this.refs.codeEditor.getCursorPosition();
-		lines[cursorPos.line] = splice(lines[cursorPos.line], cursorPos.ch, injectText);
-
-		const injectLines = injectText.split('\n');
-		this.refs.codeEditor.setCursorPosition(cursorPos.line + injectLines.length, cursorPos.ch  + injectLines[injectLines.length - 1].length);
-
-		if(this.isText())  this.props.onTextChange(lines.join('\n'));
-		if(this.isStyle()) this.props.onStyleChange(lines.join('\n'));
 	},
 
 	handleViewChange : function(newView){

client/homebrew/navbar/account.navitem.jsx

@@ -70,7 +70,7 @@ const Account = createClass({
 					{global.account.username}
 				</Nav.item>
 				<Nav.item
-					href={`/user/${global.account.username}`}
+					href={`/user/${encodeURI(global.account.username)}`}
 					color='yellow'
 					icon='fas fa-beer'
 				>

client/homebrew/navbar/navbar.less

@@ -55,6 +55,18 @@
 		text-align     : center;
 		text-transform : initial;
 	}
+	.save-menu {
+		.dropdown {
+			z-index: 1000;
+		}
+		.navItem i.fa-power-off {
+			color : red;
+			&.active {
+				color : rgb(0, 182, 52);
+				filter : drop-shadow(0 0 2px rgba(0, 182, 52, 0.765))
+			}
+		}
+	}
 	.patreon.navItem{
 		border-left  : 1px solid #666;
 		border-right : 1px solid #666;

client/homebrew/pages/editPage/editPage.jsx

@@ -62,7 +62,10 @@ const EditPage = createClass({
 			confirmGoogleTransfer  : false,
 			errors                 : null,
 			htmlErrors             : Markdown.validate(this.props.brew.text),
-			url                    : ''
+			url                    : '',
+			autoSave               : true,
+			autoSaveWarning        : false,
+			unsavedTime            : new Date()
 		};
 	},
 	savedBrew : null,
@@ -72,9 +75,17 @@ const EditPage = createClass({
 			url : window.location.href
 		});
 
+
 		this.savedBrew = JSON.parse(JSON.stringify(this.props.brew)); //Deep copy
 
-		this.trySave();
+		this.setState({ autoSave: JSON.parse(localStorage.getItem('AUTOSAVE_ON')) }, ()=>{
+			if(this.state.autoSave){
+				this.trySave();
+			} else {
+				this.setState({ autoSaveWarning: true });
+			}
+		});
+
 		window.onbeforeunload = ()=>{
 			if(this.state.isSaving || this.state.isPending){
 				return 'You have unsaved changes!';
@@ -117,14 +128,14 @@ const EditPage = createClass({
 			brew       : { ...prevState.brew, text: text },
 			isPending  : true,
 			htmlErrors : htmlErrors
-		}), ()=>this.trySave());
+		}), ()=>{if(this.state.autoSave) this.trySave();});
 	},
 
 	handleStyleChange : function(style){
 		this.setState((prevState)=>({
 			brew      : { ...prevState.brew, style: style },
 			isPending : true
-		}), ()=>this.trySave());
+		}), ()=>{if(this.state.autoSave) this.trySave();});
 	},
 
 	handleMetaChange : function(metadata){
@@ -134,7 +145,7 @@ const EditPage = createClass({
 				...metadata
 			},
 			isPending : true,
-		}), ()=>this.trySave());
+		}), ()=>{if(this.state.autoSave) this.trySave();});
 
 	},
 
@@ -221,8 +232,9 @@ const EditPage = createClass({
 				editId 	 : this.savedBrew.editId,
 				shareId  : this.savedBrew.shareId
 			},
-			isPending : false,
+			isPending   : false,
-			isSaving  : false,
+			isSaving    : false,
+			unsavedTime : new Date()
 		}));
 	},
 
@@ -329,17 +341,55 @@ const EditPage = createClass({
 			</Nav.item>;
 		}
 
+		if(this.state.autoSaveWarning && this.hasChanges()){
+			this.setAutosaveWarning();
+			const elapsedTime = Math.round((new Date() - this.state.unsavedTime) / 1000 / 60);
+			const text = elapsedTime == 0 ? 'Autosave is OFF.' : `Autosave is OFF, and you haven't saved for ${elapsedTime} minutes.`;
+
+			return <Nav.item className='save error' icon='fas fa-exclamation-circle'>
+			Reminder...
+				<div className='errorContainer'>
+					{text}
+				</div>
+			</Nav.item>;
+		}
+
 		if(this.state.isSaving){
 			return <Nav.item className='save' icon='fas fa-spinner fa-spin'>saving...</Nav.item>;
 		}
 		if(this.state.isPending && this.hasChanges()){
 			return <Nav.item className='save' onClick={this.save} color='blue' icon='fas fa-save'>Save Now</Nav.item>;
 		}
+		if(!this.state.isPending && !this.state.isSaving && this.state.autoSave){
+			return <Nav.item className='save saved'>auto-saved.</Nav.item>;
+		}
 		if(!this.state.isPending && !this.state.isSaving){
 			return <Nav.item className='save saved'>saved.</Nav.item>;
 		}
 	},
 
+	handleAutoSave : function(){
+		if(this.warningTimer) clearTimeout(this.warningTimer);
+		this.setState((prevState)=>({
+			autoSave        : !prevState.autoSave,
+			autoSaveWarning : prevState.autoSave
+		}), ()=>{
+			localStorage.setItem('AUTOSAVE_ON', JSON.stringify(this.state.autoSave));
+		});
+	},
+
+	setAutosaveWarning : function(){
+		setTimeout(()=>this.setState({ autoSaveWarning: false }), 4000);                           // 4 seconds to display
+		this.warningTimer = setTimeout(()=>{this.setState({ autoSaveWarning: true });}, 900000);   // 15 minutes between warnings
+		this.warningTimer;
+	},
+
+	renderAutoSaveButton : function(){
+		return <Nav.item onClick={this.handleAutoSave}>
+			Autosave <i className={this.state.autoSave ? 'fas fa-power-off active' : 'fas fa-power-off'}></i>
+		</Nav.item>;
+	},
+
 	processShareId : function() {
 		return this.state.brew.googleId && !this.state.brew.stubbed ?
 					 this.state.brew.googleId + this.state.brew.shareId :
@@ -378,7 +428,10 @@ const EditPage = createClass({
 
 			<Nav.section>
 				{this.renderGoogleDriveIcon()}
-				{this.renderSaveButton()}
+				<Nav.dropdown className='save-menu'>
+					{this.renderSaveButton()}
+					{this.renderAutoSaveButton()}
+				</Nav.dropdown>
 				<NewBrew />
 				<HelpNavItem/>
 				<Nav.dropdown>

client/homebrew/pages/editPage/editPage.less

@@ -32,7 +32,7 @@
 		position         : absolute;
 		top              : 100%;
 		left             : 50%;
-		z-index          : 100000;
+		z-index          : 500;
 		width            : 140px;
 		padding          : 3px;
 		color            : white;

client/homebrew/pages/homePage/homePage.jsx

@@ -38,9 +38,7 @@ const HomePage = createClass({
 	},
 	handleSave : function(){
 		request.post('/api')
-			.send({
+			.send(this.state.brew)
-				text : this.state.brew.text
-			})
 			.end((err, res)=>{
 				if(err) return;
 				const brew = res.body;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "3.2.2",
+  "version": "3.3.0",
   "engines": {
     "node": "16.11.x"
   },
@@ -51,7 +51,7 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.19.1",
+    "@babel/core": "^7.19.3",
     "@babel/plugin-transform-runtime": "^7.19.1",
     "@babel/preset-env": "^7.19.4",
     "@babel/preset-react": "^7.18.6",
@@ -74,13 +74,13 @@
     "marked-extended-tables": "^1.0.5",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.29.4",
-    "mongoose": "^6.6.1",
+    "mongoose": "^6.6.5",
     "nanoid": "3.3.4",
     "nconf": "^0.12.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-frame-component": "4.1.3",
-    "react-router-dom": "6.3.0",
+    "react-router-dom": "6.4.2",
     "sanitize-filename": "1.6.3",
     "superagent": "^6.1.0",
     "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
@@ -88,7 +88,7 @@
   "devDependencies": {
     "eslint": "^8.25.0",
     "eslint-plugin-react": "^7.31.10",
-    "jest": "^29.0.3",
+    "jest": "^29.2.1",
-    "supertest": "^6.2.4"
+    "supertest": "^6.3.0"
   }
 }

shared/naturalcrit/codeEditor/codeEditor.jsx

@@ -229,6 +229,15 @@ const CodeEditor = createClass({
 		this.codeMirror.replaceSelection('\n\\page\n\n', 'end');
 	},
 
+	injectText : function(injectText, overwrite=true) {
+		const cm = this.codeMirror;
+		if(!overwrite) {
+			cm.setCursor(cm.getCursor('from'));
+		}
+		cm.replaceSelection(injectText, 'end');
+		cm.focus();
+	},
+
 	makeUnderline : function() {
 		const selection = this.codeMirror.getSelection(), t = selection.slice(0, 3) === '<u>' && selection.slice(-4) === '</u>';
 		this.codeMirror.replaceSelection(t ? selection.slice(3, -4) : `<u>${selection}</u>`, 'around');

themes/V3/5ePHB/style.less

@@ -213,7 +213,9 @@ body {
 		tbody{
 			tr{
 				td{
-					padding : 0.14em 0.4em;
+					//padding : 0.14em 0.4em;
+					padding : 0px 5px;   // Both of these are temporary, just to force
+          height  : 16px;        // PDF to render at same height until Chrome 108
 				}
 				&:nth-child(odd){
 					background-color : var(--HB_Color_Accent);
@@ -657,72 +659,78 @@ body {
 //*****************************
 // *      TABLE OF CONTENTS
 // *****************************/
-.page .toc{
+.page {
+	&:has(.toc):after {
+		display: none;
+	}
+	.toc {
 	-webkit-column-break-inside : avoid;
 	page-break-inside           : avoid;
 	break-inside                : avoid;
-	h1 {
+		h1 {
-		text-align    : center;
+			text-align    : center;
-		margin-bottom : 0.3cm;
+			margin-bottom : 0.3cm;
-	}
-	a{
-		display         : inline;
-		color           : inherit;
-		text-decoration : none;
-		&:hover{
-			text-decoration : underline;
 		}
-	}
+		a{
-	h4 {
+			display         : inline;
-		margin-top  : 0.2cm;
+			color           : inherit;
-		line-height : 0.4cm;
+			text-decoration : none;
-		& + ul li {
+			&:hover{
-			line-height: 1.2em;
+				text-decoration : underline;
+			}
 		}
-	}
+		h4 {
-	ul{
+			margin-top  : 0.2cm;
-		padding-left    : 0;
+			line-height : 0.4cm;
-		list-style-type : none;
+			& + ul li {
-		li + li h3 {
+				line-height: 1.2em;
-			margin-top  : 0.26cm;
+			}
-			line-height : 1em
 		}
-		h3 span:first-child::after {
+		ul{
-			border : none;
+			padding-left    : 0;
-		}
+			list-style-type : none;
-		span {
+			margin-top      : 0;
-			display : table-cell;
+			a {
-			&:first-child {
+				width           : 100%;
-				position   :       relative;
+				display         : flex;
-				overflow   :       hidden;
+				flex-flow       : row nowrap;
-				&::after {
+				justify-content : space-between;
+			}
+			li + li h3 {
+				margin-top  : 0.26cm;
+				line-height : 1em
+			}
+			h3 span:first-child::after {
+				border : none;
+			}
+			span {
+				display : contents;
+				&:first-child::after {
 					content       : "";
-					position      : absolute;
 					bottom        : 0.08cm;
-					margin-left   : 0.06cm;        /* Spacing before dot leaders */
+					flex          : 1;
-					width         : 100%;
+					margin-left   : 0.08cm;        /* Spacing before dot leaders */
+					margin-right  : 0.16cm;
 					border-bottom : 0.05cm dotted #000;
+					margin-bottom : 0.08cm;
+				}
+				&:last-child {
+					display     : inline-block;
+					align-self  : flex-end;
+					font-family : "BookInsanityRemake";
+					font-size   : 0.34cm;
+					font-weight : normal;
+					color       : #000;
 				}
 			}
-			&:last-child {
+			ul { /*List indent*/
-				font-family    : BookInsanityRemake;
+				margin-left : 1em;
-				font-size      : 0.34cm;
-				font-weight    : normal;
-				color          : black;
-				text-align     : right;
-				vertical-align : bottom; /* Keep page number bottom-aligned */
-				width          : 1%;
-				padding-left   : 0.06cm; /* Spacing after dot leaders */
-				/*white-space  : nowrap; /* Uncomment if needed */
 			}
 		}
-		ul { /*List indent*/
+		&.wide{
-			margin-left : 1em;
+			.useColumns(0.96, @fillMode: balance);
 		}
 	}
-	&.wide{
-		.useColumns(0.96, @fillMode: balance);
-	}
 }
 
 //*****************************