Intro to String (Text) Fields
Play video »
Sorry, no results found for "".
Content modelling > Structured text fields
Structured text fields
Structured Text is a field type that enables authors to create rich text content.
It offers a beautiful, Notion-like editor designed for focus, with slash commands, a full editing toolbar, markdown/keyboard shortcuts, and drag & drop functionality. Forget the mouse, and just start typing;
It allows you to create hyperlinks to other records in your project, and intersperse textual content with custom blocks - which can represent galleries, videos, embeds, call-to-actions, etc.
It stores the content in a safe, semantic, and readable JSON format, representing a tree of well-defined nodes.
Backstory
Everyone hates HTML editors: developers know they produce dirty code, designers fear the introduction of unwanted styling, and editors struggle to use them. Markdown is better for designers, as it allows less freedom for editors from a formatting standpoint (at least until you start inserting HTML code), but it's not user friendly for editors, and it's an inflexible format for developers.
Sure, DatoCMS provides both an HTML and a Markdown editor, because there are situations where they're unavoidable, but often, when a project needs rich-text, it is advisable to use Structured Text fields instead.
Preview of the editor
We designed the Structured Text editor to offer one of the best writing experiences on the market. It supports Slash commands, Markdown shortcuts, and full-screen focus mode. Here's a quick video of it:
For editors, familiarity with various content creation workflows is supported within the Structured Text field. In addition to slash commands, the floating formatting toolbar, and markdown support, the field also offers a full formatting toolbar visible when the field is in an active state.
The toolbar allows for advanced formatting options, as well as complete customisation with custom icons for plugins. Here is a brief look into all the available options to editors.
Customizing the editor
A key aspect of Structured Text is the ability to customize the field so that authors are only exposed to relevant formatting options. For example, you can have fields with only certain header tags or limit the kinds of entries that can be hyperlinked or embedded:
To add custom blocks to the field, follow this short video:
Furthermore, you can enhance the field by adding custom icons into the Structured Text toolbar to interact with plugins and other customizations.
Structured text on the API
Structured Text content is stored as a JSON object. We chose unist as our base format to benefit from its ecosystem of utilities for working with compliant syntax trees.
The dast format clearly specifies:
which nodes are usable within the document;
for each node, which are the possible
childrenthat it can contain;any additional attribute that characterize each node.
Take a look at the DatoCMS Abstract Syntax Tree specs to learn all the details.
Linking records
Structured Text allows hyperlinking DatoCMS records in the flow of text. This allows the following scenarios:
Using custom link functions, like React Router links, to a DatoCMS record.
Rendering a widget such as an image gallery, a product description box, a sign up form, an annotation window, or basically anything else.
The following example demonstrates an hyperlinked record and an inline record:
Embedding blocks
Similarly to Modular Content fields, you can also embed block records into Structured Text.
Blocks and records can be embedded either using slash commands or the toolbar. Here's a demonstration:
Just like with the Modular content field, when a record is deleted, the blocks contained inside its Structured Text fields are also deleted, without leaving orphans in the process.
