How to implement undo/redo toolbar buttons?

[AM-thedev]

How would I implement undo/redo buttons on the toolbar in, for example, the Rich Text Editor demo?
I've searched everywhere but there doesn't seem to be any documentation on how to implement slate-history as a button.

[klingat]

I was looking for this too.

This is what worked for me:

1. Install the plugin: yarn add slate-history
2. Import withHistory:

 import { withHistory } from 'slate-history';

3. Initialize editor with the withHistory provider:

  const [editor] = useState(() => withReact(withHistory(createEditor())));

4. Then add buttons for undo/redo:

  const initialValue = [
    {
      type: 'paragraph',
      children: [{ text: 'A line of text in a paragraph.' }],
    },
  ];

  return (
    <>
      <button onClick={editor.undo}>Undo</button>
      <button onClick={editor.redo}>Redo</button>
      <Slate editor={editor} value={initialValue}>
        <Editable />
      </Slate>
    </>
  );

That should work!

[maylortaylor]

This should be in the Docs somewhere