Live Mirror Editor position in Preview pane.

client/homebrew/editor/editor.jsx

@@ -22,6 +22,19 @@ const DEFAULT_STYLE_TEXT = dedent`
 					color: black;
 				}`;
 
+let lastPage = 0;
+let liveScroll = true;
+
+const isElementCodeMirror=(element)=>{
+	let el = element;
+	while( el.tagName != 'body' ) {
+		if ( !el?.classList ) return false
+		if( el?.classList?.contains('CodeMirror-code') || el.classList.contains('CodeMirror-line'))
+			return true;
+		el = el.parentNode;
+	}
+	return false;
+};
 
 const Editor = createClass({
 	displayName     : 'Editor',
@@ -31,6 +44,7 @@ const Editor = createClass({
 				text  : '',
 				style : ''
 			},
+			liveScroll : true,
 
 			onTextChange  : ()=>{},
 			onStyleChange : ()=>{},
@@ -56,6 +70,16 @@ const Editor = createClass({
 		this.updateEditorSize();
 		this.highlightCustomMarkdown();
 		window.addEventListener('resize', this.updateEditorSize);
+		document.addEventListener('keydown', this.handleControlKeys);
+		document.addEventListener('click', (e)=>{
+			if(isElementCodeMirror(e.target) && liveScroll ) {
+				const curPage = this.getCurrentPage();
+				if( curPage != lastPage ) {
+					this.brewJump();
+					lastPage = curPage;
+				}
+			}
+		});
 
 		const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY);
 		if(editorTheme) {
@@ -77,8 +101,48 @@ const Editor = createClass({
 		if(prevProps.moveSource !== this.props.moveSource) {
 			this.sourceJump();
 		};
+		if(prevProps.liveScroll !== this.props.liveScroll) {
+			liveScroll = !liveScroll;
+		};
 	},
 
+	handleControlKeys : function(e){
+		if(liveScroll) {
+			const movementKeys = [ 13, 33, 34, 37, 38, 39, 40 ];
+			if (movementKeys.includes(e.keyCode)) {
+				const curPage = this.getCurrentPage();
+				if( curPage != lastPage ) {
+					this.brewJump();
+					lastPage = curPage;
+				}
+			}
+		}
+		const M_KEY = 77;
+		const END_KEY = 35;
+		const HOME_KEY = 36;
+		const SCROLLLOCK_KEY = 145;
+
+		// Toggle Live-scrolling on Scroll Lock
+		if(e.keyCode == SCROLLLOCK_KEY) {
+			liveScroll = !liveScroll;
+		}
+		if(!(e.ctrlKey || e.metaKey)) return;
+
+		// Handle CTRL-HOME and CTRL-END
+		if(((e.keyCode == END_KEY) || (e.keyCode == HOME_KEY)) && liveScroll) this.brewJump();
+
+		// Brew Jump on CTRL-J
+		if((!e.shiftKey) && (e.keyCode == M_KEY)) this.brewJump();
+		// Source Jump on Shift-CTRL-J
+		if ((e.shiftKey) && (!e.altKey) && (e.keyCode == M_KEY)) this.sourceJump();
+
+		if( e.keyCode == M_KEY) {
+			e.stopPropagation();
+			e.preventDefault();
+		}
+	},
+
+
 	updateEditorSize : function() {
 		if(this.refs.codeEditor) {
 			let paneHeight = this.refs.main.parentNode.clientHeight;
@@ -116,6 +180,7 @@ const Editor = createClass({
 			const codeMirror = this.refs.codeEditor.codeMirror;
 
 			codeMirror.operation(()=>{ // Batch CodeMirror styling
+
 				//reset custom text styles
 				const customHighlights = codeMirror.getAllMarks().filter((mark)=>!mark.__isFold); //Don't undo code folding
 				for (let i=customHighlights.length - 1;i>=0;i--) customHighlights[i].clear();

shared/naturalcrit/splitPane/splitPane.jsx

@@ -20,6 +20,7 @@ const SplitPane = createClass({
 			isDragging        : false,
 			moveSource        : false,
 			moveBrew          : false,
+			liveScroll        : true,
 			showMoveArrows    : true
 		};
 	},
@@ -117,6 +118,20 @@ const SplitPane = createClass({
 					onClick={()=>this.setState({ moveBrew: !this.state.moveBrew })} >
 					<i className='fas fa-arrow-right' />
 				</div>
+				<div id='scrollToggleDiv' className='arrow unlock'
+					style={{ left: this.state.currentDividerPos-4 }}
+					onClick={()=>{
+						this.setState({ liveScroll: !this.state.liveScroll });
+						if(document.getElementById('scrollToggle').classList.contains('fa-unlock')) {
+							document.getElementById('scrollToggle').className = 'fas fa-lock';
+							document.getElementById('scrollToggleDiv').className = 'arrow lock';
+						} else {
+							document.getElementById('scrollToggle').className = 'fas fa-unlock';
+							document.getElementById('scrollToggleDiv').className = 'arrow unlock';
+						}
+					}} >
+					<i id='scrollToggle' className='fas fa-unlock' />
+				</div>
 			</>;
 		}
 	},
@@ -143,6 +158,7 @@ const SplitPane = createClass({
 				{React.cloneElement(this.props.children[0], {
 					moveBrew      : this.state.moveBrew,
 					moveSource    : this.state.moveSource,
+					liveScroll    : this.state.liveScroll,
 					setMoveArrows : this.setMoveArrows
 				})}
 			</Pane>

shared/naturalcrit/splitPane/splitPane.less

@@ -53,6 +53,14 @@
 			.tooltipRight('Jump to location in Preview');
 			top : 60px;
 		}
+		&.lock{
+			.tooltipRight('Lock cursor tracking between windows.');
+			top : 90px;
+		}
+		&.unlock{
+			.tooltipRight('Unlock cursor tracking between windows.');
+			top : 90px;
+		}
 		&:hover{
 			background-color: #666;
 		}