diff --git a/src/css/terminal.css b/src/css/terminal.css index 0467567..51ac175 100644 --- a/src/css/terminal.css +++ b/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 { diff --git a/src/js/cursor.ts b/src/js/cursor.ts index 593e755..1d9f9e0 100644 --- a/src/js/cursor.ts +++ b/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 + ) } \ No newline at end of file