mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-19 05:31:56 +02:00
Code Issues Releases Wiki Activity

Changed metaKey to crtlKey (#1508)

Browse Source 
Fixes documentation suggested in issue #690.
This commit is contained in:
Spencer Baynton
2018-01-08 16:38:46 -05:00
committed by Ian Storm Taylor
parent df5b4a5d61
commit 2d7c470c94
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
docs/walkthroughs/defining-custom-block-nodes.md
View File

@@ -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 ```js
function CodeNode(props) { function CodeNode(props) {
@@ -125,8 +125,8 @@ class App extends React.Component {
} }
onKeyDown = (event, change) => { onKeyDown = (event, change) => {
// Return with no changes if it's not the "`" key with cmd/ctrl pressed. // Return with no changes if it's not the "`" key with ctrl pressed.
if (event.key != '`' || !event.metaKey) return if (event.key != '`' || !event.ctrlKey) return
// Prevent the "`" from being inserted by default. // Prevent the "`" from being inserted by default.
event.preventDefault() 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 ```js
function CodeNode(props) { function CodeNode(props) {
@@ -176,7 +176,7 @@ class App extends React.Component {
} }
onKeyDown = (event, change) => { onKeyDown = (event, change) => {
if (event.key != '`' || !event.metaKey) return if (event.key != '`' || !event.ctrlKey) return
event.preventDefault() event.preventDefault()
@@ -198,7 +198,7 @@ class App extends React.Component {
/> />
) )
} }
renderNode = (props) => { renderNode = (props) => {
switch (props.node.type) { switch (props.node.type) {
case 'code': return <CodeNode {...props} /> case 'code': return <CodeNode {...props} />
@@ -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!
<br/> <br/>
<p align="center"><strong>Next:</strong><br/><a href="./applying-custom-formatting.md">Applying Custom Formatting</a></p> <p align="center"><strong>Next:</strong><br/><a href="./applying-custom-formatting.md">Applying Custom Formatting</a></p>