Using @prismicio/helpers and/or @prismicio/richtext with exported content from Prismic

Developing with Prismic
1

I'm trying to get the HTML string of some exported data with the help of @prismicio/helpers and @prismicio/richtext, but it seems to fail.

For example, I have a StructuredText consisting of a single heading1. When I use prismicH.asHTML with that StructuredText, it renders <h1></h1> without the inner text.

Here is the structured text:

[
    {
      "type": "heading1",
      "content": {
        "text": "Redacted title",
        "spans": [{ "start": 0, "end": 8, "type": "strong" }]
      }
    }
]

Used snippet;

const prismicH = require('@prismicio/helpers');

const data = [
    {
      "type": "heading1",
      "content": {
        "text": "Redacted title",
        "spans": [{ "start": 0, "end": 8, "type": "strong" }]
      }
    }
];
const htmlOutput = prismicH.asHTML(data); // outputs "<h1></h1>"

Actual output (as mentioned in the snippet above):

<h1></h1>

Expected output:

<h1><strong>Redacted</strong> title</h1>

What I have tried so far and realized;

  1. I briefly tried to mimic the logic within @prismicio/react's RichText component, but it did not work so far. Before going further in this scenario, I wanted to ask it here so that I know if this is the direction to go in.
  2. The exported data's structure differs from what's shown in the API browser, which surprised me.
  3. Irrelevant, but I'm keen to understand this; how are we supposed to associate related content to each other? Relation ids are different than the content's grouplang. Only the first 15 characters of these values match each other, and I could not find any documentation on this matter.

More on the second item to emphasize it; what I see on the API browser is as follows;

[
  {
    "type": "heading1",
    "text": "Redacted title",
    "spans": [
      {
        "start": 0,
        "end": 8,
        "type": "strong"
      }
    ]
  }
]

while the exported data is as follows;

[
  {
    "type": "heading1",
    "content": {
      "text": "Redacted title",
      "spans": [
        {
          "start": 0,
          "end": 8,
          "type": "strong"
        }
      ]
    }
  }
]

I see that the content property's value is flattened into its parent, where type becomes a sibling of the text and spans properties. This is where it gets interesting for me. I have the impression that I cannot utilize prismicH.asHTML just because the data structure does not fit. When I try to use prismicH.asHTML with the data from the API browser, it'll just work as I expect, where it outputs <h1><strong>Redacted</strong> title</h1>.

So, I'd like to ask how I can utilize the existing utility/helper functions Prismic node packages provide to transform a structured text (as it's exported from Prismic dashboard) into an HTML string?

3

Hello @barinali, I tried out the same Rich Text configuration you have, a Rich Text with only a Title with a bold formatting option. Then I used this template, and it worked without a problem:

  const testTitle = prismicH.asHTML(article.data.example_title)
  // <H1><strong>This is</strong>a correct response.</H1>

For this test, I used these kit versions:

    "@prismicio/client": "^6.7.3",
    "@prismicio/helpers": "^2.3.9",
    "@prismicio/react": "^2.5.2",

For the API response. Can you show me the query in your API browser?

The only reason you'd find a different response in the playground would be that you are using the outdated /api/v1 version of the endpoint instead of /api/v2. In this case the elements would be nested in a value node, it's not called content, that's what surprises me about your case.

Check out the differences:

Repository's deprecated /api/v1

"example_title": {
   "type": "StructuredText",
   "value": [
      {
         "type": "heading1",
         "text": "This is a correct response",
         "spans": [ … ]
      }
    ]
 },

Repository's current /api/v2

"example_title": [
   {
      "type": "heading1",
      "text": "This is a correct response",
      "spans": [ … ]
   }
],
4

Hello @Pau, I appreciate your reply.

As mentioned in my initial message, the response I get on the API Browser is what works anyway. So, I do not have a problem with what API Browser responds with. My problem is with the export mechanism. When I export the content I have in the repository (content dating from now back to 04/2020), the data structure is in the way you're surprised about.

Regarding the versions of the libraries, I use v6.7.3 of @prismicio/client along with the sidekick libraries (helpers + richtext) it comes with by default.

I believe we could dig deep into this matter if we have this conversation around the export feature. Should I send you the repository name in private so that you can take a look at the dataset (from the export perspective)?

5

Yes, we can do that. I sent you a message. You'll see it in your inbox.

8

At the moment, it is not possible to use the Prismic kit helpers to modify local export job files. The reason for this is that the methods are designed to work with the structure of the Rich Text fields that come from your repository's API response.

In response to your original question, it is impossible to transform an import file into a Rich Text field in HTML. The common way to do this is by using an HTML serializer and directly using the API's content:

The field structure in an export job differs significantly from the API response, probably because the feature is much older than the latest API version. The structure has not been updated because it is not a priority to match with the development kits, especially since Import / Export was created to facilitate processes such as content translation, updating existing documents in bulk, making backups, and in some cases migrating content from one repository to another.