Question about handling a rich text field in the createOrReplace function with the Sanity JavaScript client.

3 replies
Last updated: Mar 20, 2024
Hi All, New to Sanity, but it’s pretty quick to pick up. Maybe a quick question, but with the Javascript client I am trying to use
createOrReplace
where one field in my schema is a rich text field
defineField({
      name: "description",
      title: "Description",
      type: 'array', 
      of: [{type: 'block'}]
    }),
When I try inserting just a string, I of course see an error in Studio that the field is an array. I can’t find any docs on how to handle this kind of field in the create. Any help?
AI Update

When working with Portable Text (rich text) fields in Sanity using the JavaScript client's createOrReplace method, you need to provide data in the proper Portable Text format - an array of block objects, not just a plain string.

Here's the structure you need for a basic Portable Text field:

await client.createOrReplace({
  _id: 'your-document-id',
  _type: 'yourDocumentType',
  description: [
    {
      _type: 'block',
      _key: 'uniqueKey1', // Generate a unique key
      style: 'normal',
      children: [
        {
          _type: 'span',
          _key: 'uniqueKey2',
          text: 'Your text content goes here',
          marks: []
        }
      ],
      markDefs: []
    }
  ]
})

The key components of a Portable Text block are:

  • _type: 'block' - Identifies this as a text block
  • _key - A unique identifier for the block (you can generate these with a library like nanoid or just use timestamps)
  • style - The block style (e.g., 'normal', 'h1', 'h2', 'blockquote')
  • children - An array of text spans
  • markDefs - Definitions for annotations (like links)

For a helper function to convert plain text to Portable Text format:

function textToPortableText(text) {
  return [
    {
      _type: 'block',
      _key: Date.now().toString(),
      style: 'normal',
      children: [
        {
          _type: 'span',
          _key: (Date.now() + 1).toString(),
          text: text,
          marks: []
        }
      ],
      markDefs: []
    }
  ]
}

// Usage
await client.createOrReplace({
  _id: 'doc-id',
  _type: 'yourType',
  description: textToPortableText('Your content here')
})

For more complex scenarios with multiple paragraphs or formatting, check out the @sanity/block-tools package which can help convert HTML or other formats to Portable Text.

You can read more about Portable Text structure in the Portable Text specification and the Block Content guide.

Hi, I have an example for the InitialValue, but you can use it for creating a value too I think:

https://sanity-io-land.slack.com/archives/C9Z7RC3V1/p1710828491049279
Depending on what you’re trying to input, this package may be helpful to transform it to blocks.
Thanks for the info. That package looks good, but I ended up figuring it out from that other post by looking at the object that comes back in the Visualizer. I might switch to using package though as it should simplify things.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?