@ekz/lexical-react 0.40.0

package/LexicalCollaborationPlugin.dev.mjs

@@ -0,0 +1,569 @@
+/**
+ * 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 '@ekz/lexical-react/LexicalCollaborationContext';
+import { useLexicalComposerContext } from '@ekz/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 '@ekz/lexical-yjs';
+import * as React from 'react';
+import { useRef, useCallback, useEffect, useMemo, useState } from 'react';
+import { mergeRegister } from '@ekz/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 '@ekz/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]);
+
+  // Clear awareness state immediately when tab is refreshed or closed
+  // This prevents ghost cursors from appearing for several seconds after disconnect
+  // See: https://github.com/facebook/lexical/issues/8061
+  useEffect(() => {
+    const clearAwarenessState = () => {
+      // Immediately clear local awareness state to signal disconnection
+      // This broadcasts to other clients that this client has disconnected,
+      // causing them to remove the cursor immediately instead of waiting for timeout
+      try {
+        provider.awareness.setLocalState(null);
+      } catch (_e) {
+        // Ignore errors during cleanup (e.g., if provider is already disconnected)
+      }
+    };
+
+    // Use both beforeunload and pagehide for maximum browser compatibility
+    // beforeunload: fires before page unloads (may be cancelable)
+    // pagehide: fires when page is being unloaded (more reliable, especially on mobile)
+    window.addEventListener('beforeunload', clearAwarenessState);
+    window.addEventListener('pagehide', clearAwarenessState);
+    return () => {
+      window.removeEventListener('beforeunload', clearAwarenessState);
+      window.removeEventListener('pagehide', clearAwarenessState);
+    };
+  }, [provider]);
+}
+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/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/LexicalCollaborationPlugin.js.flow

@@ -0,0 +1,50 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ */
+
+import type {InitialEditorStateType} from '@ekz/lexical-react/LexicalComposer';
+import type {ExcludedProperties, ProviderAwareness} from '@ekz/lexical-yjs';
+import type {Doc, RelativePosition} from 'yjs';
+
+export interface Provider {
+  connect(): void | Promise<void>;
+  disconnect(): void;
+  awareness: ProviderAwareness;
+  on(type: 'sync', cb: (isSynced: boolean) => void): void;
+  on(type: 'status', cb: ({status: string}) => void): void;
+  // $FlowFixMe[unclear-type]: temp
+  on(type: 'update', cb: (any) => void): void;
+  on(type: 'reload', cb: (doc: Doc) => void): void;
+  off(type: 'sync', cb: (isSynced: boolean) => void): void;
+  // $FlowFixMe[unclear-type]: temp
+  off(type: 'update', cb: (any) => void): void;
+  off(type: 'status', cb: ({status: string}) => void): void;
+  off(type: 'reload', cb: (doc: Doc) => void): void;
+}
+
+export type ProviderFactory = (
+  id: string,
+  yjsDocMap: Map<string, Doc>,
+) => Provider;
+
+export type CursorsContainerRef = {current: null | HTMLElement};
+
+declare export function CollaborationPlugin(arg0: {
+  id: string,
+  providerFactory: (
+    // eslint-disable-next-line no-shadow
+    id: string,
+    yjsDocMap: Map<string, Doc>,
+  ) => Provider,
+  shouldBootstrap: boolean,
+  username?: string,
+  cursorColor?: string,
+  cursorsContainerRef?: CursorsContainerRef,
+  initialEditorState?: InitialEditorStateType,
+  excludedProperties?: ExcludedProperties,
+}): React.Node;

package/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/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/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("@ekz/lexical-react/LexicalCollaborationContext"),t=require("@ekz/lexical-react/LexicalComposerContext"),o=require("@ekz/lexical-yjs"),r=require("react"),n=require("@ekz/lexical-utils"),s=require("@ekz/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,_,g,M,R=o.syncCursorPositions){const O=r.useRef(!1),D=r.useCallback(()=>{const{root:t}=d;l&&t.isEmpty()&&0===t._xmlText._length&&m(e,g)},[d,e,g,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,M,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]),r.useEffect(()=>{const e=()=>{try{t.awareness.setLocalState(null)}catch(e){}};return window.addEventListener("beforeunload",e),window.addEventListener("pagehide",e),()=>{window.removeEventListener("beforeunload",e),window.removeEventListener("pagehide",e)}},[t])}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 g({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:g}){const M=d(e,t,n,s,a,c,i,C,m,u,l,f,g);return function(e,t){_(e,r.useMemo(()=>o.createUndoManager(t,t.root.getSharedType()),[t]))}(e,C),p(e,n,a,c,f),M}const M=(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();M(m,T);const[A,S]=r.useState(),[I,N]=r.useState();r.useEffect(()=>{if(_.current)return;_.current=!0;const e=s(n,R);return S(e),N(R.get(n)),()=>{e.disconnect()}},[n,s,R]);const[h,L]=r.useState();return r.useEffect(()=>{if(!A)return;if(p.current)return;p.current=!0;const e=o.createBinding(T,A,n,I||R.get(n),R,f);return L(e),()=>{e.root.destroy(e)}},[T,A,n,R,I,f]),A&&h?i.jsx(g,{awarenessData:E,binding:h,collabContext:m,color:D,cursorsContainerRef:l,editor:T,id:n,initialEditorState:d,name:O,provider:A,setDoc:N,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:g,cursorsContainerRef:R,excludedProperties:O,awarenessData:D}){const T=e.useCollaborationContext(d,g),{yjsDocMap:A,name:S,color:I}=T,[N]=t.useLexicalComposerContext();M(T,N);const h=function(e,t,a,i,u,l,d,C={}){const{awarenessData:p,excludedProperties:_,rootName:g,__shouldBootstrapUnsafe:M}=C,R=r.useMemo(()=>({current:!1}),[]),O=r.useMemo(()=>o.createBindingV2__EXPERIMENTAL(e,t,a,u,{excludedProperties:_,rootName:g}),[e,t,a,u,_,g]);r.useEffect(()=>(u.set(t,a),()=>{u.delete(t)}),[a,u,t]);const D=r.useCallback(()=>{const{root:t}=O;M&&0===t._length&&m(e)},[O,e,M]),[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}(N,a,i,u,A,S,I,{__shouldBootstrapUnsafe:l,awarenessData:D,excludedProperties:O});return function(e,t){_(e,r.useMemo(()=>o.createUndoManager(t,t.root),[t]))}(N,h),p(N,u,S,I,D),C(h,R)};