@lexical/react/dist/LexicalCollaborationPlugin.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 { InitialEditorStateType } from './LexicalComposer.js';
import type { Doc, XmlElement, XmlText } from 'yjs';
import { type ExcludedProperties, type Provider, type SyncCursorPositionsFn } from '@lexical/yjs';
import { type JSX } from 'react';
import { type CursorsContainerRef } from './shared/useYjsCollaboration.js';
type ProviderFactory = (id: string, yjsDocMap: Map<string, Doc>) => Provider;
type CollaborationPluginProps = {
    id: string;
    providerFactory: ProviderFactory;
    /**
     * Seed the document with an empty paragraph (or `initialEditorState`) once
     * the provider reports `sync` and the document is still empty.
     *
     * At most one client may pass `true` for a given document. The seed is an
     * ordinary Yjs insert rather than a compare-and-set, so two clients that both
     * observe an empty document each insert a paragraph and Yjs keeps both,
     * leaving every client with a spurious leading empty block. This is easy to
     * hit with a nested editor (an image caption, a sticky note), where every
     * client mounts the editor -- and so connects to its document -- at the same
     * moment the node itself syncs. Prefer bootstrapping the document
     * server-side; see the collaboration docs.
     */
    shouldBootstrap: boolean;
    username?: string;
    cursorColor?: string;
    cursorsContainerRef?: CursorsContainerRef;
    initialEditorState?: InitialEditorStateType;
    excludedProperties?: ExcludedProperties;
    awarenessData?: object;
    syncCursorPositionsFn?: SyncCursorPositionsFn;
    /** Opt in to the new CSS Highlights-based selection rendering (if supported by the browser).
     * Fallback to legacy method if not enabled or not supported.
     */
    selectionHighlight?: boolean;
    /** Customize the Yjs shared-type key used for the root `XmlText`. Defaults to `'root'`. */
    rootName?: string;
    /**
     * Resolve the root `XmlText` from the `Doc` yourself, for roots that are not
     * a top-level shared type (e.g. an `XmlText` held in a `Y.Map` or `Y.Array`,
     * as when one `Doc` stores many independently editable documents). Takes
     * precedence over `rootName`.
     *
     * Read when the binding is created: this prop and `rootName` cannot repoint
     * a mounted editor at another document. Remount the editor (a React `key` on
     * the component that owns it) to edit a different one — a remount of this
     * plugin alone would leave the previous document's content in the editor and
     * write it into the new root.
     */
    getXmlText?: (doc: Doc) => XmlText;
};
/**
 * Connects the editor to a Yjs document for real-time collaboration, syncing
 * editor state and rendering remote users' cursors and selections. Provide a
 * `providerFactory` that creates the Yjs {@link Provider} for the given
 * document `id`. Must be used within a {@link LexicalCollaboration} provider.
 *
 * @returns The element that renders collaborators' cursors (or an empty
 * fragment until the provider and binding are initialized).
 */
export declare function CollaborationPlugin({ id, providerFactory, shouldBootstrap, username, cursorColor, cursorsContainerRef, initialEditorState, excludedProperties, awarenessData, syncCursorPositionsFn, selectionHighlight, rootName, getXmlText, }: CollaborationPluginProps): JSX.Element;
type CollaborationPluginV2Props = {
    id: string;
    doc: Doc;
    provider: Provider;
    __shouldBootstrapUnsafe?: boolean;
    username?: string;
    cursorColor?: string;
    cursorsContainerRef?: CursorsContainerRef;
    excludedProperties?: ExcludedProperties;
    awarenessData?: object;
    /** Opt in to the new CSS Highlights-based selection rendering (if supported by the browser).
     * Fallback to legacy method if not enabled or not supported.
     */
    selectionHighlight?: boolean;
    /** Customize the Yjs shared-type key used for the root `XmlElement`. Defaults to `'root-v2'`. */
    rootName?: string;
    /**
     * Resolve the root `XmlElement` from the `Doc` yourself, for roots that are
     * not a top-level shared type (e.g. an `XmlElement` held in a `Y.Map` or
     * `Y.Array`, as when one `Doc` stores many independently editable
     * documents). The element must be created as `new XmlElement()` without a
     * `nodeName`. Takes precedence over `rootName`.
     *
     * Read when the binding is created: this prop and `rootName` cannot repoint
     * a mounted editor at another document. Remount the editor (a React `key` on
     * the component that owns it) to edit a different one — a remount of this
     * plugin alone would leave the previous document's content in the editor and
     * write it into the new root.
     */
    getXmlElement?: (doc: Doc) => XmlElement;
};
/**
 * A variant of {@link CollaborationPlugin} that takes an already-created Yjs
 * `doc` and {@link Provider} directly instead of a provider factory, giving the
 * application full control over their lifecycle. Must be used within a
 * {@link LexicalCollaboration} provider.
 *
 * @experimental The API may change in a future release.
 * @returns The element that renders collaborators' cursors.
 */
export declare function CollaborationPluginV2__EXPERIMENTAL({ id, doc, provider, __shouldBootstrapUnsafe, username, cursorColor, cursorsContainerRef, excludedProperties, awarenessData, selectionHighlight, rootName, getXmlElement, }: CollaborationPluginV2Props): JSX.Element;
export {};