From 6450ebc24dce9312be69671e24b172b528b1df08 Mon Sep 17 00:00:00 2001 From: Chris Wanstrath Date: Sun, 21 Sep 2025 20:35:28 -0700 Subject: [PATCH] cursor stuff --- src/css/main.css | 5 +++++ src/css/terminal.css | 25 ------------------------- src/js/cursor.ts | 15 +++++++++++++++ src/js/input.ts | 18 ++++++++++++++++++ src/shared/utils.ts | 6 ++++++ 5 files changed, 44 insertions(+), 25 deletions(-) diff --git a/src/css/main.css b/src/css/main.css index 329d72d..65628a0 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -66,6 +66,11 @@ background: var(--background-color); } +::selection { + background-color: #9fa3ff; + color: var(--c64-dark-blue); +} + html, body { font-family: var(--font-family); diff --git a/src/css/terminal.css b/src/css/terminal.css index 51ac175..c54ffc0 100644 --- a/src/css/terminal.css +++ b/src/css/terminal.css @@ -105,33 +105,8 @@ margin-left: var(--cli-margin-left); } -/* Custom Cursor */ -.custom-cursor { - position: absolute; - width: 1ch; - height: 1em; - background: var(--c64-light-blue); - pointer-events: none; - z-index: 3; - animation: blink 1s infinite; -} - -@keyframes blink { - - 0%, - 50% { - opacity: 1; - } - - 51%, - 100% { - opacity: 0; - } -} - /* The scrollback shows your previous inputs and outputs. */ - #scrollback { overflow-y: auto; margin: 0; diff --git a/src/js/cursor.ts b/src/js/cursor.ts index 471566e..cc116d8 100644 --- a/src/js/cursor.ts +++ b/src/js/cursor.ts @@ -5,14 +5,21 @@ import { cmdInput, $ } from "./dom.js" const cursor = "Û" let cmdCursor: HTMLTextAreaElement +let enabled = true export function initCursor() { cmdCursor = $("command-cursor") as HTMLTextAreaElement cmdInput.addEventListener("keydown", showCursor) + document.addEventListener("focus", cursorEnablerHandler, true) showCursor() } function showCursor(e: KeyboardEvent | any = {}) { + if (!enabled) { + cmdCursor.value = "" + return + } + if (e.key === "Enter" && !e.shiftKey) { cmdCursor.value = cursor return @@ -23,6 +30,14 @@ function showCursor(e: KeyboardEvent | any = {}) { ) } +function cursorEnablerHandler(e: Event) { + if (!e.target) return + const target = e.target as HTMLElement + + enabled = target.id === "command-textbox" + showCursor() +} + function buildBlankCursorLine(): string { let line = "" for (const char of cmdInput.value.slice(0, cmdInput.selectionEnd)) { diff --git a/src/js/input.ts b/src/js/input.ts index 59a45df..5ac78d3 100644 --- a/src/js/input.ts +++ b/src/js/input.ts @@ -4,9 +4,11 @@ import { cmdInput, cmdLine } from "./dom.js" import { runCommand } from "./shell.js" import { resetHistory } from "./history.js" +import { countChar } from "../shared/utils.js" export function initInput() { cmdInput.addEventListener("keydown", inputHandler) + cmdInput.addEventListener("paste", pasteHandler) } function inputHandler(event: KeyboardEvent) { @@ -28,8 +30,24 @@ function inputHandler(event: KeyboardEvent) { } } +function pasteHandler(event: ClipboardEvent) { + const text = event.clipboardData?.getData("text") || "" + + if (!text.includes("\n")) { + delete cmdLine.dataset.extended + return + } + + setTimeout(() => { + cmdInput.style.height = "auto" + cmdInput.style.height = cmdInput.scrollHeight + "px" + cmdLine.dataset.extended = "true" + }, 0) +} + function clearInput() { cmdInput.value = "" cmdInput.rows = 1 + cmdInput.style.height = "auto" delete cmdLine.dataset.extended } \ No newline at end of file diff --git a/src/shared/utils.ts b/src/shared/utils.ts index 886c02f..6c47985 100644 --- a/src/shared/utils.ts +++ b/src/shared/utils.ts @@ -1,3 +1,9 @@ +// How many times does `char` appear in `str`? +export function countChar(str: string, char: string): number { + return str.split(char).length - 1 +} + +// Generate a 6 character random ID export function randomID(): string { return Math.random().toString(36).slice(7) } \ No newline at end of file