Skip to main content

react-ssr

package @remirror/react-ssr

class EditorViewSSR

A mock editor view used only when prosemirror is running on the server

Signature:

export declare class EditorViewSSR 

EditorViewSSR.(constructor)

Constructs a new instance of the EditorViewSSR class

Signature:

constructor(_place: Node | ((p: Node) => void) | {
mount: Node;
} | undefined, props: DirectEditorProps);

Parameters:

ParameterTypeDescription
_placeNode | ((p: Node) => void) | { mount: Node; } | undefined
propsDirectEditorProps

property dom

Signature:

dom: Element;

property dragging

Signature:

dragging: null;

property root

Signature:

root: Document | DocumentFragment;

property state

Signature:

state: EditorState;

method coordsAtPos

Signature:

coordsAtPos(_pos: number): {
left: number;
right: number;
top: number;
bottom: number;
};

Parameters:

ParameterTypeDescription
_posnumber

Returns:

{ left: number; right: number; top: number; bottom: number; }

method destroy

Removes the editor from the DOM and destroys all [node views](#view.NodeView).

Signature:

destroy(): void;

Returns:

void

method dispatch

Signature:

dispatch(_tr: Transaction): void;

Parameters:

ParameterTypeDescription
_trTransaction

Returns:

void

method domAtPos

Signature:

domAtPos(_pos: number): {
node: Node;
offset: number;
};

Parameters:

ParameterTypeDescription
_posnumber

Returns:

{ node: Node; offset: number; }

method endOfTextblock

Signature:

endOfTextblock(_dir: 'up' | 'down' | 'left' | 'right' | 'forward' | 'backward', _state?: EditorState): boolean;

Parameters:

ParameterTypeDescription
_dir'up' | 'down' | 'left' | 'right' | 'forward' | 'backward'
_stateEditorState(Optional)

Returns:

boolean

method focus

Signature:

focus(): void;

Returns:

void

method hasFocus

Signature:

hasFocus(): boolean;

Returns:

boolean

method nodeDOM

Signature:

nodeDOM(_pos: number): Node | null | undefined;

Parameters:

ParameterTypeDescription
_posnumber

Returns:

Node | null | undefined

method posAtCoords

Signature:

posAtCoords(_coords: {
left: number;
top: number;
}): {
pos: number;
inside: number;
} | null | undefined;

Parameters:

ParameterTypeDescription
_coords{ left: number; top: number; }

Returns:

{ pos: number; inside: number; } | null | undefined

method posAtDOM

Signature:

posAtDOM(_node: Node, _offset: number, _bias?: number | null): number;

Parameters:

ParameterTypeDescription
_nodeNode
_offsetnumber
_biasnumber | null(Optional)

Returns:

number

method setProps

Signature:

setProps(_props: DirectEditorProps): void;

Parameters:

ParameterTypeDescription
_propsDirectEditorProps

Returns:

void

method someProps

Signature:

someProps(_propName: string, f?: (prop: any) => any): any;

Parameters:

ParameterTypeDescription
_propNamestring
f(prop: any) => any(Optional)

Returns:

any

method update

Signature:

update(_props: DirectEditorProps): void;

Parameters:

ParameterTypeDescription
_propsDirectEditorProps

Returns:

void

method updateState

Signature:

updateState(_state: EditorState): void;

Parameters:

ParameterTypeDescription
_stateEditorState

Returns:

void

class ReactSerializer

Serialize the extension provided schema into a JSX element that can be displayed node and non-dom environments.

Signature:

export declare class ReactSerializer<Extension extends AnyExtension> 

ReactSerializer.(constructor)

Constructs a new instance of the ReactSerializer class

Signature:

constructor(nodes: Record<string, NodeToDOM>, marks: Record<string, MarkToDOM>, manager: RemirrorManager<Extension>);

Parameters:

ParameterTypeDescription
nodesRecord<string, NodeToDOM>
marksRecord<string, MarkToDOM>
managerRemirrorManager<Extension>

property marks

Signature:

marks: Record<string, MarkToDOM>;

property nodes

Signature:

nodes: Record<string, NodeToDOM>;

method fromManager

Create a serializer from the extension manager

Signature:

static fromManager<Extension extends AnyExtension>(manager: RemirrorManager<Extension>): ReactSerializer<Extension>;

Parameters:

ParameterTypeDescription
managerRemirrorManager<Extension>

Returns:

ReactSerializer<Extension>

method renderSpec

Receives the return value from toDOM defined in the node schema and transforms it into JSX

Signature:

static renderSpec(structure: DOMOutputSpec, wraps?: ReactNode): ReactNode;

Parameters:

ParameterTypeDescription
structureDOMOutputSpecThe DOMOutput spec for the current node
wrapsReactNode(Optional) passed through any elements that this component should be parent of

Returns:

ReactNode

method serializeFragment

The main entry method on this class for traversing through a schema tree and creating JSx.

reactSerializer.serializeFragment(fragment)

Signature:

serializeFragment(fragment: ProsemirrorFragment): JSX.Element;

Parameters:

ParameterTypeDescription
fragmentProsemirrorFragment

Returns:

JSX.Element

method serializeMark

Transform the provided mark into a JSX Element that wraps the current node

Signature:

serializeMark(mark: Mark, inline: boolean, wrappedElement: ReactNode): ReactNode;

Parameters:

ParameterTypeDescription
markMark
inlineboolean
wrappedElementReactNode

Returns:

ReactNode

method serializeNode

Transform the passed in node into a JSX Element

Signature:

serializeNode(node: ProsemirrorNode): ReactNode;

Parameters:

ParameterTypeDescription
nodeProsemirrorNode

Returns:

ReactNode

function createEditorView()

Creates a new editor view

Signature:

export declare function createEditorView(place: Node | ((p: HTMLElement) => void) | null, props: DirectEditorProps): EditorView;

Parameters:

ParameterTypeDescription
placeNode | ((p: HTMLElement) => void) | null
propsDirectEditorProps

Returns:

EditorView

variable RemirrorSSR

Remirror SSR component used for rendering in non dom environments.

Signature:

RemirrorSSR: <Extension extends AnyExtension>(props: RemirrorSSRProps<Extension>) => JSX.Element

interface RemirrorSSRProps

Signature:

export interface RemirrorSSRProps<Extension extends AnyExtension> extends EditorStateProps 

Extends: EditorStateProps

property attributes

The attributes to pass into the root div element.

Signature:

attributes: Shape;

property editable

Whether or not the editor is in an editable state

Signature:

editable: boolean;

property manager

The manager.

Signature:

manager: RemirrorManager<Extension>;

property state

A snapshot of the prosemirror editor state.

Signature:

state: EditorState;