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

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

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

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

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

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

Signature:

protected get store(): Remirror.ExtensionStore;

method clone

Clone an extension.

Signature:

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

Parameters:

Parameter	Type	Description
args	ExtensionConstructorProps<Options>

Returns:

Extension<Options>

method createExtensions

Signature:

createExtensions(): AnyExtension[];

Returns:

AnyExtension[]

Remarks:

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

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

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

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

method getExtension

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

Signature:

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

Parameters:

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

Returns:

InstanceType<Type>

Remarks:

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

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

import { PlainExtension, OnSetOptionsProps } from 'remirror';

interface ParentOptions { weight?: string }

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

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

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

method isOfType

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

Signature:

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

Parameters:

Parameter	Type	Description
Constructor	Type

Returns:

this is InstanceType<Type>

method onAppendTransaction

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

This is shorthand for the ProsemirrorPlugin.spec.appendTransaction.

Lifecycle Methods

Signature:

onAppendTransaction?(props: AppendLifecycleProps): void;

Parameters:

Parameter	Type	Description
props	AppendLifecycleProps

Returns:

void

method onApplyState

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

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

Lifecycle Methods

Signature:

onApplyState?(props: ApplyStateLifecycleProps): void;

Parameters:

Parameter	Type	Description
props	ApplyStateLifecycleProps

Returns:

void

method onCreate

This handler is called when the RemirrorManager is first created.

Signature:

onCreate?(): Dispose | void;

Returns:

Dispose | void

Remarks:

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

This handler is called before the onView handler.

Lifecycle Methods

method onDestroy

Called when the extension is being destroyed.

Lifecycle Methods

Signature:

onDestroy?(): void;

Returns:

void

method onInitState

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

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

Lifecycle Methods

Signature:

onInitState?(state: EditorState): void;

Parameters:

Parameter	Type	Description
state	EditorState

Returns:

void

method 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

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

Signature:

protected get store(): Remirror.ExtensionStore;

method clone

Clone an extension.

Signature:

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

Parameters:

Parameter	Type	Description
args	ExtensionConstructorProps<Options>

Returns:

Extension<Options>

method createExtensions

Signature:

createExtensions(): AnyExtension[];

Returns:

AnyExtension[]

Remarks:

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

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

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

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

method getExtension

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

Signature:

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

Parameters:

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

Returns:

InstanceType<Type>

Remarks:

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

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

import { PlainExtension, OnSetOptionsProps } from 'remirror';

interface ParentOptions { weight?: string }

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

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

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

method isOfType

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

Signature:

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

Parameters:

Parameter	Type	Description
Constructor	Type

Returns:

this is InstanceType<Type>

method onAppendTransaction

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

This is shorthand for the ProsemirrorPlugin.spec.appendTransaction.

Lifecycle Methods

Signature:

onAppendTransaction?(props: AppendLifecycleProps): void;

Parameters:

Parameter	Type	Description
props	AppendLifecycleProps

Returns:

void

method onApplyState

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

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

Lifecycle Methods

Signature:

onApplyState?(props: ApplyStateLifecycleProps): void;

Parameters:

Parameter	Type	Description
props	ApplyStateLifecycleProps

Returns:

void

method onCreate

This handler is called when the RemirrorManager is first created.

Signature:

onCreate?(): Dispose | void;

Returns:

Dispose | void

Remarks:

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

This handler is called before the onView handler.

Lifecycle Methods

method onDestroy

Called when the extension is being destroyed.

Lifecycle Methods

Signature:

onDestroy?(): void;

Returns:

void

method onInitState

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

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

Lifecycle Methods

Signature:

onInitState?(state: EditorState): void;

Parameters:

Parameter	Type	Description
state	EditorState

Returns:

void

method 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

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

Signature:

protected get store(): Remirror.ExtensionStore;

method clone

Clone an extension.

Signature:

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

Parameters:

Parameter	Type	Description
args	ExtensionConstructorProps<Options>

Returns:

Extension<Options>

method createExtensions

Signature:

createExtensions(): AnyExtension[];

Returns:

AnyExtension[]

Remarks:

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

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

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

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

method 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

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

Signature:

protected get store(): Remirror.ExtensionStore;

method clone

Clone an extension.

Signature:

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

Parameters:

Parameter	Type	Description
args	ExtensionConstructorProps<Options>

Returns:

Extension<Options>

method createExtensions

Signature:

createExtensions(): AnyExtension[];

Returns:

AnyExtension[]

Remarks:

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

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

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

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

method 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

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

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

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

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:

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

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

Signature:

protected get store(): Remirror.ExtensionStore;

method clone

Clone an extension.

Signature:

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

Parameters:

Parameter	Type	Description
args	ExtensionConstructorProps<Options>

Returns:

Extension<Options>

method createExtensions

Signature:

createExtensions(): AnyExtension[];

Returns:

AnyExtension[]

Remarks:

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

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

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

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

method 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

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

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:

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

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

Signature:

protected get store(): Remirror.ExtensionStore;

method clone

Clone an extension.

Signature:

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

Parameters:

Parameter	Type	Description
args	ExtensionConstructorProps<Options>

Returns:

Extension<Options>

method createExtensions

Signature:

createExtensions(): AnyExtension[

package @remirror/core

class AttributesExtension​

Extension.(constructor)​

property constructorName​

property defaultPriority​

property extensions​

property name​

property priority​

property store​

method clone​

method createExtensions​

method getExtension​

method isOfType​

method onAppendTransaction​

method onApplyState​

method onCreate​

method onDestroy​

method onInitState​

method onStateUpdate​

method onView​

class CommandsExtension​

Extension.(constructor)​

property constructorName​

property defaultPriority​

property extensions​

property name​

property priority​

property store​

method applyMark​

method blur​

method clone​

method copy​

method createExtensions​

method createPlugin​

method customDispatch​

method cut​

method delete​

method emptySelection​

method emptyUpdate​

method focus​

method forceUpdate​

method getAllCommandOptions​

method getCommandOptions​

method getCommandProp​

method getExtension​

method insertNewLine​

method insertNode​

method insertText​

method isOfType​

method onAppendTransaction​

method onApplyState​

method onCreate​

method onDestroy​

method onInitState​

method onStateUpdate​

method onView​

method paste​

method removeMark​

method replaceText​

method resetContent​

method selectAll​

method selectMark​

method selectText​

method setBlockNodeType​

method setContent​

method setMeta​

method toggleBlockNodeItem​

method toggleMark​

method toggleWrappingNode​

method updateNodeAttributes​

method wrapInNode​

class DecorationsExtension​

Extension.(constructor)​

property constructorName​

property defaultPriority​

property extensions​

property name​

property priority​

property store​

method addPlaceholder​

class AttributesExtension

Extension.(constructor)

property constructorName

property defaultPriority

property extensions

property name

property priority

property store

method clone

method createExtensions

method getExtension

method isOfType

method onAppendTransaction

method onApplyState

method onCreate

method onDestroy

method onInitState

method onStateUpdate

method onView

class CommandsExtension

Extension.(constructor)

property constructorName

property defaultPriority

property extensions

property name

property priority

property store

method applyMark

method blur

method clone

method copy

method createExtensions

method createPlugin

method customDispatch

method cut

method delete

method emptySelection

method emptyUpdate

method focus

method forceUpdate

method getAllCommandOptions

method getCommandOptions

method getCommandProp

method getExtension

method insertNewLine

method insertNode

method insertText

method isOfType

method onAppendTransaction

method onApplyState

method onCreate

method onDestroy

method onInitState

method onStateUpdate

method onView

method paste

method removeMark

method replaceText

method resetContent

method selectAll

method selectMark

method selectText

method setBlockNodeType

method setContent

method setMeta

method toggleBlockNodeItem

method toggleMark

method toggleWrappingNode

method updateNodeAttributes

method wrapInNode

class DecorationsExtension

Extension.(constructor)

property constructorName

property defaultPriority

property extensions

property name

property priority

property store

method addPlaceholder

method clearPlaceholders