Skip to main content

extension-events

package @remirror/extension-events

class EventsExtension

The events extension which listens to events which occur within the remirror editor.

Signature:

export declare class EventsExtension extends PlainExtension<EventsOptions> 

Extends: PlainExtension<EventsOptions>

(Some inherited members may not be shown because they are not represented in the documentation.)

property name

Signature:

get name(): "events";

method createPlugin

Create the plugin which manages all of the events being listened to within the editor.

Signature:

createPlugin(): CreateExtensionPlugin;

Returns:

CreateExtensionPlugin

method isInteracting

Check if the user is currently interacting with the editor.

Signature:

isInteracting(): Helper<boolean>;

Returns:

Helper<boolean>

method onView

Add a new lifecycle method which is available to all extensions for adding a click handler to the node or mark.

Signature:

onView(): void;

Returns:

void

interface ClickHandlerState

The helpers passed into the ClickHandler.

Signature:

export interface ClickHandlerState extends ClickMarkHandlerState 

Extends: ClickMarkHandlerState

(Some inherited members may not be shown because they are not represented in the documentation.)

property direct

When this is true it means that the current clicked node is the node that was directly clicked.

Signature:

direct: boolean;

property getMark

Return the mark range if it exists for the clicked position.

Signature:

getMark: (markType: string | MarkType) => GetMarkRange | undefined | void;

property getNode

Returns undefined when the nodeType doesn't match. Otherwise returns the node with a position property.

Signature:

getNode: (nodeType: string | NodeType) => NodeWithPosition | undefined;

property markRanges

The list of mark ranges included. This is only populated when direct is true.

Signature:

markRanges: GetMarkRange[];

property nodeWithPosition

The node that was clicked with the desired position.

Signature:

nodeWithPosition: NodeWithPosition;

property pos

The position that was clicked.

Signature:

pos: number;

interface ClickMarkHandlerState

Signature:

export interface ClickMarkHandlerState extends BaseEventState 

Extends: BaseEventState

(Some inherited members may not be shown because they are not represented in the documentation.)

property getMark

Return the mark range if it exists for the clicked position.

Signature:

getMark: (markType: string | MarkType) => GetMarkRange | undefined | void;

property markRanges

The list of mark ranges included. This is only populated when direct is true.

Signature:

markRanges: GetMarkRange[];

interface EventsOptions

Signature:

export interface EventsOptions 

property blur

Listens for blur events on the editor.

Return true to prevent any other prosemirror listeners from firing.

Signature:

blur?: Handler<FocusEventHandler>;

property click

Listens for click events and provides information which may be useful in handling them properly.

This can be used to check if a node was clicked on.

Please note that this click handler may be called multiple times for one click. Starting from the node that was clicked directly, it walks up the node tree until it reaches the doc node.

Return true to prevent any other click listeners from being registered.

Signature:

click?: Handler<ClickEventHandler>;

property clickMark

This is similar to the click handler, but with better performance when only capturing clicks for marks.

Signature:

clickMark?: Handler<ClickMarkEventHandler>;

property contextmenu

Listen for contextmenu events and pass through props which detail the direct node and parent nodes which were activated.

Signature:

contextmenu?: Handler<ContextMenuEventHandler>;

property copy

Listens to copy events on the editor.

Return true to prevent any other prosemirror listeners from firing.

Signature:

copy?: Handler<ClipboardEventHandler>;

property cut

Listens to cut events on the editor.

Return true to prevent any other prosemirror listeners from firing.

Signature:

cut?: Handler<ClipboardEventHandler>;

property doubleClick

Same as EventsOptions.click but for double clicks.

Signature:

doubleClick?: Handler<ClickEventHandler>;

property doubleClickMark

Same as EventsOptions.clickMark but for double clicks.

Signature:

doubleClickMark?: Handler<ClickMarkEventHandler>;

property editable

Listen for editable changed and pass through previous editable state and current editable state

Signature:

editable?: Handler<EditableEventHandler>;

property focus

Listens for focus events on the editor.

Return true to prevent any other prosemirror listeners from firing.

Signature:

focus?: Handler<FocusEventHandler>;

property hover

Listen for hover events and pass through details of every node and mark which was hovered at the current position.

Signature:

hover?: Handler<HoverEventHandler>;

property keydown

Listens for keypress events on the editor.

Return true to prevent any other prosemirror listeners from firing.

Signature:

keydown?: Handler<KeyboardEventHandler>;

property keypress

Listens for keypress events on the editor.

Return true to prevent any other prosemirror listeners from firing.

Signature:

keypress?: Handler<KeyboardEventHandler>;

property keyup

Listens for keypress events on the editor.

Return true to prevent any other prosemirror listeners from firing.

Signature:

keyup?: Handler<KeyboardEventHandler>;

property mousedown

Listens for mousedown events on the editor.

Return true to prevent any other prosemirror listeners from firing.

Signature:

mousedown?: Handler<MouseEventHandler>;

property mouseenter

Listens for mouseenter events on the editor.

Return true to prevent any other prosemirror listeners from firing.

Signature:

mouseenter?: Handler<MouseEventHandler>;

property mouseleave

Listens for mouseleave events on the editor.

Return true to prevent any other prosemirror listeners from firing.

Signature:

mouseleave?: Handler<MouseEventHandler>;

property mouseup

Listens for mouseup events on the editor.

Return true to prevent any other prosemirror listeners from firing.

Signature:

mouseup?: Handler<MouseEventHandler>;

property paste

Listens to paste events on the editor.

Return true to prevent any other prosemirror listeners from firing.

Signature:

paste?: Handler<ClipboardEventHandler>;

property scroll

Listens to scroll events on the editor.

Return true to prevent any other prosemirror listeners from firing.

Signature:

scroll?: Handler<ScrollEventHandler>;

property textInput

Handle text input.

Signature:

textInput?: Handler<TextInputHandler>;

property tripleClick

Same as EventsOptions.click but for triple clicks.

Signature:

tripleClick?: Handler<ClickEventHandler>;

property tripleClickMark

Same as EventsOptions.clickMark but for triple clicks.

Signature:

tripleClickMark?: Handler<ClickMarkEventHandler>;

interface HoverEventHandlerState

Signature:

export interface HoverEventHandlerState extends MouseEventHandlerState 

Extends: MouseEventHandlerState

property getMark

Return the mark range if it exists for the clicked position.

Signature:

getMark: (markType: string | MarkType) => GetMarkRange | undefined | void;

property getNode

Returns undefined when the nodeType doesn't match. Otherwise returns the node with a position property and isRoot which is true when the node was clicked on directly.

Signature:

getNode: (nodeType: string | NodeType) => (NodeWithPosition & {
isRoot: boolean;
}) | undefined | void;

property hovering

This is true when hovering has started and false when hovering has ended.

Signature:

hovering: boolean;

property marks

The marks that currently wrap the context menu.

Signature:

marks: GetMarkRange[];

property nodes

An array of nodes with their positions. The first node is the node that was acted on directly, and each node after is the parent of the one proceeding. Consumers of this API can check if a node of a specific type was triggered to determine how to render their context menu.

Signature:

nodes: NodeWithPosition[];

property view

The editor view.

Signature:

view: EditorView;

interface MouseEventHandlerState

Signature:

export interface MouseEventHandlerState 

property getMark

Return the mark range if it exists for the clicked position.

Signature:

getMark: (markType: string | MarkType) => GetMarkRange | undefined | void;

property getNode

Returns undefined when the nodeType doesn't match. Otherwise returns the node with a position property and isRoot which is true when the node was clicked on directly.

Signature:

getNode: (nodeType: string | NodeType) => (NodeWithPosition & {
isRoot: boolean;
}) | undefined | void;

property marks

The marks that currently wrap the context menu.

Signature:

marks: GetMarkRange[];

property nodes

An array of nodes with their positions. The first node is the node that was acted on directly, and each node after is the parent of the one proceeding. Consumers of this API can check if a node of a specific type was triggered to determine how to render their context menu.

Signature:

nodes: NodeWithPosition[];

property view

The editor view.

Signature:

view: EditorView;

type ClickEventHandler

Signature:

export type ClickEventHandler = (event: MouseEvent, state: ClickHandlerState) => boolean | undefined | void;

References: ClickHandlerState

type ClickMarkEventHandler

Signature:

export type ClickMarkEventHandler = (event: MouseEvent, state: ClickMarkHandlerState) => boolean | undefined | void;

References: ClickMarkHandlerState

type ContextMenuEventHandler

Signature:

export type ContextMenuEventHandler = (event: MouseEvent, state: ContextMenuEventHandlerState) => boolean | undefined | void;

References: ContextMenuEventHandlerState

type ContextMenuEventHandlerState

Signature:

export type ContextMenuEventHandlerState = MouseEventHandlerState;

References: MouseEventHandlerState

type CreateEventHandlers

The return type for the createEventHandlers extension creator method.

Signature:

export type CreateEventHandlers = GetHandler<EventsOptions>;

References: GetHandler, EventsOptions

type FocusEventHandler

Signature:

export type FocusEventHandler = (event: FocusEvent) => boolean | undefined | void;

type HoverEventHandler

Signature:

export type HoverEventHandler = (event: MouseEvent, state: HoverEventHandlerState) => boolean | undefined | void;

References: HoverEventHandlerState

type KeyboardEventHandler

Signature:

export type KeyboardEventHandler = (event: KeyboardEvent) => boolean | undefined | void;

type MouseEventHandler

Signature:

export type MouseEventHandler = (event: MouseEvent) => boolean | undefined | void;

type ScrollEventHandler

Signature:

export type ScrollEventHandler = (event: Event) => boolean | undefined | void;

type TextInputHandler

Signature:

export type TextInputHandler = (props: {
from: number;
to: number;
text: string;
}) => boolean | undefined | void;