Embeds within Structured/Rich Text

Developing with Prismic
13

To anyone reading this and needing to embed a CodePen Iframe before the oembed prismic bug is resolved, here are some steps to render the iframe:

  1. Create a custom label for your StructuredText field like so Example of creating inline code label? - #2 by james0r , except name it something like iframe.
  2. Use a HtmlSerializer callback function to parse this element out to render only the child element (the iframe). Mine looks like this
    HtmlSerializer: function (type, element, content, children) {
      if (element.data?.label === "iframe") {

        return content;
      }

      return null;
    },

This renders the following:

<p>
  <iframe>
</p>

If needed, you can manipulate the output with the HtmlSerializer callback.

1 Like