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

Update adding-event-handlers.md (#1751)

Browse Source 
* Update adding-event-handlers.md

Make clarifying changes to sentence structure and code sample syntax

* Revert to React.Component declaration

* Update adding-event-handlers.md
This commit is contained in:
Nima Mehanian
2018-04-27 14:01:17 -07:00
committed by Ian Storm Taylor
parent da89f58c4c
commit 2dd77c00f1
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/walkthroughs/adding-event-handlers.md
View File

@@ -6,11 +6,11 @@
Okay, so you've got Slate installed and rendered on the page, and when you type in it, you can see the changes reflected. But you want to do more than just type a plaintext string.
What makes Slate great is how easy it is to customize. Just like other React components you're used to, Slate allows you to pass in handlers that are triggered on certain events. You've already seen on the `onChange` handler can be used to store the changed editor value, but let's try add something more...
What makes Slate great is how easy it is to customize. Just like other React components you're used to, Slate allows you to pass in handlers that are triggered on certain events. You've already seen how the `onChange` handler can be used to store the changed editor value, but let's try adding more...
We'll show you how to use the `onKeyDown` handler to change the editor's content when the user presses a button.
Let's use the `onKeyDown` handler to change the editor's content when we press a key.
So we start with our app from earlier:
Here's our app from earlier:
```js
class App extends React.Component {
@@ -28,7 +28,7 @@ class App extends React.Component {
}
```
And now we'll add an `onKeyDown` handler:
Now we add an `onKeyDown` handler:
```js
class App extends React.Component {
@@ -57,9 +57,9 @@ class App extends React.Component {
}
```
Okay cool, so now when you press a key in the editor, you'll see the key's code printed to the console. Not very useful, but at least we know it's working.
Cool, now when a key is pressed in the editor, its corresponding keycode is logged in the console.
Now we want to make it actually change the content. For the purposes of our example, let's say we want to make it so that whenever a user types `&` we actually add `and` to the content.
Now we want to make it actually change the content. For the purposes of our example, let's implement turning all ampersand, `&`, keystrokes into the word `and` upon being typed.
Our `onKeyDown` handler might look like this:
@@ -74,13 +74,13 @@ class App extends React.Component {
}
onKeyDown = (event, change) => {
// Return with no changes if it's not the "&" key.
if (event.key != '&') return
// Return with no changes if the keypress is not '&'
if (event.key !== '&') return
// Prevent the ampersand character from being inserted.
event.preventDefault()
// Change the value by inserting "and" at the cursor's position.
// Change the value by inserting 'and' at the cursor's position.
change.insertText('and')
return true
}
@@ -97,9 +97,9 @@ class App extends React.Component {
}
```
With that added, try typing `&`, and you should see it automatically become `and` instead!
With that added, try typing `&`, and you should see it suddenly become `and` instead!
That gives you a sense for what you can do with Slate's event handlers. Each one will be called with the `event` object, and a `change` object that lets you perform changes to the editor's value. Simple!
This offers a sense of what can be done with Slate's event handlers. Each one will be called with the `event` object, and a `change` object that lets you perform changes to the editor's value. Simple!
<br/>
<p align="center"><strong>Next:</strong><br/><a href="./defining-custom-block-nodes.md">Defining Custom Block Nodes</a></p>