Lots of progress with the new editor

shared/homebrewery/brewEditor/brewEditor.jsx

@@ -6,35 +6,36 @@ const CodeEditor = require('naturalcrit/codeEditor/codeEditor.jsx');
 const SnippetBar = require('./snippetbar/snippetbar.jsx');
 const MetadataEditor = require('./metadataEditor/metadataEditor.jsx');
 
+const Menubar = require('./menubar/menubar.jsx');
+
 const splice = function(str, index, inject){
 	return str.slice(0, index) + inject + str.slice(index);
 };
 
-const SNIPPETBAR_HEIGHT = 25;
+const MENUBAR_HEIGHT = 25;
 
 const BrewEditor = React.createClass({
 	getDefaultProps: function() {
 		return {
-			value : '',
-			onChange : ()=>{},
+			brew : {
+				text : '',
+				style : '',
+			},
 
-			metadata : {},
-			onMetadataChange : ()=>{},
+			onCodeChange : ()=>{},
+			onStyleChange : ()=>{},
+			onMetaChange : ()=>{},
 		};
 	},
 	getInitialState: function() {
 		return {
-			showMetadataEditor: false
+			view : 'code', //'code', 'style', 'meta'
 		};
 	},
-	cursorPosition : {
-		line : 0,
-		ch : 0
-	},
 
 	componentDidMount: function() {
 		this.updateEditorSize();
-		this.highlightPageLines();
+		//this.highlightPageLines();
 		window.addEventListener("resize", this.updateEditorSize);
 	},
 	componentWillUnmount: function() {
@@ -42,17 +43,15 @@ const BrewEditor = React.createClass({
 	},
 
 	updateEditorSize : function() {
-		let paneHeight = this.refs.main.parentNode.clientHeight;
-		paneHeight -= SNIPPETBAR_HEIGHT + 1;
-		this.refs.codeEditor.codeMirror.setSize(null, paneHeight);
+		if(this.refs.codeEditor){
+			let paneHeight = this.refs.main.parentNode.clientHeight;
+			paneHeight -= MENUBAR_HEIGHT + 1;
+			this.refs.codeEditor.codeMirror.setSize(null, paneHeight);
+		}
 	},
 
-	handleTextChange : function(text){
-		this.props.onChange(text);
-	},
-	handleCursorActivty : function(curpos){
-		this.cursorPosition = curpos;
-	},
+
+
 	handleInject : function(injectText){
 		const lines = this.props.value.split('\n');
 		lines[this.cursorPosition.line] = splice(lines[this.cursorPosition.line], this.cursorPosition.ch, injectText);
@@ -60,23 +59,32 @@ const BrewEditor = React.createClass({
 		this.handleTextChange(lines.join('\n'));
 		this.refs.codeEditor.setCursorPosition(this.cursorPosition.line, this.cursorPosition.ch  + injectText.length);
 	},
-	handgleToggle : function(){
+
+
+
+	handleViewChange : function(newView){
 		this.setState({
-			showMetadataEditor : !this.state.showMetadataEditor
-		})
+			view : newView
+		}, this.updateEditorSize);
 	},
 
+
+
+
 	brewJump : function(){
 		const currentPage = this.getCurrentPage();
 		window.location.hash = 'p' + currentPage;
 	},
 
 	//Called when there are changes to the editor's dimensions
+	/*
 	update : function(){
-		this.refs.codeEditor.updateSize();
+		if(this.refs.codeEditor) this.refs.codeEditor.updateSize();
 	},
+	*/
 
 	//TODO: convert this into a generic function for columns and blocks
+	//MOve this to a util.sj file
 	highlightPageLines : function(){
 		if(!this.refs.codeEditor) return;
 		const codeMirror = this.refs.codeEditor.codeMirror;
@@ -91,6 +99,7 @@ const BrewEditor = React.createClass({
 		return lineNumbers
 	},
 
+	/*
 	renderMetadataEditor : function(){
 		if(!this.state.showMetadataEditor) return;
 		return <MetadataEditor
@@ -98,25 +107,49 @@ const BrewEditor = React.createClass({
 			onChange={this.props.onMetadataChange}
 		/>
 	},
+	*/
+
+
+
+	renderEditor : function(){
+		if(this.state.view == 'meta'){
+			return <MetadataEditor
+				metadata={this.props.brew}
+				onChange={this.props.onMetaChange} />
+		}
+		if(this.state.view == 'style'){
+			return <CodeEditor key='style'
+				ref='codeEditor'
+				language='css'
+				value={this.props.brew.style}
+				onChange={this.props.onStyleChange} />
+		}
+		if(this.state.view == 'code'){
+			return <CodeEditor key='code'
+				ref='codeEditor'
+				language='gfm'
+				value={this.props.brew.text}
+				onChange={this.props.onCodeChange} />
+		}
+	},
 
 	render : function(){
-
-		this.highlightPageLines();
-
-		return<div className='brewEditor' ref='main'>
+		return <div className='brewEditor' ref='main'>
+			{/*
 			<SnippetBar
 				brew={this.props.value}
 				onInject={this.handleInject}
 				onToggle={this.handgleToggle}
 				showmeta={this.state.showMetadataEditor} />
-			{this.renderMetadataEditor()}
-			<CodeEditor
-				ref='codeEditor'
-				wrap={true}
-				language='gfm'
-				value={this.props.value}
-				onChange={this.handleTextChange}
-				onCursorActivity={this.handleCursorActivty} />
+			*/}
+			<Menubar
+				view={this.state.view}
+				onViewChange={this.handleViewChange}
+
+			/>
+
+			{this.renderEditor()}
+
 		</div>
 
 			/*