f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-24 18:32:41 +00:00
Code Wiki Activity

use CodeMirror Documents

Browse Source 
Instead of re-building the whole editor box with every tab switch, we just swap in and out CodeMirror "documents".

Maintains undo history, scroll position, highlight coloring, etc.
This commit is contained in:
Trevor Buckner
2021-10-19 23:49:11 -04:00
parent b5ad75bcf2
commit 63d659ff49
3 changed files with 65 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
shared/naturalcrit/codeEditor/codeEditor.jsx
View File

@@ -25,25 +25,44 @@ const CodeEditor = createClass({
};
},
getInitialState : function() {
return {
docs : {}
};
},
componentDidMount : function() {
this.buildEditor();
this.codeMirror.setValue(this.props.value);
this.codeMirror.clearHistory();
},
componentDidUpdate : function(prevProps) {
if(prevProps.language !== this.props.language){ //rebuild editor when switching tabs
this.buildEditor();
}
if(this.codeMirror && this.codeMirror.getValue() != this.props.value) { //update editor contents if brew.text is changed from outside
if(prevProps.view !== this.props.view){ //view changed; swap documents
let newDoc;
if(!this.state.docs[this.props.view]) {
newDoc = CodeMirror.Doc(this.props.value, this.props.language);
} else {
newDoc = this.state.docs[this.props.view];
}
const oldDoc = { [prevProps.view]: this.codeMirror.swapDoc(newDoc) };
this.setState((prevState)=>({
docs : _.merge({}, prevState.docs, oldDoc)
}));
this.props.rerenderParent();
} else if(this.codeMirror?.getValue() != this.props.value) { //update editor contents if brew.text is changed from outside
this.codeMirror.setValue(this.props.value);
}
},
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,
historyEventDelay : 250,
@@ -125,7 +144,7 @@ const CodeEditor = createClass({
//----------------------//
render : function(){
return <div className='codeEditor' ref='editor' />;
return <div className='codeEditor' ref='editor' style={this.props.style}/>;
}
});