fix: support letter and word spacing in text - #252
SulimanAbdulrazzaq wants to merge 6 commits into
Conversation
|
@SulimanAbdulrazzaq Thanks for working on this. The direction looks good, but the CI failure is a real type error. Also, measury@0.1.5 already applies numeric letterSpacing and wordSpacing, so passing them to measure() and then adding spacingWidth again would double-count spacing in SSR. The current mocked test hides this. Could you normalize the supported CSS lengths once, avoid the extra SSR addition, and add an unmocked regression test? |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #252 +/- ##
==========================================
+ Coverage 50.90% 51.56% +0.66%
==========================================
Files 343 343
Lines 28710 28769 +59
Branches 2665 2711 +46
==========================================
+ Hits 14614 14836 +222
+ Misses 14085 13922 -163
Partials 11 11
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
Codecov flagged 11 uncovered lines on this patch, all in src/utils/text.ts: the measurement branch of updateTextElement, the CSS-length branch of formatSpacing, and the spacing read-back in getTextElementProps. Adds cases for each: bare numbers and numeric strings normalized to px, explicit units left untouched, an explicit zero preserved, absent spacing omitted, the measured box widening with letter spacing, explicitly sized elements left unmeasured, and the spacing round-trip through getTextElementProps. Patch coverage for src/utils/text.ts is now complete. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Bvrwu6iCpKP3C2rh8tBsdJ
getTextStyle now checks letter and word spacing with `!= null` instead of `!== undefined`. UpdateElementCommand records `null` for attributes the element did not have, so undoing a letter-spacing edit on unspaced text passed `null` to formatSpacing, which threw. Main skipped such values.
|
@Aarebecca thanks, all of your points are addressed, plus one fix I found while re-checking:
Validation at ae10e84 (Node 20, |
Summary
Fixes #184.
letterSpacingandwordSpacingin browser and SSR text measurements. Spacing is converted to numbers once (resolveSpacing, px and em) and shared by the canvas, span, and SSR paths.measureTextignores it.word-spacingthrough the text renderer and apply both spacing values as CSS lengths.nullspacing values are skipped, as onmain.This keeps the change focused on the core
Textpipeline; business-component-specific style props and optional measurement caching are intentionally outside this PR.Validation
Run at ae10e84 in a Linux Codespace with Node 20.20.2 after
npm install:npx tsc --noEmit -p tsconfig.json: exit 0npx vitest --run __tests__/unit/utils/measure-text.ssr.test.ts __tests__/unit/utils/measure-text.test.ts __tests__/unit/utils/text.test.ts: 30 passednpm test: 91 test files, 771 tests passednpm run build: exit 0npm run lint:root: exit 0TypeError: Cannot read properties of null (reading 'trim')and passes at ae10e84.Not run:
siteinstall,build:site, andlint:site; this PR does not touchsite/.