Rich-Text Fields

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.

property controls a series of overrides and customisations to the rich-text editor.

Line Breaks

To insert a visible line break in TinaCMS Rich Text (for example, inside a quote), press **Shift + Enter **(soft return) where you want the break.

After saving, check the Markdown. A preserved line break shows up as a standalone \ line:

> Quote text…
> \
> Author name

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

Tables

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

Multi-line cells are not supported because content is serialized as Markdown. Tables only support single-line rows and cells. Use lists or separate fields if you need to represent multiple lines of content.

Column Alignment

The visual editor does not currently support setting column alignment through the toolbar. If you need to align content in a table column, you can do so by switching to Raw Markdown mode and editing the alignment syntax in the table header separator row.

Example — centering the second and third columns:

| Alignment   |  Separator  |    Example |
| :---        |   :---:     |       ---: |
| Left        |   `:---`    |       Left |
| Center      |   `:---:`   |     Center |
| Right       |   `---:`    |      Right |

To learn more about the alignment syntax, refer to the Markdown Extended Syntax

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

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

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,
    },
  ],
}