Merge branch 'master' into page-numbers-via-JS

changelog.md

@@ -33,6 +33,21 @@ pre {
 ## changelog
 For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
 
+### Wednesday 17/11/2021 - v3.0.4
+{{taskList
+* [x] Fixed incorrect sorting of Google brews by page count and views on the user page.
+
+	Fixes issues: [#1793](https://github.com/naturalcrit/homebrewery/issues/1793)
+
+* [x] Added code folding! Only on a page-level for now. Hotkeys `CTRL + [` and `CTRL + ]` to fold/unfold all pages. (Thanks jeddai, new contributor!)
+
+	Fixes issues: [#629](https://github.com/naturalcrit/homebrewery/issues/629)
+
+* [x] Fixed rendering issues due to the latest Chrome update to version 96. (Also thanks to jeddai!)
+
+	Fixes issues: [#1828](https://github.com/naturalcrit/homebrewery/issues/1828)
+}}
+
 ### Wednesday 27/10/2021 - v3.0.3
 
 {{taskList

client/homebrew/editor/editor.jsx

@@ -108,7 +108,7 @@ const Editor = createClass({
 			const codeMirror = this.refs.codeEditor.codeMirror;
 
 			//reset custom text styles
-			const customHighlights = codeMirror.getAllMarks();
+			const customHighlights = codeMirror.getAllMarks().filter((mark)=>!mark.__isFold); //Don't undo code folding
 			for (let i=0;i<customHighlights.length;i++) customHighlights[i].clear();
 
 			// remove all widgets (page numbers in Editor)

package.json

@@ -1,7 +1,7 @@
 {
   "name": "homebrewery",
   "description": "Create authentic looking D&D homebrews using only markdown",
-  "version": "3.0.3",
+  "version": "3.0.4",
   "engines": {
     "node": "16.11.x"
   },
@@ -41,27 +41,27 @@
   },
   "dependencies": {
     "@babel/core": "^7.16.0",
-    "@babel/plugin-transform-runtime": "^7.16.0",
+    "@babel/plugin-transform-runtime": "^7.16.4",
-    "@babel/preset-env": "^7.15.8",
+    "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
     "body-parser": "^1.19.0",
     "classnames": "^2.3.1",
     "codemirror": "^5.63.3",
-    "cookie-parser": "^1.4.5",
+    "cookie-parser": "^1.4.6",
     "create-react-class": "^15.7.0",
     "dedent-tabs": "^0.10.1",
     "express": "^4.17.1",
     "express-async-handler": "^1.1.4",
     "express-static-gzip": "2.1.1",
     "fs-extra": "10.0.0",
-    "googleapis": "89.0.0",
+    "googleapis": "91.0.0",
     "jwt-simple": "^0.5.6",
     "less": "^3.13.1",
     "lodash": "^4.17.21",
     "marked": "3.0.8",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.29.1",
-    "mongoose": "^6.0.12",
+    "mongoose": "^6.0.13",
     "nanoid": "3.1.30",
     "nconf": "^0.11.3",
     "prop-types": "15.7.2",
@@ -75,8 +75,8 @@
     "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
   },
   "devDependencies": {
-    "eslint": "^8.1.0",
+    "eslint": "^8.2.0",
-    "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react": "^7.27.0",
     "pico-check": "^2.1.3"
   }
 }

scripts/project.json

@@ -12,6 +12,8 @@
 		"codemirror/mode/gfm/gfm.js",
 		"codemirror/mode/css/css.js",
 		"codemirror/mode/javascript/javascript.js",
+		"codemirror/addon/fold/foldcode.js",
+		"codemirror/addon/fold/foldgutter.js",
 		"moment",
 		"superagent",
 		"marked"

server/googleActions.js

@@ -120,10 +120,10 @@ GoogleActions = {
 				updatedAt   : file.modifiedTime,
 				gDrive      : true,
 				googleId    : file.id,
-				pageCount   : file.properties.pageCount,
+				pageCount   : parseInt(file.properties.pageCount),
 				title       : file.properties.title,
 				description : file.description,
-				views       : file.properties.views,
+				views       : parseInt(file.properties.views),
 				tags        : '',
 				published   : file.properties.published ? file.properties.published == 'true' : false,
 				authors     : [req.account.username],	//TODO: properly save and load authors to google drive

shared/naturalcrit/codeEditor/codeEditor.jsx

@@ -13,6 +13,13 @@ if(typeof navigator !== 'undefined'){
 	require('codemirror/mode/gfm/gfm.js'); //Github flavoured markdown
 	require('codemirror/mode/css/css.js');
 	require('codemirror/mode/javascript/javascript.js');
+
+	//Addons
+	require('codemirror/addon/fold/foldcode.js');
+	require('codemirror/addon/fold/foldgutter.js');
+
+	const foldCode = require('./fold-code');
+	foldCode.registerHomebreweryHelper(CodeMirror);
 }
 
 const CodeEditor = createClass({
@@ -74,8 +81,35 @@ const CodeEditor = createClass({
 				'Ctrl-M' : this.makeSpan,
 				'Cmd-M'  : this.makeSpan,
 				'Ctrl-/' : this.makeComment,
-				'Cmd-/'  : this.makeComment
+				'Cmd-/'  : this.makeComment,
-			}
+				'Ctrl-[' : this.foldAllCode,
+				'Cmd-['  : this.foldAllCode,
+				'Ctrl-]' : this.unfoldAllCode,
+				'Cmd-]'  : this.unfoldAllCode
+			},
+			foldGutter  : true,
+			foldOptions : {
+				scanUp      : true,
+				rangeFinder : CodeMirror.fold.homebrewery,
+				widget      : (from, to)=>{
+					let text = '';
+					let currentLine = from.line;
+					const maxLength = 50;
+					while (currentLine <= to.line && text.length <= maxLength) {
+						text += this.codeMirror.getLine(currentLine);
+						if(currentLine < to.line)
+							text += ' ';
+						currentLine += 1;
+					}
+
+					text = text.trim();
+					if(text.length > maxLength)
+						text = `${text.substr(0, maxLength)}...`;
+
+					return `\u21A4 ${text} \u21A6`;
+				}
+			},
+			gutters : ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
 		});
 
 		// Note: codeMirror passes a copy of itself in this callback. cm === this.codeMirror. Either one works.
@@ -120,6 +154,14 @@ const CodeEditor = createClass({
 		}
 	},
 
+	foldAllCode : function() {
+		this.codeMirror.execCommand('foldAll');
+	},
+
+	unfoldAllCode : function() {
+		this.codeMirror.execCommand('unfoldAll');
+	},
+
 	//=-- Externally used -==//
 	setCursorPosition : function(line, char){
 		setTimeout(()=>{

shared/naturalcrit/codeEditor/codeEditor.less

@@ -1,5 +1,10 @@
 @import (less) 'codemirror/lib/codemirror.css';
+@import (less) 'codemirror/addon/fold/foldgutter.css';
 
 .codeEditor{
-
+  .CodeMirror-foldmarker {
+    font-family: inherit;
+    text-shadow: none;
+    font-weight: 600;
+  }
 }

shared/naturalcrit/codeEditor/fold-code.js

@@ -0,0 +1,26 @@
+module.exports = {
+	registerHomebreweryHelper : function(CodeMirror) {
+		CodeMirror.registerHelper('fold', 'homebrewery', function(cm, start) {
+			const matcher = /^\\page.*/;
+			const prevLine = cm.getLine(start.line - 1);
+
+			if(start.line === cm.firstLine() || prevLine.match(matcher)) {
+				const lastLineNo = cm.lastLine();
+				let end = start.line;
+
+				while (end < lastLineNo) {
+					if(cm.getLine(end + 1).match(matcher))
+						break;
+					++end;
+				}
+
+				return {
+					from : CodeMirror.Pos(start.line, 0),
+					to   : CodeMirror.Pos(end, cm.getLine(end).length)
+				};
+			}
+
+			return null;
+		});
+	}
+};

themes/5ePhb.style.less

@@ -79,7 +79,7 @@ body {
 	p{
 		overflow-wrap : break-word;		//TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
 		display       : block;
-		line-height   : 1.3em;
+		line-height   : 1.25em;
 		&+* {
 			margin-top : 0.325cm;
 		}
@@ -90,14 +90,14 @@ body {
 	ul{
 		margin-bottom       : 0.8em;
 		padding-left        : 1.4em;
-		line-height         : 1.3em;
+		line-height         : 1.25em;
 		list-style-position : outside;
 		list-style-type     : disc;
 	}
 	ol{
 		margin-bottom       : 0.8em;
 		padding-left        : 1.4em;
-		line-height         : 1.3em;
+		line-height         : 1.25em;
 		list-style-position : outside;
 		list-style-type     : decimal;
 	}
@@ -162,17 +162,20 @@ body {
 		//margin-top    : 0px; //Font is misaligned. Shift up slightly
 		//margin-bottom : 0.05cm;
 		font-size     : 0.75cm;
+		line-height   : 0.988em; //Font is misaligned. Shift up slightly
 	}
 	h3{
 		//margin-top    : -0.1cm; //Font is misaligned. Shift up slightly
 		//margin-bottom : 0.1cm;
 		font-size     : 0.575cm;
 		border-bottom : 2px solid @headerUnderline;
+		line-height   : 0.995em; //Font is misaligned. Shift up slightly
 	}
 	h4{
 		//margin-top    : -0.02cm; //Font is misaligned. Shift up slightly
 		//margin-bottom : 0.02cm;
 		font-size     : 0.458cm;
+		line-height   : 0.971em; //Font is misaligned. Shift up slightly
 	}
 	h5{
 		//margin-top    : -0.02cm; //Font is misaligned. Shift up slightly
@@ -180,6 +183,7 @@ body {
 		font-family   : ScalySansSmallCapsRemake;
 		font-size     : 0.423cm;
 		font-weight   : 900;
+		line-height   : 0.951em; //Font is misaligned. Shift up slightly
 		& + * {
 			margin-top : 0.2cm;
 		}
@@ -581,7 +585,7 @@ body {
 	}
 	p, ul{
 		font-size   : 0.352cm;
-		line-height : 1.3em;
+		line-height : 1.265em;
 	}
 	ul{
 		margin-bottom               : 0.5em;
@@ -741,7 +745,7 @@ body {
 // *****************************/
 .page {
 	dl {
-		line-height  : 1.3em;
+		line-height  : 1.25em;
 		padding-left : 1em;
 		white-space  : pre-line;
 		& + * {

themes/5ePhbLegacy.style.less

@@ -63,7 +63,7 @@ body {
 	// *****************************/
 	p{
 		padding-bottom : 0.8em;
-		line-height    : 1.3em;
+		line-height    : 1.269em;
 		&+p{
 			margin-top : -0.8em;
 		}
@@ -71,14 +71,14 @@ body {
 	ul{
 		margin-bottom       : 0.8em;
 		padding-left        : 1.4em;
-		line-height         : 1.3em;
+		line-height         : 1.269em;
 		list-style-position : outside;
 		list-style-type     : disc;
 	}
 	ol{
 		margin-bottom       : 0.8em;
 		padding-left        : 1.4em;
-		line-height         : 1.3em;
+		line-height         : 1.269em;
 		list-style-position : outside;
 		list-style-type     : decimal;
 	}
@@ -126,7 +126,7 @@ body {
 			font-family : Solberry;
 			font-size   : 10em;
 			color       : #222;
-			line-height : 0.8em;
+			line-height : 0.795em;
 		}
 	}
 	h2{
@@ -191,7 +191,7 @@ body {
 		box-shadow          : 1px 4px 14px #888;
 		p, ul{
 			font-size   : 0.352cm;
-			line-height : 1.1em;
+			line-height : 1.083em;
 		}
 	}
 	//If a note starts a column, give it space at the top to render border
@@ -371,7 +371,7 @@ body {
 	}
 	p, ul{
 		font-size   : 0.352cm;
-		line-height : 1.3em;
+		line-height : 1.263em;
 	}
 	ul{
 		margin-bottom               : 0.5em;
@@ -425,7 +425,7 @@ body {
 	p{
 		display        : block;
 		padding-bottom : 0px;
-		line-height    : 1.5em;
+		line-height    : 1.47em;
 	}
 	p + p {
 		padding-top : .8em;
@@ -457,7 +457,7 @@ body {
 		p, p + p {
 			margin      : unset;
 			text-indent : unset;
-			line-height : 1em;
+			line-height : 0.941em;
 		}
 	 	h5 {
 			font-size   : 1.3em;