f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-25 03:12:40 +00:00
Code Wiki Activity

Separate "style" and "metadata" panels

Browse Source
This commit is contained in:
Trevor Buckner
2021-06-05 15:58:31 -04:00
parent 1bc0964aff
commit e67fadef02
15 changed files with 340 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -11,28 +11,42 @@ if(typeof navigator !== 'undefined'){
//Language Modes
require('codemirror/mode/gfm/gfm.js'); //Github flavoured markdown
require('codemirror/mode/css/css.js');
require('codemirror/mode/javascript/javascript.js');
}
const CodeEditor = createClass({
getDefaultProps : function() {
return {
language : '',
value : '',
wrap : false,
onChange : function(){},
onCursorActivity : function(){},
language : '',
value : '',
wrap : true,
onChange : ()=>{}
};
},
componentDidMount : function() {
this.buildEditor();
},
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
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,
extraKeys : {
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,
extraKeys : {
'Ctrl-B' : this.makeBold,
'Cmd-B' : this.makeBold,
'Ctrl-I' : this.makeItalic,
@@ -42,8 +56,8 @@ const CodeEditor = createClass({
}
});
this.codeMirror.on('change', this.handleChange);
this.codeMirror.on('cursorActivity', this.handleCursorActivity);
// Note: codeMirror passes a copy of itself in this callback. cm === this.codeMirror. Either one works.
this.codeMirror.on('change', (cm)=>{this.props.onChange(cm.getValue());});
this.updateSize();
},
@@ -74,29 +88,20 @@ const CodeEditor = createClass({
}
},
componentDidUpdate : function(prevProps) {
if(this.codeMirror && this.codeMirror.getValue() != this.props.value) {
this.codeMirror.setValue(this.props.value);
}
},
//=-- Externally used -==//
setCursorPosition : function(line, char){
setTimeout(()=>{
this.codeMirror.focus();
this.codeMirror.doc.setCursor(line, char);
}, 10);
},
getCursorPosition : function(){
return this.codeMirror.getCursor();
},
updateSize : function(){
this.codeMirror.refresh();
},
handleChange : function(editor){
this.props.onChange(editor.getValue());
},
handleCursorActivity : function(){
this.props.onCursorActivity(this.codeMirror.doc.getCursor());
},
//----------------------//
render : function(){
return <div className='codeEditor' ref='editor' />;