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 Options

Pro Tip

Rich text embeds need to be enabled per field. You can do this from inside the Field Settings when adding a new, or editing a Rich Text field. Click Enable embedding and select the models that should be embeddable in your Rich text field.

#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.

Query

Response

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.

Block

Inline

Link

Hygraph uses Slate 0.5 for RichTextAST.

If you are programmatically creating content entries with Rich Text, you should use the @graphcms/html-to-slate-ast package.

#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.
Hygraph's Rich Text editor: Hygraph's UI Rich Text field feature walkthrough.
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.