Embeds within Structured/Rich Text

Developing with Prismic
1

Is it not possible to drop embed codes directly into the Rich Text field and handle them in the code afterwards? I'm not seeing much in the docs that directly answers this question.

Seems like this would be an extremely sought after feature.

Thanks!

3

Hello @james0r, thanks for joining the community!

You can enable embed values in the Rich Text configuration:

Then you'll be able to see a cloud icon in the document editor to drop URLs:

image
image1838×508 47.2 KB

Afterwards, you'll be able to handle the Rich Text content with a serializer:

4

Thanks for your reply.

I apologize I hadn't been aware of the embed tool in the Rich Text toolbar. I'm using Prismic-Vue plugin and was able to render a Youtube embed just fine, but when I went to embed a CodePen from CodePen.io which renders fine on my Medium posts, Prismic shows only null as content in my GraphQL queries.

At first I thought this was a rendering issue with my app, but while Prismic is just returning null for my rich-text field, it doesn't seem there is anything i can do to render the rich-text field with this oEmbed.

Has Prismic encountered any problems with CodePen embeds from other users?

Thanks!

1 Like
5

We haven't had any similar cases. If you want you can share the URL of the embed with us so we can run a test on our end.

6

I created a minimal Custom Type and Document to test this and the guarded url is this

https://jamesauble-com-blog.prismic.io/documents~b=working&c=published&l=en-us/YhaH7xEAACYA207W/

and this is what I get from my GraphQL query

image
image2110×646 40.5 KB

This is how the embed appears in the document creation page in the Prismic admin

image
image2152×508 24.2 KB

There's no front end link as there is nothing to render.

7

I see. Can you please send us the link you're pasting in the field so we can test it?
Thanks

8

I've tried several but this is the one used in the minimal test:

https://codepen.io/James0r/pen/VwrbKqv

9

I've managed to reproduce the error. I'll log in to the backlog and we'll update this same thread whenever there's news.

Thanks

1 Like
12

In the meantime is there a way I can drop iframes into a rich text field? Currently i'm having to use a work around scraping the page for a shortcode and replace it with an iframe which is seeming pretty unreliable and hacky.

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
15

Thanks for sharing your workaround @james0r it is highly appreciated!