HTML Clipboard Writer

\n \n \n

\n \n\n\n `,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n}",[],[230,221],"test","324b0c22-1e11-11f1-bb90-42dde27851f2",18,["D",1773319463212],[200],[230],"75cb055a-1e08-11f1-a811-42dde27851f2","index.tsx","019ce1da-6007-7379-88c2-033bd46b66eb","019ce1da-6007-7379-88c2-0415756be076",["D",1773315710899],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[245,237],"frontend","75cb01d6-1e08-11f1-a811-42dde27851f2","index.html","019ce1da-6007-7379-88c1-fd099b9fe8fe",["D",1773315710899],"\n\n\n \n \n Clipboard Debugger\n \n \n\n\n

\n \n\n",[],[245,247],"75cafd08-1e08-11f1-a811-42dde27851f2","clipboard.ts","019ce1da-6007-7379-88c1-f7a7c1d3d06a","019ce1da-6007-7379-88c1-f813effc13b8",["D",1773315710899],"export interface ClipboardData {\n blob?: Blob;\n size?: number;\n mimeType?: string;\n error?: string;\n}\n\nexport interface ClipboardItem {\n id: number;\n types: string[];\n data: Record;\n}",[],[245,261,254],"types","75cb005a-1e08-11f1-a811-42dde27851f2",["D",1773315710899],[196],[245,261],"040c77be-1e12-11f1-bf22-42dde27851f2","TextDataDisplay.tsx","019ce1da-6007-7379-88c1-ec56cfb2b4df","019ce1da-6007-7379-88c1-f195c2be88c5",["D",1773319815126],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n useEffect,\n useState,\n} from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\ninterface TextDataDisplayProps {\n blob: Blob;\n type: string;\n}\n\nexport default function TextDataDisplay({ blob, type }: TextDataDisplayProps) {\n const [text, setText] = useState(\"\");\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n const readText = async () => {\n try {\n const textContent = await blob.text();\n const decoded = textContent\n .replace(/"/g, '\"')\n .replace(/&/g, \"&\")\n .replace(/</g, \"<\")\n .replace(/>/g, \">\")\n .replace(/'/g, \"'\")\n .replace(/'/g, \"'\");\n setText(textContent);\n } catch (error) {\n setText(`Error reading text: ${error}`);\n } finally {\n setLoading(false);\n }\n };\n\n readText();\n }, [blob]);\n\n const copyToClipboard = async () => {\n try {\n await navigator.clipboard.writeText(text);\n } catch (error) {\n console.error(\"Failed to copy text:\", error);\n }\n };\n\n if (loading) {\n return

Loading text content...

;\n }\n\n return (\n

\n Content:\n \n 📋 Copy\n \n

\n\n \n\n

\n Length: {text.length} characters\n {text.includes(\"\\n\") && (\n <>\n
\n Lines: {text.split(\"\\n\").length}\n \n )}\n

\n );\n}",[],[245,275,267],"components","75cae7a0-1e08-11f1-a811-42dde27851f2","PermissionWarning.tsx","019ce1da-6007-7379-88c1-e98642adaedb",["D",1773315710899],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\nexport default function PermissionWarning() {\n return (\n

\n ⚠️ Permission Required: This app needs clipboard access. \n Please click \"Allow\" when prompted, or check your browser's permission settings.\n

\n );\n}",[],[245,275,277],"75cae14c-1e08-11f1-a811-42dde27851f2","ImageDataDisplay.tsx","019ce1da-6007-7379-88c1-e5d8e5ef620e",["D",1773315710899],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\ninterface ImageDataDisplayProps {\n blob: Blob;\n type: string;\n}\n\nexport default function ImageDataDisplay({ blob, type }: ImageDataDisplayProps) {\n const [imageUrl, setImageUrl] = useState('');\n\n useEffect(() => {\n const url = URL.createObjectURL(blob);\n setImageUrl(url);\n\n // Cleanup\n return () => {\n URL.revokeObjectURL(url);\n };\n }, [blob]);\n\n return (\n

Preview:

\n \n

\n Format: {type}
\n Size: {blob.size} bytes\n

\n );\n}",[],[245,275,284],"75caddc8-1e08-11f1-a811-42dde27851f2","ErrorMessage.tsx","019ce1da-6007-7379-88c1-e12f16d8f3fa",["D",1773315710899],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\ninterface ErrorMessageProps {\n message: string;\n}\n\nexport default function ErrorMessage({ message }: ErrorMessageProps) {\n return (\n

{message}

\n );\n}",[],[245,275,291],"75cad940-1e08-11f1-a811-42dde27851f2","ClipboardResults.tsx","019ce1da-6007-7379-88c1-ddfc9f371d7b",["D",1773315710899],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport ClipboardItemDisplay from \"./ClipboardItemDisplay.tsx\";\nimport { ClipboardItem } from \"../types/clipboard.ts\";\n\ninterface ClipboardResultsProps {\n items: ClipboardItem[];\n}\n\nexport default function ClipboardResults({ items }: ClipboardResultsProps) {\n if (items.length === 0) {\n return null;\n }\n\n return (\n

\n {items.map((item) => (\n \n ))}\n

\n );\n}",[],[245,275,298],"75cad256-1e08-11f1-a811-42dde27851f2","ClipboardReader.tsx","019ce1da-6007-7379-88c1-d9cd60499b52",["D",1773315710899],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\ninterface ClipboardReaderProps {\n onRead: () => void;\n onClear: () => void;\n isLoading: boolean;\n isSupported: boolean;\n}\n\nexport default function ClipboardReader({ onRead, onClear, isLoading, isSupported }: ClipboardReaderProps) {\n return (\n

\n \n {isLoading ? '⏳ Reading...' : '📖 Read Clipboard'}\n \n \n \n 🗑️ Clear Results\n \n

\n );\n}",[],[245,275,305],"75cac5ea-1e08-11f1-a811-42dde27851f2","ClipboardItemDisplay.tsx","019ce1da-6007-7379-88c1-d584a9bdcf68",["D",1773315710899],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport ClipboardDataDisplay from \"./ClipboardDataDisplay.tsx\";\nimport { ClipboardItem } from \"../types/clipboard.ts\";\n\ninterface ClipboardItemDisplayProps {\n item: ClipboardItem;\n}\n\nexport default function ClipboardItemDisplay({ item }: ClipboardItemDisplayProps) {\n return (\n

\n Clipboard Item {item.id + 1}\n

\n \n

Available MIME Types:

\n {item.types.join(', ')}\n

\n \n {item.types.map((type) => (\n \n ))}\n

\n );\n}",[],[245,275,312],"241cf8ba-1e0a-11f1-96cd-42dde27851f2","ClipboardDataDisplay.tsx","019ce1da-6007-7379-88c1-d3cb90c56a48",10,["D",1773316432950],7,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n useEffect,\n useState,\n} from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport TextDataDisplay from \"./TextDataDisplay.tsx\";\nimport ImageDataDisplay from \"./ImageDataDisplay.tsx\";\nimport BinaryDataDisplay from \"./BinaryDataDisplay.tsx\";\nimport { ClipboardData } from \"../types/clipboard.ts\";\n\ninterface ClipboardDataDisplayProps {\n type: string;\n data: ClipboardData;\n}\n\nexport default function ClipboardDataDisplay(\n { type, data }: ClipboardDataDisplayProps,\n) {\n if (\"error\" in data) {\n return (\n

\n Error reading {type}:\n

\n {data.error}\n

\n );\n }\n\n const { blob, size, mimeType } = data;\n\n return (\n

Type: {type}

\n\n

\n Size: {size} bytes
\n MIME Type: {mimeType}\n

\n\n {type.startsWith(\"text/\")\n ? \n : type.startsWith(\"image/\")\n ? \n : }\n

\n );\n}",[],[245,275,319],"75cab3c0-1e08-11f1-a811-42dde27851f2","BinaryDataDisplay.tsx","019ce1da-6007-7379-88c1-cd698603a56b",["D",1773315710899],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\n\ninterface BinaryDataDisplayProps {\n blob: Blob;\n type: string;\n}\n\nexport default function BinaryDataDisplay({ blob, type }: BinaryDataDisplayProps) {\n const [hexData, setHexData] = useState('');\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n const readBinary = async () => {\n try {\n const arrayBuffer = await blob.arrayBuffer();\n const uint8Array = new Uint8Array(arrayBuffer);\n \n // Show first 256 bytes as hex\n const hexBytes = Array.from(uint8Array.slice(0, 256))\n .map(b => b.toString(16).padStart(2, '0'))\n .join(' ');\n \n setHexData(hexBytes + (uint8Array.length > 256 ? '...' : ''));\n } catch (error) {\n setHexData(`Error reading binary data: ${error}`);\n } finally {\n setLoading(false);\n }\n };\n\n readBinary();\n }, [blob]);\n\n if (loading) {\n return

Loading binary data...

;\n }\n\n return (\n

Binary Data (first 256 bytes as hex):

\n {hexData}\n

\n Total Size: {blob.size} bytes\n

\n );\n}",[],[245,275,328],"dcb81a18-1e0e-11f1-86d8-42dde27851f2","App.tsx","019ce1da-6007-7379-88c1-c9e78a97ff8f",15,["D",1773318460649],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, {\n useEffect,\n useState,\n} from \"https://esm.sh/react@18.2.0?deps=react@18.2.0\";\nimport ClipboardReader from \"./ClipboardReader.tsx\";\nimport ClipboardResults from \"./ClipboardResults.tsx\";\nimport ErrorMessage from \"./ErrorMessage.tsx\";\nimport PermissionWarning from \"./PermissionWarning.tsx\";\nimport { ClipboardItem } from \"../types/clipboard.ts\";\n\nexport default function App() {\n const [clipboardItems, setClipboardItems] = useState([]);\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const [showPermissionWarning, setShowPermissionWarning] = useState(false);\n const [status, setStatus] = useState(\"\");\n const [isSupported, setIsSupported] = useState(true);\n\n useEffect(() => {\n checkClipboardSupport();\n\n const handlePaste = (e: globalThis.ClipboardEvent) => {\n e.preventDefault();\n readClipboard();\n };\n\n document.addEventListener(\"paste\", handlePaste);\n return () => document.removeEventListener(\"paste\", handlePaste);\n }, []);\n\n const checkClipboardSupport = () => {\n if (!navigator.clipboard) {\n setError(\n \"Clipboard API not supported in this browser. Try using HTTPS or a modern browser.\",\n );\n setIsSupported(false);\n return false;\n }\n\n if (location.protocol !== \"https:\" && location.hostname !== \"localhost\") {\n setError(\"Clipboard API requires HTTPS or localhost.\");\n setIsSupported(false);\n return false;\n }\n\n return true;\n };\n\n const readClipboard = async () => {\n if (!isSupported) return;\n\n setError(null);\n setShowPermissionWarning(false);\n setIsLoading(true);\n setStatus(\"Reading clipboard...\");\n\n try {\n // Check permission\n const permission = await navigator.permissions.query({\n name: \"clipboard-read\" as PermissionName,\n });\n\n if (permission.state === \"denied\") {\n setShowPermissionWarning(true);\n setStatus(\"Permission denied\");\n setIsLoading(false);\n return;\n }\n\n // Read clipboard items\n const items = await navigator.clipboard.read();\n\n if (items.length === 0) {\n setStatus(\"Clipboard is empty\");\n setClipboardItems([]);\n setIsLoading(false);\n return;\n }\n\n // Process items\n const processedItems: ClipboardItem[] = [];\n\n for (let i = 0; i < items.length; i++) {\n const item = items[i];\n const clipboardItem: ClipboardItem = {\n id: i,\n types: item.types,\n data: {},\n };\n\n // Read data for each type\n for (const type of item.types) {\n try {\n const blob = await item.getType(type);\n clipboardItem.data[type] = {\n blob,\n size: blob.size,\n mimeType: blob.type || \"unknown\",\n };\n } catch (err) {\n clipboardItem.data[type] = {\n error: err instanceof Error ? err.message : \"Unknown error\",\n };\n }\n }\n\n processedItems.push(clipboardItem);\n }\n\n setClipboardItems(processedItems);\n setStatus(`Found ${processedItems.length} clipboard item(s)`);\n } catch (error) {\n console.error(\"Clipboard read error:\", error);\n\n if (error instanceof Error) {\n if (error.name === \"NotAllowedError\") {\n setShowPermissionWarning(true);\n setStatus(\"Permission denied\");\n } else {\n setError(`Error reading clipboard: ${error.message}`);\n setStatus(\"Error occurred\");\n }\n } else {\n setError(\"Unknown error occurred\");\n setStatus(\"Error occurred\");\n }\n } finally {\n setIsLoading(false);\n }\n };\n\n const clearResults = () => {\n setClipboardItems([]);\n setError(null);\n setShowPermissionWarning(false);\n setStatus(\"Results cleared\");\n };\n\n return (\n

\n 📋 Clipboard Debugger\n

\n\n

\n \n\n {status &&

{status}

}\n\n {showPermissionWarning && }\n {error && }\n

\n\n \n

\n );\n}",[],[245,275,335],"75cafbbe-1e08-11f1-a811-42dde27851f2",["D",1773315710899],[185,186,187,188,189,190,191,192,193,194],[245,275],"75cb085c-1e08-11f1-a811-42dde27851f2",["D",1773315710899],[184,195,197,198],[245],["D",1773315710899],[],[18,68],["D",1773315710899],[182],[18],["D",1773315710899],{"_11":12,"_127":74},{"_11":12,"_122":123,"_73":74,"_31":72,"_124":125,"_126":30},{"_39":110,"_13":16,"_33":36,"_111":78,"_112":63,"_113":114,"_115":82,"_116":117,"_118":119,"_120":14,"_121":12},"ctx",{"_52":-5,"_148":393,"_394":395,"_396":397,"_398":30,"_399":30,"_400":30,"_401":24,"_402":-5,"_403":-7,"_404":-7,"_405":26,"_406":30,"_407":30,"_408":-5,"_409":30,"_410":30,"_411":30,"_412":-5},"ENV",{"_364":365,"_366":367,"_368":16,"_369":370,"_371":372,"_373":374,"_375":376,"_377":378,"_379":380,"_381":382,"_383":384,"_385":386,"_387":388,"_389":390,"_391":392},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · backend