Merge branch 'master' into addCSSRoute-#1097

.circleci/config.yml

@@ -67,6 +67,9 @@ jobs:
       - run:
           name: Test - Definition Lists
           command: npm run test:definition-lists
+      - run:
+          name: Test - Hard Breaks
+          command: npm run test:hard-breaks
       - run:
           name: Test - Variables
           command: npm run test:variables

.eslintrc.js

@@ -1,79 +0,0 @@
-module.exports = {
-	root          : true,
-	parserOptions : {
-		ecmaVersion  : 2021,
-		sourceType   : 'module',
-		ecmaFeatures : {
-			jsx : true
-		}
-	},
-	env : {
-		browser : true,
-		node    : true
-	},
-	plugins : ['react', 'jest'],
-	rules   : {
-		/** Errors **/
-		'camelcase'              : ['error', { properties: 'never' }],
-		//'func-style'             : ['error', 'expression', { allowArrowFunctions: true }],
-		'no-array-constructor'   : 'error',
-		'no-iterator'            : 'error',
-		'no-nested-ternary'      : 'error',
-		'no-new-object'          : 'error',
-		'no-proto'               : 'error',
-		'react/jsx-no-bind'      : ['error', { allowArrowFunctions: true }],
-		'react/jsx-uses-react'   : 'error',
-		'react/prefer-es6-class' : ['error', 'never'],
-		'jest/valid-expect'      : ['error', { maxArgs: 3	}],
-
-		/** Warnings **/
-		'max-lines' : ['warn', {
-			max            : 200,
-			skipComments   : true,
-			skipBlankLines : true,
-		}],
-		'max-depth'            : ['warn', { max: 4 }],
-		'max-params'           : ['warn', { max: 5 }],
-		'no-restricted-syntax' : ['warn', 'ClassDeclaration', 'SwitchStatement'],
-		'no-unused-vars'       : ['warn', {
-			vars              : 'all',
-			args              : 'none',
-			varsIgnorePattern : 'config|_|cx|createClass'
-		}],
-		'react/jsx-uses-vars' : 'warn',
-
-		/** Fixable **/
-		'arrow-parens'    : ['warn', 'always'],
-		'brace-style'     : ['warn', '1tbs', { allowSingleLine: true }],
-		'jsx-quotes'      : ['warn', 'prefer-single'],
-		'no-var'          : 'warn',
-		'prefer-const'    : 'warn',
-		'prefer-template' : 'warn',
-		'quotes'          : ['warn', 'single', { 'allowTemplateLiterals': true }],
-		'semi'            : ['warn', 'always'],
-
-		/** Whitespace **/
-		'array-bracket-spacing' : ['warn', 'never'],
-		'arrow-spacing'         : ['warn', { before: false, after: false }],
-		'comma-spacing'         : ['warn', { before: false, after: true }],
-		'indent'                : ['warn', 'tab', { 'MemberExpression': 'off' }],
-		'keyword-spacing'       : ['warn', {
-			before    : true,
-			after     : true,
-			overrides : {
-				if : { 'before': false, 'after': false }
-			}
-		}],
-		'key-spacing' : ['warn', {
-			multiLine  : { beforeColon: true, afterColon: true, align: 'colon' },
-			singleLine : { beforeColon: false, afterColon: true }
-		}],
-		'linebreak-style'               : 'off',
-		'no-trailing-spaces'            : 'warn',
-		'no-whitespace-before-property' : 'warn',
-		'object-curly-spacing'          : ['warn', 'always'],
-		'react/jsx-indent-props'        : ['warn', 'tab'],
-		'space-in-parens'               : ['warn', 'never'],
-		'template-curly-spacing'        : ['warn', 'never'],
-	}
-};

client/homebrew/editor/editor.jsx

@@ -59,6 +59,8 @@ const Editor = createClass({
 		this.updateEditorSize();
 		this.highlightCustomMarkdown();
 		window.addEventListener('resize', this.updateEditorSize);
+		document.getElementById('BrewRenderer').addEventListener('keydown', this.handleControlKeys);
+		document.addEventListener('keydown', this.handleControlKeys);
 
 		const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY);
 		if(editorTheme) {
@@ -82,6 +84,20 @@ const Editor = createClass({
 		};
 	},
 
+	handleControlKeys : function(e){
+		if(!(e.ctrlKey || e.metaKey)) return;
+		console.log(e);
+		const LEFTARROW_KEY = 37;
+		const RIGHTARROW_KEY = 39;
+		if (e.shiftKey && (e.keyCode == RIGHTARROW_KEY)) this.brewJump();
+		if (e.shiftKey && (e.keyCode == LEFTARROW_KEY)) this.sourceJump();
+		if ((e.keyCode == LEFTARROW_KEY) || (e.keyCode == RIGHTARROW_KEY)) {
+			e.stopPropagation();
+			e.preventDefault();
+		}
+	},
+
+
 	updateEditorSize : function() {
 		if(this.codeEditor.current) {
 			let paneHeight = this.editor.current.parentNode.clientHeight;
@@ -119,6 +135,7 @@ const Editor = createClass({
 			const codeMirror = this.codeEditor.current.codeMirror;
 
 			codeMirror.operation(()=>{ // Batch CodeMirror styling
+
 				//reset custom text styles
 				const customHighlights = codeMirror.getAllMarks().filter((mark)=>!mark.__isFold); //Don't undo code folding
 				for (let i=customHighlights.length - 1;i>=0;i--) customHighlights[i].clear();

client/homebrew/pages/newPage/newPage.jsx

@@ -84,6 +84,9 @@ const NewPage = createClass({
 		if(brew.style)
 			localStorage.setItem(STYLEKEY, brew.style);
 		localStorage.setItem(METAKEY, JSON.stringify({ 'renderer': brew.renderer, 'theme': brew.theme, 'lang': brew.lang }));
+		if(window.location.pathname != '/new') {
+			window.history.replaceState({}, window.location.title, '/new/');
+		}
 	},
 	componentWillUnmount : function() {
 		document.removeEventListener('keydown', this.handleControlKeys);

eslint.config.mjs

@@ -0,0 +1,71 @@
+import react from "eslint-plugin-react";
+import jest from "eslint-plugin-jest";
+import globals from "globals";
+
+export default [{
+		ignores: ["build/"]
+	},
+	{
+		files           : ['**/*.js', '**/*.jsx'],
+		plugins         : { react, jest },
+		languageOptions : {
+				ecmaVersion   : "latest",
+				sourceType    : "module",
+				parserOptions : { ecmaFeatures: { jsx: true } },
+				globals       : { ...globals.browser, ...globals.node }
+		},
+		rules: {
+				/** Errors **/
+				"camelcase"              : ["error", { properties: "never" }],
+				"no-array-constructor"   : "error",
+				"no-iterator"            : "error",
+				"no-nested-ternary"      : "error",
+				"no-new-object"          : "error",
+				"no-proto"               : "error",
+				"react/jsx-no-bind"      : ["error", { allowArrowFunctions: true }],
+				"react/jsx-uses-react"   : "error",
+				"react/prefer-es6-class" : ["error", "never"],
+				"jest/valid-expect"      : ["error", { maxArgs: 3 }],
+
+				/** Warnings **/
+				"max-lines"            : ["warn", { max: 200, skipComments: true, skipBlankLines: true }],
+				"max-depth"            : ["warn", { max: 4 }],
+				"max-params"           : ["warn", { max: 5 }],
+				"no-restricted-syntax" : ["warn", "ClassDeclaration", "SwitchStatement"],
+				"no-unused-vars"       : ["warn", { vars: "all", args: "none", varsIgnorePattern: "config|_|cx|createClass" }],
+				"react/jsx-uses-vars"  : "warn",
+
+				/** Fixable **/
+				"arrow-parens"    : ["warn", "always"],
+				"brace-style"     : ["warn", "1tbs", { allowSingleLine: true }],
+				"jsx-quotes"      : ["warn", "prefer-single"],
+				"no-var"          : "warn",
+				"prefer-const"    : "warn",
+				"prefer-template" : "warn",
+				"quotes"          : ["warn", "single", { allowTemplateLiterals: true }],
+				"semi"            : ["warn", "always"],
+
+				/** Whitespace **/
+				"array-bracket-spacing"         : ["warn", "never"],
+				"arrow-spacing"                 : ["warn", { before: false, after: false	}],
+				"comma-spacing"                 : ["warn", { before: false, after: true }],
+				"indent"                        : ["warn", "tab", { MemberExpression: "off" }],
+				"linebreak-style"               : "off",
+				"no-trailing-spaces"            : "warn",
+				"no-whitespace-before-property" : "warn",
+				"object-curly-spacing"          : ["warn", "always"],
+				"react/jsx-indent-props"        : ["warn", "tab"],
+				"space-in-parens"               : ["warn", "never"],
+				"template-curly-spacing"        : ["warn", "never"],
+				"keyword-spacing"               : ["warn", {
+						before    : true,
+						after     : true,
+						overrides : { if: { before: false, after: false } }
+				}],
+				"key-spacing"                   : ["warn", {
+						multiLine  : { beforeColon: true, afterColon: true, align: "colon" },
+						singleLine : { beforeColon: false, afterColon: true }
+				}]
+		}
+	}
+];

package.json

@@ -15,8 +15,8 @@
     "quick": "node scripts/quick.js",
     "build": "node scripts/buildHomebrew.js && node scripts/buildAdmin.js",
     "builddev": "node scripts/buildHomebrew.js --dev",
-    "lint": "eslint --fix **/*.{js,jsx}",
-    "lint:dry": "eslint **/*.{js,jsx}",
+    "lint": "eslint --fix",
+    "lint:dry": "eslint",
     "stylelint": "stylelint --fix **/*.{less}",
     "stylelint:dry": "stylelint **/*.less",
     "circleci": "npm test && eslint **/*.{js,jsx} --max-warnings=0",
@@ -33,6 +33,7 @@
     "test:mustache-syntax:block": "jest \".*(mustache-syntax).*\" -t '^Block:.*' --verbose --noStackTrace",
     "test:mustache-syntax:injection": "jest \".*(mustache-syntax).*\" -t '^Injection:.*' --verbose --noStackTrace",
     "test:definition-lists": "jest tests/markdown/definition-lists.test.js --verbose --noStackTrace",
+    "test:hard-breaks": "jest tests/markdown/hard-breaks.test.js --verbose --noStackTrace",
     "test:emojis": "jest tests/markdown/emojis.test.js --verbose --noStackTrace",
     "test:route": "jest tests/routes/static-pages.test.js --verbose",
     "phb": "node scripts/phb.js",
@@ -84,10 +85,10 @@
   },
   "dependencies": {
     "@babel/core": "^7.25.2",
-    "@babel/plugin-transform-runtime": "^7.24.7",
-    "@babel/preset-env": "^7.25.3",
+    "@babel/plugin-transform-runtime": "^7.25.4",
+    "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
-    "@googleapis/drive": "^8.11.0",
+    "@googleapis/drive": "^8.13.0",
     "body-parser": "^1.20.2",
     "classnames": "^2.5.1",
     "codemirror": "^5.65.6",
@@ -111,27 +112,28 @@
     "marked-smartypants-lite": "^1.0.2",
     "markedLegacy": "npm:marked@^0.3.19",
     "moment": "^2.30.1",
-    "mongoose": "^8.5.2",
+    "mongoose": "^8.5.3",
     "nanoid": "3.3.4",
     "nconf": "^0.12.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-frame-component": "^4.1.3",
-    "react-router-dom": "6.26.0",
+    "react-router-dom": "6.26.1",
     "sanitize-filename": "1.6.3",
     "superagent": "^9.0.2",
     "vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
   },
   "devDependencies": {
-    "@stylistic/stylelint-plugin": "^3.0.0",
-    "eslint": "^8.57.0",
+    "@stylistic/stylelint-plugin": "^3.0.1",
+    "eslint": "^9.9.0",
     "eslint-plugin-jest": "^28.8.0",
     "eslint-plugin-react": "^7.35.0",
+    "globals": "^15.9.0",
     "jest": "^29.7.0",
     "jest-expect-message": "^1.1.3",
     "postcss-less": "^6.0.0",
-    "stylelint": "^16.8.0",
-    "stylelint-config-recess-order": "^5.0.1",
+    "stylelint": "^16.8.2",
+    "stylelint-config-recess-order": "^5.1.0",
     "stylelint-config-recommended": "^14.0.1",
     "supertest": "^7.0.0"
   }

server/app.js

@@ -14,6 +14,7 @@ const GoogleActions = require('./googleActions.js');
 const serveCompressedStaticAssets = require('./static-assets.mv.js');
 const sanitizeFilename = require('sanitize-filename');
 const asyncHandler = require('express-async-handler');
+const templateFn = require('./../client/template.js');
 
 const { DEFAULT_BREW } = require('./brewDefaults.js');
 
@@ -423,8 +424,16 @@ if(isLocalEnvironment){
 	});
 }
 
+//Send rendered page
+app.use(asyncHandler(async (req, res, next)=>{
+	if (!req.route) return res.redirect('/'); // Catch-all for invalid routes
+		
+	const page = await renderPage(req, res);
+	if(!page) return;
+	res.send(page);
+}));
+
 //Render the page
-const templateFn = require('./../client/template.js');
 const renderPage = async (req, res)=>{
 	// Create configuration object
 	const configuration = {
@@ -453,13 +462,6 @@ const renderPage = async (req, res)=>{
 	return page;
 };
 
-//Send rendered page
-app.use(asyncHandler(async (req, res, next)=>{
-	const page = await renderPage(req, res);
-	if(!page) return;
-	res.send(page);
-}));
-
 //v=====----- Error-Handling Middleware -----=====v//
 //Format Errors as plain objects so all fields will appear in the string sent
 const formatErrors = (key, value)=>{

shared/helpers.js

@@ -35,6 +35,7 @@ const printCurrentBrew = ()=>{
 };
 
 const fetchThemeBundle = async (obj, renderer, theme)=>{
+	if(!renderer || !theme) return;
 	const res = await request
 			.get(`/api/theme/${renderer}/${theme}`)
 			.catch((err)=>{

shared/naturalcrit/markdown.js

@@ -3,7 +3,7 @@ const _ = require('lodash');
 const Marked = require('marked');
 const MarkedExtendedTables = require('marked-extended-tables');
 const { markedSmartypantsLite: MarkedSmartypantsLite } = require('marked-smartypants-lite');
-const { gfmHeadingId: MarkedGFMHeadingId } = require('marked-gfm-heading-id');
+const { gfmHeadingId: MarkedGFMHeadingId, resetHeadings: MarkedGFMResetHeadingIDs } = require('marked-gfm-heading-id');
 const { markedEmoji: MarkedEmojis } = require('marked-emoji');
 
 //Icon fonts included so they can appear in emoji autosuggest dropdown
@@ -86,7 +86,7 @@ renderer.link = function (href, title, text) {
 	if(href[0] == '#') {
 		self = true;
 	}
-	href = cleanUrl(this.options.sanitize, this.options.baseUrl, href);
+	href = cleanUrl(href);
 
 	if(href === null) {
 		return text;
@@ -356,6 +356,27 @@ const superSubScripts = {
 	}
 };
 
+const forcedParagraphBreaks = {
+	name  : 'hardBreaks',
+	level : 'block',
+	start(src) { return src.match(/\n:+$/m)?.index; },  // Hint to Marked.js to stop and check for a match
+	tokenizer(src, tokens) {
+		const regex  = /^(:+)(?:\n|$)/ym;
+		const match = regex.exec(src);
+		if(match?.length) {
+			return {
+				type   : 'hardBreaks', // Should match "name" above
+				raw    : match[0],     // Text to consume from the source
+				length : match[1].length,
+				text   : ''
+			};
+		}
+	},
+	renderer(token) {
+		return `<div class='blank'></div>`.repeat(token.length).concat('\n');
+	}
+};
+
 const definitionListsSingleLine = {
 	name  : 'definitionListsSingleLine',
 	level : 'block',
@@ -400,9 +421,9 @@ const definitionListsSingleLine = {
 const definitionListsMultiLine = {
 	name  : 'definitionListsMultiLine',
 	level : 'block',
-	start(src) { return src.match(/\n[^\n]*\n::/m)?.index; },  // Hint to Marked.js to stop and check for a match
+	start(src) { return src.match(/\n[^\n]*\n::[^:\n]/m)?.index; },  // Hint to Marked.js to stop and check for a match
 	tokenizer(src, tokens) {
-		const regex = /(\n?\n?(?!::)[^\n]+?(?=\n::))|\n::(.(?:.|\n)*?(?=(?:\n::)|(?:\n\n)|$))/y;
+		const regex = /(\n?\n?(?!::)[^\n]+?(?=\n::[^:\n]))|\n::([^:\n](?:.|\n)*?(?=(?:\n::)|(?:\n\n)|$))/y;
 		let match;
 		let endIndex = 0;
 		const definitions = [];
@@ -707,33 +728,20 @@ const MarkedEmojiOptions = {
 };
 
 Marked.use(MarkedVariables());
-Marked.use({ extensions: [definitionListsMultiLine, definitionListsSingleLine, superSubScripts, mustacheSpans, mustacheDivs, mustacheInjectInline] });
+Marked.use({ extensions : [definitionListsMultiLine, definitionListsSingleLine, forcedParagraphBreaks, superSubScripts,
+	mustacheSpans, mustacheDivs, mustacheInjectInline] });
 Marked.use(mustacheInjectBlock);
 Marked.use({ renderer: renderer, tokenizer: tokenizer, mangle: false });
-Marked.use(MarkedExtendedTables(), MarkedGFMHeadingId(), MarkedSmartypantsLite(), MarkedEmojis(MarkedEmojiOptions));
+Marked.use(MarkedExtendedTables(), MarkedGFMHeadingId({ globalSlugs: true }), MarkedSmartypantsLite(), MarkedEmojis(MarkedEmojiOptions));
 
-const nonWordAndColonTest = /[^\w:]/g;
-const cleanUrl = function (sanitize, base, href) {
-	if(sanitize) {
-		let prot;
-		try {
-			prot = decodeURIComponent(unescape(href))
-        .replace(nonWordAndColonTest, '')
-        .toLowerCase();
-		} catch (e) {
-			return null;
-		}
-		if(prot.indexOf('javascript:') === 0 || prot.indexOf('vbscript:') === 0 || prot.indexOf('data:') === 0) {
-			return null;
-		}
-	}
-	try {
-		href = encodeURI(href).replace(/%25/g, '%');
-	} catch (e) {
-		return null;
-	}
-	return href;
-};
+function cleanUrl(href) {
+  try {
+    href = encodeURI(href).replace(/%25/g, '%');
+  } catch {
+    return null;
+  }
+  return href;
+}
 
 const escapeTest = /[&<>"']/;
 const escapeReplace = /[&<>"']/g;
@@ -828,13 +836,15 @@ let globalPageNumber = 0;
 
 module.exports = {
 	marked : Marked,
-	render : (rawBrewText, pageNumber=1)=>{
-		globalVarsList[pageNumber] = {};						//Reset global links for current page, to ensure values are parsed in order
-		varsQueue              = [];						//Could move into MarkedVariables()
-		globalPageNumber        = pageNumber;
+	render : (rawBrewText, pageNumber=0)=>{
+		globalVarsList[pageNumber] = {};					//Reset global links for current page, to ensure values are parsed in order
+		varsQueue                  = [];						//Could move into MarkedVariables()
+		globalPageNumber           = pageNumber;
+		if(pageNumber==0) {
+			MarkedGFMResetHeadingIDs();
+		}
 
-		rawBrewText = rawBrewText.replace(/^\\column$/gm, `\n<div class='columnSplit'></div>\n`)
-														 .replace(/^(:+)$/gm, (match)=>`${`<div class='blank'></div>`.repeat(match.length)}\n`);
+		rawBrewText = rawBrewText.replace(/^\\column$/gm, `\n<div class='columnSplit'></div>\n`);
 		const opts = Marked.defaults;
 
 		rawBrewText = opts.hooks.preprocess(rawBrewText);

tests/markdown/definition-lists.test.js

@@ -88,4 +88,16 @@ describe('Multiline Definition Lists', ()=>{
 		const rendered = Markdown.render(source).trim();
 		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe('<dl><dt>Term 1</dt><dd>Inline definition 1</dd>\n<dt></dt><dd>Inline definition 2 (no DT)</dd>\n</dl>');
 	});
+
+	test('Multiline Definition Term must have at least one non-empty Definition', function() {
+		const source = 'Term 1\n::';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Term 1</p>\n<div class='blank'></div><div class='blank'></div>`);
+	});
+
+	test('Multiline Definition List must have at least one non-newline character after ::', function() {
+		const source = 'Term 1\n::\nDefinition 1\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Term 1</p>\n<div class='blank'></div><div class='blank'></div>\n<p>Definition 1</p>`);
+	});
 });

tests/markdown/hard-breaks.test.js

@@ -0,0 +1,47 @@
+/* eslint-disable max-lines */
+
+const Markdown = require('naturalcrit/markdown.js');
+
+describe('Hard Breaks', ()=>{
+	test('Single Break', function() {
+		const source = ':\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div>`);
+	});
+
+	test('Double Break', function() {
+		const source = '::\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div><div class='blank'></div>`);
+	});
+
+	test('Triple Break', function() {
+		const source = ':::\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div><div class='blank'></div><div class='blank'></div>`);
+	});
+
+	test('Many Break', function() {
+		const source = '::::::::::\n\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div><div class='blank'></div>`);
+	});
+
+	test('Multiple sets of Breaks', function() {
+		const source = ':::\n:::\n:::';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<div class='blank'></div><div class='blank'></div><div class='blank'></div>\n<div class='blank'></div><div class='blank'></div><div class='blank'></div>\n<div class='blank'></div><div class='blank'></div><div class='blank'></div>`);
+	});
+
+	test('Break directly between two paragraphs', function() {
+		const source = 'Line 1\n::\nLine 2';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<p>Line 1</p>\n<div class='blank'></div><div class='blank'></div>\n<p>Line 2</p>`);
+	});
+
+	test('Ignored inside a code block', function() {
+		const source = '```\n\n:\n\n```\n';
+		const rendered = Markdown.render(source).trim();
+		expect(rendered, `Input:\n${source}`, { showPrefix: false }).toBe(`<pre><code>\n:\n</code></pre>`);
+	});
+});

themes/V3/Blank/style.less

@@ -236,7 +236,7 @@ body { counter-reset : page-numbers; }
 			left       : 50%;
 			width      : 50%;
 			height     : 50%;
-			transform  : translateX(-50%) translateY(50%) rotate(calc(-1deg * var(--rotation))) scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)));
+			transform  : translateX(-50%) translateY(50%) scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY))) rotate(calc(-1deg * var(--rotation)));
 		}
 		& img {
 			position : absolute;