RenderElementProps
RenderElementProps
are passed to the renderElement
handler.RenderLeafProps
RenderLeafProps
are passed to the renderLeaf
handler.Editable
Editable
component comes with a set of event handlers that handle typical rich-text editing behaviors (for example, it implements its own onCopy
, onPaste
, onDrop
, and onKeyDown
handlers).Editable
component.DefaultElement(props: RenderElementProps)
DefaultLeaf(props: RenderLeafProps)
Slate(editor: ReactEditor, value: Node[], children: React.ReactNode, onChange: (value: Node[]) => void, [key: string]: any)
onChange
events, because the editor is a mutable singleton so it won't ever register as "changed" otherwise.useFocused
focused
state of the editor.useReadOnly
readOnly
state of the editor.useSelected
selected
state of an element.useSlate
useSlateStatic
useEditor
.Editor
interface. All about translating between the DOM and Slate.isComposing(editor: ReactEditor)
findKey(editor: ReactEditor, node: Node)
findPath(editor: ReactEditor, node: Node)
isFocused(editor: ReactEditor)
isReadOnly(editor: ReactEditor)
blur(editor: ReactEditor)
focus(editor: ReactEditor)
deselect(editor: ReactEditor)
hasDOMNode(editor: ReactEditor, target: DOMNode, options: { editable?: boolean } = {})
insertData(editor: ReactEditor, data: DataTransfer)
DataTransfer
into the editor. This is a proxy method to call in this order insertFragmentData(editor: ReactEditor, data: DataTransfer)
and then insertTextData(editor: ReactEditor, data: DataTransfer)
.insertFragmentData(editor: ReactEditor, data: DataTransfer)
DataTransfer
into the editor. Returns true if some content has been effectively inserted.insertTextData(editor: ReactEditor, data: DataTransfer)
DataTransfer
into the editor. Returns true if some content has been effectively inserted.setFragmentData(editor: ReactEditor, data: DataTransfer, originEvent?: 'drag' | 'copy' | 'cut')
DataTransfer
.toDOMNode(editor: ReactEditor, node: Node)
toDOMPoint(editor: ReactEditor, point: Point)
toDOMRange(editor: ReactEditor, range: Range)
range
.toSlateNode(editor: ReactEditor, domNode: DOMNode)
element
.findEventRange(editor: ReactEditor, event: any)
event
.toSlatePoint(editor: ReactEditor, domPoint: DOMPoint)
domNode
and domOffset
.toSlateRange(editor: ReactEditor, domRange: DOMRange | DOMStaticRange | DOMSelection, options?: { exactMatch?: boolean } = {})
withReact(editor: Editor)
withHistory
, withReact
should be applied outside. For example: