Using Plugins
Let's use basic marks plugins. You can use mod+key
to toggle marks. For
instance: mod+b
to toggle bold, mod+i
to toggle italic, mod+u
to toggle
underline.
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"; 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} /> </div> ); }