1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-04-22 14:21:54 +02:00

update docs

This commit is contained in:
Ian Storm Taylor 2017-10-17 20:53:38 -07:00
parent 2038d58c3a
commit 117d8c55cc
4 changed files with 39 additions and 49 deletions

View File

@ -36,8 +36,8 @@
- [Inline](./reference/slate/inline.md)
- [Mark](./reference//slate/mark.md)
- [Node](./reference/slate/node.md)
- [Range](./reference/slate/range.md)
- [Operation](./reference/slate/operation.md)
- [Range](./reference/slate/range.md)
- [Schema](./reference/slate/schema.md)
- [State](./reference/slate/state.md)
- [Text](./reference/slate/text.md)

14
docs/general/changelog.md Normal file
View File

@ -0,0 +1,14 @@
# Changelog
Since Slate is a monorepo with many packages that are versioned separately, we maintain a changelog for each individual package:
- [`slate`](https://github.com/ianstormtaylor/slate/tree/master/packages/slate/Changelog.md)
- [`slate-base64-serializer`](https://github.com/ianstormtaylor/slate/tree/master/packages/slate-base64-serializer/Changelog.md)
- [`slate-dev-logger`](https://github.com/ianstormtaylor/slate/tree/master/packages/slate-dev-logger/Changelog.md)
- [`slate-html-serializer`](https://github.com/ianstormtaylor/slate/tree/master/packages/slate-html-serializer/Changelog.md)
- [`slate-hyperscript`](https://github.com/ianstormtaylor/slate/tree/master/packages/slate-hyperscript/Changelog.md)
- [`slate-plain-serializer`](https://github.com/ianstormtaylor/slate/tree/master/packages/slate-plain-serializer/Changelog.md)
- [`slate-prop-types`](https://github.com/ianstormtaylor/slate/tree/master/packages/slate-prop-types/Changelog.md)
- [`slate-react`](https://github.com/ianstormtaylor/slate/tree/master/packages/slate-react/Changelog.md)
- [`slate-simulator`](https://github.com/ianstormtaylor/slate/tree/master/packages/slate-simulator/Changelog.md)

View File

@ -10,17 +10,29 @@ This is important because the `Change` model is responsible for ensuring that ev
There are a handled of different categories of changes that ship with Slate by default, and understanding them may help you understand which methods to reach for when trying to write your editor's logic...
- **Selection changes** are changes like `blur()`, `collapseToStart()`, etc. that change the `state.selection` model and update the user's cursor without affecting the content of the document.
### On the Selection
- **Document at range changes** are changes like `deleteAtRange()`, `addMarkAtArange()`, etc. that take in a [`Range`](./range.md) argument and apply a change to the document for all of the content in that range.
These are changes like `blur()`, `collapseToStart()`, etc. that change the `state.selection` model and update the user's cursor without affecting the content of the document.
- **Document at current selection changes** are changes like `delete()`, `addMark()`, etc. that don't need to take in a range argument, because they apply make their edits based on where the user's current selection is. These are often what you want to use when programmatically editing "like a user".
### On the Document at a Specific Range
- **Node changes** are changes like `removeNodeByKey()`, `setNodeByKey()`, etc. that take a `key` string referring to a specific node, and then change that node in different ways. These are often what you use when making programmatic changes from inside your custom node components, where you already have a reference to `props.node.key`.
These are changes like `deleteAtRange()`, `addMarkAtArange()`, etc. that take in a [`Range`](./range.md) argument and apply a change to the document for all of the content in that range.
- **State changes** are changes like `setData()`, `setDecorations()`, etc. that act on the other top-level properties of the [`State`](../reference/slate/state.md) object. These are more advanced.
### On the Document at the Current Selection
- **History changes** are changes like `undo()` and `redo()` that use the operation history and redo or undo changes that have already happened. You generally don't need to worry about these, because they're already bound to the keyboard shortcuts you'd expect, and the user can use them.
These are changes like `delete()`, `addMark()`, etc. that don't need to take in a range argument, because they apply make their edits based on where the user's current selection is. These are often what you want to use when programmatically editing "like a user".
### On a Specific Node
These are changes like `removeNodeByKey()`, `setNodeByKey()`, etc. that take a `key` string referring to a specific node, and then change that node in different ways. These are often what you use when making programmatic changes from inside your custom node components, where you already have a reference to `props.node.key`.
### On the Top-level State
These are changes like `setData()`, `setDecorations()`, etc. that act on the other top-level properties of the [`State`](../reference/slate/state.md) object. These are more advanced.
### On the History
These are changes like `undo()` and `redo()` that use the operation history and redo or undo changes that have already happened. You generally don't need to worry about these, because they're already bound to the keyboard shortcuts you'd expect, and the user can use them.
## Making Changes
@ -39,11 +51,11 @@ function onKeyDown(event, change, editor) {
}
```
Any change methods you call will be applied, and when the event handler stack is finished resolving, the editor will automatically update with those changes.
Any change methods you call will be applied, and when the event handler stack is finished resolving, the editor will automatically update with those changes.
### 2. From Custom Node Components
The second place you might want to make changes is from an event handler inside a custom node component. For example, you might have an `<Image>` component and you want to make a change when the image is clicked.
The second place you is inside a custom node component. For example, you might have an `<Image>` component and you want to make a change when the image is clicked.
In that case, you'll need to use the `change()` method on the Slate [`<Editor>`](../reference/slate-react/editor.md) which you have available as `props.editor`. For example...
@ -51,17 +63,14 @@ In that case, you'll need to use the `change()` method on the Slate [`<Editor>`]
class Image extends React.Component {
onClick = (event) => {
const { editor, node } = this.props
editor.change((change) => {
change.removeNodeByKey(node.key)
this.props.editor.change((change) => {
change.removeNodeByKey(this.props.node.key)
})
}
render() {
<img
{...props.attributes}
src={props.node.data.get('src')}
{...this.props.attributes}
onClick={this.onClick}
/>
}
@ -69,7 +78,7 @@ class Image extends React.Component {
}
```
The `editor.change()` method will create a new [`Change`](../reference/slate/change.md) object for you, based on the editor's current state. You can then call any change methods you want, and they the new state will be applied to the editor.
The `editor.change()` method will create a new [`Change`](../reference/slate/change.md) object for you, based on the editor's current state. You can then call any change methods you want, and the new state will be applied to the editor.
### 3. From Outside Slate

View File

@ -8,39 +8,6 @@ All of the [`Change`](./change.md) methods result in operations being created an
There are a handful of Slate operation types. The goal is to have the fewest possible types, while still maintaining the necessary semantics for collaborative editing to work.
## Properties
### `mark`
`Array`
A mark that is being added or removed by the operation, or being used as a comparison point when updating an existing mark.
### `marks`
`Array`
A set of marks that are being added by the operation.
### `offset`
`Number`
The offset inside a [`Text`](./text.md) node that the operation acts on.
### `path`
`Array`
The path to the node the operation acts on. The array contains a list of indexes, representing where the node is in the `document` hierarchy.
### `text`
`String`
The text that is being inserted or removed by the operation.
### `type`
`String`
The `type` of the operation.
## Text Operations
### `insert_text`