react

package @remirror/react

class PlaceholderExtension

The placeholder extension which adds a placeholder annotation to an empty document.

Signature:

export declare class PlaceholderExtension extends PlainExtension<PlaceholderOptions> 

Extends: PlainExtension<PlaceholderOptions>

(Some inherited members may not be shown because they are not represented in the documentation.)

Extension.(constructor)

Constructs a new instance of the Extension class

Signature:

constructor(...args: ExtensionConstructorProps<Options>);

Parameters:

Parameter	Type	Description
args	ExtensionConstructorProps<Options>

property constructorName

The name that the constructor should have, which doesn't get mangled in production.

Signature:

get constructorName(): string;

property defaultPriority

The default priority for this family of extensions.

Signature:

static readonly defaultPriority: ExtensionPriority;

property extensions

The list of extensions added to the editor by this Preset.

Signature:

get extensions(): Array<this['~E']>;

property name

Signature:

get name(): "placeholder";

property priority

The priority level for this instance of the extension. A higher value corresponds to a higher priority extension

Signature:

get priority(): ExtensionPriority;

property store

The store is a shared object that's internal to each extension. It includes often used items like the view and schema that are added by the extension manager and also the lifecycle extension methods.

**NOTE** - The store is not available until the manager has been created and received the extension. As a result trying to access the store during init and constructor will result in a runtime error.

Some properties of the store are available at different phases. You should check the inline documentation to know when a certain property is useable in your extension.

Signature:

protected get store(): Remirror.ExtensionStore;

method clone

Clone an extension.

Signature:

clone(...args: ExtensionConstructorProps<Options>): Extension<Options>;

Parameters:

Parameter	Type	Description
args	ExtensionConstructorProps<Options>

Returns:

Extension<Options>

method createAttributes

Signature:

createAttributes(): ProsemirrorAttributes;

Returns:

ProsemirrorAttributes

method createExtensions

Create the extensions which will be consumed by the preset. Override this if you would like to make your extension a parent to other (holder) extensions which don't make sense existing outside of the context of this extension.

Signature:

createExtensions(): AnyExtension[];

Returns:

AnyExtension[]

Remarks:

Since this method is called in the constructor it should always be created as an instance method and not a property. Properties aren't available for the call to the parent class.

class HolderExtension extends PlainExtension {
  get name() {
    return 'holder'
  }

  // GOOD ✅
  createExtensions() {
    return [];
  }

  // BAD ❌
  createExtensions = () => {
    return [];
  }
}

method createPlugin

Signature:

createPlugin(): CreateExtensionPlugin;

Returns:

CreateExtensionPlugin

method getExtension

Get an extension from this holder extension by providing the desired Constructor.

Signature:

getExtension<Type extends this['~E']['constructor']>(Constructor: Type): InstanceType<Type>;

Parameters:

Parameter	Type	Description
Constructor	Type	the extension constructor to find in the editor.

Returns:

InstanceType<Type>

Remarks:

This method will throw an error if the constructor doesn't exist within the extension created by this extension.

It can be used to forward options and attach handlers to the children extensions. It is the spiritual replacement of the Preset extension.

import { PlainExtension, OnSetOptionsProps } from 'remirror';

interface ParentOptions { weight?: string }

class ParentExtension extends PlainExtension<ParentOptions> {
  get name() {
    return 'parent' as const;
  }

  createExtensions() {
    return [new BoldExtension()]
  }

  onSetOptions(options: OnSetOptionsProps<ParentOptions>): void {
    if (options.changes.weight.changed) {
      // Update the value of the provided extension.
      this.getExtension(BoldExtension).setOption({ weight: options.changes.weight.value });
    }
  }
}

method isOfType

Check if the type of this extension's constructor matches the type of the provided constructor.

Signature:

isOfType<Type extends AnyExtensionConstructor>(Constructor: Type): this is InstanceType<Type>;

Parameters:

Parameter	Type	Description
Constructor	Type

Returns:

this is InstanceType<Type>

method onAppendTransaction

This can be used by the Extension to append a transaction to the latest update.

This is shorthand for the ProsemirrorPlugin.spec.appendTransaction.

Lifecycle Methods

Signature:

onAppendTransaction?(props: AppendLifecycleProps): void;

Parameters:

Parameter	Type	Description
props	AppendLifecycleProps

Returns:

void

method onApplyState

This is called when the state is being applied to the editor. This can be used as a shorthand for the [[Plugin.spec.state.apply]] method.

For example, when using [[createDecorations]] you can respond to editor updates within this callback.

Lifecycle Methods

Signature:

onApplyState?(props: ApplyStateLifecycleProps): void;

Parameters:

Parameter	Type	Description
props	ApplyStateLifecycleProps

Returns:

void

method onCreate

This handler is called when the RemirrorManager is first created.

Signature:

onCreate?(): Dispose | void;

Returns:

Dispose | void

Remarks:

Since it is called as soon as the manager is some methods may not be available in the extension store. When accessing methods on this.store be shore to check when they become available in the lifecycle.

You can return a Dispose function which will automatically be called when the extension is destroyed.

This handler is called before the onView handler.

Lifecycle Methods

method onDestroy

Called when the extension is being destroyed.

Lifecycle Methods

Signature:

onDestroy?(): void;

Returns:

void

method onInitState

This is called when the prosemirror editor state is first attached to the editor. It can be useful for doing some preparation work.

This is a shorthand for creating a plugin and adding the [[Plugin.spec.state.init]].

Lifecycle Methods

Signature:

onInitState?(state: EditorState): void;

Parameters:

Parameter	Type	Description
state	EditorState

Returns:

void

method onSetOptions

Signature:

protected onSetOptions(props: OnSetOptionsProps<PlaceholderOptions>): void;

Parameters:

Parameter	Type	Description
props	OnSetOptionsProps<PlaceholderOptions>

Returns:

void

method onStateUpdate

This handler is called after a transaction successfully updates the editor state. It is called asynchronously after the [[onApplyState]] hook has been run run.

Lifecycle Methods

Signature:

onStateUpdate?(props: StateUpdateLifecycleProps): void;

Parameters:

Parameter	Type	Description
props	StateUpdateLifecycleProps

Returns:

void

method onView

This event happens when the view is first received from the view layer (e.g. React).

Return a dispose function which will be called when the extension is destroyed.

This handler is called after the onCreate handler.

Lifecycle Methods

Signature:

onView?(view: EditorView): Dispose | void;

Parameters:

Parameter	Type	Description
view	EditorView

Returns:

Dispose | void

class PortalContainer

The node view portal container keeps track of all the portals which have been added by react to render the node views in the editor.

Signature:

export declare class PortalContainer 

property on

Event handler for subscribing to update events from the portalContainer.

Signature:

on: (callback: (portals: PortalMap) => void) => Unsubscribe;

property once

Subscribe to one event before automatically unbinding.

Signature:

once: (callback: (portals: PortalMap) => void) => Unsubscribe;

property portals

A map of all the active portals which have a one to one relation between the container and the component.

Signature:

portals: PortalMap;

method forceUpdate

Force an update in all the portals by setting new keys for every portal.

Delete all orphaned containers (deleted from the DOM). This is useful for Decoration where there is no destroy method.

Signature:

forceUpdate(): void;

Returns:

void

method remove

Deletes the portal within the container.

Signature:

remove(container: HTMLElement): void;

Parameters:

Parameter	Type	Description
container	HTMLElement

Returns:

void

method render

Responsible for registering a new portal by rendering the react element into the provided container.

Signature:

render({ Component, container }: RenderMethodProps): void;

Parameters:

Parameter	Type	Description
{ Component, container }	RenderMethodProps

Returns:

void

class ReactComponentExtension

The extension transforms the ReactComponent property on extensions into the following:

a valid NodeView wrapped dom element - a valid SSR component.

Currently this only support nodes. Support will be added for marks later.

Signature:

export declare class ReactComponentExtension extends PlainExtension<ReactComponentOptions> 

Extends: PlainExtension<ReactComponentOptions>

Remarks:

When creating a NodeView using the component property the toDOM method returned by the createNodeSpec methods needs to be in the following format.

string - e.g. div. This will be used as the wrapper tag name. . - [string, 0] - The wrapper tag name and a 0 indicating that this will be accepting content. - [string, object, 0?] -The wrapper tag name, an object of the attributes that should be applied to the wrapper tag and a 0 when you want the react component to have content inserted into it.

Unfortunately React Components currently require a wrapping tag element when being used in the DOM. See the following for the reasons.

### Caveats

It's not possible to create a node view without nested dom element in react due to this issue https://github.com/facebook/react/issues/12227. It's unlikely that this limitation will be changed any time soon https://github.com/ProseMirror/prosemirror/issues/803

NodeViews have a dom node which is used as the main wrapper element. For paragraphs this would be the p tag and for text this is a TEXT node. NodeView's also have a contentDOM property which is where any content from ProseMirror is injected.

The difficulty in integration is that the dom node and the content dom node of the NodeView are consumed synchronously by ProseMirror. However, react requires a ref to capture the dom node which corresponds to the mounted component. This is done asynchronously. As a result it's not possible to provide the dom node or contentDOM to ProseMirror while using react.

The only way around this is to create both the top level dom element and the contentDOM element manually in the NodeView and provide a forwardRef prop to the component. This prop must be attached to the part of the tree where content should be rendered to. Once the React ref is available the forwardRef prop appends the contentDOM to the element where forwardRef was attached.

(Some inherited members may not be shown because they are not represented in the documentation.)

Extension.(constructor)

Constructs a new instance of the Extension class

Signature:

constructor(...args: ExtensionConstructorProps<Options>);

Parameters:

Parameter	Type	Description
args	ExtensionConstructorProps<Options>

property constructorName

The name that the constructor should have, which doesn't get mangled in production.

Signature:

get constructorName(): string;

property defaultPriority

The default priority for this family of extensions.

Signature:

static readonly defaultPriority: ExtensionPriority;

property extensions

The list of extensions added to the editor by this Preset.

Signature:

get extensions(): Array<this['~E']>;

property name

Signature:

get name(): "reactComponent";

property priority

The priority level for this instance of the extension. A higher value corresponds to a higher priority extension

Signature:

get priority(): ExtensionPriority;

property store

Some properties of the store are available at different phases. You should check the inline documentation to know when a certain property is useable in your extension.

Signature:

protected get store(): Remirror.ExtensionStore;

method clone

Clone an extension.

Signature:

clone(...args: ExtensionConstructorProps<Options>): Extension<Options>;

Parameters:

Parameter	Type	Description
args	ExtensionConstructorProps<Options>

Returns:

Extension<Options>

method createExtensions

Signature:

createExtensions(): AnyExtension[];

Returns:

AnyExtension[]

Remarks:

Since this method is called in the constructor it should always be created as an instance method and not a property. Properties aren't available for the call to the parent class.

class HolderExtension extends PlainExtension {
  get name() {
    return 'holder'
  }

  // GOOD ✅
  createExtensions() {
    return [];
  }

  // BAD ❌
  createExtensions = () => {
    return [];
  }
}

method createNodeViews

Create the node views from the custom components provided.

Signature:

createNodeViews(): Record<string, NodeViewMethod>;

Returns:

Record<string, NodeViewMethod>

method getExtension

Get an extension from this holder extension by providing the desired Constructor.

Signature:

getExtension<Type extends this['~E']['constructor']>(Constructor: Type): InstanceType<Type>;

Parameters:

Parameter	Type	Description
Constructor	Type	the extension constructor to find in the editor.

Returns:

InstanceType<Type>

Remarks:

This method will throw an error if the constructor doesn't exist within the extension created by this extension.

It can be used to forward options and attach handlers to the children extensions. It is the spiritual replacement of the Preset extension.

import { PlainExtension, OnSetOptionsProps } from 'remirror';

interface ParentOptions { weight?: string }

class ParentExtension extends PlainExtension<ParentOptions> {
  get name() {
    return 'parent' as const;
  }

  createExtensions() {
    return [new BoldExtension()]
  }

  onSetOptions(options: OnSetOptionsProps<ParentOptions>): void {
    if (options.changes.weight.changed) {
      // Update the value of the provided extension.
      this.getExtension(BoldExtension).setOption({ weight: options.changes.weight.value });
    }
  }
}

method isOfType

Check if the type of this extension's constructor matches the type of the provided constructor.

Signature:

isOfType<Type extends AnyExtensionConstructor>(Constructor: Type): this is InstanceType<Type>;

Parameters:

Parameter	Type	Description
Constructor	Type

Returns:

this is InstanceType<Type>

method onAppendTransaction

This can be used by the Extension to append a transaction to the latest update.

This is shorthand for the ProsemirrorPlugin.spec.appendTransaction.

Lifecycle Methods

Signature:

onAppendTransaction?(props: AppendLifecycleProps): void;

Parameters:

Parameter	Type	Description
props	AppendLifecycleProps

Returns:

void

method onApplyState

This is called when the state is being applied to the editor. This can be used as a shorthand for the [[Plugin.spec.state.apply]] method.

For example, when using [[createDecorations]] you can respond to editor updates within this callback.

Lifecycle Methods

Signature:

onApplyState?(props: ApplyStateLifecycleProps): void;

Parameters:

Parameter	Type	Description
props	ApplyStateLifecycleProps

Returns:

void

method onCreate

Add the portal container to the manager store. This can be used by the <Remirror /> component to manage portals for node content.

Signature:

onCreate(): void;

Returns:

void

method onDestroy

Called when the extension is being destroyed.

Lifecycle Methods

Signature:

onDestroy?(): void;

Returns:

void

method onInitState

This is called when the prosemirror editor state is first attached to the editor. It can be useful for doing some preparation work.

This is a shorthand for creating a plugin and adding the [[Plugin.spec.state.init]].

Lifecycle Methods

Signature:

onInitState?(state: EditorState): void;

Parameters:

Parameter	Type	Description
state	EditorState

Returns:

void

method onStateUpdate

This handler is called after a transaction successfully updates the editor state. It is called asynchronously after the [[onApplyState]] hook has been run run.

Lifecycle Methods

Signature:

onStateUpdate?(props: StateUpdateLifecycleProps): void;

Parameters:

Parameter	Type	Description
props	StateUpdateLifecycleProps

Returns:

void

method onView

This event happens when the view is first received from the view layer (e.g. React).

Return a dispose function which will be called when the extension is destroyed.

This handler is called after the onCreate handler.

Lifecycle Methods

Signature:

onView?(view: EditorView): Dispose | void;

Parameters:

Parameter	Type	Description
view	EditorView

Returns:

Dispose | void

class ReactExtension

This extension supplies all required extensions for the functionality of the React framework implementation.

Provides support for SSR, Placeholders and React components for components when using **remirror** with React.

Signature:

export declare class ReactExtension extends PlainExtension<ReactExtensionOptions> 

Extends: PlainExtension<ReactExtensionOptions>

(Some inherited members may not be shown because they are not represented in the documentation.)

Extension.(constructor)

Constructs a new instance of the Extension class

Signature:

constructor(...args: ExtensionConstructorProps<Options>);

Parameters:

Parameter	Type	Description
args	ExtensionConstructorProps<Options>

property constructorName

The name that the constructor should have, which doesn't get mangled in production.

Signature:

get constructorName(): string;

property defaultPriority

The default priority for this family of extensions.

Signature:

static readonly defaultPriority: ExtensionPriority;

property extensions

The list of extensions added to the editor by this Preset.

Signature:

get extensions(): Array<this['~E']>;

property name

Signature:

get name(): "react";

property priority

The priority level for this instance of the extension. A higher value corresponds to a higher priority extension

Signature:

get priority(): ExtensionPriority;

property store

Some properties of the store are available at different phases. You should check the inline documentation to know when a certain property is useable in your extension.

Signature:

protected get store(): Remirror.ExtensionStore;

method clone

Clone an extension.

Signature:

clone(...args: ExtensionConstructorProps<Options>): Extension<Options>;

Parameters:

Parameter	Type	Description
args	ExtensionConstructorProps<Options>

Returns:

Extension<Options>

method createExtensions

Signature:

createExtensions(): (PlaceholderExtension | ReactComponentExtension)[];

Returns:

(PlaceholderExtension | ReactComponentExtension)[]

method getExtension

Get an extension from this holder extension by providing the desired Constructor.

Signature:

getExtension<Type extends this['~E']['constructor']>(Constructor: Type): InstanceType<Type>;

Parameters:

Parameter	Type	Description
Constructor	Type	the extension constructor to find in the editor.

Returns:

InstanceType<Type>

Remarks:

This method will throw an error if the constructor doesn't exist within the extension created by this extension.

It can be used to forward options and attach handlers to the children extensions. It is the spiritual replacement of the Preset extension.

import { PlainExtension, OnSetOptionsProps } from 'remirror';

interface ParentOptions { weight?: string }

class ParentExtension extends PlainExtension<ParentOptions> {
  get name() {
    return 'parent' as const;
  }

  createExtensions() {
    return [new BoldExtension()]
  }

  onSetOptions(options: OnSetOptionsProps<ParentOptions>): void {
    if (options.changes.weight.changed) {
      // Update the value of the provided extension.
      this.getExtension(BoldExtension).setOption({ weight: options.changes.weight.value });
    }
  }
}

method isOfType

Check if the type of this extension's constructor matches the type of the provided constructor.

Signature:

isOfType<Type extends AnyExtensionConstructor>(Constructor: Type): this is InstanceType<Type>;

Parameters:

Parameter	Type	Description
Constructor	Type

Returns:

this is InstanceType<Type>

method onAppendTransaction

This can be used by the Extension to append a transaction to the latest update.

This is shorthand for the ProsemirrorPlugin.spec.appendTransaction.

Lifecycle Methods

Signature:

onAppendTransaction?(props: AppendLifecycleProps): void;

Parameters:

Parameter	Type	Description
props	AppendLifecycleProps

Returns:

void

method onApplyState

This is called when the state is being applied to the editor. This can be used as a shorthand for the [[Plugin.spec.state.apply]] method.

For example, when using [[createDecorations]] you can respond to editor updates within this callback.

Lifecycle Methods

Signature:

onApplyState?(props: ApplyStateLifecycleProps): void;

Parameters:

Parameter	Type	Description
props	ApplyStateLifecycleProps

Returns:

void

method onCreate

This handler is called when the RemirrorManager is first created.

Signature:

onCreate?(): Dispose | void;

Returns:

Dispose | void

Remarks:

You can return a Dispose function which will automatically be called when the extension is destroyed.

This handler is called before the onView handler.

Lifecycle Methods

method onDestroy

Called when the extension is being destroyed.

Lifecycle Methods

Signature:

onDestroy?(): void;

Returns:

void

method onInitState

This is called when the prosemirror editor state is first attached to the editor. It can be useful for doing some preparation work.

This is a shorthand for creating a plugin and adding the [[Plugin.spec.state.init]].

Lifecycle Methods

Signature:

onInitState?(state: EditorState): void;

Parameters:

Parameter	Type	Description
state	EditorState

Returns:

void

method onSetOptions

Signature:

protected onSetOptions(props: OnSetOptionsProps<ReactExtensionOptions>): void;

Parameters:

Parameter	Type	Description
props	OnSetOptionsProps<ReactExtensionOptions>

Returns:

void

method onStateUpdate

This handler is called after a transaction successfully updates the editor state. It is called asynchronously after the [[onApplyState]] hook has been run run.

Lifecycle Methods

Signature:

onStateUpdate?(props: StateUpdateLifecycleProps): void;

Parameters:

Parameter	Type	Description
props	StateUpdateLifecycleProps

Returns:

void

method onView

This event happens when the view is first received from the view layer (e.g. React).

Return a dispose function which will be called when the extension is destroyed.

This handler is called after the onCreate handler.

Lifecycle Methods

Signature:

onView?(view: EditorView): Dispose | void;

Parameters:

Parameter	Type	Description
view	EditorView

Returns:

Dispose | void

function createEditorView()

Creates a new editor view

Signature:

export declare function createEditorView(place: Node | ((p: HTMLElement) => void) | null, props: DirectEditorProps): EditorView;

Parameters:

Parameter	Type	Description
place	Node \| ((p: HTMLElement) => void) \| null
props	DirectEditorProps

Returns:

EditorView

function createReactManager()

Create a React [[RemirrorManager]] with all the default react presets and extensions.

Signature:

export declare function createReactManager<Extension extends AnyExtension>(extensions: Extension[] | (() => Extension[]) | RemirrorManager<ReactExtensions<Extension>>, options?: CreateReactManagerOptions): RemirrorManager<ReactExtensions<Extension>>;

Parameters:

Parameter	Type	Description
extensions	Extension[] \| (() => Extension[]) \| RemirrorManager<ReactExtensions<Extension>>
options	CreateReactManagerOptions	(Optional)

Returns:

RemirrorManager<ReactExtensions<Extension>>

function GenIcon()

A higher order component which creates the Icon component.

Signature:

export declare function GenIcon(tree: IconTree[], viewBox?: string): IconType;

Parameters:

Parameter	Type	Description
tree	IconTree[]
viewBox	string	(Optional)

Returns:

IconType

function indexFromArrowPress()

Get the next index from an arrow key press.

Signature:

export declare function indexFromArrowPress({ direction, matchLength, previousIndex, }: IndexFromArrowPressProps): number;

Parameters:

Parameter	Type	Description
{ direction, matchLength, previousIndex, }	IndexFromArrowPressProps

Returns:

number

function MentionAtomPopupComponent()

This component renders the emoji suggestion dropdown for the user.

Signature:

export declare function MentionAtomPopupComponent<Data extends MentionAtomNodeAttributes = MentionAtomNodeAttributes>(props: MentionAtomPopupComponentProps<Data>): JSX.Element;

Parameters:

Parameter	Type	Description
props	MentionAtomPopupComponentProps<Data>

Returns:

JSX.Element

function Remirror_2()

[[Remirror]] is the component for putting the editor into into it's child component.

Signature:

export declare function Remirror<Extension extends AnyExtension = Remirror.Extensions>(props: RemirrorProps<Extension>): ReactElement<RemirrorProps<Extension>>;

Parameters:

Parameter	Type	Description
props	RemirrorProps<Extension>

Returns:

ReactElement<RemirrorProps<Extension>>

Remarks:

The main component for remirror. This acts both as a Provider of the remirror context. All components rendered within Remirror have access to the remirror context via useRemirrorContext.

I can also be rendered as a standalone editor without children. In this case the context can be accessed from outside the editor via useRemirror().getContext().

function useActive()

This is a shorthand method for retrieving the active available in the editor.

import { useActive } from '@remirror/react';

This hooks updates the local component on each state update for the editor, so it can be quite expensive.

Signature:

export declare function useActive<Extension extends AnyExtension = Remirror.Extensions>(autoUpdate?: boolean): ActiveFromExtensions<Extension>;

Parameters:

Parameter	Type	Description
autoUpdate	boolean	(Optional) Set to false to prevent automatic re-rendering on every state update.

Returns:

ActiveFromExtensions<Extension>

function useAttrs()

A core hook which provides the attributes for the nodes and marks in the editor.

import { useAttrs } from '@remirror/react';

const EditorButton = () => {
  const attrs = useAttrs();
  const { link } = attrs;

  return <a href={link.href}>{link().href}</a>;
}

Signature:

export declare function useAttrs<Extension extends AnyExtension = Remirror.Extensions>(update?: boolean): AttrsFromExtensions<Extension>;

Parameters:

Parameter	Type	Description
update	boolean	(Optional)

Returns:

AttrsFromExtensions<Extension>

function useChainedCommands()

A core hook which provides the chainable commands for usage in your editor.

import { useChainedCommands } from '@remirror/react';

const EditorButton = () => {
  const chain = useChainedCommands();

  return (
    <>
      <button onClick={() => chain.toggleBold().toggleItalic().run()}>
        Chain me!
      </button>
    </>
  );
}

Signature:

export declare function useChainedCommands<Extension extends AnyExtension = Remirror.Extensions | AnyExtension>(): ChainedFromExtensions<Extension>;

Returns:

ChainedFromExtensions<Extension>

function useCommands()

A core hook which provides the commands for usage in your editor.

import { useCommands } from '@remirror/react';

const EditorButton = () => {
  const commands = useCommands();

  return (
    <>
      <button onClick={() => commands.toggleBold()}>
        Click me!
      </button>
    </>
  );
}

Signature:

export declare function useCommands<Extension extends AnyExtension = Remirror.Extensions>(): CommandsFromExtensions<Extension>;

Returns:

CommandsFromExtensions<Extension>

function useCurrentSelection()

A core hook which returns the current selection.

Signature:

export declare function useCurrentSelection(): Selection;

Returns:

Selection

function useDocChanged()

A hook for subscribing to transactions that change the document

Signature:

export declare function useDocChanged(handler: NonNullable<GetHandler<DocChangedOptions>['docChanged']>): void;

Parameters:

Parameter	Type	Description
handler	NonNullable<GetHandler<DocChangedOptions>['docChanged']>

Returns:

void

function useEditorDomRef()

A hook which provides a react ref wrapper for the view.dom.

Signature:

export declare function useEditorDomRef(): MutableRefObject<HTMLElement>;

Returns:

MutableRefObject<HTMLElement>

function useEditorEvent()

A hook for subscribing to events from the editor.

Signature:

export declare function useEditorEvent<Key extends StringKey<GetHandler<EventsOptions>>>(event: Key, handler: NonNullable<GetHandler<EventsOptions>[Key]>): void;

Parameters:

Parameter	Type	Description
event	Key
handler	NonNullable<GetHandler<EventsOptions>[Key]>

Returns:

void

function useEditorFocus()

Keep track of the editor focus.

Returns a focused value which is updated whenever the editor focus changes.

When true, the editor is focused when false the editor is not focused.

Signature:

export declare function useEditorFocus(props?: UseEditorFocusProps): [isFocused: boolean, focus: (position?: FocusType) => void];

Parameters:

Parameter	Type	Description
props	UseEditorFocusProps	(Optional)

Returns:

[isFocused: boolean, focus: (position?: FocusType) => void]

function useEditorState()

A core hook which provides the latest editor state every time that it updates.

Signature:

export declare function useEditorState(): EditorState;

Returns:

EditorState

function useEditorView()

A hook which provides access to the editor view.

Signature:

export declare function useEditorView(): EditorView;

Returns:

EditorView

function useEmoji()

This hook provides the state for setting up an emoji state change handler. It applies the keybindings and the required change handlers.

Signature:

export declare function useEmoji(props?: UseEmojiProps): UseEmojiReturn;

Parameters:

Parameter	Type	Description
props	UseEmojiProps	(Optional)

Returns:

UseEmojiReturn

function useExtension()

Dynamically update the properties of your extension via hooks. Provide the Extension constructor and the properties you want to update.

Signature:

export declare function useExtension<Type extends AnyExtensionConstructor>(Constructor: Type): InstanceType<Type>;

Parameters:

Parameter	Type	Description
Constructor	Type

Returns:

InstanceType<Type>

Remarks:

Please note that every time the properties change your extension is updated. You will want to memoize or prevent needless updates somehow to the properties passed in.

This is only available within the context of the Remirror it will throw an error otherwise.

It can be used with three distinct call signatures.

**Get the extension instance**

import { useExtension } from '@remirror/react';
import { BoldExtension } from 'remirror/extensions';

const Editor = () => {
  const boldExtension = useExtension(BoldExtension);

  boldExtension.setOptions({ weight: '800' });

  return null;
}

**Update the extension properties**

import { useExtension } from '@remirror/react';
import { PlaceholderExtension } from 'remirror/extensions';

const EditorPlaceholder = ({ placeholder = 'Your magnum opus' }) => {
  useExtension(PlaceholderExtension, { placeholder }); // Updates the placeholder.

  return null;
}

**Add event handlers to your extension**

import { useCallback } from 'react';
import { HistoryExtension, HistoryOptions } from 'remirror/extensions';
import { useExtension } from '@remirror/react';

const Editor = ({ placeholder = 'Your magnum opus' }) => {
  useExtension(
    HistoryExtension,
    useCallback(
      ({ addHandler }) => {
        return addHandler('onRedo', () => log('a redo just happened'));
      },
      [],
    ),
    [event, handler],
  );

  return null;
};

These hooks can serve as the building blocks when customizing your editor experience with remirror.

function useExtension()

Signature:

export declare function useExtension<Type extends AnyExtensionConstructor>(Constructor: Type, memoizedCallback: UseExtensionCallback<Type>, dependencies?: DependencyList): void;

Parameters:

Parameter	Type	Description
Constructor	Type
memoizedCallback	UseExtensionCallback<Type>
dependencies	DependencyList	(Optional)

Returns:

void

function useExtension()

Signature:

export declare function useExtension<Type extends AnyExtensionConstructor>(Constructor: Type, options: DynamicOptionsOfConstructor<Type>): void;

Parameters:

Parameter	Type	Description
Constructor	Type
options	DynamicOptionsOfConstructor<Type>

Returns:

void

function useExtensionEvent()

Dynamically add event handlers to your extension.

Signature:

export declare function useExtensionEvent<Type extends AnyExtensionConstructor, Key extends keyof GetHandler<OptionsOfConstructor<Type>>>(extension: Type, event: Key, memoizedHandler: Handler<GetHandler<OptionsOfConstructor<Type>>[Key]>): void;

Parameters:

Parameter	Type	Description
extension	Type
event	Key
memoizedHandler	Handler<GetHandler<OptionsOfConstructor<Type>>[Key]>

Returns:

void

Remarks:

Please note that every time the properties change your extension is updated. You will want to memoize or prevent needless updates somehow to the properties passed in.

This is only available within the context of the Remirror it will throw an error otherwise.

import { useCallback } from 'react';
import { HistoryExtension } from 'remirror/extensions';
import { useExtensionEvent } from '@remirror/react';

const RedoLogger = () => {
  useExtensionEvent(
    HistoryExtension,
    'onRedo',
    useCallback(() => log('a redo just happened'), []),
  );

  return null;
};

These hooks can serve as the building blocks when customizing your editor experience with remirror.

function useHasExtension()

Assert if an extension is present in the manager by providing its constructor

Signature:

export declare function useHasExtension<Type extends AnyExtensionConstructor>(Constructor: Type): boolean;

Parameters:

Parameter	Type	Description
Constructor	Type

Returns:

boolean

function useHelpers()

A core hook which provides the helpers for usage in your editor.

import { useHelpers } from '@remirror/react';

const EditorButton = () => {
  const helpers = useHelpers();

  return (
    <>
      <button onClick={() => helpers.toggleBold()}>
        Click me!
      </button>
      <button onClick={() => helpers.chain.toggleBold().toggleItalic().run()}>
        Chain me!
      </button>
    </>
  );
}

Passing true as the first argument will ensure that the component this hook is placed inside will rerender on every update.

Signature:

export declare function useHelpers<Extension extends AnyExtension = Remirror.Extensions>(update?: boolean): HelpersFromExtensions<Extension>;

Parameters:

Parameter	Type	Description
update	boolean	(Optional)

Returns:

HelpersFromExtensions<Extension>

function useHistory()

A hook which is called every time an undo or redo event is triggered from within the ProseMirror history extension.

Signature:

export declare function useHistory<Key extends StringKey<GetHandler<HistoryOptions>>>(event: Key, handler: NonNullable<GetHandler<HistoryOptions>[Key]>): void;

Parameters:

Parameter	Type	Description
event	Key
handler	NonNullable<GetHandler<HistoryOptions>[Key]>

Returns:

void

Remarks:

handler should be a memoized function.

function useHover()

A hook which listens to hover events.

Provide a memoized handler which is provided with the nodes which were directly touched by the hover: true or hover: false event.

Signature:

export declare function useHover(handler: HoverEventHandler): void;

Parameters:

Parameter	Type	Description
handler	HoverEventHandler

Returns:

void

function useI18n()

Signature:

export declare function useI18n(): UseI18nReturn;

Returns:

UseI18nReturn

function useKeymap()

Add custom keyboard bindings to the editor instance.

Signature:

export declare function useKeymap(name: LiteralUnion<KeyBindingNames, string>, handler: KeyBindingCommandFunction, priority?: ExtensionPriority): void;

Parameters:

Parameter	Type	Description
name	LiteralUnion<KeyBindingNames, string>
handler	KeyBindingCommandFunction
priority	ExtensionPriority	(Optional)

Returns:

void

Remarks:

import { useCallback } from 'react';
import { BoldExtension } from 'remirror/extensions';
import { Remirror, useHelpers, useKeymap, useRemirror, useRemirrorContext } from '@remirror/react';

const hooks = [
  () => {
    const active = useActive();
    const { insertText } = useCommands();
    const boldActive = active.bold();
    const handler = useCallback(() => {
      if (!boldActive) {
        return false;
      }

      // Prevent the keypress from using the default action.
      return insertText.original('\n\nWoah there!')(props);
    }, [boldActive, insertText]);

    useKeymap('Shift-Enter', handler); // Add the handler to the keypress pattern.
  },
];

const Editor = () => {
  const { manager } = useRemirror({ extensions: () => [new BoldExtension()] });

  return <Remirror manager={manager} hooks={hooks} />;
};

function useKeymaps()

Add custom keyboard bindings to the editor instance.

Signature:

export declare function useKeymaps(bindings: KeyBindings, priority?: ExtensionPriority): void;

Parameters:

Parameter	Type	Description
bindings	KeyBindings
priority	ExtensionPriority	(Optional)

Returns:

void

Remarks:

import { Remirror, useRemirror, useRemirrorContext, useKeymaps  } from '@remirror/react';

const Editor = () => {
  const { manager } = useRemirror({ extensions: () => [] });

  return (
    <Remirror manager={manager}>
      <EditorBindings />
    </Remirror>
  );
};

const EditorBindings = () => {
  const { getRootProps } = useRemirrorContext({ autoUpdate: true });

  useKeymaps({
    Enter: () => {
      // Prevent the tne enter key from being pressed.
      return true;
    }
  });

  return <div {...getRootProps()} />;
};

function useMarkRange()

A hook which returns the selected range of the mark of the provided type.

Signature:

export declare function useMarkRange(type: string): GetMarkRange | undefined;

Parameters:

Parameter	Type	Description
type	string

Returns:

GetMarkRange | undefined

function useMention()

A hook that provides the state for social mentions that responds to keybindings and key-presses from the user.

This is used by the SocialMentionDropdown component and can be used by you for a customized component.

The only prop required is the list of data in order to support keybinding and properly selecting the index for you. The data must have a label and id key. The label is the text that should be shown inside the mention and the id is whatever unique identifier that can be used.

You can also add other supported attributes which will be added to the mention node, like href and whatever you decide.

Signature:

export declare function useMention<Data extends MentionExtensionAttributes = MentionExtensionAttributes>(props: UseMentionProps<Data>): UseMentionReturn<Data>;

Parameters:

Parameter	Type	Description
props	UseMentionProps<Data>

Returns:

UseMentionReturn<Data>

function useMentionAtom()

A hook that provides the state for social mention atoms that responds to keybindings and key-presses from the user.

The difference between this and the useMention is that useMention creates editable mentions that can be changed over an over again. This creates atom mention which are inserted into the editor as non editable nodes. Backspacing into this node will delete the whole mention.

In order to properly support keybindings you will need to provide a list of data that is to be shown to the user. This allows for the user to press the arrow up and arrow down key.

You can also add other supported attributes which will be added to the mention node, like href and whatever you decide upon.

Signature:

export declare function useMentionAtom<Data extends MentionAtomNodeAttributes = MentionAtomNodeAttributes>(props: UseMentionAtomProps<Data>): UseMentionAtomReturn<Data>;

Parameters:

Parameter	Type	Description
props	UseMentionAtomProps<Data>	the props that can be passed through to the mention atom.

Returns:

UseMentionAtomReturn<Data>

function useMenuNavigation()

This hook provides the primitives for rendering a dropdown menu within

Signature:

export declare function useMenuNavigation<Item = any>(props: MenuNavigationProps): UseMenuNavigationReturn<Item>;

Parameters:

Parameter	Type	Description
props	MenuNavigationProps

Returns:

UseMenuNavigationReturn<Item>

function useMultiPositioner()

A positioner for your editor. This returns an array of active positions and is useful for tracking the positions of multiple items in the editor.

import { Positioner } from 'remirror/extensions';
import { useMultiPositioner } from '@remirror/react';

const positioner = Positioner.create({
  ...config, // custom config
})

const MenuComponent: FC = () => {
  const positions = usePositioner(positioner, []);

  return (
    <>
      {
        positions.map(({ ref, bottom, left, key }) => (
          <div style={{ bottom, left }} ref={ref} key={key}>
            <MenuIcon {...options} />
          </div>
        )
      }
    </>
  )
};

Signature:

export declare function useMultiPositioner<Data = any>(positioner: PositionerParam, deps: unknown[]): Array<UseMultiPositionerReturn<Data>>;

Parameters:

Parameter	Type	Description
positioner	PositionerParam	the positioner which will be used
deps	unknown[]	an array of dependencies which will cause the hook to rerender with an updated positioner. This is the only way to update the positioner.

Returns:

Array<UseMultiPositionerReturn<Data>>

function usePortalContainer()

A hook which provides access to the portal container for rendering react component directly within the editor dom.

Signature:

export declare function usePortalContainer(): PortalContainer;

Returns:

PortalContainer

function usePortals()

A hook which subscribes to updates from the portal container.

This is should used in the ReactEditor component and the value should be passed through to the RemirrorPortals component.

Signature:

export declare function usePortals(portalContainer: PortalContainer): Array<[HTMLElement, MountedPortal]>;

Parameters:

Parameter	Type	Description
portalContainer	PortalContainer

Returns:

Array<[HTMLElement, MountedPortal]>

function usePositioner()

A hook for creating a positioner with the PositionerExtension. When an active position exists for the provided positioner it will return an object with the ref, top, left, bottom, right properties.

Signature:

export declare function usePositioner<Data = any>(positioner: StringPositioner, isActive?: boolean): UsePositionerReturn<Data>;

Parameters:

Parameter Type Description

positioner StringPositioner the positioner to use which can be a string or a Positioner instance.

isActive

boolean

(Optional) Set this to a boolean to override whether the positioner is active. true leaves the behaviour unchanged.

In a recent update, the positioner is now automatically memoized for you.

Returns:

UsePositionerReturn<Data>

Remarks:

Must apply the ref to the component when called.

import { usePositioner } from '@remirror/react';

const MenuComponent: FC = () => {
  const positions = usePositioner('bubble');

  return (
    <div style={{ bottom, left }} ref={ref}>
      <MenuIcon {...options} />
    </div>
  );
}

const Wrapper = () => (
  <Remirror extensions={[]}>
    <MenuComponent />
  </Remirror>
)

function usePositioner()

Signature:

export declare function usePositioner<Data = any>(positioner: Positioner | CallbackPositioner, deps: unknown[]): UsePositionerReturn<Data>;

Parameters:

Parameter	Type	Description
positioner	Positioner \| CallbackPositioner
deps	unknown[]

Returns:

UsePositionerReturn<Data>

function useRemirror()

A hook which replaces the [[Remirror]] and gives you total control of the editor you can create.

This is very experimental and if successful could replace the current patterns being used.

Signature:

export declare function useRemirror<Extension extends AnyExtension>(props?: UseRemirrorProps<Extension>): UseRemirrorReturn<ReactExtensions<Extension>>;

Parameters:

Parameter	Type	Description
props	UseRemirrorProps<Extension>	(Optional)

Returns:

UseRemirrorReturn<ReactExtensions<Extension>>

function useRemirrorContext()

This provides access to the remirror context when using the Remirror.

The first argument which is optional can also be a change handler which is called every time the state updates.

Signature:

export declare function useRemirrorContext<Extension extends AnyExtension = Remirror.Extensions>(handler?: RemirrorEventListener<Extension> | {
    autoUpdate: boolean;
}): ReactFrameworkOutput<Extension>;

Parameters:

Parameter	Type	Description
handler	RemirrorEventListener<Extension> \| { autoUpdate: boolean; }	(Optional)

Returns:

ReactFrameworkOutput<Extension>

Remarks:

The following example applies the root props to the div.

import { Remirror, useRemirrorContext } from 'remirror';

const HooksComponent = (props) => {
  // This pulls the remirror props out from the context.
  const { getRootProps } = useRemirrorContext();

  return <div {...getRootProps()} />;
}

class App extends Component {
  render() {
    return (
      <Remirror>
        <HooksComponent />
      </Remirror>
    );
  }
}

For performance reasons useRemirror does not automatically trigger a rerender on every editor update. This allows for you use it in component which don't need to track the latest editor state, without suffering a performance penalty.

However if you do want to track whether a command is enabled at the current selection or whether a certain formatting mark (bold) is active at the current selection you can pass through an optional parameter.

const EditorButton = () => {
  const { active, commands } = useRemirrorContext({ autoUpdate: true });

  return (
    <button style={{ fontWeight: active.bold() ? 'bold' : undefined }}>
      B
    <button>
  );
}

The above example keep track of whether the current selection is bold on every update to the editor. Updates can be document changes and selection changes.

For more control you can also use a handler function as the first parameter to selectively rerender as you see fit.

const EditorButton = () => {
  const { active, commands } = useRemirrorContext(() => {
    if (active.bold() === boldActive) {
      return;
    }

    setBoldActive(active.bold());
  });

  const [boldActive, setBoldActive] = useState(active.bold());

  return (
    <button style={{ fontWeight: boldActive ? 'bold' : undefined }}>
      B
    <button>
  )
}

In this case the component only re-renders when the bold formatting changes.

function useSelectedText()

A core hook which provides the the currently selected text.

import { useSelectedText } from '@remirror/react';

const RandomSpan = () => {
  const text = useSelectedText();

  return text  && <span>{text}</span>;
}

Return the value of the currently selected text. When the text selection is empty

Signature:

export declare function useSelectedText(): string | undefined;

Returns:

string | undefined

function useSuggest()

This hook allows you to dynamically create a suggester which can respond to user input of activation characters or regex patterns.

By adding a suggester it is possible to keep track of what the user has typed and receive meaningful information in return.

This includes

The range of the matching text - The matching text value - The query value, which excludes the matching character (or character regex). - The matching capture groups [FULL_MATCH, MATCHING_CHARACTER, CUSTOM_GROUPS]

The return value has two keys, exit and change which can both be undefined. The reason for including both the exit and change return values is that it's possible for both to occur at the the same time during a **jump** from one [[Suggester]] _match_ to another suggester match.

The cursor has exited and entered (changed) at the same time.

Signature:

export declare function useSuggest(props: UseSuggestProps): UseSuggestReturn;

Parameters:

Parameter	Type	Description
props	UseSuggestProps

Returns:

UseSuggestReturn

function useTheme()

Get the theme from the context and convert it to a style object which can be attached to any element.

The theme provided is deeply merged with the parent theme.

Signature:

export declare function useTheme(props?: UseThemeProps): {
    theme: RemirrorThemeType;
    style: CSSProperties;
    className?: string;
};

Parameters:

Parameter	Type	Description
props	UseThemeProps	(Optional)

Returns:

{ theme: RemirrorThemeType; style: CSSProperties; className?: string; }

function useUpdateReason()

Provide the reason for the latest state update with boolean flags.

Signature:

export declare function useUpdateReason(): UpdateReason;

Returns:

UpdateReason

variable Callout

Signature:

Callout: FC<{
    node: RemirrorJSON;
    markMap: MarkMap;
    children?: never;
}>

variable CodeBlock

Signature:

CodeBlock: FC<{
    node: RemirrorJSON;
    markMap: MarkMap;
}>

variable createIFrameHandler

Signature:

createIFrameHandler: (overwriteAttrs?: Record<string, Literal>) => IFrameHandler

variable createLinkHandler

Signature:

createLinkHandler: (overwriteAttrs?: Record<string, Literal>) => LinkHandler

variable Doc

Signature:

Doc: FC<SubRenderTreeProps>

variable EditorComponent

The default editor placeholder where the prosemirror editor will be rendered.

Signature:

EditorComponent: () => JSX.Element

variable EmojiPopupComponent

This component renders the emoji suggestion dropdown for the user.

Signature:

EmojiPopupComponent: FC

variable FloatingWrapper

Signature:

FloatingWrapper: FC<PropsWithChildren<FloatingWrapperProps>>

variable Heading

Signature:

Heading: FC<{
    node: RemirrorJSON;
    markMap: MarkMap;
}>

variable I18nProvider

Signature:

I18nProvider: FC<I18nProps>

variable Icon

Dynamic icons for the remirror codebase..

Signature:

Icon: (props: IconProps) => JSX.Element

variable IconBase

The base icon as an svg with the icon context available

Signature:

IconBase: (props: IconBaseProps) => JSX.Element

variable OnChangeHTML

Signature:

OnChangeHTML: ({ onChange }: OnChangeHTMLProps) => null

variable OnChangeJSON

Signature:

OnChangeJSON: ({ onChange }: OnChangeJSONProps) => null

variable PositionerPortal

Render a component into the editors positioner widget using createPortal from react-dom.

Signature:

PositionerPortal: FC<PositionerComponentProps>

variable RemirrorContext

The ReactContext for the Remirror editor.

Signature:

RemirrorContext: import("react").Context<ReactFrameworkOutput<any> | null>

variable RemirrorPortals

The component that places all the portals into the DOM.

Portals can currently be created by a [[ReactNodeView]] and coming soon both the [[ReactMarkView]] and [[ReactDecoration]].

Signature:

RemirrorPortals: (props: RemirrorPortalsProps) => JSX.Element

variable RemirrorRenderer

A recursively rendered tree.

Signature:

RemirrorRenderer: FC<RenderTreeProps>

variable TextHandler

Signature:

TextHandler: FC<TextHandlerProps>

variable ThemeProvider

This the ThemeProvider. Wrap your editor with it to customise the theming of content within your editor.

Please be aware that this wraps your component in an extra dom layer.

Signature:

ThemeProvider: (props: ThemeProviderProps) => ReactElement<ThemeProviderProps>

interface CreateNodeViewProps

Signature:

export interface CreateNodeViewProps 

property options

The options passed through to the react extension component.

Signature:

options: GetFixed<ReactComponentOptions>;

property portalContainer

A container and event dispatcher which keeps track of all dom elements that hold node views

Signature:

portalContainer: PortalContainer;

property ReactComponent

The react component that will be added to the DOM.

Signature:

ReactComponent: ComponentType<NodeViewComponentProps>;

interface CreateReactManagerOptions

The options for the exported createReactManager method.

Signature:

export interface CreateReactManagerOptions extends CreateCoreManagerOptions 

Extends: CreateCoreManagerOptions

(Some inherited members may not be shown because they are not represented in the documentation.)

property core

The core preset options.

Signature:

core?: GetStaticAndDynamic<CorePresetOptions>;

property react

Options for the react preset.

Signature:

react?: GetStaticAndDynamic<ReactExtensionOptions>;

interface EmojiState

Signature:

export interface EmojiState extends Pick<EmojiSuggestHandlerProps, 'range' | 'query' | 'exit'> 

Extends: Pick<EmojiSuggestHandlerProps, 'range' | 'query' | 'exit'>

(Some inherited members may not be shown because they are not represented in the documentation.)

property apply

The command to run to replace the query with the request emoji.

Signature:

apply: EmojiSuggestHandlerCommand;

property list

The list of emoji generated by the query.

Signature:

list: FlatEmojiWithUrl[];

interface FlatEmojiWithUrl

Signature:

export interface FlatEmojiWithUrl extends FlatEmoji 

Extends: FlatEmoji

(Some inherited members may not be shown because they are not represented in the documentation.)

property url

The svg url for CDN access.

Signature:

url: string;

interface GetRootPropsConfig

The config options for the getRootProps method.

Signature:

export interface GetRootPropsConfig<RefKey extends string = 'ref'> extends RefProps<RefKey>, Shape 

Extends: RefProps<RefKey>, Shape

property ref

Allows for composing the refs together. If you have a ref you would also like to add to the main element then just add it here.

Signature:

ref?: Ref<HTMLElement>;

property refKey

A custom ref key which allows a reference to be obtained from non standard components.

Signature:

refKey?: RefKey;

Signature:

[key: string]: any;

interface I18nProps

Signature:

export interface I18nProps 

property children

Signature:

children?: ReactNode;

property i18nFormat

Provide a function that formats ICU MessageFormat encoded messages, via your chosen i18n solution.

You can use the i18nFormat function from the optional @remirror/i18n library, which is powered by Lingui

import { i18nFormat } from '@remirror/i18n';

const Editor = () => {
  <Remirror i18nFormat={i18nFormat} />
}

Signature:

i18nFormat?: I18nFormatter;

property locale

The current locale for this context.

Signature:

locale?: string;

property supportedLocales

Supported locales. Defaults to including the locale.

Signature:

supportedLocales?: string[];

interface IconBaseProps

Signature:

export interface IconBaseProps extends SVGAttributes<SVGElement> 

Extends: SVGAttributes<SVGElement>

(Some inherited members may not be shown because they are not represented in the documentation.)

property children

Signature:

children?: ReactNode;

property color

Signature:

color?: string;

property size

Signature:

size?: string | number;

property title

Signature:

title?: string;

interface IconProps

Signature:

export interface IconProps extends IconBaseProps 

Extends: IconBaseProps

(Some inherited members may not be shown because they are not represented in the documentation.)

property children

Signature:

children?: ReactNode;

property color

Signature:

color?: string;

property name

The name of the core icon to use.

Signature:

name: Icons.CoreIcon;

property size

Signature:

size?: string | number;

property title

Signature:

title?: string;

interface MentionAtomState

Signature:

export interface MentionAtomState<Data extends MentionAtomNodeAttributes = MentionAtomNodeAttributes> extends Pick<SuggestChangeHandlerProps, 'name' | 'query' | 'text' | 'range'> 

Extends: Pick<SuggestChangeHandlerProps, 'name' | 'query' | 'text' | 'range'>

(Some inherited members may not be shown because they are not represented in the documentation.)

property command

A command that will update the current matching region with the provided attributes. To see what can be accomplished please inspect the type of the attrs which should be passed through.

Signature:

command: (attrs: Data) => void;

property reason

The reason for the change.

Signature:

reason: ChangeReason;

interface MentionState

Signature:

export interface MentionState<Data extends MentionExtensionAttributes = MentionExtensionAttributes> extends Pick<SuggestChangeHandlerProps, 'name' | 'query' | 'text' | 'range'> 

Extends: Pick<SuggestChangeHandlerProps, 'name' | 'query' | 'text' | 'range'>

(Some inherited members may not be shown because they are not represented in the documentation.)

property command

This command when the mention is active.

Signature:

command: (item: Data) => void;

property reason

The reason for the change.

Signature:

reason: ChangeReason;

interface MenuNavigationOptions

Signature:

export interface MenuNavigationOptions 

property direction

The direction of the arrow key press.

Signature:

direction?: MenuDirection;

property dismissKeys

Keys that can dismiss the menu.

Signature:

dismissKeys?: KeyBindingNames[];

property focusOnClick

When true, refocus the editor when a click is made.

Signature:

focusOnClick?: boolean;

property submitKeys

Keys that can submit the selection.

Signature:

submitKeys?: KeyBindingNames[];

interface MountedPortal

Signature:

export interface MountedPortal extends RenderProps 

Extends: RenderProps

property Component

Renders a JSX element.

Signature:

Component: FunctionComponent;

property key

Signature:

key: string;

interface NodeViewComponentProps

Signature:

export interface NodeViewComponentProps extends EditorViewProps, NodeWithAttributesProps 

Extends: EditorViewProps, NodeWithAttributesProps

property decorations

The decorations which are currently applied to the ReactNodeView.

Signature:

decorations: readonly Decoration[];

property forwardRef

A ref callback which should be used by the component to pass the dom reference of the react element back to the node view. This is used as container where the content within which the content will be placed.

This **must** be used in your component otherwise the editor has no understanding of where to render the node content and defaults to placing it within the provided element created by the toDOM method.

Signature:

forwardRef: RefCallback<HTMLElement>;

property getPosition

Provides the position of the node view in the prosemirror document

Signature:

getPosition: GetPosition;

property node

A prosemirror node with a specific shape for node.attrs

Signature:

node: NodeWithAttributes<Attributes>;

property selected

This is true when the component is selected.

Signature:

selected: boolean;

property updateAttributes

Update the attributes for the target node.

This should be called in the useEffect hook to prevent excessive renders.

Signature:

updateAttributes: (attrs: ProsemirrorAttributes) => void;

property view

An instance of the Prosemirror editor view.

Signature:

view: EditorView;

interface OnChangeHTMLProps

Signature:

export interface OnChangeHTMLProps 

property onChange

Signature:

onChange: (html: string) => void;

interface OnChangeJSONProps

Signature:

export interface OnChangeJSONProps 

property onChange

Signature:

onChange: (json: RemirrorJSON) => void;

interface PlaceholderOptions

Signature:

export interface PlaceholderOptions 

property emptyNodeClass

The class to decorate the empty top level node with. If you change this then you will also need to apply your own styles.

Signature:

emptyNodeClass?: string;

property placeholder

The placeholder text to use.

Signature:

placeholder?: string;

interface PlaceholderPluginState

Signature:

export interface PlaceholderPluginState extends Required<PlaceholderOptions> 

Extends: Required<PlaceholderOptions>

(Some inherited members may not be shown because they are not represented in the documentation.)

property empty

Signature:

empty: boolean;

interface PositionerComponentProps

Signature:

export interface PositionerComponentProps 

property children

Signature:

children: ReactNode;

interface ReactComponentOptions

Signature:

export interface ReactComponentOptions 

property defaultBlockNode

The default main block node.

Signature:

defaultBlockNode?: Static<keyof HTMLElementTagNameMap>;

property defaultContentNode

The default content node to use.

Signature:

defaultContentNode?: Static<keyof HTMLElementTagNameMap>;

property defaultEnvironment

Whether to render as a nodeView, as an ssr component or in both environments.

Signature:

defaultEnvironment?: Static<ReactComponentEnvironment>;

property defaultInlineNode

The default main inline node (for inline content).

Signature:

defaultInlineNode?: Static<keyof HTMLElementTagNameMap>;

property nodeViewComponents

Override any valid schema node with your own custom components

{
  paragraph: ({ forwardRef }) => <p style={{ backgroundColor: 'pink' }} ref={forwardRef} />,
}

Signature:

nodeViewComponents?: Dynamic<Record<string, ComponentType<NodeViewComponentProps>>>;

property stopEvent

Override the return value from the stopEvent method in ReactNodeView

Signature:

stopEvent?: Dynamic<(props: {
        event: Event;
    }) => boolean> | null;

interface ReactExtensionOptions

Signature:

export interface ReactExtensionOptions extends PlaceholderOptions, ReactComponentOptions 

Extends: PlaceholderOptions, ReactComponentOptions

property defaultBlockNode

The default main block node.

Signature:

defaultBlockNode?: Static<keyof HTMLElementTagNameMap>;

property defaultContentNode

The default content node to use.

Signature:

defaultContentNode?: Static<keyof HTMLElementTagNameMap>;

property defaultEnvironment

Whether to render as a nodeView, as an ssr component or in both environments.

Signature:

defaultEnvironment?: Static<ReactComponentEnvironment>;

property defaultInlineNode

The default main inline node (for inline content).

Signature:

defaultInlineNode?: Static<keyof HTMLElementTagNameMap>;

property emptyNodeClass

The class to decorate the empty top level node with. If you change this then you will also need to apply your own styles.

Signature:

emptyNodeClass?: string;

property nodeViewComponents

Override any valid schema node with your own custom components

{
  paragraph: ({ forwardRef }) => <p style={{ backgroundColor: 'pink' }} ref={forwardRef} />,
}

Signature:

nodeViewComponents?: Dynamic<Record<string, ComponentType<NodeViewComponentProps>>>;

property placeholder

The placeholder text to use.

Signature:

placeholder?: string;

property stopEvent

Override the return value from the stopEvent method in ReactNodeView

Signature:

stopEvent?: Dynamic<(props: {
        event: Event;
    }) => boolean> | null;

interface ReactFrameworkOutput

These are the props passed to the render function provided when setting up your editor.

Signature:

export interface ReactFrameworkOutput<Extension extends AnyExtension> extends FrameworkOutput<Extension> 

Extends: FrameworkOutput<Extension>

(Some inherited members may not be shown because they are not represented in the documentation.)

property addHandler

Add event handlers to the remirror editor at runtime.

Signature:

addHandler: AddFrameworkHandler<Extension>;

property blur

Warning: This API is now obsolete.
This method may be removed in the future and it is advisable to use commands.blur().

Blur the editor.

Signature:

blur: (position?: PrimitiveSelection) => void;

property clearContent

Clears all editor content.

Signature:

clearContent: (options?: TriggerChangeProps) => void;

property focus

Warning: This API is now obsolete.
This method may be removed in the future and it is advisable to use commands.focus().

Focus the editor at the start | end a specific position or at a valid range between { from, to }.

Signature:

focus: (position?: FocusType) => void;

property getExtension

Get an extension by it's constructor.

Signature:

getExtension: <ExtensionConstructor extends AnyExtensionConstructor>(Constructor: ExtensionConstructor) => InstanceType<ExtensionConstructor>;

property getPreviousState

A getter function for the previous prosemirror editor state. It can be used to check what's changed between states.

Signature:

getPreviousState: () => EditorState;

property getRootProps

A function that returns the props which should be spread on the react element to be used as the root for the editor. This is where the ProseMirror editor is injected into the DOM).

Signature:

getRootProps: <RefKey extends string = 'ref'>(options?: GetRootPropsConfig<RefKey>) => RefKeyRootProps<RefKey>;

Remarks:

By default Remirror will add the prosemirror editor instance directly into the first child element it receives. Using this method gives you full control over where the editor should be injected.

**IMPORTANT** In order to support SSR pre-rendering this should only be spread on a component with NO children.

**Example with indirectly nested components**

import { Remirror } from '@remirror/react';
import { PresetCore } from '@remirror/preset-core';
import { BoldExtension } from '@remirror/extension-bold';

const InnerEditor = () => {
  const { getRootProps } = useRemirror();
  return <div {...getRootProps()} />;
}

const EditorWrapper = () => {
  const corePreset = usePreset(CorePreset);
  const boldExtension = useExtension(BoldExtension);
  const manager = useManager([corePreset, boldExtension]);

  return (
    <Remirror manager={manager}>
      <InnerEditor />
    </Remirror>
  );
}

property getState

A getter function for the current editor state. It's a wrapper around view.state.

Signature:

getState: () => EditorState;

property hasExtension

Assert if an extension is present by it's constructor.

Signature:

hasExtension: <ExtensionConstructor extends AnyExtensionConstructor>(Constructor: ExtensionConstructor) => boolean;

property manager

The manager which was used to create this editor.

Signature:

manager: RemirrorManager<Extension>;

property setContent

Replace all editor content with the new content.

Signature:

setContent: (content: RemirrorContentType, options?: TriggerChangeProps) => void;

Remarks:

Allows for the editor content to be overridden by force.

property uid

The unique id for the editor instance.

Signature:

uid: string;

interface RefProps

Signature:

export interface RefProps<RefKey = 'ref'> 

property refKey

A custom ref key which allows a reference to be obtained from non standard components.

Signature:

refKey?: RefKey;

interface RemirrorPortalsProps

Signature:

export interface RemirrorPortalsProps 

property portals

An array of tuples holding all the element containers for node view portals.

Signature:

portals: Array<[HTMLElement, MountedPortal]>;

interface RemirrorProps

The props for the main <Remirror /> component.

Signature:

export interface RemirrorProps<Extension extends AnyExtension = Remirror.Extensions> extends Omit<ReactFrameworkProps<Extension>, 'stringHandler' | 'manager'>, I18nProps 

Extends: Omit<ReactFrameworkProps<Extension>, 'stringHandler' | 'manager'>, I18nProps

(Some inherited members may not be shown because they are not represented in the documentation.)

property autoRender

Set this to start or end to automatically render the editor to the dom.

When set to start the editor will be added before all other child components. If end the editable editor will be added after all child components.

When no children are provided the editor will automatically be rendered even without this prop being set.

start is the preferred value since it helps avoid some of the issues that can arise from zIndex issues with floating components rendered within the context.

Signature:

autoRender?: boolean | 'start' | 'end';

property children

The optional children which can be passed into the [Remirror].

Signature:

children?: ReactNode;

property hooks

An array of hooks that can be passed through to the Remirror component and will be called in the order provided. Each hook receives no props but will have access to the RemirrorContext.

If you'd like access to more state, you can wrap the Remirror component in a custom provider and attach your state there. It can then be accessed inside the hook via context.

Signature:

hooks?: Array<() => void>;

property i18nFormat

Provide a function that formats ICU MessageFormat encoded messages, via your chosen i18n solution.

You can use the i18nFormat function from the optional @remirror/i18n library, which is powered by Lingui

import { i18nFormat } from '@remirror/i18n';

const Editor = () => {
  <Remirror i18nFormat={i18nFormat} />
}

Signature:

i18nFormat?: I18nFormatter;

property locale

The current locale for this context.

Signature:

locale?: string;

property manager

This manager composes the extensions provided and provides the functionality used throughout the editor.

It is overridden here since there was an issue with type inference when using the manager inherited from ReactFrameworkProps.

Signature:

manager: RemirrorManager<any>;

property supportedLocales

Supported locales. Defaults to including the locale.

Signature:

supportedLocales?: string[];

interface RenderMethodProps

Signature:

export interface SingleRenderMethodProps extends RenderProps 

Extends: RenderProps

property Component

Renders a JSX element.

Signature:

Component: FunctionComponent;

property container

The DOM element to contain the react portal.

Signature:

container: HTMLElement;

property key

Signature:

key?: undefined;

interface RenderProps

Signature:

export interface RenderProps 

property Component

Renders a JSX element.

Signature:

Component: FunctionComponent;

interface ThemeProviderProps

Signature:

export interface ThemeProviderProps extends UseThemeProps 

Extends: UseThemeProps

property as

A custom component to use for the wrapper.

Signature:

as?: ElementType<{
        style?: CSSProperties;
        className?: string;
    }>;

property children

Signature:

children: ReactNode;

property className

Any extra class names to add to the wrapper component.

Signature:

className?: string;

property theme

The theme to customise the look and feel of your remirror editor.

Signature:

theme?: RemirrorThemeType;

interface UpdateReason

Signature:

export interface UpdateReason 

property doc

The document changed.

Signature:

doc: boolean;

property selection

The selection changed.

Signature:

selection: boolean;

property storedMark

A stored mark was added to the current selection

Signature:

storedMark: boolean;

interface UseEditorFocusProps

Signature:

export interface UseEditorFocusProps 

property blurOnInactive

Set this to true if you want to also update the focus value when the user focuses on other windows or tabs (outside of the current DOM).

Signature:

blurOnInactive?: boolean;

property ignoredElements

The elements that can be focused without setting isFocused to false.

Signature:

ignoredElements?: Array<Element | null>;

interface UseEmojiProps

Signature:

export interface UseEmojiProps extends MenuNavigationOptions 

Extends: MenuNavigationOptions

property direction

The direction of the arrow key press.

Signature:

direction?: MenuDirection;

property dismissKeys

Keys that can dismiss the menu.

Signature:

dismissKeys?: KeyBindingNames[];

property focusOnClick

When true, refocus the editor when a click is made.

Signature:

focusOnClick?: boolean;

property submitKeys

Keys that can submit the selection.

Signature:

submitKeys?: KeyBindingNames[];

interface UseEmojiReturn

Signature:

export interface UseEmojiReturn extends UseMenuNavigationReturn<FlatEmojiWithUrl> 

Extends: UseMenuNavigationReturn<FlatEmojiWithUrl>

(Some inherited members may not be shown because they are not represented in the documentation.)

property index

The selected index.

Signature:

index: number;

property setIndex

Signature:

setIndex: (index: number) => void;

property state

The state of the current query, only available when active.

Signature:

state: EmojiState | null;

interface UseMentionAtomProps

Signature:

export interface UseMentionAtomProps<Data extends MentionAtomNodeAttributes = MentionAtomNodeAttributes> extends MenuNavigationOptions, Pick<MentionAtomNodeAttributes, 'replacementType'> 

Extends: MenuNavigationOptions, Pick<MentionAtomNodeAttributes, 'replacementType'>

(Some inherited members may not be shown because they are not represented in the documentation.)

property direction

The direction of the arrow key press.

Signature:

direction?: MenuDirection;

property dismissKeys

Keys that can dismiss the menu.

Signature:

dismissKeys?: KeyBindingNames[];

property focusOnClick

When true, refocus the editor when a click is made.

Signature:

focusOnClick?: boolean;

property ignoreMatchesOnDismiss

Whether matches should be permanently ignored when the user dismisses the mention suggestion.

Signature:

ignoreMatchesOnDismiss?: boolean;

property items

The list of data from which an index can be calculated. Must include at least an id and a label.

Signature:

items: Data[];

property submitKeys

Keys that can submit the selection.

Signature:

submitKeys?: KeyBindingNames[];

interface UseMentionAtomReturn

Signature:

export interface UseMentionAtomReturn<Data extends MentionAtomNodeAttributes = MentionAtomNodeAttributes> extends UseMenuNavigationReturn<Data> 

Extends: UseMenuNavigationReturn<Data>

(Some inherited members may not be shown because they are not represented in the documentation.)

property index

The selected index.

Signature:

index: number;

property setIndex

Signature:

setIndex: (index: number) => void;

property state

Signature:

state: MentionAtomState<Data> | null;

interface UseMentionProps

Signature:

export interface UseMentionProps<Data extends MentionExtensionAttributes = MentionExtensionAttributes> extends MenuNavigationOptions 

Extends: MenuNavigationOptions

property direction

The direction of the arrow key press.

Signature:

direction?: MenuDirection;

property dismissKeys

Keys that can dismiss the menu.

Signature:

dismissKeys?: KeyBindingNames[];

property focusOnClick

When true, refocus the editor when a click is made.

Signature:

focusOnClick?: boolean;

property ignoreMatchesOnDismiss

Whether matches should be permanently ignored when the user presses escape.

Signature:

ignoreMatchesOnDismiss?: boolean;

property items

The list of data from which an index can be calculated. Must include at least an id and a label.

Signature:

items: Data[];

property onExit

This method is called when a user induced exit happens before a mention has been created. It receives the state, and gives the consumer of this hook the opportunity to manually create their own mention

Leave this undefined to ignore exits.

To enable automatic exit handling. The following will automatically set the id to be the query and the label to be the full matching text. Extra attrs like href can be added by you to the attrs object parameter.

const mentionState = useMention({ items, onExit(_, command) => command(), });

Signature:

onExit?: UseMentionExitHandler<Data>;

property submitKeys

Keys that can submit the selection.

Signature:

submitKeys?: KeyBindingNames[];

interface UseMentionReturn

Signature:

export interface UseMentionReturn<Data extends MentionExtensionAttributes = MentionExtensionAttributes> extends UseMenuNavigationReturn<Data> 

Extends: UseMenuNavigationReturn<Data>

(Some inherited members may not be shown because they are not represented in the documentation.)

property index

The selected index.

Signature:

index: number;

property setIndex

Signature:

setIndex: (index: number) => void;

property state

Signature:

state: MentionState<Data> | null;

interface UseMenuNavigationReturn

Signature:

export interface UseMenuNavigationReturn<Item = any> extends Pick<MultishiftPropGetters<Item>, 'getMenuProps' | 'getItemProps'>, Pick<MultishiftHelpers<Item>, 'itemIsSelected' | 'indexIsSelected' | 'indexIsHovered' | 'itemIsHovered'>, Pick<MultishiftState<Item>, 'hoveredIndex'> 

Extends: Pick<MultishiftPropGetters<Item>, 'getMenuProps' | 'getItemProps'>, Pick<MultishiftHelpers<Item>, 'itemIsSelected' | 'indexIsSelected' | 'indexIsHovered' | 'itemIsHovered'>, Pick<MultishiftState<Item>, 'hoveredIndex'>

(Some inherited members may not be shown because they are not represented in the documentation.)

property index

The selected index.

Signature:

index: number;

property setIndex

Signature:

setIndex: (index: number) => void;

interface UseMultiPositionerReturn

Signature:

export interface UseMultiPositionerReturn<Data = any> extends PositionerPosition 

Extends: PositionerPosition

(Some inherited members may not be shown because they are not represented in the documentation.)

property data

Metadata associated with the position

Signature:

data: Data;

property element

The element that the ref has found.

Signature:

element?: HTMLElement;

property key

A key to uniquely identify this positioner. This can be applied to the react element.

Signature:

key: string;

property ref

This ref must be applied to the component that is being positioned in order to correctly obtain the position data.

Signature:

ref: RefCallback<HTMLElement>;

interface UseRemirrorProps

Props which are passed into the useRemirror hook.

Signature:

export interface UseRemirrorProps<Extension extends AnyExtension> extends CreateReactManagerOptions, Partial<CreateEditorStateProps> 

Extends: CreateReactManagerOptions, Partial<CreateEditorStateProps>

(Some inherited members may not be shown because they are not represented in the documentation.)

property core

The core preset options.

Signature:

core?: GetStaticAndDynamic<CorePresetOptions>;

property extensions

Provide a function that returns an array of extensions which will be used to create the manager. If you prefer you can directly provide your own RemirrorManager to override this. The manager you provide will be cloned and used within your editor.

When a Manager is provided then several settings are ignored like [[stringHandler]] and [[onError]].

Signature:

extensions?: (() => Extension[]) | RemirrorManager<any>;

property onError

This is called when the editor has invalid content.

Signature:

onError?: InvalidContentHandler;

Remarks:

To add this to the editor the following is needed.

import React from 'react';
import { Remirror, InvalidContentHandler } from 'remirror';
import { Remirror, useManager } from '@remirror/react';
import { WysiwygPreset } from 'remirror/extensions';

const Framework = () => {
  const onError: InvalidContentHandler = useCallback(({ json, invalidContent, transformers }) => {
    // Automatically remove all invalid nodes and marks.
    return transformers.remove(json, invalidContent);
  }, []);

  const manager = useManager(() => [new WysiwygPreset()]);

  return (
    <Remirror manager={manager} onError={onError}>
      <div />
    </Remirror>
  );
};

property react

Options for the react preset.

Signature:

react?: GetStaticAndDynamic<ReactExtensionOptions>;

property stringHandler

A function which transforms a string into a prosemirror node.

Signature:

stringHandler?: keyof Remirror.StringHandlers | StringHandler;

Remarks:

Can be used to transform markdown / html or any other string format into a prosemirror node.

See [[fromHTML]] for an example of how this could work.

interface UseRemirrorReturn

Signature:

export interface UseRemirrorReturn<Extension extends AnyExtension> 

property getContext

A function that provides the editor context. This is only available after the <Remirror /> component is mounted. Calling it in the very first render phase will cause an error to be thrown.

Signature:

getContext: () => ReactFrameworkOutput<Extension> | undefined;

property manager

The manager which is required by the <Remirror /> component.

Signature:

manager: RemirrorManager<Extension>;

property onChange

Syntactic sugar for using the setState method directly on the `

` component.

import React from 'react';
import { useRemirror, Provider } from '@remirror/react';
import { htmlToProsemirrorNode } from 'remirror';

const Editor = () => {
  const { manager, onChange, state } = useRemirror({
    content: '<p>Some content</p>',
    stringHandler: htmlToProsemirrorNode
  });

  return <Remirror onChange={onChange} state={state} manager={manager} />
}

Signature:

onChange: RemirrorEventListener<Extension>;

property setState

A function to update the state when you intend to make the editor controlled.

import React, { useCallback } from 'react';
import { useRemirror, Provider } from '@remirror/react';
import { htmlToProsemirrorNode } from 'remirror';

const Editor = () => {
  const { manager, setState, state } = useRemirror({
    content: '<p>Some content</p>',
    stringHandler: htmlToProsemirrorNode
  });

  return (
    <Remirror
      onChange={useCallback((changeProps) => setState(changeProps.state), [setState])}
      state={state}
      manager={manager}
    />
  );
}

Signature:

setState: (state: EditorState) => void;

property state

The initial editor state based on the provided content and selection properties. If none were passed in then the state is created from the default empty doc node as defined by the editor Schema.

Signature:

state: EditorState;

interface UseSuggestProps

Signature:

export interface UseSuggestProps extends Except<Suggester, 'onChange'> 

Extends: Except<Suggester, 'onChange'>

(Some inherited members may not be shown because they are not represented in the documentation.)

property ignoreFocus

Set to true to ignore changes which are purely caused by focus events.

TODO - NOT YET IMPLEMENTED

Signature:

ignoreFocus?: boolean;

interface UseSuggestReturn

Signature:

export interface UseSuggestReturn extends SuggestStateMethods 

Extends: SuggestStateMethods

(Some inherited members may not be shown because they are not represented in the documentation.)

property change

Signature:

change: (Pick<SuggestChangeHandlerProps, 'text' | 'query' | 'range' | 'match'> & ChangeReasonProps) | undefined;

property exit

Signature:

exit: (Pick<SuggestChangeHandlerProps, 'text' | 'query' | 'range' | 'match'> & ExitReasonProps) | undefined;

interface UseThemeProps

Signature:

export interface UseThemeProps 

property className

Any extra class names to add to the wrapper component.

Signature:

className?: string;

property theme

The theme to customise the look and feel of your remirror editor.

Signature:

theme?: RemirrorThemeType;

type IconType

Signature:

export type IconType = (props: IconBaseProps) => JSX.Element;

References: IconBaseProps

type MarkMap

Signature:

export type MarkMap = Partial<Record<string, string | ComponentType<any>>>;

type MenuDirection

Signature:

export type MenuDirection = 'horizontal' | 'vertical';

type PortalList

Signature:

export type PortalList = ReadonlyArray<[HTMLElement, MountedPortal]>;

References: MountedPortal

type PortalMap

Signature:

export type PortalMap = Map<HTMLElement, MountedPortal>;

References: MountedPortal

type ReactComponentEnvironment

Signature:

export type ReactComponentEnvironment = 'ssr' | 'dom' | 'both';

type ReactExtensions

Use this to build your own extension union type which extends from the ReactExtensions.

Signature:

export type ReactExtensions<Extension extends AnyExtension = never> = CorePreset | ReactExtension | BuiltinPreset | Extension;

References: AnyExtension, CorePreset, ReactExtension, BuiltinPreset

type RefKeyRootProps

The react ref key props for the getRootProps method.

Signature:

export type RefKeyRootProps<RefKey extends string = 'ref'> = {
    [P in Exclude<RefKey, 'key'>]: Ref<any>;
} & {
    key: string;
    children: ReactNode;
} & Shape;

References: Shape

type UseExtensionCallback

Signature:

export type UseExtensionCallback<Type extends AnyExtensionConstructor> = (props: UseExtensionCallbackProps<Type>) => Dispose | undefined;

References: AnyExtensionConstructor, Dispose

type UseI18nReturn

Signature:

export type UseI18nReturn = I18nFormatter;

References: I18nFormatter

type UseMentionExitHandler

Signature:

export type UseMentionExitHandler<Data extends MentionExtensionAttributes = MentionExtensionAttributes> = (props: OnExitProps<Data>, command: (attrs?: Partial<Data>) => void) => void;

References: MentionExtensionAttributes

type UsePositionerReturn

Signature:

export type UsePositionerReturn<Data = any> = UsePositionerReturnActive<Data> | UsePositionerReturnInactive<Data>;

type UseRemirrorContextType

This is a type alias for creating your own typed version of the remirror method.

import { useRemirror, UseRemirrorContextType } from '@remirror/react';
import { SocialPreset } from 'remirror/extensions'

const useSocialRemirror = useRemirror as UseRemirrorContextType<SocialPreset>;

// With the remirror provider context.
const Editor = () => {
  const { commands } = useSocialRemirror();

  // All available commands are shown with intellisense. Command click to goto the implementation.
  commands.toggleBold();
}

Signature:

export type UseRemirrorContextType<Extension extends AnyExtension> = <Type extends AnyExtension>(handler?: RemirrorEventListener<Extension> | {
    autoUpdate: boolean;
}) => ReactFrameworkOutput<Extension | Type>;

References: AnyExtension, RemirrorEventListener, ReactFrameworkOutput

class PlaceholderExtension
- Extension.(constructor)
- property constructorName
- property defaultPriority
- property extensions
- property name
- property priority
- property store
- method clone
- method createAttributes
- method createExtensions
- method createPlugin
- method getExtension
- method isOfType
- method onAppendTransaction
- method onApplyState
- method onCreate
- method onDestroy
- method onInitState
- method onSetOptions
- method onStateUpdate
- method onView
class PortalContainer
- property on
- property once
- property portals
- method forceUpdate
- method remove
- method render
class ReactComponentExtension
- Extension.(constructor)
- property constructorName
- property defaultPriority
- property extensions
- property name
- property priority
- property store
- method clone
- method createExtensions
- method createNodeViews
- method getExtension
- method isOfType
- method onAppendTransaction
- method onApplyState
- method onCreate
- method onDestroy
- method onInitState
- method onStateUpdate
- method onView
class ReactExtension
- Extension.(constructor)
- property constructorName
- property defaultPriority
- property extensions
- property name
- property priority
- property store
- method clone
- method createExtensions
- method getExtension
- method isOfType
- method onAppendTransaction
- method onApplyState
- method onCreate
- method onDestroy
- method onInitState
- method onSetOptions
- method onStateUpdate
- method onView
function createEditorView()
function createReactManager()
function GenIcon()
function indexFromArrowPress()
function MentionAtomPopupComponent()
function Remirror_2()
function useActive()
function useAttrs()
function useChainedCommands()
function useCommands()
function useCurrentSelection()
function useDocChanged()
function useEditorDomRef()
function useEditorEvent()
function useEditorFocus()
function useEditorState()
function useEditorView()
function useEmoji()
function useExtension()
function useExtension()
function useExtension()
function useExtensionEvent()
function useHasExtension()
function useHelpers()
function useHistory()
function useHover()
function useI18n()
function useKeymap()
function useKeymaps()
function useMarkRange()
function useMention()
function useMentionAtom()
function useMenuNavigation()
function useMultiPositioner()
function usePortalContainer()
function usePortals()
function usePositioner()
function usePositioner()
function useRemirror()
function useRemirrorContext()
function useSelectedText()
function useSuggest()
function useTheme()
function useUpdateReason()
variable Callout
variable CodeBlock
variable createIFrameHandler
variable createLinkHandler
variable Doc
variable EditorComponent
variable EmojiPopupComponent
variable FloatingWrapper
variable Heading
variable I18nProvider
variable Icon
variable IconBase
variable OnChangeHTML
variable OnChangeJSON
variable PositionerPortal
variable RemirrorContext
variable RemirrorPortals
variable RemirrorRenderer
variable TextHandler
variable ThemeProvider
interface CreateNodeViewProps
- property options
- property portalContainer
- property ReactComponent
interface CreateReactManagerOptions
- property core
- property react
interface EmojiState
- property apply
- property list
interface FlatEmojiWithUrl
- property url
interface GetRootPropsConfig
- property ref
- property refKey
interface I18nProps
- property children
- property i18nFormat
- property locale
- property supportedLocales
interface IconBaseProps
- property children
- property color
- property size
- property title
interface IconProps
- property children
- property color
- property name
- property size
- property title
interface MentionAtomState
- property command
- property reason
interface MentionState
- property command
- property reason
interface MenuNavigationOptions
- property direction
- property dismissKeys
- property focusOnClick
- property submitKeys
interface MountedPortal
- property Component
- property key
interface NodeViewComponentProps
- property decorations
- property forwardRef
- property getPosition
- property node
- property selected
- property updateAttributes
- property view
interface OnChangeHTMLProps
- property onChange
interface OnChangeJSONProps
- property onChange
interface PlaceholderOptions
- property emptyNodeClass
- property placeholder
interface PlaceholderPluginState
- property empty
interface PositionerComponentProps
- property children
interface ReactComponentOptions
- property defaultBlockNode
- property defaultContentNode
- property defaultEnvironment
- property defaultInlineNode
- property nodeViewComponents
- property stopEvent
interface ReactExtensionOptions
- property defaultBlockNode
- property defaultContentNode
- property defaultEnvironment
- property defaultInlineNode
- property emptyNodeClass
- property nodeViewComponents
- property placeholder
- property stopEvent
interface ReactFrameworkOutput
- property addHandler
- property blur
- property clearContent
- property focus
- property getExtension
- property getPreviousState
- property getRootProps
- property getState
- property hasExtension
- property manager
- property setContent
- property uid
interface RefProps
- property refKey
interface RemirrorPortalsProps
- property portals
interface RemirrorProps
- property autoRender
- property children
- property hooks
- property i18nFormat
- property locale
- property manager
- property supportedLocales
interface RenderMethodProps
- property Component
- property container
- property key
interface RenderProps
- property Component
interface ThemeProviderProps
- property as
- property children
- property className
- property theme
interface UpdateReason
- property doc
- property selection
- property storedMark
interface UseEditorFocusProps
- property blurOnInactive
- property ignoredElements
interface UseEmojiProps
- property direction
- property dismissKeys
- property focusOnClick
- property submitKeys
interface UseEmojiReturn
- property index
- property setIndex
- property state
interface UseMentionAtomProps
- property direction
- property dismissKeys
- property focusOnClick
- property ignoreMatchesOnDismiss
- property items
- property submitKeys
interface UseMentionAtomReturn
- property index
- property setIndex
- property state
interface UseMentionProps
- property direction
- property dismissKeys
- property focusOnClick
- property ignoreMatchesOnDismiss
- property items
- property onExit
- property submitKeys
interface UseMentionReturn
- property index
- property setIndex
- property state
interface UseMenuNavigationReturn
- property index
- property setIndex
interface UseMultiPositionerReturn
- property data
- property element
- property key
- property ref
interface UseRemirrorProps
- property core
- property extensions
- property onError
- property react
- property stringHandler
interface UseRemirrorReturn
- property getContext
- property manager
- property onChange
- property setState
- property state
interface UseSuggestProps
- property ignoreFocus
interface UseSuggestReturn
- property change
- property exit
interface UseThemeProps
- property className
- property theme
type IconType
type MarkMap
type MenuDirection
type PortalList
type PortalMap
type ReactComponentEnvironment
type ReactExtensions
type RefKeyRootProps
type UseExtensionCallback
type UseI18nReturn
type UseMentionExitHandler
type UsePositionerReturn
type UseRemirrorContextType

package @remirror/react

class PlaceholderExtension​

Extension.(constructor)​

property constructorName​

property defaultPriority​

property extensions​

property name​

property priority​

property store​

method clone​

method createAttributes​

method createExtensions​

method createPlugin​

method getExtension​

method isOfType​

method onAppendTransaction​

method onApplyState​

method onCreate​

method onDestroy​

method onInitState​

method onSetOptions​

method onStateUpdate​

method onView​

class PortalContainer​

property on​

property once​

property portals​

method forceUpdate​

method remove​

method render​

class ReactComponentExtension​

Extension.(constructor)​

property constructorName​

property defaultPriority​

property extensions​

property name​

property priority​

property store​

method clone​

method createExtensions​

method createNodeViews​

method getExtension​

method isOfType​

method onAppendTransaction​

method onApplyState​

method onCreate​

method onDestroy​

method onInitState​

method onStateUpdate​

method onView​

class ReactExtension​

Extension.(constructor)​

property constructorName​

property defaultPriority​

property extensions​

property name​

property priority​

property store​

method clone​

method createExtensions​

method getExtension​

method isOfType​

method onAppendTransaction​

method onApplyState​

method onCreate​

method onDestroy​

method onInitState​

method onSetOptions​

method onStateUpdate​

method onView​

function createEditorView()​

function createReactManager()​

function GenIcon()​

function indexFromArrowPress()​

function MentionAtomPopupComponent()​

function Remirror_2()​

function useActive()​

function useAttrs()​

function useChainedCommands()​

function useCommands()​

class PlaceholderExtension

Extension.(constructor)

property constructorName

property defaultPriority

property extensions

property name

property priority

property store

method clone

method createAttributes

method createExtensions

method createPlugin

method getExtension

method isOfType

method onAppendTransaction

method onApplyState

method onCreate

method onDestroy

method onInitState

method onSetOptions

method onStateUpdate

method onView

class PortalContainer

property on

property once

property portals

method forceUpdate

method remove

method render

class ReactComponentExtension

Extension.(constructor)

property constructorName

property defaultPriority

property extensions

property name

property priority

property store

method clone

method createExtensions

method createNodeViews

method getExtension

method isOfType

method onAppendTransaction

method onApplyState

method onCreate

method onDestroy

method onInitState

method onStateUpdate

method onView

class ReactExtension

Extension.(constructor)

property constructorName

property defaultPriority

property extensions

property name

property priority

property store

method clone

method createExtensions

method getExtension

method isOfType

method onAppendTransaction

method onApplyState

method onCreate

method onDestroy

method onInitState

method onSetOptions

method onStateUpdate

method onView

function createEditorView()

function createReactManager()

function GenIcon()

function indexFromArrowPress()

function MentionAtomPopupComponent()

function Remirror_2()

function useActive()

function useAttrs()

function useChainedCommands()

function useCommands()

function useCurrentSelection()