Skip to content

fix(TextLoop): prevent separator duplication causing overlap (#1062) - #1065

Open
MauryaQbit wants to merge 1 commit into
DavidHDev:mainfrom
MauryaQbit:feat/fix-textloop-separator-1062
Open

fix(TextLoop): prevent separator duplication causing overlap (#1062)#1065
MauryaQbit wants to merge 1 commit into
DavidHDev:mainfrom
MauryaQbit:feat/fix-textloop-separator-1062

Conversation

@MauryaQbit

Copy link
Copy Markdown

Fixes #1062

Bug

TextLoop default props used text='React [star] Bits' with separator='[star]'. After uppercase the repeated unit became 'REACT [star] BITS[NBSP][star][NBSP]', i.e. two separators per repetition. The duplicated glyph breaks the textLength / lengthAdjust fit on the SVG path in stricter browsers (Firefox, wave shape), so a [star] can land on top of a letter (usually R of REACT).

Fix

  • Change default text from 'React [star] Bits' to 'React Bits' in all 4 variants, demo DEFAULT_PROPS/prop table, and usage example.
  • Harden unit construction: strip any separator occurrences from base, collapse whitespace, trim, then append exactly one '[NBSP][sep][NBSP]' gap. Legacy text containing the separator now converges to the same correct output. Empty separator still falls back to 3x NBSP.
  • Applied to: src/content/.../TextLoop.jsx, src/tailwind/.../TextLoop.jsx, src/ts-default/.../TextLoop.tsx, src/ts-tailwind/.../TextLoop.tsx, plus TextLoopDemo.jsx and textLoopCode.js.

Review notes

  • No API change; default rendering changes from 'REACT [star] BITS [star]' to 'REACT BITS [star]' per repetition (single separator, even rhythm).
  • Custom text containing the separator is sanitized to one separator per unit per component contract ('Glyph placed between each repetition'). Whitespace is collapsed/trimmed to avoid double spacing at the junction.
  • Separator case follows uppercase flag for visual consistency (no-op for glyphs like [star]).
  • public/r registry JSONs intentionally untouched (generated artifacts, local jsrepo build shows only CRLF noise).

Tests

  • Repo has no unit test script (package.json: dev/build/lint/format only).
  • Verified: node unit-logic script 7/7 PASS (default, legacy default, custom with/without sep inside, text==sep, whitespace collapse, empty sep; all produce exactly 1 sep, 0 when empty).
  • Verified: npx tsc --noEmit PASS (0 errors).
  • Verified: npx eslint on changed JS files PASS (0 errors); full npm run lint shows 33 pre-existing errors on main, none in TextLoop files.
  • Verified: npm run registry:build PASS (684 items). Full vite build timed out locally (>120s, large site) with no related errors.

…path

Default text contained the separator glyph, producing two separators per
repetition (REACT [star] BITS [star]) which breaks textLength/lengthAdjust
fitting in Firefox so a separator can land on top of a letter.

- Change default text from 'React [star] Bits' to 'React Bits'
- Sanitize unit construction to strip separator occurrences and collapse
  whitespace, guaranteeing exactly one separator per repetition
- Apply to all 4 variants (JS-CSS, JS-TW, TS-CSS, TS-TW) plus demo and usage example

Fixes DavidHDev#1062
@MauryaQbit

Copy link
Copy Markdown
Author

@rorz can you review this pr

@rorz

rorz commented Sep 5, 2026

Copy link
Copy Markdown
Contributor

Confused as to why I am being mentioned here. This PR / issue has nothing to do with me.

@DavidHDev

Copy link
Copy Markdown
Owner

@rorz probably a mistake, feel free to disregard it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG]: TextLoop separator overlaps letters because default text already contains the separator

3 participants