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

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

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

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