Invalid property value

[DavithkbY]

When setting the color via react, I get 'invalid property value' in my css and the color is not being set.

Code:

[krokosik]

I have the same issue with HEX values.

[krokosik]

I've tested this on 2.2.1 and 2.2.2 versions. Found a temporary solution using trim()

textColor: ({
  children,
  value,
}: PortableTextMarkComponentProps) => (
  <span
    style={{ color: (value?.value as string | undefined)?.slice(0, 7) }}
  >
    {children}
  </span>
),
highlightColor: ({
  children,
  value,
}: PortableTextMarkComponentProps) => (
  <span
    style={{
      backgroundColor: (value?.value as string | undefined)?.slice(0, 7),
    }}
  >
    {children}
  </span>
),

The content still has these trash whitespaces. Don't know how to fix that, since I've never dealt with Sanity internals.

[krokosik]

Okay this actually needs adding for ALL usages of color values, making this plugin practically unusable as of now :/

[AlyssaKirstine]

@krokosik Hmm feel free to put up a fix for this if you know how to otherwise I will try to take a look at/fix this soon.

[krokosik]

I took a brief look through the code, but could not find the cause. I only have the dirty workaround in my code.

[AlyssaKirstine]

Hi @DavithkbY and @krokosik, I got a chance to look into this and it looks like it's caused from using visual editing in the Sanity studio and having Stega-encoding enabled. You can read the documentation here about this. If you scroll to the bottom of the page, they have a function called stegaClean that you can use to clean the value before using it.

Unfortunately, this isn't something I can do in the plugin itself since the frontend adds in these whitespace characters after receiving the query data.

So @krokosik you could update your code to the following to use this function:

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

textColor: ({
  children,
  value,
}: PortableTextMarkComponentProps) => (
  <span
    style={{ color: stegaClean(value?.value) }}
  >
    {children}
  </span>
),
highlightColor: ({
  children,
  value,
}: PortableTextMarkComponentProps) => (
  <span
    style={{
      backgroundColor: stegaClean(value?.value)
    }}
  >
    {children}
  </span>
),

I'm going to close this issue, but feel free to reach out if you need anything else.

[AlyssaKirstine]

Adding on as well that you can alternatively filter these out when you initialize the Sanity client rather than cleaning them in each instance they're used in.

Here's the code for how to do this:

export default createClient({
    ...config
    stega: {
        enabled: true,
        filter: (props) => {
            if (props.sourcePath.includes('backgroundColor')) return false // filter out simpler color input field
            if (props.sourcePath.includes('content')) return false // filter out portable text field

            return props.filterDefault(props)
        },
    },
})

You would replace backgroundColor and content with the name of the field that uses the simpler color type. For portable text, this needs to be the whole block itself, so whichever field has type: 'block'. For a regular simpler color input field (i.e. type: simplerColor), you would just use the name of that.

When Sanity sees this, they won't add stega-encoding to these fields. There could of course be other drawbacks to doing this, but I thought I'd call out this alternative solution as well!

[krokosik]

Thank you @AlyssaKirstine for looking into this! I really enjoy using this plugin.