previewDrafts perspective in fetch returns strings with tons of white-space, works in published perspective

[rfohlin]

Describe the bug

I have setup a project to support the Presentation mode in Sanity, I have pretty much just copied the sample code available here: Visual Editing with Next.js App Router and Sanity Studio
. When I ran the Presentation mode in Sanity I noticed that my app didn't look at all the way it did when I did not run the app with draftMode enabled. After a lot of debugging I noticed that the strings returned from the query had tons of white space added at the end of them when the query was run in previewDrafts perspective but when it runs in the published perspective it works fine. I am using [email protected] and [email protected]

To Reproduce

Steps to reproduce the behavior:

1. Setup a Next/Sanity environment following this guide: Visual Editing with Next.js App Router and Sanity Studio
   
2. Log the data returned from the fetch in any server component and inspect the result.
3. White spaces all over the string fields.

Expected behavior

The strings to be consistent and not have tons of whitespace appended to them.

Screenshots

Which versions of Sanity are you using?
@sanity/cli 3.39.0 (up to date)

What operating system are you using?
Windows 11

Which versions of Node.js / npm are you running?
Node v20.7.0, npm 10.1.0

[rfohlin]

If the stega option is disabled in the fetch-query then the strings are okay but the "click to edit in studio" feature won't work.

[stipsan]

Hi @rfohlin,
The best way to handle this is to use stega.filter to control what fields should never contain stega: https://github.com/sanity-io/client?tab=readme-ov-file#using-visual-editing-with-steganography

We have a default filter setup that handles known cases, such as _type, mediaType, icon, slug and more. But it can't catch everything as everyones setup is different.

From your screenshot I'd configure the filter this way:

const client = createClient({
  // ... projectId, dataset, etc
  stega: {
    logger: console // reports what fields have stega or not, and useful info such as their field path so it's easier to tweak the filter
    filter: props => {
      const endPath = props.sourcePath.at(-1)
      if(endPath === 'headingLevel' || endPath === 'video' || endPath === 'imagePosition') {
        return false
      }
      return props.filterDefault(props)
    }
  }
})

For content that needs to contain stega so it has a click-to-edit overlay, but is also going to be used for logic where the string needs to be clean, then you can use the vercelStegaCleanAll function to strip stega in your components:

import {vercelStegaCleanAll} from '@sanity/client/stega'

function Component(props) {
  if(vercelStegaCleanAll(props.heading).endsWith('V2')) {
  }
}

Stega isn't the only way to add click-to-edit overlays, we have a new feature that isn't documented yet (but will be soon):

import {createDataAttribute} from 'next-sanity'

export default async function PostPage(props) {
  const post = await client.fetch(`*[_type == 'post' && slug.current == $slug][0]{...,"image": {...,"url": image.asset->url}}`, {slug: props.params.slug})
  const dataAttribute = createDataAttribute({
    baseUrl: '/studio',
    id: post._id,
    type: post._type,
  })

  return <article>
    <h1 data-sanity={dataAttribute('heading')}>{data.heading}</h1>
    <Image data-sanity={dataAttribute('image.alt')} src={post.image.url} alt={post.image.alt} />
  </article>
}

Hope this helps 🙌

[Even-MW]

Hi @stipsan, i added the filter for my own case and work nicely. But i can't seem to figure out how to filter it on SVG's. When i enable stega, all my SVG are removed from the site. Any ideas what can be triggering this?

[stipsan]

Hi @stipsan, i added the filter for my own case and work nicely. But i can't seem to figure out how to filter it on SVG's. When i enable stega, all my SVG are removed from the site. Any ideas what can be triggering this?

Hi, could you make a new issue with a repro attached? And we'll get to the bottom of it ☺️

[Even-MW]

Hi @stipsan, i added the filter for my own case and work nicely. But i can't seem to figure out how to filter it on SVG's. When i enable stega, all my SVG are removed from the site. Any ideas what can be triggering this?

Hi, could you make a new issue with a repro attached? And we'll get to the bottom of it ☺️

Its a client privat repo, so not able to do that. But i seem to have managed to fix it with the stegaClean function.