In preview mode, strings from sanity are coming back with invisible characters

[karltaylor]

Describe the bug

I'm just pulling this #5782 discussion into issues as we are seeing this more and more with more strings as we're developing for production and would love to get some light shed on the situation.

We're using sanity strings as slugs to determine layout or render a specific component, during development and production builds this is fine, for example:

type MediaType = "video" | "image"
// e.g data.mediaType = "video"
console.log(data.mediaType === "video") // true

However, we have discovered that when in live preview mode, the console log was false. After pulling our hair out, we discovered mediaType in preview mode has invisible characters in, breaking UI.

This image is me copying the above value in the object, and pasting it back into the console, revealing the invisible characters.

We are now resorting to doing all checks using include, e.g

/**
 * Unfortunately, Sanity Preview adds some strange invisible characters which means we can't use `orientation` directly.
 * This is because if "vertical" is passed, it will be "vertical••••••••••" or something similar.
 * Thus - we can't check if they're equal, so we must use this include logic instead.
 * - Here's more info https://github.com/sanity-io/sanity/discussions/5782#discussioncomment-8721540
 */
export const getOrientation = (orientation: string) => {
  if (orientation.includes("horizontal")) {
    return "horizontal";
  } else {
    return "vertical";
  }
};

To Reproduce

Steps to reproduce the behavior:

1. Create Sanity Project
2. Implement LivePreview
3. Go onto LivePreviewMode and check the string value.

If required, I can setup a repo.

Expected behavior

Strings to not return invisible characters

Screenshots

See above

Which versions of Sanity are you using?

Run sanity versions in the terminal and copy-paste the result here.

@sanity/cli (global)  3.32.0 (latest: 3.36.4)

What operating system are you using?

MacOS Sonoma 14.3 (23D56)

Which versions of Node.js / npm are you running?

Run npm -v && node -v in the terminal and copy-paste the result here.

node: v18.17.1
pnpm: 8.15.6

Additional context

Using "turbo": "^1.13.2"

Security issue?

At this time I do not believe this is a security issue.

[stipsan]

The hidden characters are part of the design when using Visual Editing and is how the Content Source Maps are transferred to the DOM and then picked up by the sanity/presentation tool.

You can fix this by either:

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

console.log(vercelStegaCleanAll(data.mediaType) === "video") // true

Or by adjusting the createClient's stega option:

import {createClient} from '@sanity/client'

const client = createClient({
  stega: {
    filter: props => {
      if(props.sourcePath.includes('mediaType') || props.resultPath.includes('mediaType')) {
        return false // never have hidden characters in this field as it's used for logic, it's not in itself content that should have a clickable overlay in preview mode
      }
      return props.filterDefault(props)
    },
    logger: console // enables useful debug output on what content has hidden characters in them and what's skipped
  }
})

More information

[karltaylor]

@stipsan Thank you so much for the explanation! We can stop scratching our heads! 🙏 🙇‍♂️

[stipsan]

@karltaylor Great to hear! We're updating the default filter to catch use cases like yours: sanity-io/client#689 😉

[github-actions]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.