slate-react

Variables

• Editable
• ReactEditor

Functions

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

Interfaces

• ReactEditor

  • getChunkSize
• RenderChunkProps

  • attributes
  • children
  • highest
  • lowest
• RenderElementProps

  • attributes
  • children
  • element
• RenderLeafProps

  • attributes
  • children
  • leaf
  • leafPosition
  • 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 defaultScrollSelectionIntoView

defaultScrollSelectionIntoView: (
    editor: ReactEditor,
    domRange: DOMRange
) => void;

• A default implement to scroll dom range into view.

function DefaultText

DefaultText: (props: RenderTextProps) => React.JSX.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 useElement

useElement: () => Element;

• Get the current element.

function useElementIf

useElementIf: () => import('slate').BaseElement | null;

• Get the current element, or return null if not inside renderElement.

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 and re-render whenever it changes.

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 | null, b: T) => boolean,
    { deferred }?: SlateSelectorOptions
) => T;

• Use redux style selectors to prevent re-rendering on every keystroke.

  Bear in mind re-rendering 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.

  If selector is memoized using useCallback, then it will only be called when it or the editor state changes. Otherwise, selector will be called every time the component renders.

  Example 1

  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 };

• Get the current editor object and its version, which increments on every change.

  Deprecated

  The v counter is no longer used except for this hook, and may be removed in a future version.

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