Structured Text field type Alpha

General Announcements
1

Hello everyone,

I am a product manager at Contentful, responsible for the Authoring experience, and I would like to share a new feature we’re working on with everyone here.

It is a new field type, called Structured Text (for now), that enables a rich text editor in an entry. It allows a content author to format text in a visual way (WYSIWYG) and also embed linked entries as well.

What can you do with it

As a content editor the available actions are:

  • Applying the following formatting:
    • Bold
    • Underline
    • Italics
    • Heading 1
    • Heading 2
  • Embedding an entry

Future features

In the next months we plan to support more functionality such as:

  • Linking to entries
  • Linking to assets
  • Apply validation to the types of linked entries
  • Add more formatting options
  • And more

As always, this is our initial plan, but the actual deliverables might end up being different.

What does this look like for a developer?

Some of you might already be wondering how these rich text objects, like linked entries, might look like in the response.
As a developer what you receive in the CDA, CMA, CPA is a JSON object describing a tree of nodes where leafs may have a set of marks. These nodes can range from block ones like paragraphs and headings, to inline like hyperlinks.

Here’s also an example response:

"..."
"fields": {
  "structuredContent": {
    "nodeType": "document",
    "content": [
      {
        "nodeType": "paragraph",
        "nodeClass": "block",
        "content": [
          {
            "nodeClass": "text",
            "nodeType": "text",
            "value": "This text is bold",
            "marks": [
              {
                "type": "bold"
              }
            ]
          },
          {
            "nodeClass": "text",
            "nodeType": "text",
            "value": " but this doesn't have any formatting. "
          },
          {
            "nodeClass": "text",
            "nodeType": "text",
            "value": "But if we ask you to "
          },
          {
            "nodeType": "hyperlink",
            "nodeClass": "inline",
            "data": {
              "url": "https://prosemirror.net/docs/guide/#doc",
              "title": "This page explains the inline schema well"
            },
            "content": [
              {
                "nodeClass": "text",
                "nodeType": "text", 
                "value": "click here"
              }
            ]
          },
          {
            "nodeClass": "text",
            "nodeType": "text",
            "value": ", you will see that it's actually a quite simple concept."
          }
        ]
      },
      {
        "nodeType": "paragraph",
        "nodeClass": "block",
        "content": [
          {
            "nodeClass": "text",
            "nodeType": "text",
            "value": "Another cool thing is that you can insert an entry between paragraphs like the following: "
          }
        ]
      },
      {
        "nodeType": "embedded-entry-block",
        "nodeClass": "block",
        "data": {
          "target": {
            "type": "Link",
            "linkType": "Entry",
            "id": "4JJ21pcEI0QSsea20g6K6K"
          }
        }
      },
      {
        "nodeType": "paragraph",
        "nodeClass": "block",
        "content": [
          {
            "nodeClass": "text",
            "nodeType": "text",
            "value": "Cool, right?"
          }
        ]
      }
    ]
  }
}
"..."

How to use this feature

As this is a closed Alpha program I will need your Space/Org ID (whichever you want to enable this feature in) and an email to just send you instructions.
You can give me this information:

Thank you and I’m looking forward to you using this feature and giving us your feedback!

2 Likes
3

Hey Spiros,

We’ve integrated a text editor to give us similar functionality, Summernote. Do you see this as a replacement for that?

S

4

It could have similar functionality but the difference is in the resulting API response, a sample of which you can see here: https://www.contentful.com/developers/docs/tutorials/general/structured-text-field-type-alpha/

Also, in terms of authoring capabilities, you will be able to embed entries, of other content types, within this field. This gives you the possibility to greatly customize your content (these entries could be rendered into Sign Up forms, advertisements, image carousels, sliders, related articles etc).

5

Rich Text * is released!

Read more on how to use it in the documentation page.

* = It’s still the same feature, but renamed

6

What I’d really like is the ability to link to entries and add tables in a single field.

The Text/MD field has tables, but the Rich Text field does not.
The Rich Text field can link to other entries, but the Text/MD field cannot.

I don’t have a strong preference for Rich Text vs. MD, but can one of them get both features?

7

Hey matsuko.

We don’t have any immediate plans to work on Rich Text but when we do get back to it (probably towards the end of the year), Tables are probably the first candidate for improvement.

Thanks.

2 Likes