Merge branch 'master' into UpdateSolberaImitationFont

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>
 

client/homebrew/pages/newPage/newPage.jsx

@@ -22,7 +22,8 @@ const KEY = 'homebrewery-new';
 const NewPage = createClass({
 	getInitialState : function() {
 		return {
-			metadata : {
+			brew : {
+				text        : '',
 				gDrive      : false,
 				title       : '',
 				description : '',
@@ -32,7 +33,6 @@ const NewPage = createClass({
 				systems     : []
 			},
 
-			text       : '',
 			isSaving   : false,
 			saveGoogle : (global.account && global.account.googleId ? true : false),
 			errors     : []
@@ -43,7 +43,7 @@ const NewPage = createClass({
 		const storage = localStorage.getItem(KEY);
 		if(storage){
 			this.setState({
-				text : storage
+				brew : { text: storage }
 			});
 		}
 		document.addEventListener('keydown', this.handleControlKeys);
@@ -70,13 +70,13 @@ const NewPage = createClass({
 
 	handleMetadataChange : function(metadata){
 		this.setState({
-			metadata : _.merge({}, this.state.metadata, metadata)
+			brew : _.merge({}, this.state.brew, metadata)
 		});
 	},
 
 	handleTextChange : function(text){
 		this.setState({
-			text   : text,
+			brew   : { text: text },
 			errors : Markdown.validate(text)
 		});
 		localStorage.setItem(KEY, text);
@@ -92,7 +92,7 @@ const NewPage = createClass({
 		if(this.state.saveGoogle) {
 			const res = await request
 			.post('/api/newGoogle/')
-			.send(_.merge({}, this.state.metadata, { text: this.state.text }))
+			.send(this.state.brew)
 			.catch((err)=>{
 				console.log(err.status === 401
 					? 'Not signed in!'
@@ -106,9 +106,7 @@ const NewPage = createClass({
 			window.location = `/edit/${brew.googleId}${brew.editId}`;
 		} else {
 			request.post('/api')
-			.send(_.merge({}, this.state.metadata, {
-				text : this.state.text
-			}))
+			.send(this.state.brew)
 			.end((err, res)=>{
 				if(err){
 					this.setState({
@@ -122,7 +120,6 @@ const NewPage = createClass({
 				window.location = `/edit/${brew.editId}`;
 			});
 		}
-
 	},
 
 	renderSaveButton : function(){
@@ -138,7 +135,7 @@ const NewPage = createClass({
 	},
 
 	print : function(){
-		localStorage.setItem('print', this.state.text);
+		localStorage.setItem('print', this.state.brew.text);
 		window.open('/print?dialog=true&local=print', '_blank');
 	},
 
@@ -152,7 +149,7 @@ const NewPage = createClass({
 		return <Navbar>
 
 			<Nav.section>
-				<Nav.item className='brewTitle'>{this.state.metadata.title}</Nav.item>
+				<Nav.item className='brewTitle'>{this.state.brew.title}</Nav.item>
 			</Nav.section>
 
 			<Nav.section>
@@ -172,12 +169,11 @@ const NewPage = createClass({
 				<SplitPane onDragFinish={this.handleSplitMove} ref='pane'>
 					<Editor
 						ref='editor'
-						value={this.state.text}
+						brew={this.state.brew}
 						onChange={this.handleTextChange}
-						metadata={this.state.metadata}
 						onMetadataChange={this.handleMetadataChange}
 					/>
-					<BrewRenderer text={this.state.text} errors={this.state.errors} />
+					<BrewRenderer text={this.state.brew.text} errors={this.state.errors} />
 				</SplitPane>
 			</div>
 		</div>;

client/homebrew/pages/printPage/printPage.jsx

@@ -4,6 +4,7 @@ const createClass = require('create-react-class');
 const _     = require('lodash');
 const cx    = require('classnames');
 const { Meta } = require('vitreum/headtags');
+const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
 const Markdown = require('naturalcrit/markdown.js');
 
 const PrintPage = createClass({
@@ -11,7 +12,8 @@ const PrintPage = createClass({
 		return {
 			query : {},
 			brew  : {
-				text : '',
+				text     : '',
+				renderer : 'legacy'
 			}
 		};
 	},
@@ -33,13 +35,24 @@ const PrintPage = createClass({
 	},
 
 	renderPages : function(){
-		return _.map(this.state.brewText.split('\\page'), (page, index)=>{
-			return <div
-				className='phb'
-				id={`p${index + 1}`}
-				dangerouslySetInnerHTML={{ __html: Markdown.render(page) }}
-				key={index} />;
-		});
+		if(this.props.brew.renderer == 'legacy') {
+			return _.map(this.state.brewText.split('\\page'), (page, index)=>{
+				return <div
+					className='phb'
+					id={`p${index + 1}`}
+					dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(page) }}
+					key={index} />;
+			});
+		} else {
+			return _.map(this.state.brewText.split(/^\\page/gm), (page, index)=>{
+				return <div
+					className='phb3'
+					id={`p${index + 1}`}
+					dangerouslySetInnerHTML={{ __html: Markdown.render(page) }}
+					key={index} />;
+			});
+		}
+
 	},
 
 	render : function(){

client/homebrew/phbStyle/phb.style.less

@@ -60,10 +60,10 @@ body {
 	// *****************************/
 	p{
 		overflow-wrap : break-word;
-		padding-bottom : 0.8em;
+		padding-top : 0em;
 		line-height    : 1.3em;
 		&+p{
-			margin-top : -0.8em;
+			padding-top : 0em;
 		}
 	}
 	ul{
@@ -480,3 +480,38 @@ body {
 		margin-bottom : 10px;
 	}
 }
+
+//*****************************
+// *    MUSTACHE DIVS/SPANS
+// *****************************/
+.phb3 {
+	.inline-block {
+		display : block;
+	}
+}
+
+//*****************************
+// *    DEFINITION LISTS
+// *****************************/
+.phb3 {
+	// dl {
+  // 	margin-top: 10px;
+  // }
+  dt {
+    float: left;
+    //clear: left;  //Doesn't seem necessary
+    margin-right: 5px;
+  }
+  // dd {
+  //   margin-left: 0px;
+  // }
+}
+
+//*****************************
+// *    BLANK LINE
+// *****************************/
+.phb3 {
+	.blank {
+		height: 0.8em;
+	}
+}