Merge branch 'master' of https://github.com/naturalcrit/homebrewery into add-image-preview

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';
@@ -231,11 +230,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;
@@ -261,6 +263,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) {
@@ -347,11 +357,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;
 				});
 			};
@@ -366,12 +375,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;
 
@@ -385,6 +405,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/extensions/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;
+
+			let match = strikethroughRegex.exec(lineText);
+			let 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);
@@ -190,7 +208,7 @@ export function tokenizeCustomMarkdown(text) {
 				tokens.push({
 					line : lineNumber,
 					from : match.indices[1][0],
-					to   : match.indices[1][0] + match[1].length,
+					to   : match.indices[1][1],
 					type : customTags.injection,
 				});
 			}

client/components/codeEditor/extensions/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 = [];
@@ -162,7 +173,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 },