@studiotitta/studio-editori 0.1.9 → 0.1.10

package/dist/komponentit/Muokattava.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { draftMode } from "next/headers";
+import { rivinvaihdoin } from "./rivinvaihdot.js";
 export async function Muokattava({ kentta, as, children, ...muut }) {
     const Elementti = as ?? "span";
     const { isEnabled: muokkaustila } = await draftMode();
-    return (_jsx(Elementti, { ...muut, ...(muokkaustila ? { "data-editori-kentta": kentta } : {}), children: children }));
+    return (_jsx(Elementti, { ...muut, ...(muokkaustila ? { "data-editori-kentta": kentta } : {}), children: rivinvaihdoin(children) }));
 }

package/dist/komponentit/rivinvaihdot.d.ts

@@ -0,0 +1,2 @@
+import { type ReactNode } from "react";
+export declare function rivinvaihdoin(lapset: ReactNode): ReactNode;

package/dist/komponentit/rivinvaihdot.js

@@ -0,0 +1,30 @@
+import { createElement, Fragment } from "react";
+/* ==========================================================================
+   RIVINVAIHDOT JA KAPPALEVÄLIT
+   ==========================================================================
+   Tekstialueeseen kirjoitettu rivinvaihto tallentuu tekstiin merkkinä "\n",
+   mutta HTML näyttää sen välilyöntinä. Tämä muuttaa sen sivulla <br>:ksi:
+
+     Enter          → uusi rivi
+     tyhjä rivi     → kappaleväli (<br><br>)
+
+   <br> eikä <p>, koska kenttä on usein itse <p> eikä kappaletta voi laittaa
+   kappaleen sisään. <br> toimii minkä tahansa elementin sisällä ilman, että
+   sivuston CSS:ää tarvitsee muuttaa — ja editori lukee sen takaisin samaksi
+   "\n":ksi (selain/mitta.ts, tekstiRiveina).
+
+   Vain merkkijonolapsi muuttuu. Jos sivusto rakentaa kentän itse
+   kappaleiksi tai listaksi, sen rakenne jää koskematta.
+   ========================================================================== */
+export function rivinvaihdoin(lapset) {
+    if (typeof lapset !== "string" || !/[\r\n]/.test(lapset))
+        return lapset;
+    const rivit = lapset
+        .replace(/\r\n?/g, "\n")
+        /* Kolme tyhjää riviä on sama kappaleväli kuin yksi: sivun rytmi pysyy
+           designin mukaisena, vaikka Enteriä painaisi monta kertaa. */
+        .replace(/\n{3,}/g, "\n\n")
+        .replace(/^\n+|\n+$/g, "")
+        .split("\n");
+    return rivit.map((rivi, sija) => createElement(Fragment, { key: sija }, sija > 0 ? createElement("br") : null, rivi));
+}

package/dist/selain/Muokkaustila.d.ts

@@ -1,3 +1,3 @@
-declare const PALKIN_TYYLIT = "\n  :host { all: initial; }\n  .palkki {\n    position: fixed; inset: auto 1rem 1rem auto; z-index: 2147483000;\n    display: flex; align-items: center; gap: .75rem;\n    padding: .6rem .75rem .6rem 1rem; border-radius: .5rem;\n    background: #1d1f1e; color: #fff;\n    font: 500 .875rem/1.4 -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.25);\n    max-width: calc(100vw - 2rem);\n  }\n  .tila { opacity: .75; font-weight: 400; }\n  .tila[data-virhe=\"1\"] { color: #ffb4a2; opacity: 1; }\n  button {\n    font: inherit; padding: .45rem .8rem; border-radius: .35rem;\n    border: 1px solid rgba(255,255,255,.25); background: transparent; color: inherit;\n    cursor: pointer;\n  }\n  button.ensisijainen { background: #fff; color: #1d1f1e; border-color: #fff; }\n  button:disabled { opacity: .5; cursor: default; }\n  button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }\n\n  /* Sivupaneeli */\n  .paneeli {\n    position: fixed; inset: 0 0 0 auto; z-index: 2147482999;\n    width: min(23rem, 100vw); overflow-y: auto;\n    padding: 1.25rem 1.25rem 6rem;\n    background: #fbfaf8; color: #1d1f1e;\n    border-left: 1px solid rgba(0,0,0,.12);\n    font: 400 .875rem/1.5 -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    box-shadow: -.5rem 0 1.5rem rgba(0,0,0,.08);\n  }\n  .paneeli h2 { margin: 0 0 .75rem; font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; opacity: .6; }\n  .paneeli section + section { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(0,0,0,.1); }\n  .kentta { margin-bottom: 1rem; }\n  .kentta label { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .25rem; font-weight: 600; }\n  .kieli { font-weight: 400; font-size: .75rem; padding: 0 .3rem; border-radius: .2rem; background: rgba(0,0,0,.08); text-transform: uppercase; }\n  .kentta input[type=text], .kentta input[type=number], .kentta input[type=date],\n  .kentta input[type=datetime-local], .kentta select, .kentta textarea {\n    width: 100%; padding: .45rem .55rem; border: 1px solid rgba(0,0,0,.25);\n    border-radius: .25rem; background: #fff; font: inherit; color: inherit;\n  }\n  .kentta textarea { resize: vertical; }\n  .kytkin { display: flex; gap: .5rem; align-items: center; font-weight: 400; }\n  .kielivalinta { display: grid; gap: .35rem; }\n  .kaannos button { color: inherit; border-color: rgba(0,0,0,.25); }\n  .ohje { margin: .25rem 0 0; font-size: .8125rem; opacity: .65; }\n  .laskuri { margin: .3rem 0 0; font-size: .8125rem; font-weight: 600; }\n  /* Pakollinen kentt\u00E4: punainen t\u00E4hti on tuttu merkki, eik\u00E4 se vie tilaa. */\n  .pakko { color: #b3261e; font-weight: 700; }\n  .piilossa {\n    position: absolute; width: 1px; height: 1px; overflow: hidden;\n    clip-path: inset(50%); white-space: nowrap;\n  }\n  .linkki {\n    background: none; border: 0; padding: 0; margin: 0; font: inherit;\n    color: inherit; text-decoration: underline; cursor: pointer;\n  }\n  .virheet { padding: .75rem .9rem; border-radius: .3rem; background: #f6e8e3; color: #6d2b20; }\n  .virheet h2 { margin: 0 0 .4rem; opacity: 1; color: inherit; }\n  .virheet ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; }\n  .kuva img { display: block; width: 100%; height: auto; border-radius: .25rem; margin-bottom: .4rem; }\n  .kuva input[type=text] { width: 100%; padding: .45rem .55rem; border: 1px solid rgba(0,0,0,.25); border-radius: .25rem; font: inherit; }\n  /* Kuvan tekstikentt\u00E4 on oma lohkonsa: label on .kentta-tasolla flex,\n     ja ilman t\u00E4t\u00E4 otsikko ja kentt\u00E4 asettuisivat vierekk\u00E4in. */\n  .kentta label.alt, .kuva label.alt { display: block; font-weight: 600; margin-top: .5rem; }\n  .alt input { margin-top: .25rem; width: 100%; }\n  .huomio {\n    margin: .4rem 0 0; padding: .5rem .6rem; border-radius: .25rem;\n    background: #fdf3e7; color: #6b4a1f; font-size: .8125rem;\n  }\n  .huomio p { margin: 0 0 .4rem; }\n  .huomio button { color: inherit; border-color: rgba(107,74,31,.35); padding: .3rem .6rem; }\n  .lataus { display: inline-flex; margin: 0 0 .5rem; }\n  .lataus span {\n    padding: .45rem .8rem; border: 1px solid rgba(0,0,0,.25); border-radius: .35rem;\n    cursor: pointer; font-weight: 600;\n  }\n  .lataus input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }\n  .virheviesti { margin: 0 0 .5rem; color: #8c3b2e; font-size: .8125rem; }\n  .tyhja { margin: 0; opacity: .6; }\n  .kohteet { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .25rem; }\n  .kohteet button {\n    width: 100%; text-align: left; color: inherit; border-color: rgba(0,0,0,.15);\n    display: flex; justify-content: space-between; gap: .5rem; align-items: center;\n  }\n  .kohteet button.valittu { background: #1d1f1e; color: #fff; border-color: #1d1f1e; }\n  .merkki { font-size: .75rem; opacity: .7; white-space: nowrap; }\n  /* Taitos n\u00E4ytt\u00E4\u00E4 painikkeelta ja nuoli osoittaa sinne, minne sis\u00E4lt\u00F6\n     aukeaa: alas kiinni ollessa, yl\u00F6s auki ollessa. */\n  .ryhma { margin: 0 0 1rem; padding: .75rem .8rem; border-radius: .3rem; background: rgba(0,0,0,.035); }\n  .ryhma h3 { margin: 0 0 .5rem; font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; opacity: .65; }\n  .ryhma .kentta:last-child { margin-bottom: 0; }\n  .lisatiedot { margin: .25rem 0 1rem; border-top: 1px solid rgba(0,0,0,.1); }\n  .lisatiedot summary {\n    cursor: pointer; font-weight: 600; padding: .7rem 0; list-style: none;\n    display: flex; align-items: center; gap: .5rem;\n  }\n  .lisatiedot summary::-webkit-details-marker { display: none; }\n  .lisatiedot summary::after {\n    content: \"\u25BE\"; font-size: 1.1rem; line-height: 1; margin-left: auto;\n  }\n  .lisatiedot[open] summary::after { content: \"\u25B4\"; }\n  .lisatiedot summary:hover { text-decoration: underline; }\n  .lisatiedot summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n  .kaannos { margin: 0 0 1rem; padding: .6rem .7rem; border-radius: .25rem; background: #eef1ee; }\n  .kaannos p { margin: 0 0 .5rem; }\n  /* Kenttien nimet omalle rivilleen: lause pysyy luettavana ja nimet erottuvat. */\n  .kaannos strong { display: block; margin-top: .15rem; }\n  .kaannos button { color: inherit; border-color: rgba(0,0,0,.25); }\n  .napit { display: flex; gap: .5rem; margin-bottom: 1rem; }\n  .napit button { color: inherit; border-color: rgba(0,0,0,.25); }\n  .napit button.vaarallinen { color: #8c3b2e; border-color: rgba(140,59,46,.4); }\n";
+declare const PALKIN_TYYLIT = "\n  :host { all: initial; }\n  .palkki {\n    position: fixed; inset: auto 1rem 1rem auto; z-index: 2147483000;\n    display: flex; align-items: center; gap: .75rem;\n    padding: .6rem .75rem .6rem 1rem; border-radius: .5rem;\n    background: #1d1f1e; color: #fff;\n    font: 500 .875rem/1.4 -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.25);\n    max-width: calc(100vw - 2rem);\n  }\n  .tila { opacity: .75; font-weight: 400; }\n  .tila[data-virhe=\"1\"] { color: #ffb4a2; opacity: 1; }\n  button {\n    font: inherit; padding: .45rem .8rem; border-radius: .35rem;\n    border: 1px solid rgba(255,255,255,.25); background: transparent; color: inherit;\n    cursor: pointer;\n  }\n  button.ensisijainen { background: #fff; color: #1d1f1e; border-color: #fff; }\n  button:disabled { opacity: .5; cursor: default; }\n  button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }\n\n  /* Sivupaneeli */\n  .paneeli {\n    position: fixed; inset: 0 0 0 auto; z-index: 2147482999;\n    width: min(23rem, 100vw); overflow-y: auto;\n    padding: 1.25rem 1.25rem 6rem;\n    background: #fbfaf8; color: #1d1f1e;\n    border-left: 1px solid rgba(0,0,0,.12);\n    font: 400 .875rem/1.5 -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    box-shadow: -.5rem 0 1.5rem rgba(0,0,0,.08);\n  }\n  .paneeli h2 { margin: 0 0 .75rem; font-size: .8125rem; text-transform: uppercase; letter-spacing: .06em; opacity: .6; }\n  .paneeli section + section { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(0,0,0,.1); }\n  .kentta { margin-bottom: 1rem; }\n  .kentta label { display: flex; gap: .5rem; align-items: baseline; margin-bottom: .25rem; font-weight: 600; }\n  .kieli { font-weight: 400; font-size: .75rem; padding: 0 .3rem; border-radius: .2rem; background: rgba(0,0,0,.08); text-transform: uppercase; }\n  .kentta input[type=text], .kentta input[type=number], .kentta input[type=date],\n  .kentta input[type=datetime-local], .kentta select, .kentta textarea {\n    width: 100%; padding: .45rem .55rem; border: 1px solid rgba(0,0,0,.25);\n    border-radius: .25rem; background: #fff; font: inherit; color: inherit;\n  }\n  .kentta textarea { resize: vertical; }\n  .kytkin { display: flex; gap: .5rem; align-items: center; font-weight: 400; }\n  .kielivalinta { display: grid; gap: .35rem; }\n  .kaannos button { color: inherit; border-color: rgba(0,0,0,.25); }\n  .ohje { margin: .25rem 0 0; font-size: .8125rem; opacity: .65; }\n  .laskuri { margin: .3rem 0 0; font-size: .8125rem; font-weight: 600; }\n  /* Pakollinen kentt\u00E4: punainen t\u00E4hti on tuttu merkki, eik\u00E4 se vie tilaa. */\n  .pakko { color: #b3261e; font-weight: 700; }\n  .piilossa {\n    position: absolute; width: 1px; height: 1px; overflow: hidden;\n    clip-path: inset(50%); white-space: nowrap;\n  }\n  .linkki {\n    background: none; border: 0; padding: 0; margin: 0; font: inherit;\n    color: inherit; text-decoration: underline; cursor: pointer;\n  }\n  .virheet { padding: .75rem .9rem; border-radius: .3rem; background: #f6e8e3; color: #6d2b20; }\n  .virheet h2 { margin: 0 0 .4rem; opacity: 1; color: inherit; }\n  .virheet ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; }\n  .kuva img { display: block; width: 100%; height: auto; border-radius: .25rem; margin-bottom: .4rem; }\n  .kuva input[type=text] { width: 100%; padding: .45rem .55rem; border: 1px solid rgba(0,0,0,.25); border-radius: .25rem; font: inherit; }\n  /* Kuvan tekstikentt\u00E4 on oma lohkonsa: label on .kentta-tasolla flex,\n     ja ilman t\u00E4t\u00E4 otsikko ja kentt\u00E4 asettuisivat vierekk\u00E4in. */\n  .kentta label.alt, .kuva label.alt { display: block; font-weight: 600; margin-top: .5rem; }\n  .alt input { margin-top: .25rem; width: 100%; }\n  .huomio {\n    margin: .4rem 0 0; padding: .5rem .6rem; border-radius: .25rem;\n    background: #fdf3e7; color: #6b4a1f; font-size: .8125rem;\n  }\n  .huomio p { margin: 0 0 .4rem; }\n  .huomio button { color: inherit; border-color: rgba(107,74,31,.35); padding: .3rem .6rem; }\n  .lataus { display: inline-flex; margin: 0 0 .5rem; }\n  .lataus span {\n    padding: .45rem .8rem; border: 1px solid rgba(0,0,0,.25); border-radius: .35rem;\n    cursor: pointer; font-weight: 600;\n  }\n  .lataus input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }\n  .virheviesti { margin: 0 0 .5rem; color: #8c3b2e; font-size: .8125rem; }\n  .tyhja { margin: 0; opacity: .6; }\n  .kohteet { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .25rem; }\n  .kohteet button {\n    width: 100%; text-align: left; color: inherit; border-color: rgba(0,0,0,.15);\n    display: flex; justify-content: space-between; gap: .5rem; align-items: center;\n  }\n  .kohteet button.valittu { background: #1d1f1e; color: #fff; border-color: #1d1f1e; }\n  .merkki { font-size: .75rem; opacity: .7; white-space: nowrap; }\n  /* Taitos n\u00E4ytt\u00E4\u00E4 painikkeelta ja nuoli osoittaa sinne, minne sis\u00E4lt\u00F6\n     aukeaa: alas kiinni ollessa, yl\u00F6s auki ollessa. */\n  .ryhma { margin: 0 0 1rem; padding: .75rem .8rem; border-radius: .3rem; background: rgba(0,0,0,.035); }\n  .ryhma h3 { margin: 0 0 .5rem; font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; opacity: .65; }\n  .ryhma .kentta:last-child { margin-bottom: 0; }\n  .lisatiedot { margin: .25rem 0 1rem; border-top: 1px solid rgba(0,0,0,.1); }\n  .lisatiedot summary {\n    cursor: pointer; font-weight: 600; padding: .7rem 0; list-style: none;\n    display: flex; align-items: center; gap: .5rem;\n  }\n  .lisatiedot summary::-webkit-details-marker { display: none; }\n  .lisatiedot summary::after {\n    content: \"\u25BE\"; font-size: 1.1rem; line-height: 1; margin-left: auto;\n  }\n  .lisatiedot[open] summary::after { content: \"\u25B4\"; }\n  .lisatiedot summary:hover { text-decoration: underline; }\n  .lisatiedot summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }\n  .kaannos { margin: 0 0 1rem; padding: .6rem .7rem; border-radius: .25rem; background: #eef1ee; }\n  .kaannos p { margin: 0 0 .5rem; }\n  /* Kenttien nimet omalle rivilleen: lause pysyy luettavana ja nimet erottuvat. */\n  .kaannos strong { display: block; margin-top: .15rem; }\n  .kaannos button { color: inherit; border-color: rgba(0,0,0,.25); }\n  .napit { display: flex; gap: .5rem; margin-bottom: 1rem; }\n  .napit button { color: inherit; border-color: rgba(0,0,0,.25); }\n  .napit button.vaarallinen { color: #8c3b2e; border-color: rgba(140,59,46,.4); }\n\n  /* Kent\u00E4n mitta: pieni lappu aktiivisen kent\u00E4n alla. Kertoo, mihin\n     kentt\u00E4\u00E4n kirjoitetaan ja kuinka paljon siihen on suunniteltu teksti\u00E4.\n     Sijainti asetetaan CSSOM:lla (elementti.style), jota CSP ei rajoita. */\n  .mitta {\n    position: fixed; top: 0; left: 0; z-index: 2147483001;\n    max-width: min(24rem, calc(100vw - 1rem));\n    padding: .4rem .6rem; border-radius: .35rem;\n    background: #1d1f1e; color: #fff;\n    font: 400 .75rem/1.45 -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n    box-shadow: 0 .25rem .75rem rgba(0,0,0,.25);\n    pointer-events: none;\n  }\n  .mitta p { margin: 0; }\n  .mitta p + p { margin-top: .2rem; }\n  .mitta .nimi { font-weight: 600; }\n  .mitta .maara { font-variant-numeric: tabular-nums; opacity: .8; }\n  .mitta .ohje { opacity: .75; }\n  .mitta[data-yli=\"1\"] { background: #fdf3e7; color: #6b4a1f; border: 1px solid rgba(107,74,31,.35); }\n  .mitta[data-yli=\"1\"] .maara { opacity: 1; font-weight: 700; }\n";
 export declare function Muokkaustila(): import("react").JSX.Element | null;
 export { PALKIN_TYYLIT };

package/dist/selain/Muokkaustila.js

@@ -19,9 +19,10 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
    3. **Mitään ei menetetä vahingossa.** Tallentamattomista muutoksista
       varoitetaan lähtiessä, ja *Peru* palauttaa alkuperäiset tekstit.
    ========================================================================== */
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { valitseKieli } from "./kieli.js";
 import { pienennaKuva } from "./kuva.js";
+import { jaaKappaleiksi, kentanMitta, onYksirivinen, tekstiRiveina, yhdeksiRiviksi, } from "./mitta.js";
 import { Paneeli } from "./Paneeli.js";
 import { asetaArvo, kirjoitaKentanpolku, lueArvo, lueKentanpolku, vapaaTunnus, } from "./polku.js";
 const PALKIN_TYYLIT = `
@@ -137,15 +138,53 @@ const PALKIN_TYYLIT = `
   .napit { display: flex; gap: .5rem; margin-bottom: 1rem; }
   .napit button { color: inherit; border-color: rgba(0,0,0,.25); }
   .napit button.vaarallinen { color: #8c3b2e; border-color: rgba(140,59,46,.4); }
+
+  /* Kentän mitta: pieni lappu aktiivisen kentän alla. Kertoo, mihin
+     kenttään kirjoitetaan ja kuinka paljon siihen on suunniteltu tekstiä.
+     Sijainti asetetaan CSSOM:lla (elementti.style), jota CSP ei rajoita. */
+  .mitta {
+    position: fixed; top: 0; left: 0; z-index: 2147483001;
+    max-width: min(24rem, calc(100vw - 1rem));
+    padding: .4rem .6rem; border-radius: .35rem;
+    background: #1d1f1e; color: #fff;
+    font: 400 .75rem/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    box-shadow: 0 .25rem .75rem rgba(0,0,0,.25);
+    pointer-events: none;
+  }
+  .mitta p { margin: 0; }
+  .mitta p + p { margin-top: .2rem; }
+  .mitta .nimi { font-weight: 600; }
+  .mitta .maara { font-variant-numeric: tabular-nums; opacity: .8; }
+  .mitta .ohje { opacity: .75; }
+  .mitta[data-yli="1"] { background: #fdf3e7; color: #6b4a1f; border: 1px solid rgba(107,74,31,.35); }
+  .mitta[data-yli="1"] .maara { opacity: 1; font-weight: 700; }
 `;
 const KOROSTUS = `
   [data-editori-kentta] { border-radius: .15rem; }
+  /* Kehys tekstin omalla värillä: musta katkoviiva katosi tummilla
+     sivustoilla, eikä muokkaaja nähnyt, missä kentät ovat. Tekstin väri
+     erottuu taustasta aina, koska sivun design on tehty niin. */
   [data-editori-muokattavana="1"] {
-    outline: 1px dashed rgba(0,0,0,.35); outline-offset: .25rem; cursor: text;
+    outline: 1px dashed color-mix(in srgb, currentColor 45%, transparent);
+    outline-offset: .25rem; cursor: text;
   }
   [data-editori-muokattavana="1"]:hover { outline-style: solid; }
   [data-editori-muokattavana="1"]:focus { outline: 2px solid currentColor; outline-offset: .25rem; }
   [data-editori-muokattavana="1"] > p:last-child { margin-bottom: 0; }
+  /* Tyhjä kenttä ei saa kadota: ilman tekstiä sen korkeus olisi nolla ja
+     katkoviiva kutistuisi viivaksi. Paikkamerkki on kentän nimi, ja se
+     latoutuu kentän omalla fontilla, joten se kertoo myös mittakaavan. */
+  [data-editori-tyhja] { min-height: 1.4em; min-width: 12ch; }
+  /* Kirjoittaessa Enter lisää tekstiin rivinvaihdon. Chrome ja Safari
+     näyttävät sen muokattavassa kentässä itsekin; tämä varmistaa saman
+     muissa selaimissa. Julkinen sivu näyttää rivinvaihdon <br>:nä
+     (komponentit/rivinvaihdot.ts). */
+  [data-editori-monirivinen] { white-space: pre-line; }
+  span[data-editori-tyhja] { display: inline-block; }
+  [data-editori-tyhja]::before {
+    content: attr(data-editori-nimi) " – kirjoita tähän";
+    opacity: .45; font-style: italic; pointer-events: none;
+  }
   body[data-editori-paneeli="1"] { padding-right: min(23rem, 100vw); }
 `;
 /** Lisää tyylit ilman inline-tyylejä, jotta CSP:tä ei tarvitse löysätä. */
@@ -159,25 +198,39 @@ function lisaaTyylit() {
         document.adoptedStyleSheets = document.adoptedStyleSheets.filter((muu) => muu !== arkki);
     };
 }
+/** Tyhjä kenttä saa paikkamerkin; ks. KOROSTUS. */
+function merkitseTyhja(elementti) {
+    elementti.toggleAttribute("data-editori-tyhja", (elementti.textContent ?? "").trim() === "");
+}
+/** Kursori kentän tekstin loppuun, kun kenttään siirrytään Enterillä. */
+function kursoriLoppuun(elementti) {
+    const valinta = window.getSelection();
+    if (!valinta)
+        return;
+    const alue = document.createRange();
+    alue.selectNodeContents(elementti);
+    alue.collapse(false);
+    valinta.removeAllRanges();
+    valinta.addRange(alue);
+}
+/** Muokattava kenttä, jonka sisällä tapahtuma on. */
+function muokattavaKentta(kohde) {
+    return kohde instanceof HTMLElement
+        ? kohde.closest('[data-editori-muokattavana="1"]')
+        : null;
+}
 /**
  * Kentän teksti elementistä.
  *
- * Kappalelistalla luetaan `innerText`, joka säilyttää kappalejaon
- * rivinvaihtoina. Tavallisella tekstillä `textContent` riittää eikä se ole
- * riippuvainen siitä, miten selain sattuu taittamaan sisällön.
+ * Monirivisellä kentällä (lista, tekstialue) kappalejako luetaan sivun
+ * rakenteesta, ks. tekstiRiveina. Yksirivisellä `textContent` riittää.
+ * Kumpikaan ei riipu siitä, miten sivu on muotoiltu tai mitä on näkyvissä.
  */
-function lueTeksti(elementti, lista) {
-    return (lista ? elementti.innerText : elementti.textContent) ?? "";
+function lueTeksti(elementti, monirivinen) {
+    return monirivinen ? tekstiRiveina(elementti) : (elementti.textContent ?? "");
 }
-/**
- * Sivulla kirjoitettu lista takaisin listaksi.
- *
- * Oletuksena yksi rivi on yksi kohta. Jos sivusto näyttää listan yhtenä
- * tekstinä (esim. "Lounas, Materiaalit"), erotin tulee sisältömallista.
- */
-function jaaKappaleiksi(teksti, erotin) {
-    const osat = erotin ? teksti.split(erotin.trim()) : teksti.split(/\n+/);
-    return osat.map((osa) => osa.trim()).filter((osa) => osa !== "");
+function onMonirivinen(maaritys) {
+    return maaritys?.tyyppi === "tekstilista" || maaritys?.tyyppi === "tekstialue";
 }
 /** Sivulla olevat muokattavat kohdat merkintöineen. */
 function merkinnat() {
@@ -203,6 +256,12 @@ export function Muokkaustila() {
     const [sisalto, setSisalto] = useState(null);
     const [valittu, setValittu] = useState(undefined);
     const alkuperaiset = useRef(new Map());
+    /** Peru palauttaa kentän rakenteen (kappaleet), ei pelkkää tekstiä. */
+    const alkuperainenRakenne = useRef(new Map());
+    /** Kenttä, jossa kursori on, ja hetken näkyvä vihje sen yhteydessä. */
+    const [aktiivinen, setAktiivinen] = useState(null);
+    /** Kasvaa jokaisella näppäilyllä, jotta mitta päivittyy kirjoittaessa. */
+    const [, setNappailyt] = useState(0);
     useEffect(() => {
         let voimassa = true;
         fetch("/api/editori/sisalto", { headers: { Accept: "application/json" } })
@@ -264,29 +323,126 @@ export function Muokkaustila() {
         else
             document.body.removeAttribute("data-editori-paneeli");
     }, [muokataan, tallentaa]);
-    const onLista = useCallback((polku) => sisalto !== null && kentanMaaritys(sisalto, polku)?.tyyppi === "tekstilista", [sisalto]);
+    const onLista = useCallback((polku) => sisalto !== null && onMonirivinen(kentanMaaritys(sisalto, polku)), [sisalto]);
     const paalle = useCallback(() => {
         alkuperaiset.current = new Map();
+        alkuperainenRakenne.current = new Map();
         for (const { elementti, polku } of merkinnat()) {
             alkuperaiset.current.set(elementti, lueTeksti(elementti, onLista(polku)));
+            alkuperainenRakenne.current.set(elementti, elementti.innerHTML);
             elementti.setAttribute("contenteditable", "plaintext-only");
             elementti.setAttribute("data-editori-muokattavana", "1");
             elementti.setAttribute("spellcheck", "true");
+            const maaritys = sisalto ? kentanMaaritys(sisalto, polku) : undefined;
+            elementti.setAttribute("data-editori-nimi", maaritys?.nimi ?? polku.alikentta ?? polku.kentta);
+            if (onYksirivinen(maaritys))
+                elementti.setAttribute("data-editori-rivi", "1");
+            if (maaritys?.tyyppi === "tekstialue")
+                elementti.setAttribute("data-editori-monirivinen", "");
+            merkitseTyhja(elementti);
         }
         setTila("muokkaa");
         setViesti("");
         setVirheet([]);
-    }, [onLista]);
+    }, [onLista, sisalto]);
     const pois = useCallback((palautaTekstit) => {
         for (const { elementti } of merkinnat()) {
-            if (palautaTekstit) {
-                elementti.textContent = alkuperaiset.current.get(elementti) ?? elementti.textContent;
-            }
+            const rakenne = alkuperainenRakenne.current.get(elementti);
+            if (palautaTekstit && rakenne !== undefined)
+                elementti.innerHTML = rakenne;
             elementti.removeAttribute("contenteditable");
             elementti.removeAttribute("data-editori-muokattavana");
             elementti.removeAttribute("spellcheck");
+            elementti.removeAttribute("data-editori-nimi");
+            elementti.removeAttribute("data-editori-rivi");
+            elementti.removeAttribute("data-editori-monirivinen");
+            elementti.removeAttribute("data-editori-tyhja");
         }
+        setAktiivinen(null);
     }, []);
+    /*
+      Kirjoittaminen sivulla. Kolme asiaa, joita selain ei tee itse:
+  
+      1. Enter yksirivisessä kentässä (otsikko, painike) siirtää seuraavaan
+         kenttään. Ennen se lisäsi rivinvaihdon, jonka tallennus hukkasi
+         hiljaa, ja lauseet sulautuivat yhteen ("kysymys?Seuraava lause").
+      2. Monirivinen teksti liitetään yksiriviseen kenttään yhtenä rivinä.
+      3. Tyhjä kenttä saa paikkamerkin heti, kun sen viimeinen merkki
+         poistetaan — ei vasta seuraavalla avauksella.
+    */
+    useEffect(() => {
+        if (!muokataan)
+            return;
+        const kohdistus = (tapahtuma) => {
+            const kentta = muokattavaKentta(tapahtuma.target);
+            if (kentta)
+                setAktiivinen((nyt) => (nyt?.elementti === kentta ? nyt : { elementti: kentta }));
+        };
+        const poistuminen = (tapahtuma) => {
+            if (!muokattavaKentta(tapahtuma.relatedTarget))
+                setAktiivinen(null);
+        };
+        const kirjoitus = (tapahtuma) => {
+            const kentta = muokattavaKentta(tapahtuma.target);
+            if (!kentta)
+                return;
+            merkitseTyhja(kentta);
+            setNappailyt((n) => n + 1);
+        };
+        const nappain = (tapahtuma) => {
+            if (tapahtuma.key !== "Enter" || tapahtuma.isComposing)
+                return;
+            const kentta = muokattavaKentta(tapahtuma.target);
+            if (!kentta || kentta.getAttribute("data-editori-rivi") !== "1")
+                return;
+            tapahtuma.preventDefault();
+            const nimi = kentta.getAttribute("data-editori-nimi") ?? "Kenttä";
+            const kaikki = merkinnat()
+                .map(({ elementti }) => elementti)
+                .filter((elementti) => elementti.getAttribute("data-editori-muokattavana") === "1");
+            const seuraava = kaikki[kaikki.indexOf(kentta) + 1];
+            if (!seuraava) {
+                setAktiivinen({ elementti: kentta, vihje: `${nimi} on yksi rivi, eikä siihen voi lisätä rivinvaihtoa.` });
+                return;
+            }
+            seuraava.focus();
+            kursoriLoppuun(seuraava);
+            setAktiivinen({
+                elementti: seuraava,
+                vihje: `${nimi} on yksi rivi, joten jatkat tästä kentästä.`,
+            });
+        };
+        const liitto = (tapahtuma) => {
+            const kentta = muokattavaKentta(tapahtuma.target);
+            if (!kentta || kentta.getAttribute("data-editori-rivi") !== "1")
+                return;
+            const teksti = tapahtuma.clipboardData?.getData("text/plain") ?? "";
+            if (!/[\r\n]/.test(teksti))
+                return;
+            tapahtuma.preventDefault();
+            /* execCommand säilyttää kumoamisen (Cmd+Z), toisin kuin suora DOM-muutos. */
+            document.execCommand("insertText", false, yhdeksiRiviksi(teksti));
+        };
+        document.addEventListener("focusin", kohdistus);
+        document.addEventListener("focusout", poistuminen);
+        document.addEventListener("input", kirjoitus);
+        document.addEventListener("keydown", nappain, true);
+        document.addEventListener("paste", liitto, true);
+        return () => {
+            document.removeEventListener("focusin", kohdistus);
+            document.removeEventListener("focusout", poistuminen);
+            document.removeEventListener("input", kirjoitus);
+            document.removeEventListener("keydown", nappain, true);
+            document.removeEventListener("paste", liitto, true);
+        };
+    }, [muokataan]);
+    /* Vihje on kertaluonteinen: se katoaa hetken päästä, mitta jää. */
+    useEffect(() => {
+        if (!aktiivinen?.vihje)
+            return;
+        const ajastin = window.setTimeout(() => setAktiivinen((nyt) => (nyt?.vihje ? { elementti: nyt.elementti } : nyt)), 5000);
+        return () => window.clearTimeout(ajastin);
+    }, [aktiivinen]);
     function sivullaMuuttunut() {
         return merkinnat().some(({ elementti, polku }) => lueTeksti(elementti, onLista(polku)) !== alkuperaiset.current.get(elementti));
     }
@@ -532,7 +688,7 @@ export function Muokkaustila() {
         for (const { elementti, polku } of merkinnat()) {
             const maaritys = kentanMaaritys(sisalto, polku);
             const lista = maaritys?.tyyppi === "tekstilista";
-            const teksti = lueTeksti(elementti, lista);
+            const teksti = lueTeksti(elementti, onMonirivinen(maaritys));
             if (teksti === alkuperaiset.current.get(elementti))
                 continue;
             let arvo = teksti;
@@ -634,7 +790,14 @@ export function Muokkaustila() {
             muutettu.current = false;
             pois(false);
             setTila("tallennettu");
-            setViesti("Tallennettu. Sivusto rakennetaan uudelleen noin minuutissa.");
+            /* Pituusvaroitukset sanotaan ääneen. Ennen ne palasivat palvelimelta
+               eikä niitä näytetty missään, joten kaksinkertainen otsikko meni
+               läpi kenenkään huomaamatta. Vain tässä tallennuksessa muutetut
+               kentät: vanhat ylitykset toistuisivat joka kerta meluna. */
+            const pitkat = pituusvaroitukset(sisalto, muutetut, tulos.varoitukset);
+            setViesti(pitkat.length > 0
+                ? `Tallennettu. Suunniteltua pidempi: ${pitkat.join(", ")}. Tarkista, miltä se näyttää puhelimella.`
+                : "Tallennettu. Sivusto rakennetaan uudelleen noin minuutissa.");
         }
         catch {
             setTila("muokkaa");
@@ -655,6 +818,12 @@ export function Muokkaustila() {
     if (tila === "piilossa")
         return null;
     const malli = sisalto && sivunAvain ? sisalto.malli[sivunAvain] : undefined;
+    const aktiivisenMaaritys = (() => {
+        if (!aktiivinen || !sisalto)
+            return undefined;
+        const polku = lueKentanpolku(aktiivinen.elementti.getAttribute("data-editori-kentta") ?? "");
+        return polku ? kentanMaaritys(sisalto, polku) : undefined;
+    })();
     const sivullaNakyvat = new Set(merkinnat().map(({ elementti }) => elementti.getAttribute("data-editori-kentta") ?? ""));
     return (_jsxs(_Fragment, { children: [(muokataan || tallentaa) && sisalto && sivunAvain && malli ? (_jsx(Paneeli, { sivu: sivunAvain, malli: malli, data: sisalto.sivut[sivunAvain] ?? {}, kieli: sivunKieli, kielet: sisalto.kielet, sivullaNakyvat: sivullaNakyvat, valittu: valittu, virheet: virheet, muuta: muuta, lataaKuva: lataaKuva, kaanna: kaanna, kaannosKaytossa: sisalto.ominaisuudet?.kaannos ?? false, kaannettavia: {
                     sivu: kaannettavat
@@ -663,7 +832,79 @@ export function Muokkaustila() {
                     kohde: kaannettavat
                         .filter(({ polku }) => polku.tunnus !== undefined)
                         .map(({ nimi }) => nimi),
-                }, valitse: setValittu, lisaaKohde: lisaaKohde, poistaKohde: poistaKohde })) : null, _jsx("div", { className: "palkki", role: "region", "aria-label": "Sis\u00E4ll\u00F6n muokkaus", children: tila === "lataa" ? (_jsx("span", { className: "tila", children: "Editori avautuu\u2026" })) : muokataan || tallentaa ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "tila", role: "status", "data-virhe": viesti ? "1" : "0", children: tallentaa ? "Tallennetaan…" : (viesti ?? "") !== "" ? viesti : "Muokkaat sivua" }), _jsx("button", { type: "button", onClick: peru, disabled: tallentaa, children: "Peru" }), _jsx("button", { type: "button", className: "ensisijainen", onClick: tallenna, disabled: tallentaa, children: "Tallenna" })] })) : (_jsxs(_Fragment, { children: [viesti ? (_jsx("span", { className: "tila", role: "status", "data-virhe": tila === "virhe" ? "1" : "0", children: viesti })) : null, tila === "tallennettu" ? (_jsx("button", { type: "button", onClick: () => location.reload(), children: "P\u00E4ivit\u00E4 sivu" })) : null, sisalto && malli ? (_jsx("button", { type: "button", className: "ensisijainen", onClick: paalle, children: "Muokkaa" })) : sisalto ? (_jsx("span", { className: "tila", children: "T\u00E4ll\u00E4 sivulla ei ole muokattavaa sis\u00E4lt\u00F6\u00E4." })) : (_jsx("button", { type: "button", onClick: () => location.reload(), children: "Lataa uudelleen" }))] })) })] }));
+                }, valitse: setValittu, lisaaKohde: lisaaKohde, poistaKohde: poistaKohde })) : null, muokataan && aktiivinen ? (_jsx(KentanMittaLappu, { elementti: aktiivinen.elementti, nimi: aktiivinen.elementti.getAttribute("data-editori-nimi") ?? "", mitta: kentanMitta(aktiivisenMaaritys, lueTeksti(aktiivinen.elementti, onMonirivinen(aktiivisenMaaritys))), vihje: aktiivinen.vihje, ohje: aktiivisenMaaritys?.tyyppi === "tekstialue"
+                    ? "Enter tekee uuden rivin, tyhjä rivi kappalevälin."
+                    : aktiivisenMaaritys?.tyyppi === "tekstilista"
+                        ? "Jokainen rivi on oma kohtansa."
+                        : undefined })) : null, _jsx("div", { className: "palkki", role: "region", "aria-label": "Sis\u00E4ll\u00F6n muokkaus", children: tila === "lataa" ? (_jsx("span", { className: "tila", children: "Editori avautuu\u2026" })) : muokataan || tallentaa ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "tila", role: "status", "data-virhe": viesti ? "1" : "0", children: tallentaa ? "Tallennetaan…" : (viesti ?? "") !== "" ? viesti : "Muokkaat sivua" }), _jsx("button", { type: "button", onClick: peru, disabled: tallentaa, children: "Peru" }), _jsx("button", { type: "button", className: "ensisijainen", onClick: tallenna, disabled: tallentaa, children: "Tallenna" })] })) : (_jsxs(_Fragment, { children: [viesti ? (_jsx("span", { className: "tila", role: "status", "data-virhe": tila === "virhe" ? "1" : "0", children: viesti })) : null, tila === "tallennettu" ? (_jsx("button", { type: "button", onClick: () => location.reload(), children: "P\u00E4ivit\u00E4 sivu" })) : null, sisalto && malli ? (_jsx("button", { type: "button", className: "ensisijainen", onClick: paalle, children: "Muokkaa" })) : sisalto ? (_jsx("span", { className: "tila", children: "T\u00E4ll\u00E4 sivulla ei ole muokattavaa sis\u00E4lt\u00F6\u00E4." })) : (_jsx("button", { type: "button", onClick: () => location.reload(), children: "Lataa uudelleen" }))] })) })] }));
+}
+/**
+ * Lappu aktiivisen kentän alla: nimi, täyttöaste ja hetkellinen vihje.
+ *
+ * Lappu sijoitetaan kentän alle, tai yläpuolelle jos alla ei ole tilaa.
+ * Jos kenttä on koko ruudun kokoinen, lappu jää ruudun alareunaan palkin
+ * yläpuolelle, jotta se on aina näkyvissä kirjoittaessa.
+ */
+function KentanMittaLappu({ elementti, nimi, mitta, vihje, ohje, }) {
+    const lappu = useRef(null);
+    useLayoutEffect(() => {
+        const sijoita = () => {
+            const oma = lappu.current;
+            if (!oma)
+                return;
+            const alue = elementti.getBoundingClientRect();
+            const vali = 8;
+            /* Palkki vie ruudun alareunasta noin 4,5 rem. */
+            const alin = window.innerHeight - oma.offsetHeight - 72;
+            let yla = alue.bottom + vali;
+            if (yla > alin)
+                yla = alue.top - oma.offsetHeight - vali;
+            if (yla < vali)
+                yla = alin;
+            const vasen = Math.min(Math.max(vali, alue.left), window.innerWidth - oma.offsetWidth - vali);
+            oma.style.transform = `translate(${Math.round(vasen)}px, ${Math.round(yla)}px)`;
+        };
+        sijoita();
+        let kehys = 0;
+        const ajoita = () => {
+            cancelAnimationFrame(kehys);
+            kehys = requestAnimationFrame(sijoita);
+        };
+        window.addEventListener("scroll", ajoita, true);
+        window.addEventListener("resize", ajoita);
+        return () => {
+            cancelAnimationFrame(kehys);
+            window.removeEventListener("scroll", ajoita, true);
+            window.removeEventListener("resize", ajoita);
+        };
+    });
+    const yli = mitta !== null && mitta.nyt > mitta.raja;
+    return (_jsxs("div", { ref: lappu, className: "mitta", "data-yli": yli ? "1" : "0", children: [_jsxs("p", { children: [_jsx("span", { className: "nimi", children: nimi }), mitta ? (_jsxs("span", { className: "maara", children: [" · ", mitta.nyt, " / ", mitta.raja, " ", mitta.yksikko] })) : null] }), yli ? (_jsx("p", { children: mitta.yksikko === "merkkiä"
+                    ? "Pidempi kuin tähän kohtaan on suunniteltu. Tarkista, miltä se näyttää puhelimella."
+                    : `Tähän mahtuu enintään ${mitta.raja} ${mitta.yksikko}. Ylimääräiset estävät tallennuksen.` })) : null, ohje ? _jsx("p", { className: "ohje", children: ohje }) : null, vihje ? _jsx("p", { role: "status", children: vihje }) : null] }));
+}
+/** Tässä tallennuksessa muutettujen, suunniteltua pidempien kenttien nimet. */
+function pituusvaroitukset(sisalto, muutetut, varoitukset) {
+    if (!Array.isArray(varoitukset))
+        return [];
+    const nimet = new Set();
+    for (const varoitus of varoitukset) {
+        if (!varoitus || typeof varoitus !== "object" || varoitus.syy !== "pituus")
+            continue;
+        const kohde = typeof varoitus.kohde === "string" ? varoitus.kohde : "";
+        const polku = lueKentanpolku(kohde);
+        if (!polku)
+            continue;
+        const uusi = muutetut[polku.sivu];
+        if (!uusi)
+            continue;
+        const tunnus = tunnusKentta(sisalto, polku);
+        const ennen = lueArvo(sisalto.sivut[polku.sivu] ?? {}, polku, tunnus);
+        if (JSON.stringify(ennen) === JSON.stringify(lueArvo(uusi, polku, tunnus)))
+            continue;
+        nimet.add(kentanMaaritys(sisalto, polku)?.nimi ?? kohde);
+    }
+    return [...nimet];
 }
 /** Mitä yhtä kohdetta tässä listassa kutsutaan, esimerkiksi "kurssi". */
 function kohdelistanYksikko(sisalto, sivu, kentta) {

package/dist/selain/mitta.d.ts

@@ -0,0 +1,46 @@
+import type { Kentta } from "../maarittely.ts";
+/**
+ * Yhden rivin kenttä: otsikot, painikkeet, luvut. Enter ei tee näihin
+ * rivinvaihtoa, koska palvelin hylkäisi sen ja selain hukkaisi sen
+ * hiljaa ("kysymys?Seuraava lause").
+ */
+export declare function onYksirivinen(maaritys: Kentta | undefined): boolean;
+/**
+ * Sivulla kirjoitettu lista takaisin listaksi.
+ *
+ * Oletuksena yksi rivi on yksi kohta. Jos sivusto näyttää listan yhtenä
+ * tekstinä (esim. "Lounas, Materiaalit"), erotin tulee sisältömallista.
+ */
+export declare function jaaKappaleiksi(teksti: string, erotin?: string): string[];
+export interface Mitta {
+    nyt: number;
+    raja: number;
+    yksikko: "merkkiä" | "riviä" | "kohtaa";
+}
+/** Kentän täyttöaste, jos kentälle on suunniteltu raja; muuten null. */
+export declare function kentanMitta(maaritys: Kentta | undefined, teksti: string): Mitta | null;
+/**
+ * Liitetty monirivinen teksti yhdeksi riviksi: rivinvaihto → välilyönti.
+ *
+ * Alun rivinvaihto jää välilyönniksi, koska teksti liitetään usein
+ * edellisen lauseen perään. Lopun rivinvaihto on kopioinnin sivutuote
+ * ja poistetaan.
+ */
+export declare function yhdeksiRiviksi(teksti: string): string;
+/** Se osa DOM-solmusta, jota rivien lukeminen tarvitsee (testattavissa ilman selainta). */
+export interface Solmu {
+    nodeType: number;
+    nodeName: string;
+    textContent: string | null;
+    childNodes: ArrayLike<Solmu>;
+}
+/**
+ * Monirivisen kentän teksti sivun rakenteesta: kappale, listan kohta ja
+ * <br> ovat rivinvaihtoja.
+ *
+ * Ei `innerText`: se lukee tekstin sellaisena kuin se näkyy ruudulla.
+ * Piilossa olevasta kohdasta (esim. vierityksen mukaan vaihtuva osio) se
+ * palauttaa tyhjää ja versaaliksi muotoillusta ("text-transform") isoja
+ * kirjaimia — ja tallennus kirjoitti ne tiedostoon muutoksina.
+ */
+export declare function tekstiRiveina(juuri: Solmu): string;

package/dist/selain/mitta.js

@@ -0,0 +1,94 @@
+import { merkkimaara } from "../tarkistus.js";
+/* ==========================================================================
+   KENTÄN MITTA
+   ==========================================================================
+   Muokkaaja kirjoittaa suoraan sivulle, joten hän ei näe lomakkeen
+   reunoja. Nämä apurit kertovat, millainen kenttä on: mahtuuko siihen
+   yksi rivi vai kappaleita, ja kuinka paljon tekstiä siihen on suunniteltu.
+
+   Raja on ohje, ei lukko — sama periaate kuin palvelimen tarkistuksessa.
+   Mittaus tehdään samalla merkkimäärällä kuin siellä, jotta sivulla näkyvä
+   luku ja tallennuksen varoitus eivät koskaan ole eri mieltä.
+   ========================================================================== */
+/**
+ * Yhden rivin kenttä: otsikot, painikkeet, luvut. Enter ei tee näihin
+ * rivinvaihtoa, koska palvelin hylkäisi sen ja selain hukkaisi sen
+ * hiljaa ("kysymys?Seuraava lause").
+ */
+export function onYksirivinen(maaritys) {
+    return maaritys?.tyyppi === "teksti" || maaritys?.tyyppi === "luku";
+}
+/**
+ * Sivulla kirjoitettu lista takaisin listaksi.
+ *
+ * Oletuksena yksi rivi on yksi kohta. Jos sivusto näyttää listan yhtenä
+ * tekstinä (esim. "Lounas, Materiaalit"), erotin tulee sisältömallista.
+ */
+export function jaaKappaleiksi(teksti, erotin) {
+    const osat = erotin ? teksti.split(erotin.trim()) : teksti.split(/\n+/);
+    return osat.map((osa) => osa.trim()).filter((osa) => osa !== "");
+}
+/** Kentän täyttöaste, jos kentälle on suunniteltu raja; muuten null. */
+export function kentanMitta(maaritys, teksti) {
+    if (!maaritys)
+        return null;
+    if ((maaritys.tyyppi === "teksti" || maaritys.tyyppi === "tekstialue") &&
+        maaritys.suositusPituus !== undefined) {
+        return { nyt: merkkimaara(teksti), raja: maaritys.suositusPituus, yksikko: "merkkiä" };
+    }
+    if (maaritys.tyyppi === "tekstilista" && maaritys.enintaan !== undefined) {
+        return {
+            nyt: jaaKappaleiksi(teksti, maaritys.erotin).length,
+            raja: maaritys.enintaan,
+            yksikko: maaritys.erotin ? "kohtaa" : "riviä",
+        };
+    }
+    return null;
+}
+/**
+ * Liitetty monirivinen teksti yhdeksi riviksi: rivinvaihto → välilyönti.
+ *
+ * Alun rivinvaihto jää välilyönniksi, koska teksti liitetään usein
+ * edellisen lauseen perään. Lopun rivinvaihto on kopioinnin sivutuote
+ * ja poistetaan.
+ */
+export function yhdeksiRiviksi(teksti) {
+    return teksti.replace(/\s+$/, "").replace(/\s*[\r\n]+\s*/g, " ");
+}
+const LOHKO = /^(P|DIV|LI|H[1-6]|BLOCKQUOTE|PRE)$/;
+/**
+ * Monirivisen kentän teksti sivun rakenteesta: kappale, listan kohta ja
+ * <br> ovat rivinvaihtoja.
+ *
+ * Ei `innerText`: se lukee tekstin sellaisena kuin se näkyy ruudulla.
+ * Piilossa olevasta kohdasta (esim. vierityksen mukaan vaihtuva osio) se
+ * palauttaa tyhjää ja versaaliksi muotoillusta ("text-transform") isoja
+ * kirjaimia — ja tallennus kirjoitti ne tiedostoon muutoksina.
+ */
+export function tekstiRiveina(juuri) {
+    let tulos = "";
+    const rivinvaihto = () => {
+        if (tulos !== "" && !tulos.endsWith("\n"))
+            tulos += "\n";
+    };
+    const kay = (solmu) => {
+        if (solmu.nodeType === 3) {
+            tulos += solmu.textContent ?? "";
+            return;
+        }
+        if (solmu.nodeType !== 1)
+            return;
+        if (solmu.nodeName === "BR") {
+            tulos += "\n";
+            return;
+        }
+        const lohko = LOHKO.test(solmu.nodeName);
+        if (lohko)
+            rivinvaihto();
+        Array.from(solmu.childNodes).forEach(kay);
+        if (lohko)
+            rivinvaihto();
+    };
+    Array.from(juuri.childNodes).forEach(kay);
+    return tulos.replace(/\n+$/, "");
+}

package/dist/tarkistus.d.ts

@@ -11,8 +11,12 @@ export interface Huomio {
      * Ero on tarpeen, koska piilotetussa kohteessa tyhjä kenttä on varoitus
      * eikä virhe: keskeneräisen luonnoksen pitää voida tallentaa. Väärä muoto
      * on virhe silloinkin — sitä ei kirjoiteta tiedostoon missään tilanteessa.
+     *
+     * "pituus" = teksti on suunniteltua pidempi. Editori nostaa nämä esiin
+     * tallennuksen jälkeen; muut varoitukset (esim. puuttuva käännös) eivät
+     * koske juuri kirjoitettua tekstiä.
      */
-    syy?: "puuttuu";
+    syy?: "puuttuu" | "pituus";
 }
 export interface Tarkistustulos {
     virheet: Huomio[];

package/dist/tarkistus.js

@@ -39,7 +39,10 @@ function tarkistaTeksti(teksti, maaritys, kohde, kieli, tulos) {
     if (suositus !== undefined) {
         const yli = merkkimaara(teksti) - suositus;
         if (yli > 0) {
-            tulos.varoitukset.push(huomio(`Teksti on ${yli} merkkiä pidempi kuin suunniteltu. Tarkista, miltä se näyttää puhelimella.`));
+            tulos.varoitukset.push({
+                ...huomio(`Teksti on ${yli} merkkiä pidempi kuin suunniteltu. Tarkista, miltä se näyttää puhelimella.`),
+                syy: "pituus",
+            });
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiotitta/studio-editori",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Studio Titan sisältöeditori asiakassivustoille: tekstit ja kuvat muokataan suoraan sivulla",
   "license": "UNLICENSED",
   "type": "module",