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

Change <Slate> to a controlled component (#3216)

* change <Slate> to be a controlled component

* add comment about unstable React API
This commit is contained in:
Ian Storm Taylor
2019-12-05 11:36:44 -05:00
committed by GitHub
parent 4c03b497d9
commit f3fc2c2a54
29 changed files with 305 additions and 110 deletions

View File

@@ -9,7 +9,7 @@ interface Editor {
isInline: (element: Element) => boolean
isVoid: (element: Element) => boolean
normalizeNode: (entry: NodeEntry) => void
onChange: (children: Node[], operations: Operation[]) => void
onChange: () => void
children: Node[]
operations: Operation[]
selection: Range | null

View File

@@ -40,6 +40,7 @@
"@types/mocha": "^5.2.7",
"@types/node": "^12.12.14",
"@types/react": "^16.9.13",
"@types/react-dom": "^16.9.4",
"@typescript-eslint/eslint-plugin": "^2.9.0",
"@typescript-eslint/parser": "^2.9.0",
"babel-eslint": "^10.0.3",

View File

@@ -18,7 +18,6 @@
"@types/debug": "^4.1.5",
"@types/is-hotkey": "^0.1.1",
"@types/lodash": "^4.14.149",
"@types/react": "^16.9.13",
"debounce": "^1.2.0",
"direction": "^1.0.3",
"is-hotkey": "^0.1.6",

View File

@@ -0,0 +1,41 @@
import React, { useMemo } from 'react'
import { Editor, Node, Range } from 'slate'
import { ReactEditor } from '../plugin/react-editor'
import { FocusedContext } from '../hooks/use-focused'
import { EditorContext } from '../hooks/use-editor'
import { SlateContext } from '../hooks/use-slate'
import { EDITOR_TO_ON_CHANGE } from '../utils/weak-maps'
/**
* A wrapper around the provider to handle `onChange` events, because the editor
* is a mutable singleton so it won't ever register as "changed" otherwise.
*/
export const Slate = (props: {
editor: Editor
value: Node[]
selection: Range | null
children: React.ReactNode
onChange: (children: Node[], selection: Range | null) => void
[key: string]: any
}) => {
const { editor, children, onChange, value, selection, ...rest } = props
const context: [Editor] = useMemo(() => {
editor.children = value
editor.selection = selection
return [editor]
}, [value, selection, ...Object.values(rest)])
EDITOR_TO_ON_CHANGE.set(editor, onChange)
return (
<SlateContext.Provider value={context}>
<EditorContext.Provider value={editor}>
<FocusedContext.Provider value={ReactEditor.isFocused(editor)}>
{children}
</FocusedContext.Provider>
</EditorContext.Provider>
</SlateContext.Provider>
)
}

View File

@@ -1,18 +1,5 @@
import React, { useState, useMemo } from 'react'
import { Editor, Node, Operation } from 'slate'
import { Editor } from 'slate'
import { createContext, useContext } from 'react'
import { ReactEditor } from '../react-editor'
import { FocusedContext } from './use-focused'
import { EditorContext } from './use-editor'
/**
* Associate the context change listener with the editor.
*/
export const EDITOR_TO_CONTEXT_LISTENER = new WeakMap<
Editor,
(children: Node[], operations: Operation[]) => void
>()
/**
* A React context for sharing the `Editor` class, in a way that re-renders the
@@ -21,42 +8,6 @@ export const EDITOR_TO_CONTEXT_LISTENER = new WeakMap<
export const SlateContext = createContext<[Editor] | null>(null)
/**
* A wrapper around the provider to handle `onChange` events, because the editor
* is a mutable singleton so it won't ever register as "changed" otherwise.
*/
export const Slate = (props: {
editor: Editor
children: React.ReactNode
defaultValue?: Node[]
onChange?: (children: Node[], operations: Operation[]) => void
}) => {
const { editor, children, defaultValue = [], onChange = () => {} } = props
const [context, setContext] = useState([editor])
const value: [Editor] = useMemo(() => [editor], [context, editor])
const listener = useMemo(() => {
editor.children = defaultValue
return (children: Node[], operations: Operation[]) => {
onChange(children, operations)
setContext([editor])
}
}, [editor])
EDITOR_TO_CONTEXT_LISTENER.set(editor, listener)
return (
<SlateContext.Provider value={value}>
<EditorContext.Provider value={editor}>
<FocusedContext.Provider value={ReactEditor.isFocused(editor)}>
{children}
</FocusedContext.Provider>
</EditorContext.Provider>
</SlateContext.Provider>
)
}
/**
* Get the current `Editor` class that the component lives under.
*/

View File

@@ -1,11 +1,21 @@
export * from './components/editable'
// Components
export {
RenderElementProps,
RenderLeafProps,
Editable,
} from './components/editable'
export { DefaultElement } from './components/element'
export { DefaultLeaf } from './components/leaf'
export * from './hooks/use-editor'
export * from './hooks/use-focused'
export * from './hooks/use-read-only'
export * from './hooks/use-selected'
export * from './hooks/use-slate'
export * from './react-command'
export * from './react-editor'
export * from './with-react'
export { Slate } from './components/slate'
// Hooks
export { useEditor } from './hooks/use-editor'
export { useFocused } from './hooks/use-focused'
export { useReadOnly } from './hooks/use-read-only'
export { useSelected } from './hooks/use-selected'
export { useSlate } from './hooks/use-slate'
// Plugin
export { InsertDataCommand, ReactCommand } from './plugin/react-command'
export { ReactEditor } from './plugin/react-editor'
export { withReact } from './plugin/with-react'

View File

@@ -1,6 +1,6 @@
import { Editor, Element, Node, Path, Point, Range } from 'slate'
import { Key } from './utils/key'
import { Key } from '../utils/key'
import {
EDITOR_TO_ELEMENT,
ELEMENT_TO_NODE,
@@ -10,8 +10,7 @@ import {
NODE_TO_INDEX,
NODE_TO_KEY,
NODE_TO_PARENT,
PLACEHOLDER_SYMBOL,
} from './utils/weak-maps'
} from '../utils/weak-maps'
import {
DOMElement,
DOMNode,
@@ -21,7 +20,7 @@ import {
DOMStaticRange,
isDOMElement,
normalizeDOMPoint,
} from './utils/dom'
} from '../utils/dom'
export interface ReactEditor extends Editor {}

View File

@@ -1,9 +1,10 @@
import { unstable_batchedUpdates } from 'react-dom'
import { Editor, Node, Path, Operation, Command } from 'slate'
import { ReactEditor, ReactCommand } from '.'
import { Key } from './utils/key'
import { NODE_TO_KEY } from './utils/weak-maps'
import { EDITOR_TO_CONTEXT_LISTENER } from './hooks/use-slate'
import { ReactEditor } from './react-editor'
import { ReactCommand } from './react-command'
import { Key } from '../utils/key'
import { EDITOR_TO_ON_CHANGE, NODE_TO_KEY } from '../utils/weak-maps'
/**
* `withReact` adds React and DOM specific behaviors to the editor.
@@ -87,14 +88,21 @@ export const withReact = (editor: Editor): Editor => {
}
}
editor.onChange = (children: Node[], operations: Operation[]) => {
const contextOnChange = EDITOR_TO_CONTEXT_LISTENER.get(editor)
editor.onChange = () => {
// COMPAT: React doesn't batch `setState` hook calls, which means that the
// children and selection can get out of sync for one render pass. So we
// have to use this unstable API to ensure it batches them. (2019/12/03)
// https://github.com/facebook/react/issues/14259#issuecomment-439702367
unstable_batchedUpdates(() => {
const contextOnChange = EDITOR_TO_ON_CHANGE.get(editor)
if (contextOnChange) {
contextOnChange(children, operations)
}
if (contextOnChange) {
const { children, selection } = editor
contextOnChange(children, selection)
}
onChange(children, operations)
onChange()
})
}
return editor

View File

@@ -1,4 +1,4 @@
import { Node, Ancestor, Editor, Text } from 'slate'
import { Node, Ancestor, Editor, Range } from 'slate'
import { Key } from './key'
@@ -31,4 +31,17 @@ export const IS_FOCUSED: WeakMap<Editor, boolean> = new WeakMap()
export const IS_DRAGGING: WeakMap<Editor, boolean> = new WeakMap()
export const IS_CLICKING: WeakMap<Editor, boolean> = new WeakMap()
/**
* Weak map for associating the context `onChange` prop with the plugin.
*/
export const EDITOR_TO_ON_CHANGE = new WeakMap<
Editor,
(children: Node[], selection: Range | null) => void
>()
/**
* Symbols.
*/
export const PLACEHOLDER_SYMBOL = (Symbol('placeholder') as unknown) as string

View File

@@ -78,7 +78,7 @@ export const createEditor = (): Editor => {
Promise.resolve().then(() => {
FLUSHING.set(editor, false)
editor.onChange(editor.children, editor.operations)
editor.onChange()
editor.operations = []
})
}

View File

@@ -22,7 +22,7 @@ export interface Editor {
isInline: (element: Element) => boolean
isVoid: (element: Element) => boolean
normalizeNode: (entry: NodeEntry) => void
onChange: (children: Node[], operations: Operation[]) => void
onChange: () => void
operations: Operation[]
selection: Range | null
[key: string]: any

View File

@@ -1,4 +1,4 @@
import React, { useMemo, useCallback } from 'react'
import React, { useState, useMemo, useCallback } from 'react'
import {
Slate,
Editable,
@@ -12,13 +12,24 @@ import { css } from 'emotion'
import { withHistory } from 'slate-history'
const CheckListsExample = () => {
const [value, setValue] = useState(initialValue)
const [selection, setSelection] = useState(null)
const renderElement = useCallback(props => <Element {...props} />, [])
const editor = useMemo(
() => withChecklists(withHistory(withReact(createEditor()))),
[]
)
return (
<Slate editor={editor} defaultValue={initialValue}>
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Editable
renderElement={renderElement}
placeholder="Get to work…"

View File

@@ -1,4 +1,4 @@
import React, { useMemo } from 'react'
import React, { useState, useMemo } from 'react'
import { Editor, createEditor } from 'slate'
import {
Slate,
@@ -10,9 +10,19 @@ import {
} from 'slate-react'
const EmbedsExample = () => {
const [value, setValue] = useState(initialValue)
const [selection, setSelection] = useState(null)
const editor = useMemo(() => withEmbeds(withReact(createEditor())), [])
return (
<Slate editor={editor} defaultValue={initialValue}>
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Editable
renderElement={props => <Element {...props} />}
placeholder="Enter some text..."

View File

@@ -1,4 +1,4 @@
import React, { useCallback, useMemo } from 'react'
import React, { useState, useCallback, useMemo } from 'react'
import { Slate, Editable, withReact } from 'slate-react'
import { Editor, createEditor } from 'slate'
import { withHistory } from 'slate-history'
@@ -39,13 +39,23 @@ const schema = [
]
const ForcedLayoutExample = () => {
const [value, setValue] = useState(initialValue)
const [selection, setSelection] = useState(null)
const renderElement = useCallback(props => <Element {...props} />, [])
const editor = useMemo(
() => withSchema(withHistory(withReact(createEditor())), schema),
[]
)
return (
<Slate editor={editor} defaultValue={initialValue}>
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Editable
renderElement={renderElement}
placeholder="Enter a title…"

View File

@@ -1,4 +1,4 @@
import React, { useMemo, useRef, useEffect } from 'react'
import React, { useState, useMemo, useRef, useEffect } from 'react'
import { Slate, Editable, ReactEditor, withReact, useSlate } from 'slate-react'
import { Editor, createEditor } from 'slate'
import { css } from 'emotion'
@@ -8,12 +8,23 @@ import { Button, Icon, Menu, Portal } from '../components'
import { Range } from 'slate'
const HoveringMenuExample = () => {
const [value, setValue] = useState(initialValue)
const [selection, setSelection] = useState(null)
const editor = useMemo(
() => withFormatting(withHistory(withReact(createEditor()))),
[]
)
return (
<Slate editor={editor} defaultValue={initialValue}>
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<HoveringToolbar />
<Editable
renderLeaf={props => <Leaf {...props} />}

View File

@@ -1,4 +1,4 @@
import React, { useMemo, useCallback } from 'react'
import React, { useState, useMemo, useCallback } from 'react'
import faker from 'faker'
import { createEditor } from 'slate'
import { Slate, Editable, withReact } from 'slate-react'
@@ -21,10 +21,20 @@ for (let h = 0; h < HEADINGS; h++) {
}
const HugeDocumentExample = () => {
const [value, setValue] = useState(initialValue)
const [selection, setSelection] = useState(null)
const renderElement = useCallback(props => <Element {...props} />, [])
const editor = useMemo(() => withReact(createEditor()), [])
return (
<Slate editor={editor} defaultValue={initialValue}>
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Editable renderElement={renderElement} spellCheck autoFocus />
</Slate>
)

View File

@@ -1,4 +1,4 @@
import React, { useMemo } from 'react'
import React, { useState, useMemo } from 'react'
import imageExtensions from 'image-extensions'
import isUrl from 'is-url'
import { Editor, createEditor } from 'slate'
@@ -16,12 +16,23 @@ import { css } from 'emotion'
import { Button, Icon, Toolbar } from '../components'
const ImagesExample = () => {
const [value, setValue] = useState(initialValue)
const [selection, setSelection] = useState(null)
const editor = useMemo(
() => withImages(withHistory(withReact(createEditor()))),
[]
)
return (
<Slate editor={editor} defaultValue={initialValue}>
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Toolbar>
<InsertImageButton />
</Toolbar>

View File

@@ -1,4 +1,4 @@
import React, { useMemo } from 'react'
import React, { useState, useMemo } from 'react'
import isUrl from 'is-url'
import { Slate, Editable, withReact, useSlate } from 'slate-react'
import { Editor, createEditor } from 'slate'
@@ -7,12 +7,23 @@ import { withHistory } from 'slate-history'
import { Button, Icon, Toolbar } from '../components'
const LinkExample = () => {
const [value, setValue] = useState(initialValue)
const [selection, setSelection] = useState(null)
const editor = useMemo(
() => withLinks(withHistory(withReact(createEditor()))),
[]
)
return (
<Slate editor={editor} defaultValue={initialValue}>
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Toolbar>
<LinkButton />
</Toolbar>

View File

@@ -1,5 +1,5 @@
import Prism from 'prismjs'
import React, { useCallback, useMemo } from 'react'
import React, { useState, useCallback, useMemo } from 'react'
import { Slate, Editable, withReact } from 'slate-react'
import { Text, createEditor } from 'slate'
import { withHistory } from 'slate-history'
@@ -9,6 +9,8 @@ import { css } from 'emotion'
;Prism.languages.markdown=Prism.languages.extend("markup",{}),Prism.languages.insertBefore("markdown","prolog",{blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},code:[{pattern:/^(?: {4}|\t).+/m,alias:"keyword"},{pattern:/``.+?``|`[^`\n]+`/,alias:"keyword"}],title:[{pattern:/\w+.*(?:\r?\n|\r)(?:==+|--+)/,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#+.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])([\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:/(^|[^\\])(\*\*|__)(?:(?:\r?\n|\r)(?!\r?\n|\r)|.)+?\2/,lookbehind:!0,inside:{punctuation:/^\*\*|^__|\*\*$|__$/}},italic:{pattern:/(^|[^\\])([*_])(?:(?:\r?\n|\r)(?!\r?\n|\r)|.)+?\2/,lookbehind:!0,inside:{punctuation:/^[*_]|[*_]$/}},url:{pattern:/!?\[[^\]]+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)| ?\[[^\]\n]*\])/,inside:{variable:{pattern:/(!?\[)[^\]]+(?=\]$)/,lookbehind:!0},string:{pattern:/"(?:\\.|[^"\\])*"(?=\)$)/}}}}),Prism.languages.markdown.bold.inside.url=Prism.util.clone(Prism.languages.markdown.url),Prism.languages.markdown.italic.inside.url=Prism.util.clone(Prism.languages.markdown.url),Prism.languages.markdown.bold.inside.italic=Prism.util.clone(Prism.languages.markdown.italic),Prism.languages.markdown.italic.inside.bold=Prism.util.clone(Prism.languages.markdown.bold); // prettier-ignore
const MarkdownPreviewExample = () => {
const [value, setValue] = useState(initialValue)
const [selection, setSelection] = useState(null)
const renderLeaf = useCallback(props => <Leaf {...props} />, [])
const editor = useMemo(() => withHistory(withReact(createEditor())), [])
const decorate = useCallback(([node, path]) => {
@@ -50,7 +52,15 @@ const MarkdownPreviewExample = () => {
}, [])
return (
<Slate editor={editor} defaultValue={initialValue}>
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Editable
decorate={decorate}
renderLeaf={renderLeaf}

View File

@@ -1,4 +1,4 @@
import React, { useCallback, useMemo } from 'react'
import React, { useState, useCallback, useMemo } from 'react'
import { Slate, Editable, withReact } from 'slate-react'
import { Editor, Range, Point, createEditor } from 'slate'
import { withHistory } from 'slate-history'
@@ -17,13 +17,23 @@ const SHORTCUTS = {
}
const MarkdownShortcutsExample = () => {
const [value, setValue] = useState(initialValue)
const [selection, setSelection] = useState(null)
const renderElement = useCallback(props => <Element {...props} />, [])
const editor = useMemo(
() => withShortcuts(withReact(withHistory(createEditor()))),
[]
)
return (
<Slate editor={editor} defaultValue={initialValue}>
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Editable
renderElement={renderElement}
placeholder="Write some markdown..."

View File

@@ -14,6 +14,8 @@ import { Portal } from '../components'
const MentionExample = () => {
const ref = useRef()
const [value, setValue] = useState(initialValue)
const [selection, setSelection] = useState(null)
const [target, setTarget] = useState()
const [index, setIndex] = useState(0)
const [search, setSearch] = useState('')
@@ -72,9 +74,11 @@ const MentionExample = () => {
return (
<Slate
editor={editor}
defaultValue={initialValue}
onChange={() => {
const { selection } = editor
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
if (selection && Range.isCollapsed(selection)) {
const [start] = Range.edges(selection)

View File

@@ -1,4 +1,4 @@
import React, { useCallback, useMemo } from 'react'
import React, { useState, useCallback, useMemo } from 'react'
import { jsx } from 'slate-hyperscript'
import { Editor, createEditor } from 'slate'
import { withHistory } from 'slate-history'
@@ -79,6 +79,8 @@ export const deserialize = el => {
}
const PasteHtmlExample = () => {
const [value, setValue] = useState(initialValue)
const [selection, setSelection] = useState(null)
const renderElement = useCallback(props => <Element {...props} />, [])
const renderLeaf = useCallback(props => <Leaf {...props} />, [])
const editor = useMemo(
@@ -86,7 +88,15 @@ const PasteHtmlExample = () => {
[]
)
return (
<Slate editor={editor} defaultValue={initialValue}>
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Editable
renderElement={renderElement}
renderLeaf={renderLeaf}

View File

@@ -1,12 +1,22 @@
import React, { useMemo } from 'react'
import React, { useState, useMemo } from 'react'
import { createEditor } from 'slate'
import { Slate, Editable, withReact } from 'slate-react'
import { withHistory } from 'slate-history'
const PlainTextExample = () => {
const [value, setValue] = useState(initialValue)
const [selection, setSelection] = useState(null)
const editor = useMemo(() => withHistory(withReact(createEditor())), [])
return (
<Slate editor={editor} defaultValue={initialValue}>
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Editable placeholder="Enter some plain text..." />
</Slate>
)

View File

@@ -1,11 +1,21 @@
import React, { useMemo } from 'react'
import React, { useState, useMemo } from 'react'
import { createEditor } from 'slate'
import { Slate, Editable, withReact } from 'slate-react'
const ReadOnlyExample = () => {
const [value, setValue] = useState(initialValue)
const [selection, setSelection] = useState(null)
const editor = useMemo(() => withReact(createEditor()), [])
return (
<Slate editor={editor} defaultValue={initialValue}>
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Editable readOnly placeholder="Enter some plain text..." />
</Slate>
)

View File

@@ -1,4 +1,4 @@
import React, { useCallback, useMemo } from 'react'
import React, { useCallback, useMemo, useState } from 'react'
import isHotkey from 'is-hotkey'
import { Editable, withReact, useSlate, Slate } from 'slate-react'
import { Editor, createEditor } from 'slate'
@@ -23,6 +23,8 @@ const BLOCK_FORMATS = [
]
const RichTextExample = () => {
const [value, setValue] = useState(initialValue)
const [selection, setSelection] = useState(null)
const renderElement = useCallback(props => <Element {...props} />, [])
const renderLeaf = useCallback(props => <Leaf {...props} />, [])
const editor = useMemo(
@@ -31,7 +33,15 @@ const RichTextExample = () => {
)
return (
<Slate editor={editor} defaultValue={initialValue}>
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Toolbar>
<FormatButton format="bold" icon="format_bold" />
<FormatButton format="italic" icon="format_italic" />

View File

@@ -7,6 +7,8 @@ import { withHistory } from 'slate-history'
import { Icon, Toolbar } from '../components'
const SearchHighlightingExample = () => {
const [value, setValue] = useState(initialValue)
const [selection, setSelection] = useState(null)
const [search, setSearch] = useState()
const editor = useMemo(() => withHistory(withReact(createEditor())), [])
const decorate = useCallback(
@@ -37,7 +39,15 @@ const SearchHighlightingExample = () => {
)
return (
<Slate editor={editor} defaultValue={initialValue}>
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Toolbar>
<div
className={css`

View File

@@ -1,9 +1,11 @@
import React, { useCallback, useMemo } from 'react'
import React, { useState, useCallback, useMemo } from 'react'
import { Slate, Editable, withReact } from 'slate-react'
import { Editor, Range, Point, createEditor } from 'slate'
import { withHistory } from 'slate-history'
const TablesExample = () => {
const [value, setValue] = useState(initialValue)
const [selection, setSelection] = useState(null)
const renderElement = useCallback(props => <Element {...props} />, [])
const renderLeaf = useCallback(props => <Leaf {...props} />, [])
const editor = useMemo(
@@ -11,7 +13,15 @@ const TablesExample = () => {
[]
)
return (
<Slate editor={editor} defaultValue={initialValue}>
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Editable renderElement={renderElement} renderLeaf={renderLeaf} />
</Slate>
)

View File

@@ -2551,6 +2551,21 @@
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
"@types/react-dom@^16.9.4":
version "16.9.4"
resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.4.tgz#0b58df09a60961dcb77f62d4f1832427513420df"
integrity sha512-fya9xteU/n90tda0s+FtN5Ym4tbgxpq/hb/Af24dvs6uYnYn+fspaxw5USlw0R8apDNwxsqumdRoCoKitckQqw==
dependencies:
"@types/react" "*"
"@types/react@*":
version "16.9.14"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.14.tgz#7f1158ce450b4b5aa83b1c5e1324fa75f348bdd1"
integrity sha512-Q4tW4RGmR+u/CgzR8VqZcsUWjP4Pz/LcHfs9AzSG+aBnwq8As3Bid3vG1eGGsXg/xuR2k2tqNlI8pzyV8kxe0g==
dependencies:
"@types/prop-types" "*"
csstype "^2.2.0"
"@types/react@^16.9.13":
version "16.9.13"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.13.tgz#b3ea5dd443f4a680599e2abba8cc66f5e1ce0059"