[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","69ccdf3f542c8191bc0b201960f6639e","versionInt","title","Bionic-reading-stodapp","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\n\nconst DEFAULT_TEXT = `Klista in valfri text här. Tjänsten är byggd för att göra läsning mer flexibel och mer tillgänglig.\n\nDu kan slå på bionic reading, justera fontstorlek, välja typsnitt, ändra radavstånd och använda en läslinjal som hjälper ögat att fokusera på en mindre del av texten i taget.\n\nTanken är inte att en enda inställning passar alla. Olika elever behöver olika stöd. Därför går det att prova sig fram och hitta ett läsläge som känns lugnare, tydligare och mer hållbart.`;\n\nconst FONT_OPTIONS = [\n { label: \"Atkinson Hyperlegible\", value: \"Atkinson Hyperlegible, Arial, sans-serif\" },\n { label: \"Lexend\", value: \"Lexend, Arial, sans-serif\" },\n { label: \"Arial\", value: \"Arial, Helvetica, sans-serif\" },\n { label: \"Verdana\", value: \"Verdana, Geneva, sans-serif\" },\n { label: \"Georgia\", value: \"Georgia, serif\" },\n];\n\nconst THEMES = {\n soft: {\n page: \"bg-slate-100 text-slate-900\",\n panel: \"bg-white/90 border-slate-200\",\n preview: \"#fffdf7\",\n previewText: \"#111827\",\n muted: \"text-slate-600\",\n rulerMask: \"rgba(15, 23, 42, 0.14)\",\n rulerBand: \"rgba(250, 204, 21, 0.15)\",\n rulerOutline: \"rgba(234, 179, 8, 0.65)\",\n },\n cream: {\n page: \"bg-amber-50 text-stone-900\",\n panel: \"bg-white/80 border-amber-200\",\n preview: \"#fffaf0\",\n previewText: \"#1c1917\",\n muted: \"text-stone-600\",\n rulerMask: \"rgba(68, 64, 60, 0.16)\",\n rulerBand: \"rgba(251, 191, 36, 0.16)\",\n rulerOutline: \"rgba(217, 119, 6, 0.55)\",\n },\n dark: {\n page: \"bg-slate-950 text-slate-100\",\n panel: \"bg-slate-900/90 border-slate-800\",\n preview: \"#0f172a\",\n previewText: \"#f8fafc\",\n muted: \"text-slate-400\",\n rulerMask: \"rgba(2, 6, 23, 0.38)\",\n rulerBand: \"rgba(56, 189, 248, 0.12)\",\n rulerOutline: \"rgba(56, 189, 248, 0.55)\",\n },\n contrast: {\n page: \"bg-black text-white\",\n panel: \"bg-neutral-950 border-neutral-800\",\n preview: \"#000000\",\n previewText: \"#ffffff\",\n muted: \"text-neutral-400\",\n rulerMask: \"rgba(255, 255, 255, 0.14)\",\n rulerBand: \"rgba(250, 204, 21, 0.2)\",\n rulerOutline: \"rgba(250, 204, 21, 0.75)\",\n },\n};\n\nfunction classNames(...classes) {\n return classes.filter(Boolean).join(\" \");\n}\n\nfunction tokenizeParagraph(paragraph) {\n return paragraph.match(/\\S+|\\s+/g) || [];\n}\n\nfunction splitWordToken(token) {\n const match = token.match(/^([^\\p{L}\\p{N}]*)([\\p{L}\\p{N}'’-]+)([^\\p{L}\\p{N}]*)$/u);\n if (!match) {\n return { leading: \"\", core: token, trailing: \"\", isWord: false };\n }\n return {\n leading: match[1] || \"\",\n core: match[2] || \"\",\n trailing: match[3] || \"\",\n isWord: true,\n };\n}\n\nfunction getBoldCount(word, intensity) {\n const len = [...word].length;\n if (len <= 1) return len;\n if (len === 2) return 1;\n const ratio = 0.38 + intensity * 0.22;\n const count = Math.round(len * ratio);\n return Math.max(1, Math.min(len - 1, count));\n}\n\nfunction renderToken(token, key, enableBionic, intensity) {\n if (/^\\s+$/u.test(token)) {\n return {token};\n }\n\n const parts = splitWordToken(token);\n\n if (!enableBionic || !parts.isWord) {\n return {token};\n }\n\n const cut = getBoldCount(parts.core, intensity);\n const chars = [...parts.core];\n const first = chars.slice(0, cut).join(\"\");\n const rest = chars.slice(cut).join(\"\");\n\n return (\n \n {parts.leading}\n {first}\n {rest}\n {parts.trailing}\n \n );\n}\n\nfunction buildProcessedHtml(text, enableBionic, intensity) {\n const escape = (value) =>\n value\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\\\"/g, \""\")\n .replace(/'/g, \"'\");\n\n return text\n .split(/\\n\\n+/)\n .map((paragraph) => {\n const html = tokenizeParagraph(paragraph)\n .map((token) => {\n if (/^\\s+$/u.test(token)) return escape(token).replace(/ /g, \" \");\n const parts = splitWordToken(token);\n if (!enableBionic || !parts.isWord) return escape(token);\n const cut = getBoldCount(parts.core, intensity);\n const chars = [...parts.core];\n const first = escape(chars.slice(0, cut).join(\"\"));\n const rest = escape(chars.slice(cut).join(\"\"));\n return `${escape(parts.leading)}${first}${rest}${escape(parts.trailing)}`;\n })\n .join(\"\");\n return `

${html}

`;\n })\n .join(\"\");\n}\n\nfunction SectionTitle({ children }) {\n return

{children}

;\n}\n\nfunction RangeControl({ label, value, min, max, step = 1, suffix = \"\", onChange }) {\n return (\n \n

\n {label}\n {value}{suffix}\n

\n onChange(Number(e.target.value))}\n className=\"w-full accent-slate-900\"\n />\n \n );\n}\n\nfunction TogglePill({ active, children, onClick }) {\n return (\n \n {children}\n \n );\n}\n\nexport default function BionicReadingStodapp() {\n const [text, setText] = useState(DEFAULT_TEXT);\n const [fontFamily, setFontFamily] = useState(FONT_OPTIONS[0].value);\n const [fontSize, setFontSize] = useState(22);\n const [lineHeight, setLineHeight] = useState(1.8);\n const [letterSpacing, setLetterSpacing] = useState(0.2);\n const [wordSpacing, setWordSpacing] = useState(0.16);\n const [maxWidth, setMaxWidth] = useState(720);\n const [align, setAlign] = useState(\"left\");\n const [theme, setTheme] = useState(\"cream\");\n const [enableBionic, setEnableBionic] = useState(true);\n const [bionicIntensity, setBionicIntensity] = useState(0.48);\n const [rulerEnabled, setRulerEnabled] = useState(false);\n const [rulerY, setRulerY] = useState(180);\n const [rulerHeight, setRulerHeight] = useState(74);\n const [status, setStatus] = useState(\"\");\n const [isReadingMode, setIsReadingMode] = useState(false);\n const [showReadingTools, setShowReadingTools] = useState(true);\n\n const previewRef = useRef(null);\n const activeTheme = THEMES[theme];\n\n const paragraphs = useMemo(() => text.split(/\\n\\n+/), [text]);\n\n const stats = useMemo(() => {\n const words = (text.match(/\\S+/g) || []).length;\n const chars = text.length;\n return { words, chars };\n }, [text]);\n\n const processedHtml = useMemo(\n () => buildProcessedHtml(text, enableBionic, bionicIntensity),\n [text, enableBionic, bionicIntensity]\n );\n\n useEffect(() => {\n const handleKeyDown = (event) => {\n if (!isReadingMode) return;\n if (event.key === \"Escape\") {\n setIsReadingMode(false);\n setShowReadingTools(true);\n }\n if (event.key.toLowerCase() === \"h\") {\n setShowReadingTools((value) => !value);\n }\n };\n\n window.addEventListener(\"keydown\", handleKeyDown);\n return () => window.removeEventListener(\"keydown\", handleKeyDown);\n }, [isReadingMode]);\n\n const updateRulerFromMouse = (event) => {\n if (!rulerEnabled || !previewRef.current) return;\n const rect = previewRef.current.getBoundingClientRect();\n const next = event.clientY - rect.top;\n setRulerY(Math.max(rulerHeight / 2, Math.min(rect.height - rulerHeight / 2, next)));\n };\n\n const applyPreset = (preset) => {\n if (preset === \"lugn\") {\n setFontFamily(\"Atkinson Hyperlegible, Arial, sans-serif\");\n setFontSize(23);\n setLineHeight(1.9);\n setLetterSpacing(0.25);\n setWordSpacing(0.18);\n setMaxWidth(700);\n setTheme(\"cream\");\n setEnableBionic(true);\n setBionicIntensity(0.48);\n setAlign(\"left\");\n setRulerEnabled(true);\n setRulerHeight(78);\n }\n if (preset === \"kontrast\") {\n setFontFamily(\"Lexend, Arial, sans-serif\");\n setFontSize(24);\n setLineHeight(1.85);\n setLetterSpacing(0.24);\n setWordSpacing(0.16);\n setMaxWidth(760);\n setTheme(\"contrast\");\n setEnableBionic(false);\n setAlign(\"left\");\n setRulerEnabled(false);\n }\n if (preset === \"fokus\") {\n setFontFamily(\"Atkinson Hyperlegible, Arial, sans-serif\");\n setFontSize(21);\n setLineHeight(1.75);\n setLetterSpacing(0.16);\n setWordSpacing(0.12);\n setMaxWidth(640);\n setTheme(\"soft\");\n setEnableBionic(true);\n setBionicIntensity(0.56);\n setAlign(\"left\");\n setRulerEnabled(true);\n setRulerHeight(64);\n }\n };\n\n const openReadingMode = () => {\n setIsReadingMode(true);\n setShowReadingTools(true);\n };\n\n const copyPlainText = async () => {\n await navigator.clipboard.writeText(text);\n setStatus(\"Originaltext kopierad.\");\n setTimeout(() => setStatus(\"\"), 1800);\n };\n\n const downloadHtml = () => {\n const html = `\n\n \n \n \n Bionic reading export\n \n \n \n

${processedHtml}

\n \n`;\n\n const blob = new Blob([html], { type: \"text/html;charset=utf-8\" });\n const url = URL.createObjectURL(blob);\n const link = document.createElement(\"a\");\n link.href = url;\n link.download = \"bionic-reading-export.html\";\n link.click();\n URL.revokeObjectURL(url);\n setStatus(\"HTML-export nedladdad.\");\n setTimeout(() => setStatus(\"\"), 1800);\n };\n\n const printView = () => {\n const newWindow = window.open(\"\", \"_blank\", \"width=900,height=900\");\n if (!newWindow) return;\n newWindow.document.write(`\n\n \n \n Utskrift\n \n \n \n

${processedHtml}

\n \n \n`);\n newWindow.document.close();\n };\n\n return (\n

\n \n\n

\n Läshjälp för tillgänglig text\n

Bionic reading med stöd för elever som behöver lugnare läsning

\n Klistra in en text, slå på bionic reading och finjustera visningen med typsnitt, storlek, radavstånd, kontrast och läslinjal.\n

\n\n

\n \n \n \n \n

\n\n

\n Text in\n setText(e.target.value)}\n className=\"min-h-[220px] w-full rounded-2xl border border-slate-300 bg-white p-4 text-sm text-slate-900 shadow-inner outline-none ring-0 placeholder:text-slate-400 focus:border-slate-500\"\n placeholder=\"Klistra in text här\"\n />\n

\n {stats.words} ord\n {stats.chars} tecken\n

\n\n

\n Visningsläge\n

\n setEnableBionic(true)}>Bionic reading\n setEnableBionic(false)}>Vanlig text\n setRulerEnabled((v) => !v)}>Läslinjal\n

\n\n

\n Typografi\n \n Typsnitt\n setFontFamily(e.target.value)}\n className=\"rounded-2xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900\"\n >\n {FONT_OPTIONS.map((option) => (\n \n ))}\n \n \n\n

\n \n \n \n \n \n {enableBionic ? (\n \n ) : (\n

\n Slå på bionic reading för att justera hur stor del av varje ord som markeras.\n

\n )}\n

\n\n

\n Utseende\n

\n setTheme(\"cream\")}>Varm bakgrund\n setTheme(\"soft\")}>Ljus\n setTheme(\"dark\")}>Mörk\n setTheme(\"contrast\")}>Hög kontrast\n

\n setAlign(\"left\")}>Vänsterställd\n setAlign(\"center\")}>Centrerad\n

\n\n

\n Läslinjal\n

\n När läslinjalen är på kan du föra musen över texten så flyttar sig fokusfältet. Det går också att justera höjden här.\n

\n \n

\n\n

\n Export\n

\n \n \n \n

{status}

\n\n

Förhandsvisning

\n Prova dig fram. Målet är att hitta en läsbild som minskar visuellt brus.\n

\n {enableBionic ? \"Bionic reading aktivt\" : \"Vanlig text\"}\n

\n \n

\n\n \n \n {paragraphs.map((paragraph, paragraphIndex) => (\n

\n {tokenizeParagraph(paragraph).map((token, tokenIndex) =>\n renderToken(token, `${paragraphIndex}-${tokenIndex}`, enableBionic, bionicIntensity)\n )}\n

\n ))}\n

\n\n {rulerEnabled && (\n

\n \n \n \n

\n )}\n

\n\n

Varför flera val?

\n Lässtöd fungerar olika för olika elever. Därför går det att kombinera bionic reading med större text, smalare radlängd och lugnare bakgrund.\n

Bra att börja med

\n Testa först Atkinson Hyperlegible, fontstorlek runt 20 till 24 px, vänsterställd text och radavstånd runt 1.7 till 1.9.\n

Tips till lärare

\n Låt eleven jämföra två läslägen och beskriva vilket som känns mest hållbart över tid. Det brukar ge bättre träffsäkerhet än att vuxna gissar.\n

\n \n

\n \n\n {isReadingMode && (\n

\n \n

\n \n \n \n

\n Esc stänger. H visar eller döljer menyn.\n

\n\n {!showReadingTools && (\n setShowReadingTools(true)}\n className=\"fixed right-4 top-4 z-10 rounded-full border border-black/10 bg-white/85 px-3 py-2 text-sm font-medium text-slate-700 shadow-sm backdrop-blur\"\n >\n Visa meny\n \n )}\n\n \n \n {paragraphs.map((paragraph, paragraphIndex) => (\n

\n {tokenizeParagraph(paragraph).map((token, tokenIndex) =>\n renderToken(token, `reading-${paragraphIndex}-${tokenIndex}`, enableBionic, bionicIntensity)\n )}\n

\n ))}\n \n\n {rulerEnabled && (\n

\n \n \n \n

\n )}\n \n \n )}\n \n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","5802155143808250093","traceTime",1780377605942]