feat: handle smartphone keyboard composition

static/js/main.js

@@ -143,20 +143,27 @@ function textKeyUpHandler(e) {
 
 function liveTextKeyUpHandler(e) {
   const value = e.target.value
+  const size = value.length
+
+  const messages = []
+
+  if (size > 0) {
+    messages.push('{"type":"text","value": "' + (value.replace('"', '\\"')) + '"}')
+
+    if (value[size-1] === ' ') {
+      messages.push('{"type":"key","value":"space"}')
+    }
+  }
 
   if (e.keyCode === 8) {
-    send('{"type":"key","value": "backspace"}')
-  } else if (e.keyCode === 13) {
-    send('{"type":"key","value": "enter"}')
-  } else if (value.length) {
-    if (value === ' ') {
-      send('{"type":"key","value": "space"}')
-    } else {
-      send('{"type":"text","value": "' + (value.replace('"', '\\"')) + '"}')
-    }
-
-    e.target.value = ''
+    messages.push('{"type":"key","value": "backspace"}')
+  } else if (e.keyCode === 13 && size === 0) {
+    messages.push('{"type":"key","value": "enter"}')
   }
+
+  send(`{"type":"messages","value":[${messages.join(',')}]}`)
+
+  e.target.value = ''
 }
 
 function shortcutsSpecialKeysOnChangeHandler(e) {
@@ -310,7 +317,26 @@ function addListeners() {
   addEventListenerOn('#text-clear', 'click', textClearClickHandler)
   addEventListenerOn('#text-send', 'click', textSendClickHandler)
   addEventListenerOn('#text', 'keyup', textKeyUpHandler)
-  addEventListenerOn('.live-text', 'keyup', liveTextKeyUpHandler)
+
+  Array.from(document.querySelectorAll('.live-text')).forEach((element) => {
+    element.setAttribute('data-composing', '0')
+
+    addEventListenerOn(element, 'compositionstart', (e) => {
+      element.setAttribute('data-composing', '1')
+    })
+
+    addEventListenerOn(element, 'compositionend', (e) => {
+      element.setAttribute('data-composing', '0')
+    })
+
+    addEventListenerOn(element, 'keyup', (e) => {
+      if (element.getAttribute('data-composing') === '1') {
+        return
+      }
+
+      liveTextKeyUpHandler(e)
+    })
+  })
 
   addEventListenerOn(scroller, 'touchstart', scrollerTouchStartHandler)
   addEventListenerOn(scroller, 'touchmove', scrollerTouchMoveHandler)

templates/page/home.html

@@ -30,7 +30,8 @@
 
                         {{if eq $value.Type "live_text"}}
                             <div class="form-group col-12">
-                                <input type="text" class="form-control live-text" name="text">
+                                <input type="text" class="form-control live-text" name="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
+                                <pre></pre>
                             </div>
                         {{end}}
 
@@ -115,7 +116,7 @@
                                         <input type="checkbox"> Screen
                                     </label>
                                 </div>
-                                <input type="text" id="mouse-text-live" class="form-control live-text" placeholder="Live text">
+                                <input type="text" id="mouse-text-live" class="form-control live-text" placeholder="Live text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
                             </div/>
                             <div id="scrollbar"></div>
                             <div id="pointer"></div>