The rich-text field stores markdown content with a WYSIWYG interface, supporting features like text formatting, links, media and custom elements (if used with mdx).

Type Definition

For additional properties common to all Field types, check the Field type definition.

The templates property is for mdx support.

"children" should not be used as the name for rich-text fields, as it conflicts with other parts of the application.

Toolbar Customisation

The toolbarOverride property controls what options appear in the rich-text editor.

It can be set to any subset of:

toolbarOverride: [
  'heading',
  'link',
  'image',
  'quote',
  'ul',
  'ol',
  'bold',
  'italic',
  'code',
  'codeBlock',
  'mermaid',
  'table',
  'raw',
  'embed',
];

Line Breaks

To insert a line break into an empty line in TinaCMS Rich Text:

• Press Shift + Enter to create the line break
• If the line break is not followed by a line with text, it will render as a \ in the final output.
  This can be fixed by deleting and re-creating the line
  Ensure that the line break precedes text content to avoid this issue

This behavior is not part of the standard Markdown specification but is specific to TinaCMS Rich Text implementation.

Markdown Tables

Check out this video on how to use Table in rich text editor:

Examples

Tina will generate the appropriate component depending on the configuration provided.

Simple field

{
  label: "Body",
  name: "body",
  isBody: true,
  type: "rich-text",
}

Simple field with toolbar override

Change what you want to display and the order it is displayed in the editor

{
  label: "Body",
  name: "body",
  isBody: true,
  type: "rich-text",
  toolbarOverride: ["heading","bold", "italic"],
}

Field with custom component (mdx)

Custom components can be embedded in rich-text blocks.

{
  label: "Body",
  name: "body",
  isBody: true,
  type: "rich-text",
  templates: [
    {
      name: "Cta",
      label: "Cta",
      fields: [{
        name: "heading",
        label: "Heading",
        type: "string"
      }
    ]}
  ]
}

This is some text

<Cta heading="Welcome" />

{
  "data": {
    "post": {
      "body": {
        "type": "root",
          {
            "type": "p",
            "children": [
              {
                "type": "text",
                "text": "This is some text"
              }
            ]
          },
          {
            "type": "mdxJsxFlowElement",
            "name": "Cta",
            "props": {
              "heading": "Welcome"
            }
          }
        ]
      }
    }
  }
}

Collection with default rich-text value

To set a default value for a rich-text field, the entire AST tree should be specified as in the example below.

Recommended approach is to fill in your data, then console.log the CMS API return value for the related field.

Then copy it from there into the collections defaultItem property.

{
  label: 'Blog Posts',
  name: 'post',
  path: 'content/posts',
  defaultItem: () => {
    return {
      title: 'My New Post',
      body: {
        type: 'root',
        children: [
          {
            type: 'p',
            children: [
              {
                type: 'text',
                text: 'Default Text',
              },
            ],
          },
        ],
      },
    }
  },
  fields: [
    {
      type: 'string',
      label: 'Title',
      name: 'title',
    },
    {
      type: 'string',
      label: 'Post Body',
      name: 'body',
      isBody: true,
    },
  ],
}