diff --git a/docs/guides/adding-event-handlers.md b/docs/guides/adding-event-handlers.md
index 82b084e1a..a35ef0aeb 100644
--- a/docs/guides/adding-event-handlers.md
+++ b/docs/guides/adding-event-handlers.md
@@ -76,8 +76,8 @@ class App extends React.Component {
}
// Define a new handler which prints the key code that was pressed.
- onKeyDown(e, state) {
- console.log(e.which)
+ onKeyDown(event, state) {
+ console.log(event.which)
}
}
@@ -137,8 +137,8 @@ class App extends React.Component {
With that added, try typing `&`, and you should see it automatically 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 the current `state` of the editor.
+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 the current `state` of the editor. And if you return a new `state`, the editor will be updated. Simple!
-
Next:
Adding Custom Block Nodes
+Next:
Defining Custom Block Nodes
diff --git a/docs/guides/defining-custom-block-nodes.md b/docs/guides/defining-custom-block-nodes.md
index 68b292011..c02d25c25 100644
--- a/docs/guides/defining-custom-block-nodes.md
+++ b/docs/guides/defining-custom-block-nodes.md
@@ -245,5 +245,5 @@ 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!
-Next:
Applying Custom Formatting
+Next:
Applying Custom Formatting
diff --git a/docs/guides/using-plugins.md b/docs/guides/using-plugins.md
index eb6f5ac60..12abd4621 100644
--- a/docs/guides/using-plugins.md
+++ b/docs/guides/using-plugins.md
@@ -7,9 +7,9 @@
Up to now, everything we've learned has been about how to write one-off logic for your specific Slate editor. But one of the most beautiful things about Slate is actually its plugin system, and how it lets you write less one-off code.
-In the previous guide, we actually wrote some pretty useful code for adding **bold** formatting to ranges of text when a key is pressed. But most of that code wasn't really specific to bold text.
+In the previous guide, we actually wrote some pretty useful code for adding **bold** formatting to ranges of text when a key is pressed. But most of that code wasn't really specific to **bold** text; it could just as easily have applied to _italic_ text or `code` text if we switched a few variables.
-So let's look at how you'd break that code out into it's own reusable plugin that can toggle _any_ formatting mark on _any_ key press.
+So let's break that logic out into it's a reusable plugin that can toggle _any_ mark on _any_ key press.
Starting with our app from earlier:
@@ -73,10 +73,11 @@ function MarkHotkey(options) {
}
```
-Okay, that was easy.
+Okay, that was easy. But it doesn't do anything.
-Now we want to have it return a dictionary of handlers, in this case specifically containing a `onKeyDown` handler with logic pulled from our app:
+To fix that, we need our plugin function to return a "plugin object" that Slate recognizes. Slate's plugin objects are just plain objects that have properties that map to the same handler on the `Editor`.
+In this case our plugin object will have one property: a `onKeyDown` handler, with its logic copied right from our current app's code:
```js
function MarkHotkey(options) {
@@ -103,7 +104,7 @@ function MarkHotkey(options) {
Boom! Now we're getting somewhere. That code is reusable for any type of mark.
-So now, let's remove the old code from our app, and pass the editor our brand new `MarkHotkey` plugin instead, giving it the same options that will keep our bold functionality intact:
+Now that we have our plugin, let's remove the hard-coded logic from our app, and replace it with our brand new `MarkHotkey` plugin instead, passing in the same options that will keep our **bold** functionality intact:
```js
const BOLD_MARK = {
@@ -232,7 +233,7 @@ And there you have it! We just added a ton of functionality to the editor with v
Of course... now that it's reusable, we could actually make our `MarkHotkey` plugin a little easier to use. What if instead of a `code` argument it took the text of the `key` itself? That would make the calling code a lot clearer, since key codes are really obtuse.
-In fact, unless you have weirdly good keycode guessing, there's a good chance you had no idea what our current hotkeys bindings actually mapped to.
+In fact, unless you have weirdly good keycode knowledge, you probably have no idea what our current hotkeys actually are.
Let's fix that.
@@ -269,7 +270,7 @@ function MarkHotkey(options) {
}
```
-And finally, we can make our app code clearer:
+And now we can make our app code much clearer for the next person who reads it:
```js
const MARKS = {
@@ -335,4 +336,4 @@ class App extends React.Component {
}
```
-That's why plugins are awesome. They let you get really expressive while also making your codebase easier to manage. And since Slate is built with plugins as a primary consideration, using them is dead simple.
+That's why plugins are awesome. They let you get really expressive while also making your codebase easier to manage. And since Slate is built with plugins as a primary consideration, using them is dead simple!