Skip to content

react-editor.md

Latest commit

 

History

History
206 lines (116 loc) · 6.4 KB

react-editor.md

File metadata and controls

206 lines (116 loc) · 6.4 KB
Raw

React Editor

createReactEditor creates an editor with React, DOM, and clipboard host APIs installed. Hooks such as useSlateEditor create the same editor shape.

import { createReactEditor } from 'slate-react'

const editor = createReactEditor()

editor.api.dom.focus()

Checks

editor.api.react.isComposing(): boolean

Check if the user is currently composing inside the editor.

editor.api.react.isFocused(): boolean

Check if the editor is focused.

editor.api.react.isReadOnly(): boolean

Check if the editor is in read-only mode.

editor.api.dom.isComposing(): boolean

Check if the user is currently composing inside the editor from the DOM bridge.

editor.api.dom.isFocused(): boolean

Check if the DOM editor is focused.

editor.api.dom.isReadOnly(): boolean

Check if the DOM editor is in read-only mode.

Focus And Selection

editor.api.dom.blur(): void

Blur the editor.

editor.api.dom.focus(options?: { retries: number }): void

Focus the editor.

editor.api.dom.deselect(): void

Clear the native DOM selection and the Slate selection.

DOM Translation

editor.api.dom.findKey(node: Node): Key

Find a key for a Slate node.

editor.api.dom.resolvePath(node: Node): Path | null

Resolve the current path of a Slate node. Returns null when the node is not mounted in the current editor value.

editor.api.dom.assertPath(node: Node): Path

Assert the current path of a Slate node.

editor.api.dom.hasDOMNode(target: DOMNode, options?: { editable?: boolean }): boolean

Check if a DOM node is within the editor.

editor.api.dom.hasEditableTarget(target: EventTarget | null): target is DOMNode

Check if the target is editable and in the editor.

editor.api.dom.hasSelectableTarget(target: EventTarget | null): boolean

Check if the target can be selected by the editor.

editor.api.dom.hasTarget(target: EventTarget | null): target is DOMNode

Check if the target is in the editor.

editor.api.dom.assertDOMNode(node: Node): HTMLElement

Assert the native DOM element for a Slate node.

editor.api.dom.resolveDOMNode(node: Node): HTMLElement | null

Resolve the native DOM element for a Slate node. Returns null when the Slate node is not mounted.

editor.api.dom.assertDOMPoint(point: Point): DOMPoint

Assert a native DOM selection point from a Slate point.

editor.api.dom.resolveDOMPoint(point: Point): DOMPoint | null

Resolve a native DOM selection point from a Slate point. Returns null when the Slate point is not currently mappable.

editor.api.dom.assertDOMRange(range: Range): DOMRange

Assert a native DOM range from a Slate range.

editor.api.dom.resolveDOMRange(range: Range): DOMRange | null

Resolve a native DOM range from a Slate range. Returns null when the Slate range is not currently mappable.

editor.api.dom.resolveRangeRect(range: Range): DOMRect | null

Resolve the bounding rect for a Slate range. Returns null when the range is not currently mappable to mounted DOM.

editor.api.dom.assertSlateNode(domNode: DOMNode): Node

Assert a Slate node from a native DOM node.

editor.api.dom.resolveSlateNode(domNode: DOMNode): Node | null

Resolve a Slate node from a native DOM node. Returns null when the DOM node is not owned by the editor.

editor.api.dom.assertEventRange(event: unknown): Range

Assert the target range from a DOM event.

editor.api.dom.resolveEventRange(event: unknown): Range | null

Resolve the target range from a DOM event. Returns null when the event target cannot be mapped into the editor.

editor.api.dom.assertSlatePoint(domPoint: DOMPoint, options: { exactMatch: boolean; searchDirection?: 'backward' | 'forward' }): Point

Assert a Slate point from a DOM point.

editor.api.dom.resolveSlatePoint(domPoint: DOMPoint, options: { exactMatch: boolean; searchDirection?: 'backward' | 'forward' }): Point | null

Resolve a Slate point from a DOM point. Returns null when the DOM point is not currently mappable.

editor.api.dom.assertSlateRange(domRange: DOMRange | DOMStaticRange | DOMSelection, options: { exactMatch: boolean }): Range

Assert a Slate range from a DOM range or selection.

editor.api.dom.resolveSlateRange(domRange: DOMRange | DOMStaticRange | DOMSelection, options: { exactMatch: boolean }): Range | null

Resolve a Slate range from a DOM range or selection. Returns null when the DOM range is not currently mappable.

DOM Environment

editor.api.dom.findDocumentOrShadowRoot(): Document | ShadowRoot

Return the document or shadow root that owns the editor.

editor.api.dom.getWindow(): Window

Return the window that owns the editor.

editor.api.dom.hasRange(range: Range): boolean

Check whether a Slate range can currently be mapped to DOM.

editor.api.dom.isTargetInsideNonReadonlyVoid(target: EventTarget | null): boolean

Check whether a DOM event target is inside a non-read-only void element.

DataTransfer

editor.api.clipboard.insertData(data: DataTransfer): boolean

Insert data from a DataTransfer into the editor. Returns true when Slate or an extension inserts content.

Slate runs typed clipboard.insertData extension handlers first. A handler that returns true stops the default import path. When no handler claims the data, Slate tries an internal Slate fragment for the editor's configured clipboardFormatKey, then plain text.

editor.api.clipboard.insertFragmentData(data: DataTransfer): boolean

Insert Slate fragment data from a DataTransfer. Returns true when fragment content was inserted.

editor.api.clipboard.insertTextData(data: DataTransfer): boolean

Insert plain text data from a DataTransfer. Returns true when text content was inserted.

editor.api.clipboard.writeSelection(data: Pick<DataTransfer, 'getData' | 'setData'>): void

Write the current selection to a DataTransfer.

Slate writes plain text, HTML, and an internal Slate fragment payload. The fragment payload uses application/${clipboardFormatKey} and the HTML fallback is tagged with the same key, so differently configured editors do not blindly import each other's internal JSON.