1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-29 01:50:06 +02:00

add serializer docs

This commit is contained in:
Ian Storm Taylor
2016-07-17 15:37:05 -07:00
parent 04dee735f5
commit 93e2487c6e
5 changed files with 245 additions and 0 deletions

View File

@@ -131,6 +131,10 @@ If you're using Slate for the first time, check out the [Getting Started](./docs
- [State](./docs/reference/models/state.md)
- [Text](./docs/reference/text.md)
- [Transform](./docs/reference/models/transform.md)
- Serializers
- [Html](./docs/reference/serializers/html.md)
- [Plain](./docs/reference/serializers/plain.md)
- [Raw](./docs/reference/serializers/raw.md)
- Plugins
- [Plugins](./docs/reference/plugins/plugins.md)
- [Core](./docs/reference/plugins/core.md)

View File

@@ -18,6 +18,10 @@ This is the full reference documentation for all of the pieces of Slate, broken
- [State](./models/state.md)
- [Text](./text.md)
- [Transform](./models/transform.md)
- **Serializers**
- [Html](./html.md)
- [Plain](./plain.md)
- [Raw](./raw.md)
- **Plugins**
- [Plugins](./plugins/plugins.md)
- [Core](./plugins/core.md)

View File

@@ -0,0 +1,69 @@
# `Html`
```js
import { Html } from 'slate'
```
The `Html` serializer lets you parse and stringify arbitrary HTML content, based on your specific schema's use case. You must pass a series of `rules` to define how your Slate schema should be serialized to and from HTML.
For an example of the `Html` serializer in action, check out the [`paste-html` example](../../examples/paste-html).
- [Example](#example)
- [Properties](#properties)
- [`rules`]
- [Methods](#methods)
- [`deserialize`](#deserialize)
- [`serialize`](#serialize)
- [Rules](#rules)
- [Rule Properties](#rule-properties)
- [`rule.deserialize`](#ruledeserialize)
- [`rule.serialize`](#ruleserialize)
## Example
```txt
The Slate editor gives you full control over the logic you can add.\n
In its simplest form, when representing plain text, Slate is a glorified <textarea>. But you can augment it to be much more than that.\n
Check out http://slatejs.org for examples!
```
## Properties
### `rules`
`Array`
An array of rules to initialize the `Html` serializer with, defining your schema.
## Methods
### `Html.deserialize`
`Html.deserialize(html: String) => State`
Deserialize an HTML `string` into a [`State`](../models/state.md). How the string is deserialized will be determined by the rules that the `Html` serializer was constructed with.
### `Html.serialize`
`Html.serialize(state: State) => String`
Serialize a `state` into an HTML string. How the string is serialized will be determined by the rules that the `Html` serializer was constructed with.
## Rules
To initialize an `Html` serialize, you must pass it an array of rules, defining your schema. Each rule defines how to deserialize and serialize a node or mark, by implementing two functions.
### Rule Properties
Each rule must define two properties:
#### `rule.deserialize`
`rule.deserialize(el: CheerioElement, next: Function) => Object`
#### `rule.serialize`
`rule.serialize(object: Node || Mark) => ReactElement`
_To implement still..._

View File

@@ -0,0 +1,35 @@
# `Plain`
```js
import { Plain } from 'slate'
```
A serializer that converts a Slate [`State`](../models/state.md) to and from a plain text string.
- [Example](#example)
- [Static Methods](#methods)
- [`Plain.deserialize`](#plaindeserialize)
- [`Plain.serialize`](#plainserialize)
## Example
```txt
The Slate editor gives you full control over the logic you can add.\n
In its simplest form, when representing plain text, Slate is a glorified <textarea>. But you can augment it to be much more than that.\n
Check out http://slatejs.org for examples!
```
## Methods
### `Plain.deserialize`
`Plain.deserialize(string: String) => State`
Deserialize a plain text `string` into a [`State`](../models/state.md). A series of blocks will be created by splitting the input string on `\n` characters. Each block is given a type of `'line'`.
### `Plain.serialize`
`Plain.serialize(state: State) => String`
Serialize a `state` into a plain text string. Each direct child block of the document will be separated by a `\n` character.

View File

@@ -0,0 +1,133 @@
# `Raw`
```js
import { Raw } from 'slate'
```
The raw JSON serialized that ships by default with Slate. It converts a [`State`](../models/state.md) into a JSON object.
The raw JSON object created will omit default-value properties to reduce the serialized data's size. For example, if the dictionary of [`Data`](../models/data.md) for a [`Node`](../models/node.md) is empty, it will be omitted.
In the raw format, text is represented as "ranges", which are a more compact way to represent the formatting applied to characters than the immutable model Slate uses internally.
- [Example](#example)
- [Static Methods](#methods)
- [`Raw.deserialize`](#rawdeserialize)
- [`Raw.serialize`](#rawserialize)
## Example
```json
{
"nodes": [
{
"kind": "block",
"type": "paragraph",
"nodes": [
{
"kind": "text",
"ranges": [
{
"text": "The Slate editor gives you "
},
{
"text": "complete",
"marks": [
{
"type": "italic"
}
]
},
{
"text": "control over the logic you can add. For example, it's fairly common to want to add markdown-like shortcuts to editors. So that, when you start a line with \"> \" you get a blockquote that looks like this:"
}
]
}
]
},
{
"kind": "block",
"type": "block-quote",
"nodes": [
{
"kind": "text",
"ranges": [
{
"text": "A wise quote."
}
]
}
]
},
{
"kind": "block",
"type": "paragraph",
"nodes": [
{
"kind": "text",
"ranges": [
{
"text": "Order when you start a line with \"## \" you get a level-two heading, like this:"
}
]
}
]
},
{
"kind": "block",
"type": "heading-two",
"nodes": [
{
"kind": "text",
"ranges": [
{
"text": "Try it out at "
}
]
},
{
"kind": "inline",
"type": "link",
"data": {
"href": "http://slatejs.org"
},
"nodes": [
{
"kind": "text",
"ranges": [
{
"text": "http://slatejs.org"
}
]
}
]
},
{
"kind": "text",
"ranges": [
{
"text": "!"
}
]
}
]
}
]
}
```
## Methods
### `Raw.deserialize`
`Raw.deserialize(object: Object) => State`
Deserialize a raw JSON `object` into a [`State`](../models/state.md).
### `Raw.serialize`
`Raw.serialize(state: State) => Object`
Serialize a `state` into a raw JSON object.