Merge branch 'master' into dependabot/npm_and_yarn/marked-15.0.8

client/homebrew/editor/editor.jsx

@@ -13,7 +13,6 @@ const MetadataEditor = require('./metadataEditor/metadataEditor.jsx');
 const EDITOR_THEME_KEY = 'HOMEBREWERY-EDITOR-THEME';
 
 const PAGEBREAK_REGEX_V3 = /^(?=\\page(?: *{[^\n{}]*})?$)/m;
-const SNIPPETBAR_HEIGHT  = 25;
 const DEFAULT_STYLE_TEXT = dedent`
 				/*=======---  Example CSS styling  ---=======*/
 				/* Any CSS here will apply to your document! */
@@ -65,9 +64,7 @@ const Editor = createClass({
 
 	componentDidMount : function() {
 
-		this.updateEditorSize();
 		this.highlightCustomMarkdown();
-		window.addEventListener('resize', this.updateEditorSize);
 		document.getElementById('BrewRenderer').addEventListener('keydown', this.handleControlKeys);
 		document.addEventListener('keydown', this.handleControlKeys);
 
@@ -82,10 +79,6 @@ const Editor = createClass({
 		}
 	},
 
-	componentWillUnmount : function() {
-		window.removeEventListener('resize', this.updateEditorSize);
-	},
-
 	componentDidUpdate : function(prevProps, prevState, snapshot) {
 
 		this.highlightCustomMarkdown();
@@ -118,14 +111,6 @@ const Editor = createClass({
 		}
 	},
 
-	updateEditorSize : function() {
-		if(this.codeEditor.current) {
-			let paneHeight = this.editor.current.parentNode.clientHeight;
-			paneHeight -= SNIPPETBAR_HEIGHT;
-			this.codeEditor.current.codeMirror.setSize(null, paneHeight);
-		}
-	},
-
 	updateCurrentCursorPage : function(cursor) {
 		const lines = this.props.brew.text.split('\n').slice(1, cursor.line + 1);
 		const pageRegex = this.props.brew.renderer == 'V3' ? PAGEBREAK_REGEX_V3 : /\\page/;
@@ -150,8 +135,7 @@ const Editor = createClass({
 			view : newView
 		}, ()=>{
 			this.codeEditor.current?.codeMirror.focus();
-			this.updateEditorSize();
-		});	//TODO: not sure if updateeditorsize needed
+		});
 	},
 
 	highlightCustomMarkdown : function(){

client/homebrew/editor/editor.less

@@ -2,10 +2,11 @@
 .editor {
 	position  : relative;
 	width     : 100%;
+	height    : 100%;
 	container : editor / inline-size;
-
 	.codeEditor {
 		height            : 100%;
+		.CodeMirror { height : 100%; }
 		.pageLine {
 			background : #33333328;
 			border-top : #333399 solid 1px;
@@ -104,3 +105,7 @@
 	}
 
 }
+
+@container editor (width < 553px) {
+	.editor .codeEditor .CodeMirror { height : calc(100% - 51px);}
+}