Skip to main content

@lexical/react/ReactPluginHostExtension

Interfaces​

DecoratorComponentProps​

Defined in: packages/lexical-react/src/shared/types.ts:31

Props passed to a decorator component registered through ReactConfig: the composer context (the [editor, context] tuple) for the editor the decorator is rendered in.

Properties​

context​

context: LexicalComposerContextWithEditor

Defined in: packages/lexical-react/src/shared/types.ts:32

HostMountCommandArg​

Defined in: packages/lexical-react/src/ReactPluginHostExtension.tsx:42

Payload for REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND: the React DOM root that the plugin host renders into.

Properties​

root​

root: Root

Defined in: packages/lexical-react/src/ReactPluginHostExtension.tsx:43

MountPluginCommandArg​

Defined in: packages/lexical-react/src/ReactPluginHostExtension.tsx:52

Payload for REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND, describing a piece of React content to mount into the plugin host: a unique key, the element to render (or null to unmount it), and an optional domNode to portal it into.

Properties​

domNode?​

optional domNode?: Element | DocumentFragment | null

Defined in: packages/lexical-react/src/ReactPluginHostExtension.tsx:55

element​

element: Element | null

Defined in: packages/lexical-react/src/ReactPluginHostExtension.tsx:54

key​

key: string

Defined in: packages/lexical-react/src/ReactPluginHostExtension.tsx:53

Variables​

REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND​

const REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND: LexicalCommand<MountPluginCommandArg>

Defined in: packages/lexical-react/src/ReactPluginHostExtension.tsx:165

Command dispatched by the mount helpers to add, update, or remove a piece of React content in the plugin host. Its payload is a MountPluginCommandArg, and it is handled by ReactPluginHostExtension.

REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND​

const REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND: LexicalCommand<HostMountCommandArg>

Defined in: packages/lexical-react/src/ReactPluginHostExtension.tsx:155

Command dispatched by mountReactPluginHost to mount the React plugin host into a React root (see HostMountCommandArg). Handled by ReactPluginHostExtension.

ReactPluginHostExtension​

const ReactPluginHostExtension: LexicalExtension<ExtensionConfigBase, "@lexical/react/ReactPluginHost", { mountedPluginsStore: Signal<{ plugins: Map<string, MountPluginCommandArg>; }>; mountReactPlugin: (arg) => void; mountReactPluginHost: (container) => boolean; }, unknown>

Defined in: packages/lexical-react/src/ReactPluginHostExtension.tsx:216

This extension provides a React host for editors that are not built with LexicalExtensionComposer (e.g. you are using Vanilla JS or some other framework).

You must use mountReactPluginHost for any React content to work. Afterwards, you may use mountReactExtensionComponent to render UI for a specific React Extension. mountReactPluginComponent and mountReactPluginElement can be used to render legacy React plug-ins (or any React content).

Functions​

mountReactExtensionComponent()​

mountReactExtensionComponent<Extension>(editor, opts): void

Defined in: packages/lexical-react/src/ReactPluginHostExtension.tsx:66

Mounts the output Component of a ReactExtension-based extension into an editor's plugin host, rendering it with the given props. Use this to add UI for a specific extension to an editor that was not built with LexicalExtensionComposer. The editor must use ReactPluginHostExtension and its host must already be mounted with mountReactPluginHost.

Type Parameters​

Extension​

Extension extends AnyLexicalExtension

Parameters​

editor​

LexicalEditor

opts​

object & Omit<MountPluginCommandArg, "element">

Returns​

void

mountReactPluginComponent()​

mountReactPluginComponent<P>(editor, opts): void

Defined in: packages/lexical-react/src/ReactPluginHostExtension.tsx:100

Mounts an arbitrary React Component (rendered with props, or unmounted when props is null) into an editor's plugin host. Use this for legacy React plug-ins or any React content. The editor must use ReactPluginHostExtension with its host mounted via mountReactPluginHost.

Type Parameters​

P​

P extends Record<never, never> = Record<never, never>

Parameters​

editor​

LexicalEditor

opts​

object & Omit<MountPluginCommandArg, "element">

Returns​

void

mountReactPluginElement()​

mountReactPluginElement(editor, opts): void

Defined in: packages/lexical-react/src/ReactPluginHostExtension.tsx:123

Mounts a React element (the lowest-level entry point) into an editor's plugin host. mountReactExtensionComponent and mountReactPluginComponent are built on top of this. The editor must use ReactPluginHostExtension with its host mounted via mountReactPluginHost.

Parameters​

editor​

LexicalEditor

opts​

MountPluginCommandArg

Returns​

void

mountReactPluginHost()​

mountReactPluginHost(editor, container): void

Defined in: packages/lexical-react/src/ReactPluginHostExtension.tsx:140

Creates a React root in container and mounts the editor's React plugin host into it. Call this once before mounting any React content with mountReactExtensionComponent, mountReactPluginComponent, or mountReactPluginElement on an editor using ReactPluginHostExtension.

Parameters​

editor​

LexicalEditor

container​

Container

Returns​

void