slate-react

  • Version 0.105.0
  • Published
  • 2.88 MB
  • 9 dependencies
  • MIT license

Install

npm i slate-react
yarn add slate-react
pnpm add slate-react

Overview

Tools for building completely customizable richtext editors with React.

Index

Variables

variable ReactEditor

const ReactEditor: ReactEditorInterface;

    Functions

    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 Editable

      Editable: (props: EditableProps) => JSX.Element;
      • Editable.

      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 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: () => { v: number; editor: ReactEditor };

        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.

        Interfaces

        interface ReactEditor

        interface ReactEditor extends BaseEditor {}
        • A React and DOM-specific version of the Editor interface.

        property hasEditableTarget

        hasEditableTarget: (
        editor: ReactEditor,
        target: EventTarget | null
        ) => target is DOMNode;

          property hasRange

          hasRange: (editor: ReactEditor, range: Range) => boolean;

            property hasSelectableTarget

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

              property hasTarget

              hasTarget: (
              editor: ReactEditor,
              target: EventTarget | null
              ) => target is DOMNode;

                property insertData

                insertData: (data: DataTransfer) => void;

                  property insertFragmentData

                  insertFragmentData: (data: DataTransfer) => boolean;

                    property insertTextData

                    insertTextData: (data: DataTransfer) => boolean;

                      property isTargetInsideNonReadonlyVoid

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

                        property setFragmentData

                        setFragmentData: (
                        data: DataTransfer,
                        originEvent?: 'drag' | 'copy' | 'cut'
                        ) => void;

                          interface RenderElementProps

                          interface RenderElementProps {}
                          • RenderElementProps are passed to the renderElement handler.

                          property attributes

                          attributes: {
                          'data-slate-node': 'element';
                          'data-slate-inline'?: true;
                          'data-slate-void'?: true;
                          dir?: 'rtl';
                          ref: any;
                          };

                            property children

                            children: any;

                              property element

                              element: Element;

                                interface RenderLeafProps

                                interface RenderLeafProps {}
                                • RenderLeafProps are passed to the renderLeaf handler.

                                property attributes

                                attributes: {
                                'data-slate-leaf': true;
                                };

                                  property children

                                  children: any;

                                    property leaf

                                    leaf: Text;

                                      property text

                                      text: Text;

                                        Type Aliases

                                        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

                                        Package Files (15)

                                        Dependencies (9)

                                        Dev Dependencies (12)

                                        Peer Dependencies (3)

                                        Badge

                                        To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                        You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/slate-react.

                                        • Markdown
                                          [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/slate-react)
                                        • HTML
                                          <a href="https://www.jsdocs.io/package/slate-react"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>