adobe / adobe/balance-text

Text gets deleted / cut off

Open
#152 1 comment 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
1.4k
Forks
77
PR merge metrics
No merged PRs in 30d

Description

First of all, thanks for open sourcing this!

I'm not sure how, but text is being truncated / deleted from the DOM in my production build. The full text here is supposed to be "The link in bio that increases your conversions". Here is a video that demonstrates as the resize happens, content just straight up gets deleted.

https://user-images.githubusercontent.com/16343600/203141529-46ae3bd8-b68f-48fc-a475-26a00d2aa4cb.mov

Posting this mainly to try to understand **why** content is being straight up deleted.

### Reproduce Scenario (including but not limited to)
I can't reproduce locally, but it happens on my NextJS production build.

#### Steps to Reproduce
Can see it on this page [here](https://usedreamer.com/preview/67868056-17e2-40e5-9d8e-6fe3179aacb1).

Can't reproduce locally however.

#### Platform and Version
Using Next.js

#### Sample Code that illustrates the problem

This is how I'm using it in my NextJS app:

```
import balanceText from 'balance-text'
import React, { useEffect, useRef } from 'react'

export function CustomBalanceText({ children }: { children: React.ReactNode }) {
const spanRef = useRef(null)

useEffect(() => {
const handleResize = () => {
if (spanRef) {
balanceText(spanRef.current)
}
}

handleResize()
window.addEventListener('resize', handleResize)

return () => {
window.removeEventListener('resize', handleResize)
}
}, [spanRef])

return {children}
}

// And using it like:

{content}

```

#### Other Attempts
I've also tried using `react-balance-text` and using the CDN to the same result, leading me to believe there's an issue with this package. It's odd to me that no one has run into this before though, so might be a setup issue.

Contributor guide

Open the contributing guide

Research direction

No repository file or test is named. Start with the balanceText entry point and the supplied CustomBalanceText resize handler, then reproduce the behavior on the linked page or in a Next.js production build; done means the full text remains in the DOM during resize.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nextjs, react
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.