mirror of
https://github.com/ianstormtaylor/slate.git
synced 2025-07-31 20:40:19 +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:
@@ -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
|
||||
|
@@ -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",
|
||||
|
@@ -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",
|
||||
|
41
packages/slate-react/src/components/slate.tsx
Normal file
41
packages/slate-react/src/components/slate.tsx
Normal 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>
|
||||
)
|
||||
}
|
@@ -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.
|
||||
*/
|
||||
|
@@ -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'
|
||||
|
@@ -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 {}
|
||||
|
@@ -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
|
@@ -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
|
||||
|
@@ -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 = []
|
||||
})
|
||||
}
|
||||
|
@@ -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
|
||||
|
@@ -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…"
|
||||
|
@@ -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..."
|
||||
|
@@ -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…"
|
||||
|
@@ -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} />}
|
||||
|
@@ -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>
|
||||
)
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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}
|
||||
|
@@ -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..."
|
||||
|
@@ -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)
|
||||
|
@@ -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}
|
||||
|
@@ -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>
|
||||
)
|
||||
|
@@ -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>
|
||||
)
|
||||
|
@@ -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" />
|
||||
|
@@ -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`
|
||||
|
@@ -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>
|
||||
)
|
||||
|
15
yarn.lock
15
yarn.lock
@@ -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"
|
||||
|
Reference in New Issue
Block a user