@jupyter/collaboration 4.3.0 → 4.4.0-beta.0

package/lib/collaboratorspanel.js

@@ -51,9 +51,11 @@ export class CollaboratorsPanel extends Panel {
             const state = this._awareness.getStates();
             const collaboratorsMap = new Map();
             state.forEach((value, key) => {
+                const currentIdentity = this._currentUser.identity;
                 if (this._currentUser.isReady &&
                     value.user &&
-                    value.user.username !== this._currentUser.identity.username) {
+                    currentIdentity &&
+                    value.user.username !== currentIdentity.username) {
                     const uniqueKey = `${value.user.username}-${value.current || 'no-current'}`;
                     if (!collaboratorsMap.has(uniqueKey)) {
                         collaboratorsMap.set(uniqueKey, value);

package/lib/components.js

@@ -8,19 +8,38 @@ import React, { useEffect, useState } from 'react';
  * @returns The React component
  */
 export function UserIconComponent(props) {
+    var _a;
     const { userManager, onClick } = props;
-    const [user, setUser] = useState(userManager.identity);
+    const [user, setUser] = useState((_a = userManager.identity) !== null && _a !== void 0 ? _a : {
+        display_name: '',
+        color: '',
+        initials: '',
+        avatar_url: ''
+    });
+    const [imgError, setImgError] = useState(false);
     useEffect(() => {
         const updateUser = () => {
-            setUser(userManager.identity);
+            var _a;
+            setUser((_a = userManager.identity) !== null && _a !== void 0 ? _a : {
+                display_name: '',
+                color: '',
+                initials: '',
+                avatar_url: ''
+            });
         };
         userManager.userChanged.connect(updateUser);
         return () => {
             userManager.userChanged.disconnect(updateUser);
         };
     }, [userManager]);
-    return (React.createElement("div", { title: user.display_name, className: "jp-UserInfo-Icon", style: { backgroundColor: user.color }, onClick: onClick },
-        React.createElement("span", null, user.initials)));
+    const showImage = user.avatar_url && !imgError;
+    return (React.createElement("div", { title: user.display_name, className: "jp-UserInfo-Icon", style: !showImage ? { backgroundColor: user.color } : undefined, onClick: onClick }, showImage ? (React.createElement("img", { src: user.avatar_url, alt: user.display_name, onError: () => setImgError(true), style: {
+            width: '100%',
+            height: '100%',
+            borderRadius: '50%',
+            objectFit: 'cover',
+            cursor: 'pointer'
+        } })) : (React.createElement("span", null, user.initials))));
 }
 /**
  * React widget for the user details.

package/lib/cursors.d.ts

@@ -1,6 +1,7 @@
-import { Extension } from '@codemirror/state';
+import { Extension, Facet } from '@codemirror/state';
+import { User } from '@jupyterlab/services';
 import { Awareness } from 'y-protocols/awareness';
-import { Text } from 'yjs';
+import { RelativePosition, Text } from 'yjs';
 /**
  * Yjs document objects
  */
@@ -14,6 +15,45 @@ export type EditorAwareness = {
      */
     ytext: Text;
 };
+export interface ICursorState {
+    /**
+     * Cursor anchor
+     */
+    anchor: RelativePosition;
+    /**
+     * Cursor head
+     */
+    head: RelativePosition;
+    /**
+     * Whether the cursor is an empty range or not.
+     *
+     * Default `true`
+     */
+    empty?: boolean;
+    /**
+     * Whether the cursor is the primary one or not.
+     *
+     * Default `false`
+     */
+    primary?: boolean;
+}
+/**
+ * Awareness state definition
+ */
+export interface IAwarenessState extends Record<string, any> {
+    /**
+     * User identity
+     */
+    user?: User.IIdentity;
+    /**
+     * User cursors
+     */
+    cursors?: ICursorState[];
+}
+/**
+ * Facet storing the Yjs document objects
+ */
+export declare const editorAwarenessFacet: Facet<EditorAwareness, EditorAwareness>;
 /**
  * CodeMirror extension to display remote users cursors
  *

package/lib/cursors.js

@@ -7,7 +7,7 @@ import { createAbsolutePositionFromRelativePosition, createRelativePositionFromJ
 /**
  * Facet storing the Yjs document objects
  */
-const editorAwarenessFacet = Facet.define({
+export const editorAwarenessFacet = Facet.define({
     combine(configs) {
         return configs[configs.length - 1];
     }
@@ -77,6 +77,9 @@ const remoteCursorsLayer = layer({
     markers(view) {
         const { awareness, ytext } = view.state.facet(editorAwarenessFacet);
         const ydoc = ytext.doc;
+        if (!ydoc) {
+            return [];
+        }
         const cursors = [];
         awareness.getStates().forEach((state, clientID) => {
             var _a, _b, _c;
@@ -117,6 +120,9 @@ const userHover = hoverTooltip((view, pos) => {
     var _a;
     const { awareness, ytext } = view.state.facet(editorAwarenessFacet);
     const ydoc = ytext.doc;
+    if (!ydoc) {
+        return null;
+    }
     for (const [clientID, state] of awareness.getStates()) {
         if (clientID === awareness.doc.clientID) {
             continue;
@@ -160,6 +166,9 @@ const remoteSelectionLayer = layer({
     markers(view) {
         const { awareness, ytext } = view.state.facet(editorAwarenessFacet);
         const ydoc = ytext.doc;
+        if (!ydoc) {
+            return [];
+        }
         const cursors = [];
         awareness.getStates().forEach((state, clientID) => {
             var _a, _b, _c;

package/lib/menu.js

@@ -46,16 +46,33 @@ export class RendererUserMenu extends MenuBar.Renderer {
      * @returns A virtual element representing the item label.
      */
     _createUserIcon() {
-        if (this._user.isReady && this._user.identity.avatar_url) {
+        const identity = this._user.identity;
+        if (this._user.isReady && (identity === null || identity === void 0 ? void 0 : identity.avatar_url)) {
             return h.div({
                 className: 'lm-MenuBar-itemIcon jp-MenuBar-imageIcon'
-            }, h.img({ src: this._user.identity.avatar_url }));
+            }, h.img({
+                src: identity.avatar_url,
+                onerror: (event) => {
+                    const img = event.currentTarget;
+                    const parent = img.parentElement;
+                    if (parent) {
+                        // Clear broken image and fallback to initials with colors
+                        parent.textContent = '';
+                        parent.style.backgroundColor = identity.color || '';
+                        const span = document.createElement('span');
+                        span.textContent = identity.initials;
+                        parent.appendChild(span);
+                        parent.classList.remove('jp-MenuBar-imageIcon');
+                        parent.classList.add('jp-MenuBar-anonymousIcon');
+                    }
+                }
+            }));
         }
-        else if (this._user.isReady) {
+        else if (this._user.isReady && identity) {
             return h.div({
                 className: 'lm-MenuBar-itemIcon jp-MenuBar-anonymousIcon',
-                style: { backgroundColor: this._user.identity.color }
-            }, h.span({}, this._user.identity.initials));
+                style: { backgroundColor: identity.color }
+            }, h.span({}, identity.initials));
         }
         else {
             return h.div({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/collaboration",
-  "version": "4.3.0",
+  "version": "4.4.0-beta.0",
   "description": "JupyterLab - Real-Time Collaboration Widgets",
   "homepage": "https://github.com/jupyterlab/jupyter-collaboration",
   "bugs": {
@@ -58,7 +58,7 @@
   "devDependencies": {
     "@types/react": "~18.3.1",
     "rimraf": "^4.1.2",
-    "typescript": "~5.1.6"
+    "typescript": "~5.9.3"
   },
   "publishConfig": {
     "access": "public"

package/style/sidepanel.css

@@ -38,6 +38,7 @@
   border-radius: 50px;
   display: inline-flex;
   align-items: center;
+  cursor: pointer;
 }
 
 .jp-UserInfo-Icon span {