From e9a960dca71b8fdb41254904bb4029246b207378 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Fri, 26 Dec 2025 23:21:42 +0000
Subject: [PATCH] fix(vscode): improve paste support for vscode extension

---
 frontend/src/lib/components/Dev.svelte        | 37 ++++++++++++++-
 frontend/src/lib/components/DiffEditor.svelte | 33 +++++++++++++-
 frontend/src/lib/components/Editor.svelte     | 32 +++++++++++++
 .../lib/components/GraphqlSchemaViewer.svelte | 10 ++++-
 frontend/src/lib/components/JsonInputs.svelte | 25 +++++++----
 .../src/lib/components/SimpleEditor.svelte    | 45 +++++++++++++++++++
 .../src/lib/components/TemplateEditor.svelte  | 30 +++++++++++++
 7 files changed, 199 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lib/components/Dev.svelte b/frontend/src/lib/components/Dev.svelte
index 9c5de746c9..b85c3b7c9b 100644
--- a/frontend/src/lib/components/Dev.svelte
+++ b/frontend/src/lib/components/Dev.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import SchemaForm from '$lib/components/SchemaForm.svelte'
+	import JsonInputs from '$lib/components/JsonInputs.svelte'
 	import JobLoader from '$lib/components/JobLoader.svelte'
 	import { Button } from '$lib/components/common'
 	import { WindmillIcon } from '$lib/components/icons'
@@ -121,6 +122,9 @@
 	// Test args input
 	let args: Record<string, any> = $state({})
 	let isValid: boolean = $state(true)
+	let jsonView: boolean = $state(false)
+	let jsonEditor: JsonInputs | undefined = $state(undefined)
+	let schemaHeight = $state(0)
 
 	// Test
 	let testIsLoading = $state(false)
@@ -781,9 +785,38 @@
 			<Splitpanes horizontal style="height: 1000px;">
 				<Pane size={33}>
 					<div class="px-2">
-						<div class="break-words relative font-sans">
-							<SchemaForm compact {schema} bind:args bind:isValid />
+						<div class="flex justify-end mb-2">
+							<Toggle
+								bind:checked={jsonView}
+								size="xs"
+								options={{
+									right: 'JSON',
+									rightTooltip: 'Fill args from JSON'
+								}}
+								lightMode
+								on:change={() => {
+									jsonEditor?.setCode(JSON.stringify(args ?? {}, null, '\t'))
+								}}
+							/>
 						</div>
+						{#if jsonView}
+							<div class="py-2" style="height: {Math.max(schemaHeight, 300)}px">
+								<JsonInputs
+									bind:this={jsonEditor}
+									on:select={(e) => {
+										if (e.detail) {
+											args = e.detail
+										}
+									}}
+									updateOnBlur={false}
+									placeholder={`Write args as JSON.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}`}
+								/>
+							</div>
+						{:else}
+							<div class="break-words relative font-sans" bind:clientHeight={schemaHeight}>
+								<SchemaForm compact {schema} bind:args bind:isValid />
+							</div>
+						{/if}
 					</div>
 				</Pane>
 				<Pane size={67}>
diff --git a/frontend/src/lib/components/DiffEditor.svelte b/frontend/src/lib/components/DiffEditor.svelte
index 67ac62d11a..0cd7664fae 100644
--- a/frontend/src/lib/components/DiffEditor.svelte
+++ b/frontend/src/lib/components/DiffEditor.svelte
@@ -5,7 +5,7 @@
 	import '@codingame/monaco-vscode-standalone-languages'
 	import '@codingame/monaco-vscode-standalone-json-language-features'
 	import '@codingame/monaco-vscode-standalone-typescript-language-features'
-	import { editor as meditor } from 'monaco-editor'
+	import { editor as meditor, KeyMod, KeyCode } from 'monaco-editor'
 
 	import { initializeVscode } from './vscode'
 	import EditorTheme from './EditorTheme.svelte'
@@ -75,6 +75,37 @@
 			scrollbar: { alwaysConsumeMouseWheel: false }
 		})
 
+		// In VSCode webview (iframe), clipboard operations need special handling
+		// because the webview has restricted clipboard API access
+		if (window.parent !== window) {
+			const modifiedEditor = diffEditor.getModifiedEditor()
+			modifiedEditor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyC, function () {
+				document.execCommand('copy')
+			})
+			modifiedEditor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyX, function () {
+				document.execCommand('cut')
+			})
+			modifiedEditor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyV, async function () {
+				try {
+					const text = await navigator.clipboard.readText()
+					if (text) {
+						const selection = modifiedEditor.getSelection()
+						if (selection) {
+							modifiedEditor.executeEdits('paste', [
+								{
+									range: selection,
+									text: text,
+									forceMoveMarkers: true
+								}
+							])
+						}
+					}
+				} catch (e) {
+					document.execCommand('paste')
+				}
+			})
+		}
+
 		console.log('defaultModified', defaultModified)
 		if (defaultLang !== undefined) {
 			setupModel(defaultLang, defaultOriginal, defaultModified, defaultModifiedLang)
diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
index c7a5b18c0e..bc3997338c 100644
--- a/frontend/src/lib/components/Editor.svelte
+++ b/frontend/src/lib/components/Editor.svelte
@@ -1376,6 +1376,38 @@
 
 		keepModelAroundToAvoidDisposalOfWorkers()
 
+		// In VSCode webview (iframe), clipboard operations need special handling
+		// because the webview has restricted clipboard API access
+		if (window.parent !== window) {
+			editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyC, function () {
+				document.execCommand('copy')
+			})
+			editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyX, function () {
+				document.execCommand('cut')
+			})
+			editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyV, async function () {
+				try {
+					// Use Clipboard API to read text, then insert via Monaco's API
+					const text = await navigator.clipboard.readText()
+					if (text && editor) {
+						const selection = editor.getSelection()
+						if (selection) {
+							editor.executeEdits('paste', [
+								{
+									range: selection,
+									text: text,
+									forceMoveMarkers: true
+								}
+							])
+						}
+					}
+				} catch (e) {
+					// Clipboard API failed, try execCommand as fallback
+					document.execCommand('paste')
+				}
+			})
+		}
+
 		// updateEditorKeybindingsMode(editor, 'vim', undefined)
 
 		// Raw app lint collection: listen for marker changes and report to store
diff --git a/frontend/src/lib/components/GraphqlSchemaViewer.svelte b/frontend/src/lib/components/GraphqlSchemaViewer.svelte
index 3f85839772..7929083d9a 100644
--- a/frontend/src/lib/components/GraphqlSchemaViewer.svelte
+++ b/frontend/src/lib/components/GraphqlSchemaViewer.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { BROWSER } from 'esm-env'
 
-	import { editor as meditor } from 'monaco-editor'
+	import { editor as meditor, KeyMod, KeyCode } from 'monaco-editor'
 
 	import { onDestroy, onMount } from 'svelte'
 
@@ -20,6 +20,14 @@
 			lineNumbers: 'off',
 			minimap: { enabled: false }
 		})
+
+		// In VSCode webview (iframe), clipboard operations need to use execCommand
+		// because the webview has restricted clipboard API access
+		if (window.parent !== window) {
+			editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyC, function () {
+				document.execCommand('copy')
+			})
+		}
 	}
 
 	onMount(async () => {
diff --git a/frontend/src/lib/components/JsonInputs.svelte b/frontend/src/lib/components/JsonInputs.svelte
index 8310098e0f..d336ad2d46 100644
--- a/frontend/src/lib/components/JsonInputs.svelte
+++ b/frontend/src/lib/components/JsonInputs.svelte
@@ -4,14 +4,21 @@
 
 	const dispatch = createEventDispatcher()
 
-	export let updateOnBlur = true
-	export let placeholder =
-		'Write a JSON payload. The input schema will be inferred.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}'
-	export let selected: boolean = false
+	interface Props {
+		updateOnBlur?: boolean
+		placeholder?: string
+		selected?: boolean
+	}
 
-	let pendingJson = ''
-	let simpleEditor: SimpleEditor | undefined = undefined
-	let focusTrap: HTMLElement | undefined
+	let {
+		updateOnBlur = true,
+		placeholder = 'Write a JSON payload. The input schema will be inferred.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}',
+		selected = false
+	}: Props = $props()
+
+	let pendingJson = $state('')
+	let simpleEditor: SimpleEditor | undefined = $state(undefined)
+	let focusTrap: HTMLElement | undefined = $state()
 
 	function updatePayloadFromJson(jsonInput: string) {
 		if (jsonInput === undefined || jsonInput === null || jsonInput.trim() === '') {
@@ -44,12 +51,12 @@
 	}
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 
 <!-- Add a hidden button that can receive focus -->
 <button bind:this={focusTrap} class="sr-only" tabindex="-1" aria-hidden="true">Focus trap</button>
 
-<div class="h-full py-3 rounded-md border">
+<div class="h-full rounded-md border">
 	<SimpleEditor
 		bind:this={simpleEditor}
 		on:focus={() => {
diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte
index 083bb30577..884fab737c 100644
--- a/frontend/src/lib/components/SimpleEditor.svelte
+++ b/frontend/src/lib/components/SimpleEditor.svelte
@@ -360,6 +360,21 @@
 		}
 		keepModelAroundToAvoidDisposalOfWorkers()
 
+		// In VSCode webview (iframe), clipboard operations need special handling
+		// because the webview has restricted clipboard API access
+		if (window.parent !== window) {
+			editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyC, function () {
+				document.execCommand('copy')
+			})
+			editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyX, function () {
+				document.execCommand('cut')
+			})
+			editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyV, async function () {
+				inputEl?.focus()
+				document.execCommand('paste')
+			})
+		}
+
 		let timeoutModel: number | undefined = undefined
 		editor.onDidChangeModelContent((event) => {
 			timeoutModel && clearTimeout(timeoutModel)
@@ -583,8 +598,38 @@
 	}
 
 	updatePlaceholderVisibility(code ?? '')
+
+	let inputEl = $state<HTMLInputElement | null>(null)
+	let pasteValue = $state('')
+	$effect(() => {
+		if (inputEl && pasteValue) {
+			untrack(() => {
+				editor?.executeEdits('paste', [
+					{
+						range: editor?.getSelection() ?? {
+							startLineNumber: 1,
+							startColumn: 1,
+							endLineNumber: 1,
+							endColumn: 1
+						},
+						text: pasteValue,
+						forceMoveMarkers: true
+					}
+				])
+				pasteValue = ''
+			})
+		}
+	})
 </script>
 
+{#if parent.window !== window}
+	<input
+		style="height: 0; width: 0; opacity: 0; position: absolute; top: 0; left: 0; z-index: -1;"
+		type="text"
+		bind:this={inputEl}
+		bind:value={pasteValue}
+	/>
+{/if}
 <EditorTheme />
 {#if !editor || suggestion}
 	<FakeMonacoPlaceHolder
diff --git a/frontend/src/lib/components/TemplateEditor.svelte b/frontend/src/lib/components/TemplateEditor.svelte
index c959773bf5..96ac0dda74 100644
--- a/frontend/src/lib/components/TemplateEditor.svelte
+++ b/frontend/src/lib/components/TemplateEditor.svelte
@@ -464,6 +464,36 @@
 			return
 		}
 
+		// In VSCode webview (iframe), clipboard operations need special handling
+		// because the webview has restricted clipboard API access
+		if (window.parent !== window) {
+			editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyC, function () {
+				document.execCommand('copy')
+			})
+			editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyX, function () {
+				document.execCommand('cut')
+			})
+			editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyV, async function () {
+				try {
+					const text = await navigator.clipboard.readText()
+					if (text && editor) {
+						const selection = editor.getSelection()
+						if (selection) {
+							editor.executeEdits('paste', [
+								{
+									range: selection,
+									text: text,
+									forceMoveMarkers: true
+								}
+							])
+						}
+					}
+				} catch (e) {
+					document.execCommand('paste')
+				}
+			})
+		}
+
 		editor.onDidFocusEditorText(() => {
 			dispatch('focus')