Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-02 18:39:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

calculate editor height correctly (#367)

Browse Source
This commit is contained in:
Mike Sawka 2024-03-01 18:28:39 -08:00 committed by GitHub
parent adf83c73b1
commit 31b9c3d3a5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/plugins/code/code.less
View File

@ -76,7 +76,7 @@
.split-horizontal {
display: flex;
width: 100%;
height: calc(100% - var(--termlineheight) - 7px);
height: calc(100% - var(--termlineheight) - 11px);
border-bottom: 1px solid var(--app-border-color);
}

45
src/plugins/code/code.tsx
View File

@ -86,7 +86,7 @@ class SourceCodeRenderer extends React.Component<
constructor(props) {
super(props);
this.monacoEditor = null;
const editorHeight = Math.max(props.savedHeight - 25, 0); // must subtract the padding/margin to get the real editorHeight
const editorHeight = Math.max(props.savedHeight - this.getEditorHeightBuffer(), 0); // must subtract the padding/margin to get the real editorHeight
this.markdownRef = React.createRef();
this.syncing = false;
let isClosed = props.lineState["prompt:closed"];
@ -322,14 +322,19 @@ class SourceCodeRenderer extends React.Component<
});
};
getEditorHeightBuffer(): number {
const heightBuffer = GlobalModel.lineHeightEnv.lineHeight + 11;
return heightBuffer;
}
setEditorHeight = () => {
const fullWindowHeight = this.props.opts.maxSize.height;
let _editorHeight = fullWindowHeight;
const maxEditorHeight = this.props.opts.maxSize.height - this.getEditorHeightBuffer();
let _editorHeight = maxEditorHeight;
let allowEditing = this.getAllowEditing();
if (!allowEditing) {
const noOfLines = Math.max(this.state.code.split("\n").length, 5);
const lineHeight = Math.ceil(GlobalModel.lineHeightEnv.lineHeight);
_editorHeight = Math.min(noOfLines * lineHeight + 10, fullWindowHeight);
_editorHeight = Math.min(noOfLines * lineHeight + 10, maxEditorHeight);
}
this.setState({ editorHeight: _editorHeight }, () => {
if (this.props.isSelected) {
@ -368,26 +373,28 @@ class SourceCodeRenderer extends React.Component<
return opts;
}
getCodeEditor = () => (
<div style={{ maxHeight: this.props.opts.maxSize.height }}>
{this.state.showReadonly && <div className="readonly">{"read-only"}</div>}
<Editor
theme="wave-theme"
height={this.state.editorHeight}
defaultLanguage={this.state.selectedLanguage}
value={this.state.code}
onMount={this.handleEditorDidMount}
options={this.getEditorOptions()}
onChange={this.handleEditorChange}
/>
</div>
);
getCodeEditor = () => {
return (
<div className="editor-wrap" style={{ maxHeight: this.state.editorHeight }}>
{this.state.showReadonly && <div className="readonly">{"read-only"}</div>}
<Editor
theme="wave-theme"
height={this.state.editorHeight}
defaultLanguage={this.state.selectedLanguage}
value={this.state.code}
onMount={this.handleEditorDidMount}
options={this.getEditorOptions()}
onChange={this.handleEditorChange}
/>
</div>
);
};
getPreviewer = () => {
return (
<div
className="scroller"
style={{ maxHeight: this.props.opts.maxSize.height }}
style={{ maxHeight: this.state.editorHeight }}
ref={this.markdownRef}
onScroll={() => this.handleDivScroll()}
>