Inline styles

Inline styles provide inline formatting for rich text. They can overlap: text can be both bold and italic.

Built-in styles

All you need to do is to use the predefined type for the block, via an object in inlineStyles:

import { INLINE_STYLE } from 'draftail';

inlineStyles={[
  {
    type: INLINE_STYLE.BOLD,
  },
]}

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

Custom styles

Apart from a type, custom inline styles only require a style prop, defining which CSS properties to apply when the format is active.

Here is a basic example:

inlineStyles={[
    {
        label: 'Redacted',
        type: 'REDACTED',
        style: {
            backgroundColor: 'currentcolor',
        },
    },
]}

It is also possible to override the styling of predefined inline styles:

inlineStyles={[
    {
        label: 'Bold',
        type: INLINE_STYLE.BOLD,
        style: {
            fontWeight: 'bold',
            textShadow: '1px 1px 1px black',
        },
    },
]}

All other props are optional, but styles need to have either a label or icon in order to appear in the toolbar.

Examples

Those examples would render as: