@remirror/core

@remirror/core

Version 3.0.1
Published 21 days ago
1.55 MB
9 dependencies
MIT license

Install

npm i @remirror/core

yarn add @remirror/core

pnpm add @remirror/core

Overview

Where your quest to create a world class editing experience begins.

Index

Variables

variable DEFAULT_SHORTCUTS

const DEFAULT_SHORTCUTS: ShortcutMap;

The default named shortcuts used within remirror.

variable keyboardShortcuts

const keyboardShortcuts: { default: ShortcutMap; googleDoc: ShortcutMap };

Functions

function builtinPreset

builtinPreset: (
    options?: GetStaticAndDynamic<BuiltinOptions>
) => BuiltinPreset[];

Provides all the builtin extensions to the editor.
Remarks
This is used automatically and (at the time of writing) can't be removed from the editor. If you feel that there's a compelling reason to override these extensions feel free to create a [discussion here](https://github.com/remirror/remirror/discussions/category_choices) and it can be addressed.
Builtin Extension
The order of these extension are important.
- [[TagsExtension]] is places first because it provides tagging which is used by the schema extension. - [[SchemeExtension]] goes next because it's super important to the editor functionality and needs to run before everything else which might depend on it.

function command

command: {
    <Extension extends unknown>(
        options?: ChainableCommandDecoratorOptions<Required<GetOptions<Extension>>>
    ): ExtensionDecorator<Extension, CommandFunction, void>;
    <Extension extends unknown>(
        options: NonChainableCommandDecoratorOptions<Required<GetOptions<Extension>>>
    ): ExtensionDecorator<Extension, NonChainableCommandFunction, void>;
};

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

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

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

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

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

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

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

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

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

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

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

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

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

Method Decorator

function delayedCommand

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

Add tentative support for delayed commands in the editor.
Delayed commands are commands that run an immediate action, like adding a tracker to a position in the document. Once the promise that is provided is returned the onDone parameter is run with the document in the current state. The tracker that was added can now be used to insert content, delete content or replace content.
This is still being worked on and the API is subject to changes in structure going forward.
Modifiers
- @experimental
Deprecated
use [[DelayedCommand]] instead.

function extension

extension: <Options extends Shape = EmptyShape>(
    options: ExtensionDecoratorOptions<Options>
) => <Type extends Replace<ExtensionConstructor<any>, new (...args: any[]) => any>>(
    ReadonlyConstructor: Type,
    context?: any
) => Type;

A decorator for the remirror extension.
This adds static properties to the extension constructor.

function findUploadPlaceholderPayload

findUploadPlaceholderPayload: (
    state: EditorState_2,
    id: string
) => any | undefined;

function findUploadPlaceholderPos

findUploadPlaceholderPos: (
    state: EditorState_2,
    id: string
) => number | undefined;

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

function hasUploadingFile

hasUploadingFile: (state: EditorState_2) => boolean;

Determine if there are active file uploads in the given state
Parameter state
the editor state
Remarks
This utility is useful to warn users there are still active uploads before exiting or saving a document.
See Also
- https://remirror.vercel.app/?path=/story/extensions-file--with-upload-incomplete-warning

function helper

helper: (
    options?: HelperDecoratorOptions
) => <Extension extends unknown, Type>(
    method: AnyFunction<
        NonNullable<Type> extends Flavoring<'HelperAnnotation'> ? Type : never
    >,
    context: ClassMethodDecoratorContext<
        Extension,
        (this: Extension, ...args: any) => any
    >
) => AnyFunction<
    NonNullable<Type> extends Flavoring<'HelperAnnotation'> ? Type : never
>;

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

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

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

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

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

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

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

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

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

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

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

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

Method Decorator

function insertText

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

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

function isDelayedValue

isDelayedValue: <Type>(value: unknown) => value is DelayedValue<Type>;

Returns true when the provided value is a delayed value.

function isExtension

isExtension: <Type extends unknown = any>(value: unknown) => value is Type;

Determines if the passed value is an extension.
Parameter value
the value to test

function isExtensionConstructor

isExtensionConstructor: <
    Type extends Replace<
        ExtensionConstructor<any>,
        new (...args: any[]) => any
    > = Replace<ExtensionConstructor<any>, new (...args: any[]) => any>
>(
    value: unknown
) => value is Type;

Determines if the passed value is an extension constructor.
Parameter value
the value to test

function isExtensionTag

isExtensionTag: (value: string) => value is ExtensionTagType;

Check if the provided string is an extension tag.

function isMarkExtension

isMarkExtension: <Type extends unknown = any>(value: unknown) => value is Type;

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

function isNodeExtension

isNodeExtension: <Type extends unknown = any>(value: unknown) => value is Type;

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

function isPlainExtension

isPlainExtension: <Type extends unknown = any>(value: unknown) => value is Type;

Checks whether the provided value is a plain extension.
Parameter value
the extension to check

function isRemirrorManager

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

Checks to see whether the provided value is a RemirrorManager instance.
An optional parameter mustIncludeList is available if you want to check that the manager includes all the listed extensions.
Parameter value
the value to check
Parameter mustIncludeList
an array of presets and extension the manager must include to pass the test. The identifier can either be the Extension / Preset name e.g. bold, or the Extension / Preset constructor BoldExtension

function keyBinding

keyBinding: <Extension extends unknown>(
    options: KeybindingDecoratorOptions<Required<GetOptions<Extension>>>
) => (
    method: KeyBindingCommandFunction,
    context: ClassMethodDecoratorContext<Extension>
) => KeyBindingCommandFunction;

A decorator which can be applied to an extension method to identify as a key binding method. This can be used as a replacement for the createKeymap method depending on your preference.
If you prefer not to use decorators, then you can continue using createKeymap.
Method Decorator

function legacyCommand

legacyCommand: {
    <Extension extends unknown>(
        options?: ChainableCommandDecoratorOptions<Required<GetOptions<Extension>>>
    ): ExtensionDecorator<Extension, CommandFunction, void>;
    <Extension extends unknown>(
        options: NonChainableCommandDecoratorOptions<Required<GetOptions<Extension>>>
    ): ExtensionDecorator<Extension, NonChainableCommandFunction, void>;
};

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

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

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

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

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

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

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

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

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

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

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

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

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

Method Decorator

Deprecated

legacy - please use the ES2023 decorator @command

function legacyHelper

legacyHelper: (
    options?: HelperDecoratorOptions
) => <Extension extends unknown, Type>(
    target: Extension,
    propertyKey: string,
    _descriptor: TypedPropertyDescriptor<
        AnyFunction<
            NonNullable<Type> extends Flavoring<'HelperAnnotation'> ? Type : never
        >
    >
) => void;

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

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

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

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

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

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

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

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

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

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

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

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

Method Decorator

Deprecated

legacy - please use the ES2023 decorator @helper

function legacyKeyBinding

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

A legacy decorator (pre Stage 3) which can be applied to an extension method to identify as a key binding method. This can be used as a replacement for the createKeymap method depending on your preference.
If you prefer not to use decorators, then you can continue using createKeymap.
Method Decorator
Deprecated
legacy - please use the ES2023 decorator @keyBinding

function mutateDefaultExtensionOptions

mutateDefaultExtensionOptions: (
    mutatorMethod: (defaultOptions: BaseExtensionOptions) => void
) => void;

Mutate the default extension options.

Remarks

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

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

import { mutateDefaultExtensionOptions } from 'remirror';

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

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

The mutation must happen before any extension have been instantiated.

function setUploadPlaceholderAction

setUploadPlaceholderAction: (
    tr: Transaction_2,
    action: PlaceholderPluginAction
) => Transaction_2;

function toggleMark

toggleMark: (props: ToggleMarkProps) => CommandFunction;

A custom toggleMark function that works for the remirror codebase.
Create a command function that toggles the given mark with the given attributes. Will return false when the current selection doesn't support that mark. This will remove the mark if any marks of that type exist in the selection, or add it otherwise. If the selection is empty, this applies to the [stored marks](#state.EditorState.storedMarks) instead of a range of the document.
The differences from the prosemirror-commands version. - Acts on the transaction rather than the state to allow for commands to be chained together. - Uses the ONE parameter function signature for compatibility with remirror. - Supports passing a custom range.

function uploadFile

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

Insert a file into the editor and upload it.

Classes

class AttributesExtension

class AttributesExtension extends PlainExtension {}

This extension allows others extension to add the createAttributes method for adding attributes to the prosemirror dom element.
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

property name

readonly name: string;

class CommandsExtension

class CommandsExtension extends PlainExtension<CommandOptions> {}

Generate chained and unchained commands for making changes to the editor.
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

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_2) => 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.

class DecorationsExtension

class DecorationsExtension extends PlainExtension<DecorationsOptions> {}

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

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

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

class DelayedCommand

class DelayedCommand<Value> {}

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.

class DocChangedExtension

class DocChangedExtension extends PlainExtension<DocChangedOptions> {}

property name

readonly name: string;

method onStateUpdate

onStateUpdate: (props: StateUpdateLifecycleProps) => void;

class Extension

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

Extensions are fundamental to the way that Remirror works by grouping together the functionality and handling the management of similar concerns.
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 NodeExtension - MarkExtension - For creating Prosemirror marks in the editor. See MarkExtension - 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; } }

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

class Framework

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

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.
Remarks
There are two methods and one getter property which must be implemented for this

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

The instance of the [[RemirrorManager]].

property name

readonly name: string;

Store the name of the framework.

property onChange

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

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

property previousState

readonly previousState: EditorState;

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.

property previousStateOverride

protected previousStateOverride?: EditorState;

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

property props

readonly props: FrameworkProps<Extension>;

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

property uid

readonly uid: string;

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.

property updatableViewProps

readonly updatableViewProps: UpdatableViewPropsObject;

The updatable view props.

property view

readonly view: EditorView;

The ProseMirror [[EditorView]].

method addFocusListeners

protected addFocusListeners: () => void;

Adds onBlur and onFocus listeners.
When extending this class make sure to call this method once ProsemirrorView has been added to the dom.

method createView

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

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

method destroy

destroy: () => void;

Called when the component unmounts and is responsible for cleanup.
Remarks
- Removes listeners for the editor blur and focus events

method eventListenerProps

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

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

method getAttributes

protected getAttributes: {
    (ssr?: false): Record<string, string>;
    (ssr: true): Shape;
};

This sets the attributes for the ProseMirror Dom node.

method removeFocusListeners

protected removeFocusListeners: () => void;

Remove onBlur and onFocus listeners.
When extending this class in your framework, make sure to call this just before the view is destroyed.

method update

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

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.

method updateState

protected abstract updateState: (props: UpdateStateProps) => void;

This is used to implement how the state updates are used within your application instance.
It must be implemented.

method updateViewProps

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

Update the view props.

class HelpersExtension

class HelpersExtension extends PlainExtension {}

Helpers are custom methods that can provide extra functionality to the editor.
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

property name

readonly name: string;

method getHTML

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

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

method getJSON

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

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.

method getStateJSON

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

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

method getText

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

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.

method getTextBetween

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

method insertHtml

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

Insert a html string as a ProseMirror Node.
Builtin Command

method isSelectionEmpty

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

Check whether the selection is empty.

method isViewEditable

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

method onCreate

onCreate: () => void;

Add the html and text string handlers to the editor.

class InputRulesExtension

class InputRulesExtension extends PlainExtension<InputRulesOptions> {}

This extension allows others extension to add the createInputRules method for automatically transforming text when a certain regex pattern is typed.
Remarks
This is an example of adding custom functionality to an extension via the ExtensionParameterMethods.
Builtin Extension

property name

readonly name: string;

method createExternalPlugins

createExternalPlugins: () => ProsemirrorPlugin[];

Add the inputRules plugin to the editor.

method onCreate

onCreate: () => void;

Add the extension store method for rebuilding all input rules.

class KeymapExtension

class KeymapExtension extends PlainExtension<KeymapOptions> {}

This extension allows others extension to use the createKeymaps method.
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

property name

readonly name: string;

property onAddCustomHandler

protected onAddCustomHandler: AddCustomHandler<KeymapOptions>;

Think about the case where bindings are disposed of and then added in a different position in the extraKeyBindings array. This is especially pertinent when using hooks.

method arrowLeftShortcut

arrowLeftShortcut: (props: KeyBindingProps) => boolean;

Handle the arrow left key to exit the mark.

method arrowRightShortcut

arrowRightShortcut: (props: KeyBindingProps) => boolean;

Handle exiting the mark forwards.

method backspace

backspace: (props: KeyBindingProps) => boolean;

Handle exiting the mark forwards.

method createExternalPlugins

createExternalPlugins: () => ProsemirrorPlugin[];

Add the created keymap to the available plugins.

method createKeymap

createKeymap: () => PrioritizedKeyBindings;

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

method getNamedShortcut

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

Get the real shortcut name from the named shortcut.

method onCreate

onCreate: () => void;

This adds the createKeymap method functionality to all extensions.

method onSetOptions

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

Handle changes in the dynamic properties.

class MarkExtension

abstract class MarkExtension<
    Options extends ValidOptions = EmptyShape
> extends Extension<Options> {}

A mark extension is based on the Mark concept from from within prosemirror https://prosemirror.net/docs/guide/#schema.marks
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.

constructor

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

property disableExtraAttributes

static readonly disableExtraAttributes: boolean;

Whether to disable extra attributes for this extension.

property type

readonly type: MarkType;

Provides access to the mark type from the schema.
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 createMarkSpec

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

Provide a method for creating the schema. This is required in order to create a MarkExtension.
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.

class MetaExtension

class MetaExtension extends PlainExtension<MetaOptions> {}

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.
TODO capture keybindings as well. This will be more difficult since keybindings can dynamically be added to the editor.

property name

readonly name: string;

method createPlugin

createPlugin: () => CreateExtensionPlugin;

This is here to provide a

method onCreate

onCreate: () => void;

class NodeExtension

abstract class NodeExtension<
    Options extends ValidOptions = EmptyShape
> extends Extension<Options> {}

Defines the abstract class for extensions which can place nodes into the prosemirror state.
Remarks
For more information see https://prosemirror.net/docs/ref/#model.Node

constructor

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

property [__INTERNAL_REMIRROR_IDENTIFIER_KEY__]

static readonly [__INTERNAL_REMIRROR_IDENTIFIER_KEY__]: RemirrorIdentifier.NodeExtensionConstructor;

property disableExtraAttributes

static readonly disableExtraAttributes: boolean;

Whether to disable extra attributes for this extension.

property type

readonly type: NodeType;

Provides access to the node type from the schema.

method createNodeSpec

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

Provide a method for creating the schema. This is required in order to create a NodeExtension.
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.

class NodeViewsExtension

class NodeViewsExtension extends PlainExtension {}

This extension allows others extension to add the createNodeView method for creating nodeViews which alter how the dom is rendered for the node.
Remarks
This is an example of adding custom functionality to an extension via the ExtensionParameterMethods.
Builtin Extension

property name

readonly name: string;

method createPlugin

createPlugin: () => CreateExtensionPlugin;

class PasteRulesExtension

class PasteRulesExtension extends PlainExtension {}

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

property name

readonly name: string;

method createExternalPlugins

createExternalPlugins: () => ProsemirrorPlugin[];

class PlainExtension

abstract class PlainExtension<
    Options extends ValidOptions = EmptyShape
> extends Extension<Options> {}

Create a plain extension which doesn't directly map to Prosemirror nodes or marks.
Plain extensions are a great way to add custom behavior to your editor.

class PluginsExtension

class PluginsExtension extends PlainExtension<PluginsOptions> {}

This extension allows others extension to add the createPlugin method using Prosemirror Plugins.
Remarks
This is an example of adding custom functionality to an extension via the ExtensionParameterMethods.
Builtin Extension

property name

readonly name: string;

method createPlugin

createPlugin: () => CreateExtensionPlugin<void>;

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

method onCreate

onCreate: () => void;

This extension is responsible for adding state to the editor.

class RemirrorManager

class RemirrorManager<Extension extends AnyExtension> {}

A class to manage the extensions and prosemirror interactions within the editor.
Remarks
The RemirrorManager enables the lifecycle methods of the extensions by calling each method in the distinct phases of the lifecycle.
- onCreate - This happens when the manager is constructed. It calls on the extension which have an onCreate method and allows them to do their work.
For the built in methods, this is when the SchemaExtension creates the Schema and when the TagsExtension combines the tags for the editor instance.
const manager = Manager.create(() => [ new DocExtension(), new TextExtension(), new ParagraphExtension(), ])
At this point all the onCreate methods have been called. Including the onCreate for the Schema.
- onView - This is called the framework instance connects the RemirrorManager to the ProseMirror EditorView.
manager.addView(new EditorView(...)) manager.store.commands.insertText('Hello world');.
- [[onStateUpdate]] - This is the method called every time the ProseMirror state changes. Both the extensions and the Framework listen to this event and can provide updates in response.

property destroyed

readonly destroyed: boolean;

Returns true if the manager has been destroyed.

property document

readonly document: Document;

The document to use for rendering and outputting HTML.

property extensions

readonly extensions: readonly GetExtensions<Extension>[];

The extensions stored by this manager

property extensionStore

readonly extensionStore: Remirror.ExtensionStore;

Provides access to the extension store.

property extensionTags

readonly extensionTags: Readonly<CombinedTags<GetNameUnion<Extension>>>;

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

property frameworkAttached

readonly frameworkAttached: boolean;

Returns true when a framework is attached to the manager.
This can be used to check if it is safe to call manager.output.

property marks

readonly marks: Record<this['~M'], MarkExtensionSpec>;

Returns the store marks.

property mounted

readonly mounted: boolean;

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

property nodes

readonly nodes: Record<this['~N'], NodeExtensionSpec>;

Returns the stored nodes

property output

readonly output: FrameworkOutput<Extension>;

Retrieve the framework output.

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

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

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

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

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

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

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

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

  return <Remirror manager={manager} />
}

property schema

readonly schema: EditorSchema;

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

property settings

readonly settings: Remirror.ManagerSettings;

Retrieve the settings used when creating the manager.

property store

readonly store: Remirror.ManagerStore<Extension>;

Get the extension manager store which is accessible at initialization.

property stringHandlers

readonly stringHandlers: NamedStringHandlers;

The registered string handlers provided by the extensions.
By default this includes html and plainText

property tr

readonly tr: Transaction;

Shorthand access to the active transaction from the manager. This is the shared transaction available to all commands and should be used when you need to make your commands chainable.
If working with react and setting up your editor as a controlled component then this is the preferred way to run custom commands, otherwise your commands will end up being non-chainable and be overwritten by anything that comes after.

property view

readonly view: EditorView;

A shorthand way of retrieving the editor view.

method addHandler

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

Add a handler to the manager.
Currently the only event that can be listened to is the destroy event.

method addView

addView: (view: EditorView) => this;

Stores the editor view on the manager
Parameter view
the editor view

method attachFramework

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

Attach a framework to the manager.

method clone

clone: () => RemirrorManager<Extension>;

Make a clone of the manager.
What about the state stored in the extensions and presets, does this need to be recreated as well?

method create

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

Create the manager for your Remirror editor.

method createEmptyDoc

createEmptyDoc: () => ProsemirrorNode;

Create an empty document for the editor based on the current schema.
This automatically looks at the supported content for the doc and the available nodes which fulfil that content in order to create a document with only the minimal required content.
This can be used in conjunction with the create state to reset the current value of the editor.

method createState

createState: (props?: CreateEditorStateProps) => EditorState_2;

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

method destroy

destroy: () => void;

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

method getExtension

getExtension: <
    ExtensionConstructor extends Replace<
        ExtensionConstructor<any>,
        new (...args: any[]) => any
    >
>(
    Constructor: ExtensionConstructor
) => InstanceType<ExtensionConstructor>;

Get the extension instance matching the provided constructor from the manager.
This will throw an error if non existent.

method hasExtension

hasExtension: <
    ExtensionConstructor extends Replace<
        ExtensionConstructor<any>,
        new (...args: any[]) => any
    >
>(
    Constructor: ExtensionConstructor
) => boolean;

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

method includes

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

Check whether the manager includes the names or constructors provided for the preset and extensions.
Returns true if all are included, returns false otherwise.

method onStateUpdate

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

This method should be called by the view layer every time the state is updated.
An example usage of this is within the collaboration extension.

method recreate

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

Recreate the manager with new settings and extensions

class SchemaExtension

class SchemaExtension extends PlainExtension {}

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

Remarks

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

In order to add extra attributes the following would work.

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

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

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

Builtin Extension

property name

readonly name: string;

method createPlugin

createPlugin: () => CreateExtensionPlugin;

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

method onCreate

onCreate: () => void;

This method is responsible for creating, configuring and adding the schema to the editor. Schema is a special type in ProseMirror editors and with remirror it's all just handled for you.

class SuggestExtension

class SuggestExtension extends PlainExtension<SuggestOptions> {}

This extension allows others extension to add the createSuggesters method for adding the prosemirror-suggest functionality to your editor.
Remarks
This is an example of adding custom functionality to an extension via the ExtensionParameterMethods.
Builtin Extension

property name

readonly name: string;

property onAddCustomHandler

onAddCustomHandler: AddCustomHandler<SuggestOptions>;

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

method createExternalPlugins

createExternalPlugins: () => ProsemirrorPlugin[];

Add the prosemirror-suggest plugin to the editor.

method getSuggestMethods

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

Get some helpful methods from the SuggestPluginState.

method getSuggestState

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

Get the suggest plugin state.
This may be removed at a later time.
Modifiers
- @experimental

method isSuggesterActive

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

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

method onCreate

onCreate: () => void;

Create the addSuggester method and removeSuggester methods to the extension store.
This can be used by extensions to conditionally add suggestion support.

class TagsExtension

class TagsExtension extends PlainExtension {}

Create the extension tags which are passed into each extensions method to enable dynamically generated rules and commands.
Tags on nodes and marks are automatically added to the schema as groups.
Builtin Extension

property name

readonly name: string;

method onCreate

onCreate: () => void;

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

class UploadExtension

class UploadExtension extends PlainExtension<DecorationsOptions_2> {}

UploadExtension handle the file upload process.

property name

readonly name: string;

method createExternalPlugins

createExternalPlugins: () => ProsemirrorPlugin_2[];

Create the extension plugin for inserting decorations into the editor.

Interfaces

interface AppendLifecycleProps

interface AppendLifecycleProps extends EditorStateProps {}

property previousState

previousState: EditorState;

The previous state.

property tr

tr: Transaction;

Update this transaction in order to append.

property transactions

transactions: readonly Transaction[];

The transactions that have already been applied.

interface ApplyStateLifecycleProps

interface ApplyStateLifecycleProps extends EditorStateProps {}

property previousState

previousState: EditorState;

The previous state.

property tr

tr: Transaction;

The original transaction which caused this state update.

interface BaseExtensionOptions

interface BaseExtensionOptions extends Remirror.BaseExtensionOptions {}

property exclude

exclude?: ExcludeOptions;

An object which excludes certain functionality from an extension.

property priority

priority?: ExtensionPriority;

The priority with which this extension should be loaded by the manager.
Remarks
Each priority level corresponds to a higher level of importance for the extension within the editor.
When this is set to null the defaultPriority level for the extension will be used instead.

interface BaseFramework

interface BaseFramework<Extension extends AnyExtension> {}

property frameworkOutput

readonly frameworkOutput: FrameworkOutput<Extension>;

The minimum required output from the framework.

property initialEditorState

initialEditorState: EditorState;

The state that is initially passed into the editor.

property name

readonly name: string;

The name of the framework being used.

method destroy

destroy: () => void;

Destroy the framework and cleanup all created listeners.

interface BuiltinOptions

interface BuiltinOptions
    extends SuggestOptions,
        KeymapOptions,
        DecorationsOptions,
        InputRulesOptions {}

interface ChainedCommandProps

interface ChainedCommandProps {}

property enabled

enabled: () => boolean;

Check to see whether the command chain can be run. Returns true when the command can be run.
if (chain.insertText('hello').enabled()) { doSomething(); }

property run

run: (options?: { exitEarly?: boolean }) => void;

Dispatches the chained commands.
chain.insertText('hello').run();
This will run all commands in the chain regardless of whether a previous command was not able to be run.
If exitEarly is set to true the commands will stop running at the first chainable command which doesn't return true.

property tr

tr: () => Transaction;

Applies the updates to the transaction without dispatching the transaction.
This can be used to update a transaction without applying the update.

interface CommandDecoratorMessageProps

interface CommandDecoratorMessageProps {}

property active

active: boolean;

True when the extension is active.

property attrs

attrs: ProsemirrorAttributes | undefined;

Predefined attributes which can influence the returned value.

property enabled

enabled: boolean;

True when the command is enabled.

property t

t: I18nFormatter;

A translation utility for translating a predefined string / or message descriptor.

interface CommandExtensionMeta

interface CommandExtensionMeta {}

property forcedUpdates

forcedUpdates?: UpdatableViewProps[];

interface CommandOptions

interface CommandOptions {}

property trackerClassName

trackerClassName?: Static<string>;

The className that is added to all tracker positions
'@defaultValue 'remirror-tracker-position'

property trackerNodeName

trackerNodeName?: Static<string>;

The default element that is used for all trackers.

interface CommandShape

interface CommandShape<Parameter extends any[] = []> {}

The type of a non chainable command. It is a function with an enabled method to check whether the command can be run.

property active

active?: () => boolean;

Commands which are not attached to a node extension or a mark extension can optionally define custom isActive checker.
This is used for checking if centerAlign is active from the @remirror/extension-node-formatting.

property enabled

enabled: (...args: Parameter) => boolean;

Returns true when the command can be run and false when it can't be run. It basically runs the command without dispatching it to see whether it returns true or false.
Parameter args
The same arguments that are applied to the command function.
Remarks
Some commands can have rules and restrictions. For example, formatting like bold is disabled within a codeBlock. In this case commands.toggleBold.enabled() returns false when within a codeBlock and true when outside.

property original

original: (...args: Parameter) => CommandFunction;

This function gives you access to the original command defined by the extension in your editor exactly as it was defined.
The function returns a function that takes the CommandFunctionProps of { state, dispatch?, tr, view? } object.
function command(...args: any[]) => CommandFunction;

call signature

(...args: Parameter): void;

interface CommandUiDecoratorOptions

interface CommandUiDecoratorOptions {}

property description

description?: CommandDecoratorMessage;

An i18n compatible description which can be used to provide extra context for the command.

property icon

icon?: CommandDecoratorValue<CoreIcon | CommandUiIcon>;

The default command icon to use if this has a UI representation.

property label

label?: CommandDecoratorMessage;

A label for the command with support for i18n. This makes use of babel-plugin-macros to generate the message.

property shortcut

shortcut?: CommandDecoratorShortcut;

A keyboard shortcut which can be used to run the specified command.
Rather than defining this here, you should create a decorated keyBinding and set the command name option. This way the shortcut will dynamically be added at runtime.

interface CommandUiIcon

interface CommandUiIcon {}

property name

name: CoreIcon;

The icon name.

property sub

sub?: string;

Text placed in a subscript position. For ltr this is in the bottom right hand corner.

property sup

sup?: string;

Text placed in a superscript position. For ltr this is in the top right hand corner of the icon.

interface CreateEditorStateProps

interface CreateEditorStateProps extends Omit<StringHandlerProps, 'stringHandler'> {}

property content

content?: RemirrorContentType;

This is where content can be supplied to the Editor.
Remarks
Content can either be - a string (which will be parsed by the stringHandler) - JSON object matching Prosemirror expected shape - A top level ProsemirrorNode
If this is left undefined then the editor will use the default empty doc.

property selection

selection?: PrimitiveSelection;

The selection that the user should have in the created node.

property stringHandler

stringHandler?: keyof Remirror.StringHandlers | StringHandler;

A function which transforms a string into a prosemirror node.
Remarks
Can be used to transform markdown / html or any other string format into a prosemirror node.
See [[fromHTML]] for an example of how this could work.

interface CreateExtensionPlugin

interface CreateExtensionPlugin<PluginState = any>
    extends Pick<
        PluginSpec<PluginState>,
        | 'props'
        | 'state'
        | 'key'
        | 'view'
        | 'filterTransaction'
        | 'appendTransaction'
    > {}

An interface for creating custom plugins in your remirror editor.

index signature

[key: string]: any;

Additional properties are allowed on plugin specs, which can be read via [Plugin.spec](https://prosemirror.net/docs/ref/#state.Plugin.spec).

interface CreateExtensionPlugin

interface CreateExtensionPlugin<PluginState = any>
    extends Pick<
        PluginSpec<PluginState>,
        | 'props'
        | 'state'
        | 'key'
        | 'view'
        | 'filterTransaction'
        | 'appendTransaction'
    > {}

An interface for creating custom plugins in your remirror editor.

index signature

[key: string]: any;

Additional properties are allowed on plugin specs, which can be read via [Plugin.spec](https://prosemirror.net/docs/ref/#state.Plugin.spec).

interface CreateExtensionPlugin

interface CreateExtensionPlugin<PluginState = any>
    extends Pick<
        PluginSpec<PluginState>,
        | 'props'
        | 'state'
        | 'key'
        | 'view'
        | 'filterTransaction'
        | 'appendTransaction'
    > {}

An interface for creating custom plugins in your remirror editor.

index signature

[key: string]: any;

Additional properties are allowed on plugin specs, which can be read via [Plugin.spec](https://prosemirror.net/docs/ref/#state.Plugin.spec).

interface DecorationPlaceholderMeta

interface DecorationPlaceholderMeta {}

property added

added?: Array<WithBase<DecorationPlaceholder>>;

The trackers to add.

property clearTrackers

clearTrackers?: boolean;

When set to true will delete all the active trackers.

property removed

removed?: unknown[];

The trackers to remove.

property updated

updated?: Array<{
    id: unknown;
    data: any;
}>;

The trackers to update with new data. Data is an object and is used to include properties like progress for progress indicators. Only widget decorations can be updated in this way.

interface DecorationsOptions

interface DecorationsOptions {}

property decorations

decorations: Handler<(state: EditorState) => DecorationSet_2>;

Add custom decorations to the editor via extension.addHandler. This can be used via the useDecorations hook available from remirror/react.

property persistentSelectionClass

persistentSelectionClass?: AcceptUndefined<string | boolean>;

This setting is for adding a decoration to the selected text and can be used to preserve the marker for the selection when the editor loses focus.
You can set it as 'selection' to match the default styles provided by @remirror/styles.

property placeholderClassName

placeholderClassName?: Static<string>;

The className that is added to all placeholder positions
'@defaultValue 'placeholder'

property placeholderNodeName

placeholderNodeName?: Static<string>;

The default element that is used for all placeholders.

interface DelayedPlaceholderCommandProps

interface DelayedPlaceholderCommandProps<Value> {}

property onFailure

onFailure?: CommandFunction<{
    error: any;
}>;

Called when a failure is encountered.

property onSuccess

onSuccess: (
    value: Value,
    range: FromToProps,
    commandProps: CommandFunctionProps
) => boolean;

Called when the promise succeeds and the placeholder still exists. If no placeholder can be found (for example, the user has deleted the entire document) then the failure handler is called instead.

property placeholder

placeholder: DecorationPlaceholder;

The placeholder configuration.

property promise

promise: DelayedPromiseCreator<Value>;

A function that returns a promise.

interface DocChangedOptions

interface DocChangedOptions {}

property docChanged

docChanged?: Handler<(props: StateUpdateLifecycleProps) => void>;

interface ExcludeOptions

interface ExcludeOptions extends Partial<Remirror.ExcludeOptions> {}

interface Extension

interface Extension<Options extends ValidOptions = EmptyShape>
    extends Remirror.BaseExtension {}

Declaration merging since the constructor property can't be defined on the actual class.

property constructor

constructor: ExtensionConstructor<Options>;

The type of the constructor for the extension.

property requiredExtensions

requiredExtensions?: AnyExtensionConstructor[];

An extension can declare the extensions it requires.
Remarks
When creating the extension manager the extension will be checked for required extension as well as a quick check to see if the required extension is already included. If not present a descriptive error will be thrown.

interface ExtensionCommandReturn

interface ExtensionCommandReturn {}

The return signature for an extensions command method.

index signature

[command: string]: ExtensionCommandFunction;

interface ExtensionConstructor

interface ExtensionConstructor<Options extends ValidOptions = EmptyShape>
    extends BaseClassConstructor<Options, BaseExtensionOptions>,
        Partial<Remirror.StaticExtensionOptions> {}

property defaultPriority

readonly defaultPriority: ExtensionPriority;

The default priority level for all instance of this extension.

construct signature

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

interface ExtensionHelperReturn

interface ExtensionHelperReturn {}

The return signature for an extensions helper method.

index signature

[helper: string]: AnyFunction;

interface ExtensionListProps

interface ExtensionListProps<Extension extends AnyExtension = AnyExtension> {}

property extensions

readonly extensions: readonly Extension[];

The extensions property.

interface ExtensionStore

interface ExtensionStore extends Remirror.ExtensionStore {}

The extension store which is shared across all extensions. It provides access to methods and data that can be used throughout the extension lifecycle.

interface FileUploader

interface FileUploader<NodeAttributes> {}

property abort

abort: () => void;

Aborts the upload operation.

property insert

insert: (file: File) => NodeAttributes;

Inserts the file (but doesn't start the upload operation) and returns an object with this to be uploaded file's attributes.

property upload

upload: (context: UploadContext) => Promise<NodeAttributes>;

Starts the upload operation and returns a promise. The promise will be resolved by a successful upload with uploaded file's attributes, or rejected because of an error.
upload can update the object context to update information during the upload process. context will be passed to the render function. The render function can add a listener to context by using context.addListener to get the updated values. The default render function will try to find the keys loaded and total in context, which are two numbers that represent the progress of the upload.

interface FrameworkOptions

interface FrameworkOptions<
    Extension extends AnyExtension,
    Props extends FrameworkProps<Extension>
> {}

property element

element?: Element;

When provided the view will immediately be inserted into the dom within this element.

property getProps

getProps: () => Props;

A method for getting the passed in props.

property initialEditorState

initialEditorState: EditorState;

The initial editor state

interface FrameworkOutput

interface FrameworkOutput<Extension extends AnyExtension>
    extends Remirror.ManagerStore<Extension> {}

This is the base output that is created by a framework.

property addHandler

addHandler: AddFrameworkHandler<Extension>;

Add event handlers to the remirror editor at runtime.

property blur

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

Blur the editor.
Deprecated
This method may be removed in the future and it is advisable to use commands.blur().

property clearContent

clearContent: (options?: TriggerChangeProps) => void;

Clears all editor content.
Parameter options
includes a triggerChange handler which should be triggered by the update.
To use this in a controlled editor, you must set triggerChange to true.

property focus

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

Focus the editor at the start | end a specific position or at a valid range between { from, to }.
Deprecated
This method may be removed in the future and it is advisable to use commands.focus().

property getExtension

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

Get an extension by it's constructor.

property getPreviousState

getPreviousState: () => EditorState;

A getter function for the previous prosemirror editor state. It can be used to check what's changed between states.

property getState

getState: () => EditorState;

A getter function for the current editor state. It's a wrapper around view.state.

property hasExtension

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

Assert if an extension is present by it's constructor.

property manager

manager: RemirrorManager<Extension>;

The manager which was used to create this editor.

property setContent

setContent: (content: RemirrorContentType, options?: TriggerChangeProps) => void;

Replace all editor content with the new content.
Parameter triggerOnChange
whether the onChange handler should be triggered by the update. Defaults to false.
To use this in a controlled editor, you must set triggerChange to true.
Remarks
Allows for the editor content to be overridden by force.

property uid

uid: string;

The unique id for the editor instance.

interface FrameworkProps

interface FrameworkProps<Extension extends AnyExtension> {}

The base options for an editor wrapper. This is used within the react and dom implementations.

property attributes

attributes?: Record<string, string> | AttributePropFunction<Extension>;

Adds attributes directly to the prosemirror element.

property autoFocus

autoFocus?: FocusType;

When set to true focus will be place on the editor as soon as it first loads.

property classNames

classNames?: ClassName[];

Additional classes which can be passed into the the editor wrapper. These are placed on root Prosemirror element and can be used to effect styling within the editor.

property editable

editable?: boolean;

Determines whether this editor is editable or not.

property initialContent

initialContent?: RemirrorContentType | [RemirrorContentType, PrimitiveSelection];

Set the starting value for the editor.
Without setting the value prop onChange remirror renders as an uncontrolled component. Value changes are passed back out of the editor and there is now way to set the value via props. As a result this is the only opportunity to directly control the rendered text.

property label

label?: string;

Sets the accessibility label for the editor instance.

property manager

manager: RemirrorManager<Extension>;

Pass in the extension manager.
The manager is responsible for handling all Prosemirror related functionality.

property onBlur

onBlur?: (params: RemirrorEventListenerProps<Extension>, event: Event) => void;

An event listener which is called whenever the editor is blurred.

property onChange

onChange?: RemirrorEventListener<Extension>;

Called on every change to the Prosemirror state.

property onDispatchTransaction

onDispatchTransaction?: TransactionTransformer;

A method called when the editor is dispatching the transaction.
Remarks
Use this to update the transaction which will be used to update the editor state.

property onFocus

onFocus?: (params: RemirrorEventListenerProps<Extension>, event: Event) => void;

An event listener which is called whenever the editor gains focus.

interface GetChangeOptionsReturn

interface GetChangeOptionsReturn<Options extends ValidOptions> {}

property changes

changes: Readonly<Required<ChangedOptions<Options>>>;

An object with all the keys showing what's been changed. This should be used to determine the children extensions which should be updated.
Remarks
Using this can prevent unnecessary updates. It's possible for new properties to be passed that are identical to the previous, by checking if the object was changed this can be avoided.
This uses a discriminated union. When the changed property is true then the object has a value as well.
if (changes.myProperty.changed) { doSomething(changes.myProperty.value); }

property options

options: GetFixedDynamic<Options>;

The next value of the properties after the update.This also includes values which have not been changed.

property pickChanged

pickChanged: PickChanged<Options>;

Pick the changed values by their key. An object populated with only the changed items will be returned to you.

interface HandlerKeyOptions

interface HandlerKeyOptions<ReturnType = any, Args extends any[] = any[]> {}

property earlyReturnValue

earlyReturnValue?:
    | LiteralUnion<typeof IGNORE, Primitive>
    | ((value: unknown) => boolean);

When this value is encountered the handler will exit early.
Set the value to '__IGNORE__' to ignore the early return value.

property reducer

reducer?: {
    /**
     * Combine the value with the the previous value
     */
    accumulator: (
        accumulated: ReturnType,
        latestValue: ReturnType,
        ...args: Args
    ) => ReturnType;
    /**
     * The a function that returns the default value for combined handler
     * values. This is required for setting up a default value.
     */
    getDefault: (...args: Args) => ReturnType;
};

Allows combining the values from the handlers together to produce a single reduced output value.

interface HelperDecoratorOptions

interface HelperDecoratorOptions {}

interface IdentifierSchemaAttributes

interface IdentifierSchemaAttributes {}

The interface for adding extra attributes to multiple node and mark extensions.

property attributes

attributes: SchemaAttributes;

The attributes to be added.

property identifiers

identifiers: Identifiers;

The nodes or marks to add extra attributes to.
This can either be an array of the strings or the following specific identifiers:
- 'nodes' for all nodes - 'marks' for all marks - 'all' for all extensions which touch the schema.

interface IdentifiersObject

interface IdentifiersObject {}

With tags, you can select a specific sub selection of marks and nodes. This will be the basis for adding advanced formatting to remirror.

import { ExtensionTag } from 'remirror';
import { createCoreManager, CorePreset } from 'remirror/extensions';
import { WysiwygPreset } from 'remirror/extensions';

const manager = createCoreManager(() => [new WysiwygPreset(), new CorePreset()], {
  extraAttributes: [
    {
      identifiers: {
        tags: [ExtensionTag.NodeBlock],
        type: 'node',
      },
      attributes: { role: 'presentation' },
    },
  ],
});

Each item in the tags array should be read as an OR so the following would match Tag1 OR Tag2 OR Tag3.

{ tags: ["Tag1", "Tag2", "Tag3"] }

The type property (mark | node) is exclusive and limits the type of extension names that will be matched. When mark is set it only matches with marks.

property behavior

behavior?: 'all' | 'any';

Determines how the array of tags are combined:
- all - the extension only matches when all tags are present. - any - the extension will match if it includes any of the specified tags.
This only affects the tags property.
The saddest part about this property is that, as a UK resident, I've succumbed to using the Americanized spelling instead of the Oxford Dictionary defined spelling of behaviour 😢

property excludeNames

excludeNames?: string[];

Exclude these names from being matched.

property excludeTags

excludeTags?: string[];

Exclude these tags from being matched. Will always exclude if any of the tags

property names

names?: string[];

Additional names to include. These will still be added even if the extension name matches with excludeTags member.

property tags

tags?: ExtensionTagType[];

Will find relevant names based on the defined behaviour.

property type

type?: 'node' | 'mark';

Whether to restrict by whether this is a [[ProsemirrorNode]] or a [[Mark]]. Leave blank to accept all types.

interface InputRulesOptions

interface InputRulesOptions {}

property shouldSkipInputRule

shouldSkipInputRule?: Handler<ShouldSkipFunction>;

Handlers which can be registered to check whether an input rule should be active at this time.
The handlers are given a parameter with the current state, the fullMatch and the captureGroup and can determine whether the input rule should still be run.
Return true to prevent any active input rules from being triggered.

interface InsertNodeOptions

interface InsertNodeOptions {}

property attrs

attrs?: ProsemirrorAttributes;

property content

content?: Fragment | ProsemirrorNode | ProsemirrorNode[] | string;

The content to insert.

property marks

marks?: Array<Mark_2 | string | MarkType>;

property range

range?: FromToProps;

Deprecated
use selection property instead.

property replaceEmptyParentBlock

replaceEmptyParentBlock?: boolean;

Set this to true to replace an empty parent block with this content (if the content is a block node).

property selection

selection?: PrimitiveSelection;

Set the selection where the command should occur.

interface KeybindingDecoratorOptions

interface KeybindingDecoratorOptions<Options extends Shape = Shape> {}

property command

command?: Remirror.AllUiCommandNames;

The name of the command that the keybinding should be attached to.

property isActive

isActive?: (options: Options, store: Remirror.ExtensionStore) => boolean;

This can be used to set a keybinding as inactive based on the provided options.

property priority

priority?:
    | ExtensionPriority
    | ((options: Options, store: Remirror.ExtensionStore) => ExtensionPriority);

The priority for this keybinding.

property shortcut

shortcut: KeyboardShortcut;

The keypress sequence to intercept.
- Enter - Shift-Enter

interface KeymapOptions

interface KeymapOptions {}

property excludeBaseKeymap

excludeBaseKeymap?: boolean;

When true will exclude the default prosemirror keymap.
Remarks
You might want to set this to true if you want to fully customise the keyboard mappings for your editor. Otherwise it is advisable to leave it unchanged.

property exitMarksOnArrowPress

exitMarksOnArrowPress?: boolean;

Whether to support exiting marks when the left and right array keys are pressed.
Can be set to
- true - enables exits from both the entrance and the end of the mark

property keymap

keymap?: CustomHandler<PrioritizedKeyBindings>;

The implementation for the extra keybindings added to the settings.
Remarks
This allows for you to add extra key mappings which will be checked before the default keymaps, if they return false then the default keymaps are still checked.
No key mappings are removed in this process.
const extension = BaseKeymapExtension.create({ keymap: { Enter({ state, dispatch }) { //... Logic return true; }, }});

property selectParentNodeOnEscape

selectParentNodeOnEscape?: boolean;

Determines whether the escape key selects the current node.

property shortcuts

shortcuts?: KeyboardShortcuts;

The shortcuts to use for named keybindings in the editor.

property undoInputRuleOnBackspace

undoInputRuleOnBackspace?: boolean;

Determines whether a backspace after an input rule has been applied should reverse the effect of the input rule.

interface ListenerProps

interface ListenerProps
    extends Partial<EditorStateProps>,
        Partial<TransactionProps> {}

property transactions

transactions?: readonly Transaction[];

When the state updates are not controlled and it was a transaction that caused the state to be updated this value captures all the transaction updates caused by prosemirror plugins hook state methods like filterTransactions and appendTransactions.
This is for advanced users only.

interface ManagerEvents

interface ManagerEvents {}

property clone

clone: (manager: AnyRemirrorManager) => void;

Called whenever the manager is cloned with the newly created manager instance.
This is mainly used for testing so that the RemirrorTester can always reference the latest manager.

property destroy

destroy: () => void;

An event listener which is called whenever the manager is destroyed.

property recreate

recreate: (manager: AnyRemirrorManager) => void;

Called whenever the manager is recreated with the newly created manager instance.
This is mainly used for testing so that the RemirrorTester can always reference the latest manager.

property stateUpdate

stateUpdate: (props: StateUpdateLifecycleProps) => void;

Called when the state is updated.

interface MarkExtension

interface MarkExtension<Options extends ValidOptions = EmptyShape>
    extends Extension<Options>,
        Remirror.MarkExtension {}

interface MetaOptions

interface MetaOptions {}

property capture

capture?: Static<boolean>;

Set to true to capture meta data on commands and keybindings. This creates a wrapper around every command and keybinding and as a result it may lead to a performance penalty.

interface NewChainedCommandProps

interface NewChainedCommandProps<
    Extension extends AnyExtension,
    Chained extends ChainedIntersection<Extension> = ChainedIntersection<Extension>
> {}

property new

new: (tr?: Transaction) => ChainedFromExtensions<Extension, Chained>;

Returns a new chain, with an empty command set.

chain.toggleBold();
chain.new().toggleItalic().run(); // Only toggleItalic would be run

interface NodeExtension

interface NodeExtension<Options extends ValidOptions = EmptyShape>
    extends Extension<Options>,
        Remirror.NodeExtension {}

interface OnSetOptionsProps

interface OnSetOptionsProps<Options extends ValidOptions>
    extends Pick<GetChangeOptionsReturn<Options>, 'changes' | 'pickChanged'>,
        UpdateReasonProps {}

property initialOptions

initialOptions: RemoveAnnotations<GetFixedDynamic<Options>>;

The initial options for the extension. Falls back to default options.

property options

options: RemoveAnnotations<GetFixedDynamic<Options>>;

The next value of the properties after the update.This also includes values which have not been changed.

interface PasteRulesOptions

interface PasteRulesOptions {}

interface PlaceholderConfig

interface PlaceholderConfig extends TextProps {}

property className

className: string;

interface PluginsOptions

interface PluginsOptions {}

property appendTransaction

appendTransaction?: Handler<(props: AppendLifecycleProps) => void>;

The event handler which can be used by hooks to listen to intercept updates to the transaction.

property applyState

applyState?: Handler<(props: ApplyStateLifecycleProps) => void>;

The event handler which can be used by hooks to listen to state updates when they are being applied to the editor.

interface RemirrorEventListenerProps

interface RemirrorEventListenerProps<Extension extends AnyExtension>
    extends EditorStateProps,
        Remirror.ListenerProperties<Extension>,
        EditorViewProps {}

property createStateFromContent

createStateFromContent: CreateStateFromContent;

Manually create a new state object with the desired content.

property firstRender

firstRender: boolean;

True when this is the first render of the editor. This applies when the editor is first attached to the DOM.

property internalUpdate

internalUpdate: boolean;

A shorthand way of checking whether the update was triggered by editor usage (internal) or overwriting the state.
- true The update was triggered by a change in the prosemirror doc or an update to the selection. In these cases tr will have a value. - false The update was caused by a call to setContent or resetContent

property previousState

previousState: EditorState;

The previous state.

property tr

tr?: Transaction;

The original transaction which caused this state update.
This allows for inspecting the reason behind the state change. When undefined this means that the state was updated externally.
If available: - Metadata on the transaction can be inspected. tr.getMeta - Was the change caused by added / removed content? tr.docChanged - Was ths change caused by an updated selection? tr.selectionSet - tr.steps can be inspected for further granularity.

property transactions

transactions?: readonly Transaction[];

When the state updates are not controlled and it was a transaction that caused the state to be updated this value captures all the transaction updates caused by prosemirror plugins hook state methods like filterTransactions and appendTransactions.
This is for advanced users only.

interface RemirrorManager

interface RemirrorManager<Extension extends AnyExtension> {}

property constructor

constructor: RemirrorManagerConstructor;

The constructor for the [[RemirrorManager]].

interface StateUpdateLifecycleProps

interface StateUpdateLifecycleProps extends EditorStateProps {}

property firstUpdate

firstUpdate: boolean;

When true, this lets you know that it is the first state update to happen. This can be used to run an action that should only be run when the state is first available.

property previousState

previousState: EditorState;

The previous state.

property tr

tr?: Transaction;

The original transaction which caused this state update.
This allows for inspecting the reason behind the state change. When undefined this means that the state was updated externally.
If available: - Metadata on the transaction can be inspected. tr.getMeta - Was the change caused by added / removed content? tr.docChanged - Was ths change caused by an updated selection? tr.selectionSet - tr.steps can be inspected for further granularity.

property transactions

transactions?: readonly Transaction[];

When the state updates are not controlled and it was a transaction that caused the state to be updated this value captures all the transaction updates caused by prosemirror plugins hook state methods like filterTransactions and appendTransactions.
This is for advanced users only, and I personally have never needed it.

interface SuggestOptions

interface SuggestOptions {}

property suggester

suggester: CustomHandler<Suggester>;

The custom handler which enables adding suggesters.

interface TriggerChangeProps

interface TriggerChangeProps {}

property triggerChange

triggerChange?: boolean;

Whether or not to trigger this as a change and call any handlers.

interface UpdateReasonProps

interface UpdateReasonProps {}

property reason

reason: UpdateReason;

Describes what triggered an update.
- set - the change was triggered by an update in some properties - reset - the user has specifically requested to reset all properties to their initial defaults - init - the update is happening when the preset is being It will receive all the items as changes.

interface UpdateStateProps

interface UpdateStateProps
    extends Partial<TransactionProps>,
        EditorStateProps,
        TriggerChangeProps {}

property transactions

transactions?: readonly Transaction[];

When the state updates are not controlled and it was a transaction that caused the state to be updated this value captures all the transaction updates caused by prosemirror plugins hook state methods like filterTransactions and appendTransactions.
This is for advanced users only.

interface UploadContext

interface UploadContext {}

property addListener

addListener: (listener: UploadContextListener) => () => void;

property get

get: (key: string) => unknown;

property set

set: (key: string, value: unknown) => void;

interface UploadPlaceholderPayload

interface UploadPlaceholderPayload<NodeAttributes extends AbstractNodeAttributes> {}

property context

context: UploadContext;

property fileUploader

fileUploader: FileUploader<NodeAttributes>;

interface WidgetPlaceholder

interface WidgetPlaceholder<Data = any> extends BasePlaceholder, DataProps<Data> {}

property pos

pos: number;

Widget trackers only support fixed positions.

property type

type: 'widget';

Declare this as a widget tracker.
Widget trackers support adding custom components to the created dom element.

method createElement

createElement: (view: EditorView, pos: number) => HTMLElement;

Called the first time this widget decoration is added to the dom.

method onDestroy

onDestroy: (view: EditorView, element: HTMLElement) => void;

Called when the widget decoration is removed from the dom.

method onUpdate

onUpdate: (
    view: EditorView,
    pos: number,
    element: HTMLElement,
    data: any
) => void;

Called whenever the position tracker updates with the new position.

Type Aliases

type ActiveFromExtensions

type ActiveFromExtensions<Extension extends AnyExtension> = Record<
    GetNodeNameUnion<Extension> extends never ? string : GetNodeNameUnion<Extension>,
    (attrs?: ProsemirrorAttributes) => boolean
> &
    Record<
        GetMarkNameUnion<Extension> extends never
            ? string
            : GetMarkNameUnion<Extension>,
        (attrs?: ProsemirrorAttributes) => boolean
    >;

The type which gets the active methods from the provided extensions.

type AddCustomHandler

type AddCustomHandler<Options extends ValidOptions> = (
    props: Partial<GetCustomHandler<Options>>
) => Dispose | undefined;

type AddHandler

type AddHandler<Options extends ValidOptions> = <
    Key extends keyof GetHandler<Options>
>(
    key: Key,
    method: GetHandler<Options>[Key]
) => Dispose;

type AnyExtension

type AnyExtension = Replace<Extension<Shape>, Remirror.AnyExtensionOverrides> &
    object;

The type which is applicable to any extension instance.
**NOTE** & object forces VSCode to use the name AnyExtension rather than print out Replace<Extension<Shape>, Remirror.AnyExtensionOverrides>

type AnyExtensionConstructor

type AnyExtensionConstructor = Replace<
    ExtensionConstructor<any>,
    {
        new (...args: any[]): AnyExtension;
    }
>;

The type which is applicable to any extension instance.

type AnyManagerStore

type AnyManagerStore = Remirror.ManagerStore<any>;

type AnyMarkExtension

type AnyMarkExtension = Replace<
    MarkExtension<Shape>,
    Remirror.AnyExtensionOverrides
> &
    object;

The type for any potential MarkExtension.

type AnyNodeExtension

type AnyNodeExtension = Replace<
    NodeExtension<Shape>,
    Remirror.AnyExtensionOverrides
> &
    object;

The type for any potential NodeExtension.

type AnyPlainExtension

type AnyPlainExtension = Replace<
    PlainExtension<Shape>,
    Remirror.AnyExtensionOverrides
> &
    object;

The type for any potential PlainExtension.

type AnyRemirrorManager

type AnyRemirrorManager = Simplify<
    Replace<
        RemirrorManager<AnyExtension>,
        {
            clone: () => AnyRemirrorManager;
            store: Replace<
                Remirror.ManagerStore<AnyExtension>,
                {
                    chain: any;
                }
            >;
            output:
                | Replace<
                      FrameworkOutput<AnyExtension>,
                      {
                          chain: any;
                          manager: AnyRemirrorManager;
                      }
                  >
                | undefined;
            view: EditorView;
            addView: (view: EditorView) => void;
            attachFramework: (
                framework: any,
                updateHandler: (props: StateUpdateLifecycleProps) => void
            ) => void;
            /** @internal */
            ['~E']: AnyExtension;
            /** @internal */
            ['~AN']: string;
            /** @internal */
            ['~N']: string;
            /** @internal */
            ['~M']: string;
            /** @internal */
            ['~P']: string;
        }
    >
>;

type AttributePropFunction

type AttributePropFunction<Extension extends AnyExtension> = (
    params: RemirrorEventListenerProps<Extension>
) => Record<string, string>;

type AttrsFromExtensions

type AttrsFromExtensions<Extension extends AnyExtension> = Record<
    GetNodeNameUnion<Extension> extends never ? string : GetNodeNameUnion<Extension>,
    (attrs?: ProsemirrorAttributes) => ProsemirrorAttributes | undefined
> &
    Record<
        GetMarkNameUnion<Extension> extends never
            ? string
            : GetMarkNameUnion<Extension>,
        (attrs?: ProsemirrorAttributes) => ProsemirrorAttributes | undefined
    >;

The type which gets the attributes for the provided node or mark. It returns undefined if the node / mark is not active.

type BuiltinPreset

type BuiltinPreset =
    | TagsExtension
    | SchemaExtension
    | AttributesExtension
    | PluginsExtension
    | InputRulesExtension
    | PasteRulesExtension
    | NodeViewsExtension
    | SuggestExtension
    | CommandsExtension
    | HelpersExtension
    | KeymapExtension
    | DocChangedExtension
    | UploadExtension
    | DecorationsExtension;

type ChainedFromExtensions

type ChainedFromExtensions<
    Extension extends AnyExtension,
    Chained extends ChainedIntersection<Extension> = ChainedIntersection<Extension>
> = _ChainedFromExtensions<Extension, Chained> &
    ((tr: Transaction) => _ChainedFromExtensions<Extension, Chained>);

type ChainedIntersection

type ChainedIntersection<Extension extends AnyExtension> = UnionToIntersection<
    MapToChainedCommand<GetCommands<Extension> | GetDecoratedCommands<Extension>>
>;

type ChangedOptions

type ChangedOptions<Options extends ValidOptions> = {
    [Key in keyof GetDynamic<Options>]: Changes<GetDynamic<Options>[Key]>;
};

Highlights all the properties that have changed.

type CombinedTags

type CombinedTags<Name extends string = string> = Record<ExtensionTagType, Name[]>;

The shape of the tag data stored by the extension manager.
This data can be used by other extensions to dynamically determine which nodes should affected by commands / plugins / keys etc...

type CommandDecoratorMessage

type CommandDecoratorMessage = CommandDecoratorValue<string>;

type CommandDecoratorOptions

type CommandDecoratorOptions<Options extends Shape = Shape> =
    | ChainableCommandDecoratorOptions<Options>
    | NonChainableCommandDecoratorOptions<Options>;

type CommandDecoratorShortcut

type CommandDecoratorShortcut =
    | string
    | {
          shortcut: string;
          attrs: ProsemirrorAttributes;
      }
    | string[]
    | Array<{
          shortcut: string;
          attrs: ProsemirrorAttributes;
      }>;

type CommandDecoratorValue

type CommandDecoratorValue<Value> =
    | ((props: CommandDecoratorMessageProps) => Value)
    | Value;

type CommandNames

type CommandNames<Extension extends AnyExtension> = StringKey<
    CommandsFromExtensions<Extension>
>;

Utility type for pulling all the command names from a list

type CommandsFromExtensions

type CommandsFromExtensions<
    Extension extends AnyExtension,
    Expanded extends AnyExtension = GetExtensions<Extension>
> = UnionToIntersection<
    MapToUnchainedCommand<GetCommands<Expanded> | GetDecoratedCommands<Expanded>>
>;

Utility type which receives an extension and provides the type of actions it makes available.

type CreateStateFromContent

type CreateStateFromContent = (
    content: RemirrorContentType,
    selection?: PrimitiveSelection
) => EditorState;

type DecorationPlaceholder

type DecorationPlaceholder = WidgetPlaceholder | NodePlaceholder | InlinePlaceholder;

type DefaultExtensionOptions

type DefaultExtensionOptions<Options extends ValidOptions> = DefaultOptions<
    Options,
    BaseExtensionOptions
>;

Get the expected type signature for the defaultOptions. Requires that every optional setting key (except for keys which are defined on the BaseExtensionOptions) has a value assigned.

type DelayedPromiseCreator

type DelayedPromiseCreator<Value> = (props: CommandFunctionProps) => Promise<Value>;

type DelayedValue

type DelayedValue<Type> = Promise<Type> | (() => Promise<Type>);

type DynamicOptionsOfConstructor

type DynamicOptionsOfConstructor<Constructor extends AnyConstructor> =
    GetPartialDynamic<GetOptions<InstanceType<Constructor>>>;

Get the options from any constructor. Can be used for both presets and extensions.

type ExtensionCommandFunction

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

type ExtensionConstructorProps

type ExtensionConstructorProps<Options extends ValidOptions> = ConstructorProps<
    Options,
    BaseExtensionOptions
>;

Auto infers the parameter for the constructor. If there is a required static option then the TypeScript compiler will error if nothing is passed in.

type ExtensionDecoratorOptions

type ExtensionDecoratorOptions<Options extends Shape = EmptyShape> =
    DefaultPriorityProps &
        IfHasRequiredProperties<
            DefaultExtensionOptions<Options>,
            DefaultOptionsProps<Options>,
            Partial<DefaultOptionsProps<Options>>
        > &
        IfEmpty<
            GetStatic<Options>,
            Partial<StaticKeysProps<Options>>,
            StaticKeysProps<Options>
        > &
        IfEmpty<
            GetHandler<Options>,
            Partial<HandlerKeysProps<Options>>,
            HandlerKeysProps<Options>
        > &
        IfEmpty<
            GetCustomHandler<Options>,
            Partial<CustomHandlerKeysProps<Options>>,
            CustomHandlerKeysProps<Options>
        > &
        Partial<Remirror.StaticExtensionOptions>;

type FocusType

type FocusType = PrimitiveSelection | boolean;

The type of arguments acceptable for the focus parameter.
- Can be a prosemirror selection - A range of { from: number; to: number } - A single position with a number - A string of 'start' | 'end' - true which sets the focus to the current position or start.

type FocusType

type FocusType = PrimitiveSelection | boolean;

The type of arguments acceptable for the focus parameter.
- Can be a prosemirror selection - A range of { from: number; to: number } - A single position with a number - A string of 'start' | 'end' - true which sets the focus to the current position or start.

type ForcedUpdateMeta

type ForcedUpdateMeta = UpdatableViewProps[];

Provides the list of Prosemirror EditorView props that should be updated/

type GetCommands

type GetCommands<
    Type extends {
        ['~C']: unknown;
    }
> = Type['~C'];

Get the commands from a RemirrorManager, Extension or Preset.

type GetConstructor

type GetConstructor<
    Type extends {
        constructor: unknown;
    }
> = Type['constructor'];

Get the constructor of an instance.

type GetExtensions

type GetExtensions<Extension> = AnyExtension extends Extension
    ? AnyExtension
    : Extension extends AnyExtension // Now create the union of the provided extension and it's recursively
    ? Extension | GetExtensions<Extension['~E']>
    : AnyExtension;

Get the extension type and the extension type of all sub extensions.
This uses recursive conditional types which are only available in typescript@4.1 https://github.com/microsoft/TypeScript/pull/40002

type GetHelpers

type GetHelpers<
    Type extends {
        ['~H']: unknown;
    }
> = Type['~H'];

Get the helpers provided by an from a RemirrorManager, Extension or Preset.

type GetMarkNameUnion

type GetMarkNameUnion<
    Extension extends AnyExtension,
    Expanded extends AnyExtension = GetExtensions<Extension>
> = Expanded extends AnyMarkExtension ? Expanded['name'] : never;

A utility type for retrieving the name of an extension only when it's a mark extension.

type GetNameUnion

type GetNameUnion<Extension extends AnyExtension> = GetExtensions<Extension>['name'];

Get the names of all available extensions.

type GetNodeNameUnion

type GetNodeNameUnion<
    Extension extends AnyExtension,
    Expanded extends AnyExtension = GetExtensions<Extension>
> = Expanded extends AnyNodeExtension ? Expanded['name'] : never;

A utility type for retrieving the name of an extension only when it's a node extension.

type GetOptions

type GetOptions<
    Type extends {
        ['~O']: unknown;
    }
> = Type['~O'];

Get the static extension settings.

type GetPlainNameUnion

type GetPlainNameUnion<
    Extension extends AnyExtension,
    Expanded extends AnyExtension = GetExtensions<Extension>
> = Expanded extends AnyPlainExtension ? Expanded['name'] : never;

A utility type for retrieving the name of an extension only when it's a plain extension.

type Helper

type Helper<Type> = Type extends null | undefined ? Type : Type & HelperAnnotation;

An annotation which marks decorated helper methods for an extension.

type HelperAnnotation

type HelperAnnotation = Flavoring<'HelperAnnotation'>;

type HelperFunction

type HelperFunction<Type extends HelperAnnotation = HelperAnnotation> =
    AnyFunction<Type>;

A function with a return signature annotated as a helper.

type HelperNames

type HelperNames<Extension extends AnyExtension> = StringKey<
    HelpersFromExtensions<Extension>
>;

Utility type for pulling all the action names from a list

type HelpersFromExtensions

type HelpersFromExtensions<
    Extension extends AnyExtension,
    Expanded extends AnyExtension = GetExtensions<Extension>
> = UnionToIntersection<
    MapHelpers<GetHelpers<Expanded> | GetDecoratedHelpers<Expanded>>
>;

Utility type which receives an extension and provides the type of helpers it makes available.

type Identifiers

type Identifiers = 'nodes' | 'marks' | 'all' | readonly string[] | IdentifiersObject;

The extra identifiers that can be used.
- nodes - match all nodes - marks - match all marks - all - match everything in the editor - string[] - match the selected node and mark names - [[IdentifiersObject]] - match by ExtensionTag and type name.

type KeyBindingsTuple

type KeyBindingsTuple = [priority: ExtensionPriority, bindings: KeyBindings];

KeyBindings as a tuple with priority and the keymap.

type KeyboardShortcut

type KeyboardShortcut = KeyboardShortcutValue | KeyboardShortcutFunction;

type KeyboardShortcutFunction

type KeyboardShortcutFunction<Options extends Shape = Shape> = (
    options: Options,
    store: Remirror.ExtensionStore
) => KeyboardShortcut;

type KeyboardShortcuts

type KeyboardShortcuts = keyof typeof keyboardShortcuts | ShortcutMap;

type KeyboardShortcutValue

type KeyboardShortcutValue = Listable<
    LiteralUnion<
        | 'Enter'
        | 'ArrowDown'
        | 'ArrowUp'
        | 'ArrowLeft'
        | 'ArrowRight'
        | 'Escape'
        | 'Delete'
        | 'Backspace',
        string
    >
>;

type ManagerStoreKeys

type ManagerStoreKeys = keyof Remirror.ManagerStore<any>;

type MapHelpers

type MapHelpers<RawHelpers extends Record<string, AnyFunction>> = {
    [Helper in keyof RawHelpers]: RawHelpers[Helper];
};

A utility type which maps the passed in extension helpers to a method called with manager.data.helpers.helperName().

type MapToChainedCommand

type MapToChainedCommand<RawCommands extends Record<string, AnyFunction>> = {
    [Command in keyof RawCommands]: ReturnType<
        RawCommands[Command]
    > extends NonChainableCommandFunction
        ? void
        : (...args: Parameters<RawCommands[Command]>) => any;
};

A utility type which maps the chained commands.

type MapToUnchainedCommand

type MapToUnchainedCommand<RawCommands extends Record<string, AnyFunction>> = {
    [Command in keyof RawCommands]: CommandShape<Parameters<RawCommands[Command]>>;
};

A utility type which maps the passed in extension command in an action that is store in the manager.store.actions.commandName().

type Metadata

type Metadata = CommandMetadata | KeyBindingMetadata;

type OptionsOfConstructor

type OptionsOfConstructor<Constructor extends AnyConstructor> = GetOptions<
    InstanceType<Constructor>
>;

Get the options from any constructor. Can be used for both presets and extensions.

type PickChanged

type PickChanged<Options extends ValidOptions> = <
    Key extends keyof GetFixedDynamic<Options>
>(
    keys: Key[]
) => Partial<Pick<GetFixedDynamic<Options>, Key>>;

type PrioritizedKeyBindings

type PrioritizedKeyBindings = KeyBindings | KeyBindingsTuple;

KeyBindings as an object or prioritized tuple.

type RemirrorEventListener

type RemirrorEventListener<Extension extends AnyExtension> = (
    params: RemirrorEventListenerProps<Extension>
) => void;

type RemoveAny

type RemoveAny<Extension> = Extension extends Extension
    ? AnyExtension extends Extension
        ? never
        : Extension
    : never;

Removes [[AnyExtension]] from an extension union. This can be used to make typechecking stricter.

type ShortcutMap

type ShortcutMap = Record<NamedShortcut, string>;

A shortcut map which is used by the KeymapExtension.

type UiCommandFunction

type UiCommandFunction = CommandFunction & UiAnnotation;

type UiCommandNames

type UiCommandNames<Extension extends AnyExtension> = StringKey<
    ConditionalPick<
        {
            [P in keyof UnionToIntersection<
                GetDecoratedUiCommands<Extension>
            >]: keyof UnionToIntersection<
                GetDecoratedUiCommands<Extension>
            >[P] extends '__uiAnnotation'
                ? true
                : false;
        },
        true
    >
>;

Utility type for pulling all the command names from a list.
TODO - why doesn't this work.

type UnpackedExtension

type UnpackedExtension<Extension extends AnyExtension[] | (() => AnyExtension[])> =
    UnpackedReturnType<Extension>[number];

Get the union extension type from an array of extensions or from a function that returns an array of extension.

Example 1

const extensions = [new BoldExtension(), new ItalicExtension()];
type Extension = UnpackedExtension<typeof extensions>
// Extension = BoldExtension | ItalicExtension

Example 2

const extensions = () => [new BoldExtension(), new ItalicExtension()];
type Extension = UnpackedExtension<typeof extensions>
// Extension = BoldExtension | ItalicExtension

type UpdatableViewProps

type UpdatableViewProps = 'attributes' | 'editable';

type UploadFileHandler

type UploadFileHandler<NodeAttributes> = () => FileUploader<NodeAttributes>;

Package Files (2)

Dependencies (9)

Dev Dependencies (2)

Peer Dependencies (1)

@remirror/pm

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@remirror/core.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@remirror/core)

HTML

<a href="https://www.jsdocs.io/package/@remirror/core"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 18 days ago.
Package analyzed in 10767 ms.
Missing or incorrect documentation? Open an issue for this package.

@remirror/core

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Variables

variable DEFAULT_SHORTCUTS

variable GOOGLE_DOC_SHORTCUTS

variable keyboardShortcuts

Functions

function builtinPreset

Remarks

function command

function delayedCommand

Modifiers

Deprecated

function extension

function findUploadPlaceholderPayload

function findUploadPlaceholderPos

Remarks

function hasUploadingFile

Parameter state

Remarks

See Also

function helper

function insertText

function isDelayedValue

function isExtension

Parameter value

function isExtensionConstructor

Parameter value

function isExtensionTag

function isMarkExtension

Parameter value

function isNodeExtension

Parameter value

function isPlainExtension

Parameter value

function isRemirrorManager

Parameter value

Parameter mustIncludeList

function keyBinding

function legacyCommand

Deprecated

function legacyHelper

Deprecated

function legacyKeyBinding

Deprecated

function mutateDefaultExtensionOptions

Remarks

function setUploadPlaceholderAction

function toggleMark

function uploadFile

Classes

class AttributesExtension

Remarks

property name

class CommandsExtension

Remarks

property name

method applyMark

method blur

method copy

method createPlugin

method customDispatch

method cut

method delete

method emptySelection

method emptyUpdate

Parameter action

method focus

method forceUpdate

method getAllCommandOptions

method getCommandOptions

method getCommandProp

method insertNewLine