📆 Don't miss our Sanity Showcase virtual meetup on March 20th!

Understanding how HTML is integrated into Portable Text editor

5 replies
Last updated: Sep 23, 2021
Hi, I’m having an issue with this block:
 {
        "_key": "5vl1nzex72tktwgg1h4",
        "_type": "block",
        "children": [
            {
                "_key": "i8pefvhbtfktwgg1h4",
                "_type": "span",
                "marks": [],
                "text": "<p><span style=\"text-decoration: underline;\">A cult favorite, our Weekender is spacious enough for a long weekend or for days spent dreaming of one.</span></p>\n<p><em>Going the distance? Smart straps slip over the trolley of your carry-on for speedy getaways, and a removable woven shoulder strap offers hands-free flexibility. </em></p>\n<p><em><strong><span style=\"text-decoration: underline;\">Featuring leather accents that match our signature Ecocraft Canvas, made from 12 upcycled plastic water bottles, the Weekender is a natural companion when the weekend arrives or your flight out of town is ready for boarding.</span></strong></em></p>\n<p><strong>Example bullet point:</strong></p>\n<ul>\n<li><strong>1</strong></li>\n<li><strong>2</strong></li>\n<li><strong>3</strong></li>\n<li><strong>4</strong></li>\n</ul>\n<p><strong>Example Numbered points</strong>:</p>\n<ol>\n<li>bullet</li>\n<li>bullet</li>\n<li>bullet</li>\n<li>bullet</li>\n</ol>\n<p>Dimensions: 15\" x 8\" x 15\"<br><strong>Meets TSA carry-on requirements</strong></p>\n<p> </p>\n<p> </p>\n<p> </p>\n<p> </p>\n<p> </p>\n<p> </p>"
            }
        ],
        "markDefs": []
    }
I want to render the html as html not as text. When I try to create my own serializer I get a strange array that includes text and objects.
Sep 23, 2021, 8:26 AM
Help me understand your use case: Is this HTML just pasted directly into the Portable Text editor?
Sep 23, 2021, 8:29 AM
it’s actually substituted in our code, but I believe the use case would be the same if you paste it in the editor
Sep 23, 2021, 8:51 AM
So how does the HTML come into the PT-array?
Sep 23, 2021, 8:53 AM
key gets sent down and we then replace it for this value that we pull from elsewhere
Sep 23, 2021, 10:29 AM
Sorry, just trying to understand further (if you have code I can look at, that would be helpful): So your editors puts in a key or something, and then you match and replace the
text
value in a middle-layer somewhere?
Sep 23, 2021, 11:58 AM

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?

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
Examples of customized dashboards/admin pages and the queryable feature of Portable Text.May 1, 2020
Tips for localizing the rich text editor in Sanity.io using a custom localeBlock type.May 14, 2020
Hello all! I’m trying to render a code block in a Portable Text Block, followed the instructions to add the serializer and...Feb 3, 2021
is there a good solution to center or right align text in the richtext editor?Dec 3, 2020
How to import PortableText in Vue.jsApr 8, 2020
Seeking help to generate a table of contents for a blog post using portable text and block-content-to-react.Jul 1, 2020
Is there an out-of-the-box equivalent of ACF flexible content field in Sanity?Jul 5, 2020
Changing a string field to a text field in Sanity.ioApr 23, 2020
Issue with serializer not applying styles to list itemsApr 14, 2020
Issue with creating a custom annotation in Portable Text in JavaScript.May 7, 2020

Related contributions

Turbo Start Sanity
- Template

The battle-tested Sanity template that powers Roboto Studio's websites

Go to Turbo Start Sanity

Schema UI - Next.js Sanity Starter
- Template

A Next.js starter template with Next.js 15, Tailwind CSS, shadcn/ui, and Sanity CMS with Live Editing. Get production-ready React components with matching Sanity schemas and queries. Build dynamic pages faster while keeping full control over customization.

Serge Ovcharenko
Go to Schema UI - Next.js Sanity Starter

The Swaddle
- Made with Sanity

A new brand identity to represent a more mature company, to signify The Swaddle’s evolution from publisher to production house, combined with an easier to navigate platform that can surface multiple content types - drawing readers through The Swaddle’s content offering.

Nightjar
Go to The Swaddle