diff --git a/docs/walkthroughs/defining-custom-block-nodes.md b/docs/walkthroughs/defining-custom-block-nodes.md index 3992d0e91..54a84f982 100644 --- a/docs/walkthroughs/defining-custom-block-nodes.md +++ b/docs/walkthroughs/defining-custom-block-nodes.md @@ -107,7 +107,7 @@ class App extends React.Component { } ``` -Okay, but now we'll need a way for the user to actually turn a block into a code block. So let's change our `onKeyDown` function to add a `⌘-\`` shortcut that does just that: +Okay, but now we'll need a way for the user to actually turn a block into a code block. So let's change our `onKeyDown` function to add a `control-\`` shortcut that does just that: ```js function CodeNode(props) { @@ -125,8 +125,8 @@ class App extends React.Component { } onKeyDown = (event, change) => { - // Return with no changes if it's not the "`" key with cmd/ctrl pressed. - if (event.key != '`' || !event.metaKey) return + // Return with no changes if it's not the "`" key with ctrl pressed. + if (event.key != '`' || !event.ctrlKey) return // Prevent the "`" from being inserted by default. event.preventDefault() @@ -156,9 +156,9 @@ class App extends React.Component { } ``` -Now, if you press `⌘-\`` the block your cursor is in should turn into a code block! Magic! +Now, if you press `control-\`` the block your cursor is in should turn into a code block! Magic! -But we forgot one thing. When you hit `⌘-\`` again, it should change the code block back into a paragraph. To do that, we'll need to add a bit of logic to change the type we set based on whether any of the currently selected blocks are already a code block: +But we forgot one thing. When you hit `control-\`` again, it should change the code block back into a paragraph. To do that, we'll need to add a bit of logic to change the type we set based on whether any of the currently selected blocks are already a code block: ```js function CodeNode(props) { @@ -176,7 +176,7 @@ class App extends React.Component { } onKeyDown = (event, change) => { - if (event.key != '`' || !event.metaKey) return + if (event.key != '`' || !event.ctrlKey) return event.preventDefault() @@ -198,7 +198,7 @@ class App extends React.Component { /> ) } - + renderNode = (props) => { switch (props.node.type) { case 'code': return @@ -208,7 +208,7 @@ class App extends React.Component { } ``` -And there you have it! If you press `⌘-\`` while inside a code block, it should turn back into a paragraph! +And there you have it! If you press `control-\`` while inside a code block, it should turn back into a paragraph!

Next:
Applying Custom Formatting