mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-01-19 06:18:16 +01:00
Code Issues Releases Wiki Activity

update components readme

Browse Source
This commit is contained in:
Ian Storm Taylor 2016-07-06 15:43:59 -07:00
parent eeb571cf03
commit bee2a6d9be
1 changed files with 14 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
lib/components/Readme.md
View File

@ -1,17 +1,21 @@
This directory contains the React components that Slate renders. The only one that is publicly accessible is the `Editor`, which composes the others.
This directory contains the React components that Slate renders. The only one that is publicly accessible is the `Editor`, which composes the others. But here's what they all do:
#### Editor
The `Editor` is the highest-level component that you render from inside your application. It's goal is to present a very clean API for the user, and to encapsulate all of the "plugin-level" logic.
The `Editor` is the highest-level component that you render from inside your application. Its goal is to present a very clean API for the user, and to encapsulate all of the plugin-level logic.
Many of the properties passed into the editor are combined to create a plugin of its own, that is given the highest priority. This makes overriding core logic super simple, without having to write a separate plugin.
#### Content
`Content` is rendered by the `Editor`. It's goal is to encapsulate all of the `contenteditable` logic, so that the `Editor` doesn't have to be aware of it. Therefore, `Content` handles things attaching event listeners to the DOM and triggering updates based on events.
`Content` is rendered by the `Editor`. Its goal is to encapsulate all of the `contenteditable` logic, so that the `Editor` doesn't have to be aware of it.
You'll notice there are **no** `Block` or `Inline` components here. That's because those rendering components are provided by the user, and rendered directly by the `Content` component. You can find the default renderers in the [`Core`](../plugins/core.js) plugin's logic.
`Content` handles things attaching event listeners to the DOM and triggering updates based on events. However, it does not have any awareness of "plugins" as a concept, bubbling all of that logic up to the `Editor` itself.
You'll notice there are **no** `Block` or `Inline` components. That's because those rendering components are provided by the user, and rendered directly by the `Content` component. You can find the default renderers in the [`Core`](../plugins/core.js) plugin's logic.
#### Text
@ -21,9 +25,13 @@ A `Text` component is rendered for each [`Text`](../models) model in the documen
#### Leaf
The `Leaf` component is the lowest-level component in the React tree. One is rendered for each range of text with a unique set of marks. It handles applying the mark styles to the text, and translating the current [`Selection`](../models) into a real DOM selection.
The `Leaf` component is the lowest-level component in the React tree. Its goal is to encapsulate the logic that works at the lowest level, on the actual strings of text in the DOM.
One `Leaf` component is rendered for each range of text with a unique set of [`Marks`](../models). It handles both applying the mark styles to the text, and translating the current [`Selection`](../models) into a real DOM selection, since it knows about the string offsets.
#### Void
The `Void` component is a wrapper that gets rendered around [`Block`](../models) and [`Inline`](../models) nodes that have `isVoid: true`. This component handles rendering a few extra spacer elements that are required to keep selections and keyboard shortcuts on void nodes functioning like you'd expect them two. It also ensures that everything inside the void node is not editable, so that it doesn't get the editor into an unknown state.
The `Void` component is a wrapper that gets rendered around [`Block`](../models) and [`Inline`](../models) nodes that have `isVoid: true`. Its goal is to encapsule the logic needed to ensure that void nodes function as expected.
To achieve this, `Void` renders a few extra elements that are required to keep selections and keyboard shortcuts on void nodes functioning like you'd expect them two. It also ensures that everything inside the void node is not editable, so that it doesn't get the editor into an unknown state.