HTML escaped when using asHTML() for rich text field

Developing with Prismic
1

I am attempting to use Prismic with Astro, and within a template to render a rich text field. using @prismicio/helpers and .asHTML(). However, what is happening is that the html tags in the output are escaped, so they are shown in the browser, instead of actually rendering them as HTML.

For instance, in my data object, I have this field

  text_item_1: [
    { type: 'heading3', text: 'Our Clients', spans: [Array] },
    {
      type: 'paragraph',
      text: 'We  work with Manufacturers, Fabricators, Installers, Inventors, and  Machine Shops who need a better laser mark, shorter lead times, and  cost-effective pricing.',
      spans: []
    },
    { type: 'paragraph', text: ' ', spans: [] },
    {
      type: 'paragraph',
      text: 'For these organizations, we are  a reasonably priced, efficient, and high-quality operation that can  guarantee an exceptional mark on various products and material types.',
      spans: []
    }
  ],

which is displayed in the browser as

<h3><strong>Our Clients</strong></h3><p>We work with Manufacturers, Fabricators, Installers, Inventors, and Machine Shops who need a better laser mark, shorter lead times, and cost-effective pricing.</p><p> </p><p>For these organizations, we are a reasonably priced, efficient, and high-quality operation that can guarantee an exceptional mark on various products and material types.</p>

and I'm using this code in the code fence in the component:

import * as prismicH from '@prismicio/helpers';
import {getFrontPage} from '../prismic.js';

const fp = await getFrontPage();
const data = fp.results[0].data;

const textItem1 = prismicH.asHTML(data.text_item_1);

per the docs. Am I using .asHTML() properly? Why are the tags being escaped? I don't have any links in my field, so I don't need to pass it a link resolver.

3

Hello @steve1

Thanks for reaching out to us.

prismicH.asHTML(field[, linkResolver[, htmlSerializer]]) takes a Rich Text or Title field from the Prismic API, an optional Link Resolver function, and an optional HTML Serializer function. It returns HTML string.

To return the plain text string, you should use the prismicH.asText helper function. Find more detail here.

Let me know if you have any further questions.

Thanks,
Priyanka

4

Sorry, i guess I wasn't clear; I don't want it returned as a string, I want it returned as HTML. The problem is, when I look at the page source, the HTML tags are escaped which makes them show up in the browser.

How do I avoid that and so it can just be displayed as HTML?

5

@steve1 Okay. I understood your question. Thanks for the clarification.

What framework are you using?

6

I am attempting to use Prismic with Astro.

7

@steve1 I have never tried with Astro. I can try to help you. Could you send me your project source code? You can send it through a private message.

8

OK, code sent via PM.