mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-01-17 21:49:20 +01:00
Documents how to implement a Void Element. (#4924)
* Documents how to implement a Void Element. * Tightens up phrasing
This commit is contained in:
parent
4df23c6e41
commit
2b94e17874
@ -11,6 +11,7 @@ interface Element {
|
||||
- [Behavior Types](element.md#element-behavior-types)
|
||||
- [Block vs. Inline](element.md#block-vs-inline)
|
||||
- [Void vs Not Void](element.md#void-vs-not-void)
|
||||
- [Rendering Void Elements](element.md#rendering-void-elements)
|
||||
- [Static methods](element.md#static-methods)
|
||||
- [Retrieval methods](element.md#retrieval-methods)
|
||||
- [Check methods](element.md#check-methods)
|
||||
@ -30,6 +31,25 @@ A "block" element can only be siblings with other "block" elements. An "inline"
|
||||
|
||||
In a not "void" element, Slate handles the rendering of its `children` (e.g. in a paragraph where the `Text` and `Inline` children are rendered by Slate). In a "void" element, the `children` are rendered by the `Element`'s render code.
|
||||
|
||||
#### Rendering Void Elements
|
||||
|
||||
Void Elements must
|
||||
|
||||
- always have one empty child text node (for selection)
|
||||
- render using `attributes` and `children` (so, their outermost HTML element **can't** be an HTML void element)
|
||||
- set `contentEditable={false}` (for Firefox)
|
||||
|
||||
Typical rendering code will resemble this `thematic-break` (horizontal rule) element:
|
||||
|
||||
```javascript
|
||||
return (
|
||||
<div {...attributes} contentEditable={false}>
|
||||
{children}
|
||||
<hr />
|
||||
</div>
|
||||
)
|
||||
```
|
||||
|
||||
## Static methods
|
||||
|
||||
### Retrieval methods
|
||||
|
@ -116,7 +116,7 @@ Elements default to being non-void, meaning that their children are fully editab
|
||||
|
||||
> 🤖 This is a concept borrowed from the HTML spec, see [Void Elements](https://www.w3.org/TR/2011/WD-html-markup-20110405/syntax.html#void-element).
|
||||
|
||||
You can define which elements are treated as void by overriding the `editor.isVoid` function. \(By default it always returns `false`.\)
|
||||
You can define which elements are treated as void by overriding the `editor.isVoid` function. \(By default it always returns `false`.\) See [Rendering Void Elements](../api/nodes/element.md#rendering-void-elements) for implementation details.
|
||||
|
||||
## `Text`
|
||||
|
||||
@ -138,4 +138,4 @@ const text = {
|
||||
```
|
||||
|
||||
Text nodes too can contain any custom properties you want, and that's how you implement custom formatting like **bold**, _italic_, `code`, etc.
|
||||
These custom properties are sometimes called [marks](../api/nodes/editor#mark-methods).
|
||||
These custom properties are sometimes called [marks](../api/nodes/editor.md#mark-methods).
|
||||
|
Loading…
x
Reference in New Issue
Block a user