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.

[Copilot]

Pull request overview

Copilot reviewed 10 out of 11 changed files in this pull request and generated 5 comments.

[hejsztynx]

1. When we set the background color of a <code> the colors clip

Also maybe they sohuld be overwritten? Just like it happens in blockquote or codeblock. Or the inline styles should not be overwritten? (mention, link). I'm just checking if this is intentional.

2. When there's a space in the beginning of a foreground or a background style, on backspace, both styles are stripped

Screen.Recording.2026-06-25.at.13.56.58.mov

[kacperzolkiewski]

1. When we set the background color of a <code> the colors clip

Also maybe they sohuld be overwritten? Just like it happens in `blockquote` or `codeblock`. Or the inline styles should not be overwritten? (mention, link). I'm just checking if this is intentional.

2. When there's a space in the beginning of a foreground or a background style, on backspace, both styles are stripped

Screen.Recording.2026-06-25.at.13.56.58.mov

1. Custom styles have higher priority than paragraph styles, but lower priority than inline styles. This is why they override paragraph styles but do not override inline styles.
2. Fixed.

[hejsztynx]

Works great!