@lexical/react/dist/ReactPluginHostExtension.d.ts

This package provides Lexical components and hooks for React applications.

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */
import type { DecoratorComponentProps } from './shared/types.js';
import { type AnyLexicalExtension, type LexicalEditor, type LexicalExtensionOutput } from 'lexical';
import * as React from 'react';
import { type JSX } from 'react';
import { type Container, type Root } from 'react-dom/client';
export type { DecoratorComponentProps };
/**
 * Payload for {@link REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND}: the React DOM `root`
 * that the plugin host renders into.
 */
export interface HostMountCommandArg {
    root: Root;
}
/**
 * Payload for {@link 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.
 */
export interface MountPluginCommandArg {
    key: string;
    element: JSX.Element | null;
    domNode?: Element | DocumentFragment | null;
}
/**
 * Mounts the output `Component` of a {@link 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
 * {@link LexicalExtensionComposer}. The editor must use
 * {@link ReactPluginHostExtension} and its host must already be mounted with
 * {@link mountReactPluginHost}.
 */
export declare function mountReactExtensionComponent<Extension extends AnyLexicalExtension>(editor: LexicalEditor, opts: {
    extension: Extension;
    props: [LexicalExtensionOutput<Extension>] extends [
        {
            Component: React.ComponentType<infer OutputComponentProps>;
        }
    ] ? /** The Props from the Extension output Component */ OutputComponentProps | null : never;
} & Omit<MountPluginCommandArg, 'element'>): void;
/**
 * 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
 * {@link ReactPluginHostExtension} with its host mounted via
 * {@link mountReactPluginHost}.
 */
export declare function mountReactPluginComponent<P extends Record<never, never> = Record<never, never>>(editor: LexicalEditor, opts: {
    Component: React.ComponentType<P>;
    props: (P & React.Attributes) | null;
} & Omit<MountPluginCommandArg, 'element'>): void;
/**
 * Mounts a React `element` (the lowest-level entry point) into an editor's
 * plugin host. {@link mountReactExtensionComponent} and
 * {@link mountReactPluginComponent} are built on top of this. The editor must
 * use {@link ReactPluginHostExtension} with its host mounted via
 * {@link mountReactPluginHost}.
 */
export declare function mountReactPluginElement(editor: LexicalEditor, opts: MountPluginCommandArg): void;
/**
 * 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
 * {@link mountReactExtensionComponent}, {@link mountReactPluginComponent}, or
 * {@link mountReactPluginElement} on an editor using
 * {@link ReactPluginHostExtension}.
 */
export declare function mountReactPluginHost(editor: LexicalEditor, container: Container): void;
/**
 * Command dispatched by {@link mountReactPluginHost} to mount the React plugin
 * host into a React root (see {@link HostMountCommandArg}). Handled by
 * {@link ReactPluginHostExtension}.
 */
export declare const REACT_PLUGIN_HOST_MOUNT_ROOT_COMMAND: import("lexical").LexicalCommand<HostMountCommandArg>;
/**
 * Command dispatched by the mount helpers to add, update, or remove a piece of
 * React content in the plugin host. Its payload is a
 * {@link MountPluginCommandArg}, and it is handled by
 * {@link ReactPluginHostExtension}.
 */
export declare const REACT_PLUGIN_HOST_MOUNT_PLUGIN_COMMAND: import("lexical").LexicalCommand<MountPluginCommandArg>;
/**
 * 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 {@link mountReactPluginHost} for any React content to work.
 * Afterwards, you may use {@link mountReactExtensionComponent} to
 * render UI for a specific React Extension.
 * {@link mountReactPluginComponent} and
 * {@link mountReactPluginElement} can be used to render
 * legacy React plug-ins (or any React content).
 */
export declare const ReactPluginHostExtension: import("lexical").LexicalExtension<import("lexical").ExtensionConfigBase, "@lexical/react/ReactPluginHost", {
    mountReactPlugin: (arg: MountPluginCommandArg) => void;
    mountReactPluginHost: (container: Container) => boolean;
    mountedPluginsStore: import("@preact/signals-core").Signal<{
        plugins: Map<string, MountPluginCommandArg>;
    }>;
}, unknown>;