mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-13 18:53:59 +02:00
Code Issues Releases Wiki Activity

Update 01-interfaces.md (#4424)

Browse Source 
* Update 01-interfaces.md

* Update docs/concepts/01-interfaces.md

* Update docs/concepts/01-interfaces.md

* Update docs/concepts/01-interfaces.md

* Update docs/concepts/01-interfaces.md

Co-authored-by: Dylan Schiemann <dylan@dojotoolkit.org>
This commit is contained in:
Pulkit Singh
2021-08-09 03:18:16 +05:30
committed by GitHub
parent ba8e5d8bc2
commit 706f2fc072
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
docs/concepts/01-interfaces.md
View File

@@ -12,7 +12,7 @@ Which means it must have a `text` property with a string of content.
But **any** other custom properties are also allowed, and completely up to you. This lets you tailor your data to your specific domain and use case, adding whatever formatting logic you'd like, without Slate getting in the way.
This interface-based approach separates Slate from most other richtext editors which require you to work with their hand-rolled "model" classes, and makes it much easier to reason about. It also means that it avoids startup time penalties related to "initializing" the data model.
This interface-based approach separates Slate from most other rich text editors which require you to work with their hand-rolled "model" classes and makes it much easier to reason about. It also means that it avoids startup time penalties related to "initializing" the data model.
## Custom Properties
@@ -24,9 +24,9 @@ interface Element {
}
```
This is a very permissive interface. All it requires is that the `children` property be defined containing the element's child nodes.
This is a very permissive interface. All it requires is that the `children` property gets defined containing the element's child nodes.
But you can extend elements \(or any other interface\) with your own custom properties that are specific to your domain. For example, you might have "paragraph" and "link" elements:
But you can extend elements \(or any other interface\) with your custom properties that are specific to your domain. For example, you might have "paragraph" and "link" elements:
```javascript
const paragraph = {
@@ -41,13 +41,13 @@ const link = {
}
```
The `type` and `url` properties there are your own custom API. Slate sees that they exist, but it doesn't ever use them for anything. However, when it goes to render a link element you'll receive an object with the custom properties attached, so that you can render it as:
The `type` and `url` properties are your custom API. Slate sees that they exist, but doesn't use them. However, when Slate renders a link element, you'll receive an object with the custom properties attached so that you can render it as:
```jsx
<a href={element.url}>{element.children}</a>
```
When getting started with Slate, it's important to understand all of the interfaces it defines. There are a handful of them that are discussed in each of the guides.
When getting started with Slate, it's important to understand all of the interfaces it defines. There are a handful of interfaces that are discussed in each of the guides.
## Helper Functions
@@ -79,11 +79,11 @@ if (Range.isCollapsed(range)) {
}
```
There are lots of helper functions available for all of the common use cases when working with the different interfaces. When getting started it pays to read through them all, because you can often simplify complex logic into just a handful of lines of code with them.
There are many helper functions available for all common use cases when working with different interfaces. When getting started it helps to read through all of them so you can often simplify complex logic into just a handful of lines of code.
## Custom Helpers
In addition to the built-in helper functions, you might want to define your own custom helper functions and expose them on your own custom namespaces.
In addition to the built-in helper functions, you might want to define your custom helper functions and expose them on your custom namespaces.
For example, if your editor supports images, you might want a helper that determines if an element is an image element: