initial commit to add programmatic page counts in editor

update element classname to be more descriptive, remove some commented code.

client/homebrew/editor/editor.jsx

@@ -52,6 +52,7 @@ const Editor = createClass({
 
 	componentDidMount : function() {
 		this.updateEditorSize();
+		this.addEditorPageNumbers();
 		this.highlightCustomMarkdown();
 		window.addEventListener('resize', this.updateEditorSize);
 	},
@@ -61,6 +62,7 @@ const Editor = createClass({
 	},
 
 	componentDidUpdate : function() {
+		this.addEditorPageNumbers();
 		this.highlightCustomMarkdown();
 	},
 
@@ -102,6 +104,53 @@ const Editor = createClass({
 		}, 1);
 	},
 
+	addEditorPageNumbers : function(){
+		if(!this.refs.codeEditor) return;
+		if(this.state.view === 'text')  {
+			let editorPageCount = 2; // start counting from page 2
+			const codeMirror = this.refs.codeEditor.codeMirror;
+
+			const pageCountWidgets = document.getElementsByClassName('editor-page');
+					
+			for(let x=pageCountWidgets.length - 1;x>=0;x--) pageCountWidgets[x].remove();
+
+			
+			console.log(editorPageCount);
+
+			const lineNumbers = _.reduce(this.props.brew.text.split('\n'), (r, line, lineNumber)=>{
+				if(this.props.renderer == 'legacy') {
+					if(line.includes('\\page')) {
+						const testElement = Object.assign(document.createElement('div'), {
+							className : 'editor-page-count',
+							textContent : editorPageCount
+						});
+						codeMirror.addWidget({ line: lineNumber, ch: 0}, testElement);
+						testElement.style.top = parseInt(testElement.style.top) - 12.5 + 'px';
+						testElement.style.left = 'unset';
+						editorPageCount = editorPageCount + 1;
+						r.push(lineNumber);
+					}
+				}
+				
+				if(this.props.renderer == 'V3') {
+					if(line.match(/^\\page$/)){
+						const testElement = Object.assign(document.createElement('div'), {
+							className : 'editor-page-count',
+							textContent : editorPageCount
+						});
+						codeMirror.addWidget({ line: lineNumber, ch: 0}, testElement);
+						testElement.style.top = parseInt(testElement.style.top) - 12.5 + 'px';
+						testElement.style.left = 'unset';
+						editorPageCount = editorPageCount + 1;
+						r.push(lineNumber);
+					}
+				}
+				return r;
+			}, []);
+			return lineNumbers;
+		}
+	},
+
 	highlightCustomMarkdown : function(){
 		if(!this.refs.codeEditor) return;
 		if(this.state.view === 'text')  {
@@ -111,6 +160,7 @@ const Editor = createClass({
 			const customHighlights = codeMirror.getAllMarks();
 			for (let i=0;i<customHighlights.length;i++) customHighlights[i].clear();
 
+
 			const lineNumbers = _.reduce(this.props.brew.text.split('\n'), (r, line, lineNumber)=>{
 
 				//reset custom line styles

client/homebrew/editor/editor.less

@@ -5,17 +5,13 @@
 
 	.codeEditor{
 		height            : 100%;
-		counter-reset     : page;
-		counter-increment : page;
 		.pageLine{
 			background : #33333328;
 			border-top : #339 solid 1px;
-			&:after{
-				content           : counter(page);
-				counter-increment : page;
-				float             : right;
-				color             : gray;
-			}
+		}
+		.editor-page-count{
+			color : grey;
+			right : 12px;
 		}
 		.columnSplit{
 			font-style 			: italic;