HTML & Klartext (CMS / WYSIWYG)

Redaktions- und API-Felder liefern oft HTML (<p>…</p>) oder escaped HTML in JSON (<p>…). Wird das in React als Text gerendert ({shop.description}), sehen Nutzer sichtbare Tags oder Entities.

Einheitliche Lösung: @mall-os/html-plain-text

Workspace-Paket ohne weitere Runtime-Abhängigkeiten:

• htmlToPlainText(value) – Entities (inkl. mehrfach escaped) decodieren, Tags entfernen, Whitespace normalisieren. Für Listen, Tabellen, Tooltips, Such-Matches. Enthält auch numerische und typografische Entities (z. B. ‘, …, –), die APIs oft im Klartext liefern.
• stripHtmlTags / stripHtmlToText – Aliase zu htmlToPlainText.

Apps binden das über ihre bestehenden Hüllen ein:

App	Einstieg
Dashboard	@/lib/sanitize-html → exportiert stripHtmlTags, htmlToPlainText, decodeHtmlEntitiesIfEscaped; sanitizeHtml decodiert zuerst escaped Inhalt, dann DOMPurify.
Center-Website	@/lib/sanitize-html – sanitizeHtml erlaubt u. a. Überschriften (h1–h6), Listen, blockquote, div, hr für lange CMS-Texte; sanitizeCmsRichText für Felder, die Klartext mit Leerzeilen oder HTML sein können. Für sicheres Rendern zusätzlich SafeHtmlContent.
Digital Signage	@/lib/sanitize-html → stripHtmlToText u. a.

Regeln für die UI

• Nur Vorschau / eine Zeile: stripHtmlTags(feld) bzw. htmlToPlainText(feld).
• Formatierter Text mit Links: sanitizeHtml + dangerouslySetInnerHTML oder SafeHtmlContent (Center-Website), nicht roher String.
• Suche über Beschreibung: Suchstring gegen Klartext halten (stripHtmlTags vor includes).

Weitere Stellen nach Bedarf nachziehen: überall, wo CMS-Felder in <p> / <span> ohne explizites HTML-Rendering landen.

Dashboard: bereits nachgezogene Bereiche (Auszug)

Neben früheren Anpassungen (Issues, Kategorien, Live-Preview, Organisationen, Theme-Vorschauen u. a.) werden u. a. folgende Views mit stripHtmlTags aus @/lib/sanitize-html abgesichert:

• QR-Verwaltung (Liste + Detail)
• Center-Detail (Tabs Angebote, Events, News-Auszug, Jobs)
• Lösch-Bestätigungen (Jobs, Events, Hot-Picks)
• Services (Detailseite inkl. zugehöriger Angebote, Quick-Setup-Karten)
• Center bearbeiten (Centerplan-Beschreibung in der Übersicht)
• Center Manager (Capture-Listen, Issues)
• Themes (Multi-Theme-Familie, Organization Theme-Selector, Digital Experience „Websites → Themes“)
• WordPress-Bereich (Content Areas, Dynamic Hero, Plugin-/Widget-/Theme-Karten, Template-Beschreibung)
• KI-Assistenten (Angebots- und Event-Ergebnisbeschreibungen in der Vorschau)
• Sonstiges (z. B. CenterProfileTab Workflows, ExternalEventsTab, OrganizationDashboard Beschreibung)
• HBB-Block-Plugins (u. a. Single Store, Bento Grid, Directions, Footer, Modern Centerplan – Vorschau-Texte im Builder)