mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-08 16:12:38 +00:00
fix snippetbar hidden
This commit is contained in:
@@ -58,7 +58,6 @@ const Editor = createClass({
|
|||||||
return {
|
return {
|
||||||
editorTheme : this.props.editorTheme,
|
editorTheme : this.props.editorTheme,
|
||||||
view : 'text', //'text', 'style', 'meta', 'snippet'
|
view : 'text', //'text', 'style', 'meta', 'snippet'
|
||||||
snippetbarHeight : 25
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -85,7 +84,18 @@ const Editor = createClass({
|
|||||||
editorTheme : editorTheme
|
editorTheme : editorTheme
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
this.setState({ snippetbarHeight: document.querySelector('.editor > .snippetBar').offsetHeight });
|
const snippetBar = document.querySelector('.editor > .snippetBar');
|
||||||
|
if (!snippetBar) return;
|
||||||
|
|
||||||
|
this.resizeObserver = new ResizeObserver(entries => {
|
||||||
|
// throttle/debounce inside if you like
|
||||||
|
const h = snippetBar.offsetHeight;
|
||||||
|
const editor = document.querySelector('.editor .codeEditor');
|
||||||
|
if (!editor) return;
|
||||||
|
editor.style.height = `calc(100% - ${h}px)`;
|
||||||
|
});
|
||||||
|
|
||||||
|
this.resizeObserver.observe(snippetBar);
|
||||||
},
|
},
|
||||||
|
|
||||||
componentDidUpdate : function(prevProps, prevState, snapshot) {
|
componentDidUpdate : function(prevProps, prevState, snapshot) {
|
||||||
@@ -108,6 +118,10 @@ const Editor = createClass({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
if (this.resizeObserver) this.resizeObserver.disconnect();
|
||||||
|
},
|
||||||
|
|
||||||
handleControlKeys : function(e){
|
handleControlKeys : function(e){
|
||||||
if(!(e.ctrlKey && e.metaKey && e.shiftKey)) return;
|
if(!(e.ctrlKey && e.metaKey && e.shiftKey)) return;
|
||||||
const LEFTARROW_KEY = 37;
|
const LEFTARROW_KEY = 37;
|
||||||
@@ -407,13 +421,6 @@ const Editor = createClass({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
//Called when there are changes to the editor's dimensions
|
|
||||||
update : function(){
|
|
||||||
const snipHeight = document.querySelector('.editor > .snippetBar').offsetHeight;
|
|
||||||
if(snipHeight !== this.state.snippetbarHeight)
|
|
||||||
this.setState({ snippetbarHeight: snipHeight });
|
|
||||||
},
|
|
||||||
|
|
||||||
updateEditorTheme : function(newTheme){
|
updateEditorTheme : function(newTheme){
|
||||||
window.localStorage.setItem(EDITOR_THEME_KEY, newTheme);
|
window.localStorage.setItem(EDITOR_THEME_KEY, newTheme);
|
||||||
this.setState({
|
this.setState({
|
||||||
@@ -437,7 +444,7 @@ const Editor = createClass({
|
|||||||
onChange={this.props.onBrewChange('text')}
|
onChange={this.props.onBrewChange('text')}
|
||||||
editorTheme={this.state.editorTheme}
|
editorTheme={this.state.editorTheme}
|
||||||
rerenderParent={this.rerenderParent}
|
rerenderParent={this.rerenderParent}
|
||||||
style={{ height: `calc(100% - ${this.state.snippetbarHeight}px)` }} />
|
style={{ height: `calc(100% - 26px)` }} />
|
||||||
</>;
|
</>;
|
||||||
}
|
}
|
||||||
if(this.isStyle()){
|
if(this.isStyle()){
|
||||||
@@ -451,7 +458,7 @@ const Editor = createClass({
|
|||||||
enableFolding={true}
|
enableFolding={true}
|
||||||
editorTheme={this.state.editorTheme}
|
editorTheme={this.state.editorTheme}
|
||||||
rerenderParent={this.rerenderParent}
|
rerenderParent={this.rerenderParent}
|
||||||
style={{ height: `calc(100% - ${this.state.snippetbarHeight}px)` }} />
|
style={{ height: `calc(100% - 26px)` }} />
|
||||||
</>;
|
</>;
|
||||||
}
|
}
|
||||||
if(this.isMeta()){
|
if(this.isMeta()){
|
||||||
@@ -468,7 +475,6 @@ const Editor = createClass({
|
|||||||
userThemes={this.props.userThemes}/>
|
userThemes={this.props.userThemes}/>
|
||||||
</>;
|
</>;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(this.isSnip()){
|
if(this.isSnip()){
|
||||||
if(!this.props.brew.snippets) { this.props.brew.snippets = DEFAULT_SNIPPET_TEXT; }
|
if(!this.props.brew.snippets) { this.props.brew.snippets = DEFAULT_SNIPPET_TEXT; }
|
||||||
return <>
|
return <>
|
||||||
@@ -481,7 +487,7 @@ const Editor = createClass({
|
|||||||
enableFolding={true}
|
enableFolding={true}
|
||||||
editorTheme={this.state.editorTheme}
|
editorTheme={this.state.editorTheme}
|
||||||
rerenderParent={this.rerenderParent}
|
rerenderParent={this.rerenderParent}
|
||||||
style={{ height: `calc(100% - ${this.state.snippetbarHeight}px)` }} />
|
style={{ height: `calc(100% - 26px)` }} />
|
||||||
</>;
|
</>;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user