slate-react

  • Version 0.72.6
  • Published
  • 2.34 MB
  • 8 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: {
getWindow(editor: ReactEditor): Window;
findKey(editor: ReactEditor, node: Node): Key;
findPath(editor: ReactEditor, node: Node): Path;
findDocumentOrShadowRoot(editor: ReactEditor): Document | ShadowRoot;
isFocused(editor: ReactEditor): boolean;
isReadOnly(editor: ReactEditor): boolean;
blur(editor: ReactEditor): void;
focus(editor: ReactEditor): void;
deselect(editor: ReactEditor): void;
hasDOMNode(
editor: ReactEditor,
target: DOMNode,
options?: { editable?: boolean }
): boolean;
insertData(editor: ReactEditor, data: DataTransfer): void;
insertFragmentData(editor: ReactEditor, data: DataTransfer): boolean;
insertTextData(editor: ReactEditor, data: DataTransfer): boolean;
setFragmentData(
editor: ReactEditor,
data: DataTransfer,
originEvent?: 'drag' | 'copy' | 'cut' | undefined
): void;
toDOMNode(editor: ReactEditor, node: Node): HTMLElement;
toDOMPoint(editor: ReactEditor, point: Point): DOMPoint;
toDOMRange(editor: ReactEditor, range: Range): DOMRange;
toSlateNode(editor: ReactEditor, domNode: DOMNode): Node;
findEventRange(editor: ReactEditor, event: any): Range;
toSlatePoint<T extends boolean>(
editor: ReactEditor,
domPoint: DOMPoint,
options: { exactMatch: T; suppressThrow: T }
): T extends true ? any : any;
toSlateRange<T_1 extends boolean>(
editor: ReactEditor,
domRange: DOMRange | DOMStaticRange | DOMSelection,
options: { exactMatch: T_1; suppressThrow: T_1 }
): T_1 extends true ? any : any;
hasRange(editor: ReactEditor, range: Range): boolean;
};

    Functions

    function AndroidEditable

    AndroidEditable: (props: EditableProps) => JSX.Element;

      function DefaultEditable

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

      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: import('./components/editable').EditableProps) => JSX.Element;

          function Slate

          Slate: (props: {
          editor: ReactEditor;
          value: Descendant[];
          children: React.ReactNode;
          onChange: (value: Descendant[]) => void;
          }) => 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 useSlateStatic

          useSlateStatic: () => Editor;
          • Get the current editor object from the React context.

          function withReact

          withReact: <T extends ReactEditor>(editor: T) => 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 hasRange

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

            property insertData

            insertData: (data: DataTransfer) => void;

              property insertFragmentData

              insertFragmentData: (data: DataTransfer) => boolean;

                property insertTextData

                insertTextData: (data: DataTransfer) => 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.RefObject<any>;
                                  style: React.CSSProperties;
                                  };
                                  };
                                  • The props that get passed to renderPlaceholder

                                  Package Files (14)

                                  Dependencies (8)

                                  Dev Dependencies (10)

                                  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>