core

package @remirror/core

class AttributesExtension

This extension allows others extension to add the createAttributes method for adding attributes to the prosemirror dom element.

Signature:

export declare class AttributesExtension extends PlainExtension 

Extends: PlainExtension

Remarks:

Use this to include all the dynamically generated attributes provided by each extension. High priority extensions have preference over the lower priority extensions.

Builtin Extension

(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(): "attributes";

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

Generate chained and unchained commands for making changes to the editor.

Signature:

export declare class CommandsExtension extends PlainExtension<CommandOptions> 

Extends: PlainExtension<CommandOptions>

Remarks:

Typically actions are used to create interactive menus. For example a menu can use a command to toggle bold formatting or to undo the last action.

Builtin Extension

(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(): "commands";

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 applyMark

Removes a mark from the current selection or provided range.

Signature:

applyMark(markType: string | MarkType, attrs?: ProsemirrorAttributes, selection?: PrimitiveSelection): CommandFunction;

Parameters:

Parameter	Type	Description
markType	string | MarkType
attrs	ProsemirrorAttributes	(Optional)
selection	PrimitiveSelection	(Optional)

Returns:

CommandFunction

method blur

Blur focus from the editor and also update the selection at the same time.

Signature:

blur(position?: PrimitiveSelection): CommandFunction;

Parameters:

Parameter	Type	Description
position	PrimitiveSelection	(Optional)

Returns:

CommandFunction

method clone

Clone an extension.

Signature:

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

Parameters:

Parameter	Type	Description
args	ExtensionConstructorProps<Options>

Returns:

Extension<Options>

method copy

Copy the selected content for non empty selections.

Signature:

copy(): CommandFunction;

Returns:

CommandFunction

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

Create a plugin that solely exists to track forced updates via the generated plugin key.

Signature:

createPlugin(): CreateExtensionPlugin;

Returns:

CreateExtensionPlugin

method customDispatch

Enable custom commands to be used within the editor by users.

This is preferred to the initial idea of setting commands on the manager or even as a prop. The problem is that there's no typechecking and it should be just fine to add your custom commands here to see the dispatched immediately.

To use it, firstly define the command.

import { CommandFunction } from 'remirror';

const myCustomCommand: CommandFunction = ({ tr, dispatch }) => {
  dispatch?.(tr.insertText('My Custom Command'));

  return true;
}

And then use it within the component.

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

const MyEditorButton = () => {
  const { commands } = useRemirror();
  const onClick = useCallback(() => {
    commands.customDispatch(myCustomCommand);
  }, [commands])

  return <button onClick={onClick}>Custom Command</button>
}

An alternative is to use a custom command directly from a prosemirror-* library. This can be accomplished in the following way.

import { joinDown } from 'prosemirror-commands';
import { convertCommand } from 'remirror';

const MyEditorButton = () => {
  const { commands } = useRemirror();
  const onClick = useCallback(() => {
    commands.customDispatch(convertCommand(joinDown));
  }, [commands]);

  return <button onClick={onClick}>Custom Command</button>;
};

Signature:

customDispatch(command: CommandFunction): CommandFunction;

Parameters:

Parameter	Type	Description
command	CommandFunction

Returns:

CommandFunction

method cut

Cut the selected content.

Signature:

cut(): CommandFunction;

Returns:

CommandFunction

method delete

Delete the provided range or current selection.

Signature:

delete(range?: FromToProps): CommandFunction;

Parameters:

Parameter	Type	Description
range	FromToProps	(Optional)

Returns:

CommandFunction

method emptySelection

Fire an update to remove the current range selection. The cursor will be placed at the anchor of the current range selection.

A range selection is a non-empty text selection.

Builtin Command

Signature:

emptySelection(): CommandFunction;

Returns:

CommandFunction

method emptyUpdate

Fire an empty update to trigger an update to all decorations, and state that may not yet have run.

This can be used in extensions to trigger updates when certain options that affect the editor state have changed.

Signature:

emptyUpdate(action?: () => void): CommandFunction;

Parameters:

Parameter	Type	Description
action	() => void	(Optional) provide an action which is called just before the empty update is dispatched (only when dispatch is available). This can be used in chainable editor scenarios when you want to lazily invoke an action at the point the update is about to be applied.

Returns:

CommandFunction

method focus

Set the focus for the editor.

If using this with chaining this should only be placed at the end of the chain. It can cause hard to debug issues when used in the middle of a chain.

import { useCallback } from 'react';
import { useRemirrorContext } from '@remirror/react';

const MenuButton = () => {
  const { chain } = useRemirrorContext();
  const onClick = useCallback(() => {
    chain
      .toggleBold()
      .focus('end')
      .run();
  }, [chain])

  return <button onClick={onClick}>Bold</button>
}

Signature:

focus(position?: FocusType): CommandFunction;

Parameters:

Parameter	Type	Description
position	FocusType	(Optional)

Returns:

CommandFunction

method forceUpdate

Force an update of the specific updatable ProseMirror props.

This command is always available as a builtin command.

Builtin Command

Signature:

forceUpdate(...keys: UpdatableViewProps[]): CommandFunction;

Parameters:

Parameter	Type	Description
keys	UpdatableViewProps[]

Returns:

CommandFunction

method getAllCommandOptions

Get the all the decorated commands available on the editor instance.

Signature:

getAllCommandOptions(): Helper<Record<string, WithName<CommandDecoratorOptions>>>;

Returns:

Helper<Record<string, WithName<CommandDecoratorOptions>>>

method getCommandOptions

Get the options that were passed into the provided command.

Signature:

getCommandOptions(name: string): Helper<WithName<CommandDecoratorOptions> | undefined>;

Parameters:

Parameter	Type	Description
name	string

Returns:

Helper<WithName<CommandDecoratorOptions> | undefined>

method getCommandProp

A short hand way of getting the view, state, tr and dispatch methods.

Signature:

getCommandProp(): Helper<Required<CommandFunctionProps>>;

Returns:

Helper<Required<CommandFunctionProps>>

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 insertNewLine

Insert a new line into the editor.

Depending on editor setup and where the cursor is placed this may have differing impacts.

Builtin Command

Signature:

insertNewLine(): CommandFunction;

Returns:

CommandFunction

method insertNode

Insert a node into the editor with the provided content.

Builtin Command

Signature:

insertNode(node: string | NodeType | ProsemirrorNode | Fragment, options?: InsertNodeOptions): CommandFunction;

Parameters:

Parameter	Type	Description
node	string | NodeType | ProsemirrorNode | Fragment
options	InsertNodeOptions	(Optional)

Returns:

CommandFunction

method insertText

Insert text into the dom at the current location by default. If a promise is provided instead of text the resolved value will be inserted at the tracked position.

Signature:

insertText(text: string | (() => Promise<string>), options?: InsertTextOptions): CommandFunction;

Parameters:

Parameter	Type	Description
text	string | (() => Promise<string>)
options	InsertTextOptions	(Optional)

Returns:

CommandFunction

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

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

Update the cached transaction whenever the state is updated.

Signature:

onStateUpdate({ state }: StateUpdateLifecycleProps): void;

Parameters:

Parameter	Type	Description
{ state }	StateUpdateLifecycleProps

Returns:

void

method onView

Attach commands once the view is attached.

Signature:

onView(view: EditorView): void;

Parameters:

Parameter	Type	Description
view	EditorView

Returns:

void

method paste

Select all text in the editor.

Signature:

paste(): CommandFunction;

Returns:

CommandFunction

method removeMark

Removes a mark from the current selection or provided range.

Signature:

removeMark(props: RemoveMarkProps): CommandFunction;

Parameters:

Parameter	Type	Description
props	RemoveMarkProps

Returns:

CommandFunction

method replaceText

Replaces text with an optional appended string at the end. The replacement can be text, or a custom node.

Signature:

replaceText(props: ReplaceTextProps): CommandFunction;

Parameters:

Parameter	Type	Description
props	ReplaceTextProps	see [[ReplaceTextProps]]

Returns:

CommandFunction

method resetContent

Reset the content of the editor while preserving the history.

This means that undo and redo will still be active since the doc is replaced with a new doc.

Signature:

resetContent(): CommandFunction;

Returns:

CommandFunction

method selectAll

Select all text in the editor.

Signature:

selectAll(): CommandFunction;

Returns:

CommandFunction

method selectMark

Select the link at the current location.

Signature:

selectMark(type: string | MarkType): CommandFunction;

Parameters:

Parameter	Type	Description
type	string | MarkType

Returns:

CommandFunction

method selectText

Select the text within the provided range.

Here are some ways it can be used.

// Set to the end of the document.
commands.selectText('end');

// Set the selection to the start of the document.
commands.selectText('start');

// Select all the text in the document.
commands.selectText('all')

// Select a range of text. It's up to you to make sure the selected
// range is valid.
commands.selectText({ from: 10, to: 15 });

// Specify the anchor and range in the selection.
commands.selectText({ anchor: 10, head: 15 });

// Set to a specific position.
commands.selectText(10);

// Use a ProseMirror selection
commands.selectText(TextSelection.near(state.doc.resolve(10)))

Although this is called selectText you can provide your own selection option which can be any type of selection.

Signature:

selectText(selection: PrimitiveSelection, options?: {
        forceUpdate?: boolean;
    }): CommandFunction;

Parameters:

Parameter	Type	Description
selection	PrimitiveSelection
options	{ forceUpdate?: boolean; }	(Optional)

Returns:

CommandFunction

method setBlockNodeType

Set the block type of the current selection or the provided range.

Signature:

setBlockNodeType(nodeType: string | NodeType, attrs?: ProsemirrorAttributes, selection?: PrimitiveSelection, preserveAttrs?: boolean): CommandFunction;

Parameters:

Parameter	Type	Description
nodeType	string | NodeType	the node type to create
attrs	ProsemirrorAttributes	(Optional) the attributes to add to the node type
selection	PrimitiveSelection	(Optional) the position in the document to set the block node
preserveAttrs	boolean	(Optional) when true preserve the attributes at the provided selection

Returns:

CommandFunction

method setContent

Set the content of the editor while preserving history.

Under the hood this is replacing the content in the document with the new state.doc of the provided content.

If the content is a string you will need to ensure you have the proper string handler set up in the editor.

Signature:

setContent(content: RemirrorContentType, selection?: PrimitiveSelection): CommandFunction;

Parameters:

Parameter	Type	Description
content	RemirrorContentType
selection	PrimitiveSelection	(Optional)

Returns:

CommandFunction

method setMeta

Set the meta data to attach to the editor on the next update.

Signature:

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

Parameters:

Parameter	Type	Description
name	string
value	unknown

Returns:

CommandFunction

method toggleBlockNodeItem

Toggle a block between the provided type and toggleType.

Signature:

toggleBlockNodeItem(toggleProps: ToggleBlockItemProps): CommandFunction;

Parameters:

Parameter	Type	Description
toggleProps	ToggleBlockItemProps

Returns:

CommandFunction

method toggleMark

Removes a mark from the current selection or provided range.

Signature:

toggleMark(props: ToggleMarkProps): CommandFunction;

Parameters:

Parameter	Type	Description
props	ToggleMarkProps

Returns:

CommandFunction

method toggleWrappingNode

Toggle between wrapping an inactive node with the provided node type, and lifting it up into it's parent.

Signature:

toggleWrappingNode(nodeType: string | NodeType, attrs?: ProsemirrorAttributes, selection?: PrimitiveSelection): CommandFunction;

Parameters:

Parameter	Type	Description
nodeType	string | NodeType	the node type to toggle
attrs	ProsemirrorAttributes	(Optional) the attrs to use for the node
selection	PrimitiveSelection	(Optional) the selection point in the editor to perform the action

Returns:

CommandFunction

method updateNodeAttributes

Update the attributes for the node at the specified pos in the editor.

Builtin Command

Signature:

updateNodeAttributes<Type extends object>(pos: number, attrs: ProsemirrorAttributes<Type>): CommandFunction;

Parameters:

Parameter	Type	Description
pos	number
attrs	ProsemirrorAttributes<Type>

Returns:

CommandFunction

method wrapInNode

Wrap the selection or the provided text in a node of the given type with the given attributes.

Signature:

wrapInNode(nodeType: string | NodeType, attrs?: ProsemirrorAttributes, range?: FromToProps | undefined): CommandFunction;

Parameters:

Parameter	Type	Description
nodeType	string | NodeType
attrs	ProsemirrorAttributes	(Optional)
range	FromToProps | undefined	(Optional)

Returns:

CommandFunction

class DecorationsExtension

Simplify the process of adding decorations to the editor. All the decorations added to the document this way are automatically tracked which allows for custom components to be nested inside decorations.

Builtin Extension

Signature:

export declare class DecorationsExtension extends PlainExtension<DecorationsOptions> 

Extends: PlainExtension<DecorationsOptions>

(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(): "decorations";

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 addPlaceholder

Command to dispatch a transaction adding the placeholder decoration to be tracked.

Signature:

addPlaceholder(id: unknown, placeholder: DecorationPlaceholder, deleteSelection?: boolean): CommandFunction;

Parameters:

Parameter	Type	Description
id	unknown	the value that is used to identify this tracker. This can be any value. A promise, a function call, a string.
placeholder	DecorationPlaceholder
deleteSelection	boolean	(Optional)

Returns:

CommandFunction

method clearPlaceholders

A command to remove all active placeholder decorations.

Signature:

clearPlaceholders(): CommandFunction;

Returns:

CommandFunction

method clone

Clone an extension.

Signature:

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

Parameters:

Parameter	Type	Description
args	ExtensionConstructorProps<Options>

Returns:

Extension<Options>

method createDecorations

Add some decorations based on the provided settings.

Signature:

createDecorations(state: EditorState): DecorationSet;

Parameters:

Parameter	Type	Description
state	EditorState

Returns:

DecorationSet

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

Create the extension plugin for inserting decorations into the editor.

Signature:

createPlugin(): CreateExtensionPlugin;

Returns:

CreateExtensionPlugin

method findAllPlaceholders

Find the positions of all the trackers in document.

Signature:

findAllPlaceholders(): Helper<Map<unknown, FromToProps>>;

Returns:

Helper<Map<unknown, FromToProps>>

method findPlaceholder

Find the position for the tracker with the ID specified.

Signature:

findPlaceholder(id: unknown): Helper<FromToProps | undefined>;

Parameters:

Parameter	Type	Description
id	unknown	the unique position id which can be any type

Returns:

Helper<FromToProps | undefined>

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 stores all tracked positions in the editor and maps them via the transaction updates.

Signature:

onApplyState(): void;

Returns:

void

method onCreate

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

method removePlaceholder

A command to remove the specified placeholder decoration.

Signature:

removePlaceholder(id: unknown): CommandFunction;

Parameters:

Parameter	Type	Description
id	unknown

Returns:

CommandFunction

method updateDecorations

Signature:

updateDecorations(): CommandFunction;

Returns:

CommandFunction

method updatePlaceholder

A command to updated the placeholder decoration.

To update multiple placeholders you can use chained commands.

let idsWithData: Array<{id: unknown, data: number}>;

for (const { id, data } of idsWithData) {
  chain.updatePlaceholder(id, data);
}

chain.run();

Signature:

updatePlaceholder<Data = any>(id: unknown, data: Data): CommandFunction;

Parameters:

Parameter	Type	Description
id	unknown
data	Data

Returns:

CommandFunction

class DelayedCommand

Signature:

export declare class DelayedCommand<Value> 

DelayedCommand.(constructor)

Constructs a new instance of the DelayedCommand class

Signature:

constructor(promiseCreator: DelayedPromiseCreator<Value>);

Parameters:

Parameter	Type	Description
promiseCreator	DelayedPromiseCreator<Value>

property generateCommand

Generate the remirror command.

Signature:

readonly generateCommand: () => CommandFunction;

method failure

Add a failure callback to the handler.

Signature:

failure(handler: CommandFunction<{
        error: any;
    }>, method?: 'push' | 'unshift'): this;

Parameters:

Parameter	Type	Description
handler	CommandFunction<{ error: any; }>
method	'push' | 'unshift'	(Optional)

Returns:

this

method success

Add a success callback to the handler.

Signature:

success(handler: CommandFunction<{
        value: Value;
    }>, method?: 'push' | 'unshift'): this;

Parameters:

Parameter	Type	Description
handler	CommandFunction<{ value: Value; }>
method	'push' | 'unshift'	(Optional)

Returns:

this

method validate

The commands that will immediately be run and used to evaluate whether to proceed.

Signature:

validate(handler: CommandFunction, method?: 'push' | 'unshift'): this;

Parameters:

Parameter	Type	Description
handler	CommandFunction
method	'push' | 'unshift'	(Optional)

Returns:

this

class DocChangedExtension

Signature:

export declare class DocChangedExtension extends PlainExtension<DocChangedOptions> 

Extends: PlainExtension<DocChangedOptions>

(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(): "docChanged";

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

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 Extension

Extensions are fundamental to the way that Remirror works by grouping together the functionality and handling the management of similar concerns.

Signature:

declare abstract class Extension<Options extends ValidOptions = EmptyShape> extends BaseClass<Options, BaseExtensionOptions> 

Extends: BaseClass<Options, BaseExtensionOptions>

Remarks:

Extension can adjust editor functionality in any way. Here are some examples.

• How the editor displays certain content, i.e. **bold**, _italic_, **underline**. - Which commands should be made available e.g. commands.toggleBold() to toggle the weight of the selected text. - Check if a command is currently enabled (i.e a successful dry run) e.g. commands.toggleBold.enabled(). - Register Prosemirror Plugins, keymaps, InputRules PasteRules, Suggestions, and custom nodeViews which affect the behavior of the editor.

There are three types of Extension.

• NodeExtension - For creating Prosemirror nodes in the editor. See - MarkExtension - For creating Prosemirror marks in the editor. See - PlainExtension - For behavior which doesn't map to a ProsemirrorNode or Mark and as a result doesn't directly affect the Prosemirror Schema or content. See PlainExtension.

This Extension is an abstract class that should not be used directly but rather extended to add the intended functionality.

import { PlainExtension, Static } from 'remirror';

interface AwesomeExtensionOptions {
  isAwesome?: Static<boolean>;
  id?: string;
}

class AwesomeExtension extends PlainExtension<AwesomeExtensionOptions> {
  static defaultOptions: DefaultExtensionOptions<AwesomeExtensionOptions> = {
    isAwesome: true,
    id: '',
  }

  get name() {
    return 'awesome' as const;
  }
}

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

This is the Framework class which is used to create an abstract class for implementing Remirror into the framework of your choice.

The best way to learn how to use it is to take a look at the [[DomFramework]] and [[ReactFramework]] implementations.

Signature:

export declare abstract class Framework<Extension extends AnyExtension = BuiltinPreset, Props extends FrameworkProps<Extension> = FrameworkProps<Extension>, Output extends FrameworkOutput<Extension> = FrameworkOutput<Extension>> implements BaseFramework<Extension> 

Implements: BaseFramework<Extension>

Remarks:

There are two methods and one getter property which must be implemented for this

Framework.(constructor)

Constructs a new instance of the Framework class

Signature:

constructor(options: FrameworkOptions<Extension, Props>);

Parameters:

Parameter	Type	Description
options	FrameworkOptions<Extension, Props>

property addHandler

The event listener which allows consumers to subscribe to the different events taking place in the editor. Events currently supported are:

• destroy - focus - blur - updated

Signature:

protected get addHandler(): AddFrameworkHandler<Extension>;

property baseOutput

Methods and properties which are made available to all consumers of the Framework class.

Signature:

protected get baseOutput(): FrameworkOutput<Extension>;

property blur

Blur the editor.

Signature:

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

property createStateFromContent

Signature:

protected readonly createStateFromContent: CreateStateFromContent;

property dispatchTransaction

Part of the Prosemirror API and is called whenever there is state change in the editor.

Signature:

protected readonly dispatchTransaction: (tr: Transaction) => void;

property firstRender

True when this is the first render of the editor.

Signature:

protected get firstRender(): boolean;

property focus

Focus the editor.

Signature:

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

property frameworkOutput

Every framework implementation must provide it's own custom output.

Signature:

abstract get frameworkOutput(): Output;

property getPreviousState

Retrieve the previous editor state.

Signature:

protected readonly getPreviousState: () => EditorState;

property getState

Retrieve the editor state.

Signature:

protected readonly getState: () => EditorState;

property initialEditorState

The initial editor state from when the editor was first created.

Signature:

get initialEditorState(): EditorState;

property manager

The instance of the [[RemirrorManager]].

Signature:

protected get manager(): RemirrorManager<Extension>;

property name

Store the name of the framework.

Signature:

abstract get name(): string;

property onChange

Use this method in the onUpdate event to run all change handlers.

Signature:

readonly onChange: (props?: ListenerProps) => void;

property previousState

Returns the previous editor state. On the first render it defaults to returning the current state. For the first render the previous state and current state will always be equal.

Signature:

protected get previousState(): EditorState;

property previousStateOverride

A previous state that can be overridden by the framework implementation.

Signature:

protected previousStateOverride?: EditorState;

property props

The props passed in when creating or updating the Framework instance.

Signature:

get props(): Props;

property uid

A unique id for the editor. Can be used to differentiate between editors.

Please note that this ID is only locally unique, it should not be used as a database key.

Signature:

protected get uid(): string;

property updatableViewProps

The updatable view props.

Signature:

protected get updatableViewProps(): UpdatableViewPropsObject;

property view

The ProseMirror [[EditorView]].

Signature:

protected get view(): EditorView;

method addFocusListeners

Adds onBlur and onFocus listeners.

When extending this class make sure to call this method once ProsemirrorView has been added to the dom.

Signature:

protected addFocusListeners(): void;

Returns:

void

method createView

This method must be implement by the extending framework class. It returns an [[EditorView]] which is added to the [[RemirrorManager]].

Signature:

protected abstract createView(state: EditorState, element?: Element): EditorView;

Parameters:

Parameter	Type	Description
state	EditorState
element	Element	(Optional)

Returns:

EditorView

method destroy

Called when the component unmounts and is responsible for cleanup.

Signature:

destroy(): void;

Returns:

void

Remarks:

• Removes listeners for the editor blur and focus events

method eventListenerProps

Creates the props passed into all event listener handlers. e.g. onChange

Signature:

protected eventListenerProps(props?: ListenerProps): RemirrorEventListenerProps<Extension>;

Parameters:

Parameter	Type	Description
props	ListenerProps	(Optional)

Returns:

RemirrorEventListenerProps<Extension>

method getAttributes

This sets the attributes for the ProseMirror Dom node.

Signature:

protected getAttributes(ssr?: false): Record<string, string>;

Parameters:

Parameter	Type	Description
ssr	false	(Optional)

Returns:

Record<string, string>

method getAttributes

Signature:

protected getAttributes(ssr: true): Shape;

Parameters:

Parameter	Type	Description
ssr	true

Returns:

Shape

method removeFocusListeners

Remove onBlur and onFocus listeners.

When extending this class in your framework, make sure to call this just before the view is destroyed.

Signature:

protected removeFocusListeners(): void;

Returns:

void

method update

Update the constructor props passed in. Useful for frameworks like react where props are constantly changing and when using hooks function closures can become stale.

You can call the update method with the new props to update the internal state of this instance.

Signature:

update(options: FrameworkOptions<Extension, Props>): this;

Parameters:

Parameter	Type	Description
options	FrameworkOptions<Extension, Props>

Returns:

this

method updateState

This is used to implement how the state updates are used within your application instance.

It must be implemented.

Signature:

protected abstract updateState(props: UpdateStateProps): void;

Parameters:

Parameter	Type	Description
props	UpdateStateProps

Returns:

void

method updateViewProps

Update the view props.

Signature:

protected updateViewProps(...keys: UpdatableViewProps[]): void;

Parameters:

Parameter	Type	Description
keys	UpdatableViewProps[]

Returns:

void

class HelpersExtension

Helpers are custom methods that can provide extra functionality to the editor.

Signature:

export declare class HelpersExtension extends PlainExtension 

Extends: PlainExtension

Remarks:

They can be used for pulling information from the editor or performing custom async commands.

Also provides the default helpers used within the extension.

Builtin Extension

(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(): "helpers";

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

Get the html from the current state, or provide a custom state.

Signature:

getHTML(state?: EditorState): Helper<string>;

Parameters:

Parameter	Type	Description
state	EditorState	(Optional)

Returns:

Helper<string>

method getJSON

Get the JSON output for the main ProseMirror doc node.

This can be used to persist data between sessions and can be passed as content to the initialContent prop.

Signature:

getJSON(state?: EditorState): Helper<RemirrorJSON>;

Parameters:

Parameter	Type	Description
state	EditorState	(Optional)

Returns:

Helper<RemirrorJSON>

method getStateJSON

Get the full JSON output for the ProseMirror editor state object.

Signature:

getStateJSON(state?: EditorState): Helper<StateJSON>;

Parameters:

Parameter	Type	Description
state	EditorState	(Optional)

Returns:

Helper<StateJSON>

method getText

A method to get all the content in the editor as text. Depending on the content in your editor, it is not guaranteed to preserve it 100%, so it's best to test that it meets your needs before consuming.

Signature:

getText({ lineBreakDivider, state, }?: GetTextHelperOptions): Helper<string>;

Parameters:

Parameter	Type	Description
{ lineBreakDivider, state, }	GetTextHelperOptions	(Optional)

Returns:

Helper<string>

method getTextBetween

Signature:

getTextBetween(from: number, to: number, doc?: ProsemirrorNode): Helper<string>;

Parameters:

Parameter	Type	Description
from	number
to	number
doc	ProsemirrorNode	(Optional)

Returns:

Helper<string>

method insertHtml

Insert a html string as a ProseMirror Node.

Builtin Command

Signature:

insertHtml(html: string, options?: InsertNodeOptions): CommandFunction;

Parameters:

Parameter	Type	Description
html	string
options	InsertNodeOptions	(Optional)

Returns:

CommandFunction

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 isSelectionEmpty

Check whether the selection is empty.

Signature:

isSelectionEmpty(state?: EditorState): Helper<boolean>;

Parameters:

Parameter	Type	Description
state	EditorState	(Optional)

Returns:

Helper<boolean>

method isViewEditable

Signature:

isViewEditable(state?: EditorState): Helper<boolean>;

Parameters:

Parameter	Type	Description
state	EditorState	(Optional)

Returns:

Helper<boolean>

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 html and text string handlers to the editor.

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 InputRulesExtension

This extension allows others extension to add the createInputRules method for automatically transforming text when a certain regex pattern is typed.

Signature:

export declare class InputRulesExtension extends PlainExtension<InputRulesOptions> 

Extends: PlainExtension<InputRulesOptions>

Remarks:

This is an example of adding custom functionality to an extension via the ExtensionParameterMethods.

Builtin Extension

(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(): "inputRules";

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 createExternalPlugins

Add the inputRules plugin to the editor.

Signature:

createExternalPlugins(): ProsemirrorPlugin[];

Returns:

ProsemirrorPlugin[]

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 extension store method for rebuilding all input rules.

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 KeymapExtension

This extension allows others extension to use the createKeymaps method.

Signature:

export declare class KeymapExtension extends PlainExtension<KeymapOptions> 

Extends: PlainExtension<KeymapOptions>

Remarks:

Keymaps are the way of controlling how the editor responds to a keypress and different key combinations.

Without this extension most of the shortcuts and behaviors we have come to expect from text editors would not be provided.

Builtin Extension

(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(): "keymap";

property onAddCustomHandler

Signature:

protected onAddCustomHandler: AddCustomHandler<KeymapOptions>;

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 arrowLeftShortcut

Handle the arrow left key to exit the mark.

Signature:

arrowLeftShortcut(props: KeyBindingProps): boolean;

Parameters:

Parameter	Type	Description
props	KeyBindingProps

Returns:

boolean

method arrowRightShortcut

Handle exiting the mark forwards.

Signature:

arrowRightShortcut(props: KeyBindingProps): boolean;

Parameters:

Parameter	Type	Description
props	KeyBindingProps

Returns:

boolean

method backspace

Handle exiting the mark forwards.

Signature:

backspace(props: KeyBindingProps): boolean;

Parameters:

Parameter	Type	Description
props	KeyBindingProps

Returns:

boolean

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 createExternalPlugins

Add the created keymap to the available plugins.

Signature:

createExternalPlugins(): ProsemirrorPlugin[];

Returns:

ProsemirrorPlugin[]

method createKeymap

Create the base keymap and give it a low priority so that all other keymaps override it.

Signature:

createKeymap(): PrioritizedKeyBindings;

Returns:

PrioritizedKeyBindings

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 getNamedShortcut

Get the real shortcut name from the named shortcut.

Signature:

getNamedShortcut(shortcut: string, options?: Shape): Helper<string[]>;

Parameters:

Parameter	Type	Description
shortcut	string
options	Shape	(Optional)

Returns:

Helper<string[]>

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 adds the createKeymap method functionality to all extensions.

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 onSetOptions

Handle changes in the dynamic properties.

Signature:

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

Parameters:

Parameter	Type	Description
props	OnSetOptionsProps<KeymapOptions>

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 MarkExtension

A mark extension is based on the Mark concept from from within prosemirror https://prosemirror.net/docs/guide/#schema.marks

Signature:

export declare abstract class MarkExtension<Options extends ValidOptions = EmptyShape> extends Extension<Options> 

Extends: Extension<Options>

Remarks:

Marks are used to add extra styling or other information to inline content. Mark types are objects much like node types, used to tag mark objects and provide additional information about them.

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

MarkExtension.(constructor)

Constructs a new instance of the MarkExtension 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 disableExtraAttributes

Whether to disable extra attributes for this extension.

Signature:

static readonly disableExtraAttributes: boolean;

property extensions

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

Signature:

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

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;

property type

Provides access to the mark type from the schema.

Signature:

get type(): MarkType;

Remarks:

The type is available as soon as the schema is created by the SchemaExtension which has the priority Highest. It should be safe to access in any of the lifecycle methods.

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 createMarkSpec

Provide a method for creating the schema. This is required in order to create a MarkExtension.

Signature:

abstract createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec;

Parameters:

Parameter	Type	Description
extra	ApplySchemaAttributes
override	MarkSpecOverride

Returns:

MarkExtensionSpec

Remarks:

The main difference between the return value of this method and Prosemirror MarkSpec is that that the toDOM method doesn't allow dom manipulation. You can only return an array or string.

For more advanced requirements, it may be possible to create a nodeView to manage the dom interactions.

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

Support meta data for commands and key bindings.

Metadata is dded to all commands and keybindings and that information is provided to the onChange handle whenever the state is updated.

Signature:

export declare class MetaExtension extends PlainExtension<MetaOptions> 

Extends: PlainExtension<MetaOptions>

(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(): "meta";

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 createPlugin

This is here to provide a

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

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 NodeExtension

Defines the abstract class for extensions which can place nodes into the prosemirror state.

Signature:

export declare abstract class NodeExtension<Options extends ValidOptions = EmptyShape> extends Extension<Options> 

Extends: Extension<Options>

Remarks:

For more information see https://prosemirror.net/docs/ref/#model.Node

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

NodeExtension.(constructor)

Constructs a new instance of the NodeExtension class

Signature:

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

Parameters:

Parameter	Type	Description
args	ExtensionConstructorProps<Options>

property [__INTERNAL_REMIRROR_IDENTIFIER_KEY__]

Signature:

static get [__INTERNAL_REMIRROR_IDENTIFIER_KEY__](): RemirrorIdentifier.NodeExtensionConstructor;

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 disableExtraAttributes

Whether to disable extra attributes for this extension.

Signature:

static readonly disableExtraAttributes: boolean;

property extensions

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

Signature:

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

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;

property type

Provides access to the node type from the schema.

Signature:

get type(): NodeType;

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 createNodeSpec

Provide a method for creating the schema. This is required in order to create a NodeExtension.

Signature:

abstract createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec;

Parameters:

Parameter	Type	Description
extra	ApplySchemaAttributes
override	NodeSpecOverride

Returns:

NodeExtensionSpec

Remarks:

A node schema defines the behavior of the content within the editor. This is very tied to the prosemirror implementation and the best place to learn more about it is in the .

hole - a method that is meant to indicate where extra attributes should be placed (if they exist).

The hole is a function that augments the passed object adding a special secret key which is used to insert the extra attributes setter.

import { NodeExtension, SpecHole } from 'remirror';

class AwesomeExtension extends NodeExtension {
  get name() { return 'awesome' as const'; }

  createNodeSpec() {
    return {
      toDOM: (node) => {
        return ['p', hole(), 0]
      }
    }
  }
}

The above example will have the hole() method call replaced with the extra attributes.

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

This extension allows others extension to add the createNodeView method for creating nodeViews which alter how the dom is rendered for the node.

Signature:

export declare class NodeViewsExtension extends PlainExtension 

Extends: PlainExtension

Remarks:

This is an example of adding custom functionality to an extension via the ExtensionParameterMethods.

Builtin Extension

(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(): "nodeViews";

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

This extension allows others extension to add the createPasteRules method for automatically transforming pasted text which matches a certain regex pattern in the dom.

Builtin Extension

Signature:

export declare class PasteRulesExtension extends PlainExtension 

Extends: PlainExtension

(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(): "pasteRules";

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 createExternalPlugins

Signature:

createExternalPlugins(): ProsemirrorPlugin[];

Returns:

ProsemirrorPlugin[]

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

Create a plain extension which doesn't directly map to Prosemirror nodes or marks.

Plain extensions are a great way to add custom behavior to your editor.

Signature:

export declare abstract class PlainExtension<Options extends ValidOptions = EmptyShape> extends Extension<Options> 

Extends: Extension<Options>

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

This extension allows others extension to add the createPlugin method using Prosemirror Plugins.

Signature:

export declare class PluginsExtension extends PlainExtension<PluginsOptions> 

Extends: PlainExtension<PluginsOptions>

Remarks:

This is an example of adding custom functionality to an extension via the ExtensionParameterMethods.

Builtin Extension

(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(): "plugins";

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 createPlugin

Create a plugin which adds the [[onInitState]] and [[onApplyState]] lifecycle methods.

Signature:

createPlugin(): CreateExtensionPlugin<void>;

Returns:

CreateExtensionPlugin<void>

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 extension is responsible for adding state to the editor.

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 RemirrorError

This marks the error as a remirror specific error, with enhanced stack tracing capabilities.

Signature:

export declare class RemirrorError extends BaseError 

Extends: BaseError

Remarks:

Use this when creating your own extensions and notifying the user that something has gone wrong.

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

property errorCode

The error code used to create this error message.

Signature:

errorCode: ErrorConstant;

property url

The link to read more about the error online.

Signature:

url: string;

method create

A shorthand way of creating an error message.

Signature:

static create(options?: RemirrorErrorOptions): RemirrorError;

Parameters:

Parameter	Type	Description
options	RemirrorErrorOptions	(Optional)

Returns:

RemirrorError

class RemirrorManager

A class to manage the extensions and prosemirror interactions within the editor.

Signature:

export declare class RemirrorManager<Extension extends AnyExtension> 

Remarks:

The RemirrorManager enables the lifecycle methods of the extensions by calling each method in the distinct phases of the lifecycle.

• onCreate - This happens when the manager is constructed. It calls on the extension which have an onCreate method and allows them to do their work.

For the built in methods, this is when the SchemaExtension creates the Schema and when the TagsExtension combines the tags for the editor instance.

const manager = Manager.create(() => [
  new DocExtension(),
  new TextExtension(),
  new ParagraphExtension(),
])

At this point all the onCreate methods have been called. Including the onCreate for the Schema.

• onView - This is called the framework instance connects the RemirrorManager to the ProseMirror EditorView.

manager.addView(new EditorView(...))
manager.store.commands.insertText('Hello world');.

• [[onStateUpdate]] - This is the method called every time the ProseMirror state changes. Both the extensions and the Framework listen to this event and can provide updates in response.

property destroyed

Returns true if the manager has been destroyed.

Signature:

get destroyed(): boolean;

property document

The document to use for rendering and outputting HTML.

Signature:

get document(): Document;

property extensions

The extensions stored by this manager

Signature:

get extensions(): ReadonlyArray<GetExtensions<Extension>>;

property extensionStore

Provides access to the extension store.

Signature:

get extensionStore(): Remirror.ExtensionStore;

property extensionTags

A shorthand getter for retrieving the tags from the extension manager.

Signature:

get extensionTags(): Readonly<CombinedTags<GetNameUnion<Extension>>>;

property frameworkAttached

Returns true when a framework is attached to the manager.

This can be used to check if it is safe to call manager.output.

Signature:

get frameworkAttached(): boolean;

property marks

Returns the store marks.

Signature:

get marks(): Record<this['~M'], MarkExtensionSpec>;

property mounted

true when the view has been added to the UI layer and the editor is running.

Signature:

get mounted(): boolean;

property nodes

Returns the stored nodes

Signature:

get nodes(): Record<this['~N'], NodeExtensionSpec>;

property output

Retrieve the framework output.

This be undefined if the manager hasn't been provided to a framework yet the manager.

With synchronous frameworks this means that it should only be accessed after the manager has been applied to the editor creation function.

For frameworks like React it is only available when the manager is provided to the Remirror component and after the very first render. This means it is available within the onRef callback.

import React, { useEffect } from 'react';
import { useRemirror, Remirror } from '@remirror/react';

const Editor = () => {
  const { manager } = useRemirror();

  const callback = () => {
    return manager.output; // ✅ This is fine.
  }

  useEffect(() => {
    log(manager.output); // ✅  This is also fine.
  }, []);

  log(manager.output); // ❌ This will be undefined on the first render.

  return <Remirror manager={manager} />
}

Signature:

get output(): FrameworkOutput<Extension> | undefined;

property schema

A shorthand method for retrieving the schema for this extension manager from the data.

Signature:

get schema(): EditorSchema;

property settings

Retrieve the settings used when creating the manager.

Signature:

get settings(): Remirror.ManagerSettings;

property store

Get the extension manager store which is accessible at initialization.

Signature:

get store(): Remirror.ManagerStore<Extension>;

property stringHandlers

The registered string handlers provided by the extensions.

By default this includes html and plainText

Signature:

get stringHandlers(): NamedStringHandlers;

property tr

Shorthand access to the active transaction from the manager. This is the shared transaction available to all commands and should be used when you need to make your commands chainable.

If working with react and setting up your editor as a controlled component then this is the preferred way to run custom commands, otherwise your commands will end up being non-chainable and be overwritten by anything that comes after.

Signature:

get tr(): Transaction;

property view

A shorthand way of retrieving the editor view.

Signature:

get view(): EditorView;

method addHandler

Add a handler to the manager.

Currently the only event that can be listened to is the destroy event.

Signature:

addHandler<Key extends keyof ManagerEvents>(event: Key, cb: ManagerEvents[Key]): Unsubscribe;

Parameters:

Parameter	Type	Description
event	Key
cb	ManagerEvents[Key]

Returns:

Unsubscribe

method addView

Stores the editor view on the manager

Signature:

addView(view: EditorView): this;

Parameters:

Parameter	Type	Description
view	EditorView	the editor view

Returns:

this

method attachFramework

Attach a framework to the manager.

Signature:

attachFramework(framework: BaseFramework<Extension>, updateHandler: (props: StateUpdateLifecycleProps) => void): void;

Parameters:

Parameter	Type	Description
framework	BaseFramework<Extension>
updateHandler	(props: StateUpdateLifecycleProps) => void

Returns:

void

method clone

Make a clone of the manager.

Signature:

clone(): RemirrorManager<Extension>;

Returns:

RemirrorManager<Extension>

method create

Create the manager for your Remirror editor.

Signature:

static create<Extension extends AnyExtension>(extensions: Extension[] | ExtensionTemplate<Extension>, settings?: Remirror.ManagerSettings): RemirrorManager<Extension | BuiltinPreset>;

Parameters:

Parameter	Type	Description
extensions	Extension[] | ExtensionTemplate<Extension>
settings	Remirror.ManagerSettings	(Optional)

Returns:

RemirrorManager<Extension | BuiltinPreset>

method createEmptyDoc

Create an empty document for the editor based on the current schema.

This automatically looks at the supported content for the doc and the available nodes which fulfil that content in order to create a document with only the minimal required content.

This can be used in conjunction with the create state to reset the current value of the editor.

Signature:

createEmptyDoc(): ProsemirrorNode;

Returns:

ProsemirrorNode

method createState

Create the editor state from content passed to this extension manager.

Signature:

createState(props?: CreateEditorStateProps): EditorState;

Parameters:

Parameter	Type	Description
props	CreateEditorStateProps	(Optional)

Returns:

EditorState

method destroy

This method should be called to destroy the manager and remove the view.

Signature:

destroy(): void;

Returns:

void

method getExtension

Get the extension instance matching the provided constructor from the manager.

This will throw an error if non existent.

Signature:

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

Parameters:

Parameter	Type	Description
Constructor	ExtensionConstructor

Returns:

InstanceType<ExtensionConstructor>

method hasExtension

Determines in an extension is present by providing the desired Constructor.

This method can be used as a safer alternative to getExtension which will throw an error if the constructor doesn't exist within the extension created by this extension.

Signature:

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

Parameters:

Parameter	Type	Description
Constructor	ExtensionConstructor

Returns:

boolean

method includes

Check whether the manager includes the names or constructors provided for the preset and extensions.

Returns true if all are included, returns false otherwise.

Signature:

includes(mustIncludeList: Array<AnyExtensionConstructor | string>): boolean;

Parameters:

Parameter	Type	Description
mustIncludeList	Array<AnyExtensionConstructor | string>

Returns:

boolean

method onStateUpdate

This method should be called by the view layer every time the state is updated.

An example usage of this is within the collaboration extension.

Signature:

onStateUpdate(props: Omit<StateUpdateLifecycleProps, 'firstUpdate'>): void;

Parameters:

Parameter	Type	Description
props	Omit<StateUpdateLifecycleProps, 'firstUpdate'>

Returns:

void

method recreate

Recreate the manager with new settings and extensions

Signature:

recreate<ExtraExtension extends AnyExtension>(extensions?: ExtraExtension[], settings?: Remirror.ManagerSettings): RemirrorManager<Extension | ExtraExtension>;

Parameters:

Parameter	Type	Description
extensions	ExtraExtension[]	(Optional)
settings	Remirror.ManagerSettings	(Optional)

Returns:

RemirrorManager<Extension | ExtraExtension>

class SchemaExtension

This is the schema extension which creates the schema and provides extra attributes as defined in the manager or the extension settings.

Signature:

export declare class SchemaExtension extends PlainExtension 

Extends: PlainExtension

Remarks:

The schema is the most important part of the remirror editor. This is the extension responsible for creating it, injecting extra attributes and managing the plugin which is responsible for making sure dynamically created attributes are updated.

In order to add extra attributes the following would work.

import { RemirrorManager } from 'remirror';
import uuid from 'uuid';
import hash from 'made-up-hasher';

const manager = RemirrorManager.create([], {
  extraAttributes: [
    {
      identifiers: 'nodes',
      attributes: {
        awesome: {
          default: 'awesome',
          parseDOM: (domNode) => domNode.getAttribute('data-awesome'),
          toDOM: (attrs) => ([ 'data-awesome', attrs.awesome ])
        },
      },
    },
    { identifiers: ['paragraph'], attributes: { id: { default: () => uuid() } } },
    { identifiers: ['bold'], attributes: { hash: (mark) => hash(JSON.stringify(mark.attrs)) } },
  ],
})

It is an array of identifiers and attributes. Setting the default to a function allows you to set up a dynamic attribute which is updated with the synchronous function that you provide to it.

Builtin Extension

(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(): "schema";

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 createPlugin

This creates the plugin that is used to automatically create the dynamic attributes defined in the extra attributes object.

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 method is responsible for creating, configuring and adding the schema to the editor. Schema is a special type in ProseMirror editors and with remirror it's all just handled for you.

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 SuggestExtension

This extension allows others extension to add the createSuggesters method for adding the prosemirror-suggest functionality to your editor.

Signature:

export declare class SuggestExtension extends PlainExtension<SuggestOptions> 

Extends: PlainExtension<SuggestOptions>

Remarks:

This is an example of adding custom functionality to an extension via the ExtensionParameterMethods.

Builtin Extension

(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(): "suggest";

property onAddCustomHandler

Allow additional Suggesters to be added to the editor. This can be used by React to create hooks.

Signature:

onAddCustomHandler: AddCustomHandler<SuggestOptions>;

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 createExternalPlugins

Add the prosemirror-suggest plugin to the editor.

Signature:

createExternalPlugins(): ProsemirrorPlugin[];

Returns:

ProsemirrorPlugin[]

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 getSuggestMethods

Get some helpful methods from the SuggestPluginState.

Signature:

getSuggestMethods(): Helper<Pick<SuggestState, 'addIgnored' | 'clearIgnored' | 'removeIgnored' | 'ignoreNextExit' | 'setMarkRemoved' | 'findMatchAtPosition' | 'findNextTextSelection' | 'setLastChangeFromAppend'>>;

Returns:

Helper<Pick<SuggestState, 'addIgnored' | 'clearIgnored' | 'removeIgnored' | 'ignoreNextExit' | 'setMarkRemoved' | 'findMatchAtPosition' | 'findNextTextSelection' | 'setLastChangeFromAppend'>>

method getSuggestState

Get the suggest plugin state.

This may be removed at a later time.

Signature:

getSuggestState(state?: EditorState): Helper<SuggestState>;

Parameters:

Parameter	Type	Description
state	EditorState	(Optional)

Returns:

Helper<SuggestState>

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 isSuggesterActive

Check to see whether the provided name is the currently active suggester.

Signature:

isSuggesterActive(name: string | string[]): Helper<boolean>;

Parameters:

Parameter	Type	Description
name	string | string[]	the name of the suggester to include

Returns:

Helper<boolean>

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

Create the addSuggester method and removeSuggester methods to the extension store.

This can be used by extensions to conditionally add suggestion support.

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 TagsExtension

Create the extension tags which are passed into each extensions method to enable dynamically generated rules and commands.

Tags on nodes and marks are automatically added to the schema as groups.

Builtin Extension

Signature:

export declare class TagsExtension extends PlainExtension 

Extends: PlainExtension

(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(): "tags";

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

Create the tags which are used to identify extension with particular behavioral traits.

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 UploadExtension

UploadExtension handle the file upload process.

Signature:

export declare class UploadExtension extends PlainExtension<DecorationsOptions> 

Extends: PlainExtension<DecorationsOptions>

(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(): "upload";

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 createExternalPlugins

Create the extension plugin for inserting decorations into the editor.

Signature:

createExternalPlugins(): ProsemirrorPlugin[];

Returns:

ProsemirrorPlugin[]

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

enum ErrorConstant

The error codes for errors used throughout the codebase.

Signature:

export declare enum ErrorConstant 

Enumeration Members:

Member	Value	Description
CORE_HELPERS	"RMR0004"	An error occurred in a function called from the @remirror/core-helpers library.
CUSTOM	"RMR0003"	This is a custom error possibly thrown by an external library.
DUPLICATE_COMMAND_NAMES	"RMR0016"	Command method names must be unique within the editor.
DUPLICATE_HELPER_NAMES	"RMR0017"	Helper method names must be unique within the editor.
EXTENSION	"RMR0100"	An error occurred within an extension.
EXTENSION_EXTRA_ATTRIBUTES	"RMR0102"	Extra attributes must either be a string or an object.
EXTENSION_SPEC	"RMR0101"	The spec was defined without calling the defaults, parse or dom methods.
HELPERS_CALLED_IN_OUTER_SCOPE	"RMR0013"	The helpers method which is passed into the ``create*` method should only be called within returned method since it relies on an active view (not present in the outer scope).
I18N_CONTEXT	"RMR0300"	There is something wrong with your i18n setup.
INTERNAL	"RMR0006"	This is an error which should not occur and is internal to the remirror codebase.
INVALID_COMMAND_ARGUMENTS	"RMR0002"	The arguments passed to the command method were invalid.
INVALID_CONTENT	"RMR0021"	The content provided to the editor is not supported.
INVALID_EXTENSION	"RMR0019"	The provided extension is invalid.
INVALID_GET_EXTENSION	"RMR0010"	The user requested an invalid extension from the getExtensions method. Please check the createExtensions return method is returning an extension with the defined constructor.
INVALID_MANAGER_ARGUMENTS	"RMR0011"	Invalid value passed into Manager constructor. Only and Extensions are supported.
INVALID_MANAGER_EXTENSION	"RMR0014"	The user requested an invalid extension from the manager.
INVALID_NAME	"RMR0050"	An invalid name was used for the extension.
INVALID_SET_EXTENSION_OPTIONS	"RMR0103"	A call to extension.setOptions was made with invalid keys.
MANAGER_PHASE_ERROR	"RMR0008"	Called a method event at the wrong time. Please make sure getter functions are only called with within the scope of the returned functions. They should not be called in the outer scope of your method.
MISSING_REQUIRED_EXTENSION	"RMR0007"	You're editor is missing a required extension.
MUTATION	"RMR0005"	You have attempted to change a value that shouldn't be changed.
NON_CHAINABLE_COMMAND	"RMR0018"	Attempted to chain a non chainable command.
REACT_COMPONENTS	"RMR0206"	An error occurred when rendering the react components.
REACT_CONTROLLED	"RMR0203"	There is a problem with your controlled editor setup.
REACT_EDITOR_VIEW	"RMR0202"	A problem occurred adding the editor view to the dom.
REACT_GET_CONTEXT	"RMR0205"	You attempted to call getContext provided by the useRemirror prop during the first render of the editor. This is not possible and should only be after the editor first mounts.
REACT_GET_ROOT_PROPS	"RMR0201"	getRootProps has been called MULTIPLE times. It should only be called ONCE during render.
REACT_HOOKS	"RMR0207"	An error occurred within a remirror hook.
REACT_NODE_VIEW	"RMR0204"	Something went wrong with your custom ReactNodeView Component.
REACT_PROVIDER_CONTEXT	"RMR0200"	useRemirror was called outside of the remirror context. It can only be used within an active remirror context created by the <Remirror />.
SCHEMA	"RMR0012"	There is a problem with the schema or you are trying to access a node / mark that doesn't exists.
UNKNOWN	"RMR0001"	An error happened but we're not quite sure why.

Remarks:

They can be removed but should never be changed since they are also used to reference the errors within search engines.

enum ExtensionPriority

The priority of extension which determines what order it is loaded into the editor.

Signature:

export declare enum ExtensionPriority 

Enumeration Members:

Member	Value	Description
Critical	1000000	Use this **never** 😉
Default	100	This is the **default** priority for most extensions.
High	10000	The highest priority level that should be used in a publicly shared extension (to allow some wiggle room for downstream users overriding priorities).
Highest	100000	A, like super duper, high priority.
Low	10	This is the **default** priority for builtin behavior changing extensions.
Lowest	0	This is useful for extensions that exist to be overridden.
Medium	1000	A medium priority extension. This is typically all you need to take priority over built in extensions.

Remarks:

Higher priority extension (higher numberic value) will ensure the extension has a higher preference in your editor. In the case where you load two identical extensions into your editor (same name, or same constructor), the extension with the higher priority is the one that will be loaded.

The higher the numeric value the higher the priority. The priority can also be passed a number but naming things in this enum should help provide some context to the numbers.

By default all extensions are created with a ExtensionPriority.Default.

enum ManagerPhase

Identifies the stage the extension manager is at.

Signature:

export declare enum ManagerPhase 

Enumeration Members:

Member	Value	Description
Create	1	When the extension manager is being created and the onCreate methods are being called. This happens within the RemirrorManager constructor.
Destroy	4	The manager is being destroyed.
EditorView	2	When the view is being added and all onView lifecycle methods are being called. The view is typically added before the dom is ready for it.
None	0	The initial value for the manager phase.
Runtime	3	The phases of creating this manager are completed and onTransaction is called every time the state updates.

enum NamedShortcut

The named shortcuts that can be used to update multiple commands.

Signature:

export declare enum NamedShortcut 

Enumeration Members:

Member	Value	Description
AddComment	"|comment|"
AddFootnote	"|footnote|"
Bold	"|bold|"
BulletList	"|bullet|"
CenterAlignment	"|center-align|"
ClearFormatting	"|clear|"
Code	"|code|"
Codeblock	"|codeblock|"
ContextMenu	"|context-menu|"
Copy	"|copy|"
Cut	"|cut|"
DecreaseFontSize	"|dec-font-size|"
DecreaseIndent	"|dedent|"
Divider	"|divider|"
Find	"|find|"
FindBackwards	"|find-backwards|"
FindReplace	"|find-replace|"
Format	"|format|"	A keyboard shortcut to trigger formatting the current block.
H1	"|h1|"
H2	"|h2|"
H3	"|h3|"
H4	"|h4|"
H5	"|h5|"
H6	"|h6|"
IncreaseFontSize	"|inc-font-size|"
IncreaseIndent	"|indent|"
InsertLink	"|link|"
Italic	"|italic|"
JustifyAlignment	"|justify-align|"
LeftAlignment	"|left-align|"
OrderedList	"|number|"
Paragraph	"|paragraph|"
Paste	"|paste|"
PastePlain	"|paste-plain|"
Quote	"|quote|"
Redo	"|redo|"
RightAlignment	"|right-align|"
SelectAll	"|select-all|"
Shortcuts	"|shortcuts|"
Strike	"|strike|"
Subscript	"|sub|"
Superscript	"|sup|"
TaskList	"|task|"
Underline	"|underline|"
Undo	"|undo|"

function applyClonedTransaction()

Apply the steps of a cloned transaction to the original transaction tr.

Signature:

export declare function applyClonedTransaction(props: ApplyClonedTransactionProps): void;

Parameters:

Parameter	Type	Description
props	ApplyClonedTransactionProps

Returns:

void

function areSchemasCompatible()

Check that the nodes and marks present on schemaA are also present on schemaB.

Signature:

export declare function areSchemasCompatible(schemaA: EditorSchema, schemaB: EditorSchema): boolean;

Parameters:

Parameter	Type	Description
schemaA	EditorSchema
schemaB	EditorSchema

Returns:

boolean

function areStatesEqual()

Check if two states are equal.

Signature:

export declare function areStatesEqual(stateA: EditorState, stateB: EditorState, options?: IsStateEqualOptions): boolean;

Parameters:

Parameter	Type	Description
stateA	EditorState
stateB	EditorState
options	IsStateEqualOptions	(Optional)

Returns:

boolean

function assert()

Assert the value is truthy. Good for defensive programming, especially after enabling noUncheckedIndexedAccess in the tsconfig compilerOptions.

Signature:

export declare function assert(testValue: unknown, message?: string): asserts testValue;

Parameters:

Parameter	Type	Description
testValue	unknown
message	string	(Optional)

Returns:

asserts testValue

function assertGet()

Get the key from a given value. Throw an error if the referenced property is undefined.

Signature:

export declare function assertGet<Value extends object, Key extends keyof Value>(value: Value, key: Key, message?: string): Value[Key];

Parameters:

Parameter	Type	Description
value	Value
key	Key
message	string	(Optional)

Returns:

Value[Key]

function atDocEnd()

Checks whether the cursor is at the end of the state.doc

Signature:

export declare function atDocEnd(state: EditorState): boolean;

Parameters:

Parameter	Type	Description
state	EditorState	the editor state

Returns:

boolean

function atDocStart()

Checks whether the cursor is at the beginning of the state.doc

Signature:

export declare function atDocStart(state: EditorState): boolean;

Parameters:

Parameter	Type	Description
state	EditorState	the editor state

Returns:

boolean

function builtinPreset()

Provides all the builtin extensions to the editor.

Signature:

export declare function builtinPreset(options?: GetStaticAndDynamic<BuiltinOptions>): BuiltinPreset[];

Parameters:

Parameter	Type	Description
options	GetStaticAndDynamic<BuiltinOptions>	(Optional)

Returns:

BuiltinPreset[]

Remarks:

This is used automatically and (at the time of writing) can't be removed from the editor. If you feel that there's a compelling reason to override these extensions feel free to create a [discussion here](https://github.com/remirror/remirror/discussions/category\_choices) and it can be addressed.

Builtin Extension

The order of these extension are important.

• [[TagsExtension]] is places first because it provides tagging which is used by the schema extension. - [[SchemeExtension]] goes next because it's super important to the editor functionality and needs to run before everything else which might depend on it.

function callIfDefined()

Calls a function if defined and provides compile time type checking for the passed in parameters.

Signature:

export declare function callIfDefined<Method extends AnyFunction>(fn: Nullable<Method>, ...args: Parameters<Method>): void;

Parameters:

Parameter	Type	Description
fn	Nullable<Method>	the function to call if it exists
args	Parameters<Method>	the rest of the parameters with types

Returns:

void

function canInsertNode()

Check if the specified type (NodeType) can be inserted at the current selection point.

Signature:

export declare function canInsertNode(state: EditorState, type: NodeType): boolean;

Parameters:

Parameter	Type	Description
state	EditorState	the editor state
type	NodeType	the node type

Returns:

boolean

function capitalize()

Capitalizes a string value.

Signature:

export declare function capitalize(string: string): string;

Parameters:

Parameter	Type	Description
string	string

Returns:

string

function Cast()

Type cast an argument. If no type is provided it will default to any.

Signature:

export declare function Cast<Type = any>(value: unknown): Type;

Parameters:

Parameter	Type	Description
value	unknown

Returns:

Type

function chainKeyBindingCommands()

Chains together keybindings, allowing for the same key binding to be used across multiple extensions without overriding behavior.

Signature:

export declare function chainKeyBindingCommands(...commands: KeyBindingCommandFunction[]): KeyBindingCommandFunction;

Parameters:

Parameter	Type	Description
commands	KeyBindingCommandFunction[]

Returns:

KeyBindingCommandFunction

Remarks:

When next is called it hands over full control of the keybindings to the function that invokes it.

function clamp()

Clamps the value to the provided range.

Signature:

export declare function clamp({ min, max, value }: ClampProps): number;

Parameters:

Parameter	Type	Description
{ min, max, value }	ClampProps

Returns:

number

function cleanupOS()

A utility function to clean up the Operating System name.

Signature:

export declare function cleanupOS(os: string, pattern?: string, label?: string): string;

Parameters:

Parameter	Type	Description
os	string	the OS name to clean up.
pattern	string	(Optional) a RegExp pattern matching the OS name.
label	string	(Optional) a label for the OS.

Returns:

string

a cleaned up Operating System name

function clone()

Clones a plain object using object spread notation

Signature:

export declare function clone<Type extends object>(value: Type): Type;

Parameters:

Parameter	Type	Description
value	Type	the value to check

Returns:

Type

function cloneTransaction()

Creates a new transaction object from a given transaction. This is useful when applying changes to a transaction, that you may want to rollback.

function() applyUpdateIfValid(state: EditorState) {
  const tr = cloneTransaction(state.tr);

  tr.insertText('hello');

  if (!checkValid(tr)) {
    return;
  }

  applyClonedTransaction({ clone: tr, tr: state.tr });
}

The above example applies a transaction to the cloned transaction then checks to see if the changes are still valid and if they are applies the mutative changes to the original state transaction.

Signature:

export declare function cloneTransaction(tr: Transaction): Transaction;

Parameters:

Parameter	Type	Description
tr	Transaction	the prosemirror transaction

Returns:

Transaction

function command()

A decorator which can be applied to top level methods on an extension to identify them as commands. This can be used as a replacement for the createCommands method.

If you prefer not to use decorators, then you can continue using createCommands. Internally the decorators are being used as they are better for documentation purposes.

For automated type inference methods that use this decorator must implement the following type signature.

import { CommandFunction } from '@remirror/core';

type Signature = (...args: any[]) => CommandFunction;

The following is an example of how this can be used within your extension.

import { command, CommandFunction } from '@remirror/core';

class MyExtension {
  get name() {
    return 'my';
  }

  @command()
  myCommand(text: string): CommandFunction {
    return ({ tr, dispatch }) => {
      dispatch?.(tr.insertText('my command ' + text));
      return true;
    }
  }
}

The above command can now be used within your editor instance.

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

const MyEditorButton = () => {
  const { commands } = useRemirrorContext();

  return <button onClick={() => commands.myCommand('hello')}>My Button</button>
}

Method Decorator

Signature:

export declare function command<Extension extends AnyExtension>(options?: ChainableCommandDecoratorOptions<Required<GetOptions<Extension>>>): ExtensionDecorator<Extension, CommandFunction, void>;

Parameters:

Parameter	Type	Description
options	ChainableCommandDecoratorOptions<Required<GetOptions<Extension>>>	(Optional)

Returns:

ExtensionDecorator<Extension, CommandFunction, void>

function command()

Signature:

export declare function command<Extension extends AnyExtension>(options: NonChainableCommandDecoratorOptions<Required<GetOptions<Extension>>>): ExtensionDecorator<Extension, NonChainableCommandFunction, void>;

Parameters:

Parameter	Type	Description
options	NonChainableCommandDecoratorOptions<Required<GetOptions<Extension>>>

Returns:

ExtensionDecorator<Extension, NonChainableCommandFunction, void>

function composeTransactionSteps()

Returns a new transaction by combining all steps of the passed transactions onto the previous state

Signature:

export declare function composeTransactionSteps(transactions: readonly Transaction[], oldState: EditorState): Transaction;

Parameters:

Parameter	Type	Description
transactions	readonly Transaction[]
oldState	EditorState

Returns:

Transaction

function containsAttributes()

Determines if a Node or Mark contains the given attributes in its attributes set

Signature:

export declare function containsAttributes(nodeOrMark: ProsemirrorNode | Mark, attrs: ProsemirrorAttributes): boolean;

Parameters:

Parameter	Type	Description
nodeOrMark	ProsemirrorNode | Mark	The Node or Mark to check
attrs	ProsemirrorAttributes	The set of attributes it must contain

Returns:

boolean

function containsNodesOfType()

Returns true if a given node contains nodes of a given nodeType.

Signature:

export declare function containsNodesOfType(props: ContainsProps): boolean;

Parameters:

Parameter	Type	Description
props	ContainsProps

Returns:

boolean

Remarks:

if (containsNodesOfType({ node: state.doc, type: schema.nodes.listItem })) {
  log('contained')
}

function convertPixelsToDomUnit()

Convert the received font size to a valid unit

Signature:

export declare function convertPixelsToDomUnit(size: string, to: DomSizeUnit, element?: Element | null): number;

Parameters:

Parameter	Type	Description
size	string
to	DomSizeUnit
element	Element | null	(Optional)

Returns:

number

function createDocumentNode()

Creates a document node from the passed in content and schema.

This supports a primitive form of error handling. When an error occurs, the onError handler will be called along with the error produced by the Schema and it is up to you as a developer to decide how to transform the invalid content into valid content.

Please note that the onError is only called when the content is a JSON object. It is not called for a string, the ProsemirrorNode or the EditorState. The reason for this is that the string requires a stringHandler which is defined by the developer and transforms the content. That is the point that error's should be handled. The editor state and the ProsemirrorNode are similar. They need to be created by the developer and as a result, the errors should be handled at the point of creation rather than when the document is being applied to the editor.

Signature:

export declare function createDocumentNode(props: CreateDocumentNodeProps): ProsemirrorNode;

Parameters:

Parameter	Type	Description
props	CreateDocumentNodeProps

Returns:

ProsemirrorNode

function cx()

Signature:

export declare function cx(...classes: ClassName[]): string;

Parameters:

Parameter	Type	Description
classes	ClassName[]

Returns:

string

function deepMerge()

A deep merge which only merges plain objects and Arrays. It clones the object before the merge so will not mutate any of the passed in values.

To completely remove a key you can use the Merge helper class which replaces it's key with a completely new object

Signature:

export declare function deepMerge<Type = any>(...objects: Array<object | unknown[]>): Type;

Parameters:

Parameter	Type	Description
objects	Array<object | unknown[]>

Returns:

Type

function delayedCommand()

Warning: This API is now obsolete.

use [[DelayedCommand]] instead.

Add tentative support for delayed commands in the editor.

Delayed commands are commands that run an immediate action, like adding a tracker to a position in the document. Once the promise that is provided is returned the onDone parameter is run with the document in the current state. The tracker that was added can now be used to insert content, delete content or replace content.

This is still being worked on and the API is subject to changes in structure going forward.

Signature:

export declare function delayedCommand<Value>({ immediate, promise, onDone, onFail, }: DelayedCommandProps<Value>): CommandFunction;

Parameters:

Parameter	Type	Description
{ immediate, promise, onDone, onFail, }	DelayedCommandProps<Value>

Returns:

CommandFunction

function endPositionOfParent()

Get the end position of the parent of the current resolve position

Signature:

export declare function endPositionOfParent($pos: ResolvedPos): number;

Parameters:

Parameter	Type	Description
$pos	ResolvedPos	the resolved ProseMirror position

Returns:

number

function entries()

A typesafe implementation of Object.entries()

Taken from https://github.com/biggyspender/ts-entries/blob/master/src/ts-entries.ts

Signature:

export declare function entries<Type extends object, Key extends Extract<keyof Type, string>, Value extends Type[Key], Entry extends [Key, Value]>(value: Type): Entry[];

Parameters:

Parameter	Type	Description
value	Type

Returns:

Entry[]

function extension()

A decorator for the remirror extension.

This adds static properties to the extension constructor.

Signature:

export declare function extension<Options extends Shape = EmptyShape>(options: ExtensionDecoratorOptions<Options>): <Type extends AnyExtensionConstructor>(ReadonlyConstructor: Type, context?: ClassDecoratorContext<Type> | undefined) => Type;

Parameters:

Parameter	Type	Description
options	ExtensionDecoratorOptions<Options>

Returns:

<Type extends AnyExtensionConstructor>(ReadonlyConstructor: Type, context?: ClassDecoratorContext<Type> | undefined) => Type

function extractPixelSize()

Extract the pixel value from a dimension string or CSS function.

Supports the CSS functions min, max and clamp even when nested.

Does not support percentage units or the calc function.

Adapted from https://github.com/PacoteJS/pacote/blob/20cb1e3a999ed47a8d52b03b750290cf36b8e270/packages/pixels/src/index.ts

Signature:

export declare function extractPixelSize(size: string, element?: Element | null): number;

Parameters:

Parameter	Type	Description
size	string
element	Element | null	(Optional)

Returns:

number

function findChildren()

Iterates over descendants of a given node, returning child nodes predicate returns truthy for.

Signature:

export declare function findChildren(props: FindChildrenProps): NodeWithPosition[];

Parameters:

Parameter	Type	Description
props	FindChildrenProps

Returns:

NodeWithPosition[]

Remarks:

It doesn't descend into a node when descend argument is false (defaults to true).

const textNodes = findChildren({
  node: state.doc,
  predicate: child => child.isText,
  descend: false
});

function findChildrenByAttribute()

Iterates over descendants of a given node, returning child nodes predicate returns truthy for.

Signature:

export declare function findChildrenByAttribute(props: FindChildrenByAttrProps): NodeWithPosition[];

Parameters:

Parameter	Type	Description
props	FindChildrenByAttrProps

Returns:

NodeWithPosition[]

Remarks:

It doesn't descend into a node when descend argument is false (defaults to true).

The following will match any node with an id of any value (as long as the attribute exists) and a colspan of 2.

const mergedCells = findChildrenByAttribute({
  node: table,
  attrs: { colspan: 2, id: (_, exists) => exists }
});

function findChildrenByMark()

Iterates over descendants of a given node, returning child nodes that have a mark of a given markType.

Signature:

export declare function findChildrenByMark(paramter: FindChildrenByMarkProps): NodeWithPosition[];

Parameters:

Parameter	Type	Description
paramter	FindChildrenByMarkProps

Returns:

NodeWithPosition[]

Remarks:

It doesn't descend into a node when descend argument is false (defaults to true).

const nodes = findChildrenByMark({ node: state.doc, type: schema.marks.strong });

function findChildrenByNode()

Iterates over descendants of a given node, returning child nodes of a given nodeType.

Signature:

export declare function findChildrenByNode(props: FindChildrenByNodeProps): NodeWithPosition[];

Parameters:

Parameter	Type	Description
props	FindChildrenByNodeProps

Returns:

NodeWithPosition[]

Remarks:

It doesn't descend into a node when descend argument is false (defaults to true).

const cells = findChildrenByNode({ node: state.doc, type: state.schema.nodes.tableCell });

function findElementAtPosition()

Returns DOM reference of a node at a given position.

Signature:

export declare function findElementAtPosition(position: number, view: EditorView): HTMLElement;

Parameters:

Parameter	Type	Description
position	number	the prosemirror position
view	EditorView	the editor view

Returns:

HTMLElement

Remarks:

If the node type is of type TEXT_NODE it will return the reference of the parent node.

A simple use case

const element = findElementAtPosition($from.pos, view);

function findMatches()

Finds all the regex matches for a string

Signature:

export declare function findMatches(text: string, regexp: RegExp, runWhile?: (match: RegExpExecArray | null) => boolean): RegExpExecArray[];

Parameters:

Parameter	Type	Description
text	string	the text to check against
regexp	RegExp	the regex (which should include a 'g' flag)
runWhile	(match: RegExpExecArray | null) => boolean	(Optional)

Returns:

RegExpExecArray[]

function findNodeAtPosition()

Finds the node at the resolved position.

Signature:

export declare function findNodeAtPosition($pos: ResolvedPos): FindProsemirrorNodeResult;

Parameters:

Parameter	Type	Description
$pos	ResolvedPos	the resolve position in the document

Returns:

FindProsemirrorNodeResult

function findNodeAtSelection()

Finds the node at the passed selection.

Signature:

export declare function findNodeAtSelection(selection: Selection): FindProsemirrorNodeResult;

Parameters:

Parameter	Type	Description
selection	Selection

Returns:

FindProsemirrorNodeResult

function findParentNode()

Iterates over parent nodes, returning the closest node and its start position that the predicate returns truthy for. start points to the start position of the node, pos points directly before the node.

const predicate = node => node.type === schema.nodes.blockquote;
const parent = findParentNode({ predicate, selection });

Signature:

export declare function findParentNode(props: FindParentNodeProps): FindProsemirrorNodeResult | undefined;

Parameters:

Parameter	Type	Description
props	FindParentNodeProps

Returns:

FindProsemirrorNodeResult | undefined

function findParentNodeOfType()

Iterates over parent nodes, returning closest node of a given nodeType. start points to the start position of the node, pos points directly before the node.

```ts const parent = findParentNodeOfType({types: schema.nodes.paragraph, selection}); ```

Signature:

export declare function findParentNodeOfType(props: FindParentNodeOfTypeProps): FindProsemirrorNodeResult | undefined;

Parameters:

Parameter	Type	Description
props	FindParentNodeOfTypeProps

Returns:

FindProsemirrorNodeResult | undefined

function findPositionOfNodeAfter()

Warning: This API is now obsolete.

This util is hard to use and not that useful

Returns the position of the node after the current position, selection or state.

const pos = findPositionOfNodeBefore(tr.selection);

Signature:

export declare function findPositionOfNodeAfter(value: Selection | ResolvedPos | EditorState): FindProsemirrorNodeResult | undefined;

Parameters:

Parameter	Type	Description
value	Selection | ResolvedPos | EditorState

Returns:

FindProsemirrorNodeResult | undefined

function findPositionOfNodeBefore()

Warning: This API is now obsolete.

This util is hard to use and not that useful

Returns position of the previous node.

const pos = findPositionOfNodeBefore(tr.selection);

Signature:

export declare function findPositionOfNodeBefore(value: Selection | ResolvedPos | EditorState | Transaction): FindProsemirrorNodeResult | undefined;

Parameters:

Parameter	Type	Description
value	Selection | ResolvedPos | EditorState | Transaction

Returns:

FindProsemirrorNodeResult | undefined

function findSelectedNodeOfType()

Returns a node of a given nodeType if it is selected. start points to the start position of the node, pos points directly before the node.

const { extension, inlineExtension, bodiedExtension } = schema.nodes;

const selectedNode = findSelectedNodeOfType({
  types: [extension, inlineExtension, bodiedExtension],
  selection,
});

Signature:

export declare function findSelectedNodeOfType(props: FindSelectedNodeOfTypeProps): FindProsemirrorNodeResult | undefined;

Parameters:

Parameter	Type	Description
props	FindSelectedNodeOfTypeProps

Returns:

FindProsemirrorNodeResult | undefined

function findUploadPlaceholderPayload()

Signature:

export declare function findUploadPlaceholderPayload(state: EditorState, id: string): any | undefined;

Parameters:

Parameter	Type	Description
state	EditorState
id	string

Returns:

any | undefined

function findUploadPlaceholderPos()

Try to find the position of the placeholder in the document based on the upload placeholder id

Signature:

export declare function findUploadPlaceholderPos(state: EditorState, id: string): number | undefined;

Parameters:

Parameter	Type	Description
state	EditorState
id	string

Returns:

number | undefined

Remarks:

This function will first try to find the position based on the decoration set. However, in some cases (e.g. ReplaceStep) the decoration will not be available. In that case, it will then try to find every node in the document recursively, which is much slower than the decoration set way in a large document.

function flattenArray()

Flattens an array.

Signature:

export declare function flattenArray<Type>(array: any[]): Type[];

Parameters:

Parameter	Type	Description
array	any[]

Returns:

Type[]

function format()

Trim and conditionally capitalize string values.

Signature:

export declare function format(value: string): string;

Parameters:

Parameter	Type	Description
value	string

Returns:

string

function freeze()

A freeze method for objects that only runs in development. Helps prevent code that shouldn't be mutated from being mutated during development.

Signature:

export declare function freeze<Target extends object>(target: Target, options?: FreezeOptions): Readonly<Target>;

Parameters:

Parameter	Type	Description
target	Target
options	FreezeOptions	(Optional)

Returns:

Readonly<Target>

Remarks:

This function passes the value back unchanged when in a production environment. It's purpose is to help prevent bad practice while developing by avoiding mutation of values that shouldn't be mutated.

function get()

Get a property from an object or array by a string path or an array path.

Signature:

export declare function get<Return>(root: Shape, path: string | string[], defaultValue?: unknown): Return;

Parameters:

Parameter	Type	Description
root	Shape
path	string | string[]	path to property
defaultValue	unknown	(Optional)

Returns:

Return

function getActiveNode()

Get node of a provided type with the provided attributes if it exists as a parent. Returns positional data for the node that was found.

Signature:

export declare function getActiveNode(props: GetActiveAttrsProps): FindProsemirrorNodeResult | undefined;

Parameters:

Parameter	Type	Description
props	GetActiveAttrsProps

Returns:

FindProsemirrorNodeResult | undefined

function getChangedNodeRanges()

Get all the changed node ranges for a provided transaction.

Signature:

export declare function getChangedNodeRanges(tr: Transaction, StepTypes?: Array<AnyConstructor<Step>>): NodeRange[];

Parameters:

Parameter	Type	Description
tr	Transaction	the transaction received with updates applied.
StepTypes	Array<AnyConstructor<Step>>	(Optional) the valid Step Constructors. Set to an empty array to accept all Steps.

Returns:

NodeRange[]

function getChangedNodes()

Get all the changed nodes from the provided transaction.

The following example will give us all the text nodes in the provided transaction.

import { getChangedNodes } from 'remirror/core';

const changedTextNodes = getChangeNodes(tr, { descend: true, predicate: (node) => node.isText });

Signature:

export declare function getChangedNodes(tr: Transaction, options?: GetChangedNodesOptions): NodeWithPosition[];

Parameters:

Parameter	Type	Description
tr	Transaction
options	GetChangedNodesOptions	(Optional)

Returns:

NodeWithPosition[]

function getChangedRanges()

Get all the ranges of changes for the provided transaction.

This can be used to gather specific parts of the document which require decorations to be recalculated or where nodes should be updated.

This is adapted from the answer [here](https://discuss.prosemirror.net/t/find-new-node-instances-and-track-them/96/7)

Signature:

export declare function getChangedRanges(tr: Transaction, StepTypes?: Array<AnyConstructor<Step>>): ChangedRange[];

Parameters:

Parameter	Type	Description
tr	Transaction	the transaction received with updates applied.
StepTypes	Array<AnyConstructor<Step>>	(Optional) the valid Step Constructors. Set to an empty array to accept all Steps.

Returns:

ChangedRange[]

function getCursor()

Retrieve the current position of the cursor

Signature:

export declare function getCursor(selection: Selection): ResolvedPos | null | undefined;

Parameters:

Parameter	Type	Description
selection	Selection	the editor selection

Returns:

ResolvedPos | null | undefined

a resolved position only when the selection is a text selection

function getDefaultBlockNode()

Get the default block node from the schema.

Signature:

export declare function getDefaultBlockNode(schema: EditorSchema): NodeType;

Parameters:

Parameter	Type	Description
schema	EditorSchema

Returns:

NodeType

function getDefaultDocNode()

Get the default doc node for a given schema.

Signature:

export declare function getDefaultDocNode(schema: EditorSchema): ProsemirrorNode | undefined;

Parameters:

Parameter	Type	Description
schema	EditorSchema

Returns:

ProsemirrorNode | undefined

function getDocRange()

Get the full range of the selectable content in the ProseMirror doc.

Signature:

export declare function getDocRange(doc: ProsemirrorNode): FromToProps;

Parameters:

Parameter	Type	Description
doc	ProsemirrorNode

Returns:

FromToProps

function getFontSize()

Signature:

export declare function getFontSize(element?: Element | null): string;

Parameters:

Parameter	Type	Description
element	Element | null	(Optional)

Returns:

string

function getInvalidContent()

Get the invalid parameter which is passed to the onError handler.

Signature:

export declare function getInvalidContent<Extra extends object>({ json, schema, ...extra }: GetInvalidContentProps<Extra>): GetInvalidContentReturn<Extra>;

Parameters:

Parameter	Type	Description
{ json, schema, ...extra }	GetInvalidContentProps<Extra>

Returns:

GetInvalidContentReturn<Extra>

function getLazyArray()

Helper for getting an array from a function or array.

Signature:

export declare function getLazyArray<Type>(value: Type[] | (() => Type[])): Type[];

Parameters:

Parameter	Type	Description
value	Type[] | (() => Type[])

Returns:

Type[]

function getMarkAttributes()

Retrieve the attributes for a mark.

Signature:

export declare function getMarkAttributes(trState: EditorState | Transaction, type: MarkType): ProsemirrorAttributes | false;

Parameters:

Parameter	Type	Description
trState	EditorState | Transaction	the editor state or a transaction
type	MarkType	the mark type

Returns:

ProsemirrorAttributes | false

function getMarkRange()

Retrieve the start and end position of a mark. The $pos value should be calculated via tr.doc.resolve(number).

Signature:

export declare function getMarkRange($pos: ResolvedPos, type: string | MarkType, $end?: ResolvedPos): GetMarkRange | undefined;

Parameters:

Parameter	Type	Description
$pos	ResolvedPos	the resolved ProseMirror position
type	string | MarkType	the mark type
$end	ResolvedPos	(Optional) the end position to search until. When this is provided the mark will be checked for all point up until the $end. The first mark within the range will be returned. To find all marks within a selection use [[getMarkRanges]].

Returns:

GetMarkRange | undefined

Remarks:

function getMarkRanges()

Get all the ranges which contain marks for the provided selection.

Signature:

export declare function getMarkRanges(selection: Selection, type: string | MarkType): GetMarkRange[];

Parameters:

Parameter	Type	Description
selection	Selection
type	string | MarkType

Returns:

GetMarkRange[]

function getMarkType()

Get the mark type from a potential string value.

Signature:

export declare function getMarkType(type: string | MarkType, schema: EditorSchema): MarkType;

Parameters:

Parameter	Type	Description
type	string | MarkType
schema	EditorSchema

Returns:

MarkType

function getMatchString()

Get matching string from a list or single value

Signature:

export declare function getMatchString(match: string | string[], index?: number): string;

Parameters:

Parameter	Type	Description
match	string | string[]	the match(es)
index	number	(Optional) the zero-index point from which to start

Returns:

string

Remarks:

Get attrs can be called with a direct match string or array of string matches. This method should be used to retrieve the required string.

The index of the matched array used defaults to 0 but can be updated via the second parameter.

function getNodeType()

Get the node type from a potential string value.

Signature:

export declare function getNodeType(type: string | NodeType, schema: EditorSchema): NodeType;

Parameters:

Parameter	Type	Description
type	string | NodeType
schema	EditorSchema

Returns:

NodeType

function getRemirrorJSON()

A wrapper around state.doc.toJSON which returns the state as a RemirrorJSON object.

Signature:

export declare function getRemirrorJSON(content: EditorState | ProsemirrorNode): RemirrorJSON;

Parameters:

Parameter	Type	Description
content	EditorState | ProsemirrorNode

Returns:

RemirrorJSON

function getSelectedGroup()

Takes an empty selection and expands it out to the nearest group not matching the excluded characters.

Signature:

export declare function getSelectedGroup(state: EditorState | Transaction, exclude: RegExp): GetSelectedGroup | undefined;

Parameters:

Parameter	Type	Description
state	EditorState | Transaction	the editor state or a transaction
exclude	RegExp	the regex pattern to exclude

Returns:

GetSelectedGroup | undefined

false if not a text selection or if no expansion available

Remarks:

Can be used to find the nearest selected word. See getSelectedWord()

function getSelectedWord()

Retrieves the nearest space separated word from the current selection.

Signature:

export declare function getSelectedWord(state: EditorState | Transaction): GetSelectedGroup | undefined;

Parameters:

Parameter	Type	Description
state	EditorState | Transaction	the editor state or transaction.

Returns:

GetSelectedGroup | undefined

Remarks:

This always expands outward so that given: The tw<start>o words<end> The selection would become The <start>two words<end>

In other words it expands until it meets an invalid character.

function getShortcutSymbols()

Convert a keyboard shortcut into symbols which and keys.

Signature:

export declare function getShortcutSymbols(shortcut: string): KeyboardSymbol[];

Parameters:

Parameter	Type	Description
shortcut	string

Returns:

KeyboardSymbol[]

function getStyle()

Get the styles for a given property of an element.

Signature:

export declare function getStyle(element: HTMLElement, property: KebabCase<StringKey<CSSStyleDeclaration>>): string;

Parameters:

Parameter	Type	Description
element	HTMLElement
property	KebabCase<StringKey<CSSStyleDeclaration>>

Returns:

string

function getTextContentFromSlice()

Retrieves the text content from a slice

Signature:

export declare function getTextContentFromSlice(slice: Slice): string;

Parameters:

Parameter	Type	Description
slice	Slice	the prosemirror slice

Returns:

string

Remarks:

A utility that's useful for pulling text content from a slice which is usually created via selection.content()

function getTextSelection()

Get the nearest valid selection to the provided selection parameter.

Signature:

export declare function getTextSelection(selection: PrimitiveSelection, doc: ProsemirrorNode): Selection;

Parameters:

Parameter	Type	Description
selection	PrimitiveSelection
doc	ProsemirrorNode

Returns:

Selection

function hasOwnProperty()

Safe implementation of hasOwnProperty with typechecking.

Signature:

export declare function hasOwnProperty<Obj extends object, Property extends string | number | symbol>(object_: Obj, key: Property): object_ is Property extends keyof Obj ? Obj : Obj & {
    Key: unknown;
};

Parameters:

Parameter	Type	Description
object_	Obj
key	Property	the property to check

Returns:

object_ is Property extends keyof Obj ? Obj : Obj & { Key: unknown; }

Remarks:

See https://eslint.org/docs/rules/no-prototype-builtins

function hasTransactionChanged()

Check to see if a transaction has changed either the document or the current selection.

Signature:

export declare function hasTransactionChanged(tr: Transaction): boolean;

Parameters:

Parameter	Type	Description
tr	Transaction	the transaction to check

Returns:

boolean

function hasUploadingFile()

Determine if there are active file uploads in the given state

Signature:

export declare function hasUploadingFile(state: EditorState): boolean;

Parameters:

Parameter	Type	Description
state	EditorState	the editor state

Returns:

boolean

Remarks:

This utility is useful to warn users there are still active uploads before exiting or saving a document.

function helper()

A decorator which can be applied to top level methods on an extension to identify them as helpers. This can be used as a replacement for the createHelpers method.

To allow the TypeScript compiler to automatically infer types, please create your methods with the following type signature.

import { Helper } from '@remirror/core';

type Signature = (...args: any[]) => Helper<SomeReturnType>;

The following is an example of how this can be used within your extension.

import { helper, Helper } from '@remirror/core';

class MyExtension {
  get name() {
    return 'my';
  }

  @helper()
  alwaysTrue(): Helper<boolean> {
    return true;
  }
}

The above helper can now be used within your editor instance.

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

const MyEditorButton = () => {
  const { helpers } = useRemirrorContext();

  return helpers.alwaysTrue() ? <button>My Button</button> : null
}

Method Decorator

Signature:

export declare function helper(options?: HelperDecoratorOptions): <Extension extends AnyExtension, Type>(method: AnyFunction<NonNullable<Type> extends HelperAnnotation ? Type : never>, context: ClassMethodDecoratorContext<Extension, (this: Extension, ...args: any) => any>) => AnyFunction<NonNullable<Type> extends HelperAnnotation ? Type : never>;

Parameters:

Parameter	Type	Description
options	HelperDecoratorOptions	(Optional)

Returns:

<Extension extends AnyExtension, Type>(method: AnyFunction<NonNullable<Type> extends HelperAnnotation ? Type : never>, context: ClassMethodDecoratorContext<Extension, (this: Extension, ...args: any) => any>) => AnyFunction<NonNullable<Type> extends HelperAnnotation ? Type : never>

function htmlToProsemirrorNode()

Convert a HTML string into a ProseMirror node. This can be used for the stringHandler property in your editor when you want to support html.

import { htmlToProsemirrorNode } from 'remirror';
import { Remirror, useManager } from '@remirror/react';

const Editor = () => {
  const manager = useManager([]);

  return (
    <Remirror
      stringHandler={htmlToProsemirrorNode}
      initialContent='<p>A wise person once told me to relax</p>'
    >
      <div />
    </Remirror>
  );
}

Signature:

export declare function htmlToProsemirrorNode(props: FragmentStringHandlerOptions): Fragment;

Parameters:

Parameter	Type	Description
props	FragmentStringHandlerOptions

Returns:

Fragment

function htmlToProsemirrorNode()

Signature:

export declare function htmlToProsemirrorNode(props: NodeStringHandlerOptions): ProsemirrorNode;

Parameters:

Parameter	Type	Description
props	NodeStringHandlerOptions

Returns:

ProsemirrorNode

function includes()

A more lenient typed version of Array.prototype.includes which allow less specific types to be checked.

Signature:

export declare function includes<Type>(array: Type[] | readonly Type[], item: unknown, fromIndex?: number): item is Type;

Parameters:

Parameter	Type	Description
array	Type[] | readonly Type[]
item	unknown
fromIndex	number	(Optional)

Returns:

item is Type

function insertText()

Insert text into the dom at the current location by default. If a promise is provided then the text will be inserted at the tracked position when the promise is resolved.

Signature:

export declare function insertText(text: string, options?: InsertTextOptions): CommandFunction;

Parameters:

Parameter	Type	Description
text	string
options	InsertTextOptions	(Optional)

Returns:

CommandFunction

function invariant()

Throw an error if the condition fails. Strip out error messages for production. Adapted from tiny-invariant.

Signature:

export declare function invariant(condition: unknown, options: RemirrorErrorOptions): asserts condition;

Parameters:

Parameter	Type	Description
condition	unknown
options	RemirrorErrorOptions

Returns:

asserts condition

function isAllSelection()

Predicate checking whether the selection is an AllSelection.

Signature:

export declare function isAllSelection(value: unknown): value is AllSelection;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is AllSelection

function isAndroidOS()

A utility function to check whether the current browser is running on the android platform.

Signature:

export declare function isAndroidOS(): boolean;

Returns:

boolean

function isBoolean()

Predicate check that value is boolean

Signature:

export declare function isBoolean(value: unknown): value is boolean;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is boolean

function isChrome()

Taken from https://stackoverflow.com/a/4900484

Check that the browser is chrome. Supports passing a minimum version to check that it is a greater than or equal to this version.

Signature:

export declare function isChrome(minVersion?: number): boolean;

Parameters:

Parameter	Type	Description
minVersion	number	(Optional)

Returns:

boolean

function isClass()

Warning: This API is now obsolete.

Due to the current build process stripping out classes

Predicate check that value is a class

Signature:

export declare function isClass(value: unknown): value is AnyConstructor;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is AnyConstructor

function isDefaultBlockNode()

Check if the provided node is a default block node.

Signature:

export declare function isDefaultBlockNode(node: ProsemirrorNode): boolean;

Parameters:

Parameter	Type	Description
node	ProsemirrorNode

Returns:

boolean

function isDefaultDocNode()

Check whether the provided doc node has the same value as the default empty node for the document. Basically checks that the document is untouched.

This is useful for extensions like the placeholder which only should be shown when the document matches the default empty state.

Signature:

export declare function isDefaultDocNode(doc: ProsemirrorNode, options?: DefaultDocNodeOptions): boolean;

Parameters:

Parameter	Type	Description
doc	ProsemirrorNode
options	DefaultDocNodeOptions	(Optional)

Returns:

boolean

function isDelayedValue()

Returns true when the provided value is a delayed value.

Signature:

export declare function isDelayedValue<Type>(value: unknown): value is DelayedValue<Type>;

Parameters:

Parameter	Type	Description
value	unknown

Returns:

value is DelayedValue<Type>

function isDirectInstanceOf()

Check if an instance is the direct instance of the provided class.

Signature:

export declare function isDirectInstanceOf<Type>(instance: unknown, Constructor: AnyConstructor<Type>): instance is Type;

Parameters:

Parameter	Type	Description
instance	unknown
Constructor	AnyConstructor<Type>

Returns:

instance is Type

function isDocNode()

Checks whether a Prosemirror node is the top level doc node

Signature:

export declare function isDocNode(node: ProsemirrorNode | null | undefined, schema?: EditorSchema): node is ProsemirrorNode;

Parameters:

Parameter	Type	Description
node	ProsemirrorNode | null | undefined	the prosemirror node
schema	EditorSchema	(Optional) the prosemirror schema to check against

Returns:

node is ProsemirrorNode

function isDocNodeEmpty()

Checks if a node looks like an empty document.

Signature:

export declare function isDocNodeEmpty(node: ProsemirrorNode): boolean;

Parameters:

Parameter	Type	Description
node	ProsemirrorNode	the prosemirror node

Returns:

boolean

function isDomNode()

Checks whether the passed value is a valid dom node

Signature:

export declare function isDomNode(domNode: unknown): domNode is Node;

Parameters:

Parameter	Type	Description
domNode	unknown	the dom node

Returns:

domNode is Node

function isEditorSchema()

Checks to see if the passed value is an instance of the editor schema

Signature:

export declare function isEditorSchema(value: unknown): value is EditorSchema;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is EditorSchema

function isEditorState()

Checks to see if the passed value is a Prosemirror Editor State

Signature:

export declare function isEditorState(value: unknown): value is PMEditorState | Readonly<PMEditorState>;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is PMEditorState | Readonly<PMEditorState>

function isElementDomNode()

Checks for an element node like <p> or <div>.

Signature:

export declare function isElementDomNode(domNode: unknown): domNode is HTMLElement;

Parameters:

Parameter	Type	Description
domNode	unknown	the dom node

Returns:

domNode is HTMLElement

function isEmptyArray()

Predicate check that value is an empty array

Signature:

export declare function isEmptyArray(value: unknown): value is never[];

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is never[]

function isEmptyBlockNode()

Checks if the current node is a block node and empty.

Signature:

export declare function isEmptyBlockNode(node: ProsemirrorNode | null | undefined): boolean;

Parameters:

Parameter	Type	Description
node	ProsemirrorNode | null | undefined	the prosemirror node

Returns:

boolean

function isEmptyObject()

Predicate check that value is an empty object

Signature:

export declare function isEmptyObject(value: unknown): boolean;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

boolean

function isEndOfTextBlock()

Checks that the selection is an empty text selection at the end of its parent node.

Signature:

export declare function isEndOfTextBlock(selection: Selection): selection is TextSelection;

Parameters:

Parameter	Type	Description
selection	Selection

Returns:

selection is TextSelection

function isExtension()

Determines if the passed value is an extension.

Signature:

export declare function isExtension<Type extends AnyExtension = AnyExtension>(value: unknown): value is Type;

Parameters:

Parameter	Type	Description
value	unknown	the value to test

Returns:

value is Type

function isExtensionConstructor()

Determines if the passed value is an extension constructor.

Signature:

export declare function isExtensionConstructor<Type extends AnyExtensionConstructor = AnyExtensionConstructor>(value: unknown): value is Type;

Parameters:

Parameter	Type	Description
value	unknown	the value to test

Returns:

value is Type

function isExtensionTag()

Check if the provided string is an extension tag.

Signature:

export declare function isExtensionTag(value: string): value is ExtensionTagType;

Parameters:

Parameter	Type	Description
value	string

Returns:

value is ExtensionTagType

function isInstanceOf()

A shorthand method for creating instance of checks.

Signature:

export declare function isInstanceOf<Constructor extends AnyConstructor>(Constructor: Constructor): (value: unknown) => value is InstanceType<Constructor>;

Parameters:

Parameter	Type	Description
Constructor	Constructor

Returns:

(value: unknown) => value is InstanceType<Constructor>

function isInteger()

Helper function for Number.isInteger check allowing non numbers to be tested

Signature:

export declare function isInteger(value: unknown): value is number;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is number

function isJSONPrimitive()

Predicate check for whether passed in value is a JSON primitive value

Signature:

export declare function isJSONPrimitive(value: unknown): value is JsonPrimitive;

Parameters:

Parameter	Type	Description
value	unknown

Returns:

value is JsonPrimitive

function isMap()

Predicate check that value is a Map

Signature:

export declare function isMap(value: unknown): value is Map<unknown, unknown>;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is Map<unknown, unknown>

function isMarkActive()

Checks that a mark is active within the selected region, or the current selection point is within a region with the mark active. Used by extensions to implement their active methods.

Signature:

export declare function isMarkActive(props: IsMarkActiveProps): boolean;

Parameters:

Parameter	Type	Description
props	IsMarkActiveProps	see [[IsMarkActiveProps]] for options

Returns:

boolean

function isMarkExtension()

Determines if the passed in extension is a mark extension. Useful as a type guard where a particular type of extension is needed.

Signature:

export declare function isMarkExtension<Type extends AnyMarkExtension = AnyMarkExtension>(value: unknown): value is Type;

Parameters:

Parameter	Type	Description
value	unknown	the extension to check

Returns:

value is Type

function isMarkType()

Check to see if the passed value is a MarkType.

Signature:

export declare function isMarkType(value: unknown): value is MarkType;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is MarkType

function isNativePromise()

Predicate check that value is a native promise

Signature:

export declare function isNativePromise(value: unknown): value is Promise<unknown>;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is Promise<unknown>

function isNodeActive()

Checks whether the node type passed in is active within the region. Used by extensions to implement the active method.

To ignore attrs just leave the attrs object empty or undefined.

Signature:

export declare function isNodeActive(props: GetActiveAttrsProps): boolean;

Parameters:

Parameter	Type	Description
props	GetActiveAttrsProps	see [[GetActiveAttrsProps]]

Returns:

boolean

function isNodeExtension()

Determines if the passed in extension is a node extension. Useful as a type guard where a particular type of extension is needed.

Signature:

export declare function isNodeExtension<Type extends AnyNodeExtension = AnyNodeExtension>(value: unknown): value is Type;

Parameters:

Parameter	Type	Description
value	unknown	the extension to check

Returns:

value is Type

function isNodeOfType()

Checks if the type a given node has a given nodeType.

Signature:

export declare function isNodeOfType(props: NodeEqualsTypeProps): boolean;

Parameters:

Parameter	Type	Description
props	NodeEqualsTypeProps

Returns:

boolean

function isNodeSelection()

Predicate checking whether the selection is a NodeSelection

Signature:

export declare function isNodeSelection(value: unknown): value is NodeSelection;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is NodeSelection

function isNodeType()

Check to see if the passed value is a NodeType.

Signature:

export declare function isNodeType(value: unknown): value is NodeType;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is NodeType

function isNonEmptyArray()

Predicate check that value is a non-empty.

Signature:

export declare function isNonEmptyArray<Item>(value: Item[]): value is [Item, ...Item[]];

Parameters:

Parameter	Type	Description
value	Item[]	the value to check

Returns:

value is [Item, ...Item[]]

function isNull()

Predicate check that value is null

Signature:

export declare function isNull(value: unknown): value is null;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is null

function isNullOrUndefined()

Utility predicate check that value is either null or undefined

Signature:

export declare function isNullOrUndefined(value: unknown): value is null | undefined;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is null | undefined

function isObject()

Predicate check that value is an object.

Signature:

export declare function isObject<Type extends Shape>(value: unknown): value is Type;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is Type

function isPlainExtension()

Checks whether the provided value is a plain extension.

Signature:

export declare function isPlainExtension<Type extends AnyPlainExtension = AnyPlainExtension>(value: unknown): value is Type;

Parameters:

Parameter	Type	Description
value	unknown	the extension to check

Returns:

value is Type

function isPlainObject()

Predicate check for whether passed in value is a plain object

Signature:

export declare function isPlainObject<Type = unknown>(value: unknown): value is UnknownShape<Type>;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is UnknownShape<Type>

function isPrimitive()

Predicate check for whether passed in value is a primitive value

Signature:

export declare function isPrimitive(value: unknown): value is Primitive;

Parameters:

Parameter	Type	Description
value	unknown

Returns:

value is Primitive

function isPromise()

Predicate check that value has the promise api implemented

Signature:

export declare function isPromise(value: unknown): value is Promise<unknown>;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is Promise<unknown>

function isProsemirrorFragment()

Checks to see if the passed value is a ProsemirrorNode

Signature:

export declare function isProsemirrorFragment(value: unknown): value is Fragment;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is Fragment

function isProsemirrorMark()

Checks to see if the passed value is a ProsemirrorMark

Signature:

export declare function isProsemirrorMark(value: unknown): value is Mark;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is Mark

function isProsemirrorNode()

Checks to see if the passed value is a ProsemirrorNode

Signature:

export declare function isProsemirrorNode(value: unknown): value is ProsemirrorNode;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is ProsemirrorNode

function isRemirrorJSON()

Checks whether the passed in JSON is a valid object node

Signature:

export declare function isRemirrorJSON(value: unknown): value is RemirrorJSON;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is RemirrorJSON

function isRemirrorManager()

Checks to see whether the provided value is a RemirrorManager instance.

An optional parameter mustIncludeList is available if you want to check that the manager includes all the listed extensions.

Signature:

export declare function isRemirrorManager<Extension extends AnyExtension = AnyExtension>(value: unknown, mustIncludeList?: Array<AnyExtensionConstructor | string>): value is RemirrorManager<Extension>;

Parameters:

Parameter	Type	Description
value	unknown	the value to check
mustIncludeList	Array<AnyExtensionConstructor | string>	(Optional) an array of presets and extension the manager must include to pass the test. The identifier can either be the Extension / Preset name e.g. bold, or the Extension / Preset constructor BoldExtension

Returns:

value is RemirrorManager<Extension>

function isResolvedPos()

Predicate checking whether the value is a ResolvedPosition.

Signature:

export declare function isResolvedPos(value: unknown): value is PMResolvedPos;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is PMResolvedPos

function isSafari()

Taken from https://stackoverflow.com/a/4900484

Check that the browser is safari. Supports passing a minimum version to check that it is a greater than or equal to this version.

Signature:

export declare function isSafari(minVersion?: number): boolean;

Parameters:

Parameter	Type	Description
minVersion	number	(Optional)

Returns:

boolean

function isSafeInteger()

Helper function for Number.isSafeInteger allowing for unknown values to be tested

Signature:

export declare function isSafeInteger(value: unknown): value is number;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is number

function isSelection()

Predicate checking whether the value is a Selection

Signature:

export declare function isSelection(value: unknown): value is Selection;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is Selection

function isSelectionEmpty()

Checks whether the selection or state is currently empty.

Signature:

export declare function isSelectionEmpty(value: Transaction | EditorState | Selection): boolean;

Parameters:

Parameter	Type	Description
value	Transaction | EditorState | Selection	the transaction selection or state

Returns:

boolean

function isSet()

Predicate check that value is a Set

Signature:

export declare function isSet(value: unknown): value is Set<unknown>;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is Set<unknown>

function isStartOfDoc()

Returns true when the selection is a text selection at the start of the document.

Signature:

export declare function isStartOfDoc(selection: Selection): boolean;

Parameters:

Parameter	Type	Description
selection	Selection

Returns:

boolean

function isStartOfTextBlock()

Checks that the selection is an empty text selection at the start of its parent node.

Signature:

export declare function isStartOfTextBlock(selection: Selection): selection is TextSelection;

Parameters:

Parameter	Type	Description
selection	Selection

Returns:

selection is TextSelection

function isTextDomNode()

Checks for a text node.

Signature:

export declare function isTextDomNode(domNode: unknown): domNode is Text;

Parameters:

Parameter	Type	Description
domNode	unknown	the dom node

Returns:

domNode is Text

function isTextSelection()

Predicate checking whether the selection is a TextSelection.

Signature:

export declare function isTextSelection(value: unknown): value is TextSelection;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is TextSelection

function isTransaction()

Checks to see if the passed value is a Prosemirror Transaction

Signature:

export declare function isTransaction(value: unknown): value is PMTransaction;

Parameters:

Parameter	Type	Description
value	unknown	the value to check

Returns:

value is PMTransaction

function joinStyles()

Take the style string attribute and combine it with the provided style object.

Signature:

export declare function joinStyles(styleObject: object, initialStyles?: string): string;

Parameters:

Parameter	Type	Description
styleObject	object
initialStyles	string	(Optional)

Returns:

string

function keyBinding()

A decorator which can be applied to an extension method to identify as a key binding method. This can be used as a replacement for the createKeymap method depending on your preference.

If you prefer not to use decorators, then you can continue using createKeymap.

Method Decorator

Signature:

export declare function keyBinding<Extension extends AnyExtension>(options: KeybindingDecoratorOptions<Required<GetOptions<Extension>>>): (method: KeyBindingCommandFunction, context: ClassMethodDecoratorContext<Extension>) => KeyBindingCommandFunction;

Parameters:

Parameter	Type	Description
options	KeybindingDecoratorOptions<Required<GetOptions<Extension>>>

Returns:

(method: KeyBindingCommandFunction, context: ClassMethodDecoratorContext<Extension>) => KeyBindingCommandFunction

function keys()

A typesafe implementation of Object.keys()

Signature:

export declare function keys<Type extends object, Key extends Extract<keyof Type, string>>(value: Type): Key[];

Parameters:

Parameter	Type	Description
value	Type

Returns:

Key[]

function last()

Get the last element of the array.

Signature:

export declare function last<Type>(array: Type[]): Type;

Parameters:

Parameter	Type	Description
array	Type[]

Returns:

Type

function legacyCommand()

Warning: This API is now obsolete.

legacy - please use the ES2023 decorator @command

A legacy decorator (pre Stage 3) which can be applied to top level methods on an extension to identify them as commands. This can be used as a replacement for the createCommands method.

If you prefer not to use decorators, then you can continue using createCommands. Internally the decorators are being used as they are better for documentation purposes.

For automated type inference methods that use this decorator must implement the following type signature.

import { CommandFunction } from '@remirror/core';

type Signature = (...args: any[]) => CommandFunction;

The following is an example of how this can be used within your extension.

import { legacyCommand, CommandFunction } from '@remirror/core';

class MyExtension {
  get name() {
    return 'my';
  }

  @legacyCommand()
  myCommand(text: string): CommandFunction {
    return ({ tr, dispatch }) => {
      dispatch?.(tr.insertText('my command ' + text));
      return true;
    }
  }
}

The above command can now be used within your editor instance.

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

const MyEditorButton = () => {
  const { commands } = useRemirrorContext();

  return <button onClick={() => commands.myCommand('hello')}>My Button</button>
}

Method Decorator

Signature:

export declare function legacyCommand<Extension extends AnyExtension>(options?: ChainableCommandDecoratorOptions<Required<GetOptions<Extension>>>): ExtensionDecorator<Extension, CommandFunction, void>;

Parameters:

Parameter	Type	Description
options	ChainableCommandDecoratorOptions<Required<GetOptions<Extension>>>	(Optional)

Returns:

ExtensionDecorator<Extension, CommandFunction, void>

function legacyCommand()

Signature:

export declare function legacyCommand<Extension extends AnyExtension>(options: NonChainableCommandDecoratorOptions<Required<GetOptions<Extension>>>): ExtensionDecorator<Extension, NonChainableCommandFunction, void>;

Parameters:

Parameter	Type	Description
options	NonChainableCommandDecoratorOptions<Required<GetOptions<Extension>>>

Returns:

ExtensionDecorator<Extension, NonChainableCommandFunction, void>

function legacyHelper()

Warning: This API is now obsolete.

legacy - please use the ES2023 decorator @helper

A legacy decorator (pre Stage 3) which can be applied to top level methods on an extension to identify them as helpers. This can be used as a replacement for the createHelpers method.

To allow the TypeScript compiler to automatically infer types, please create your methods with the following type signature.

import { Helper } from '@remirror/core';

type Signature = (...args: any[]) => Helper<SomeReturnType>;

The following is an example of how this can be used within your extension.

import { legacyHelper, Helper } from '@remirror/core';

class MyExtension {
  get name() {
    return 'my';
  }

  @legacyHelper()
  alwaysTrue(): Helper<boolean> {
    return true;
  }
}

The above helper can now be used within your editor instance.

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

const MyEditorButton = () => {
  const { helpers } = useRemirrorContext();

  return helpers.alwaysTrue() ? <button>My Button</button> : null
}

Method Decorator

Signature:

export declare function legacyHelper(options?: HelperDecoratorOptions): <Extension extends AnyExtension, Type>(target: Extension, propertyKey: string, _descriptor: TypedPropertyDescriptor<AnyFunction<NonNullable<Type> extends HelperAnnotation ? Type : never>>) => void;

Parameters:

Parameter	Type	Description
options	HelperDecoratorOptions	(Optional)

Returns:

<Extension extends AnyExtension, Type>(target: Extension, propertyKey: string, _descriptor: TypedPropertyDescriptor<AnyFunction<NonNullable<Type> extends HelperAnnotation ? Type : never>>) => void

function legacyKeyBinding()

Warning: This API is now obsolete.

legacy - please use the ES2023 decorator @keyBinding

A legacy decorator (pre Stage 3) which can be applied to an extension method to identify as a key binding method. This can be used as a replacement for the createKeymap method depending on your preference.

If you prefer not to use decorators, then you can continue using createKeymap.

Method Decorator

Signature:

export declare function legacyKeyBinding<Extension extends AnyExtension>(options: KeybindingDecoratorOptions<Required<GetOptions<Extension>>>): (target: Extension, propertyKey: string, _descriptor: TypedPropertyDescriptor<KeyBindingCommandFunction>) => void;

Parameters:

Parameter	Type	Description
options	KeybindingDecoratorOptions<Required<GetOptions<Extension>>>

Returns:

(target: Extension, propertyKey: string, _descriptor: TypedPropertyDescriptor<KeyBindingCommandFunction>) => void

function lift()

Lift the selected block, or the closest ancestor block of the selection that can be lifted, out of its parent node.

Adapted from https://github.com/ProseMirror/prosemirror-commands/blob/3126d5c625953ba590c5d3a0db7f1009f46f1571/src/commands.js\#L212-L221

Signature:

export declare function lift({ tr, dispatch }: Pick<CommandFunctionProps, 'tr' | 'dispatch'>): boolean;

Parameters:

Parameter	Type	Description
{ tr, dispatch }	Pick<CommandFunctionProps, 'tr' | 'dispatch'>

Returns:

boolean

function markEqualsType()

Checks if the type a given node has a given nodeType.

Signature:

export declare function markEqualsType(props: MarkEqualsTypeProps): boolean;

Parameters:

Parameter	Type	Description
props	MarkEqualsTypeProps

Returns:

boolean

function markInputRule()

Creates an input rule based on the provided regex for the provided mark type.

Signature:

export declare function markInputRule(props: MarkInputRuleProps): SkippableInputRule;

Parameters:

Parameter	Type	Description
props	MarkInputRuleProps

Returns:

SkippableInputRule

function mergeDOMRects()

Merge two DOMRect objects into a one big DOMRect object that contains both two DOMRect objects.

Signature:

export declare function mergeDOMRects(rect1: DOMRect, rect2: DOMRect): DOMRect;

Parameters:

Parameter	Type	Description
rect1	DOMRect	the first DOMRect
rect2	DOMRect	the second DOMRect

Returns:

DOMRect

function mergeKeyBindings()

This merges an array of keybindings into one keybinding with the priority given to the items earlier in the array. index: 0 has priority over index: 1 which has priority over index: 2 and so on.

This is for use on remirror keybindings. See mergeProsemirrorKeyBindings for transforming the methods into ProsemirrorCommandFunction's.

Signature:

export declare function mergeKeyBindings(extensionKeymaps: KeyBindings[]): KeyBindings;

Parameters:

Parameter	Type	Description
extensionKeymaps	KeyBindings[]

Returns:

KeyBindings

function mergeProsemirrorKeyBindings()

This merges an array of keybindings into one keybinding with the priority given to the items earlier in the array. index: 0 has priority over index: 1 which has priority over index: 2 and so on.

This supports the [[ProsemirrorCommandFunction]] type signature where the state, dispatch and view are passed as separate arguments.

Signature:

export declare function mergeProsemirrorKeyBindings(extensionKeymaps: KeyBindings[]): ProsemirrorKeyBindings;

Parameters:

Parameter	Type	Description
extensionKeymaps	KeyBindings[]

Returns:

ProsemirrorKeyBindings

function mutateDefaultExtensionOptions()

Mutate the default extension options.

Signature:

export declare function mutateDefaultExtensionOptions(mutatorMethod: (defaultOptions: BaseExtensionOptions) => void): void;

Parameters:

Parameter	Type	Description
mutatorMethod	(defaultOptions: BaseExtensionOptions) => void

Returns:

void

Remarks:

This is a dangerous method since it allows you to mutate the received object. Don't use it unless you absolutely have to.

A potential use case is for adding a new default option to all extensions. It shows an example of how to accomplish this in a typesafe way.

import { mutateDefaultExtensionOptions } from 'remirror';

mutateDefaultExtensionOptions((settings) => {
  // Set the default value of all extensions to have a property `customSetting` with value `false`.
  settings.customSetting = false;
})

declare global {
  namespace Remirror {
    interface BaseExtensionOptions {
      customSetting?: boolean;
    }
  }
}

The mutation must happen before any extension have been instantiated.

function mutateTag()

A method for updating the extension tags.

import { ExtensionTag, mutateTag } from 'remirror';

mutateTag((tag) => {
  tag.SuperCustom = 'superCustom';
});

declare global {
  namespace Remirror {
    interface ExtensionTag {
      SuperCustom: 'superCustom';
    }
  }
}


log(ExtensionTag.SuperCustom); // This is fine ✅
log(ExtensionTag.NotDefined); // This will throw ❌

Signature:

export declare function mutateTag(mutator: (Tag: ExtensionTag) => void): void;

Parameters:

Parameter	Type	Description
mutator	(Tag: ExtensionTag) => void

Returns:

void

function nodeInputRule()

Creates a node input rule based on the provided regex for the provided node type.

Input rules transform content as the user types based on whether a match is found with a sequence of characters.

Signature:

export declare function nodeInputRule(props: NodeInputRuleProps): SkippableInputRule;

Parameters:

Parameter	Type	Description
props	NodeInputRuleProps

Returns:

SkippableInputRule

function noop()

noop is a shorthand way of saying No Operation and is a function that does nothing.

And Sometimes doing nothing is the best policy.

Signature:

export declare function noop(): undefined;

Returns:

undefined

function object()

Creates an object with the null prototype.

Signature:

export declare function object<Type extends object>(value?: Type): Type;

Parameters:

Parameter	Type	Description
value	Type	(Optional) the object to create

Returns:

Type

function omitExtraAttributes()

Return attributes for a node excluding those that were provided as extra attributes.

Signature:

export declare function omitExtraAttributes<Output extends object = DOMCompatibleAttributes>(attrs: ProsemirrorAttributes, extra: ApplySchemaAttributes): Omit<Output, keyof Remirror.Attributes>;

Parameters:

Parameter	Type	Description
attrs	ProsemirrorAttributes	The source attributes
extra	ApplySchemaAttributes	The extra attribute schema for this node

Returns:

Omit<Output, keyof Remirror.Attributes>

function omitUndefined()

Remove the undefined values from an object.

Signature:

export declare function omitUndefined<Type extends object>(object: Type): ConditionalExcept<Type, undefined>;

Parameters:

Parameter	Type	Description
object	Type

Returns:

ConditionalExcept<Type, undefined>

function parseSizeUnit()

Parse the font size and font unit from the provided value. When the value type is unsupported it default to px.

Signature:

export declare function parseSizeUnit(fontSize?: string | undefined | null): ParsedDomSize;

Parameters:

Parameter	Type	Description
fontSize	string | undefined | null	(Optional)

Returns:

ParsedDomSize

function plainInputRule()

Creates a plain rule based on the provided regex. You can see this being used in the @remirror/extension-emoji when it is setup to use plain text.

Signature:

export declare function plainInputRule(props: PlainInputRuleProps): SkippableInputRule;

Parameters:

Parameter	Type	Description
props	PlainInputRuleProps

Returns:

SkippableInputRule

function preserveSelection()

Checks the selection for the current state and updates the active transaction to a selection that is consistent with the initial selection.

Signature:

export declare function preserveSelection(selection: Selection, tr: Transaction): void;

Parameters:

Parameter	Type	Description
selection	Selection
tr	Transaction	the transaction which has been updated and may have impacted the selection.

Returns:

void

function prosemirrorNodeToDom()

Convert a node into its DOM representative

Signature:

export declare function prosemirrorNodeToDom(node: ProsemirrorNode, document?: Document): DocumentFragment | HTMLElement;

Parameters:

Parameter	Type	Description
node	ProsemirrorNode	the node to extract html from.
document	Document	(Optional) the document to use for the DOM

Returns:

DocumentFragment | HTMLElement

function prosemirrorNodeToHtml()

Convert the provided node to a html string.

Signature:

export declare function prosemirrorNodeToHtml(node: ProsemirrorNode, document?: Document): string;

Parameters:

Parameter	Type	Description
node	ProsemirrorNode	the node to extract html from.
document	Document	(Optional) the document to use for the DOM

import { EditorState, prosemirrorNodeToHtml } from 'remirror';

function convertStateToHtml(state: EditorState): string {
  return prosemirrorNodeToHtml(state.doc);
}

|

Returns:

string

function randomFloat()

Generate a random float between min and max. If only one parameter is provided minimum is set to 0.

Signature:

export declare function randomFloat(min: number, max?: number): number;

Parameters:

Parameter	Type	Description
min	number	the minimum value
max	number	(Optional) the maximum value

Returns:

number

function randomInt()

Generate a random integer between min and max. If only one parameter is provided minimum is set to 0.

Signature:

export declare function randomInt(min: number, max?: number): number;

Parameters:

Parameter	Type	Description
min	number	the minimum value
max	number	(Optional) the maximum value

Returns:

number

function range()

Create a range from start to end.

If only start is provided it creates an array of the size provided. if start and end are provided it creates an array who's first position is start and final position is end. i.e. length = (end - start) + 1.

If you'd like to create a typed tuple of up to 40 items then pass in a [number] tuple as the first argument.

Signature:

export declare function range<Size extends number>(size: [Size]): TupleRange<Size>;

Parameters:

Parameter	Type	Description
size	[Size]

Returns:

TupleRange<Size>

function range()

Signature:

export declare function range(size: number): number[];

Parameters:

Parameter	Type	Description
size	number

Returns:

number[]

function range()

Signature:

export declare function range(start: number, end: number): number[];

Parameters:

Parameter	Type	Description
start	number
end	number

Returns:

number[]

function rangeHasMark()

A wrapper for ProsemirrorNode.rangeHasMark that can also compare mark attributes (if supplied)

Signature:

export declare function rangeHasMark(props: RangeHasMarkProps): boolean;

Parameters:

Parameter	Type	Description
props	RangeHasMarkProps	see [[RangeHasMarkProps]] for options

Returns:

boolean

function removeMark()

Removes a mark from the current selection or provided range.

Signature:

export declare function removeMark(props: RemoveMarkProps): CommandFunction;

Parameters:

Parameter	Type	Description
props	RemoveMarkProps	see [[RemoveMarkProps]] for options

Returns:

CommandFunction

function removeNodeAfter()

Warning: This API is now obsolete.

This util is hard to use and not that useful

Update the transaction to delete the node after the current selection.

dispatch(removeNodeBefore(state.tr));

Signature:

export declare function removeNodeAfter(tr: Transaction): Transaction;

Parameters:

Parameter	Type	Description
tr	Transaction

Returns:

Transaction

function removeNodeAtPosition()

Performs a delete transaction that removes a node at a given position with the given node. position should point at the position immediately before the node.

Signature:

export declare function removeNodeAtPosition({ pos, tr }: RemoveNodeAtPositionProps): Transaction;

Parameters:

Parameter	Type	Description
{ pos, tr }	RemoveNodeAtPositionProps

Returns:

Transaction

function removeNodeBefore()

Warning: This API is now obsolete.

This util is hard to use and not that useful

Updates the provided transaction to remove the node before.

dispatch(
   removeNodeBefore(state.tr)
);

Signature:

export declare function removeNodeBefore(tr: Transaction): Transaction;

Parameters:

Parameter	Type	Description
tr	Transaction

Returns:

Transaction

function replaceNodeAtPosition()

Replaces the node at the provided position with the provided content.

Signature:

export declare function replaceNodeAtPosition({ pos, tr, content, }: ReplaceNodeAtPositionProps): Transaction;

Parameters:

Parameter	Type	Description
{ pos, tr, content, }	ReplaceNodeAtPositionProps

Returns:

Transaction

function replaceText()

Replaces text with an optional appended string at the end.

Signature:

export declare function replaceText(props: ReplaceTextProps): CommandFunction;

Parameters:

Parameter	Type	Description
props	ReplaceTextProps	see [[ReplaceTextProps]]

Returns:

CommandFunction

function schemaToJSON()

Converts a schema to a JSON compatible object.

Signature:

export declare function schemaToJSON<Nodes extends string = string, Marks extends string = string>(schema: EditorSchema): SchemaJSON<Nodes, Marks>;

Parameters:

Parameter	Type	Description
schema	EditorSchema

Returns:

SchemaJSON<Nodes, Marks>

function set()

Set the value of a given path for the provided object. Does not mutate the original object.

Signature:

export declare function set(path: number | string | Array<string | number>, obj: Shape, value: unknown): Shape;

Parameters:

Parameter	Type	Description
path	number | string | Array<string | number>
obj	Shape
value	unknown

Returns:

Shape

function setBlockType()

Returns a command that tries to set the selected textblocks to the given node type with the given attributes.

Signature:

export declare function setBlockType(nodeType: string | NodeType, attrs?: ProsemirrorAttributes, selection?: PrimitiveSelection, preserveAttrs?: boolean): CommandFunction;

Parameters:

Parameter	Type	Description
nodeType	string | NodeType	the name of the node or the [[NodeType]].
attrs	ProsemirrorAttributes	(Optional)
selection	PrimitiveSelection	(Optional)
preserveAttrs	boolean	(Optional)

Returns:

CommandFunction

function setStyle()

Set more styles to the given element.

Signature:

export declare function setStyle(target: HTMLElement, styles: Partial<CSSStyleDeclaration>): Partial<CSSStyleDeclaration>;

Parameters:

Parameter	Type	Description
target	HTMLElement
styles	Partial<CSSStyleDeclaration>

Returns:

Partial<CSSStyleDeclaration>

function setUploadPlaceholderAction()

Signature:

export declare function setUploadPlaceholderAction(tr: Transaction, action: PlaceholderPluginAction): Transaction;

Parameters:

Parameter	Type	Description
tr	Transaction
action	PlaceholderPluginAction

Returns:

Transaction

function shallowClone()

Shallow clone an object while preserving it's getters and setters. This is a an alternative to the spread clone.

Signature:

export declare function shallowClone<Type extends object>(value: Type): Type;

Parameters:

Parameter	Type	Description
value	Type

Returns:

Type

function shouldUseDomEnvironment()

Checks which environment should be used. Returns true when we are in the dom environment.

Signature:

export declare function shouldUseDomEnvironment(): boolean;

Returns:

boolean

function sort()

Sorts an array while retaining the original order when the compare method identifies the items as equal.

Array.prototype.sort() is unstable and so values that are the same will jump around in a non deterministic manner. Here I'm using the index as a fallback. If two elements have the same priority the element with the lower index is placed first hence retaining the original order.

Signature:

export declare function sort<Type>(array: Type[], compareFn: (a: Type, z: Type) => number): Type[];

Parameters:

Parameter	Type	Description
array	Type[]	the array to sort
compareFn	(a: Type, z: Type) => number	compare the two value arguments a and z - return 0 for equal - return number > 0 for a > z - return number < 0 for z > a

Returns:

Type[]

function startCase()

Converts a string, including strings in camelCase or snake_case, into Start Case (a variant of Title case where all words start with a capital letter), it keeps original single quote and hyphen in the word.

'management_companies' to 'Management Companies' 'managementCompanies' to 'Management Companies' hell's kitchen to Hell's Kitchen co-op to Co-op

Signature:

export declare function startCase(string: string): string;

Parameters:

Parameter	Type	Description
string	string

Returns:

string

function startPositionOfParent()

Get the start position of the parent of the current resolve position

Signature:

export declare function startPositionOfParent($pos: ResolvedPos): number;

Parameters:

Parameter	Type	Description
$pos	ResolvedPos	the resolved ProseMirror position

Returns:

number

function take()

Takes a number of elements from the provided array starting from the zero-index

Signature:

export declare function take<Type>(array: Type[], number: number): Type[];

Parameters:

Parameter	Type	Description
array	Type[]
number	number

Returns:

Type[]

function textBetween()

Find the different ranges of text between a provided range with support for traversing multiple nodes.

Signature:

export declare function textBetween(props: TextBetweenProps): TextBetween[];

Parameters:

Parameter	Type	Description
props	TextBetweenProps

Returns:

TextBetween[]

function toggleBlockItem()

Toggle a block between the provided type and toggleType.

Signature:

export declare function toggleBlockItem(toggleProps: ToggleBlockItemProps): CommandFunction;

Parameters:

Parameter	Type	Description
toggleProps	ToggleBlockItemProps	see [[ToggleBlockItemProps]] for available options

Returns:

CommandFunction

function toggleMark()

A custom toggleMark function that works for the remirror codebase.

Create a command function that toggles the given mark with the given attributes. Will return false when the current selection doesn't support that mark. This will remove the mark if any marks of that type exist in the selection, or add it otherwise. If the selection is empty, this applies to the [stored marks](#state.EditorState.storedMarks) instead of a range of the document.

The differences from the prosemirror-commands version. - Acts on the transaction rather than the state to allow for commands to be chained together. - Uses the ONE parameter function signature for compatibility with remirror. - Supports passing a custom range.

Signature:

export declare function toggleMark(props: ToggleMarkProps): CommandFunction;

Parameters:

Parameter	Type	Description
props	ToggleMarkProps

Returns:

CommandFunction

function toggleWrap()

Toggle between wrapping an inactive node with the provided node type, and lifting it up into it's parent.

Signature:

export declare function toggleWrap(nodeType: string | NodeType, attrs?: ProsemirrorAttributes, selection?: PrimitiveSelection): CommandFunction;

Parameters:

Parameter	Type	Description
nodeType	string | NodeType	the node type to toggle
attrs	ProsemirrorAttributes	(Optional) the attrs to use for the node
selection	PrimitiveSelection	(Optional)

Returns:

CommandFunction

function toString_2()

Alias of toString for non-dom environments.

This is a safe way of calling toString on objects created with Object.create(null).

Signature:

export declare function toString(value: unknown): string;

Parameters:

Parameter	Type	Description
value	unknown

Returns:

string

function uniqueArray()

Create a unique array in a non-mutating manner

Signature:

export declare function uniqueArray<Type>(array: Type[], fromStart?: boolean): Type[];

Parameters:

Parameter	Type	Description
array	Type[]	the array which will be reduced to its unique elements
fromStart	boolean	(Optional) when set to true the duplicates will be removed from the beginning of the array. This defaults to false.

Returns:

Type[]

a new array containing only unique elements (by reference)

function uniqueBy()

Create a unique array of objects from a getter function or a property list.

Signature:

export declare function uniqueBy<Item = any>(array: Item[], getValue: ((item: Item) => unknown) | string | string[], fromStart?: boolean): Item[];

Parameters:

Parameter	Type	Description
array	Item[]	the array to extract unique values from
getValue	((item: Item) => unknown) | string | string[]	a getter function or a string with the path to the item that is being used as a a test for uniqueness.
fromStart	boolean	(Optional) when true will remove duplicates from the start rather than from the end

import { uniqueBy } from '@remirror/core-helpers';

const values = uniqueBy([{ id: 'a', value: 'Awesome' }, { id: 'a', value: 'ignored' }], item => item.id);
log(values) // => [{id: 'a', value: 'Awesome'}]

const byKey = uniqueBy([{ id: 'a', value: 'Awesome' }, { id: 'a', value: 'ignored' }], 'id')
// Same as above

|

Returns:

Item[]

function uniqueId()

Generate a unique id

Signature:

export declare function uniqueId(prefix?: string): string;

Parameters:

Parameter	Type	Description
prefix	string	(Optional) a prefix for the generated id.

Returns:

string

a unique string of specified length

function unset()

Unset the value of a given path within an object.

Signature:

export declare function unset(path: Array<string | number>, target: Shape): Shape;

Parameters:

Parameter	Type	Description
path	Array<string | number>
target	Shape

Returns:

Shape

function updateMark()

Update the selection with the provided MarkType.

Signature:

export declare function updateMark(props: UpdateMarkProps): CommandFunction;

Parameters:

Parameter	Type	Description
props	UpdateMarkProps	see [[UpdateMarkProps]] for options

Returns:

CommandFunction

function uploadFile()

Insert a file into the editor and upload it.

Signature:

export declare function uploadFile<NodeAttributes extends AbstractNodeAttributes>({ file, pos, view, fileType, uploadHandler, }: UploadFileProps<NodeAttributes>): void;

Parameters:

Parameter	Type	Description
{ file, pos, view, fileType, uploadHandler, }	UploadFileProps<NodeAttributes>

Returns:

void

function values()

A typesafe implementation of Object.values()

Signature:

export declare function values<Type extends object, Key extends Extract<keyof Type, string>, Value extends Type[Key]>(value: Type): Value[];

Parameters:

Parameter	Type	Description
value	Type

Returns:

Value[]

function within()

Check that a number is within the minimum and maximum bounds of a set of numbers.

Signature:

export declare function within(value: number, ...rest: Array<number | undefined | null>): boolean;

Parameters:

Parameter	Type	Description
value	number	the number to test
rest	Array<number | undefined | null>

Returns:

boolean

function wrapIn()

Wrap the selection or the provided text in a node of the given type with the given attributes.

Signature:

export declare function wrapIn(type: string | NodeType, attrs?: ProsemirrorAttributes, selection?: PrimitiveSelection): CommandFunction;

Parameters:

Parameter	Type	Description
type	string | NodeType
attrs	ProsemirrorAttributes	(Optional)
selection	PrimitiveSelection	(Optional)

Returns:

CommandFunction

variable DEFAULT_SHORTCUTS

The default named shortcuts used within remirror.

Signature:

DEFAULT_SHORTCUTS: ShortcutMap

variable DOM_SIZE_UNITS

Signature:

DOM_SIZE_UNITS: readonly ["px", "rem", "em", "in", "q", "mm", "cm", "pt", "pc", "vh", "vw", "vmin", "vmax"]

variable EMPTY_ARRAY

Helpful empty array for use when a default array value is needed.

DO NOT MUTATE!

Signature:

EMPTY_ARRAY: never[]

variable EMPTY_NODE

Signature:

EMPTY_NODE: {
    type: string;
    content: never[];
}

variable EMPTY_PARAGRAPH_NODE

A default empty object node. Useful for resetting the content of a prosemirror document.

Signature:

EMPTY_PARAGRAPH_NODE: {
    type: string;
    content: {
        type: string;
    }[];
}

variable environment

A object with flags identifying the current environment.

Signature:

environment: {
    readonly isBrowser: boolean;
    readonly isJSDOM: boolean;
    readonly isNode: boolean;
    readonly isIos: boolean;
    readonly isMac: boolean;
    readonly isApple: boolean;
    readonly isDevelopment: boolean;
    readonly isTest: boolean;
    readonly isProduction: boolean;
}

variable ExtensionTag

These are the default supported tag strings which help categorize different behaviors that extensions can exhibit.

Signature:

ExtensionTag: ExtensionTag

Remarks:

Any extension can register itself with multiple such behaviors and these categorizations can be used by other extensions when running commands and updating the document.

variable findBlockNodes

Returns block descendants of a given node.

Signature:

findBlockNodes: (props: BaseFindProps) => NodeWithPosition[]

Remarks:

It doesn't descend into a node when descend argument is false (defaults to true).

const blockNodes = findBlockNodes(node);

variable findInlineNodes

Returns inline nodes of a given node.

Signature:

findInlineNodes: (props: BaseFindProps) => NodeWithPosition[]

Remarks:

It doesn't descend into a node when descend argument is false (defaults to true).

const inlineNodes = findInlineNodes(node);

variable findTextNodes

Returns text nodes of a given node.

Signature:

findTextNodes: (props: BaseFindProps) => NodeWithPosition[]

Remarks:

It doesn't descend into a node when descend argument is false (defaults to true).

const textNodes = findTextNodes({ node });

variable GOOGLE_DOC_SHORTCUTS

Shortcuts used within google docs.

Signature:

GOOGLE_DOC_SHORTCUTS: ShortcutMap

variable isArray

Alias the isArray method.

Signature:

isArray: (arg: any) => arg is any[]

variable isDate

Predicate check that value is a date

Signature:

isDate: (value: unknown) => value is Date

variable isEqual

Alias for fast deep equal

Signature:

isEqual: (a: any, b: any) => boolean

variable isError

Predicate check that value is an error

Signature:

isError: (value: unknown) => value is Error

variable isFunction

Predicate check that value is a function

Signature:

isFunction: (value: unknown) => value is AnyFunction

variable isNumber

Predicate check that value is a number.

Also by default doesn't include NaN as a valid number.

Signature:

isNumber: (value: unknown) => value is number

variable isRegExp

Predicate check that value is a RegExp

Signature:

isRegExp: (value: unknown) => value is RegExp

variable isString

Predicate check that value is a string

Signature:

isString: (value: unknown) => value is string

variable isSymbol

Predicate check that value is a symbol

Signature:

isSymbol: (value: unknown) => value is symbol

variable isUndefined

Predicate check that value is undefined

Signature:

isUndefined: (value: unknown) => value is undefined

variable keyboardShortcuts

Signature:

keyboardShortcuts: {
    default: ShortcutMap;
    googleDoc: ShortcutMap;
}

variable LEAF_NODE_REPLACING_CHARACTER

ProseMirror uses the Unicode Character 'OBJECT REPLACEMENT CHARACTER' (U+FFFC) as text representation for leaf nodes, i.e. nodes that don't have any content or text property (e.g. hardBreak, emoji, mention, rule) It was introduced because of https://github.com/ProseMirror/prosemirror/issues/262 This can be used in an input rule regex to be able to include or exclude such nodes.

Signature:

LEAF_NODE_REPLACING_CHARACTER = "\uFFFC"

variable NON_BREAKING_SPACE_CHAR

The non breaking space character.

Signature:

NON_BREAKING_SPACE_CHAR = "\u00A0"

variable NULL_CHARACTER

The null character.

See https://stackoverflow.com/a/6380172

Signature:

NULL_CHARACTER = "\0"

variable REMIRROR_WEBVIEW_NAME

The global name for the module exported by the remirror webview bundle.

Signature:

REMIRROR_WEBVIEW_NAME = "$$__REMIRROR_WEBVIEW_BUNDLE__$$"

variable SELECTED_NODE_CLASS_NAME

The css class added to a node that is selected.

Signature:

SELECTED_NODE_CLASS_NAME = "ProseMirror-selectednode"

variable SELECTED_NODE_CLASS_SELECTOR

The css selector for a selected node.

Signature:

SELECTED_NODE_CLASS_SELECTOR: string

variable STATE_OVERRIDE

Indicates that a state update was caused by an override and not via transactions or user commands.

This is the case when setContent is called and for all controlled updates within a react editor instance.

Signature:

STATE_OVERRIDE = "__state_override__"

variable ZERO_WIDTH_SPACE_CHAR

A character useful for separating inline nodes.

Signature:

ZERO_WIDTH_SPACE_CHAR = "\u200B"

Remarks:

Typically used in decorations as follows.

document.createTextNode(ZERO_WIDTH_SPACE_CHAR);

This produces the html entity '8203'

interface AnchorHeadProps

A parameter for a non empty selection which defines the anchor (the non movable part of the selection) and the head (the movable part of the selection).

Signature:

export interface AnchorHeadProps 

property anchor

The non-movable part of the selection.

Signature:

anchor: number;

property head

The movable part of the selection.

Signature:

head: number;

interface AppendLifecycleProps

Signature:

export interface AppendLifecycleProps extends EditorStateProps 

Extends: EditorStateProps

property previousState

The previous state.

Signature:

previousState: EditorState;

property state

A snapshot of the prosemirror editor state.

Signature:

state: EditorState;

property tr

Update this transaction in order to append.

Signature:

tr: Transaction;

property transactions

The transactions that have already been applied.

Signature:

transactions: readonly Transaction[];

interface ApplySchemaAttributes

Signature:

export interface ApplySchemaAttributes 

property defaults

A function which returns the object of defaults. Since this is for extra attributes a default must be provided.

Signature:

defaults: () => Record<string, {
        default?: JsonPrimitive;
    }>;

property dom

Take the node attributes and create the object of string attributes for storage on the dom node.

Signature:

dom: (nodeOrMark: ProsemirrorNode | Mark) => Record<string, string>;

property parse

Read a value from the dome and convert it into prosemirror attributes.

Signature:

parse: (domNode: Node | string) => ProsemirrorAttributes;

interface ApplyStateLifecycleProps

Signature:

export interface ApplyStateLifecycleProps extends EditorStateProps 

Extends: EditorStateProps

property previousState

The previous state.

Signature:

previousState: EditorState;

property state

A snapshot of the prosemirror editor state.

Signature:

state: EditorState;

property tr

The original transaction which caused this state update.

Signature:

tr: Transaction;

interface AttributesProps

A parameter builder interface containing the attrs property.

Signature:

export interface AttributesProps 

property attrs

An object describing the attrs for a prosemirror mark / node

Signature:

attrs: ProsemirrorAttributes;

interface BaseExtensionOptions

Signature:

export interface BaseExtensionOptions extends Remirror.BaseExtensionOptions 

Extends: Remirror.BaseExtensionOptions

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

property exclude

An object which excludes certain functionality from an extension.

Signature:

exclude?: ExcludeOptions;

property priority

The priority with which this extension should be loaded by the manager.

Signature:

priority?: ExtensionPriority;

Remarks:

Each priority level corresponds to a higher level of importance for the extension within the editor.

When this is set to null the defaultPriority level for the extension will be used instead.

interface BaseFramework

Signature:

export interface BaseFramework<Extension extends AnyExtension> 

property frameworkOutput

The minimum required output from the framework.

Signature:

readonly frameworkOutput: FrameworkOutput<Extension>;

property initialEditorState

The state that is initially passed into the editor.

Signature:

initialEditorState: EditorState;

property name

The name of the framework being used.

Signature:

readonly name: string;

method destroy

Destroy the framework and cleanup all created listeners.

Signature:

destroy(): void;

Returns:

void

interface BuiltinOptions

Signature:

export interface BuiltinOptions extends SuggestOptions, KeymapOptions, DecorationsOptions, InputRulesOptions 

Extends: SuggestOptions, KeymapOptions, DecorationsOptions, InputRulesOptions

property decorations

Add custom decorations to the editor via extension.addHandler. This can be used via the useDecorations hook available from remirror/react.

Signature:

decorations: Handler<(state: EditorState) => DecorationSet>;

property excludeBaseKeymap

When true will exclude the default prosemirror keymap.

Signature:

excludeBaseKeymap?: boolean;

Remarks:

You might want to set this to true if you want to fully customise the keyboard mappings for your editor. Otherwise it is advisable to leave it unchanged.

property exitMarksOnArrowPress

Whether to support exiting marks when the left and right array keys are pressed.

Can be set to

• true - enables exits from both the entrance and the end of the mark

Signature:

exitMarksOnArrowPress?: boolean;

property keymap

The implementation for the extra keybindings added to the settings.

Signature:

keymap?: CustomHandler<PrioritizedKeyBindings>;

Remarks:

This allows for you to add extra key mappings which will be checked before the default keymaps, if they return false then the default keymaps are still checked.

No key mappings are removed in this process.

const extension = BaseKeymapExtension.create({ keymap: {
  Enter({ state, dispatch }) {
    //... Logic
    return true;
  },
}});

property persistentSelectionClass

This setting is for adding a decoration to the selected text and can be used to preserve the marker for the selection when the editor loses focus.

You can set it as 'selection' to match the default styles provided by @remirror/styles.

Signature:

persistentSelectionClass?: AcceptUndefined<string | boolean>;

property placeholderClassName

The className that is added to all placeholder positions

'@defaultValue 'placeholder'

Signature:

placeholderClassName?: Static<string>;

property placeholderNodeName

The default element that is used for all placeholders.

Signature:

placeholderNodeName?: Static<string>;

property selectParentNodeOnEscape

Determines whether the escape key selects the current node.

Signature:

selectParentNodeOnEscape?: boolean;

property shortcuts

The shortcuts to use for named keybindings in the editor.

Signature:

shortcuts?: KeyboardShortcuts;

property shouldSkipInputRule

Handlers which can be registered to check whether an input rule should be active at this time.

The handlers are given a parameter with the current state, the fullMatch and the captureGroup and can determine whether the input rule should still be run.

Return true to prevent any active input rules from being triggered.

Signature:

shouldSkipInputRule?: Handler<ShouldSkipFunction>;

property suggester

The custom handler which enables adding suggesters.

Signature:

suggester: CustomHandler<Suggester>;

property undoInputRuleOnBackspace

Determines whether a backspace after an input rule has been applied should reverse the effect of the input rule.

Signature:

undoInputRuleOnBackspace?: boolean;

interface ChainedCommandProps

Signature:

export interface ChainedCommandProps 

property enabled

Check to see whether the command chain can be run. Returns true when the command can be run.

if (chain.insertText('hello').enabled()) {
  doSomething();
}

Signature:

enabled: () => boolean;

property run

Dispatches the chained commands.

chain.insertText('hello').run();

This will run all commands in the chain regardless of whether a previous command was not able to be run.

If exitEarly is set to true the commands will stop running at the first chainable command which doesn't return true.

Signature:

run: (options?: {
        exitEarly?: boolean;
    }) => void;

property tr

Applies the updates to the transaction without dispatching the transaction.

This can be used to update a transaction without applying the update.

Signature:

tr: () => Transaction;

interface CommandDecoratorMessageProps

Signature:

export interface CommandDecoratorMessageProps 

property active

True when the extension is active.

Signature:

active: boolean;

property attrs

Predefined attributes which can influence the returned value.

Signature:

attrs: ProsemirrorAttributes | undefined;

property enabled

True when the command is enabled.

Signature:

enabled: boolean;

property t

A translation utility for translating a predefined string / or message descriptor.

Signature:

t: I18nFormatter;

interface CommandExtensionMeta

Signature:

export interface CommandExtensionMeta 

property forcedUpdates

Signature:

forcedUpdates?: UpdatableViewProps[];

interface CommandOptions

Signature:

export interface CommandOptions 

property trackerClassName

The className that is added to all tracker positions

'@defaultValue 'remirror-tracker-position'

Signature:

trackerClassName?: Static<string>;

property trackerNodeName

The default element that is used for all trackers.

Signature:

trackerNodeName?: Static<string>;

interface CommandShape

The type of a non chainable command. It is a function with an enabled method to check whether the command can be run.

Signature:

export interface CommandShape<Parameter extends any[] = []> 

property active

Commands which are not attached to a node extension or a mark extension can optionally define custom isActive checker.

This is used for checking if centerAlign is active from the @remirror/extension-node-formatting.

Signature:

active?: () => boolean;

property enabled

Returns true when the command can be run and false when it can't be run. It basically runs the command without dispatching it to see whether it returns true or false.

Signature:

enabled: (...args: Parameter) => boolean;

Remarks:

Some commands can have rules and restrictions. For example, formatting like bold is disabled within a codeBlock. In this case commands.toggleBold.enabled() returns false when within a codeBlock and true when outside.

property original

This function gives you access to the original command defined by the extension in your editor exactly as it was defined.

The function returns a function that takes the CommandFunctionProps of { state, dispatch?, tr, view? } object.

function command(...args: any[]) => CommandFunction;

Signature:

original: (...args: Parameter) => CommandFunction;

Signature:

(...args: Parameter): void;

interface CommandUiDecoratorOptions

Signature:

export interface CommandUiDecoratorOptions 

property description

An i18n compatible description which can be used to provide extra context for the command.

Signature:

description?: CommandDecoratorMessage;

property icon

The default command icon to use if this has a UI representation.

Signature:

icon?: CommandDecoratorValue<CoreIcon | CommandUiIcon>;

property label

A label for the command with support for i18n. This makes use of babel-plugin-macros to generate the message.

Signature:

label?: CommandDecoratorMessage;

property shortcut

A keyboard shortcut which can be used to run the specified command.

Rather than defining this here, you should create a decorated keyBinding and set the command name option. This way the shortcut will dynamically be added at runtime.

Signature:

shortcut?: CommandDecoratorShortcut;

interface CommandUiIcon

Signature:

export interface CommandUiIcon 

property name

The icon name.

Signature:

name: CoreIcon;

property sub

Text placed in a subscript position. For ltr this is in the bottom right hand corner.

Signature:

sub?: string;

property sup

Text placed in a superscript position. For ltr this is in the top right hand corner of the icon.

Signature:

sup?: string;

interface CreateDocumentNodeProps

Signature:

export interface CreateDocumentNodeProps extends SchemaProps, Partial<CustomDocumentProps>, StringHandlerProps 

Extends: SchemaProps, Partial<CustomDocumentProps>, StringHandlerProps

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

property content

The content to render

Signature:

content: RemirrorContentType;

property onError

The error handler which is called when the JSON passed is invalid.

Signature:

onError?: InvalidContentHandler;

property schema

Each Remirror Editor has an automatically generated schema associated with it. The schema is a ProseMirror primitive which describes the kind of nodes that may occur in the document, and the way they are nested. For example, it might say that the top-level node can contain one or more blocks, and that paragraph nodes can contain any number of inline nodes, with any marks applied to them.

Read more about it [here](https://prosemirror.net/docs/guide/\#schema).

Signature:

schema: EditorSchema;

property selection

The selection that the user should have in the created node.

TODO add 'start' | 'end' | number for a better developer experience.

Signature:

selection?: PrimitiveSelection;

property stringHandler

A function which transforms a string into a prosemirror node.

Signature:

stringHandler?: 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 CreateEditorStateProps

Signature:

export interface CreateEditorStateProps extends Omit<StringHandlerProps, 'stringHandler'> 

Extends: Omit<StringHandlerProps, 'stringHandler'>

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

property content

This is where content can be supplied to the Editor.

Signature:

content?: RemirrorContentType;

Remarks:

Content can either be - a string (which will be parsed by the stringHandler) - JSON object matching Prosemirror expected shape - A top level ProsemirrorNode

If this is left undefined then the editor will use the default empty doc.

property selection

The selection that the user should have in the created node.

Signature:

selection?: PrimitiveSelection;

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 CreateExtensionPlugin

An interface for creating custom plugins in your remirror editor.

Signature:

export interface CreateExtensionPlugin<PluginState = any> extends Pick<PluginSpec<PluginState>, 'props' | 'state' | 'key' | 'view' | 'filterTransaction' | 'appendTransaction'> 

Extends: Pick<PluginSpec<PluginState>, 'props' | 'state' | 'key' | 'view' | 'filterTransaction' | 'appendTransaction'>

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

Additional properties are allowed on plugin specs, which can be read via [Plugin.spec](https://prosemirror.net/docs/ref/\#state.Plugin.spec).

Signature:

[key: string]: any;

interface CustomDocumentProps

Signature:

export interface CustomDocumentProps 

property document

The root or custom document to use when referencing the dom.

This can be used to support SSR.

Signature:

document: Document;

interface DecorationPlaceholderMeta

Signature:

export interface DecorationPlaceholderMeta 

property added

The trackers to add.

Signature:

added?: Array<WithBase<DecorationPlaceholder>>;

property clearTrackers

When set to true will delete all the active trackers.

Signature:

clearTrackers?: boolean;

property removed

The trackers to remove.

Signature:

removed?: unknown[];

property updated

The trackers to update with new data. Data is an object and is used to include properties like progress for progress indicators. Only widget decorations can be updated in this way.

Signature:

updated?: Array<{
        id: unknown;
        data: any;
    }>;

interface DecorationsOptions

Signature:

export interface DecorationsOptions 

property decorations

Add custom decorations to the editor via extension.addHandler. This can be used via the useDecorations hook available from remirror/react.

Signature:

decorations: Handler<(state: EditorState) => DecorationSet>;

property persistentSelectionClass

This setting is for adding a decoration to the selected text and can be used to preserve the marker for the selection when the editor loses focus.

You can set it as 'selection' to match the default styles provided by @remirror/styles.

Signature:

persistentSelectionClass?: AcceptUndefined<string | boolean>;

property placeholderClassName

The className that is added to all placeholder positions

'@defaultValue 'placeholder'

Signature:

placeholderClassName?: Static<string>;

property placeholderNodeName

The default element that is used for all placeholders.

Signature:

placeholderNodeName?: Static<string>;

interface DefaultDocNodeOptions

Signature:

export interface DefaultDocNodeOptions 

property ignoreAttributes

When true will not check any of the attributes for any of the nodes.

Signature:

ignoreAttributes?: boolean;

property ignoreDocAttributes

Set this to true to only test whether the content is identical to the default and not the parent node.

Signature:

ignoreDocAttributes?: boolean;

interface DelayedPlaceholderCommandProps

Signature:

export interface DelayedPlaceholderCommandProps<Value> 

property onFailure

Called when a failure is encountered.

Signature:

onFailure?: CommandFunction<{
        error: any;
    }>;

property onSuccess

Called when the promise succeeds and the placeholder still exists. If no placeholder can be found (for example, the user has deleted the entire document) then the failure handler is called instead.

Signature:

onSuccess: (value: Value, range: FromToProps, commandProps: CommandFunctionProps) => boolean;

property placeholder

The placeholder configuration.

Signature:

placeholder: DecorationPlaceholder;

property promise

A function that returns a promise.

Signature:

promise: DelayedPromiseCreator<Value>;

interface DocChangedOptions

Signature:

export interface DocChangedOptions 

property docChanged

Signature:

docChanged?: Handler<(props: StateUpdateLifecycleProps) => void>;

interface DOMCompatibleAttributes

Signature:

export interface DOMCompatibleAttributes 

Signature:

[attribute: string]: string | number | undefined;

interface EditorStateProps

A parameter builder interface containing the state property.

Signature:

export interface EditorStateProps 

property state

A snapshot of the prosemirror editor state.

Signature:

state: EditorState;

interface EditorViewProps

A parameter builder interface containing the view property.

Signature:

export interface EditorViewProps 

property view

An instance of the Prosemirror editor view.

Signature:

view: EditorView;

interface ExcludeOptions

Signature:

export interface ExcludeOptions extends Partial<Remirror.ExcludeOptions> 

Extends: Partial<Remirror.ExcludeOptions>

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

interface Extension

Declaration merging since the constructor property can't be defined on the actual class.

Signature:

interface Extension<Options extends ValidOptions = EmptyShape> extends Remirror.BaseExtension 

Extends: Remirror.BaseExtension

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

property constructor

The type of the constructor for the extension.

Signature:

constructor: ExtensionConstructor<Options>;

property requiredExtensions

An extension can declare the extensions it requires.

Signature:

requiredExtensions?: AnyExtensionConstructor[];

Remarks:

When creating the extension manager the extension will be checked for required extension as well as a quick check to see if the required extension is already included. If not present a descriptive error will be thrown.

interface ExtensionCommandReturn

The return signature for an extensions command method.

Signature:

export interface ExtensionCommandReturn 

Signature:

[command: string]: ExtensionCommandFunction;

interface ExtensionConstructor

Signature:

export interface ExtensionConstructor<Options extends ValidOptions = EmptyShape> extends BaseClassConstructor<Options, BaseExtensionOptions>, Partial<Remirror.StaticExtensionOptions> 

Extends: BaseClassConstructor<Options, BaseExtensionOptions>, Partial<Remirror.StaticExtensionOptions>

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

ExtensionConstructor.(new)

Signature:

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

Parameters:

Parameter	Type	Description
args	ExtensionConstructorProps<Options>

Returns:

Extension<Options>

property defaultPriority

The default priority level for all instance of this extension.

Signature:

readonly defaultPriority: ExtensionPriority;

interface ExtensionHelperReturn

The return signature for an extensions helper method.

Signature:

export interface ExtensionHelperReturn 

Signature:

[helper: string]: AnyFunction;

interface ExtensionListProps

Signature:

export interface ExtensionListProps<Extension extends AnyExtension = AnyExtension> 

property extensions

The extensions property.

Signature:

readonly extensions: readonly Extension[];

interface ExtensionStore

The extension store which is shared across all extensions. It provides access to methods and data that can be used throughout the extension lifecycle.

Signature:

export interface ExtensionStore extends Remirror.ExtensionStore 

Extends: Remirror.ExtensionStore

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

interface FileUploader

Signature:

export interface FileUploader<NodeAttributes> 

property abort

Aborts the upload operation.

Signature:

abort: () => void;

property insert

Inserts the file (but doesn't start the upload operation) and returns an object with this to be uploaded file's attributes.

Signature:

insert: (file: File) => NodeAttributes;

property upload

Starts the upload operation and returns a promise. The promise will be resolved by a successful upload with uploaded file's attributes, or rejected because of an error.

upload can update the object context to update information during the upload process. context will be passed to the render function. The render function can add a listener to context by using context.addListener to get the updated values. The default render function will try to find the keys loaded and total in context, which are two numbers that represent the progress of the upload.

Signature:

upload: (context: UploadContext) => Promise<NodeAttributes>;

interface FindProsemirrorNodeResult

Signature:

export interface FindProsemirrorNodeResult extends ProsemirrorNodeProps 

Extends: ProsemirrorNodeProps

property depth

The depth the node. Equal to 0 if node is the root.

Signature:

depth: number;

property end

The end position of the node.

Signature:

end: number;

property node

The prosemirror node

Signature:

node: ProsemirrorNode;

property pos

Points to position directly before the node.

Signature:

pos: number;

property start

The start position of the node.

Signature:

start: number;

interface FragmentStringHandlerOptions

Signature:

export interface FragmentStringHandlerOptions extends BaseStringHandlerOptions 

Extends: BaseStringHandlerOptions

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

property fragment

When true will create a fragment from the provided string.

Signature:

fragment: true;

interface FrameworkOptions

Signature:

export interface FrameworkOptions<Extension extends AnyExtension, Props extends FrameworkProps<Extension>> 

property element

When provided the view will immediately be inserted into the dom within this element.

Signature:

element?: Element;

property getProps

A method for getting the passed in props.

Signature:

getProps: () => Props;

property initialEditorState

The initial editor state

Signature:

initialEditorState: EditorState;

interface FrameworkOutput

This is the base output that is created by a framework.

Signature:

export interface FrameworkOutput<Extension extends AnyExtension> extends Remirror.ManagerStore<Extension> 

Extends: Remirror.ManagerStore<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 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 FrameworkProps

The base options for an editor wrapper. This is used within the react and dom implementations.

Signature:

export interface FrameworkProps<Extension extends AnyExtension> 

property attributes

Adds attributes directly to the prosemirror element.

Signature:

attributes?: Record<string, string> | AttributePropFunction<Extension>;

property autoFocus

When set to true focus will be place on the editor as soon as it first loads.

Signature:

autoFocus?: FocusType;

property classNames

Additional classes which can be passed into the the editor wrapper. These are placed on root Prosemirror element and can be used to effect styling within the editor.

Signature:

classNames?: ClassName[];

property editable

Determines whether this editor is editable or not.

Signature:

editable?: boolean;

property initialContent

Set the starting value for the editor.

Without setting the value prop onChange remirror renders as an uncontrolled component. Value changes are passed back out of the editor and there is now way to set the value via props. As a result this is the only opportunity to directly control the rendered text.

Signature:

initialContent?: RemirrorContentType | [RemirrorContentType, PrimitiveSelection];

property label

Sets the accessibility label for the editor instance.

Signature:

label?: string;

property manager

Pass in the extension manager.

The manager is responsible for handling all Prosemirror related functionality.

Signature:

manager: RemirrorManager<Extension>;

property onBlur

An event listener which is called whenever the editor is blurred.

Signature:

onBlur?: (params: RemirrorEventListenerProps<Extension>, event: Event) => void;

property onChange

Called on every change to the Prosemirror state.

Signature:

onChange?: RemirrorEventListener<Extension>;

property onDispatchTransaction

A method called when the editor is dispatching the transaction.

Signature:

onDispatchTransaction?: TransactionTransformer;

Remarks:

Use this to update the transaction which will be used to update the editor state.

property onFocus

An event listener which is called whenever the editor gains focus.

Signature:

onFocus?: (params: RemirrorEventListenerProps<Extension>, event: Event) => void;

interface FromToProps

A parameter builder interface describing a from/to range.

Signature:

export interface FromToProps 

property from

The starting position in the document.

Signature:

from: number;

property to

The ending position in the document.

Signature:

to: number;

interface GetAttributesProps

Signature:

export interface GetAttributesProps 

property getAttributes

A helper function for setting the attributes for a transformation .

Signature:

getAttributes: GetAttributes;

interface GetChangeOptionsReturn

Signature:

export interface GetChangeOptionsReturn<Options extends ValidOptions> 

property changes

An object with all the keys showing what's been changed. This should be used to determine the children extensions which should be updated.

Signature:

changes: Readonly<Required<ChangedOptions<Options>>>;

Remarks:

Using this can prevent unnecessary updates. It's possible for new properties to be passed that are identical to the previous, by checking if the object was changed this can be avoided.

This uses a discriminated union. When the changed property is true then the object has a value as well.

if (changes.myProperty.changed) {
  doSomething(changes.myProperty.value);
}

property options

The next value of the properties after the update.This also includes values which have not been changed.

Signature:

options: GetFixedDynamic<Options>;

property pickChanged

Pick the changed values by their key. An object populated with only the changed items will be returned to you.

Signature:

pickChanged: PickChanged<Options>;

interface GetMarkRange

Signature:

export interface GetMarkRange extends FromToProps 

Extends: FromToProps

property from

The starting position in the document.

Signature:

from: number;

property mark

The mark that was found within the active range.

Signature:

mark: Mark;

property text

The text contained by this mark.

Signature:

text: string;

property to

The ending position in the document.

Signature:

to: number;

interface HandlerKeyOptions

Signature:

export interface HandlerKeyOptions<ReturnType = any, Args extends any[] = any[]> 

property earlyReturnValue

When this value is encountered the handler will exit early.

Set the value to '__IGNORE__' to ignore the early return value.

Signature:

earlyReturnValue?: LiteralUnion<typeof IGNORE, Primitive> | ((value: unknown) => boolean);

property reducer

Allows combining the values from the handlers together to produce a single reduced output value.

Signature:

reducer?: {
        accumulator: (accumulated: ReturnType, latestValue: ReturnType, ...args: Args) => ReturnType;
        getDefault: (...args: Args) => ReturnType;
    };

interface HelperDecoratorOptions

Signature:

export interface HelperDecoratorOptions 

interface IdentifierSchemaAttributes

The interface for adding extra attributes to multiple node and mark extensions.

Signature:

export interface IdentifierSchemaAttributes 

property attributes

The attributes to be added.

Signature:

attributes: SchemaAttributes;

property identifiers

The nodes or marks to add extra attributes to.

This can either be an array of the strings or the following specific identifiers:

• 'nodes' for all nodes - 'marks' for all marks - 'all' for all extensions which touch the schema.

Signature:

identifiers: Identifiers;

interface IdentifiersObject

With tags, you can select a specific sub selection of marks and nodes. This will be the basis for adding advanced formatting to remirror.

import { ExtensionTag } from 'remirror';
import { createCoreManager, CorePreset } from 'remirror/extensions';
import { WysiwygPreset } from 'remirror/extensions';

const manager = createCoreManager(() => [new WysiwygPreset(), new CorePreset()], {
  extraAttributes: [
    {
      identifiers: {
        tags: [ExtensionTag.NodeBlock],
        type: 'node',
      },
      attributes: { role: 'presentation' },
    },
  ],
});

Each item in the tags array should be read as an OR so the following would match Tag1 OR Tag2 OR Tag3.

{ tags: ["Tag1", "Tag2", "Tag3"] }

The type property (mark | node) is exclusive and limits the type of extension names that will be matched. When mark is set it only matches with marks.

Signature:

export interface IdentifiersObject 

property behavior

Determines how the array of tags are combined:

• all - the extension only matches when all tags are present. - any - the extension will match if it includes any of the specified tags.

This only affects the tags property.

The saddest part about this property is that, as a UK resident, I've succumbed to using the Americanized spelling instead of the Oxford Dictionary defined spelling of behaviour 😢

Signature:

behavior?: 'all' | 'any';

property excludeNames

Exclude these names from being matched.

Signature:

excludeNames?: string[];

property excludeTags

Exclude these tags from being matched. Will always exclude if any of the tags

Signature:

excludeTags?: string[];

property names

Additional names to include. These will still be added even if the extension name matches with excludeTags member.

Signature:

names?: string[];

property tags

Will find relevant names based on the defined behaviour.

Signature:

tags?: ExtensionTagType[];

property type

Whether to restrict by whether this is a [[ProsemirrorNode]] or a [[Mark]]. Leave blank to accept all types.

Signature:

type?: 'node' | 'mark';

interface InputRulesOptions

Signature:

export interface InputRulesOptions 

property shouldSkipInputRule

Handlers which can be registered to check whether an input rule should be active at this time.

The handlers are given a parameter with the current state, the fullMatch and the captureGroup and can determine whether the input rule should still be run.

Return true to prevent any active input rules from being triggered.

Signature:

shouldSkipInputRule?: Handler<ShouldSkipFunction>;

interface InsertNodeOptions

Signature:

export interface InsertNodeOptions 

property attrs

Signature:

attrs?: ProsemirrorAttributes;

property content

The content to insert.

Signature:

content?: Fragment | ProsemirrorNode | ProsemirrorNode[] | string;

property marks

Signature:

marks?: Array<Mark | string | MarkType>;

property range

Warning: This API is now obsolete.

use selection property instead.

Signature:

range?: FromToProps;

property replaceEmptyParentBlock

Set this to true to replace an empty parent block with this content (if the content is a block node).

Signature:

replaceEmptyParentBlock?: boolean;

property selection

Set the selection where the command should occur.

Signature:

selection?: PrimitiveSelection;

interface InvalidContentBlock

A description of an invalid content block (representing a node or a mark).

Signature:

export interface InvalidContentBlock 

property invalidParentMark

Whether this block has any invalid wrapping marks.

Signature:

invalidParentMark: boolean;

property invalidParentNode

Whether this block already has an invalid parent node. Invalid blocks are displayed from the deepest content outward. By checking whether a parent has already been identified as invalid you can choose to only transform the root invalid node.

Signature:

invalidParentNode: boolean;

property name

The name of the node or mark that is invalid.

Signature:

name: string;

property path

The json path to the invalid part of the RemirrorJSON object.

Signature:

path: Array<string | number>;

property type

The type of content that is invalid.

Signature:

type: 'mark' | 'node';

interface InvalidContentHandlerProps

This interface is used when there is an attempt to add content to a schema

Signature:

export interface InvalidContentHandlerProps 

property error

The error that was thrown.

Signature:

error: Error;

property invalidContent

The list of invalid nodes and marks.

Signature:

invalidContent: InvalidContentBlock[];

property json

The JSON representation of the content that caused the error.

Signature:

json: RemirrorJSON;

property transformers

Transformers can be used to apply certain strategies for dealing with invalid content.

Signature:

transformers: typeof transformers;

interface KeybindingDecoratorOptions

Signature:

export interface KeybindingDecoratorOptions<Options extends Shape = Shape> 

property command

The name of the command that the keybinding should be attached to.

Signature:

command?: Remirror.AllUiCommandNames;

property isActive

This can be used to set a keybinding as inactive based on the provided options.

Signature:

isActive?: (options: Options, store: Remirror.ExtensionStore) => boolean;

property priority

The priority for this keybinding.

Signature:

priority?: ExtensionPriority | ((options: Options, store: Remirror.ExtensionStore) => ExtensionPriority);

property shortcut

The keypress sequence to intercept.

• Enter - Shift-Enter

Signature:

shortcut: KeyboardShortcut;

interface KeyBindingProps

Signature:

export interface KeyBindingProps extends CommandFunctionProps 

Extends: CommandFunctionProps

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

property next

A method to run the next (lower priority) command in the chain of keybindings.

Signature:

next: () => boolean;

Remarks:

This can be used to chain together keyboard commands between extensions. It's possible that you will need to combine actions when a key is pressed while still running the default action. This method allows for the greater degree of control.

By default, matching keyboard commands from the different extension are chained together (in order of priority) until one returns true. Calling next changes this default behaviour. The default keyboard chaining stops and you are given full control of the keyboard command chain.

interface KeymapOptions

Signature:

export interface KeymapOptions 

property excludeBaseKeymap

When true will exclude the default prosemirror keymap.

Signature:

excludeBaseKeymap?: boolean;

Remarks:

You might want to set this to true if you want to fully customise the keyboard mappings for your editor. Otherwise it is advisable to leave it unchanged.

property exitMarksOnArrowPress

Whether to support exiting marks when the left and right array keys are pressed.

Can be set to

• true - enables exits from both the entrance and the end of the mark

Signature:

exitMarksOnArrowPress?: boolean;

property keymap

The implementation for the extra keybindings added to the settings.

Signature:

keymap?: CustomHandler<PrioritizedKeyBindings>;

Remarks:

This allows for you to add extra key mappings which will be checked before the default keymaps, if they return false then the default keymaps are still checked.

No key mappings are removed in this process.

const extension = BaseKeymapExtension.create({ keymap: {
  Enter({ state, dispatch }) {
    //... Logic
    return true;
  },
}});

property selectParentNodeOnEscape

Determines whether the escape key selects the current node.

Signature:

selectParentNodeOnEscape?: boolean;

property shortcuts

The shortcuts to use for named keybindings in the editor.

Signature:

shortcuts?: KeyboardShortcuts;

property undoInputRuleOnBackspace

Determines whether a backspace after an input rule has been applied should reverse the effect of the input rule.

Signature:

undoInputRuleOnBackspace?: boolean;

interface ListenerProps

Signature:

export interface ListenerProps extends Partial<EditorStateProps>, Partial<TransactionProps> 

Extends: Partial<EditorStateProps>, Partial<TransactionProps>

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

property transactions

When the state updates are not controlled and it was a transaction that caused the state to be updated this value captures all the transaction updates caused by prosemirror plugins hook state methods like filterTransactions and appendTransactions.

This is for advanced users only.

Signature:

transactions?: readonly Transaction[];

interface ManagerEvents

Signature:

export interface ManagerEvents 

property clone

Called whenever the manager is cloned with the newly created manager instance.

This is mainly used for testing so that the RemirrorTester can always reference the latest manager.

Signature:

clone: (manager: AnyRemirrorManager) => void;

property destroy

An event listener which is called whenever the manager is destroyed.

Signature:

destroy: () => void;

property recreate

Called whenever the manager is recreated with the newly created manager instance.

This is mainly used for testing so that the RemirrorTester can always reference the latest manager.

Signature:

recreate: (manager: AnyRemirrorManager) => void;

property stateUpdate

Called when the state is updated.

Signature:

stateUpdate: (props: StateUpdateLifecycleProps) => void;

interface MarkExtension

Signature:

export interface MarkExtension<Options extends ValidOptions = EmptyShape> extends Extension<Options>, Remirror.MarkExtension 

Extends: Extension<Options>, Remirror.MarkExtension

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

interface MarkExtensionSpec

The schema spec definition for a mark extension

Signature:

export interface MarkExtensionSpec extends Pick<MarkSpec, 'attrs' | 'inclusive' | 'excludes' | 'group' | 'spanning' | 'parseDOM'> 

Extends: Pick<MarkSpec, 'attrs' | 'inclusive' | 'excludes' | 'group' | 'spanning' | 'parseDOM'>

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

property toDOM

Defines the default way marks of this type should be serialized to DOM/HTML.

Signature:

toDOM?: (mark: MarkWithAttributes, inline: boolean) => DOMOutputSpec;

interface MarkTypeProps

A parameter builder interface containing the mark type property.

Signature:

export interface MarkTypeProps 

property type

The prosemirror mark type instance.

Signature:

type: MarkType | string;

interface MarkTypesProps

A parameter builder interface containing the types property which takes a single type or multiple types.

Signature:

export interface MarkTypesProps 

Remarks:

This can be used to check whether a certain type matches any of these types.

property types

The prosemirror node types to use.

Signature:

types: MarkType | MarkType[];

interface MarkWithAttributesProps

Signature:

export interface MarkWithAttributesProps<Attributes extends object = object> 

property mark

A mark with a specific shape for node.attrs

Signature:

mark: MarkWithAttributes<Attributes>;

interface MetaOptions

Signature:

export interface MetaOptions 

property capture

Set to true to capture meta data on commands and keybindings. This creates a wrapper around every command and keybinding and as a result it may lead to a performance penalty.

Signature:

capture?: Static<boolean>;

interface NewChainedCommandProps

Signature:

export interface NewChainedCommandProps<Extension extends AnyExtension, Chained extends ChainedIntersection<Extension> = ChainedIntersection<Extension>> 

property new

Returns a new chain, with an empty command set.

chain.toggleBold();
chain.new().toggleItalic().run(); // Only toggleItalic would be run

Signature:

new: (tr?: Transaction) => ChainedFromExtensions<Extension, Chained>;

interface NodeExtension

Signature:

export interface NodeExtension<Options extends ValidOptions = EmptyShape> extends Extension<Options>, Remirror.NodeExtension 

Extends: Extension<Options>, Remirror.NodeExtension

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

interface NodeExtensionSpec

The schema spec definition for a node extension

Signature:

export interface NodeExtensionSpec extends Partial<Pick<NodeSpec, 'content' | 'marks' | 'group' | 'inline' | 'atom' | 'attrs' | 'selectable' | 'draggable' | 'code' | 'defining' | 'isolating' | 'parseDOM' | 'toDebugString' | 'allowGapCursor' | 'leafText'>> 

Extends: Partial<Pick<NodeSpec, 'content' | 'marks' | 'group' | 'inline' | 'atom' | 'attrs' | 'selectable' | 'draggable' | 'code' | 'defining' | 'isolating' | 'parseDOM' | 'toDebugString' | 'allowGapCursor' | 'leafText'>>

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

property toDOM

Defines the default way a node of this type should be serialized to DOM/HTML (as used by [[DOMSerializer.fromSchema]].

Should return a [[DOMOutputSpec]] that describes a DOM node, with an optional number zero (“hole”) in it to indicate where the node's content should be inserted.

Signature:

toDOM?: (node: NodeWithAttributes) => DOMOutputSpec;

interface NodeMarkOptions

Signature:

export interface NodeMarkOptions 

property mark

Signature:

mark?: Mark;

property node

Signature:

node?: ProsemirrorNode;

interface NodeStringHandlerOptions

Signature:

export interface NodeStringHandlerOptions extends BaseStringHandlerOptions 

Extends: BaseStringHandlerOptions

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

property fragment

Signature:

fragment?: false;

interface NodeTypeProps

A parameter builder interface containing the node type property.

Signature:

export interface NodeTypeProps 

property type

A prosemirror node type instance.

Signature:

type: NodeType | string;

interface NodeTypesProps

A parameter builder interface containing the types property which takes a single type or multiple types.

Signature:

export interface NodeTypesProps 

Remarks:

This can be used to check whether a certain type matches any of these types.

property types

The prosemirror node types to use.

Signature:

types: NodeType | string | Array<NodeType | string>;

interface NodeWithAttributesProps

Signature:

export interface NodeWithAttributesProps<Attributes extends object = object> 

property node

A prosemirror node with a specific shape for node.attrs

Signature:

node: NodeWithAttributes<Attributes>;

interface NodeWithPosition

A node with it's start position.

Signature:

export interface NodeWithPosition extends ProsemirrorNodeProps, PosProps 

Extends: ProsemirrorNodeProps, PosProps

property node

The prosemirror node

Signature:

node: ProsemirrorNode;

property pos

The position of the referenced prosemirror item.

Signature:

pos: number;

interface OnSetOptionsProps

Signature:

export interface OnSetOptionsProps<Options extends ValidOptions> extends Pick<GetChangeOptionsReturn<Options>, 'changes' | 'pickChanged'>, UpdateReasonProps 

Extends: Pick<GetChangeOptionsReturn<Options>, 'changes' | 'pickChanged'>, UpdateReasonProps

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

property initialOptions

The initial options for the extension. Falls back to default options.

Signature:

initialOptions: RemoveAnnotations<GetFixedDynamic<Options>>;

property options

The next value of the properties after the update.This also includes values which have not been changed.

Signature:

options: RemoveAnnotations<GetFixedDynamic<Options>>;

property reason

Describes what triggered an update.

• set - the change was triggered by an update in some properties - reset - the user has specifically requested to reset all properties to their initial defaults - init - the update is happening when the preset is being It will receive all the items as changes.

Signature:

reason: UpdateReason;

interface OptionalMarkProps

Signature:

export interface OptionalMarkProps 

property mark

The nullable prosemirror mark which may or may not exist.

Signature:

mark: Mark | null | undefined;

interface OptionalProsemirrorNodeProps

Signature:

export interface OptionalProsemirrorNodeProps 

property node

The nullable prosemirror node which may or may not exist. Please note that the find will fail if this does not exists.

To prevent cryptic errors this should always be the doc node.

Signature:

node: ProsemirrorNode | null | undefined;

interface PasteRulesOptions

Signature:

export interface PasteRulesOptions 

interface PlaceholderConfig

Signature:

export interface PlaceholderConfig extends TextProps 

Extends: TextProps

property className

Signature:

className: string;

property text

The text to insert or work with.

Signature:

text: string;

interface PluginsOptions

Signature:

export interface PluginsOptions 

property appendTransaction

The event handler which can be used by hooks to listen to intercept updates to the transaction.

Signature:

appendTransaction?: Handler<(props: AppendLifecycleProps) => void>;

property applyState

The event handler which can be used by hooks to listen to state updates when they are being applied to the editor.

Signature:

applyState?: Handler<(props: ApplyStateLifecycleProps) => void>;

interface PosProps

Signature:

export interface PosProps 

property pos

The position of the referenced prosemirror item.

Signature:

pos: number;

interface PredicateProps

Signature:

export interface PredicateProps<Type> 

property predicate

The predicate function

Signature:

predicate: (value: Type) => boolean;

interface ProsemirrorNodeProps

Signature:

export interface ProsemirrorNodeProps 

property node

The prosemirror node

Signature:

node: ProsemirrorNode;

interface RangeProps

Signature:

export interface RangeProps 

property range

The from/to interface.

Signature:

range: FromToProps;

interface RegExpProps

Signature:

export interface RegExpProps 

property regexp

The regular expression to test against.

Signature:

regexp: RegExp;

interface RemirrorErrorOptions

The invariant options which only show up during development.

Signature:

export interface RemirrorErrorOptions 

property code

The code for the built in error.

Signature:

code?: ErrorConstant;

property disableLogging

When true logging to the console is disabled.

Signature:

disableLogging?: boolean;

property message

The message to add to the error.

Signature:

message?: string;

interface RemirrorEventListenerProps

Signature:

export interface RemirrorEventListenerProps<Extension extends AnyExtension> extends EditorStateProps, Remirror.ListenerProperties<Extension>, EditorViewProps 

Extends: EditorStateProps, Remirror.ListenerProperties<Extension>, EditorViewProps

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

property createStateFromContent

Manually create a new state object with the desired content.

Signature:

createStateFromContent: CreateStateFromContent;

property firstRender

True when this is the first render of the editor. This applies when the editor is first attached to the DOM.

Signature:

firstRender: boolean;

property internalUpdate

A shorthand way of checking whether the update was triggered by editor usage (internal) or overwriting the state.

• true The update was triggered by a change in the prosemirror doc or an update to the selection. In these cases tr will have a value. - false The update was caused by a call to setContent or resetContent

Signature:

internalUpdate: boolean;

property previousState

The previous state.

Signature:

previousState: EditorState;

property state

A snapshot of the prosemirror editor state.

Signature:

state: EditorState;

property tr

The original transaction which caused this state update.

This allows for inspecting the reason behind the state change. When undefined this means that the state was updated externally.

If available: - Metadata on the transaction can be inspected. tr.getMeta - Was the change caused by added / removed content? tr.docChanged - Was ths change caused by an updated selection? tr.selectionSet - tr.steps can be inspected for further granularity.

Signature:

tr?: Transaction;

property transactions

When the state updates are not controlled and it was a transaction that caused the state to be updated this value captures all the transaction updates caused by prosemirror plugins hook state methods like filterTransactions and appendTransactions.

This is for advanced users only.

Signature:

transactions?: readonly Transaction[];

property view

An instance of the Prosemirror editor view.

Signature:

view: EditorView;

interface RemirrorIdentifierShape

The core shape of any remirror specific object.

Signature:

export interface RemirrorIdentifierShape 

property [__INTERNAL_REMIRROR_IDENTIFIER_KEY__]

Signature:

[__INTERNAL_REMIRROR_IDENTIFIER_KEY__]: RemirrorIdentifier;

interface RemirrorJSON

A JSON representation of the prosemirror Node.

Signature:

export interface RemirrorJSON 

Remarks:

This is used to represent the top level doc nodes content.

property attrs

Signature:

attrs?: Record<string, Literal>;

property content

Signature:

content?: RemirrorJSON[];

property marks

Signature:

marks?: Array<ObjectMark | string>;

property text

Signature:

text?: string;

property type

Signature:

type: string;

interface RemirrorManager

Signature:

export interface RemirrorManager<Extension extends AnyExtension> 

property constructor

The constructor for the [[RemirrorManager]].

Signature:

constructor: RemirrorManagerConstructor;

interface RemirrorMessage

The definition for a translatable string in Remirror

Signature:

export interface RemirrorMessage 

property comment

Context and/or description of this message's purpose

Signature:

comment: string;

property id

The unique id of this message within the Remirror code base

These are namespaced via dot separation. I.e. "extension.command.toggle-bold.label"

Signature:

id: string;

property message

The default text for this message, this may be using ICU message format, and require an appropriate library to parse it.

Signature:

message: string;

interface RemoveMarkProps

Signature:

export interface RemoveMarkProps extends MakeNullable<MarkTypeProps, 'type'> 

Extends: MakeNullable<MarkTypeProps, 'type'>

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

property expand

Whether to expand empty selections to the current mark range.

Signature:

expand?: boolean;

property range

Warning: This API is now obsolete.

use selection property instead.

Signature:

range?: FromToProps;

property selection

The selection to apply to the command.

Signature:

selection?: PrimitiveSelection;

interface ReplaceTextProps

Signature:

export interface ReplaceTextProps extends Partial<AttributesProps> 

Extends: Partial<AttributesProps>

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

property appendText

The text to append.

Signature:

appendText?: string;

property content

Optional text content to include.

Signature:

content?: string;

property keepSelection

Whether to keep the original selection after the replacement.

Signature:

keepSelection?: boolean;

property range

Warning: This API is now obsolete.

• use selection instead.

Signature:

range?: FromToProps;

property selection

The selected part of the document to replace.

Signature:

selection?: PrimitiveSelection;

property type

The content type to be inserted in place of the range / selection.

Signature:

type?: NodeType | MarkType | string;

interface ResolvedPosProps

Signature:

export interface ResolvedPosProps 

property $pos

A prosemirror resolved pos with provides helpful context methods when working with a position in the editor.

Signature:

$pos: ResolvedPos;

interface SchemaAttributesObject

The configuration object for adding extra attributes to the node or mark in the editor schema.

Please note that using this will alter the schema, so changes here can cause breaking changes for users if not managed carefully.

TODO #462 is being added to support migrations so that breaking changes can be handled automatically.

Signature:

export interface SchemaAttributesObject extends Pick<AttributeSpec, 'validate'> 

Extends: Pick<AttributeSpec, 'validate'>

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

property default

The default value for the attribute being added, if set to null then the initial value for any nodes is not required.

If set to undefined then a value must be provided whenever a node or mark that has this extra attribute is created. ProseMirror will throw if the value isn't required. Make sure you know what you're doing before setting it to undefined as it could cause unintended errors.

This can also be a function which enables dynamically setting the attribute based on the value returned.

Signature:

default: JsonPrimitive | DynamicAttributeCreator;

property parseDOM

A function used to extract the attribute from the dom and must be applied to the parseDOM method.

If a string is set this will automatically call domNode.getAttribute('<name>').

Signature:

parseDOM?: ((domNode: HTMLElement) => JsonPrimitive | undefined) | string;

property toDOM

Takes the node attributes and applies them to the dom.

This is called in the toDOM method.

• If a string is set this will always be the constant value set in the dom. - If a tuple with two items is set then the first string is the attribute to set in the dom and the second string is the value that will be stored.

Return undefined from the function call to skip adding the attribute.

Signature:

toDOM?: string | [string, string?] | Record<string, string> | ((attrs: ProsemirrorAttributes, options: NodeMarkOptions) => string | [string, string?] | Record<string, string> | null | undefined);

interface SchemaJSON

The ProseMirror Schema as a JSON object.

Signature:

export interface SchemaJSON<Nodes extends string = string, Marks extends string = string> 

property marks

The marks within the schema.

Signature:

marks: Record<Marks, MarkSpec>;

property nodes

The nodes of the schema.

Signature:

nodes: Record<Nodes, NodeSpec>;

interface SchemaProps

A parameter builder interface containing the schema property.

Signature:

export interface SchemaProps 

property schema

Each Remirror Editor has an automatically generated schema associated with it. The schema is a ProseMirror primitive which describes the kind of nodes that may occur in the document, and the way they are nested. For example, it might say that the top-level node can contain one or more blocks, and that paragraph nodes can contain any number of inline nodes, with any marks applied to them.

Read more about it [here](https://prosemirror.net/docs/guide/\#schema).

Signature:

schema: EditorSchema;

interface SelectionProps

Signature:

export interface SelectionProps 

property selection

The text editor selection

Signature:

selection: Selection;

interface ShouldSkipProps

Signature:

export interface ShouldSkipProps extends EditorStateProps, UpdateCaptureTextProps 

Extends: EditorStateProps, UpdateCaptureTextProps

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

property ruleType

The type of input rule that has been activated

Signature:

ruleType: 'mark' | 'node' | 'plain';

property state

A snapshot of the prosemirror editor state.

Signature:

state: EditorState;

interface StateJSON

Signature:

export interface StateJSON 

property doc

The main ProseMirror doc.

Signature:

doc: RemirrorJSON;

property selection

The current selection.

Signature:

selection: FromToProps;

This allows for plugin state to be stored, although this is not currently used in remirror.

Signature:

[key: string]: unknown;

interface StateUpdateLifecycleProps

Signature:

export interface StateUpdateLifecycleProps extends EditorStateProps 

Extends: EditorStateProps

property firstUpdate

When true, this lets you know that it is the first state update to happen. This can be used to run an action that should only be run when the state is first available.

Signature:

firstUpdate: boolean;

property previousState

The previous state.

Signature:

previousState: EditorState;

property state

A snapshot of the prosemirror editor state.

Signature:

state: EditorState;

property tr

The original transaction which caused this state update.

This allows for inspecting the reason behind the state change. When undefined this means that the state was updated externally.

If available: - Metadata on the transaction can be inspected. tr.getMeta - Was the change caused by added / removed content? tr.docChanged - Was ths change caused by an updated selection? tr.selectionSet - tr.steps can be inspected for further granularity.

Signature:

tr?: Transaction;

property transactions

When the state updates are not controlled and it was a transaction that caused the state to be updated this value captures all the transaction updates caused by prosemirror plugins hook state methods like filterTransactions and appendTransactions.

This is for advanced users only, and I personally have never needed it.

Signature:

transactions?: readonly Transaction[];

interface StringHandler

A function that converts a string into a ProsemirrorNode.

Signature:

export interface StringHandler 

Signature:

(params: NodeStringHandlerOptions): ProsemirrorNode;

Signature:

(params: FragmentStringHandlerOptions): Fragment;

interface StringHandlerProps

Signature:

export interface StringHandlerProps 

property stringHandler

A function which transforms a string into a prosemirror node.

Signature:

stringHandler?: 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 SuggestOptions

Signature:

export interface SuggestOptions 

property suggester

The custom handler which enables adding suggesters.

Signature:

suggester: CustomHandler<Suggester>;

interface TextProps

Signature:

export interface TextProps 

property text

The text to insert or work with.

Signature:

text: string;

interface ToggleBlockItemProps

Signature:

export interface ToggleBlockItemProps extends NodeTypeProps, Partial<AttributesProps> 

Extends: NodeTypeProps, Partial<AttributesProps>

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

property preserveAttrs

Whether to preserve the attrs when toggling a block item. This means that extra attributes that are shared between nodes will be maintained.

Signature:

preserveAttrs?: boolean;

property toggleType

The type to toggle back to. Usually this is the paragraph node type.

Signature:

toggleType?: NodeType | string;

property type

A prosemirror node type instance.

Signature:

type: NodeType | string;

interface TransactionProps

Signature:

export interface TransactionProps 

property tr

The prosemirror transaction

Signature:

tr: Transaction;

interface TriggerChangeProps

Signature:

export interface TriggerChangeProps 

property triggerChange

Whether or not to trigger this as a change and call any handlers.

Signature:

triggerChange?: boolean;

interface TrStateProps

Signature:

export interface TrStateProps 

property trState

The shared types between a state and a transaction. Allows for commands to operate on either a state object or a transaction object.

Signature:

trState: EditorState | Transaction;

interface UpdateMarkProps

Signature:

export interface UpdateMarkProps extends Partial<RangeProps>, Partial<AttributesProps> 

Extends: Partial<RangeProps>, Partial<AttributesProps>

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

property appendText

The text to append.

Signature:

appendText?: string;

property type

The type of the

Signature:

type: MarkType;

interface UpdateReasonProps

Signature:

export interface UpdateReasonProps 

property reason

Describes what triggered an update.

• set - the change was triggered by an update in some properties - reset - the user has specifically requested to reset all properties to their initial defaults - init - the update is happening when the preset is being It will receive all the items as changes.

Signature:

reason: UpdateReason;

interface UpdateStateProps

Signature:

export interface UpdateStateProps extends Partial<TransactionProps>, EditorStateProps, TriggerChangeProps 

Extends: Partial<TransactionProps>, EditorStateProps, TriggerChangeProps

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

property state

A snapshot of the prosemirror editor state.

Signature:

state: EditorState;

property transactions

When the state updates are not controlled and it was a transaction that caused the state to be updated this value captures all the transaction updates caused by prosemirror plugins hook state methods like filterTransactions and appendTransactions.

This is for advanced users only.

Signature:

transactions?: readonly Transaction[];

property triggerChange

Whether or not to trigger this as a change and call any handlers.

Signature:

triggerChange?: boolean;

interface UploadContext

Signature:

export interface UploadContext 

property addListener

Signature:

addListener: (listener: UploadContextListener) => () => void;

property get

Signature:

get: (key: string) => unknown;

property set

Signature:

set: (key: string, value: unknown) => void;

interface UploadPlaceholderPayload

Signature:

export interface UploadPlaceholderPayload<NodeAttributes extends AbstractNodeAttributes> 

property context

Signature:

context: UploadContext;

property fileUploader

Signature:

fileUploader: FileUploader<NodeAttributes>;

interface ValidOptions

This constrains the valid options that can be passed into your extensions or presets.

Signature:

export interface ValidOptions 

Signature:

[option: string]: any;

interface WidgetPlaceholder

Signature:

export interface WidgetPlaceholder<Data = any> extends BasePlaceholder, DataProps<Data> 

Extends: BasePlaceholder, DataProps<Data>

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

property pos

Widget trackers only support fixed positions.

Signature:

pos: number;

property type

Declare this as a widget tracker.

Widget trackers support adding custom components to the created dom element.

Signature:

type: 'widget';

method createElement

Called the first time this widget decoration is added to the dom.

Signature:

createElement?(view: EditorView, pos: number): HTMLElement;

Parameters:

Parameter	Type	Description
view	EditorView
pos	number

Returns:

HTMLElement

method onDestroy

Called when the widget decoration is removed from the dom.

Signature:

onDestroy?(view: EditorView, element: HTMLElement): void;

Parameters:

Parameter	Type	Description
view	EditorView
element	HTMLElement

Returns:

void

method onUpdate

Called whenever the position tracker updates with the new position.

Signature:

onUpdate?(view: EditorView, pos: number, element: HTMLElement, data: any): void;

Parameters:

Parameter	Type	Description
view	EditorView
pos	number
element	HTMLElement
data	any

Returns:

void

type AcceptUndefined

Wrap a type in this to let the DefaultOptions know that it can accept undefined as the default value.

Signature:

export type AcceptUndefined<Type> = Type & AcceptUndefinedAnnotation;

type ActiveFromExtensions

The type which gets the active methods from the provided extensions.

Signature:

export type ActiveFromExtensions<Extension extends AnyExtension> = Record<GetNodeNameUnion<Extension> extends never ? string : GetNodeNameUnion<Extension>, (attrs?: ProsemirrorAttributes) => boolean> & Record<GetMarkNameUnion<Extension> extends never ? string : GetMarkNameUnion<Extension>, (attrs?: ProsemirrorAttributes) => boolean>;

References: AnyExtension, GetNodeNameUnion, ProsemirrorAttributes, GetMarkNameUnion

type AddCustomHandler

Signature:

export type AddCustomHandler<Options extends ValidOptions> = (props: Partial<GetCustomHandler<Options>>) => Dispose | undefined;

References: ValidOptions, GetCustomHandler, Dispose

type AddHandler

Signature:

export type AddHandler<Options extends ValidOptions> = <Key extends keyof GetHandler<Options>>(key: Key, method: GetHandler<Options>[Key]) => Dispose;

References: ValidOptions, GetHandler, Dispose

type AnyExtension

The type which is applicable to any extension instance.

**NOTE** & object forces VSCode to use the name AnyExtension rather than print out Replace<Extension<Shape>, Remirror.AnyExtensionOverrides>

Signature:

export type AnyExtension = Replace<Extension<Shape>, Remirror.AnyExtensionOverrides> & object;

References: Replace, Extension, Shape

type AnyExtensionConstructor

The type which is applicable to any extension instance.

Signature:

export type AnyExtensionConstructor = Replace<ExtensionConstructor<any>, {
    new (...args: any[]): AnyExtension;
}>;

References: Replace, ExtensionConstructor, AnyExtension

type AnyManagerStore

Signature:

export type AnyManagerStore = Remirror.ManagerStore<any>;

type AnyMarkExtension

The type for any potential MarkExtension.

Signature:

export type AnyMarkExtension = Replace<MarkExtension<Shape>, Remirror.AnyExtensionOverrides> & object;

References: Replace, MarkExtension, Shape

type AnyNodeExtension

The type for any potential NodeExtension.

Signature:

export type AnyNodeExtension = Replace<NodeExtension<Shape>, Remirror.AnyExtensionOverrides> & object;

References: Replace, NodeExtension, Shape

type AnyPlainExtension

The type for any potential PlainExtension.

Signature:

export type AnyPlainExtension = Replace<PlainExtension<Shape>, Remirror.AnyExtensionOverrides> & object;

References: Replace, PlainExtension, Shape

type AnyRemirrorManager

Signature:

export type AnyRemirrorManager = Simplify<Replace<RemirrorManager<AnyExtension>, {
    clone: () => AnyRemirrorManager;
    store: Replace<Remirror.ManagerStore<AnyExtension>, {
        chain: any;
    }>;
    output: Replace<FrameworkOutput<AnyExtension>, {
        chain: any;
        manager: AnyRemirrorManager;
    }> | undefined;
    view: EditorView;
    addView: (view: EditorView) => void;
    attachFramework: (framework: any, updateHandler: (props: StateUpdateLifecycleProps) => void) => void;
    ['~E']: AnyExtension;
    ['~AN']: string;
    ['~N']: string;
    ['~M']: string;
    ['~P']: string;
}>>;

References: Simplify, Replace, RemirrorManager, AnyExtension, AnyRemirrorManager, FrameworkOutput, StateUpdateLifecycleProps

type AttributePropFunction

Signature:

export type AttributePropFunction<Extension extends AnyExtension> = (params: RemirrorEventListenerProps<Extension>) => Record<string, string>;

References: AnyExtension, RemirrorEventListenerProps

type AttrsFromExtensions

The type which gets the attributes for the provided node or mark. It returns undefined if the node / mark is not active.

Signature:

export type AttrsFromExtensions<Extension extends AnyExtension> = Record<GetNodeNameUnion<Extension> extends never ? string : GetNodeNameUnion<Extension>, (attrs?: ProsemirrorAttributes) => ProsemirrorAttributes | undefined> & Record<GetMarkNameUnion<Extension> extends never ? string : GetMarkNameUnion<Extension>, (attrs?: ProsemirrorAttributes) => ProsemirrorAttributes | undefined>;

References: AnyExtension, GetNodeNameUnion, ProsemirrorAttributes, GetMarkNameUnion

type BuiltinPreset

Signature:

export type BuiltinPreset = TagsExtension | SchemaExtension | AttributesExtension | PluginsExtension | InputRulesExtension | PasteRulesExtension | NodeViewsExtension | SuggestExtension | CommandsExtension | HelpersExtension | KeymapExtension | DocChangedExtension | UploadExtension | DecorationsExtension;

References: TagsExtension, SchemaExtension, AttributesExtension, PluginsExtension, InputRulesExtension, PasteRulesExtension, NodeViewsExtension, SuggestExtension, CommandsExtension, HelpersExtension, KeymapExtension, DocChangedExtension, UploadExtension, DecorationsExtension

type ChainedFromExtensions

Signature:

export type ChainedFromExtensions<Extension extends AnyExtension, Chained extends ChainedIntersection<Extension> = ChainedIntersection<Extension>> = _ChainedFromExtensions<Extension, Chained> & ((tr: Transaction) => _ChainedFromExtensions<Extension, Chained>);

References: AnyExtension, ChainedIntersection

type ChainedIntersection

Signature:

export type ChainedIntersection<Extension extends AnyExtension> = UnionToIntersection<MapToChainedCommand<GetCommands<Extension> | GetDecoratedCommands<Extension>>>;

References: AnyExtension, MapToChainedCommand, GetCommands

type ChangedOptions

Highlights all the properties that have changed.

Signature:

export type ChangedOptions<Options extends ValidOptions> = {
    [Key in keyof GetDynamic<Options>]: Changes<GetDynamic<Options>[Key]>;
};

References: ValidOptions, GetDynamic

type ClassName

Signature:

export type ClassName<T = string> = T | ClassValue;

type CombinedTags

The shape of the tag data stored by the extension manager.

This data can be used by other extensions to dynamically determine which nodes should affected by commands / plugins / keys etc...

Signature:

export type CombinedTags<Name extends string = string> = Record<ExtensionTagType, Name[]>;

References: ExtensionTagType

type CommandDecoratorMessage

Signature:

export type CommandDecoratorMessage = CommandDecoratorValue<string>;

References: CommandDecoratorValue

type CommandDecoratorOptions

Signature:

export type CommandDecoratorOptions<Options extends Shape = Shape> = ChainableCommandDecoratorOptions<Options> | NonChainableCommandDecoratorOptions<Options>;

References: Shape

type CommandDecoratorShortcut

Signature:

export type CommandDecoratorShortcut = string | {
    shortcut: string;
    attrs: ProsemirrorAttributes;
} | string[] | Array<{
    shortcut: string;
    attrs: ProsemirrorAttributes;
}>;

References: ProsemirrorAttributes

type CommandDecoratorValue

Signature:

export type CommandDecoratorValue<Value> = ((props: CommandDecoratorMessageProps) => Value) | Value;

References: CommandDecoratorMessageProps

type CommandNames

Utility type for pulling all the command names from a list

Signature:

export type CommandNames<Extension extends AnyExtension> = StringKey<CommandsFromExtensions<Extension>>;

References: AnyExtension, StringKey, CommandsFromExtensions

type CommandsFromExtensions

Utility type which receives an extension and provides the type of actions it makes available.

Signature:

export type CommandsFromExtensions<Extension extends AnyExtension, Expanded extends AnyExtension = GetExtensions<Extension>> = UnionToIntersection<MapToUnchainedCommand<GetCommands<Expanded> | GetDecoratedCommands<Expanded>>>;

References: AnyExtension, GetExtensions, MapToUnchainedCommand, GetCommands

type CoreIcon

The core icons used throughout the editor.

Signature:

export type CoreIcon = keyof typeof Core;

type CreateStateFromContent

Signature:

export type CreateStateFromContent = (content: RemirrorContentType, selection?: PrimitiveSelection) => EditorState;

References: RemirrorContentType, PrimitiveSelection

type CustomHandler

A handler type which gives you full control of what the handler can do and what is can return.

For example with keybindings you will probably receive an object of event handlers which need to be added to the keymap plugin. The custom handler annotation allows you to accept functions or objects which return non void values and set upt the handler for yourself.

For custom handlers the options value is meaningless and can only be changed through the addCustomHandler method.

Signature:

export type CustomHandler<Type> = Type & CustomHandlerAnnotation;

type CustomHandlerKey

Signature:

export type CustomHandlerKey<Options extends ValidOptions> = StringKey<GetCustomHandler<Options>>;

References: ValidOptions, StringKey, GetCustomHandler

type CustomHandlerKeyList

Signature:

export type CustomHandlerKeyList<Options extends ValidOptions> = Array<CustomHandlerKey<Options>>;

References: ValidOptions, CustomHandlerKey

type CustomHandlerShape

Signature:

export type CustomHandlerShape<Type extends Shape> = {
    [Key in keyof Type]: CustomHandler<Type[Key]>;
};

References: Shape, CustomHandler

type DecorationPlaceholder

Signature:

export type DecorationPlaceholder = WidgetPlaceholder | NodePlaceholder | InlinePlaceholder;

References: WidgetPlaceholder

type DefaultExtensionOptions

Get the expected type signature for the defaultOptions. Requires that every optional setting key (except for keys which are defined on the BaseExtensionOptions) has a value assigned.

Signature:

export type DefaultExtensionOptions<Options extends ValidOptions> = DefaultOptions<Options, BaseExtensionOptions>;

References: ValidOptions, BaseExtensionOptions

type DelayedPromiseCreator

Signature:

export type DelayedPromiseCreator<Value> = (props: CommandFunctionProps) => Promise<Value>;

type DelayedValue

Signature:

export type DelayedValue<Type> = Promise<Type> | (() => Promise<Type>);

type Dispose

A function used to cleanup any effects from the Handler or Custom options.

In react you would use the return value from the addHandler or setCustom as the clean up function for your useEffect hooks.

Signature:

export type Dispose = () => void;

type DOMOutputSpec

Defines the return type of the toDOM methods for both nodes and marks

Signature:

export type DOMOutputSpec = string | DOMOutputSpecArray;

Remarks:

This differs from the default Prosemirror type definition which seemed didn't work at the time of writing.

Additionally we don't want to support domNodes in the toDOM spec since this will create problems once SSR is fully supported

DOMOutputSpec is a description of a DOM structure. Can be either a string, which is interpreted as a text node, a DOM node (not supported by remirror), which is interpreted as itself, a {dom: Node, contentDOM: ?Node} object (not supported by remirror), or an array (DOMOutputSpecArray).

An array (DOMOutputSpecArray) describes a DOM element. The first value in the array should be a string—the name of the DOM element, optionally prefixed by a namespace URL and a space. If the second element is plain object (DOMCompatibleAttributes), it is interpreted as a set of attributes for the element. Any elements after that (including the 2nd if it's not an attribute object) are interpreted as children of the DOM elements, and must either be valid DOMOutputSpec values, or the number zero.

The number zero (pronounced “hole”) is used to indicate the place where a node's child nodes should be inserted. If it occurs in an output spec, it should be the only child element in its parent node.

type DomSizeUnit

Signature:

export type DomSizeUnit = (typeof DOM_SIZE_UNITS)[number];

References: DOM_SIZE_UNITS

type Dynamic

Wrap an option in this type to indicate to the TypeScript compiler that it is a dynamic property. It can be set through the constructor parameter at instantiation and can by updated throughout the lifetime of your editor.

Signature:

export type Dynamic<Type> = Type & DynamicAnnotation;

Remarks:

This is the default type assumed and it can be left unused.

import { Dynamic, PlainExtension } from 'remirror';

interface MyExtensionOptions {
  isSwitchedOn: Dynamic<boolean>;
}

export class MyExtension extends PlainExtension<MyExtensionOptions> {
  get name() {
    return 'my' as const';
  }
}

new extension = new MyExtension({ isSwitchedOn: false });
extension.setOptions({ isSwitchedOn: true });

type DynamicAttributeCreator

A dynamic attributes creator. This is used to create attributes that are dynamically set when a node is first added to the dom.

Signature:

export type DynamicAttributeCreator = (nodeOrMark: ProsemirrorNode | Mark) => JsonPrimitive;

References: JsonPrimitive

type DynamicKey

Signature:

export type DynamicKey<Options extends ValidOptions> = StringKey<GetDynamic<Options>>;

References: ValidOptions, StringKey, GetDynamic

type DynamicKeyList

Signature:

export type DynamicKeyList<Options extends ValidOptions> = Array<DynamicKey<Options>>;

References: ValidOptions, DynamicKey

type DynamicOptionsOfConstructor

Get the options from any constructor. Can be used for both presets and extensions.

Signature:

export type DynamicOptionsOfConstructor<Constructor extends AnyConstructor> = GetPartialDynamic<GetOptions<InstanceType<Constructor>>>;

References: AnyConstructor, GetPartialDynamic, GetOptions

type DynamicShape

Signature:

export type DynamicShape<Type extends object> = {
    [Key in keyof Type]: Dynamic<Type[Key]>;
};

References: Dynamic

type ExtensionCommandFunction

Signature:

export type ExtensionCommandFunction = (...args: any[]) => CommandFunction;

type ExtensionConstructorProps

Auto infers the parameter for the constructor. If there is a required static option then the TypeScript compiler will error if nothing is passed in.

Signature:

export type ExtensionConstructorProps<Options extends ValidOptions> = ConstructorProps<Options, BaseExtensionOptions>;

References: ValidOptions, BaseExtensionOptions

type ExtensionDecoratorOptions

Signature:

export type ExtensionDecoratorOptions<Options extends Shape = EmptyShape> = DefaultPriorityProps & IfHasRequiredProperties<DefaultExtensionOptions<Options>, DefaultOptionsProps<Options>, Partial<DefaultOptionsProps<Options>>> & IfEmpty<GetStatic<Options>, Partial<StaticKeysProps<Options>>, StaticKeysProps<Options>> & IfEmpty<GetHandler<Options>, Partial<HandlerKeysProps<Options>>, HandlerKeysProps<Options>> & IfEmpty<GetCustomHandler<Options>, Partial<CustomHandlerKeysProps<Options>>, CustomHandlerKeysProps<Options>> & Partial<Remirror.StaticExtensionOptions>;

References: Shape, EmptyShape, IfHasRequiredProperties, DefaultExtensionOptions, IfEmpty, GetStatic, GetHandler, GetCustomHandler

type ExtensionTag

The type for the extension tags..

Signature:

export type ExtensionTag = Remirror.ExtensionTags & typeof BaseExtensionTag;

type ExtensionTagType

The string values which can be used as extension tags.

Signature:

export type ExtensionTagType = ExtensionTag[keyof ExtensionTag];

References: ExtensionTag

type FocusType

The type of arguments acceptable for the focus parameter.

• Can be a prosemirror selection - A range of { from: number; to: number } - A single position with a number - A string of 'start' | 'end' - true which sets the focus to the current position or start.

Signature:

export type FocusType = PrimitiveSelection | boolean;

References: PrimitiveSelection

type ForcedUpdateMeta

Provides the list of Prosemirror EditorView props that should be updated/

Signature:

export type ForcedUpdateMeta = UpdatableViewProps[];

References: UpdatableViewProps

type GetAcceptUndefined

Get the properties that accept undefined as a default.

Signature:

export type GetAcceptUndefined<Options extends Shape> = ConditionalPick<Options, AcceptUndefinedAnnotation> & Partial<ConditionalPick<PickPartial<Options>, AcceptUndefinedAnnotation>>;

References: Shape, PickPartial

type GetAttributes

A function which takes a regex match array (strings) or a single string match and transforms it into an Attributes object.

Signature:

export type GetAttributes = ProsemirrorAttributes | GetAttributesFunction;

References: ProsemirrorAttributes

type GetCommands

Get the commands from a RemirrorManager, Extension or Preset.

Signature:

export type GetCommands<Type extends {
    ['~C']: unknown;
}> = Type['~C'];

type GetConstructor

Get the constructor of an instance.

Signature:

export type GetConstructor<Type extends {
    constructor: unknown;
}> = Type['constructor'];

type GetConstructorProps

The options that can be passed into a constructor.

Signature:

export type GetConstructorProps<Options extends ValidOptions> = GetStatic<Options> & GetDynamic<Options>;

References: ValidOptions, GetStatic, GetDynamic

type GetCustomHandler

Get the object event handler Options from the options type.

Signature:

export type GetCustomHandler<Options extends Shape> = ConditionalPick<Options, CustomHandlerAnnotation> & Partial<ConditionalPick<PickPartial<Options>, CustomHandlerAnnotation>>;

References: Shape, PickPartial

type GetDynamic

Get the dynamic Options from the options type.

Signature:

export type GetDynamic<Options extends Shape> = Omit<ConditionalExcept<Options, Exclude<Remirror.ValidOptionsExtender[keyof Remirror.ValidOptionsExtender], DynamicAnnotation>>, keyof ConditionalPick<PickPartial<Options>, Exclude<Remirror.ValidOptionsExtender[keyof Remirror.ValidOptionsExtender], DynamicAnnotation>>>;

References: Shape, PickPartial

type GetExtensions

Get the extension type and the extension type of all sub extensions.

This uses recursive conditional types which are only available in typescript@4.1 https://github.com/microsoft/TypeScript/pull/40002

Signature:

export type GetExtensions<Extension> = AnyExtension extends Extension ? AnyExtension : Extension extends AnyExtension ? // Now create the union of the provided extension and it's recursively
Extension | GetExtensions<Extension['~E']> : AnyExtension;

References: AnyExtension, GetExtensions

type GetFixed

Signature:

export type GetFixed<Options extends ValidOptions> = Readonly<Required<Options>>;

References: ValidOptions

type GetFixedCustomHandler

Signature:

export type GetFixedCustomHandler<Options extends ValidOptions> = Readonly<Required<GetCustomHandler<Options>>>;

References: ValidOptions, GetCustomHandler

type GetFixedDynamic

Signature:

export type GetFixedDynamic<Options extends ValidOptions> = Readonly<Required<GetDynamic<Options>>>;

References: ValidOptions, GetDynamic

type GetFixedProps

Signature:

export type GetFixedProps<Options extends ValidOptions> = GetFixedDynamic<Options> & GetFixedStatic<Options>;

References: ValidOptions, GetFixedDynamic, GetFixedStatic

type GetFixedStatic

Signature:

export type GetFixedStatic<Options extends ValidOptions> = Readonly<Required<GetStatic<Options>>>;

References: ValidOptions, GetStatic

type GetFlippedStatic

Signature:

export type GetFlippedStatic<Options extends ValidOptions> = FlipPartialAndRequired<Options>;

References: ValidOptions, FlipPartialAndRequired

type GetHandler

Get the event handler Options from the options type.

Signature:

export type GetHandler<Options extends Shape> = ConditionalPick<Options, HandlerAnnotation> & Partial<ConditionalPick<PickPartial<Options>, HandlerAnnotation>>;

References: Shape, PickPartial

type GetHelpers

Get the helpers provided by an from a RemirrorManager, Extension or Preset.

Signature:

export type GetHelpers<Type extends {
    ['~H']: unknown;
}> = Type['~H'];

type GetMappedCustomHandler

Signature:

export type GetMappedCustomHandler<Options extends ValidOptions> = {
    [Key in keyof GetCustomHandler<Options>]: Array<GetCustomHandler<Options>[Key]>;
};

References: ValidOptions, GetCustomHandler

type GetMappedHandler

Signature:

export type GetMappedHandler<Options extends ValidOptions> = {
    [Key in keyof GetHandler<Options>]: Array<[
        priority: ExtensionPriority,
        handler: GetHandler<Options>[Key]
    ]>;
};

References: ValidOptions, GetHandler, ExtensionPriority

type GetMarkNameUnion

A utility type for retrieving the name of an extension only when it's a mark extension.

Signature:

export type GetMarkNameUnion<Extension extends AnyExtension, Expanded extends AnyExtension = GetExtensions<Extension>> = Expanded extends AnyMarkExtension ? Expanded['name'] : never;

References: AnyExtension, GetExtensions, AnyMarkExtension

type GetNameUnion

Get the names of all available extensions.

Signature:

export type GetNameUnion<Extension extends AnyExtension> = GetExtensions<Extension>['name'];

References: AnyExtension, GetExtensions

type GetNodeNameUnion

A utility type for retrieving the name of an extension only when it's a node extension.

Signature:

export type GetNodeNameUnion<Extension extends AnyExtension, Expanded extends AnyExtension = GetExtensions<Extension>> = Expanded extends AnyNodeExtension ? Expanded['name'] : never;

References: AnyExtension, GetExtensions, AnyNodeExtension

type GetOptions

Get the static extension settings.

Signature:

export type GetOptions<Type extends {
    ['~O']: unknown;
}> = Type['~O'];

type GetPartialDynamic

Signature:

export type GetPartialDynamic<Options extends ValidOptions> = Partial<GetDynamic<Options>>;

References: ValidOptions, GetDynamic

type GetPlainNameUnion

A utility type for retrieving the name of an extension only when it's a plain extension.

Signature:

export type GetPlainNameUnion<Extension extends AnyExtension, Expanded extends AnyExtension = GetExtensions<Extension>> = Expanded extends AnyPlainExtension ? Expanded['name'] : never;

References: AnyExtension, GetExtensions, AnyPlainExtension

type GetStatic

Get the static Options from the options type.

Signature:

export type GetStatic<Options extends Shape> = ConditionalPick<Options, StaticAnnotation> & Partial<ConditionalPick<PickPartial<Options>, StaticAnnotation>>;

References: Shape, PickPartial

type GetStaticAndDynamic

Options excluding the handlers.

Signature:

export type GetStaticAndDynamic<Options extends Shape> = GetDynamic<Options> & GetStatic<Options>;

References: Shape, GetDynamic, GetStatic

type Handler

A handler is a callback provided by the user to respond to events from your extension. Often times it's helpful to be able to consume a handler in multiple places. Remirror can help automate the registration of handlers that can be consumed multiple times.

Signature:

export type Handler<Type extends AnyFunction<void>> = Type & HandlerAnnotation;

References: AnyFunction

Remarks:

Use this type to annotate a method in your options as an event handler. This will tell the TypeScript compiler to include this event in the relevant methods for composing events together.

To automate the creation of handler code you will also need to set the handlerKeys static property for your Extension or Preset to be an array with the keys you've annotated as a handler. An **eslint** rule will be created to automate this.

import { PlainExtension, extension } from 'remirror';
interface CustomOptions {
  simple: boolean; // Automatically a dynamic property
  onChange: Handler<(value: string) => void>;
}

@extension({ handlerKeys: ['onChange'] }) class CustomExtension
extends PlainExtension<CustomOptions> {get name() {return 'custom' as const;
  }
}

// No prompt to include the `onChange` handler due to the annotation. const
extension = new CustomExtension({simple: false});

const dispose = extension.addHandlers('onChange', (value) => {sideEffect();
});

// Later

dispose();

type HandlerKey

Signature:

export type HandlerKey<Options extends ValidOptions> = StringKey<GetHandler<Options>>;

References: ValidOptions, StringKey, GetHandler

type HandlerKeyList

Signature:

export type HandlerKeyList<Options extends ValidOptions> = Array<HandlerKey<Options>>;

References: ValidOptions, HandlerKey

type HandlerShape

Signature:

export type HandlerShape<Type extends Shape> = {
    [Key in keyof Type]: Handler<Type[Key]>;
};

References: Shape, Handler

type Helper

An annotation which marks decorated helper methods for an extension.

Signature:

export type Helper<Type> = Type extends null | undefined ? Type : Type & HelperAnnotation;

References: HelperAnnotation

type HelperAnnotation

Signature:

export type HelperAnnotation = Flavoring<'HelperAnnotation'>;

References: Flavoring

type HelperFunction

A function with a return signature annotated as a helper.

Signature:

export type HelperFunction<Type extends HelperAnnotation = HelperAnnotation> = AnyFunction<Type>;

References: HelperAnnotation, AnyFunction

type HelperNames

Utility type for pulling all the action names from a list

Signature:

export type HelperNames<Extension extends AnyExtension> = StringKey<HelpersFromExtensions<Extension>>;

References: AnyExtension, StringKey, HelpersFromExtensions

type HelpersFromExtensions

Utility type which receives an extension and provides the type of helpers it makes available.

Signature:

export type HelpersFromExtensions<Extension extends AnyExtension, Expanded extends AnyExtension = GetExtensions<Extension>> = UnionToIntersection<MapHelpers<GetHelpers<Expanded> | GetDecoratedHelpers<Expanded>>>;

References: AnyExtension, GetExtensions, MapHelpers, GetHelpers

type I18nFormatter

The method signature used to translate messages using your chosen i18n solution

Signature:

export type I18nFormatter = (message: RemirrorMessage, values?: Record<string, any>, locale?: string, supportedLocales?: string[]) => string;

References: RemirrorMessage

type Identifiers

The extra identifiers that can be used.

• nodes - match all nodes - marks - match all marks - all - match everything in the editor - string[] - match the selected node and mark names - [[IdentifiersObject]] - match by ExtensionTag and type name.

Signature:

export type Identifiers = 'nodes' | 'marks' | 'all' | readonly string[] | IdentifiersObject;

References: IdentifiersObject

type InvalidContentHandler

The error handler function which should return a valid content type to prevent further errors.

Signature:

export type InvalidContentHandler = (props: InvalidContentHandlerProps) => RemirrorContentType;

References: InvalidContentHandlerProps, RemirrorContentType

type KeyBindingCommandFunction

The command function passed to any of the keybindings.

Signature:

export type KeyBindingCommandFunction = (params: KeyBindingProps) => boolean;

References: KeyBindingProps

type KeyBindingNames

Some commonly used keybinding names to help with auto complete.

Signature:

export type KeyBindingNames = 'Enter' | 'ArrowDown' | 'ArrowUp' | 'ArrowLeft' | 'ArrowRight' | 'PageUp' | 'PageDown' | 'Home' | 'End' | 'Escape' | 'Delete' | 'Backspace' | 'Tab' | 'Shift-Tab';

type KeyBindings

A map of keyboard bindings and their corresponding command functions (a.k.a editing actions).

Signature:

export type KeyBindings = Partial<Record<KeyBindingNames, KeyBindingCommandFunction>> & Record<string, KeyBindingCommandFunction>;

References: KeyBindingNames, KeyBindingCommandFunction

Remarks:

Each keyboard binding returns an object mapping the keys pressed to the KeyBindingCommandFunction. By default the highest priority extension will be run first. If it returns true, then nothing else will be run after. If it returns false then the next (lower priority) extension defining the same keybinding will be run.

It is possible to combine the commands being run by using the next parameter. When called it will run the keybinding command function for the proceeding (lower priority) extension. The act of calling the next method will prevent the default flow from executing.

type KeyBindingsTuple

KeyBindings as a tuple with priority and the keymap.

Signature:

export type KeyBindingsTuple = [priority: ExtensionPriority, bindings: KeyBindings];

References: ExtensionPriority, KeyBindings

type KeyboardShortcut

Signature:

export type KeyboardShortcut = KeyboardShortcutValue | KeyboardShortcutFunction;

References: KeyboardShortcutValue, KeyboardShortcutFunction

type KeyboardShortcutFunction

Signature:

export type KeyboardShortcutFunction<Options extends Shape = Shape> = (options: Options, store: Remirror.ExtensionStore) => KeyboardShortcut;

References: Shape, KeyboardShortcut

type KeyboardShortcuts

Signature:

export type KeyboardShortcuts = keyof typeof keyboardShortcuts | ShortcutMap;

References: keyboardShortcuts, ShortcutMap

type KeyboardShortcutValue

Signature:

export type KeyboardShortcutValue = Listable<LiteralUnion<'Enter' | 'ArrowDown' | 'ArrowUp' | 'ArrowLeft' | 'ArrowRight' | 'Escape' | 'Delete' | 'Backspace', string>>;

References: Listable

type ManagerStoreKeys

Signature:

export type ManagerStoreKeys = keyof Remirror.ManagerStore<any>;

type MapHelpers

A utility type which maps the passed in extension helpers to a method called with manager.data.helpers.helperName().

Signature:

export type MapHelpers<RawHelpers extends Record<string, AnyFunction>> = {
    [Helper in keyof RawHelpers]: RawHelpers[Helper];
};

References: AnyFunction

type MapToChainedCommand

A utility type which maps the chained commands.

Signature:

export type MapToChainedCommand<RawCommands extends Record<string, AnyFunction>> = {
    [Command in keyof RawCommands]: ReturnType<RawCommands[Command]> extends NonChainableCommandFunction ? void : (...args: Parameters<RawCommands[Command]>) => any;
};

References: AnyFunction

type MapToUnchainedCommand

A utility type which maps the passed in extension command in an action that is store in the manager.store.actions.commandName().

Signature:

export type MapToUnchainedCommand<RawCommands extends Record<string, AnyFunction>> = {
    [Command in keyof RawCommands]: CommandShape<Parameters<RawCommands[Command]>>;
};

References: AnyFunction, CommandShape

type MarkSpecOverride

Signature:

export type MarkSpecOverride = Pick<MarkSpec, 'inclusive' | 'excludes' | 'group' | 'spanning' | 'parseDOM'>;

type MarkWithAttributes

Signature:

export type MarkWithAttributes<Attributes extends object = object> = Mark & {
    attrs: ProsemirrorAttributes<Attributes>;
};

References: ProsemirrorAttributes

type Metadata

Signature:

export type Metadata = CommandMetadata | KeyBindingMetadata;

type NamedStringHandlers

This type is the combination of all the registered string handlers for the extension. This is used rather than the StringHandlers in order to enforce the type signature of the handler method, which isn't possible with the interface.

Signature:

export type NamedStringHandlers = {
    [K in keyof Remirror.StringHandlers]: StringHandler;
};

References: StringHandler

type NodeSpecOverride

Signature:

export type NodeSpecOverride = Pick<NodeSpec, 'content' | 'marks' | 'group' | 'inline' | 'atom' | 'selectable' | 'draggable' | 'code' | 'defining' | 'isolating' | 'parseDOM' | 'leafText'>;

type NodeViewMethod

The method signature used to call the Prosemirror nodeViews

Signature:

export type NodeViewMethod<View extends NodeView = NodeView> = (node: ProsemirrorNode, view: EditorView, getPos: () => number | undefined, decorations: readonly Decoration[], innerDecorations: DecorationSource) => View;

type NodeWithAttributes

Signature:

export type NodeWithAttributes<Attributes extends object = object> = ProsemirrorNode & {
    attrs: ProsemirrorAttributes<Attributes>;
};

References: ProsemirrorAttributes

type OptionsOfConstructor

Get the options from any constructor. Can be used for both presets and extensions.

Signature:

export type OptionsOfConstructor<Constructor extends AnyConstructor> = GetOptions<InstanceType<Constructor>>;

References: AnyConstructor, GetOptions

type ParsedDomSize

A tuple for the font size and unit.

Signature:

export type ParsedDomSize = [size: number, unit: DomSizeUnit];

References: DomSizeUnit

type PickChanged

Signature:

export type PickChanged<Options extends ValidOptions> = <Key extends keyof GetFixedDynamic<Options>>(keys: Key[]) => Partial<Pick<GetFixedDynamic<Options>, Key>>;

References: ValidOptions, GetFixedDynamic

type PrimitiveSelection

The type of arguments acceptable for a selection.

• Can be a selection - A range of { from: number; to: number } - A single position with a number - 'start' | 'end' | 'all' - { anchor: number, head: number }

Signature:

export type PrimitiveSelection = Selection | FromToProps | AnchorHeadProps | number | ResolvedPos | 'start' | 'end' | 'all';

References: FromToProps, AnchorHeadProps

type PrioritizedKeyBindings

KeyBindings as an object or prioritized tuple.

Signature:

export type PrioritizedKeyBindings = KeyBindings | KeyBindingsTuple;

References: KeyBindings, KeyBindingsTuple

type ProsemirrorKeyBindings

Signature:

export type ProsemirrorKeyBindings = Record<string, ProsemirrorCommandFunction>;

type RemirrorContentType

Supported content for the remirror editor.

Signature:

export type RemirrorContentType = string | RemirrorJSON | ProsemirrorNode | EditorState;

References: RemirrorJSON

Remarks:

Content can either be - a string (which will be parsed by the stringHandler) - JSON object matching Prosemirror expected shape - A top level ProsemirrorNode

type RemirrorEventListener

Signature:

export type RemirrorEventListener<Extension extends AnyExtension> = (params: RemirrorEventListenerProps<Extension>) => void;

References: AnyExtension, RemirrorEventListenerProps

type RemoveAnnotation

Signature:

export type RemoveAnnotation<Type> = RemoveFlavoring<RemoveFlavoring<RemoveFlavoring<RemoveFlavoring<RemoveFlavoring<Type, 'StaticAnnotation'>, 'DynamicAnnotation'>, 'HandlerAnnotation'>, 'CustomHandlerAnnotation'>, 'AcceptUndefinedAnnotation'>;

References: RemoveFlavoring

type RemoveAnnotations

Signature:

export type RemoveAnnotations<Options extends Shape> = {
    [Key in keyof Options]: RemoveAnnotation<Options[Key]>;
};

References: Shape, RemoveAnnotation

type RemoveAny

Removes [[AnyExtension]] from an extension union. This can be used to make typechecking stricter.

Signature:

export type RemoveAny<Extension> = Extension extends Extension ? AnyExtension extends Extension ? never : Extension : never;

References: AnyExtension

type SchemaAttributes

A mapping of the attribute name to it's default, getter and setter. If the value is set to a string then it will be resolved as the default.

If it is set to a function then it will be a dynamic node or mark.

Signature:

export type SchemaAttributes = Record<string, SchemaAttributesObject | string | DynamicAttributeCreator>;

References: SchemaAttributesObject, DynamicAttributeCreator

type ShortcutMap

A shortcut map which is used by the KeymapExtension.

Signature:

export type ShortcutMap = Record<NamedShortcut, string>;

References: NamedShortcut

type ShouldSkipFunction

A function which is called to check whether an input rule should be skipped.

• When it returns false then it won't be skipped. - When it returns true then it will be skipped.

Signature:

export type ShouldSkipFunction = (props: ShouldSkipProps) => boolean;

References: ShouldSkipProps

type SkippableInputRule

An input rule which can have a shouldSkip property that returns true when the input rule should be skipped.

Signature:

export type SkippableInputRule = ShouldSkip & InputRule;

type Static

Wrap your type in this to represent a static option, which can only be set at instantiation.

import { Static, PlainExtension } from 'remirror';

interface MyExtensionOptions {
  content: Static<string>;
}

export class MyExtension extends PlainExtension<MyExtensionOptions> {
  get name() {
    return 'my' as const';
  }
}

new extension = new MyExtension({ content: 'awesome string' });

The above example creates an extension with the content options set to 'awesome string'. This value is set and can never be updated.

One slight downside to the Static annotation is that is does mess up auto suggestions for string literals.

Signature:

export type Static<Type> = Type & StaticAnnotation;

type StaticKey

Signature:

export type StaticKey<Options extends ValidOptions> = StringKey<GetStatic<Options>>;

References: ValidOptions, StringKey, GetStatic

type StaticKeyList

Signature:

export type StaticKeyList<Options extends ValidOptions> = Array<StaticKey<Options>>;

References: ValidOptions, StaticKey

type StaticShape

Signature:

export type StaticShape<Type extends object> = {
    [Key in keyof Type]: Static<Type[Key]>;
};

References: Static

type StringHandlerOptions

Signature:

export type StringHandlerOptions = NodeStringHandlerOptions | FragmentStringHandlerOptions;

References: NodeStringHandlerOptions, FragmentStringHandlerOptions

type TransactionTransformer

Receives a transaction and returns an new transaction.

Can be used to update the transaction and customise commands.

Signature:

export type TransactionTransformer = (tr: Transaction, state: EditorState) => Transaction;

type UiCommandFunction

Signature:

export type UiCommandFunction = CommandFunction & UiAnnotation;

type UiCommandNames

Utility type for pulling all the command names from a list.

TODO - why doesn't this work.

Signature:

export type UiCommandNames<Extension extends AnyExtension> = StringKey<ConditionalPick<{
    [P in keyof UnionToIntersection<GetDecoratedUiCommands<Extension>>]: keyof UnionToIntersection<GetDecoratedUiCommands<Extension>>[P] extends '__uiAnnotation' ? true : false;
}, true>>;

References: AnyExtension, StringKey

type UnpackedExtension

Get the union extension type from an array of extensions or from a function that returns an array of extension.

Signature:

export type UnpackedExtension<Extension extends AnyExtension[] | (() => AnyExtension[])> = UnpackedReturnType<Extension>[number];

References: AnyExtension

Example 1

const extensions = [new BoldExtension(), new ItalicExtension()];
type Extension = UnpackedExtension<typeof extensions>
// Extension = BoldExtension | ItalicExtension

Example 2

const extensions = () => [new BoldExtension(), new ItalicExtension()];
type Extension = UnpackedExtension<typeof extensions>
// Extension = BoldExtension | ItalicExtension

type UpdatableViewProps

Signature:

export type UpdatableViewProps = 'attributes' | 'editable';

type UploadFileHandler

Signature:

export type UploadFileHandler<NodeAttributes> = () => FileUploader<NodeAttributes>;

References: FileUploader