Slate
ExamplesGitHubSlack
main
main
  • Introduction
  • Walkthroughs
    • Installing Slate
    • Adding Event Handlers
    • Defining Custom Elements
    • Applying Custom Formatting
    • Executing Commands
    • Saving to a Database
    • Enabling Collaborative Editing
    • Using the Bundled Source
  • Concepts
    • Interfaces
    • Nodes
    • Locations
    • Transforms
    • Operations
    • Commands
    • Editor
    • Plugins
    • Rendering
    • Serializing
    • Normalizing
    • TypeScript
    • Migrating
  • API
    • Transforms
    • Node Types
      • Editor
      • Element
      • Node
      • NodeEntry
      • Text
    • Location Types
      • Location
      • Path
      • PathRef
      • Point
      • PointEntry
      • PointRef
      • Range
      • RangeRef
      • Span
    • Operation Types
      • Operation
    • Scrubber
  • Libraries
    • Slate React
      • withReact
      • ReactEditor
      • Hooks
      • Slate Component
      • Editable Component
      • Event Handling
    • Slate History
      • withHistory
      • HistoryEditor
      • History
    • Slate Hyperscript
  • General
    • Resources
    • Contributing
    • Changelog
    • FAQ
Powered by GitBook
On this page
  • Static methods
  • Check methods
  • Focus and selection methods
  • DOM translation methods
  • DataTransfer methods
  1. Libraries
  2. Slate React

ReactEditor

PreviouswithReactNextHooks

Last updated 1 year ago

ReactEditor is added to Editor when it is instantiated using the withReact method.

const [editor] = useState(() => withReact(withHistory(createEditor())))

Static methods

Check methods

ReactEditor.isComposing(editor: ReactEditor): boolean

Check if the user is currently composing inside the editor.

ReactEditor.isFocused(editor: ReactEditor): boolean

Check if the editor is focused.

ReactEditor.isReadOnly(editor: ReactEditor): boolean

Check if the editor is in read-only mode.

Focus and selection methods

ReactEditor.blur(editor: ReactEditor): void

Blur the editor.

ReactEditor.focus(editor: ReactEditor): void

Focus the editor.

ReactEditor.deselect(editor: ReactEditor): void

Deselect the editor.

DOM translation methods

ReactEditor.findKey(editor: ReactEditor, node: Node): Key

Find a key for a Slate node.

Returns an instance of Key which looks like { id: string }

ReactEditor.findPath(editor: ReactEditor, node: Node): Path

Find the path of Slate node.

ReactEditor.hasDOMNode(editor: ReactEditor, target: DOMNode, options: { editable?: boolean } = {}): boolean

Check if a DOM node is within the editor.

ReactEditor.toDOMNode(editor: ReactEditor, node: Node): HTMLElement

Find the native DOM element from a Slate node.

ReactEditor.toDOMPoint(editor: ReactEditor, point: Point): DOMPoint

Find a native DOM selection point from a Slate point.

ReactEditor.toDOMRange(editor: ReactEditor, range: Range): DOMRange

Find a native DOM range from a Slate range.

ReactEditor.toSlateNode(editor: ReactEditor, domNode: DOMNode): Node

Find a Slate node from a native DOM element.

ReactEditor.findEventRange(editor: ReactEditor, event: any): Range

Get the target range from a DOM event.

ReactEditor.toSlatePoint(editor: ReactEditor, domPoint: DOMPoint): Point | null

Find a Slate point from a DOM selection's domNode and domOffset.

ReactEditor.toSlateRange(editor: ReactEditor, domRange: DOMRange | DOMStaticRange | DOMSelection, options?: { exactMatch?: boolean } = {}): Range | null

Find a Slate range from a DOM range or selection.

DataTransfer methods

ReactEditor.insertData(editor: ReactEditor, data: DataTransfer): void

Insert data from a 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).

ReactEditor.insertFragmentData(editor: ReactEditor, data: DataTransfer): true

Insert fragment data from a DataTransfer into the editor. Returns true if some content has been effectively inserted.

ReactEditor.insertTextData(editor: ReactEditor, data: DataTransfer): true

Insert text data from a DataTransfer into the editor. Returns true if some content has been effectively inserted.

ReactEditor.setFragmentData(editor: ReactEditor, data: DataTransfer, originEvent?: 'drag' | 'copy' | 'cut'): void

Sets data from the currently selected fragment on a DataTransfer.

Static methods
Check methods
Focus and selection methods
DOM translation methods
DataTransfer methods