react

package @remirror/react

class PlaceholderExtension

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

Signature:

export declare class PlaceholderExtension extends PlainExtension<PlaceholderOptions> 

Extends: PlainExtension<PlaceholderOptions>

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

Extension.(constructor)

Constructs a new instance of the Extension class

Signature:

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

Parameters:

Parameter	Type	Description
args	ExtensionConstructorProps<Options>

property constructorName

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

Signature:

get constructorName(): string;

property defaultPriority

The default priority for this family of extensions.

Signature:

static readonly defaultPriority: ExtensionPriority;

property extensions

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

Signature:

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

property name

Signature:

get name(): "placeholder";

property priority

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

Signature:

get priority(): ExtensionPriority;

property store

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

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

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

Signature:

protected get store(): Remirror.ExtensionStore;

method clone

Clone an extension.

Signature:

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

Parameters:

Parameter	Type	Description
args	ExtensionConstructorProps<Options>

Returns:

Extension<Options>

method createAttributes

Signature:

createAttributes(): ProsemirrorAttributes;

Returns:

ProsemirrorAttributes

method createExtensions

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

Signature:

createExtensions(): AnyExtension[];

Returns:

AnyExtension[]

Remarks:

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

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

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

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

method createPlugin

Signature:

createPlugin(): CreateExtensionPlugin;

Returns:

CreateExtensionPlugin

method getExtension

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

Signature:

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

Parameters:

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

Returns:

InstanceType<Type>

Remarks:

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

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

import { PlainExtension, OnSetOptionsProps } from 'remirror';

interface ParentOptions { weight?: string }

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

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

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

method isOfType

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

Signature:

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

Parameters:

Parameter	Type	Description
Constructor	Type

Returns:

this is InstanceType<Type>

method onAppendTransaction

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

This is shorthand for the ProsemirrorPlugin.spec.appendTransaction.

Lifecycle Methods

Signature:

onAppendTransaction?(props: AppendLifecycleProps): void;

Parameters:

Parameter	Type	Description
props	AppendLifecycleProps

Returns:

void

method onApplyState

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

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

Lifecycle Methods

Signature:

onApplyState?(props: ApplyStateLifecycleProps): void;

Parameters:

Parameter	Type	Description
props	ApplyStateLifecycleProps

Returns:

void

method onCreate

This handler is called when the RemirrorManager is first created.

Signature:

onCreate?(): Dispose | void;

Returns:

Dispose | void

Remarks:

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

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

This handler is called before the onView handler.

Lifecycle Methods

method onDestroy

Called when the extension is being destroyed.

Lifecycle Methods

Signature:

onDestroy?(): void;

Returns:

void

method onInitState

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

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

Lifecycle Methods

Signature:

onInitState?(state: EditorState): void;

Parameters:

Parameter	Type	Description
state	EditorState

Returns:

void

method onSetOptions

Signature:

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

Parameters:

Parameter	Type	Description
props	OnSetOptionsProps<PlaceholderOptions>

Returns:

void

method onStateUpdate

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

Lifecycle Methods

Signature:

onStateUpdate?(props: StateUpdateLifecycleProps): void;

Parameters:

Parameter	Type	Description
props	StateUpdateLifecycleProps

Returns:

void

method onView

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

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

This handler is called after the onCreate handler.

Lifecycle Methods

Signature:

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

Parameters:

Parameter	Type	Description
view	EditorView

Returns:

Dispose | void

class PortalContainer

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

Signature:

export declare class PortalContainer 

property on

Event handler for subscribing to update events from the portalContainer.

Signature:

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

property once

Subscribe to one event before automatically unbinding.

Signature:

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

property portals

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

Signature:

portals: PortalMap;

method forceUpdate

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

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

Signature:

forceUpdate(): void;

Returns:

void

method remove

Deletes the portal within the container.

Signature:

remove(container: HTMLElement): void;

Parameters:

Parameter	Type	Description
container	HTMLElement

Returns:

void

method render

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

Signature:

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

Parameters:

Parameter	Type	Description
{ Component, container }	RenderMethodProps

Returns:

void

class ReactComponentExtension

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

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

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

Signature:

export declare class ReactComponentExtension extends PlainExtension<ReactComponentOptions> 

Extends: PlainExtension<ReactComponentOptions>

Remarks:

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

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

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

### Caveats

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

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

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

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

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

Extension.(constructor)

Constructs a new instance of the Extension class

Signature:

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

Parameters:

Parameter	Type	Description
args	ExtensionConstructorProps<Options>

property constructorName

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

Signature:

get constructorName(): string;

property defaultPriority

The default priority for this family of extensions.

Signature:

static readonly defaultPriority: ExtensionPriority;

property extensions

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

Signature:

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

property name

Signature:

get name(): "reactComponent";

property priority

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

Signature:

get priority(): ExtensionPriority;

property store

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

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

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

Signature:

protected get store(): Remirror.ExtensionStore;

method clone

Clone an extension.

Signature:

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

Parameters:

Parameter	Type	Description
args	ExtensionConstructorProps<Options>

Returns:

Extension<Options>

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

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

Returns:

InstanceType<Type>

Remarks:

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

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

import { PlainExtension, OnSetOptionsProps } from 'remirror';

interface ParentOptions { weight?: string }

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

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

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

method isOfType

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

Signature:

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

Parameters:

Parameter	Type	Description
Constructor	Type

Returns:

this is InstanceType<Type>

method onAppendTransaction

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

This is shorthand for the ProsemirrorPlugin.spec.appendTransaction.

Lifecycle Methods

Signature:

onAppendTransaction?(props: AppendLifecycleProps): void;

Parameters:

Parameter	Type	Description
props	AppendLifecycleProps

Returns:

void

method onApplyState

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

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

Lifecycle Methods

Signature:

onApplyState?(props: ApplyStateLifecycleProps): void;

Parameters:

Parameter	Type	Description
props	ApplyStateLifecycleProps

Returns:

void

method onCreate

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

Signature:

onCreate(): void;

Returns:

void

method onDestroy

Called when the extension is being destroyed.

Lifecycle Methods

Signature:

onDestroy?(): void;

Returns:

void

method onInitState

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

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

Lifecycle Methods

Signature:

onInitState?(state: EditorState): void;

Parameters:

Parameter	Type	Description
state	EditorState

Returns:

void

method onStateUpdate

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

Lifecycle Methods

Signature:

onStateUpdate?(props: StateUpdateLifecycleProps): void;

Parameters:

Parameter	Type	Description
props	StateUpdateLifecycleProps

Returns:

void

method onView

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

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

This handler is called after the onCreate handler.

Lifecycle Methods

Signature:

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

Parameters:

Parameter	Type	Description
view	EditorView

Returns:

Dispose | void

class ReactExtension

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

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

Signature:

export declare class ReactExtension extends PlainExtension<ReactExtensionOptions> 

Extends: PlainExtension<ReactExtensionOptions>

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

Extension.(constructor)

Constructs a new instance of the Extension class

Signature:

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

Parameters:

Parameter	Type	Description
args	ExtensionConstructorProps<Options>

property constructorName

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

Signature:

get constructorName(): string;

property defaultPriority

The default priority for this family of extensions.

Signature:

static readonly defaultPriority: ExtensionPriority;

property extensions

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

Signature:

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

property name

Signature:

get name(): "react";

property priority

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

Signature:

get priority(): ExtensionPriority;

property store

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

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

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

Signature:

protected get store(): Remirror.ExtensionStore;

method clone

Clone an extension.

Signature:

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

Parameters:

Parameter	Type	Description
args	ExtensionConstructorProps<Options>

Returns:

Extension<Options>

method createExtensions

Signature:

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

Returns:

(PlaceholderExtension | ReactComponentExtension)[]

method getExtension

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

Signature:

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

Parameters:

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

Returns:

InstanceType<Type>

Remarks:

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

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

import { PlainExtension, OnSetOptionsProps } from 'remirror';

interface ParentOptions { weight?: string }

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

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

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

method isOfType

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

Signature:

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

Parameters:

Parameter	Type	Description
Constructor	Type

Returns:

this is InstanceType<Type>

method onAppendTransaction

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

This is shorthand for the ProsemirrorPlugin.spec.appendTransaction.

Lifecycle Methods

Signature:

onAppendTransaction?(props: AppendLifecycleProps): void;

Parameters:

Parameter	Type	Description
props	AppendLifecycleProps

Returns:

void

method onApplyState

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

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

Lifecycle Methods

Signature:

onApplyState?(props: ApplyStateLifecycleProps): void;

Parameters:

Parameter	Type	Description
props	ApplyStateLifecycleProps

Returns:

void

method onCreate

This handler is called when the RemirrorManager is first created.

Signature:

onCreate?(): Dispose | void;

Returns:

Dispose | void

Remarks:

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

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

This handler is called before the onView handler.

Lifecycle Methods

method onDestroy

Called when the extension is being destroyed.

Lifecycle Methods

Signature:

onDestroy?(): void;

Returns:

void

method onInitState

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

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

Lifecycle Methods

Signature:

onInitState?(state: EditorState): void;

Parameters:

Parameter	Type	Description
state	EditorState

Returns:

void

method onSetOptions

Signature:

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

Parameters:

Parameter	Type	Description
props	OnSetOptionsProps<ReactExtensionOptions>

Returns:

void

method onStateUpdate

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

Lifecycle Methods

Signature:

onStateUpdate?(props: StateUpdateLifecycleProps): void;

Parameters:

Parameter	Type	Description
props	StateUpdateLifecycleProps

Returns:

void

method onView

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

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

This handler is called after the onCreate handler.

Lifecycle Methods

Signature:

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

Parameters:

Parameter	Type	Description
view	EditorView

Returns:

Dispose | void

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:

Parameter	Type	Description
extra	ApplySchemaAttributes
override	NodeSpecOverride

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:

Parameter	Type	Description
extra	ApplySchemaAttributes

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:

Parameter	Type	Description
extra	ApplySchemaAttributes

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:

Parameter	Type	Description
options	CreateTableCommand	(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:

Parameter	Type	Description
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 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:

Parameter	Type	Description
props	OnSetOptionsProps<TableOptions>

Returns:

void

method onStateUpdate

Signature:

onStateUpdate(props: StateUpdateLifecycleProps): void;

Parameters:

Parameter	Type	Description
props	StateUpdateLifecycleProps

Returns:

void

method onView

Signature:

onView(view: EditorView): void;

Parameters:

Parameter	Type	Description
view	EditorView

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:

Parameter	Type	Description
name	string
value	unknown

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:

Parameter	Type	Description
background	string | 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:

Parameter	Type	Description
type	'column' | 'row'	(Optional)
state	EditorState	(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:

Parameter	Type	Description
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:

Parameter	Type	Description
extra	ApplySchemaAttributes
override	NodeSpecOverride

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:

Parameter	Type	Description
extra	ApplySchemaAttributes
override	NodeSpecOverride

Returns:

TableSchemaSpec

function createEditorView()

Creates a new editor view

Signature:

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

Parameters:

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

Returns:

EditorView

function createReactManager()

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

Signature:

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

Parameters:

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

Returns:

RemirrorManager<ReactExtensions<Extension>>

function GenIcon()

A higher order component which creates the Icon component.

Signature:

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

Parameters:

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

Returns:

IconType

function indexFromArrowPress()

Get the next index from an arrow key press.

Signature:

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

Parameters:

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

Returns:

number

function MentionAtomPopupComponent()

This component renders the emoji suggestion dropdown for the user.

Signature:

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

Parameters:

Parameter	Type	Description
props	MentionAtomPopupComponentProps<Data>

Returns:

JSX.Element

function Remirror_2()

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

Signature:

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

Parameters:

Parameter	Type	Description
props	RemirrorProps<Extension>

Returns:

ReactElement<RemirrorProps<Extension>>

Remarks:

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

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

function useActive()

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

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

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

Signature:

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

Parameters:

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

Returns:

ActiveFromExtensions<Extension>

function useAttrs()

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

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

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

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

Signature:

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

Parameters:

Parameter	Type	Description
update	boolean	(Optional)

Returns:

AttrsFromExtensions<Extension>

function useChainedCommands()

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

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

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

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

`

Signature:

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

Returns:

ChainedFromExtensions<Extension>

function useCommands()

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

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

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

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

`

Signature:

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

Returns:

CommandsFromExtensions<Extension>

function useCurrentSelection()

A core hook which returns the current selection.

Signature:

export declare function useCurrentSelection(): Selection;

Returns:

Selection

function useDocChanged()

A hook for subscribing to transactions that change the document

Signature:

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

Parameters:

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

Returns:

void

function useEditorDomRef()

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

Signature:

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

Returns:

MutableRefObject<HTMLElement>

function useEditorEvent()

A hook for subscribing to events from the editor.

Signature:

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

Parameters:

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

Returns:

void

function useEditorFocus()

Keep track of the editor focus.

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

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

Signature:

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

Parameters:

Parameter	Type	Description
props	UseEditorFocusProps	(Optional)

Returns:

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

function useEditorState()

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

Signature:

export declare function useEditorState(): EditorState;

Returns:

EditorState

function useEditorView()

A hook which provides access to the editor view.

Signature:

export declare function useEditorView(): EditorView;

Returns:

EditorView

function useEmoji()

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

Signature:

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

Parameters:

Parameter	Type	Description
props	UseEmojiProps	(Optional)

Returns:

UseEmojiReturn

function useExtension()

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

Signature:

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

Parameters:

Parameter	Type	Description
Constructor	Type

Returns:

InstanceType<Type>

Remarks:

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

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

It can be used with three distinct call signatures.

**Get the extension instance**

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

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

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

  return null;
}

**Update the extension properties**

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

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

  return null;
}

**Add event handlers to your extension**

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

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

  return null;
};

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

function useExtension()

Signature:

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

Parameters:

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

Returns:

void

function useExtension()

Signature:

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

Parameters:

Parameter	Type	Description
Constructor	Type
options	DynamicOptionsOfConstructor<Type>

Returns:

void

function useExtensionEvent()

Dynamically add event handlers to your extension.

Signature:

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

Parameters:

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

Returns:

void

Remarks:

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

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

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

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

  return null;
};

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

function useHasExtension()

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

Signature:

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

Parameters:

Parameter	Type	Description
Constructor	Type

Returns:

boolean

function useHelpers()

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

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

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

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

`

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

Signature:

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

Parameters:

Parameter	Type	Description
update	boolean	(Optional)

Returns:

HelpersFromExtensions<Extension>

function useHistory()

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

Signature:

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

Parameters:

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

Returns:

void

Remarks:

handler should be a memoized function.

function useHover()

A hook which listens to hover events.

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

Signature:

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

Parameters:

Parameter	Type	Description
handler	HoverEventHandler

Returns:

void

function useKeymap()

Add custom keyboard bindings to the editor instance.

Signature:

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

Parameters:

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

Returns:

void

Remarks:

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

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

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

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

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

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

function useKeymaps()

Add custom keyboard bindings to the editor instance.

Signature:

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

Parameters:

Parameter	Type	Description
bindings	KeyBindings
priority	ExtensionPriority	(Optional)

Returns:

void

Remarks:

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

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

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

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

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

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

function useMarkRange()

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

Signature:

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

Parameters:

Parameter	Type	Description
type	string

Returns:

GetMarkRange | undefined

function useMention()

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

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

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

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

Signature:

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

Parameters:

Parameter	Type	Description
props	UseMentionProps<Data>

Returns:

UseMentionReturn<Data>

function useMentionAtom()

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

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

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

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

Signature:

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

Parameters:

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

Returns:

UseMentionAtomReturn<Data>

function useMenuNavigation()

This hook provides the primitives for rendering a dropdown menu within

Signature:

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

Parameters:

Parameter	Type	Description
props	MenuNavigationProps

Returns:

UseMenuNavigationReturn<Item>

function useMultiPositioner()

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

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

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

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

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

Signature:

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

Parameters:

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

Returns:

Array<UseMultiPositionerReturn<Data>>

function usePortalContainer()

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

Signature:

export declare function usePortalContainer(): PortalContainer;

Returns:

PortalContainer

function usePortals()

A hook which subscribes to updates from the portal container.

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

Signature:

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

Parameters:

Parameter	Type	Description
portalContainer	PortalContainer

Returns:

Array<[HTMLElement, MountedPortal]>

function usePositioner()

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

Signature:

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

Parameters:

Parameter	Type	Description
positioner	StringPositioner	the positioner to use which can be a string or a Positioner instance.
isActive	boolean	(Optional) Set this to a boolean to override whether the positioner is active. true leaves the behaviour unchanged. In a recent update, the positioner is now automatically memoized for you.

Returns:

UsePositionerReturn<Data>

Remarks:

Must apply the ref to the component when called.

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

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

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

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

function usePositioner()

Signature:

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

Parameters:

Parameter	Type	Description
positioner	Positioner | CallbackPositioner
deps	unknown[]

Returns:

UsePositionerReturn<Data>

function useRemirror()

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

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

Signature:

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

Parameters:

Parameter	Type	Description
props	UseRemirrorProps<Extension>	(Optional)

Returns:

UseRemirrorReturn<ReactExtensions<Extension>>

function useRemirrorContext()

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

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

Signature:

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

Parameters:

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

Returns:

ReactFrameworkOutput<Extension>

Remarks:

The following example applies the root props to the div.

import { Remirror, useRemirrorContext } from 'remirror';

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

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

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

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

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

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

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

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

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

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

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

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

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

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

function useSelectedText()

A core hook which provides the the currently selected text.

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

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

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

`

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

Signature:

export declare function useSelectedText(): string | undefined;

Returns:

string | undefined

function useSuggest()

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

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

This includes

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

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

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

Signature:

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

Parameters:

Parameter	Type	Description
props	UseSuggesterProps

Returns:

UseSuggestReturn

function useTheme()

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

The theme provided is deeply merged with the parent theme.

Signature:

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

Parameters:

Parameter	Type	Description
props	UseThemeProps	(Optional)

Returns:

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

function useUpdateReason()

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

Signature:

export declare function useUpdateReason(): UpdateReason;

Returns:

UpdateReason

variable 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, '