Version: 2.0.0
Balloon Toolbar

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
} from "@taze-editor/taze-plugin-basic-marks";

import { styled, composeAll } from "@desygna/desygna";

import { BalloonToolbar } from "./BalloonToolbar";


const StyledDiv = styled.div(composeAll);

export default function App() {

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

  const initialValue: TDescendant[] = [{
    type: "p",
    children: [
      { text: "Hello from " }, 
      { text: "Taze Editor!" },
      { text: " It's a good starting point for you to build your own highly ", },
      { text: "customizable", bold: true, italic: true },
      { text: " and " },
      { text: "extensible", bold: true, italic: true },
      { text: " editor. " }
    ],
  }]

  return (
    <StyledDiv mt="50px">
      <Taze
        editor={editor} 
        initialValue={initialValue}
        beforeEditable={<BalloonToolbar />} 
      />
    </StyledDiv>
  );
}