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/editor.jsx

@@ -23,7 +23,8 @@ const Editor = createClass({
 
 			metadata         : {},
 			onMetadataChange : ()=>{},
-			showMetaButton   : true
+			showMetaButton   : true,
+			renderer         : ''
 		};
 	},
 	getInitialState : function() {
@@ -38,7 +39,7 @@ const Editor = createClass({
 
 	componentDidMount : function() {
 		this.updateEditorSize();
-		this.highlightPageLines();
+		this.highlightCustomMarkdown();
 		window.addEventListener('resize', this.updateEditorSize);
 	},
 	componentWillUnmount : function() {
@@ -78,15 +79,59 @@ const Editor = createClass({
 		}, 1);
 	},
 
-	highlightPageLines : function(){
+	highlightCustomMarkdown : function(){
 		if(!this.refs.codeEditor) return;
 		const codeMirror = this.refs.codeEditor.codeMirror;
 
+		//reset custom text styles
+		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)=>{
-			if(line.indexOf('\\page') !== -1){
+
+			//reset custom line styles
+			codeMirror.removeLineClass(lineNumber, 'background');
+			codeMirror.removeLineClass(lineNumber, 'text');
+
+			if(line.startsWith('\\page')){
 				codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
 				r.push(lineNumber);
 			}
+
+			// New Codemirror styling for V3 renderer
+			if(this.props.renderer == 'V3') {
+				if(line.startsWith('\\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' });
+				}
+
+				if(line.includes('{{') && line.includes('}}')){
+					const regex = /{{(?:[\w,#-]|="[\w, ]*")*\s*|}}/g;
+					let match;
+					let blockCount = 0;
+					while ((match = regex.exec(line)) != null) {
+						if(match[0].startsWith('{')) {
+							blockCount += 1;
+						} else {
+							blockCount -= 1;
+						}
+						if(blockCount < 0) {
+							blockCount = 0;
+							continue;
+						}
+						codeMirror.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: 'inline-block' });
+					}
+				}
+			}
+
 			return r;
 		}, []);
 		return lineNumbers;
@@ -112,7 +157,7 @@ const Editor = createClass({
 	},
 
 	render : function(){
-		this.highlightPageLines();
+		this.highlightCustomMarkdown();
 		return (
 			<div className='editor' ref='main'>
 				<SnippetBar
@@ -120,7 +165,8 @@ const Editor = createClass({
 					onInject={this.handleInject}
 					onToggle={this.handgleToggle}
 					showmeta={this.state.showMetadataEditor}
-					showMetaButton={this.props.showMetaButton} />
+					showMetaButton={this.props.showMetaButton}
+					renderer={this.props.renderer} />
 				{this.renderMetadataEditor()}
 				<CodeEditor
 					ref='codeEditor'
@@ -132,7 +178,7 @@ const Editor = createClass({
 
 				{/*
 				<div className='brewJump' onClick={this.brewJump}>
-					<i className='fa fa-arrow-right' />
+					<i className='fas fa-arrow-right' />
 				</div>
 				*/}
 			</div>