Troubleshooting

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>.

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>
  );
}

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.

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}`;
}

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

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>