0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-03 12:42:41 +00:00

Merge branch 'master' into Issue_241_Part_II

This commit is contained in:
David Bolack
2024-06-03 02:29:19 -05:00
51 changed files with 1339 additions and 407 deletions

View File

@@ -60,6 +60,9 @@ const Editor = createClass({
};
},
editor : React.createRef(null),
codeEditor : React.createRef(null),
isText : function() {return this.state.view == 'text';},
isStyle : function() {return this.state.view == 'style';},
isMeta : function() {return this.state.view == 'meta';},
@@ -145,15 +148,15 @@ const Editor = createClass({
updateEditorSize : function() {
if(this.refs.codeEditor) {
let paneHeight = this.refs.main.parentNode.clientHeight;
if(this.codeEditor.current) {
let paneHeight = this.editor.current.parentNode.clientHeight;
paneHeight -= SNIPPETBAR_HEIGHT;
this.refs.codeEditor.codeMirror.setSize(null, paneHeight);
this.codeEditor.current.codeMirror.setSize(null, paneHeight);
}
},
handleInject : function(injectText){
this.refs.codeEditor?.injectText(injectText, false);
this.codeEditor.current?.injectText(injectText, false);
},
handleViewChange : function(newView){
@@ -164,7 +167,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.codeEditor.current.getCursorPosition().line + 1);
return _.reduce(lines, (r, line)=>{
if(
(this.props.renderer == 'legacy' && line.indexOf('\\page') !== -1)
@@ -176,9 +179,9 @@ const Editor = createClass({
},
highlightCustomMarkdown : function(){
if(!this.refs.codeEditor) return;
if(!this.codeEditor.current) return;
if(this.state.view === 'text') {
const codeMirror = this.refs.codeEditor.codeMirror;
const codeMirror = this.codeEditor.current.codeMirror;
codeMirror.operation(()=>{ // Batch CodeMirror styling
@@ -369,23 +372,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.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.refs.codeEditor.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.refs.codeEditor.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.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.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);
@@ -395,7 +398,7 @@ const Editor = createClass({
//Called when there are changes to the editor's dimensions
update : function(){
this.refs.codeEditor?.updateSize();
this.codeEditor.current?.updateSize();
},
updateEditorTheme : function(newTheme){
@@ -414,7 +417,7 @@ const Editor = createClass({
if(this.isText()){
return <>
<CodeEditor key='codeEditor'
ref='codeEditor'
ref={this.codeEditor}
language='gfm'
view={this.state.view}
value={this.props.brew.text}
@@ -426,7 +429,7 @@ const Editor = createClass({
if(this.isStyle()){
return <>
<CodeEditor key='codeEditor'
ref='codeEditor'
ref={this.codeEditor}
language='css'
view={this.state.view}
value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
@@ -451,28 +454,28 @@ const Editor = createClass({
},
redo : function(){
return this.refs.codeEditor?.redo();
return this.codeEditor.current?.redo();
},
historySize : function(){
return this.refs.codeEditor?.historySize();
return this.codeEditor.current?.historySize();
},
undo : function(){
return this.refs.codeEditor?.undo();
return this.codeEditor.current?.undo();
},
foldCode : function(){
return this.refs.codeEditor?.foldAllCode();
return this.codeEditor.current?.foldAllCode();
},
unfoldCode : function(){
return this.refs.codeEditor?.unfoldAllCode();
return this.codeEditor.current?.unfoldAllCode();
},
render : function(){
return (
<div className='editor' ref='main'>
<div className='editor' ref={this.editor}>
<SnippetBar
brew={this.props.brew}
view={this.state.view}
@@ -488,7 +491,7 @@ const Editor = createClass({
historySize={this.historySize()}
currentEditorTheme={this.state.editorTheme}
updateEditorTheme={this.updateEditorTheme}
cursorPos={this.refs.codeEditor?.getCursorPosition() || {}} />
cursorPos={this.codeEditor.current?.getCursorPosition() || {}} />
{this.renderEditor()}
</div>