We're transitioning Studio from Beta to Early Availability

You are currently reading the Studio Docs. If you were looking for the Classic Docs check here

Embedded types

Assets can be embedded into the Rich Text Field Type via a configuration setting. On the API side, we create a union relation that references the selected model.

#Enable embedding

The first thing you need to do is configure your Rich Text field to allow embeds, and select Asset as embeddable model.

You will do this in the UI by navigating to your Schema, selecting the model your Rich Text field is in, and selecting the Enable embedding checkbox:

Rich Text OptionsRich Text Options

#Create union relation

With Rich Text Embeds enabled, your API will have some new types added. The name of your field will be now a type appended by RichText, and RichTextEmbeddedTypes inside your schema.

For example, if you had the model Post and field content, the types generates would be PostContentRichText, and PostContentRichTextEmbeddedTypes respectively.

The PostContentRichText type will look like the following:

type RichText {
json: RichTextAST!
html: String!
markdown: String!
text: String!
references: [PostContentRichTextEmbeddedTypes!]!

The references field will be a union relation to the types you embedded, for example Asset.

You should use the references field when querying JSON to get the URL - with any transformations, handle, or any of the Asset fields.

The HTML response will return gcms-embed-type and gcms-embed-id data attributes for the embedded types. A block embed is returned as div and an inline embed as span with a data-gcms-embed-inline attribute. A link embed is returned as an a-tag with a data-gcms-embed-id and data-gcms-embed-type attribute.

Hygraph uses Slate 0.5 for RichTextAST.

#Additional resources

  • Rich Text field: Learn more about Hygraph's Rich Text field. The article covers Rich Text data, Rich Text embeds, and using your JSON representation of RTE for customization.
  • Styling Rich Text with TailwindCSS: Detailed tutorial on how to use the JSON representation from the RTE to create custom elements for each text-based element of Rich Text.
  • Introducing the Hygraph React Rich Text Renderer: Blog post on how to render Hygraph documents using Rich Text in your application easily using our available packages.
  • Rich Text editor UI guide: Guide on how to use Hygraph's Rich Text editor in the content editor of your project.