HTML Clipboard Writer

\n \n \n

\n \n\n\n `,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n}",[],[249,301],["D",1773319463212],[290],[249],"75cb055a-1e08-11f1-a811-42dde27851f2",["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 { 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();",[],[95,102],"75cb01d6-1e08-11f1-a811-42dde27851f2",["D",1773315710899],"\n\n\n \n \n Clipboard Debugger\n \n \n\n\n

\n \n\n",[],[95,109],"75cafd08-1e08-11f1-a811-42dde27851f2",["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}",[],[95,115,121],"75cb005a-1e08-11f1-a811-42dde27851f2",["D",1773315710899],[286],[95,115],"040c77be-1e12-11f1-bf22-42dde27851f2",["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}",[],[95,127,133],"75cae7a0-1e08-11f1-a811-42dde27851f2",["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}",[],[95,127,139],"75cae14c-1e08-11f1-a811-42dde27851f2",["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}",[],[95,127,145],"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}",[],[95,127,348],"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}",[],[95,127,355],"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}",[],[95,127,362],"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}",[],[95,127,369],"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}",[],[95,127,376],"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}",[],[95,127,385],"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}",[],[95,127,392],"75cafbbe-1e08-11f1-a811-42dde27851f2",["D",1773315710899],[275,276,277,278,279,280,281,282,283,284],[95,127],["D",1773315710899],[274,285,287,288],[95],"75ca69f6-1e08-11f1-a811-42dde27851f2","index.ts",["D",1773315710899],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve frontend files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve the main page\napp.get(\"/\", async c => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\nexport default app.fetch;",[],[258,407],["D",1773315710899],[272],[258],["D",1773315710899],{"_11":12,"_197":82},{"_11":12,"_192":193,"_81":82,"_25":80,"_194":195,"_196":24},{"_33":180,"_13":16,"_27":30,"_181":146,"_182":72,"_183":184,"_185":150,"_186":187,"_188":189,"_190":14,"_191":12},"ctx",{"_45":-5,"_219":452,"_453":454,"_455":456,"_457":24,"_458":24,"_459":24,"_460":157,"_461":-5,"_462":-7,"_463":-7,"_464":143,"_465":24,"_466":24,"_467":-5,"_468":24,"_469":24,"_470":24,"_471":-5},"ENV",{"_423":424,"_425":426,"_427":16,"_428":429,"_430":431,"_432":433,"_434":435,"_436":437,"_438":439,"_440":441,"_442":443,"_444":445,"_446":447,"_448":449,"_450":451},"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