EditorToolbarDivider

The EditorToolbarDivider is a styled element for visually diving a rich text editor toolbar into multiple parts.

Table of contents

• Examples of usage

Examples of usage

SyntaxError: Unexpected token (1:15)
1 : return (import {
                   ^
import {
  EditorToolbar,
  EditorToolbarDivider,
} from '@contentful/forma-36-react-components';

<EditorToolbar>
  <EditorToolbarDivider />
</EditorToolbar>;
import {
  EditorToolbar,
  EditorToolbarDivider,
} from '@contentful/forma-36-react-components';
<EditorToolbar>
  <EditorToolbarDivider />
</EditorToolbar>;
Hide source

Detailed documentation will be provided soon. For now, please have a look into the storybook for implementation details.

BoldItalicUnderlined
Example button
<React.Fragment>
  <EditorToolbar
      style={{ justifyContent: 'space-between' }}
    >
      <div>
        <EditorToolbarButton
          icon="FormatBold"
          tooltip="Bold"
          label="Bold"
          isActive={false}
        />
        <EditorToolbarButton
          icon="FormatItalic"
          tooltip="Italic"
          label="Italic"
          isActive={false}
        />
        <EditorToolbarButton
          icon="FormatUnderlined"
          tooltip="Underlined"
          label="Underlined"
          isActive={false}
        />
      </div>
      <div>
        <Button size="small" buttonType="muted">
          Example button
        </Button>
      </div>
    </EditorToolbar>
</React.Fragment>
<React.Fragment>
  <EditorToolbar
      style={{ justifyContent: 'space-between' }}
    >
      <div>
        <EditorToolbarButton
          icon="FormatBold"
          tooltip="Bold"
          label="Bold"
          isActive={false}
        />
        <EditorToolbarButton
          icon="FormatItalic"
          tooltip="Italic"
          label="Italic"
          isActive={false}
        />
        <EditorToolbarButton
          icon="FormatUnderlined"
          tooltip="Underlined"
          label="Underlined"
          isActive={false}
        />
      </div>
      <div>
        <Button size="small" buttonType="muted">
          Example button
        </Button>
      </div>
    </EditorToolbar>
</React.Fragment>
Hide source