From d1a058b83696e79ab9f339c16dc66b3172a5da49 Mon Sep 17 00:00:00 2001
From: Henning Dieterichs <henning.dieterichs@live.de>
Date: Wed, 12 Feb 2020 15:14:11 +0100
Subject: [PATCH] Implements multiline expression input.

---
 .../ui/src/Components/ExpressionInput.tsx     | 47 ++++++++++++-------
 extension/ui/src/style.scss                   |  5 +-
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/extension/ui/src/Components/ExpressionInput.tsx b/extension/ui/src/Components/ExpressionInput.tsx
index 60be078..e7c4723 100644
--- a/extension/ui/src/Components/ExpressionInput.tsx
+++ b/extension/ui/src/Components/ExpressionInput.tsx
@@ -2,7 +2,6 @@ import React = require("react");
 import { Model } from "../Model/Model";
 import { observer, disposeOnUnmount } from "mobx-react";
 import { observable, action, autorun } from "mobx";
-
 import * as monaco from "monaco-editor";
 
 export function getModel(): monaco.editor.ITextModel {
@@ -15,16 +14,22 @@ export function getModel(): monaco.editor.ITextModel {
 
 @observer
 export class ExpressionInput extends React.Component<{ model: Model }> {
-	@action.bound
-	submit() {
-		const val = this.model.getValue();
-		console.log(val);
-		this.props.model.setExpression(val);
-	}
 	@observable private editor: monaco.editor.IStandaloneCodeEditor | undefined;
-
+	@observable private contentHeight: number | undefined = undefined;
 	private model = getModel();
 
+	render() {
+		return (
+			<div className="component-monaco-editor">
+				<div
+					style={{ height: this.contentHeight }}
+					className="part-editor"
+					ref={this.setEditorDiv}
+				/>
+			</div>
+		);
+	}
+
 	componentWillUnmount() {
 		if (this.editor) {
 			this.editor.dispose();
@@ -65,20 +70,28 @@ export class ExpressionInput extends React.Component<{ model: Model }> {
 			},
 		});
 
+		this.editor.onDidContentSizeChange(e => {
+			this.contentHeight = e.contentHeight;
+		});
+
 		this.editor.onKeyDown(e => {
 			if (e.keyCode == monaco.KeyCode.Enter) {
-				e.preventDefault();
-				e.stopPropagation();
-				this.submit();
+				if (
+					(this.model.getLineCount() <= 1 || e.ctrlKey) &&
+					!e.shiftKey
+				) {
+					e.preventDefault();
+					e.stopPropagation();
+					this.submit();
+				}
 			}
 		});
 	};
 
-	render() {
-		return (
-			<div className="component-monaco-editor2">
-				<div className="part-editor" ref={this.setEditorDiv} />
-			</div>
-		);
+	@action.bound
+	submit() {
+		const val = this.model.getValue();
+		console.log(val);
+		this.props.model.setExpression(val);
 	}
 }
diff --git a/extension/ui/src/style.scss b/extension/ui/src/style.scss
index 23aa57b..b3e1f0d 100644
--- a/extension/ui/src/style.scss
+++ b/extension/ui/src/style.scss
@@ -120,8 +120,7 @@ body,
 	}
 }
 
-.component-monaco-editor2 {
-	height: 23px;
+.component-monaco-editor {
 	width: 100%;
 	min-width: 0;
 	box-sizing: border-box;
@@ -129,8 +128,6 @@ body,
 	padding: 2px;
 	background-color: white;
 
-	// overflow: hidden;
-
 	.part-editor {
 		min-width: 0;
 		min-height: 0;