[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","693ede54a218819186bf19f6ad465fd9","versionInt","title","Text Diff App (verze A Vs Verze B)","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { diffChars, diffLines, diffWordsWithSpace } from \"diff\";\n\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Button } from \"@/components/ui/button\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { Label } from \"@/components/ui/label\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from \"@/components/ui/tabs\";\nimport { Copy, RotateCcw, ArrowLeftRight, Wand2 } from \"lucide-react\";\n\nfunction clamp01(n) {\n if (Number.isNaN(n)) return 0;\n if (n < 0) return 0;\n if (n > 1) return 1;\n return n;\n}\n\nfunction normalizeForDiff(text, opts) {\n let out = text ?? \"\";\n\n // Preserve newlines, but optionally trim each line\n if (opts.trimLines) {\n out = out\n .split(\"\\n\")\n .map((l) => l.trim())\n .join(\"\\n\");\n }\n\n // Optionally collapse spaces and tabs without touching newlines\n if (opts.collapseSpaces) {\n out = out.replace(/[\\t \\f\\v]+/g, \" \");\n }\n\n // Optionally ignore case\n if (opts.ignoreCase) {\n out = out.toLowerCase();\n }\n\n // Optionally remove trailing spaces before newline\n if (opts.trimLineEndSpaces) {\n out = out.replace(/[\\t ]+\\n/g, \"\\n\");\n }\n\n return out;\n}\n\nfunction computeDiffParts(a, b, granularity) {\n if (granularity === \"chars\") return diffChars(a, b);\n if (granularity === \"words\") return diffWordsWithSpace(a, b);\n return diffLines(a, b);\n}\n\nfunction summarizeDiff(parts) {\n let added = 0;\n let removed = 0;\n let equal = 0;\n for (const p of parts) {\n const len = (p.value ?? \"\").length;\n if (p.added) added += len;\n else if (p.removed) removed += len;\n else equal += len;\n }\n const total = added + removed + equal;\n const similarity = total === 0 ? 1 : clamp01(equal / total);\n return { added, removed, equal, total, similarity };\n}\n\nfunction PartSpan({ part, showUnchanged }) {\n const value = part.value ?? \"\";\n if (!value) return null;\n\n const isAdded = !!part.added;\n const isRemoved = !!part.removed;\n const isUnchanged = !isAdded && !isRemoved;\n\n if (isUnchanged && !showUnchanged) return <>{value};\n\n const cls = isAdded\n ? \"bg-emerald-100 text-emerald-900 ring-1 ring-emerald-200\"\n : isRemoved\n ? \"bg-rose-100 text-rose-900 ring-1 ring-rose-200\"\n : \"bg-slate-100 text-slate-900 ring-1 ring-slate-200\";\n\n return (\n \n {value}\n \n );\n}\n\nfunction DiffBlock({ parts, variant, showUnchanged }) {\n // variant: \"A\" | \"B\" | \"unified\"\n const rendered = parts.map((p, idx) => {\n if (variant === \"A\" && p.added) return null;\n if (variant === \"B\" && p.removed) return null;\n\n if (variant === \"A\") {\n // In A: removed highlights, unchanged optional, added hidden\n const normalized = { ...p, added: false, removed: !!p.removed };\n return ;\n }\n\n if (variant === \"B\") {\n // In B: added highlights, unchanged optional, removed hidden\n const normalized = { ...p, added: !!p.added, removed: false };\n return ;\n }\n\n // unified\n return ;\n });\n\n return (\n

\n {rendered}\n

\n );\n}\n\nfunction formatPercent(x) {\n const pct = Math.round(clamp01(x) * 1000) / 10;\n return String(pct).replace(\".\", \",\") + \" %\";\n}\n\nconst SAMPLE_A = `Dobrý den,\n\nděkuji za schůzku. Posílám shrnutí a návrh dalších kroků.\n\n1) Upřesnit rozsah\n2) Domluvit termín\n\nS pozdravem\nJiri`;\n\nconst SAMPLE_B = `Dobrý den,\n\ndíky za schůzku. Posílám krátké shrnutí a návrh dalších kroků.\n\n1) Upřesnit rozsah projektu\n2) Domluvit termín workshopu\n3) Nastavit vlastní proxy metriky\n\nS pozdravem\nJiří`;\n\nexport default function App() {\n const [a, setA] = useState(\"\");\n const [b, setB] = useState(\"\");\n\n const [granularity, setGranularity] = useState(\"words\"); // chars | words | lines\n const [view, setView] = useState(\"split\"); // split | unified\n\n const [ignoreCase, setIgnoreCase] = useState(false);\n const [trimLines, setTrimLines] = useState(false);\n const [trimLineEndSpaces, setTrimLineEndSpaces] = useState(true);\n const [collapseSpaces, setCollapseSpaces] = useState(false);\n\n const [showUnchanged, setShowUnchanged] = useState(true);\n\n const [toast, setToast] = useState(\"\");\n const toastTimerRef = useRef(null);\n\n const [manualCopy, setManualCopy] = useState({\n open: false,\n title: \"\",\n text: \"\",\n });\n const manualRef = useRef(null);\n\n function flash(msg) {\n setToast(msg);\n if (toastTimerRef.current) window.clearTimeout(toastTimerRef.current);\n toastTimerRef.current = window.setTimeout(() => setToast(\"\"), 1600);\n }\n\n useEffect(() => {\n if (!manualCopy.open) return;\n const t = window.setTimeout(() => {\n try {\n manualRef.current?.focus?.();\n manualRef.current?.select?.();\n } catch {\n // ignore\n }\n }, 50);\n return () => window.clearTimeout(t);\n }, [manualCopy.open]);\n\n useEffect(() => {\n // Pre-fill with sample on first load\n setA(SAMPLE_A);\n setB(SAMPLE_B);\n }, []);\n\n const opts = useMemo(\n () => ({ ignoreCase, trimLines, trimLineEndSpaces, collapseSpaces }),\n [ignoreCase, trimLines, trimLineEndSpaces, collapseSpaces]\n );\n\n const diffModel = useMemo(() => {\n const aN = normalizeForDiff(a, opts);\n const bN = normalizeForDiff(b, opts);\n const parts = computeDiffParts(aN, bN, granularity);\n const stats = summarizeDiff(parts);\n return { parts, stats, aN, bN };\n }, [a, b, opts, granularity]);\n\n async function copyToClipboard(text) {\n const value = String(text ?? \"\");\n\n // Modern clipboard API (works only in secure contexts)\n try {\n if (navigator.clipboard && window.isSecureContext) {\n await navigator.clipboard.writeText(value);\n return true;\n }\n } catch {\n // fallback below\n }\n\n // Fallback for environments where navigator.clipboard is blocked\n try {\n const ta = document.createElement(\"textarea\");\n ta.value = value;\n ta.setAttribute(\"readonly\", \"\");\n ta.style.position = \"fixed\";\n ta.style.top = \"0\";\n ta.style.left = \"0\";\n ta.style.opacity = \"0\";\n ta.style.pointerEvents = \"none\";\n document.body.appendChild(ta);\n ta.focus();\n ta.select();\n const ok = document.execCommand(\"copy\");\n document.body.removeChild(ta);\n return ok;\n } catch {\n return false;\n }\n }\n\n async function handleCopy(text, title) {\n const ok = await copyToClipboard(text);\n if (ok) {\n flash(\"Zkopírováno\");\n return;\n }\n\n flash(\"Automatické kopírování je zablokované, otevřel jsem ruční kopírování\");\n setManualCopy({\n open: true,\n title: title || \"Text\",\n text: String(text ?? \"\"),\n });\n }\n\n const unifiedText = useMemo(() => {\n // Create a readable unified representation with +/- prefixes for lines view\n if (granularity !== \"lines\") {\n return diffModel.parts\n .map((p) => {\n const prefix = p.added ? \"+\" : p.removed ? \"-\" : \" \";\n return prefix + (p.value ?? \"\");\n })\n .join(\"\");\n }\n\n return diffModel.parts\n .map((p) => {\n const prefix = p.added ? \"+ \" : p.removed ? \"- \" : \" \";\n const lines = (p.value ?? \"\").split(\"\\n\");\n return lines\n .map((line, i) => {\n const isLastEmpty = i === lines.length - 1 && line === \"\";\n if (isLastEmpty) return \"\";\n return prefix + line;\n })\n .filter(Boolean)\n .join(\"\\n\") + \"\\n\";\n })\n .join(\"\")\n .trimEnd();\n }, [diffModel.parts, granularity]);\n\n const similarityLabel = formatPercent(diffModel.stats.similarity);\n\n return (\n

\n {toast ? (\n \n {toast}\n \n ) : null}\n\n {manualCopy.open ? (\n

\n setManualCopy((s) => ({ ...s, open: false }))}\n />\n \n \n

\n \n Ruční kopírování: {manualCopy.title}\n \n setManualCopy((s) => ({ ...s, open: false }))}\n >\n Zavřít\n \n

\n \n \n

\n Text je označený. Zkopíruj ho přes Ctrl+C nebo Cmd+C.\n

\n e.target.select()}\n />\n

\n handleCopy(manualCopy.text, manualCopy.title)}\n >\n Zkusit zkopírovat znovu\n \n {\n try {\n manualRef.current?.focus?.();\n manualRef.current?.select?.();\n } catch {\n // ignore\n }\n }}\n >\n Označit text\n \n

\n \n \n

\n ) : null}\n \n

\n Porovnání textů: Verze A vs Verze B\n

\n Vlož dva texty a aplikace zvýrazní rozdíly i shody.\n

\n\n

\n \n Podobnost: {similarityLabel}\n \n \n Přidáno: {diffModel.stats.added}\n \n \n Odebráno: {diffModel.stats.removed}\n \n \n Shodné: {diffModel.stats.equal}\n \n

\n\n \n \n\n

\n \n \n

\n Verze A\n

\n handleCopy(a, \"Verze A\")}\n >\n Kopírovat\n \n

\n \n \n setA(e.target.value)}\n placeholder=\"Vlož text verze A\"\n className=\"min-h-[220px] rounded-2xl\"\n />\n \n \n\n \n \n

\n Verze B\n

\n handleCopy(b, \"Verze B\")}\n >\n Kopírovat\n \n

\n \n \n setB(e.target.value)}\n placeholder=\"Vlož text verze B\"\n className=\"min-h-[220px] rounded-2xl\"\n />\n \n \n

\n\n \n \n

\n Detail\n \n

\n\n

\n Zobrazení\n \n

\n\n {\n setA((prevA) => {\n setB(prevA);\n return b;\n });\n }}\n title=\"Prohodit A a B\"\n >\n Prohodit\n \n\n {\n setA(\"\");\n setB(\"\");\n }}\n title=\"Vymazat\"\n >\n Vymazat\n \n\n {\n setA(SAMPLE_A);\n setB(SAMPLE_B);\n }}\n title=\"Načíst ukázku\"\n >\n Ukázka\n \n

\n\n

\n \n Zvýraznit shody\n

\n \n\n \n

\n Ignorovat velikost písmen\n \n

\n Oříznout řádky\n \n

\n Odebrat mezery na konci řádku\n \n

\n Sjednotit mezery a taby\n \n

\n\n

\n Legenda:\n \n \n přidáno\n \n \n \n odebráno\n \n \n \n shodné\n \n \n Diff se počítá na upravených textech podle voleb výše.\n \n

\n\n \n \n Výsledek\n Unified text\n \n\n \n {view === \"split\" ? (\n

\n \n \n

\n Zobrazení A\n handleCopy(diffModel.aN, \"Normalizované A\")}\n >\n Kopírovat normalizované A\n \n

\n \n \n \n \n \n\n \n \n

\n Zobrazení B\n handleCopy(diffModel.bN, \"Normalizované B\")}\n >\n Kopírovat normalizované B\n \n

\n \n \n \n \n \n

\n ) : (\n \n \n

\n Jednotné zobrazení\n handleCopy(unifiedText, \"Unified text\")}\n >\n Kopírovat\n \n

\n \n \n \n \n \n )}\n \n\n \n \n \n

\n Unified text (kopírovatelné)\n handleCopy(unifiedText, \"Unified text\")}\n >\n Kopírovat\n \n

\n \n \n

\n{unifiedText}\n

\n \n \n \n \n \n \n\n

\n Tip: pro porovnání textů z PDF často pomůže zapnout \"Odebrat mezery na konci řádku\" a porovnání na úrovni \"Řádky\".\n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","3043017615549263087","traceTime",1776426057347]