cursor stuff

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);

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;

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)) {

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
 }

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)
 }