1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-04-20 05:11:53 +02:00

update docs

This commit is contained in:
Ian Storm Taylor 2016-07-11 13:47:28 -07:00
parent b127f646e0
commit b6f7f70c53
2 changed files with 32 additions and 29 deletions

View File

@ -3,35 +3,19 @@
The top-level React component that renders the Slate editor itself.
```js
<Editor
onChange={Function}
plugins={Array}
state={State}
/>
```
The editor takes a `State` instance that contains it's content and selection, and an array of `plugins` that define its behavior. In addition to those two properties, the editor allows passing any of the properties that a plugin can define:
```js
<Editor
onBeforeInput={Function}
onChange={Function}
onKeyDown={Function}
onPaste={Function}
plugins={Array}
renderDecorations={Function}
renderMark={Function}
renderNode={Function}
state={State}
/>
```
These properties are actually an implicit plugin defintion. Internally, they are grouped together and turned into a plugin that is given first priority in the plugin stack.
The editor takes a `State` instance that contains it's content and selection, and an array of `plugins` that define its behavior.
### Properties
```js
<Editor
onChange={Function}
plugins={Array}
state={State}
/>
```
#### `onChange: Function`
A change handler that will be called with the newly-changed editor `state`. You should usually pass the newly changed `state` back into the editor through its `state` property. This hook allows you to add persistence logic to your editor.
@ -46,7 +30,25 @@ A [`State`](../models/state) object representing the current state of the editor
#### `...`
All of the other properties of the editor are equivalent to the properties of a [`Plugin`](../plugins). They are convenience properties, treated equivalently to passing them as the first plugin in the plugin stack. For example:
In addition to those two properties, the editor allows passing any of the properties that a [`Plugin`](../plugins) can define:
```js
<Editor
onBeforeInput={Function}
onChange={Function}
onKeyDown={Function}
onPaste={Function}
plugins={Array}
renderDecorations={Function}
renderMark={Function}
renderNode={Function}
state={State}
/>
```
These properties are actually just a convenience—an implicit plugin defintion. Internally, they are grouped together and turned into a plugin that is given first priority in the plugin stack.
For example, these two snippets of code are equivalent:
```js
const plugins = [somePlugin]
@ -58,8 +60,6 @@ const plugins = [somePlugin]
/>
```
Is equivalent to passing an additional, first-priority plugin, like:
```js
const editorPlugin = {
onKeyDown: myKeyHandler
@ -85,4 +85,4 @@ Return the editor's current internal state.
#### `onChange(state: State)`
Effectively the same as `setState`, invoking this method will update the state of the editor, running it through all of it's plugins, and passing it the parent component, before it cycles back down as the new `state` property of the editor.
Effectively the same as `setState`. Invoking this method will update the state of the editor, running it through all of it's plugins, and passing it the parent component, before it cycles back down as the new `state` property of the editor.

View File

@ -15,7 +15,10 @@ class Editor extends React.Component {
*/
static propTypes = {
onBeforeInput: React.PropTypes.func,
onChange: React.PropTypes.func.isRequired,
onKeyDown: React.PropTypes.func,
onPaste: React.PropTypes.func,
plugins: React.PropTypes.array,
renderDecorations: React.PropTypes.func,
renderMark: React.PropTypes.func,