
The screenshot of the blog post content model below shows that the Author field is a Reference field type, which is a link. Here’s the content model that we’ll be working with in this article. For more information on the concept of links in Contentful, visit the documentation. You can liken this to working with relational databases, where you would define one to one or one to many relationships within your data structures or models.


Entries in Contentful can contain link fields that point to other assets or entries, and those entries can link to other assets or entries, and so on. Links are Contentful’s way of modelling relationships between content types and entries. If you’re looking for information on how to render linked assets and entries returned as part of the Contentful Rich Text field response using REST or GraphQL in JavaScript, check out this post. It’s no secret that those of you who tuned in to my Twitch streams after I had started at Contentful saw me struggle with the concept of links as well! So, I set out to explore and investigate the inner workings of the Contentful REST API and GraphQL API in terms of linking assets and entries on a content type in order to understand how we can render links inside Contentful Rich Text fields. CodeMirror class.The most frequently asked questions in DevRel when I started with Contentful were about how to display links or linked entries and assets inside the Contentful Rich Text field on the front end. Use this to style the CodeMirror instance, using the.

description (short text): Just a description of what the settings should apply to, for display as the title of the entry in the list of content when browsing.You can name the fields whatever you like.) (Field IDs are provided - these need to be identical, since the extension will search for these IDs. Settings to configure the editor are stored in an entry, using a type called "Extension Settings." The type should have an id of extensionSettings, and contain the following fields: Multiple fields on multiple types can use the same Extension Settings, allowing you to centrally-control the settings for a particular type of editor scenario, regardless of where or how many times it's used in your content model. If it finds a matching entry, it will configure itself based on the settings contained within that entry. When the UI extension loads, it will search for an "Extension Settings" entry with a value in the "Applies To" field which matches the "typeName/fieldName" of the field for which it's loading.For example, if you have a content type called "HTML File" with a field called "body", you might enter "htmlFile/body" as one value in the "Applies To" field. Enter "typeName/fieldName" as one value in the "Applies To" field.Create an entry of the "Extension Settings" content type (explained further below).Unconfigured, it will simply render a CodeMirror instance using the "htmlmixed" mode. Upload the extension and enable it on a "Text" field (example of extension.json provided below).These two fields use the same UI extension, the settings simply vary from field to field and type to type. In another instance (on the same type or on another), it can be used with YAML highlighting, no line-numbering, and completely different styling. The editor instance is generic by default, but can be configured from a Contentful entry, so the editor settings are stored as content which lets you re-use the UI extension on multiple field with different settings.įor example: on one field, the editor can be used with HTML syntax highlighting and line-numbering.

Use with care, and please send pull requests.Ī UI extension for Contentful that provides a content-configured Code Mirror instance. Until this notice is removed, understand that this has been tested under very limited, controlled conditions.
