Add user info to awareness (#355)

Add peer cursors cm extension

Co-authored-by: Frédéric Collonval <[email protected]>

Author: fcollonval

packages/react/package.json

@@ -69,6 +69,7 @@
     "@jupyter-widgets/html-manager": "^1.0.0",
     "@jupyter-widgets/jupyterlab-manager": "^5.0.0",
     "@jupyter-widgets/output": "^6.0.0",
+    "@jupyter/collaboration": "^3.1.0",
     "@jupyter/web-components": "^0.15.3",
     "@jupyter/ydoc": "3.0.2",
     "@jupyterlab/application": "^4.0.0",

packages/react/src/components/notebook/BaseNotebook.tsx

@@ -4,7 +4,7 @@
  * MIT License
  */
 
-import { ISharedNotebook, IYText, YNotebook } from '@jupyter/ydoc';
+import { type ISharedNotebook, type IYText, YNotebook } from '@jupyter/ydoc';
 import type { ISessionContext } from '@jupyterlab/apputils';
 import type { Cell, CodeCell, ICellModel } from '@jupyterlab/cells';
 import { type IEditorServices } from '@jupyterlab/codeeditor';
@@ -78,6 +78,7 @@ import { Lumino } from '../lumino';
 import { Loader } from '../utils';
 import type { DatalayerNotebookExtension } from './Notebook';
 import addNotebookCommands from './NotebookCommands';
+import { remoteUserCursors } from '@jupyter/collaboration';
 
 const COMPLETER_TIMEOUT_MILLISECONDS = 1000;
 const DEFAULT_EXTENSIONS = new Array<DatalayerNotebookExtension>();
@@ -891,30 +892,36 @@ class CommonFeatures {
       themes.addTheme(theme);
     }
 
-    const editorExtensions = () => {
-      const registry = new EditorExtensionRegistry();
-      for (const extensionFactory of EditorExtensionRegistry.getDefaultExtensions(
-        { themes }
-      )) {
-        registry.addExtension(extensionFactory);
+    const editorExtensions = new EditorExtensionRegistry();
+    for (const extensionFactory of EditorExtensionRegistry.getDefaultExtensions(
+      { themes }
+    )) {
+      editorExtensions.addExtension(extensionFactory);
+    }
+    editorExtensions.addExtension({
+      name: 'shared-model-binding',
+      factory: options => {
+        const sharedModel = options.model.sharedModel as IYText;
+        return EditorExtensionRegistry.createImmutableExtension(
+          ybinding({
+            ytext: sharedModel.ysource,
+            undoManager: sharedModel.undoManager ?? undefined,
+          })
+        );
+      },
+    });
+    editorExtensions.addExtension({
+      name: 'remote-user-cursors',
+      factory(options) {
+        const { awareness, ysource: ytext } = options.model.sharedModel as any;
+        return EditorExtensionRegistry.createImmutableExtension(
+          remoteUserCursors({ awareness, ytext })
+        );
       }
-      registry.addExtension({
-        name: 'shared-model-binding',
-        factory: options => {
-          const sharedModel = options.model.sharedModel as IYText;
-          return EditorExtensionRegistry.createImmutableExtension(
-            ybinding({
-              ytext: sharedModel.ysource,
-              undoManager: sharedModel.undoManager ?? undefined,
-            })
-          );
-        },
-      });
-      return registry;
-    };
+    })
 
     const factoryService = new CodeMirrorEditorFactory({
-      extensions: editorExtensions(),
+      extensions: editorExtensions,
       languages: languages,
     });
     this._editorServices = {

packages/react/src/components/notebook/SimpleNotebook.tsx

@@ -31,7 +31,7 @@ export interface ISimpleNotebookProps {
   /**
    * Collaboration server providing the document rooms.
    */
-  collaborationServer: CollaborationServer;
+  collaborationServer?: CollaborationServer;
   /**
    * Custom command registry.
    *
@@ -154,11 +154,33 @@ export function SimpleNotebook(
   });
 
   useEffect(() => {
-    if (model) setIsLoading(false);
+    if (model) {
+      setIsLoading(false);
+    }
 
     onNotebookModelChanged?.(model);
   }, [model, onNotebookModelChanged]);
 
+  useEffect(() => {
+    // Set user identity if collaborating using Jupyter collaboration
+    const setUserIdentity = () => {
+      if (collaborationServer?.type === 'jupyter' && model) {
+        // Yjs details are hidden from the interface
+        (model.sharedModel as any).awareness.setLocalStateField(
+          'user',
+          serviceManager.user.identity
+        );
+      }
+    };
+
+    setUserIdentity();
+    serviceManager.user.userChanged.connect(setUserIdentity);
+
+    return () => {
+      serviceManager.user.userChanged.disconnect(setUserIdentity);
+    };
+  }, [collaborationServer, model, serviceManager]);
+
   return isLoading ? (
     <Loader key="notebook-loader" />
   ) : (