1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-09-01 19:22:35 +02:00

Update 02-nodes.md (#4442)

* Update 02-nodes.md

* Update 02-nodes.md
This commit is contained in:
Pulkit Singh
2021-08-12 01:25:41 +05:30
committed by GitHub
parent 4cb1837934
commit 69ee04ac14

View File

@@ -3,10 +3,10 @@
The most important types are the `Node` objects: The most important types are the `Node` objects:
- A root-level `Editor` node that contains the entire document's content. - A root-level `Editor` node that contains the entire document's content.
- Container `Element` nodes which have semantic meaning in your domain. - Container `Element` nodes that have semantic meaning in your domain.
- And leaf-level `Text` nodes which contain the document's text. - And leaf-level `Text` nodes which contain the document's text.
These three interfaces are combined together to form a tree—just like the DOM. For example, here's a simple plaintext value: These three interfaces are combined to form a tree—just like the DOM. For example, here's a simple plaintext value:
```javascript ```javascript
const editor = { const editor = {
@@ -50,7 +50,7 @@ We'll cover its functionality later, but the important part as far as nodes are
## `Element` ## `Element`
Elements make up the middle layers of a richtext document. They are the nodes that are custom to your own domain. Their interface is: Elements make up the middle layers of a rich text document. They are the nodes that are custom to your domain. Their interface is:
```typescript ```typescript
interface Element { interface Element {
@@ -58,7 +58,7 @@ interface Element {
} }
``` ```
You can define custom elements for any type of content you want. For example you might have paragraphs and quotes in your data model which are differentiated by a `type` property: You can define custom elements for any type of content you want. For example, you might have paragraphs and quotes in your data model which are differentiated by a `type` property:
```javascript ```javascript
const paragraph = { const paragraph = {
@@ -104,9 +104,9 @@ But in certain cases, like for links, you might want to make them "inline" flowi
> 🤖 This is a concept borrowed from the DOM's behavior, see [Block Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements) and [Inline Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements). > 🤖 This is a concept borrowed from the DOM's behavior, see [Block Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements) and [Inline Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements).
You can define which nodes are treated as inline nodes by overriding the `editor.isInline` function. \(By default it always returns `false`.\) Note that inline nodes cannot be the first or last child of a parent block, nor can it be next to another inline node in the children array. Slate will automatically space these with `{ text: '' }` children by default with [`normalizeNode`](11-normalizing.md#built-in-constraints). You can define which nodes are treated as inline nodes by overriding the `editor.isInline` function. \(By default it always returns `false`.\) Note that inline nodes cannot be the first or last child of a parent block, nor can they be next to another inline node in the `children` array. Slate will automatically space these with `{ text: '' }` children by default with [`normalizeNode`](11-normalizing.md#built-in-constraints).
Elements can either contain block elements or inline elements intermingled with text nodes as children. But elements **cannot** contain some children that are blocks and some that are inlines. Elements can either contain block elements or inline elements intermingled with text nodes as children. But elements **cannot** contain some children that are blocks and some that are inlined.
## Voids ## Voids