zurfyx-lexical-react 0.39.1-nightly.20251225.0

package/dist/LexicalCollaborationPlugin.dev.mjs

@@ -0,0 +1,543 @@
+/**
+ * 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 { useCollaborationContext } from '@lexical/react/LexicalCollaborationContext';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { syncCursorPositions, syncLexicalUpdateToYjs, createUndoManager, setLocalStateFocus, createBindingV2__EXPERIMENTAL, CLEAR_DIFF_VERSIONS_COMMAND__EXPERIMENTAL, syncYjsStateToLexicalV2__EXPERIMENTAL, DIFF_VERSIONS_COMMAND__EXPERIMENTAL, renderSnapshot__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, 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';
+
+/**
+ * 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.
+ *
+ */
+
+function useYjsCollaboration(editor, id, provider, docMap, name, color, shouldBootstrap, binding, setDoc, cursorsContainerRef, initialEditorState, awarenessData, syncCursorPositionsFn = syncCursorPositions) {
+  const isReloadingDoc = useRef(false);
+  const onBootstrap = useCallback(() => {
+    const {
+      root
+    } = binding;
+    if (shouldBootstrap && root.isEmpty() && root._xmlText._length === 0) {
+      initializeEditor(editor, initialEditorState);
+    }
+  }, [binding, editor, initialEditorState, shouldBootstrap]);
+  useEffect(() => {
+    const {
+      root
+    } = binding;
+    const onYjsTreeChanges = (events, transaction) => {
+      const origin = transaction.origin;
+      if (origin !== binding) {
+        const isFromUndoManger = origin instanceof UndoManager;
+        syncYjsChangesToLexical(binding, provider, events, isFromUndoManger, syncCursorPositionsFn);
+      }
+    };
+
+    // 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('sync', onSync);
+    return () => {
+      provider.off('reload', onProviderDocReload);
+      provider.off('sync', onSync);
+    };
+  }, [binding, provider, editor, setDoc, docMap, id]);
+  useProvider(editor, provider, name, color, isReloadingDoc, awarenessData, onBootstrap);
+  useAwareness(binding, provider);
+  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]);
+  const [diffSnapshots, setDiffSnapshots] = useState();
+  useEffect(() => {
+    mergeRegister(editor.registerCommand(CLEAR_DIFF_VERSIONS_COMMAND__EXPERIMENTAL, () => {
+      setDiffSnapshots(null);
+      // Ensure that any state already in Yjs is loaded into the editor (eg: after clearing diff view).
+      syncYjsStateToLexicalV2__EXPERIMENTAL(binding, provider);
+      return true;
+    }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(DIFF_VERSIONS_COMMAND__EXPERIMENTAL, ({
+      prevSnapshot,
+      snapshot
+    }) => {
+      setDiffSnapshots({
+        prevSnapshot,
+        snapshot
+      });
+      return true;
+    }, COMMAND_PRIORITY_EDITOR));
+  }, [editor, binding, provider]);
+  useEffect(() => {
+    const {
+      root
+    } = binding;
+    if (diffSnapshots) {
+      renderSnapshot__EXPERIMENTAL(binding, diffSnapshots.snapshot, diffSnapshots.prevSnapshot);
+      return;
+    }
+    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.observeDeep(onYjsTreeChanges);
+    const removeListener = editor.registerUpdateListener(({
+      prevEditorState,
+      editorState,
+      dirtyElements,
+      normalizedNodes,
+      tags
+    }) => {
+      if (!tags.has(SKIP_COLLAB_TAG)) {
+        syncLexicalUpdateToYjsV2__EXPERIMENTAL(binding, provider, prevEditorState, editorState, dirtyElements, normalizedNodes, tags);
+      }
+    });
+    return () => {
+      root.unobserveDeep(onYjsTreeChanges);
+      removeListener();
+    };
+  }, [binding, provider, editor, diffSnapshots]);
+  useProvider(editor, provider, name, color, isReloadingDoc, awarenessData, onBootstrap);
+  useAwareness(binding, provider);
+  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);
+        } else {
+          // Workaround for race condition in StrictMode. It's possible there
+          // is a different race for the above case where connect returns a
+          // promise, but we don't have an example of that in-repo.
+          // It's possible that there is a similar issue with
+          // TOGGLE_CONNECT_COMMAND below when the provider connect returns a
+          // promise.
+          // https://github.com/facebook/lexical/issues/6640
+          disconnect();
+        }
+      }
+      provider.off('sync', onSync);
+      provider.off('status', onStatus);
+    };
+  }, [editor, provider, name, color, isReloadingDoc, awarenessData, onBootstrap, connect, disconnect]);
+  useEffect(() => {
+    return editor.registerCommand(TOGGLE_CONNECT_COMMAND, payload => {
+      const shouldConnect = payload;
+      if (shouldConnect) {
+        // eslint-disable-next-line no-console
+        console.log('Collaboration connected!');
+        connect();
+      } else {
+        // eslint-disable-next-line no-console
+        console.log('Collaboration disconnected!');
+        disconnect();
+      }
+      return true;
+    }, COMMAND_PRIORITY_EDITOR);
+  }, [connect, disconnect, editor]);
+}
+function useAwareness(binding, provider) {
+  useEffect(() => {
+    const {
+      awareness
+    } = provider;
+    const onAwarenessUpdate = () => {
+      syncCursorPositions(binding, provider);
+    };
+    awareness.on('update', onAwarenessUpdate);
+    return () => {
+      awareness.off('update', onAwarenessUpdate);
+    };
+  }, [binding, provider]);
+}
+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(() => {
+    return mergeRegister(editor.registerCommand(FOCUS_COMMAND, () => {
+      setLocalStateFocus(provider, name, color, true, awarenessData || {});
+      return false;
+    }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(BLUR_COMMAND, () => {
+      setLocalStateFocus(provider, name, color, false, awarenessData || {});
+      return false;
+    }, COMMAND_PRIORITY_EDITOR));
+  }, [color, editor, name, provider, 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();
+    };
+    const redo = () => {
+      undoManager.redo();
+    };
+    return mergeRegister(editor.registerCommand(UNDO_COMMAND, () => {
+      undo();
+      return true;
+    }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(REDO_COMMAND, () => {
+      redo();
+      return true;
+    }, COMMAND_PRIORITY_EDITOR));
+  });
+  const clearHistory = useCallback(() => {
+    undoManager.clear();
+  }, [undoManager]);
+
+  // Exposing undo and redo states
+  React.useEffect(() => {
+    const updateUndoRedoStates = () => {
+      editor.dispatchCommand(CAN_UNDO_COMMAND, undoManager.undoStack.length > 0);
+      editor.dispatchCommand(CAN_REDO_COMMAND, undoManager.redoStack.length > 0);
+    };
+    undoManager.on('stack-item-added', updateUndoRedoStates);
+    undoManager.on('stack-item-popped', updateUndoRedoStates);
+    undoManager.on('stack-cleared', updateUndoRedoStates);
+    return () => {
+      undoManager.off('stack-item-added', updateUndoRedoStates);
+      undoManager.off('stack-item-popped', updateUndoRedoStates);
+      undoManager.off('stack-cleared', updateUndoRedoStates);
+    };
+  }, [editor, undoManager]);
+  return clearHistory;
+}
+function initializeEditor(editor, initialEditorState) {
+  editor.update(() => {
+    const root = $getRoot();
+    if (root.isEmpty()) {
+      if (initialEditorState) {
+        switch (typeof initialEditorState) {
+          case 'string':
+            {
+              const parsedEditorState = editor.parseEditorState(initialEditorState);
+              editor.setEditorState(parsedEditorState, {
+                tag: HISTORY_MERGE_TAG
+              });
+              break;
+            }
+          case 'object':
+            {
+              editor.setEditorState(initialEditorState, {
+                tag: HISTORY_MERGE_TAG
+              });
+              break;
+            }
+          case 'function':
+            {
+              editor.update(() => {
+                const root1 = $getRoot();
+                if (root1.isEmpty()) {
+                  initialEditorState(editor);
+                }
+              }, {
+                tag: HISTORY_MERGE_TAG
+              });
+              break;
+            }
+        }
+      } else {
+        const paragraph = $createParagraphNode();
+        root.append(paragraph);
+        const {
+          activeElement
+        } = document;
+        if ($getSelection() !== null || activeElement !== null && activeElement === editor.getRootElement()) {
+          paragraph.select();
+        }
+      }
+    }
+  }, {
+    tag: HISTORY_MERGE_TAG
+  });
+}
+function clearEditorSkipCollab(editor, binding) {
+  // reset editor state
+  editor.update(() => {
+    const root = $getRoot();
+    root.clear();
+    root.select();
+  }, {
+    tag: SKIP_COLLAB_TAG
+  });
+  if (binding.cursors == null) {
+    return;
+  }
+  const cursors = binding.cursors;
+  if (cursors == null) {
+    return;
+  }
+  const cursorsContainer = binding.cursorsContainer;
+  if (cursorsContainer == null) {
+    return;
+  }
+
+  // reset cursors in dom
+  const cursorsArr = Array.from(cursors.values());
+  for (let i = 0; i < cursorsArr.length; i++) {
+    const cursor = cursorsArr[i];
+    const selection = cursor.selection;
+    if (selection && selection.selections != null) {
+      const selections = selection.selections;
+      for (let j = 0; j < selections.length; j++) {
+        cursorsContainer.removeChild(selections[i]);
+      }
+    }
+  }
+}
+
+/**
+ * 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.
+ *
+ */
+
+function CollaborationPlugin({
+  id,
+  providerFactory,
+  shouldBootstrap,
+  username,
+  cursorColor,
+  cursorsContainerRef,
+  initialEditorState,
+  excludedProperties,
+  awarenessData,
+  syncCursorPositionsFn
+}) {
+  const isBindingInitialized = useRef(false);
+  const isProviderInitialized = useRef(false);
+  const collabContext = useCollaborationContext(username, cursorColor);
+  const {
+    yjsDocMap,
+    name,
+    color
+  } = collabContext;
+  const [editor] = useLexicalComposerContext();
+  useCollabActive(collabContext, editor);
+  const [provider, setProvider] = useState();
+  const [doc, setDoc] = useState();
+  useEffect(() => {
+    if (isProviderInitialized.current) {
+      return;
+    }
+    isProviderInitialized.current = true;
+    const newProvider = providerFactory(id, yjsDocMap);
+    setProvider(newProvider);
+    setDoc(yjsDocMap.get(id));
+    return () => {
+      newProvider.disconnect();
+    };
+  }, [id, providerFactory, yjsDocMap]);
+  const [binding, setBinding] = useState();
+  useEffect(() => {
+    if (!provider) {
+      return;
+    }
+    if (isBindingInitialized.current) {
+      return;
+    }
+    isBindingInitialized.current = true;
+    const newBinding = createBinding(editor, provider, id, doc || yjsDocMap.get(id), yjsDocMap, excludedProperties);
+    setBinding(newBinding);
+    return () => {
+      newBinding.root.destroy(newBinding);
+    };
+  }, [editor, provider, id, yjsDocMap, doc, excludedProperties]);
+  if (!provider || !binding) {
+    return /*#__PURE__*/jsx(Fragment, {});
+  }
+  return /*#__PURE__*/jsx(YjsCollaborationCursors, {
+    awarenessData: awarenessData,
+    binding: binding,
+    collabContext: collabContext,
+    color: color,
+    cursorsContainerRef: cursorsContainerRef,
+    editor: editor,
+    id: id,
+    initialEditorState: initialEditorState,
+    name: name,
+    provider: provider,
+    setDoc: setDoc,
+    shouldBootstrap: shouldBootstrap,
+    yjsDocMap: yjsDocMap,
+    syncCursorPositionsFn: syncCursorPositionsFn
+  });
+}
+function YjsCollaborationCursors({
+  editor,
+  id,
+  provider,
+  yjsDocMap,
+  name,
+  color,
+  shouldBootstrap,
+  cursorsContainerRef,
+  initialEditorState,
+  awarenessData,
+  collabContext,
+  binding,
+  setDoc,
+  syncCursorPositionsFn
+}) {
+  const cursors = useYjsCollaboration(editor, id, provider, yjsDocMap, name, color, shouldBootstrap, binding, setDoc, cursorsContainerRef, initialEditorState, awarenessData, syncCursorPositionsFn);
+  useYjsHistory(editor, binding);
+  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, CollaborationPluginV2__EXPERIMENTAL };

package/dist/LexicalCollaborationPlugin.js

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ */
+
+'use strict'
+const LexicalCollaborationPlugin = process.env.NODE_ENV !== 'production' ? require('./LexicalCollaborationPlugin.dev.js') : require('./LexicalCollaborationPlugin.prod.js');
+module.exports = LexicalCollaborationPlugin;

package/dist/LexicalCollaborationPlugin.mjs

@@ -0,0 +1,13 @@
+/**
+ * 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 * 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 CollaborationPluginV2__EXPERIMENTAL = mod.CollaborationPluginV2__EXPERIMENTAL;

package/dist/LexicalCollaborationPlugin.node.mjs

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ *
+ */
+
+const mod = await (process.env.NODE_ENV !== 'production' ? import('./LexicalCollaborationPlugin.dev.mjs') : import('./LexicalCollaborationPlugin.prod.mjs'));
+export const CollaborationPlugin = mod.CollaborationPlugin;
+export const CollaborationPluginV2__EXPERIMENTAL = mod.CollaborationPluginV2__EXPERIMENTAL;

package/dist/LexicalCollaborationPlugin.prod.js

@@ -0,0 +1,9 @@
+/**
+ * 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.
+ *
+ */
+
+"use strict";var e=require("@lexical/react/LexicalCollaborationContext"),t=require("@lexical/react/LexicalComposerContext"),o=require("@lexical/yjs"),r=require("react"),n=require("@lexical/utils"),s=require("lexical"),a=require("react-dom"),c=require("yjs"),i=require("react/jsx-runtime");function u(e){var t=Object.create(null);if(e)for(var o in e)t[o]=e[o];return t.default=e,t}var l=u(r);function d(e,t,n,a,i,u,l,d,p,_,M,g,R=o.syncCursorPositions){const O=r.useRef(!1),D=r.useCallback(()=>{const{root:t}=d;l&&t.isEmpty()&&0===t._xmlText._length&&m(e,M)},[d,e,M,l]);return r.useEffect(()=>{const{root:t}=d,r=(e,t)=>{const r=t.origin;if(r!==d){const t=r instanceof c.UndoManager;o.syncYjsChangesToLexical(d,n,e,t,R)}};t.getSharedType().observeDeep(r);const a=e.registerUpdateListener(({prevEditorState:e,editorState:t,dirtyLeaves:r,dirtyElements:a,normalizedNodes:c,tags:i})=>{i.has(s.SKIP_COLLAB_TAG)||o.syncLexicalUpdateToYjs(d,n,e,t,a,r,c,i)});return()=>{t.getSharedType().unobserveDeep(r),a()}},[d,n,e,p,a,t,R]),r.useEffect(()=>{const o=o=>{!function(e,t){if(e.update(()=>{const e=s.$getRoot();e.clear(),e.select()},{tag:s.SKIP_COLLAB_TAG}),null==t.cursors)return;const o=t.cursors;if(null==o)return;const r=t.cursorsContainer;if(null==r)return;const n=Array.from(o.values());for(let e=0;e<n.length;e++){const t=n[e].selection;if(t&&null!=t.selections){const o=t.selections;for(let t=0;t<o.length;t++)r.removeChild(o[e])}}}(e,d),p(o),a.set(t,o),O.current=!0},r=()=>{O.current=!1};return n.on("reload",o),n.on("sync",r),()=>{n.off("reload",o),n.off("sync",r)}},[d,n,e,p,a,t]),f(e,n,i,u,O,g,D),E(d,n),C(d,_)}function f(e,t,n,a,c,i,u){const l=r.useCallback(()=>t.connect(),[t]),d=r.useCallback(()=>{try{t.disconnect()}catch(e){}},[t]);r.useEffect(()=>{const r=({status:t})=>{e.dispatchCommand(o.CONNECTED_COMMAND,"connected"===t)},s=e=>{e&&!1===c.current&&u&&u()};o.initLocalState(t,n,a,document.activeElement===e.getRootElement(),i||{}),t.on("status",r),t.on("sync",s);const f=l();return()=>{!1===c.current&&(f?f.then(d):d()),t.off("sync",s),t.off("status",r)}},[e,t,n,a,c,i,u,l,d]),r.useEffect(()=>e.registerCommand(o.TOGGLE_CONNECT_COMMAND,e=>(e?(console.log("Collaboration connected!"),l()):(console.log("Collaboration disconnected!"),d()),!0),s.COMMAND_PRIORITY_EDITOR),[l,d,e])}function E(e,t){r.useEffect(()=>{const{awareness:r}=t,n=()=>{o.syncCursorPositions(e,t)};return r.on("update",n),()=>{r.off("update",n)}},[e,t])}function C(e,t){return r.useMemo(()=>a.createPortal(i.jsx("div",{ref:t=>{e.cursorsContainer=t}}),t&&t.current||document.body),[e,t])}function p(e,t,a,c,i){r.useEffect(()=>n.mergeRegister(e.registerCommand(s.FOCUS_COMMAND,()=>(o.setLocalStateFocus(t,a,c,!0,i||{}),!1),s.COMMAND_PRIORITY_EDITOR),e.registerCommand(s.BLUR_COMMAND,()=>(o.setLocalStateFocus(t,a,c,!1,i||{}),!1),s.COMMAND_PRIORITY_EDITOR)),[c,e,a,t,i])}function _(e,t){r.useEffect(()=>n.mergeRegister(e.registerCommand(s.UNDO_COMMAND,()=>(t.undo(),!0),s.COMMAND_PRIORITY_EDITOR),e.registerCommand(s.REDO_COMMAND,()=>(t.redo(),!0),s.COMMAND_PRIORITY_EDITOR)));const o=r.useCallback(()=>{t.clear()},[t]);return l.useEffect(()=>{const o=()=>{e.dispatchCommand(s.CAN_UNDO_COMMAND,t.undoStack.length>0),e.dispatchCommand(s.CAN_REDO_COMMAND,t.redoStack.length>0)};return t.on("stack-item-added",o),t.on("stack-item-popped",o),t.on("stack-cleared",o),()=>{t.off("stack-item-added",o),t.off("stack-item-popped",o),t.off("stack-cleared",o)}},[e,t]),o}function m(e,t){e.update(()=>{const o=s.$getRoot();if(o.isEmpty())if(t)switch(typeof t){case"string":{const o=e.parseEditorState(t);e.setEditorState(o,{tag:s.HISTORY_MERGE_TAG});break}case"object":e.setEditorState(t,{tag:s.HISTORY_MERGE_TAG});break;case"function":e.update(()=>{s.$getRoot().isEmpty()&&t(e)},{tag:s.HISTORY_MERGE_TAG})}else{const t=s.$createParagraphNode();o.append(t);const{activeElement:r}=document;(null!==s.$getSelection()||null!==r&&r===e.getRootElement())&&t.select()}},{tag:s.HISTORY_MERGE_TAG})}function M({editor:e,id:t,provider:n,yjsDocMap:s,name:a,color:c,shouldBootstrap:i,cursorsContainerRef:u,initialEditorState:l,awarenessData:f,collabContext:E,binding:C,setDoc:m,syncCursorPositionsFn:M}){const g=d(e,t,n,s,a,c,i,C,m,u,l,f,M);return function(e,t){_(e,r.useMemo(()=>o.createUndoManager(t,t.root.getSharedType()),[t]))}(e,C),p(e,n,a,c,f),g}const g=(e,t)=>{r.useEffect(()=>(e.isCollabActive=!0,()=>{null==t._parentEditor&&(e.isCollabActive=!1)}),[e,t])};exports.CollaborationPlugin=function({id:n,providerFactory:s,shouldBootstrap:a,username:c,cursorColor:u,cursorsContainerRef:l,initialEditorState:d,excludedProperties:f,awarenessData:E,syncCursorPositionsFn:C}){const p=r.useRef(!1),_=r.useRef(!1),m=e.useCollaborationContext(c,u),{yjsDocMap:R,name:O,color:D}=m,[T]=t.useLexicalComposerContext();g(m,T);const[A,I]=r.useState(),[N,S]=r.useState();r.useEffect(()=>{if(_.current)return;_.current=!0;const e=s(n,R);return I(e),S(R.get(n)),()=>{e.disconnect()}},[n,s,R]);const[x,y]=r.useState();return r.useEffect(()=>{if(!A)return;if(p.current)return;p.current=!0;const e=o.createBinding(T,A,n,N||R.get(n),R,f);return y(e),()=>{e.root.destroy(e)}},[T,A,n,R,N,f]),A&&x?i.jsx(M,{awarenessData:E,binding:x,collabContext:m,color:D,cursorsContainerRef:l,editor:T,id:n,initialEditorState:d,name:O,provider:A,setDoc:S,shouldBootstrap:a,yjsDocMap:R,syncCursorPositionsFn:C}):i.jsx(i.Fragment,{})},exports.CollaborationPluginV2__EXPERIMENTAL=function({id:a,doc:i,provider:u,__shouldBootstrapUnsafe:l,username:d,cursorColor:M,cursorsContainerRef:R,excludedProperties:O,awarenessData:D}){const T=e.useCollaborationContext(d,M),{yjsDocMap:A,name:I,color:N}=T,[S]=t.useLexicalComposerContext();g(T,S);const x=function(e,t,a,i,u,l,d,C={}){const{awarenessData:p,excludedProperties:_,rootName:M,__shouldBootstrapUnsafe:g}=C,R=r.useMemo(()=>({current:!1}),[]),O=r.useMemo(()=>o.createBindingV2__EXPERIMENTAL(e,t,a,u,{excludedProperties:_,rootName:M}),[e,t,a,u,_,M]);r.useEffect(()=>(u.set(t,a),()=>{u.delete(t)}),[a,u,t]);const D=r.useCallback(()=>{const{root:t}=O;g&&0===t._length&&m(e)},[O,e,g]),[T,A]=r.useState();return r.useEffect(()=>{n.mergeRegister(e.registerCommand(o.CLEAR_DIFF_VERSIONS_COMMAND__EXPERIMENTAL,()=>(A(null),o.syncYjsStateToLexicalV2__EXPERIMENTAL(O,i),!0),s.COMMAND_PRIORITY_EDITOR),e.registerCommand(o.DIFF_VERSIONS_COMMAND__EXPERIMENTAL,({prevSnapshot:e,snapshot:t})=>(A({prevSnapshot:e,snapshot:t}),!0),s.COMMAND_PRIORITY_EDITOR))},[e,O,i]),r.useEffect(()=>{const{root:t}=O;if(T)return void o.renderSnapshot__EXPERIMENTAL(O,T.snapshot,T.prevSnapshot);const r=(e,t)=>{const r=t.origin;if(r!==O){const n=r instanceof c.UndoManager;o.syncYjsChangesToLexicalV2__EXPERIMENTAL(O,i,e,t,n)}};t.observeDeep(r);const n=e.registerUpdateListener(({prevEditorState:e,editorState:t,dirtyElements:r,normalizedNodes:n,tags:a})=>{a.has(s.SKIP_COLLAB_TAG)||o.syncLexicalUpdateToYjsV2__EXPERIMENTAL(O,i,e,t,r,n,a)});return()=>{t.unobserveDeep(r),n()}},[O,i,e,T]),f(e,i,l,d,R,p,D),E(O,i),O}(S,a,i,u,A,I,N,{__shouldBootstrapUnsafe:l,awarenessData:D,excludedProperties:O});return function(e,t){_(e,r.useMemo(()=>o.createUndoManager(t,t.root),[t]))}(S,x),p(S,u,I,N,D),C(x,R)};

package/dist/LexicalCollaborationPlugin.prod.mjs

@@ -0,0 +1,9 @@
+/**
+ * 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{useCollaborationContext as t}from"@lexical/react/LexicalCollaborationContext";import{useLexicalComposerContext as e}from"@lexical/react/LexicalComposerContext";import{syncCursorPositions as o,syncLexicalUpdateToYjs as r,createUndoManager as n,setLocalStateFocus as s,createBindingV2__EXPERIMENTAL as a,CLEAR_DIFF_VERSIONS_COMMAND__EXPERIMENTAL as c,syncYjsStateToLexicalV2__EXPERIMENTAL as i,DIFF_VERSIONS_COMMAND__EXPERIMENTAL as d,renderSnapshot__EXPERIMENTAL as u,syncLexicalUpdateToYjsV2__EXPERIMENTAL as l,syncYjsChangesToLexical as p,initLocalState as m,TOGGLE_CONNECT_COMMAND as f,syncYjsChangesToLexicalV2__EXPERIMENTAL as g,CONNECTED_COMMAND as C,createBinding as h}from"@lexical/yjs";import*as y from"react";import{useRef as v,useCallback as x,useEffect as E,useMemo as S,useState as b}from"react";import{mergeRegister as D}from"@lexical/utils";import{SKIP_COLLAB_TAG as k,FOCUS_COMMAND as _,COMMAND_PRIORITY_EDITOR as j,BLUR_COMMAND as w,$getRoot as P,HISTORY_MERGE_TAG as B,$createParagraphNode as R,$getSelection as L,UNDO_COMMAND as U,REDO_COMMAND as F,CAN_UNDO_COMMAND as M,CAN_REDO_COMMAND as N}from"lexical";import{createPortal as T}from"react-dom";import{UndoManager as A}from"yjs";import{jsx as z,Fragment as q}from"react/jsx-runtime";function G(t,e,n,s,a,c,i,d,u,l,m,f,g=o){const C=v(!1),h=x(()=>{const{root:e}=d;i&&e.isEmpty()&&0===e._xmlText._length&&Q(t,m)},[d,t,m,i]);return E(()=>{const{root:e}=d,o=(t,e)=>{const o=e.origin;if(o!==d){p(d,n,t,o instanceof A,g)}};e.getSharedType().observeDeep(o);const s=t.registerUpdateListener(({prevEditorState:t,editorState:e,dirtyLeaves:o,dirtyElements:s,normalizedNodes:a,tags:c})=>{c.has(k)||r(d,n,t,e,s,o,a,c)});return()=>{e.getSharedType().unobserveDeep(o),s()}},[d,n,t,u,s,e,g]),E(()=>{const o=o=>{!function(t,e){if(t.update(()=>{const t=P();t.clear(),t.select()},{tag:k}),null==e.cursors)return;const o=e.cursors;if(null==o)return;const r=e.cursorsContainer;if(null==r)return;const n=Array.from(o.values());for(let t=0;t<n.length;t++){const e=n[t].selection;if(e&&null!=e.selections){const o=e.selections;for(let e=0;e<o.length;e++)r.removeChild(o[t])}}}(t,d),u(o),s.set(e,o),C.current=!0},r=()=>{C.current=!1};return n.on("reload",o),n.on("sync",r),()=>{n.off("reload",o),n.off("sync",r)}},[d,n,t,u,s,e]),H(t,n,a,c,C,f,h),I(d,n),J(d,l)}function H(t,e,o,r,n,s,a){const c=x(()=>e.connect(),[e]),i=x(()=>{try{e.disconnect()}catch(t){}},[e]);E(()=>{const d=({status:e})=>{t.dispatchCommand(C,"connected"===e)},u=t=>{t&&!1===n.current&&a&&a()};m(e,o,r,document.activeElement===t.getRootElement(),s||{}),e.on("status",d),e.on("sync",u);const l=c();return()=>{!1===n.current&&(l?l.then(i):i()),e.off("sync",u),e.off("status",d)}},[t,e,o,r,n,s,a,c,i]),E(()=>t.registerCommand(f,t=>(t?(console.log("Collaboration connected!"),c()):(console.log("Collaboration disconnected!"),i()),!0),j),[c,i,t])}function I(t,e){E(()=>{const{awareness:r}=e,n=()=>{o(t,e)};return r.on("update",n),()=>{r.off("update",n)}},[t,e])}function J(t,e){return S(()=>T(z("div",{ref:e=>{t.cursorsContainer=e}}),e&&e.current||document.body),[t,e])}function K(t,e,o,r,n){E(()=>D(t.registerCommand(_,()=>(s(e,o,r,!0,n||{}),!1),j),t.registerCommand(w,()=>(s(e,o,r,!1,n||{}),!1),j)),[r,t,o,e,n])}function O(t,e){E(()=>D(t.registerCommand(U,()=>(e.undo(),!0),j),t.registerCommand(F,()=>(e.redo(),!0),j)));const o=x(()=>{e.clear()},[e]);return y.useEffect(()=>{const o=()=>{t.dispatchCommand(M,e.undoStack.length>0),t.dispatchCommand(N,e.redoStack.length>0)};return e.on("stack-item-added",o),e.on("stack-item-popped",o),e.on("stack-cleared",o),()=>{e.off("stack-item-added",o),e.off("stack-item-popped",o),e.off("stack-cleared",o)}},[t,e]),o}function Q(t,e){t.update(()=>{const o=P();if(o.isEmpty())if(e)switch(typeof e){case"string":{const o=t.parseEditorState(e);t.setEditorState(o,{tag:B});break}case"object":t.setEditorState(e,{tag:B});break;case"function":t.update(()=>{P().isEmpty()&&e(t)},{tag:B})}else{const e=R();o.append(e);const{activeElement:r}=document;(null!==L()||null!==r&&r===t.getRootElement())&&e.select()}},{tag:B})}function V({id:o,providerFactory:r,shouldBootstrap:n,username:s,cursorColor:a,cursorsContainerRef:c,initialEditorState:i,excludedProperties:d,awarenessData:u,syncCursorPositionsFn:l}){const p=v(!1),m=v(!1),f=t(s,a),{yjsDocMap:g,name:C,color:y}=f,[x]=e();Y(f,x);const[S,D]=b(),[k,_]=b();E(()=>{if(m.current)return;m.current=!0;const t=r(o,g);return D(t),_(g.get(o)),()=>{t.disconnect()}},[o,r,g]);const[j,w]=b();return E(()=>{if(!S)return;if(p.current)return;p.current=!0;const t=h(x,S,o,k||g.get(o),g,d);return w(t),()=>{t.root.destroy(t)}},[x,S,o,g,k,d]),S&&j?z(W,{awarenessData:u,binding:j,collabContext:f,color:y,cursorsContainerRef:c,editor:x,id:o,initialEditorState:i,name:C,provider:S,setDoc:_,shouldBootstrap:n,yjsDocMap:g,syncCursorPositionsFn:l}):z(q,{})}function W({editor:t,id:e,provider:o,yjsDocMap:r,name:s,color:a,shouldBootstrap:c,cursorsContainerRef:i,initialEditorState:d,awarenessData:u,collabContext:l,binding:p,setDoc:m,syncCursorPositionsFn:f}){const g=G(t,e,o,r,s,a,c,p,m,i,d,u,f);return function(t,e){O(t,S(()=>n(e,e.root.getSharedType()),[e]))}(t,p),K(t,o,s,a,u),g}function X({id:o,doc:r,provider:s,__shouldBootstrapUnsafe:p,username:m,cursorColor:f,cursorsContainerRef:C,excludedProperties:h,awarenessData:y}){const v=t(m,f),{yjsDocMap:_,name:w,color:P}=v,[B]=e();Y(v,B);const R=function(t,e,o,r,n,s,p,m={}){const{awarenessData:f,excludedProperties:C,rootName:h,__shouldBootstrapUnsafe:y}=m,v=S(()=>({current:!1}),[]),_=S(()=>a(t,e,o,n,{excludedProperties:C,rootName:h}),[t,e,o,n,C,h]);E(()=>(n.set(e,o),()=>{n.delete(e)}),[o,n,e]);const w=x(()=>{const{root:e}=_;y&&0===e._length&&Q(t)},[_,t,y]),[P,B]=b();return E(()=>{D(t.registerCommand(c,()=>(B(null),i(_,r),!0),j),t.registerCommand(d,({prevSnapshot:t,snapshot:e})=>(B({prevSnapshot:t,snapshot:e}),!0),j))},[t,_,r]),E(()=>{const{root:e}=_;if(P)return void u(_,P.snapshot,P.prevSnapshot);const o=(t,e)=>{const o=e.origin;o!==_&&g(_,r,t,e,o instanceof A)};e.observeDeep(o);const n=t.registerUpdateListener(({prevEditorState:t,editorState:e,dirtyElements:o,normalizedNodes:n,tags:s})=>{s.has(k)||l(_,r,t,e,o,n,s)});return()=>{e.unobserveDeep(o),n()}},[_,r,t,P]),H(t,r,s,p,v,f,w),I(_,r),_}(B,o,r,s,_,w,P,{__shouldBootstrapUnsafe:p,awarenessData:y,excludedProperties:h});return function(t,e){O(t,S(()=>n(e,e.root),[e]))}(B,R),K(B,s,w,P,y),J(R,C)}const Y=(t,e)=>{E(()=>(t.isCollabActive=!0,()=>{null==e._parentEditor&&(t.isCollabActive=!1)}),[t,e])};export{V as CollaborationPlugin,X as CollaborationPluginV2__EXPERIMENTAL};

package/dist/LexicalComposer.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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 { JSX } from 'react';
+import { EditorState, EditorThemeClasses, HTMLConfig, Klass, LexicalEditor, LexicalNode, LexicalNodeReplacement } from 'lexical';
+import * as React from 'react';
+export type InitialEditorStateType = null | string | EditorState | ((editor: LexicalEditor) => void);
+export type InitialConfigType = Readonly<{
+    namespace: string;
+    nodes?: ReadonlyArray<Klass<LexicalNode> | LexicalNodeReplacement>;
+    onError: (error: Error, editor: LexicalEditor) => void;
+    editable?: boolean;
+    theme?: EditorThemeClasses;
+    editorState?: InitialEditorStateType;
+    html?: HTMLConfig;
+}>;
+type Props = React.PropsWithChildren<{
+    initialConfig: InitialConfigType;
+}>;
+export declare function LexicalComposer({ initialConfig, children }: Props): JSX.Element;
+export {};