👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

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?