feat(web): custom style

[kacperzolkiewski]

Summary

Add custom style for foreground and background colors handling

Test Plan

• Run the example web app and experiment with applying foreground and background colors through the toolbar across different text styles.
• Run yarn test:e2e:web to see if all the tests pass

Screenshots / Videos

Screen.Recording.2026-06-22.at.15.58.38.mov

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 applying/serializing custom foreground/background colors via a new TipTap mark, updates state reporting so toolbar/UI can reflect active colors, and extends the example web app + Playwright coverage to exercise the new behavior.

Changes:

• Introduces customStyle TipTap mark for foregroundColor / backgroundColor and wires it into the web editor instance.
• Updates web HTML normalization to preserve color / background-color spans and updates onChangeState hashing/state to include custom colors.
• Adds example-web toolbar color pickers and new Playwright e2e + visual/round-trip tests.

Reviewed changes

Copilot reviewed 7 out of 8 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/web/useOnChangeState.ts	Reads customStyle mark attributes into state and includes them in the state hash to trigger updates.
src/web/normalization/htmlNormalizer.ts	Preserves color / background-color on <span> while still converting other CSS styles to inline tags.
src/web/formats/EnrichedCustomStyle.ts	New TipTap mark implementing custom foreground/background color styling + commands.
src/web/EnrichedTextInput.tsx	Registers the new mark and implements the imperative setStyle API on web using the mark commands.
apps/example-web/src/components/Toolbar.tsx	Adds UI controls for selecting/clearing text/background colors.
apps/example-web/src/components/Toolbar.css	Styles the new color picker UI.
.playwright/tests/customStyleColors.spec.ts	Adds e2e coverage for round-trip serialization, toolbar interaction, and a visual regression snapshot.

---

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