Applying Custom Formatting
In the previous guide we learned how to create custom block types that render chunks of text inside different containers. But Slate allows for more than just "blocks".
In this guide, we'll show you how to add custom formatting options, like bold, italic, code or strikethrough.
So we start with our app from earlier:
1
const renderElement = (props) => {
2
switch (props.element.type) {
3
case 'code':
4
return <CodeElement {...props} />
5
default:
6
return <DefaultElement {...props} />
7
}
8
})
9
10
const App = () => {
11
const editor = useMemo(() => withReact(createEditor()), [])
12
const [value, setValue] = useState([
13
{
14
type: 'paragraph',
15
children: [{ text: 'A line of text in a paragraph.' }],
16
},
17
])
18
19
return (
20
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
21
<Editable
22
renderElement={renderElement}
23
onKeyDown={event => {
24
if (event.key === '`' && event.ctrlKey) {
25
event.preventDefault()
26
const { selection } = editor
27
const [match] = Editor.nodes(editor, {
28
match: n => n.type === 'code',
29
})
30
Transforms.setNodes(
31
editor,
32
{ type: match ? 'paragraph' : 'code' },
33
{ match: n => Editor.isBlock(editor, n) }
34
)
35
}
36
}}
37
/>
38
</Slate>
39
)
40
}
Copied!
And now, we'll edit the onKeyDown handler to make it so that when you press control-B, it will add a bold format to the currently selected text:
1
const App = () => {
2
const editor = useMemo(() => withReact(createEditor()), [])
3
const [value, setValue] = useState([
4
{
5
type: 'paragraph',
6
children: [{ text: 'A line of text in a paragraph.' }],
7
},
8
])
9
10
const renderElement = useCallback(props => {
11
switch (props.element.type) {
12
case 'code':
13
return <CodeElement {...props} />
14
default:
15
return <DefaultElement {...props} />
16
}
17
}, [])
18
19
return (
20
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
21
<Editable
22
renderElement={renderElement}
23
onKeyDown={event => {
24
if (!event.ctrlKey) {
25
return
26
}
27
28
switch (event.key) {
29
// When "`" is pressed, keep our existing code block logic.
30
case '`': {
31
event.preventDefault()
32
const [match] = Editor.nodes(editor, {
33
match: n => n.type === 'code',
34
})
35
Transforms.setNodes(
36
editor,
37
{ type: match ? 'paragraph' : 'code' },
38
{ match: n => Editor.isBlock(editor, n) }
39
)
40
break
41
}
42
43
// When "B" is pressed, bold the text in the selection.
44
case 'b': {
45
event.preventDefault()
46
Transforms.setNodes(
47
editor,
48
{ bold: true },
49
// Apply it to text nodes, and split the text node up if the
50
// selection is overlapping only part of it.
51
{ match: n => Text.isText(n), split: true }
52
)
53
break
54
}
55
}
56
}}
57
/>
58
</Slate>
59
)
60
}
Copied!
Okay, so we've got the hotkey handler setup... but! If you happen to now try selecting text and hitting Ctrl-B, you won't notice any change. That's because we haven't told Slate how to render a "bold" mark.
For every format you add, Slate will break up the text content into "leaves", and you need to tell Slate how to read it, just like for elements. So let's define a Leaf component:
1
// Define a React component to render leaves with bold text.
2
const Leaf = props => {
3
return (
4
<span
5
{...props.attributes}
6
style={{ fontWeight: props.leaf.bold ? 'bold' : 'normal' }}
7
>
8
{props.children}
9
</span>
10
)
11
}
Copied!
Pretty familiar, right?
And now, let's tell Slate about that leaf. To do that, we'll pass in the renderLeaf prop to our editor.
1
const App = () => {
2
const editor = useMemo(() => withReact(createEditor()), [])
3
const [value, setValue] = useState([
4
{
5
type: 'paragraph',
6
children: [{ text: 'A line of text in a paragraph.' }],
7
},
8
])
9
10
const renderElement = useCallback(props => {
11
switch (props.element.type) {
12
case 'code':
13
return <CodeElement {...props} />
14
default:
15
return <DefaultElement {...props} />
16
}
17
}, [])
18
19
// Define a leaf rendering function that is memoized with `useCallback`.
20
const renderLeaf = useCallback(props => {
21
return <Leaf {...props} />
22
}, [])
23
24
return (
25
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
26
<Editable
27
renderElement={renderElement}
28
// Pass in the `renderLeaf` function.
29
renderLeaf={renderLeaf}
30
onKeyDown={event => {
31
if (!event.ctrlKey) {
32
return
33
}
34
35
switch (event.key) {
36
case '`': {
37
event.preventDefault()
38
const [match] = Editor.nodes(editor, {
39
match: n => n.type === 'code',
40
})
41
Transforms.setNodes(
42
editor,
43
{ type: match ? null : 'code' },
44
{ match: n => Editor.isBlock(editor, n) }
45
)
46
break
47
}
48
49
case 'b': {
50
event.preventDefault()
51
Transforms.setNodes(
52
editor,
53
{ bold: true },
54
{ match: n => Text.isText(n), split: true }
55
)
56
break
57
}
58
}
59
}}
60
/>
61
</Slate>
62
)
63
}
64
65
const Leaf = props => {
66
return (
67
<span
68
{...props.attributes}
69
style={{ fontWeight: props.leaf.bold ? 'bold' : 'normal' }}
70
>
71
{props.children}
72
</span>
73
)
74
}
Copied!
Now, if you try selecting a piece of text and hitting Ctrl-B you should see it turn bold! Magic!
Last modified 3mo ago
Copy link