diff --git a/docs/api/nodes/element.md b/docs/api/nodes/element.md index 713d68b7a..d125e2f4c 100644 --- a/docs/api/nodes/element.md +++ b/docs/api/nodes/element.md @@ -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 ( +
+ {children} +
+
+) +``` + ## Static methods ### Retrieval methods diff --git a/docs/concepts/02-nodes.md b/docs/concepts/02-nodes.md index 5260f7622..c25995110 100644 --- a/docs/concepts/02-nodes.md +++ b/docs/concepts/02-nodes.md @@ -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).