// Import the `Editor` and `Transforms` helpers from Slate.
import { Editor, Transforms } from 'slate'
children: [{ text: 'A line of text in a paragraph.' }],
const [editor] = useState(() => withReact(createEditor()))
const renderElement = useCallback(props => {
switch (props.element.type) {
return <CodeElement {...props} />
return <DefaultElement {...props} />
<Slate editor={editor} value={initialValue}>
renderElement={renderElement}
if (event.key === '`' && event.ctrlKey) {
// Prevent the "`" from being inserted by default.
// Otherwise, set the currently selected blocks type to "code".
{ match: n => Editor.isBlock(editor, n) }
const CodeElement = props => {
<pre {...props.attributes}>
<code>{props.children}</code>
const DefaultElement = props => {
return <p {...props.attributes}>{props.children}</p>