Blocks Specification

Blocks is a tree-structured data model that is able to express rich styled text documents. Article contents in Channel Talk Documents are served in Blocks format.
For example,
The document above is represented by following Blocks object:
JSON
Blocks Grammar

Plaintext
-- Block Level Grammar --

Blocks  := [Block]

Block   := | Paragraph
           | CodeBlock
           | UnorderedList
           | OrderedList
           | Heading
           | Callout
           | Blockquote
           | Table
           | Image
           | Video
           | File
           | WebPage
           | Embed
           | Divider

Textual := | Paragraph
           | UnorderedList
           | OrderedList

Inline  := | Emoji
           | Plaintext

Mark    := | Bold
           | Italic
           | Hyperlink
           | Underline
           | Strikethrough
           | InlineCode
           | Color
           | BackgroundColor

-- Block Specification --

Paragraph       := {
                      type: "text"
                      content: [Inline]
                   }

CodeBlock       := {
                      type: "code"
                      language: String | null
                      content: [Plaintext]
                      attrs: {
                        language: String | null
                        caption: Paragraph | null
                      }
                   }

UnorderedList   := {
                     type: "bullets"
                     content: [ListItem]
                   }

OrderedList     := {
                     type: "orderedList"
                     content: [ListItem]
                     attrs: {
                       start: Number | null
                     }
                   }

ListItem        := {
                     type: "listItem"
                     content: [Block]
                   }

Heading         := {
                     type: "heading"
                     content: [Inline]
                     attrs: {
                       level: Number
                     }
                   }

Callout         := {
                     type: "callout"
                     content: [Textual]
                     attrs: {
                       icon: String | null
                       semanticColor: String | null
                     }
                   }

Blockquote      := {
                     type: "blockquote"
                     content: [Textual]
                     attrs: {
                       semanticColor: String | null
                     }
                   }

Table           := {
                     type: "table"
                     content: [TableRow]
                     attrs: {
                       width: String | null
                     }
                   }

TableRow        := {
                     type: "tableRow"
                     content: [TableCell] | [TableHeaderCell]
                   }

TableCell       := {
                     type: "tableCell"
                     content: [Textual]
                     attrs: {
                       width: String | null
                       semanticColor: String | null
                     }
                   }

TableHeaderCell := {
                     type: "tableHeaderCell"
                     content: [Textual]
                     attrs: {
                       width: String | null
                       semanticColor: String | null
                     }
                   }

Image           := {
                     type: "image"
                     attrs: {
                       src: String
                       alt: String | null
                       mime: String
                       width: String | null
                       height: String | null
                       caption: Paragraph | null
                     }
                   }

Video           := {
                     type: "video"
                     attrs: {
                       src: String
                       thumb: String | null
                       mime: String
                       width: String | null
                       height: String | null
                       caption: Paragraph | null
                     }
                   }

File            := {
                     type: "file"
                     attrs: {
                       src: String
                       mime: String
                       name: String | null
                       size: String | null
                     }
                   }

WebPage         := {
                     type: "webPage"
                     attrs: {
                       href: String
                       title: String | null
                       description: String | null
                       imageUrl: String | null
                       favicon: String | null
                       name: String | null
                       caption: Paragraph | null
                     }
                   }

Embed           := {
                     type: "embed"
                     attrs: {
                       src: String
                       mime: String | null
                       caption: Paragraph | null
                       width: String | null
                       height: String | null
                     }
                   }
                   
Divider         := {
                     type: "divider"
                   }


-- Inline Specification --

Emoji     := {
               type: "emoji"
               attrs: {
                 name: String
               }
               marks: [Mark] | null
             }

PlainText := {
               type: "plain"
               attrs: {
                 text: String
               }
               marks: [Mark] | null
             }

-- Mark Specification --

Bold            := {
                     type: "bold"
                   }

Italic          := {
                     type: "italic"
                   }

Hyperlink       := {
                     type: "hyperlink"
                     attrs: {
                       href: String
                     }
                   }

Underline       := {
                     type: "underline"
                   }

Strikethrough   := {
                     type: "strikethrough"
                   }

InlineCode      := {
                     type: "inlineCode"
                     attrs: {
                       semanticColor: String | null
                     }
                   }

Color           := {
                     type: "color"
                     attrs: {
                       semanticColor: String | null
                     }
                   }

BackgroundColor := {
                     type: "backgroundColor"
                     attrs: {
                       semanticColor: String | null
                     }
                   }