Skip to main content
Version: 1.14.0

Creating a Toolbar

Here is a simple example of how to create a toolbar. You can see the component files in the code editor under.

note

Currently we do not provide a design system, components or any style utilities in taze. So, you can use any library for styling components. We have used CSS-in-JS library called 🎨 desygna 🎨 in those examples.

import { useMemo } from "react";
import { withReact } from "slate-react";
import { withHistory } from "slate-history";

import { 
  createTazeEditor, 
  Taze,
  TDescendant
} from "@taze-editor/taze-core";

import { 
  createBoldPlugin,
  createItalicPlugin,
  createUnderlinePlugin,
  createStrikethroughPlugin,
  createSuperscriptPlugin,
  createSubscriptPlugin,
  createCodePlugin,
} from "@taze-editor/taze-plugin-basic-marks";

import { Toolbar } from "./Toolbar";


export default function App() {

  const editor = useMemo(() => 
    withReact(
      withHistory(
        createTazeEditor({
          plugins: [
            createBoldPlugin(),
            createItalicPlugin(),
            createUnderlinePlugin(),
            createStrikethroughPlugin(),
            createSuperscriptPlugin(),
            createSubscriptPlugin(),
            createCodePlugin()
          ]
        })
      )
    ),
  []);

  const initialValue: TDescendant[] = [{
    type: "p",
    children: [{ text: "This is editable." }],
  }]


  return (
    <div>
      <Taze
        editor={editor} 
        initialValue={initialValue}
        beforeEditable={<Toolbar />}
      />
    </div>
  );
}