mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-09-03 04:02:33 +02:00
Code Issues Releases Wiki Activity

add event handlers to reference

Browse Source
This commit is contained in:
Ian Storm Taylor
2016-07-27 22:45:25 -07:00
parent 1a6c3c153e
commit 5e6f5b9cd1
4 changed files with 71 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/reference/plugins/core.md
View File

@@ -15,6 +15,18 @@ The default behavior of the core plugin performs the following logic:
When text is entered, the core plugin inserts the text from `event.data` into the editor.
### `onBlur`
When the editor is blurred, the core plugin updates the selection in Slate's internal data model without re-rendering.
### `onCopy`
When the user copies part of the document, the core plugin adds the copied text to the clipboard with a serialized version of the document intact, so that it can be deserialized and inserted on paste, preserving formatting.
### `onCut`
When the user cuts part of the document, the core plugin runs the same logic it runs for `onCopy`, but it also delete's the content in the current selection.
### `onDrop`
When the user drops content into the editor, the core plugin handles drops of type `text` and `html` as plain text, and does nothing for drops of type `files`.
@@ -25,7 +37,11 @@ When a key is pressed, the core plugin handles performing some of the "native" b
### `onPaste`
When the user pastes content into the editor, the core plugin handles all pastes of type `text` and `html` as plain text, and does nothing for pastes of type `files`.
When the user pastes content into the editor, the core plugin handles all pastes of type `text` and `html` as plain text, and does nothing for pastes of type `files`.
### `onSelect`
When the user makes a new selection in the DOM, the core plugin updates that selection in Slate's internal data model, re-rendering if it needs to.
### `renderNode`

59
docs/reference/plugins/plugins.md
View File

@@ -10,9 +10,13 @@ When the editor needs to resolve a plugin-related handler, it will loop through
- [Conventions](#conventions)
- [Event Handler Properties](#event-handle-properties)
- [`onBeforeInput`](#onbeforeinput)
- [`onBlur`](#onblur)
- [`onCopy`](#oncopy)
- [`onCut`](#oncut)
- [`onDrop`](#ondrop)
- [`onKeyDown`](#onkeydown)
- [`onPaste`](#onpaste)
- [`onSelect`](#onselect)
- [Renderer Properties](#renderer-properties)
- [`renderDecorations`](#renderdecorations)
- [`renderMark`](#rendermark)
@@ -39,29 +43,63 @@ export default MySlatePlugin(options) {
```js
{
onBeforeInput: Function,
onBlur: Function,
onCopy: Function,
onCut: Function,
onDrop: Function,
onKeyDown: Function,
onPaste: Function
onPaste: Function,
onSelect: Function
}
```
All of the event handler properties are passed the same React `event` object you are used to from React's event handlers. They are also passed the current `state` of the editor, and the `editor` instance itself.
All of the event handler properties are passed the same React `event` object you are used to from React's event handlers. They are also passed a `data` object with Slate-specific information relating to the event, the current `state` of the editor, and the `editor` instance itself.
Each event handler can choose to return a new `state` object, in which case the editor's state will be updated. If nothing is returned, the editor will simply continue resolving the plugin stack.
### `onBeforeInput`
`Function onBeforeInput(event: Event, state: State, editor: Editor) => State || Void`
`Function onBeforeInput(event: Event, data: Object, state: State, editor: Editor) => State || Void`
This handler is called right before a string of text is inserted into the `contenteditable` element. The `event.data` property will be the string of text that is being inserted.
This handler is called right before a string of text is inserted into the `contenteditable` element.
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).
### `onBlur`
`Function onBlur(event: Event, data: Object, state: State, editor: Editor) => State || Void`
This handler is called when the editor's `contenteditable` element is blurred.
If no other plugin handles this event, it will be handled by the [Core plugin](./core.md).
### `onCopy`
`Function onCopy(event: Event, data: Object, state: State, editor: Editor) => State || Void`
This handler is called when the editor's `contenteditable` element is blurred.
The `data` object contains a `type` string and associated data for that type. Right now the only type supported is `"fragment"`:
```js
{
type: 'fragment',
fragment: Document
}
```
If no other plugin handles this event, it will be handled by the [Core plugin](./core.md).
### `onCut`
`Function onCut(event: Event, data: Object, state: State, editor: Editor) => State || Void`
This handler is equivalent to the `onCopy` handler.
If no other plugin handles this event, it will be handled by the [Core plugin](./core.md).
### `onDrop`
`Function onDrop(event: Event, drop: Object, state: State, editor: Editor) => State || Void`
`Function onDrop(event: Event, data: Object, state: State, editor: Editor) => State || Void`
This handler is called when the user drops content into the `contenteditable` element. The event is already prevented by default, so you must define a state change to have any affect occur.
The `drop` object is a convenience object created to standardize the drop metadata across browsers. Every drop object has a `type` property, can be one of `text`, `html` or `files`, and a `target` property which is a [`Selection`](../models/selection.md) indicating where the drop occured. Depending on the type, it's structure will be:
The `data` object is a convenience object created to standardize the drop metadata across browsers. Every data object has a `type` property, can be one of `text`, `html` or `files`, and a `target` property which is a [`Selection`](../models/selection.md) indicating where the drop occured. Depending on the type, it's structure will be:
```js
{
@@ -120,6 +158,15 @@ The `paste` object is a convenience object created to standardize the paste meta
If no other plugin handles this event, it will be handled by the [Core plugin](./core.md).
### `onSelect`
`Function onSelect(event: Event, paste: Object, state: State, editor: Editor => State || Void`
This handler is called whenever the native selection changes.
The `data` object contains a State [`Selection`](../models/selection.md) object representing the new selection, and an `isNative` boolean connoting whether the editor needs to be re-rendered for the selection to be updated or correctly placed or not.
If no other plugin handles this event, it will be handled by the [Core plugin](./core.md).
## Renderer Properties