Fett, kursiv, unterstrichen, durchgestrichen -- ueberall

Filipe, 21.09.2026: "dan will ich dass die leute auch immer die art
von text aussuchen können, fettgedrückt, unterstrichen und so alles.
das überall sei es im chat jeder für sich oder sei es wenn die modis
oder rechte hand oder dogfather eine aufgabe oder sachen posten."

VORHER GEMESSEN: Es gab genau EINE Auszeichnung im ganzen Haus --
fett, und nur auf den Brettern (`mitFett` in bereich.js). Im Chat
konnte niemand etwas hervorheben.

EINE QUELLE FUER DAS GANZE HAUS: workspace/assets/js/textform.js.
Chat, Bretter und Aufgaben zeichnen ihren Text jetzt durch denselben
Zerleger. Drei Fassungen derselben Regel waeren drei Fassungen, die
verschieden altern.

  **fett**   _kursiv_   __unterstrichen__   ~~durchgestrichen~~

Dazu eine Leiste ueber jedem Schreibfeld: F K U S, 44 px am Finger,
Strg+B/I/U, und ein zweiter Druck nimmt die Zeichen wieder weg.

DIE WORTGRENZEN SIND DER EIGENTLICHE BAU. Ein Zerleger, der alles
auszeichnet, ist schlimmer als keiner: `datei_name_hier` hiesse
plotzlich anders, als es heisst, und `@max_muster` ebenso. Deshalb
stehen bei den Unterstrichen Wortgrenzen -- bei Sternchen und Tilden
nicht, die kommen in Text nicht versehentlich paarweise vor.

GEBAUT MIT createTextNode, NIE innerHTML. Wer Text zu Auszeichnung
macht, ist einen Tippfehler von einer Luecke entfernt. Das ist heute
sicher; pruef-textform misst es, damit es das morgen auch ist.

EIN ECHTER FEHLER DABEI GEFUNDEN -- in meinem eigenen Einbau von
vorhin: Auf dem Aufgabenbrett stand `$('f-text')` in einem Block, der
`$` gar nicht kennt (die Datei hat drei getrennte Bloecke).
`ReferenceError: $ is not defined`, die Leiste kam dort nie an, und
die Seite sah dabei vollkommen normal aus. Derselbe Block beginnt
ausserdem mit `if (!feld) return;` auf ein Aufwand-Feld, das mit
Textgestaltung nichts zu tun hat -- die Leiste haette an einer
voellig fremden Bedingung gehangen. Jetzt ein eigener Block, ohne
fremden Helfer und ohne fremde Bedingung.

Gefunden hat es die Pruefung, weil sie die Leiste AM FELD sucht,
statt den Aufruf im Quelltext zu zaehlen. Sie sammelt seitdem auch
Skriptfehler ein -- ein ReferenceError ist immer ein Befund, auch
wenn man noch nicht weiss, was er anrichtet.

pruef-textform.mjs, 50 Aussagen:
  - welche Seite das Modul braucht, wird ABGELEITET (beide
    Richtungen: keine ohne, keine umsonst) -- 3 brauchen, 32 nicht
  - 13 Regelfaelle im echten Browser an der echten Datei, davon
    sechs, die NICHT gestaltet werden duerfen
  - eine echte Nachricht wird zu <strong>/<em>/<u>/<s>
  - Sicherheitsprobe: <b> und <img onerror> bleiben Text, nichts
    wird ausgefuehrt -- und die echte Auszeichnung daneben wirkt
    trotzdem (sonst waere nur bewiesen, dass gar nichts passiert)
  - die Leiste legt Zeichen wirklich um und wieder ab
  - Gegenproben fuer beide Richtungen

Nachbarn unveraendert gruen: pruef-chat-optik 45/0 (war 39 -- die
Antwortleiste kam dazu), pruef-aufgabenbrett 49/0, pruef-nachfrage
49/0, pruef-css-klassen 30/0, pruef-tippziele 11/0, pruef-meldungen
8/0.
This commit is contained in:
2026-09-21 16:42:43 +02:00
parent 7305f694d5
commit bfbe6feafe
44 changed files with 1503 additions and 528 deletions
+19
View File
@@ -2465,3 +2465,22 @@
Töne ununterscheidbar, und nur der Name trägt. Er steht ohnehin
im aria-label und im title. */
}
/* DIE REIHENFOLGE IN DER EINGABEZEILE (21.09.2026).
Drei Dinge liegen hier in einer umbrechenden Reihe, und die
Reihenfolge im HTML ist nicht die, die man sehen will: Die
Bueroklammer steht dort VOR dem Schreibfeld, die Gestaltungsleiste
kam danach. Beim ersten Versuch stand die Klammer deshalb allein in
der ersten Zeile und die Leiste darunter -- richtig gerechnet,
falsch gelesen.
`order` statt Umbauen: Die Reihenfolge im Quelltext bleibt die, die
ein Vorleseprogramm braucht (erst der Bezug, dann die Werkzeuge,
dann das Feld), und das Auge bekommt seine eigene.
-2 Antwortleiste worauf beziehe ich mich
-1 Gestaltung womit schreibe ich
0 Klammer, Feld, Emoji, Senden -- die eigentliche Zeile */
.chat__eingabe .antwort-leiste { order: -2; }
.chat__eingabe .textform { order: -1; flex: 1 0 100%; margin-bottom: 2px; }