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;