Go Behind the Experience to see how Tecovas brings the West to life with Sanity 🤠 July 18th

Adding HTML to a document in Sanity using client.create() function and HTML to Portable Text Field plugin.

24 replies
Last updated: Nov 1, 2021
Does Sanity have any documentations adding HTML to a document via the
client.create()
function?
Oct 29, 2021, 3:15 PM
So we have a route and useres can upload editor based content.When they hit submit we’d like to hit an api (using Nuxt) that would take the data from the form and create a document in Sanity.
Oct 29, 2021, 6:17 PM
Got it. So, basically what you're doing is taking the value of those fields in the form => creating an object that matches the schema of the document in your Content Lake => committing the changes to your Content Lake. You would have to do something like this:

const doc = {
  _id: uuid4(), //I use the uuid package to generate ids for docs. Remember to install/import at the top
  _type: '<your-document-type>',
  title: '<value-of-your-forms-title-field>',
  company: '<value-of-your-forms-company-field>',
  description: <value-of-your-description-field>'
}

client.create(doc).then(res => {console.log('Job was created', document id is ${res._id})}
The tricky part is your description field. I'm assuming that editor on your frontend creates HTML elements, so I suggest you set that field in your schema to an
HTML to Portable Text Field field. That plugin will allow you to pass in your HTML and have an on-the-fly conversion to Portable Text.
Oct 29, 2021, 6:37 PM
yup that makes sense!
Oct 29, 2021, 8:04 PM
user M
shoudl i be using the
block-tools
Oct 29, 2021, 8:04 PM
That package isn't quite ready for public consumption yet, so I'd say stick with your current setup and use the HTML input for now!
Oct 29, 2021, 8:08 PM
That package isn't quite ready for public consumption yet, so I'd say stick with your current setup and use the HTML input for now!
Oct 29, 2021, 8:08 PM
ahh okay
Oct 29, 2021, 8:10 PM
user M
to confirm the approach you’r suggesting is for node.js?
Oct 29, 2021, 8:10 PM
and lastly, are there any docs or examples for this?
Oct 29, 2021, 8:11 PM
Sorry one more, if i understand will the field for schema actually be portable text if we want to create them in the backend as well?
Oct 29, 2021, 8:15 PM
Likely, since this is on your frontend, you'll want to use the JS client and execute the patch script when the form is submitted. There are a few different examples shown in the client documentation here . And yes, the HTML to Portable Text plugin will take in your HTML then store it as Portable Text in your Content Lake.
Oct 29, 2021, 8:18 PM
Likely, since this is on your frontend, you'll want to use the JS client and execute the patch script when the form is submitted. There are a few different examples shown in the client documentation here . And yes, the HTML to Portable Text plugin will take in your HTML then store it as Portable Text in your Content Lake.
Oct 29, 2021, 8:18 PM
ahh okay i can poke around. okay if i ping ya a little later?
Oct 29, 2021, 8:23 PM
Yeah, go for it!
Oct 29, 2021, 8:24 PM
Likely, since this is on your frontend, you'll want to use the JS client and execute the patch script when the form is submitted. There are a few different examples shown in the client documentation here . And yes, the HTML to Portable Text plugin will take in your HTML then store it as Portable Text in your Content Lake.
Oct 29, 2021, 8:18 PM
you’re the best 🙂
Oct 29, 2021, 8:29 PM
🙂
Oct 29, 2021, 8:36 PM
I've been looking for a solution to this too. I tried the HTML to Portable Text Field Plugin but it wasn't working well for me.So I dug into the source of the plugin to find out that there is no big deal.
Jumping from a package to another, it turns out that the plugin
@sanity/block-tools
is well documented enough to provide examples for scripts.If you are running this on node.js, think to read
the doc until the `parseHtml` options where you can provide a node-based DOMParser.
Oct 30, 2021, 4:30 PM
I've been looking for a solution to this too. I tried the HTML to Portable Text Field Plugin but it wasn't working well for me.So I dug into the source of the plugin to find out that there is no big deal.
Jumping from a package to another, it turns out that the plugin
@sanity/block-tools
is well documented enough to provide examples for scripts.If you are running this on node.js, think to read
the doc until the `parseHtml` options where you can provide a node-based DOMParser.
Oct 30, 2021, 4:30 PM
to follow up here (
user M
if you’re interested).
I realized I could use
@sanity/block-tools
on the front-end before I submit the form data. Which worked very easily.At first I thought I needed to do it all on the backend but this is so much easier.
Oct 31, 2021, 11:21 PM
Awesome! Thanks for the update! Do you mind sharing your implementation so I can store it away for future use? 🙂
Nov 1, 2021, 4:43 PM
for ure!
Nov 1, 2021, 4:53 PM
for sure!
Nov 1, 2021, 4:53 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?