Skip to main content

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:

ParameterTypeDescription
argsExtensionConstructorProps<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:

ParameterTypeDescription
argsExtensionConstructorProps<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:

ParameterTypeDescription
ConstructorTypethe 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:

ParameterTypeDescription
ConstructorType

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:

ParameterTypeDescription
propsAppendLifecycleProps

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:

ParameterTypeDescription
propsApplyStateLifecycleProps

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:

ParameterTypeDescription
stateEditorState

Returns:

void

method onSetOptions

Signature:

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

Parameters:

ParameterTypeDescription
propsOnSetOptionsProps<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:

ParameterTypeDescription
propsStateUpdateLifecycleProps

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:

ParameterTypeDescription
viewEditorView

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:

ParameterTypeDescription
containerHTMLElement

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:

ParameterTypeDescription
{ 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:

ParameterTypeDescription
argsExtensionConstructorProps<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

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:

ParameterTypeDescription
argsExtensionConstructorProps<Options>

Returns:

Extension<Options>

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 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:

ParameterTypeDescription
ConstructorTypethe 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:

ParameterTypeDescription
ConstructorType

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:

ParameterTypeDescription
propsAppendLifecycleProps

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:

ParameterTypeDescription
propsApplyStateLifecycleProps

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:

ParameterTypeDescription
stateEditorState

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:

ParameterTypeDescription
propsStateUpdateLifecycleProps

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:

ParameterTypeDescription
viewEditorView

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:

ParameterTypeDescription
argsExtensionConstructorProps<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

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:

ParameterTypeDescription
argsExtensionConstructorProps<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:

ParameterTypeDescription
ConstructorTypethe 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:

ParameterTypeDescription
ConstructorType

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:

ParameterTypeDescription
propsAppendLifecycleProps

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:

ParameterTypeDescription
propsApplyStateLifecycleProps

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:

ParameterTypeDescription
stateEditorState

Returns:

void

method onSetOptions

Signature:

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

Parameters:

ParameterTypeDescription
propsOnSetOptionsProps<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:

ParameterTypeDescription
propsStateUpdateLifecycleProps

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:

ParameterTypeDescription
viewEditorView

Returns:

Dispose | void

class TableCellExtension

Signature:

export declare class TableCellExtension extends BaseTableCellExtension 

Extends: BaseTableCellExtension

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

property name

Signature:

get name(): "tableCell";

method createNodeSpec

Signature:

createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): TableSchemaSpec;

Parameters:

ParameterTypeDescription
extraApplySchemaAttributes
overrideNodeSpecOverride

Returns:

TableSchemaSpec

class TableControllerCellExtension

Signature:

export declare class TableControllerCellExtension extends BaseTableControllerCellExtension 

Extends: BaseTableControllerCellExtension

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

property name

Signature:

get name(): "tableControllerCell";

method createExtensions

Signature:

createExtensions(): never[];

Returns:

never[]

method createNodeSpec

Signature:

createNodeSpec(extra: ApplySchemaAttributes): TableSchemaSpec;

Parameters:

ParameterTypeDescription
extraApplySchemaAttributes

Returns:

TableSchemaSpec

method createNodeViews

Signature:

createNodeViews(): NodeViewMethod;

Returns:

NodeViewMethod

method createPlugin

Signature:

createPlugin(): CreateExtensionPlugin;

Returns:

CreateExtensionPlugin

class TableExtension

Signature:

export declare class TableExtension extends BaseTableExtension 

Extends: BaseTableExtension

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

property name

Signature:

get name(): "table";

method addTableColumnAfter

Command to add a column after the column with the selection.

Signature:

addTableColumnAfter(): CommandFunction;

Returns:

CommandFunction

method addTableColumnBefore

Command to add a column before the column with the selection.

Signature:

addTableColumnBefore(): CommandFunction;

Returns:

CommandFunction

method addTableRowAfter

Add a table row after the current selection.

Signature:

addTableRowAfter(): CommandFunction;

Returns:

CommandFunction

method addTableRowBefore

Add a table row before the current selection.

Signature:

addTableRowBefore(): CommandFunction;

Returns:

CommandFunction

method createEventHandlers

Signature:

createEventHandlers(): CreateEventHandlers;

Returns:

CreateEventHandlers

method createExtensions

Create the table extensions. Set the priority to low so that they appear lower down in the node list.

Signature:

createExtensions(): TableRowExtension[];

Returns:

TableRowExtension[]

method createExternalPlugins

Add the table plugins to the editor.

Signature:

createExternalPlugins(): ProsemirrorPlugin[];

Returns:

ProsemirrorPlugin[]

method createNodeSpec

Signature:

createNodeSpec(extra: ApplySchemaAttributes): TableSchemaSpec;

Parameters:

ParameterTypeDescription
extraApplySchemaAttributes

Returns:

TableSchemaSpec

method createNodeViews

Signature:

createNodeViews(): NodeViewMethod;

Returns:

NodeViewMethod

method createPlugin

Signature:

createPlugin(): CreateExtensionPlugin;

Returns:

CreateExtensionPlugin

method createTable

Create a table in the editor at the current selection point.

Signature:

createTable(options?: CreateTableCommand): CommandFunction;

Parameters:

ParameterTypeDescription
optionsCreateTableCommand(Optional)

Returns:

CommandFunction

method createTags

Signature:

createTags(): "block"[];

Returns:

"block"[]

method deleteTable

Delete the table.

Signature:

deleteTable(): CommandFunction;

Returns:

CommandFunction

method deleteTableColumn

Remove selected column from the table.

Signature:

deleteTableColumn(): CommandFunction;

Returns:

CommandFunction

method deleteTableRow

Delete the table row at the current selection.

Signature:

deleteTableRow(): CommandFunction;

Returns:

CommandFunction

method enableTableSupport

Enable table usage within the editor. This depends on the browser that is being used.

Signature:

enableTableSupport(): Helper<void>;

Returns:

Helper<void>

method expandCellSelection

Signature:

expandCellSelection(type?: 'column' | 'row' | 'all'): CommandFunction;

Parameters:

ParameterTypeDescription
type'column' | 'row' | 'all'(Optional)

Returns:

CommandFunction

method fixTables

Fix all tables within the document.

This is a **non-chainable** command.

Signature:

fixTables(): NonChainableCommandFunction;

Returns:

NonChainableCommandFunction

method goToNextCell

Signature:

goToNextCell(props: KeyBindingProps): boolean;

Parameters:

ParameterTypeDescription
propsKeyBindingProps

Returns:

boolean

method goToPreviousCell

Signature:

goToPreviousCell(props: KeyBindingProps): boolean;

Parameters:

ParameterTypeDescription
propsKeyBindingProps

Returns:

boolean

method mergeTableCells

Merge the table cells.

Signature:

mergeTableCells(): CommandFunction;

Returns:

CommandFunction

method onSetOptions

This managers the updates of the collaboration provider.

Signature:

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

Parameters:

ParameterTypeDescription
propsOnSetOptionsProps<TableOptions>

Returns:

void

method onStateUpdate

Signature:

onStateUpdate(props: StateUpdateLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsStateUpdateLifecycleProps

Returns:

void

method onView

Signature:

onView(view: EditorView): void;

Parameters:

ParameterTypeDescription
viewEditorView

Returns:

void

method selectParentCell

Signature:

selectParentCell(): CommandFunction;

Returns:

CommandFunction

method setTableCellAttribute

Set the attribute for a table cell.

Signature:

setTableCellAttribute(name: string, value: unknown): CommandFunction;

Parameters:

ParameterTypeDescription
namestring
valueunknown

Returns:

CommandFunction

method setTableCellBackground

Update the background of one cell or multiple cells by passing a color string. You can also remove the color by passing a null.

Signature:

setTableCellBackground(background: string | null): CommandFunction;

Parameters:

ParameterTypeDescription
backgroundstring | null

Returns:

CommandFunction

method splitTableCell

Split the merged cells into individual cells.

Signature:

splitTableCell(): CommandFunction;

Returns:

CommandFunction

method tableHasHeader

Determines if the first row/column is a header row/column

Signature:

tableHasHeader(type?: 'column' | 'row', state?: EditorState): Helper<boolean>;

Parameters:

ParameterTypeDescription
type'column' | 'row'(Optional)
stateEditorState(Optional)

Returns:

Helper<boolean>

method toggleTableCellMerge

Toggles between merging cells.

Signature:

toggleTableCellMerge(): CommandFunction;

Returns:

CommandFunction

method toggleTableHeader

Toggles between row/column header and normal cells (Only applies to first row/column).

Signature:

toggleTableHeader(type?: 'column' | 'row'): CommandFunction;

Parameters:

ParameterTypeDescription
type'column' | 'row'(Optional)

Returns:

CommandFunction

method toggleTableHeaderCell

Toggle a cell as a table header cell.

Signature:

toggleTableHeaderCell(): CommandFunction;

Returns:

CommandFunction

method toggleTableHeaderColumn

Toggles a column as the header column.

Signature:

toggleTableHeaderColumn(): CommandFunction;

Returns:

CommandFunction

method toggleTableHeaderRow

Toggles a row as a table header row.

Signature:

toggleTableHeaderRow(): CommandFunction;

Returns:

CommandFunction

class TableHeaderCellExtension

Signature:

export declare class TableHeaderCellExtension extends BaseTableHeaderCellExtension 

Extends: BaseTableHeaderCellExtension

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

property name

Signature:

get name(): "tableHeaderCell";

method createNodeSpec

Signature:

createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): TableSchemaSpec;

Parameters:

ParameterTypeDescription
extraApplySchemaAttributes
overrideNodeSpecOverride

Returns:

TableSchemaSpec

class TableRowExtension

Signature:

export declare class TableRowExtension extends BaseTableRowExtension 

Extends: BaseTableRowExtension

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

property name

Signature:

get name(): "tableRow";

method createExtensions

Automatically create the TableCellExtension,TableHeaderCellExtension and TableControllerCellExtension. This is placed here so that this extension can be tested independently from the TableExtension.

Signature:

createExtensions(): (TableCellExtension | TableControllerCellExtension | TableHeaderCellExtension)[];

Returns:

(TableCellExtension | TableControllerCellExtension | TableHeaderCellExtension)[]

method createNodeSpec

Signature:

createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): TableSchemaSpec;

Parameters:

ParameterTypeDescription
extraApplySchemaAttributes
overrideNodeSpecOverride

Returns:

TableSchemaSpec

function createEditorView()

Creates a new editor view

Signature:

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

Parameters:

ParameterTypeDescription
placeNode | ((p: HTMLElement) => void) | null
propsDirectEditorProps

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:

ParameterTypeDescription
extensionsExtension[] | (() => Extension[]) | RemirrorManager<ReactExtensions<Extension>>
optionsCreateReactManagerOptions(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:

ParameterTypeDescription
treeIconTree[]
viewBoxstring(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:

ParameterTypeDescription
{ 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:

ParameterTypeDescription
propsMentionAtomPopupComponentProps<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:

ParameterTypeDescription
propsRemirrorProps<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:

ParameterTypeDescription
autoUpdateboolean(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:

ParameterTypeDescription
updateboolean(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:

ParameterTypeDescription
handlerNonNullable<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:

ParameterTypeDescription
eventKey
handlerNonNullable<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:

ParameterTypeDescription
propsUseEditorFocusProps(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:

ParameterTypeDescription
propsUseEmojiProps(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:

ParameterTypeDescription
ConstructorType

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:

ParameterTypeDescription
ConstructorType
memoizedCallbackUseExtensionCallback<Type>
dependenciesDependencyList(Optional)

Returns:

void

function useExtension()

Signature:

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

Parameters:

ParameterTypeDescription
ConstructorType
optionsDynamicOptionsOfConstructor<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:

ParameterTypeDescription
extensionType
eventKey
memoizedHandlerHandler<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:

ParameterTypeDescription
ConstructorType

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:

ParameterTypeDescription
updateboolean(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:

ParameterTypeDescription
eventKey
handlerNonNullable<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:

ParameterTypeDescription
handlerHoverEventHandler

Returns:

void

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:

ParameterTypeDescription
nameLiteralUnion<KeyBindingNames, string>
handlerKeyBindingCommandFunction
priorityExtensionPriority(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:

ParameterTypeDescription
bindingsKeyBindings
priorityExtensionPriority(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:

ParameterTypeDescription
typestring

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:

ParameterTypeDescription
propsUseMentionProps<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:

ParameterTypeDescription
propsUseMentionAtomProps<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:

ParameterTypeDescription
propsMenuNavigationProps

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:

ParameterTypeDescription
positionerPositionerParamthe positioner which will be used
depsunknown[]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:

ParameterTypeDescription
portalContainerPortalContainer

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:

ParameterTypeDescription
positionerStringPositionerthe positioner to use which can be a string or a Positioner instance.
isActiveboolean

(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:

ParameterTypeDescription
positionerPositioner | CallbackPositioner
depsunknown[]

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:

ParameterTypeDescription
propsUseRemirrorProps<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:

ParameterTypeDescription
handlerRemirrorEventListener<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: UseSuggesterProps): UseSuggestReturn;

Parameters:

ParameterTypeDescription
propsUseSuggesterProps

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:

ParameterTypeDescription
propsUseThemeProps(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 BaselineButtonGroup

Signature:

BaselineButtonGroup: FC<BaselineButtonGroupProps>

variable BasicFormattingButtonGroup

Signature:

BasicFormattingButtonGroup: FC<BasicFormattingButtonGroupProps>

variable Callout

Signature:

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

variable CalloutTypeButtonGroup

Signature:

CalloutTypeButtonGroup: FC<CalloutTypeButtonGroupProps>

variable CenterAlignButton

Signature:

CenterAlignButton: FC<CenterAlignButtonProps>

variable CodeBlock

Signature:

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

variable CommandButton

Signature:

CommandButton: FC<CommandButtonProps>

variable CommandButtonGroup

Signature:

CommandButtonGroup: FC<CommandButtonGroupProps>

variable CommandMenuItem

Signature:

CommandMenuItem: FC<CommandMenuItemProps>

variable CopyButton

Signature:

CopyButton: FC<CopyButtonProps>

variable createIFrameHandler

Signature:

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

variable createLinkHandler

Signature:

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

variable CreateTableButton

Signature:

CreateTableButton: FC<CreateTableButtonProps>

variable CutButton

Signature:

CutButton: FC<CutButtonProps>

variable DataTransferButtonGroup

Signature:

DataTransferButtonGroup: FC<DataTransferButtonGroupProps>

variable DecreaseFontSizeButton

Signature:

DecreaseFontSizeButton: FC<DecreaseFontSizeButtonProps>

variable DecreaseIndentButton

Signature:

DecreaseIndentButton: FC<DecreaseIndentButtonProps>

variable Doc

Signature:

Doc: FC<SubRenderTreeProps>

variable DropdownButton

Signature:

DropdownButton: FC<DropdownButtonProps>

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 FindReplaceComponent

Signature:

FindReplaceComponent: FC<FindReplaceComponentProps>

variable FloatingToolbar

Signature:

FloatingToolbar: FC<FloatingToolbarProps>

variable FloatingWrapper

Signature:

FloatingWrapper: FC<PropsWithChildren<FloatingWrapperProps>>

variable FormattingButtonGroup

Signature:

FormattingButtonGroup: FC<FormattingButtonGroupProps>

variable Heading

Signature:

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

variable HeadingLevelButtonGroup

Signature:

HeadingLevelButtonGroup: FC<HeadingLevelButtonGroupProps>

variable HistoryButtonGroup

Signature:

HistoryButtonGroup: FC<HistoryButtonGroupProps>

variable I18nProvider

Signature:

I18nProvider: import("react").ComponentType<import("react").PropsWithChildren<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 IncreaseFontSizeButton

Signature:

IncreaseFontSizeButton: FC<IncreaseFontSizeButtonProps>

variable IncreaseIndentButton

Signature:

IncreaseIndentButton: FC<IncreaseIndentButtonProps>

variable IndentationButtonGroup

Signature:

IndentationButtonGroup: FC<IndentationButtonGroupProps>

variable InsertHorizontalRuleButton

Signature:

InsertHorizontalRuleButton: FC<InsertHorizontalRuleButtonProps>

variable JustifyAlignButton

Signature:

JustifyAlignButton: FC<JustifyAlignButtonProps>

variable LeftAlignButton

Signature:

LeftAlignButton: FC<LeftAlignButtonProps>

variable ListButtonGroup

Signature:

ListButtonGroup: FC<ListButtonGroupProps>

variable MarkdownToolbar

Signature:

MarkdownToolbar: FC

variable OnChangeHTML

Signature:

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

variable OnChangeJSON

Signature:

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

variable PasteButton

Signature:

PasteButton: FC<PasteButtonProps>

variable PositionerPortal

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

Signature:

PositionerPortal: FC<PositionerComponentProps>

variable RedoButton

Signature:

RedoButton: FC<RedoButtonProps>

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 RightAlignButton

Signature:

RightAlignButton: FC<RightAlignButtonProps>

variable TableCellMenu

Signature:

TableCellMenu: React.FC<TableCellMenuProps>

variable TableComponents

Signature:

TableComponents: React.FC<TableComponentsProps>

variable tableControllerPluginKey

Signature:

key: PluginKey<ControllerState>

variable TableDeleteButton

Signature:

TableDeleteButton: React.FC<TableDeleteButtonProps>

variable TableDeleteInnerButton

Signature:

TableDeleteInnerButton: React.FC<TableDeleteInnerButtonProps>

variable TableDeleteRowColumnButton

Signature:

TableDeleteRowColumnButton: React.FC<TableDeleteRowColumnButtonProps>

variable TableDeleteRowColumnInnerButton

Signature:

TableDeleteRowColumnInnerButton: React.FC<TableDeleteRowColumnInnerButtonProps>

variable TextAlignmentButtonGroup

Signature:

TextAlignmentButtonGroup: FC<TextAlignmentButtonGroupProps>

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>

variable ToggleBlockquoteButton

Signature:

ToggleBlockquoteButton: FC<ToggleBlockquoteButtonProps>

variable ToggleBoldButton

Signature:

ToggleBoldButton: FC<ToggleBoldButtonProps>

variable ToggleBulletListButton

Signature:

ToggleBulletListButton: FC<ToggleBulletListButtonProps>

variable ToggleCalloutButton

Signature:

ToggleCalloutButton: FC<ToggleCalloutButtonProps>

variable ToggleCalloutMenuItem

Signature:

ToggleCalloutMenuItem: FC<ToggleCalloutMenuItemProps>

variable ToggleCodeBlockButton

Signature:

ToggleCodeBlockButton: FC<ToggleCodeBlockButtonProps>

variable ToggleCodeButton

Signature:

ToggleCodeButton: FC<ToggleCodeButtonProps>

variable ToggleColumnsButton

Signature:

ToggleColumnsButton: FC<ToggleColumnsButtonProps>

variable ToggleHeadingButton

Signature:

ToggleHeadingButton: FC<ToggleHeadingButtonProps>

variable ToggleHeadingMenuItem

Signature:

ToggleHeadingMenuItem: FC<ToggleHeadingMenuItemProps>

variable ToggleItalicButton

Signature:

ToggleItalicButton: FC<ToggleItalicButtonProps>

variable ToggleOrderedListButton

Signature:

ToggleOrderedListButton: FC<ToggleOrderedListButtonProps>

variable ToggleStrikeButton

Signature:

ToggleStrikeButton: FC<ToggleStrikeButtonProps>

variable ToggleSubscriptButton

Signature:

ToggleSubscriptButton: FC<ToggleSubscriptButtonProps>

variable ToggleSuperscriptButton

Signature:

ToggleSuperscriptButton: FC<ToggleSuperscriptButtonProps>

variable ToggleTaskListButton

Signature:

ToggleTaskListButton: FC<ToggleTaskListButtonProps>

variable ToggleUnderlineButton

Signature:

ToggleUnderlineButton: FC<ToggleUnderlineButtonProps>

variable ToggleWhitespaceButton

Signature:

ToggleWhitespaceButton: FC<ToggleWhitespaceButtonProps>

variable Toolbar

Signature:

Toolbar: FC<StackProps>

variable UndoButton

Signature:

UndoButton: FC<UndoButtonProps>

variable useI18n

Signature:

useI18n: _<UseI18nReturn>

variable useSuggester

Warning: This API is now obsolete.

  • use useSuggest

Signature:

useSuggester: typeof useSuggest

variable VerticalDivider

Signature:

VerticalDivider: FC<VerticalDividerProps>

variable WysiwygToolbar

Signature:

WysiwygToolbar: FC

interface BaselineButtonGroupProps

Signature:

export interface BaselineButtonGroupProps 

property children

Signature:

children?: ReactNode | ReactNode[];

interface BasicFormattingButtonGroupProps

Signature:

export interface BasicFormattingButtonGroupProps 

property children

Signature:

children?: ReactNode | ReactNode[];

interface CalloutTypeButtonGroupProps

Signature:

export interface CalloutTypeButtonGroupProps 

property children

Signature:

children?: ReactNode | ReactNode[];

interface CenterAlignButtonProps

Signature:

export interface CenterAlignButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

interface CommandButtonGroupProps

Signature:

export interface CommandButtonGroupProps extends Omit<BoxProps, 'children'> 

Extends: Omit<BoxProps, 'children'>

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

property children

Signature:

children: ReactNode | ReactNode[];

interface CommandButtonProps

Signature:

export interface CommandButtonProps extends Omit<ToggleButtonProps, 'value' | 'aria-label'>, Omit<UseCommandOptionValuesParams, 'active' | 'attrs'> 

Extends: Omit<ToggleButtonProps, 'value' | 'aria-label'>, Omit<UseCommandOptionValuesParams, 'active' | 'attrs'>

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

property "aria-label"

Signature:

'aria-label'?: string;

property active

Signature:

active?: UseCommandOptionValuesParams['active'];

property attrs

Signature:

attrs?: UseCommandOptionValuesParams['attrs'];

property commandName

Signature:

commandName: string;

property displayShortcut

Signature:

displayShortcut?: boolean;

property icon

Signature:

icon?: CoreIcon | JSX.Element;

property label

Signature:

label?: NonNullable<ReactNode>;

property onSelect

Signature:

onSelect: () => void;

interface CommandMenuItemProps

Signature:

export interface CommandMenuItemProps extends MenuItemProps, Omit<UseCommandOptionValuesParams, 'active' | 'attrs'> 

Extends: MenuItemProps, Omit<UseCommandOptionValuesParams, 'active' | 'attrs'>

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

property active

Signature:

active?: UseCommandOptionValuesParams['active'];

property attrs

Signature:

attrs?: UseCommandOptionValuesParams['attrs'];

property commandName

Signature:

commandName: string;

property description

Signature:

description?: NonNullable<ReactNode>;

property displayDescription

Signature:

displayDescription?: boolean;

property displayShortcut

Signature:

displayShortcut?: boolean;

property icon

Signature:

icon?: CoreIcon | JSX.Element | null;

property label

Signature:

label?: NonNullable<ReactNode>;

property onSelect

Signature:

onSelect: () => void;

interface CopyButtonProps

Signature:

export interface CopyButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

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 CreateTableButtonProps

Signature:

export interface CreateTableButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

interface CutButtonProps

Signature:

export interface CutButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

interface DataTransferButtonGroupProps

Signature:

export interface DataTransferButtonGroupProps 

property children

Signature:

children?: ReactNode | ReactNode[];

interface DecreaseFontSizeButtonProps

Signature:

export interface DecreaseFontSizeButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

interface DecreaseIndentButtonProps

Signature:

export interface DecreaseIndentButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

interface DropdownButtonProps

Signature:

export interface DropdownButtonProps extends Omit<MenuProps, 'open' | 'anchorEl' | 'id'> 

Extends: Omit<MenuProps, 'open' | 'anchorEl' | 'id'>

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

property "aria-label"

Signature:

'aria-label': string;

property icon

Signature:

icon?: CoreIcon | JSX.Element;

property label

Signature:

label?: NonNullable<ReactNode>;

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 FindReplaceComponentProps

Signature:

export interface FindReplaceComponentProps 

property onDismiss

Signature:

onDismiss?: () => void;

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 FloatingToolbarProps

Signature:

export interface FloatingToolbarProps extends Omit<PopperProps, 'open' | 'anchorEl'> 

Extends: Omit<PopperProps, 'open' | 'anchorEl'>

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

property positioner

Signature:

positioner?: PositionerParam;

interface FormattingButtonGroupProps

Signature:

export interface FormattingButtonGroupProps 

property children

Signature:

children?: ReactNode | ReactNode[];

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 HeadingLevelButtonGroupProps

Signature:

export interface HeadingLevelButtonGroupProps 

property children

Signature:

children?: ReactNode | ReactNode[];

property showAll

Signature:

showAll?: boolean;

interface HistoryButtonGroupProps

Signature:

export interface HistoryButtonGroupProps 

property children

Signature:

children?: ReactNode | ReactNode[];

interface I18nProps

Signature:

export interface I18nProps 

property i18n

Provide your own i18n with all the locales you need for your app.

import { i18n } from '@remirror/i18n';
import esLocale from '@remirror/i18n/es';
import { SocialEditor } from '@remirror/react-social-editor';
import { es } from 'make-plural/plurals';

i18n.loadLocaleData('es', { plurals: es });

i18n.load({
es: esLocale.messages,
});

const Editor = () => {
<SocialEditor i18n={i18n} />
}

Signature:

i18n?: I18n;

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 IncreaseFontSizeButtonProps

Signature:

export interface IncreaseFontSizeButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

interface IncreaseIndentButtonProps

Signature:

export interface IncreaseIndentButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

interface IndentationButtonGroupProps

Signature:

export interface IndentationButtonGroupProps 

property children

Signature:

children?: ReactNode | ReactNode[];

interface InsertHorizontalRuleButtonProps

Signature:

export interface InsertHorizontalRuleButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

interface JustifyAlignButtonProps

Signature:

export interface JustifyAlignButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

interface LeftAlignButtonProps

Signature:

export interface LeftAlignButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

interface ListButtonGroupProps

Signature:

export interface ListButtonGroupProps 

property children

Signature:

children?: ReactNode | ReactNode[];

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 PasteButtonProps

Signature:

export interface PasteButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

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 RedoButtonProps

Signature:

export interface RedoButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

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 i18n

Provide your own i18n with all the locales you need for your app.

import { i18n } from '@remirror/i18n';
import esLocale from '@remirror/i18n/es';
import { SocialEditor } from '@remirror/react-social-editor';
import { es } from 'make-plural/plurals';

i18n.loadLocaleData('es', { plurals: es });

i18n.load({
es: esLocale.messages,
});

const Editor = () => {
<SocialEditor i18n={i18n} />
}

Signature:

i18n?: I18n;

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 RightAlignButtonProps

Signature:

export interface RightAlignButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

interface TableCellMenuComponentProps

Signature:

export interface TableCellMenuComponentProps 

property popupOpen

Signature:

popupOpen: boolean;

property setPopupOpen

Signature:

setPopupOpen: React.Dispatch<React.SetStateAction<boolean>>;

interface TableCellMenuProps

Signature:

export interface TableCellMenuProps 

property Component

Signature:

Component?: TableCellMenuComponent;

interface TableDeleteButtonProps

Signature:

export interface TableDeleteButtonProps 

property Component

Signature:

Component?: React.ComponentType<TableDeleteInnerButtonProps>;

interface TableDeleteInnerButtonProps

Signature:

export interface TableDeleteInnerButtonProps 

property onClick

The action when the button is pressed.

Signature:

onClick: MouseEventHandler;

property onMouseDown

The action when the mouse is pressed on the button.

Signature:

onMouseDown: MouseEventHandler;

property onMouseEnter

The action when the mouse is over the button.

Signature:

onMouseEnter: MouseEventHandler;

property onMouseLeave

The action when the mouse level the button.

Signature:

onMouseLeave: MouseEventHandler;

property position

The position of the button

Signature:

position: UsePositionerReturn;

interface TableDeleteRowColumnButtonProps

Signature:

export interface TableDeleteRowColumnButtonProps 

property Component

Signature:

Component?: React.ComponentType<TableDeleteRowColumnInnerButtonProps>;

interface TableDeleteRowColumnInnerButtonProps

Signature:

export interface TableDeleteRowColumnInnerButtonProps 

property onClick

The action when the button is pressed.

Signature:

onClick: MouseEventHandler;

property onMouseDown

The action when the mouse is pressed on the button.

Signature:

onMouseDown: MouseEventHandler;

property onMouseOut

The action when the mouse level the button.

Signature:

onMouseOut: MouseEventHandler;

property onMouseOver

The action when the mouse is over the button.

Signature:

onMouseOver: MouseEventHandler;

property position

The position of the button

Signature:

position: UsePositionerReturn;

interface TextAlignmentButtonGroupProps

Signature:

export interface TextAlignmentButtonGroupProps 

property children

Signature:

children?: ReactNode | ReactNode[];

property showAll

Signature:

showAll?: boolean;

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 ToggleBlockquoteButtonProps

Signature:

export interface ToggleBlockquoteButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

interface ToggleBoldButtonProps

Signature:

export interface ToggleBoldButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

interface ToggleBulletListButtonProps

Signature:

export interface ToggleBulletListButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

interface ToggleCalloutButtonProps

Signature:

export interface ToggleCalloutButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

property attrs

Signature:

attrs?: Partial<CalloutExtensionAttributes>;

interface ToggleCalloutMenuItemProps

Signature:

export interface ToggleCalloutMenuItemProps extends Omit<CommandMenuItemProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandMenuItemProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

property attrs

Signature:

attrs?: Partial<CalloutExtensionAttributes>;

interface ToggleCodeBlockButtonProps

Signature:

export interface ToggleCodeBlockButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

property attrs

Signature:

attrs?: Partial<CodeBlockAttributes>;

interface ToggleCodeButtonProps

Signature:

export interface ToggleCodeButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

interface ToggleColumnsButtonProps

Signature:

export interface ToggleColumnsButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

property attrs

Signature:

attrs?: Partial<ColumnAttributes>;

interface ToggleHeadingButtonProps

Signature:

export interface ToggleHeadingButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

property attrs

Signature:

attrs?: Partial<HeadingExtensionAttributes>;

interface ToggleHeadingMenuItemProps

Signature:

export interface ToggleHeadingMenuItemProps extends Omit<CommandMenuItemProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandMenuItemProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

property attrs

Signature:

attrs?: Partial<HeadingExtensionAttributes>;

interface ToggleItalicButtonProps

Signature:

export interface ToggleItalicButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

interface ToggleOrderedListButtonProps

Signature:

export interface ToggleOrderedListButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

interface ToggleStrikeButtonProps

Signature:

export interface ToggleStrikeButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

interface ToggleSubscriptButtonProps

Signature:

export interface ToggleSubscriptButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

interface ToggleSuperscriptButtonProps

Signature:

export interface ToggleSuperscriptButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

interface ToggleTaskListButtonProps

Signature:

export interface ToggleTaskListButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

interface ToggleUnderlineButtonProps

Signature:

export interface ToggleUnderlineButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

interface ToggleWhitespaceButtonProps

Signature:

export interface ToggleWhitespaceButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

interface UndoButtonProps

Signature:

export interface UndoButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'> 

Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>

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

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 UseI18nReturn

Signature:

export interface UseI18nReturn extends Required<I18nProps> 

Extends: Required<I18nProps>

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

property t

A translation utility for translating a predefined string.

Signature:

t: I18n['_'];

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 UseSuggesterProps

Signature:

export interface UseSuggesterProps 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 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

type VerticalDividerProps

Signature:

export type VerticalDividerProps = Omit<DividerProps, 'orientation'>;