Merge branch 'master' into Open-Sans---Installed-vs-Google-Fonts

client/components/codeEditor/codeEditor.jsx

@@ -17,8 +17,7 @@ import {
 	crosshairCursor,
 } from '@codemirror/view';
 import { EditorState, Compartment, StateEffect, StateField } from '@codemirror/state';
-import { foldAll as foldAllCmd, unfoldAll as unfoldAllCmd, foldGutter, foldKeymap, syntaxHighlighting } from '@codemirror/language';
-import { foldEffect } from '@codemirror/language';
+import { foldAll as foldAllCmd, unfoldAll as unfoldAllCmd, foldGutter, foldKeymap, foldEffect, foldState, syntaxHighlighting } from '@codemirror/language';
 import { defaultKeymap, history, undo, redo, undoDepth, redoDepth } from '@codemirror/commands';
 import { languages } from '@codemirror/language-data';
 import { css } from '@codemirror/lang-css';
@@ -38,8 +37,6 @@ const themes = { default: defaultCM5Theme, ...cm5Themes, darkbrewery };
 const themeCompartment = new Compartment();
 const highlightCompartment = new Compartment();
 
-console.log(themes);
-
 import { generalKeymap, markdownKeymap } from './customKeyMaps.js';
 import foldOnPages from './customFolding.js';
 import { customHighlightStyle, tokenizeCustomMarkdown, tokenizeCustomCSS } from './customHighlight.js';
@@ -151,11 +148,14 @@ const CodeEditor = forwardRef(
 		const editorRef = useRef(null);
 		const viewRef = useRef(null);
 		const docsRef = useRef({});
+		const tabRef = useRef(tab);
 		const prevTabRef = useRef(tab);
-
+		const scrollRef = useRef({});
+		const foldsRef = useRef({});
 		const pageMap = useRef([]);
 
 		const recomputePages = (doc)=>{
+			if(tab !== 'brewText') return;
 			const pages = [0];
 			const text = doc.toString();
 			let offset = 0;
@@ -181,6 +181,14 @@ const CodeEditor = forwardRef(
 			return page;
 		};
 
+		const getFoldRanges = (state)=>{
+			const folds = [];
+			state.field(foldState, false)?.between(0, state.doc.length, (from, to)=>{
+				folds.push({ from, to });
+			});
+			return folds;
+		};
+
 		const createExtensions = ({ onChange, language, editorTheme })=>{
 			const setEventListeners = EditorView.updateListener.of((update)=>{
 				if(update.docChanged) {
@@ -267,11 +275,10 @@ const CodeEditor = forwardRef(
 				ticking = true;
 				requestAnimationFrame(()=>{
 					const top = view.scrollDOM.scrollTop;
+					scrollRef.current[tabRef.current] = top;
 					const block = view.lineBlockAtHeight(top);
-
-					const page = findPageFromPos(block.from); // CHANGED
+					const page = findPageFromPos(block.from);
 					onViewChange(page);
-
 					ticking = false;
 				});
 			};
@@ -286,12 +293,23 @@ const CodeEditor = forwardRef(
 			};
 		}, []);
 
+		const restoreFolds = (view, folds)=>{
+  			if(!folds?.length) return;
+
+  			view.dispatch({
+    			effects : folds.map((f)=>foldEffect.of(f))
+  			});
+		};
+
 		useEffect(()=>{
 			const view = viewRef.current;
 			if(!view) return;
 
+			tabRef.current = tab;
 			const prevTab = prevTabRef.current;
 
+			foldsRef.current[prevTab] = getFoldRanges(view.state);
+
 			if(prevTab !== tab) {
 				docsRef.current[prevTab] = view.state;
 
@@ -305,6 +323,16 @@ const CodeEditor = forwardRef(
 				}
 
 				view.setState(nextState);
+				restoreFolds(view, foldsRef.current[tab]);
+
+				const savedScroll = scrollRef.current[tab];
+
+				if(savedScroll != null) {
+					requestAnimationFrame(()=>{
+						view.scrollDOM.scrollTop = savedScroll;
+					});
+				}
+
 				prevTabRef.current = tab;
 			}
 			view.focus();

client/components/codeEditor/codeEditor.less

@@ -100,6 +100,10 @@
 			vertical-align : sub;
 			color          : rgb(123, 123, 15);
 		}
+		.cm-strikethrough {
+			text-decoration: line-through;
+		}
+
 		.cm-definitionList {
 			.cm-definitionTerm { color : rgb(96, 117, 143); }
 			.cm-definitionColon:not(:has(.cm-comment)) {

client/components/codeEditor/customHighlight.js

@@ -16,6 +16,7 @@ const customTags = {
 	definitionTerm  : 'definitionTerm', // .cm-definitionTerm
 	definitionDesc  : 'definitionDesc', // .cm-definitionDesc
 	definitionColon : 'definitionColon', // .cm-definitionColon
+	strikethrough   : 'strikethrough', // .cm-strikethrough
 
 	//CSS
 
@@ -81,6 +82,23 @@ export function tokenizeCustomMarkdown(text) {
 			}
 		}
 
+		// --- Strikethrough ---
+		if(/\~/.test(lineText)) {
+			const strikethroughRegex = /~(?!\s)(.+?)(?<!\s)~/g;
+
+			const match = strikethroughRegex.exec(lineText);
+			const type = customTags.strikethrough;
+
+			if(match) {
+				tokens.push({
+					line : lineNumber,
+					type,
+					from : match.index,
+					to   : match.index + match[0].length,
+				});
+			}
+		}
+
 		// --- single line def list ---
 		const singleLineRegex = /^(?=.*[^:])(.+?)(\s*)(::)([^\n]*)$/dmy;
 		const match = singleLineRegex.exec(lineText);
@@ -182,13 +200,13 @@ export function tokenizeCustomMarkdown(text) {
 		}
 
 		if(lineText.includes('{') && lineText.includes('}')) {
-			const injectionRegex = /(?:^|[^{\n])({(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\2})/gm;
+			const injectionRegex = /(?:^|[^{\n])({(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\2})/gmd;
 			let match;
 			while ((match = injectionRegex.exec(lineText)) !== null) {
 				tokens.push({
 					line : lineNumber,
-					from : match.index,
-					to   : match.index + match[1].length,
+					from : match.indices[1][0],
+					to   : match.indices[1][1],
 					type : customTags.injection,
 				});
 			}

client/components/codeEditor/customKeyMaps.js

@@ -3,6 +3,17 @@ import { keymap } from '@codemirror/view';
 import { undo, redo, indentMore, deleteLine } from '@codemirror/commands';
 import { Prec } from '@codemirror/state';
 
+const insertTab = (view)=>{
+	const { from, to } = view.state.selection.main;
+
+	view.dispatch({
+		changes   : { from, to, insert: '  ' },
+		selection : { anchor: from + 2 }
+	});
+
+	return true;
+};
+
 const indentLess = (view)=>{
 	const { from, to } = view.state.selection.main;
 	const lines = [];
@@ -17,48 +28,44 @@ const indentLess = (view)=>{
 	return true;
 };
 
-const wrapSelection = (prefix, suffix) => (view) => {
-	const { from, to } = view.state.selection.main;
-	const selected = view.state.doc.sliceString(from, to);
+const wrapSelection = (prefix, suffix)=>(view)=>{
+	const changes = [];
 
-	let text, selection;
+	for (const range of view.state.selection.ranges) {
+		const { from, to } = range;
+		const selected = view.state.doc.sliceString(from, to);
 
-	if(from === to) {
-		text = prefix + suffix;
-		selection = { anchor: from + prefix.length, head: from + prefix.length };
-	}
-	else if(selected.startsWith(prefix) && selected.endsWith(suffix)) {
-		text = selected.slice(prefix.length, -suffix.length);
-		selection = { anchor: from, head: from + text.length };
-	}
-	else {
-		text = `${prefix}${selected}${suffix}`;
-		selection = { anchor: from, head: from + text.length };
+		let text;
+
+		if(from === to) { text = prefix + suffix; } else if(selected.startsWith(prefix) && selected.endsWith(suffix)) {
+			text = selected.slice(prefix.length, -suffix.length);
+		} else {text = `${prefix}${selected}${suffix}`;}
+
+		changes.push({ from, to, insert: text });
 	}
 
 	view.dispatch({
-		changes   : { from, to, insert: text },
-		selection
+		changes
 	});
 
 	return true;
 };
 
-const makeNbsp = (view) => {
-  const { from } = view.state.selection.main;
+const makeNbsp = (view)=>{
+	const { from } = view.state.selection.main;
 
-  const prev2 = from >= 2
-    ? view.state.doc.sliceString(from - 2, from)
-    : '';
+	const prev2 = from >= 2
+		? view.state.doc.sliceString(from - 2, from)
+		: '';
 
-  const insert = (prev2 === ':>' || prev2 === '>>') ? '>' : ':>';
+	const insert = (prev2 === ':>' || prev2 === '>>') ? '>' : ':>';
 
-  view.dispatch({
-    changes   : { from, to: from, insert },
-    selection : { anchor: from + insert.length },
-  });
+	view.dispatch({
+		changes   : { from, to: from, insert },
+		selection : { anchor: from + insert.length },
+	});
 
-  return true;
+	return true;
 };
 
 const makeSpace = (view)=>{
@@ -162,7 +169,7 @@ const newPage = (view)=>{
 };
 
 export const generalKeymap = Prec.high(keymap.of([
-	{ key: 'Tab', run: indentMore },
+	{ key: 'Tab', run: insertTab },
 	{ key: 'Mod-z', run: undo }, //i think it may be unnecessary
 	{ key: 'Mod-Shift-z', run: redo },
 	{ key: 'Mod-y', run: redo },

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -41,6 +41,7 @@ const BrewPage = (props)=>{
 	props = {
 		contents : '',
 		index    : 0,
+		hoisted  : false,
 		...props
 	};
 	const pageRef   = useRef(null);
@@ -220,7 +221,8 @@ const BrewRenderer = (props)=>{
 		}
 	};
 
-	const renderPages = ()=>{
+	const renderPages = (checkHoists = false)=>{
+
 		if(props.errors && props.errors.length)
 			return renderedPages;
 
@@ -232,10 +234,16 @@ const BrewRenderer = (props)=>{
 			renderedPages[props.currentEditorCursorPageNum - 1] = renderPage(rawPages[props.currentEditorCursorPageNum - 1], props.currentEditorCursorPageNum - 1);
 
 		_.forEach(rawPages, (page, index)=>{
-			if((isInView(index) || !renderedPages[index]) && typeof window !== 'undefined'){
+			const varsOnPageRegex = /([!$]?)\[((?!\s*\])(?:\\.|[^\[\]\\])+)\]/g; // Find out if there are any vars on the page.
+			const forceRender = checkHoists &&
+				!props.hoisted &&
+				(page.match(varsOnPageRegex));  // forceRender forces pages outside of the PPR range to render if true.
+			                                    // This is necessary on the first load to fully populate the variable table.
+			if((isInView(index) || !renderedPages[index] || forceRender) && typeof window !== 'undefined'){
 				renderedPages[index] = renderPage(page, index); // Render any page not yet rendered, but only re-render those in PPR range
 			}
 		});
+		if(!props.hoisted) { props.hoisted = true; } // Only fully hoist once.
 		return renderedPages;
 	};
 
@@ -275,7 +283,7 @@ const BrewRenderer = (props)=>{
 		window.addEventListener('hashchange', ()=>scrollToHash(window.location.hash));
 
 		setTimeout(()=>{	//We still see a flicker where the style isn't applied yet, so wait 100ms before showing iFrame
-			renderPages(); //Make sure page is renderable before showing
+			renderPages(true); //Make sure page is renderable before showing
 			setState((prevState)=>({
 				...prevState,
 				isMounted  : true,

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -30,18 +30,17 @@ import cm5Themes from 'codemirror-5-themes';
 const themes = { default: defaultCM5Theme, ...cm5Themes, darkbrewery };
 
 const themeNames = Object.entries(themes)
-  .filter(([name, value]) =>
-    Array.isArray(value) &&
+  .filter(([name, value])=>Array.isArray(value) &&
     !name.endsWith('Init') &&
     !name.endsWith('Style')
   )
-  .map(([name]) => name);
+  .map(([name])=>name);
 
 const EditorThemes = [
-  'default',
-  ...themeNames
-    .filter(name => name !== 'default')
-    .sort((a, b) => a.localeCompare(b))
+	'default',
+	...themeNames
+    .filter((name)=>name !== 'default')
+    .sort((a, b)=>a.localeCompare(b))
 ];
 
 const execute = function(val, props){

client/homebrew/navbar/print.navitem.jsx

@@ -1,9 +1,25 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import Nav from './nav.jsx';
 import { printCurrentBrew } from '@shared/helpers.js';
 
 export default function(){
+	const [printing, setPrinting] = useState(false);
+
+	// listen for print cycle events to display "loading" message since it can take some time.
+	useEffect(()=>{
+		document.addEventListener('print:startprep', handlePrintStartPrep);
+		document.addEventListener('print:finishedprep', handlePrintPrepFinished);
+		return ()=>{
+			document.removeEventListener('print:startprep', handlePrintStartPrep);
+			document.removeEventListener('print:finishedprep', handlePrintPrepFinished);
+		}
+	}, []);
+
+	const handlePrintStartPrep = ()=>{ setPrinting(true); };
+
+	const handlePrintPrepFinished = ()=>{ setPrinting(false);	};
+
 	return <Nav.item onClick={printCurrentBrew} color='purple' icon='far fa-file-pdf'>
-		get PDF
+		{printing ? 'loading' : 'get PDF'}
 	</Nav.item>;
 };

client/homebrew/pages/editPage/editPage.jsx

@@ -90,7 +90,7 @@ const EditPage = (props)=>{
 
 		const handleControlKeys = (e)=>{
 			if(!(e.ctrlKey || e.metaKey)) return;
-			if(e.keyCode === 83) trySaveRef.current(true);
+			if(e.keyCode === 83) trySaveRef.current(true, true, saveGoogle);
 			if(e.keyCode === 80) printCurrentBrew();
 			if([83, 80].includes(e.keyCode)) {
 				e.stopPropagation();
@@ -118,13 +118,9 @@ const EditPage = (props)=>{
 		const hasChange = !_.isEqual(currentBrew, lastSavedBrew.current);
 		setUnsavedChanges(hasChange);
 
-		if(autoSaveEnabled) trySave(false, hasChange);
+		if(autoSaveEnabled) trySave(false, hasChange, saveGoogle);
 	}, [currentBrew]);
 
-	useEffect(()=>{
-		trySave(true);
-	}, [saveGoogle]);
-
 	const handleSplitMove = ()=>{
 		editorRef.current?.update();
 	};
@@ -183,11 +179,13 @@ const EditPage = (props)=>{
 	};
 
 	const toggleGoogleStorage = ()=>{
+		const newSaveGoogle = !saveGoogle;
 		setSaveGoogle((prev)=>!prev);
 		setError(null);
+		trySave(true, true, newSaveGoogle);
 	};
 
-	const trySave = (immediate = false, hasChanges = true)=>{
+	const trySave = (immediate = false, hasChanges = true, saveToGoogle = false)=>{
 		clearTimeout(saveTimeout.current);
 		if(isSaving) return;
 		if(!hasChanges && !immediate) return;
@@ -196,7 +194,7 @@ const EditPage = (props)=>{
 		saveTimeout.current = setTimeout(async ()=>{
 			setIsSaving(true);
 			setError(null);
-			await save(currentBrew, saveGoogle)
+			await save(currentBrew, saveToGoogle)
 			.catch((err)=>{
 				setError(err);
 			});
@@ -216,7 +214,7 @@ const EditPage = (props)=>{
 		const brewToSave = {
 			...brew,
 			text      : brew.text.normalize('NFC'),
-			pageCount : ((brew.renderer === 'legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1,
+			pageCount : ((brew.renderer === 'legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/gm)) || []).length + 1,
 			patches   : stringifyPatches(makePatches(encodeURI(lastSavedBrew.current.text.normalize('NFC')), encodeURI(brew.text.normalize('NFC')))),
 			hash      : await md5(lastSavedBrew.current.text.normalize('NFC')),
 			textBin   : undefined,
@@ -314,7 +312,7 @@ const EditPage = (props)=>{
 
 		// #3 - Unsaved changes exist, click to save, show SAVE NOW
 		if(unsavedChanges)
-			return <Nav.item className='save' onClick={()=>trySave(true)} color='blue' icon='fas fa-save'>save now</Nav.item>;
+			return <Nav.item className='save' onClick={()=>trySave(true, true, saveGoogle)} color='blue' icon='fas fa-save'>save now</Nav.item>;
 
 		// #4 - No unsaved changes, autosave is ON, show AUTO-SAVED
 		if(autoSaveEnabled)

client/homebrew/pages/newPage/newPage.jsx

@@ -156,7 +156,7 @@ const NewPage = (props)=>{
 		const updatedBrew = { ...currentBrew };
 		splitTextStyleAndMetadata(updatedBrew);
 
-		const pageRegex = updatedBrew.renderer === 'legacy' ? /\\page/g : /^\\page$/gm;
+		const pageRegex = updatedBrew.renderer === 'legacy' ? /\\page/g : /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/gm;
 		updatedBrew.pageCount = (updatedBrew.text.match(pageRegex) || []).length + 1;
 
 		const res = await request