@studiotitta/studio-editori 0.1.3 → 0.1.5

package/dist/maarittely.d.ts

@@ -102,6 +102,14 @@ export interface TekstilistaKentta<K extends boolean = boolean> extends KentanPe
     /** Monirivinen kohta listassa. */
     monirivinen?: boolean;
     enintaan?: number;
+    /**
+     * Miten lista näkyy sivulla yhtenä tekstinä, esimerkiksi ", ".
+     *
+     * Kun sivusto näyttää listan pilkuilla eroteltuna ("Lounas, Materiaalit"),
+     * sen voi silti muokata paikallaan: editori jakaa tekstin takaisin listaksi
+     * tällä erottimella. Ilman tätä jokainen rivi on oma kohtansa.
+     */
+    erotin?: string;
 }
 /**
  * Kenttäryhmä, esimerkiksi hakukonetiedot.
@@ -134,6 +142,14 @@ export interface KohdelistaKentta extends KentanPerus {
      * puhuttaisiin kohteista, mikä ei ole kenenkään sana omasta työstään.
      */
     yksikko?: string;
+    /**
+     * Kohteen oma osoite sivustolla, esimerkiksi "/kurssit/{tunnus}".
+     *
+     * Editori näyttää linkin, jolla kohteen sivun pääsee katsomaan. Uuden
+     * kohteen sivu syntyy vasta tallennuksen jälkeen, joten linkki kertoo
+     * myös, mistä työn tuloksen näkee.
+     */
+    osoite?: string;
     kentat: Record<string, Kentta>;
 }
 export type Kentta = TekstiKentta | TekstialueKentta | LukuKentta | ValintaKentta | KytkinKentta | AikaKentta | KuvaKentta | KielivalintaKentta | TekstilistaKentta | RyhmaKentta | KohdelistaKentta;

package/dist/palvelin/kuvat.js

@@ -125,6 +125,15 @@ export function kuvienReitti(yliajot) {
             console.error("[editori] Kuvan tallennus epäonnistui:", virhe);
             return json({ virhe: "Kuvaa ei saatu tallennettua." }, 502);
         }
-        return json({ src: kuvanOsoite(polku), ehdotus: await ehdotus });
+        /*
+          Esikatselu palautetaan kuvana, ei osoitteena: tiedosto on repossa, mutta
+          sivusto tarjoilee sen vasta seuraavan julkaisun jälkeen. Ilman tätä
+          muokkaaja näkee rikkinäisen kuvan eikä tiedä, menikö lataus läpi.
+        */
+        return json({
+            src: kuvanOsoite(polku),
+            esikatselu: `data:image/${tunnistaTyyppi(valmis) ?? "jpeg"};base64,${Buffer.from(valmis).toString("base64")}`,
+            ehdotus: await ehdotus,
+        });
     };
 }

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  .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";
 export declare function Muokkaustila(): import("react").JSX.Element | null;
 export { PALKIN_TYYLIT };

package/dist/selain/Muokkaustila.js

@@ -72,6 +72,16 @@ const PALKIN_TYYLIT = `
   .kaannos button { color: inherit; border-color: rgba(0,0,0,.25); }
   .ohje { margin: .25rem 0 0; font-size: .8125rem; opacity: .65; }
   .laskuri { margin: .3rem 0 0; font-size: .8125rem; font-weight: 600; }
+  /* Pakollinen kenttä: punainen tähti on tuttu merkki, eikä se vie tilaa. */
+  .pakko { color: #b3261e; font-weight: 700; }
+  .piilossa {
+    position: absolute; width: 1px; height: 1px; overflow: hidden;
+    clip-path: inset(50%); white-space: nowrap;
+  }
+  .linkki {
+    background: none; border: 0; padding: 0; margin: 0; font: inherit;
+    color: inherit; text-decoration: underline; cursor: pointer;
+  }
   .virheet { padding: .75rem .9rem; border-radius: .3rem; background: #f6e8e3; color: #6d2b20; }
   .virheet h2 { margin: 0 0 .4rem; opacity: 1; color: inherit; }
   .virheet ul { margin: 0; padding-left: 1.1rem; display: grid; gap: .25rem; }
@@ -159,12 +169,15 @@ function lisaaTyylit() {
 function lueTeksti(elementti, lista) {
     return (lista ? elementti.innerText : elementti.textContent) ?? "";
 }
-/** Sivulla kirjoitettu kappalelista takaisin listaksi. */
-function jaaKappaleiksi(teksti) {
-    return teksti
-        .split(/\n+/)
-        .map((kappale) => kappale.trim())
-        .filter((kappale) => kappale !== "");
+/**
+ * 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 !== "");
 }
 /** Sivulla olevat muokattavat kohdat merkintöineen. */
 function merkinnat() {
@@ -325,8 +338,10 @@ export function Muokkaustila() {
                     continue;
                 if (onKaannettava(kenttä))
                     uusi[avain] = {};
+                /* Uusi kohde syntyy piilotettuna, kun mallissa on piilottava
+                   kytkin: keskeneräinen kurssi ei kuulu kävijän silmien eteen. */
                 else if (kenttä.tyyppi === "kytkin")
-                    uusi[avain] = false;
+                    uusi[avain] = kenttä.piilottaa === true;
                 else if (kenttä.tyyppi === "tekstilista")
                     uusi[avain] = [];
                 else if (kenttä.tyyppi === "valinta")
@@ -386,6 +401,9 @@ export function Muokkaustila() {
         }
         return {
             src: tulos.src,
+            /* Esikatselu on itse kuva: tallennettu tiedosto näkyy osoitteessaan
+               vasta seuraavan julkaisun jälkeen. */
+            esikatselu: typeof tulos.esikatselu === "string" ? tulos.esikatselu : null,
             ehdotus: typeof tulos.ehdotus === "string" ? tulos.ehdotus : null,
         };
     }, []);
@@ -501,14 +519,38 @@ export function Muokkaustila() {
                     muutetut[sivu] = { ...data };
             }
         }
+        /* Sivulla kirjoitetut luvut tarkistetaan tässä: palvelimelle ei kannata
+           lähettää "kymmenen", kun virheen näkee jo selaimessa. */
+        const sivunVirheet = [];
         for (const { elementti, polku } of merkinnat()) {
             const maaritys = kentanMaaritys(sisalto, polku);
             const lista = maaritys?.tyyppi === "tekstilista";
             const teksti = lueTeksti(elementti, lista);
             if (teksti === alkuperaiset.current.get(elementti))
                 continue;
+            let arvo = teksti;
+            if (lista && maaritys?.tyyppi === "tekstilista") {
+                arvo = jaaKappaleiksi(teksti, maaritys.erotin);
+            }
+            else if (maaritys?.tyyppi === "luku") {
+                const luku = Number(teksti.replace(",", ".").trim());
+                if (teksti.trim() === "" || !Number.isFinite(luku)) {
+                    sivunVirheet.push({
+                        kohde: maaritys.nimi ?? polku.alikentta ?? polku.kentta,
+                        viesti: "Kirjoita pelkkä numero.",
+                    });
+                    continue;
+                }
+                arvo = luku;
+            }
             const kieli = onKaannettava(maaritys) ? kentanKieli(elementti, sisalto.kielet) : undefined;
-            muutetut[polku.sivu] = asetaArvo(pohja(polku.sivu), polku, lista ? jaaKappaleiksi(teksti) : teksti, kieli, tunnusKentta(sisalto, polku));
+            muutetut[polku.sivu] = asetaArvo(pohja(polku.sivu), polku, arvo, kieli, tunnusKentta(sisalto, polku));
+        }
+        if (sivunVirheet.length > 0) {
+            setTila("muokkaa");
+            setViesti("Tarkista sivulla merkityt kohdat. Muutoksesi ovat yhä tässä.");
+            setVirheet(sivunVirheet);
+            return;
         }
         /* Uusi kohde sai tunnuksen "uusi". Nyt kun sillä on nimi, tunnus
            johdetaan siitä: se näkyy osoitteessa, eikä kukaan halua /uusi-2. */
@@ -614,7 +656,7 @@ 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 ? (_jsx("button", { type: "button", className: "ensisijainen", onClick: paalle, children: "Muokkaa" })) : (_jsx("button", { type: "button", onClick: () => location.reload(), children: "Lataa uudelleen" }))] })) })] }));
+                }, 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" }))] })) })] }));
 }
 /** Mitä yhtä kohdetta tässä listassa kutsutaan, esimerkiksi "kurssi". */
 function kohdelistanYksikko(sisalto, sivu, kentta) {

package/dist/selain/Paneeli.d.ts

@@ -7,6 +7,7 @@ export interface PaneelinTiedot {
         tyyppi: "kuva";
     }>): Promise<{
         src: string;
+        esikatselu: string | null;
         ehdotus: string | null;
     }>;
     sivu: string;

package/dist/selain/Paneeli.js

@@ -48,10 +48,15 @@ function Sisalto({ maaritys, arvo, tunniste, muuta, lataa, kielet, }) {
         case "tekstialue":
             return (_jsx("textarea", { id: tunniste, rows: 4, value: typeof arvo === "string" ? arvo : "", onChange: (tapahtuma) => muuta(tapahtuma.target.value) }));
         case "tekstilista":
+            /*
+              Yksi rivi = yksi kappale, sama sääntö kuin sivulla muokatessa.
+              Tyhjät rivit ohitetaan, joten ylimääräinen rivinvaihto ei tuota
+              tyhjää kappaletta.
+            */
             return (_jsx("textarea", { id: tunniste, rows: 5, value: Array.isArray(arvo) ? arvo.join("\n\n") : "", onChange: (tapahtuma) => muuta(tapahtuma.target.value
-                    .split(/\n{2,}/)
-                    .map((kohta) => kohta.trim())
-                    .filter((kohta) => kohta !== "")) }));
+                    .split(/\n+/)
+                    .map((kappale) => kappale.trim())
+                    .filter((kappale) => kappale !== "")) }));
         case "kielivalinta": {
             const valitut = Array.isArray(arvo) ? arvo : [];
             return (_jsxs("div", { className: "kielivalinta", children: [kielet.map((kieli) => (_jsxs("label", { className: "kytkin", children: [_jsx("input", { type: "checkbox", checked: valitut.includes(kieli), onChange: (tapahtuma) => muuta(tapahtuma.target.checked
@@ -80,15 +85,15 @@ function Kentta_({ polku, maaritys, tiedot, }) {
     const tunniste = `kentta-${polku.kentta}-${polku.tunnus ?? ""}-${(polku.alikentta ?? "").replace(".", "-")}`;
     const kaannettava = "kaannettava" in maaritys && maaritys.kaannettava === true;
     const arvo = nykyinenArvo(maaritys, lueArvo(tiedot.data, polku, tunnuksenNimi(tiedot, polku.kentta)), tiedot.kieli);
-    return (_jsxs("div", { className: "kentta", children: [_jsxs("label", { htmlFor: tunniste, children: [nimi, kaannettava ? _jsx("span", { className: "kieli", children: tiedot.kieli }) : null] }), _jsx(Sisalto, { maaritys: maaritys, arvo: arvo, tunniste: tunniste, kielet: tiedot.kielet, muuta: (uusi) => tiedot.muuta(polku, uusi, kaannettava), lataa: maaritys.tyyppi === "kuva"
+    return (_jsxs("div", { className: "kentta", children: [_jsxs("label", { htmlFor: tunniste, children: [nimi, maaritys.pakollinen ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "pakko", "aria-hidden": "true", title: "Pakollinen tieto", children: "*" }), _jsx("span", { className: "piilossa", children: " (pakollinen)" })] })) : null, kaannettava ? _jsx("span", { className: "kieli", children: tiedot.kieli }) : null] }), _jsx(Sisalto, { maaritys: maaritys, arvo: arvo, tunniste: tunniste, kielet: tiedot.kielet, muuta: (uusi) => tiedot.muuta(polku, uusi, kaannettava), lataa: maaritys.tyyppi === "kuva"
                     ? async (tiedosto) => {
-                        const { src, ehdotus } = await tiedot.lataaKuva(tiedosto, maaritys);
+                        const { src, ehdotus, esikatselu } = await tiedot.lataaKuva(tiedosto, maaritys);
                         const vanha = onOlio(arvo) ? arvo : {};
                         /* Tyhjä teksti täytetään ehdotuksella suoraan; olemassa
                            olevaa ei ylikirjoiteta, vaan ehdotus tarjotaan. */
                         const alt = typeof vanha.alt === "string" ? vanha.alt.trim() : "";
                         tiedot.muuta(polku, { ...vanha, src, ...(alt === "" && ehdotus ? { alt: ehdotus } : {}) }, false);
-                        return ehdotus;
+                        return { ehdotus, esikatselu };
                     }
                     : undefined }), _jsx(Vapaana, { polku: polku, maaritys: maaritys, arvo: arvo, tiedot: tiedot }), maaritys.ohje ? _jsx("p", { className: "ohje", children: maaritys.ohje }) : null] }));
 }
@@ -110,6 +115,67 @@ function Vapaana({ polku, maaritys, arvo, tiedot, }) {
     const vapaana = Math.max(0, yla - arvo);
     return (_jsx("p", { className: "laskuri", role: "status", children: vapaana === 0 ? "Täynnä" : `Vapaana ${vapaana} / ${yla} paikkaa` }));
 }
+/**
+ * Kohteen nimi listassa.
+ *
+ * Nykyinen kieli ensin, mutta kääntämätön kurssi näkyy sillä kielellä, jolla
+ * se on kirjoitettu — ei nimettömänä.
+ */
+/** Onko kohde vasta lisätty eikä sitä ole vielä tallennettu? */
+function uusi(tunnus) {
+    return /^uusi(-\d+)?$/.test(tunnus);
+}
+function kohteenOtsikko(maaritys, kohde, kieli) {
+    const arvo = kohde[maaritys.otsikko];
+    if (typeof arvo === "string")
+        return arvo === "" ? "(nimetön)" : arvo;
+    if (!onOlio(arvo))
+        return "(nimetön)";
+    const omalla = arvo[kieli];
+    if (typeof omalla === "string" && omalla !== "")
+        return omalla;
+    const joku = Object.values(arvo).find((muu) => typeof muu === "string" && muu !== "");
+    return joku ?? "(nimetön)";
+}
+/**
+ * Virheen kohde muokkaajan sanoin.
+ *
+ * Palvelin kertoo polun ("kurssit.lista.testi.dateLabel"), mutta muokkaaja
+ * tuntee kentät niiden nimillä. Nimi haetaan sisältömallista, ja listan
+ * sisällä mukaan tulee se, minkä kohteen kentästä on kyse — muuten viisi
+ * virhettä näyttää samalta.
+ */
+function virheenKohde(tiedot, kohde) {
+    const osat = kohde.split(".");
+    const kentta = osat[1];
+    const maaritys = kentta ? tiedot.malli.kentat[kentta] : undefined;
+    if (!maaritys)
+        return { nimi: osat.at(-1) ?? kohde, sivulla: false };
+    if (maaritys.tyyppi !== "kohdelista") {
+        return {
+            nimi: maaritys.nimi ?? kentta,
+            sivulla: tiedot.sivullaNakyvat.has(`${tiedot.sivu}.${kentta}`),
+        };
+    }
+    const tunnus = osat[2];
+    const alikentta = osat[3];
+    const alimaaritys = alikentta ? maaritys.kentat[alikentta] : undefined;
+    let nimi = alimaaritys?.nimi ?? alikentta ?? maaritys.nimi ?? kentta;
+    if (alimaaritys?.tyyppi === "ryhma" && osat[4]) {
+        const sisempi = alimaaritys.kentat[osat[4]];
+        nimi = `${alimaaritys.nimi ?? alikentta}: ${sisempi?.nimi ?? osat[4]}`;
+    }
+    const kohteet = Array.isArray(tiedot.data[kentta])
+        ? tiedot.data[kentta]
+        : [];
+    const osuma = kohteet.find((yksi) => yksi[maaritys.tunnus] === tunnus);
+    return {
+        nimi,
+        ...(osuma ? { kohteenNimi: kohteenOtsikko(maaritys, osuma, tiedot.kieli) } : {}),
+        ...(tunnus === undefined ? {} : { tunnus }),
+        sivulla: tiedot.sivullaNakyvat.has(`${tiedot.sivu}.${kentta}[${tunnus}].${alikentta}`),
+    };
+}
 export function Paneeli(tiedot) {
     const kentat = Object.entries(tiedot.malli.kentat);
     const lista = kentat.find(([, maaritys]) => maaritys.tyyppi === "kohdelista");
@@ -120,7 +186,10 @@ export function Paneeli(tiedot) {
         return !tiedot.sivullaNakyvat.has(`${tiedot.sivu}.${avain}`);
     };
     const omat = kentat.filter(([avain, maaritys]) => maaritys.tyyppi !== "kohdelista" && nayta([avain, maaritys]));
-    return (_jsxs("aside", { className: "paneeli", "aria-label": "Sis\u00E4ll\u00F6n tiedot", children: [tiedot.virheet && tiedot.virheet.length > 0 ? (_jsxs("section", { className: "virheet", role: "alert", children: [_jsx("h2", { children: "Tallennus pys\u00E4htyi" }), _jsx("ul", { children: tiedot.virheet.slice(0, 6).map((virhe) => (_jsxs("li", { children: [_jsx("strong", { children: virhe.kohde.split(".").at(-1) }), " ", virhe.viesti] }, `${virhe.kohde}-${virhe.viesti}`))) })] })) : null, omat.length > 0 || tiedot.kaannettavia.sivu.length > 0 ? (_jsxs("section", { children: [_jsx("h2", { children: tiedot.malli.nimi }), omat.map(([avain, maaritys]) => (_jsx(Kentta_, { polku: { sivu: tiedot.sivu, kentta: avain }, maaritys: maaritys, tiedot: tiedot }, avain))), tiedot.kielet.length > 1 ? _jsx(Kaannos, { tiedot: tiedot, mihin: "sivu" }) : null] })) : null, lista ? _jsx(Kohteet, { avain: lista[0], maaritys: lista[1], tiedot: tiedot }) : null] }));
+    return (_jsxs("aside", { className: "paneeli", "aria-label": "Sis\u00E4ll\u00F6n tiedot", children: [tiedot.virheet && tiedot.virheet.length > 0 ? (_jsxs("section", { className: "virheet", role: "alert", children: [_jsx("h2", { children: "Tallennus pys\u00E4htyi" }), _jsx("ul", { children: tiedot.virheet.slice(0, 6).map((virhe) => {
+                            const tiedot_ = virheenKohde(tiedot, virhe.kohde);
+                            return (_jsxs("li", { children: [_jsx("strong", { children: tiedot_.nimi }), " ", virhe.viesti, tiedot_.kohteenNimi ? (_jsx("button", { type: "button", className: "linkki", onClick: () => tiedot_.tunnus && tiedot.valitse(tiedot_.tunnus), children: tiedot_.kohteenNimi })) : null, tiedot_.sivulla ? _jsx("span", { className: "merkki", children: " Muokataan sivulla." }) : null] }, `${virhe.kohde}-${virhe.viesti}`));
+                        }) })] })) : null, omat.length > 0 || tiedot.kaannettavia.sivu.length > 0 ? (_jsxs("section", { children: [_jsx("h2", { children: tiedot.malli.nimi }), omat.map(([avain, maaritys]) => (_jsx(Kentta_, { polku: { sivu: tiedot.sivu, kentta: avain }, maaritys: maaritys, tiedot: tiedot }, avain))), tiedot.kielet.length > 1 ? _jsx(Kaannos, { tiedot: tiedot, mihin: "sivu" }) : null] })) : null, lista ? _jsx(Kohteet, { avain: lista[0], maaritys: lista[1], tiedot: tiedot }) : null] }));
 }
 const KIELELLE = {
     fi: "suomeksi",
@@ -164,20 +233,7 @@ function Kohteet({ avain, maaritys, tiedot, }) {
     const kohteet = Array.isArray(tiedot.data[avain])
         ? tiedot.data[avain]
         : [];
-    const nimi = (kohde) => {
-        const arvo = kohde[maaritys.otsikko];
-        if (typeof arvo === "string")
-            return arvo === "" ? "(nimetön)" : arvo;
-        if (!onOlio(arvo))
-            return "(nimetön)";
-        /* Nykyinen kieli ensin, mutta kääntämätön kurssi näkyy listassa sillä
-           kielellä, jolla se on kirjoitettu — ei nimettömänä. */
-        const omalla = arvo[tiedot.kieli];
-        if (typeof omalla === "string" && omalla !== "")
-            return omalla;
-        const joku = Object.values(arvo).find((muu) => typeof muu === "string" && muu !== "");
-        return joku ?? "(nimetön)";
-    };
+    const nimi = (kohde) => kohteenOtsikko(maaritys, kohde, tiedot.kieli);
     /**
      * Merkinnät kohteen nimen perässä: piilotus, huomionarvoinen tila ja
      * täyttyminen. Näin listasta näkee tilanteen avaamatta jokaista kohdetta.
@@ -223,7 +279,7 @@ function Kohteet({ avain, maaritys, tiedot, }) {
                             const tunnus = String(kohde[maaritys.tunnus] ?? "");
                             const omatMerkinnat = merkinnat(kohde);
                             return (_jsx("li", { children: _jsxs("button", { type: "button", className: tunnus === valitunTunnus ? "valittu" : undefined, "aria-current": tunnus === valitunTunnus ? "true" : undefined, onClick: () => tiedot.valitse(tunnus), children: [_jsx("span", { children: nimi(kohde) }), omatMerkinnat.length > 0 ? (_jsx("span", { className: "merkki", children: omatMerkinnat.join(" · ") })) : null] }) }, tunnus));
-                        }) }), _jsx("div", { className: "napit", children: _jsxs("button", { type: "button", onClick: () => tiedot.lisaaKohde(avain, maaritys), children: ["+ Lis\u00E4\u00E4 ", yksikko] }) }), valittu ? null : (_jsxs("p", { className: "ohje", children: ["Valitse ", yksikko, ", niin n\u00E4et sen tiedot."] }))] }), valittu && valitunTunnus ? (_jsxs("section", { children: [_jsx("h2", { children: nimi(valittu) }), ensisijaiset.map(kentta), tiedot.kielet.length > 1 ? _jsx(Kaannos, { tiedot: tiedot, mihin: "kohde" }) : null, lisatiedot.length > 0 ? (_jsxs("details", { className: "lisatiedot", children: [_jsx("summary", { children: "Lis\u00E4tiedot" }), lisatiedot.map(kentta)] })) : null, _jsx("div", { className: "napit", children: _jsxs("button", { type: "button", className: "vaarallinen", onClick: () => tiedot.poistaKohde(avain, maaritys.tunnus, valitunTunnus), children: ["Poista ", yksikko] }) })] })) : null] }));
+                        }) }), _jsx("div", { className: "napit", children: _jsxs("button", { type: "button", onClick: () => tiedot.lisaaKohde(avain, maaritys), children: ["+ Lis\u00E4\u00E4 ", yksikko] }) }), valittu ? null : (_jsxs("p", { className: "ohje", children: ["Valitse ", yksikko, ", niin n\u00E4et sen tiedot."] }))] }), valittu && valitunTunnus ? (_jsxs("section", { children: [_jsx("h2", { children: nimi(valittu) }), maaritys.osoite ? (uusi(valitunTunnus) ? (_jsx("p", { className: "ohje", children: "Oma sivu syntyy, kun tallennat." })) : (_jsx("p", { className: "ohje", children: _jsx("a", { className: "linkki", href: maaritys.osoite.replace("{tunnus}", valitunTunnus), children: "Avaa sivu" }) }))) : null, ensisijaiset.map(kentta), tiedot.kielet.length > 1 ? _jsx(Kaannos, { tiedot: tiedot, mihin: "kohde" }) : null, lisatiedot.length > 0 ? (_jsxs("details", { className: "lisatiedot", children: [_jsx("summary", { children: "Lis\u00E4tiedot" }), lisatiedot.map(kentta)] })) : null, _jsx("div", { className: "napit", children: _jsxs("button", { type: "button", className: "vaarallinen", onClick: () => tiedot.poistaKohde(avain, maaritys.tunnus, valitunTunnus), children: ["Poista ", yksikko] }) })] })) : null] }));
 }
 /**
  * Kuvakenttä: nykyinen kuva, vaihto ja vaihtoehtoinen teksti.
@@ -237,6 +293,9 @@ function Kuvakentta({ maaritys, arvo, muuta, lataa, }) {
     /* Vasta vaihdettu kuva: vanha teksti kuvaa yhä vanhaa kuvaa. */
     const [vaihdettu, setVaihdettu] = useState(false);
     const [ehdotus, setEhdotus] = useState(null);
+    /* Juuri ladattu kuva näytetään sellaisenaan: tallennettu tiedosto ilmestyy
+       osoitteeseensa vasta, kun sivusto on rakennettu uudelleen. */
+    const [esikatselu, setEsikatselu] = useState(null);
     const kuva = onOlio(arvo) ? arvo : undefined;
     async function valitse(tiedosto) {
         if (!tiedosto)
@@ -246,9 +305,10 @@ function Kuvakentta({ maaritys, arvo, muuta, lataa, }) {
         setEhdotus(null);
         try {
             const nykyinenAlt = typeof kuva?.alt === "string" ? kuva.alt.trim() : "";
-            const uusiEhdotus = await lataa(tiedosto);
+            const { ehdotus: uusiEhdotus, esikatselu: uusiKuva } = await lataa(tiedosto);
             setTila("valmis");
             setVaihdettu(true);
+            setEsikatselu(uusiKuva);
             /* Jos kentässä oli jo teksti, ehdotusta tarjotaan mutta ei tyrkytetä. */
             if (uusiEhdotus && nykyinenAlt !== "")
                 setEhdotus(uusiEhdotus);
@@ -258,7 +318,7 @@ function Kuvakentta({ maaritys, arvo, muuta, lataa, }) {
             setVirhe(syy instanceof Error ? syy.message : "Kuvan lataus ei onnistunut.");
         }
     }
-    return (_jsxs("div", { className: "kuva", children: [typeof kuva?.src === "string" ? (_jsx("img", { src: kuva.src, alt: "" })) : (_jsx("p", { className: "tyhja", children: "Ei kuvaa." })), _jsxs("label", { className: "lataus", children: [_jsx("span", { children: tila === "lataa" ? "Käsitellään…" : "Vaihda kuva" }), _jsx("input", { type: "file", accept: "image/*", disabled: tila === "lataa", onChange: (tapahtuma) => valitse(tapahtuma.target.files?.[0]) })] }), tila === "virhe" ? _jsx("p", { className: "virheviesti", children: virhe }) : null, _jsxs("label", { className: "alt", children: ["Kuvan kuvaus", _jsx("input", { type: "text", placeholder: "Esimerkiksi: kynttil\u00E4 ikkunalaudalla", value: typeof kuva?.alt === "string" ? kuva.alt : "", onChange: (tapahtuma) => {
+    return (_jsxs("div", { className: "kuva", children: [esikatselu ?? (typeof kuva?.src === "string" ? kuva.src : null) ? (_jsxs(_Fragment, { children: [_jsx("img", { src: esikatselu ?? kuva?.src, alt: "" }), esikatselu ? (_jsx("p", { className: "ohje", children: "Uusi kuva. Se tulee sivulle, kun tallennat." })) : null] })) : (_jsx("p", { className: "tyhja", children: "Ei kuvaa." })), _jsxs("label", { className: "lataus", children: [_jsx("span", { children: tila === "lataa" ? "Käsitellään…" : "Vaihda kuva" }), _jsx("input", { type: "file", accept: "image/*", disabled: tila === "lataa", onChange: (tapahtuma) => valitse(tapahtuma.target.files?.[0]) })] }), tila === "virhe" ? _jsx("p", { className: "virheviesti", children: virhe }) : null, _jsxs("label", { className: "alt", children: ["Kuvan kuvaus", _jsx("input", { type: "text", placeholder: "Esimerkiksi: kynttil\u00E4 ikkunalaudalla", value: typeof kuva?.alt === "string" ? kuva.alt : "", onChange: (tapahtuma) => {
                             setVaihdettu(false);
                             muuta({ ...(kuva ?? {}), alt: tapahtuma.target.value });
                         } })] }), ehdotus ? (_jsxs("div", { className: "huomio", role: "status", children: [_jsxs("p", { children: ["Ehdotus: \u201C", ehdotus, "\u201D"] }), _jsx("button", { type: "button", onClick: () => {

package/package.json

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