Skip to main content

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:

ParameterTypeDescription
argsExtensionConstructorProps<Options>

property constructorName

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

Signature:

get constructorName(): string;

property defaultPriority

The default priority for this family of extensions.

Signature:

static readonly defaultPriority: ExtensionPriority;

property extensions

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

Signature:

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

property name

Signature:

get name(): "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:

ParameterTypeDescription
argsExtensionConstructorProps<Options>

Returns:

Extension<Options>

method createExtensions

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

Signature:

createExtensions(): AnyExtension[];

Returns:

AnyExtension[]

Remarks:

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

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

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

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

method getExtension

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

Signature:

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

Parameters:

ParameterTypeDescription
ConstructorTypethe extension constructor to find in the editor.

Returns:

InstanceType<Type>

Remarks:

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

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

import { PlainExtension, OnSetOptionsProps } from 'remirror';

interface ParentOptions { weight?: string }

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

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

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

method isOfType

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

Signature:

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

Parameters:

ParameterTypeDescription
ConstructorType

Returns:

this is InstanceType<Type>

method onAppendTransaction

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

This is shorthand for the ProsemirrorPlugin.spec.appendTransaction.

Lifecycle Methods

Signature:

onAppendTransaction?(props: AppendLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsAppendLifecycleProps

Returns:

void

method onApplyState

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

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

Lifecycle Methods

Signature:

onApplyState?(props: ApplyStateLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsApplyStateLifecycleProps

Returns:

void

method onCreate

This handler is called when the RemirrorManager is first created.

Signature:

onCreate?(): Dispose | void;

Returns:

Dispose | void

Remarks:

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

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

This handler is called before the onView handler.

Lifecycle Methods

method onDestroy

Called when the extension is being destroyed.

Lifecycle Methods

Signature:

onDestroy?(): void;

Returns:

void

method onInitState

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

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

Lifecycle Methods

Signature:

onInitState?(state: EditorState): void;

Parameters:

ParameterTypeDescription
stateEditorState

Returns:

void

method onStateUpdate

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

Lifecycle Methods

Signature:

onStateUpdate?(props: StateUpdateLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsStateUpdateLifecycleProps

Returns:

void

method onView

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

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

This handler is called after the onCreate handler.

Lifecycle Methods

Signature:

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

Parameters:

ParameterTypeDescription
viewEditorView

Returns:

Dispose | void

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

ParameterTypeDescription
argsExtensionConstructorProps<Options>

property constructorName

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

Signature:

get constructorName(): string;

property defaultPriority

The default priority for this family of extensions.

Signature:

static readonly defaultPriority: ExtensionPriority;

property extensions

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

Signature:

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

property name

Signature:

get name(): "commands";

property priority

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

Signature:

get priority(): ExtensionPriority;

property store

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

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

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

Signature:

protected get store(): Remirror.ExtensionStore;

method applyMark

Removes a mark from the current selection or provided range.

Signature:

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

Parameters:

ParameterTypeDescription
markTypestring | MarkType
attrsProsemirrorAttributes(Optional)
selectionPrimitiveSelection(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:

ParameterTypeDescription
positionPrimitiveSelection(Optional)

Returns:

CommandFunction

method clone

Clone an extension.

Signature:

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

Parameters:

ParameterTypeDescription
argsExtensionConstructorProps<Options>

Returns:

Extension<Options>

method copy

Copy the selected content for non empty selections.

Signature:

copy(): CommandFunction;

Returns:

CommandFunction

method createExtensions

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

Signature:

createExtensions(): AnyExtension[];

Returns:

AnyExtension[]

Remarks:

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

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

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

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

method createPlugin

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

Signature:

createPlugin(): CreateExtensionPlugin;

Returns:

CreateExtensionPlugin

method customDispatch

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

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

To use it, firstly define the command.

import { CommandFunction } from 'remirror';

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

return true;
}

And then use it within the component.

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

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

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

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

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

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

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

Signature:

customDispatch(command: CommandFunction): CommandFunction;

Parameters:

ParameterTypeDescription
commandCommandFunction

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:

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

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

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

ParameterTypeDescription
keysUpdatableViewProps[]

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:

ParameterTypeDescription
namestring

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:

ParameterTypeDescription
ConstructorTypethe extension constructor to find in the editor.

Returns:

InstanceType<Type>

Remarks:

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

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

import { PlainExtension, OnSetOptionsProps } from 'remirror';

interface ParentOptions { weight?: string }

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

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

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

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

ParameterTypeDescription
nodestring | NodeType | ProsemirrorNode | Fragment
optionsInsertNodeOptions(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:

ParameterTypeDescription
textstring | (() => Promise<string>)
optionsInsertTextOptions(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:

ParameterTypeDescription
ConstructorType

Returns:

this is InstanceType<Type>

method onAppendTransaction

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

This is shorthand for the ProsemirrorPlugin.spec.appendTransaction.

Lifecycle Methods

Signature:

onAppendTransaction?(props: AppendLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsAppendLifecycleProps

Returns:

void

method onApplyState

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

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

Lifecycle Methods

Signature:

onApplyState?(props: ApplyStateLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsApplyStateLifecycleProps

Returns:

void

method onCreate

Signature:

onCreate(): void;

Returns:

void

method onDestroy

Called when the extension is being destroyed.

Lifecycle Methods

Signature:

onDestroy?(): void;

Returns:

void

method onInitState

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

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

Lifecycle Methods

Signature:

onInitState?(state: EditorState): void;

Parameters:

ParameterTypeDescription
stateEditorState

Returns:

void

method onStateUpdate

Update the cached transaction whenever the state is updated.

Signature:

onStateUpdate({ state }: StateUpdateLifecycleProps): void;

Parameters:

ParameterTypeDescription
{ state }StateUpdateLifecycleProps

Returns:

void

method onView

Attach commands once the view is attached.

Signature:

onView(view: EditorView): void;

Parameters:

ParameterTypeDescription
viewEditorView

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:

ParameterTypeDescription
propsRemoveMarkProps

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:

ParameterTypeDescription
propsReplaceTextPropssee [[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:

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

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

ParameterTypeDescription
nodeTypestring | NodeTypethe node type to create
attrsProsemirrorAttributes(Optional) the attributes to add to the node type
selectionPrimitiveSelection(Optional) the position in the document to set the block node
preserveAttrsboolean(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:

ParameterTypeDescription
contentRemirrorContentType
selectionPrimitiveSelection(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:

ParameterTypeDescription
namestring
valueunknown

Returns:

CommandFunction

method toggleBlockNodeItem

Toggle a block between the provided type and toggleType.

Signature:

toggleBlockNodeItem(toggleProps: ToggleBlockItemProps): CommandFunction;

Parameters:

ParameterTypeDescription
togglePropsToggleBlockItemProps

Returns:

CommandFunction

method toggleMark

Removes a mark from the current selection or provided range.

Signature:

toggleMark(props: ToggleMarkProps): CommandFunction;

Parameters:

ParameterTypeDescription
propsToggleMarkProps

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:

ParameterTypeDescription
nodeTypestring | NodeTypethe node type to toggle
attrsProsemirrorAttributes(Optional) the attrs to use for the node
selectionPrimitiveSelection(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:

ParameterTypeDescription
posnumber
attrsProsemirrorAttributes<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:

ParameterTypeDescription
nodeTypestring | NodeType
attrsProsemirrorAttributes(Optional)
rangeFromToProps | 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:

ParameterTypeDescription
argsExtensionConstructorProps<Options>

property constructorName

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

Signature:

get constructorName(): string;

property defaultPriority

The default priority for this family of extensions.

Signature:

static readonly defaultPriority: ExtensionPriority;

property extensions

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

Signature:

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

property name

Signature:

get name(): "decorations";

property priority

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

Signature:

get priority(): ExtensionPriority;

property store

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

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

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

Signature:

protected get store(): Remirror.ExtensionStore;

method addPlaceholder

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

Signature:

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

Parameters:

ParameterTypeDescription
idunknownthe value that is used to identify this tracker. This can be any value. A promise, a function call, a string.
placeholderDecorationPlaceholder
deleteSelectionboolean(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:

ParameterTypeDescription
argsExtensionConstructorProps<Options>

Returns:

Extension<Options>

method createDecorations

Add some decorations based on the provided settings.

Signature:

createDecorations(state: EditorState): DecorationSet;

Parameters:

ParameterTypeDescription
stateEditorState

Returns:

DecorationSet

method createExtensions

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

Signature:

createExtensions(): AnyExtension[];

Returns:

AnyExtension[]

Remarks:

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

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

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

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

method createPlugin

Create the extension plugin for inserting decorations into the editor.

Signature:

createPlugin(): CreateExtensionPlugin;

Returns:

CreateExtensionPlugin

method findAllPlaceholders

Find the positions of all the trackers in document.

Signature:

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

Returns:

Helper<Map<unknown, FromToProps>>

method findPlaceholder

Find the position for the tracker with the ID specified.

Signature:

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

Parameters:

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

ParameterTypeDescription
ConstructorTypethe extension constructor to find in the editor.

Returns:

InstanceType<Type>

Remarks:

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

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

import { PlainExtension, OnSetOptionsProps } from 'remirror';

interface ParentOptions { weight?: string }

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

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

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

method isOfType

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

Signature:

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

Parameters:

ParameterTypeDescription
ConstructorType

Returns:

this is InstanceType<Type>

method onAppendTransaction

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

This is shorthand for the ProsemirrorPlugin.spec.appendTransaction.

Lifecycle Methods

Signature:

onAppendTransaction?(props: AppendLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsAppendLifecycleProps

Returns:

void

method onApplyState

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

ParameterTypeDescription
stateEditorState

Returns:

void

method onStateUpdate

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

Lifecycle Methods

Signature:

onStateUpdate?(props: StateUpdateLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsStateUpdateLifecycleProps

Returns:

void

method onView

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

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

This handler is called after the onCreate handler.

Lifecycle Methods

Signature:

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

Parameters:

ParameterTypeDescription
viewEditorView

Returns:

Dispose | void

method removePlaceholder

A command to remove the specified placeholder decoration.

Signature:

removePlaceholder(id: unknown): CommandFunction;

Parameters:

ParameterTypeDescription
idunknown

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:

ParameterTypeDescription
idunknown
dataData

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:

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

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

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

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

ParameterTypeDescription
argsExtensionConstructorProps<Options>

property constructorName

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

Signature:

get constructorName(): string;

property defaultPriority

The default priority for this family of extensions.

Signature:

static readonly defaultPriority: ExtensionPriority;

property extensions

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

Signature:

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

property name

Signature:

get name(): "docChanged";

property priority

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

Signature:

get priority(): ExtensionPriority;

property store

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

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

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

Signature:

protected get store(): Remirror.ExtensionStore;

method clone

Clone an extension.

Signature:

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

Parameters:

ParameterTypeDescription
argsExtensionConstructorProps<Options>

Returns:

Extension<Options>

method createExtensions

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

Signature:

createExtensions(): AnyExtension[];

Returns:

AnyExtension[]

Remarks:

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

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

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

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

method getExtension

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

Signature:

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

Parameters:

ParameterTypeDescription
ConstructorTypethe extension constructor to find in the editor.

Returns:

InstanceType<Type>

Remarks:

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

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

import { PlainExtension, OnSetOptionsProps } from 'remirror';

interface ParentOptions { weight?: string }

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

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

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

method isOfType

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

Signature:

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

Parameters:

ParameterTypeDescription
ConstructorType

Returns:

this is InstanceType<Type>

method onAppendTransaction

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

This is shorthand for the ProsemirrorPlugin.spec.appendTransaction.

Lifecycle Methods

Signature:

onAppendTransaction?(props: AppendLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsAppendLifecycleProps

Returns:

void

method onApplyState

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

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

Lifecycle Methods

Signature:

onApplyState?(props: ApplyStateLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsApplyStateLifecycleProps

Returns:

void

method onCreate

This handler is called when the RemirrorManager is first created.

Signature:

onCreate?(): Dispose | void;

Returns:

Dispose | void

Remarks:

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

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

This handler is called before the onView handler.

Lifecycle Methods

method onDestroy

Called when the extension is being destroyed.

Lifecycle Methods

Signature:

onDestroy?(): void;

Returns:

void

method onInitState

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

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

Lifecycle Methods

Signature:

onInitState?(state: EditorState): void;

Parameters:

ParameterTypeDescription
stateEditorState

Returns:

void

method onStateUpdate

Signature:

onStateUpdate(props: StateUpdateLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsStateUpdateLifecycleProps

Returns:

void

method onView

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

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

This handler is called after the onCreate handler.

Lifecycle Methods

Signature:

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

Parameters:

ParameterTypeDescription
viewEditorView

Returns:

Dispose | void

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

ParameterTypeDescription
argsExtensionConstructorProps<Options>

property constructorName

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

Signature:

get constructorName(): string;

property defaultPriority

The default priority for this family of extensions.

Signature:

static readonly defaultPriority: ExtensionPriority;

property extensions

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

Signature:

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

property priority

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

Signature:

get priority(): ExtensionPriority;

property store

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

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

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

Signature:

protected get store(): Remirror.ExtensionStore;

method clone

Clone an extension.

Signature:

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

Parameters:

ParameterTypeDescription
argsExtensionConstructorProps<Options>

Returns:

Extension<Options>

method createExtensions

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

Signature:

createExtensions(): AnyExtension[];

Returns:

AnyExtension[]

Remarks:

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

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

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

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

method getExtension

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

Signature:

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

Parameters:

ParameterTypeDescription
ConstructorTypethe extension constructor to find in the editor.

Returns:

InstanceType<Type>

Remarks:

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

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

import { PlainExtension, OnSetOptionsProps } from 'remirror';

interface ParentOptions { weight?: string }

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

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

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

method isOfType

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

Signature:

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

Parameters:

ParameterTypeDescription
ConstructorType

Returns:

this is InstanceType<Type>

method onAppendTransaction

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

This is shorthand for the ProsemirrorPlugin.spec.appendTransaction.

Lifecycle Methods

Signature:

onAppendTransaction?(props: AppendLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsAppendLifecycleProps

Returns:

void

method onApplyState

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

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

Lifecycle Methods

Signature:

onApplyState?(props: ApplyStateLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsApplyStateLifecycleProps

Returns:

void

method onCreate

This handler is called when the RemirrorManager is first created.

Signature:

onCreate?(): Dispose | void;

Returns:

Dispose | void

Remarks:

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

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

This handler is called before the onView handler.

Lifecycle Methods

method onDestroy

Called when the extension is being destroyed.

Lifecycle Methods

Signature:

onDestroy?(): void;

Returns:

void

method onInitState

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

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

Lifecycle Methods

Signature:

onInitState?(state: EditorState): void;

Parameters:

ParameterTypeDescription
stateEditorState

Returns:

void

method onStateUpdate

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

Lifecycle Methods

Signature:

onStateUpdate?(props: StateUpdateLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsStateUpdateLifecycleProps

Returns:

void

method onView

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

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

This handler is called after the onCreate handler.

Lifecycle Methods

Signature:

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

Parameters:

ParameterTypeDescription
viewEditorView

Returns:

Dispose | void

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

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

ParameterTypeDescription
stateEditorState
elementElement(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:

ParameterTypeDescription
propsListenerProps(Optional)

Returns:

RemirrorEventListenerProps<Extension>

method getAttributes

This sets the attributes for the ProseMirror Dom node.

Signature:

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

Parameters:

ParameterTypeDescription
ssrfalse(Optional)

Returns:

Record<string, string>

method getAttributes

Signature:

protected getAttributes(ssr: true): Shape;

Parameters:

ParameterTypeDescription
ssrtrue

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:

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

ParameterTypeDescription
propsUpdateStateProps

Returns:

void

method updateViewProps

Update the view props.

Signature:

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

Parameters:

ParameterTypeDescription
keysUpdatableViewProps[]

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:

ParameterTypeDescription
argsExtensionConstructorProps<Options>

property constructorName

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

Signature:

get constructorName(): string;

property defaultPriority

The default priority for this family of extensions.

Signature:

static readonly defaultPriority: ExtensionPriority;

property extensions

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

Signature:

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

property name

Signature:

get name(): "helpers";

property priority

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

Signature:

get priority(): ExtensionPriority;

property store

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

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

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

Signature:

protected get store(): Remirror.ExtensionStore;

method clone

Clone an extension.

Signature:

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

Parameters:

ParameterTypeDescription
argsExtensionConstructorProps<Options>

Returns:

Extension<Options>

method createExtensions

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

Signature:

createExtensions(): AnyExtension[];

Returns:

AnyExtension[]

Remarks:

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

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

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

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

method getExtension

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

Signature:

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

Parameters:

ParameterTypeDescription
ConstructorTypethe extension constructor to find in the editor.

Returns:

InstanceType<Type>

Remarks:

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

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

import { PlainExtension, OnSetOptionsProps } from 'remirror';

interface ParentOptions { weight?: string }

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

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

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

method getHTML

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

Signature:

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

Parameters:

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

ParameterTypeDescription
stateEditorState(Optional)

Returns:

Helper<RemirrorJSON>

method getStateJSON

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

Signature:

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

Parameters:

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

ParameterTypeDescription
{ lineBreakDivider, state, }GetTextHelperOptions(Optional)

Returns:

Helper<string>

method getTextBetween

Signature:

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

Parameters:

ParameterTypeDescription
fromnumber
tonumber
docProsemirrorNode(Optional)

Returns:

Helper<string>

method insertHtml

Insert a html string as a ProseMirror Node.

Builtin Command

Signature:

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

Parameters:

ParameterTypeDescription
htmlstring
optionsInsertNodeOptions(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:

ParameterTypeDescription
ConstructorType

Returns:

this is InstanceType<Type>

method isSelectionEmpty

Check whether the selection is empty.

Signature:

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

Parameters:

ParameterTypeDescription
stateEditorState(Optional)

Returns:

Helper<boolean>

method isViewEditable

Signature:

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

Parameters:

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

ParameterTypeDescription
propsAppendLifecycleProps

Returns:

void

method onApplyState

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

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

Lifecycle Methods

Signature:

onApplyState?(props: ApplyStateLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsApplyStateLifecycleProps

Returns:

void

method onCreate

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

ParameterTypeDescription
stateEditorState

Returns:

void

method onStateUpdate

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

Lifecycle Methods

Signature:

onStateUpdate?(props: StateUpdateLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsStateUpdateLifecycleProps

Returns:

void

method onView

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

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

This handler is called after the onCreate handler.

Lifecycle Methods

Signature:

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

Parameters:

ParameterTypeDescription
viewEditorView

Returns:

Dispose | void

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

ParameterTypeDescription
argsExtensionConstructorProps<Options>

property constructorName

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

Signature:

get constructorName(): string;

property defaultPriority

The default priority for this family of extensions.

Signature:

static readonly defaultPriority: ExtensionPriority;

property extensions

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

Signature:

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

property name

Signature:

get name(): "inputRules";

property priority

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

Signature:

get priority(): ExtensionPriority;

property store

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

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

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

Signature:

protected get store(): Remirror.ExtensionStore;

method clone

Clone an extension.

Signature:

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

Parameters:

ParameterTypeDescription
argsExtensionConstructorProps<Options>

Returns:

Extension<Options>

method createExtensions

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

Signature:

createExtensions(): AnyExtension[];

Returns:

AnyExtension[]

Remarks:

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

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

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

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

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

ParameterTypeDescription
ConstructorTypethe extension constructor to find in the editor.

Returns:

InstanceType<Type>

Remarks:

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

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

import { PlainExtension, OnSetOptionsProps } from 'remirror';

interface ParentOptions { weight?: string }

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

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

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

method isOfType

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

Signature:

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

Parameters:

ParameterTypeDescription
ConstructorType

Returns:

this is InstanceType<Type>

method onAppendTransaction

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

This is shorthand for the ProsemirrorPlugin.spec.appendTransaction.

Lifecycle Methods

Signature:

onAppendTransaction?(props: AppendLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsAppendLifecycleProps

Returns:

void

method onApplyState

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

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

Lifecycle Methods

Signature:

onApplyState?(props: ApplyStateLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsApplyStateLifecycleProps

Returns:

void

method onCreate

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

ParameterTypeDescription
stateEditorState

Returns:

void

method onStateUpdate

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

Lifecycle Methods

Signature:

onStateUpdate?(props: StateUpdateLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsStateUpdateLifecycleProps

Returns:

void

method onView

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

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

This handler is called after the onCreate handler.

Lifecycle Methods

Signature:

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

Parameters:

ParameterTypeDescription
viewEditorView

Returns:

Dispose | void

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

ParameterTypeDescription
argsExtensionConstructorProps<Options>

property constructorName

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

Signature:

get constructorName(): string;

property defaultPriority

The default priority for this family of extensions.

Signature:

static readonly defaultPriority: ExtensionPriority;

property extensions

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

Signature:

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

property name

Signature:

get name(): "keymap";

property onAddCustomHandler

Signature:

protected onAddCustomHandler: AddCustomHandler<KeymapOptions>;

property priority

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

Signature:

get priority(): ExtensionPriority;

property store

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

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

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

Signature:

protected get store(): Remirror.ExtensionStore;

method arrowLeftShortcut

Handle the arrow left key to exit the mark.

Signature:

arrowLeftShortcut(props: KeyBindingProps): boolean;

Parameters:

ParameterTypeDescription
propsKeyBindingProps

Returns:

boolean

method arrowRightShortcut

Handle exiting the mark forwards.

Signature:

arrowRightShortcut(props: KeyBindingProps): boolean;

Parameters:

ParameterTypeDescription
propsKeyBindingProps

Returns:

boolean

method backspace

Handle exiting the mark forwards.

Signature:

backspace(props: KeyBindingProps): boolean;

Parameters:

ParameterTypeDescription
propsKeyBindingProps

Returns:

boolean

method clone

Clone an extension.

Signature:

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

Parameters:

ParameterTypeDescription
argsExtensionConstructorProps<Options>

Returns:

Extension<Options>

method createExtensions

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

Signature:

createExtensions(): AnyExtension[];

Returns:

AnyExtension[]

Remarks:

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

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

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

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

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

ParameterTypeDescription
ConstructorTypethe extension constructor to find in the editor.

Returns:

InstanceType<Type>

Remarks:

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

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

import { PlainExtension, OnSetOptionsProps } from 'remirror';

interface ParentOptions { weight?: string }

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

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

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

method getNamedShortcut

Get the real shortcut name from the named shortcut.

Signature:

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

Parameters:

ParameterTypeDescription
shortcutstring
optionsShape(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:

ParameterTypeDescription
ConstructorType

Returns:

this is InstanceType<Type>

method onAppendTransaction

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

This is shorthand for the ProsemirrorPlugin.spec.appendTransaction.

Lifecycle Methods

Signature:

onAppendTransaction?(props: AppendLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsAppendLifecycleProps

Returns:

void

method onApplyState

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

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

Lifecycle Methods

Signature:

onApplyState?(props: ApplyStateLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsApplyStateLifecycleProps

Returns:

void

method onCreate

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

ParameterTypeDescription
stateEditorState

Returns:

void

method onSetOptions

Handle changes in the dynamic properties.

Signature:

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

Parameters:

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

ParameterTypeDescription
propsStateUpdateLifecycleProps

Returns:

void

method onView

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

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

This handler is called after the onCreate handler.

Lifecycle Methods

Signature:

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

Parameters:

ParameterTypeDescription
viewEditorView

Returns:

Dispose | void

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

ParameterTypeDescription
argsExtensionConstructorProps<Options>

property constructorName

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

Signature:

get constructorName(): string;

property defaultPriority

The default priority for this family of extensions.

Signature:

static readonly defaultPriority: ExtensionPriority;

property disableExtraAttributes

Whether to disable extra attributes for this extension.

Signature:

static readonly disableExtraAttributes: boolean;

property extensions

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

Signature:

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

property priority

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

Signature:

get priority(): ExtensionPriority;

property store

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

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

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

Signature:

protected get store(): Remirror.ExtensionStore;

property type

Provides access to the mark type from the schema.

Signature:

get type(): MarkType;

Remarks:

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

method clone

Clone an extension.

Signature:

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

Parameters:

ParameterTypeDescription
argsExtensionConstructorProps<Options>

Returns:

Extension<Options>

method createExtensions

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

Signature:

createExtensions(): AnyExtension[];

Returns:

AnyExtension[]

Remarks:

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

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

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

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

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

ParameterTypeDescription
extraApplySchemaAttributes
overrideMarkSpecOverride

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:

ParameterTypeDescription
ConstructorTypethe extension constructor to find in the editor.

Returns:

InstanceType<Type>

Remarks:

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

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

import { PlainExtension, OnSetOptionsProps } from 'remirror';

interface ParentOptions { weight?: string }

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

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

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

method isOfType

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

Signature:

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

Parameters:

ParameterTypeDescription
ConstructorType

Returns:

this is InstanceType<Type>

method onAppendTransaction

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

This is shorthand for the ProsemirrorPlugin.spec.appendTransaction.

Lifecycle Methods

Signature:

onAppendTransaction?(props: AppendLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsAppendLifecycleProps

Returns:

void

method onApplyState

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

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

Lifecycle Methods

Signature:

onApplyState?(props: ApplyStateLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsApplyStateLifecycleProps

Returns:

void

method onCreate

This handler is called when the RemirrorManager is first created.

Signature:

onCreate?(): Dispose | void;

Returns:

Dispose | void

Remarks:

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

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

This handler is called before the onView handler.

Lifecycle Methods

method onDestroy

Called when the extension is being destroyed.

Lifecycle Methods

Signature:

onDestroy?(): void;

Returns:

void

method onInitState

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

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

Lifecycle Methods

Signature:

onInitState?(state: EditorState): void;

Parameters:

ParameterTypeDescription
stateEditorState

Returns:

void

method onStateUpdate

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

Lifecycle Methods

Signature:

onStateUpdate?(props: StateUpdateLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsStateUpdateLifecycleProps

Returns:

void

method onView

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

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

This handler is called after the onCreate handler.

Lifecycle Methods

Signature:

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

Parameters:

ParameterTypeDescription
viewEditorView

Returns:

Dispose | void

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

ParameterTypeDescription
argsExtensionConstructorProps<Options>

property constructorName

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

Signature:

get constructorName(): string;

property defaultPriority

The default priority for this family of extensions.

Signature:

static readonly defaultPriority: ExtensionPriority;

property extensions

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

Signature:

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

property name

Signature:

get name(): "meta";

property priority

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

Signature:

get priority(): ExtensionPriority;

property store

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

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

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

Signature:

protected get store(): Remirror.ExtensionStore;

method clone

Clone an extension.

Signature:

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

Parameters:

ParameterTypeDescription
argsExtensionConstructorProps<Options>

Returns:

Extension<Options>

method createExtensions

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

Signature:

createExtensions(): AnyExtension[];

Returns:

AnyExtension[]

Remarks:

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

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

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

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

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

ParameterTypeDescription
ConstructorTypethe extension constructor to find in the editor.

Returns:

InstanceType<Type>

Remarks:

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

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

import { PlainExtension, OnSetOptionsProps } from 'remirror';

interface ParentOptions { weight?: string }

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

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

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

method isOfType

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

Signature:

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

Parameters:

ParameterTypeDescription
ConstructorType

Returns:

this is InstanceType<Type>

method onAppendTransaction

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

This is shorthand for the ProsemirrorPlugin.spec.appendTransaction.

Lifecycle Methods

Signature:

onAppendTransaction?(props: AppendLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsAppendLifecycleProps

Returns:

void

method onApplyState

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

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

Lifecycle Methods

Signature:

onApplyState?(props: ApplyStateLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsApplyStateLifecycleProps

Returns:

void

method onCreate

Signature:

onCreate(): void;

Returns:

void

method onDestroy

Called when the extension is being destroyed.

Lifecycle Methods

Signature:

onDestroy?(): void;

Returns:

void

method onInitState

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

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

Lifecycle Methods

Signature:

onInitState?(state: EditorState): void;

Parameters:

ParameterTypeDescription
stateEditorState

Returns:

void

method onStateUpdate

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

Lifecycle Methods

Signature:

onStateUpdate?(props: StateUpdateLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsStateUpdateLifecycleProps

Returns:

void

method onView

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

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

This handler is called after the onCreate handler.

Lifecycle Methods

Signature:

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

Parameters:

ParameterTypeDescription
viewEditorView

Returns:

Dispose | void

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

ParameterTypeDescription
argsExtensionConstructorProps<Options>

property [__INTERNAL_REMIRROR_IDENTIFIER_KEY__]

Signature:

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

property constructorName

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

Signature:

get constructorName(): string;

property defaultPriority

The default priority for this family of extensions.

Signature:

static readonly defaultPriority: ExtensionPriority;

property disableExtraAttributes

Whether to disable extra attributes for this extension.

Signature:

static readonly disableExtraAttributes: boolean;

property extensions

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

Signature:

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

property priority

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

Signature:

get priority(): ExtensionPriority;

property store

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

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

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

Signature:

protected get store(): Remirror.ExtensionStore;

property type

Provides access to the node type from the schema.

Signature:

get type(): NodeType;

method clone

Clone an extension.

Signature:

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

Parameters:

ParameterTypeDescription
argsExtensionConstructorProps<Options>

Returns:

Extension<Options>

method createExtensions

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

Signature:

createExtensions(): AnyExtension[];

Returns:

AnyExtension[]

Remarks:

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

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

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

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

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

ParameterTypeDescription
extraApplySchemaAttributes
overrideNodeSpecOverride

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:

ParameterTypeDescription
ConstructorTypethe extension constructor to find in the editor.

Returns:

InstanceType<Type>

Remarks:

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

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

import { PlainExtension, OnSetOptionsProps } from 'remirror';

interface ParentOptions { weight?: string }

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

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

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

method isOfType

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

Signature:

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

Parameters:

ParameterTypeDescription
ConstructorType

Returns:

this is InstanceType<Type>

method onAppendTransaction

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

This is shorthand for the ProsemirrorPlugin.spec.appendTransaction.

Lifecycle Methods

Signature:

onAppendTransaction?(props: AppendLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsAppendLifecycleProps

Returns:

void

method onApplyState

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

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

Lifecycle Methods

Signature:

onApplyState?(props: ApplyStateLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsApplyStateLifecycleProps

Returns:

void

method onCreate

This handler is called when the RemirrorManager is first created.

Signature:

onCreate?(): Dispose | void;

Returns:

Dispose | void

Remarks:

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

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

This handler is called before the onView handler.

Lifecycle Methods

method onDestroy

Called when the extension is being destroyed.

Lifecycle Methods

Signature:

onDestroy?(): void;

Returns:

void

method onInitState

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

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

Lifecycle Methods

Signature:

onInitState?(state: EditorState): void;

Parameters:

ParameterTypeDescription
stateEditorState

Returns:

void

method onStateUpdate

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

Lifecycle Methods

Signature:

onStateUpdate?(props: StateUpdateLifecycleProps): void;

Parameters:

ParameterTypeDescription
propsStateUpdateLifecycleProps

Returns:

void

method onView

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

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

This handler is called after the onCreate handler.

Lifecycle Methods

Signature:

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

Parameters:

ParameterTypeDescription
viewEditorView

Returns:

Dispose | void

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

ParameterTypeDescription
argsExtensionConstructorProps<Options>

property constructorName

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

Signature:

get constructorName(): string;

property defaultPriority

The default priority for this family of extensions.

Signature:

static readonly defaultPriority: ExtensionPriority;

property extensions

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

Signature:

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

property name

Signature:

get name(): "nodeViews";

property priority

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

Signature:

get priority(): ExtensionPriority;

property store

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

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

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

Signature:

protected get store(): Remirror.ExtensionStore;

method clone

Clone an extension.

Signature:

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

Parameters:

ParameterTypeDescription
argsExtensionConstructorProps<Options>

Returns:

Extension<Options>

method createExtensions

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

Signature:

createExtensions(): AnyExtension[