import { useMemo } from "react";
import { withReact } from "slate-react";
import { withHistory } from "slate-history";
import {
createTazeEditor,
Taze,
TDescendant
} from "@taze-editor/taze-core";
import {
createHeadingOnePlugin,
createHeadingTwoPlugin,
createHeadingThreePlugin,
} from "@taze-editor/taze-plugin-basic-elements";
import { Toolbar } from "./Toolbar";
export default function App() {
const editor = useMemo(() =>
withReact(
withHistory(
createTazeEditor({
plugins: [
createHeadingOnePlugin(),
createHeadingTwoPlugin(),
createHeadingThreePlugin(),
],
})
)
),
[]);
const initialValue: TDescendant[] = [{
type: "p",
children: [{ text: "This is editable." }],
}]
return (
<div>
<Taze
editor={editor}
initialValue={initialValue}
beforeEditable={<Toolbar />}
/>
</div>
);
}
To enter the code editing mode, press Enter. To exit the edit mode, press Escape
You are editing the code. To exit the edit mode, press Escape