Skip to main content

Toolbar

The toolbar can be added by importing EditorToolbar component from @sparrowengg/twigs-react and adding it to the editor. By default the toolbar contains the following tools:

  • Format tool (headings / paragraph)
  • Bold
  • Italic
  • Underline
  • Unordered List
  • Ordered List
  • Link (Requires <DialogLinkEditor /> to be added)
  • Codeblock
  • Inline code
  • Text align tool
<Editor>
  <EditorToolbar />
</Editor>

Customizing​

Using tools prop​

The tools shown in the toolbar can be customized by passing the tools prop. The prop is an array that can contain the following values: format, bold, italic, underline, unordered-list, ordered-list, link, codeblock, code, text-align; it also supports an object in the following format for custom components:

{
  renderComponent: (props: { editor: LexicalEditor }) => ReactNode;
}

This can be used to change the order of tools or to add custom tools to the toolbar. The editor prop is the instance of the editor, and it can be used to interact with the editor.

Using child components​

Components can be directly added as children to the EditorToolbar component. You can use the default tools by importing them from @sparrowengg/twigs-react.

import {
  Editor,
  EditorToolbar,
  Flex,
  BoldTool,
  ItalicTool,
  Button,
} from "@sparrowengg/twigs-react";
Result
Loading...
Live EditorOpen in playground
<Editor>
  <EditorToolbar>
    <Flex
      justifyContent="space-between"
      css={{
        marginBottom: "$3",
      }}
    >
      <Flex>
        <BoldTool />
        <ItalicTool />
      </Flex>
      <Button>Save</Button>
    </Flex>
  </EditorToolbar>
  <RichEditor placeholder="Start typing" />
</Editor>

You can also add custom components to the default tools by passing a renderButton prop.

Result
Loading...
Live EditorOpen in playground
<Editor>
  <EditorToolbar>
    <Flex
      justifyContent="space-between"
      css={{
        marginBottom: "$3",
      }}
    >
      <Flex>
        <BoldTool
          renderButton={({ onChange, active, editor }) => {
            return (
              <Button
                onClick={() => {
                  onChange();
                }}
                color={active ? "primary" : "default"}
              >
                B
              </Button>
            );
          }}
        />
        <ItalicTool />
      </Flex>
      <Button>Save</Button>
    </Flex>
  </EditorToolbar>
  <RichEditor placeholder="Start typing" />
</Editor>