From 508eee3f952776c3cfc1f3a0e68503c11acc19fa Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Sun, 19 Sep 2021 19:26:44 +1200
Subject: [PATCH 1/6] Initial pass at Editor Toolbar - Undo and Redo.

---
 client/homebrew/editor/editor.jsx            | 17 +++++++++++++++++
 client/homebrew/editor/editor.less           | 12 ++++++++++++
 shared/naturalcrit/codeEditor/codeEditor.jsx |  6 ++++++
 3 files changed, 35 insertions(+)

diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx
index 20f084c28..95bb68447 100644
--- a/client/homebrew/editor/editor.jsx
+++ b/client/homebrew/editor/editor.jsx
@@ -1,3 +1,4 @@
+/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
 require('./editor.less');
 const React = require('react');
 const createClass = require('create-react-class');
@@ -198,6 +199,21 @@ const Editor = createClass({
 		}
 	},
 
+	renderEditorToolbar : function(){
+		return <div className='editorToolbar'>
+			<span className='undo'
+				onClick={this.refs.codeEditor?.undo}
+				title='Undo'>
+				<i className='fas fa-undo' />
+			</span>
+			<span className='redo'
+				onClick={this.refs.codeEditor?.redo}
+				title='Redo'>
+				<i className='fas fa-redo' />
+			</span>
+		</div>;
+	},
+
 	render : function(){
 		this.highlightCustomMarkdown();
 		return (
@@ -211,6 +227,7 @@ const Editor = createClass({
 					renderer={this.props.renderer} />
 
 				{this.renderEditor()}
+				{!this.isMeta() && this.renderEditorToolbar()}
 			</div>
 		);
 	}
diff --git a/client/homebrew/editor/editor.less b/client/homebrew/editor/editor.less
index cd190ea88..ec66b191c 100644
--- a/client/homebrew/editor/editor.less
+++ b/client/homebrew/editor/editor.less
@@ -42,4 +42,16 @@
 		.tooltipLeft("Jump to brew page");
 	}
 
+	.editorToolbar{
+		position: absolute;
+		top: 5px;
+		left: 50%;
+		color: black;
+		font-size: 13px;
+		z-index: 9;
+		span {
+			padding: 2px 5px;
+		}
+	}
+
 }
diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx
index 9707bde56..5d00cc04c 100644
--- a/shared/naturalcrit/codeEditor/codeEditor.jsx
+++ b/shared/naturalcrit/codeEditor/codeEditor.jsx
@@ -112,6 +112,12 @@ const CodeEditor = createClass({
 	updateSize : function(){
 		this.codeMirror.refresh();
 	},
+	redo : function(){
+		this.codeMirror.redo();
+	},
+	undo : function(){
+		this.codeMirror.undo();
+	},
 	//----------------------//
 
 	render : function(){

From 09b154366055f577f302b25b50c981a3171a9934 Mon Sep 17 00:00:00 2001
From: Sean Robertson <sean@robertson-family.nz>
Date: Tue, 5 Oct 2021 10:50:13 +1300
Subject: [PATCH 2/6] Reduce CodeMirror codeEditor `historyEventDelay` to 250

---
 shared/naturalcrit/codeEditor/codeEditor.jsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx
index 5d00cc04c..9cf4fe0e2 100644
--- a/shared/naturalcrit/codeEditor/codeEditor.jsx
+++ b/shared/naturalcrit/codeEditor/codeEditor.jsx
@@ -40,13 +40,14 @@ const CodeEditor = createClass({
 
 	buildEditor : function() {
 		this.codeMirror = CodeMirror(this.refs.editor, {
-			value          : this.props.value,
-			lineNumbers    : true,
-			lineWrapping   : this.props.wrap,
-			mode           : this.props.language, //TODO: CSS MODE DOESN'T SEEM TO LOAD PROPERLY
-			indentWithTabs : true,
-			tabSize        : 2,
-			extraKeys      : {
+			value             : this.props.value,
+			lineNumbers       : true,
+			lineWrapping      : this.props.wrap,
+			mode              : this.props.language, //TODO: CSS MODE DOESN'T SEEM TO LOAD PROPERLY
+			indentWithTabs    : true,
+			tabSize           : 2,
+			historyEventDelay : 250,
+			extraKeys         : {
 				'Ctrl-B' : this.makeBold,
 				'Cmd-B'  : this.makeBold,
 				'Ctrl-I' : this.makeItalic,

From fbabae8793f9412dd8a11750cf16ef34ee0189c4 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Tue, 5 Oct 2021 20:24:45 +1300
Subject: [PATCH 3/6] Expose CodeMirror functions in codeEditor.jsx

---
 shared/naturalcrit/codeEditor/codeEditor.jsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx
index 9cf4fe0e2..6fe189890 100644
--- a/shared/naturalcrit/codeEditor/codeEditor.jsx
+++ b/shared/naturalcrit/codeEditor/codeEditor.jsx
@@ -114,10 +114,13 @@ const CodeEditor = createClass({
 		this.codeMirror.refresh();
 	},
 	redo : function(){
-		this.codeMirror.redo();
+		return this.codeMirror.redo();
 	},
 	undo : function(){
-		this.codeMirror.undo();
+		return this.codeMirror.undo();
+	},
+	historySize : function(){
+		return this.codeMirror.doc.historySize();
 	},
 	//----------------------//
 

From 96af13b71f0ab23969a9f807497248dac4e35c77 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Tue, 5 Oct 2021 20:25:24 +1300
Subject: [PATCH 4/6] Move Undo/Redo to SnippetBar

---
 client/homebrew/editor/editor.jsx             | 29 +++++++++----------
 .../homebrew/editor/snippetbar/snippetbar.jsx | 12 +++++++-
 .../editor/snippetbar/snippetbar.less         | 10 ++++++-
 3 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx
index 95bb68447..82435cacb 100644
--- a/client/homebrew/editor/editor.jsx
+++ b/client/homebrew/editor/editor.jsx
@@ -199,19 +199,16 @@ const Editor = createClass({
 		}
 	},
 
-	renderEditorToolbar : function(){
-		return <div className='editorToolbar'>
-			<span className='undo'
-				onClick={this.refs.codeEditor?.undo}
-				title='Undo'>
-				<i className='fas fa-undo' />
-			</span>
-			<span className='redo'
-				onClick={this.refs.codeEditor?.redo}
-				title='Redo'>
-				<i className='fas fa-redo' />
-			</span>
-		</div>;
+	redo : function(){
+		return this.refs.codeEditor?.redo();
+	},
+
+	historySize : function(){
+		return this.refs.codeEditor?.historySize();
+	},
+
+	undo : function(){
+		return this.refs.codeEditor?.undo();
 	},
 
 	render : function(){
@@ -224,10 +221,12 @@ const Editor = createClass({
 					onViewChange={this.handleViewChange}
 					onInject={this.handleInject}
 					showEditButtons={this.props.showEditButtons}
-					renderer={this.props.renderer} />
+					renderer={this.props.renderer}
+					undo={this.undo}
+					redo={this.redo}
+					historySize={this.historySize} />
 
 				{this.renderEditor()}
-				{!this.isMeta() && this.renderEditorToolbar()}
 			</div>
 		);
 	}
diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx
index 9ea04695f..8f0ee9607 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -22,7 +22,9 @@ const Snippetbar = createClass({
 			onInject        : ()=>{},
 			onToggle        : ()=>{},
 			showEditButtons : true,
-			renderer        : 'legacy'
+			renderer        : 'legacy',
+			undo            : ()=>{},
+			redo            : ()=>{}
 		};
 	},
 
@@ -60,6 +62,14 @@ const Snippetbar = createClass({
 		if(!this.props.showEditButtons) return;
 
 		return <div className='editors'>
+			<div className='editorTool undo'
+				onClick={this.props.undo} >
+				<i className='fas fa-undo' />
+			</div>
+			<div className='editorTool redo'
+				onClick={this.props.redo} >
+				<i className='fas fa-redo' />
+			</div>
 			<div className={cx('text', { selected: this.props.view === 'text' })}
 				 onClick={()=>this.props.onViewChange('text')}>
 				<i className='fa fa-beer' />
diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less
index ae8962501..51e832174 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/client/homebrew/editor/snippetbar/snippetbar.less
@@ -10,7 +10,7 @@
 		top             : 0px;
 		right           : 0px;
 		height          : @menuHeight;
-		width           : 90px;
+		width           : 125px;
 		justify-content : space-between;
 		&>div{
 			height      : @menuHeight;
@@ -30,6 +30,14 @@
 			&.meta{
 				.tooltipLeft('Properties');
 			}
+			&.undo{
+				.tooltipLeft('Undo');
+				font-size : 0.75em;
+			}
+			&.redo{
+				.tooltipLeft('Redo');
+				font-size : 0.75em;
+			}
 		}
 	}
 	.snippetBarButton{

From 5b3953094ef892f8e61879ec1478fa97b462ae3f Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Mon, 18 Oct 2021 21:39:01 +1300
Subject: [PATCH 5/6] Add divider and tool active class

---
 client/homebrew/editor/snippetbar/snippetbar.jsx  |  1 +
 client/homebrew/editor/snippetbar/snippetbar.less | 15 +++++++++++++++
 2 files changed, 16 insertions(+)

diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx
index 8f0ee9607..b4ad37eba 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -70,6 +70,7 @@ const Snippetbar = createClass({
 				onClick={this.props.redo} >
 				<i className='fas fa-redo' />
 			</div>
+			<div className='divider'></div>
 			<div className={cx('text', { selected: this.props.view === 'text' })}
 				 onClick={()=>this.props.onViewChange('text')}>
 				<i className='fa fa-beer' />
diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less
index 51e832174..371f51fda 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/client/homebrew/editor/snippetbar/snippetbar.less
@@ -33,10 +33,25 @@
 			&.undo{
 				.tooltipLeft('Undo');
 				font-size : 0.75em;
+				color     : grey;
+				&.active{
+					color : black;
+				}
 			}
 			&.redo{
 				.tooltipLeft('Redo');
 				font-size : 0.75em;
+				color     : grey;
+				&.active{
+					color : black;
+				}
+			}
+			&.divider {
+				background: linear-gradient(#000, #000) no-repeat center/1px 100%;
+				width: 5px;
+				&:hover{
+					background-color: inherit;
+				}
 			}
 		}
 	}

From 606a3c843d839a4d3620e931fc3cb5ae516b0de1 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Mon, 18 Oct 2021 22:26:34 +1300
Subject: [PATCH 6/6] Add conditional highlighting to Undo/Redo

---
 client/homebrew/editor/snippetbar/snippetbar.jsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx
index b4ad37eba..84888b3d0 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -24,7 +24,8 @@ const Snippetbar = createClass({
 			showEditButtons : true,
 			renderer        : 'legacy',
 			undo            : ()=>{},
-			redo            : ()=>{}
+			redo            : ()=>{},
+			historySize     : ()=>{}
 		};
 	},
 
@@ -62,11 +63,11 @@ const Snippetbar = createClass({
 		if(!this.props.showEditButtons) return;
 
 		return <div className='editors'>
-			<div className='editorTool undo'
+			<div className={`editorTool undo ${this.props.historySize()?.undo ? 'active' : ''}`}
 				onClick={this.props.undo} >
 				<i className='fas fa-undo' />
 			</div>
-			<div className='editorTool redo'
+			<div className={`editorTool redo ${this.props.historySize()?.redo ? 'active' : ''}`}
 				onClick={this.props.redo} >
 				<i className='fas fa-redo' />
 			</div>