mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-08-25 16:20:49 +02:00
update docs
This commit is contained in:
@@ -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)
|
||||
|
@@ -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).
|
||||
|
||||
|
@@ -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!
|
||||
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user