Skip to main content

extension-react-component

package @remirror/extension-react-component

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:

ParameterTypeDescription
containerHTMLElement

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:

ParameterTypeDescription
{ 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 valid SSR 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 a 0 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.)

property name

Signature:

get name(): "reactComponent";

method createNodeViews

Create the node views from the custom components provided.

Signature:

createNodeViews(): Record<string, NodeViewMethod>;

Returns:

Record<string, NodeViewMethod>

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

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:

ParameterTypeDescription
portalContainerPortalContainer

Returns:

Array<[HTMLElement, MountedPortal]>

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

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 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 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 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 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;

type PortalList

Signature:

export declare type PortalList = ReadonlyArray<[HTMLElement, MountedPortal]>;

References: MountedPortal

type PortalMap

Signature:

export declare type PortalMap = Map<HTMLElement, MountedPortal>;

References: MountedPortal

type ReactComponentEnvironment

Signature:

export declare type ReactComponentEnvironment = 'ssr' | 'dom' | 'both';