mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-21 14:41:23 +02:00
Code Issues Releases Wiki Activity

Add more details about slate-html-serializer (#1139)

Browse Source 
* Add more details about slate-html-serializer

* Update index.md
This commit is contained in:
Brian Bucknam
2017-09-19 08:13:36 -07:00
committed by Ian Storm Taylor
parent cb3baf4de4
commit 692f7b474f
1 changed files with 12 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/reference/slate-html-serializer/index.md
View File

@@ -35,7 +35,9 @@ For an example of the HTML serializer in action, check out the [`paste-html` exa
```js ```js
new Html({ new Html({
rules: Array rules: Array,
defaultBlock: String|Object|Block,
parseHtml: Function,
}) })
``` ```
@@ -54,6 +56,8 @@ A set of properties to use for blocks which do not match any rule. Can be a stri
A function to parse an HTML string and return a DOM object. Defaults to using the native `DOMParser` in browser environments that support it. For older browsers or server-side rendering, you can include the [parse5](https://www.npmjs.com/package/parse5) package and pass `parse5.parseFragment` as the `parseHtml` option. A function to parse an HTML string and return a DOM object. Defaults to using the native `DOMParser` in browser environments that support it. For older browsers or server-side rendering, you can include the [parse5](https://www.npmjs.com/package/parse5) package and pass `parse5.parseFragment` as the `parseHtml` option.
This parse function should return the `<body>` node of the DOM.
## Methods ## Methods
### `Html.deserialize` ### `Html.deserialize`
@@ -85,7 +89,7 @@ Each rule must define two properties:
``` ```
#### `rule.deserialize` ### `rule.deserialize`
`rule.deserialize(el: Element, next: Function) => Object || Void` `rule.deserialize(el: Element, next: Function) => Object || Void`
The `deserialize` function receives a DOM element and should return a plain Javascript object representing the deserialized state, or nothing if the rule in question doesn't know how to deserialize the object, in which case the next rule in the stack will be attempted. The `deserialize` function receives a DOM element and should return a plain Javascript object representing the deserialized state, or nothing if the rule in question doesn't know how to deserialize the object, in which case the next rule in the stack will be attempted.
@@ -121,9 +125,13 @@ The object should be one of:
``` ```
#### `rule.serialize` ### `rule.serialize`
`rule.serialize(object: Node || Mark || String, children: String || Element || Array) => Element || Void` `rule.serialize(object: Node || Mark || String, children: String || Element || Array) => Element || Void`
The `serialize` function should return a React element representing the serialized HTML, or nothing if the rule in question doesn't know how to serialize the object, in which case the next rule in the stack will be attempted. The `serialize` function should return a React element representing the serialized HTML, or nothing if the rule in question doesn't know how to serialize the object, in which case the next rule in the stack will be attempted.
The function will be called with either a `Node`, a `Mark`, or a special `String` immutable object, with a `kind: 'string'` property and a `text` property containing the text string. The function will be called with either a `Node`, a `Mark`, or a special `String` immutable object, with a `kind: 'string'` property and a `text` property containing the text string.
### Default Text Rule
The HTML serializer includes a default rule to handle "normal text". That is, a final rule exists to serialize `kind: 'string'` text (replacing line feed characters with `<br>`), and to deserialize text inversely. To avoid this default handling simply provide your own `deserialize` and `serialize` rules for text.