mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-30 10:29:48 +02:00
Code Issues Releases Wiki Activity

update docs

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/walkthroughs/adding-event-handlers.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!

6
docs/walkthroughs/applying-custom-formatting.md
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>

8
docs/walkthroughs/defining-custom-block-nodes.md
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>