mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-04-16 03:12:48 +02:00
Update docs to reflect Slate is an uncontrolled component (#4768)
* Updated documentation * Update docs/walkthroughs/01-installing-slate.md Co-authored-by: Dylan Schiemann <dylan@dojotoolkit.org> * fix: formatting errors Co-authored-by: Dylan Schiemann <dylan@dojotoolkit.org>
This commit is contained in:
parent
1b0e7c6b92
commit
51e02de9de
@ -110,7 +110,9 @@ const App = () => {
|
||||
}
|
||||
```
|
||||
|
||||
You can think of the `<Slate>` component as providing a "controlled" context to every component underneath it.
|
||||
You can think of the `<Slate>` component as providing a context to every component underneath it.
|
||||
|
||||
> As of v0.67 the Slate Provider's "value" prop is now only used as initial state for editor.children. If your code relies on replacing editor.children you should do so by replacing it directly instead of relying on the "value" prop to do this for you. See [Slate PR 4540](https://github.com/ianstormtaylor/slate/pull/4540) for a more in-depth discussion.
|
||||
|
||||
This is a slightly different mental model than things like `<input>` or `<textarea>`, because richtext documents are more complex. You'll often want to include toolbars, or live previews, or other complex components next to your editable content.
|
||||
|
||||
|
@ -166,3 +166,37 @@ That works! Now you're working with plain text.
|
||||
You can emulate this strategy for any format you like. You can serialize to HTML, to Markdown, or even to your own custom JSON format that is tailored to your use case.
|
||||
|
||||
> 🤖 Note that even though you _can_ serialize your content however you like, there are tradeoffs. The serialization process has a cost itself, and certain formats may be harder to work with than others. In general we recommend writing your own format only if your use case has a specific need for it. Otherwise, you're often better leaving the data in the format Slate uses.
|
||||
|
||||
If you want to update the editor's content in response to events from outside of slate, you need to change the children property directly. The simplest way is to replace the value of editor.children `editor.children = newValue` and trigger a re-rendering (e.g. by calling `setValue(newValue)` in the example above). Alternatively, you can use slate's internal operations to transform the value, for example:
|
||||
|
||||
```javascript
|
||||
/**
|
||||
* resetNodes resets the value of the editor.
|
||||
* It should be noted that passing the `at` parameter may cause a "Cannot resolve a DOM point from Slate point" error.
|
||||
*/
|
||||
resetNodes<T extends Node>(
|
||||
editor: Editor,
|
||||
options: {
|
||||
nodes?: Node | Node[],
|
||||
at?: Location
|
||||
} = {}
|
||||
): void {
|
||||
const children = [...editor.children]
|
||||
|
||||
children.forEach((node) => editor.apply({ type: 'remove_node', path: [0], node }))
|
||||
|
||||
if (options.nodes) {
|
||||
const nodes = Node.isNode(options.nodes) ? [options.nodes] : options.nodes
|
||||
|
||||
nodes.forEach((node, i) => editor.apply({ type: 'insert_node', path: [i], node: node }))
|
||||
}
|
||||
|
||||
const point = options.at && Point.isPoint(options.at)
|
||||
? options.at
|
||||
: Editor.end(editor, [])
|
||||
|
||||
if (point) {
|
||||
Transforms.select(editor, point)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
Loading…
x
Reference in New Issue
Block a user