slate-react

TypesSource
Search for an npm package
    "slate-react"

slate-react

decl
module "slate-react" {

Editable

decl

Editable.

export const Editable: (props: EditableProps) => Element = ...
Unexported symbols referenced here

EditableProps

decl

EditableProps are passed to the <Editable> component.

type EditableProps = {
decorate?: (entry: import("slate").NodeEntry) => import("slate").Range[];
onDOMBeforeInput?: (event: InputEvent) => void;
placeholder?: string;
readOnly?: boolean;
role?: string;
style?: CSSProperties;
renderElement?: (props: RenderElementProps) => Element;
renderLeaf?: (props: RenderLeafProps) => Element;
renderPlaceholder?: (props: RenderPlaceholderProps) => Element;
scrollSelectionIntoView?: (editor: ReactEditor, domRange: Range) => void;
as?: ElementType;
disableDefaultStyles?: boolean;
} & TextareaHTMLAttributes<HTMLDivElement>
Referenced by
  • Editable

RenderElementProps

decl

RenderElementProps are passed to the renderElement handler.

export interface RenderElementProps {
children: any;
element: import("slate").Element;
attributes: {
'data-slate-node': "element";
'data-slate-inline'?: true;
'data-slate-void'?: true;
dir?: "rtl";
ref: any;
};
}
Referenced by

RenderLeafProps

decl

RenderLeafProps are passed to the renderLeaf handler.

export interface RenderLeafProps {
children: any;
leaf: import("slate").Text;
text: import("slate").Text;
attributes: {
'data-slate-leaf': true;
};
}
Referenced by

RenderPlaceholderProps

decl

The props that get passed to renderPlaceholder

export type RenderPlaceholderProps = {
children: any;
attributes: {
'data-slate-placeholder': boolean;
dir?: "rtl";
contentEditable: boolean;
ref: RefObject<any>;
style: CSSProperties;
};
}
Referenced by

DefaultPlaceholder

decl

The default placeholder element

export const DefaultPlaceholder: ({ attributes, children, }: RenderPlaceholderProps) => Element = ...

DefaultElement

decl

The default element renderer.

export const DefaultElement: (props: RenderElementProps) => Element = ...

DefaultLeaf

decl
export const DefaultLeaf: (props: RenderLeafProps) => Element = ...

Slate

decl

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: ReactEditor;
value: import("slate").Descendant[];
children: ReactNode;
onChange?: ((value: import("slate").Descendant[]) => void) | undefined;
}) => Element = ...

useEditor

decl

Get the current editor object from the React context.

more
less

@deprecated — Use useSlateStatic instead.

export const useEditor: () => ReactEditor = ...

useSlateStatic

decl

Get the current editor object from the React context.

export const useSlateStatic: () => import("slate").Editor = ...

useFocused

decl

Get the current focused state of the editor.

export const useFocused: () => boolean = ...

useReadOnly

decl

Get the current readOnly state of the editor.

export const useReadOnly: () => boolean = ...

useSelected

decl

Get the current selected state of an element.

export const useSelected: () => boolean = ...

useSlate

decl

Get the current editor object from the React context.

export const useSlate: () => import("slate").Editor = ...

useSlateWithV

decl
export const useSlateWithV: () => {
v: number;
editor: ReactEditor;
} = ...

useSlateSelector

decl

use redux style selectors to prevent rerendering on every keystroke. Bear in mind rerendering can only prevented if the returned value is a value type or for reference types (e.g. objects and arrays) add a custom equality function.

more
less

Example:

 const isSelectionActive = useSlateSelector(editor => Boolean(editor.selection));
export function useSlateSelector<T>(selector: (editor: import("slate").Editor) => T, equalityFn?: (a: T, b: T) => boolean): T

useSlateSelection

decl

Get the current slate selection. Only triggers a rerender when the selection actually changes

export const useSlateSelection: () => import("slate").BaseSelection = ...

ReactEditor

decldecl

A React and DOM-specific version of the Editor interface.

export interface ReactEditor extends import("slate").BaseEditor {
insertData: (data: DataTransfer) => void;
insertFragmentData: (data: DataTransfer) => boolean;
insertTextData: (data: DataTransfer) => boolean;
setFragmentData: (data: DataTransfer, originEvent?: "drag" | "copy" | "cut") => void;
hasRange: (editor: ReactEditor, range: import("slate").Range) => boolean;
hasTarget: (editor: ReactEditor, target: EventTarget | null) => target is Node;
hasEditableTarget: (editor: ReactEditor, target: EventTarget | null) => target is Node;
hasSelectableTarget: (editor: ReactEditor, target: EventTarget | null) => boolean;
isTargetInsideNonReadonlyVoid: (editor: ReactEditor, target: EventTarget | null) => boolean;
}
export const ReactEditor: {

Check if the user is currently composing inside the editor.

isComposing(editor: ReactEditor): boolean;

Return the host window of the current editor.

getWindow(editor: ReactEditor): Window;

Find a key for a Slate node.

findKey(editor: ReactEditor, node: import("slate").Node): Key;

Find the path of Slate node.

findPath(editor: ReactEditor, node: import("slate").Node): import("slate").Path;

Find the DOM node that implements DocumentOrShadowRoot for the editor.

findDocumentOrShadowRoot(editor: ReactEditor): Document | ShadowRoot;

Check if the editor is focused.

isFocused(editor: ReactEditor): boolean;

Check if the editor is in read-only mode.

isReadOnly(editor: ReactEditor): boolean;

Blur the editor.

blur(editor: ReactEditor): void;

Focus the editor.

focus(editor: ReactEditor): void;

Deselect the editor.

deselect(editor: ReactEditor): void;

Check if a DOM node is within the editor.

hasDOMNode(editor: ReactEditor, target: Node, options?: {
editable?: boolean;
}): boolean;

Insert data from a DataTransfer into the editor.

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

Insert fragment data from a DataTransfer into the editor.

insertFragmentData(editor: ReactEditor, data: DataTransfer): boolean;

Insert text data from a DataTransfer into the editor.

insertTextData(editor: ReactEditor, data: DataTransfer): boolean;

Sets data from the currently selected fragment on a DataTransfer.

setFragmentData(editor: ReactEditor, data: DataTransfer, originEvent?: "drag" | "copy" | "cut" | undefined): void;

Find the native DOM element from a Slate node.

toDOMNode(editor: ReactEditor, node: import("slate").Node): HTMLElement;

Find a native DOM selection point from a Slate point.

toDOMPoint(editor: ReactEditor, point: import("slate").Point): DOMPoint;

Find a native DOM range from a Slate range.

more
less

Notice: the returned range will always be ordinal regardless of the direction of Slate range due to DOM API limit.

there is no way to create a reverse DOM Range using Range.setStart/setEnd according to https://dom.spec.whatwg.org/#concept-range-bp-set.

toDOMRange(editor: ReactEditor, range: import("slate").Range): Range;

Find a Slate node from a native DOM element.

toSlateNode(editor: ReactEditor, domNode: Node): import("slate").Node;

Get the target range from a DOM event.

findEventRange(editor: ReactEditor, event: any): import("slate").Range;

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

toSlatePoint<T extends boolean>(editor: ReactEditor, domPoint: DOMPoint, options: {
exactMatch: boolean;
suppressThrow: T;
}): T extends true ? import("slate").BasePoint | null : import("slate").BasePoint;

Find a Slate range from a DOM range or selection.

toSlateRange<T_1 extends boolean>(editor: ReactEditor, domRange: Range | StaticRange | Selection, options: {
exactMatch: boolean;
suppressThrow: T_1;
}): T_1 extends true ? import("slate").BaseSelection : import("slate").BaseRange & {
placeholder?: string | undefined;
};
hasRange(editor: ReactEditor, range: import("slate").Range): boolean;

Check if the target is in the editor.

hasTarget(editor: ReactEditor, target: EventTarget | null): target is Node;

Check if the target is editable and in the editor.

hasEditableTarget(editor: ReactEditor, target: EventTarget | null): target is Node;

Check if the target can be selectable

hasSelectableTarget(editor: ReactEditor, target: EventTarget | null): boolean;

Check if the target is inside void and in an non-readonly editor.

isTargetInsideNonReadonlyVoid(editor: ReactEditor, target: EventTarget | null): boolean;

Experimental and android specific: Flush all pending diffs and cancel composition at the next possible time.

androidScheduleFlush(editor: import("slate").Editor): void;

Experimental and android specific: Get pending diffs

androidPendingDiffs(editor: import("slate").Editor): TextDiff[] | undefined;
} = ...
Referenced by
Unexported symbols referenced here

Key

decl

An auto-incrementing identifier for keys.

more
less

A class that keeps track of a key string. We use a full class here because we want to be able to use them as keys in WeakMap objects.

class Key {
constructor()
id: string;
}
Referenced by

DOMPoint

decl
type DOMPoint = [Node, number]
Referenced by

TextDiff

decl
type TextDiff = {
id: number;
path: import("slate").Path;
diff: StringDiff;
}
Referenced by

StringDiff

decl
type StringDiff = {
start: number;
end: number;
text: string;
}
Referenced by

withReact

decl

withReact adds React and DOM specific behaviors to the editor.

more
less

If you are using TypeScript, you must extend Slate's CustomTypes to use this plugin.

See https://docs.slatejs.org/concepts/11-typescript to learn how.

export const withReact: <T extends import("slate").BaseEditor>(editor: T, clipboardFormatKey?: string) => T & ReactEditor = ...
}