# Troubleshooting Content Link

**Author:** DX Team

---

## The styling of the editable fields is incorrect

If the text on the page is breaking out of its container, it can be resolved by splitting the encoded text out from the original text.

This is not due to the encoded characters themselves. This problem should only present itself if the element sets `letter-spacing` in its CSS or is inside of a `<ReactWrapBalancer>`.

### How to fix

Add the `@vercel/stega` npm package to your project, if it’s not already installed:

`npm i @vercel/stega`

Then identify where the problematic element is rendered in code, for example:

`function MyComponent({ text }) { return <h1>{text}</h1>; }`

This could be rewritten using `@vercel/stega` to avoid any styling issues:

`import { vercelStegaSplit } from '@vercel/stega'; function MyComponent({ text }) { const { cleaned, encoded } = vercelStegaSplit(text); return ( <h1 data-vercel-edit-target> {cleaned} <span style={{ display: 'none' }}>{encoded}</span> </h1> ); }`

## Formatting dates throws an error

If the text on the page is breaking out of its container, it can be resolved by splitting the encoded text out from the original text.

### How to fix

Add the `@vercel/stega` npm package to your project, if it’s not already installed.

`npm i @vercel/stega`

Then identify where the date is formatted in code, for example:

`function formatDate(datestring) { const date = new Date(datestring); return date.nicelyFormatted(); }`

This could be rewritten using `@vercel/stega` to avoid any parsing issues:

``import { vercelStegaSplit } from '@vercel/stega'; function formatDate(datestring) { const { cleaned, encoded } = vercelStegaSplit(datestring); const date = new Date(cleaned); return `${date}${encoded}`; }``

## The wrong element is being highlighted

If the wrong element is highlighted when you start editing, it can be resolved by adding an attribute to the correct element.

### How to fix

For example, if this component highlights the `<h1>` and you want it to highlight the entire `<section>` element:

`<section> <h1>{dynamicTitle}</h1> <div>Hardcoded Tagline</div> </section>`

You could add the `[data-vercel-edit-target]` attribute to the element you expect it to highlight:

`<section data-vercel-edit-target> <h1>{dynamicTitle}</h1> <div>Hardcoded Tagline</div> </section>`

---

[View full KB sitemap](/kb/sitemap.md)