feat(bio-editor): live word counter with target/warning/error zones#197
Conversation
Bios should land around 80 words. Show the author live feedback as
they type so they can target the right length without guessing or
re-saving to see translation behaviour.
Color zones (boundaries inclusive on the green side):
count zone colour
───────────────────── ────── ──────
count < 60 red text-red-700
60 ≤ count < 70 orange text-orange-600
70 ≤ count ≤ 90 green text-green-700
90 < count ≤ 100 orange text-orange-600
count > 100 red text-red-700
Implementation:
* countWords() is a plain whitespace split — sufficient for the 6
European languages we support. CJK / Arabic would need
Intl.Segmenter, deferred until those locales actually exist.
* wordCountZone() returns 'green' | 'orange' | 'red' for the styling.
* Targets are file-level consts (BIO_TARGET_MIN/MAX,
BIO_WARNING_MIN/MAX) so tweaks land in one place.
* Sync the count on three events: onCreate (initial paint),
onUpdate (live edits), and after the language-switch
setContent({ emitUpdate: false }) call which deliberately
suppresses onUpdate to avoid flipping isDirty.
* aria-live="polite" on the count span so a screen reader announces
the new count without yanking focus.
i18n: wordCount uses ICU plural so each locale can pick singular
vs plural correctly (no awkward "1 words"). wordCountTarget shows
the green-zone bounds verbatim ("target 70-90 words"). Seeded
translations for it/es/fr/pt/de; Weblate will refine.
Test plan: no automated coverage (component is purely visual);
manual smoke is opening /my-bio, typing into the editor, and
watching the counter live-update through the colour zones.
|
Warning Review limit reached
More reviews will be available in 5 minutes and 26 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (7)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Up to standards ✅🟢 Issues
|
| Metric | Results |
|---|---|
| Complexity | 9 |
| Duplication | 0 |
NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.
1 participant
Summary
<60or>100, orange for60–69or91–100, green for70–90. The 70/90 boundaries belong to green so those numbers read as "good", not "borderline".wordCount) so locales pick singular vs plural correctly. Seeded translations for it / es / fr / pt / de — Weblate will refine.Test plan
npm run lint— clean.npm run build— clean./my-bio:setContent({ emitUpdate: false })path).Notes
countWords()is a plain whitespace split — fine for our 6 European languages. CJK / Arabic would needIntl.Segmenter, deferred until those locales actually exist.aria-live="polite"on the count span so screen readers announce changes without yanking focus.gh workflow run deploy.ymldefaults to staging is fine;-f environment=productionto ship to prod).🤖 Generated with Claude Code