From 46c14ef23b94b25ec60bde7dee19b15c3fd07c07 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Thu, 16 May 2024 23:12:10 -0500 Subject: [PATCH 1/5] fix refs in editor.jsx now has refs `editorWrapper` and `editor`-- the former includes the snippet bar and codemirror editor, and the latter includes only the codemirror editor. --- client/homebrew/editor/editor.jsx | 51 ++++++++++++++++--------------- 1 file changed, 27 insertions(+), 24 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index f5c1766a8..a694d8704 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -48,6 +48,9 @@ const Editor = createClass({ }; }, + editorWrapper : React.createRef(null), + editor : React.createRef(null), + isText : function() {return this.state.view == 'text';}, isStyle : function() {return this.state.view == 'style';}, isMeta : function() {return this.state.view == 'meta';}, @@ -80,15 +83,15 @@ const Editor = createClass({ }, updateEditorSize : function() { - if(this.refs.codeEditor) { - let paneHeight = this.refs.main.parentNode.clientHeight; + if(this.editor.current) { + let paneHeight = this.editorWrapper.current.parentNode.clientHeight; paneHeight -= SNIPPETBAR_HEIGHT; - this.refs.codeEditor.codeMirror.setSize(null, paneHeight); + this.editor.current.codeMirror.setSize(null, paneHeight); } }, handleInject : function(injectText){ - this.refs.codeEditor?.injectText(injectText, false); + this.editor.current?.injectText(injectText, false); }, handleViewChange : function(newView){ @@ -99,7 +102,7 @@ const Editor = createClass({ }, getCurrentPage : function(){ - const lines = this.props.brew.text.split('\n').slice(0, this.refs.codeEditor.getCursorPosition().line + 1); + const lines = this.props.brew.text.split('\n').slice(0, this.editor.current.getCursorPosition().line + 1); return _.reduce(lines, (r, line)=>{ if( (this.props.renderer == 'legacy' && line.indexOf('\\page') !== -1) @@ -111,9 +114,9 @@ const Editor = createClass({ }, highlightCustomMarkdown : function(){ - if(!this.refs.codeEditor) return; + if(!this.editor.current) return; if(this.state.view === 'text') { - const codeMirror = this.refs.codeEditor.codeMirror; + const codeMirror = this.editor.current.codeMirror; codeMirror.operation(()=>{ // Batch CodeMirror styling //reset custom text styles @@ -302,23 +305,23 @@ const Editor = createClass({ targetLine = lineCount - 1; //Scroll to `\page`, which is one line back. - let currentY = this.refs.codeEditor.codeMirror.getScrollInfo().top; - let targetY = this.refs.codeEditor.codeMirror.heightAtLine(targetLine, 'local', true); + let currentY = this.editor.current.codeMirror.getScrollInfo().top; + let targetY = this.editor.current.codeMirror.heightAtLine(targetLine, 'local', true); //Scroll 1/10 of the way every 10ms until 1px off. const incrementalScroll = setInterval(()=>{ currentY += (targetY - currentY) / 10; - this.refs.codeEditor.codeMirror.scrollTo(null, currentY); + this.editor.current.codeMirror.scrollTo(null, currentY); // Update target: target height is not accurate until within +-10 lines of the visible window if(Math.abs(targetY - currentY > 100)) - targetY = this.refs.codeEditor.codeMirror.heightAtLine(targetLine, 'local', true); + targetY = this.editor.current.codeMirror.heightAtLine(targetLine, 'local', true); // End when close enough if(Math.abs(targetY - currentY) < 1) { - this.refs.codeEditor.codeMirror.scrollTo(null, targetY); // Scroll any remaining difference - this.refs.codeEditor.setCursorPosition({ line: targetLine + 1, ch: 0 }); - this.refs.codeEditor.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash'); + this.editor.current.codeMirror.scrollTo(null, targetY); // Scroll any remaining difference + this.editor.current.setCursorPosition({ line: targetLine + 1, ch: 0 }); + this.editor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash'); clearInterval(incrementalScroll); } }, 10); @@ -328,7 +331,7 @@ const Editor = createClass({ //Called when there are changes to the editor's dimensions update : function(){ - this.refs.codeEditor?.updateSize(); + this.editor.current?.updateSize(); }, updateEditorTheme : function(newTheme){ @@ -347,7 +350,7 @@ const Editor = createClass({ if(this.isText()){ return <> +
+ cursorPos={this.editor.current?.getCursorPosition() || {}} /> {this.renderEditor()}
From 8ae22bdc279206593b64cca5113815e5ee86f886 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Thu, 16 May 2024 23:15:54 -0500 Subject: [PATCH 2/5] fix refs in codeEditor.jsx --- shared/naturalcrit/codeEditor/codeEditor.jsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx index b034d1ca9..4d4a90d0a 100644 --- a/shared/naturalcrit/codeEditor/codeEditor.jsx +++ b/shared/naturalcrit/codeEditor/codeEditor.jsx @@ -63,6 +63,8 @@ const CodeEditor = createClass({ }; }, + editor : React.createRef(null), + componentDidMount : function() { this.buildEditor(); const newDoc = CodeMirror.Doc(this.props.value, this.props.language); @@ -102,7 +104,7 @@ const CodeEditor = createClass({ }, buildEditor : function() { - this.codeMirror = CodeMirror(this.refs.editor, { + this.codeMirror = CodeMirror(this.editor.current, { lineNumbers : true, lineWrapping : this.props.wrap, indentWithTabs : false, @@ -443,7 +445,7 @@ const CodeEditor = createClass({ render : function(){ return <> -
+
; } }); From 78ce8aa6e3e5903ed91637ab29c74ad7bd46673f Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Thu, 16 May 2024 23:23:42 -0500 Subject: [PATCH 3/5] remove unused ref attributes from editPage, homePage, newPage, and printPage, as well as splitPane. The refs were declared, but never used. --- client/homebrew/pages/editPage/editPage.jsx | 2 +- client/homebrew/pages/homePage/homePage.jsx | 2 +- client/homebrew/pages/newPage/newPage.jsx | 2 +- client/homebrew/pages/printPage/printPage.jsx | 2 +- shared/naturalcrit/splitPane/splitPane.jsx | 6 ++++-- 5 files changed, 8 insertions(+), 6 deletions(-) diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index d5af310b5..0086a7c9a 100644 --- a/client/homebrew/pages/editPage/editPage.jsx +++ b/client/homebrew/pages/editPage/editPage.jsx @@ -390,7 +390,7 @@ const EditPage = createClass({ {this.renderNavbar()}
- + - + {this.renderNavbar()}
- + {/* Apply CSS from Style tab */} {this.renderStyle()} -
+
{this.renderPages()}
; diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx index 2101480dc..4b12dec48 100644 --- a/shared/naturalcrit/splitPane/splitPane.jsx +++ b/shared/naturalcrit/splitPane/splitPane.jsx @@ -24,6 +24,9 @@ const SplitPane = createClass({ }; }, + pane1 : React.createRef(null), + pane2 : React.createRef(null), + componentDidMount : function() { const dividerPos = window.localStorage.getItem(this.props.storageKey); if(dividerPos){ @@ -137,7 +140,6 @@ const SplitPane = createClass({ render : function(){ return
{React.cloneElement(this.props.children[0], { @@ -147,7 +149,7 @@ const SplitPane = createClass({ })} {this.renderDivider()} - {this.props.children[1]} + {this.props.children[1]}
; } }); From 7c9cc2592382c0506e7dd2368e8856c44e669537 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Thu, 16 May 2024 23:29:30 -0500 Subject: [PATCH 4/5] update editor ref's in edit, home, and new pages. --- client/homebrew/pages/editPage/editPage.jsx | 8 +++++--- client/homebrew/pages/homePage/homePage.jsx | 9 ++++++--- client/homebrew/pages/newPage/newPage.jsx | 8 +++++--- 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index 0086a7c9a..3e7bd0c2a 100644 --- a/client/homebrew/pages/editPage/editPage.jsx +++ b/client/homebrew/pages/editPage/editPage.jsx @@ -54,6 +54,8 @@ const EditPage = createClass({ currentEditorPage : 0 }; }, + + editor : React.createRef(null), savedBrew : null, componentDidMount : function(){ @@ -101,7 +103,7 @@ const EditPage = createClass({ }, handleSplitMove : function(){ - this.refs.editor.update(); + this.editor.current.update(); }, handleTextChange : function(text){ @@ -113,7 +115,7 @@ const EditPage = createClass({ brew : { ...prevState.brew, text: text }, isPending : true, htmlErrors : htmlErrors, - currentEditorPage : this.refs.editor.getCurrentPage() - 1 //Offset index since Marked starts pages at 0 + currentEditorPage : this.editor.current.getCurrentPage() - 1 //Offset index since Marked starts pages at 0 }), ()=>{if(this.state.autoSave) this.trySave();}); }, @@ -392,7 +394,7 @@ const EditPage = createClass({
({ brew : { ...prevState.brew, text: text }, - currentEditorPage : this.refs.editor.getCurrentPage() - 1 //Offset index since Marked starts pages at 0 + currentEditorPage : this.editor.current.getCurrentPage() - 1 //Offset index since Marked starts pages at 0 })); }, renderNavbar : function(){ @@ -81,7 +84,7 @@ const HomePage = createClass({
({ brew : { ...prevState.brew, text: text }, htmlErrors : htmlErrors, - currentEditorPage : this.refs.editor.getCurrentPage() - 1 //Offset index since Marked starts pages at 0 + currentEditorPage : this.editor.current.getCurrentPage() - 1 //Offset index since Marked starts pages at 0 })); localStorage.setItem(BREWKEY, text); }, @@ -215,7 +217,7 @@ const NewPage = createClass({
Date: Tue, 21 May 2024 17:45:50 -0400 Subject: [PATCH 5/5] tweak names in `editor.jsx` --- client/homebrew/editor/editor.jsx | 52 +++++++++++++++---------------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index a694d8704..efcc9c861 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -48,8 +48,8 @@ const Editor = createClass({ }; }, - editorWrapper : React.createRef(null), - editor : React.createRef(null), + editor : React.createRef(null), + codeEditor : React.createRef(null), isText : function() {return this.state.view == 'text';}, isStyle : function() {return this.state.view == 'style';}, @@ -83,15 +83,15 @@ const Editor = createClass({ }, updateEditorSize : function() { - if(this.editor.current) { - let paneHeight = this.editorWrapper.current.parentNode.clientHeight; + if(this.codeEditor.current) { + let paneHeight = this.editor.current.parentNode.clientHeight; paneHeight -= SNIPPETBAR_HEIGHT; - this.editor.current.codeMirror.setSize(null, paneHeight); + this.codeEditor.current.codeMirror.setSize(null, paneHeight); } }, handleInject : function(injectText){ - this.editor.current?.injectText(injectText, false); + this.codeEditor.current?.injectText(injectText, false); }, handleViewChange : function(newView){ @@ -102,7 +102,7 @@ const Editor = createClass({ }, getCurrentPage : function(){ - const lines = this.props.brew.text.split('\n').slice(0, this.editor.current.getCursorPosition().line + 1); + const lines = this.props.brew.text.split('\n').slice(0, this.codeEditor.current.getCursorPosition().line + 1); return _.reduce(lines, (r, line)=>{ if( (this.props.renderer == 'legacy' && line.indexOf('\\page') !== -1) @@ -114,9 +114,9 @@ const Editor = createClass({ }, highlightCustomMarkdown : function(){ - if(!this.editor.current) return; + if(!this.codeEditor.current) return; if(this.state.view === 'text') { - const codeMirror = this.editor.current.codeMirror; + const codeMirror = this.codeEditor.current.codeMirror; codeMirror.operation(()=>{ // Batch CodeMirror styling //reset custom text styles @@ -305,23 +305,23 @@ const Editor = createClass({ targetLine = lineCount - 1; //Scroll to `\page`, which is one line back. - let currentY = this.editor.current.codeMirror.getScrollInfo().top; - let targetY = this.editor.current.codeMirror.heightAtLine(targetLine, 'local', true); + let currentY = this.codeEditor.current.codeMirror.getScrollInfo().top; + let targetY = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true); //Scroll 1/10 of the way every 10ms until 1px off. const incrementalScroll = setInterval(()=>{ currentY += (targetY - currentY) / 10; - this.editor.current.codeMirror.scrollTo(null, currentY); + this.codeEditor.current.codeMirror.scrollTo(null, currentY); // Update target: target height is not accurate until within +-10 lines of the visible window if(Math.abs(targetY - currentY > 100)) - targetY = this.editor.current.codeMirror.heightAtLine(targetLine, 'local', true); + targetY = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true); // End when close enough if(Math.abs(targetY - currentY) < 1) { - this.editor.current.codeMirror.scrollTo(null, targetY); // Scroll any remaining difference - this.editor.current.setCursorPosition({ line: targetLine + 1, ch: 0 }); - this.editor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash'); + this.codeEditor.current.codeMirror.scrollTo(null, targetY); // Scroll any remaining difference + this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 }); + this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash'); clearInterval(incrementalScroll); } }, 10); @@ -331,7 +331,7 @@ const Editor = createClass({ //Called when there are changes to the editor's dimensions update : function(){ - this.editor.current?.updateSize(); + this.codeEditor.current?.updateSize(); }, updateEditorTheme : function(newTheme){ @@ -350,7 +350,7 @@ const Editor = createClass({ if(this.isText()){ return <> +
+ cursorPos={this.codeEditor.current?.getCursorPosition() || {}} /> {this.renderEditor()}