Blocks · Draftail

Blocks provide structure to the content. They do not overlap – no content can be both a paragraph and a heading.

Built-in blocks

To use built-in blocks, simply use their predefined type.

import { BLOCK_TYPE } from 'draftail';

blockTypes={[
  {
    type: BLOCK_TYPE.BLOCKQUOTE,
  },
]}

Built-in blocks come with default labels or icons, styles, as well as an english description and often keyboard shortcuts.

Simple blocks are very easy to create. Add a new block type to blockTypes. Here is an example, creating a "Tiny text" block:

blockTypes={[
    {
        type: 'tiny-text',
        label: 'Tiny',
    },
]}

You may also use CSS to style the block, via the Draftail-block--tiny-text class:

.Draftail-block--tiny-text {
  font-size: 0.7625rem;
  font-style: italic;
}

More advanced blocks, requiring custom React components, aren't supported at the moment. If you need this, feel free to create an issue.

With a live editor,