@jupyter/collaboration 5.0.3 → 5.0.4

package/lib/cursors.d.ts

@@ -54,6 +54,13 @@ export interface IAwarenessState extends Record<string, any> {
  * Facet storing the Yjs document objects
  */
 export declare const editorAwarenessFacet: Facet<EditorAwareness, EditorAwareness>;
+/**
+ * Build the avatar and name badge shown for a collaborator.
+ *
+ * @param user The collaborator identity, if known
+ * @returns The badge element
+ */
+export declare function collaboratorPill(user: User.IIdentity | undefined): HTMLDivElement;
 /**
  * CodeMirror extension to display remote users cursors
  *

package/lib/cursors.js

@@ -1,7 +1,7 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
-import { Annotation, EditorSelection, Facet } from '@codemirror/state';
-import { EditorView, hoverTooltip, layer, RectangleMarker, tooltips, ViewPlugin } from '@codemirror/view';
+import { Annotation, EditorSelection, Facet, StateField } from '@codemirror/state';
+import { EditorView, hoverTooltip, layer, RectangleMarker, showTooltip, tooltips, ViewPlugin } from '@codemirror/view';
 import { JSONExt } from '@lumino/coreutils';
 import { createAbsolutePositionFromRelativePosition, createRelativePositionFromJSON, createRelativePositionFromTypeIndex } from 'yjs';
 /**
@@ -18,7 +18,8 @@ export const editorAwarenessFacet = Facet.define({
 const remoteSelectionTheme = EditorView.baseTheme({
     '.jp-remote-cursor': {
         borderLeft: '1px solid black',
-        marginLeft: '-1px'
+        marginLeft: '-1px',
+        pointerEvents: 'none'
     },
     '.jp-remote-cursor.jp-mod-primary': {
         borderLeftWidth: '2px'
@@ -29,13 +30,205 @@ const remoteSelectionTheme = EditorView.baseTheme({
     '.cm-tooltip': {
         border: 'none'
     },
-    '.cm-tooltip .jp-remote-userInfo': {
-        color: 'var(--jp-ui-inverse-font-color0)',
-        padding: '0px 2px'
+    '.jp-remote-userFlag': {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '4px',
+        maxWidth: '140px',
+        padding: '2px 6px 2px 2px',
+        background: 'var(--jp-layout-color1)',
+        color: 'var(--jp-ui-font-color1)',
+        border: '1px solid',
+        borderRadius: '10px',
+        fontSize: '11px',
+        lineHeight: '1.2',
+        whiteSpace: 'nowrap',
+        boxShadow: 'var(--jp-elevation-z2)',
+        pointerEvents: 'none',
+        userSelect: 'none',
+        opacity: '1',
+        transition: 'opacity 300ms ease'
+    },
+    '.jp-remote-userFlag.jp-mod-idle': {
+        opacity: '0'
+    },
+    '.cm-tooltip.jp-remote-userFlag-host': {
+        background: 'none'
+    },
+    '.jp-remote-userFlag-avatar': {
+        width: '16px',
+        height: '16px',
+        flex: '0 0 auto',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        borderRadius: '100%',
+        color: 'var(--jp-ui-inverse-font-color1)',
+        fontSize: '8px'
+    },
+    '.jp-remote-userFlag-avatar img': {
+        width: '100%',
+        height: '100%',
+        objectFit: 'cover'
+    },
+    '.jp-remote-userFlag-name': {
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
     }
 });
 // TODO fix which user needs update
 const remoteSelectionsAnnotation = Annotation.define();
+/**
+ * How long a collaborator flag stays visible after their last edit.
+ */
+const FLAG_IDLE_MS = 2000;
+const collaborators = new WeakMap();
+function collaborator(awareness, clientID) {
+    let byClient = collaborators.get(awareness);
+    if (!byClient) {
+        byClient = new Map();
+        collaborators.set(awareness, byClient);
+    }
+    let entry = byClient.get(clientID);
+    if (!entry) {
+        entry = { at: 0 };
+        byClient.set(clientID, entry);
+    }
+    return entry;
+}
+function markActive(awareness, clientIDs) {
+    const now = Date.now();
+    for (const clientID of clientIDs) {
+        collaborator(awareness, clientID).at = now;
+    }
+}
+function isFlagVisible(awareness, clientID) {
+    return Date.now() - collaborator(awareness, clientID).at < FLAG_IDLE_MS;
+}
+const editTrackedDocs = new WeakSet();
+/**
+ * Mark edit authors from the Yjs clocks; awareness misses end-of-line typing.
+ */
+function trackRemoteEdits(awareness, ydoc) {
+    if (editTrackedDocs.has(ydoc)) {
+        return;
+    }
+    editTrackedDocs.add(ydoc);
+    // Before the observers, so the flag is up when the edit reaches the editor.
+    ydoc.on('beforeObserverCalls', (tr) => {
+        const authors = [];
+        tr.afterState.forEach((clock, clientID) => {
+            if (clientID !== ydoc.clientID &&
+                tr.beforeState.get(clientID) !== clock) {
+                authors.push(clientID);
+            }
+        });
+        if (authors.length > 0) {
+            markActive(awareness, authors);
+        }
+    });
+}
+/**
+ * Build the avatar and name badge shown for a collaborator.
+ *
+ * @param user The collaborator identity, if known
+ * @returns The badge element
+ */
+export function collaboratorPill(user) {
+    const dom = document.createElement('div');
+    dom.className = 'jp-remote-userFlag';
+    renderPill(dom, user);
+    return dom;
+}
+function renderPill(dom, user) {
+    var _a, _b, _c, _d;
+    dom.replaceChildren();
+    dom.style.borderColor = (_a = user === null || user === void 0 ? void 0 : user.color) !== null && _a !== void 0 ? _a : 'darkgrey';
+    const avatar = document.createElement('div');
+    avatar.className = 'jp-remote-userFlag-avatar';
+    if (user === null || user === void 0 ? void 0 : user.avatar_url) {
+        const img = document.createElement('img');
+        img.src = user.avatar_url;
+        img.alt = '';
+        img.onerror = () => {
+            var _a, _b;
+            avatar.style.backgroundColor = (_a = user.color) !== null && _a !== void 0 ? _a : 'darkgrey';
+            avatar.textContent = (_b = user.initials) !== null && _b !== void 0 ? _b : '';
+        };
+        avatar.appendChild(img);
+    }
+    else {
+        avatar.style.backgroundColor = (_b = user === null || user === void 0 ? void 0 : user.color) !== null && _b !== void 0 ? _b : 'darkgrey';
+        avatar.textContent = (_c = user === null || user === void 0 ? void 0 : user.initials) !== null && _c !== void 0 ? _c : '';
+    }
+    const name = document.createElement('span');
+    name.className = 'jp-remote-userFlag-name';
+    name.textContent = (_d = user === null || user === void 0 ? void 0 : user.display_name) !== null && _d !== void 0 ? _d : 'Anonymous';
+    dom.append(avatar, name);
+}
+function drawFlag(awareness, clientID) {
+    const entry = collaborator(awareness, clientID);
+    const dom = collaboratorPill(entry.user);
+    let shown = entry.user;
+    const sync = () => {
+        if (!JSONExt.deepEqual({ ...shown }, { ...entry.user })) {
+            shown = entry.user;
+            renderPill(dom, shown);
+        }
+        dom.classList.toggle('jp-mod-idle', !isFlagVisible(awareness, clientID));
+    };
+    sync();
+    return { dom, update: sync };
+}
+function flagCreator(awareness, clientID) {
+    var _a;
+    const entry = collaborator(awareness, clientID);
+    return ((_a = entry.create) !== null && _a !== void 0 ? _a : (entry.create = () => drawFlag(awareness, clientID)));
+}
+function collaboratorFlags(state) {
+    const { awareness, ytext } = state.facet(editorAwarenessFacet);
+    const ydoc = ytext.doc;
+    if (!ydoc) {
+        return [];
+    }
+    const flags = [];
+    awareness.getStates().forEach((remote, clientID) => {
+        var _a;
+        if (clientID === awareness.doc.clientID) {
+            return;
+        }
+        const cursor = (_a = remote.cursors) === null || _a === void 0 ? void 0 : _a.find(c => { var _a; return (_a = c.primary) !== null && _a !== void 0 ? _a : true; });
+        if (!(cursor === null || cursor === void 0 ? void 0 : cursor.head)) {
+            return;
+        }
+        const head = createAbsolutePositionFromRelativePosition(cursor.head, ydoc);
+        if ((head === null || head === void 0 ? void 0 : head.type) !== ytext) {
+            return;
+        }
+        collaborator(awareness, clientID).user = remote.user;
+        flags.push({
+            pos: Math.min(head.index, state.doc.length),
+            above: true,
+            create: flagCreator(awareness, clientID)
+        });
+    });
+    return flags;
+}
+/**
+ * Extension showing a fading name flag above each remote cursor
+ */
+const remoteCursorFlags = StateField.define({
+    create: collaboratorFlags,
+    update(flags, tr) {
+        return tr.docChanged ||
+            tr.annotation(remoteSelectionsAnnotation) !== undefined
+            ? collaboratorFlags(tr.state)
+            : flags;
+    },
+    provide: field => showTooltip.computeN([field], state => state.field(field))
+});
 /**
  * Wrapper around RectangleMarker to be able to set the user color for the remote cursor and selection ranges.
  */
@@ -127,6 +320,9 @@ const userHover = hoverTooltip((view, pos) => {
         if (clientID === awareness.doc.clientID) {
             continue;
         }
+        if (isFlagVisible(awareness, clientID)) {
+            continue;
+        }
         for (const cursor of (_a = state.cursors) !== null && _a !== void 0 ? _a : []) {
             if (!(cursor === null || cursor === void 0 ? void 0 : cursor.head)) {
                 continue;
@@ -136,18 +332,18 @@ const userHover = hoverTooltip((view, pos) => {
                 continue;
             }
             // Use some margin around the cursor to display the user.
-            if (head.index - 3 <= pos && pos <= head.index + 3) {
+            const index = Math.min(head.index, view.state.doc.length);
+            if (index - 3 <= pos && pos <= index + 3) {
                 return {
-                    pos: head.index,
+                    pos: index,
                     above: true,
                     create: () => {
-                        var _a, _b, _c, _d;
-                        const dom = document.createElement('div');
-                        dom.classList.add('jp-remote-userInfo');
-                        dom.style.backgroundColor = (_b = (_a = state.user) === null || _a === void 0 ? void 0 : _a.color) !== null && _b !== void 0 ? _b : 'darkgrey';
-                        dom.textContent =
-                            (_d = (_c = state.user) === null || _c === void 0 ? void 0 : _c.display_name) !== null && _d !== void 0 ? _d : 'Anonymous';
-                        return { dom };
+                        const dom = collaboratorPill(state.user);
+                        return {
+                            dom,
+                            overlap: true,
+                            mount: () => { var _a; return (_a = dom.parentElement) === null || _a === void 0 ? void 0 : _a.classList.add('jp-remote-userFlag-host'); }
+                        };
                     }
                 };
             }
@@ -156,7 +352,7 @@ const userHover = hoverTooltip((view, pos) => {
     return null;
 }, {
     hideOn: (tr, tooltip) => !!tr.annotation(remoteSelectionsAnnotation),
-    hoverTime: 0
+    hoverTime: 1
 });
 /**
  * Extension defining a new editor layer storing the remote selections
@@ -206,15 +402,32 @@ const showCollaborators = ViewPlugin.fromClass(class {
     constructor(view) {
         this.editorAwareness = view.state.facet(editorAwarenessFacet);
         this._listener = ({ added, updated, removed }) => {
-            const clients = added.concat(updated).concat(removed);
-            if (clients.findIndex(id => id !== this.editorAwareness.awareness.doc.clientID) >= 0) {
+            const { awareness } = this.editorAwareness;
+            const clients = added
+                .concat(updated)
+                .concat(removed)
+                .filter(id => id !== awareness.doc.clientID);
+            if (clients.length > 0) {
+                markActive(awareness, clients);
                 // Trick to get the remoteCursorLayers to be updated
                 view.dispatch({ annotations: [remoteSelectionsAnnotation.of([])] });
+                this.scheduleFade(view);
             }
         };
+        const ydoc = this.editorAwareness.ytext.doc;
+        if (ydoc) {
+            trackRemoteEdits(this.editorAwareness.awareness, ydoc);
+        }
         this.editorAwareness.awareness.on('change', this._listener);
     }
+    scheduleFade(view) {
+        clearTimeout(this._fadeTimer);
+        this._fadeTimer = setTimeout(() => {
+            view.dispatch({ annotations: [remoteSelectionsAnnotation.of([])] });
+        }, FLAG_IDLE_MS + 50);
+    }
     destroy() {
+        clearTimeout(this._fadeTimer);
         this.editorAwareness.awareness.off('change', this._listener);
     }
     /**
@@ -222,6 +435,9 @@ const showCollaborators = ViewPlugin.fromClass(class {
      */
     update(update) {
         var _a;
+        if (update.docChanged) {
+            this.scheduleFade(update.view);
+        }
         if (!update.docChanged && !update.selectionSet) {
             return;
         }
@@ -270,6 +486,7 @@ const showCollaborators = ViewPlugin.fromClass(class {
             remoteSelectionTheme,
             remoteCursorsLayer,
             remoteSelectionLayer,
+            remoteCursorFlags,
             userHover,
             // As we use relative positioning of widget, the tooltip must be positioned absolutely
             // And we attach the tooltip to the body to avoid overflow rules

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyter/collaboration",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "description": "JupyterLab - Real-Time Collaboration Widgets",
   "homepage": "https://github.com/jupyterlab/jupyter-collaboration",
   "bugs": {