@lexical/react 0.36.2 → 0.36.3-nightly.20251003.0

package/LexicalCollaborationPlugin.d.ts

@@ -6,13 +6,14 @@
  *
  */
 import type { JSX } from 'react';
-import type { Doc } from 'yjs';
 import { ExcludedProperties, Provider, SyncCursorPositionsFn } from '@lexical/yjs';
+import { Doc } from 'yjs';
 import { InitialEditorStateType } from './LexicalComposer';
 import { CursorsContainerRef } from './shared/useYjsCollaboration';
-type Props = {
+type ProviderFactory = (id: string, yjsDocMap: Map<string, Doc>) => Provider;
+type CollaborationPluginProps = {
     id: string;
-    providerFactory: (id: string, yjsDocMap: Map<string, Doc>) => Provider;
+    providerFactory: ProviderFactory;
     shouldBootstrap: boolean;
     username?: string;
     cursorColor?: string;
@@ -22,5 +23,17 @@ type Props = {
     awarenessData?: object;
     syncCursorPositionsFn?: SyncCursorPositionsFn;
 };
-export declare function CollaborationPlugin({ id, providerFactory, shouldBootstrap, username, cursorColor, cursorsContainerRef, initialEditorState, excludedProperties, awarenessData, syncCursorPositionsFn, }: Props): JSX.Element;
+export declare function CollaborationPlugin({ id, providerFactory, shouldBootstrap, username, cursorColor, cursorsContainerRef, initialEditorState, excludedProperties, awarenessData, syncCursorPositionsFn, }: CollaborationPluginProps): JSX.Element;
+type CollaborationPluginV2Props = {
+    id: string;
+    doc: Doc;
+    provider: Provider;
+    __shouldBootstrapUnsafe: boolean;
+    username?: string;
+    cursorColor?: string;
+    cursorsContainerRef?: CursorsContainerRef;
+    excludedProperties?: ExcludedProperties;
+    awarenessData?: object;
+};
+export declare function CollaborationPluginV2__EXPERIMENTAL({ id, doc, provider, __shouldBootstrapUnsafe, username, cursorColor, cursorsContainerRef, excludedProperties, awarenessData, }: CollaborationPluginV2Props): JSX.Element;
 export {};

package/LexicalCollaborationPlugin.dev.js

@@ -41,35 +41,18 @@ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBootstrap, binding, setDoc, cursorsContainerRef, initialEditorState, awarenessData, syncCursorPositionsFn = yjs.syncCursorPositions) {
   const isReloadingDoc = React.useRef(false);
-  const connect = React.useCallback(() => provider.connect(), [provider]);
-  const disconnect = React.useCallback(() => {
-    try {
-      provider.disconnect();
-    } catch (_e) {
-      // Do nothing
+  const onBootstrap = React.useCallback(() => {
+    const {
+      root
+    } = binding;
+    if (shouldBootstrap && root.isEmpty() && root._xmlText._length === 0) {
+      initializeEditor(editor, initialEditorState);
     }
-  }, [provider]);
+  }, [binding, editor, initialEditorState, shouldBootstrap]);
   React.useEffect(() => {
     const {
       root
     } = binding;
-    const {
-      awareness
-    } = provider;
-    const onStatus = ({
-      status
-    }) => {
-      editor.dispatchCommand(yjs.CONNECTED_COMMAND, status === 'connected');
-    };
-    const onSync = isSynced => {
-      if (shouldBootstrap && isSynced && root.isEmpty() && root._xmlText._length === 0 && isReloadingDoc.current === false) {
-        initializeEditor(editor, initialEditorState);
-      }
-      isReloadingDoc.current = false;
-    };
-    const onAwarenessUpdate = () => {
-      syncCursorPositionsFn(binding, provider);
-    };
     const onYjsTreeChanges = (events, transaction) => {
       const origin = transaction.origin;
       if (origin !== binding) {
@@ -77,33 +60,145 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
         yjs.syncYjsChangesToLexical(binding, provider, events, isFromUndoManger, syncCursorPositionsFn);
       }
     };
-    yjs.initLocalState(provider, name, color, document.activeElement === editor.getRootElement(), awarenessData || {});
+
+    // This updates the local editor state when we receive updates from other clients
+    root.getSharedType().observeDeep(onYjsTreeChanges);
+    const removeListener = editor.registerUpdateListener(({
+      prevEditorState,
+      editorState,
+      dirtyLeaves,
+      dirtyElements,
+      normalizedNodes,
+      tags
+    }) => {
+      if (!tags.has(lexical.SKIP_COLLAB_TAG)) {
+        yjs.syncLexicalUpdateToYjs(binding, provider, prevEditorState, editorState, dirtyElements, dirtyLeaves, normalizedNodes, tags);
+      }
+    });
+    return () => {
+      root.getSharedType().unobserveDeep(onYjsTreeChanges);
+      removeListener();
+    };
+  }, [binding, provider, editor, setDoc, docMap, id, syncCursorPositionsFn]);
+
+  // Note: 'reload' is not an actual Yjs event type. Included here for legacy support (#1409).
+  React.useEffect(() => {
     const onProviderDocReload = ydoc => {
       clearEditorSkipCollab(editor, binding);
       setDoc(ydoc);
       docMap.set(id, ydoc);
       isReloadingDoc.current = true;
     };
+    const onSync = () => {
+      isReloadingDoc.current = false;
+    };
     provider.on('reload', onProviderDocReload);
-    provider.on('status', onStatus);
     provider.on('sync', onSync);
-    awareness.on('update', onAwarenessUpdate);
+    return () => {
+      provider.off('reload', onProviderDocReload);
+      provider.off('sync', onSync);
+    };
+  }, [binding, provider, editor, setDoc, docMap, id]);
+  useProvider(editor, provider, name, color, isReloadingDoc, awarenessData, onBootstrap);
+  return useYjsCursors(binding, cursorsContainerRef);
+}
+function useYjsCollaborationV2__EXPERIMENTAL(editor, id, doc, provider, docMap, name, color, options = {}) {
+  const {
+    awarenessData,
+    excludedProperties,
+    rootName,
+    __shouldBootstrapUnsafe: shouldBootstrap
+  } = options;
+
+  // Note: v2 does not support 'reload' event, which is not an actual Yjs event type.
+  const isReloadingDoc = React.useMemo(() => ({
+    current: false
+  }), []);
+  const binding = React.useMemo(() => yjs.createBindingV2__EXPERIMENTAL(editor, id, doc, docMap, {
+    excludedProperties,
+    rootName
+  }), [editor, id, doc, docMap, excludedProperties, rootName]);
+  React.useEffect(() => {
+    docMap.set(id, doc);
+    return () => {
+      docMap.delete(id);
+    };
+  }, [doc, docMap, id]);
+  const onBootstrap = React.useCallback(() => {
+    const {
+      root
+    } = binding;
+    if (shouldBootstrap && root._length === 0) {
+      initializeEditor(editor);
+    }
+  }, [binding, editor, shouldBootstrap]);
+  React.useEffect(() => {
+    const {
+      root
+    } = binding;
+    const {
+      awareness
+    } = provider;
+    const onYjsTreeChanges = (events, transaction) => {
+      const origin = transaction.origin;
+      if (origin !== binding) {
+        const isFromUndoManger = origin instanceof yjs$1.UndoManager;
+        yjs.syncYjsChangesToLexicalV2__EXPERIMENTAL(binding, provider, events, transaction, isFromUndoManger);
+      }
+    };
+
     // This updates the local editor state when we receive updates from other clients
-    root.getSharedType().observeDeep(onYjsTreeChanges);
+    root.observeDeep(onYjsTreeChanges);
     const removeListener = editor.registerUpdateListener(({
       prevEditorState,
       editorState,
-      dirtyLeaves,
       dirtyElements,
       normalizedNodes,
       tags
     }) => {
-      if (tags.has(lexical.SKIP_COLLAB_TAG) === false) {
-        yjs.syncLexicalUpdateToYjs(binding, provider, prevEditorState, editorState, dirtyElements, dirtyLeaves, normalizedNodes, tags);
+      if (!tags.has(lexical.SKIP_COLLAB_TAG)) {
+        yjs.syncLexicalUpdateToYjsV2__EXPERIMENTAL(binding, provider, prevEditorState, editorState, dirtyElements, normalizedNodes, tags);
       }
     });
+    const onAwarenessUpdate = () => {
+      yjs.syncCursorPositions(binding, provider);
+    };
+    awareness.on('update', onAwarenessUpdate);
+    return () => {
+      root.unobserveDeep(onYjsTreeChanges);
+      removeListener();
+      awareness.off('update', onAwarenessUpdate);
+    };
+  }, [binding, provider, editor]);
+  useProvider(editor, provider, name, color, isReloadingDoc, awarenessData, onBootstrap);
+  return binding;
+}
+function useProvider(editor, provider, name, color, isReloadingDoc, awarenessData, onBootstrap) {
+  const connect = React.useCallback(() => provider.connect(), [provider]);
+  const disconnect = React.useCallback(() => {
+    try {
+      provider.disconnect();
+    } catch (_e) {
+      // Do nothing
+    }
+  }, [provider]);
+  React.useEffect(() => {
+    const onStatus = ({
+      status
+    }) => {
+      editor.dispatchCommand(yjs.CONNECTED_COMMAND, status === 'connected');
+    };
+    const onSync = isSynced => {
+      if (isSynced && isReloadingDoc.current === false && onBootstrap) {
+        onBootstrap();
+      }
+    };
+    yjs.initLocalState(provider, name, color, document.activeElement === editor.getRootElement(), awarenessData || {});
+    provider.on('status', onStatus);
+    provider.on('sync', onSync);
     const connectionPromise = connect();
     return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps -- expected that isReloadingDoc.current may change
       if (isReloadingDoc.current === false) {
         if (connectionPromise) {
           connectionPromise.then(disconnect);
@@ -120,21 +215,8 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
       }
       provider.off('sync', onSync);
       provider.off('status', onStatus);
-      provider.off('reload', onProviderDocReload);
-      awareness.off('update', onAwarenessUpdate);
-      root.getSharedType().unobserveDeep(onYjsTreeChanges);
-      docMap.delete(id);
-      removeListener();
     };
-  }, [binding, color, connect, disconnect, docMap, editor, id, initialEditorState, name, provider, shouldBootstrap, awarenessData, setDoc, syncCursorPositionsFn]);
-  const cursorsContainer = React.useMemo(() => {
-    const ref = element => {
-      binding.cursorsContainer = element;
-    };
-    return /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx("div", {
-      ref: ref
-    }), cursorsContainerRef && cursorsContainerRef.current || document.body);
-  }, [binding, cursorsContainerRef]);
+  }, [editor, provider, name, color, isReloadingDoc, awarenessData, onBootstrap, connect, disconnect]);
   React.useEffect(() => {
     return editor.registerCommand(yjs.TOGGLE_CONNECT_COMMAND, payload => {
       const shouldConnect = payload;
@@ -150,7 +232,16 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
       return true;
     }, lexical.COMMAND_PRIORITY_EDITOR);
   }, [connect, disconnect, editor]);
-  return cursorsContainer;
+}
+function useYjsCursors(binding, cursorsContainerRef) {
+  return React.useMemo(() => {
+    const ref = element => {
+      binding.cursorsContainer = element;
+    };
+    return /*#__PURE__*/reactDom.createPortal(/*#__PURE__*/jsxRuntime.jsx("div", {
+      ref: ref
+    }), cursorsContainerRef && cursorsContainerRef.current || document.body);
+  }, [binding, cursorsContainerRef]);
 }
 function useYjsFocusTracking(editor, provider, name, color, awarenessData) {
   React.useEffect(() => {
@@ -165,6 +256,13 @@ function useYjsFocusTracking(editor, provider, name, color, awarenessData) {
 }
 function useYjsHistory(editor, binding) {
   const undoManager = React.useMemo(() => yjs.createUndoManager(binding, binding.root.getSharedType()), [binding]);
+  return useYjsUndoManager(editor, undoManager);
+}
+function useYjsHistoryV2(editor, binding) {
+  const undoManager = React.useMemo(() => yjs.createUndoManager(binding, binding.root), [binding]);
+  return useYjsUndoManager(editor, undoManager);
+}
+function useYjsUndoManager(editor, undoManager) {
   React.useEffect(() => {
     const undo = () => {
       undoManager.undo();
@@ -314,16 +412,7 @@ function CollaborationPlugin({
     color
   } = collabContext;
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React.useEffect(() => {
-    collabContext.isCollabActive = true;
-    return () => {
-      // Resetting flag only when unmount top level editor collab plugin. Nested
-      // editors (e.g. image caption) should unmount without affecting it
-      if (editor._parentEditor == null) {
-        collabContext.isCollabActive = false;
-      }
-    };
-  }, [collabContext, editor]);
+  useCollabActive(collabContext, editor);
   const [provider, setProvider] = React.useState();
   const [doc, setDoc] = React.useState();
   React.useEffect(() => {
@@ -394,5 +483,46 @@ function YjsCollaborationCursors({
   useYjsFocusTracking(editor, provider, name, color, awarenessData);
   return cursors;
 }
+function CollaborationPluginV2__EXPERIMENTAL({
+  id,
+  doc,
+  provider,
+  __shouldBootstrapUnsafe,
+  username,
+  cursorColor,
+  cursorsContainerRef,
+  excludedProperties,
+  awarenessData
+}) {
+  const collabContext = LexicalCollaborationContext.useCollaborationContext(username, cursorColor);
+  const {
+    yjsDocMap,
+    name,
+    color
+  } = collabContext;
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  useCollabActive(collabContext, editor);
+  const binding = useYjsCollaborationV2__EXPERIMENTAL(editor, id, doc, provider, yjsDocMap, name, color, {
+    __shouldBootstrapUnsafe,
+    awarenessData,
+    excludedProperties
+  });
+  useYjsHistoryV2(editor, binding);
+  useYjsFocusTracking(editor, provider, name, color, awarenessData);
+  return useYjsCursors(binding, cursorsContainerRef);
+}
+const useCollabActive = (collabContext, editor) => {
+  React.useEffect(() => {
+    collabContext.isCollabActive = true;
+    return () => {
+      // Resetting flag only when unmount top level editor collab plugin. Nested
+      // editors (e.g. image caption) should unmount without affecting it
+      if (editor._parentEditor == null) {
+        collabContext.isCollabActive = false;
+      }
+    };
+  }, [collabContext, editor]);
+};
 
 exports.CollaborationPlugin = CollaborationPlugin;
+exports.CollaborationPluginV2__EXPERIMENTAL = CollaborationPluginV2__EXPERIMENTAL;

package/LexicalCollaborationPlugin.dev.mjs

@@ -8,11 +8,11 @@
 
 import { useCollaborationContext } from '@lexical/react/LexicalCollaborationContext';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { syncCursorPositions, initLocalState, syncLexicalUpdateToYjs, TOGGLE_CONNECT_COMMAND, createUndoManager, setLocalStateFocus, CONNECTED_COMMAND, syncYjsChangesToLexical, createBinding } from '@lexical/yjs';
+import { syncCursorPositions, syncLexicalUpdateToYjs, createUndoManager, setLocalStateFocus, createBindingV2__EXPERIMENTAL, syncLexicalUpdateToYjsV2__EXPERIMENTAL, syncYjsChangesToLexical, initLocalState, TOGGLE_CONNECT_COMMAND, syncYjsChangesToLexicalV2__EXPERIMENTAL, CONNECTED_COMMAND, createBinding } from '@lexical/yjs';
 import * as React from 'react';
 import { useRef, useCallback, useEffect, useMemo, useState } from 'react';
 import { mergeRegister } from '@lexical/utils';
-import { SKIP_COLLAB_TAG, COMMAND_PRIORITY_EDITOR, UNDO_COMMAND, REDO_COMMAND, FOCUS_COMMAND, BLUR_COMMAND, CAN_UNDO_COMMAND, CAN_REDO_COMMAND, $getRoot, HISTORY_MERGE_TAG, $createParagraphNode, $getSelection } from 'lexical';
+import { SKIP_COLLAB_TAG, FOCUS_COMMAND, COMMAND_PRIORITY_EDITOR, BLUR_COMMAND, $getRoot, HISTORY_MERGE_TAG, $createParagraphNode, $getSelection, UNDO_COMMAND, REDO_COMMAND, CAN_UNDO_COMMAND, CAN_REDO_COMMAND } from 'lexical';
 import { createPortal } from 'react-dom';
 import { UndoManager } from 'yjs';
 import { jsx, Fragment } from 'react/jsx-runtime';
@@ -27,35 +27,18 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 
 function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBootstrap, binding, setDoc, cursorsContainerRef, initialEditorState, awarenessData, syncCursorPositionsFn = syncCursorPositions) {
   const isReloadingDoc = useRef(false);
-  const connect = useCallback(() => provider.connect(), [provider]);
-  const disconnect = useCallback(() => {
-    try {
-      provider.disconnect();
-    } catch (_e) {
-      // Do nothing
+  const onBootstrap = useCallback(() => {
+    const {
+      root
+    } = binding;
+    if (shouldBootstrap && root.isEmpty() && root._xmlText._length === 0) {
+      initializeEditor(editor, initialEditorState);
     }
-  }, [provider]);
+  }, [binding, editor, initialEditorState, shouldBootstrap]);
   useEffect(() => {
     const {
       root
     } = binding;
-    const {
-      awareness
-    } = provider;
-    const onStatus = ({
-      status
-    }) => {
-      editor.dispatchCommand(CONNECTED_COMMAND, status === 'connected');
-    };
-    const onSync = isSynced => {
-      if (shouldBootstrap && isSynced && root.isEmpty() && root._xmlText._length === 0 && isReloadingDoc.current === false) {
-        initializeEditor(editor, initialEditorState);
-      }
-      isReloadingDoc.current = false;
-    };
-    const onAwarenessUpdate = () => {
-      syncCursorPositionsFn(binding, provider);
-    };
     const onYjsTreeChanges = (events, transaction) => {
       const origin = transaction.origin;
       if (origin !== binding) {
@@ -63,33 +46,145 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
         syncYjsChangesToLexical(binding, provider, events, isFromUndoManger, syncCursorPositionsFn);
       }
     };
-    initLocalState(provider, name, color, document.activeElement === editor.getRootElement(), awarenessData || {});
+
+    // This updates the local editor state when we receive updates from other clients
+    root.getSharedType().observeDeep(onYjsTreeChanges);
+    const removeListener = editor.registerUpdateListener(({
+      prevEditorState,
+      editorState,
+      dirtyLeaves,
+      dirtyElements,
+      normalizedNodes,
+      tags
+    }) => {
+      if (!tags.has(SKIP_COLLAB_TAG)) {
+        syncLexicalUpdateToYjs(binding, provider, prevEditorState, editorState, dirtyElements, dirtyLeaves, normalizedNodes, tags);
+      }
+    });
+    return () => {
+      root.getSharedType().unobserveDeep(onYjsTreeChanges);
+      removeListener();
+    };
+  }, [binding, provider, editor, setDoc, docMap, id, syncCursorPositionsFn]);
+
+  // Note: 'reload' is not an actual Yjs event type. Included here for legacy support (#1409).
+  useEffect(() => {
     const onProviderDocReload = ydoc => {
       clearEditorSkipCollab(editor, binding);
       setDoc(ydoc);
       docMap.set(id, ydoc);
       isReloadingDoc.current = true;
     };
+    const onSync = () => {
+      isReloadingDoc.current = false;
+    };
     provider.on('reload', onProviderDocReload);
-    provider.on('status', onStatus);
     provider.on('sync', onSync);
-    awareness.on('update', onAwarenessUpdate);
+    return () => {
+      provider.off('reload', onProviderDocReload);
+      provider.off('sync', onSync);
+    };
+  }, [binding, provider, editor, setDoc, docMap, id]);
+  useProvider(editor, provider, name, color, isReloadingDoc, awarenessData, onBootstrap);
+  return useYjsCursors(binding, cursorsContainerRef);
+}
+function useYjsCollaborationV2__EXPERIMENTAL(editor, id, doc, provider, docMap, name, color, options = {}) {
+  const {
+    awarenessData,
+    excludedProperties,
+    rootName,
+    __shouldBootstrapUnsafe: shouldBootstrap
+  } = options;
+
+  // Note: v2 does not support 'reload' event, which is not an actual Yjs event type.
+  const isReloadingDoc = useMemo(() => ({
+    current: false
+  }), []);
+  const binding = useMemo(() => createBindingV2__EXPERIMENTAL(editor, id, doc, docMap, {
+    excludedProperties,
+    rootName
+  }), [editor, id, doc, docMap, excludedProperties, rootName]);
+  useEffect(() => {
+    docMap.set(id, doc);
+    return () => {
+      docMap.delete(id);
+    };
+  }, [doc, docMap, id]);
+  const onBootstrap = useCallback(() => {
+    const {
+      root
+    } = binding;
+    if (shouldBootstrap && root._length === 0) {
+      initializeEditor(editor);
+    }
+  }, [binding, editor, shouldBootstrap]);
+  useEffect(() => {
+    const {
+      root
+    } = binding;
+    const {
+      awareness
+    } = provider;
+    const onYjsTreeChanges = (events, transaction) => {
+      const origin = transaction.origin;
+      if (origin !== binding) {
+        const isFromUndoManger = origin instanceof UndoManager;
+        syncYjsChangesToLexicalV2__EXPERIMENTAL(binding, provider, events, transaction, isFromUndoManger);
+      }
+    };
+
     // This updates the local editor state when we receive updates from other clients
-    root.getSharedType().observeDeep(onYjsTreeChanges);
+    root.observeDeep(onYjsTreeChanges);
     const removeListener = editor.registerUpdateListener(({
       prevEditorState,
       editorState,
-      dirtyLeaves,
       dirtyElements,
       normalizedNodes,
       tags
     }) => {
-      if (tags.has(SKIP_COLLAB_TAG) === false) {
-        syncLexicalUpdateToYjs(binding, provider, prevEditorState, editorState, dirtyElements, dirtyLeaves, normalizedNodes, tags);
+      if (!tags.has(SKIP_COLLAB_TAG)) {
+        syncLexicalUpdateToYjsV2__EXPERIMENTAL(binding, provider, prevEditorState, editorState, dirtyElements, normalizedNodes, tags);
       }
     });
+    const onAwarenessUpdate = () => {
+      syncCursorPositions(binding, provider);
+    };
+    awareness.on('update', onAwarenessUpdate);
+    return () => {
+      root.unobserveDeep(onYjsTreeChanges);
+      removeListener();
+      awareness.off('update', onAwarenessUpdate);
+    };
+  }, [binding, provider, editor]);
+  useProvider(editor, provider, name, color, isReloadingDoc, awarenessData, onBootstrap);
+  return binding;
+}
+function useProvider(editor, provider, name, color, isReloadingDoc, awarenessData, onBootstrap) {
+  const connect = useCallback(() => provider.connect(), [provider]);
+  const disconnect = useCallback(() => {
+    try {
+      provider.disconnect();
+    } catch (_e) {
+      // Do nothing
+    }
+  }, [provider]);
+  useEffect(() => {
+    const onStatus = ({
+      status
+    }) => {
+      editor.dispatchCommand(CONNECTED_COMMAND, status === 'connected');
+    };
+    const onSync = isSynced => {
+      if (isSynced && isReloadingDoc.current === false && onBootstrap) {
+        onBootstrap();
+      }
+    };
+    initLocalState(provider, name, color, document.activeElement === editor.getRootElement(), awarenessData || {});
+    provider.on('status', onStatus);
+    provider.on('sync', onSync);
     const connectionPromise = connect();
     return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps -- expected that isReloadingDoc.current may change
       if (isReloadingDoc.current === false) {
         if (connectionPromise) {
           connectionPromise.then(disconnect);
@@ -106,21 +201,8 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
       }
       provider.off('sync', onSync);
       provider.off('status', onStatus);
-      provider.off('reload', onProviderDocReload);
-      awareness.off('update', onAwarenessUpdate);
-      root.getSharedType().unobserveDeep(onYjsTreeChanges);
-      docMap.delete(id);
-      removeListener();
     };
-  }, [binding, color, connect, disconnect, docMap, editor, id, initialEditorState, name, provider, shouldBootstrap, awarenessData, setDoc, syncCursorPositionsFn]);
-  const cursorsContainer = useMemo(() => {
-    const ref = element => {
-      binding.cursorsContainer = element;
-    };
-    return /*#__PURE__*/createPortal(/*#__PURE__*/jsx("div", {
-      ref: ref
-    }), cursorsContainerRef && cursorsContainerRef.current || document.body);
-  }, [binding, cursorsContainerRef]);
+  }, [editor, provider, name, color, isReloadingDoc, awarenessData, onBootstrap, connect, disconnect]);
   useEffect(() => {
     return editor.registerCommand(TOGGLE_CONNECT_COMMAND, payload => {
       const shouldConnect = payload;
@@ -136,7 +218,16 @@ function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBo
       return true;
     }, COMMAND_PRIORITY_EDITOR);
   }, [connect, disconnect, editor]);
-  return cursorsContainer;
+}
+function useYjsCursors(binding, cursorsContainerRef) {
+  return useMemo(() => {
+    const ref = element => {
+      binding.cursorsContainer = element;
+    };
+    return /*#__PURE__*/createPortal(/*#__PURE__*/jsx("div", {
+      ref: ref
+    }), cursorsContainerRef && cursorsContainerRef.current || document.body);
+  }, [binding, cursorsContainerRef]);
 }
 function useYjsFocusTracking(editor, provider, name, color, awarenessData) {
   useEffect(() => {
@@ -151,6 +242,13 @@ function useYjsFocusTracking(editor, provider, name, color, awarenessData) {
 }
 function useYjsHistory(editor, binding) {
   const undoManager = useMemo(() => createUndoManager(binding, binding.root.getSharedType()), [binding]);
+  return useYjsUndoManager(editor, undoManager);
+}
+function useYjsHistoryV2(editor, binding) {
+  const undoManager = useMemo(() => createUndoManager(binding, binding.root), [binding]);
+  return useYjsUndoManager(editor, undoManager);
+}
+function useYjsUndoManager(editor, undoManager) {
   useEffect(() => {
     const undo = () => {
       undoManager.undo();
@@ -300,16 +398,7 @@ function CollaborationPlugin({
     color
   } = collabContext;
   const [editor] = useLexicalComposerContext();
-  useEffect(() => {
-    collabContext.isCollabActive = true;
-    return () => {
-      // Resetting flag only when unmount top level editor collab plugin. Nested
-      // editors (e.g. image caption) should unmount without affecting it
-      if (editor._parentEditor == null) {
-        collabContext.isCollabActive = false;
-      }
-    };
-  }, [collabContext, editor]);
+  useCollabActive(collabContext, editor);
   const [provider, setProvider] = useState();
   const [doc, setDoc] = useState();
   useEffect(() => {
@@ -380,5 +469,45 @@ function YjsCollaborationCursors({
   useYjsFocusTracking(editor, provider, name, color, awarenessData);
   return cursors;
 }
+function CollaborationPluginV2__EXPERIMENTAL({
+  id,
+  doc,
+  provider,
+  __shouldBootstrapUnsafe,
+  username,
+  cursorColor,
+  cursorsContainerRef,
+  excludedProperties,
+  awarenessData
+}) {
+  const collabContext = useCollaborationContext(username, cursorColor);
+  const {
+    yjsDocMap,
+    name,
+    color
+  } = collabContext;
+  const [editor] = useLexicalComposerContext();
+  useCollabActive(collabContext, editor);
+  const binding = useYjsCollaborationV2__EXPERIMENTAL(editor, id, doc, provider, yjsDocMap, name, color, {
+    __shouldBootstrapUnsafe,
+    awarenessData,
+    excludedProperties
+  });
+  useYjsHistoryV2(editor, binding);
+  useYjsFocusTracking(editor, provider, name, color, awarenessData);
+  return useYjsCursors(binding, cursorsContainerRef);
+}
+const useCollabActive = (collabContext, editor) => {
+  useEffect(() => {
+    collabContext.isCollabActive = true;
+    return () => {
+      // Resetting flag only when unmount top level editor collab plugin. Nested
+      // editors (e.g. image caption) should unmount without affecting it
+      if (editor._parentEditor == null) {
+        collabContext.isCollabActive = false;
+      }
+    };
+  }, [collabContext, editor]);
+};
 
-export { CollaborationPlugin };
+export { CollaborationPlugin, CollaborationPluginV2__EXPERIMENTAL };

package/LexicalCollaborationPlugin.mjs

@@ -9,4 +9,5 @@
 import * as modDev from './LexicalCollaborationPlugin.dev.mjs';
 import * as modProd from './LexicalCollaborationPlugin.prod.mjs';
 const mod = process.env.NODE_ENV !== 'production' ? modDev : modProd;
-export const CollaborationPlugin = mod.CollaborationPlugin;
+export const CollaborationPlugin = mod.CollaborationPlugin;
+export const CollaborationPluginV2__EXPERIMENTAL = mod.CollaborationPluginV2__EXPERIMENTAL;