mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-02-01 05:16:10 +01:00
Improved slate-simulator docs. (#1972)
* Improved slate-simulator docs. * Update index.md
This commit is contained in:
parent
715fde4f43
commit
939787969b
@ -4,7 +4,7 @@
|
||||
import Simulator from 'slate-simulator'
|
||||
```
|
||||
|
||||
A simulator to help writing tests for Slate editors and plugins. By default the simulator does not include the core plugins as they have a lot of dependencies on browser-specific globals, so running them in CI environments is very hard. If you need the core plugins for your use case you need to import them manually.
|
||||
A simulator to help writing tests for Slate editors and plugins. By default the simulator does not include the [core plugins](https://docs.slatejs.org/guides/plugins#core-plugins) as they have a lot of dependencies on browser-specific globals, so running them in CI environments is very hard. If you need the core plugins for your use case you need to import them manually.
|
||||
|
||||
## Example
|
||||
|
||||
@ -39,6 +39,46 @@ const plugins = [ BeforePlugin(), ... , AfterPlugin() ]
|
||||
const simulator = new Simulator({ value, plugins })
|
||||
```
|
||||
|
||||
Core plugins will trigger default behaviour for the events. Without them, only the changes defined in the plugins passed to slate-simulator will be applied. For example, `beforeInput()` event will not insert the data's text if none of the plugins being tested does it.
|
||||
|
||||
## Example for `DataTransfer` events
|
||||
|
||||
In order to simulate paste and drop events you will need to create a [DataTransfer](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer). However this object is browser dependant and is not easy to manipulate in CI environments. The easiest work around is to fake its API with a mockup class:
|
||||
|
||||
```js
|
||||
class FakeDataTransfer {
|
||||
constructor(props) {
|
||||
this.items = []
|
||||
this.types = []
|
||||
}
|
||||
|
||||
getData(key) {
|
||||
return this.items.find(item => item.key === key).value
|
||||
}
|
||||
|
||||
setData(key, value) {
|
||||
this.types.push(key)
|
||||
this.items.push({ key, value })
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Later, you can use it this way to fake a paste event:
|
||||
|
||||
```js
|
||||
import { setEventTransfer } from 'slate-react'
|
||||
|
||||
const pastedText = 'slatejs.org'
|
||||
|
||||
const fakeDataTransfer = new FakeDataTransfer()
|
||||
fakeDataTransfer.setData('text', "this text doesn't matter")
|
||||
|
||||
const pasteEvent = { dataTransfer: fakeDataTransfer }
|
||||
setEventTransfer(pasteEvent, 'text', pastedText)
|
||||
|
||||
simulator.paste(pasteEvent)
|
||||
```
|
||||
|
||||
## Methods
|
||||
|
||||
### `beforeInput`
|
||||
|
Loading…
x
Reference in New Issue
Block a user