Troubleshooting Content Link

Copy link to headingThe 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>.

Copy link to headingHow 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>
  );
}

Copy link to headingFormatting 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.

Copy link to headingHow 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}`;
}

Copy link to headingThe 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.

Copy link to headingHow 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>