feat(web): add fontSize and font Family to customStyle

[kacperzolkiewski]

Summary

Add fontSize and font Family to customStyle

Test Plan

Run example web app and experiment with applying fontSize and fontFamily through the toolbar across different text styles.

Screenshots / Videos

Screen.Recording.2026-08-12.at.10.26.34.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 fontSize and fontFamily via the existing customStyle mark, ensuring these styles are preserved through HTML normalization/serialization and exposed in the example web toolbar with Playwright coverage.

Changes:

• Extend customStyle mark parsing/rendering and update the command to merge style patches while preserving per-run differences across selections.
• Preserve font-size / font-family during HTML normalization and include these fields in onChange state + state hashing.
• Update the example-web toolbar UI (plus CSS) to control font size/family and add Playwright tests covering round-trip serialization + interactions.

Reviewed changes

Copilot reviewed 7 out of 8 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/web/useOnChangeState.ts	Include fontSize/fontFamily in emitted editor state and state hashing.
src/web/normalization/htmlNormalizer.ts	Preserve font-size / font-family inline styles when normalizing HTML.
src/web/formats/EnrichedCustomStyle.ts	Add new mark attributes and update setCustomStyle to patch/merge per inline run.
src/web/EnrichedTextInput.tsx	Pass fontSize/fontFamily through setStyle → setCustomStyle.
apps/example-web/src/components/Toolbar.tsx	Add toolbar controls and pickers for font size/family.
apps/example-web/src/components/Toolbar.css	Style the new font picker UI.
.playwright/tests/customStyleFonts.spec.ts	Add E2E coverage for serialization, visual regression, and toolbar interactions.

Suppressed comments (2)

apps/example-web/src/components/Toolbar.tsx:395

• The new font-family toolbar button is labeled visually as “Ff”/a short label, but it has no accessible name. Add an aria-label so screen readers can announce what the control does.

          <button
            type="button"
            data-testid="toolbar-font-family"
            className={`toolbar-btn toolbar-color-btn${

apps/example-web/src/components/Toolbar.tsx:495

• The font-family clear button uses only the “✕” glyph, which is not an accessible name. Add an aria-label so screen readers can announce its purpose.

          <button
            type="button"
            data-testid="font-family-clear"
            className="toolbar-font-option toolbar-font-option--clear"
            onPointerDown={(e) => {

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[hejsztynx]

Currently when you apply Courier New font (labeled as "Mono") it is not preserved in round-trip. I debugged a bit and it seems like tiptap renders
<span style="font-family: &quot;Courier New&quot;;">
and in the normalizer we do
const fontFamily = htmlNode.style.fontFamily;
and that makes fontFamily be equal to "Courier New" (including the quotes).
We then inject that quoted string into style="" which breaks it.

const fontFamily = escapeText(htmlNode.style.fontFamily) excaping those characters here should solve the issue from what I've tested.

Worth checking if native's normalizer need a similar fix

[hejsztynx]

Looks good!