1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-19 13:41:19 +02:00

Changed metaKey to crtlKey (#1508)

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

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()
@@ -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>