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

Fix Codemirror Overflow

changelog.md

@@ -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**}}
 
 ##### 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)
 

client/homebrew/brewRenderer/brewRenderer.jsx

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

client/homebrew/editor/editor.jsx

@@ -14,7 +14,6 @@ const EDITOR_THEME_KEY = 'HOMEBREWERY-EDITOR-THEME';
 
 const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
 const SNIPPETBREAK_REGEX_V3 = /^\\snippet\ .*$/;
-const SNIPPETBAR_HEIGHT  = 25;
 const DEFAULT_STYLE_TEXT = dedent`
 				/*=======---  Example CSS styling  ---=======*/
 				/* Any CSS here will apply to your document! */
@@ -60,8 +59,9 @@ const Editor = createClass({
 	},
 	getInitialState : function() {
 		return {
-			editorTheme : this.props.editorTheme,
-			view        : 'text' //'text', 'style', 'meta', 'snippet'
+			editorTheme      : this.props.editorTheme,
+			view             : 'text', //'text', 'style', 'meta', 'snippet'
+			snippetbarHeight : 25
 		};
 	},
 
@@ -88,6 +88,7 @@ const Editor = createClass({
 				editorTheme : editorTheme
 			});
 		}
+		this.setState({ snippetbarHeight: document.querySelector('.editor > .snippetBar').offsetHeight });
 	},
 
 	componentDidUpdate : function(prevProps, prevState, snapshot) {
@@ -412,6 +413,9 @@ const Editor = createClass({
 	//Called when there are changes to the editor's dimensions
 	update : function(){
 		this.codeEditor.current?.updateSize();
+		const snipHeight = document.querySelector('.editor > .snippetBar').offsetHeight;
+		if(snipHeight !== this.state.snippetbarHeight)
+			this.setState({ snippetbarHeight: snipHeight });
 	},
 
 	updateEditorTheme : function(newTheme){
@@ -436,7 +440,8 @@ const Editor = createClass({
 					value={this.props.brew.text}
 					onChange={this.props.onTextChange}
 					editorTheme={this.state.editorTheme}
-					rerenderParent={this.rerenderParent} />
+					rerenderParent={this.rerenderParent}
+					style={{  height: `calc(100% - ${this.state.snippetbarHeight}px)` }} />
 			</>;
 		}
 		if(this.isStyle()){
@@ -449,7 +454,8 @@ const Editor = createClass({
 					onChange={this.props.onStyleChange}
 					enableFolding={true}
 					editorTheme={this.state.editorTheme}
-					rerenderParent={this.rerenderParent} />
+					rerenderParent={this.rerenderParent}
+					style={{  height: `calc(100% - ${this.state.snippetbarHeight}px)` }} />
 			</>;
 		}
 		if(this.isMeta()){
@@ -478,7 +484,8 @@ const Editor = createClass({
 					onChange={this.props.onSnipChange}
 					enableFolding={true}
 					editorTheme={this.state.editorTheme}
-					rerenderParent={this.rerenderParent} />
+					rerenderParent={this.rerenderParent}
+					style={{  height: `calc(100% - ${this.state.snippetbarHeight}px)` }} />
 			</>;
 		}
 	},

client/homebrew/editor/editor.less

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