mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-08 09:42:43 +00:00
use js for it
This commit is contained in:
@@ -14,7 +14,6 @@ const EDITOR_THEME_KEY = 'HOMEBREWERY-EDITOR-THEME';
|
|||||||
|
|
||||||
const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
|
const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
|
||||||
const SNIPPETBREAK_REGEX_V3 = /^\\snippet\ .*$/;
|
const SNIPPETBREAK_REGEX_V3 = /^\\snippet\ .*$/;
|
||||||
const SNIPPETBAR_HEIGHT = 25;
|
|
||||||
const DEFAULT_STYLE_TEXT = dedent`
|
const DEFAULT_STYLE_TEXT = dedent`
|
||||||
/*=======--- Example CSS styling ---=======*/
|
/*=======--- Example CSS styling ---=======*/
|
||||||
/* Any CSS here will apply to your document! */
|
/* Any CSS here will apply to your document! */
|
||||||
@@ -60,8 +59,9 @@ const Editor = createClass({
|
|||||||
},
|
},
|
||||||
getInitialState : function() {
|
getInitialState : function() {
|
||||||
return {
|
return {
|
||||||
editorTheme : this.props.editorTheme,
|
editorTheme : this.props.editorTheme,
|
||||||
view : 'text' //'text', 'style', 'meta', 'snippet'
|
view : 'text', //'text', 'style', 'meta', 'snippet'
|
||||||
|
snippetbarHeight : 25
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
@@ -88,6 +88,7 @@ const Editor = createClass({
|
|||||||
editorTheme : editorTheme
|
editorTheme : editorTheme
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
this.setState({ snippetbarHeight: document.querySelector('.editor > .snippetBar').offsetHeight });
|
||||||
},
|
},
|
||||||
|
|
||||||
componentDidUpdate : function(prevProps, prevState, snapshot) {
|
componentDidUpdate : function(prevProps, prevState, snapshot) {
|
||||||
@@ -412,6 +413,9 @@ const Editor = createClass({
|
|||||||
//Called when there are changes to the editor's dimensions
|
//Called when there are changes to the editor's dimensions
|
||||||
update : function(){
|
update : function(){
|
||||||
this.codeEditor.current?.updateSize();
|
this.codeEditor.current?.updateSize();
|
||||||
|
const snipHeight = document.querySelector('.editor > .snippetBar').offsetHeight;
|
||||||
|
if(snipHeight !== this.state.snippetbarHeight)
|
||||||
|
this.setState({ snippetbarHeight: snipHeight });
|
||||||
},
|
},
|
||||||
|
|
||||||
updateEditorTheme : function(newTheme){
|
updateEditorTheme : function(newTheme){
|
||||||
@@ -436,7 +440,8 @@ const Editor = createClass({
|
|||||||
value={this.props.brew.text}
|
value={this.props.brew.text}
|
||||||
onChange={this.props.onTextChange}
|
onChange={this.props.onTextChange}
|
||||||
editorTheme={this.state.editorTheme}
|
editorTheme={this.state.editorTheme}
|
||||||
rerenderParent={this.rerenderParent} />
|
rerenderParent={this.rerenderParent}
|
||||||
|
style={{ height: `calc(100% - ${this.state.snippetbarHeight}px)` }} />
|
||||||
</>;
|
</>;
|
||||||
}
|
}
|
||||||
if(this.isStyle()){
|
if(this.isStyle()){
|
||||||
@@ -449,7 +454,8 @@ const Editor = createClass({
|
|||||||
onChange={this.props.onStyleChange}
|
onChange={this.props.onStyleChange}
|
||||||
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)` }} />
|
||||||
</>;
|
</>;
|
||||||
}
|
}
|
||||||
if(this.isMeta()){
|
if(this.isMeta()){
|
||||||
@@ -478,7 +484,8 @@ const Editor = createClass({
|
|||||||
onChange={this.props.onSnipChange}
|
onChange={this.props.onSnipChange}
|
||||||
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)` }} />
|
||||||
</>;
|
</>;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -108,9 +108,4 @@
|
|||||||
span { padding : 2px 5px; }
|
span { padding : 2px 5px; }
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
@container editor (width < 683px) {
|
|
||||||
.editor .codeEditor { height : calc(100% - 51px);}
|
|
||||||
.homePage .editor .codeEditor { height : calc(100% - 25px);}
|
|
||||||
}
|
}
|
||||||
Reference in New Issue
Block a user