Executing Commands
Up until now, everything we've learned has been about how to write one-off logic for your specific Slate editor. But one of the most powerful things about Slate is that it lets you model your specific rich text "domain" however you'd like, and write less one-off code.
In the previous guides we've written some useful code to handle formatting code blocks and bold marks. And we've hooked up the
onKeyDown
handler to invoke that code. But we've always done it using the built-in Editor
helpers directly, instead of using "commands".Slate lets you augment the built-in
editor
object to handle your own custom rich text commands. And you can even use pre-packaged "plugins" which add a given set of functionality.Let's see how this works.
We'll start with our app from earlier:
const initialValue = [
{
type: 'paragraph',
children: [{ text: 'A line of text in a paragraph.' }],
},
]
const App = () => {
const [editor] = useState(() => withReact(createEditor()))