mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-08-30 02:19:52 +02:00
add more docs
This commit is contained in:
5
docs/concepts/statelessness-and-immutability.md
Normal file
5
docs/concepts/statelessness-and-immutability.md
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
|
||||||
|
|
||||||
|
# Statelessness & Immutability
|
||||||
|
|
||||||
|
|
@@ -1,7 +1,7 @@
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
# Statelessness & Immutability
|
|
||||||
|
|
||||||
|
|
||||||
|
|
138
docs/getting-started/installing-slate.md
Normal file
138
docs/getting-started/installing-slate.md
Normal file
@@ -0,0 +1,138 @@
|
|||||||
|
|
||||||
|
### Getting Started
|
||||||
|
|
||||||
|
- [**Installing Slate**]()
|
||||||
|
- [Customizing Slate's Behavior](./customizing-slates-behavior)
|
||||||
|
- [Adding Plugins](./adding-plugins)
|
||||||
|
|
||||||
|
Slate is an npm module, so to install it you do:
|
||||||
|
|
||||||
|
```
|
||||||
|
npm install slate
|
||||||
|
```
|
||||||
|
|
||||||
|
You'll also need to be sure to install Slate's peer dependencies for React:
|
||||||
|
|
||||||
|
```
|
||||||
|
npm install react react-dom
|
||||||
|
```
|
||||||
|
|
||||||
|
Once you've install it, you'll need to import it.
|
||||||
|
|
||||||
|
Slate exposes a set of modules that you'll use to build your editor. The most important of which is an `Editor` component.
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { Editor } from 'slate'
|
||||||
|
```
|
||||||
|
|
||||||
|
In addition to loading the editor, you need to give Slate a "initial state" to work with. Without it, Slate knows nothing about the type of content you want to create, since it has no knowledge of your schema.
|
||||||
|
|
||||||
|
To keep things simple, we'll use the `Raw` serializer that ships with Slate to create a new initial state that just contains a single paragraph block with some text in it:
|
||||||
|
|
||||||
|
```js
|
||||||
|
import { Editor, Raw } from 'slate'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create our initial state...
|
||||||
|
*/
|
||||||
|
|
||||||
|
const initialState = Raw.deserialize([
|
||||||
|
{
|
||||||
|
kind: 'block',
|
||||||
|
type: 'paragraph',
|
||||||
|
nodes: [
|
||||||
|
{
|
||||||
|
kind: 'text',
|
||||||
|
ranges: [
|
||||||
|
{
|
||||||
|
text: 'A line of text in a paragraph.'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
])
|
||||||
|
```
|
||||||
|
|
||||||
|
Once you've got a `State` object create, via the `Raw` serializer, or any other serialization method you want, you can pass it into the `Editor` component inside your application:
|
||||||
|
|
||||||
|
```js
|
||||||
|
import React from 'react'
|
||||||
|
import { Editor, Raw } from 'state'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create our initial state...
|
||||||
|
*/
|
||||||
|
|
||||||
|
const initialState = Raw.deserialize([
|
||||||
|
{
|
||||||
|
kind: 'block',
|
||||||
|
type: 'paragraph',
|
||||||
|
nodes: [
|
||||||
|
{
|
||||||
|
kind: 'text',
|
||||||
|
ranges: [
|
||||||
|
{
|
||||||
|
text: 'A line of text in a paragraph.'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Our app.
|
||||||
|
*/
|
||||||
|
|
||||||
|
class App extends React.Component {
|
||||||
|
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
this.state = {
|
||||||
|
state: initialState
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<Editor
|
||||||
|
state={this.state.state}
|
||||||
|
onChange={(state) => {
|
||||||
|
this.setState({ state })
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
You'll notice that the `onChange` handler passed into the `Editor` component just updates the app's state with the newest editor state. That way, when it re-renders the editor, the new state is reflected with your changes.
|
||||||
|
|
||||||
|
And that's it!
|
||||||
|
|
||||||
|
That's the most basic example of Slate. If you render that onto the page, you should see a paragraph with the text `A line of text in a paragraph.`. And when you type, you should see the text change!
|
||||||
|
|
||||||
|
<p align="center"><strong>Next:</strong><br /><a href="./customizing-slates-behavior.md">Customizing Slate's Behavior</a></p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
Reference in New Issue
Block a user