Fixes for type area style

config.xml

@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="io.ionic.starter" version="1.4.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget id="io.ionic.starter" version="1.4.2" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>METAsocket</name>
     <description>WowApp's awesome instant messenger for the whole Greifentanzgeschwader</description>
     <author email="webmaster@sabolli.de" href="https://sabolli.de/metasocket/">sabolli</author>

src/app/chat/chat.component.html

@@ -14,7 +14,7 @@
 
   <div #chatTypeArea id="chat-type-area">
     <div id="textarea-container">
-      <textarea #chatTextArea [(ngModel)]="chatText" (input)="onInput($event)" id="chat-textarea" autofocus maxlength="2000"></textarea>
+      <textarea #chatTextArea [(ngModel)]="chatText" (input)="onInput()" id="chat-textarea" autofocus maxlength="2000"></textarea>
     </div>
     <button #buttonSend class="button-send-offline" (click)="postMessage()" id="button-send"></button>
   </div>

src/app/chat/chat.component.ts

@@ -138,9 +138,11 @@ export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, W
     }
   }
 
-  onInput(event): void {
+  onInput(): void {
     this.chatTypeArea.nativeElement.style.height = '50px';
-    this.chatTypeArea.nativeElement.style.height = event.target.scrollHeight > 50 ? event.target.scrollHeight + 'px' : '50px';
+    this.chatTypeArea.nativeElement.style.height = this.chatTextArea.nativeElement.scrollHeight > 50
+      ? this.chatTextArea.nativeElement.scrollHeight + 'px'
+      : '50px';
 
     if (this.chatTypeArea.nativeElement.clientHeight > window.innerHeight) {
       this.chatTypeArea.nativeElement.style.height = window.innerHeight + 'px';
@@ -154,6 +156,8 @@ export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, W
 
       this.websocketService.sendChatMessage(this.chatTextArea.nativeElement.value);
       this.chatTextArea.nativeElement.value = '';
+
+      this.onInput();
   }
 
   onLogout() {
@@ -220,7 +224,7 @@ export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, W
 
   citeUsername(username: string): void
   {
-    this.insertIntoTextareaCursorPosition('@' + username);
+    this.insertIntoTextareaCursorPosition('@' + username, false);
   }
 
   citeMessage(username: string, message: string): void
@@ -319,16 +323,23 @@ export class ChatComponent implements OnInit, AfterViewInit, AfterViewChecked, W
     return parsedText;
   }
 
-  private insertIntoTextareaCursorPosition(text: string): void
+  private insertIntoTextareaCursorPosition(text: string, isCite: boolean = true): void
   {
     const textarea = this.chatTextArea.nativeElement;
 
+    const selectionStartBuffer = textarea.selectionStart;
+    const selectionEndBuffer = textarea.selectionEnd;
+
     const textLength = textarea.value.length;
-    const messagePartA = textarea.value.substr(0, textarea.selectionStart) + (textarea.selectionStart > 0 ? '\n' : '');
+    const messagePartA = textarea.value.substr(0, textarea.selectionStart) + (isCite && textarea.selectionStart > 0 ? '\n' : '');
     const messagePartB = textarea.value.substr(textarea.selectionStart, textLength);
 
-    textarea.value = messagePartA.trim() + text + messagePartB.trim();
+    textarea.value = isCite ? messagePartA + text + messagePartB : messagePartA + text + messagePartB.trim();
     textarea.focus();
+    textarea.selectionStart = selectionStartBuffer + text.length;
+    textarea.selectionEnd = selectionEndBuffer + text.length;
+
+    this.onInput();
   }
 
   private enableSendButton(): void

src/assets/graphics/button_send.svg

@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   id="svg9367"
+   version="1.1"
+   viewBox="0 0 75.361905 75.361907"
+   height="75.361908mm"
+   width="75.361908mm"
+   sodipodi:docname="button_send.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1829"
+     inkscape:window-height="1016"
+     id="namedview1452"
+     showgrid="false"
+     inkscape:zoom="1.0134608"
+     inkscape:cx="298.30195"
+     inkscape:cy="201.14212"
+     inkscape:window-x="91"
+     inkscape:window-y="27"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg9367"
+     inkscape:document-rotation="0"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <defs
+     id="defs9361" />
+  <metadata
+     id="metadata9364">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <path
+     id="rect868"
+     style="fill:#ffffff;fill-opacity:1;stroke-width:1.32332;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.858824"
+     d="M 21.344179,9.9768509 9.9768509,21.344179 l 6.3134011,6.313973 11.3679,-11.367328 z m 32.673551,0 -6.313973,6.3139731 11.367331,11.367328 6.31397,-6.313973 z M 31.279638,16.143628 v 3.064202 l 3.201089,3.304183 h 3.199369 3.201089 L 44.082272,19.20783 V 16.143628 H 37.680096 Z M 16.144774,31.278491 v 6.402751 6.401604 h 3.063628 l 3.304183,-3.201089 v -3.200515 -3.201089 l -3.304183,-3.201662 z m 40.008736,0 -3.304759,3.201662 v 3.201089 3.200515 l 3.304759,3.201089 h 3.063627 V 37.681242 31.278491 Z M 16.290252,47.703757 9.9768509,54.01773 21.344179,65.385058 27.658152,59.07166 Z m 42.780836,0 L 47.703757,59.07166 54.01773,65.385058 65.385058,54.01773 Z m -24.590361,5.146713 -3.201089,3.304183 v 3.063058 h 6.400458 6.402176 V 56.154653 L 40.881185,52.85047 h -3.201089 z" />
+</svg>