Use a textarea instead of an input for channel messages

client/css/style.css

@@ -501,10 +501,11 @@ button {
 	border-radius: 2px;
 	bottom: 4px;
 	left: 220px;
-	overflow: hidden;
 	position: absolute;
 	right: 5px;
 	top: 4px;
+	display: flex;
+	flex-direction: column;
 }
 
 .signed-out #main {
@@ -520,10 +521,9 @@ button {
 }
 
 #windows {
-	bottom: 48px;
+	position: relative;
-	position: absolute;
+	overflow: hidden;
-	top: 0;
+	flex: 1;
-	width: 100%;
 }
 
 #windows label {
@@ -1172,32 +1172,23 @@ button {
 #form {
 	background: #eee;
 	border-top: 1px solid #ddd;
-	bottom: 0;
+	min-height: 48px;
-	height: 48px;
+	flex: 0 0 auto;
-	left: 0;
+	padding: 7px;
-	position: absolute;
-	right: 0;
-}
-
-#form .inner {
-	bottom: 7px;
-	left: 7px;
-	position: absolute;
-	right: 7px;
-	top: 6px;
 }
 
 #form .input {
 	font: 12px Consolas, Menlo, Monaco, "Lucida Console", "DejaVu Sans Mono", "Courier New", monospace;
-	left: 0;
+	border: 1px solid #ddd;
-	height: 34px;
+	border-radius: 2px;
-	position: relative;
+	background: white;
+	display: flex;
+	align-items: flex-end;
 }
 
 #form #nick {
 	background: #f6f6f6;
 	color: #666;
-	position: absolute;
 	font: inherit;
 	font-size: 11px;
 	margin: 5px;
@@ -1210,6 +1201,7 @@ button {
 	-moz-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
+	flex: 0 0 auto;
 }
 
 #form #nick:empty {
@@ -1221,24 +1213,27 @@ button {
 }
 
 #form #input {
-	border: 1px solid #ddd;
+	background: transparent;
+	border: none;
 	font: inherit;
-	border-radius: 2px;
+	height: 18px;
-	height: 100%;
+	max-height: 90px;
+	line-height: 1.5;
 	outline: none;
-	padding: 0 34px 0 10px;
+	margin: 5px;
-	-webkit-appearance: none;
+	padding: 0;
-	width: 100%;
+	resize: none;
+	flex: 1 0 auto;
+	align-self: center;
 }
 
 #form #submit {
 	color: #9ca5b4;
 	height: 34px;
 	line-height: 34px;
-	position: absolute;
-	right: 0;
 	transition: opacity .3s;
 	width: 34px;
+	flex: 0 0 auto;
 }
 
 #form #submit:before {

client/index.html

@@ -324,12 +324,10 @@
 				</div>
 			</div>
 			<form id="form" method="post" action="">
-				<div class="inner">
 				<div class="input">
 					<label for="input" id="nick"></label>
+					<textarea id="input" class="mousetrap"></textarea>
 					<button id="submit" type="submit" title="Send" aria-label="Send message"></button>
-						<input id="input" class="mousetrap">
-					</div>
 				</div>
 			</form>
 		</div>

client/js/libs/jquery/inputhistory.js

@@ -32,6 +32,10 @@
 			var key = e.which;
 			switch (key) {
 			case 13: // Enter
+				if (e.shiftKey) {
+					return; // multiline input
+				}
+				
 				if (self.val() != "") {
 					i = history.length;
 					history[i - 1] = self.val();
@@ -53,6 +57,17 @@
 				if (e.ctrlKey || e.metaKey) {
 					break;
 				}
+				
+				if (
+					this.value.indexOf("\n") >= 0
+					&&
+					(key === 38 && this.selectionStart > 0)
+					||
+					(key === 40 && this.selectionStart < this.value.length))
+				{
+					return; // don't prevent default
+				}
+
 				history[i] = self.val();
 				if (key == 38 && i != 0) {
 					i--;

client/js/lounge.js

@@ -621,6 +621,19 @@ $(function() {
 
 	var input = $("#input")
 		.history()
+		.on("input keyup", function() {
+			var style = window.getComputedStyle(this);
+			this.style.height = "0px";
+			this.offsetHeight; // force reflow
+			this.style.height = Math.min(
+				Math.round(window.innerHeight - 100), // prevent overflow
+				this.scrollHeight
+				+ Math.round(parseFloat(style.borderTopWidth) || 0)
+				+ Math.round(parseFloat(style.borderBottomWidth) || 0)
+			) + "px";
+
+			$("#chat .chan.active .chat").trigger("msg.sticky"); // fix growing
+		})
 		.tab(complete, {hint: false});
 
 	var form = $("#form");
@@ -1133,10 +1146,7 @@ $(function() {
 	}
 
 	function setNick(nick) {
-		var width = $("#nick")
+		$("#nick").text(nick);
-			.html(nick)
-			.outerWidth(true);
-		input.css("padding-left", width);
 	}
 
 	function move(array, old_index, new_index) {

client/themes/morning.css

@@ -145,7 +145,7 @@ body {
 	border-color: #242a33;
 }
 
-#form #input {
+#form .input {
 	background-color: #2e3642;
 	border-color: #242a33;
 	color: #ccc;

client/themes/zenburn.css

@@ -172,7 +172,7 @@ body {
 	border-color: #101010;
 }
 
-#form #input {
+#form .input {
 	background-color: #434443;
 	border-color: #101010;
 	color: #dcdccc;

src/client.js

@@ -300,6 +300,14 @@ Client.prototype.setPassword = function(hash, callback) {
 };
 
 Client.prototype.input = function(data) {
+	var client = this;
+	data.text.split("\n").forEach(function(line) {
+		data.text = line;
+		client.inputLine(data);
+	});
+};
+
+Client.prototype.inputLine = function(data) {
 	var client = this;
 	var text = data.text;
 	var target = client.find(data.target);