Merge branch 'naturalcrit:master' into Legacy-SpellList-Update

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -122,6 +122,11 @@ const BrewRenderer = createClass({
 		</div>;
 	},
 
+	renderStyle : function() {
+		if(!this.props.style) return;
+		return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${this.props.style} </style>` }} />;
+	},
+
 	renderPage : function(pageText, index){
 		if(this.props.renderer == 'legacy')
 			return <div className='phb page' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(pageText) }} key={index} />;
@@ -191,14 +196,14 @@ const BrewRenderer = createClass({
 						</div>
 
 						<div className='pages' ref='pages'>
-							{/* Apply CSS from Style tab */}
-
-							<div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${this.props.style} </style>` }} />
-
-							{/* Render pages from Markdown tab */}
+							{/* Apply CSS from Style tab and render pages from Markdown tab */}
 							{this.state.isMounted
-								? this.renderPages()
-							  : null}
+								&&
+								<>
+									{this.renderStyle()}
+									{this.renderPages()}
+								</>
+							}
 						</div>
 					</div>
 				</Frame>

client/homebrew/editor/editor.jsx

@@ -131,7 +131,7 @@ const Editor = createClass({
 
 					// Highlight inline spans {{content}}
 					if(line.includes('{{') && line.includes('}}')){
-						const regex = /{{(?:="[\w,\-. ]*"|[^"'\s])*\s*|}}/g;
+						const regex = /{{(?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])*\s*|}}/g;
 						let match;
 						let blockCount = 0;
 						while ((match = regex.exec(line)) != null) {
@@ -150,7 +150,7 @@ const Editor = createClass({
 						// Highlight block divs {{\n Content \n}}
 						let endCh = line.length+1;
 
-						const match = line.match(/^ *{{(?:="[\w,\-. ]*"|[^"'\s])*$|^ *}}$/);
+						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' });
@@ -170,7 +170,7 @@ const Editor = createClass({
 
 	//Called when there are changes to the editor's dimensions
 	update : function(){
-		this.refs.codeEditor.updateSize();
+		this.refs.codeEditor?.updateSize();
 	},
 
 	renderEditor : function(){

client/homebrew/editor/metadataEditor/metadataEditor.less

@@ -18,10 +18,11 @@
 			font-weight    : 800;
 			line-height    : 1.8em;
 			text-transform : uppercase;
-			flex-grow      : 0;
+			flex           : 0 0 auto;
 		}
 		&>.value{
-			flex-grow : 1;
+			flex           : 1 1 auto;
+			min-width      : 200px;
 		}
 	}
 	.description.field textarea.value{
@@ -38,15 +39,22 @@
 			font-size      : 0.7em;
 			font-weight    : 800;
 			user-select    : none;
+			white-space    : nowrap;
+			display        : inline-flex;
+			align-items    : center;
 		}
 		input{
 			vertical-align : middle;
 			cursor         : pointer;
+			margin         : 3px;
 		}
 	}
 	.publish.field .value{
 		position : relative;
 		margin-bottom: 15px;
+		button{
+			width:100%;
+		}
 		button.publish{
 			.button(@blueLight);
 		}
@@ -76,4 +84,4 @@
 		font-size: 0.8em;
 		line-height    : 1.5em;
 	}
-}
+}

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

@@ -33,7 +33,7 @@ module.exports = [
 			{
 				name : 'Horizontal Spacing',
 				icon : 'fas fa-arrows-alt-h',
-				gen  : ' {{width="100px"}} '
+				gen  : ' {{width:100px}} '
 			},
 			{
 				name : 'Wide Block',
@@ -51,35 +51,34 @@ module.exports = [
 				name : 'Image',
 				icon : 'fas fa-image',
 				gen  : dedent`
-					![cat warrior](https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg) {width="325px"}
+					![cat warrior](https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg) {width:325px}
 					Credit: Kyounghwan Kim`
 			},
 			{
 				name : 'Background Image',
 				icon : 'fas fa-tree',
-				gen  : `![homebrew mug](http://i.imgur.com/hMna6G0.png) {position="absolute",top="50px",right="30px",width="280px"}`
+				gen  : `![homebrew mug](http://i.imgur.com/hMna6G0.png) {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=` +
+					return `![]` +
+							`(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'/>`;
+							`&amp;size=100x100) {width:100px;mix-blend-mode:multiply}`;
 				}
 
 			},
 			{
 				name : 'Page Number',
 				icon : 'fas fa-bookmark',
-				gen  : '{{pageNumber\n1\n}}\n{{footnote\nPART 1 | FANCINESS\n}}\n\n'
+				gen  : '{{pageNumber 1}}\n{{footnote PART 1 | SECTION NAME}}\n\n'
 			},
 			{
 				name : 'Auto-incrementing Page Number',
 				icon : 'fas fa-sort-numeric-down',
-				gen  : '{{pageNumber,auto\n}}\n\n'
+				gen  : '{{pageNumber,auto}}\n{{footnote PART 1 | SECTION NAME}}\n\n'
 			},
 			{
 				name : 'Link to page',
@@ -257,7 +256,7 @@ module.exports = [
 				gen  : function(){
 					return dedent`
 						##### Typical Difficulty Classes
-						{{column-count="2"
+						{{column-count:2
 						| Task Difficulty | DC |
 						|:----------------|:--:|
 						| Very easy       | 5  |

client/homebrew/homebrew.jsx

@@ -44,12 +44,12 @@ const Homebrew = createClass({
 						<Route path='/edit/:id' component={(routeProps)=><EditPage id={routeProps.match.params.id} brew={this.props.brew} />}/>
 						<Route path='/share/:id' component={(routeProps)=><SharePage id={routeProps.match.params.id} brew={this.props.brew} />}/>
 						<Route path='/new/:id' component={(routeProps)=><NewPage id={routeProps.match.params.id} brew={this.props.brew} />}/>
-						<Route path='/new' exact component={(routeProps)=><NewPage/>}/>
+						<Route path='/new' exact component={(routeProps)=><NewPage />}/>
 						<Route path='/user/:username' component={(routeProps)=><UserPage username={routeProps.match.params.username} brews={this.props.brews} />}/>
-						<Route path='/print/:id' component={(routeProps)=><PrintPage brew={this.props.brew} query={queryString.parse(routeProps.location.search)} /> } />
-						<Route path='/print' exact component={(routeProps)=><PrintPage query={queryString.parse(routeProps.location.search)} /> } />
-						<Route path='/changelog' exact component={()=><SharePage brew={{ title: 'Changelog', text: this.props.changelog }} />}/>
-						<Route path='/' component={()=><HomePage welcomeText={this.props.welcomeText}/>}/>
+						<Route path='/print/:id' component={(routeProps)=><PrintPage brew={this.props.brew} query={queryString.parse(routeProps.location.search)} />}/>
+						<Route path='/print' exact component={(routeProps)=><PrintPage query={queryString.parse(routeProps.location.search)} />}/>
+						<Route path='/changelog' exact component={()=><SharePage brew={this.props.brew} />}/>
+						<Route path='/' component={()=><HomePage brew={this.props.brew} />}/>
 					</Switch>
 				</div>
 			</Router>

client/homebrew/pages/homePage/homePage.jsx

@@ -23,19 +23,15 @@ const HomePage = createClass({
 	getDefaultProps : function() {
 		return {
 			brew : {
-				text : ''
+				text : '',
 			},
-			welcomeText : '',
-			ver         : '0.0.0'
+			ver : '0.0.0'
 		};
-
-
 	},
 	getInitialState : function() {
 		return {
-			brew : {
-				text : this.props.welcomeText
-			}
+			brew        : this.props.brew,
+			welcomeText : this.props.brew.text
 		};
 	},
 	handleSave : function(){
@@ -89,7 +85,7 @@ const HomePage = createClass({
 				</SplitPane>
 			</div>
 
-			<div className={cx('floatingSaveButton', { show: this.props.welcomeText != this.state.brew.text })} onClick={this.handleSave}>
+			<div className={cx('floatingSaveButton', { show: this.state.welcomeText != this.state.brew.text })} onClick={this.handleSave}>
 				Save current <i className='fas fa-save' />
 			</div>
 

client/homebrew/pages/newPage/newPage.jsx

@@ -69,16 +69,15 @@ const NewPage = createClass({
 		const brewStorage  = localStorage.getItem(BREWKEY);
 		const styleStorage = localStorage.getItem(STYLEKEY);
 
+		const brew = this.state.brew;
+
 		if(!this.props.brew.text || !this.props.brew.style){
-			this.setState({
-				brew : {
-					text  : this.props.brew.text  || (brewStorage  ?? ''),
-					style : this.props.brew.style || (styleStorage ?? undefined)
-				}
-			});
+			brew.text = this.props.brew.text  || (brewStorage  ?? '');
+			brew.style = this.props.brew.style || (styleStorage ?? undefined);
 		}
 
 		this.setState((prevState)=>({
+			brew       : brew,
 			htmlErrors : Markdown.validate(prevState.brew.text)
 		}));