feat(web): enriched text component

[hejsztynx]

Summary

The EnrichedText component has been implemented with the support of basic props:

• style
• htmlStyle
• children
• selectionColor

The core displaying feature of the component is fully functional and should be identical to the EnrichedTextInput. The EnrichedText specific parts of htmlStyle is not yet implemented, as these are press specific actions - outside of this PR's scope. 'htmlStyleis currently only handled on the shared part with theEnrichedTextInput`.

As we are using dangerouslySetInnerHtml, proper sanitization of the html was provided using dompurify.

Test Plan

On the root page a "Set Enriched Text" button was added to easily test the component. You write something in the input, press the button to apply the html to the EnrichedText component and the visible content should look identical

Compatibility

OS	Implemented
Web	✅

Checklist

• E2E tests are passing
• Required E2E tests have been added (if applicable)

[Copilot]

Pull request overview

Adds an experimental web implementation of the read-only EnrichedText renderer, aligning its output with EnrichedTextInput and introducing HTML sanitization + web-specific normalization (checkbox rendering + broken-image fallback).

Changes:

• Introduces EnrichedText (web) with shared CSS-variable theming and style conversion utilities.
• Adds DOMPurify-based HTML sanitization and web normalization (checkbox HTML conversion + broken image placeholder behavior).
• Refactors/renames CSS variable prefixes and consolidates styling into a shared EnrichedText.css, with new/updated unit + visual regression tests.

Reviewed changes

Copilot reviewed 29 out of 48 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
yarn.lock	Adds lock entries for dompurify (+ optional trusted-types typings).
package.json	Adds dompurify dependency.
src/index.tsx	Exports the new EnrichedText web component.
src/web/EnrichedText.tsx	New web EnrichedText renderer using sanitization + normalization + CSS vars.
src/web/EnrichedText.css	New consolidated CSS for both editor (EnrichedTextInput) and viewer (EnrichedText).
src/web/EnrichedTextInput.tsx	Switches to shared CSS + updated theming import + mention rule builder signature + classname constant.
src/web/EnrichedTextInput.css	Removed; styling consolidated into EnrichedText.css.
src/web/sanitization/htmlSanitizer.ts	Adds DOMPurify-based HTML sanitization for dangerouslySetInnerHTML.
src/web/normalization/prepareHtmlForWeb.ts	Adds web-specific HTML normalization (checkbox conversion + image error fallback).
src/web/constants/classNames.ts	Centralizes editor/viewer classnames.
src/web/constants/brokenImageGlyph.ts	Extracts broken-image SVG path and provides CSS mask data URI.
src/web/formats/EnrichedImageNodeView.tsx	Reuses shared broken-image glyph constant.
src/web/styleConversion/inlineImageCSSVariables.ts	Adds CSS variables for inline-image placeholder glyph mask.
src/web/styleConversion/htmlStyleToCSSVariables.ts	Renames CSS var prefix to --et-* and updates mention vars.
src/web/styleConversion/enrichedThemingToCSSProperties.ts	Renames theming vars to --et-* and file rename via import updates.
src/web/styleConversion/enrichedInputStyleToCSSProperties.ts	Refactors to delegate to new shared base converter.
src/web/styleConversion/enrichedBaseStyleToCSSProperties.ts	New shared style converter for base RN→CSS properties mapping.
src/web/styleConversion/enrichedTextStyleToCSSProperties.ts	New text-specific RN→CSS conversion for viewer use.
src/web/styleConversion/buildMentionRulesCSS.ts	Adds component selector choice (input vs text) and updates vars + selectors.
src/web/styleConversion/tests/htmlStyleToCSSVariables.test.ts	Updates expected CSS variable names to --et-*.
src/web/styleConversion/tests/enrichedThemingToCSSProperties.test.ts	Updates import + expected CSS variable names; adds a partial-prop test.
src/web/styleConversion/tests/enrichedBaseStyleToCSSProperties.test.ts	Updates to test the new shared base converter.
src/web/styleConversion/tests/enrichedTextStyleToCSSProperties.test.ts	Adds coverage for text-only style conversion behavior.
src/web/styleConversion/tests/buildMentionRulesCSS.test.ts	Updates for new signature and className selectors + --et-* vars.
docs/TEXT_API_REFERENCE.md	Updates documentation to mark web support as experimental and expands platform tables for key props.
apps/example-web/src/testScreens/TestEnrichedText.tsx	Adds a dedicated test screen for EnrichedText.
apps/example-web/src/RouteSelector.tsx	Routes /test-enriched-text to the new test screen.
apps/example-web/src/App.tsx	Adds a “Set Enriched Text” button and renders an EnrichedText preview.
apps/example-web/src/App.css	Adds container styling for the new preview section.
.playwright/tests/enrichedTextVisual.spec.ts	Adds visual regression coverage for EnrichedText (typography, lists, mentions, images).

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.