core
package @remirror/core
class AttributesExtension
This extension allows others extension to add the createAttributes
method for adding attributes to the prosemirror dom element.
Signature:
export declare class AttributesExtension extends PlainExtension
Extends: PlainExtension
Remarks:
Use this to include all the dynamically generated attributes provided by each extension. High priority extensions have preference over the lower priority extensions.
Builtin Extension
(Some inherited members may not be shown because they are not represented in the documentation.)
Extension.(constructor)
Constructs a new instance of the Extension
class
Signature:
constructor(...args: ExtensionConstructorProps<Options>);
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
property constructorName
The name that the constructor should have, which doesn't get mangled in production.
Signature:
get constructorName(): string;
property defaultPriority
The default priority for this family of extensions.
Signature:
static readonly defaultPriority: ExtensionPriority;
property extensions
The list of extensions added to the editor by this Preset
.
Signature:
get extensions(): Array<this['~E']>;
property name
Signature:
get name(): "attributes";
property priority
The priority level for this instance of the extension. A higher value corresponds to a higher priority extension
Signature:
get priority(): ExtensionPriority;
property store
The store is a shared object that's internal to each extension. It includes often used items like the view
and schema
that are added by the extension manager and also the lifecycle extension methods.
**NOTE** - The store is not available until the manager has been created and received the extension. As a result trying to access the store during init
and constructor
will result in a runtime error.
Some properties of the store are available at different phases. You should check the inline documentation to know when a certain property is useable in your extension.
Signature:
protected get store(): Remirror.ExtensionStore;
method clone
Clone an extension.
Signature:
clone(...args: ExtensionConstructorProps<Options>): Extension<Options>;
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
Returns:
Extension<Options>
method createExtensions
Create the extensions which will be consumed by the preset. Override this if you would like to make your extension a parent to other (holder) extensions which don't make sense existing outside of the context of this extension.
Signature:
createExtensions(): AnyExtension[];
Returns:
Remarks:
Since this method is called in the constructor it should always be created as an instance method and not a property. Properties aren't available for the call to the parent class.
class HolderExtension extends PlainExtension {
get name() {
return 'holder'
}
// GOOD ✅
createExtensions() {
return [];
}
// BAD ❌
createExtensions = () => {
return [];
}
}
method getExtension
Get an extension from this holder extension by providing the desired Constructor
.
Signature:
getExtension<Type extends this['~E']['constructor']>(Constructor: Type): InstanceType<Type>;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type | the extension constructor to find in the editor. |
Returns:
InstanceType<Type>
Remarks:
This method will throw an error if the constructor doesn't exist within the extension created by this extension.
It can be used to forward options and attach handlers to the children extensions. It is the spiritual replacement of the Preset
extension.
import { PlainExtension, OnSetOptionsProps } from 'remirror';
interface ParentOptions { weight?: string }
class ParentExtension extends PlainExtension<ParentOptions> {
get name() {
return 'parent' as const;
}
createExtensions() {
return [new BoldExtension()]
}
onSetOptions(options: OnSetOptionsProps<ParentOptions>): void {
if (options.changes.weight.changed) {
// Update the value of the provided extension.
this.getExtension(BoldExtension).setOption({ weight: options.changes.weight.value });
}
}
}
method isOfType
Check if the type of this extension's constructor matches the type of the provided constructor.
Signature:
isOfType<Type extends AnyExtensionConstructor>(Constructor: Type): this is InstanceType<Type>;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type |
Returns:
this is InstanceType<Type>
method onAppendTransaction
This can be used by the Extension
to append a transaction to the latest update.
This is shorthand for the ProsemirrorPlugin.spec.appendTransaction
.
Lifecycle Methods
Signature:
onAppendTransaction?(props: AppendLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | AppendLifecycleProps |
Returns:
void
method onApplyState
This is called when the state is being applied to the editor. This can be used as a shorthand for the [[Plugin.spec.state.apply
]] method.
For example, when using [[createDecorations
]] you can respond to editor updates within this callback.
Lifecycle Methods
Signature:
onApplyState?(props: ApplyStateLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | ApplyStateLifecycleProps |
Returns:
void
method onCreate
This handler is called when the RemirrorManager
is first created.
Signature:
onCreate?(): Dispose | void;
Returns:
Dispose | void
Remarks:
Since it is called as soon as the manager is some methods may not be available in the extension store. When accessing methods on this.store
be shore to check when they become available in the lifecycle.
You can return a Dispose
function which will automatically be called when the extension is destroyed.
This handler is called before the onView
handler.
Lifecycle Methods
method onDestroy
Called when the extension is being destroyed.
Lifecycle Methods
Signature:
onDestroy?(): void;
Returns:
void
method onInitState
This is called when the prosemirror editor state is first attached to the editor. It can be useful for doing some preparation work.
This is a shorthand for creating a plugin and adding the [[Plugin.spec.state.init
]].
Lifecycle Methods
Signature:
onInitState?(state: EditorState): void;
Parameters:
Parameter | Type | Description |
---|---|---|
state | EditorState |
Returns:
void
method onStateUpdate
This handler is called after a transaction successfully updates the editor state. It is called asynchronously after the [[onApplyState
]] hook has been run run.
Lifecycle Methods
Signature:
onStateUpdate?(props: StateUpdateLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | StateUpdateLifecycleProps |
Returns:
void
method onView
This event happens when the view is first received from the view layer (e.g. React).
Return a dispose function which will be called when the extension is destroyed.
This handler is called after the onCreate
handler.
Lifecycle Methods
Signature:
onView?(view: EditorView): Dispose | void;
Parameters:
Parameter | Type | Description |
---|---|---|
view | EditorView |
Returns:
Dispose | void
class CommandsExtension
Generate chained and unchained commands for making changes to the editor.
Signature:
export declare class CommandsExtension extends PlainExtension<CommandOptions>
Extends: PlainExtension<CommandOptions>
Remarks:
Typically actions are used to create interactive menus. For example a menu can use a command to toggle bold formatting or to undo the last action.
Builtin Extension
(Some inherited members may not be shown because they are not represented in the documentation.)
Extension.(constructor)
Constructs a new instance of the Extension
class
Signature:
constructor(...args: ExtensionConstructorProps<Options>);
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
property constructorName
The name that the constructor should have, which doesn't get mangled in production.
Signature:
get constructorName(): string;
property defaultPriority
The default priority for this family of extensions.
Signature:
static readonly defaultPriority: ExtensionPriority;
property extensions
The list of extensions added to the editor by this Preset
.
Signature:
get extensions(): Array<this['~E']>;
property name
Signature:
get name(): "commands";
property priority
The priority level for this instance of the extension. A higher value corresponds to a higher priority extension
Signature:
get priority(): ExtensionPriority;
property store
The store is a shared object that's internal to each extension. It includes often used items like the view
and schema
that are added by the extension manager and also the lifecycle extension methods.
**NOTE** - The store is not available until the manager has been created and received the extension. As a result trying to access the store during init
and constructor
will result in a runtime error.
Some properties of the store are available at different phases. You should check the inline documentation to know when a certain property is useable in your extension.
Signature:
protected get store(): Remirror.ExtensionStore;
method applyMark
Removes a mark from the current selection or provided range.
Signature:
applyMark(markType: string | MarkType, attrs?: ProsemirrorAttributes, selection?: PrimitiveSelection): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
markType | string | MarkType | |
attrs | ProsemirrorAttributes | (Optional) |
selection | PrimitiveSelection | (Optional) |
Returns:
CommandFunction
method blur
Blur focus from the editor and also update the selection at the same time.
Signature:
blur(position?: PrimitiveSelection): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
position | PrimitiveSelection | (Optional) |
Returns:
CommandFunction
method clone
Clone an extension.
Signature:
clone(...args: ExtensionConstructorProps<Options>): Extension<Options>;
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
Returns:
Extension<Options>
method copy
Copy the selected content for non empty selections.
Signature:
copy(): CommandFunction;
Returns:
CommandFunction
method createExtensions
Create the extensions which will be consumed by the preset. Override this if you would like to make your extension a parent to other (holder) extensions which don't make sense existing outside of the context of this extension.
Signature:
createExtensions(): AnyExtension[];
Returns:
Remarks:
Since this method is called in the constructor it should always be created as an instance method and not a property. Properties aren't available for the call to the parent class.
class HolderExtension extends PlainExtension {
get name() {
return 'holder'
}
// GOOD ✅
createExtensions() {
return [];
}
// BAD ❌
createExtensions = () => {
return [];
}
}
method createPlugin
Create a plugin that solely exists to track forced updates via the generated plugin key.
Signature:
createPlugin(): CreateExtensionPlugin;
Returns:
method customDispatch
Enable custom commands to be used within the editor by users.
This is preferred to the initial idea of setting commands on the manager or even as a prop. The problem is that there's no typechecking and it should be just fine to add your custom commands here to see the dispatched immediately.
To use it, firstly define the command.
import { CommandFunction } from 'remirror';
const myCustomCommand: CommandFunction = ({ tr, dispatch }) => {
dispatch?.(tr.insertText('My Custom Command'));
return true;
}
And then use it within the component.
import React, { useCallback } from 'react';
import { useRemirror } from '@remirror/react';
const MyEditorButton = () => {
const { commands } = useRemirror();
const onClick = useCallback(() => {
commands.customDispatch(myCustomCommand);
}, [commands])
return <button onClick={onClick}>Custom Command</button>
}
An alternative is to use a custom command directly from a prosemirror-*
library. This can be accomplished in the following way.
import { joinDown } from 'prosemirror-commands';
import { convertCommand } from 'remirror';
const MyEditorButton = () => {
const { commands } = useRemirror();
const onClick = useCallback(() => {
commands.customDispatch(convertCommand(joinDown));
}, [commands]);
return <button onClick={onClick}>Custom Command</button>;
};
Signature:
customDispatch(command: CommandFunction): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
command | CommandFunction |
Returns:
CommandFunction
method cut
Cut the selected content.
Signature:
cut(): CommandFunction;
Returns:
CommandFunction
method delete
Delete the provided range or current selection.
Signature:
delete(range?: FromToProps): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
range | FromToProps | (Optional) |
Returns:
CommandFunction
method emptySelection
Fire an update to remove the current range selection. The cursor will be placed at the anchor of the current range selection.
A range selection is a non-empty text selection.
Builtin Command
Signature:
emptySelection(): CommandFunction;
Returns:
CommandFunction
method emptyUpdate
Fire an empty update to trigger an update to all decorations, and state that may not yet have run.
This can be used in extensions to trigger updates when certain options that affect the editor state have changed.
Signature:
emptyUpdate(action?: () => void): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
action | () => void | (Optional) provide an action which is called just before the empty update is dispatched (only when dispatch is available). This can be used in chainable editor scenarios when you want to lazily invoke an action at the point the update is about to be applied. |
Returns:
CommandFunction
method focus
Set the focus for the editor.
If using this with chaining this should only be placed at the end of the chain. It can cause hard to debug issues when used in the middle of a chain.
import { useCallback } from 'react';
import { useRemirrorContext } from '@remirror/react';
const MenuButton = () => {
const { chain } = useRemirrorContext();
const onClick = useCallback(() => {
chain
.toggleBold()
.focus('end')
.run();
}, [chain])
return <button onClick={onClick}>Bold</button>
}
Signature:
focus(position?: FocusType): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
position | FocusType | (Optional) |
Returns:
CommandFunction
method forceUpdate
Force an update of the specific updatable ProseMirror props.
This command is always available as a builtin command.
Builtin Command
Signature:
forceUpdate(...keys: UpdatableViewProps[]): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
keys | UpdatableViewProps[] |
Returns:
CommandFunction
method getAllCommandOptions
Get the all the decorated commands available on the editor instance.
Signature:
getAllCommandOptions(): Helper<Record<string, WithName<CommandDecoratorOptions>>>;
Returns:
Helper<Record<string, WithName<CommandDecoratorOptions>>>
method getCommandOptions
Get the options that were passed into the provided command.
Signature:
getCommandOptions(name: string): Helper<WithName<CommandDecoratorOptions> | undefined>;
Parameters:
Parameter | Type | Description |
---|---|---|
name | string |
Returns:
Helper<WithName<CommandDecoratorOptions> | undefined>
method getCommandProp
A short hand way of getting the view
, state
, tr
and dispatch
methods.
Signature:
getCommandProp(): Helper<Required<CommandFunctionProps>>;
Returns:
Helper<Required<CommandFunctionProps>>
method getExtension
Get an extension from this holder extension by providing the desired Constructor
.
Signature:
getExtension<Type extends this['~E']['constructor']>(Constructor: Type): InstanceType<Type>;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type | the extension constructor to find in the editor. |
Returns:
InstanceType<Type>
Remarks:
This method will throw an error if the constructor doesn't exist within the extension created by this extension.
It can be used to forward options and attach handlers to the children extensions. It is the spiritual replacement of the Preset
extension.
import { PlainExtension, OnSetOptionsProps } from 'remirror';
interface ParentOptions { weight?: string }
class ParentExtension extends PlainExtension<ParentOptions> {
get name() {
return 'parent' as const;
}
createExtensions() {
return [new BoldExtension()]
}
onSetOptions(options: OnSetOptionsProps<ParentOptions>): void {
if (options.changes.weight.changed) {
// Update the value of the provided extension.
this.getExtension(BoldExtension).setOption({ weight: options.changes.weight.value });
}
}
}
method insertNewLine
Insert a new line into the editor.
Depending on editor setup and where the cursor is placed this may have differing impacts.
Builtin Command
Signature:
insertNewLine(): CommandFunction;
Returns:
CommandFunction
method insertNode
Insert a node into the editor with the provided content.
Builtin Command
Signature:
insertNode(node: string | NodeType | ProsemirrorNode | Fragment, options?: InsertNodeOptions): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
node | string | NodeType | ProsemirrorNode | Fragment | |
options | InsertNodeOptions | (Optional) |
Returns:
CommandFunction
method insertText
Insert text into the dom at the current location by default. If a promise is provided instead of text the resolved value will be inserted at the tracked position.
Signature:
insertText(text: string | (() => Promise<string>), options?: InsertTextOptions): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
text | string | (() => Promise<string>) | |
options | InsertTextOptions | (Optional) |
Returns:
CommandFunction
method isOfType
Check if the type of this extension's constructor matches the type of the provided constructor.
Signature:
isOfType<Type extends AnyExtensionConstructor>(Constructor: Type): this is InstanceType<Type>;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type |
Returns:
this is InstanceType<Type>
method onAppendTransaction
This can be used by the Extension
to append a transaction to the latest update.
This is shorthand for the ProsemirrorPlugin.spec.appendTransaction
.
Lifecycle Methods
Signature:
onAppendTransaction?(props: AppendLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | AppendLifecycleProps |
Returns:
void
method onApplyState
This is called when the state is being applied to the editor. This can be used as a shorthand for the [[Plugin.spec.state.apply
]] method.
For example, when using [[createDecorations
]] you can respond to editor updates within this callback.
Lifecycle Methods
Signature:
onApplyState?(props: ApplyStateLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | ApplyStateLifecycleProps |
Returns:
void
method onCreate
Signature:
onCreate(): void;
Returns:
void
method onDestroy
Called when the extension is being destroyed.
Lifecycle Methods
Signature:
onDestroy?(): void;
Returns:
void
method onInitState
This is called when the prosemirror editor state is first attached to the editor. It can be useful for doing some preparation work.
This is a shorthand for creating a plugin and adding the [[Plugin.spec.state.init
]].
Lifecycle Methods
Signature:
onInitState?(state: EditorState): void;
Parameters:
Parameter | Type | Description |
---|---|---|
state | EditorState |
Returns:
void
method onStateUpdate
Update the cached transaction whenever the state is updated.
Signature:
onStateUpdate({ state }: StateUpdateLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
{ state } | StateUpdateLifecycleProps |
Returns:
void
method onView
Attach commands once the view is attached.
Signature:
onView(view: EditorView): void;
Parameters:
Parameter | Type | Description |
---|---|---|
view | EditorView |
Returns:
void
method paste
Select all text in the editor.
Signature:
paste(): CommandFunction;
Returns:
CommandFunction
method removeMark
Removes a mark from the current selection or provided range.
Signature:
removeMark(props: RemoveMarkProps): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
props | RemoveMarkProps |
Returns:
CommandFunction
method replaceText
Replaces text with an optional appended string at the end. The replacement can be text, or a custom node.
Signature:
replaceText(props: ReplaceTextProps): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
props | ReplaceTextProps | see [[ReplaceTextProps ]] |
Returns:
CommandFunction
method resetContent
Reset the content of the editor while preserving the history.
This means that undo and redo will still be active since the doc is replaced with a new doc.
Signature:
resetContent(): CommandFunction;
Returns:
CommandFunction
method selectAll
Select all text in the editor.
Signature:
selectAll(): CommandFunction;
Returns:
CommandFunction
method selectMark
Select the link at the current location.
Signature:
selectMark(type: string | MarkType): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
type | string | MarkType |
Returns:
CommandFunction
method selectText
Select the text within the provided range.
Here are some ways it can be used.
// Set to the end of the document.
commands.selectText('end');
// Set the selection to the start of the document.
commands.selectText('start');
// Select all the text in the document.
commands.selectText('all')
// Select a range of text. It's up to you to make sure the selected
// range is valid.
commands.selectText({ from: 10, to: 15 });
// Specify the anchor and range in the selection.
commands.selectText({ anchor: 10, head: 15 });
// Set to a specific position.
commands.selectText(10);
// Use a ProseMirror selection
commands.selectText(TextSelection.near(state.doc.resolve(10)))
Although this is called selectText
you can provide your own selection option which can be any type of selection.
Signature:
selectText(selection: PrimitiveSelection, options?: {
forceUpdate?: boolean;
}): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
selection | PrimitiveSelection | |
options | { forceUpdate?: boolean; } | (Optional) |
Returns:
CommandFunction
method setBlockNodeType
Set the block type of the current selection or the provided range.
Signature:
setBlockNodeType(nodeType: string | NodeType, attrs?: ProsemirrorAttributes, selection?: PrimitiveSelection, preserveAttrs?: boolean): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
nodeType | string | NodeType | the node type to create |
attrs | ProsemirrorAttributes | (Optional) the attributes to add to the node type |
selection | PrimitiveSelection | (Optional) the position in the document to set the block node |
preserveAttrs | boolean | (Optional) when true preserve the attributes at the provided selection |
Returns:
CommandFunction
method setContent
Set the content of the editor while preserving history.
Under the hood this is replacing the content in the document with the new state.doc of the provided content.
If the content is a string you will need to ensure you have the proper string handler set up in the editor.
Signature:
setContent(content: RemirrorContentType, selection?: PrimitiveSelection): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
content | RemirrorContentType | |
selection | PrimitiveSelection | (Optional) |
Returns:
CommandFunction
method setMeta
Set the meta data to attach to the editor on the next update.
Signature:
setMeta(name: string, value: unknown): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
name | string | |
value | unknown |
Returns:
CommandFunction
method toggleBlockNodeItem
Toggle a block between the provided type and toggleType.
Signature:
toggleBlockNodeItem(toggleProps: ToggleBlockItemProps): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
toggleProps | ToggleBlockItemProps |
Returns:
CommandFunction
method toggleMark
Removes a mark from the current selection or provided range.
Signature:
toggleMark(props: ToggleMarkProps): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
props | ToggleMarkProps |
Returns:
CommandFunction
method toggleWrappingNode
Toggle between wrapping an inactive node with the provided node type, and lifting it up into it's parent.
Signature:
toggleWrappingNode(nodeType: string | NodeType, attrs?: ProsemirrorAttributes, selection?: PrimitiveSelection): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
nodeType | string | NodeType | the node type to toggle |
attrs | ProsemirrorAttributes | (Optional) the attrs to use for the node |
selection | PrimitiveSelection | (Optional) the selection point in the editor to perform the action |
Returns:
CommandFunction
method updateNodeAttributes
Update the attributes for the node at the specified pos
in the editor.
Builtin Command
Signature:
updateNodeAttributes<Type extends object>(pos: number, attrs: ProsemirrorAttributes<Type>): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
pos | number | |
attrs | ProsemirrorAttributes<Type> |
Returns:
CommandFunction
method wrapInNode
Wrap the selection or the provided text in a node of the given type with the given attributes.
Signature:
wrapInNode(nodeType: string | NodeType, attrs?: ProsemirrorAttributes, range?: FromToProps | undefined): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
nodeType | string | NodeType | |
attrs | ProsemirrorAttributes | (Optional) |
range | FromToProps | undefined | (Optional) |
Returns:
CommandFunction
class DecorationsExtension
Simplify the process of adding decorations to the editor. All the decorations added to the document this way are automatically tracked which allows for custom components to be nested inside decorations.
Builtin Extension
Signature:
export declare class DecorationsExtension extends PlainExtension<DecorationsOptions>
Extends: PlainExtension<DecorationsOptions>
(Some inherited members may not be shown because they are not represented in the documentation.)
Extension.(constructor)
Constructs a new instance of the Extension
class
Signature:
constructor(...args: ExtensionConstructorProps<Options>);
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
property constructorName
The name that the constructor should have, which doesn't get mangled in production.
Signature:
get constructorName(): string;
property defaultPriority
The default priority for this family of extensions.
Signature:
static readonly defaultPriority: ExtensionPriority;
property extensions
The list of extensions added to the editor by this Preset
.
Signature:
get extensions(): Array<this['~E']>;
property name
Signature:
get name(): "decorations";
property priority
The priority level for this instance of the extension. A higher value corresponds to a higher priority extension
Signature:
get priority(): ExtensionPriority;
property store
The store is a shared object that's internal to each extension. It includes often used items like the view
and schema
that are added by the extension manager and also the lifecycle extension methods.
**NOTE** - The store is not available until the manager has been created and received the extension. As a result trying to access the store during init
and constructor
will result in a runtime error.
Some properties of the store are available at different phases. You should check the inline documentation to know when a certain property is useable in your extension.
Signature:
protected get store(): Remirror.ExtensionStore;
method addPlaceholder
Command to dispatch a transaction adding the placeholder decoration to be tracked.
Signature:
addPlaceholder(id: unknown, placeholder: DecorationPlaceholder, deleteSelection?: boolean): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
id | unknown | the value that is used to identify this tracker. This can be any value. A promise, a function call, a string. |
placeholder | DecorationPlaceholder | |
deleteSelection | boolean | (Optional) |
Returns:
CommandFunction
method clearPlaceholders
A command to remove all active placeholder decorations.
Signature:
clearPlaceholders(): CommandFunction;
Returns:
CommandFunction
method clone
Clone an extension.
Signature:
clone(...args: ExtensionConstructorProps<Options>): Extension<Options>;
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
Returns:
Extension<Options>
method createDecorations
Add some decorations based on the provided settings.
Signature:
createDecorations(state: EditorState): DecorationSet;
Parameters:
Parameter | Type | Description |
---|---|---|
state | EditorState |
Returns:
DecorationSet
method createExtensions
Create the extensions which will be consumed by the preset. Override this if you would like to make your extension a parent to other (holder) extensions which don't make sense existing outside of the context of this extension.
Signature:
createExtensions(): AnyExtension[];
Returns:
Remarks:
Since this method is called in the constructor it should always be created as an instance method and not a property. Properties aren't available for the call to the parent class.
class HolderExtension extends PlainExtension {
get name() {
return 'holder'
}
// GOOD ✅
createExtensions() {
return [];
}
// BAD ❌
createExtensions = () => {
return [];
}
}
method createPlugin
Create the extension plugin for inserting decorations into the editor.
Signature:
createPlugin(): CreateExtensionPlugin;
Returns:
method findAllPlaceholders
Find the positions of all the trackers in document.
Signature:
findAllPlaceholders(): Helper<Map<unknown, FromToProps>>;
Returns:
Helper<Map<unknown, FromToProps>>
method findPlaceholder
Find the position for the tracker with the ID specified.
Signature:
findPlaceholder(id: unknown): Helper<FromToProps | undefined>;
Parameters:
Parameter | Type | Description |
---|---|---|
id | unknown | the unique position id which can be any type |
Returns:
Helper<FromToProps | undefined>
method getExtension
Get an extension from this holder extension by providing the desired Constructor
.
Signature:
getExtension<Type extends this['~E']['constructor']>(Constructor: Type): InstanceType<Type>;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type | the extension constructor to find in the editor. |
Returns:
InstanceType<Type>
Remarks:
This method will throw an error if the constructor doesn't exist within the extension created by this extension.
It can be used to forward options and attach handlers to the children extensions. It is the spiritual replacement of the Preset
extension.
import { PlainExtension, OnSetOptionsProps } from 'remirror';
interface ParentOptions { weight?: string }
class ParentExtension extends PlainExtension<ParentOptions> {
get name() {
return 'parent' as const;
}
createExtensions() {
return [new BoldExtension()]
}
onSetOptions(options: OnSetOptionsProps<ParentOptions>): void {
if (options.changes.weight.changed) {
// Update the value of the provided extension.
this.getExtension(BoldExtension).setOption({ weight: options.changes.weight.value });
}
}
}
method isOfType
Check if the type of this extension's constructor matches the type of the provided constructor.
Signature:
isOfType<Type extends AnyExtensionConstructor>(Constructor: Type): this is InstanceType<Type>;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type |
Returns:
this is InstanceType<Type>
method onAppendTransaction
This can be used by the Extension
to append a transaction to the latest update.
This is shorthand for the ProsemirrorPlugin.spec.appendTransaction
.
Lifecycle Methods
Signature:
onAppendTransaction?(props: AppendLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | AppendLifecycleProps |
Returns:
void
method onApplyState
This stores all tracked positions in the editor and maps them via the transaction updates.
Signature:
onApplyState(): void;
Returns:
void
method onCreate
Signature:
onCreate(): void;
Returns:
void
method onDestroy
Called when the extension is being destroyed.
Lifecycle Methods
Signature:
onDestroy?(): void;
Returns:
void
method onInitState
This is called when the prosemirror editor state is first attached to the editor. It can be useful for doing some preparation work.
This is a shorthand for creating a plugin and adding the [[Plugin.spec.state.init
]].
Lifecycle Methods
Signature:
onInitState?(state: EditorState): void;
Parameters:
Parameter | Type | Description |
---|---|---|
state | EditorState |
Returns:
void
method onStateUpdate
This handler is called after a transaction successfully updates the editor state. It is called asynchronously after the [[onApplyState
]] hook has been run run.
Lifecycle Methods
Signature:
onStateUpdate?(props: StateUpdateLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | StateUpdateLifecycleProps |
Returns:
void
method onView
This event happens when the view is first received from the view layer (e.g. React).
Return a dispose function which will be called when the extension is destroyed.
This handler is called after the onCreate
handler.
Lifecycle Methods
Signature:
onView?(view: EditorView): Dispose | void;
Parameters:
Parameter | Type | Description |
---|---|---|
view | EditorView |
Returns:
Dispose | void
method removePlaceholder
A command to remove the specified placeholder decoration.
Signature:
removePlaceholder(id: unknown): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
id | unknown |
Returns:
CommandFunction
method updateDecorations
Signature:
updateDecorations(): CommandFunction;
Returns:
CommandFunction
method updatePlaceholder
A command to updated the placeholder decoration.
To update multiple placeholders you can use chained commands.
let idsWithData: Array<{id: unknown, data: number}>;
for (const { id, data } of idsWithData) {
chain.updatePlaceholder(id, data);
}
chain.run();
Signature:
updatePlaceholder<Data = any>(id: unknown, data: Data): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
id | unknown | |
data | Data |
Returns:
CommandFunction
class DelayedCommand
Signature:
export declare class DelayedCommand<Value>
DelayedCommand.(constructor)
Constructs a new instance of the DelayedCommand
class
Signature:
constructor(promiseCreator: DelayedPromiseCreator<Value>);
Parameters:
Parameter | Type | Description |
---|---|---|
promiseCreator | DelayedPromiseCreator<Value> |
property generateCommand
Generate the remirror
command.
Signature:
readonly generateCommand: () => CommandFunction;
method failure
Add a failure callback to the handler.
Signature:
failure(handler: CommandFunction<{
error: any;
}>, method?: 'push' | 'unshift'): this;
Parameters:
Parameter | Type | Description |
---|---|---|
handler | CommandFunction<{ error: any; }> | |
method | 'push' | 'unshift' | (Optional) |
Returns:
this
method success
Add a success callback to the handler.
Signature:
success(handler: CommandFunction<{
value: Value;
}>, method?: 'push' | 'unshift'): this;
Parameters:
Parameter | Type | Description |
---|---|---|
handler | CommandFunction<{ value: Value; }> | |
method | 'push' | 'unshift' | (Optional) |
Returns:
this
method validate
The commands that will immediately be run and used to evaluate whether to proceed.
Signature:
validate(handler: CommandFunction, method?: 'push' | 'unshift'): this;
Parameters:
Parameter | Type | Description |
---|---|---|
handler | CommandFunction | |
method | 'push' | 'unshift' | (Optional) |
Returns:
this
class DocChangedExtension
Signature:
export declare class DocChangedExtension extends PlainExtension<DocChangedOptions>
Extends: PlainExtension<DocChangedOptions>
(Some inherited members may not be shown because they are not represented in the documentation.)
Extension.(constructor)
Constructs a new instance of the Extension
class
Signature:
constructor(...args: ExtensionConstructorProps<Options>);
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
property constructorName
The name that the constructor should have, which doesn't get mangled in production.
Signature:
get constructorName(): string;
property defaultPriority
The default priority for this family of extensions.
Signature:
static readonly defaultPriority: ExtensionPriority;
property extensions
The list of extensions added to the editor by this Preset
.
Signature:
get extensions(): Array<this['~E']>;
property name
Signature:
get name(): "docChanged";
property priority
The priority level for this instance of the extension. A higher value corresponds to a higher priority extension
Signature:
get priority(): ExtensionPriority;
property store
The store is a shared object that's internal to each extension. It includes often used items like the view
and schema
that are added by the extension manager and also the lifecycle extension methods.
**NOTE** - The store is not available until the manager has been created and received the extension. As a result trying to access the store during init
and constructor
will result in a runtime error.
Some properties of the store are available at different phases. You should check the inline documentation to know when a certain property is useable in your extension.
Signature:
protected get store(): Remirror.ExtensionStore;
method clone
Clone an extension.
Signature:
clone(...args: ExtensionConstructorProps<Options>): Extension<Options>;
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
Returns:
Extension<Options>
method createExtensions
Create the extensions which will be consumed by the preset. Override this if you would like to make your extension a parent to other (holder) extensions which don't make sense existing outside of the context of this extension.
Signature:
createExtensions(): AnyExtension[];
Returns:
Remarks:
Since this method is called in the constructor it should always be created as an instance method and not a property. Properties aren't available for the call to the parent class.
class HolderExtension extends PlainExtension {
get name() {
return 'holder'
}
// GOOD ✅
createExtensions() {
return [];
}
// BAD ❌
createExtensions = () => {
return [];
}
}
method getExtension
Get an extension from this holder extension by providing the desired Constructor
.
Signature:
getExtension<Type extends this['~E']['constructor']>(Constructor: Type): InstanceType<Type>;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type | the extension constructor to find in the editor. |
Returns:
InstanceType<Type>
Remarks:
This method will throw an error if the constructor doesn't exist within the extension created by this extension.
It can be used to forward options and attach handlers to the children extensions. It is the spiritual replacement of the Preset
extension.
import { PlainExtension, OnSetOptionsProps } from 'remirror';
interface ParentOptions { weight?: string }
class ParentExtension extends PlainExtension<ParentOptions> {
get name() {
return 'parent' as const;
}
createExtensions() {
return [new BoldExtension()]
}
onSetOptions(options: OnSetOptionsProps<ParentOptions>): void {
if (options.changes.weight.changed) {
// Update the value of the provided extension.
this.getExtension(BoldExtension).setOption({ weight: options.changes.weight.value });
}
}
}
method isOfType
Check if the type of this extension's constructor matches the type of the provided constructor.
Signature:
isOfType<Type extends AnyExtensionConstructor>(Constructor: Type): this is InstanceType<Type>;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type |
Returns:
this is InstanceType<Type>
method onAppendTransaction
This can be used by the Extension
to append a transaction to the latest update.
This is shorthand for the ProsemirrorPlugin.spec.appendTransaction
.
Lifecycle Methods
Signature:
onAppendTransaction?(props: AppendLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | AppendLifecycleProps |
Returns:
void
method onApplyState
This is called when the state is being applied to the editor. This can be used as a shorthand for the [[Plugin.spec.state.apply
]] method.
For example, when using [[createDecorations
]] you can respond to editor updates within this callback.
Lifecycle Methods
Signature:
onApplyState?(props: ApplyStateLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | ApplyStateLifecycleProps |
Returns:
void
method onCreate
This handler is called when the RemirrorManager
is first created.
Signature:
onCreate?(): Dispose | void;
Returns:
Dispose | void
Remarks:
Since it is called as soon as the manager is some methods may not be available in the extension store. When accessing methods on this.store
be shore to check when they become available in the lifecycle.
You can return a Dispose
function which will automatically be called when the extension is destroyed.
This handler is called before the onView
handler.
Lifecycle Methods
method onDestroy
Called when the extension is being destroyed.
Lifecycle Methods
Signature:
onDestroy?(): void;
Returns:
void
method onInitState
This is called when the prosemirror editor state is first attached to the editor. It can be useful for doing some preparation work.
This is a shorthand for creating a plugin and adding the [[Plugin.spec.state.init
]].
Lifecycle Methods
Signature:
onInitState?(state: EditorState): void;
Parameters:
Parameter | Type | Description |
---|---|---|
state | EditorState |
Returns:
void
method onStateUpdate
Signature:
onStateUpdate(props: StateUpdateLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | StateUpdateLifecycleProps |
Returns:
void
method onView
This event happens when the view is first received from the view layer (e.g. React).
Return a dispose function which will be called when the extension is destroyed.
This handler is called after the onCreate
handler.
Lifecycle Methods
Signature:
onView?(view: EditorView): Dispose | void;
Parameters:
Parameter | Type | Description |
---|---|---|
view | EditorView |
Returns:
Dispose | void
class Extension
Extensions are fundamental to the way that Remirror works by grouping together the functionality and handling the management of similar concerns.
Signature:
declare abstract class Extension<Options extends ValidOptions = EmptyShape> extends BaseClass<Options, BaseExtensionOptions>
Extends: BaseClass<Options, BaseExtensionOptions>
Remarks:
Extension can adjust editor functionality in any way. Here are some examples.
- How the editor displays certain content, i.e. **bold**, _italic_, **underline**. - Which commands should be made available e.g.
commands.toggleBold()
to toggle the weight of the selected text. - Check if a command is currently enabled (i.e a successful dry run) e.g.commands.toggleBold.enabled()
. - Register ProsemirrorPlugin
s,keymap
s,InputRule
sPasteRule
s,Suggestions
, and customnodeViews
which affect the behavior of the editor.
There are three types of Extension
.
NodeExtension
- For creating Prosemirror nodes in the editor. See -MarkExtension
- For creating Prosemirror marks in the editor. See -PlainExtension
- For behavior which doesn't map to aProsemirrorNode
orMark
and as a result doesn't directly affect the ProsemirrorSchema
or content. See PlainExtension.
This Extension
is an abstract class that should not be used directly but rather extended to add the intended functionality.
import { PlainExtension, Static } from 'remirror';
interface AwesomeExtensionOptions {
isAwesome?: Static<boolean>;
id?: string;
}
class AwesomeExtension extends PlainExtension<AwesomeExtensionOptions> {
static defaultOptions: DefaultExtensionOptions<AwesomeExtensionOptions> = {
isAwesome: true,
id: '',
}
get name() {
return 'awesome' as const;
}
}
(Some inherited members may not be shown because they are not represented in the documentation.)
Extension.(constructor)
Constructs a new instance of the Extension
class
Signature:
constructor(...args: ExtensionConstructorProps<Options>);
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
property constructorName
The name that the constructor should have, which doesn't get mangled in production.
Signature:
get constructorName(): string;
property defaultPriority
The default priority for this family of extensions.
Signature:
static readonly defaultPriority: ExtensionPriority;
property extensions
The list of extensions added to the editor by this Preset
.
Signature:
get extensions(): Array<this['~E']>;
property priority
The priority level for this instance of the extension. A higher value corresponds to a higher priority extension
Signature:
get priority(): ExtensionPriority;
property store
The store is a shared object that's internal to each extension. It includes often used items like the view
and schema
that are added by the extension manager and also the lifecycle extension methods.
**NOTE** - The store is not available until the manager has been created and received the extension. As a result trying to access the store during init
and constructor
will result in a runtime error.
Some properties of the store are available at different phases. You should check the inline documentation to know when a certain property is useable in your extension.
Signature:
protected get store(): Remirror.ExtensionStore;
method clone
Clone an extension.
Signature:
clone(...args: ExtensionConstructorProps<Options>): Extension<Options>;
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
Returns:
Extension<Options>
method createExtensions
Create the extensions which will be consumed by the preset. Override this if you would like to make your extension a parent to other (holder) extensions which don't make sense existing outside of the context of this extension.
Signature:
createExtensions(): AnyExtension[];
Returns:
Remarks:
Since this method is called in the constructor it should always be created as an instance method and not a property. Properties aren't available for the call to the parent class.
class HolderExtension extends PlainExtension {
get name() {
return 'holder'
}
// GOOD ✅
createExtensions() {
return [];
}
// BAD ❌
createExtensions = () => {
return [];
}
}
method getExtension
Get an extension from this holder extension by providing the desired Constructor
.
Signature:
getExtension<Type extends this['~E']['constructor']>(Constructor: Type): InstanceType<Type>;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type | the extension constructor to find in the editor. |
Returns:
InstanceType<Type>
Remarks:
This method will throw an error if the constructor doesn't exist within the extension created by this extension.
It can be used to forward options and attach handlers to the children extensions. It is the spiritual replacement of the Preset
extension.
import { PlainExtension, OnSetOptionsProps } from 'remirror';
interface ParentOptions { weight?: string }
class ParentExtension extends PlainExtension<ParentOptions> {
get name() {
return 'parent' as const;
}
createExtensions() {
return [new BoldExtension()]
}
onSetOptions(options: OnSetOptionsProps<ParentOptions>): void {
if (options.changes.weight.changed) {
// Update the value of the provided extension.
this.getExtension(BoldExtension).setOption({ weight: options.changes.weight.value });
}
}
}
method isOfType
Check if the type of this extension's constructor matches the type of the provided constructor.
Signature:
isOfType<Type extends AnyExtensionConstructor>(Constructor: Type): this is InstanceType<Type>;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type |
Returns:
this is InstanceType<Type>
method onAppendTransaction
This can be used by the Extension
to append a transaction to the latest update.
This is shorthand for the ProsemirrorPlugin.spec.appendTransaction
.
Lifecycle Methods
Signature:
onAppendTransaction?(props: AppendLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | AppendLifecycleProps |
Returns:
void
method onApplyState
This is called when the state is being applied to the editor. This can be used as a shorthand for the [[Plugin.spec.state.apply
]] method.
For example, when using [[createDecorations
]] you can respond to editor updates within this callback.
Lifecycle Methods
Signature:
onApplyState?(props: ApplyStateLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | ApplyStateLifecycleProps |
Returns:
void
method onCreate
This handler is called when the RemirrorManager
is first created.
Signature:
onCreate?(): Dispose | void;
Returns:
Dispose | void
Remarks:
Since it is called as soon as the manager is some methods may not be available in the extension store. When accessing methods on this.store
be shore to check when they become available in the lifecycle.
You can return a Dispose
function which will automatically be called when the extension is destroyed.
This handler is called before the onView
handler.
Lifecycle Methods
method onDestroy
Called when the extension is being destroyed.
Lifecycle Methods
Signature:
onDestroy?(): void;
Returns:
void
method onInitState
This is called when the prosemirror editor state is first attached to the editor. It can be useful for doing some preparation work.
This is a shorthand for creating a plugin and adding the [[Plugin.spec.state.init
]].
Lifecycle Methods
Signature:
onInitState?(state: EditorState): void;
Parameters:
Parameter | Type | Description |
---|---|---|
state | EditorState |
Returns:
void
method onStateUpdate
This handler is called after a transaction successfully updates the editor state. It is called asynchronously after the [[onApplyState
]] hook has been run run.
Lifecycle Methods
Signature:
onStateUpdate?(props: StateUpdateLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | StateUpdateLifecycleProps |
Returns:
void
method onView
This event happens when the view is first received from the view layer (e.g. React).
Return a dispose function which will be called when the extension is destroyed.
This handler is called after the onCreate
handler.
Lifecycle Methods
Signature:
onView?(view: EditorView): Dispose | void;
Parameters:
Parameter | Type | Description |
---|---|---|
view | EditorView |
Returns:
Dispose | void
class Framework
This is the Framework
class which is used to create an abstract class for implementing Remirror
into the framework of your choice.
The best way to learn how to use it is to take a look at the [[DomFramework
]] and [[ReactFramework
]] implementations.
Signature:
export declare abstract class Framework<Extension extends AnyExtension = BuiltinPreset, Props extends FrameworkProps<Extension> = FrameworkProps<Extension>, Output extends FrameworkOutput<Extension> = FrameworkOutput<Extension>> implements BaseFramework<Extension>
Implements: BaseFramework<Extension>
Remarks:
There are two methods and one getter property which must be implemented for this
Framework.(constructor)
Constructs a new instance of the Framework
class
Signature:
constructor(options: FrameworkOptions<Extension, Props>);
Parameters:
Parameter | Type | Description |
---|---|---|
options | FrameworkOptions<Extension, Props> |
property addHandler
The event listener which allows consumers to subscribe to the different events taking place in the editor. Events currently supported are:
destroy
-focus
-blur
-updated
Signature:
protected get addHandler(): AddFrameworkHandler<Extension>;
property baseOutput
Methods and properties which are made available to all consumers of the Framework
class.
Signature:
protected get baseOutput(): FrameworkOutput<Extension>;
property blur
Blur the editor.
Signature:
protected readonly blur: (position?: PrimitiveSelection) => void;
property createStateFromContent
Signature:
protected readonly createStateFromContent: CreateStateFromContent;
property dispatchTransaction
Part of the Prosemirror API and is called whenever there is state change in the editor.
Signature:
protected readonly dispatchTransaction: (tr: Transaction) => void;
property firstRender
True when this is the first render of the editor.
Signature:
protected get firstRender(): boolean;
property focus
Focus the editor.
Signature:
protected readonly focus: (position?: FocusType) => void;
property frameworkOutput
Every framework implementation must provide it's own custom output.
Signature:
abstract get frameworkOutput(): Output;
property getPreviousState
Retrieve the previous editor state.
Signature:
protected readonly getPreviousState: () => EditorState;
property getState
Retrieve the editor state.
Signature:
protected readonly getState: () => EditorState;
property initialEditorState
The initial editor state from when the editor was first created.
Signature:
get initialEditorState(): EditorState;
property manager
The instance of the [[RemirrorManager
]].
Signature:
protected get manager(): RemirrorManager<Extension>;
property name
Store the name of the framework.
Signature:
abstract get name(): string;
property onChange
Use this method in the onUpdate
event to run all change handlers.
Signature:
readonly onChange: (props?: ListenerProps) => void;
property previousState
Returns the previous editor state. On the first render it defaults to returning the current state. For the first render the previous state and current state will always be equal.
Signature:
protected get previousState(): EditorState;
property previousStateOverride
A previous state that can be overridden by the framework implementation.
Signature:
protected previousStateOverride?: EditorState;
property props
The props passed in when creating or updating the Framework
instance.
Signature:
get props(): Props;
property uid
A unique id for the editor. Can be used to differentiate between editors.
Please note that this ID is only locally unique, it should not be used as a database key.
Signature:
protected get uid(): string;
property updatableViewProps
The updatable view props.
Signature:
protected get updatableViewProps(): UpdatableViewPropsObject;
property view
The ProseMirror [[EditorView
]].
Signature:
protected get view(): EditorView;
method addFocusListeners
Adds onBlur
and onFocus
listeners.
When extending this class make sure to call this method once ProsemirrorView
has been added to the dom.
Signature:
protected addFocusListeners(): void;
Returns:
void
method createView
This method must be implement by the extending framework class. It returns an [[EditorView
]] which is added to the [[RemirrorManager
]].
Signature:
protected abstract createView(state: EditorState, element?: Element): EditorView;
Parameters:
Parameter | Type | Description |
---|---|---|
state | EditorState | |
element | Element | (Optional) |
Returns:
EditorView
method destroy
Called when the component unmounts and is responsible for cleanup.
Signature:
destroy(): void;
Returns:
void
Remarks:
- Removes listeners for the editor
blur
andfocus
events
method eventListenerProps
Creates the props passed into all event listener handlers. e.g. onChange
Signature:
protected eventListenerProps(props?: ListenerProps): RemirrorEventListenerProps<Extension>;
Parameters:
Parameter | Type | Description |
---|---|---|
props | ListenerProps | (Optional) |
Returns:
RemirrorEventListenerProps<Extension>
method getAttributes
This sets the attributes for the ProseMirror Dom node.
Signature:
protected getAttributes(ssr?: false): Record<string, string>;
Parameters:
Parameter | Type | Description |
---|---|---|
ssr | false | (Optional) |
Returns:
Record<string, string>
method getAttributes
Signature:
protected getAttributes(ssr: true): Shape;
Parameters:
Parameter | Type | Description |
---|---|---|
ssr | true |
Returns:
method removeFocusListeners
Remove onBlur
and onFocus
listeners.
When extending this class in your framework, make sure to call this just before the view is destroyed.
Signature:
protected removeFocusListeners(): void;
Returns:
void
method update
Update the constructor props passed in. Useful for frameworks like react where props are constantly changing and when using hooks function closures can become stale.
You can call the update method with the new props
to update the internal state of this instance.
Signature:
update(options: FrameworkOptions<Extension, Props>): this;
Parameters:
Parameter | Type | Description |
---|---|---|
options | FrameworkOptions<Extension, Props> |
Returns:
this
method updateState
This is used to implement how the state updates are used within your application instance.
It must be implemented.
Signature:
protected abstract updateState(props: UpdateStateProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | UpdateStateProps |
Returns:
void
method updateViewProps
Update the view props.
Signature:
protected updateViewProps(...keys: UpdatableViewProps[]): void;
Parameters:
Parameter | Type | Description |
---|---|---|
keys | UpdatableViewProps[] |
Returns:
void
class HelpersExtension
Helpers are custom methods that can provide extra functionality to the editor.
Signature:
export declare class HelpersExtension extends PlainExtension
Extends: PlainExtension
Remarks:
They can be used for pulling information from the editor or performing custom async commands.
Also provides the default helpers used within the extension.
Builtin Extension
(Some inherited members may not be shown because they are not represented in the documentation.)
Extension.(constructor)
Constructs a new instance of the Extension
class
Signature:
constructor(...args: ExtensionConstructorProps<Options>);
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
property constructorName
The name that the constructor should have, which doesn't get mangled in production.
Signature:
get constructorName(): string;
property defaultPriority
The default priority for this family of extensions.
Signature:
static readonly defaultPriority: ExtensionPriority;
property extensions
The list of extensions added to the editor by this Preset
.
Signature:
get extensions(): Array<this['~E']>;
property name
Signature:
get name(): "helpers";
property priority
The priority level for this instance of the extension. A higher value corresponds to a higher priority extension
Signature:
get priority(): ExtensionPriority;
property store
The store is a shared object that's internal to each extension. It includes often used items like the view
and schema
that are added by the extension manager and also the lifecycle extension methods.
**NOTE** - The store is not available until the manager has been created and received the extension. As a result trying to access the store during init
and constructor
will result in a runtime error.
Some properties of the store are available at different phases. You should check the inline documentation to know when a certain property is useable in your extension.
Signature:
protected get store(): Remirror.ExtensionStore;
method clone
Clone an extension.
Signature:
clone(...args: ExtensionConstructorProps<Options>): Extension<Options>;
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
Returns:
Extension<Options>
method createExtensions
Create the extensions which will be consumed by the preset. Override this if you would like to make your extension a parent to other (holder) extensions which don't make sense existing outside of the context of this extension.
Signature:
createExtensions(): AnyExtension[];
Returns:
Remarks:
Since this method is called in the constructor it should always be created as an instance method and not a property. Properties aren't available for the call to the parent class.
class HolderExtension extends PlainExtension {
get name() {
return 'holder'
}
// GOOD ✅
createExtensions() {
return [];
}
// BAD ❌
createExtensions = () => {
return [];
}
}
method getExtension
Get an extension from this holder extension by providing the desired Constructor
.
Signature:
getExtension<Type extends this['~E']['constructor']>(Constructor: Type): InstanceType<Type>;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type | the extension constructor to find in the editor. |
Returns:
InstanceType<Type>
Remarks:
This method will throw an error if the constructor doesn't exist within the extension created by this extension.
It can be used to forward options and attach handlers to the children extensions. It is the spiritual replacement of the Preset
extension.
import { PlainExtension, OnSetOptionsProps } from 'remirror';
interface ParentOptions { weight?: string }
class ParentExtension extends PlainExtension<ParentOptions> {
get name() {
return 'parent' as const;
}
createExtensions() {
return [new BoldExtension()]
}
onSetOptions(options: OnSetOptionsProps<ParentOptions>): void {
if (options.changes.weight.changed) {
// Update the value of the provided extension.
this.getExtension(BoldExtension).setOption({ weight: options.changes.weight.value });
}
}
}
method getHTML
Get the html from the current state, or provide a custom state.
Signature:
getHTML(state?: EditorState): Helper<string>;
Parameters:
Parameter | Type | Description |
---|---|---|
state | EditorState | (Optional) |
Returns:
Helper<string>
method getJSON
Get the JSON output for the main ProseMirror doc
node.
This can be used to persist data between sessions and can be passed as content to the initialContent
prop.
Signature:
getJSON(state?: EditorState): Helper<RemirrorJSON>;
Parameters:
Parameter | Type | Description |
---|---|---|
state | EditorState | (Optional) |
Returns:
method getStateJSON
Get the full JSON output for the ProseMirror editor state object.
Signature:
getStateJSON(state?: EditorState): Helper<StateJSON>;
Parameters:
Parameter | Type | Description |
---|---|---|
state | EditorState | (Optional) |
Returns:
method getText
A method to get all the content in the editor as text. Depending on the content in your editor, it is not guaranteed to preserve it 100%, so it's best to test that it meets your needs before consuming.
Signature:
getText({ lineBreakDivider, state, }?: GetTextHelperOptions): Helper<string>;
Parameters:
Parameter | Type | Description |
---|---|---|
{ lineBreakDivider, state, } | GetTextHelperOptions | (Optional) |
Returns:
Helper<string>
method getTextBetween
Signature:
getTextBetween(from: number, to: number, doc?: ProsemirrorNode): Helper<string>;
Parameters:
Parameter | Type | Description |
---|---|---|
from | number | |
to | number | |
doc | ProsemirrorNode | (Optional) |
Returns:
Helper<string>
method insertHtml
Insert a html string as a ProseMirror Node.
Builtin Command
Signature:
insertHtml(html: string, options?: InsertNodeOptions): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
html | string | |
options | InsertNodeOptions | (Optional) |
Returns:
CommandFunction
method isOfType
Check if the type of this extension's constructor matches the type of the provided constructor.
Signature:
isOfType<Type extends AnyExtensionConstructor>(Constructor: Type): this is InstanceType<Type>;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type |
Returns:
this is InstanceType<Type>
method isSelectionEmpty
Check whether the selection is empty.
Signature:
isSelectionEmpty(state?: EditorState): Helper<boolean>;
Parameters:
Parameter | Type | Description |
---|---|---|
state | EditorState | (Optional) |
Returns:
Helper<boolean>
method isViewEditable
Signature:
isViewEditable(state?: EditorState): Helper<boolean>;
Parameters:
Parameter | Type | Description |
---|---|---|
state | EditorState | (Optional) |
Returns:
Helper<boolean>
method onAppendTransaction
This can be used by the Extension
to append a transaction to the latest update.
This is shorthand for the ProsemirrorPlugin.spec.appendTransaction
.
Lifecycle Methods
Signature:
onAppendTransaction?(props: AppendLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | AppendLifecycleProps |
Returns:
void
method onApplyState
This is called when the state is being applied to the editor. This can be used as a shorthand for the [[Plugin.spec.state.apply
]] method.
For example, when using [[createDecorations
]] you can respond to editor updates within this callback.
Lifecycle Methods
Signature:
onApplyState?(props: ApplyStateLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | ApplyStateLifecycleProps |
Returns:
void
method onCreate
Add the html
and text
string handlers to the editor.
Signature:
onCreate(): void;
Returns:
void
method onDestroy
Called when the extension is being destroyed.
Lifecycle Methods
Signature:
onDestroy?(): void;
Returns:
void
method onInitState
This is called when the prosemirror editor state is first attached to the editor. It can be useful for doing some preparation work.
This is a shorthand for creating a plugin and adding the [[Plugin.spec.state.init
]].
Lifecycle Methods
Signature:
onInitState?(state: EditorState): void;
Parameters:
Parameter | Type | Description |
---|---|---|
state | EditorState |
Returns:
void
method onStateUpdate
This handler is called after a transaction successfully updates the editor state. It is called asynchronously after the [[onApplyState
]] hook has been run run.
Lifecycle Methods
Signature:
onStateUpdate?(props: StateUpdateLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | StateUpdateLifecycleProps |
Returns:
void
method onView
This event happens when the view is first received from the view layer (e.g. React).
Return a dispose function which will be called when the extension is destroyed.
This handler is called after the onCreate
handler.
Lifecycle Methods
Signature:
onView?(view: EditorView): Dispose | void;
Parameters:
Parameter | Type | Description |
---|---|---|
view | EditorView |
Returns:
Dispose | void
class InputRulesExtension
This extension allows others extension to add the createInputRules
method for automatically transforming text when a certain regex pattern is typed.
Signature:
export declare class InputRulesExtension extends PlainExtension<InputRulesOptions>
Extends: PlainExtension<InputRulesOptions>
Remarks:
This is an example of adding custom functionality to an extension via the ExtensionParameterMethods
.
Builtin Extension
(Some inherited members may not be shown because they are not represented in the documentation.)
Extension.(constructor)
Constructs a new instance of the Extension
class
Signature:
constructor(...args: ExtensionConstructorProps<Options>);
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
property constructorName
The name that the constructor should have, which doesn't get mangled in production.
Signature:
get constructorName(): string;
property defaultPriority
The default priority for this family of extensions.
Signature:
static readonly defaultPriority: ExtensionPriority;
property extensions
The list of extensions added to the editor by this Preset
.
Signature:
get extensions(): Array<this['~E']>;
property name
Signature:
get name(): "inputRules";
property priority
The priority level for this instance of the extension. A higher value corresponds to a higher priority extension
Signature:
get priority(): ExtensionPriority;
property store
The store is a shared object that's internal to each extension. It includes often used items like the view
and schema
that are added by the extension manager and also the lifecycle extension methods.
**NOTE** - The store is not available until the manager has been created and received the extension. As a result trying to access the store during init
and constructor
will result in a runtime error.
Some properties of the store are available at different phases. You should check the inline documentation to know when a certain property is useable in your extension.
Signature:
protected get store(): Remirror.ExtensionStore;
method clone
Clone an extension.
Signature:
clone(...args: ExtensionConstructorProps<Options>): Extension<Options>;
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
Returns:
Extension<Options>
method createExtensions
Create the extensions which will be consumed by the preset. Override this if you would like to make your extension a parent to other (holder) extensions which don't make sense existing outside of the context of this extension.
Signature:
createExtensions(): AnyExtension[];
Returns:
Remarks:
Since this method is called in the constructor it should always be created as an instance method and not a property. Properties aren't available for the call to the parent class.
class HolderExtension extends PlainExtension {
get name() {
return 'holder'
}
// GOOD ✅
createExtensions() {
return [];
}
// BAD ❌
createExtensions = () => {
return [];
}
}
method createExternalPlugins
Add the inputRules
plugin to the editor.
Signature:
createExternalPlugins(): ProsemirrorPlugin[];
Returns:
ProsemirrorPlugin[]
method getExtension
Get an extension from this holder extension by providing the desired Constructor
.
Signature:
getExtension<Type extends this['~E']['constructor']>(Constructor: Type): InstanceType<Type>;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type | the extension constructor to find in the editor. |
Returns:
InstanceType<Type>
Remarks:
This method will throw an error if the constructor doesn't exist within the extension created by this extension.
It can be used to forward options and attach handlers to the children extensions. It is the spiritual replacement of the Preset
extension.
import { PlainExtension, OnSetOptionsProps } from 'remirror';
interface ParentOptions { weight?: string }
class ParentExtension extends PlainExtension<ParentOptions> {
get name() {
return 'parent' as const;
}
createExtensions() {
return [new BoldExtension()]
}
onSetOptions(options: OnSetOptionsProps<ParentOptions>): void {
if (options.changes.weight.changed) {
// Update the value of the provided extension.
this.getExtension(BoldExtension).setOption({ weight: options.changes.weight.value });
}
}
}
method isOfType
Check if the type of this extension's constructor matches the type of the provided constructor.
Signature:
isOfType<Type extends AnyExtensionConstructor>(Constructor: Type): this is InstanceType<Type>;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type |
Returns:
this is InstanceType<Type>
method onAppendTransaction
This can be used by the Extension
to append a transaction to the latest update.
This is shorthand for the ProsemirrorPlugin.spec.appendTransaction
.
Lifecycle Methods
Signature:
onAppendTransaction?(props: AppendLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | AppendLifecycleProps |
Returns:
void
method onApplyState
This is called when the state is being applied to the editor. This can be used as a shorthand for the [[Plugin.spec.state.apply
]] method.
For example, when using [[createDecorations
]] you can respond to editor updates within this callback.
Lifecycle Methods
Signature:
onApplyState?(props: ApplyStateLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | ApplyStateLifecycleProps |
Returns:
void
method onCreate
Add the extension store method for rebuilding all input rules.
Signature:
onCreate(): void;
Returns:
void
method onDestroy
Called when the extension is being destroyed.
Lifecycle Methods
Signature:
onDestroy?(): void;
Returns:
void
method onInitState
This is called when the prosemirror editor state is first attached to the editor. It can be useful for doing some preparation work.
This is a shorthand for creating a plugin and adding the [[Plugin.spec.state.init
]].
Lifecycle Methods
Signature:
onInitState?(state: EditorState): void;
Parameters:
Parameter | Type | Description |
---|---|---|
state | EditorState |
Returns:
void
method onStateUpdate
This handler is called after a transaction successfully updates the editor state. It is called asynchronously after the [[onApplyState
]] hook has been run run.
Lifecycle Methods
Signature:
onStateUpdate?(props: StateUpdateLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | StateUpdateLifecycleProps |
Returns:
void
method onView
This event happens when the view is first received from the view layer (e.g. React).
Return a dispose function which will be called when the extension is destroyed.
This handler is called after the onCreate
handler.
Lifecycle Methods
Signature:
onView?(view: EditorView): Dispose | void;
Parameters:
Parameter | Type | Description |
---|---|---|
view | EditorView |
Returns:
Dispose | void
class KeymapExtension
This extension allows others extension to use the createKeymaps
method.
Signature:
export declare class KeymapExtension extends PlainExtension<KeymapOptions>
Extends: PlainExtension<KeymapOptions>
Remarks:
Keymaps are the way of controlling how the editor responds to a keypress and different key combinations.
Without this extension most of the shortcuts and behaviors we have come to expect from text editors would not be provided.
Builtin Extension
(Some inherited members may not be shown because they are not represented in the documentation.)
Extension.(constructor)
Constructs a new instance of the Extension
class
Signature:
constructor(...args: ExtensionConstructorProps<Options>);
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
property constructorName
The name that the constructor should have, which doesn't get mangled in production.
Signature:
get constructorName(): string;
property defaultPriority
The default priority for this family of extensions.
Signature:
static readonly defaultPriority: ExtensionPriority;
property extensions
The list of extensions added to the editor by this Preset
.
Signature:
get extensions(): Array<this['~E']>;
property name
Signature:
get name(): "keymap";
property onAddCustomHandler
Signature:
protected onAddCustomHandler: AddCustomHandler<KeymapOptions>;
property priority
The priority level for this instance of the extension. A higher value corresponds to a higher priority extension
Signature:
get priority(): ExtensionPriority;
property store
The store is a shared object that's internal to each extension. It includes often used items like the view
and schema
that are added by the extension manager and also the lifecycle extension methods.
**NOTE** - The store is not available until the manager has been created and received the extension. As a result trying to access the store during init
and constructor
will result in a runtime error.
Some properties of the store are available at different phases. You should check the inline documentation to know when a certain property is useable in your extension.
Signature:
protected get store(): Remirror.ExtensionStore;
method arrowLeftShortcut
Handle the arrow left key to exit the mark.
Signature:
arrowLeftShortcut(props: KeyBindingProps): boolean;
Parameters:
Parameter | Type | Description |
---|---|---|
props | KeyBindingProps |
Returns:
boolean
method arrowRightShortcut
Handle exiting the mark forwards.
Signature:
arrowRightShortcut(props: KeyBindingProps): boolean;
Parameters:
Parameter | Type | Description |
---|---|---|
props | KeyBindingProps |
Returns:
boolean
method backspace
Handle exiting the mark forwards.
Signature:
backspace(props: KeyBindingProps): boolean;
Parameters:
Parameter | Type | Description |
---|---|---|
props | KeyBindingProps |
Returns:
boolean
method clone
Clone an extension.
Signature:
clone(...args: ExtensionConstructorProps<Options>): Extension<Options>;
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
Returns:
Extension<Options>
method createExtensions
Create the extensions which will be consumed by the preset. Override this if you would like to make your extension a parent to other (holder) extensions which don't make sense existing outside of the context of this extension.
Signature:
createExtensions(): AnyExtension[];
Returns:
Remarks:
Since this method is called in the constructor it should always be created as an instance method and not a property. Properties aren't available for the call to the parent class.
class HolderExtension extends PlainExtension {
get name() {
return 'holder'
}
// GOOD ✅
createExtensions() {
return [];
}
// BAD ❌
createExtensions = () => {
return [];
}
}
method createExternalPlugins
Add the created keymap to the available plugins.
Signature:
createExternalPlugins(): ProsemirrorPlugin[];
Returns:
ProsemirrorPlugin[]
method createKeymap
Create the base keymap and give it a low priority so that all other keymaps override it.
Signature:
createKeymap(): PrioritizedKeyBindings;
Returns:
method getExtension
Get an extension from this holder extension by providing the desired Constructor
.
Signature:
getExtension<Type extends this['~E']['constructor']>(Constructor: Type): InstanceType<Type>;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type | the extension constructor to find in the editor. |
Returns:
InstanceType<Type>
Remarks:
This method will throw an error if the constructor doesn't exist within the extension created by this extension.
It can be used to forward options and attach handlers to the children extensions. It is the spiritual replacement of the Preset
extension.
import { PlainExtension, OnSetOptionsProps } from 'remirror';
interface ParentOptions { weight?: string }
class ParentExtension extends PlainExtension<ParentOptions> {
get name() {
return 'parent' as const;
}
createExtensions() {
return [new BoldExtension()]
}
onSetOptions(options: OnSetOptionsProps<ParentOptions>): void {
if (options.changes.weight.changed) {
// Update the value of the provided extension.
this.getExtension(BoldExtension).setOption({ weight: options.changes.weight.value });
}
}
}
method getNamedShortcut
Get the real shortcut name from the named shortcut.
Signature:
getNamedShortcut(shortcut: string, options?: Shape): Helper<string[]>;
Parameters:
Parameter | Type | Description |
---|---|---|
shortcut | string | |
options | Shape | (Optional) |
Returns:
Helper<string[]>
method isOfType
Check if the type of this extension's constructor matches the type of the provided constructor.
Signature:
isOfType<Type extends AnyExtensionConstructor>(Constructor: Type): this is InstanceType<Type>;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type |
Returns:
this is InstanceType<Type>
method onAppendTransaction
This can be used by the Extension
to append a transaction to the latest update.
This is shorthand for the ProsemirrorPlugin.spec.appendTransaction
.
Lifecycle Methods
Signature:
onAppendTransaction?(props: AppendLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | AppendLifecycleProps |
Returns:
void
method onApplyState
This is called when the state is being applied to the editor. This can be used as a shorthand for the [[Plugin.spec.state.apply
]] method.
For example, when using [[createDecorations
]] you can respond to editor updates within this callback.
Lifecycle Methods
Signature:
onApplyState?(props: ApplyStateLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | ApplyStateLifecycleProps |
Returns:
void
method onCreate
This adds the createKeymap
method functionality to all extensions.
Signature:
onCreate(): void;
Returns:
void
method onDestroy
Called when the extension is being destroyed.
Lifecycle Methods
Signature:
onDestroy?(): void;
Returns:
void
method onInitState
This is called when the prosemirror editor state is first attached to the editor. It can be useful for doing some preparation work.
This is a shorthand for creating a plugin and adding the [[Plugin.spec.state.init
]].
Lifecycle Methods
Signature:
onInitState?(state: EditorState): void;
Parameters:
Parameter | Type | Description |
---|---|---|
state | EditorState |
Returns:
void
method onSetOptions
Handle changes in the dynamic properties.
Signature:
protected onSetOptions(props: OnSetOptionsProps<KeymapOptions>): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | OnSetOptionsProps<KeymapOptions> |
Returns:
void
method onStateUpdate
This handler is called after a transaction successfully updates the editor state. It is called asynchronously after the [[onApplyState
]] hook has been run run.
Lifecycle Methods
Signature:
onStateUpdate?(props: StateUpdateLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | StateUpdateLifecycleProps |
Returns:
void
method onView
This event happens when the view is first received from the view layer (e.g. React).
Return a dispose function which will be called when the extension is destroyed.
This handler is called after the onCreate
handler.
Lifecycle Methods
Signature:
onView?(view: EditorView): Dispose | void;
Parameters:
Parameter | Type | Description |
---|---|---|
view | EditorView |
Returns:
Dispose | void
class MarkExtension
A mark extension is based on the Mark
concept from from within prosemirror https://prosemirror.net/docs/guide/#schema.marks
Signature:
export declare abstract class MarkExtension<Options extends ValidOptions = EmptyShape> extends Extension<Options>
Extends: Extension<Options>
Remarks:
Marks are used to add extra styling or other information to inline content. Mark types are objects much like node types, used to tag mark objects and provide additional information about them.
(Some inherited members may not be shown because they are not represented in the documentation.)
MarkExtension.(constructor)
Constructs a new instance of the MarkExtension
class
Signature:
constructor(...args: ExtensionConstructorProps<Options>);
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
property constructorName
The name that the constructor should have, which doesn't get mangled in production.
Signature:
get constructorName(): string;
property defaultPriority
The default priority for this family of extensions.
Signature:
static readonly defaultPriority: ExtensionPriority;
property disableExtraAttributes
Whether to disable extra attributes for this extension.
Signature:
static readonly disableExtraAttributes: boolean;
property extensions
The list of extensions added to the editor by this Preset
.
Signature:
get extensions(): Array<this['~E']>;
property priority
The priority level for this instance of the extension. A higher value corresponds to a higher priority extension
Signature:
get priority(): ExtensionPriority;
property store
The store is a shared object that's internal to each extension. It includes often used items like the view
and schema
that are added by the extension manager and also the lifecycle extension methods.
**NOTE** - The store is not available until the manager has been created and received the extension. As a result trying to access the store during init
and constructor
will result in a runtime error.
Some properties of the store are available at different phases. You should check the inline documentation to know when a certain property is useable in your extension.
Signature:
protected get store(): Remirror.ExtensionStore;
property type
Provides access to the mark type from the schema.
Signature:
get type(): MarkType;
Remarks:
The type is available as soon as the schema is created by the SchemaExtension
which has the priority Highest
. It should be safe to access in any of the lifecycle methods.
method clone
Clone an extension.
Signature:
clone(...args: ExtensionConstructorProps<Options>): Extension<Options>;
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
Returns:
Extension<Options>
method createExtensions
Create the extensions which will be consumed by the preset. Override this if you would like to make your extension a parent to other (holder) extensions which don't make sense existing outside of the context of this extension.
Signature:
createExtensions(): AnyExtension[];
Returns:
Remarks:
Since this method is called in the constructor it should always be created as an instance method and not a property. Properties aren't available for the call to the parent class.
class HolderExtension extends PlainExtension {
get name() {
return 'holder'
}
// GOOD ✅
createExtensions() {
return [];
}
// BAD ❌
createExtensions = () => {
return [];
}
}
method createMarkSpec
Provide a method for creating the schema. This is required in order to create a MarkExtension
.
Signature:
abstract createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec;
Parameters:
Parameter | Type | Description |
---|---|---|
extra | ApplySchemaAttributes | |
override | MarkSpecOverride |
Returns:
Remarks:
The main difference between the return value of this method and Prosemirror MarkSpec
is that that the toDOM
method doesn't allow dom manipulation. You can only return an array or string.
For more advanced requirements, it may be possible to create a nodeView
to manage the dom interactions.
method getExtension
Get an extension from this holder extension by providing the desired Constructor
.
Signature:
getExtension<Type extends this['~E']['constructor']>(Constructor: Type): InstanceType<Type>;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type | the extension constructor to find in the editor. |
Returns:
InstanceType<Type>
Remarks:
This method will throw an error if the constructor doesn't exist within the extension created by this extension.
It can be used to forward options and attach handlers to the children extensions. It is the spiritual replacement of the Preset
extension.
import { PlainExtension, OnSetOptionsProps } from 'remirror';
interface ParentOptions { weight?: string }
class ParentExtension extends PlainExtension<ParentOptions> {
get name() {
return 'parent' as const;
}
createExtensions() {
return [new BoldExtension()]
}
onSetOptions(options: OnSetOptionsProps<ParentOptions>): void {
if (options.changes.weight.changed) {
// Update the value of the provided extension.
this.getExtension(BoldExtension).setOption({ weight: options.changes.weight.value });
}
}
}
method isOfType
Check if the type of this extension's constructor matches the type of the provided constructor.
Signature:
isOfType<Type extends AnyExtensionConstructor>(Constructor: Type): this is InstanceType<Type>;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type |
Returns:
this is InstanceType<Type>
method onAppendTransaction
This can be used by the Extension
to append a transaction to the latest update.
This is shorthand for the ProsemirrorPlugin.spec.appendTransaction
.
Lifecycle Methods
Signature:
onAppendTransaction?(props: AppendLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | AppendLifecycleProps |
Returns:
void
method onApplyState
This is called when the state is being applied to the editor. This can be used as a shorthand for the [[Plugin.spec.state.apply
]] method.
For example, when using [[createDecorations
]] you can respond to editor updates within this callback.
Lifecycle Methods
Signature:
onApplyState?(props: ApplyStateLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | ApplyStateLifecycleProps |
Returns:
void
method onCreate
This handler is called when the RemirrorManager
is first created.
Signature:
onCreate?(): Dispose | void;
Returns:
Dispose | void
Remarks:
Since it is called as soon as the manager is some methods may not be available in the extension store. When accessing methods on this.store
be shore to check when they become available in the lifecycle.
You can return a Dispose
function which will automatically be called when the extension is destroyed.
This handler is called before the onView
handler.
Lifecycle Methods
method onDestroy
Called when the extension is being destroyed.
Lifecycle Methods
Signature:
onDestroy?(): void;
Returns:
void
method onInitState
This is called when the prosemirror editor state is first attached to the editor. It can be useful for doing some preparation work.
This is a shorthand for creating a plugin and adding the [[Plugin.spec.state.init
]].
Lifecycle Methods
Signature:
onInitState?(state: EditorState): void;
Parameters:
Parameter | Type | Description |
---|---|---|
state | EditorState |
Returns:
void
method onStateUpdate
This handler is called after a transaction successfully updates the editor state. It is called asynchronously after the [[onApplyState
]] hook has been run run.
Lifecycle Methods
Signature:
onStateUpdate?(props: StateUpdateLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | StateUpdateLifecycleProps |
Returns:
void
method onView
This event happens when the view is first received from the view layer (e.g. React).
Return a dispose function which will be called when the extension is destroyed.
This handler is called after the onCreate
handler.
Lifecycle Methods
Signature:
onView?(view: EditorView): Dispose | void;
Parameters:
Parameter | Type | Description |
---|---|---|
view | EditorView |
Returns:
Dispose | void
class MetaExtension
Support meta data for commands and key bindings.
Metadata is dded to all commands and keybindings and that information is provided to the onChange
handle whenever the state is updated.
Signature:
export declare class MetaExtension extends PlainExtension<MetaOptions>
Extends: PlainExtension<MetaOptions>
(Some inherited members may not be shown because they are not represented in the documentation.)
Extension.(constructor)
Constructs a new instance of the Extension
class
Signature:
constructor(...args: ExtensionConstructorProps<Options>);
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
property constructorName
The name that the constructor should have, which doesn't get mangled in production.
Signature:
get constructorName(): string;
property defaultPriority
The default priority for this family of extensions.
Signature:
static readonly defaultPriority: ExtensionPriority;
property extensions
The list of extensions added to the editor by this Preset
.
Signature:
get extensions(): Array<this['~E']>;
property name
Signature:
get name(): "meta";
property priority
The priority level for this instance of the extension. A higher value corresponds to a higher priority extension
Signature:
get priority(): ExtensionPriority;
property store
The store is a shared object that's internal to each extension. It includes often used items like the view
and schema
that are added by the extension manager and also the lifecycle extension methods.
**NOTE** - The store is not available until the manager has been created and received the extension. As a result trying to access the store during init
and constructor
will result in a runtime error.
Some properties of the store are available at different phases. You should check the inline documentation to know when a certain property is useable in your extension.
Signature:
protected get store(): Remirror.ExtensionStore;
method clone
Clone an extension.
Signature:
clone(...args: ExtensionConstructorProps<Options>): Extension<Options>;
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
Returns:
Extension<Options>
method createExtensions
Create the extensions which will be consumed by the preset. Override this if you would like to make your extension a parent to other (holder) extensions which don't make sense existing outside of the context of this extension.
Signature:
createExtensions(): AnyExtension[];
Returns:
Remarks:
Since this method is called in the constructor it should always be created as an instance method and not a property. Properties aren't available for the call to the parent class.
class HolderExtension extends PlainExtension {
get name() {
return 'holder'
}
// GOOD ✅
createExtensions() {
return [];
}
// BAD ❌
createExtensions = () => {
return [];
}
}
method createPlugin
This is here to provide a
Signature:
createPlugin(): CreateExtensionPlugin;
Returns:
method getExtension
Get an extension from this holder extension by providing the desired Constructor
.
Signature:
getExtension<Type extends this['~E']['constructor']>(Constructor: Type): InstanceType<Type>;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type | the extension constructor to find in the editor. |
Returns:
InstanceType<Type>
Remarks:
This method will throw an error if the constructor doesn't exist within the extension created by this extension.
It can be used to forward options and attach handlers to the children extensions. It is the spiritual replacement of the Preset
extension.
import { PlainExtension, OnSetOptionsProps } from 'remirror';
interface ParentOptions { weight?: string }
class ParentExtension extends PlainExtension<ParentOptions> {
get name() {
return 'parent' as const;
}
createExtensions() {
return [new BoldExtension()]
}
onSetOptions(options: OnSetOptionsProps<ParentOptions>): void {
if (options.changes.weight.changed) {
// Update the value of the provided extension.
this.getExtension(BoldExtension).setOption({ weight: options.changes.weight.value });
}
}
}
method isOfType
Check if the type of this extension's constructor matches the type of the provided constructor.
Signature:
isOfType<Type extends AnyExtensionConstructor>(Constructor: Type): this is InstanceType<Type>;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type |
Returns:
this is InstanceType<Type>
method onAppendTransaction
This can be used by the Extension
to append a transaction to the latest update.
This is shorthand for the ProsemirrorPlugin.spec.appendTransaction
.
Lifecycle Methods
Signature:
onAppendTransaction?(props: AppendLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | AppendLifecycleProps |
Returns:
void
method onApplyState
This is called when the state is being applied to the editor. This can be used as a shorthand for the [[Plugin.spec.state.apply
]] method.
For example, when using [[createDecorations
]] you can respond to editor updates within this callback.
Lifecycle Methods
Signature:
onApplyState?(props: ApplyStateLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | ApplyStateLifecycleProps |
Returns:
void
method onCreate
Signature:
onCreate(): void;
Returns:
void
method onDestroy
Called when the extension is being destroyed.
Lifecycle Methods
Signature:
onDestroy?(): void;
Returns:
void
method onInitState
This is called when the prosemirror editor state is first attached to the editor. It can be useful for doing some preparation work.
This is a shorthand for creating a plugin and adding the [[Plugin.spec.state.init
]].
Lifecycle Methods
Signature:
onInitState?(state: EditorState): void;
Parameters:
Parameter | Type | Description |
---|---|---|
state | EditorState |
Returns:
void
method onStateUpdate
This handler is called after a transaction successfully updates the editor state. It is called asynchronously after the [[onApplyState
]] hook has been run run.
Lifecycle Methods
Signature:
onStateUpdate?(props: StateUpdateLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | StateUpdateLifecycleProps |
Returns:
void
method onView
This event happens when the view is first received from the view layer (e.g. React).
Return a dispose function which will be called when the extension is destroyed.
This handler is called after the onCreate
handler.
Lifecycle Methods
Signature:
onView?(view: EditorView): Dispose | void;
Parameters:
Parameter | Type | Description |
---|---|---|
view | EditorView |
Returns:
Dispose | void
class NodeExtension
Defines the abstract class for extensions which can place nodes into the prosemirror state.
Signature:
export declare abstract class NodeExtension<Options extends ValidOptions = EmptyShape> extends Extension<Options>
Extends: Extension<Options>
Remarks:
For more information see https://prosemirror.net/docs/ref/#model.Node
(Some inherited members may not be shown because they are not represented in the documentation.)
NodeExtension.(constructor)
Constructs a new instance of the NodeExtension
class
Signature:
constructor(...args: ExtensionConstructorProps<Options>);
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
property [__INTERNAL_REMIRROR_IDENTIFIER_KEY__]
Signature:
static get [__INTERNAL_REMIRROR_IDENTIFIER_KEY__](): RemirrorIdentifier.NodeExtensionConstructor;
property constructorName
The name that the constructor should have, which doesn't get mangled in production.
Signature:
get constructorName(): string;
property defaultPriority
The default priority for this family of extensions.
Signature:
static readonly defaultPriority: ExtensionPriority;
property disableExtraAttributes
Whether to disable extra attributes for this extension.
Signature:
static readonly disableExtraAttributes: boolean;
property extensions
The list of extensions added to the editor by this Preset
.
Signature:
get extensions(): Array<this['~E']>;
property priority
The priority level for this instance of the extension. A higher value corresponds to a higher priority extension
Signature:
get priority(): ExtensionPriority;
property store
The store is a shared object that's internal to each extension. It includes often used items like the view
and schema
that are added by the extension manager and also the lifecycle extension methods.
**NOTE** - The store is not available until the manager has been created and received the extension. As a result trying to access the store during init
and constructor
will result in a runtime error.
Some properties of the store are available at different phases. You should check the inline documentation to know when a certain property is useable in your extension.
Signature:
protected get store(): Remirror.ExtensionStore;
property type
Provides access to the node type from the schema.
Signature:
get type(): NodeType;
method clone
Clone an extension.
Signature:
clone(...args: ExtensionConstructorProps<Options>): Extension<Options>;
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
Returns:
Extension<Options>
method createExtensions
Create the extensions which will be consumed by the preset. Override this if you would like to make your extension a parent to other (holder) extensions which don't make sense existing outside of the context of this extension.
Signature:
createExtensions(): AnyExtension[];
Returns:
Remarks:
Since this method is called in the constructor it should always be created as an instance method and not a property. Properties aren't available for the call to the parent class.
class HolderExtension extends PlainExtension {
get name() {
return 'holder'
}
// GOOD ✅
createExtensions() {
return [];
}
// BAD ❌
createExtensions = () => {
return [];
}
}
method createNodeSpec
Provide a method for creating the schema. This is required in order to create a NodeExtension
.
Signature:
abstract createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec;
Parameters:
Parameter | Type | Description |
---|---|---|
extra | ApplySchemaAttributes | |
override | NodeSpecOverride |
Returns:
Remarks:
A node schema defines the behavior of the content within the editor. This is very tied to the prosemirror implementation and the best place to learn more about it is in the .
hole - a method that is meant to indicate where extra attributes should be placed (if they exist).
The hole
is a function that augments the passed object adding a special secret
key which is used to insert the extra attributes setter.
import { NodeExtension, SpecHole } from 'remirror';
class AwesomeExtension extends NodeExtension {
get name() { return 'awesome' as const'; }
createNodeSpec() {
return {
toDOM: (node) => {
return ['p', hole(), 0]
}
}
}
}
The above example will have the hole()
method call replaced with the extra attributes.
method getExtension
Get an extension from this holder extension by providing the desired Constructor
.
Signature:
getExtension<Type extends this['~E']['constructor']>(Constructor: Type): InstanceType<Type>;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type | the extension constructor to find in the editor. |
Returns:
InstanceType<Type>
Remarks:
This method will throw an error if the constructor doesn't exist within the extension created by this extension.
It can be used to forward options and attach handlers to the children extensions. It is the spiritual replacement of the Preset
extension.
import { PlainExtension, OnSetOptionsProps } from 'remirror';
interface ParentOptions { weight?: string }
class ParentExtension extends PlainExtension<ParentOptions> {
get name() {
return 'parent' as const;
}
createExtensions() {
return [new BoldExtension()]
}
onSetOptions(options: OnSetOptionsProps<ParentOptions>): void {
if (options.changes.weight.changed) {
// Update the value of the provided extension.
this.getExtension(BoldExtension).setOption({ weight: options.changes.weight.value });
}
}
}
method isOfType
Check if the type of this extension's constructor matches the type of the provided constructor.
Signature:
isOfType<Type extends AnyExtensionConstructor>(Constructor: Type): this is InstanceType<Type>;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type |
Returns:
this is InstanceType<Type>
method onAppendTransaction
This can be used by the Extension
to append a transaction to the latest update.
This is shorthand for the ProsemirrorPlugin.spec.appendTransaction
.
Lifecycle Methods
Signature:
onAppendTransaction?(props: AppendLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | AppendLifecycleProps |
Returns:
void
method onApplyState
This is called when the state is being applied to the editor. This can be used as a shorthand for the [[Plugin.spec.state.apply
]] method.
For example, when using [[createDecorations
]] you can respond to editor updates within this callback.
Lifecycle Methods
Signature:
onApplyState?(props: ApplyStateLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | ApplyStateLifecycleProps |
Returns:
void
method onCreate
This handler is called when the RemirrorManager
is first created.
Signature:
onCreate?(): Dispose | void;
Returns:
Dispose | void
Remarks:
Since it is called as soon as the manager is some methods may not be available in the extension store. When accessing methods on this.store
be shore to check when they become available in the lifecycle.
You can return a Dispose
function which will automatically be called when the extension is destroyed.
This handler is called before the onView
handler.
Lifecycle Methods
method onDestroy
Called when the extension is being destroyed.
Lifecycle Methods
Signature:
onDestroy?(): void;
Returns:
void
method onInitState
This is called when the prosemirror editor state is first attached to the editor. It can be useful for doing some preparation work.
This is a shorthand for creating a plugin and adding the [[Plugin.spec.state.init
]].
Lifecycle Methods
Signature:
onInitState?(state: EditorState): void;
Parameters:
Parameter | Type | Description |
---|---|---|
state | EditorState |
Returns:
void
method onStateUpdate
This handler is called after a transaction successfully updates the editor state. It is called asynchronously after the [[onApplyState
]] hook has been run run.
Lifecycle Methods
Signature:
onStateUpdate?(props: StateUpdateLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | StateUpdateLifecycleProps |
Returns:
void
method onView
This event happens when the view is first received from the view layer (e.g. React).
Return a dispose function which will be called when the extension is destroyed.
This handler is called after the onCreate
handler.
Lifecycle Methods
Signature:
onView?(view: EditorView): Dispose | void;
Parameters:
Parameter | Type | Description |
---|---|---|
view | EditorView |
Returns:
Dispose | void
class NodeViewsExtension
This extension allows others extension to add the createNodeView
method for creating nodeViews which alter how the dom is rendered for the node.
Signature:
export declare class NodeViewsExtension extends PlainExtension
Extends: PlainExtension
Remarks:
This is an example of adding custom functionality to an extension via the ExtensionParameterMethods
.
Builtin Extension
(Some inherited members may not be shown because they are not represented in the documentation.)
Extension.(constructor)
Constructs a new instance of the Extension
class
Signature:
constructor(...args: ExtensionConstructorProps<Options>);
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
property constructorName
The name that the constructor should have, which doesn't get mangled in production.
Signature:
get constructorName(): string;
property defaultPriority
The default priority for this family of extensions.
Signature:
static readonly defaultPriority: ExtensionPriority;
property extensions
The list of extensions added to the editor by this Preset
.
Signature:
get extensions(): Array<this['~E']>;
property name
Signature:
get name(): "nodeViews";
property priority
The priority level for this instance of the extension. A higher value corresponds to a higher priority extension
Signature:
get priority(): ExtensionPriority;
property store
The store is a shared object that's internal to each extension. It includes often used items like the view
and schema
that are added by the extension manager and also the lifecycle extension methods.
**NOTE** - The store is not available until the manager has been created and received the extension. As a result trying to access the store during init
and constructor
will result in a runtime error.
Some properties of the store are available at different phases. You should check the inline documentation to know when a certain property is useable in your extension.
Signature:
protected get store(): Remirror.ExtensionStore;
method clone
Clone an extension.
Signature:
clone(...args: ExtensionConstructorProps<Options>): Extension<Options>;
Parameters:
Parameter | Type | Description |
---|---|---|
args | ExtensionConstructorProps<Options> |
Returns:
Extension<Options>
method createExtensions
Create the extensions which will be consumed by the preset. Override this if you would like to make your extension a parent to other (holder) extensions which don't make sense existing outside of the context of this extension.
Signature:
createExtensions(): AnyExtension[