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

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -17,7 +17,8 @@ const MetadataEditor = createClass({
 				tags        : '',
 				published   : false,
 				authors     : [],
-				systems     : []
+				systems     : [],
+				renderer    : ''
 			},
 			onChange : ()=>{}
 		};
@@ -36,6 +37,12 @@ const MetadataEditor = createClass({
 		}
 		this.props.onChange(this.props.metadata);
 	},
+	handleRenderer : function(renderer, e){
+		if(e.target.checked){
+			this.props.metadata.renderer = renderer;
+		}
+		this.props.onChange(this.props.metadata);
+	},
 	handlePublish : function(val){
 		this.props.onChange(_.merge({}, this.props.metadata, {
 			published : val
@@ -83,11 +90,11 @@ const MetadataEditor = createClass({
 	renderPublish : function(){
 		if(this.props.metadata.published){
 			return <button className='unpublish' onClick={()=>this.handlePublish(false)}>
-				<i className='fa fa-ban' /> unpublish
+				<i className='fas fa-ban' /> unpublish
 			</button>;
 		} else {
 			return <button className='publish' onClick={()=>this.handlePublish(true)}>
-				<i className='fa fa-globe' /> publish
+				<i className='fas fa-globe' /> publish
 			</button>;
 		}
 	},
@@ -99,7 +106,7 @@ const MetadataEditor = createClass({
 			<label>delete</label>
 			<div className='value'>
 				<button className='publish' onClick={this.handleDelete}>
-					<i className='fa fa-trash' /> delete brew
+					<i className='fas fa-trash-alt' /> delete brew
 				</button>
 			</div>
 		</div>;
@@ -126,13 +133,42 @@ const MetadataEditor = createClass({
 			<div className='value'>
 				<a href={this.getRedditLink()} target='_blank' rel='noopener noreferrer'>
 					<button className='publish'>
-						<i className='fa fa-reddit-alien' /> share to reddit
+						<i className='fab fa-reddit-alien' /> share to reddit
 					</button>
 				</a>
 			</div>
 		</div>;
 	},
 
+	renderRenderOptions : function(){
+		if(!global.enable_v3) return;
+
+		return <div className='field systems'>
+			<label>Renderer</label>
+			<div className='value'>
+				<label key='legacy'>
+					<input
+						type='radio'
+						value = 'legacy'
+						name = 'renderer'
+						checked={!this.props.metadata.renderer}
+						onChange={(e)=>this.handleRenderer('', e)} />
+					Legacy
+				</label>
+
+				<label key='V3'>
+					<input
+						type='radio'
+						value = 'V3'
+						name = 'renderer'
+						checked={this.props.metadata.renderer === 'V3'}
+						onChange={(e)=>this.handleRenderer('V3', e)} />
+					V3
+				</label>
+			</div>
+		</div>;
+	},
+
 	render : function(){
 		return <div className='metadataEditor'>
 			<div className='field title'>
@@ -154,6 +190,8 @@ const MetadataEditor = createClass({
 			</div>
 			*/}
 
+			{this.renderAuthors()}
+
 			<div className='field systems'>
 				<label>systems</label>
 				<div className='value'>
@@ -161,7 +199,7 @@ const MetadataEditor = createClass({
 				</div>
 			</div>
 
-			{this.renderAuthors()}
+			{this.renderRenderOptions()}
 
 			<div className='field publish'>
 				<label>publish</label>