diff --git a/docs/Summary.md b/docs/Summary.md index 061775552..f1d6b7eb4 100644 --- a/docs/Summary.md +++ b/docs/Summary.md @@ -6,7 +6,6 @@ ## Walkthroughs - [Installing Slate](./walkthroughs/installing-slate.md) -- [Using the Bundled Source](./walkthroughs/using-the-bundled-source.md) - [Adding Event Handlers](./walkthroughs/adding-event-handlers.md) - [Defining Custom Block Nodes](./walkthroughs/defining-custom-block-nodes.md) - [Applying Custom Formatting](./walkthroughs/applying-custom-formatting.md) diff --git a/docs/reference/plugins/plugins.md b/docs/reference/plugins/plugins.md index 51d1dd35d..ea5baafd1 100644 --- a/docs/reference/plugins/plugins.md +++ b/docs/reference/plugins/plugins.md @@ -127,7 +127,7 @@ If no other plugin handles this event, it will be handled by the [Core plugin](. This handler is called when any key is pressed in the `contenteditable` element, before any action is taken. -The `data` object contains the `key` which is a string name of the key that was pressed, as well as it's `code`. It also contains a series of helpful utility properties for determining hotkey logic. For example, `isCtrl` which is true if the control key was pressed, or +The `data` object contains the `key` which is a string name of the key that was pressed, as well as it's `code`. It also contains a series of helpful utility properties for determining hotkey logic. For example, `isCtrl` which is true if the `control` key was pressed, or ```js { @@ -145,11 +145,11 @@ The `data` object contains the `key` which is a string name of the key that was } ``` -The `isMod` boolean is `true` if the control key was pressed on Windows or the command key was pressed on Mac _without_ the alt/option key was also being pressed. This is a convenience for adding hotkeys like command+b. +The `isMod` boolean is `true` if the `control` key was pressed on Windows or the `command` key was pressed on Mac _without_ the `alt/option` key was also being pressed. This is a convenience for adding hotkeys like `command+b`. -The `isModAlt` boolean is `true` if the control key was pressed on Windows or the command key was pressed on Mac _and_ the alt/option key was also being pressed. This is a convenience for secondary hotkeys like command+option+1. +The `isModAlt` boolean is `true` if the `control` key was pressed on Windows or the `command` key was pressed on Mac _and_ the `alt/option` key was also being pressed. This is a convenience for secondary hotkeys like `command+option+1`. -The `isLine` and `isWord` booleans represent whether the "line modifier" or "word modifier" hotkeys are pressed when deleteing or moving the cursor. For example, on a Mac option + right moves the cursor to the right one word at a time. +The `isLine` and `isWord` booleans represent whether the "line modifier" or "word modifier" hotkeys are pressed when deleteing or moving the cursor. For example, on a Mac `option + right` moves the cursor to the right one word at a time. Make sure to `event.preventDefault()` if you do not want the default insertion behavior to occur! If no other plugin handles this event, it will be handled by the [Core plugin](./core.md). diff --git a/docs/walkthroughs/adding-event-handlers.md b/docs/walkthroughs/adding-event-handlers.md index 4935898b5..fd4ef4053 100644 --- a/docs/walkthroughs/adding-event-handlers.md +++ b/docs/walkthroughs/adding-event-handlers.md @@ -61,7 +61,7 @@ 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. -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 say we want to make it so that whenever a user types `&` we actually add `and` to the content. Our `onKeyDown` handler might look like this: @@ -99,7 +99,7 @@ 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 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. And if you return a new `state`, the editor will be updated. Simple! diff --git a/docs/walkthroughs/applying-custom-formatting.md b/docs/walkthroughs/applying-custom-formatting.md index a2ce6ea58..f823db166 100644 --- a/docs/walkthroughs/applying-custom-formatting.md +++ b/docs/walkthroughs/applying-custom-formatting.md @@ -48,7 +48,7 @@ class App extends React.Component { } ``` -And now, we'll edit the `onKeyDown` handler to make it so that when you press ⌘-B, it will add a "bold" mark to the currently selected text: +And now, we'll edit the `onKeyDown` handler to make it so that when you press `⌘-B`, it will add a "bold" mark to the currently selected text: ```js class App extends React.Component { @@ -99,7 +99,7 @@ class App extends React.Component { } ``` -Okay, so we've got the hotkey handler setup... but! If you happen to now try selecting text and hitting ⌘-B, you'll get an error in your console. That's because we haven't told Slate how to render a "bold" mark. +Okay, so we've got the hotkey handler setup... but! If you happen to now try selecting text and hitting `⌘-B`, you'll get an error in your console. That's because we haven't told Slate how to render a "bold" mark. For every mark type you want to add to your schema, you need to give Slate a "renderer" for that mark, just like nodes. So let's define our `bold` mark: @@ -169,7 +169,7 @@ class App extends React.Component { } ``` -Now, if you try selecting a piece of text and hitting ⌘-B you should see it turn bold! Magic! +Now, if you try selecting a piece of text and hitting `⌘-B` you should see it turn bold! Magic!

Next:
Using Plugins

diff --git a/docs/walkthroughs/defining-custom-block-nodes.md b/docs/walkthroughs/defining-custom-block-nodes.md index 687f8c25e..661925178 100644 --- a/docs/walkthroughs/defining-custom-block-nodes.md +++ b/docs/walkthroughs/defining-custom-block-nodes.md @@ -106,7 +106,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 `⌘-\`` shortcut that does just that: ```js function CodeNode(props) { @@ -150,9 +150,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 `⌘-\``, 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 `⌘-\`` 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) { @@ -198,7 +198,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 `⌘-\`` while inside a code block, it should turn back into a paragraph!

Next:
Applying Custom Formatting