You might question why the Rich Text renderers do not replace \n with tags as standard - and this is to ensure that the Rich Text renderers remain unopinionated and can be used in applications where tags might not be valid syntax, such as React Native. New lines in the Rich Text response are returned as \n. The SDK has resolved the links inside the Rich Text field for you. Notice how in this example, you don’t need to create a map of the linked assets as with the GraphQL API. Here’s an equivalent example using the data returned from the REST API using the Contentful JavaScript SDK. Here’s an example of how to render a video asset from the GraphQL API response using a switch case alongside an image asset inside the renderNode options of the you’ve fetched your data, look for the contentType property, and render the video with an HTML video tag to the DOM as you need. The key property on the linked assets we need to query to distinguish between images or video is contentType. Here’s an example of a GraphQL query that fetches a blog post with a Rich Text field and its linked asset blocks (which could be images or video files). If you need to display a video file linked in your Rich Text field (rather than an iframe that displays a YouTube or Vimeo embed), here’s how it’s done.Ĭheck out this blog post for more context on rendering linked entries and assets in the Rich Text field, with an example of how to render an iframe as a linked entry using both the GraphQL and REST APIs. Rendering video assets (not iframe embeds) in Rich Text If you’re looking for the Rich Text docs, click here. You can render custom HTML, CSS classes, React components, custom attributes and more! A full list of all Rich Text renderers is available on GitHub. Contentful Rich Text renderers allow you to customise how the JSON response is rendered to your needs. We always recommend using a Rich Text renderer package provided by Contentful to speed up your process when working with the Rich Text response. If you’d like to learn more about how the Rich Text field is powered by a “what you see is what you get” (WYSIWYG) editor that is returned as pure JSON on the API response, check out this blog post. Join us in our Community Slack to stay up to date! This post provides advice on how to level up your Rich Text field game and will be updated regularly with new tips and tricks tailored for the growing Contentful community. As a result, the DevRel team often receives questions about how to get the most out of this field type. Developers in our community are adopting the power of the Rich Text field, because it offers exciting versatility for displaying content in your front-end applications. The flexibility of the Rich Text field makes it my favorite feature in Contentful. A possible use case for this is to replace instances of \n produced by Shift Enter with React elements.How to wield the power of the Rich Text field Each text node is evaluated individually by this callback. The renderText callback is a function that has a single string argument and returns a React node. The renderMark keys should be one of the following MARKS properties as defined in BOLD EMBEDDED_ENTRY (this is different from the BLOCKS.EMBEDDED_ENTRY).The renderNode keys should be one of the following BLOCKS and INLINES properties as defined in DOCUMENT
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |