slate-react

Variables

• Editable
• ReactEditor

Functions

• DefaultElement()
• DefaultLeaf()
• DefaultPlaceholder()
• Slate()
• useComposing()
• useEditor()
• useFocused()
• useReadOnly()
• useSelected()
• useSlate()
• useSlateSelection()
• useSlateSelector()
• useSlateStatic()
• useSlateWithV()
• withReact()

Interfaces

• ReactEditor
• RenderElementProps

  • attributes
  • children
  • element
• RenderLeafProps

  • attributes
  • children
  • leaf
  • text

Type Aliases

• RenderPlaceholderProps

variable Editable

const Editable: React.ForwardRefExoticComponent<any>;

• Editable.

variable ReactEditor

const ReactEditor: ReactEditorInterface;

function DefaultElement

DefaultElement: (props: RenderElementProps) => JSX.Element;

• The default element renderer.

function DefaultLeaf

DefaultLeaf: (props: RenderLeafProps) => JSX.Element;

function DefaultPlaceholder

DefaultPlaceholder: ({
    attributes,
    children,
}: RenderPlaceholderProps) => JSX.Element;

• The default placeholder element

function Slate

Slate: (props: {
    editor: ReactEditor;
    initialValue: Descendant[];
    children: React.ReactNode;
    onChange?: (value: Descendant[]) => void;
    onSelectionChange?: (selection: Selection) => void;
    onValueChange?: (value: Descendant[]) => void;
}) => React.JSX.Element;

• 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.

function useComposing

useComposing: () => boolean;

• Get the current composing state of the editor.

function useEditor

useEditor: () => import('..').ReactEditor;

• Get the current editor object from the React context.

  Deprecated

  Use useSlateStatic instead.

function useFocused

useFocused: () => boolean;

• Get the current focused state of the editor.

function useReadOnly

useReadOnly: () => boolean;

• Get the current readOnly state of the editor.

function useSelected

useSelected: () => boolean;

• Get the current selected state of an element.

function useSlate

useSlate: () => Editor;

• Get the current editor object from the React context.

function useSlateSelection

useSlateSelection: () => BaseSelection;

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

function useSlateSelector

useSlateSelector: <T>(
    selector: (editor: Editor) => T,
    equalityFn?: (a: T, b: T) => boolean
) => T;

• 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.

  Example:

   const isSelectionActive = useSlateSelector(editor => Boolean(editor.selection));

function useSlateStatic

useSlateStatic: () => Editor;

• Get the current editor object from the React context.

function useSlateWithV

useSlateWithV: () => { editor: Editor; v: number };

function withReact

withReact: <T extends BaseEditor>(
    editor: T,
    clipboardFormatKey?: string
) => T & ReactEditor;

• withReact adds React and DOM specific behaviors to the editor.

  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.

type RenderPlaceholderProps

type RenderPlaceholderProps = {
    children: any;
    attributes: {
        'data-slate-placeholder': boolean;
        dir?: 'rtl';
        contentEditable: boolean;
        ref: React.RefCallback<any>;
        style: React.CSSProperties;
    };
};

• The props that get passed to renderPlaceholder