f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-15 10:32:45 +00:00
Code Wiki Activity

Merge pull request #4207 from naturalcrit/fix-codemirror-overflow

Browse Source 
Fix Codemirror Overflow
This commit is contained in:
Trevor Buckner
2025-05-23 10:03:26 -04:00
committed by GitHub
parent 03602ae1e0 6e72fe2600
commit c051580545
4 changed files with 15 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
changelog.md
View File

@@ -130,7 +130,7 @@ Fixes issue [#4146](https://github.com/naturalcrit/homebrewery/issues/4146)
New snippet found at {{openSans **:fas_pencil: TEXT EDITOR :fas_arrow_right: :fas_bookmark: PAGE NUMBERING :fas_arrow_right: :fas_arrow_down_1_9: VARIABLE AUTO PAGE NUMBER**}} New snippet found at {{openSans **:fas_pencil: TEXT EDITOR :fas_arrow_right: :fas_bookmark: PAGE NUMBERING :fas_arrow_right: :fas_arrow_down_1_9: VARIABLE AUTO PAGE NUMBER**}}
##### 5e-Cleric ##### 5e-Cleric
* [x] Fix search bar covering up snippet bar * [x] Fix search bar covering up snippet bar (3 times)
Fixes issue [#4098](https://github.com/naturalcrit/homebrewery/issues/4098) Fixes issue [#4098](https://github.com/naturalcrit/homebrewery/issues/4098)

1
client/homebrew/brewRenderer/brewRenderer.jsx
View File

@@ -119,7 +119,6 @@ const BrewRenderer = (props)=>{
//useEffect to store or gather toolbar state from storage //useEffect to store or gather toolbar state from storage
useEffect(()=>{ useEffect(()=>{
const toolbarState = JSON.parse(window.localStorage.getItem('hb_toolbarState')); const toolbarState = JSON.parse(window.localStorage.getItem('hb_toolbarState'));
console.log('toolbar state:', toolbarState);
toolbarState && setDisplayOptions(toolbarState); toolbarState && setDisplayOptions(toolbarState);
}, []); }, []);

19
client/homebrew/editor/editor.jsx
View File

@@ -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)` }} />
</>; </>;
} }
}, },

7
client/homebrew/editor/editor.less
View File

@@ -5,7 +5,7 @@
height : 100%; height : 100%;
container : editor / inline-size; container : editor / inline-size;
.codeEditor { .codeEditor {
height : 100%; height : calc(100% - 25px);
.CodeMirror { height : 100%; } .CodeMirror { height : 100%; }
.pageLine, .snippetLine { .pageLine, .snippetLine {
background : #33333328; background : #33333328;
@@ -108,9 +108,4 @@
span { padding : 2px 5px; } span { padding : 2px 5px; }
} }
}
@container editor (width < 683px) {
.editor .codeEditor .CodeMirror { height : calc(100% - 51px);}
.homePage .editor .codeEditor .CodeMirror { height : calc(100% - 25px);}
} }