feat(web): ellipsizeMode and numberOfLines in EnrichedText

[hejsztynx]

Summary

Implemented ellipsizeMode and numberOfLines props in EnrichedText web component.

The RN ellipsizeMode can often cause confusion, as it only works when the ellipsized text is a continuous text that wraps the lines. If try to ellipsize text that consists of paragraphs, the ellipsizeMode bails, often just showing the given numberOfLines limit without actually rendering the ellipsis, which is pretty confusing. The web's DOM allows us to compute the text truncation more precisely and here it does so.

• tail, head, middle, clip are implemented
• middle works a bit differently, as we can't really merge two different paragraph styles into one line, so if such situation occurs, we fallback to the head behavior
• Generally, each mode creates an invisible sandbox, which is a copy of computed component, and finds the ellipsized HTML that matches given constraints in useLayoutEffect
• Multiple visual E2E tests were added, with various edge-case handling

Test Plan

I've modified example app's code so it's easier to test repeatedly - the changes are marked with a // comment, and will be removed before the merge:

• there is a second EnrichedText, but without numberOfLines set to see how would it render without the ellipsizing,
• "Push text" does not clear the input, so re-push changes quicker

Play around with the modes, make sure the HTML is computed and rendered as expected. Inline images, line brakes, long words were often something that would brake the algorithm, so try working with that.

Screenshots / Videos

Compatibility

OS	Implemented
iOS	❌
Android	❌
Web	✅

Checklist

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

[Copilot]

Pull request overview

Adds web support for numberOfLines + ellipsizeMode on EnrichedText by computing a truncated HTML representation via DOM measurement in a hidden sandbox, plus documentation and E2E visual coverage.

Changes:

• Integrates ellipsizeMode / numberOfLines into src/web/EnrichedText.tsx via a new useEllipsizeMode hook.
• Introduces web ellipsize implementations (head, middle, tail, clip) built on shared DOM utilities.
• Adds a new example web test screen + Playwright visual regression suite and updates docs to reflect web support.

Reviewed changes

Copilot reviewed 14 out of 89 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
src/web/EnrichedText.tsx	Wires ellipsizeMode + numberOfLines into the web component and renders clamped HTML.
src/web/ellipsizeMode/utils.ts	Shared sandbox creation + DOM walking/trimming helpers used by all ellipsize modes.
src/web/ellipsizeMode/useEllipsizeMode.ts	Hook that selects and runs the appropriate ellipsize algorithm in useLayoutEffect.
src/web/ellipsizeMode/tailEllipsize.ts	Tail ellipsis implementation (“…at end”) using scan + backward trimming.
src/web/ellipsizeMode/headEllipsize.ts	Head ellipsis implementation (“…at start”) using scan + forward trimming.
src/web/ellipsizeMode/middleEllipsize.ts	Middle ellipsis implementation with center-point placement and head fallback logic.
src/web/ellipsizeMode/clip.ts	Clip implementation (hard cut without ellipsis).
src/index.tsx	Exports EnrichedTextProps type from the package entry.
docs/WEB.md	Documents that web EnrichedText now supports truncation props.
docs/TEXT_API_REFERENCE.md	Updates API reference tables to include Web platform support for truncation props.
apps/example-web/src/testScreens/TestEllipsize.tsx	Adds a UI harness for exercising ellipsize behaviors in the example web app.
apps/example-web/src/RouteSelector.tsx	Adds routing for the new /test-ellipsize screen.
apps/example-web/src/App.tsx	Temporarily modified example app to make manual testing easier (needs cleanup before merge).
.playwright/tests/ellipsizeVisual.spec.ts	Adds visual regression coverage for multiple ellipsize modes and edge cases.

---

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