v2.11.0

.eslintrc.js

@@ -1,7 +1,7 @@
 module.exports = {
 	root          : true,
 	parserOptions : {
-		ecmaVersion  : 9,
+		ecmaVersion  : 2021,
 		sourceType   : 'module',
 		ecmaFeatures : {
 			jsx : true

client/homebrew/editor/editor.jsx

@@ -18,10 +18,11 @@ const SNIPPETBAR_HEIGHT = 25;
 const Editor = createClass({
 	getDefaultProps : function() {
 		return {
-			value    : '',
+			brew : {
+				text : ''
+			},
 			onChange : ()=>{},
 
-			metadata         : {},
 			onMetadataChange : ()=>{},
 			showMetaButton   : true,
 			renderer         : 'legacy'
@@ -59,7 +60,7 @@ const Editor = createClass({
 		this.cursorPosition = curpos;
 	},
 	handleInject : function(injectText){
-		const lines = this.props.value.split('\n');
+		const lines = this.props.brew.text.split('\n');
 		lines[this.cursorPosition.line] = splice(lines[this.cursorPosition.line], this.cursorPosition.ch, injectText);
 
 		this.handleTextChange(lines.join('\n'));
@@ -72,7 +73,7 @@ const Editor = createClass({
 	},
 
 	getCurrentPage : function(){
-		const lines = this.props.value.split('\n').slice(0, this.cursorPosition.line + 1);
+		const lines = this.props.brew.text.split('\n').slice(0, this.cursorPosition.line + 1);
 		return _.reduce(lines, (r, line)=>{
 			if(line.indexOf('\\page') !== -1) r++;
 			return r;
@@ -87,7 +88,7 @@ const Editor = createClass({
 		const customHighlights = codeMirror.getAllMarks();
 		for (let i=0;i<customHighlights.length;i++) customHighlights[i].clear();
 
-		const lineNumbers = _.reduce(this.props.value.split('\n'), (r, line, lineNumber)=>{
+		const lineNumbers = _.reduce(this.props.brew.text.split('\n'), (r, line, lineNumber)=>{
 
 			//reset custom line styles
 			codeMirror.removeLineClass(lineNumber, 'background');
@@ -108,21 +109,14 @@ const Editor = createClass({
 					r.push(lineNumber);
 				}
 
-				if(line.startsWith('\\column')){
+				if(line.match(/^\\column$/)){
 					codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
 					r.push(lineNumber);
 				}
 
-				if(line.startsWith('{{') || line.startsWith('}}')){
-					let endCh = line.length+1;
-					const match = line.match(/{{(?:[\w,#-]|="[\w, ]*")*\s*|}}/);
-					if(match)
-						endCh = match.index+match[0].length;
-					codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
-				}
-
+				// Highlight inline spans {{content}}
 				if(line.includes('{{') && line.includes('}}')){
-					const regex = /{{(?:[\w,#-]|="[\w, ]*")*\s*|}}/g;
+					const regex = /{{(?:="[\w,\-. ]*"|[^"'\s])*\s*|}}/g;
 					let match;
 					let blockCount = 0;
 					while ((match = regex.exec(line)) != null) {
@@ -137,6 +131,14 @@ const Editor = createClass({
 						}
 						codeMirror.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: 'inline-block' });
 					}
+				} else if(line.trimLeft().startsWith('{{') || line.trimLeft().startsWith('}}')){
+					// Highlight block divs {{\n Content \n}}
+					let endCh = line.length+1;
+
+					const match = line.match(/^ *{{(?:="[\w,\-. ]*"|[^"'\s])*$|^ *}}$/);
+					if(match)
+						endCh = match.index+match[0].length;
+					codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
 				}
 			}
 
@@ -159,7 +161,7 @@ const Editor = createClass({
 	renderMetadataEditor : function(){
 		if(!this.state.showMetadataEditor) return;
 		return <MetadataEditor
-			metadata={this.props.metadata}
+			metadata={this.props.brew}
 			onChange={this.props.onMetadataChange}
 		/>;
 	},
@@ -169,7 +171,7 @@ const Editor = createClass({
 		return (
 			<div className='editor' ref='main'>
 				<SnippetBar
-					brew={this.props.value}
+					brew={this.props.brew}
 					onInject={this.handleInject}
 					onToggle={this.handgleToggle}
 					showmeta={this.state.showMetadataEditor}
@@ -180,7 +182,7 @@ const Editor = createClass({
 					ref='codeEditor'
 					wrap={true}
 					language='gfm'
-					value={this.props.value}
+					value={this.props.brew.text}
 					onChange={this.handleTextChange}
 					onCursorActivity={this.handleCursorActivty} />
 

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -50,7 +50,7 @@ const MetadataEditor = createClass({
 	},
 
 	handleDelete : function(){
-		if(this.props.metadata.authors.length <= 1){
+		if(this.props.metadata.authors && this.props.metadata.authors.length <= 1){
 			if(!confirm('Are you sure you want to delete this brew? Because you are the only owner of this brew, the document will be deleted permanently.')) return;
 			if(!confirm('Are you REALLY sure? You will not be able to recover the document.')) return;
 		} else {
@@ -114,7 +114,7 @@ const MetadataEditor = createClass({
 
 	renderAuthors : function(){
 		let text = 'None.';
-		if(this.props.metadata.authors.length){
+		if(this.props.metadata.authors && this.props.metadata.authors.length){
 			text = this.props.metadata.authors.join(', ');
 		}
 		return <div className='field authors'>

client/homebrew/editor/snippetbar/snippetbar.jsx

@@ -16,7 +16,7 @@ const execute = function(val, brew){
 const Snippetbar = createClass({
 	getDefaultProps : function() {
 		return {
-			brew           : '',
+			brew           : {},
 			onInject       : ()=>{},
 			onToggle       : ()=>{},
 			showmeta       : false,
@@ -80,7 +80,7 @@ module.exports = Snippetbar;
 const SnippetGroup = createClass({
 	getDefaultProps : function() {
 		return {
-			brew           : '',
+			brew           : {},
 			groupName      : '',
 			icon           : 'fas fa-rocket',
 			snippets       : [],

client/homebrew/editor/snippetbar/snippets/magic.gen.js

@@ -47,6 +47,12 @@ const spellNames = [
 	'Ultimate Rite of the Confetti Angel',
 	'Ultimate Ritual of Mouthwash',
 ];
+const itemNames = [
+	'Doorknob of Niceness',
+	'Paper Armor of Folding',
+	'Mixtape of Sadness',
+	'Staff of Endless Confetti',
+];
 
 module.exports = {
 
@@ -87,5 +93,17 @@ module.exports = {
 			'A *continual flame* can be covered or hidden but not smothered or quenched.',
 			'\n\n\n'
 		].join('\n');
+	},
+
+	item : function() {
+		return [
+		  `#### ${_.sample(itemNames)}`,
+			`*${_.sample(['Wondrous item', 'Armor', 'Weapon'])}, ${_.sample(['Common', 'Uncommon', 'Rare', 'Very Rare', 'Legendary', 'Artifact'])} (requires attunement)*`,
+			`:`,
+			`This knob is pretty nice. When attached to a door, it allows a user to`,
+			`open that door with the strength of the nearest animal. For example, if`,
+			`there is a cow nearby, the user will have the "strength of a cow" while`,
+			`opening this door.`
+		].join('\n');
 	}
-};
+};

client/homebrew/editor/snippetbar/snippets/snippets.js

@@ -41,8 +41,21 @@ module.exports = [
 			},
 			{
 				name : 'Background Image',
-				icon : 'fas fa-times-circle',
-				gen  : ''
+				icon : 'fas fa-tree',
+				gen  : `<img src='http://i.imgur.com/hMna6G0.png' ` +
+							`style='position:absolute; top:50px; right:30px; width:280px'/>`
+			},
+			{
+				name : 'QR Code',
+				icon : 'fas fa-qrcode',
+				gen  : (brew)=>{
+					return `<img ` +
+							`src='https://api.qrserver.com/v1/create-qr-code/?data=` +
+							`https://homebrewery.naturalcrit.com/share/${brew.shareId}` +
+							`&amp;size=100x100' ` +
+							`style='width:100px;mix-blend-mode:multiply'/>`;
+				}
+
 			},
 			{
 				name : 'Page Number',
@@ -130,6 +143,11 @@ module.exports = [
 				icon : 'fas fa-file-word',
 				gen  : CoverPageGen,
 			},
+			{
+				name : 'Magic Item',
+				icon : 'fas fa-hat-wizard',
+				gen  : MagicGen.item,
+			},
 		]
 	},
 

client/homebrew/editor/snippetbar/snippets/tableOfContents.gen.js

@@ -48,7 +48,7 @@ const getTOC = (pages)=>{
 };
 
 module.exports = function(brew){
-	const pages = brew.split('\\page');
+	const pages = brew.text.split('\\page');
 	const TOC = getTOC(pages);
 	const markdown = _.reduce(TOC, (r, g1, idx1)=>{
 		r.push(`- **[${idx1 + 1} ${g1.title}](#p${g1.page})**`);
@@ -69,4 +69,4 @@ module.exports = function(brew){
 ##### Table Of Contents
 ${markdown}
 </div>\n`;
-};
+};

client/homebrew/editor/snippetbar/snippetsLegacy/tableOfContents.gen.js

@@ -48,7 +48,7 @@ const getTOC = (pages)=>{
 };
 
 module.exports = function(brew){
-	const pages = brew.split('\\page');
+	const pages = brew.text.split('\\page');
 	const TOC = getTOC(pages);
 	const markdown = _.reduce(TOC, (r, g1, idx1)=>{
 		r.push(`- **[${idx1 + 1} ${g1.title}](#p${g1.page})**`);

client/homebrew/pages/editPage/editPage.jsx

@@ -392,9 +392,8 @@ const EditPage = createClass({
 				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
 					<Editor
 						ref='editor'
-						value={this.state.brew.text}
+						brew={this.state.brew}
 						onChange={this.handleTextChange}
-						metadata={this.state.brew}
 						onMetadataChange={this.handleMetadataChange}
 						renderer={this.state.brew.renderer}
 					/>

client/homebrew/pages/homePage/homePage.jsx

@@ -21,6 +21,9 @@ const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx');
 const HomePage = createClass({
 	getDefaultProps : function() {
 		return {
+			brew : {
+				text : ''
+			},
 			welcomeText : '',
 			ver         : '0.0.0'
 		};
@@ -29,13 +32,15 @@ const HomePage = createClass({
 	},
 	getInitialState : function() {
 		return {
-			text : this.props.welcomeText
+			brew : {
+				text : this.props.welcomeText
+			}
 		};
 	},
 	handleSave : function(){
 		request.post('/api')
 			.send({
-				text : this.state.text
+				text : this.state.brew.text
 			})
 			.end((err, res)=>{
 				if(err) return;
@@ -48,7 +53,7 @@ const HomePage = createClass({
 	},
 	handleTextChange : function(text){
 		this.setState({
-			text : text
+			brew : { text: text }
 		});
 	},
 	renderNavbar : function(){
@@ -71,12 +76,12 @@ const HomePage = createClass({
 
 			<div className='content'>
 				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
-					<Editor value={this.state.text} onChange={this.handleTextChange} showMetaButton={false} ref='editor'/>
-					<BrewRenderer text={this.state.text} />
+					<Editor brew={this.state.brew} onChange={this.handleTextChange} showMetaButton={false} ref='editor'/>
+					<BrewRenderer text={this.state.brew.text} />
 				</SplitPane>
 			</div>
 
-			<div className={cx('floatingSaveButton', { show: this.props.welcomeText != this.state.text })} onClick={this.handleSave}>
+			<div className={cx('floatingSaveButton', { show: this.props.welcomeText != this.state.brew.text })} onClick={this.handleSave}>
 				Save current <i className='fas fa-save' />
 			</div>