Add keyboard and clipboard support for razorconsole website preview by Copilot · Pull Request #191 · RazorConsole/RazorConsole

Copilot · 2025-11-25T15:13:10Z

Clipboard Implementation

The clipboard support is implemented in xtermConsole.ts using the Clipboard API:

Copy: When Ctrl+C is pressed with text selected, the selected text is copied to the clipboard
Paste: When Ctrl+V is pressed, clipboard content is read and sent character-by-character to the WASM backend for processing

Both operations support the Cmd key on macOS and include error handling with debug logging.

Original prompt

Add in razorconsole website components preview support of other keys like ctrl and num keys

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

TeseySTD · 2025-11-25T15:20:40Z

@copilot Retry

LittleLittleCloud · 2025-11-25T16:50:34Z

@copilot Try again

…key parsing Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

Copilot · 2025-11-25T17:04:26Z

@copilot Try again

I've implemented the keyboard support for the website component preview. The changes in commit ca29b92 add support for:

Control keys: Ctrl+A through Ctrl+Z are now properly parsed
Function keys: F1-F12
Navigation/editing keys: Home, End, Insert, Delete, PageUp, PageDown
Modifier and lock keys: Shift, Control, Alt, Meta, CapsLock, NumLock, ScrollLock
Additional special keys: ContextMenu, Pause, PrintScreen, Clear
Punctuation and symbols: Extended support for US keyboard layout
Character codes: Proper codes for Escape (\x1b) and Delete (\x7f)

TeseySTD · 2025-11-25T17:49:50Z

@copilot Fix fIDE0073: A source file is missing a required header

LittleLittleCloud · 2025-11-25T18:40:24Z

@copilot Fix fIDE0073: A source file is missing a required header

…ctionExtensions.cs Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

Copilot · 2025-11-25T18:45:18Z

@copilot Fix fIDE0073: A source file is missing a required header

Fixed in commit 634a93c. The IDE0073 warning was caused by a missing copyright header in RazorConsoleServiceCollectionExtensions.cs that came in from the merge with main. Added the required header: // Copyright (c) RazorConsole. All rights reserved.

github-actions · 2025-11-25T20:44:58Z

🚀 Preview Deployment

A preview build has been generated for this PR from CI run #19685379952!

Download the artifact:
website-preview-191-5b9c80d601d8768333c3f94a476635112882973a

To view the preview locally:

Download the artifact from the CI workflow run
Extract the ZIP file
Serve the files with a local web server
(e.g., npx serve dist)

🌐 Live Preview URL: https://fc218c65.razorconsole.pages.dev

The live preview will be automatically updated when you push new
commits to this PR.

TeseySTD · 2025-11-25T20:58:16Z

@copilot Key input doesn't work at all

LittleLittleCloud · 2025-11-25T21:04:14Z

@copilot you entirely break the keyboard input, shame on you

This is the log when I press enter

Key event forwarded from preview via HandleKeyboardEvent (5) ['\r', 'Enter', false, false, false]0: "\r"1: "Enter"2: false3: false4: falselength: 5[[Prototype]]: Array(0)

Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

Copilot · 2025-11-25T21:09:30Z

@copilot you entirely break the keyboard input, shame on you

This is the log when I press enter
...

Fixed in commit 68c6b7a. The issue was in xtermConsole.ts - the attachKeyListener function was not passing the elementId as the first argument to HandleKeyboardEvent. The C# method signature expects (string elementID, string xtermKey, string domKey, bool ctrlKey, bool altKey, bool shiftKey) but only 5 arguments were being passed (missing elementId).

This was a pre-existing bug from the JS-WASM interop refactoring, not introduced by my keyboard enhancement changes. The fix adds elementId to the invokeMethodAsync call.

TeseySTD · 2025-11-25T21:32:12Z

@LittleLittleCloud Num keys works but ctrl+v doesn't work

LittleLittleCloud · 2025-11-25T21:57:40Z

@TeseySTD xterm doesn't process control C && V by default, also sending the keyboard command back to wasm won't make a big difference because currently, the keyboard handler in wasm doesn't save text from clipboard when ctrl + C and send text to keyboard manager when ctrl + V.

I think we can refer to the solution under this issue and on frontend, when terminal is focused, save to clipboard when control + C is pressed, and when control + V is pressed, send the text content from clipboard to wasm character by character

Browser Copy/Paste support documentation xtermjs/xterm.js#2478

@copilot do it

Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

Copilot · 2025-11-25T22:01:34Z

@TeseySTD xterm doesn't process control C && V by default, also sending the keyboard command back to wasm won't make a big difference because currently, the keyboard handler in wasm doesn't save text ...

Implemented in commit 5b9c80d. The clipboard handling now works as follows:

Ctrl+C (Copy): When Ctrl+C is pressed and text is selected in the terminal, it copies the selected text to the clipboard using the Clipboard API.

Ctrl+V (Paste): When Ctrl+V is pressed, it reads text from the clipboard and sends each character individually to the WASM backend, allowing the keyboard manager to process them as regular input.

Both operations support Cmd key on Mac (metaKey). The implementation also includes error handling and debug logging for troubleshooting.

LittleLittleCloud · 2025-11-25T22:22:04Z

@TeseySTD seems to be working now

Copilot

Pull request overview

This PR enhances the RazorConsole website preview with comprehensive keyboard and clipboard support, enabling users to interact with terminal components using standard keyboard shortcuts and clipboard operations.

Key changes:

Extended keyboard support to include control key combinations (Ctrl+A-Z), function keys (F1-F12), navigation keys (Home, End, PageUp, PageDown, Insert, Delete), and special keys (modifier, lock, and system keys)
Implemented clipboard operations with Ctrl+C (Cmd+C on Mac) for copying selected text and Ctrl+V (Cmd+V on Mac) for pasting
Enhanced the ParseKeyFromBrowser method in RazorConsoleRenderer.cs to properly parse control characters and map them to appropriate ConsoleKey values

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
website/src/lib/xtermConsole.ts	Added async keyboard event handler with clipboard support for copy (Ctrl+C) and paste (Ctrl+V) operations, including error handling for clipboard API failures
src/RazorConsole.Website/RazorConsoleRenderer.cs	Extended keyboard parsing to support function keys, navigation keys, special keys, control character combinations, and additional punctuation/symbol keys

Comments suppressed due to low confidence (3)

src/RazorConsole.Website/RazorConsoleRenderer.cs:109

Disposable 'StringWriter' is created but not disposed.

        var sw = new StringWriter();

src/RazorConsole.Website/RazorConsoleRenderer.cs:120

This assignment to consoleOption is useless, since its value is never read.

        var consoleOption = new RenderOptions(console.Profile.Capabilities, new Size(80, 150));

src/RazorConsole.Website/RazorConsoleRenderer.cs:168

This assignment to modifiers is useless, since its value is never read.

            modifiers |= ConsoleModifiers.Shift;

Copilot · 2025-11-25T23:59:32Z

website/src/lib/xtermConsole.ts

+    // Handle Ctrl+C (or Cmd+C on Mac) - Copy selected text
+    if ((ctrlKey || metaKey) && (domKey === 'c' || domKey === 'C')) {
+      const selection = terminal.getSelection()
+      if (selection) {
+        try {
+          await navigator.clipboard.writeText(selection)
+          console.debug('Copied to clipboard:', selection)
+        } catch (err) {
+          console.warn('Failed to copy to clipboard:', err)
+        }
+      }
+      // Still forward the event to WASM in case it needs to handle it
+      void helper.invokeMethodAsync(
+        'HandleKeyboardEvent',
+        elementId,
+        key,
+        domEvent.key,
+        domEvent.ctrlKey,
+        domEvent.altKey,
+        domEvent.shiftKey
+      )
+      return
+    }
+
+    // Handle Ctrl+V (or Cmd+V on Mac) - Paste from clipboard
+    if ((ctrlKey || metaKey) && (domKey === 'v' || domKey === 'V')) {
+      try {
+        const text = await navigator.clipboard.readText()
+        if (text) {
+          console.debug('Pasting from clipboard:', text)
+          // Send each character individually to WASM
+          for (const char of text) {
+            await helper.invokeMethodAsync(
+              'HandleKeyboardEvent',
+              elementId,
+              char,
+              char.length === 1 ? char : 'Unidentified',
+              false,
+              false,
+              false
+            )
+          }
+        }
+      } catch (err) {
+        console.warn('Failed to paste from clipboard:', err)
+      }
+      return
+    }


The Ctrl+C handler forwards the keyboard event to WASM after copying to clipboard, but the Ctrl+V handler does not forward the Ctrl+V event itself—only the pasted characters. This creates an inconsistency in behavior. Consider either:

Not forwarding Ctrl+C to WASM (consistent with Ctrl+V handling), or

Forwarding Ctrl+V to WASM before pasting (consistent with Ctrl+C handling)

The current implementation may cause unexpected behavior where the backend receives Ctrl+C events but not Ctrl+V events.

Initial plan

fde501f

Copilot AI assigned Copilot and TeseySTD Nov 25, 2025

Copilot started work on behalf of TeseySTD November 25, 2025 15:13 View session

Copilot AI requested a review from TeseySTD November 25, 2025 15:16

Copilot started work on behalf of TeseySTD November 25, 2025 15:22 View session

Copilot started work on behalf of LittleLittleCloud November 25, 2025 16:50 View session

Copilot AI and others added 2 commits November 25, 2025 16:58

Add support for ctrl keys, function keys, and numpad keys in browser …

dee337f

…key parsing Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

Address code review comments with improved documentation

ca29b92

Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add preview support for ctrl and num keys in razorconsole~~ Add preview support for ctrl and num keys in razorconsole website Nov 25, 2025

Copilot AI requested a review from LittleLittleCloud November 25, 2025 17:06

Copilot finished work on behalf of LittleLittleCloud November 25, 2025 17:06

TeseySTD marked this pull request as ready for review November 25, 2025 17:39

Merge branch 'main' into copilot/add-preview-support-other-keys

022fc41

Copilot started work on behalf of TeseySTD November 25, 2025 17:50 View session

Copilot started work on behalf of LittleLittleCloud November 25, 2025 18:40 View session

Fix IDE0073: Add missing copyright header to RazorConsoleServiceColle…

634a93c

…ctionExtensions.cs Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

Copilot finished work on behalf of LittleLittleCloud November 25, 2025 18:46

TeseySTD approved these changes Nov 25, 2025

View reviewed changes

LittleLittleCloud closed this Nov 25, 2025

LittleLittleCloud reopened this Nov 25, 2025

Merge branch 'main' into copilot/add-preview-support-other-keys

106f09f

Copilot started work on behalf of TeseySTD November 25, 2025 20:58 View session

Copilot AI requested a review from TeseySTD November 25, 2025 21:00

Copilot started work on behalf of LittleLittleCloud November 25, 2025 21:04 View session

Fix keyboard input by passing elementId to HandleKeyboardEvent

68c6b7a

Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

Copilot finished work on behalf of LittleLittleCloud November 25, 2025 21:10

Merge branch 'main' into copilot/add-preview-support-other-keys

d717a88

Copilot started work on behalf of LittleLittleCloud November 25, 2025 21:58 View session

Add clipboard support for Ctrl+C and Ctrl+V in terminal preview

5b9c80d

Co-authored-by: LittleLittleCloud <16876986+LittleLittleCloud@users.noreply.github.com>

Copilot AI changed the title ~~Add preview support for ctrl and num keys in razorconsole website~~ Add keyboard and clipboard support for razorconsole website preview Nov 25, 2025

Copilot finished work on behalf of LittleLittleCloud November 25, 2025 22:02

LittleLittleCloud approved these changes Nov 25, 2025

View reviewed changes

TeseySTD enabled auto-merge (squash) November 25, 2025 22:59

LittleLittleCloud requested review from Copilot and removed request for TeseySTD November 25, 2025 23:56

LittleLittleCloud merged commit c25ad97 into main Nov 25, 2025
8 checks passed

LittleLittleCloud deleted the copilot/add-preview-support-other-keys branch November 25, 2025 23:56

github-actions bot added this to the v0.2.0 milestone Nov 25, 2025

Copilot started reviewing on behalf of LittleLittleCloud November 25, 2025 23:56 View session

Copilot finished reviewing on behalf of LittleLittleCloud November 25, 2025 23:59

Copilot AI reviewed Nov 25, 2025

View reviewed changes

Conversation

Copilot AI commented Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Clipboard Implementation

Uh oh!

TeseySTD commented Nov 25, 2025

Uh oh!

LittleLittleCloud commented Nov 25, 2025

Uh oh!

Copilot AI commented Nov 25, 2025

Uh oh!

TeseySTD commented Nov 25, 2025

Uh oh!

LittleLittleCloud commented Nov 25, 2025

Uh oh!

Copilot AI commented Nov 25, 2025

Uh oh!

github-actions bot commented Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🚀 Preview Deployment

Uh oh!

TeseySTD commented Nov 25, 2025

Uh oh!

LittleLittleCloud commented Nov 25, 2025

Uh oh!

Copilot AI commented Nov 25, 2025

Uh oh!

TeseySTD commented Nov 25, 2025

Uh oh!

LittleLittleCloud commented Nov 25, 2025

Uh oh!

Copilot AI commented Nov 25, 2025

Uh oh!

LittleLittleCloud commented Nov 25, 2025

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Copilot AI commented Nov 25, 2025 •

edited

Loading

github-actions bot commented Nov 25, 2025 •

edited

Loading