Fix emoji editor

resources/chatbox.scss

@@ -32,10 +32,6 @@
 .big-emoji {
     font-size: 16px;
 }
-#chat-input, #chat-log .content-message {
-    font-family: "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Twemoji Mozilla","Noto Color Emoji", "EmojiOne Color","Android Emoji", "Segoe UI", "Lucida Grande", Arial, sans-serif;
-}
-
 #chat-online {
     border-right: 1px solid #ccc;
     padding-bottom: 0 !important;

templates/chat/chat.html

@@ -146,6 +146,25 @@
         element.html(html);
     }
 
+    function insert_char_after_cursor(elem, char) {
+        var val = elem.value;
+        if (typeof elem.selectionStart == "number" && typeof elem.selectionEnd == "number") {
+            var start = elem.selectionStart;
+            var prefix = elem.value.slice(0, start);
+            var prefix_added = prefix + char;
+            var chars = [...val];
+            chars.splice([...prefix].length, 0, char);
+            elem.value = chars.join('');
+            elem.selectionStart = elem.selectionEnd = prefix_added.length;
+        } else if (document.selection && document.selection.createRange) {
+            var range = document.selection.createRange();
+            elem.focus();
+            range.text = char;
+            range.collapse(false);
+            range.select();
+        }
+    }
+
     $(function() {
         $('#loader').hide();
         merge_authors();
@@ -191,18 +210,7 @@
         $('#chat-input').keydown(function(e) {
             if (e.keyCode === 13) {
                 if (e.ctrlKey || e.shiftKey) {
-                    var val = this.value;
+                    insert_char_after_cursor(this, "\n");
-                    if (typeof this.selectionStart == "number" && typeof this.selectionEnd == "number") {
-                        var start = this.selectionStart;
-                        this.value = val.slice(0, start) + "\n" + val.slice(this.selectionEnd);
-                        this.selectionStart = this.selectionEnd = start + 1;
-                    } else if (document.selection && document.selection.createRange) {
-                        this.focus();
-                        var range = document.selection.createRange();
-                        range.text = "\r\n";
-                        range.collapse(false);
-                        range.select();
-                    }
                 }
                 else {
                     e.preventDefault();
@@ -266,9 +274,9 @@
         });
 
         $('emoji-picker').on('emoji-click', function(e) {
-            var $chat = $('#chat-input');
+            var $chat = $('#chat-input').get(0);
-            var text = $chat.val();
+            insert_char_after_cursor($chat, e.detail.unicode);
-            $chat.val(text + e.detail.unicode);
+            $chat.focus();
         })
 
         document.addEventListener('keydown', function(e) {

templates/chat/chat_css.html

@@ -143,6 +143,9 @@
     .body-block:hover {
         background: #eee;
     }
+    #chat-input, #chat-log .content-message {
+        font-family: "Apple Color Emoji", "Segoe UI", "Lucida Grande", Arial, sans-serif;
+    }
     @media (min-width: 800px) {
         #page-container {
             position:fixed;