react
package @remirror/react
class PlaceholderExtension
The placeholder extension which adds a placeholder annotation to an empty document.
Signature:
export declare class PlaceholderExtension extends PlainExtension<PlaceholderOptions>
Extends: PlainExtension<PlaceholderOptions>
(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(): "placeholder";
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 createAttributes
Signature:
createAttributes(): ProsemirrorAttributes;
Returns:
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
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
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 onSetOptions
Signature:
protected onSetOptions(props: OnSetOptionsProps<PlaceholderOptions>): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | OnSetOptionsProps<PlaceholderOptions> |
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 PortalContainer
The node view portal container keeps track of all the portals which have been added by react to render the node views in the editor.
Signature:
export declare class PortalContainer
property on
Event handler for subscribing to update events from the portalContainer.
Signature:
on: (callback: (portals: PortalMap) => void) => Unsubscribe;
property once
Subscribe to one event before automatically unbinding.
Signature:
once: (callback: (portals: PortalMap) => void) => Unsubscribe;
property portals
A map of all the active portals which have a one to one relation between the container and the component.
Signature:
portals: PortalMap;
method forceUpdate
Force an update in all the portals by setting new keys for every portal.
Delete all orphaned containers (deleted from the DOM). This is useful for Decoration where there is no destroy method.
Signature:
forceUpdate(): void;
Returns:
void
method remove
Deletes the portal within the container.
Signature:
remove(container: HTMLElement): void;
Parameters:
Parameter | Type | Description |
---|---|---|
container | HTMLElement |
Returns:
void
method render
Responsible for registering a new portal by rendering the react element into the provided container.
Signature:
render({ Component, container }: RenderMethodProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
{ Component, container } | RenderMethodProps |
Returns:
void
class ReactComponentExtension
The extension transforms the ReactComponent
property on extensions into the following:
- a valid
NodeView
wrapped dom element - a validSSR
component.
Currently this only support nodes. Support will be added for marks later.
Signature:
export declare class ReactComponentExtension extends PlainExtension<ReactComponentOptions>
Extends: PlainExtension<ReactComponentOptions>
Remarks:
When creating a NodeView using the component property the toDOM
method returned by the createNodeSpec
methods needs to be in the following format.
string
- e.g.div
. This will be used as the wrapper tag name. . -[string, 0]
- The wrapper tag name and a0
indicating that this will be accepting content. -[string, object, 0?]
-The wrapper tag name, an object of the attributes that should be applied to the wrapper tag and a 0 when you want the react component to have content inserted into it.
Unfortunately React Components
currently require a wrapping tag element when being used in the DOM. See the following for the reasons.
### Caveats
It's not possible to create a node view without nested dom element in react
due to this issue https://github.com/facebook/react/issues/12227. It's unlikely that this limitation will be changed any time soon https://github.com/ProseMirror/prosemirror/issues/803
NodeViews have a dom
node which is used as the main wrapper element. For paragraphs this would be the p
tag and for text this is a TEXT
node. NodeView's also have a contentDOM
property which is where any content from ProseMirror is injected.
The difficulty in integration is that the dom node and the content dom node of the NodeView
are consumed synchronously by ProseMirror. However, react requires a ref to capture the dom node which corresponds to the mounted component. This is done asynchronously. As a result it's not possible to provide the dom
node or contentDOM
to ProseMirror while using react.
The only way around this is to create both the top level dom
element and the contentDOM
element manually in the NodeView and provide a forwardRef
prop to the component. This prop must be attached to the part of the tree where content should be rendered to. Once the React ref is available the forwardRef
prop appends the contentDOM
to the element where forwardRef
was attached.
(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(): "reactComponent";
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 createNodeViews
Create the node views from the custom components provided.
Signature:
createNodeViews(): Record<string, NodeViewMethod>;
Returns:
Record<string, NodeViewMethod>
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 portal container to the manager store. This can be used by the <Remirror />
component to manage portals for node content.
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 ReactExtension
This extension supplies all required extensions for the functionality of the React
framework implementation.
Provides support for SSR, Placeholders and React components for components when using **remirror** with React.
Signature:
export declare class ReactExtension extends PlainExtension<ReactExtensionOptions>
Extends: PlainExtension<ReactExtensionOptions>
(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(): "react";
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
Signature:
createExtensions(): (PlaceholderExtension | ReactComponentExtension)[];
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
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 onSetOptions
Signature:
protected onSetOptions(props: OnSetOptionsProps<ReactExtensionOptions>): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | OnSetOptionsProps<ReactExtensionOptions> |
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 TableCellExtension
Signature:
export declare class TableCellExtension extends BaseTableCellExtension
Extends: BaseTableCellExtension
(Some inherited members may not be shown because they are not represented in the documentation.)
property name
Signature:
get name(): "tableCell";
method createNodeSpec
Signature:
createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): TableSchemaSpec;
Parameters:
Parameter | Type | Description |
---|---|---|
extra | ApplySchemaAttributes | |
override | NodeSpecOverride |
Returns:
class TableControllerCellExtension
Signature:
export declare class TableControllerCellExtension extends BaseTableControllerCellExtension
Extends: BaseTableControllerCellExtension
(Some inherited members may not be shown because they are not represented in the documentation.)
property name
Signature:
get name(): "tableControllerCell";
method createExtensions
Signature:
createExtensions(): never[];
Returns:
never[]
method createNodeSpec
Signature:
createNodeSpec(extra: ApplySchemaAttributes): TableSchemaSpec;
Parameters:
Parameter | Type | Description |
---|---|---|
extra | ApplySchemaAttributes |
Returns:
method createNodeViews
Signature:
createNodeViews(): NodeViewMethod;
Returns:
method createPlugin
Signature:
createPlugin(): CreateExtensionPlugin;
Returns:
class TableExtension
Signature:
export declare class TableExtension extends BaseTableExtension
Extends: BaseTableExtension
(Some inherited members may not be shown because they are not represented in the documentation.)
property name
Signature:
get name(): "table";
method addTableColumnAfter
Command to add a column after the column with the selection.
Signature:
addTableColumnAfter(): CommandFunction;
Returns:
CommandFunction
method addTableColumnBefore
Command to add a column before the column with the selection.
Signature:
addTableColumnBefore(): CommandFunction;
Returns:
CommandFunction
method addTableRowAfter
Add a table row after the current selection.
Signature:
addTableRowAfter(): CommandFunction;
Returns:
CommandFunction
method addTableRowBefore
Add a table row before the current selection.
Signature:
addTableRowBefore(): CommandFunction;
Returns:
CommandFunction
method createEventHandlers
Signature:
createEventHandlers(): CreateEventHandlers;
Returns:
CreateEventHandlers
method createExtensions
Create the table extensions. Set the priority to low so that they appear lower down in the node list.
Signature:
createExtensions(): TableRowExtension[];
Returns:
method createExternalPlugins
Add the table plugins to the editor.
Signature:
createExternalPlugins(): ProsemirrorPlugin[];
Returns:
ProsemirrorPlugin[]
method createNodeSpec
Signature:
createNodeSpec(extra: ApplySchemaAttributes): TableSchemaSpec;
Parameters:
Parameter | Type | Description |
---|---|---|
extra | ApplySchemaAttributes |
Returns:
method createNodeViews
Signature:
createNodeViews(): NodeViewMethod;
Returns:
method createPlugin
Signature:
createPlugin(): CreateExtensionPlugin;
Returns:
method createTable
Create a table in the editor at the current selection point.
Signature:
createTable(options?: CreateTableCommand): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
options | CreateTableCommand | (Optional) |
Returns:
CommandFunction
method createTags
Signature:
createTags(): "block"[];
Returns:
"block"[]
method deleteTable
Delete the table.
Signature:
deleteTable(): CommandFunction;
Returns:
CommandFunction
method deleteTableColumn
Remove selected column from the table.
Signature:
deleteTableColumn(): CommandFunction;
Returns:
CommandFunction
method deleteTableRow
Delete the table row at the current selection.
Signature:
deleteTableRow(): CommandFunction;
Returns:
CommandFunction
method enableTableSupport
Enable table usage within the editor. This depends on the browser that is being used.
Signature:
enableTableSupport(): Helper<void>;
Returns:
Helper<void>
method expandCellSelection
Signature:
expandCellSelection(type?: 'column' | 'row' | 'all'): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
type | 'column' | 'row' | 'all' | (Optional) |
Returns:
CommandFunction
method fixTables
Fix all tables within the document.
This is a **non-chainable** command.
Signature:
fixTables(): NonChainableCommandFunction;
Returns:
NonChainableCommandFunction
method goToNextCell
Signature:
goToNextCell(props: KeyBindingProps): boolean;
Parameters:
Parameter | Type | Description |
---|---|---|
props | KeyBindingProps |
Returns:
boolean
method goToPreviousCell
Signature:
goToPreviousCell(props: KeyBindingProps): boolean;
Parameters:
Parameter | Type | Description |
---|---|---|
props | KeyBindingProps |
Returns:
boolean
method mergeTableCells
Merge the table cells.
Signature:
mergeTableCells(): CommandFunction;
Returns:
CommandFunction
method onSetOptions
This managers the updates of the collaboration provider.
Signature:
protected onSetOptions(props: OnSetOptionsProps<TableOptions>): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | OnSetOptionsProps<TableOptions> |
Returns:
void
method onStateUpdate
Signature:
onStateUpdate(props: StateUpdateLifecycleProps): void;
Parameters:
Parameter | Type | Description |
---|---|---|
props | StateUpdateLifecycleProps |
Returns:
void
method onView
Signature:
onView(view: EditorView): void;
Parameters:
Parameter | Type | Description |
---|---|---|
view | EditorView |
Returns:
void
method selectParentCell
Signature:
selectParentCell(): CommandFunction;
Returns:
CommandFunction
method setTableCellAttribute
Set the attribute for a table cell.
Signature:
setTableCellAttribute(name: string, value: unknown): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
name | string | |
value | unknown |
Returns:
CommandFunction
method setTableCellBackground
Update the background of one cell or multiple cells by passing a color string. You can also remove the color by passing a null
.
Signature:
setTableCellBackground(background: string | null): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
background | string | null |
Returns:
CommandFunction
method splitTableCell
Split the merged cells into individual cells.
Signature:
splitTableCell(): CommandFunction;
Returns:
CommandFunction
method tableHasHeader
Determines if the first row/column is a header row/column
Signature:
tableHasHeader(type?: 'column' | 'row', state?: EditorState): Helper<boolean>;
Parameters:
Parameter | Type | Description |
---|---|---|
type | 'column' | 'row' | (Optional) |
state | EditorState | (Optional) |
Returns:
Helper<boolean>
method toggleTableCellMerge
Toggles between merging cells.
Signature:
toggleTableCellMerge(): CommandFunction;
Returns:
CommandFunction
method toggleTableHeader
Toggles between row/column header and normal cells (Only applies to first row/column).
Signature:
toggleTableHeader(type?: 'column' | 'row'): CommandFunction;
Parameters:
Parameter | Type | Description |
---|---|---|
type | 'column' | 'row' | (Optional) |
Returns:
CommandFunction
method toggleTableHeaderCell
Toggle a cell as a table header cell.
Signature:
toggleTableHeaderCell(): CommandFunction;
Returns:
CommandFunction
method toggleTableHeaderColumn
Toggles a column as the header column.
Signature:
toggleTableHeaderColumn(): CommandFunction;
Returns:
CommandFunction
method toggleTableHeaderRow
Toggles a row as a table header row.
Signature:
toggleTableHeaderRow(): CommandFunction;
Returns:
CommandFunction
class TableHeaderCellExtension
Signature:
export declare class TableHeaderCellExtension extends BaseTableHeaderCellExtension
Extends: BaseTableHeaderCellExtension
(Some inherited members may not be shown because they are not represented in the documentation.)
property name
Signature:
get name(): "tableHeaderCell";
method createNodeSpec
Signature:
createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): TableSchemaSpec;
Parameters:
Parameter | Type | Description |
---|---|---|
extra | ApplySchemaAttributes | |
override | NodeSpecOverride |
Returns:
class TableRowExtension
Signature:
export declare class TableRowExtension extends BaseTableRowExtension
Extends: BaseTableRowExtension
(Some inherited members may not be shown because they are not represented in the documentation.)
property name
Signature:
get name(): "tableRow";
method createExtensions
Automatically create the TableCellExtension
,TableHeaderCellExtension
and TableControllerCellExtension
. This is placed here so that this extension can be tested independently from the TableExtension
.
Signature:
createExtensions(): (TableCellExtension | TableControllerCellExtension | TableHeaderCellExtension)[];
Returns:
(TableCellExtension | TableControllerCellExtension | TableHeaderCellExtension)[]
method createNodeSpec
Signature:
createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): TableSchemaSpec;
Parameters:
Parameter | Type | Description |
---|---|---|
extra | ApplySchemaAttributes | |
override | NodeSpecOverride |
Returns:
function createEditorView()
Creates a new editor view
Signature:
export declare function createEditorView(place: Node | ((p: HTMLElement) => void) | null, props: DirectEditorProps): EditorView;
Parameters:
Parameter | Type | Description |
---|---|---|
place | Node | ((p: HTMLElement) => void) | null | |
props | DirectEditorProps |
Returns:
EditorView
function createReactManager()
Create a React [[RemirrorManager
]] with all the default react presets and extensions.
Signature:
export declare function createReactManager<Extension extends AnyExtension>(extensions: Extension[] | (() => Extension[]) | RemirrorManager<ReactExtensions<Extension>>, options?: CreateReactManagerOptions): RemirrorManager<ReactExtensions<Extension>>;
Parameters:
Parameter | Type | Description |
---|---|---|
extensions | Extension[] | (() => Extension[]) | RemirrorManager<ReactExtensions<Extension>> | |
options | CreateReactManagerOptions | (Optional) |
Returns:
RemirrorManager<ReactExtensions<Extension>>
function GenIcon()
A higher order component which creates the Icon component.
Signature:
export declare function GenIcon(tree: IconTree[], viewBox?: string): IconType;
Parameters:
Parameter | Type | Description |
---|---|---|
tree | IconTree[] | |
viewBox | string | (Optional) |
Returns:
function indexFromArrowPress()
Get the next index from an arrow key press.
Signature:
export declare function indexFromArrowPress({ direction, matchLength, previousIndex, }: IndexFromArrowPressProps): number;
Parameters:
Parameter | Type | Description |
---|---|---|
{ direction, matchLength, previousIndex, } | IndexFromArrowPressProps |
Returns:
number
function MentionAtomPopupComponent()
This component renders the emoji suggestion dropdown for the user.
Signature:
export declare function MentionAtomPopupComponent<Data extends MentionAtomNodeAttributes = MentionAtomNodeAttributes>(props: MentionAtomPopupComponentProps<Data>): JSX.Element;
Parameters:
Parameter | Type | Description |
---|---|---|
props | MentionAtomPopupComponentProps<Data> |
Returns:
JSX.Element
function Remirror_2()
[[Remirror
]] is the component for putting the editor into into it's child component.
Signature:
export declare function Remirror<Extension extends AnyExtension = Remirror.Extensions>(props: RemirrorProps<Extension>): ReactElement<RemirrorProps<Extension>>;
Parameters:
Parameter | Type | Description |
---|---|---|
props | RemirrorProps<Extension> |
Returns:
ReactElement<RemirrorProps<Extension>>
Remarks:
The main component for remirror. This acts both as a Provider of the remirror context. All components rendered within Remirror
have access to the remirror context via useRemirrorContext
.
I can also be rendered as a standalone editor without children. In this case the context can be accessed from outside the editor via useRemirror().getContext()
.
function useActive()
This is a shorthand method for retrieving the active available in the editor.
import { useActive } from '@remirror/react';
This hooks updates the local component on each state update for the editor, so it can be quite expensive.
Signature:
export declare function useActive<Extension extends AnyExtension = Remirror.Extensions>(autoUpdate?: boolean): ActiveFromExtensions<Extension>;
Parameters:
Parameter | Type | Description |
---|---|---|
autoUpdate | boolean | (Optional) Set to false to prevent automatic re-rendering on every state update. |
Returns:
ActiveFromExtensions<Extension>
function useAttrs()
A core hook which provides the attributes for the nodes and marks in the editor.
import { useAttrs } from '@remirror/react';
const EditorButton = () => {
const attrs = useAttrs();
const { link } = attrs;
return <a href={link.href}>{link().href}</a>;
}
Signature:
export declare function useAttrs<Extension extends AnyExtension = Remirror.Extensions>(update?: boolean): AttrsFromExtensions<Extension>;
Parameters:
Parameter | Type | Description |
---|---|---|
update | boolean | (Optional) |
Returns:
AttrsFromExtensions<Extension>
function useChainedCommands()
A core hook which provides the chainable commands for usage in your editor.
import { useChainedCommands } from '@remirror/react';
const EditorButton = () => {
const chain = useChainedCommands();
return (
<>
<button onClick={() => chain.toggleBold().toggleItalic().run()}>
Chain me!
</button>
</>
);
}
`
Signature:
export declare function useChainedCommands<Extension extends AnyExtension = Remirror.Extensions | AnyExtension>(): ChainedFromExtensions<Extension>;
Returns:
ChainedFromExtensions<Extension>
function useCommands()
A core hook which provides the commands for usage in your editor.
import { useCommands } from '@remirror/react';
const EditorButton = () => {
const commands = useCommands();
return (
<>
<button onClick={() => commands.toggleBold()}>
Click me!
</button>
</>
);
}
`
Signature:
export declare function useCommands<Extension extends AnyExtension = Remirror.Extensions>(): CommandsFromExtensions<Extension>;
Returns:
CommandsFromExtensions<Extension>
function useCurrentSelection()
A core hook which returns the current selection.
Signature:
export declare function useCurrentSelection(): Selection;
Returns:
Selection
function useDocChanged()
A hook for subscribing to transactions that change the document
Signature:
export declare function useDocChanged(handler: NonNullable<GetHandler<DocChangedOptions>['docChanged']>): void;
Parameters:
Parameter | Type | Description |
---|---|---|
handler | NonNullable<GetHandler<DocChangedOptions>['docChanged']> |
Returns:
void
function useEditorDomRef()
A hook which provides a react ref wrapper for the view.dom
.
Signature:
export declare function useEditorDomRef(): MutableRefObject<HTMLElement>;
Returns:
MutableRefObject<HTMLElement>
function useEditorEvent()
A hook for subscribing to events from the editor.
Signature:
export declare function useEditorEvent<Key extends StringKey<GetHandler<EventsOptions>>>(event: Key, handler: NonNullable<GetHandler<EventsOptions>[Key]>): void;
Parameters:
Parameter | Type | Description |
---|---|---|
event | Key | |
handler | NonNullable<GetHandler<EventsOptions>[Key]> |
Returns:
void
function useEditorFocus()
Keep track of the editor focus.
Returns a focused value which is updated whenever the editor focus changes.
When true
, the editor is focused when false
the editor is not focused.
Signature:
export declare function useEditorFocus(props?: UseEditorFocusProps): [isFocused: boolean, focus: (position?: FocusType) => void];
Parameters:
Parameter | Type | Description |
---|---|---|
props | UseEditorFocusProps | (Optional) |
Returns:
[isFocused: boolean, focus: (position?: FocusType) => void]
function useEditorState()
A core hook which provides the latest editor state every time that it updates.
Signature:
export declare function useEditorState(): EditorState;
Returns:
EditorState
function useEditorView()
A hook which provides access to the editor view.
Signature:
export declare function useEditorView(): EditorView;
Returns:
EditorView
function useEmoji()
This hook provides the state for setting up an emoji state change handler. It applies the keybindings and the required change handlers.
Signature:
export declare function useEmoji(props?: UseEmojiProps): UseEmojiReturn;
Parameters:
Parameter | Type | Description |
---|---|---|
props | UseEmojiProps | (Optional) |
Returns:
function useExtension()
Dynamically update the properties of your extension via hooks. Provide the Extension constructor and the properties you want to update.
Signature:
export declare function useExtension<Type extends AnyExtensionConstructor>(Constructor: Type): InstanceType<Type>;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type |
Returns:
InstanceType<Type>
Remarks:
Please note that every time the properties change your extension is updated. You will want to memoize or prevent needless updates somehow to the properties passed in.
This is only available within the context of the Remirror
it will throw an error otherwise.
It can be used with three distinct call signatures.
**Get the extension instance**
import { useExtension } from '@remirror/react';
import { BoldExtension } from 'remirror/extensions';
const Editor = () => {
const boldExtension = useExtension(BoldExtension);
boldExtension.setOptions({ weight: '800' });
return null;
}
**Update the extension properties**
import { useExtension } from '@remirror/react';
import { PlaceholderExtension } from 'remirror/extensions';
const EditorPlaceholder = ({ placeholder = 'Your magnum opus' }) => {
useExtension(PlaceholderExtension, { placeholder }); // Updates the placeholder.
return null;
}
**Add event handlers to your extension**
import { useCallback } from 'react';
import { HistoryExtension, HistoryOptions } from 'remirror/extensions';
import { useExtension } from '@remirror/react';
const Editor = ({ placeholder = 'Your magnum opus' }) => {
useExtension(
HistoryExtension,
useCallback(
({ addHandler }) => {
return addHandler('onRedo', () => log('a redo just happened'));
},
[],
),
[event, handler],
);
return null;
};
These hooks can serve as the building blocks when customizing your editor experience with remirror
.
function useExtension()
Signature:
export declare function useExtension<Type extends AnyExtensionConstructor>(Constructor: Type, memoizedCallback: UseExtensionCallback<Type>, dependencies?: DependencyList): void;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type | |
memoizedCallback | UseExtensionCallback<Type> | |
dependencies | DependencyList | (Optional) |
Returns:
void
function useExtension()
Signature:
export declare function useExtension<Type extends AnyExtensionConstructor>(Constructor: Type, options: DynamicOptionsOfConstructor<Type>): void;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type | |
options | DynamicOptionsOfConstructor<Type> |
Returns:
void
function useExtensionEvent()
Dynamically add event handlers to your extension.
Signature:
export declare function useExtensionEvent<Type extends AnyExtensionConstructor, Key extends keyof GetHandler<OptionsOfConstructor<Type>>>(extension: Type, event: Key, memoizedHandler: Handler<GetHandler<OptionsOfConstructor<Type>>[Key]>): void;
Parameters:
Parameter | Type | Description |
---|---|---|
extension | Type | |
event | Key | |
memoizedHandler | Handler<GetHandler<OptionsOfConstructor<Type>>[Key]> |
Returns:
void
Remarks:
Please note that every time the properties change your extension is updated. You will want to memoize or prevent needless updates somehow to the properties passed in.
This is only available within the context of the Remirror
it will throw an error otherwise.
import { useCallback } from 'react';
import { HistoryExtension } from 'remirror/extensions';
import { useExtensionEvent } from '@remirror/react';
const RedoLogger = () => {
useExtensionEvent(
HistoryExtension,
'onRedo',
useCallback(() => log('a redo just happened'), []),
);
return null;
};
These hooks can serve as the building blocks when customizing your editor experience with remirror
.
function useHasExtension()
Assert if an extension is present in the manager by providing its constructor
Signature:
export declare function useHasExtension<Type extends AnyExtensionConstructor>(Constructor: Type): boolean;
Parameters:
Parameter | Type | Description |
---|---|---|
Constructor | Type |
Returns:
boolean
function useHelpers()
A core hook which provides the helpers for usage in your editor.
import { useHelpers } from '@remirror/react';
const EditorButton = () => {
const helpers = useHelpers();
return (
<>
<button onClick={() => helpers.toggleBold()}>
Click me!
</button>
<button onClick={() => helpers.chain.toggleBold().toggleItalic().run()}>
Chain me!
</button>
</>
);
}
`
Passing true
as the first argument will ensure that the component this hook is placed inside will rerender on every update.
Signature:
export declare function useHelpers<Extension extends AnyExtension = Remirror.Extensions>(update?: boolean): HelpersFromExtensions<Extension>;
Parameters:
Parameter | Type | Description |
---|---|---|
update | boolean | (Optional) |
Returns:
HelpersFromExtensions<Extension>
function useHistory()
A hook which is called every time an undo or redo event is triggered from within the ProseMirror history extension.
Signature:
export declare function useHistory<Key extends StringKey<GetHandler<HistoryOptions>>>(event: Key, handler: NonNullable<GetHandler<HistoryOptions>[Key]>): void;
Parameters:
Parameter | Type | Description |
---|---|---|
event | Key | |
handler | NonNullable<GetHandler<HistoryOptions>[Key]> |
Returns:
void
Remarks:
handler
should be a memoized function.
function useHover()
A hook which listens to hover events.
Provide a memoized handler which is provided with the nodes which were directly touched by the hover: true
or hover: false
event.
Signature:
export declare function useHover(handler: HoverEventHandler): void;
Parameters:
Parameter | Type | Description |
---|---|---|
handler | HoverEventHandler |
Returns:
void
function useKeymap()
Add custom keyboard bindings to the editor instance.
Signature:
export declare function useKeymap(name: LiteralUnion<KeyBindingNames, string>, handler: KeyBindingCommandFunction, priority?: ExtensionPriority): void;
Parameters:
Parameter | Type | Description |
---|---|---|
name | LiteralUnion<KeyBindingNames, string> | |
handler | KeyBindingCommandFunction | |
priority | ExtensionPriority | (Optional) |
Returns:
void
Remarks:
import { useCallback } from 'react';
import { BoldExtension } from 'remirror/extensions';
import { Remirror, useHelpers, useKeymap, useRemirror, useRemirrorContext } from '@remirror/react';
const hooks = [
() => {
const active = useActive();
const { insertText } = useCommands();
const boldActive = active.bold();
const handler = useCallback(() => {
if (!boldActive) {
return false;
}
// Prevent the keypress from using the default action.
return insertText.original('\n\nWoah there!')(props);
}, [boldActive, insertText]);
useKeymap('Shift-Enter', handler); // Add the handler to the keypress pattern.
},
];
const Editor = () => {
const { manager } = useRemirror({ extensions: () => [new BoldExtension()] });
return <Remirror manager={manager} hooks={hooks} />;
};
function useKeymaps()
Add custom keyboard bindings to the editor instance.
Signature:
export declare function useKeymaps(bindings: KeyBindings, priority?: ExtensionPriority): void;
Parameters:
Parameter | Type | Description |
---|---|---|
bindings | KeyBindings | |
priority | ExtensionPriority | (Optional) |
Returns:
void
Remarks:
import { Remirror, useRemirror, useRemirrorContext, useKeymaps } from '@remirror/react';
const Editor = () => {
const { manager } = useRemirror({ extensions: () => [] });
return (
<Remirror manager={manager}>
<EditorBindings />
</Remirror>
);
};
const EditorBindings = () => {
const { getRootProps } = useRemirrorContext({ autoUpdate: true });
useKeymaps({
Enter: () => {
// Prevent the tne enter key from being pressed.
return true;
}
});
return <div {...getRootProps()} />;
};
function useMarkRange()
A hook which returns the selected range of the mark of the provided type.
Signature:
export declare function useMarkRange(type: string): GetMarkRange | undefined;
Parameters:
Parameter | Type | Description |
---|---|---|
type | string |
Returns:
GetMarkRange | undefined
function useMention()
A hook that provides the state for social mentions that responds to keybindings and key-presses from the user.
This is used by the SocialMentionDropdown
component and can be used by you for a customized component.
The only prop required is the list of data in order to support keybinding and properly selecting the index for you. The data must have a label
and id
key. The label is the text that should be shown inside the mention and the id
is whatever unique identifier that can be used.
You can also add other supported attributes which will be added to the mention node, like href
and whatever you decide.
Signature:
export declare function useMention<Data extends MentionExtensionAttributes = MentionExtensionAttributes>(props: UseMentionProps<Data>): UseMentionReturn<Data>;
Parameters:
Parameter | Type | Description |
---|---|---|
props | UseMentionProps<Data> |
Returns:
UseMentionReturn<Data>
function useMentionAtom()
A hook that provides the state for social mention atoms that responds to keybindings and key-presses from the user.
The difference between this and the useMention
is that useMention
creates editable mentions that can be changed over an over again. This creates atom mention which are inserted into the editor as non editable nodes. Backspacing into this node will delete the whole mention.
In order to properly support keybindings you will need to provide a list of data that is to be shown to the user. This allows for the user to press the arrow up and arrow down key.
You can also add other supported attributes which will be added to the mention node, like href
and whatever you decide upon.
Signature:
export declare function useMentionAtom<Data extends MentionAtomNodeAttributes = MentionAtomNodeAttributes>(props: UseMentionAtomProps<Data>): UseMentionAtomReturn<Data>;
Parameters:
Parameter | Type | Description |
---|---|---|
props | UseMentionAtomProps<Data> | the props that can be passed through to the mention atom. |
Returns:
UseMentionAtomReturn<Data>
function useMenuNavigation()
This hook provides the primitives for rendering a dropdown menu within
Signature:
export declare function useMenuNavigation<Item = any>(props: MenuNavigationProps): UseMenuNavigationReturn<Item>;
Parameters:
Parameter | Type | Description |
---|---|---|
props | MenuNavigationProps |
Returns:
UseMenuNavigationReturn<Item>
function useMultiPositioner()
A positioner for your editor. This returns an array of active positions and is useful for tracking the positions of multiple items in the editor.
import { Positioner } from 'remirror/extensions';
import { useMultiPositioner } from '@remirror/react';
const positioner = Positioner.create({
...config, // custom config
})
const MenuComponent: FC = () => {
const positions = usePositioner(positioner, []);
return (
<>
{
positions.map(({ ref, bottom, left, key }) => (
<div style={{ bottom, left }} ref={ref} key={key}>
<MenuIcon {...options} />
</div>
)
}
</>
)
};
Signature:
export declare function useMultiPositioner<Data = any>(positioner: PositionerParam, deps: unknown[]): Array<UseMultiPositionerReturn<Data>>;
Parameters:
Parameter | Type | Description |
---|---|---|
positioner | PositionerParam | the positioner which will be used |
deps | unknown[] | an array of dependencies which will cause the hook to rerender with an updated positioner. This is the only way to update the positioner. |
Returns:
Array<UseMultiPositionerReturn<Data>>
function usePortalContainer()
A hook which provides access to the portal container for rendering react component directly within the editor dom.
Signature:
export declare function usePortalContainer(): PortalContainer;
Returns:
function usePortals()
A hook which subscribes to updates from the portal container.
This is should used in the ReactEditor
component and the value should be passed through to the RemirrorPortals
component.
Signature:
export declare function usePortals(portalContainer: PortalContainer): Array<[HTMLElement, MountedPortal]>;
Parameters:
Parameter | Type | Description |
---|---|---|
portalContainer | PortalContainer |
Returns:
Array<[HTMLElement, MountedPortal]>
function usePositioner()
A hook for creating a positioner with the PositionerExtension
. When an active position exists for the provided positioner it will return an object with the ref
, top
, left
, bottom
, right
properties.
Signature:
export declare function usePositioner<Data = any>(positioner: StringPositioner, isActive?: boolean): UsePositionerReturn<Data>;
Parameters:
Parameter | Type | Description |
---|---|---|
positioner | StringPositioner | the positioner to use which can be a string or a Positioner instance. |
isActive | boolean | (Optional) Set this to a boolean to override whether the positioner is active. In a recent update, the positioner is now automatically memoized for you. |
Returns:
UsePositionerReturn<Data>
Remarks:
Must apply the ref to the component when called.
import { usePositioner } from '@remirror/react';
const MenuComponent: FC = () => {
const positions = usePositioner('bubble');
return (
<div style={{ bottom, left }} ref={ref}>
<MenuIcon {...options} />
</div>
);
}
const Wrapper = () => (
<Remirror extensions={[]}>
<MenuComponent />
</Remirror>
)
function usePositioner()
Signature:
export declare function usePositioner<Data = any>(positioner: Positioner | CallbackPositioner, deps: unknown[]): UsePositionerReturn<Data>;
Parameters:
Parameter | Type | Description |
---|---|---|
positioner | Positioner | CallbackPositioner | |
deps | unknown[] |
Returns:
UsePositionerReturn<Data>
function useRemirror()
A hook which replaces the [[Remirror
]] and gives you total control of the editor you can create.
This is very experimental and if successful could replace the current patterns being used.
Signature:
export declare function useRemirror<Extension extends AnyExtension>(props?: UseRemirrorProps<Extension>): UseRemirrorReturn<ReactExtensions<Extension>>;
Parameters:
Parameter | Type | Description |
---|---|---|
props | UseRemirrorProps<Extension> | (Optional) |
Returns:
UseRemirrorReturn<ReactExtensions<Extension>>
function useRemirrorContext()
This provides access to the remirror context when using the Remirror
.
The first argument which is optional can also be a change handler which is called every time the state updates.
Signature:
export declare function useRemirrorContext<Extension extends AnyExtension = Remirror.Extensions>(handler?: RemirrorEventListener<Extension> | {
autoUpdate: boolean;
}): ReactFrameworkOutput<Extension>;
Parameters:
Parameter | Type | Description |
---|---|---|
handler | RemirrorEventListener<Extension> | { autoUpdate: boolean; } | (Optional) |
Returns:
ReactFrameworkOutput<Extension>
Remarks:
The following example applies the root props to the div.
import { Remirror, useRemirrorContext } from 'remirror';
const HooksComponent = (props) => {
// This pulls the remirror props out from the context.
const { getRootProps } = useRemirrorContext();
return <div {...getRootProps()} />;
}
class App extends Component {
render() {
return (
<Remirror>
<HooksComponent />
</Remirror>
);
}
}
For performance reasons useRemirror
does not automatically trigger a rerender on every editor update. This allows for you use it in component which don't need to track the latest editor state, without suffering a performance penalty.
However if you do want to track whether a command is enabled at the current selection or whether a certain formatting mark (bold) is active at the current selection you can pass through an optional parameter.
const EditorButton = () => {
const { active, commands } = useRemirrorContext({ autoUpdate: true });
return (
<button style={{ fontWeight: active.bold() ? 'bold' : undefined }}>
B
<button>
);
}
The above example keep track of whether the current selection is bold on every update to the editor. Updates can be document changes and selection changes.
For more control you can also use a handler function as the first parameter to selectively rerender as you see fit.
const EditorButton = () => {
const { active, commands } = useRemirrorContext(() => {
if (active.bold() === boldActive) {
return;
}
setBoldActive(active.bold());
});
const [boldActive, setBoldActive] = useState(active.bold());
return (
<button style={{ fontWeight: boldActive ? 'bold' : undefined }}>
B
<button>
)
}
In this case the component only re-renders when the bold formatting changes.
function useSelectedText()
A core hook which provides the the currently selected text.
import { useSelectedText } from '@remirror/react';
const RandomSpan = () => {
const text = useSelectedText();
return text && <span>{text}</span>;
}
`
Return the value of the currently selected text. When the text selection is empty
Signature:
export declare function useSelectedText(): string | undefined;
Returns:
string | undefined
function useSuggest()
This hook allows you to dynamically create a suggester which can respond to user input of activation characters or regex patterns.
By adding a suggester it is possible to keep track of what the user has typed and receive meaningful information in return.
This includes
- The range of the matching text - The matching text value - The query value, which excludes the matching character (or character regex). - The matching capture groups [FULL_MATCH, MATCHING_CHARACTER, CUSTOM_GROUPS]
The return value has two keys, exit
and change
which can both be undefined
. The reason for including both the exit
and change
return values is that it's possible for both to occur at the the same time during a **jump** from one [[Suggester
]] _match_ to another suggester match.
The cursor has exited and entered (changed) at the same time.
Signature:
export declare function useSuggest(props: UseSuggesterProps): UseSuggestReturn;
Parameters:
Parameter | Type | Description |
---|---|---|
props | UseSuggesterProps |
Returns:
function useTheme()
Get the theme from the context and convert it to a style object which can be attached to any element.
The theme provided is deeply merged with the parent theme.
Signature:
export declare function useTheme(props?: UseThemeProps): {
theme: RemirrorThemeType;
style: CSSProperties;
className?: string;
};
Parameters:
Parameter | Type | Description |
---|---|---|
props | UseThemeProps | (Optional) |
Returns:
{ theme: RemirrorThemeType; style: CSSProperties; className?: string; }
function useUpdateReason()
Provide the reason for the latest state update with boolean flags.
Signature:
export declare function useUpdateReason(): UpdateReason;
Returns:
variable BaselineButtonGroup
Signature:
BaselineButtonGroup: FC<BaselineButtonGroupProps>
variable BasicFormattingButtonGroup
Signature:
BasicFormattingButtonGroup: FC<BasicFormattingButtonGroupProps>
variable Callout
Signature:
Callout: FC<{
node: RemirrorJSON;
markMap: MarkMap;
children?: never;
}>
variable CalloutTypeButtonGroup
Signature:
CalloutTypeButtonGroup: FC<CalloutTypeButtonGroupProps>
variable CenterAlignButton
Signature:
CenterAlignButton: FC<CenterAlignButtonProps>
variable CodeBlock
Signature:
CodeBlock: FC<{
node: RemirrorJSON;
markMap: MarkMap;
}>
variable CommandButton
Signature:
CommandButton: FC<CommandButtonProps>
variable CommandButtonGroup
Signature:
CommandButtonGroup: FC<CommandButtonGroupProps>
variable CommandMenuItem
Signature:
CommandMenuItem: FC<CommandMenuItemProps>
variable CopyButton
Signature:
CopyButton: FC<CopyButtonProps>
variable createIFrameHandler
Signature:
createIFrameHandler: (overwriteAttrs?: Record<string, Literal>) => IFrameHandler
variable createLinkHandler
Signature:
createLinkHandler: (overwriteAttrs?: Record<string, Literal>) => LinkHandler
variable CreateTableButton
Signature:
CreateTableButton: FC<CreateTableButtonProps>
variable CutButton
Signature:
CutButton: FC<CutButtonProps>
variable DataTransferButtonGroup
Signature:
DataTransferButtonGroup: FC<DataTransferButtonGroupProps>
variable DecreaseFontSizeButton
Signature:
DecreaseFontSizeButton: FC<DecreaseFontSizeButtonProps>
variable DecreaseIndentButton
Signature:
DecreaseIndentButton: FC<DecreaseIndentButtonProps>
variable Doc
Signature:
Doc: FC<SubRenderTreeProps>
variable DropdownButton
Signature:
DropdownButton: FC<DropdownButtonProps>
variable EditorComponent
The default editor placeholder where the prosemirror editor will be rendered.
Signature:
EditorComponent: () => JSX.Element
variable EmojiPopupComponent
This component renders the emoji suggestion dropdown for the user.
Signature:
EmojiPopupComponent: FC
variable FindReplaceComponent
Signature:
FindReplaceComponent: FC<FindReplaceComponentProps>
variable FloatingToolbar
Signature:
FloatingToolbar: FC<FloatingToolbarProps>
variable FloatingWrapper
Signature:
FloatingWrapper: FC<PropsWithChildren<FloatingWrapperProps>>
variable FormattingButtonGroup
Signature:
FormattingButtonGroup: FC<FormattingButtonGroupProps>
variable Heading
Signature:
Heading: FC<{
node: RemirrorJSON;
markMap: MarkMap;
}>
variable HeadingLevelButtonGroup
Signature:
HeadingLevelButtonGroup: FC<HeadingLevelButtonGroupProps>
variable HistoryButtonGroup
Signature:
HistoryButtonGroup: FC<HistoryButtonGroupProps>
variable I18nProvider
Signature:
I18nProvider: import("react").ComponentType<import("react").PropsWithChildren<I18nProps>>
variable Icon
Dynamic icons for the remirror codebase..
Signature:
Icon: (props: IconProps) => JSX.Element
variable IconBase
The base icon as an svg with the icon context available
Signature:
IconBase: (props: IconBaseProps) => JSX.Element
variable IncreaseFontSizeButton
Signature:
IncreaseFontSizeButton: FC<IncreaseFontSizeButtonProps>
variable IncreaseIndentButton
Signature:
IncreaseIndentButton: FC<IncreaseIndentButtonProps>
variable IndentationButtonGroup
Signature:
IndentationButtonGroup: FC<IndentationButtonGroupProps>
variable InsertHorizontalRuleButton
Signature:
InsertHorizontalRuleButton: FC<InsertHorizontalRuleButtonProps>
variable JustifyAlignButton
Signature:
JustifyAlignButton: FC<JustifyAlignButtonProps>
variable LeftAlignButton
Signature:
LeftAlignButton: FC<LeftAlignButtonProps>
variable ListButtonGroup
Signature:
ListButtonGroup: FC<ListButtonGroupProps>
variable MarkdownToolbar
Signature:
MarkdownToolbar: FC
variable OnChangeHTML
Signature:
OnChangeHTML: ({ onChange }: OnChangeHTMLProps) => null
variable OnChangeJSON
Signature:
OnChangeJSON: ({ onChange }: OnChangeJSONProps) => null
variable PasteButton
Signature:
PasteButton: FC<PasteButtonProps>
variable PositionerPortal
Render a component into the editors positioner widget using createPortal
from react-dom
.
Signature:
PositionerPortal: FC<PositionerComponentProps>
variable RedoButton
Signature:
RedoButton: FC<RedoButtonProps>
variable RemirrorContext
The ReactContext
for the Remirror editor.
Signature:
RemirrorContext: import("react").Context<ReactFrameworkOutput<any> | null>
variable RemirrorPortals
The component that places all the portals into the DOM.
Portals can currently be created by a [[ReactNodeView
]] and coming soon both the [[ReactMarkView
]] and [[ReactDecoration
]].
Signature:
RemirrorPortals: (props: RemirrorPortalsProps) => JSX.Element
variable RemirrorRenderer
A recursively rendered tree.
Signature:
RemirrorRenderer: FC<RenderTreeProps>
variable RightAlignButton
Signature:
RightAlignButton: FC<RightAlignButtonProps>
variable TableCellMenu
Signature:
TableCellMenu: React.FC<TableCellMenuProps>
variable TableComponents
Signature:
TableComponents: React.FC<TableComponentsProps>
variable tableControllerPluginKey
Signature:
key: PluginKey<ControllerState>
variable TableDeleteButton
Signature:
TableDeleteButton: React.FC<TableDeleteButtonProps>
variable TableDeleteInnerButton
Signature:
TableDeleteInnerButton: React.FC<TableDeleteInnerButtonProps>
variable TableDeleteRowColumnButton
Signature:
TableDeleteRowColumnButton: React.FC<TableDeleteRowColumnButtonProps>
variable TableDeleteRowColumnInnerButton
Signature:
TableDeleteRowColumnInnerButton: React.FC<TableDeleteRowColumnInnerButtonProps>
variable TextAlignmentButtonGroup
Signature:
TextAlignmentButtonGroup: FC<TextAlignmentButtonGroupProps>
variable TextHandler
Signature:
TextHandler: FC<TextHandlerProps>
variable ThemeProvider
This the ThemeProvider
. Wrap your editor with it to customise the theming of content within your editor.
Please be aware that this wraps your component in an extra dom layer.
Signature:
ThemeProvider: (props: ThemeProviderProps) => ReactElement<ThemeProviderProps>
variable ToggleBlockquoteButton
Signature:
ToggleBlockquoteButton: FC<ToggleBlockquoteButtonProps>
variable ToggleBoldButton
Signature:
ToggleBoldButton: FC<ToggleBoldButtonProps>
variable ToggleBulletListButton
Signature:
ToggleBulletListButton: FC<ToggleBulletListButtonProps>
variable ToggleCalloutButton
Signature:
ToggleCalloutButton: FC<ToggleCalloutButtonProps>
variable ToggleCalloutMenuItem
Signature:
ToggleCalloutMenuItem: FC<ToggleCalloutMenuItemProps>
variable ToggleCodeBlockButton
Signature:
ToggleCodeBlockButton: FC<ToggleCodeBlockButtonProps>
variable ToggleCodeButton
Signature:
ToggleCodeButton: FC<ToggleCodeButtonProps>
variable ToggleColumnsButton
Signature:
ToggleColumnsButton: FC<ToggleColumnsButtonProps>
variable ToggleHeadingButton
Signature:
ToggleHeadingButton: FC<ToggleHeadingButtonProps>
variable ToggleHeadingMenuItem
Signature:
ToggleHeadingMenuItem: FC<ToggleHeadingMenuItemProps>
variable ToggleItalicButton
Signature:
ToggleItalicButton: FC<ToggleItalicButtonProps>
variable ToggleOrderedListButton
Signature:
ToggleOrderedListButton: FC<ToggleOrderedListButtonProps>
variable ToggleStrikeButton
Signature:
ToggleStrikeButton: FC<ToggleStrikeButtonProps>
variable ToggleSubscriptButton
Signature:
ToggleSubscriptButton: FC<ToggleSubscriptButtonProps>
variable ToggleSuperscriptButton
Signature:
ToggleSuperscriptButton: FC<ToggleSuperscriptButtonProps>
variable ToggleTaskListButton
Signature:
ToggleTaskListButton: FC<ToggleTaskListButtonProps>
variable ToggleUnderlineButton
Signature:
ToggleUnderlineButton: FC<ToggleUnderlineButtonProps>
variable ToggleWhitespaceButton
Signature:
ToggleWhitespaceButton: FC<ToggleWhitespaceButtonProps>
variable Toolbar
Signature:
Toolbar: FC<StackProps>
variable UndoButton
Signature:
UndoButton: FC<UndoButtonProps>
variable useI18n
Signature:
useI18n: _<UseI18nReturn>
variable useSuggester
Warning: This API is now obsolete.
- use
useSuggest
Signature:
useSuggester: typeof useSuggest
variable VerticalDivider
Signature:
VerticalDivider: FC<VerticalDividerProps>
variable WysiwygToolbar
Signature:
WysiwygToolbar: FC
interface BaselineButtonGroupProps
Signature:
export interface BaselineButtonGroupProps
property children
Signature:
children?: ReactNode | ReactNode[];
interface BasicFormattingButtonGroupProps
Signature:
export interface BasicFormattingButtonGroupProps
property children
Signature:
children?: ReactNode | ReactNode[];
interface CalloutTypeButtonGroupProps
Signature:
export interface CalloutTypeButtonGroupProps
property children
Signature:
children?: ReactNode | ReactNode[];
interface CenterAlignButtonProps
Signature:
export interface CenterAlignButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface CommandButtonGroupProps
Signature:
export interface CommandButtonGroupProps extends Omit<BoxProps, 'children'>
Extends: Omit<BoxProps, 'children'>
(Some inherited members may not be shown because they are not represented in the documentation.)
property children
Signature:
children: ReactNode | ReactNode[];
interface CommandButtonProps
Signature:
export interface CommandButtonProps extends Omit<ToggleButtonProps, 'value' | 'aria-label'>, Omit<UseCommandOptionValuesParams, 'active' | 'attrs'>
Extends: Omit<ToggleButtonProps, 'value' | 'aria-label'>, Omit<UseCommandOptionValuesParams, 'active' | 'attrs'>
(Some inherited members may not be shown because they are not represented in the documentation.)
property "aria-label"
Signature:
'aria-label'?: string;
property active
Signature:
active?: UseCommandOptionValuesParams['active'];
property attrs
Signature:
attrs?: UseCommandOptionValuesParams['attrs'];
property commandName
Signature:
commandName: string;
property displayShortcut
Signature:
displayShortcut?: boolean;
property icon
Signature:
icon?: CoreIcon | JSX.Element;
property label
Signature:
label?: NonNullable<ReactNode>;
property onSelect
Signature:
onSelect: () => void;
interface CommandMenuItemProps
Signature:
export interface CommandMenuItemProps extends MenuItemProps, Omit<UseCommandOptionValuesParams, 'active' | 'attrs'>
Extends: MenuItemProps, Omit<UseCommandOptionValuesParams, 'active' | 'attrs'>
(Some inherited members may not be shown because they are not represented in the documentation.)
property active
Signature:
active?: UseCommandOptionValuesParams['active'];
property attrs
Signature:
attrs?: UseCommandOptionValuesParams['attrs'];
property commandName
Signature:
commandName: string;
property description
Signature:
description?: NonNullable<ReactNode>;
property displayDescription
Signature:
displayDescription?: boolean;
property displayShortcut
Signature:
displayShortcut?: boolean;
property icon
Signature:
icon?: CoreIcon | JSX.Element | null;
property label
Signature:
label?: NonNullable<ReactNode>;
property onSelect
Signature:
onSelect: () => void;
interface CopyButtonProps
Signature:
export interface CopyButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface CreateNodeViewProps
Signature:
export interface CreateNodeViewProps
property options
The options passed through to the react extension component.
Signature:
options: GetFixed<ReactComponentOptions>;
property portalContainer
A container and event dispatcher which keeps track of all dom elements that hold node views
Signature:
portalContainer: PortalContainer;
property ReactComponent
The react component that will be added to the DOM.
Signature:
ReactComponent: ComponentType<NodeViewComponentProps>;
interface CreateReactManagerOptions
The options for the exported createReactManager
method.
Signature:
export interface CreateReactManagerOptions extends CreateCoreManagerOptions
Extends: CreateCoreManagerOptions
(Some inherited members may not be shown because they are not represented in the documentation.)
property core
The core preset options.
Signature:
core?: GetStaticAndDynamic<CorePresetOptions>;
property react
Options for the react preset.
Signature:
react?: GetStaticAndDynamic<ReactExtensionOptions>;
interface CreateTableButtonProps
Signature:
export interface CreateTableButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface CutButtonProps
Signature:
export interface CutButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface DataTransferButtonGroupProps
Signature:
export interface DataTransferButtonGroupProps
property children
Signature:
children?: ReactNode | ReactNode[];
interface DecreaseFontSizeButtonProps
Signature:
export interface DecreaseFontSizeButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface DecreaseIndentButtonProps
Signature:
export interface DecreaseIndentButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface DropdownButtonProps
Signature:
export interface DropdownButtonProps extends Omit<MenuProps, 'open' | 'anchorEl' | 'id'>
Extends: Omit<MenuProps, 'open' | 'anchorEl' | 'id'>
(Some inherited members may not be shown because they are not represented in the documentation.)
property "aria-label"
Signature:
'aria-label': string;
property icon
Signature:
icon?: CoreIcon | JSX.Element;
property label
Signature:
label?: NonNullable<ReactNode>;
interface EmojiState
Signature:
export interface EmojiState extends Pick<EmojiSuggestHandlerProps, 'range' | 'query' | 'exit'>
Extends: Pick<EmojiSuggestHandlerProps, 'range' | 'query' | 'exit'>
(Some inherited members may not be shown because they are not represented in the documentation.)
property apply
The command to run to replace the query with the request emoji.
Signature:
apply: EmojiSuggestHandlerCommand;
property list
The list of emoji generated by the query.
Signature:
list: FlatEmojiWithUrl[];
interface FindReplaceComponentProps
Signature:
export interface FindReplaceComponentProps
property onDismiss
Signature:
onDismiss?: () => void;
interface FlatEmojiWithUrl
Signature:
export interface FlatEmojiWithUrl extends FlatEmoji
Extends: FlatEmoji
(Some inherited members may not be shown because they are not represented in the documentation.)
property url
The svg url for CDN access.
Signature:
url: string;
interface FloatingToolbarProps
Signature:
export interface FloatingToolbarProps extends Omit<PopperProps, 'open' | 'anchorEl'>
Extends: Omit<PopperProps, 'open' | 'anchorEl'>
(Some inherited members may not be shown because they are not represented in the documentation.)
property positioner
Signature:
positioner?: PositionerParam;
interface FormattingButtonGroupProps
Signature:
export interface FormattingButtonGroupProps
property children
Signature:
children?: ReactNode | ReactNode[];
interface GetRootPropsConfig
The config options for the getRootProps
method.
Signature:
export interface GetRootPropsConfig<RefKey extends string = 'ref'> extends RefProps<RefKey>, Shape
Extends: RefProps<RefKey>, Shape
property ref
Allows for composing the refs together. If you have a ref you would also like to add to the main element then just add it here.
Signature:
ref?: Ref<HTMLElement>;
property refKey
A custom ref key which allows a reference to be obtained from non standard components.
Signature:
refKey?: RefKey;
Signature:
[key: string]: any;
interface HeadingLevelButtonGroupProps
Signature:
export interface HeadingLevelButtonGroupProps
property children
Signature:
children?: ReactNode | ReactNode[];
property showAll
Signature:
showAll?: boolean;
interface HistoryButtonGroupProps
Signature:
export interface HistoryButtonGroupProps
property children
Signature:
children?: ReactNode | ReactNode[];
interface I18nProps
Signature:
export interface I18nProps
property i18n
Provide your own i18n with all the locales you need for your app.
import { i18n } from '@remirror/i18n';
import esLocale from '@remirror/i18n/es';
import { SocialEditor } from '@remirror/react-social-editor';
import { es } from 'make-plural/plurals';
i18n.loadLocaleData('es', { plurals: es });
i18n.load({
es: esLocale.messages,
});
const Editor = () => {
<SocialEditor i18n={i18n} />
}
Signature:
i18n?: I18n;
property locale
The current locale for this context.
Signature:
locale?: string;
property supportedLocales
Supported locales. Defaults to including the locale.
Signature:
supportedLocales?: string[];
interface IconBaseProps
Signature:
export interface IconBaseProps extends SVGAttributes<SVGElement>
Extends: SVGAttributes<SVGElement>
(Some inherited members may not be shown because they are not represented in the documentation.)
property children
Signature:
children?: ReactNode;
property color
Signature:
color?: string;
property size
Signature:
size?: string | number;
property title
Signature:
title?: string;
interface IconProps
Signature:
export interface IconProps extends IconBaseProps
Extends: IconBaseProps
(Some inherited members may not be shown because they are not represented in the documentation.)
property children
Signature:
children?: ReactNode;
property color
Signature:
color?: string;
property name
The name of the core icon to use.
Signature:
name: Icons.CoreIcon;
property size
Signature:
size?: string | number;
property title
Signature:
title?: string;
interface IncreaseFontSizeButtonProps
Signature:
export interface IncreaseFontSizeButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface IncreaseIndentButtonProps
Signature:
export interface IncreaseIndentButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface IndentationButtonGroupProps
Signature:
export interface IndentationButtonGroupProps
property children
Signature:
children?: ReactNode | ReactNode[];
interface InsertHorizontalRuleButtonProps
Signature:
export interface InsertHorizontalRuleButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface JustifyAlignButtonProps
Signature:
export interface JustifyAlignButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface LeftAlignButtonProps
Signature:
export interface LeftAlignButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface ListButtonGroupProps
Signature:
export interface ListButtonGroupProps
property children
Signature:
children?: ReactNode | ReactNode[];
interface MentionAtomState
Signature:
export interface MentionAtomState<Data extends MentionAtomNodeAttributes = MentionAtomNodeAttributes> extends Pick<SuggestChangeHandlerProps, 'name' | 'query' | 'text' | 'range'>
Extends: Pick<SuggestChangeHandlerProps, 'name' | 'query' | 'text' | 'range'>
(Some inherited members may not be shown because they are not represented in the documentation.)
property command
A command that will update the current matching region with the provided attributes. To see what can be accomplished please inspect the type of the attrs which should be passed through.
Signature:
command: (attrs: Data) => void;
property reason
The reason for the change.
Signature:
reason: ChangeReason;
interface MentionState
Signature:
export interface MentionState<Data extends MentionExtensionAttributes = MentionExtensionAttributes> extends Pick<SuggestChangeHandlerProps, 'name' | 'query' | 'text' | 'range'>
Extends: Pick<SuggestChangeHandlerProps, 'name' | 'query' | 'text' | 'range'>
(Some inherited members may not be shown because they are not represented in the documentation.)
property command
This command when the mention is active.
Signature:
command: (item: Data) => void;
property reason
The reason for the change.
Signature:
reason: ChangeReason;
interface MenuNavigationOptions
Signature:
export interface MenuNavigationOptions
property direction
The direction of the arrow key press.
Signature:
direction?: MenuDirection;
property dismissKeys
Keys that can dismiss the menu.
Signature:
dismissKeys?: KeyBindingNames[];
property focusOnClick
When true, refocus the editor when a click is made.
Signature:
focusOnClick?: boolean;
property submitKeys
Keys that can submit the selection.
Signature:
submitKeys?: KeyBindingNames[];
interface MountedPortal
Signature:
export interface MountedPortal extends RenderProps
Extends: RenderProps
property Component
Renders a JSX element.
Signature:
Component: FunctionComponent;
property key
Signature:
key: string;
interface NodeViewComponentProps
Signature:
export interface NodeViewComponentProps extends EditorViewProps, NodeWithAttributesProps
Extends: EditorViewProps, NodeWithAttributesProps
property decorations
The decorations which are currently applied to the ReactNodeView.
Signature:
decorations: readonly Decoration[];
property forwardRef
A ref callback which should be used by the component to pass the dom reference of the react element back to the node view. This is used as container where the content within which the content will be placed.
This **must** be used in your component otherwise the editor has no understanding of where to render the node content and defaults to placing it within the provided element created by the toDOM
method.
Signature:
forwardRef: RefCallback<HTMLElement>;
property getPosition
Provides the position of the node view in the prosemirror document
Signature:
getPosition: GetPosition;
property node
A prosemirror node with a specific shape for node.attrs
Signature:
node: NodeWithAttributes<Attributes>;
property selected
This is true when the component is selected.
Signature:
selected: boolean;
property updateAttributes
Update the attributes for the target node.
This should be called in the useEffect
hook to prevent excessive renders.
Signature:
updateAttributes: (attrs: ProsemirrorAttributes) => void;
property view
An instance of the Prosemirror editor view
.
Signature:
view: EditorView;
interface OnChangeHTMLProps
Signature:
export interface OnChangeHTMLProps
property onChange
Signature:
onChange: (html: string) => void;
interface OnChangeJSONProps
Signature:
export interface OnChangeJSONProps
property onChange
Signature:
onChange: (json: RemirrorJSON) => void;
interface PasteButtonProps
Signature:
export interface PasteButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface PlaceholderOptions
Signature:
export interface PlaceholderOptions
property emptyNodeClass
The class to decorate the empty top level node with. If you change this then you will also need to apply your own styles.
Signature:
emptyNodeClass?: string;
property placeholder
The placeholder text to use.
Signature:
placeholder?: string;
interface PlaceholderPluginState
Signature:
export interface PlaceholderPluginState extends Required<PlaceholderOptions>
Extends: Required<PlaceholderOptions>
(Some inherited members may not be shown because they are not represented in the documentation.)
property empty
Signature:
empty: boolean;
interface PositionerComponentProps
Signature:
export interface PositionerComponentProps
property children
Signature:
children: ReactNode;
interface ReactComponentOptions
Signature:
export interface ReactComponentOptions
property defaultBlockNode
The default main block node.
Signature:
defaultBlockNode?: Static<keyof HTMLElementTagNameMap>;
property defaultContentNode
The default content node to use.
Signature:
defaultContentNode?: Static<keyof HTMLElementTagNameMap>;
property defaultEnvironment
Whether to render as a nodeView, as an ssr component or in both environments.
Signature:
defaultEnvironment?: Static<ReactComponentEnvironment>;
property defaultInlineNode
The default main inline node (for inline content).
Signature:
defaultInlineNode?: Static<keyof HTMLElementTagNameMap>;
property nodeViewComponents
Override any valid schema node with your own custom components
{
paragraph: ({ forwardRef }) => <p style={{ backgroundColor: 'pink' }} ref={forwardRef} />,
}
Signature:
nodeViewComponents?: Dynamic<Record<string, ComponentType<NodeViewComponentProps>>>;
property stopEvent
Override the return value from the stopEvent
method in ReactNodeView
Signature:
stopEvent?: Dynamic<(props: {
event: Event;
}) => boolean> | null;
interface ReactExtensionOptions
Signature:
export interface ReactExtensionOptions extends PlaceholderOptions, ReactComponentOptions
Extends: PlaceholderOptions, ReactComponentOptions
property defaultBlockNode
The default main block node.
Signature:
defaultBlockNode?: Static<keyof HTMLElementTagNameMap>;
property defaultContentNode
The default content node to use.
Signature:
defaultContentNode?: Static<keyof HTMLElementTagNameMap>;
property defaultEnvironment
Whether to render as a nodeView, as an ssr component or in both environments.
Signature:
defaultEnvironment?: Static<ReactComponentEnvironment>;
property defaultInlineNode
The default main inline node (for inline content).
Signature:
defaultInlineNode?: Static<keyof HTMLElementTagNameMap>;
property emptyNodeClass
The class to decorate the empty top level node with. If you change this then you will also need to apply your own styles.
Signature:
emptyNodeClass?: string;
property nodeViewComponents
Override any valid schema node with your own custom components
{
paragraph: ({ forwardRef }) => <p style={{ backgroundColor: 'pink' }} ref={forwardRef} />,
}
Signature:
nodeViewComponents?: Dynamic<Record<string, ComponentType<NodeViewComponentProps>>>;
property placeholder
The placeholder text to use.
Signature:
placeholder?: string;
property stopEvent
Override the return value from the stopEvent
method in ReactNodeView
Signature:
stopEvent?: Dynamic<(props: {
event: Event;
}) => boolean> | null;
interface ReactFrameworkOutput
These are the props passed to the render function provided when setting up your editor.
Signature:
export interface ReactFrameworkOutput<Extension extends AnyExtension> extends FrameworkOutput<Extension>
Extends: FrameworkOutput<Extension>
(Some inherited members may not be shown because they are not represented in the documentation.)
property addHandler
Add event handlers to the remirror editor at runtime.
Signature:
addHandler: AddFrameworkHandler<Extension>;
property blur
Warning: This API is now obsolete.
This method may be removed in the future and it is advisable to use
commands.blur()
.
Blur the editor.
Signature:
blur: (position?: PrimitiveSelection) => void;
property clearContent
Clears all editor content.
Signature:
clearContent: (options?: TriggerChangeProps) => void;
property focus
Warning: This API is now obsolete.
This method may be removed in the future and it is advisable to use
commands.focus()
.
Focus the editor at the start
| end
a specific position or at a valid range between { from, to }
.
Signature:
focus: (position?: FocusType) => void;
property getExtension
Get an extension by it's constructor.
Signature:
getExtension: <ExtensionConstructor extends AnyExtensionConstructor>(Constructor: ExtensionConstructor) => InstanceType<ExtensionConstructor>;
property getPreviousState
A getter function for the previous prosemirror editor state. It can be used to check what's changed between states.
Signature:
getPreviousState: () => EditorState;
property getRootProps
A function that returns the props which should be spread on the react element to be used as the root for the editor. This is where the ProseMirror editor is injected into the DOM).
Signature:
getRootProps: <RefKey extends string = 'ref'>(options?: GetRootPropsConfig<RefKey>) => RefKeyRootProps<RefKey>;
Remarks:
By default Remirror
will add the prosemirror editor instance directly into the first child element it receives. Using this method gives you full control over where the editor should be injected.
**IMPORTANT** In order to support SSR pre-rendering this should only be spread on a component with NO children.
**Example with indirectly nested components**
import { Remirror } from '@remirror/react';
import { PresetCore } from '@remirror/preset-core';
import { BoldExtension } from '@remirror/extension-bold';
const InnerEditor = () => {
const { getRootProps } = useRemirror();
return <div {...getRootProps()} />;
}
const EditorWrapper = () => {
const corePreset = usePreset(CorePreset);
const boldExtension = useExtension(BoldExtension);
const manager = useManager([corePreset, boldExtension]);
return (
<Remirror manager={manager}>
<InnerEditor />
</Remirror>
);
}
property getState
A getter function for the current editor state. It's a wrapper around view.state
.
Signature:
getState: () => EditorState;
property hasExtension
Assert if an extension is present by it's constructor.
Signature:
hasExtension: <ExtensionConstructor extends AnyExtensionConstructor>(Constructor: ExtensionConstructor) => boolean;
property manager
The manager which was used to create this editor.
Signature:
manager: RemirrorManager<Extension>;
property setContent
Replace all editor content with the new content.
Signature:
setContent: (content: RemirrorContentType, options?: TriggerChangeProps) => void;
Remarks:
Allows for the editor content to be overridden by force.
property uid
The unique id for the editor instance.
Signature:
uid: string;
interface RedoButtonProps
Signature:
export interface RedoButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface RefProps
Signature:
export interface RefProps<RefKey = 'ref'>
property refKey
A custom ref key which allows a reference to be obtained from non standard components.
Signature:
refKey?: RefKey;
interface RemirrorPortalsProps
Signature:
export interface RemirrorPortalsProps
property portals
An array of tuples holding all the element containers for node view portals.
Signature:
portals: Array<[HTMLElement, MountedPortal]>;
interface RemirrorProps
The props for the main <Remirror />
component.
Signature:
export interface RemirrorProps<Extension extends AnyExtension = Remirror.Extensions> extends Omit<ReactFrameworkProps<Extension>, 'stringHandler' | 'manager'>, I18nProps
Extends: Omit<ReactFrameworkProps<Extension>, 'stringHandler' | 'manager'>, I18nProps
(Some inherited members may not be shown because they are not represented in the documentation.)
property autoRender
Set this to start
or end
to automatically render the editor to the dom.
When set to start
the editor will be added before all other child components. If end
the editable editor will be added after all child components.
When no children are provided the editor will automatically be rendered even without this prop being set.
start
is the preferred value since it helps avoid some of the issues that can arise from zIndex
issues with floating components rendered within the context.
Signature:
autoRender?: boolean | 'start' | 'end';
property children
The optional children which can be passed into the [Remirror
].
Signature:
children?: ReactNode;
property hooks
An array of hooks that can be passed through to the Remirror
component and will be called in the order provided. Each hook receives no props but will have access to the RemirrorContext
.
If you'd like access to more state, you can wrap the Remirror
component in a custom provider and attach your state there. It can then be accessed inside the hook via context.
Signature:
hooks?: Array<() => void>;
property i18n
Provide your own i18n with all the locales you need for your app.
import { i18n } from '@remirror/i18n';
import esLocale from '@remirror/i18n/es';
import { SocialEditor } from '@remirror/react-social-editor';
import { es } from 'make-plural/plurals';
i18n.loadLocaleData('es', { plurals: es });
i18n.load({
es: esLocale.messages,
});
const Editor = () => {
<SocialEditor i18n={i18n} />
}
Signature:
i18n?: I18n;
property locale
The current locale for this context.
Signature:
locale?: string;
property manager
This manager composes the extensions provided and provides the functionality used throughout the editor.
It is overridden here since there was an issue with type inference when using the manager inherited from ReactFrameworkProps
.
Signature:
manager: RemirrorManager<any>;
property supportedLocales
Supported locales. Defaults to including the locale.
Signature:
supportedLocales?: string[];
interface RenderMethodProps
Signature:
export interface SingleRenderMethodProps extends RenderProps
Extends: RenderProps
property Component
Renders a JSX element.
Signature:
Component: FunctionComponent;
property container
The DOM element to contain the react portal.
Signature:
container: HTMLElement;
property key
Signature:
key?: undefined;
interface RenderProps
Signature:
export interface RenderProps
property Component
Renders a JSX element.
Signature:
Component: FunctionComponent;
interface RightAlignButtonProps
Signature:
export interface RightAlignButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface TableCellMenuComponentProps
Signature:
export interface TableCellMenuComponentProps
property popupOpen
Signature:
popupOpen: boolean;
property setPopupOpen
Signature:
setPopupOpen: React.Dispatch<React.SetStateAction<boolean>>;
interface TableCellMenuProps
Signature:
export interface TableCellMenuProps
property Component
Signature:
Component?: TableCellMenuComponent;
interface TableDeleteButtonProps
Signature:
export interface TableDeleteButtonProps
property Component
Signature:
Component?: React.ComponentType<TableDeleteInnerButtonProps>;
interface TableDeleteInnerButtonProps
Signature:
export interface TableDeleteInnerButtonProps
property onClick
The action when the button is pressed.
Signature:
onClick: MouseEventHandler;
property onMouseDown
The action when the mouse is pressed on the button.
Signature:
onMouseDown: MouseEventHandler;
property onMouseEnter
The action when the mouse is over the button.
Signature:
onMouseEnter: MouseEventHandler;
property onMouseLeave
The action when the mouse level the button.
Signature:
onMouseLeave: MouseEventHandler;
property position
The position of the button
Signature:
position: UsePositionerReturn;
interface TableDeleteRowColumnButtonProps
Signature:
export interface TableDeleteRowColumnButtonProps
property Component
Signature:
Component?: React.ComponentType<TableDeleteRowColumnInnerButtonProps>;
interface TableDeleteRowColumnInnerButtonProps
Signature:
export interface TableDeleteRowColumnInnerButtonProps
property onClick
The action when the button is pressed.
Signature:
onClick: MouseEventHandler;
property onMouseDown
The action when the mouse is pressed on the button.
Signature:
onMouseDown: MouseEventHandler;
property onMouseOut
The action when the mouse level the button.
Signature:
onMouseOut: MouseEventHandler;
property onMouseOver
The action when the mouse is over the button.
Signature:
onMouseOver: MouseEventHandler;
property position
The position of the button
Signature:
position: UsePositionerReturn;
interface TextAlignmentButtonGroupProps
Signature:
export interface TextAlignmentButtonGroupProps
property children
Signature:
children?: ReactNode | ReactNode[];
property showAll
Signature:
showAll?: boolean;
interface ThemeProviderProps
Signature:
export interface ThemeProviderProps extends UseThemeProps
Extends: UseThemeProps
property as
A custom component to use for the wrapper.
Signature:
as?: ElementType<{
style?: CSSProperties;
className?: string;
}>;
property children
Signature:
children: ReactNode;
property className
Any extra class names to add to the wrapper component.
Signature:
className?: string;
property theme
The theme to customise the look and feel of your remirror editor.
Signature:
theme?: RemirrorThemeType;
interface ToggleBlockquoteButtonProps
Signature:
export interface ToggleBlockquoteButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface ToggleBoldButtonProps
Signature:
export interface ToggleBoldButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface ToggleBulletListButtonProps
Signature:
export interface ToggleBulletListButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface ToggleCalloutButtonProps
Signature:
export interface ToggleCalloutButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
property attrs
Signature:
attrs?: Partial<CalloutExtensionAttributes>;
interface ToggleCalloutMenuItemProps
Signature:
export interface ToggleCalloutMenuItemProps extends Omit<CommandMenuItemProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandMenuItemProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
property attrs
Signature:
attrs?: Partial<CalloutExtensionAttributes>;
interface ToggleCodeBlockButtonProps
Signature:
export interface ToggleCodeBlockButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
property attrs
Signature:
attrs?: Partial<CodeBlockAttributes>;
interface ToggleCodeButtonProps
Signature:
export interface ToggleCodeButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface ToggleColumnsButtonProps
Signature:
export interface ToggleColumnsButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
property attrs
Signature:
attrs?: Partial<ColumnAttributes>;
interface ToggleHeadingButtonProps
Signature:
export interface ToggleHeadingButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
property attrs
Signature:
attrs?: Partial<HeadingExtensionAttributes>;
interface ToggleHeadingMenuItemProps
Signature:
export interface ToggleHeadingMenuItemProps extends Omit<CommandMenuItemProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandMenuItemProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
property attrs
Signature:
attrs?: Partial<HeadingExtensionAttributes>;
interface ToggleItalicButtonProps
Signature:
export interface ToggleItalicButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface ToggleOrderedListButtonProps
Signature:
export interface ToggleOrderedListButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface ToggleStrikeButtonProps
Signature:
export interface ToggleStrikeButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface ToggleSubscriptButtonProps
Signature:
export interface ToggleSubscriptButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface ToggleSuperscriptButtonProps
Signature:
export interface ToggleSuperscriptButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface ToggleTaskListButtonProps
Signature:
export interface ToggleTaskListButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface ToggleUnderlineButtonProps
Signature:
export interface ToggleUnderlineButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface ToggleWhitespaceButtonProps
Signature:
export interface ToggleWhitespaceButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface UndoButtonProps
Signature:
export interface UndoButtonProps extends Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
Extends: Omit<CommandButtonProps, 'commandName' | 'active' | 'enabled' | 'attrs' | 'onSelect'>
(Some inherited members may not be shown because they are not represented in the documentation.)
interface UpdateReason
Signature:
export interface UpdateReason
property doc
The document changed.
Signature:
doc: boolean;
property selection
The selection changed.
Signature:
selection: boolean;
property storedMark
A stored mark was added to the current selection
Signature:
storedMark: boolean;
interface UseEditorFocusProps
Signature:
export interface UseEditorFocusProps
property blurOnInactive
Set this to true if you want to also update the focus value when the user focuses on other windows or tabs (outside of the current DOM).
Signature:
blurOnInactive?: boolean;
property ignoredElements
The elements that can be focused without setting isFocused
to false.
Signature:
ignoredElements?: Array<Element | null>;
interface UseEmojiProps
Signature:
export interface UseEmojiProps extends MenuNavigationOptions
Extends: MenuNavigationOptions
property direction
The direction of the arrow key press.
Signature:
direction?: MenuDirection;
property dismissKeys
Keys that can dismiss the menu.
Signature:
dismissKeys?: KeyBindingNames[];
property focusOnClick
When true, refocus the editor when a click is made.
Signature:
focusOnClick?: boolean;
property submitKeys
Keys that can submit the selection.
Signature:
submitKeys?: KeyBindingNames[];
interface UseEmojiReturn
Signature:
export interface UseEmojiReturn extends UseMenuNavigationReturn<FlatEmojiWithUrl>
Extends: UseMenuNavigationReturn<FlatEmojiWithUrl>
(Some inherited members may not be shown because they are not represented in the documentation.)
property index
The selected index.
Signature:
index: number;
property setIndex
Signature:
setIndex: (index: number) => void;
property state
The state of the current query, only available when active.
Signature:
state: EmojiState | null;
interface UseI18nReturn
Signature:
export interface UseI18nReturn extends Required<I18nProps>
Extends: Required<I18nProps>
(Some inherited members may not be shown because they are not represented in the documentation.)
property t
A translation utility for translating a predefined string.
Signature:
t: I18n['_'];
interface UseMentionAtomProps
Signature:
export interface UseMentionAtomProps<Data extends MentionAtomNodeAttributes = MentionAtomNodeAttributes> extends MenuNavigationOptions, Pick<MentionAtomNodeAttributes, 'replacementType'>
Extends: MenuNavigationOptions, Pick<MentionAtomNodeAttributes, 'replacementType'>
(Some inherited members may not be shown because they are not represented in the documentation.)
property direction
The direction of the arrow key press.
Signature:
direction?: MenuDirection;
property dismissKeys
Keys that can dismiss the menu.
Signature:
dismissKeys?: KeyBindingNames[];
property focusOnClick
When true, refocus the editor when a click is made.
Signature:
focusOnClick?: boolean;
property ignoreMatchesOnDismiss
Whether matches should be permanently ignored when the user dismisses the mention suggestion.
Signature:
ignoreMatchesOnDismiss?: boolean;
property items
The list of data from which an index can be calculated. Must include at least an id
and a label
.
Signature:
items: Data[];
property submitKeys
Keys that can submit the selection.
Signature:
submitKeys?: KeyBindingNames[];
interface UseMentionAtomReturn
Signature:
export interface UseMentionAtomReturn<Data extends MentionAtomNodeAttributes = MentionAtomNodeAttributes> extends UseMenuNavigationReturn<Data>
Extends: UseMenuNavigationReturn<Data>
(Some inherited members may not be shown because they are not represented in the documentation.)
property index
The selected index.
Signature:
index: number;
property setIndex
Signature:
setIndex: (index: number) => void;
property state
Signature:
state: MentionAtomState<Data> | null;
interface UseMentionProps
Signature:
export interface UseMentionProps<Data extends MentionExtensionAttributes = MentionExtensionAttributes> extends MenuNavigationOptions
Extends: MenuNavigationOptions
property direction
The direction of the arrow key press.
Signature:
direction?: MenuDirection;
property dismissKeys
Keys that can dismiss the menu.
Signature:
dismissKeys?: KeyBindingNames[];
property focusOnClick
When true, refocus the editor when a click is made.
Signature:
focusOnClick?: boolean;
property ignoreMatchesOnDismiss
Whether matches should be permanently ignored when the user presses escape.
Signature:
ignoreMatchesOnDismiss?: boolean;
property items
The list of data from which an index can be calculated. Must include at least an id
and a label
.
Signature:
items: Data[];
property onExit
This method is called when a user induced exit happens before a mention has been created. It receives the state, and gives the consumer of this hook the opportunity to manually create their own mention
Leave this undefined to ignore exits.
To enable automatic exit handling. The following will automatically set the id to be the query and the label to be the full matching text. Extra attrs like href
can be added by you to the attrs object parameter.
const mentionState = useMention({ items, onExit(_, command) => command(), });
Signature:
onExit?: UseMentionExitHandler<Data>;
property submitKeys
Keys that can submit the selection.
Signature:
submitKeys?: KeyBindingNames[];
interface UseMentionReturn
Signature:
export interface UseMentionReturn<Data extends MentionExtensionAttributes = MentionExtensionAttributes> extends UseMenuNavigationReturn<Data>
Extends: UseMenuNavigationReturn<Data>
(Some inherited members may not be shown because they are not represented in the documentation.)
property index
The selected index.
Signature:
index: number;
property setIndex
Signature:
setIndex: (index: number) => void;
property state
Signature:
state: MentionState<Data> | null;
interface UseMenuNavigationReturn
Signature:
export interface UseMenuNavigationReturn<Item = any> extends Pick<MultishiftPropGetters<Item>, 'getMenuProps' | 'getItemProps'>, Pick<MultishiftHelpers<Item>, 'itemIsSelected' | 'indexIsSelected' | 'indexIsHovered' | 'itemIsHovered'>, Pick<MultishiftState<Item>, 'hoveredIndex'>
Extends: Pick<MultishiftPropGetters<Item>, 'getMenuProps' | 'getItemProps'>, Pick<MultishiftHelpers<Item>, 'itemIsSelected' | 'indexIsSelected' | 'indexIsHovered' | 'itemIsHovered'>, Pick<MultishiftState<Item>, 'hoveredIndex'>
(Some inherited members may not be shown because they are not represented in the documentation.)
property index
The selected index.
Signature:
index: number;
property setIndex
Signature:
setIndex: (index: number) => void;
interface UseMultiPositionerReturn
Signature:
export interface UseMultiPositionerReturn<Data = any> extends PositionerPosition
Extends: PositionerPosition
(Some inherited members may not be shown because they are not represented in the documentation.)
property data
Metadata associated with the position
Signature:
data: Data;
property element
The element that the ref has found.
Signature:
element?: HTMLElement;
property key
A key to uniquely identify this positioner. This can be applied to the react element.
Signature:
key: string;
property ref
This ref must be applied to the component that is being positioned in order to correctly obtain the position data.
Signature:
ref: RefCallback<HTMLElement>;
interface UseRemirrorProps
Props which are passed into the useRemirror
hook.
Signature:
export interface UseRemirrorProps<Extension extends AnyExtension> extends CreateReactManagerOptions, Partial<CreateEditorStateProps>
Extends: CreateReactManagerOptions, Partial<CreateEditorStateProps>
(Some inherited members may not be shown because they are not represented in the documentation.)
property core
The core preset options.
Signature:
core?: GetStaticAndDynamic<CorePresetOptions>;
property extensions
Provide a function that returns an array of extensions which will be used to create the manager. If you prefer you can directly provide your own RemirrorManager
to override this. The manager you provide will be cloned and used within your editor.
When a Manager
is provided then several settings are ignored like [[stringHandler
]] and [[onError
]].
Signature:
extensions?: (() => Extension[]) | RemirrorManager<any>;
property onError
This is called when the editor has invalid content.
Signature:
onError?: InvalidContentHandler;
Remarks:
To add this to the editor the following is needed.
import React from 'react';
import { Remirror, InvalidContentHandler } from 'remirror';
import { Remirror, useManager } from '@remirror/react';
import { WysiwygPreset } from 'remirror/extensions';
const Framework = () => {
const onError: InvalidContentHandler = useCallback(({ json, invalidContent, transformers }) => {
// Automatically remove all invalid nodes and marks.
return transformers.remove(json, invalidContent);
}, []);
const manager = useManager(() => [new WysiwygPreset()]);
return (
<Remirror manager={manager} onError={onError}>
<div />
</Remirror>
);
};
property react
Options for the react preset.
Signature:
react?: GetStaticAndDynamic<ReactExtensionOptions>;
property stringHandler
A function which transforms a string into a prosemirror node.
Signature:
stringHandler?: keyof Remirror.StringHandlers | StringHandler;
Remarks:
Can be used to transform markdown / html or any other string format into a prosemirror node.
See [[fromHTML
]] for an example of how this could work.
interface UseRemirrorReturn
Signature:
export interface UseRemirrorReturn<Extension extends AnyExtension>
property getContext
A function that provides the editor context. This is only available after the <Remirror />
component is mounted. Calling it in the very first render phase will cause an error to be thrown.
Signature:
getContext: () => ReactFrameworkOutput<Extension> | undefined;
property manager
The manager which is required by the <Remirror />
component.
Signature:
manager: RemirrorManager<Extension>;
property onChange
Syntactic sugar for using the setState
method directly on the `
import React from 'react';
import { useRemirror, Provider } from '@remirror/react';
import { htmlToProsemirrorNode } from 'remirror';
const Editor = () => {
const { manager, onChange, state } = useRemirror({
content: '<p>Some content</p>',
stringHandler: htmlToProsemirrorNode
});
return <Remirror onChange={onChange} state={state} manager={manager} />
}
Signature:
onChange: RemirrorEventListener<Extension>;
property setState
A function to update the state when you intend to make the editor controlled.
import React, { useCallback } from 'react';
import { useRemirror, Provider } from '@remirror/react';
import { htmlToProsemirrorNode } from 'remirror';
const Editor = () => {
const { manager, setState, state } = useRemirror({
content: '<p>Some content</p>',
stringHandler: htmlToProsemirrorNode
});
return (
<Remirror
onChange={useCallback((changeProps) => setState(changeProps.state), [setState])}
state={state}
manager={manager}
/>
);
}
Signature:
setState: (state: EditorState) => void;
property state
The initial editor state based on the provided content
and selection
properties. If none were passed in then the state is created from the default empty doc node as defined by the editor Schema.
Signature:
state: EditorState;
interface UseSuggesterProps
Signature:
export interface UseSuggesterProps extends Except<Suggester, 'onChange'>
Extends: Except<Suggester, 'onChange'>
(Some inherited members may not be shown because they are not represented in the documentation.)
property ignoreFocus
Set to true
to ignore changes which are purely caused by focus events.
TODO - NOT YET IMPLEMENTED
Signature:
ignoreFocus?: boolean;
interface UseSuggestReturn
Signature:
export interface UseSuggestReturn extends SuggestStateMethods
Extends: SuggestStateMethods
(Some inherited members may not be shown because they are not represented in the documentation.)
property change
Signature:
change: (Pick<SuggestChangeHandlerProps, 'text' | 'query' | 'range' | 'match'> & ChangeReasonProps) | undefined;
property exit
Signature:
exit: (Pick<SuggestChangeHandlerProps, 'text' | 'query' | 'range' | 'match'> & ExitReasonProps) | undefined;
interface UseThemeProps
Signature:
export interface UseThemeProps
property className
Any extra class names to add to the wrapper component.
Signature:
className?: string;
property theme
The theme to customise the look and feel of your remirror editor.
Signature:
theme?: RemirrorThemeType;
type IconType
Signature:
export type IconType = (props: IconBaseProps) => JSX.Element;
References: IconBaseProps
type MarkMap
Signature:
export type MarkMap = Partial<Record<string, string | ComponentType<any>>>;
type MenuDirection
Signature:
export type MenuDirection = 'horizontal' | 'vertical';
type PortalList
Signature:
export type PortalList = ReadonlyArray<[HTMLElement, MountedPortal]>;
References: MountedPortal
type PortalMap
Signature:
export type PortalMap = Map<HTMLElement, MountedPortal>;
References: MountedPortal
type ReactComponentEnvironment
Signature:
export type ReactComponentEnvironment = 'ssr' | 'dom' | 'both';
type ReactExtensions
Use this to build your own extension union type which extends from the ReactExtensions
.
Signature:
export type ReactExtensions<Extension extends AnyExtension = never> = CorePreset | ReactExtension | BuiltinPreset | Extension;
References: AnyExtension, CorePreset, ReactExtension, BuiltinPreset
type RefKeyRootProps
The react ref key props for the getRootProps
method.
Signature:
export type RefKeyRootProps<RefKey extends string = 'ref'> = {
[P in Exclude<RefKey, 'key'>]: Ref<any>;
} & {
key: string;
children: ReactNode;
} & Shape;
References: Shape
type UseExtensionCallback
Signature:
export type UseExtensionCallback<Type extends AnyExtensionConstructor> = (props: UseExtensionCallbackProps<Type>) => Dispose | undefined;
References: AnyExtensionConstructor, Dispose
type UseMentionExitHandler
Signature:
export type UseMentionExitHandler<Data extends MentionExtensionAttributes = MentionExtensionAttributes> = (props: OnExitProps<Data>, command: (attrs?: Partial<Data>) => void) => void;
References: MentionExtensionAttributes
type UsePositionerReturn
Signature:
export type UsePositionerReturn<Data = any> = UsePositionerReturnActive<Data> | UsePositionerReturnInactive<Data>;
type UseRemirrorContextType
This is a type alias for creating your own typed version of the remirror method.
import { useRemirror, UseRemirrorContextType } from '@remirror/react';
import { SocialPreset } from 'remirror/extensions'
const useSocialRemirror = useRemirror as UseRemirrorContextType<SocialPreset>;
// With the remirror provider context.
const Editor = () => {
const { commands } = useSocialRemirror();
// All available commands are shown with intellisense. Command click to goto the implementation.
commands.toggleBold();
}
Signature:
export type UseRemirrorContextType<Extension extends AnyExtension> = <Type extends AnyExtension>(handler?: RemirrorEventListener<Extension> | {
autoUpdate: boolean;
}) => ReactFrameworkOutput<Extension | Type>;
References: AnyExtension, RemirrorEventListener, ReactFrameworkOutput
type VerticalDividerProps
Signature:
export type VerticalDividerProps = Omit<DividerProps, 'orientation'>;