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" qweqwrqwr qrqw rqwr rqw 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 const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) const \[value, setvalue] = usestate(\[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ]) const renderelement = usecallback(props => { switch (props element type) { case 'code' return \<codeelement { props} /> default return \<defaultelement { props} /> } }, \[]) return ( \<slate editor={editor} value={value} onchange={value => setvalue(value)}> \<editable renderelement={renderelement} onkeydown={event => { if (event key === '`' && event ctrlkey) { event preventdefault() const { selection } = editor const \[match] = editor nodes(editor, { match n => n type === 'code', }) transforms setnodes( editor, { type match ? 'paragraph' 'code' }, { match n => editor isblock(editor, n) } ) } }} /> \</slate> ) } 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 const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) const \[value, setvalue] = usestate(\[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ]) const renderelement = usecallback(props => { switch (props element type) { case 'code' return \<codeelement { props} /> default return \<defaultelement { props} /> } }, \[]) return ( \<slate editor={editor} value={value} onchange={value => setvalue(value)}> \<editable renderelement={renderelement} onkeydown={event => { if (!event ctrlkey) { return } switch (event key) { // when "`" is pressed, keep our existing code block logic case '`' { event preventdefault() const \[match] = editor nodes(editor, { match n => n type === 'code', }) transforms setnodes( editor, { type match ? 'paragraph' 'code' }, { match n => editor isblock(editor, n) } ) break } // when "b" is pressed, bold the text in the selection case 'b' { event preventdefault() transforms setnodes( editor, { bold true }, // apply it to text nodes, and split the text node up if the // selection is overlapping only part of it { match n => text istext(n), split true } ) break } } }} /> \</slate> ) } 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 // define a react component to render leaves with bold text const leaf = props => { return ( \<span { props attributes} style={{ fontweight props leaf bold ? 'bold' 'normal' }} \> {props children} \</span> ) } 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 const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) const \[value, setvalue] = usestate(\[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ]) const renderelement = usecallback(props => { switch (props element type) { case 'code' return \<codeelement { props} /> default return \<defaultelement { props} /> } }, \[]) // define a leaf rendering function that is memoized with `usecallback` const renderleaf = usecallback(props => { return \<leaf { props} /> }, \[]) return ( \<slate editor={editor} value={value} onchange={value => setvalue(value)}> \<editable renderelement={renderelement} // pass in the `renderleaf` function renderleaf={renderleaf} onkeydown={event => { if (!event ctrlkey) { return } switch (event key) { case '`' { event preventdefault() const \[match] = editor nodes(editor, { match n => n type === 'code', }) transforms setnodes( editor, { type match ? null 'code' }, { match n => editor isblock(editor, n) } ) break } case 'b' { event preventdefault() transforms setnodes( editor, { bold true }, { match n => text istext(n), split true } ) break } } }} /> \</slate> ) } const leaf = props => { return ( \<span { props attributes} style={{ fontweight props leaf bold ? 'bold' 'normal' }} \> {props children} \</span> ) } now, if you try selecting a piece of text and hitting ctrl b you should see it turn bold! magic!