@remirror/core

property name

readonly name: string;

property name

readonly name: string;

method applyMark

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

• Removes a mark from the current selection or provided range.

method blur

blur: (position?: PrimitiveSelection) => CommandFunction;

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

method copy

copy: () => CommandFunction;

• Copy the selected content for non empty selections.

method createPlugin

createPlugin: () => CreateExtensionPlugin;

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

method customDispatch

customDispatch: (command: CommandFunction) => CommandFunction;

• 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>;
  };

method cut

cut: () => CommandFunction;

• Cut the selected content.

method delete

delete: (range?: FromToProps) => CommandFunction;

• Delete the provided range or current selection.

method emptySelection

emptySelection: () => CommandFunction;

• 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

method emptyUpdate

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

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

  Parameter action

  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.

method focus

focus: (position?: FocusType) => CommandFunction;

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

method forceUpdate

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

• Force an update of the specific updatable ProseMirror props.

  This command is always available as a builtin command.

  Builtin Command

method getAllCommandOptions

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

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

method getCommandOptions

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

• Get the options that were passed into the provided command.

method getCommandProp

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

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

method insertNewLine

insertNewLine: () => CommandFunction;

• Insert a new line into the editor.

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

  Builtin Command

method insertNode

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

• Insert a node into the editor with the provided content.

  Builtin Command

method insertText

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

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

method onCreate

onCreate: () => void;

method onStateUpdate

onStateUpdate: ({ state }: StateUpdateLifecycleProps) => void;

• Update the cached transaction whenever the state is updated.

method onView

onView: (view: EditorView$1) => void;

• Attach commands once the view is attached.

method paste

paste: () => CommandFunction;

• Select all text in the editor.

method removeMark

removeMark: (props: RemoveMarkProps) => CommandFunction;

• Removes a mark from the current selection or provided range.

method replaceText

replaceText: (props: ReplaceTextProps) => CommandFunction;

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

  Parameter props

  see [[ReplaceTextProps]]

method resetContent

resetContent: () => CommandFunction;

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

method selectAll

selectAll: () => CommandFunction;

• Select all text in the editor.

method selectMark

selectMark: (type: string | MarkType) => CommandFunction;

• Select the link at the current location.

method selectText

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

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

method setBlockNodeType

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

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

  Parameter nodeType

  the node type to create

  Parameter attrs

  the attributes to add to the node type

  Parameter selection

  the position in the document to set the block node

  Parameter preserveAttrs

  when true preserve the attributes at the provided selection

method setContent

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

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

method setMeta

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

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

method toggleBlockNodeItem

toggleBlockNodeItem: (toggleProps: ToggleBlockItemProps) => CommandFunction;

• Toggle a block between the provided type and toggleType.

method toggleMark

toggleMark: (props: ToggleMarkProps) => CommandFunction;

• Removes a mark from the current selection or provided range.

method toggleWrappingNode

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

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

  Parameter nodeType

  the node type to toggle

  Parameter attrs

  the attrs to use for the node

  Parameter selection

  the selection point in the editor to perform the action

method updateNodeAttributes

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

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

  Builtin Command

method wrapInNode

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

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

property name

readonly name: string;

method addPlaceholder

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

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

  Parameter id

  the value that is used to identify this tracker. This can be any value. A promise, a function call, a string.

  Parameter options

  the options to call the tracked position with. You can specify the range { from: number; to: number } as well as the class name.

method clearPlaceholders

clearPlaceholders: () => CommandFunction;

• A command to remove all active placeholder decorations.

method createDecorations

createDecorations: (state: EditorState) => DecorationSet;

• Add some decorations based on the provided settings.

method createPlugin

createPlugin: () => CreateExtensionPlugin;

• Create the extension plugin for inserting decorations into the editor.

method findAllPlaceholders

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

• Find the positions of all the trackers in document.

method findPlaceholder

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

• Find the position for the tracker with the ID specified.

  Parameter id

  the unique position id which can be any type

method onApplyState

onApplyState: () => void;

• This stores all tracked positions in the editor and maps them via the transaction updates.

method onCreate

onCreate: () => void;

method removePlaceholder

removePlaceholder: (id: unknown) => CommandFunction;

• A command to remove the specified placeholder decoration.

method updateDecorations

updateDecorations: () => CommandFunction;

method updatePlaceholder

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

• 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();

constructor

constructor(promiseCreator: DelayedPromiseCreator<Value>);

property generateCommand

readonly generateCommand: () => CommandFunction;

• Generate the remirror command.

method failure

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

• Add a failure callback to the handler.

method success

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

• Add a success callback to the handler.

method validate

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

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

property name

readonly name: string;

method onStateUpdate

onStateUpdate: (props: StateUpdateLifecycleProps) => void;

constructor

constructor(
    ...args: IfNoRequiredProperties<
        GetStatic<Options>,
        [options?: any],
        [options: any]
    >
);

property constructorName

readonly constructorName: string;

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

property defaultPriority

static readonly defaultPriority: ExtensionPriority;

• The default priority for this family of extensions.

property extensions

readonly extensions: this['~E'][];

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

property priority

readonly priority: ExtensionPriority;

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

property store

readonly store: Remirror.ExtensionStore;

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

method clone

clone: (
    ...args: IfNoRequiredProperties<
        GetStatic<Options>,
        [options?: any],
        [options: any]
    >
) => Extension<Options>;

• Clone an extension.

method createExtensions

createExtensions: () => AnyExtension[];

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

  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

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

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

  Parameter Constructor

  the extension constructor to find in the editor.

  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

isOfType: <
    Type extends Replace<ExtensionConstructor<any>, new (...args: any[]) => any>
>(
    Constructor: Type
) => this is InstanceType<Type>;

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

method onAppendTransaction

onAppendTransaction: (props: AppendLifecycleProps) => void;

• 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

method onApplyState

onApplyState: (props: ApplyStateLifecycleProps) => void;

• 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

method onCreate

onCreate: () => Dispose | void;

• This handler is called when the RemirrorManager is first created.

  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

onDestroy: () => void;

• Called when the extension is being destroyed.

  Lifecycle Methods

method onInitState

onInitState: (state: EditorState) => void;

• 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

method onStateUpdate

onStateUpdate: (props: StateUpdateLifecycleProps) => void;

• 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

method onView

onView: (view: EditorView) => Dispose | void;

• 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

constructor

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

property addHandler

readonly addHandler: AddFrameworkHandler<Extension>;

• 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

property baseOutput

readonly baseOutput: FrameworkOutput<Extension>;

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

property blur

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

• Blur the editor.

property createStateFromContent

protected readonly createStateFromContent: CreateStateFromContent;

property dispatchTransaction

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

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

  How does it work when transactions are dispatched one after the other.

property firstRender

readonly firstRender: boolean;

• True when this is the first render of the editor.

property focus

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

• Focus the editor.

property frameworkOutput

readonly frameworkOutput: FrameworkOutput<Extension>;

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

property getPreviousState

protected readonly getPreviousState: () => EditorState;

• Retrieve the previous editor state.

property getState

protected readonly getState: () => EditorState;

• Retrieve the editor state.

property initialEditorState

readonly initialEditorState: EditorState;

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

property manager

readonly manager: RemirrorManager<Extension>;