Customized Toolbar with ChakraUI!

[davevilela]

Hello!

First of all, congratulations for the all the effort that has been put into making this incredible toolkit !

Recently, I have been changing my UI stack, and moved away from styled-components because of productivity issues.

I decided to try ChakraUI for the past few months, and for this reason, I would like to style all components and elements of Plate with it.
I've come across many topcis on github about customizing the toolbar, and I spent some hours trying to get my head around how to make this work.

Here's a brief example I have put together, for the few that come across this Post:

• ToolbarMark.jsx

import React from 'react';
import { IconButton } from '@chakra-ui/react';
import {
  getPreventDefaultHandler,
  isMarkActive,
  toggleMark,
} from '@udecode/plate-common';
import {
  useEventEditorId,
  useStoreEditorState,
  PlatePluginOptions,
} from '@udecode/plate-core';

interface ToolbarButtonProps {
  icon: React.ReactElement;
  active?: boolean;
}

type ChakraToolbarMarkProps = Pick<PlatePluginOptions, 'type' | 'clear'> &
  ToolbarButtonProps;

export const ChakraToolbarMark: React.FC<ChakraToolbarMarkProps> = ({
  type,
  clear,
  icon,
  ...props
}) => {
  const editor = useStoreEditorState(useEventEditorId('focus'));

  const onClick = (() =>
    editor
      ? getPreventDefaultHandler(toggleMark, editor, type, clear)
      : undefined)();

  return (
    <IconButton
      isActive={!!editor?.selection && isMarkActive(editor, type)}
      _active={{ bg: 'gray.500' }} // or you can pass down as props if it suits you
      onClick={onClick}
      icon={icon}
      aria-label={type}
      {...props}
    />
  );
};

• Toolbar.jsx

import React from 'react';
import {
  useStoreEditorRef,
  useEventEditorId,
  getPlatePluginType,
  MARK_BOLD,
  MARK_UNDERLINE,
  MARK_ITALIC,
  MARK_STRIKETHROUGH,
  HeadingToolbar,
} from '@udecode/plate';
import { HStack } from '@chakra-ui/layout';
import { ButtonGroup } from '@chakra-ui/react';
import { BiUnderline, BiStrikethrough, BiItalic, BiBold } from 'react-icons/bi';
import { ChakraToolbarMark } from './ToolbarMark';

export const Toolbar = (): JSX.Element => {
  const editor = useStoreEditorRef(useEventEditorId('focus'));

  return (
    <HStack>
      <ButtonGroup size="sm" isAttached variant="ghost">
        <ChakraToolbarMark
          icon={<BiBold />}
          type={getPlatePluginType(editor, MARK_BOLD)}
        />
        <ChakraToolbarMark
          icon={<BiItalic />}
          type={getPlatePluginType(editor, MARK_ITALIC)}
        />
        <ChakraToolbarMark
          icon={<BiStrikethrough />}
          type={getPlatePluginType(editor, MARK_STRIKETHROUGH)}
        />
        <ChakraToolbarMark
          icon={<BiUnderline />}
          type={getPlatePluginType(editor, MARK_UNDERLINE)}
        />
      </ButtonGroup>
    </HStack>
  );
};

Hope this helps someone !

[zbeyens]

Thanks for the snippet! I was thinking to use chakra-ui for dropdown buttons in the toolbar, so we will give a try.