feat: detect image events on paste with ctrl +v or command v #520

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open

tyrellshawn wants to merge 9 commits into anomalyco:main from tyrellshawn:detect-image-events

bun.lock

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

packages/core/src/examples/index.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -63,6 +63,7 @@ import * as linkDemo from "./link-demo" @@
     import * as opacityExample from "./opacity-example"
     import * as scrollboxOverlayHitTest from "./scrollbox-overlay-hit-test"
     import * as scrollboxMouseTest from "./scrollbox-mouse-test"
+    import * as pasteDemo from "./paste-demo"
     import * as textTruncationDemo from "./text-truncation-demo"
     import * as grayscaleBufferDemo from "./grayscale-buffer-demo"
     import { setupCommonDemoKeys } from "./lib/standalone-keys"
@@ Expand Down Expand Up / @@ -334,6 +335,12 @@ const examples: Example[] = [ @@
         run: inputExample.run,
         destroy: inputExample.destroy,
       },
+      {
+        name: "Paste Demo",
+        description: "Paste into inputs and inspect metadata including binary detection",
+        run: pasteDemo.run,
+        destroy: pasteDemo.destroy,
+      },
       {
         name: "Terminal Palette Demo",
         description: "Terminal color palette detection and visualization - fetch and display all 256 terminal colors",
@@ Expand Down @@

packages/core/src/examples/paste-demo.ts

-Original file line number
+Diff line change
@@ -0,0 +1,163 @@
+    import {
+      BoxRenderable,
+      InputRenderable,
+      TextareaRenderable,
+      TextRenderable,
+      bold,
+      createCliRenderer,
+      fg,
+      t,
+      type CliRenderer,
+    } from "../index"
+    import { KeyEvent, PasteEvent } from "../lib/KeyHandler"
+    import { setupCommonDemoKeys } from "./lib/standalone-keys"
+    let renderer: CliRenderer | null = null
+    let container: BoxRenderable | null = null
+    let singleLineInput: InputRenderable | null = null
+    let multilineInput: TextareaRenderable | null = null
+    let logDisplay: TextRenderable | null = null
+    let instructions: TextRenderable | null = null
+    let keypressHandler: ((event: KeyEvent) => void) | null = null
+    let pasteHandler: ((event: PasteEvent) => void) | null = null
+    const logEntries: string[] = []
+    function formatHexHead(buffer: Buffer): string {
+      if (buffer.length === 0) return "<empty>"
+      const hex = buffer.subarray(0, 16).toString("hex")
+      return hex.match(/.{1,2}/g)?.join(" ") ?? hex
+    }
+    function formatTextPreview(buffer: Buffer): string {
+      const text = buffer.toString("utf8")
+      const normalized = text.replace(/\r/g, "").replace(/\n/g, " ⏎ ")
+      return normalized.length > 80 ? `${normalized.slice(0, 80)}…` : normalized
+    }
+    function updateLog(event: PasteEvent): void {
+      const entry = `len=${event.data.length} head=${formatHexHead(event.data)} preview=${formatTextPreview(event.data)}`
+      logEntries.unshift(entry)
+      logEntries.splice(12)
+      if (logDisplay) {
+        logDisplay.content = t`${logEntries.join("\n")}`
+      }
+      const text = event.text ?? event.data.toString("utf8")
+      if (singleLineInput) {
+        singleLineInput.value = text
+      }
+      if (multilineInput) {
+        multilineInput.value = text
+      }
+    }
+    function createLayout(rendererInstance: CliRenderer): void {
+      container = new BoxRenderable(rendererInstance, {
+        id: "paste-demo-root",
+        flexDirection: "column",
+        width: "100%",
+        height: "100%",
+        padding: 2,
+        gap: 1,
+      })
+      instructions = new TextRenderable(rendererInstance, {
+        id: "paste-demo-instructions",
+        width: 100,
+        height: 4,
+        content: t`${bold("Paste Demo")}
+    - Paste into the single-line input or the textarea
+    - Logs show file type, byte length, first 16 bytes, and text preview
+    - Press q to quit, Ctrl+C to exit`,
+      })
+      singleLineInput = new InputRenderable(rendererInstance, {
+        id: "paste-demo-input",
+        width: 70,
+        height: 3,
+        placeholder: "Paste here (single line)",
+      })
+      multilineInput = new TextareaRenderable(rendererInstance, {
+        id: "paste-demo-textarea",
+        width: 70,
+        height: 6,
+        placeholder: "Or paste here (textarea)",
+      })
+      logDisplay = new TextRenderable(rendererInstance, {
+        id: "paste-demo-log",
+        width: 100,
+        height: 12,
+        fg: fg("#A0FFA0"),
+        content: t`Waiting for paste events…`,
+      })
+      container.add(instructions)
+      container.add(singleLineInput)
+      container.add(multilineInput)
+      container.add(logDisplay)
+      rendererInstance.root.add(container)
+    }
+    export function run(rendererInstance: CliRenderer): void {
+      renderer = rendererInstance
+      renderer.setBackgroundColor("#0e1116")
+      createLayout(rendererInstance)
+      keypressHandler = (event: KeyEvent) => {
+        if (event.name === "q") {
+          renderer?.destroy()
+          return
+        }
+      }
+      pasteHandler = (event: PasteEvent) => {
+        updateLog(event)
+      }
+      renderer.keyInput.on("keypress", keypressHandler)
+      renderer.keyInput.on("paste", pasteHandler)
+      renderer.requestRender()
+    }
+    export function destroy(rendererInstance: CliRenderer): void {
+      rendererInstance.clearFrameCallbacks()
+      if (keypressHandler) {
+        rendererInstance.keyInput.off("keypress", keypressHandler)
+        keypressHandler = null
+      }
+      if (pasteHandler) {
+        rendererInstance.keyInput.off("paste", pasteHandler)
+        pasteHandler = null
+      }
+      if (container) {
+        rendererInstance.root.remove("paste-demo-root")
+        container = null
+      }
+      singleLineInput = null
+      multilineInput = null
+      logDisplay = null
+      instructions = null
+      logEntries.length = 0
+    }
+    if (import.meta.main) {
+      const rendererInstance = await createCliRenderer({
+        exitOnCtrlC: true,
+      })
+      run(rendererInstance)
+      setupCommonDemoKeys(rendererInstance)
+      rendererInstance.start()
+    }

packages/core/src/lib/KeyHandler.paste-binary.test.ts

-Original file line number
+Diff line change
@@ -0,0 +1,31 @@
+    import { expect, test } from "bun:test"
+    import { InternalKeyHandler } from "./KeyHandler"
+    test("processPaste emits buffer for image data", () => {
+      const handler = new InternalKeyHandler()
+      const pngBytes = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00])
+      let received: any
+      handler.on("paste", (event) => {
+        received = event
+      })
+      handler.processPaste(pngBytes)
+      expect(Buffer.isBuffer(received?.data)).toBe(true)
+      expect(received?.data?.equals?.(pngBytes)).toBe(true)
+    })
+    test("processPaste emits buffer for text data", () => {
+      const handler = new InternalKeyHandler()
+      let receivedData: Buffer | undefined
+      handler.on("paste", (event) => {
+        receivedData = event.data
+      })
+      handler.processPaste("plain text")
+      expect(Buffer.isBuffer(receivedData)).toBe(true)
+      expect(receivedData?.toString()).toBe("plain text")
+    })

packages/core/src/lib/KeyHandler.test.ts

-Original file line number
+Diff line change
@@ Expand Up @@
       expect(receivedPaste).toBe("chunk1chunk2chunk3")
     })
+    test("KeyHandler - detects magic bytes for binary paste", () => {
+      const handler = createKeyHandler()
+      const pngBytes = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, 0x00])
+      let receivedPaste: any
+      handler.on("paste", (event) => {
+        receivedPaste = event
+      })
+      ;(handler as any).processPaste(pngBytes)
+      expect(Buffer.isBuffer(receivedPaste?.data)).toBe(true)
+      expect(receivedPaste?.data?.equals?.(pngBytes)).toBe(true)
+    })
     test("KeyHandler - strips ANSI codes in paste", () => {
       const handler = createKeyHandler()
@@ Expand Down @@

packages/core/src/lib/KeyHandler.ts

-Original file line number
+Diff line change
@@ -1,6 +1,6 @@
     import { EventEmitter } from "events"
     import { parseKeypress, type KeyEventType, type ParsedKey } from "./parse.keypress"
-    import { ANSI } from "../ansi"
+    import type { PasteChunk } from "./stdin-buffer"
     export class KeyEvent implements ParsedKey {
       name: string
@@ Expand Down Expand Up / @@ -61,13 +61,20 @@ export class KeyEvent implements ParsedKey { @@
       }
     }
+    export type PasteEventInit = {
+      data: Buffer
+      text?: string
+    }
     export class PasteEvent {
-      text: string
+      data: Buffer
+      text?: string
       private _defaultPrevented: boolean = false
       private _propagationStopped: boolean = false
-      constructor(text: string) {
-        this.text = text
+      constructor(init: PasteEventInit) {
+        this.data = init.data
+        this.text = init.text
       }
       get defaultPrevented(): boolean {
@@ Expand Down Expand Up @@
         return true
       }
-      public processPaste(data: string): void {
+      public processPaste(data: string | Buffer | PasteChunk): void {
         try {
-          const cleanedData = Bun.stripANSI(data)
-          this.emit("paste", new PasteEvent(cleanedData))
+          const { buffer, text } = this.normalizePasteInput(data)
+          const cleanedText = text !== undefined ? Bun.stripANSI(text) : this.getCleanedText(buffer)
+          this.emit(
+            "paste",
+            new PasteEvent({
+              data: buffer,
+              text: cleanedText,
+            }),
+          )
         } catch (error) {
           console.error(`[KeyHandler] Error processing paste:`, error)
         }
       }
+      private normalizePasteInput(data: string | Buffer | PasteChunk): { buffer: Buffer; text?: string } {
+        if (typeof data === "string") {
+          return { buffer: Buffer.from(data), text: data }
+        }
+        if (Buffer.isBuffer(data)) {
+          return { buffer: data }
+        }
+        return { buffer: data.data, text: data.text }
+      }
+      private getCleanedText(buffer: Buffer): string {
+        return Bun.stripANSI(buffer.toString())
+      }
     }
     /**
@@ Expand Down @@

packages/core/src/lib/paste-detect.test.ts

-Original file line number
+Diff line change
@@ -0,0 +1,16 @@
+    import { expect, test } from "bun:test"
+    import { detectPasteFileType } from "./paste-detect"
+    test("detectPasteFileType identifies common image signatures", () => {
+      expect(detectPasteFileType(Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]))).toBe("image/png")
+      expect(detectPasteFileType(Buffer.from([0xff, 0xd8, 0xff, 0x00]))).toBe("image/jpeg")
+      expect(detectPasteFileType(Buffer.from("GIF89a"))).toBe("image/gif")
+      expect(detectPasteFileType(Buffer.from("RIFF1234WEBP"))).toBe("image/webp")
+      expect(detectPasteFileType(Buffer.from([0x42, 0x4d, 0x00, 0x00]))).toBe("image/bmp")
+      expect(detectPasteFileType(Buffer.from([0x00, 0x00, 0x01, 0x00, 0x00]))).toBe("image/x-icon")
+      expect(detectPasteFileType(Buffer.from('<?xml version="1.0"?><svg></svg>'))).toBe("image/svg+xml")
+    })
+    test("detectPasteFileType returns undefined for non-image data", () => {
+      expect(detectPasteFileType(Buffer.from("plain text"))).toBeUndefined()
+    })

packages/core/src/lib/paste-detect.ts

-Original file line number
+Diff line change
@@ -0,0 +1,39 @@
+    const PNG_SIGNATURE = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a])
+    const JPEG_SIGNATURE = Buffer.from([0xff, 0xd8, 0xff])
+    const GIF_SIGNATURE = Buffer.from([0x47, 0x49, 0x46, 0x38])
+    const WEBP_RIFF = Buffer.from("RIFF")
+    const WEBP_WEBP = Buffer.from("WEBP")
+    const BMP_SIGNATURE = Buffer.from([0x42, 0x4d])
+    const ICO_SIGNATURE = Buffer.from([0x00, 0x00, 0x01, 0x00])
+    function matchesSignature(buffer: Buffer, signature: Buffer, offset: number = 0): boolean {
+      if (buffer.length < signature.length + offset) return false
+      for (let i = 0; i < signature.length; i++) {
+        if (buffer[i + offset] !== signature[i]) {
+          return false
+        }
+      }
+      return true
+    }
+    function detectSvg(buffer: Buffer): boolean {
+      if (buffer.length === 0) return false
+      const sample = buffer.slice(0, 512).toString("utf8").trimStart().toLowerCase()
+      return sample.startsWith("<svg") || sample.startsWith("<?xml")
+    }
+    export function detectPasteFileType(buffer: Buffer): string | undefined {
+      if (matchesSignature(buffer, PNG_SIGNATURE)) return "image/png"
+      if (matchesSignature(buffer, JPEG_SIGNATURE)) return "image/jpeg"
+      if (matchesSignature(buffer, GIF_SIGNATURE)) return "image/gif"
+      if (matchesSignature(buffer, BMP_SIGNATURE)) return "image/bmp"
+      if (matchesSignature(buffer, ICO_SIGNATURE)) return "image/x-icon"
+      if (matchesSignature(buffer, WEBP_RIFF) && matchesSignature(buffer, WEBP_WEBP, 8)) {
+        return "image/webp"
+      }
+      if (detectSvg(buffer)) return "image/svg+xml"
+      return undefined
+    }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: detect image events on paste with ctrl +v or command v #520

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

kommander Jan 17, 2026

Uh oh!

tyrellshawn Jan 17, 2026

Uh oh!

kommander Jan 18, 2026

Uh oh!

tyrellshawn Jan 22, 2026

Uh oh!

Uh oh!

Uh oh!

feat: detect image events on paste with ctrl +v or command v #520

Are you sure you want to change the base?

Uh oh!

feat: detect image events on paste with ctrl +v or command v #520

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

kommander Jan 17, 2026

Choose a reason for hiding this comment

Uh oh!

tyrellshawn Jan 17, 2026

Choose a reason for hiding this comment

Uh oh!

kommander Jan 18, 2026

Choose a reason for hiding this comment

Uh oh!

tyrellshawn Jan 22, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!