Merge branch 'master' of https://github.com/naturalcrit/homebrewery into fix-file-transfer

client/components/codeEditor/extensions/customKeyMaps.js

@@ -83,7 +83,7 @@ const insertTab = (view)=>{
 		changes,
 		selection : EditorSelection.create(
 			view.state.selection.ranges.map((range)=>EditorSelection.cursor(
-				mappedChanges.changes.mapPos(range.from, 1) + 2
+				mappedChanges.changes.mapPos(range.from, -1) + 2
 			)
 			)
 		)

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -6,7 +6,7 @@ import React, { useState, useRef, useMemo, useEffect } from 'react';
 import _ from 'lodash';
 
 import MarkdownLegacy from '@shared/markdownLegacy.js';
-import Markdown from '@shared/markdown.js';
+import { hbfm } from 'hbmarkedwrapper';
 import ErrorBar from './errorBar/errorBar.jsx';
 import ToolBar  from './toolBar/toolBar.jsx';
 
@@ -203,7 +203,7 @@ const BrewRenderer = (props)=>{
 			return <BrewPage className='page phb' index={index} key={index} contents={html} style={styles} onVisibilityChange={handlePageVisibilityChange} />;
 		} else {
 			if(pageText.startsWith('\\page')) {
-				const firstLineTokens  = Markdown.marked.lexer(pageText.split('\n', 1)[0])[0].tokens;
+				const firstLineTokens  = hbfm.marked.lexer(pageText.split('\n', 1)[0])[0].tokens;
 				const injectedTags = firstLineTokens?.find((obj)=>obj.injectedTags !== undefined)?.injectedTags;
 				if(injectedTags) {
 					styles     = { ...styles, ...injectedTags.styles };
@@ -231,7 +231,7 @@ const BrewRenderer = (props)=>{
 			// DO NOT REMOVE!!! REQUIRED FOR BACKWARDS COMPATIBILITY WITH NON-UPGRADABLE VERSIONS OF CHROME.
 			pageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
 
-			const html = Markdown.render(pageText, index);
+			const html = hbfm.render(pageText, index);
 
 			return <BrewPage className={classes} index={index} key={index} contents={html} style={styles} attributes={attributes} onVisibilityChange={handlePageVisibilityChange} />;
 		}

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -1,7 +1,7 @@
 import './notificationPopup.less';
 import React, { useEffect, useState } from 'react';
 import request from '../../utils/request-middleware.js';
-import Markdown from '@shared/markdown.js';
+import { hbfm } from 'hbmarkedwrapper';
 
 import Dialog from '@components/dialog.jsx';
 
@@ -44,7 +44,7 @@ const NotificationPopup = ()=>{
 		return notifications.map((notification)=>(
 			<li key={notification.dismissKey} >
 				<em>{notification.title}</em><br />
-				<p dangerouslySetInnerHTML={{ __html: Markdown.render(notification.text) }}></p>
+				<p dangerouslySetInnerHTML={{ __html: hbfm.render(notification.text) }}></p>
 			</li>
 		));
 	};

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -157,11 +157,11 @@ const MetadataEditor = createReactClass({
 	renderPublish : function(){
 		if(this.props.metadata.published){
 			return <button className='unpublish' onClick={()=>this.handlePublish(false)}>
-				<i className='fas fa-ban' /> unpublish
+				<i className='fas fa-ban' aria-hidden='true' /> unpublish
 			</button>;
 		} else {
 			return <button className='publish' onClick={()=>this.handlePublish(true)}>
-				<i className='fas fa-globe' /> publish
+				<i className='fas fa-globe' aria-hidden='true' /> publish
 			</button>;
 		}
 	},
@@ -359,26 +359,28 @@ const MetadataEditor = createReactClass({
 			<h1>Properties Editor</h1>
 
 			<div className='field title'>
-				<label>title</label>
-				<input type='text' className='value'
+				<label for='title_field'>title</label>
+				<input type='text' id='title_field' className='value'
 					defaultValue={this.props.metadata.title}
 					onChange={(e)=>this.handleFieldChange('title', e)} />
 			</div>
 			<div className='field-group'>
 				<div className='field-column'>
 					<div className='field description'>
-						<label>description</label>
-						<textarea defaultValue={this.props.metadata.description} className='value'
+						<label for='description_field'>description</label>
+						<textarea id='description_field' defaultValue={this.props.metadata.description} className='value'
 							onChange={(e)=>this.handleFieldChange('description', e)} />
 					</div>
 					<div className='field thumbnail'>
-						<label>thumbnail</label>
+						<label for='thumbnail_field'>thumbnail</label>
 						<input type='text'
+							id='thumbnail_field'
 							defaultValue={this.props.metadata.thumbnail}
 							placeholder='https://my.thumbnail.url'
 							className='value'
 							onChange={(e)=>this.handleFieldChange('thumbnail', e)} />
-						<button className='display' onClick={this.toggleThumbnailDisplay}>
+						<button className='display' onClick={this.toggleThumbnailDisplay}
+						        aria-label={`${this.state.showThumbnail ? 'hide thumbnail' : 'show thumbnail'}`}>
 							<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
 						</button>
 					</div>

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -215,7 +215,7 @@
 		}
 		a {
 			color:black;
-			text-decoration:unset;
+			text-underline-offset:0.2em;
 		}
 	}
 

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -247,57 +247,57 @@ const Snippetbar = createReactClass({
 		return (
 			<div className='editors'>
 				{this.props.view !== 'meta' && <><div className='historyTools'>
-					<div className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
+					<button className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
 						onClick={this.toggleHistoryMenu} >
 						<i className='fas fa-clock-rotate-left' />
 						{ this.state.showHistory && this.renderHistoryItems() }
-					</div>
-					<div className={`editorTool undo ${this.props.historySize.done ? 'active' : ''}`}
+					</button>
+					<button className={`editorTool undo ${this.props.historySize.done ? 'active' : ''}`}
 						onClick={this.props.undo} >
 						<i className='fas fa-undo' />
-					</div>
-					<div className={`editorTool redo ${this.props.historySize.undone ? 'active' : ''}`}
+					</button>
+					<button className={`editorTool redo ${this.props.historySize.undone ? 'active' : ''}`}
 						onClick={this.props.redo} >
 						<i className='fas fa-redo' />
-					</div>
+					</button>
 				</div>
 				<div className='codeTools'>
-					<div className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
+					<button className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
 						onClick={this.props.foldCode} >
 						<i className='fas fa-compress-alt' />
-					</div>
-					<div className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
+					</button>
+					<button className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
 						onClick={this.props.unfoldCode} >
 						<i className='fas fa-expand-alt' />
-					</div>
-					<div className={`editorTool formatCode ${this.props.formatCode ? 'active' : ''}`}
+					</button>
+					<button className={`editorTool formatCode ${this.props.formatCode ? 'active' : ''}`}
 						onClick={this.props.formatCode} >
 						<i className='fas fa-wand-magic-sparkles' />
-					</div>
-					<div className={`editorTheme ${this.state.themeSelector ? 'active' : ''}`}
+					</button>
+					<button className={`editorTheme ${this.state.themeSelector ? 'active' : ''}`}
 						onClick={this.toggleThemeSelector} >
 						<i className='fas fa-palette' />
 						{this.state.themeSelector && this.renderThemeSelector()}
-					</div>
+					</button>
 				</div></>}
 
 				<div className='tabs'>
-					<div className={cx('text', { selected: this.props.view === 'text' })}
+					<button className={cx('text', { selected: this.props.view === 'text' })}
 						onClick={()=>this.props.onViewChange('text')}>
 						<i className='fa fa-beer' />
-					</div>
-					<div className={cx('style', { selected: this.props.view === 'style' })}
+					</button>
+					<button className={cx('style', { selected: this.props.view === 'style' })}
 						onClick={()=>this.props.onViewChange('style')}>
 						<i className='fa fa-paint-brush' />
-					</div>
-					<div className={cx('snippet', { selected: this.props.view === 'snippet' })}
+					</button>
+					<button className={cx('snippet', { selected: this.props.view === 'snippet' })}
 						onClick={()=>this.props.onViewChange('snippet')}>
 						<i className='fas fa-th-list' />
-					</div>
-					<div className={cx('meta', { selected: this.props.view === 'meta' })}
+					</button>
+					<button className={cx('meta', { selected: this.props.view === 'meta' })}
 						onClick={()=>this.props.onViewChange('meta')}>
 						<i className='fas fa-info-circle' />
-					</div>
+					</button>
 				</div>
 
 			</div>

client/homebrew/editor/snippetbar/snippetbar.less

@@ -9,6 +9,7 @@
 	position         : relative;
 	display          : flex;
 	flex-wrap        : wrap-reverse;
+	reading-flow     : flex-visual;
 	justify-content  : space-between;
 	height           : auto;
 	color            : black;
@@ -24,6 +25,7 @@
 		min-width       : 275px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
 		font-size: .85rem;
 		&:only-child {min-width   : unset; margin-left : auto;}
+		reading-order   : 2;
 
 		>div {
 			display         : flex;
@@ -32,7 +34,7 @@
 
 			&:first-child { border-left : none; }
 
-			& > div {
+			& > button {
 				position    : relative;
 				width       : @menuHeight;
 				height      : @menuHeight;
@@ -132,6 +134,7 @@
 		display         : flex;
 		justify-content : flex-start;
 		min-width       : 565.95px;  //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
+		reading-order   : 1;
 	}
 
 	// removed caret for top level items, by request (makes buttons too wide).
@@ -219,10 +222,12 @@
 			flex            : 1;
 			justify-content : space-between;
 			border-bottom   : 1px solid;
+			reading-order   : 1;
 		}
 		.snippets { 
 			flex            : 1;
 			justify-content : space-evenly; 
+			reading-order   : 2;
 		}
 		.editors > div.history > .dropdown { right : unset; }
 	}

client/homebrew/editor/tagInput/tagInput.jsx

@@ -181,6 +181,7 @@ const TagInput = ({ tooltip, label, valuePatterns, values = [], unique = true, p
 						{t.value}
 						<button
 							type='button'
+							aria-label={`remove ${t.value} tag`}
 							onClick={(e)=>{
 								e.stopPropagation();
 								removeTag(i);

client/homebrew/pages/basePages/listPage/listPage.jsx

@@ -1,9 +1,8 @@
 /*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
 import './listPage.less';
-import React from 'react';
-import createReactClass from 'create-react-class';
-import _ from 'lodash';
+import React, { useEffect, useState, useRef, useMemo } from 'react';
 import moment from 'moment';
+import _ from 'lodash';
 
 import BrewItem from './brewItem/brewItem.jsx';
 
@@ -14,132 +13,116 @@ const USERPAGE_GROUP_VISIBILITY_PREFIX = 'HB_listPage_visibility_group';
 const DEFAULT_SORT_TYPE = 'alpha';
 const DEFAULT_SORT_DIR = 'asc';
 
-const ListPage = createReactClass({
-	displayName     : 'ListPage',
-	getDefaultProps : function() {
-		return {
-			brewCollection : [
-				{
-					title : '',
-					class : '',
-					brews : []
-				}
-			],
-			navItems    : <></>,
-			reportError : null
+const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navItems = <></>, reportError = null, query })=>{
+	const [filterString, setFilterString] = useState(query?.filter || '');
+	const [filterTags, setFilterTags] = useState([]);
+	const [sortType, setSortType] = useState(query?.sort || null);
+	const [sortDir, setSortDir] = useState(query?.dir || null);
+	const [groupVisibility, setGroupVisibility] = useState({});
+
+	const groupVisibilityRef = useRef(groupVisibility);
+	const sortTypeRef = useRef(sortType);
+	const sortDirRef = useRef(sortDir);
+
+	useEffect(()=>{
+		groupVisibilityRef.current = groupVisibility;
+	}, [groupVisibility]);
+
+	useEffect(()=>{
+		sortTypeRef.current = sortType;
+	}, [sortType]);
+
+	useEffect(()=>{
+		sortDirRef.current = sortDir;
+	}, [sortDir]);
+
+	useEffect(()=>{
+		window.onbeforeunload = saveToLocalStorage;
+		if(typeof window === 'undefined') return;
+
+		const newSortType = sortType ?? (localStorage.getItem(USERPAGE_SORT_TYPE) || DEFAULT_SORT_TYPE);
+		const newSortDir = sortDir ?? (localStorage.getItem(USERPAGE_SORT_DIR) || DEFAULT_SORT_DIR);
+		updateUrl(filterString, newSortType, newSortDir);
+
+		const namedBrewCollection = brewCollection.reduce((visibility, brewGroup)=>{
+			visibility[brewGroup.class] = (localStorage.getItem(`${USERPAGE_GROUP_VISIBILITY_PREFIX}_${brewGroup.class}`) ?? 'true') == 'true';
+			return visibility;
+		}, {});
+
+		setGroupVisibility(namedBrewCollection);
+		setSortType(newSortType);
+		setSortDir(newSortDir);
+
+		return ()=>{
+			window.onbeforeunload = null;
 		};
-	},
-	getInitialState : function() {
-		// HIDE ALL GROUPS UNTIL LOADED
-		const brewCollection = this.props.brewCollection.map((brewGroup)=>{
-			brewGroup.visible = false;
-			return brewGroup;
+	}, []);
+
+	const saveToLocalStorage = ()=>{
+		brewCollection.forEach((brewGroup)=>{
+			localStorage.setItem(`${USERPAGE_GROUP_VISIBILITY_PREFIX}_${brewGroup.class}`, `${groupVisibilityRef.current[brewGroup.class]}`);
 		});
+		localStorage.setItem(USERPAGE_SORT_TYPE, sortTypeRef.current);
+		localStorage.setItem(USERPAGE_SORT_DIR, sortDirRef.current);
+	};
 
-		return {
-			filterString   : this.props.query?.filter || '',
-			filterTags     : [],
-			sortType       : this.props.query?.sort || null,
-			sortDir        : this.props.query?.dir || null,
-			query          : this.props.query,
-			brewCollection : brewCollection
-		};
-	},
-
-	componentDidMount : function() {
-		// SAVE TO LOCAL STORAGE WHEN LEAVING PAGE
-		window.onbeforeunload = this.saveToLocalStorage;
-
-		// LOAD FROM LOCAL STORAGE
-		if(typeof window !== 'undefined') {
-			const newSortType = (this.state.sortType ?? (localStorage.getItem(USERPAGE_SORT_TYPE) || DEFAULT_SORT_TYPE));
-			const newSortDir = (this.state.sortDir ?? (localStorage.getItem(USERPAGE_SORT_DIR) || DEFAULT_SORT_DIR));
-			this.updateUrl(this.state.filterString, newSortType, newSortDir);
-
-			const brewCollection = this.props.brewCollection.map((brewGroup)=>{
-				brewGroup.visible = (localStorage.getItem(`${USERPAGE_GROUP_VISIBILITY_PREFIX}_${brewGroup.class}`) ?? 'true')=='true';
-				return brewGroup;
-			});
-
-			this.setState({
-				brewCollection : brewCollection,
-				sortType       : newSortType,
-				sortDir        : newSortDir
-			});
-		};
-	},
-
-	componentWillUnmount : function() {
-		window.onbeforeunload = function(){};
-	},
-
-	saveToLocalStorage : function() {
-		this.state.brewCollection.map((brewGroup)=>{
-			localStorage.setItem(`${USERPAGE_GROUP_VISIBILITY_PREFIX}_${brewGroup.class}`, `${brewGroup.visible}`);
-		});
-		localStorage.setItem(USERPAGE_SORT_TYPE, this.state.sortType);
-		localStorage.setItem(USERPAGE_SORT_DIR, this.state.sortDir);
-	},
-
-	renderBrews : function(brews){
+	const renderBrews = (brews)=>{
 		if(!brews || !brews.length) return <div className='noBrews'>No Brews.</div>;
 
-		return _.map(brews, (brew, idx)=>{
-			return <BrewItem brew={brew} key={idx} reportError={this.props.reportError} updateListFilter={ (tag)=>{ this.updateUrl(this.state.filterString, this.state.sortType, this.state.sortDir, tag); }}/>;
-		});
-	},
+		return _.map(brews, (brew, idx)=>(
+			<BrewItem
+				brew={brew}
+				key={idx}
+				reportError={reportError}
+				updateListFilter={(tag)=>{
+					updateUrl(filterString, sortType, sortDir, tag);
+				}}
+			/>
+		));
+	};
 
-	sortBrewOrder : function(brew){
-		if(!brew.title){brew.title = 'No Title';}
+	const sortBrewOrder = (brew)=>{
+		const title = brew.title || 'No Title';
 		const mapping = {
-			'alpha'   : _.deburr(brew.title.trim().toLowerCase()),
+			'alpha'   : _.deburr(title.trim().toLowerCase()),
 			'created' : moment(brew.createdAt).format(),
 			'updated' : moment(brew.updatedAt).format(),
 			'views'   : brew.views,
-			'latest'  : moment(brew.lastViewed).format()
+			'latest'  : moment(brew.lastViewed).format(),
 		};
-		return mapping[this.state.sortType];
-	},
+		return mapping[sortType];
+	};
 
-	handleSortOptionChange : function(event){
-		this.updateUrl(this.state.filterString, event.target.value, this.state.sortDir);
-		this.setState({
-			sortType : event.target.value
-		});
-	},
+	const handleSortOptionChange = (event)=>{
+		updateUrl(filterString, event.target.value, sortDir);
+		setSortType(event.target.value);
+	};
 
-	handleSortDirChange : function(event){
-		const newDir = this.state.sortDir == 'asc' ? 'desc' : 'asc';
+	const handleSortDirChange = (event)=>{
+		const newDir = sortDir == 'asc' ? 'desc' : 'asc';
 
-		this.updateUrl(this.state.filterString, this.state.sortType, newDir);
-		this.setState({
-			sortDir : newDir
-		});
-	},
+		updateUrl(filterString, sortType, newDir);
+		setSortDir(newDir);
+	};
 
-	renderSortOption : function(sortTitle, sortValue){
-		return <div className={`sort-option ${(this.state.sortType == sortValue ? 'active' : '')}`}>
-			<button
-				value={`${sortValue}`}
-				onClick={this.state.sortType == sortValue ? this.handleSortDirChange : this.handleSortOptionChange}
-			>
-				{`${sortTitle}`}
-			</button>
-			{this.state.sortType == sortValue &&
-				<i className={`sortDir fas ${this.state.sortDir == 'asc' ? 'fa-sort-up' : 'fa-sort-down'}`}></i>
-			}
-		  </div>;
-	},
+	const renderSortOption = (sortTitle, sortValue)=>{
+		return (
+			<div className={`sort-option ${sortType == sortValue ? 'active' : ''}`}>
+				<button value={`${sortValue}`} onClick={sortType == sortValue ? handleSortDirChange : handleSortOptionChange}>
+					{`${sortTitle}`}
+				</button>
+				{sortType == sortValue && <i className={`sortDir fas ${sortDir == 'asc' ? 'fa-sort-up' : 'fa-sort-down'}`}></i>}
+			</div>
+		);
+	};
 
-	handleFilterTextChange : function(e){
-		this.setState({
-			filterString : e.target.value,
-		});
-		this.updateUrl(e.target.value, this.state.sortType, this.state.sortDir);
+	const handleFilterTextChange = (e)=>{
+		setFilterString(e.target.value);
+		updateUrl(e.target.value, sortType, sortDir);
 		return;
-	},
+	};
 
-	updateUrl : function(filterTerm, sortType, sortDir, filterTag=''){
+	const updateUrl = (filterTerm, sortType, sortDir, filterTag = '')=>{
 		const url = new URL(window.location.href);
 		const urlParams = new URLSearchParams(url.search);
 
@@ -148,135 +131,162 @@ const ListPage = createReactClass({
 
 		let filterTags = urlParams.getAll('tag');
 		if(filterTag != '') {
-			if(filterTags.findIndex((tag)=>{return tag.toLowerCase()==filterTag.toLowerCase();}) == -1){
+			if(
+				filterTags.findIndex((tag)=>{
+					return tag.toLowerCase() == filterTag.toLowerCase();
+				}) == -1
+			) {
 				filterTags.push(filterTag);
 			} else {
-				filterTags = filterTags.filter((tag)=>{ return tag.toLowerCase() != filterTag.toLowerCase(); });
+				filterTags = filterTags.filter((tag)=>{
+					return tag.toLowerCase() != filterTag.toLowerCase();
+				});
 			}
 		}
 		urlParams.delete('tag');
 		// Add tags to URL in the order they were clicked
-		filterTags.forEach((tag)=>{ urlParams.append('tag', tag); });
+		filterTags.forEach((tag)=>urlParams.append('tag', tag));
 		// Sort tags before updating state
 		filterTags.sort((a, b)=>{
 			return a.indexOf(':') - b.indexOf(':') != 0 ? a.indexOf(':') - b.indexOf(':') : a.toLowerCase().localeCompare(b.toLowerCase());
 		});
 
-		this.setState({
-			filterTags
-		});
+		setFilterTags(filterTags);
 
-		if(!filterTerm)
-			urlParams.delete('filter');
-		else
-			urlParams.set('filter', filterTerm);
+		if(!filterTerm) urlParams.delete('filter');
+		else urlParams.set('filter', filterTerm);
 
 		url.search = urlParams;
 		window.history.replaceState(null, null, url);
-	},
+	};
 
-	renderFilterOption : function(){
-		return <div className='filter-option'>
-			<label>
-				<i className='fas fa-search'></i>
-				<input
-					type='search'
-					placeholder='filter title/description'
-					onChange={this.handleFilterTextChange}
-					value={this.state.filterString}
-				/>
-			</label>
-		</div>;
-	},
+	const renderFilterOption = ()=>{
+		return (
+			<div className='filter-option'>
+				<label>
+					<i className='fas fa-search'></i>
+					<input type='search' placeholder='filter title/description/tags' onChange={handleFilterTextChange} value={filterString} />
+				</label>
+			</div>
+		);
+	};
 
-	renderTagsOptions : function(){
-		if(this.state.filterTags?.length == 0) return;
-		return <div className='tags-container'>
-			{_.map(this.state.filterTags, (tag, idx)=>{
-				const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
-				return <span key={idx} className={matches[1]} onClick={()=>{ this.updateUrl(this.state.filterString, this.state.sortType, this.state.sortDir, tag); }}>{matches[2]}</span>;
-			})}
-		</div>;
-	},
+	const renderTagsOptions = ()=>{
+		if(filterTags?.length == 0) return;
+		return (
+			<div className='tags-container'>
+				{_.map(filterTags, (tag, idx)=>{
+					const matches = tag.match(/^(?:([^:]+):)?([^:]+)$/);
+					return (
+						<span
+							key={idx}
+							className={matches[1]}
+							onClick={()=>{
+								updateUrl(filterString, sortType, sortDir, tag);
+							}}>
+							{matches[2]}
+						</span>
+					);
+				})}
+			</div>
+		);
+	};
 
-	renderSortOptions : function(){
-		return <div className='sort-container'>
-			<h6>Sort by :</h6>
-			{this.renderSortOption('Title', 'alpha')}
-			{this.renderSortOption('Created Date', 'created')}
-			{this.renderSortOption('Updated Date', 'updated')}
-			{this.renderSortOption('Views', 'views')}
-			{/* {this.renderSortOption('Latest', 'latest')} */}
+	const renderSortOptions = ()=>{
+		return (
+			<div className='sort-container'>
+				<h6>Sort by :</h6>
+				{renderSortOption('Title', 'alpha')}
+				{renderSortOption('Created Date', 'created')}
+				{renderSortOption('Updated Date', 'updated')}
+				{renderSortOption('Views', 'views')}
+				{/* {renderSortOption('Latest', 'latest')} */}
+				{renderFilterOption()}
+			</div>
+		);
+	};
 
-			{this.renderFilterOption()}
-		</div>;
-	},
-
-	getSortedBrews : function(brews){
-		const testString = _.deburr(this.state.filterString).toLowerCase();
+	const getSortedBrews = (brews)=>{
+		const testString = _.deburr(filterString).toLowerCase();
 
 		brews = _.filter(brews, (brew)=>{
 			// Filter by user entered text
-			const brewStrings = _.deburr([
-				brew.title,
-				brew.description,
-				brew.tags].join('\n')
-				.toLowerCase());
-
+			const brewStrings = _.deburr([brew.title, brew.description, brew.tags].join('\n').toLowerCase());
 			const filterTextTest = brewStrings.includes(testString);
 
 			// Filter by user selected tags
 			let filterTagTest = true;
-			if(this.state.filterTags.length > 0){
-				filterTagTest = Array.isArray(brew.tags) && this.state.filterTags?.every((tag)=>{
-					return brew.tags.findIndex((brewTag)=>{
-						return brewTag.toLowerCase() == tag.toLowerCase();
-					}) >= 0;
-				});
+			if(filterTags.length > 0) {
+				filterTagTest =
+					Array.isArray(brew.tags) &&
+					filterTags?.every((tag)=>{
+						return (
+							brew.tags.findIndex((brewTag)=>{
+								return brewTag.toLowerCase() == tag.toLowerCase();
+							}) >= 0
+						);
+					});
 			}
 
 			return filterTextTest && filterTagTest;
 		});
 
-		return _.orderBy(brews, (brew)=>{ return this.sortBrewOrder(brew); }, this.state.sortDir);
-	},
+		return _.orderBy(
+			brews,
+			(brew)=>{
+				return sortBrewOrder(brew);
+			},
+			sortDir,
+		);
+	};
 
-	toggleBrewCollectionState : function(brewGroupClass) {
-		this.setState((prevState)=>({
-			brewCollection : prevState.brewCollection.map(
-				(brewGroup)=>brewGroup.class === brewGroupClass ? { ...brewGroup, visible: !brewGroup.visible } : brewGroup
-			)
-		}));
-	},
+	const sortedBrewCollection = useMemo(()=>{
+		return brewCollection.map((brewGroup)=>({ ...brewGroup, brews: getSortedBrews(brewGroup.brews) }));
+	}, [brewCollection, filterString, filterTags, sortType, sortDir]);
 
-	renderBrewCollection : function(brewCollection){
-		if(brewCollection == []) return <div className='brewCollection'>
-			<h1>No Brews</h1>
-		</div>;
+	const toggleBrewCollectionState = (brewGroupClass)=>{
+		setGroupVisibility((prevVisibility)=>({ ...prevVisibility, [brewGroupClass]: !prevVisibility[brewGroupClass] }));
+	};
+
+	const renderBrewCollection = (brewCollection)=>{
+		if(brewCollection.length === 0)
+			return (
+				<div className='brewCollection'>
+					<h1>No Brews</h1>
+				</div>
+			);
 		return _.map(brewCollection, (brewGroup, idx)=>{
-			return <div key={idx} className={`brewCollection ${brewGroup.class ?? ''}`}>
-				<h1 className={brewGroup.visible ? 'active' : 'inactive'} onClick={()=>{this.toggleBrewCollectionState(brewGroup.class);}}>{brewGroup.title || 'No Title'}</h1>
-				{brewGroup.visible ? this.renderBrews(this.getSortedBrews(brewGroup.brews)) : <></>}
-			</div>;
-		});
-	},
+			const sortedBrewGroup = sortedBrewCollection[idx];
+			const visible = groupVisibility[brewGroup.class];
 
-	render : function(){
-		return <div className='listPage sitePage'>
-			{/*<style>@layer V3_5ePHB, bundle;</style>*/}
-			<link href='/themes/V3/Blank/style.css' type='text/css' rel='stylesheet'/>
-			<link href='/themes/V3/5ePHB/style.css' type='text/css' rel='stylesheet'/>
-			{this.props.navItems}
-			{this.renderSortOptions()}
-			{this.renderTagsOptions()}
+			return (
+				<div key={idx} className={`brewCollection ${brewGroup.class ?? ''}`}>
+					<h1
+						className={visible ? 'active' : 'inactive'}
+						onClick={()=>{
+							toggleBrewCollectionState(brewGroup.class);
+						}}>
+						{brewGroup.title || 'No Title'}
+					</h1>
+					{visible ? renderBrews(sortedBrewGroup.brews) : <></>}
+				</div>
+			);
+		});
+	};
+
+	return (
+		<div className='listPage sitePage'>
+			<link href='/themes/V3/Blank/style.css' type='text/css' rel='stylesheet' />
+			<link href='/themes/V3/5ePHB/style.css' type='text/css' rel='stylesheet' />
+			{navItems}
+			{renderSortOptions()}
+			{renderTagsOptions()}
 
 			<div className='content V3'>
-				<div className='page'>
-					{this.renderBrewCollection(this.state.brewCollection)}
-				</div>
+				<div className='page'>{renderBrewCollection(brewCollection)}</div>
 			</div>
-		</div>;
-	}
-});
+		</div>
+	);
+};
 
 export default ListPage;

client/homebrew/pages/editPage/editPage.jsx

@@ -4,7 +4,7 @@ import './editPage.less';
 // Common imports
 import React, { useState, useEffect, useRef } from 'react';
 import request                                from '../../utils/request-middleware.js';
-import Markdown                               from '@shared/markdown.js';
+import { hbfm } from 'hbmarkedwrapper';
 import _                                      from 'lodash';
 
 import { DEFAULT_BREW_LOAD }                  from '../../../../server/brewDefaults.js';
@@ -62,7 +62,7 @@ const EditPage = (props)=>{
 	const [lastSavedTime, setLastSavedTime] = useState(new Date());
 	const [saveGoogle, setSaveGoogle] = useState(!!props.brew.googleId);
 	const [error, setError] = useState(null);
-	const [HTMLErrors, setHTMLErrors] = useState(Markdown.validate(props.brew.text));
+	const [HTMLErrors, setHTMLErrors] = useState(hbfm.validate(props.brew.text));
 	const [currentEditorViewPageNum, setCurrentEditorViewPageNum] = useState(1);
 	const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1);
 	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
@@ -86,7 +86,7 @@ const EditPage = (props)=>{
 		const autoSavePref = JSON.parse(localStorage.getItem(AUTOSAVE_KEY) ?? true);
 		setAutoSaveEnabled(autoSavePref);
 		setWarnUnsavedChanges(!autoSavePref);
-		setHTMLErrors(Markdown.validate(currentBrew.text));
+		setHTMLErrors(hbfm.validate(currentBrew.text));
 		fetchThemeBundle(setError, setThemeBundle, currentBrew.renderer, currentBrew.theme);
 
 		const handleControlKeys = (e)=>{
@@ -132,7 +132,7 @@ const EditPage = (props)=>{
 
 		//If there are HTML errors, run the validator on every change to give quick feedback
 		if(HTMLErrors.length && (field == 'text' || field == 'snippets'))
-			setHTMLErrors(Markdown.validate(value));
+			setHTMLErrors(hbfm.validate(value));
 
 		if(field == 'metadata') setCurrentBrew((prev)=>({ ...prev, ...value }));
 		else                    setCurrentBrew((prev)=>({ ...prev, [field]: value }));
@@ -210,7 +210,7 @@ const EditPage = (props)=>{
 	};
 
 	const save = async (brew, saveToGoogle)=>{
-		setHTMLErrors(Markdown.validate(brew.text));
+		setHTMLErrors(hbfm.validate(brew.text));
 
 		await updateHistory(brew).catch(console.error);
 		await versionHistoryGarbageCollection().catch(console.error);

client/homebrew/pages/errorPage/errorPage.jsx

@@ -1,7 +1,7 @@
 import './errorPage.less';
 import React      from 'react';
 import UIPage     from '../basePages/uiPage/uiPage.jsx';
-import Markdown   from '@shared/markdown.js';
+import { hbfm } from 'hbmarkedwrapper';
 import ErrorIndex from './errors/errorIndex.js';
 
 const ErrorPage = ({ brew })=>{
@@ -16,7 +16,7 @@ const ErrorPage = ({ brew })=>{
 					<h4>{brew?.text || 'No error text'}</h4>
 				</div>
 				<hr />
-				<div dangerouslySetInnerHTML={{ __html: Markdown.render(errorText) }} />
+				<div dangerouslySetInnerHTML={{ __html: hbfm.render(errorText) }} />
 			</div>
 		</UIPage>
 	);

client/homebrew/pages/homePage/homePage.jsx

@@ -4,7 +4,7 @@ import './homePage.less';
 // Common imports
 import React, { useState, useEffect, useRef } from 'react';
 import request                                from '../../utils/request-middleware.js';
-import Markdown                               from '@shared/markdown.js';
+import { hbfm } from 'hbmarkedwrapper';
 import _                                      from 'lodash';
 
 import { DEFAULT_BREW }                       from '../../../../server/brewDefaults.js';
@@ -47,7 +47,7 @@ const HomePage =(props)=>{
 
 	const [currentBrew, setCurrentBrew]                = useState(props.brew);
 	const [error, setError]                      = useState(undefined);
-	const [HTMLErrors, setHTMLErrors]                 = useState(Markdown.validate(props.brew.text));
+	const [HTMLErrors, setHTMLErrors]                 = useState(hbfm.validate(props.brew.text));
 	const [currentEditorViewPageNum, setCurrentEditorViewPageNum]   = useState(1);
 	const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1);
 	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
@@ -118,7 +118,7 @@ const HomePage =(props)=>{
 
 		//If there are HTML errors, run the validator on every change to give quick feedback
 		if(HTMLErrors.length && (field == 'text' || field == 'snippets'))
-			setHTMLErrors(Markdown.validate(value));
+			setHTMLErrors(hbfm.validate(value));
 
 		if(field == 'metadata') setCurrentBrew((prev)=>({ ...prev, ...value }));
 		else                    setCurrentBrew((prev)=>({ ...prev, [field]: value }));

client/homebrew/pages/newPage/newPage.jsx

@@ -4,7 +4,7 @@ import './newPage.less';
 // Common imports
 import React, { useState, useEffect, useRef } from 'react';
 import request                                from '../../utils/request-middleware.js';
-import Markdown                               from '@shared/markdown.js';
+import { hbfm } from 'hbmarkedwrapper';
 import _                                      from 'lodash';
 
 import { DEFAULT_BREW }                       from '../../../../server/brewDefaults.js';
@@ -46,7 +46,7 @@ const NewPage = (props)=>{
 	const [isSaving, setIsSaving] = useState(false);
 	const [saveGoogle, setSaveGoogle] = useState(global.account?.googleId ? true : false);
 	const [error, setError] = useState(null);
-	const [HTMLErrors, setHTMLErrors] = useState(Markdown.validate(props.brew.text));
+	const [HTMLErrors, setHTMLErrors] = useState(hbfm.validate(props.brew.text));
 	const [currentEditorViewPageNum, setCurrentEditorViewPageNum] = useState(1);
 	const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1);
 	const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
@@ -133,7 +133,7 @@ const NewPage = (props)=>{
 
 		//If there are HTML errors, run the validator on every change to give quick feedback
 		if(HTMLErrors.length && (field == 'text' || field == 'snippets'))
-			setHTMLErrors(Markdown.validate(value));
+			setHTMLErrors(hbfm.validate(value));
 
 		if(field == 'metadata') setCurrentBrew((prev)=>({ ...prev, ...value }));
 		else                    setCurrentBrew((prev)=>({ ...prev, [field]: value }));