diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 9e6178f3e..d00a126e3 100644 --- a/client/homebrew/editor/editor.jsx +++ b/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,13 +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); @@ -150,8 +136,7 @@ const Editor = createClass({ view : newView }, ()=>{ this.codeEditor.current?.codeMirror.focus(); - this.updateEditorSize(); - }); //TODO: not sure if updateeditorsize needed + }); }, highlightCustomMarkdown : function(){ diff --git a/client/homebrew/editor/editor.less b/client/homebrew/editor/editor.less index 5511bee6e..974403447 100644 --- a/client/homebrew/editor/editor.less +++ b/client/homebrew/editor/editor.less @@ -1,11 +1,16 @@ @import 'themes/codeMirror/customEditorStyles.less'; .editor { + height:100%; position : relative; width : 100%; container : editor / inline-size; .codeEditor { height : 100%; + + .CodeMirror { + height:100%; + } .pageLine { background : #33333328; border-top : #333399 solid 1px; @@ -104,3 +109,11 @@ } } + + +@container editor (width < 553px) { + + .editor .codeEditor .CodeMirror { + height:calc(100% - 51px) ; + } +} \ No newline at end of file