diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 185f37ac6..5eaf0345d 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -23,7 +23,6 @@ const DEFAULT_STYLE_TEXT = dedent` }`; let lastPage = 0; -let liveScroll = true; const isElementCodeMirror=(element)=>{ let el = element; @@ -44,7 +43,6 @@ const Editor = createClass({ text : '', style : '' }, - liveScroll : true, onTextChange : ()=>{}, onStyleChange : ()=>{}, @@ -67,12 +65,13 @@ const Editor = createClass({ isMeta : function() {return this.state.view == 'meta';}, componentDidMount : function() { + this.updateEditorSize(); this.highlightCustomMarkdown(); window.addEventListener('resize', this.updateEditorSize); document.addEventListener('keydown', this.handleControlKeys); document.addEventListener('click', (e)=>{ - if(isElementCodeMirror(e.target) && liveScroll ) { + if(isElementCodeMirror(e.target) && this.props.liveScroll ) { const curPage = this.getCurrentPage(); if( curPage != lastPage ) { this.brewJump(); @@ -94,10 +93,6 @@ const Editor = createClass({ }, componentDidUpdate : function(prevProps, prevState, snapshot) { - console.log(this.props); - console.log(prevProps); - console.log(this.state); - console.log(prevState); this.highlightCustomMarkdown(); if(prevProps.moveBrew !== this.props.moveBrew) { @@ -106,13 +101,13 @@ const Editor = createClass({ if(prevProps.moveSource !== this.props.moveSource) { this.sourceJump(); }; - if(prevProps.liveScroll !== this.props.liveScroll) { - liveScroll = !liveScroll; + if(prevProps.liveScroll != this.props.liveScroll) { + if (this.props.liveScroll) this.brewJump(); }; }, handleControlKeys : function(e){ - if(liveScroll) { + if(this.props.liveScroll) { const movementKeys = [ 13, 33, 34, 37, 38, 39, 40 ]; if (movementKeys.includes(e.keyCode)) { const curPage = this.getCurrentPage(); @@ -122,14 +117,14 @@ const Editor = createClass({ } } } - const M_KEY = 77; + const X_KEY = 88; 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; + this.setState( {liveScroll: !liveScroll} ); } if(!(e.ctrlKey || e.metaKey)) return; @@ -140,9 +135,9 @@ const Editor = createClass({ // 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.shiftKey) && (!e.altKey) && (e.keyCode == X_KEY)) this.sourceJump(); - if( e.keyCode == M_KEY) { + if( e.keyCode == X_KEY) { e.stopPropagation(); e.preventDefault(); } @@ -330,6 +325,7 @@ const Editor = createClass({ // console.log(`Scroll to: p${targetPage}`); const brewRenderer = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0]; const currentPos = brewRenderer.scrollTop; + if(!window.frames['BrewRenderer'].contentDocument.getElementById(`p${targetPage}`)) return; const targetPos = window.frames['BrewRenderer'].contentDocument.getElementById(`p${targetPage}`).getBoundingClientRect().top; const interimPos = targetPos >= 0 ? -30 : 30; diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx index e1b30887e..71831fb23 100644 --- a/shared/naturalcrit/splitPane/splitPane.jsx +++ b/shared/naturalcrit/splitPane/splitPane.jsx @@ -20,7 +20,6 @@ const SplitPane = createClass({ isDragging : false, moveSource : false, moveBrew : false, - liveScroll : true, viewablePageNumber : 0, showMoveArrows : true }; @@ -41,9 +40,25 @@ const SplitPane = createClass({ }); } window.addEventListener('resize', this.handleWindowResize); + + + // This lives here instead of in the initial render because you cannot touch localStorage until the componant mounts. + const loadLiveScroll = window.localStorage.getItem('liveScroll') === 'true'; + this.setState({ + liveScroll : loadLiveScroll + }); + const toggle = document.getElementById('scrollToggle'); + const toggleDiv = document.getElementById('scrollToggleDiv'); + if(loadLiveScroll) { + toggle.className = 'fas fa-lock'; + toggleDiv.className = 'arrow lock'; + } else { + toggle.className = 'fas fa-unlock'; + toggleDiv.className = 'arrow unlock'; + } }, -componentWillUnmount : function() { + componentWillUnmount : function() { window.removeEventListener('resize', this.handleWindowResize); }, @@ -119,21 +134,23 @@ componentWillUnmount : function() { onClick={()=>this.setState({ moveBrew: !this.state.moveBrew })} > -