Skip to main content

HTML & Plain Text (CMS / WYSIWYG)

Editorial and API fields often provide HTML (<p>…</p>) or escaped HTML in JSON (&lt;p&gt;…). When rendered in React as text ({shop.description}), users see visible tags or entities.

Unified Solution: @mall-os/html-plain-text​

Workspace package with no additional runtime dependencies:

  • htmlToPlainText(value) – Decode entities (including multiple escapes), remove tags, normalize whitespace. For lists, tables, tooltips, search matches. Also includes numeric and typographic entities (e.g., &#8216;, &hellip;, &ndash;), which APIs often deliver in plain text.
  • stripHtmlTags / stripHtmlToText – Aliases for htmlToPlainText.

Apps integrate this through their existing wrappers:

AppEntry Point
Dashboard@/lib/sanitize-html → exports stripHtmlTags, htmlToPlainText, decodeHtmlEntitiesIfEscaped; sanitizeHtml first decodes escaped content, then uses DOMPurify.
Center Website@/lib/sanitize-html – sanitizeHtml allows, among other things, headings (h1–h6), lists, blockquote, div, hr for long CMS texts; sanitizeCmsRichText for fields that can be plain text with line breaks or HTML. For safe rendering, also use SafeHtmlContent.
Digital Signage@/lib/sanitize-html → stripHtmlToText, among others.

UI Rules​

  • Preview Only / Single Line: stripHtmlTags(field) or htmlToPlainText(field).
  • Formatted Text with Links: sanitizeHtml + dangerouslySetInnerHTML or SafeHtmlContent (Center Website), not raw string.
  • Search via Description: Keep search string against plain text (stripHtmlTags before includes).

Further areas can be updated as needed: anywhere CMS fields end up in <p> / <span> without explicit HTML rendering.

Dashboard: Areas Already Updated (Excerpt)​

In addition to previous adjustments (issues, categories, live preview, organizations, theme previews, etc.), the following views are secured with stripHtmlTags from @/lib/sanitize-html:

  • QR Management (List + Detail)
  • Center Detail (Tabs Offers, Events, News Extract, Jobs)
  • Delete Confirmations (Jobs, Events, Hot Picks)
  • Services (Detail page including related offers, quick-setup cards)
  • Edit Center (Center plan description in overview)
  • Center Manager (Capture lists, Issues)
  • Themes (Multi-theme family, Organization theme selector, Digital Experience “Websites → Themes”)
  • WordPress Area (Content Areas, Dynamic Hero, Plugin/Widget/Theme Cards, Template Description)
  • AI Assistants (Offer and event result descriptions in preview)
  • Others (e.g., CenterProfileTab workflows, ExternalEventsTab, OrganizationDashboard description)
  • HBB Block Plugins (including Single Store, Bento Grid, Directions, Footer, Modern Center Plan – preview texts in the builder)

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /en/developer-guide/html-und-klartext