1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-25 16:20:49 +02:00

update docs

This commit is contained in:
Ian Storm Taylor
2016-08-25 22:59:36 -04:00
parent a90d522ae5
commit 9d293f5ede
5 changed files with 13 additions and 14 deletions

View File

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

View File

@@ -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 <kbd>control</kbd> 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 <kbd>control</kbd> key was pressed on Windows or the <kbd>command</kbd> key was pressed on Mac _without_ the <kbd>alt/option</kbd> key was also being pressed. This is a convenience for adding hotkeys like <kbd>command+b</kbd>.
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 <kbd>control</kbd> key was pressed on Windows or the <kbd>command</kbd> key was pressed on Mac _and_ the <kbd>alt/option</kbd> key was also being pressed. This is a convenience for secondary hotkeys like <kbd>command+option+1</kbd>.
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 <kbd>option + right</kbd> 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).

View File

@@ -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 <kbd>&</kbd> 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 <kbd>&</kbd>, 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!

View File

@@ -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 <kbd>⌘-B</kbd>, 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 <kbd>⌘-B</kbd>, 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 <kbd>⌘-B</kbd> 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!
<br/>
<p align="center"><strong>Next:</strong><br/><a href="./using-plugins.md">Using Plugins</a></p>

View File

@@ -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 <kbd>⌘-`</kbd> 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 <kbd>⌘-`</kbd>, 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 <kbd>⌘-`</kbd> 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 <kbd>⌘-`</kbd> 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!
<br/>
<p align="center"><strong>Next:</strong><br/><a href="./applying-custom-formatting.md">Applying Custom Formatting</a></p>