Update examples in docs, editable voids example (#4925)

* Update examples in docs, editable voids example

* Update typescript docs

docs/concepts/12-typescript.md

@@ -35,24 +35,25 @@ declare module 'slate' {
 
 ## Annotations in the Editor
 
-Annotate `useState` w/ `<Descendant[]>` and the editor's initial value w/ your custom Element type.
+Annotate the editor's initial value w/ `Descendant[]`.
 
 ```tsx
 import React, { useMemo, useState } from 'react'
 import { createEditor, Descendant } from 'slate'
 import { Slate, Editable, withReact } from 'slate-react'
 
-const App = () => {
-  const initialValue: Descendant[] = [
+const initialValue: Descendant[] = [
   {
     type: 'paragraph',
     children: [{ text: 'A line of text in a paragraph.' }],
   },
-  ]
+]
+
+const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
-  const [value, setValue] = useState<Descendant[]>(initialValue)
+
   return (
-    <Slate editor={editor} value={value} onChange={setValue}>
+    <Slate editor={editor} value={initialValue}>
       <Editable />
     </Slate>
   )

docs/walkthroughs/01-installing-slate.md

@@ -95,7 +95,6 @@ const initialValue = []
 
 const App = () => {
   const [editor] = useState(() => withReact(createEditor()))
-  const [value, setValue] = useState([])
   return (
     // Add the editable component inside the context.
     <Slate editor={editor} value={initialValue}>
@@ -122,7 +121,6 @@ const initialValue = [
 
 const App = () => {
   const [editor] = useState(() => withReact(createEditor())
-  const [value, setValue] = useState()
 
   return (
     <Slate editor={editor} value={initialValue}>

docs/walkthroughs/04-applying-custom-formatting.md

@@ -73,7 +73,7 @@ const App = () => {
   }, [])
 
   return (
-    <Slate editor={editor} value={value}>
+    <Slate editor={editor} value={initialValue}>
       <Editable
         renderElement={renderElement}
         onKeyDown={event => {

site/examples/editable-voids.tsx

@@ -9,14 +9,13 @@ import { Button, Icon, Toolbar } from '../components'
 import { EditableVoidElement } from './custom-types'
 
 const EditableVoidsExample = () => {
-  const [value, setValue] = useState<Descendant[]>(initialValue)
   const editor = useMemo(
     () => withEditableVoids(withHistory(withReact(createEditor()))),
     []
   )
 
   return (
-    <Slate editor={editor} value={value} onChange={setValue}>
+    <Slate editor={editor} value={initialValue}>
       <Toolbar>
         <InsertEditableVoidButton />
       </Toolbar>