Getting both renderers to play nice

shared/depricated/brewRendererOld/brewRendererOld.jsx

@@ -2,7 +2,7 @@ const React = require('react');
 const _ = require('lodash');
 const cx = require('classnames');
 
-const Markdown = require('homebrewery/markdown.js');
+const Markdown = require('depricated/markdown.old.js');
 const ErrorBar = require('./errorBar/errorBar.jsx');
 
 const RenderWarnings = require('homebrewery/renderWarnings/renderWarnings.jsx')
@@ -12,7 +12,7 @@ const Store = require('homebrewery/brew.store.js');
 const PAGE_HEIGHT = 1056;
 const PPR_THRESHOLD = 50;
 
-const BrewRenderer = React.createClass({
+const OLD_BrewRenderer = React.createClass({
 	getDefaultProps: function() {
 		return {
 			value : '',
@@ -58,8 +58,9 @@ const BrewRenderer = React.createClass({
 			if(this.refs.pages && this.refs.pages.firstChild) this.pageHeight = this.refs.pages.firstChild.clientHeight;
 		}, 1);
 
+		const parentNode = document.querySelector('.page .content');
 		this.setState({
-			height : this.refs.main.parentNode.clientHeight,
+			height : parentNode.clientHeight,
 			isMounted : true
 		});
 	},
@@ -99,7 +100,7 @@ const BrewRenderer = React.createClass({
 	},
 
 	renderDummyPage : function(index){
-		return <div className='phb' id={`p${index + 1}`} key={index}>
+		return <div className='phb old' id={`p${index + 1}`} key={index}>
 			<i className='fa fa-spinner fa-spin' />
 		</div>
 	},
@@ -125,12 +126,8 @@ const BrewRenderer = React.createClass({
 		return this.lastRender;
 	},
 
-	renderStyle : function(){
-
-	},
-
 	render : function(){
-		return <div className='brewRenderer'
+		return <div className='brewRendererOld'
 			onScroll={this.handleScroll}
 			ref='main'
 			style={{height : this.state.height}}>
@@ -138,8 +135,6 @@ const BrewRenderer = React.createClass({
 			<ErrorBar errors={this.props.errors} />
 			<RenderWarnings />
 
-
-			<style>{this.props.style}</style>
 			<div className='pages' ref='pages'>
 				{this.renderPages()}
 			</div>
@@ -149,4 +144,4 @@ const BrewRenderer = React.createClass({
 	}
 });
 
-module.exports = BrewRenderer;
+module.exports = OLD_BrewRenderer;

shared/depricated/brewRendererOld/brewRendererOld.less

@@ -1,9 +1,10 @@
 
 @import (less) './client/homebrew/phbStyle/phb.style.less';
+//@import (less) './shared/depricated/phb.old.css';
 .pane{
 	position : relative;
 }
-.brewRenderer{
+.brewRendererOld{
 	overflow-y : scroll;
 	.pageInfo{
 		position         : absolute;

shared/homebrewery/brew.store.js

@@ -1,7 +1,7 @@
 const _ = require('lodash');
 const flux = require('pico-flux');
 
-const Markdown = require('homebrewery/markdown.new.js');
+const Markdown = require('homebrewery/markdown.js');
 
 let State = {
 	version : '0.0.0',
@@ -32,6 +32,8 @@ const Store = flux.createStore({
 	},
 	UPDATE_BREW_CODE : (brewCode) => {
 		State.brew.text = brewCode;
+
+		//TODO: Remove?
 		State.errors = Markdown.validate(brewCode);
 	},
 	UPDATE_BREW_STYLE : (style) => {

shared/homebrewery/brewRenderer/brewRenderer.jsx

@@ -2,6 +2,8 @@ const React = require('react');
 const _ = require('lodash');
 const cx = require('classnames');
 
+const OldBrewRenderer = require('depricated/brewRendererOld/brewRendererOld.jsx');
+
 const Markdown = require('homebrewery/markdown.js');
 const ErrorBar = require('./errorBar/errorBar.jsx');
 
@@ -15,13 +17,18 @@ const PPR_THRESHOLD = 50;
 const BrewRenderer = React.createClass({
 	getDefaultProps: function() {
 		return {
-			value : '',
-			style : '',
+			brew : {
+				text : '',
+				style : ''
+			},
+
+
+			//TODO: maybe remove?
 			errors : []
 		};
 	},
 	getInitialState: function() {
-		const pages = this.props.value.split('\\page');
+		const pages = this.props.brew.text.split('\\page');
 
 		return {
 			viewablePageNumber: 0,
@@ -37,16 +44,16 @@ const BrewRenderer = React.createClass({
 
 	componentDidMount: function() {
 		this.updateSize();
-		window.addEventListener("resize", this.updateSize);
+		window.addEventListener('resize', this.updateSize);
 	},
 	componentWillUnmount: function() {
-		window.removeEventListener("resize", this.updateSize);
+		window.removeEventListener('resize', this.updateSize);
 	},
 
 	componentWillReceiveProps: function(nextProps) {
 		if(this.refs.pages && this.refs.pages.firstChild) this.pageHeight = this.refs.pages.firstChild.clientHeight;
 
-		const pages = nextProps.value.split('\\page');
+		const pages = nextProps.brew.text.split('\\page');
 		this.setState({
 			pages : pages,
 			usePPR : pages.length >= PPR_THRESHOLD
@@ -58,6 +65,7 @@ const BrewRenderer = React.createClass({
 			if(this.refs.pages && this.refs.pages.firstChild) this.pageHeight = this.refs.pages.firstChild.clientHeight;
 		}, 1);
 
+
 		this.setState({
 			height : this.refs.main.parentNode.clientHeight,
 			isMounted : true
@@ -125,11 +133,10 @@ const BrewRenderer = React.createClass({
 		return this.lastRender;
 	},
 
-	renderStyle : function(){
-
-	},
-
 	render : function(){
+		if(this.props.brew.version == 1) return <OldBrewRenderer value={this.props.brew.text} />;
+
+
 		return <div className='brewRenderer'
 			onScroll={this.handleScroll}
 			ref='main'
@@ -139,7 +146,8 @@ const BrewRenderer = React.createClass({
 			<RenderWarnings />
 
 
-			<style>{this.props.style}</style>
+			<style>{this.props.brew.style}</style>
+
 			<div className='pages' ref='pages'>
 				{this.renderPages()}
 			</div>

shared/homebrewery/brewRenderer/brewRenderer.smart.jsx

@@ -3,9 +3,16 @@ const BrewRenderer = require('./brewRenderer.jsx');
 
 
 module.exports = Store.createSmartComponent(BrewRenderer, () => {
+	const brew = Store.getBrew();
+
+
 	return {
-		value : Store.getBrewCode(),
+		brew : Store.getBrew(),
+
+		brewText : Store.getBrewCode(),
 		style : Store.getBrewStyle(),
+
+
 		errors : Store.getErrors()
 	}
 });

shared/homebrewery/markdown.js

@@ -2,41 +2,43 @@ const _ = require('lodash');
 const Markdown = require('marked');
 
 
+const renderer = new Markdown.Renderer();
+let blockCount = 0;
+renderer.paragraph = function(text){
+	const blockReg = /{{[\w|,]+|}}/g;
+	const matches = text.match(blockReg);
+	if(!matches) return `\n<p>${text}</p>\n`;
+	let matchIndex = 0;
+	const res =  _.reduce(text.split(blockReg), (r, text) => {
+		if(text) r.push(`\n<p>${text}</p>\n`);
+		const block = matches[matchIndex];
+		if(block && _.startsWith(block, '{{')){
+			r.push(`\n\n<div class="${block.substring(2).split(',').join(' ')}">`);
+			blockCount++;
+		}
+		if(block == '}}' && blockCount !== 0){
+			r.push('</div>\n\n');
+			blockCount--;
+		}
+		matchIndex++;
+		return r;
+	}, []).join('\n');
+	return res;
+};
+
+
 module.exports = {
 	marked : Markdown,
 	render : (rawBrewText)=>{
-		//Adds in the new div block syntax
-		let count = 0;
-		let blockReg = /{{[\w|,]+|}}/g;
-		const renderer = new Markdown.Renderer();
-		renderer.paragraph = function (text) {
-			const matches = text.match(blockReg);
-			if(!matches) return `\n<p>${text}</p>\n`;
-			let matchIndex = 0;
-			const res =  _.reduce(text.split(blockReg), (r, text) => {
-				if(text) r.push(`\n<p>${text}</p>\n`);
-				const block = matches[matchIndex];
-				if(block && _.startsWith(block, '{{')){
-					r.push(`\n\n<div class="${block.substring(2).split(',').join(' ')}">`);
-					count++;
-				}
-				if(block == '}}' && count !== 0){
-					r.push('</div>\n\n');
-					count--;
-				}
-				matchIndex++;
-				return r;
-			}, []).join('\n');
-			return res;
-		};
+		blockCount = 0;
 		let html = Markdown(rawBrewText, {renderer : renderer, sanitize: true});
-		html += _.times(count, ()=>{return '</div>'}).join('\n');
+		//Close all hanging block tags
+		html += _.times(blockCount, ()=>{return '</div>'}).join('\n');
 		return html;
 	},
 
 	validate : (rawBrewText) => {
 		return [];
-
 	},
 };