mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-26 16:44:22 +02:00
Code Issues Releases Wiki Activity

Make onChange prop optional, update examples and docs to treat slate as uncontrolled (#4922)

Browse Source 
* Make onChange prop optional, update examples and docs to treat slate as uncontrolled

* Add changeset
This commit is contained in:
Eric Meier
2022-04-03 16:52:32 +01:00
committed by GitHub
parent 08d5a12c91
commit 9892cf0ffb
29 changed files with 207 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
docs/walkthroughs/05-executing-commands.md
View File

@@ -11,14 +11,15 @@ Let's see how this works.
We'll start with our app from earlier:
```jsx
const initialValue = [
{
type: 'paragraph',
children: [{ text: 'A line of text in a paragraph.' }],
},
]
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [value, setValue] = useState([
{
type: 'paragraph',
children: [{ text: 'A line of text in a paragraph.' }],
},
])
const renderElement = useCallback(props => {
switch (props.element.type) {
@@ -34,7 +35,7 @@ const App = () => {
}, [])
return (
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
<Slate editor={editor} value={initialValue}>
<Editable
renderElement={renderElement}
renderLeaf={renderLeaf}
@@ -117,14 +118,15 @@ const CustomEditor = {
},
}
const initialValue = [
{
type: 'paragraph',
children: [{ text: 'A line of text in a paragraph.' }],
},
]
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [value, setValue] = useState([
{
type: 'paragraph',
children: [{ text: 'A line of text in a paragraph.' }],
},
])
const renderElement = useCallback(props => {
switch (props.element.type) {
@@ -140,7 +142,7 @@ const App = () => {
}, [])
return (
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
<Slate editor={editor} value={initialValue}>
<Editable
renderElement={renderElement}
renderLeaf={renderLeaf}
@@ -173,14 +175,15 @@ const App = () => {
Now our commands are clearly defined and you can invoke them from anywhere we have access to our `editor` object. For example, from hypothetical toolbar buttons:
```jsx
const initialValue = [
{
type: 'paragraph',
children: [{ text: 'A line of text in a paragraph.' }],
},
]
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [value, setValue] = useState([
{
type: 'paragraph',
children: [{ text: 'A line of text in a paragraph.' }],
},
])
const renderElement = useCallback(props => {
switch (props.element.type) {
@@ -197,7 +200,7 @@ const App = () => {
return (
// Add a toolbar with buttons that call the same methods.
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
<Slate editor={editor} value={initialValue}>
<div>
<button
onMouseDown={event => {