mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-09-01 03:11:44 +02:00
Code Issues Releases Wiki Activity

update walkthroughs

Browse Source
This commit is contained in:
Ian Storm Taylor
2019-12-06 12:06:53 -05:00
parent 624c03339b
commit be8b7222ee
6 changed files with 370 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
docs/walkthroughs/02-adding-event-handlers.md
View File

@@ -11,8 +11,24 @@ Here's our app from earlier:
```js
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [selection, setSelection] = useState(null)
const [value, setValue] = useState([
{
type: 'paragraph',
children: [{ text: 'A line of text in a paragraph.' }],
},
])
return (
<Slate editor={editor} defaultValue={defaultValue}>
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Editable />
</Slate>
)
@@ -24,8 +40,24 @@ Now we add an `onKeyDown` handler:
```js
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [selection, setSelection] = useState(null)
const [value, setValue] = useState([
{
type: 'paragraph',
children: [{ text: 'A line of text in a paragraph.' }],
},
])
return (
<Slate editor={editor} defaultValue={defaultValue}>
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Editable
// Define a new handler which prints the key that was pressed.
onKeyDown={event => {
@@ -46,8 +78,24 @@ Our `onKeyDown` handler might look like this:
```js
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [selection, setSelection] = useState(null)
const [value, setValue] = useState([
{
type: 'paragraph',
children: [{ text: 'A line of text in a paragraph.' }],
},
])
return (
<Slate editor={editor} defaultValue={defaultValue}>
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Editable
onKeyDown={event => {
if (event.key === '&') {