Merge branch 'master' into fixSafeHTML

client/components/codeEditor/codeEditor.jsx

@@ -308,7 +308,7 @@ const CodeEditor = forwardRef(
 			view.dispatch({
 				effects : themeCompartment.reconfigure(themeExtension),
 			});
-		}, [editorTheme]);
+		}, [editorTheme, tab]);
 
 		useEffect(()=>{
 			//rebuild syntax highlight when changing tab or renderer

client/components/codeEditor/extensions/customKeyMaps.js

@@ -1,33 +1,44 @@
 /* eslint max-lines: ["error", { "max": 300 }] */
 import { keymap } from '@codemirror/view';
-import { undo, redo, indentMore, deleteLine } from '@codemirror/commands';
+import { undo, redo, indentMore, indentLess, deleteLine } from '@codemirror/commands';
+import { EditorSelection } from '@codemirror/state';
 import { Prec } from '@codemirror/state';
 
 const insertTab = (view)=>{
-	const { from, to } = view.state.selection.main;
+	// If any selection spans multiple lines, delegates to CodeMirror's indentMore
+ 	// Otherwise inserts two spaces at each cursor/selection
+	const shouldIndent = view.state.selection.ranges.some((range)=>view.state.doc.lineAt(range.from).number !==
+		view.state.doc.lineAt(range.to).number
+	);
+
+	if(shouldIndent) return indentMore(view);
+
+	const changes = [];
+
+	for (const range of view.state.selection.ranges) {
+		changes.push({
+			from   : range.from,
+			to     : range.to,
+			insert : '  ' // Insert two spaces, not a tab char!
+		});
+	}
+	// Create a transaction so we can map old positions to
+	// their new positions after the edits are applied
+	const  mappedChanges = view.state.update({ changes });
 
 	view.dispatch({
-		changes   : { from, to, insert: '  ' },
-		selection : { anchor: from + 2 }
+		changes,
+		selection : EditorSelection.create(
+			view.state.selection.ranges.map((range)=>EditorSelection.cursor(
+				mappedChanges.changes.mapPos(range.from, 1) + 2
+			)
+			)
+		)
 	});
 
 	return true;
 };
 
-const indentLess = (view)=>{
-	const { from, to } = view.state.selection.main;
-	const lines = [];
-	for (let l = view.state.doc.lineAt(from).number; l <= view.state.doc.lineAt(to).number; l++) {
-		const line = view.state.doc.line(l);
-		const match = line.text.match(/^ {1,2}/); // match up to 2 spaces
-		if(match) {
-			lines.push({ from: line.from, to: line.from + match[0].length, insert: '' });
-		}
-	}
-	if(lines.length > 0) view.dispatch({ changes: lines });
-	return true;
-};
-
 const wrapSelection = (prefix, suffix)=>(view)=>{
 	const changes = [];
 
@@ -169,16 +180,16 @@ const newPage = (view)=>{
 };
 
 export const generalKeymap = Prec.high(keymap.of([
-	{ key: 'Tab', run: insertTab },
-	{ key: 'Mod-z', run: undo }, //i think it may be unnecessary
+	{ key: 'Tab', run: insertTab }, //runs indentMore if multiple lines selected in a single selection
+	{ key: 'Shift-Tab', run: indentLess },
+	{ key: 'Mod-z', run: undo }, //it may be unnecessary
 	{ key: 'Mod-Shift-z', run: redo },
-	{ key: 'Mod-y', run: redo },
-	{ key: 'Mod-d', run: deleteLine },
+	{ key: 'Mod-y', run: redo }, //user asked, so double keybind
+	{ key: 'Mod-d', run: deleteLine }, //annoyingly overrides "selectNextOccurrence" because users asked
 ]));
 
 export const markdownKeymap = Prec.highest(keymap.of([
-	//{ key: 'Shift-Tab', run: indentMore },
-	{ key: 'Shift-Tab',       run: indentLess },
+
 	{ key: 'Mod-b',           run: wrapSelection('**', '**') },    // makeBold
 	{ key: 'Mod-i',           run: wrapSelection('*', '*') },      // makeItalic
 	{ key: 'Mod-u',           run: wrapSelection('<u>', '</u>') }, // makeUnderline

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -44,6 +44,7 @@ const MetadataEditor = createReactClass({
 
 	getInitialState : function(){
 		return {
+			isOwner       : global.account?.username && global.account?.username === this.props.metadata?.authors[0],
 			showThumbnail : true
 		};
 	},
@@ -144,6 +145,15 @@ const MetadataEditor = createReactClass({
 			});
 	},
 
+	handleDeleteAuthor : function(author){
+		if(!confirm('Are you sure you want to remove this author? They will lose all edit access to this brew, and it will dissapear from their userpage.')) return;
+		if(!this.props.metadata.authors.includes(author)) return;
+		this.props.onChange({
+    		...this.props.metadata,
+    		authors : this.props.metadata.authors.filter((a)=>a !== author)
+		});
+	},
+
 	renderPublish : function(){
 		if(this.props.metadata.published){
 			return <button className='unpublish' onClick={()=>this.handlePublish(false)}>
@@ -170,16 +180,54 @@ const MetadataEditor = createReactClass({
 	},
 
 	renderAuthors : function(){
-		let text = 'None.';
-		if(this.props.metadata.authors && this.props.metadata.authors.length){
-			text = this.props.metadata.authors.join(', ');
-		}
-		return <div className='field authors'>
-			<label>authors</label>
-			<div className='value'>
-				{text}
+		const authors = this.props.metadata.authors;
+		if(!this.state.isOwner || authors.length < 2) return (
+			<div className='field authors'>
+				<label>authors</label>
+				<div className='value'>
+					{authors.length > 0 && (
+						<a href={`/user/${authors[0]}`} className='author-link' target="_blank" title={`Owner - Click to open ${authors[0]}'s profile in a new tab`}>
+								{authors[0]}{authors.length > 1 && ', '}
+						</a>
+					)}
+					{authors.length > 1 && authors.slice(1).map((author, i)=>(
+        				<a href={`/user/${author}`} className='author-link' title={`Author - Click to open ${author}'s profile in a new tab`}>
+        					{author}{i+2 < authors.length && ', '}
+        				</a>
+        			))}
+				</div>
 			</div>
-		</div>;
+		);
+		return (
+			<div className='field authors'>
+				<label>Authors</label>
+				<ul className='list'>
+					{authors.length > 0 && (
+						<li className='tag owner' title='Owner'>
+							<a href={`/user/${authors[0]}`} className='author-link' title={`Owner - Click to open ${authors[0]}'s profile in a new tab`}>
+								{authors[0]}
+							</a>
+						</li>
+					)}
+
+					{authors.length > 1 && authors.slice(1).map((author, i)=>(
+        				<li className='tag author' key={i + 1} title='Author'>
+        					<a href={`/user/${author}`} className='author-link' title={`Author - Click to open ${authors[0]}'s profile in a new tab`}>
+        						{author}
+        					</a>
+        					<button
+								onClick={()=>this.handleDeleteAuthor(author)}
+								className='delete'
+								title={`Remove ${author} as an author`}
+        					>
+        						<i className='fa fa-times fa-fw' />
+        					</button>
+        				</li>
+        			))}
+				</ul>
+			</div>
+		);
+
 	},
 
 	renderThemeDropdown : function(){

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -173,7 +173,51 @@
 			.colorButton(@red);
 		}
 	}
-	.authors.field .value { line-height    : 1.5em; }
+	.authors.field {
+		.tag {
+			font-weight:300;
+			transition:background-color 0.2s;
+
+			&.owner {
+				position: relative;
+				background-color:@silverLight;
+				min-width:25px;
+				display:grid;
+				place-items:center;
+				font-weight: 900;
+
+				&::after {
+					content: "\f521";
+					font-family: "Font Awesome 6 Free";
+					color:gold;
+					position: absolute;
+					top: 0;
+					left: 0;
+					width:15px;
+					height:15px;
+					rotate:-25deg;
+					translate:-30% -50%;
+					transform: scaleY(0.7);
+				}
+			}
+			&:has(button) a {
+				padding-right:5px;
+			}
+			&:has(button:hover) {
+				background:#d97d7d;
+			}
+
+			button {
+				color:@red;
+			}
+
+		
+		}
+		a {
+			color:black;
+			text-decoration:unset;
+		}
+	}
 
 	.themes.field {
 		& .dropdown-container {
@@ -275,13 +319,17 @@
 		}
 
 		.tag {
-			padding          : 0.3em;
+			padding          : 0.35em;
 			margin           : 2px;
-			font-size        : 0.9em;
+			font-size        : 0.95em;
 			background-color : #DDDDDD;
 			border-radius    : 0.5em;
 
 			.icon { #groupedIcon; }
+
+			button {
+				cursor : pointer;
+			}
 		}
 
 		.input-group {

client/homebrew/navbar/nav.jsx

@@ -61,10 +61,10 @@ const Nav = {
 					{icon}
 				</a>;
 			} else {
-				return <div {...props} className={classes} onClick={this.handleClick} >
+				return <button {...props} className={classes} onClick={this.handleClick} >
 					{this.props.children}
 					{icon}
-				</div>;
+				</button>;
 			}
 		}
 	}),

client/homebrew/pages/editPage/editPage.jsx

@@ -320,7 +320,7 @@ const EditPage = (props)=>{
 
 		// #5 - No unsaved changes, and has never been saved, hide the button
 		if(neverSaved)
-			return <Nav.item className='save neverSaved'>save now</Nav.item>;
+			return <Nav.item className='save neverSaved' disabled={true}>save now</Nav.item>;
 
 		// DEFAULT - No unsaved changes, show SAVED
 		return <Nav.item className='save saved'>saved</Nav.item>;

client/homebrew/pages/homePage/homePage.jsx

@@ -164,7 +164,7 @@ const HomePage =(props)=>{
 
 		// #5 - No unsaved changes, and has never been saved, hide the button
 		if(neverSaved)
-			return <Nav.item className='save neverSaved'>save now</Nav.item>;
+			return <Nav.item className='save neverSaved' disabled={true}>save now</Nav.item>;
 
 		// DEFAULT - No unsaved changes, show SAVED
 		return <Nav.item className='save saved'>saved</Nav.item>;

client/homebrew/pages/newPage/newPage.jsx

@@ -207,7 +207,7 @@ const NewPage = (props)=>{
 
 		// #5 - No unsaved changes, and has never been saved, hide the button
 		if(neverSaved)
-			return <Nav.item className='save neverSaved'>save now</Nav.item>;
+			return <Nav.item className='save neverSaved' disabled={true}>save now</Nav.item>;
 
 		// DEFAULT - No unsaved changes, show SAVED
 		return <Nav.item className='save saved'>saved</Nav.item>;