Update Production (#1249)

* Legacy renderer (#1184)

* Include two versions of Marked.js

* Include two versions of Marked.js

* Working two different render pipelines

Adds stylesheet "styleLegacy.less"
Adds markdownHandler "markdownLegacy.js"
The BrewRenderer will switch between these and the new pipeline dependent on the "version" prop passed in.

* Mustache-style div blocks

* Legacy snippets & columnbreak

* Codemirror styling for Div Blocks

* Lint

* Codemirror highlights for inline Divs as well

These will turn red `{{class Content}}`

Multi-line divs will turn purple

```
{{class,class2
content
}}
```

No real need for these to be different colors. Just for testing.

* More lint

* Update dependencies.

* Adding Button to switch render pipelines

* Update Marked.js

* Popup alert to refresh page when renderer changed

* Don't compress files in Development (very slow)

* Block DIV or inline Span depending on {{ placement

* \column emits a Div instead of Span

* Allow share page to use new renderer

* {{ divs no longer need empty lines. Spans work in lists.

* Typo

* Typo

* Enforce \page must be at start of line. Code cleanup.

* Inject newlines after/before {{/}} to avoid needing blank lines

* Fixes issues with tables.

* Remove console.log

* Fix spacing issue for Spans

* Move things from Brewrenderer to Markdown

Try to keep all custom text fiddling in one spot.

* Rename variables

* Update Font-Awesome to v5.15. Fix style issues on popups.

* Update {{ Divs/Spans, Fix nested hilighting

* Fixed Spans/divs with no tags or just commas

* Use blacklist for {{ to allow more characters

* Update package-lock.json

* Update all icons to Font-awesome 5

* V3 hidden behind config variable

Add "globalThis.enable_v3 = true" in the console to enable.

* lint

* Legacy renderer (#1229)

* Include two versions of Marked.js

* Include two versions of Marked.js

* Working two different render pipelines

Adds stylesheet "styleLegacy.less"
Adds markdownHandler "markdownLegacy.js"
The BrewRenderer will switch between these and the new pipeline dependent on the "version" prop passed in.

* Mustache-style div blocks

* Legacy snippets & columnbreak

* Codemirror styling for Div Blocks

* Lint

* Codemirror highlights for inline Divs as well

These will turn red `{{class Content}}`

Multi-line divs will turn purple

```
{{class,class2
content
}}
```

No real need for these to be different colors. Just for testing.

* More lint

* Update dependencies.

* Adding Button to switch render pipelines

* Update Marked.js

* Popup alert to refresh page when renderer changed

* Don't compress files in Development (very slow)

* Block DIV or inline Span depending on {{ placement

* \column emits a Div instead of Span

* Allow share page to use new renderer

* {{ divs no longer need empty lines. Spans work in lists.

* Typo

* Typo

* Enforce \page must be at start of line. Code cleanup.

* Inject newlines after/before {{/}} to avoid needing blank lines

* Fixes issues with tables.

* Remove console.log

* Fix spacing issue for Spans

* Move things from Brewrenderer to Markdown

Try to keep all custom text fiddling in one spot.

* Rename variables

* Update Font-Awesome to v5.15. Fix style issues on popups.

* Update {{ Divs/Spans, Fix nested hilighting

* Fixed Spans/divs with no tags or just commas

* Use blacklist for {{ to allow more characters

* Update package-lock.json

* Update all icons to Font-awesome 5

* V3 hidden behind config variable

Add "globalThis.enable_v3 = true" in the console to enable.

* lint

* Give user styles higher priority to still allow overrides

* Apply style priority to *all* user styles

* Change .legacy .v3 to .phb, .phb3

* Revert accidental color change

* Fix brew styles overwriting each other. (#1230)

* Fix /page not working in legacy mode. (#1233)

* Fix brew styles overwriting each other.

* Word wrapping, start fixing spacing on Title letter

* Fix \page in legacy brews when not at line start

* Default 'legacy' if not set. Auto-change styles.

* Fix brew styles overwriting each other.

* Word wrapping, start fixing spacing on Title letter

* Fix \page in legacy brews when not at line start

* Fix Page Padding

* Set 'legacy' as default value if not set in brew saved file.

* Apply Legacy\v3 renderer to print page (#1235)

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -4,6 +4,7 @@ const createClass = require('create-react-class');
 const _ = require('lodash');
 const cx = require('classnames');
 
+const MarkdownLegacy = require('naturalcrit/markdownLegacy.js');
 const Markdown = require('naturalcrit/markdown.js');
 const ErrorBar = require('./errorBar/errorBar.jsx');
 
@@ -18,12 +19,18 @@ const PPR_THRESHOLD = 50;
 const BrewRenderer = createClass({
 	getDefaultProps : function() {
 		return {
-			text   : '',
-			errors : []
+			text     : '',
+			renderer : 'legacy',
+			errors   : []
 		};
 	},
 	getInitialState : function() {
-		const pages = this.props.text.split('\\page');
+		let pages;
+		if(this.props.renderer == 'legacy') {
+			pages = this.props.text.split('\\page');
+		} else {
+			pages = this.props.text.split(/^\\page/gm);
+		}
 
 		return {
 			viewablePageNumber : 0,
@@ -34,7 +41,7 @@ const BrewRenderer = createClass({
 			usePPR         : pages.length >= PPR_THRESHOLD,
 			visibility     : 'hidden',
 			initialContent : `<!DOCTYPE html><html><head>
-												<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
+												<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
 												<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
 												<link href='/homebrew/bundle.css' rel='stylesheet' />
 												<base target=_blank>
@@ -48,12 +55,19 @@ const BrewRenderer = createClass({
 		window.removeEventListener('resize', this.updateSize);
 	},
 
-	componentWillReceiveProps : function(nextProps) {
-		const pages = nextProps.text.split('\\page');
-		this.setState({
-			pages  : pages,
-			usePPR : pages.length >= PPR_THRESHOLD
-		});
+	componentDidUpdate : function(prevProps) {
+		if(prevProps.text !== this.props.text) {
+			let pages;
+			if(this.props.renderer == 'legacy') {
+				pages = this.props.text.split('\\page');
+			} else {
+				pages = this.props.text.split(/^\\page/gm);
+			}
+			this.setState({
+				pages  : pages,
+				usePPR : pages.length >= PPR_THRESHOLD
+			});
+		}
 	},
 
 	updateSize : function() {
@@ -103,12 +117,15 @@ const BrewRenderer = createClass({
 
 	renderDummyPage : function(index){
 		return <div className='phb' id={`p${index + 1}`} key={index}>
-			<i className='fa fa-spinner fa-spin' />
+			<i className='fas fa-spinner fa-spin' />
 		</div>;
 	},
 
 	renderPage : function(pageText, index){
-		return <div className='phb' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} key={index} />;
+		if(this.props.renderer == 'legacy')
+			return <div className='phb' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(pageText) }} key={index} />;
+		else
+			return <div className='phb3' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} key={index} />;
 	},
 
 	renderPages : function(){
@@ -159,7 +176,7 @@ const BrewRenderer = createClass({
 	        : null}
 
 				<Frame initialContent={this.state.initialContent} style={{ width: '100%', height: '100%', visibility: this.state.visibility }} contentDidMount={this.frameDidMount}>
-					<div className='brewRenderer'
+					<div className={'brewRenderer'}
 						onScroll={this.handleScroll}
 						style={{ height: this.state.height }}>
 

client/homebrew/brewRenderer/brewRenderer.less

@@ -1,8 +1,7 @@
+@import (multiple, less) 'shared/naturalcrit/styles/reset.less';
+& {@import (multiple, less) './client/homebrew/phbStyle/phb.styleLegacy.less';} //&{} keeps internal variables locally-scoped
+& {@import (multiple, less) './client/homebrew/phbStyle/phb.style.less';}
 
-@import (less) './client/homebrew/phbStyle/phb.style.less';
-.pane{
-	position : relative;
-}
 .brewRenderer{
 	will-change : transform;
 	overflow-y  : scroll;
@@ -14,8 +13,17 @@
 			margin-left   : auto;
 			box-shadow    : 1px 4px 14px #000;
 		}
+		&>.phb3{
+			margin-right  : auto;
+			margin-bottom : 30px;
+			margin-left   : auto;
+			box-shadow    : 1px 4px 14px #000;
+		}
 	}
 }
+.pane{
+	position : relative;
+}
 .pageInfo{
 	position         : absolute;
 	right            : 17px;
@@ -37,4 +45,4 @@
 	font-size        : 10px;
 	font-weight      : 800;
 	color            : white;
-}
+}

client/homebrew/brewRenderer/errorBar/errorBar.jsx

@@ -62,7 +62,7 @@ const ErrorBar = createClass({
 		if(!this.props.errors.length) return null;
 
 		return <div className='errorBar'>
-			<i className='fa fa-exclamation-triangle' />
+			<i className='fas fa-exclamation-triangle' />
 			<h3> There are HTML errors in your markup</h3>
 			<small>If these aren't fixed your brew will not render properly when you print it to PDF or share it</small>
 			{this.renderErrors()}

client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx

@@ -60,8 +60,8 @@ const NotificationPopup = createClass({
 		if(_.isEmpty(this.state.notifications)) return null;
 
 		return <div className='notificationPopup'>
-			<i className='fa fa-times dismiss' onClick={this.dismiss}/>
-			<i className='fa fa-info-circle info' />
+			<i className='fas fa-times dismiss' onClick={this.dismiss}/>
+			<i className='fas fa-info-circle info' />
 			<h3>Notice</h3>
 			<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
 			<ul>{_.values(this.state.notifications)}</ul>