fix the cursor

src/css/terminal.css

@@ -48,6 +48,14 @@
     outline: 0;
     border: none;
     margin-left: var(--cli-margin-left);
+
+    animation: blink 1s steps(1) infinite;
+}
+
+@keyframes blink {
+    50% {
+        opacity: 0;
+    }
 }
 
 #command-textbox {

src/js/cursor.ts

@@ -3,26 +3,14 @@
 
 import { cmdInput, $ } from "./dom.js"
 
-const cursorDelay = 600 // ms
 const cursor = "Û"
 let cmdCursor: HTMLTextAreaElement
-let interval: any
 
 export function initCursor() {
     cmdCursor = $("command-cursor") as HTMLTextAreaElement
-    enableCursor()
+    setCursor()
 
     cmdInput.addEventListener("keydown", showCursor)
-    cmdInput.addEventListener("keypress", showCursor)
-    cmdInput.addEventListener("input", showCursor)
-}
-
-function enableCursor() {
-    interval = setInterval(setCursor, cursorDelay)
-}
-
-function disableCursor() {
-    clearInterval(interval)
 }
 
 function setCursor() {
@@ -30,11 +18,12 @@ function setCursor() {
 }
 
 function showCursor(e: any) {
-    if (e.key === "Enter") {
+    if (e.key === "Enter" && !e.shiftKey) {
         cmdCursor.value = cursor
-    } else {
-        disableCursor()
-        cmdCursor.value = " ".repeat(cmdInput.value.length) + cursor
-        enableCursor()
+        return
     }
+
+    requestAnimationFrame(() =>
+        cmdCursor.value = " ".repeat(cmdInput.selectionEnd) + cursor
+    )
 }