mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-07-31 04:20:26 +02:00
Code Issues Releases Wiki Activity

Replace useMemo with useState in the docs (#5022)

Browse Source 
* Replace useMemo with useState

* Fix formatting
This commit is contained in:
Gabin Aureche
2022-06-11 16:58:19 +02:00
committed by GitHub
parent 9ae372875d
commit 22308b3417
10 changed files with 28 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/concepts/09-rendering.md
View File

@@ -13,7 +13,7 @@ import { createEditor } from 'slate'
import { Slate, Editable, withReact } from 'slate-react'
const MyEditor = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
const renderElement = useCallback(({ attributes, children, element }) => {
switch (element.type) {
case 'quote':
@@ -115,7 +115,7 @@ A common use case for this is rendering a toolbar with formatting buttons that a
```jsx
const MyEditor = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
return (
<Slate editor={editor}>
<Toolbar />

4
docs/concepts/12-typescript.md
View File

@@ -38,7 +38,7 @@ declare module 'slate' {
Annotate the editor's initial value w/ `Descendant[]`.
```tsx
import React, { useMemo, useState } from 'react'
import React, { useState, useState } from 'react'
import { createEditor, Descendant } from 'slate'
import { Slate, Editable, withReact } from 'slate-react'
@@ -50,7 +50,7 @@ const initialValue: Descendant[] = [
]
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
return (
<Slate editor={editor} value={initialValue}>

2
docs/libraries/slate-history.md
View File

@@ -17,5 +17,5 @@ The `withHistory` plugin keeps track of the operation history of a Slate editor
When used with `withReact`, `withHistory` should be applied inside. For example:
```javascript
const editor = useMemo(() => withReact(withHistory(createEditor())), [])
const [editor] = useState(() => withReact(withHistory(createEditor())))
```

2
docs/libraries/slate-react.md
View File

@@ -195,7 +195,7 @@ Adds React and DOM specific behaviors to the editor.
When used with `withHistory`, `withReact` should be applied outside. For example:
```javascript
const editor = useMemo(() => withReact(withHistory(createEditor())), [])
const [editor] = useState(() => withReact(withHistory(createEditor())))
```
## Utils

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

@@ -18,7 +18,7 @@ Once you've installed Slate, you'll need to import it.
```jsx
// Import React dependencies.
import React, { useMemo } from 'react'
import React, { useState } from 'react'
// Import the Slate editor factory.
import { createEditor } from 'slate'
@@ -40,7 +40,7 @@ The next step is to create a new `Editor` object. We want the editor to be stabl
```jsx
const App = () => {
// Create a Slate editor object that won't change across renders.
const editor = useMemo(() => withReact(createEditor()), [])
const editor = useState(() => withReact(createEditor()))
return null
}
```
@@ -74,7 +74,7 @@ The provider component keeps track of your Slate editor, its plugins, its value,
const initialValue = []
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
// Render the Slate context.
return <Slate editor={editor} value={initialValue} />
}
@@ -94,7 +94,7 @@ Okay, so the next step is to render the `<Editable>` component itself:
const initialValue = []
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
return (
// Add the editable component inside the context.
<Slate editor={editor} value={initialValue}>
@@ -120,7 +120,7 @@ const initialValue = [
]
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
return (
<Slate editor={editor} value={initialValue}>

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

@@ -17,7 +17,7 @@ const initialValue = [
]
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
return (
<Slate editor={editor} value={initialValue}>
@@ -38,7 +38,7 @@ const initialValue = [
]
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
return (
<Slate editor={editor} value={initialValue}>
@@ -68,7 +68,7 @@ const initialValue = [
]
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
return (
<Slate editor={editor} value={initialValue}>

8
docs/walkthroughs/03-defining-custom-elements.md
View File

@@ -15,7 +15,7 @@ const initialValue = [
]
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
return (
<Slate editor={editor} value={initialValue}>
@@ -74,7 +74,7 @@ const initialValue = [
]
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
// Define a rendering function based on the element passed to `props`. We use
// `useCallback` here to memoize the function for subsequent renders.
@@ -130,7 +130,7 @@ const initialValue = [
]
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
const renderElement = useCallback(props => {
switch (props.element.type) {
@@ -188,7 +188,7 @@ const initialValue = [
]
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
const renderElement = useCallback(props => {
switch (props.element.type) {

6
docs/walkthroughs/04-applying-custom-formatting.md
View File

@@ -24,7 +24,7 @@ const initialValue = [
]
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
return (
<Slate editor={editor} value={initialValue}>
@@ -60,7 +60,7 @@ const initialValue = [
]
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
const renderElement = useCallback(props => {
switch (props.element.type) {
@@ -146,7 +146,7 @@ const initialValue = [
]
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
const renderElement = useCallback(props => {
switch (props.element.type) {

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

@@ -19,7 +19,7 @@ const initialValue = [
]
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
const renderElement = useCallback(props => {
switch (props.element.type) {
@@ -126,7 +126,7 @@ const initialValue = [
]
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
const renderElement = useCallback(props => {
switch (props.element.type) {
@@ -183,7 +183,7 @@ const initialValue = [
]
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
const renderElement = useCallback(props => {
switch (props.element.type) {

8
docs/walkthroughs/06-saving-to-a-database.md
View File

@@ -15,7 +15,7 @@ const initialValue = [
]
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
return (
<Slate editor={editor} value={initialValue}>
@@ -40,7 +40,7 @@ const initialValue = [
]
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
return (
<Slate
@@ -69,7 +69,7 @@ But... if you refresh the page, everything is still reset. That's because we nee
```jsx
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
// Update the initial content to be pulled from Local Storage if it exists.
const initialValue = useMemo(
() =>
@@ -135,7 +135,7 @@ const deserialize = string => {
}
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [editor] = useState(() => withReact(createEditor()))
// Use our deserializing function to read the data from Local Storage.
const initialValue = useMemo(
deserialize(localStorage.getItem('content')) || '',