Merge branch 'master' of https://github.com/naturalcrit/homebrewery into adress-small-accessibility-concerns

2026-01-01 17:22:42 +00:00 · 2024-12-09 21:52:25 +01:00
parent 35856ad01e 51936a1b99
commit eca0f59b40
93 changed files with 3337 additions and 2398 deletions
--- a/shared/helpers.js
+++ b/shared/helpers.js
@@ -1,6 +1,6 @@
-const _ = require('lodash');
-const yaml = require('js-yaml');
-const request = require('../client/homebrew/utils/request-middleware.js');
+import _       from 'lodash';
+import yaml    from 'js-yaml';
+import request from '../client/homebrew/utils/request-middleware.js';

 const splitTextStyleAndMetadata = (brew)=>{
 	brew.text = brew.text.replaceAll('\r\n', '\n');
@@ -21,6 +21,9 @@ const splitTextStyleAndMetadata = (brew)=>{
 		brew.snippets = brew.text.slice(11, index - 1);
 		brew.text = brew.text.slice(index + 5);
 	}
+
+	// Handle old brews that still have empty strings in the tags metadata
+	if(typeof brew.tags === 'string') brew.tags = brew.tags ? [brew.tags] : [];
 };

 const printCurrentBrew = ()=>{
@@ -51,7 +54,7 @@ const fetchThemeBundle = async (obj, renderer, theme)=>{
 	}));
 };

-module.exports = {
+export {
 	splitTextStyleAndMetadata,
 	printCurrentBrew,
 	fetchThemeBundle,
--- a/shared/naturalcrit/codeEditor/autocompleteEmoji.js
+++ b/shared/naturalcrit/codeEditor/autocompleteEmoji.js
@@ -1,7 +1,7 @@
-const diceFont      = require('../../../themes/fonts/iconFonts/diceFont.js');
-const elderberryInn = require('../../../themes/fonts/iconFonts/elderberryInn.js');
-const fontAwesome   = require('../../../themes/fonts/iconFonts/fontAwesome.js');
-const gameIcons     = require('../../../themes/fonts/iconFonts/gameIcons.js');
+import diceFont      from '../../../themes/fonts/iconFonts/diceFont.js';
+import elderberryInn from '../../../themes/fonts/iconFonts/elderberryInn.js';
+import fontAwesome   from '../../../themes/fonts/iconFonts/fontAwesome.js';
+import gameIcons     from '../../../themes/fonts/iconFonts/gameIcons.js';

 const emojis = {
 	...diceFont,
--- a/shared/naturalcrit/markdown.js
+++ b/shared/naturalcrit/markdown.js
@@ -1,19 +1,19 @@
 /* eslint-disable max-lines */
-const _ = require('lodash');
-const Marked = require('marked');
-const MarkedExtendedTables = require('marked-extended-tables');
-const { markedSmartypantsLite: MarkedSmartypantsLite } = require('marked-smartypants-lite');
-const { gfmHeadingId: MarkedGFMHeadingId, resetHeadings: MarkedGFMResetHeadingIDs } = require('marked-gfm-heading-id');
-const { markedEmoji: MarkedEmojis } = require('marked-emoji');
+import _                        from 'lodash';
+import { Parser as MathParser } from 'expr-eval';
+import { marked as Marked }              from 'marked';
+import MarkedExtendedTables     from 'marked-extended-tables';
+import { markedSmartypantsLite as MarkedSmartypantsLite }                                from 'marked-smartypants-lite';
+import { gfmHeadingId as MarkedGFMHeadingId, resetHeadings as MarkedGFMResetHeadingIDs } from 'marked-gfm-heading-id';
+import { markedEmoji as MarkedEmojis }                                                   from 'marked-emoji';

 //Icon fonts included so they can appear in emoji autosuggest dropdown
-const diceFont      = require('../../themes/fonts/iconFonts/diceFont.js');
-const elderberryInn = require('../../themes/fonts/iconFonts/elderberryInn.js');
-const fontAwesome   = require('../../themes/fonts/iconFonts/fontAwesome.js');
-const gameIcons     = require('../../themes/fonts/iconFonts/gameIcons.js');
+import diceFont      from '../../themes/fonts/iconFonts/diceFont.js';
+import elderberryInn from '../../themes/fonts/iconFonts/elderberryInn.js';
+import gameIcons     from '../../themes/fonts/iconFonts/gameIcons.js';
+import fontAwesome   from '../../themes/fonts/iconFonts/fontAwesome.js';

-const MathParser = require('expr-eval').Parser;
-const renderer = new Marked.Renderer();
+const renderer  = new Marked.Renderer();
 const tokenizer = new Marked.Tokenizer();

 //Limit math features to simple items
@@ -854,7 +854,7 @@ const globalVarsList    = {};
 let varsQueue       = [];
 let globalPageNumber = 0;

-module.exports = {
+const Markdown = {
 	marked : Marked,
 	render : (rawBrewText, pageNumber=0)=>{
 		globalVarsList[pageNumber] = {};					//Reset global links for current page, to ensure values are parsed in order
@@ -865,6 +865,7 @@ module.exports = {
 		}

 		rawBrewText = rawBrewText.replace(/^\\column$/gm, `\n<div class='columnSplit'></div>\n`);
+
 		const opts = Marked.defaults;

 		rawBrewText = opts.hooks.preprocess(rawBrewText);
@@ -935,3 +936,6 @@ module.exports = {
 		return errors;
 	},
 };
+
+export default Markdown;
+
--- a/shared/naturalcrit/nav/nav.jsx
+++ b/shared/naturalcrit/nav/nav.jsx
@@ -12,10 +12,8 @@ const Nav = {
 		displayName : 'Nav.base',
 		render      : function(){
 			return <nav>
-				<div className='navContent'>
 					{this.props.children}
-				</div>
-			</nav>;
+					</nav>;
 		}
 	}),
 	logo : function(){
--- a/shared/naturalcrit/splitPane/splitPane.jsx
+++ b/shared/naturalcrit/splitPane/splitPane.jsx
@@ -1,200 +1,110 @@
 require('./splitPane.less');
 const React = require('react');
-const createClass = require('create-react-class');
-const cx = require('classnames');
+const { useState, useEffect } = React;

-const SplitPane = createClass({
-	displayName     : 'SplitPane',
-	getDefaultProps : function() {
-		return {
-			storageKey         : 'naturalcrit-pane-split',
-			onDragFinish       : function(){}, //fires when dragging
-			showDividerButtons : true
-		};
-	},
+const storageKey = 'naturalcrit-pane-split';

-	getInitialState : function() {
-		return {
-			currentDividerPos : null,
-			windowWidth       : 0,
-			isDragging        : false,
-			moveSource        : false,
-			moveBrew          : false,
-			showMoveArrows    : true
-		};
-	},
+const SplitPane = (props)=>{
+	const {
+		onDragFinish = ()=>{},
+		showDividerButtons = true
+	} = props;

-	pane1 : React.createRef(null),
-	pane2 : React.createRef(null),
+	const [isDragging, setIsDragging] = useState(false);
+	const [dividerPos, setDividerPos] = useState(null);
+	const [moveSource, setMoveSource] = useState(false);
+	const [moveBrew, setMoveBrew] = useState(false);
+	const [showMoveArrows, setShowMoveArrows] = useState(true);
+	const [liveScroll, setLiveScroll] = useState(false);

-	componentDidMount : function() {
-		const dividerPos = window.localStorage.getItem(this.props.storageKey);
-		if(dividerPos){
-			this.setState({
-				currentDividerPos : this.limitPosition(dividerPos, 0.1*(window.innerWidth-13), 0.9*(window.innerWidth-13)),
-				userSetDividerPos : dividerPos,
-				windowWidth       : window.innerWidth
-			});
-		} else {
-			this.setState({
-				currentDividerPos : window.innerWidth / 2,
-				userSetDividerPos : window.innerWidth / 2
-			});
-		}
-		window.addEventListener('resize', this.handleWindowResize);
+	useEffect(()=>{
+		const savedPos = window.localStorage.getItem(storageKey);
+		setDividerPos(savedPos ? limitPosition(savedPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)) : window.innerWidth / 2);
+		setLiveScroll(window.localStorage.getItem('liveScroll') === 'true');

-		// This lives here instead of in the initial render because you cannot touch localStorage until the componant mounts.
-		const loadLiveScroll = window.localStorage.getItem('liveScroll') === 'true';
-		this.setState({ liveScroll: loadLiveScroll });
-	},
+		window.addEventListener('resize', handleResize);
+		return ()=>window.removeEventListener('resize', handleResize);
+	}, []);

-	componentWillUnmount : function() {
-		window.removeEventListener('resize', this.handleWindowResize);
-	},
+	const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>Math.round(Math.min(max, Math.max(min, x)));

-	handleWindowResize : function() {
-		// Allow divider to increase in size to last user-set position
-		// Limit current position to between 10% and 90% of visible space
-		const newLoc = this.limitPosition(this.state.userSetDividerPos, 0.1*(window.innerWidth-13), 0.9*(window.innerWidth-13));
-
-		this.setState({
-			currentDividerPos : newLoc,
-			windowWidth       : window.innerWidth
-		});
-	},
-
-	limitPosition : function(x, min = 1, max = window.innerWidth - 13) {
-		const result = Math.round(Math.min(max, Math.max(min, x)));
-		return result;
-	},
-
-	handleUp : function(e){
+	//when resizing, the divider should grow smaller if less space is given, then grow back if the space is restored, to the original position
+	const handleResize = () =>setDividerPos(limitPosition(window.localStorage.getItem(storageKey), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)));
+	
+	const handleUp =(e)=>{
 		e.preventDefault();
-		if(this.state.isDragging){
-			this.props.onDragFinish(this.state.currentDividerPos);
-			window.localStorage.setItem(this.props.storageKey, this.state.currentDividerPos);
+		if(isDragging) {
+			onDragFinish(dividerPos);
+			window.localStorage.setItem(storageKey, dividerPos);
 		}
-		this.setState({ isDragging: false });
-	},
+		setIsDragging(false);
+	};

-	handleDown : function(e){
+	const handleDown = (e)=>{
 		e.preventDefault();
-		this.setState({ isDragging: true });
-		//this.unFocus()
-	},
-
-	handleMove : function(e){
-		if(!this.state.isDragging) return;
+		setIsDragging(true);
+	};

+	const handleMove = (e)=>{
+		if(!isDragging) return;
 		e.preventDefault();
-		const newSize = this.limitPosition(e.pageX);
-		this.setState({
-			currentDividerPos : newSize,
-			userSetDividerPos : newSize
-		});
-	},
+		setDividerPos(limitPosition(e.pageX));
+	};

-	liveScrollToggle : function() {
-		window.localStorage.setItem('liveScroll', String(!this.state.liveScroll));
-		this.setState({ liveScroll: !this.state.liveScroll });
-	},
-	/*
-	unFocus : function() {
-		if(document.selection){
-				document.selection.empty();
-		}else{
-			window.getSelection().removeAllRanges();
-		}
-	},
-	*/
+	const liveScrollToggle = ()=>{
+		window.localStorage.setItem('liveScroll', String(!liveScroll));
+		setLiveScroll(!liveScroll);
+	};

-	setMoveArrows : function(newState) {
-		if(this.state.showMoveArrows != newState){
-			this.setState({
-				showMoveArrows : newState
-			});
-		}
-	},
-
-	renderMoveArrows : function(){
-		if(this.state.showMoveArrows) {
-			return <>
-				<div className='arrow left'
-					style={{ left: this.state.currentDividerPos-4 }}
-					onClick={()=>this.setState({ moveSource: !this.state.moveSource })} >
-					<i className='fas fa-arrow-left' />
-				</div>
-				<div className='arrow right'
-					style={{ left: this.state.currentDividerPos-4 }}
-					onClick={()=>this.setState({ moveBrew: !this.state.moveBrew })} >
-					<i className='fas fa-arrow-right' />
-				</div>
-				<div id='scrollToggleDiv' className={this.state.liveScroll ? 'arrow lock' : 'arrow unlock'}
-					style={{ left: this.state.currentDividerPos-4 }}
-					onClick={this.liveScrollToggle} >
-					<i id='scrollToggle' className={this.state.liveScroll ? 'fas fa-lock' : 'fas fa-unlock'} />
-				</div>
-			</>;
-		}
-	},
-
-	renderDivider : function(){
-		return <>
-			{this.props.showDividerButtons && this.renderMoveArrows()}
-			<div className='divider' onPointerDown={this.handleDown} >
-				<div className='dots'>
-					<i className='fas fa-circle' />
-					<i className='fas fa-circle' />
-					<i className='fas fa-circle' />
-				</div>
+	const  renderMoveArrows = (showMoveArrows &&
+		<>
+			<div className='arrow left'
+				onClick={()=>setMoveSource(!moveSource)} >
+				<i className='fas fa-arrow-left' />
 			</div>
-		</>;
-	},
+			<div className='arrow right'
+				onClick={()=>setMoveBrew(!moveBrew)} >
+				<i className='fas fa-arrow-right' />
+			</div>
+			<div id='scrollToggleDiv' className={liveScroll ? 'arrow lock' : 'arrow unlock'}
+				onClick={liveScrollToggle} >
+				<i id='scrollToggle' className={liveScroll ? 'fas fa-lock' : 'fas fa-unlock'} />
+			</div>
+		</>
+	);

-	render : function(){
-		return <div className='splitPane' onPointerMove={this.handleMove} onPointerUp={this.handleUp}>
-			<Pane
-				width={this.state.currentDividerPos}
-			>
-				{React.cloneElement(this.props.children[0], {
-					...(this.props.showDividerButtons && {
-						moveBrew      : this.state.moveBrew,
-						moveSource    : this.state.moveSource,
-						liveScroll    : this.state.liveScroll,
-						setMoveArrows : this.setMoveArrows,
-					}),
-				})}
+	const renderDivider = (
+		<div className={`divider ${isDragging && 'dragging'}`} onPointerDown={handleDown}>
+			{showDividerButtons && renderMoveArrows}
+			<div className='dots'>
+				<i className='fas fa-circle' />
+				<i className='fas fa-circle' />
+				<i className='fas fa-circle' />
+			</div>
+		</div>
+	);
+
+	return (
+		<div className='splitPane' onPointerMove={handleMove} onPointerUp={handleUp}>
+			<Pane width={dividerPos} moveBrew={moveBrew} moveSource={moveSource} liveScroll={liveScroll} setMoveArrows={setShowMoveArrows}>
+				{props.children[0]}
 			</Pane>
-			{this.renderDivider()}
-			<Pane isDragging={this.state.isDragging}>{this.props.children[1]}</Pane>
-		</div>;
-	}
-});
+			{renderDivider}
+			<Pane isDragging={isDragging}>{props.children[1]}</Pane>
+		</div>
+	);
+};

-const Pane = createClass({
-	displayName     : 'Pane',
-	getDefaultProps : function() {
-		return {
-			width : null
-		};
-	},
-	render : function(){
-		let styles = {};
-		if(this.props.width){
-			styles = {
-				flex  : 'none',
-				width : `${this.props.width}px`
-			};
-		} else {
-			styles = {
-				pointerEvents : this.props.isDragging ? 'none' : 'auto' //Disable mouse capture in the rightmost pane; dragging into the iframe drops the divider otherwise
-			};
-		}
+const Pane = ({ width, children, isDragging, moveBrew, moveSource, liveScroll, setMoveArrows })=>{
+	const styles = width
+		? { flex: 'none', width: `${width}px` }
+		: { pointerEvents: isDragging ? 'none' : 'auto' }; //Disable mouse capture in the right pane; else dragging into the iframe drops the divider

-		return <div className={cx('pane', this.props.className)} style={styles}>
-			{this.props.children}
-		</div>;
-	}
-});
+	return (
+		<div className='pane' style={styles}>
+			{React.cloneElement(children, { moveBrew, moveSource, liveScroll, setMoveArrows })}
+		</div>
+	);
+};

 module.exports = SplitPane;
--- a/shared/naturalcrit/splitPane/splitPane.less
+++ b/shared/naturalcrit/splitPane/splitPane.less
@@ -10,7 +10,8 @@
 		overflow-x : hidden;
 		overflow-y : hidden;
 	}
-	>.divider {
+	.divider {
+		position         : relative;
 		display          : table;
 		width            : 15px;
 		height           : 100%;
@@ -29,10 +30,11 @@
 				color     : #666666;
 			}
 		}
-		&:hover { background-color : #999999; }
+		&:hover,&.dragging { background-color : #999999; }
 	}
 	.arrow {
 		position         : absolute;
+		left             : 50%;
 		z-index          : 999;
 		width            : 25px;
 		height           : 25px;
@@ -43,6 +45,7 @@
 		border           : 2px solid #BBBBBB;
 		border-radius    : 15px;
 		box-shadow       : 0 4px 5px #0000007F;
+		translate        : -50%;
 		&.left {
 			.tooltipLeft('Jump to location in Editor');
 			top : 30px;
--- a/shared/naturalcrit/styles/core.less
+++ b/shared/naturalcrit/styles/core.less
@@ -21,10 +21,7 @@ html,body, #reactRoot{
 *{
 	box-sizing : border-box;
 }
-button{
-	.button();
-}
-.button(@backgroundColor : @green){
+.colorButton(@backgroundColor : @green){
 	.animate(background-color);
 	display          : inline-block;
 	padding          : 0.6em 1.2em;
--- a/shared/naturalcrit/styles/reset.less
+++ b/shared/naturalcrit/styles/reset.less
@@ -1,4 +1,4 @@
-:where(html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video){
+:where(html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,button,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video){
  border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0
 }

@@ -25,3 +25,9 @@
 :where(table){
  border-collapse:collapse;border-spacing:0
 }
+
+:where(button) {
+	background-color: unset;
+	text-transform: unset;
+	color: unset;
+}