@lexi-kit/toolbar v0.0.5

Toolbar

The core toolbar component that provides basic formatting buttons that you can use on your own toolbar, please note that you are not required to use this toolbar, it exists only as a convenience component. More complex cases may be better-off building their own toolbar.

Features

• Toolbar - The core toolbar component that provides basic formatting buttons
• ToolbarButton - A button that can be used in the toolbar
• ToolbarFormattingButton - A button that can be used in the toolbar to toggle formatting options
• ToolbarSeparator - A separator that can be used in the toolbar
• useTextColorAction - A hook to apply color styling to the selected text
• useTextFormattingAction - A hook to apply text formatting to the selected text
• useTextFormattingStates - A hook that keeps track of active formatting states for the selected text

Installation

$ npm install @lexi-kit/toolbar
# or
$ yarn add @lexi-kit/toolbar
# or
$ pnpm add @lexi-kit/toolbar

Usage

import React from "react";
import * as Toolbar from "@lexi-kit/toolbar";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";

function MyToolbar() {
  const [editor] = useLexicalComposerContext();
  const onClickRed = useTextColorAction("red", editor);
  return (
    <Toolbar.Root>
      <Toolbar.Button
        onClick={() => {
          // Do something
          alert("Clicked!");
        }}
      >
        <ClickIcon />
        Click me
      </Toolbar.Button>
      <Toolbar.Button
        onClick={onClickRed}
      >
        Red text
      </Toolbar.Button>
      <Toolbar.Separator />
      <Toolbar.FormattingButton
        format="bold"
      >
        <BoldIcon />
      </Toolbar.FormattingButton>
      <Toolbar.FormattingButton
        format="italic"
      >
        <ItalicIcon />
      </Toolbar.FormattingButton>
      <Toolbar.FormattingButton
        format="underline"
      >
        <UnderlineIcon />
      </Toolbar.FormattingButton>

    </Toolbar.Root>
  );
}

API

Toolbar.Root

The root component of the toolbar, it should be used as a wrapper for all toolbar components.

<Toolbar.Root>
  <Toolbar.Button>Click me</Toolbar.Button>
</Toolbar.Root>

Toolbar.Button

A button that can be used in the toolbar. It's just a regular button that inherits the theme from the toolbar.

<Toolbar.Button
  onClick={() => {
    // Do something
    alert('Clicked!')
  }}
>
    Click me
</Toolbar.Button>

Toolbar.FormattingButton

A button that can be used in the toolbar to toggle formatting options.

<Toolbar.FormattingButton
  format="bold"
  icon={<BoldIcon />}
/>

Accepted formatting states are:

• bold
• underline
• strikethrough
• italic
• highlight
• code
• subscript
• superscript

Toolbar.Separator

A separator that can be used in the toolbar.

Styling has to be done manually.

<Toolbar.Separator/>

useTextColorAction

A hook to apply color styling to the selected text.

const onClickRed = useTextColorAction('red', editor)
// ...
<Toolbar.Button
  onClick={onClickRed}
>
    Red text
</Toolbar.Button>

useTextFormattingAction

A hook to apply text formatting to the selected text.

This hook exposes the behavior of the Toolbar.FormattingButton component. so you can use it to create your own custom formatting buttons.

const onClickBold = useTextFormattingAction('bold', editor)
// ...
<Toolbar.Button
  onClick={onClickBold}
>
    Bold text
</Toolbar.Button>

useTextFormattingStates

A hook that keeps track of active formatting states for the selected text.

This hook is also part of the behavior of the Toolbar.FormattingButton component.

const [formattingStates, activeFormattingStates] = useTextFormattingStates(editor)
console.log(formattingStates) // isBold: true, isItalic: false, isUnderline: true
console.log(activeFormattingStates) // ['bold', 'underline']