mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-28 17:39:57 +02:00
Code Issues Releases Wiki Activity

Update 01-installing-slate.md (#5388)

Browse Source 
add initial value with children so other examples don't break
This commit is contained in:
trevorbye
2023-04-18 05:01:19 -07:00
committed by GitHub
parent 00bce4c880
commit 161af4c70d
1 changed files with 13 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
docs/walkthroughs/01-installing-slate.md
View File

@@ -71,7 +71,12 @@ Next up is to render a `<Slate>` context provider.
The provider component keeps track of your Slate editor, its plugins, its value, its selection, and any changes that occur. It **must** be rendered above any `<Editable>` components. But it can also provide the editor state to other components like toolbars, menus, etc. using the `useSlate` hook. The provider component keeps track of your Slate editor, its plugins, its value, its selection, and any changes that occur. It **must** be rendered above any `<Editable>` components. But it can also provide the editor state to other components like toolbars, menus, etc. using the `useSlate` hook.
```jsx ```jsx
const initialValue = [] const initialValue = [
{
type: 'paragraph',
children: [{ text: 'A line of text in a paragraph.' }],
},
]
const App = () => { const App = () => {
const [editor] = useState(() => withReact(createEditor())) const [editor] = useState(() => withReact(createEditor()))
@@ -88,10 +93,15 @@ This is a slightly different mental model than things like `<input>` or `<textar
By having a shared context, those other components can execute commands, query the editor's state, etc. By having a shared context, those other components can execute commands, query the editor's state, etc.
Okay, so the next step is to render the `<Editable>` component itself: The next step is to render the `<Editable>` component itself. The component acts like `contenteditable`; anywhere you render it will render an editable richtext document for the nearest editor context.
```jsx ```jsx
const initialValue = [] const initialValue = [
{
type: 'paragraph',
children: [{ text: 'A line of text in a paragraph.' }],
},
]
const App = () => { const App = () => {
const [editor] = useState(() => withReact(createEditor())) const [editor] = useState(() => withReact(createEditor()))
@@ -104,32 +114,6 @@ const App = () => {
} }
``` ```
The `<Editable>` component acts like `contenteditable`. Anywhere you render it will render an editable richtext document for the nearest editor context.
There's only one last step. So far we've been using an empty `[]` array as the initial value of the editor, so it has no content. Let's fix that by defining an initial value.
The value is just plain JSON. Here's one containing a single paragraph block with some text in it:
```jsx
// Add the initial value.
const initialValue = [
{
type: 'paragraph',
children: [{ text: 'A line of text in a paragraph.' }],
},
]
const App = () => {
const [editor] = useState(() => withReact(createEditor()))
return (
<Slate editor={editor} value={initialValue}>
<Editable />
</Slate>
)
}
```
There you have it! There you have it!
That's the most basic example of Slate. If you render that onto the page, you should see a paragraph with the text `A line of text in a paragraph.` And when you type, you should see the text change! That's the most basic example of Slate. If you render that onto the page, you should see a paragraph with the text `A line of text in a paragraph.` And when you type, you should see the text change!